html{overflow-x: hidden;}
div.mainBanner{
    height:580px;
    position: relative;
    background-image: url(../img/mainbanner01.jpg);
    background-size: cover;
    background-position: center;
}
div.content{
    width:100%;
    float:left;
}

div.content>section{
    width:1080px;
    margin:0 auto;
}
div.content>section>article{
    width:320px;
    height:240px;
    float:left;
    margin:40px 10px;
    background-size: cover;
}
div.content>section>.at1{
    background-image: url(../img/article01.png);
}
div.content>section>.at2{
    background-image: url(../img/article02.png);
}
div.content>section>.at3{
    background-image: url(../img/article03.png);
}
div.content>section>article>div{
    width:140px;
    height:140px;
    border-radius: 100px;
    background-color: #231816;
    margin:45px auto;
    color:#fff;
    text-align: center;
    line-height: 140px;
    font-size:1.500em;
    font-weight:bold;
}
div.content>section>article>div>a{
    display: block;
}
div.content>section>article>div:hover{
    width:160px;
    height:160px;
    line-height: 160px;
    transition: 0.3s;
}
@media all and (min-device-width:320px) and (max-width:1080px){
body{overflow-x: hidden;}
div.mainBanner{
    height:280px;
}
div.content>section{
    width:320px;
}

}