/*
    index
*/
.banner{ width: 100%; height: 700px; position: relative; overflow: hidden}
.banner video{ width: 120%; height: 120%; margin: -5% 0 0 -10%; display: block;}
.icon-scrolldown{ width: 80px; height: 80px;}
.banner .cover{ width: 100%; height: 100%; position: absolute; top:0; left: 0; background-color: rgba(0,0,0,0.2);}
.banner .icon-scrolldown{ position: absolute; bottom: 40px; left: 50%; margin-left: -40px;}
.banner .btn-play{ width: 24%; position: absolute; top:45%; left: 38%; display: none;}
.banner .btn-play img{ width: 100%;}

.aboutus-content{ font-size: 16px; color: #4a4a4a; text-align: center; line-height:40px; margin-top: 60px;}
.aboutus-btn-more{ font-size: 18px; color: #01619f; border: 1px solid #b8b8b8; border-radius: 40px; padding: 8px 50px; text-decoration: none; margin: 50px auto; display: block; width: 180px;}

.certificate-list{ margin-top: 110px; overflow: hidden;}
.certificate-list li{ width: 350px; float: left; margin-right: 175px;}
.certificate-list li:last-child{ margin-right: 0;}
.certificate-list li>div{ margin-left: 35px; width: 215px;}
.certificate-list li div h3{ color: #333333; font-size: 14px; margin-bottom: 10px; margin-top: 0;}
.certificate-list li div div{ color: #808080; font-size: 12px; margin-bottom: 10px;}
.certificate-list li div a{ color: #01619f; font-size: 12px; margin-bottom: 10px;}
.certificate-list li div a .icon-more{ margin-right: 10px; vertical-align: -3px;}

.departs-list{ margin-top: 110px; overflow: hidden;min-width: 1300px;}
.departs-list li{ width: 315px; height: 380px; position: relative; float: left; margin-right: 13px;}
.departs-list li:last-child{ margin-right: 0;}
.departs-list li>img{ width: 100%;}
.departs-list li a{ position: absolute; bottom: 50px; left: 40px;}
.departs-list li a:after{ content: ""; width: 60px; height: 1px; background-color: #FFF; position: absolute; top: 36px; left: 0;}
.departs-list li a p{ font-size: 24px; color: #FFF; margin-bottom: 5px;}
.departs-list li a div{ font-size: 12px; color: #FFF;}

.sale-area-img{ height: 680px; padding: 0; background-color: #01619f;}
.sale-area-img ul{ width: 100%; height: 100%; position: relative;}
.sale-area-img li{ width: 100%; height: 100%; display: none; background-repeat: no-repeat; background-position: right bottom; background-size: cover;}
.sale-area-info{ height: 680px; background-color: #01619f; display: flex; flex-direction: column;justify-content: center;}
.aside-content{ width: 70%; margin: 0 auto;}
.aside-content h3{ margin: 0 0 25px 0; font-size: 34px; color: #FFF;}
.aside-content div{ margin: 0 0 70px 0; color: #FFF; line-height: 170%; font-size: 18px;}
.aside-content a{ border: 1px solid #c0d8e7; padding: 8px 26px; color: #FFF; font-size: 16px;}

.news-area-info{ height: 390px; background-color: #01619f; display: flex; flex-direction: column;justify-content: center;}
.news-area-info .aside-content{ margin: 0 30%;}


.culture-list{ margin-top: 60px; margin-bottom: 130px; overflow: hidden;}
.culture-list li{ width: 426px; height: 316px; float: left; margin-right: 10px;}
.culture-list li img{ width: 100%;}
.culture-list li:last-child{margin-right: 0;}

.newsframe{ margin: 70px 0 0 230px; overflow: hidden;}
.newsframe .nlist{ width: 3500px; overflow: hidden;}
.newsframe .nlist li{ width: 270px; padding: 0 20px; border: 1px solid #bfbfbf; float: left; margin-right: 30px;}
.newsframe .nlist li h3{ font-size: 18px; margin-bottom: 45px; overflow: hidden; height: 38px;}
.newsframe .nlist li h3 a{ color: #141414; text-decoration: none;}
.newsframe .nlist li div{ color: #808080; font-size: 14px; margin-bottom: 45px; height: 80px; overflow: hidden;}
.newsframe .nlist li p{ color: #141414; font-size: 14px;font-weight: bold;}

.newbtn{ width: 120px; position: absolute; top: 150px; left: 60px;}
.newbtn p{ font-size: 30px; text-align: center;}
.newbtn p span{ color: #01619f;}
.newbtn a{ display: block; width: 90px; color: #01619f; font-size: 12px; margin: 10px 0; text-decoration: none;}
.newbtn .next{ background: url('../images/arrow-right.png') no-repeat; background-position: center right;}
.newbtn .prev{ text-align: right; background: url('../images/arrow-left.png') no-repeat; background-position: center left;}


/*
    product
*/
.pro-classify{ margin-top: 70px;}
.pro-classify>ul>li{ width: 20%; float: left; position: relative;}
.pro-classify>ul>li .pc-lv1{display: block; background-color: #FFF; color: #4c4c4c; font-size: 24px; text-align: center; padding: 15px 0; border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-bottom: 2px solid #5da0d0;}
.pro-classify>ul>li:last-child .pc-lv1{border-right: 1px solid #e6e6e6;}
.pro-classify>ul>li .pc-lv1:hover,.pro-classify>ul>li.active .pc-lv1{ border: 1px solid #0172c1; background-color: #0172c1; color: #fff;}
.pro-classify>ul>li> ul{ width: 100%; background-color: #FFF; box-shadow:2px 2px 10px rgba(0,0,0,0.3); position: absolute;top: 66px; left: 0; display: none; z-index: 100;}
.pro-classify>ul>li:hover ul{display: block;}
.pro-classify>ul>li> ul li{ text-align: center; border: 1px solid #e6e6e6; border-bottom: none; padding: 20px 0;}
.pro-classify>ul>li> ul li a{ color: #4c4c4c; font-size: 18px; font-weight: bold;}
.pro-classify>ul>li> ul li.active,.pro-classify>ul>li> ul li:hover{ background-color: #fafafa;}
.pro-classify>ul>li> ul li.active a,.pro-classify>ul>li> ul li:hover a{color: #0172c1;}

.pro-banner{ width: 100%; margin: 40px 0;}
.pro-banner img{ width: 100%;}

.pro-list{margin: 0 -10px;}
.pro-list a{ float: left; width: 290px; margin:0 10px 30px 10px;}
.pro-list a div{ width: 100%; border: 1px solid #e6e6e6; margin-bottom: 10px;overflow: hidden; position: relative;
    -webkit-transition: .1s transform;
    -moz-transition: .1s transform;
    -ms-transition: .1s transform;
    -o-transition: .1s transform;
    transition: .1s transform;}
.pro-list a div:before{content:"";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;}
.pro-list a div img{ width: 100%; height: 100%; position: absolute; top: 0;left: 0;}
.pro-list a div:hover{
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}
.pro-list a p{color: #4a4a4a; font-size: 24px; text-align: center;}

.prodetail .img{ width: 440px; float: left; margin-right: 20px;}
.prodetail .img img{ width: 100%;}
.prodetail .procontent{ float: left; width: 760px;}
.prodetail .proname{ font-size: 30px; font-weight: bold; margin-bottom: 20px;}


/*
    company
*/
.auto-banner img{ width: 100%; }
.company-info{ column-count: 2;-webkit-column-count: 2;-moz-column-count: 2; column-gap:7em;-webkit-column-gap: 7em;-moz-column-gap:7em; line-height: 200%; font-size: 16px; text-align: justify;}

.company-culture div{ width: 550px;}


/*
    news
*/
.news-list{ border-top: 1px solid #9f9f9f; margin: 80px 0 50px 0;}
.news-list li{ padding: 24px 0; border-bottom: 1px solid #9f9f9f;}
.news-list li p{ color: #ababab; margin-bottom: 12px;}
.news-list li div{ font-size: 18px;}
.news-list li div a{ color: #4a4a4a;}

.newsdetail{ width: 1160px; margin: 50px auto;}
.news-title{ padding-bottom: 15px; border-bottom: 2px solid #cccccc; margin-bottom: 40px;}
.news-title p{ font-size: 20px; color: #2c2c2c; margin-bottom: 10px;}
.news-title div{ font-size: 24px; color: #0b0b0b;}


/*
    nets
*/
.netsframe{ margin: 60px 110px; padding-bottom: 70px; border-bottom: 1px solid #dddddd; overflow: hidden;}
.netsframe:last-child{ border-bottom: none;}
.netsframe dl{ width: 50%; float: left;}
.netsframe dl dt{ font-size: 28px; color: #01619f; margin-bottom: 30px;}
.netsframe dl dd{ font-size: 18px; margin-bottom: 10px;}
.netsframe .txt-size1{ width: 200px;}
.netsframe .txt-size2{ width: 400px;}
.netsframe .txt-size3{ width: 600px;}


/*
    nets
*/
.join-tab{margin-bottom: 30px;}
.join-tab li{ width: 50%; float: left; font-size: 18px; text-align: center; border: 2px solid #e1e1e1; border-bottom: 2px solid #71a1c0; border-left: none; padding: 12px 0;}
.join-tab li a{ color: #ababab;}
.join-tab li.active{ background-color: #01619f; border: 2px solid #01619f;}
.join-tab li.active a{ color: #FFF;}

.join-list{ margin-top: 40px; border-top: 1px solid #e5e5e5;}
.join-list ul li a{ display: block; border-bottom: 1px solid #e5e5e5; font-size: 20px; color: #111111; padding: 15px 0; position: relative;}
.join-list ul li a:after{ content: ""; width: 10px; height: 7px; background: url('../images/icons.png') no-repeat; background-position: -69px -95px; position: absolute; top: 50%; right: 6px; margin-top: -3px;}
.join-list ul li a.active:after{ background-position:-69px -87px; }
.join-list ul li div{ padding: 20px 35px; border-bottom: 1px solid #e5e5e5; display: none;}


/*
    绉诲姩锟�?
*/
@media screen and (max-width: 830px) {
    body{ padding-top: 50px;}

    .single-header-frame{ position: fixed;}
    .single-header-frame nav,.home-header nav{ border-bottom: 1px solid #ECECEC; position: relative; z-index: 50;}
    .single-header nav ul,.home-header nav ul{ padding: 0; margin: 0; border-top: 1px solid #ECECEC; display: none; margin-top: 50px;}
    .single-header-frame nav ul li,.single-header nav ul li,.home-header nav ul li{ display: block; border-bottom: 1px solid #ECECEC; background-color: #FFF; margin-right: 0;}
    .single-header-frame nav ul li:last-child,.home-header nav ul li:last-child{ border-bottom: none;}
    .single-header-frame nav ul li a,.home-header nav ul li a{ padding: 15px 25px; display: block;}
    .single-header nav ul li:last-child,.home-header nav ul li:last-child{display: inline-block;}
    .single-header .right-nav,.home-header .right-nav{ display: none;}

    footer nav{display: none;}
    footer div{ margin: 20px 5%; line-height: 150%; font-size: 12px;}
    footer div p{  margin-bottom: 5px;}
    footer div span{ display: block;  margin-bottom: 5px;}

    .single-header .logo,.home-header .logo{ width: 60px; height: auto; margin: 15px auto; float: right; margin-right: 25px;}
    .home-header{ background-color: #fff; position: fixed;}
    .home-header .logo{ position: static;}
    .home-header>div{ margin: 0;}
    .home-header nav{ background-color: #fff; border-bottom: none;}
    .home-header nav ul{ width: 100%; text-align: left;}
    .home-header nav ul li a{ color: #4a4a4a;}
    .home-header nav ul li a:hover{ color: #4a4a4a;}
    .home-header nav ul li:last-child{ display: block;}

    header .btn-back{ display: block;}
    header .btn-menu{ display: block;}
    .headerSub{ display: none;}
    .banner{ background: url('../images/banner1_phone.jpg') no-repeat; background-size: cover;}
    .banner .cover,.banner video{ display: none;}
    .banner .icon-scrolldown{
        -webkit-transform: scale(0.6, 0.6);
        -moz-transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        -o-transform: scale(0.6, 0.6);
        transform: scale(0.6, 0.6);
    bottom:12%;}
    .banner .btn-play{ display: block; top: 30%;}

    .head-height{display: none;}

    .section1{ width: auto; margin: 30px 5% 0 5%;}
    .section2{ width: auto; margin: 30px 5% 0 5%;}

    .title-lv1{ margin: 40px 5%;}
    .title-lv1 h3{ font-weight: bold; font-size: 24px;}
    .title-lv1 div{ font-size: 16px;}

    .auto-banner{overflow: hidden;}
    .auto-banner img{ width: 150%; margin-left: -25%;}

    .title-lv2{ font-size:20px; padding: 10px 0;margin-bottom: 40px;}

    .company-info{ column-count: 1;-webkit-column-count: 1;-moz-column-count: 1; column-gap:7em;-webkit-column-gap: 7em;-moz-column-gap:7em; line-height: 200%; font-size: 14px;}

    .company-culture div{ width: 100%; margin-bottom: 30px;}

    .join-tab{margin: 0 5% 30px 5%;}
    .join-tab li{ font-size: 14px;}
    .join-banner{ margin: 0 5%;}
    .join-banner img{ width: 100%; margin: 0;}
    .join-list{ margin: 20px 5%;}
    .join-list ul li a{ font-size: 16px; padding: 10px 0;}

    .netscontent{ margin: 0;}
    .netsframe{ margin: 30px 5%; padding-bottom: 0;}
    .netsframe dl{ padding-right: 1%; width: 100%; border-bottom: 1px solid #ddd; padding-bottom: 20px;}
    .netsframe dl:last-child{border-bottom: none; padding-bottom: 0;}
    .netsframe dl dt{ font-size: 20px; margin-bottom: 15px;}
    .netsframe dl dd{ font-size: 14px; margin-bottom: 6px;}
    .netsframe .mt80{ margin-top: 30px;}
    .netsframe .mt30{ margin-top: 10px;}
    .netsframe .f20{ font-size: 14px;}
    .netsframe .txt-size1{ width: 70%;}
    .netsframe .txt-size2{ width: 70%;}
    .netsframe .txt-size3{ width: 70%;}

    .news-list{ margin: 30px 5%;}
    .news-list li{padding: 12px 0;}
    .news-list li p{ font-size: 12px; margin-bottom: 0;}
    .news-list li div{ font-size: 16px;}

    .newsdetail{ width: auto; margin: 20px 5%;}
    .news-title{ margin-bottom: 20px;}
    .news-title p{ font-size: 14px; margin-bottom: 0;}
    .news-title div{ font-size: 18px;}
    .newsdetail .content img{ width: 100%;}

    .pro-classify{ margin: 30px 5% 10px 5%;}
    .pro-classify>ul{ position: relative;}
    .pro-classify>ul>li{ position: static;}
    .pro-classify>ul>li .pc-lv1{ font-size: 14px; overflow: hidden;word-break:keep-all;}
    .pro-classify>ul>li> ul{ top:52px;}
    .pro-classify>ul>li> ul li{ padding: 12px 0;}
    .pro-classify>ul>li> ul li a{font-size: 14px;}

    .prodetail{ margin: 30px 5% 10px 5%;}
    .prodetail .img{ width: 100%;}
    .prodetail .proname{ font-size: 20px;}
    .prodetail .procontent{ width: 100%;}

    .pro-banner{ width: auto; margin:0 5% 10px 5%;}

    .pro-list{ width: auto; margin: 0 5%;}
    .pro-list a{ width: 48%; margin-right: 4%; margin-left: 0; margin-bottom: 10px;}
    .pro-list a:nth-child(2n){margin-right: 0;}
    .pro-list a div{ width: 100%; height: auto; overflow: hidden;}
    .pro-list a p{ font-size: 20px;}

    .title1:before{ width: 35%;}
    .title1:after{ left: 35%;}
    .title1 p{ font-size: 20px;}
    .title1 p:before{ width: 35%;}
    .title1 p:after{ right: 35%;}

    .aboutus-content{ margin-top: 20px; text-align: left; line-height: 34px;}
    .aboutus-btn-more{ margin: 20px auto;}

    .departs-list{ width:800px;  margin-top: 30px;}
    .departs-list li{ width: 190px; height: auto; margin-right: 10px;}
    .departs-list li a{ left: 10px; bottom: 10px;}
    .departs-list li a p{font-size: 14px;}
    .departs-list li a:after{ top: 22px;}

    .btn-arrow-left{ width: 28px; height: 55px; background-color: rgba(0,0,0,0.5); position: absolute; top: 50%; left: 0; margin-top: -27px;}
    .btn-arrow-left i{ width: 14px; height: 24px; display: inline-block; background: url('../images/icon-arrow.png') no-repeat; background-position: -14px 0; margin: 15px 0 0 4px;}
    .btn-arrow-right{ width: 28px; height: 55px; background-color: rgba(0,0,0,0.5); position: absolute; top: 50%; right: 0; margin-top: -27px;}
    .btn-arrow-right i{ width: 14px; height: 24px; display: inline-block; background: url('../images/icon-arrow.png') no-repeat; margin: 15px 0 0 7px;}

    .mapsection{ margin: 20px 0;}
    .sale-area-img{ height: 450px;}
    .sale-area-info{ height: auto; padding:20px 0; background-color: #243033;}
    .sale-area-info{ text-align: center;}
    .sale-area-info div h3{ font-size: 20px; text-align: center;}
    .sale-area-info div div{display: none;}
    .sale-area-info div a{ font-size: 12px; padding: 4px 20px;}
    .news-area-info{ height: auto; padding: 20px;}
    .news-area-info .aside-content{ width: 100%; margin: 0;}
    .news-area-info .aside-content h3{ float: left; font-size: 20px; margin-bottom: 0;}
    .news-area-info .aside-content div{ display: none;}
    .news-area-info .aside-content a{ float: right; padding: 2px 12px; font-size: 12px;}

    .newbtn{ display: none;}
    .newsframe{ margin: 20px 0 0 0;}
    .newsframe .nlist li{ width: 190px; padding: 0 10px; margin-right: 10px;}
    .newsframe .nlist li h3{ margin: 10px 0 15px; font-size: 16px; height: 34px;}
    .newsframe .nlist li div{ font-size: 12px; margin-bottom: 20px; height: 84px;}
    .newsframe .nlist li p{ font-size: 12px;}

    .culture-list{ margin: 30px 0;}
    .culture-list li{ width: 49%; height: auto; margin-bottom: 2%; margin-right: 0;}
    .culture-list li:first-child{ width: 100%;}
    .culture-list li:nth-child(2){ margin-right: 2%;}
}