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');
}

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

#text {
    text-align: center;
}

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

#picture {
    text-align: center;
}

#picture ul {
    list-style: none;
}

.pic {
    width: 50%;
    height: auto;
    margin: 10px;
}

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) {
    #title {
        display: none;
    }
    
    #imgBan {
        display: block;
        position: relative;
        height: 400px;
        background-image: url("../image/market_ban.JPG");
        background-size: cover;
    }
    
    #picture ul {
        display: inline-block;
        vertical-align: top;
        width: 15%;
    }
    
    #text {
        width: 60%;
        margin: auto;
    }
    
    #text p {
        text-align: center;
    }
    
    .pic {
        width: 90%;
        margin: 4% 0;
    }
    
    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
    }
}