#about{margin: 0 auto;  }

#about>.profile{margin: 100px auto;}
#about>.profile .display>.introduction{width: 50%; text-align: left;}
#about>.profile .display>.introduction>.title{font-size: 5rem;font-weight: bold; line-height: 7rem; color: #18181b;}
#about>.profile .display>.introduction>.content{ padding: 50px 0; font-size: 1.8rem; line-height: 3.2rem; color: #333;}
#about>.profile .display>.introduction>.content>p{margin-bottom: 30px;}
#about>.profile .display>.img{width: 40%;text-align: right;}
#about>.profile .display>.img>img{width: 100%;height: auto;}

#about>.statistics{margin: 0 auto; padding: 150px 0; background:url("../image/statistics_bg.jpg") no-repeat; background-position: 0 0; background-attachment: fixed;}
#about>.statistics .display{margin: 0 auto;}
#about>.statistics .display>.item{display: block; float: left; width: 20%; text-align: center;}
#about>.statistics .display>.item>.ico{text-align: center;}
#about>.statistics .display>.item>.ico img{display: inline-block;margin: 0 auto; width: 64px; height: auto;}
#about>.statistics .display>.item>.num{ padding: 10px 0; font-family: Arial; font-size:4.2rem;font-weight: bold; color: #fff;}
#about>.statistics .display>.item>.num>em{font-style: normal;}
#about>.statistics .display>.item>.tit{font-size: 1.6rem; color: #fff;}

#about>.advantage{margin: 0 auto; padding: 100px 0; background: #fff; box-shadow: 0 15px 40px inset rgba(0,0,0,.3);}
#about>.advantage .display{ margin: 0 auto;}
#about>.advantage .display>.title{font-size: 5.6rem; font-weight: bold; color: #18181b; text-align: center;}
#about>.advantage .display>.container{margin: 0 auto; padding: 50px 0;}
#about>.advantage .display>.container>.item{display: block;float: left; width: 33.33%; padding: 50px 0; border-radius: 8px; box-sizing: border-box; text-align: center; transition: all .35s;}
#about>.advantage .display>.container>.item>.ico{text-align: center; transition: all .6s;}
#about>.advantage .display>.container>.item>.ico img{width: 100px;height: auto;}
#about>.advantage .display>.container>.item>.tit{font-size: 2.4rem; color: #18181b; font-weight: bold;}
#about>.advantage .display>.container>.item:hover{ box-shadow: 0 5px 15px rgba(0,0,0,.1);}
#about>.advantage .display>.container>.item:hover .ico{transform: rotateY(360deg);}


@media only screen and (max-width: 1280px){

    #about>.profile .display>.introduction>.title{font-size: 3.6rem; line-height: 5rem;}
    #about>.profile .display>.introduction>.content{font-size: 1.6rem; line-height: 2.8rem;}

    #about>.advantage .display>.title{font-size: 4.6rem;}

    #about>.advantage .display>.container>.item>.tit{font-size: 2rem;}

}


@media only screen and (max-width: 960px){

    #about>.profile .display>.introduction{width: 100%; float: none;}
    #about>.profile .display>.introduction>.title{text-align: center;}
    #about>.profile .display>.img{width: 100%;float: none;}



    #about>.statistics .display>.item>.ico img{width: 56px;}
    #about>.statistics .display>.item>.num{font-size:3.6rem;}
    #about>.statistics .display>.item>.tit{font-size: 1.4rem;}


    #about>.advantage .display>.title{font-size: 4rem;}
    #about>.advantage .display>.container>.item>.tit{font-size: 1.8rem;}

}
@media only screen and (max-width: 860px){

    #about>.statistics .display{ text-align: center;}
    #about>.statistics .display>.item{ display: inline-block; width: 30%; float: none; margin-bottom: 30px;}


    #about>.advantage .display>.title{font-size: 3.2rem;}
    #about>.advantage .display>.container>.item>.tit{font-size: 1.6rem;}


}





@media only screen and (max-width: 640px){

    #about>.profile .display>.introduction>.title{font-size: 2.8rem; line-height: 4rem;}
    #about>.profile .display>.introduction>.content{font-size: 1.4rem; line-height: 2.4rem;}

    #about>.statistics{padding: 80px 0;}
    #about>.statistics .display>.item{ width: 28%; }
    #about>.statistics .display>.item>.ico img{ width: 48px;}
    #about>.statistics .display>.item>.num{ font-size:2.8rem;}
    #about>.statistics .display>.item>.tit{font-size: 1.4rem; color: #fff;}



    #about>.advantage{padding: 50px 0;}
    #about>.advantage .display>.title{font-size: 2.8rem;}
    #about>.advantage .display>.container{padding: 30px 0;}
    #about>.advantage .display>.container>.item>.ico img{width: 70px;}
    #about>.advantage .display>.container>.item>.tit{font-size: 1.4rem;}

}
@media only screen and (max-width: 520px){


    #about>.profile{margin: 30px auto;}

    #about>.statistics .display>.item>.tit{font-size: 1.2rem;}
    #about>.advantage .display>.title{font-size: 2.4rem;}
    #about>.advantage .display>.container>.item{padding: 30px 0; width: 50%;}
    #about>.advantage .display>.container>.item>.tit{font-size: 1.2rem;}
}