@charset "utf-8";

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; padding: 0; margin: 0;}
body{ font-size: 18px; color:#333; overflow-x: hidden; font-family: Arial,sans-serif; padding-top: 170px;}
ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,header,footer{ list-style: none; padding: 0; margin: 0; display: block;}
input,textarea,select,button{ font-size: 16px; outline:none;  font-family: Arial,sans-serif;}
svg{ border: none;}
::-webkit-input-placeholder {color: #888;}
::-moz-placeholder {color: #888;}
:-ms-input-placeholder {color: #888;}

a { text-decoration: none; color:#333; transition: color 0.56s ease;}
a:hover{ color:#3f81ab;}

img{ display: inline-block; vertical-align:middle;max-width:100%;max-height:100%;height: auto; border: none;}

.wrap{ width: 100%; max-width: 1780px; margin: 0 auto; padding: 0 50px;}
.ovh{overflow: hidden;}


::-webkit-scrollbar { width: 6px; background-color: rgba(24, 24, 24, .07); }
::-webkit-scrollbar-thumb {background: rgba(24, 24, 24, .3); border-radius: 8px; transition: background 0.4s ease;}
::-webkit-scrollbar-thumb:hover {background: #666;}

/*顶部*/
.header{ width: 100%; height: 170px; background:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, .1); position: fixed; left: 0; top: 0; z-index: 99999; padding: 0 80px;}
.header .logo{ height: 85px;}
.header .nav{ position: relative;}
.header .nav>ul>li{ position: relative; margin-left: 58px;}
.header .nav>ul>li>a{ font-size:24px; color:#000; line-height:30px; text-transform: uppercase; transition: color .4s; display: block; position: relative;}
.header .nav>ul>li>a:hover,.header .nav>ul>li.on>a{ color:#3f81ab;}
.header .nav>ul>li.lang a{ font-size: 20px; color: #1a3a4e; border: #1a3a4e solid 2px; padding: 0 10px;}
.menu-toggle{display: none;}

/*首页bannner*/
.banner { position: relative; overflow: hidden;}
.banner .swiper{ width:100%; overflow:hidden;}
.banner .swiper .swiper-slide{ width: 100%; height: 100%; position: relative; overflow: hidden;}
.banner .swiper .swiper-slide img{width:100%;}
.banner .swiper .swiper-slide video{ width: 100%; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover;}
.banner .pagination { width: 100% !important; position: absolute; left:0; bottom:40px!important;  z-index:111; text-align: center;}
.banner .swiper-pagination-clickable .swiper-pagination-bullet { display: inline-block; width: 15px;height: 15px; background:#fff; border:none; margin: 0 10px; border-radius:12px !important; opacity: 1; cursor: pointer;}
.banner .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #3f81ab;}
.banner .swiper-slide-active{opacity:1;}

.neiBanner{ height: 250px; background-position: center; background-position: center; background-size: cover; display: flex; align-items: center; position: relative;}
.neiBanner .bannerText{ width: 100%;}
.neiBanner .bannerText h2{ font-size: 60px; font-weight: normal; text-transform: uppercase;}
.neiBanner .searchBox{ width: 645px; position: absolute; left: 50%; top: 50%; z-index: 11; transform: translate(-50%,-50%);}
.neiBanner .searchBox form{ display: flex;}
.neiBanner .searchBox input{ width: calc(100% - 70px); background: #fff; border: none; padding-left: 15px;}
.neiBanner .searchBox button{ width: 70px; height: 52px; background: #fff url(../images/icon05.png) no-repeat center; border: none; border-left: 1px solid #3f81ab; cursor: pointer;}

.title{ text-align: center; margin-bottom: 45px; text-transform: uppercase;}
.title h2{ font-size: 48px; color: #3f81ab; font-weight: normal;}

.ntitle { margin-bottom: 60px;}
.ntitle h2{ font-size: 60px; font-weight: normal; line-height: 1; text-transform: uppercase;}
.ntitle dt{ font-size: 17.5px; color: #333; font-weight: 300; line-height: 1.6; margin-top: 30px;}


.indexOne{ padding: 125px 0 30px;}
.indexOne .con{ width: 60%;}
.indexOne .con .tit{ margin-bottom: 20px;}
.indexOne .con .tit h2{ font-size: 36px; text-transform: uppercase;}
.indexOne .con .tit p{ font-size: 18px; text-transform: uppercase; line-height: 1; margin-bottom: 15px;}
.indexOne .con .text{ line-height: 2; margin-bottom: 35px;}
.indexOne .con .more{ width: 220px; height: 60px; border: #3f81ab solid 2px; display:flex; align-items: center; justify-content: center; color: #3f81ab; text-transform: uppercase; font-weight: bold;}
.indexOne .con .more::after{ content: ""; width: 21px; height: 6px; background: url(../images/icon05.png) no-repeat center; margin-left: 10px;}
.indexOne .con .more:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .1);}
.indexOne .iconBox{ width: 40%;}
.indexOne .iconBox ul li{ width: 50%; padding-left: 105px;}
.indexOne .iconBox ul li ol{ background: #fff; box-shadow: 0 0 25px rgba(0, 0, 0, .1); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 36px 0; padding: 50px 0 30px;}
.indexOne .iconBox ul li ol i{ display: block; height: 120px; overflow: hidden;}
.indexOne .iconBox ul li ol p{ font-weight: bold;}
.indexOne .iconBox ul li ol:hover{ background: #3f81ab;}
.indexOne .iconBox ul li ol:hover i img{ filter: drop-shadow(#fff 0 250px); transform: translateY(-250px);}
.indexOne .iconBox ul li ol:hover p{ color: #fff;}

.indexTwo{ padding: 60px 80px 115px; background: url(../images/indexTwoBg.jpg) no-repeat center; background-size: cover; position: relative;}
.indexTwo .title { margin-bottom: 100px;}
.indexTwo .title h2{ color: #fff;}
.indexTwo .swiper-slide{ padding: 30px; background: url(../images/probg.jpg) no-repeat center; background-size: cover; border-radius: 10px; overflow: hidden;}
.indexTwo .swiper-slide dl{ padding-bottom: 100%;}
.indexTwo .swiper-slide h3{ font-size:24px; color: #336699; font-weight: normal; border-top: 1px solid #3f81ab; padding-top: 15px;}
.indexTwo .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 0 !important; bottom: 0 !important; top: auto; z-index: 50; height: 6px !important; width: 100% !important; background: #3f81ab;}
.indexTwo .swiper-scrollbar-drag{ background: #fff; border-radius: 0 !important;}

.indexThree{ padding: 70px 0;}
.indexThree .box .text{ width: 50%; font-size: 20px; color: #000; line-height: 1.8;}
.indexThree .box .pic{ width: 50%; padding-left: 30px; text-align: right;}

.about{ padding: 120px 0;}
.about .con{ width: 60%; padding-right: 20px;}
.about .con .tit{ font-size: 36px; font-weight: bold; border-bottom: #000 solid 1px; text-transform: uppercase; padding-bottom: 30px; margin-bottom: 30px;}
.about .con .text{ line-height: 1.8;}
.about .pic{ width: 40%; text-align: right; padding-left: 50px;}

.leftNav{ width: 280px;}
.leftNav ul li{ border-bottom: #dadada solid 1px;}
.leftNav ul li a{ font-size: 24px; font-weight: bold; line-height: 60px; padding-left: 55px;}
.leftNav ul li.on{ border-bottom: #3f81ab solid 2px;}
.leftNav ul li.on a{ color: #3f81ab; background: url(../images/icon05.png) no-repeat 15px center;}

.rightBox{ width: calc(100% - 350px);}

.products{ background: #f8f7f7; padding: 90px 0 120px;}

.prolist{ padding-bottom: 25px;}
.prolist ul{ margin: 0 -39px;}
.prolist ul li{ width: 33.33%; padding: 0 39px; margin-bottom: 50px;}
.prolist ul li dl{ padding-bottom: 100%; background: #fff; border: #ccc solid 1px;}
.prolist ul li dl img{ padding: 15px;}
.prolist ul li h3{ font-size: 24px; text-align: center; font-weight: normal; margin-top: 15px;}

.proview{background: #f8f7f7; padding: 90px 0 120px;}
.proview .titBread { margin-bottom: 60px;}
.proview .titBread h2{ font-size: 60px; color: #3f81ab; font-weight: normal; text-transform: uppercase;}
.proview .boxCon{ margin-bottom: 150px;}
.proview .boxCon .pic{ width: 50%; padding-right: 100px;}
.proview .boxCon .pic .bigpic img{ width: 100%; border: #ddd solid 1px;}
.proview .boxCon .pic .smallpic{ margin-top: 20px; }
.proview .boxCon .pic .smallpic ul{ margin: 0 -5px;}
.proview .boxCon .pic .smallpic ul li{ width: 25%; padding: 0 5px;}
.proview .boxCon .pic .smallpic ul li dl{ padding-bottom: 90%; cursor: pointer;}
.proview .boxCon .con{ width: 50%;}
.proview .boxCon .con .t{ font-size: 36px; margin-bottom: 25px;}
.proview .boxCon .con .c{ font-size: 18px; line-height: 1.8;}
.proview .boxCon .con .c pre{ border-top: 1px solid #ddd; margin: 25px 0;}
.proview .boxCon .con .c hr{ border-top: 1px solid #ddd; margin: 25px 0;}
.relatedProducts .tit{ font-size: 40px; color: #3f81ab; text-transform: uppercase; margin-bottom: 50px;}
.relatedProducts ul{ margin: 0 -27px;}
.relatedProducts ul li{ width: 25%; padding: 0 27px; margin-bottom: 50px;}
.relatedProducts ul li dl{ padding-bottom: 100%; background: #fff; border: #ccc solid 1px;}
.relatedProducts ul li dl img{ padding: 15px;}
.relatedProducts ul li h3{ font-size: 24px; text-align: center; font-weight: normal; margin-top: 15px;}

.news{ background: #f8f7f7; padding: 90px 0 120px;}
.news .box{ padding-bottom: 20px;}
.news .box ul{ margin: 0 -23px;}
.news .box ul li{ width: 50%; padding: 0 23px; margin-bottom: 40px;}
.news .box ul li a{ display: block; background: #fff; border: #fff solid 3px; padding: 30px; transition: all 0.4s ease;}
.news .box ul li .t{ display: flex;}
.news .box ul li .t .pic{ width: 41%;}
.news .box ul li .t .pic dl{ border-radius: 5px; padding-bottom: 70.3%;}
.news .box ul li .t .con{ width: 59%; padding-left: 20px;}
.news .box ul li .t .con h3{ font-size: 26px; color: #333; overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;	-webkit-line-clamp: 2;	-webkit-box-orient: vertical; margin-bottom: 20px;}
.news .box ul li .t .con dd{ color: #888;}
.news .box ul li .c{ font-size: 18px; color: #888; line-height: 2; overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;	-webkit-line-clamp: 2;	-webkit-box-orient: vertical; margin-top: 15px;}
.news .box ul li dt{ width: 235px; height: 66px; line-height: 66px; background: #fff url(../images/icon05.png) no-repeat right 27px center; color: #3f81ab; border: #3f81ab solid 2px; font-size: 18px; text-align: center; text-transform: uppercase; margin-top: 25px; transition: all 0.4s ease;}
.news .box ul li a:hover{ border: #3f81ab solid 3px;transition: all 0.4s ease; }
.news .box ul li a:hover dt{  background: #3f81ab url(../images/icon06.png) no-repeat right 27px center; color: #fff; border: #3f81ab solid 2px;}

.newsView{ padding: 90px 80px 150px; background: #f7f7f7;}
.newsView .newsHead{ text-align: center; margin-bottom: 40px;}
.newsView .newsHead h1{ font-size: 30px; position: relative; padding-bottom: 17px; margin-bottom: 20px;}
.newsView .newsHead h1::before{ content: ""; width: 170px; height: 1px; background: #000; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.newsView .newsHead p{ color: #666;}
.newsView .box{ background: #fff; padding: 70px; line-height: 1.7; margin-bottom: 50px;}
.neiPage a{ width: 60px; height: 50px; margin: 0 10px;}
.neiPage a.prev{  background: #666666 url(../images/icon15.png) no-repeat center;}
.neiPage a.prev:hover{ background: #06379a url(../images/icon15.png) no-repeat center;}
.neiPage a.next{  background: #666666 url(../images/icon16.png) no-repeat center;}
.neiPage a.next:hover{  background: #06379a url(../images/icon16.png) no-repeat center;}

.download{ padding: 90px 0 120px;  background: #f7f7f7;}
.download .box{ padding-bottom: 25px;}
.download .box ul li{ margin-bottom: 45px;}
.download .box ul li a{ padding: 25px 40px 25px 25px; background: #fff; align-items: center;}
.download .pic{ width: 288px;}
.download .t{ width: calc(100% - 522px); padding: 0 50px; font-size: 30px; color: #000; font-weight: bold; transition: all 0.4s ease;}
.download .m{ width: 234px; margin-left: auto;  height: 66px; line-height: 66px; background: #fff; color: #3f81ab; border: #3f81ab solid 2px; font-size: 18px; text-align: center; text-transform: uppercase; transition: all 0.4s ease;}
.download .box ul li a:hover .t{  color: #336699; }
.download .box ul li a:hover .m{ background: #3f81ab; color: #fff; border: #3f81ab solid 2px;}

.join{ padding: 90px 0 120px;  background: #f7f7f7;}
.join .box{ padding-bottom: 50px;}
.join .item{ margin-bottom: 10px;}
.join .item ul{ display: flex; justify-content: space-between; background: #fff; line-height: 75px; border: #3f81ab solid 2px; border-radius: 10px; cursor: pointer;}
.join .item ul dl{ width: 70%; font-size: 24px; font-weight: bold; color: #666; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  padding-left: 20px;}
.join .item ul dd{ width: 15%; color: #bbb;}
.join .item ul dt{ width: 80px; background: url(../images/icon13.png) no-repeat center;}
.join .item ul.on dt{ background: url(../images/icon14.png) no-repeat center;}
.join .item ol{ background: #fff; padding: 40px 25px; line-height: 1.8; display: none;}

.contact{ padding:90px 0 120px;}
.contact .contactTop{ margin-bottom: 50px;}
.contact .contactTop .box{ display: flex;}
.contact .contactTop .box .contactInfo{ flex: 0 0 auto; width: 50%; padding-right: 90px;}
.contact .contactTop .box .contactInfo dl{ font-size: 30px; margin-bottom: 35px;}
.contact .contactTop .box .contactInfo>ul{ margin-bottom: 40px;}
.contact .contactTop .box .contactInfo>ul>li{ font-size: 18px; color: #000; line-height: 1.6; margin-bottom: 25px; display: flex;}
.contact .contactTop .box .contactInfo>ul>li>i{ width: 50px; flex: 0 0 auto;}

#form{ width: 100%;}
#form .error{ color: #ff0000; margin-bottom: 10px;}
#form .tit{ font-size: 24px; margin-bottom: 18px;}
#form ul li { padding-bottom: 14px;}
#form ul li input, #form ul li textarea{ width: 100%; line-height: 26px; padding: 7px 12px; border: 1px solid #333; font-size: 14px; color: #333; -webkit-transition: .5s;    -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;}
#form ul li span { display: inline-block; vertical-align: middle; margin-right: 50px;}
#form ul li span label { font-size: 16px; color: #686868; line-height: 30px; margin-left: 10px; opacity: .7;}
#form ul li span input { width: 20px; height: 20px; cursor: pointer; cursor: hand; float: left;}
#form ul li textarea { height: 150px; resize: vertical;}
#form ul li button { width: 180px; height:40px; background: #3f81ab; color: #fff; font-size: 18px; text-transform: uppercase; text-align: center; border: none; cursor:pointer;}
#form ul li button:hover { background: #333;}

#map{ height: 540px;}

.footer{ background: #f1f1f1;}
.footer .main{ padding: 50px 0;}
.footer .main .ewm{ width: 164px;}
.footer .main .nav>ul>li{ font-size: 22px; margin-left: 60px;}
.footer .main .nav>ul>li ol a{ display: block; font-size: 18px; color: #999; margin-top: 10px;}
.footer .main .nav>ul>li ol a:hover{  color:#3f81ab;}
.footer .main .telShare{  text-align: right;}
.footer .main .telShare .tel{ margin-bottom: 30px;}
.footer .main .telShare .tel dl{ font-size: 18px; text-transform: uppercase; margin-bottom: 10px;}
.footer .main .telShare .tel ol{ font-size: 36px; font-weight: bold;}
.footer .main .telShare .share a{ margin-left: 10px;}
.footer .copyright{ color: #999; line-height: 90px; border-top: 1px solid #dadada;}

/*===/分页=============================*/
.fenye { text-align: center; font-size: 18px; width: 100%; display: flex; justify-content: center; }
.fenye .prev, .fenye .next { width: 50px; height: 50px; line-height: 50px; color: #666; background: #eaeaea; margin-right: 10px; display: block; font-family: "宋体";font-size: 18px; }
.fenye a { width: 50px; height: 50px; line-height: 50px; color: #666;  background: #eaeaea;  margin-right: 10px;display: block; transition: all 0.4s;}
.fenye a:hover {color: #fff; background: #3f81ab;}
.fenye a.current { color: #fff;  background: #3f81ab;}


/* 弹出框 */
.tccBox{display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}
.tccBox .black{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .8);}
.tccBox .BoxCon{padding: 20px;position: absolute;left:50%;top:50%;box-sizing:border-box;transform: translate(-50%,-50%); color: #999;}
.tccBox .BoxCon .off{ width: 30px; height: 30px; background:url(../images/off.png) no-repeat center; position: absolute; top: -15px; right: -15px;  cursor: pointer;}
.tccBox .BoxCon ul video{ max-width: 1000px;}


@media (max-width: 1760px) {
    .header{ padding: 0 50px;}
}

@media (max-width: 1650px) {
    .header .nav>ul>li>a{ font-size: 20px;}

    .neiBanner .bannerText h2{ font-size: 50px;}

    .ntitle h2{ font-size: 50px;}

    .indexOne { padding: 90px 0 60px; }
    .indexOne .con .tit h2{ font-size: 30px;}
    .indexOne .iconBox ul li ol{ margin:20px 0;}

    .indexTwo .title { margin-bottom: 50px; }
    
    .indexThree .box .text{ font-size: 18px;}

    .about .con .tit{ font-size: 30px;}

    .leftNav ul li a{ font-size: 20px;}
    .prolist ul li h3{ font-size: 18px;}

    .proview .titBread h2{ font-size: 50px;}
    .relatedProducts .tit{ font-size: 28px;}
    .relatedProducts ul li h3{ font-size: 18px;}

    .newsView { padding: 70px 0 100px;}

    .download .t{ font-size: 24px;}

    .footer .main .nav>ul>li{ font-size: 22px; margin-left: 50px;}
    .footer .main .telShare .tel ol{ font-size: 30px;}
}

@media (max-width: 1520px) {
    body{ font-size: 16px; padding-top: 130px;}
    .header{ height: 130px;}
    .header .logo{ height: 66px;}
    .header .nav>ul>li { margin-left: 50px; }

    .indexTwo .swiper-slide h3{ font-size: 20px;}

    .news .box ul li .t .pic { width: 35%; }
    .news .box ul li .t .con { width: 65%;}
    .news .box ul li .t .con h3{ font-size: 22px;}
    .news .box ul li dt { width: 170px; height: 54px; line-height: 54px; background: #fff url(../images/icon05.png) no-repeat right 15px center; font-size: 16px; text-align:left; padding-left: 20px;}
    .news .box ul li a:hover dt { background: #3f81ab url(../images/icon06.png) no-repeat right 15px center;}

    .footer .main .nav>ul>li { margin-left: 30px; }
}


@media (max-width: 1420px) {
    .header .nav>ul>li>a { font-size: 18px; }

    .title h2{ font-size: 40px;}

    .ntitle h2 { font-size: 40px; }

    .indexOne .con .tit h2 { font-size: 26px; }
    .indexOne .iconBox ul li { padding-left: 40px; }

    .about .con .tit { font-size: 26px; }

    .neiBanner .bannerText{ display: none;}

    .proview { padding: 50px 0 60px; }
    .proview .titBread h2 { font-size: 40px; }
    .proview .boxCon .con .c{ font-size: 16px;}

    .news .box ul li .c{ font-size: 16px;}

    .download .pic { width: 200px; }
    .download .t{ font-size: 20px;}
    .download .m { width: 170px; height: 50px; line-height: 46px; font-size: 16px;}

    .join .item ul dl{ font-size: 18px;}

    .contact .contactTop .box .contactInfo dl{ font-size: 26px;}

    .footer .main .ewm{ width: 130px;}
    .footer .main .nav>ul>li{ font-size: 18px;}
    .footer .main .nav>ul>li ol a{ font-size: 16px;}
    .footer .main .telShare .tel dl{ font-size: 16px;}
    .footer .main .telShare .tel ol{ font-size: 24px;}
}

@media (max-width: 1330px) {
    body{ font-size: 16px;}
    .header .nav>ul>li { margin-left: 30px; }

    .indexThree .box .text{ font-size: 16px;}

    .about { padding: 80px 0; }

    .prolist ul { margin: 0 -20px;}
    .prolist ul li{ padding: 0 20px; margin-bottom: 25px;}
    .prolist ul li h3{ font-size: 16px;}

    .proview .boxCon { margin-bottom: 90px; }
    .proview .boxCon .pic{ padding-right: 40px;}
}


@media (max-width: 1200px) {
    .wrap{ padding: 0 20px;}

    .header{ padding: 0 20px;}
    .header .logo { height: 52px; }
    .header .nav>ul>li>a{ font-size: 16px; line-height: 22px;}
    .header .nav>ul>li.lang a{ font-size: 14px;}

    .footer .main .nav>ul>li { margin-left: 20px; }
}

@media (max-width: 1030px) {
}

@media screen and (max-width:750px){
    body{ font-size: 14px; padding-top: 60px;}
    .wrap{ padding: 0 15px;}

    .header{ width: 100%; height: 60px; box-shadow: 0 0 10px rgba(0,0,0,.15); position: fixed; top: 0; left: 0; z-index: 99999; padding: 15px;}
    .header .logo{ height: 60px; padding: 12px 0; }

    .header .nav{ position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px);  background: #fff; display: none;}
    .header .nav>ul{ display: block;  position: relative; z-index: 111; border-top: #eee solid 1px; }
    .header .nav>ul>li{ border-bottom: #eee solid 1px; margin-right: 0; margin-left: 0; position: relative;}
    .header .nav>ul>li>a{ padding: 0 15px; font-size: 15px; color: #000;  font-weight: normal; line-height: 46px;  display: block;}
    .header .nav>ul>li>a::before{ display: none;}
    .header .nav>ul>li.lang{ width: 80px; padding: 15px; border-bottom: none;}
    .header .nav>ul>li.lang a{ line-height: 30px;}

    .header .menu-toggle{ width:60px; height:60px; position:absolute; right:0; top:0; z-index:99999; display:block;}
    .header .menu-toggle span{ width:35px; height:2px; background:#333;display:block; position:relative; opacity:1;transition:all 300ms; margin:30px 0 0 12px;}
    .header .menu-toggle span:before{ content:"";width:35px; height:2px; background:#333;display:block; position:absolute; left:0; top:-10px;transition:all 300ms;}
    .header .menu-toggle span:after{ content:"";width:35px; height:2px; background:#333;display:block;position:absolute; left:0; top:10px;transition:all 300ms;}
    .header .menu-toggle.cur span{background-color:transparent;}
    .header .menu-toggle.cur span:before{transform:rotate(45deg); top:0px;}
    .header .menu-toggle.cur span:after{transform:rotate(-45deg); top:0px;}

    .banner .bannerText .tit{ font-size: 18px; margin-bottom: 12px; padding-bottom: 0; text-align: center;}
    .banner .bannerText .tit::before { display: none; }
    .banner .bannerText .text{ display: none;}
    .banner .bannerText .num{ display: none;}
    .banner .bannerText a.more { width: 86px; height: 30px; line-height: 28px; font-size: 12px; margin: 0 auto; display: none;}
    .banner .pagination{ bottom: 10px !important;}
    .banner .swiper-pagination-clickable .swiper-pagination-bullet{ width: 10px; height: 10px;}

    .neiBanner { height: 130px; }
    .neiBanner .searchBox{ width: 80%;}

    .title { margin-bottom: 30px; }
    .title h2 { font-size: 25px; }

    .ntitle{ margin-bottom: 30px; text-align: center;}
    .ntitle h2 { font-size: 24px; }
    .ntitle dt{ font-size: 13px; margin-top: 20px;}

    .indexOne{ padding: 45px 0;}
    .indexOne .box{ display: block;}
    .indexOne .con{ width: 100%; margin-bottom: 30px;}
    .indexOne .con .tit h2 { font-size: 22px; }
    .indexOne .con .text { line-height: 1.6;}
    .indexOne .con .more { width: 180px; height: 48px; margin: 0 auto;}
    .indexOne .iconBox{ width: 100%;}
    .indexOne .iconBox ul { margin: 0 -10px;}
    .indexOne .iconBox ul li{ padding: 0 10px;}
    .indexOne .iconBox ul li ol{ padding: 30px 0; margin: 10px 0;}

    .indexTwo { padding: 50px 20px 60px;}
    .indexTwo .swiper-slide{ padding: 20px;}
    .indexTwo .swiper-slide h3{ font-size: 17px;}

    .indexThree {  padding: 50px 0 70px; }
    .indexThree .box {  display: block; }
    .indexThree .box .text { width: 100%; font-size: 14px; margin-bottom: 25px;}
    .indexThree .box .pic{ width: 100%; padding: 0;}

    .about { padding: 45px 0 60px; }
    .about .wrap{ display: block;}
    .about .con{ width: 100%; padding-right: 0;}
    .about .con .tit { font-size: 22px; }
    .about .con .text{ line-height: 1.6;}
    .about .pic{ width: 100%; padding: 0; margin-top: 25px;}

    .products{ padding: 45px 0 60px;}
    .products .wrap{ display: block;}
    .leftNav{ width: 100%;}
    .leftNav dl{ line-height: 50px;  background: #3f81ab url(../images/xiala.png) no-repeat right 15px center; background-size: 20px auto;  color: #fff; font-size: 18px; padding: 0 15px; margin-bottom: 20px;}
    .leftNav dl::before{ content: "Product Category"; text-transform: uppercase;}
    .leftNav ul { display: none;}
    .leftNav ul li a{ line-height: 42px; font-size: 15px;}
    .rightBox{ width: 100%;}

    .prolist{ padding-bottom: 0;}
    .prolist ul{ margin: 0 -5px;}
    .prolist ul li{ width: 50%; padding: 0 5px;}
    .prolist ul li h3 { font-size: 14px; margin-top: 10px;}

    .proview { padding: 20px 0 60px; }
    .proview .titBread { margin-bottom: 20px; }
    .proview .titBread h2 { font-size: 24px; }

    .proview .boxCon{ display: block;}
    .proview .boxCon .pic{ width: 100%; padding: 0; margin-bottom: 25px;}
    .proview .boxCon .con{ width: 100%;}
    .proview .boxCon .con .t { font-size: 24px; margin-bottom: 13px; }
    .proview .boxCon .con .c{ font-size: 14px; line-height: 1.6;}
    .proview .boxCon .con .c pre{ margin: 15px 0;}
    .proview .boxCon .con .c hr{ margin: 15px 0;}

    .relatedProducts .tit { font-size: 19px; margin-bottom: 25px;}
    .relatedProducts ul{ margin: 0 -5px;}
    .relatedProducts ul li{ width: 50%; padding: 0 5px; margin-bottom: 15px;}
    .relatedProducts ul li h3 { font-size: 14px; margin-top: 10px;}

    .news { padding: 50px 0 60px; }
    .news .box { padding-bottom: 0; }
    .news .box ul{ margin: 0 ;}
    .news .box ul li{ width: 100%; padding: 0; margin-bottom: 15px;}
    .news .box ul li a{ padding: 15px;}
    .news .box ul li .t{ display: block;}
    .news .box ul li .t .pic{ width: 100%;}
    .news .box ul li .t .con{ width: 100%; padding: 0; margin-top: 15px;}
    .news .box ul li .t .con h3 { font-size: 18px; margin-bottom: 10px; }
    .news .box ul li .c { font-size: 14px; line-height: 1.6;}
    .news .box ul li a .flex{ display: none;}

    .newsView { padding: 50px 0 60px; }
    .newsView .newsHead{ margin-bottom: 25px;}
    .newsView .newsHead h1{ font-size: 18px;}
    .newsView .box{ padding: 20px; margin-bottom: 30px;}
    .neiPage a{ height: 36px;}

    .download { padding: 50px 0 60px;}
    .download .box{ padding-bottom: 0;}
    .download .box ul li { margin-bottom: 10px; }
    .download .box ul li a{ padding: 10px;}
    .download .pic{ width: 100px;}
    .download .t{ width: calc(100% - 100px); font-size: 15px; padding: 0 ; padding-left: 10px;}
    .download .m{ display: none;}

    .join { padding: 50px 0 60px;}
    .join .box{ padding-bottom: 0px;}
    .join .item ul{ line-height: 52px;}
    .join .item ul dl{ width: calc(100% - 118px); font-size: 16px;}
    .join .item ul dd { width: 75px;}
    .join .item ul dt{ width: 40px; background-size: 12px !important;}
    .join .item ol{ padding: 20px;}


    .contact{ padding:50px 0 35px;}
    .contact .contactTop .box{ display: block;}
    .contact .contactTop .box .contactInfo{ flex: 0 0 auto; width: 100%; padding-right:0;}
    .contact .contactTop .box .contactInfo dl{ font-size: 18px; margin-bottom: 15px;}
    .contact .contactTop .box .contactInfo>ul{ margin-bottom: 40px;}
    .contact .contactTop .box .contactInfo>ul>li{ font-size: 14px; line-height: 1.5; margin-bottom: 15px;}
    .contact .contactTop .box .contactInfo>ul>li>i{ width: 20px; height: 30px; margin-right: 10px;}

    #form{ padding-top:25px;}
    #form .tit{ font-size: 22px; margin-bottom: 18px;}
    #form ul li { padding-bottom: 14px;}
    #form ul li input, #form ul li textarea{ width: 100%; line-height: 26px; padding: 7px 12px; border: 1px solid #333; font-size: 14px; color: #333; -webkit-transition: .5s;    -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;}
    #form ul li span { display: inline-block; vertical-align: middle; margin-right: 50px;}
    #form ul li span label { font-size: 16px; color: #686868; line-height: 30px; margin-left: 10px; opacity: .7;}
    #form ul li span input { width: 20px; height: 20px; cursor: pointer; cursor: hand; float: left;}
    #form ul li textarea { height: 120px;}
    #form ul li input[type=submit] { width: 180px; color: #fff; font-size: 18px; text-transform: uppercase; text-align: center; border: none;  margin: 0 auto; display: block;}
    #form ul li input[type=submit]:hover { background: #333;}

    #map{ height: 350px;}

    .footer .main .ewm { width: 100px; }
    .footer .nav{ display: none;}
    .footer .main { padding: 28px 0; }
    .footer .main .telShare .tel { margin-bottom: 15px; }
    .footer .main .telShare .tel dl { font-size: 14px; }
    .footer .main .telShare .tel ol{ font-size: 20px;}
    .footer .copyright{ font-size: 12px; line-height: 1.5; text-align: center; padding:15px 0;}


    /*===/分页=============================*/
    .fenye { text-align: center; font-size: 14px; width: 100%; padding-top: 20px;}
    .fenye .prev, .fenye .next { width: 34px; height: 34px; line-height: 32px; margin-right: 3px; font-size: 16px; }
    .fenye a { width: 34px; height: 34px; line-height: 32px; margin-right:3px;}
    .fenye a:hover {color: #fff; }
    .fenye a.current { color: #fff;  margin-right: 3px;}
    .footer .gotop{ display: none;}

    .tccBox .BoxCon{ width: 90%;}
    .tccBox .BoxCon .off{ width: 18px; height: 18px; right: 18px;}
    .tccBox .BoxCon ul video{ width: 100%;}
    .search-dialog{ width: 95%;}
}