/* about us */
.about-list{ width: 100%; float: left; margin: .58rem 0 0; font-family: 'calibri'; }
.about-list .company{ width: 45%; float: left;}
.about-list .company h2{ width: 100%; float: left; color: #00458e; font-size: .24rem; line-height: .36rem; text-transform: uppercase; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif;}
.about-list .company p{ width: 100%; float: left; color: #898a89; font-size: .14rem; line-height: .22rem; margin: .16rem 0 0;}

.about-list .adv{ width: 48%; float: right; position: relative;}
.about-list .adv h2{ width: 100%; float: left; color: #00458e; font-size: .24rem; line-height: .36rem; text-transform: uppercase; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif;}
.about-list .adv ul{ float: left; width: 100%; margin-top: 12px;}
.about-list .adv ul li{ width: 100%; float: left; height: 52px; position: relative;}
.about-list .adv ul li h3{ float: left; font-size: 14px; line-height: 30px;}
.about-list .adv ul li span{left: 0;top: 0;height: 47px;position: absolute;box-sizing: border-box;z-index: 1;width: 0;transition:all 3s ease;}
.about-list .adv ul li span i{width: 580px;text-align: left;position: absolute; height: 48px;float: left;z-index: 1;line-height: 28px;font-size: 14px; color: #595757;}
.about-list .adv ul li span i b{ font-weight: unset;}
.about-list .adv ul li:nth-child(4) span i b{ display: none;}
.about-list .adv ul li span::after{content: "";width: 100%;position: absolute;bottom: 0;left: 0;height: 13px;background: url("../images/gundong.jpg") #f4f4f4 right;float: left;z-index: 1;}
.about-list img{ width: 100%; float: left; margin-top: 42px;}

.middle{ width: 100%; float: left; text-align: center; background: url("../images/middle.jpg") center no-repeat; height: 3.13rem; margin-top: 1rem; position: relative;}
.middle .text{ position: absolute; top: 50%; left: 0; text-align: center; transform: translateY(-50%); width: 100%;}
.middle h2,
.middle h3{ font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; color: #fff; width: 100%; float: left;}
.middle h2{ font-size: .36rem; opacity: 0.5; line-height: .46rem;}
.middle h3{ font-size: .64rem; line-height: .8rem;}
.middle a{ margin: .12rem 0 0 0; display: inline-block; width: 4rem; height: .67rem; line-height: .67rem; font-size: .14rem; color: #fff; background: #A9C27E; text-transform: uppercase; }
.middle a:hover{ background: #00458e;}

.bottom{ width: 100%; float: left; margin: .64rem 0 .92rem 0;}
.bottom .left{ width: 51%; float: left; box-sizing: border-box; padding-right: 1rem;}
.bottom .left h2{  width: 100%; float: left; color: #03458e; font-family: "TCCM","puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 34px;}
.bottom .n-a-adv{ width: 100%; float: left; margin: 0 0 0;}
.bottom .n-a-adv ul{ width: 100%; float: left;}
.bottom .n-a-adv ul li{ height: 100%; float: left; box-sizing: border-box; padding: 0 0 0 .5rem; position: relative;}
.bottom .n-a-adv ul li h4{ font-size: .16rem; color: #000; text-transform: uppercase; line-height: .34rem; width: 100%; float: left;}
.bottom .n-a-adv ul li i{ font-family: "iconfont1","tx-icon"; width: .34rem; height: .34rem; background: #03458e; color: #fff; border-radius: 50%; font-size: .18rem; text-align: center; line-height: .34rem; float: left; position: absolute; top: 0; left: 0; }
.bottom .n-a-adv ul span{ width: 100%; float: left; color:#898a89; height: .66rem; overflow: hidden; font-size: .14rem; line-height: .22rem; margin:0;}

.bottom .right{ float: left; width: 48%;}
.bottom .right h2{ color: #03458e; font-family: "TCCM","puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 34px;}
.bottom .right .list{ width: 100%; overflow: hidden; float: left; position: relative;}
.bottom .right .list .bd{ float: left; width: 100%;}
.bottom .right img { width: 100%; float: left;}
.bottom .right .swiper-pagination{ position: relative; margin-top: 10px; float: left;}
.bottom .right .swiper-pagination span{ margin: 0 3px; float: left; width: 10px; height: 10px;}
.bottom .right .prev,.bottom .right .next{ width: 62px; height: 62px; float: right; position: absolute; top: 50%; margin-top: -31px; text-align: center; line-height: 62px; font-family: iconfont; font-size: 18px; font-weight: bold; color: #fff; right: 0; z-index: 1113; background: #03458e; opacity:0}
.bottom .right .prev{ right: auto; left: 0;}
.bottom .right:hover .prev,.bottom .right:hover .next{ opacity: 0.7;}
/* about us end */

@media screen and (max-width: 734px){
    .about-list{ margin: .3rem 0 0;}
    .about-list .company{ width: 100%; box-sizing: border-box; padding: .3rem .2rem;}
    .about-list .company h2{ font-size: .36rem; text-align: center;}

    .about-list .adv{ width: 100%; background: #eee; box-sizing: border-box; padding: .3rem .2rem;}
    .about-list .adv h2{ font-size: .36rem;}
    .about-list .adv ul{ margin-top: .12rem;}
    .about-list .adv ul li{ height: .52rem;}
    .about-list .adv ul li h3{ font-size: .14rem; line-height: .3rem;}
    .about-list .adv ul li span{ height: .47rem;}
    .about-list .adv ul li span i{ width: 90vw; height: .48rem; line-height: .28rem; font-size: .14rem;}
    .about-list .adv ul li span::after{ height: .13rem;}
    .about-list img{ margin-top: 0;}

    .middle{ margin-top: 0;}
    .middle h2{ font-size: .24rem; opacity: 0.5; line-height: .46rem;}
    .middle h3{ font-size: .42rem; line-height: .42rem;}
    .middle a{width: 60vw; height: .48rem; line-height: .48rem; font-size: .16rem;}

    .bottom{ width: 100%; float: left; margin: 0;}
    .bottom .left{ width: 100%; float: left; box-sizing: border-box; padding: .3rem .2rem;}
    .bottom .left h2{ font-size: .36rem; margin-bottom: .2rem;}
    .bottom .n-a-adv ul li{ margin: .1rem 0;}
    .bottom .n-a-adv ul span{ height: auto;}
    
    .bottom .right{ float: left; width: 100%; background: #eee; padding: .3rem .2rem .2rem; box-sizing: border-box;}
    .bottom .right h2{ font-size: .36rem; margin-bottom: .2rem;}
    .bottom .right img { width: 100%; float: left;}
}