body{margin: 0; padding: 0;}

@font-face {
    font-family: font1;
    src: url('../font/font1.woff2');
}
@font-face {
    font-family: font2;
    src: url('../font/font2.woff2');
}
@font-face {
    font-family: font3;
    src: url('../font/font3.woff2');
}

#imgBan {
    text-align: center;
}

#imgBan  h3 {
    color: #1a1a1a;
    font-family: font2, sans-serif;
    background-color: #595959;
    color: #fff;
    height: 28px;
    padding: 17px;
    text-align: left;
}

#navList {
    display: none;
}

#text {
    text-align: center;
}

#text h4 {
    width: 80%;
    margin:20px auto;
    text-align: left;
    font-family: font1, sans-serif;
    color: #1a1a1a;
}

#text p {
    width: 80%;
    margin: 20px auto;
    text-align: left;
    font-family: font1, sans-serif;
    color: #1a1a1a;
}

#list {
    background-color: #085296;
    text-align: center;
    padding: 20px;
}

#list h4 {
    color: #fff;
    font-family: font2, sans-serif;
    width: 90%;
    margin: auto;
    display: inline-block;
    text-align: left;
}

#list ul {
    width: 90%;
    margin: auto;
}

#list ul li {
    color: #fff;
    font-family: font1, sans-serif;
    text-align: left;
    width: 85%;
    margin: 5px auto;
}

#list hr {
    width: 95%;
    margin: auto;
}

footer {
    background-color: #085296;
    text-align: center;
}

footer small, ul {
    display: block;
}

footer small {
    display: inline-block;
    color: #fff;
    font-family: font1, sans-serif;
    margin: 15px auto;
}

footer ul {
    list-style: none;
}

footer ul li {
    display: inline-block;
    margin: 10px 7px;
}

@media only screen and (min-width: 1366px) {
    #imgBan {
        position: relative;
        height: 400px;
        background-image: url("../image/industrialHBan.png");
        background-size: cover;
    }
    
    #imgBan h3 {
        position: absolute;
        background-color: rgba(51, 51, 51, 0.5);
        vertical-align: bottom;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 17px 0;
    }
    
    #navList, #text, #list {
        display: inline-block;
        vertical-align: top;
    }
    
    #navList{
        width: 15%;
        margin-top: 100px;
    }
    
    #navList ul {
        list-style: none;
    }
    
    #navList ul li {
        height: 40px;
    }
    
    #navList ul li:hover {
        background-color: #ccc;
    }
    
    #navList ul li a {
        display: inline-block;
        color: #1a1a1a;
        font-family: font1, sans-serif;
        text-decoration: none;
        margin: 10px;
        float: left;
    }
    
    #text {
        width: 25%;
    }
    
    #list {
        width: 20%;
        margin-bottom: 8%;
    }
    
    #list hr {
        display: none;
    }
    
    footer {
        width: 100%;
        height: 60px;
    }
    
    footer small, footer ul {
        display: inline-block;
    }
    
    footer small {
        float: left;
        margin: 22px;
    }
    
    footer ul {
        float: right;
        margin: 8px 10px;
    }
    
    footer ul li {
        margin: 10px
    }
}