/*Index banner css*/
#banner{background:#fff; height:auto; overflow:hidden; padding-top:110px; transition:all .35s;}
#banner.active {transform: translateX(-220px);}
#banner .swiper-container{ position:relative; width:100%; height:100%;}
#banner .swiper-slide{ width:100%; height:100%; overflow:hidden; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#banner .swiper-slide img{width:100%; height:auto;}
#banner .swiper-container-horizontal>.swiper-pagination-bullets, #banner .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 20px!important;}
#banner .swiper-pagination-bullet {width:40px !important;height:4px !important;border-radius:0!important; transition:all .35s;background: #fff;}
#banner .swiper-pagination-bullet-active { width:80px !important; opacity: 1;background: #1b5698;}
#banner .inside-container{ position:relative; margin:0 auto;}
#banner .inside-container>.wrap{ display:none; position:absolute;z-index:9; left:50%; bottom:40%; width:80%; margin-left:-40%;}
#banner .inside-container .txt{ text-align:left;}
#banner .inside-container .txt>h3{ display:block; font-size:40px; font-weight:700; color:#333;}
#banner .inside-container .txt>span{display:block;padding:10px 0; font-size:22px; font-family:Arial; color:rgba(0,0,0,.5);}
#banner .inside-container img{width:100%; height:auto; margin:0 auto;}
#banner  .mob{display:none;}

@media only screen and (max-width: 1080px){
  #banner{padding-top:80px;}

}
@media only screen and (max-width: 960px){
  #banner{padding-top:60px;}
  #banner .inside-container .txt>h3{font-size:28px;}
  #banner .inside-container .txt>span{padding:0; font-size:17px;}
  }

@media only screen and (max-width: 780px){
  #banner .pc{display:none;}
  #banner .mob{display:block;}

}
@media only screen and (max-width: 540px){
  #banner .inside-container .txt>h3{font-size:20px;}
  #banner .inside-container .txt>span{padding:0; font-size:14px;}

}
@media only screen and (max-width: 420px){
  #banner .inside-container .txt>h3{font-size:14px;}
  #banner .inside-container .txt>span{padding:0; font-size:12px;}

}
/*END*/

/*Index main css*/
#main{ margin:0 auto; transition:all .35s; }
#main.active {transform: translateX(-220px);}

#main .title{margin-top:0px;padding:20px 0px;font-family: "poppins Light";position:relative;text-align:center;font-size:30px;color:#343434;}
#main .title h1{font-weight:normal;font-family: "思源黑体 Light";font-size:16px;}
#main .title h2{display:inline-block;font-family: "思源黑体 Bold";font-size:36px;}
#main .more>a{ display:block;width:50px;height:50px;border:1px solid #fff;text-align: center;line-height: 50px;overflow: hidden;position:relative;transition:all .3s ease-out 0s;}
#main .more span{transform:translateX(-66px);display:inline-block;transition:all .3s ease-out 0s;font-size:16px;color:#fff;}
#main .more a img{ position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-6px;}
#main .more a:hover{ width:120px;text-align: right;padding-right:10px;}
#main .more a:hover span{transform: translateX(-50%);}
#main .more a:hover img{left:85%;}

#main>.search{ background:#f7f8f9;margin:0 auto;padding:20px 0;}
#main>.search>form{ display:block; margin:0 auto; box-sizing:border-box; width:80%; max-width:800px; background:#fff;overflow:hidden; border:1px solid #ddd; height:45px;}
#main>.search>form input[type="text"]{outline: medium;float:left;height:45px;line-height:45px;width:70%; padding:0 5%;border:none; font-size:14px; background:none;color:#666;box-sizing:border-box;overflow:hidden;}
#main>.search>form input::-webkit-input-placeholder{ color:#ccc;}
#main>.search>form button{float:right;width:20%;height:41px; margin:1px 1px 0 0; border:none; opacity:1;background:#1b5698 url(../images/icon-go-white.png) no-repeat center center;background-size:auto 25px;cursor:pointer;box-sizing:border-box;overflow:hidden; transition:all .35s;}
#main>.search>form button:hover{background-color:#333;}

#main>.product{position:relative; margin:0 auto;padding-top:30px;}
#main>.product>.container{ position:relative; width:90%;max-width:1360px;margin:0 auto; padding:20px 0;}
#main>.product>.container .swiper-container{ margin:0 auto;}
#main>.product>.container .swiper-slide{padding:20px 0;}
#main>.product>.container .swiper-slide>a{ position:relative; display:block;padding:10px 20px; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.img{ position:relative; text-align:center;overflow:hidden; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.img>img{ width:100%;height:auto;}
#main>.product>.container .swiper-slide>a>.tit{position:relative; width:80%;margin:20px auto; border-radius:0 30px 0 0; padding:5px 0; text-align:center;font-size:16px; color:#666; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.tit:after{ position:absolute;z-index:1; left:0; bottom:0; width:90%; height:100%; opacity:0; background:#1b5698; border-radius:0 30px 0 30px; content:''; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.tit>span{ position:relative;z-index:9; transition:all .35s;}
#main>.product>.container .swiper-slide>a:hover .tit>span{ color:#fff;}
#main>.product>.container .button-next{ position:absolute;z-index:12; left:-5%; top:50%; margin-top:-30px; width:40px; height:40px; cursor:pointer;opacity:.2; background:url("../images/icon-arrow-left-circle-black.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.product>.container .button-prev{ position:absolute;z-index:12; right:-5%; top:50%; margin-top:-30px; width:40px; height:40px; cursor:pointer;opacity:.2; background:url("../images/icon-arrow-right-circle-black.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.product>.container .swiper-slide>a:hover .img{transform:scale(1.1) translateY(-10px);}
#main>.product>.container .swiper-slide>a:hover .tit:after{ opacity:1; left:10px;}

#main>.solution{margin:0 auto; padding:60px 0; background:#161616;}
#main>.solution .title h1{color:#fff;}
#main>.solution .title h2{color:#fff;}
#main>.solution>.container{width:100%;max-width:1620px; margin:0 auto;padding-top:50px;}
#main>.solution>.container>ul{margin:0 auto;}
#main>.solution>.container>ul>li{float:left; width:25%; height: 275px;}
#main>.solution>.container>ul>li:first-child{width:50%;height:275px;text-align:center;background-color:#57575a;}
  #main>.solution>.container>ul>li img{max-width: 100%; max-height: 100%;}
#main>.solution>.container>ul>li h1{margin-top:90px;margin-bottom:10px;font-weight:normal;font-family: "思源黑体 Light";color:#fff;}
#main>.solution>.container>ul>li span{font-family: "思源黑体 Light";color:#fff;}
#main>.solution>.container>ul>li:last-child{width:50%;height:275px;text-align:center;background-color:#1b5698;}
#main>.solution>.container>ul>li .img{position:relative; overflow:hidden;}
#main>.solution>.container>ul>li:hover .img>img{transform:scale(1.1);width:100%;transition:all 1s; overflow: hidden;}


#main>.workshop{margin:0 auto; padding:40px 0; background:#f1f1f1;}
#main>.workshop>.container{width:100%;max-width:1620px;margin:0 auto;padding:20px 0px 20px 0px;}
#main>.workshop>.container>ul{margin:0 auto;}
#main>.workshop>.container>ul>li{width:49.6%; margin-right:0.4%; margin-top:10px; display:inline-block;}
#main>.workshop>.container>ul>li:nth-child(2n){ margin:10px 0px 0px;}
#main>.workshop>.container>ul>li .img{position:relative; overflow:hidden;}
#main>.workshop>.container>ul>li .img img{max-width: 100%}
#main>.workshop>.container>ul>li:hover .img>img{transform:scale(1.1);width:100%;height:auto; transition:all 1s;}


#main>.news{margin:0 auto;padding:50px;}
#main>.news>.container{width:100%;max-width:1620px;margin:0 auto;padding-top:20px;}
#main>.news>.container>.isnew{margin:0 auto;}
#main>.news>.container>.isnew>ul{ text-align:center;margin:0 auto;}
#main>.news>.container>.isnew>ul>li{display:block; float:left; width:48%; padding:35px 0; border-bottom:1px solid #eee;}
#main>.news>.container>.isnew>ul>li:nth-child(2){float:right;}
#main>.news>.container>.isnew>ul>li>a{display:block;}
#main>.news>.container>.isnew>ul>li .img{width:216px;height:132px;background:#666;text-align:center;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center; overflow:hidden;}
#main>.news>.container>.isnew>ul>li .img>img{width:100%;height:100%; transition:all 1s;}
#main>.news>.container>.isnew>ul>li .con{width:100%;text-align:left;}
#main>.news>.container>.isnew>ul>li .con>.tit{font-size:22px; font-weight:normal; color:#57575a;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#main>.news>.container>.isnew>ul>li .con>.txt{height:50px; margin:15px 0; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden; font-size:13px; font-weight:normal; color:#999; line-height:25px;transition:all .35s;}
#main>.news>.container>.isnew>ul>li .con>.time{color:#999; font-size:15px;}
#main>.news>.container>.isnew>ul>li>a:hover .tit{color:#1b5698;}
#main>.news>.container>.isnew>ul>li>a:hover .img>img{transform:scale(1.2);}
#main>.news>.container>.list{margin:0 auto; padding:10px 0;}
#main>.news>.container>.list>ul{ text-align:center;margin:0 auto; padding:10px 0;}
#main>.news>.container>.list>ul>li{display:block; float:left; width:48%; padding:10px 0;}
#main>.news>.container>.list>ul>li:nth-child(2n){float:right;}
#main>.news>.container>.list>ul>li>a{ position:relative; display:block;}
#main>.news>.container>.list>ul>li>a:after{ position:absolute;z-index:1;left:0; top:50%; margin-top:-2px; width:5px;height:5px; background:#555; border-radius:100%; content:''; transition:all .35s;}
#main>.news>.container>.list>ul>li .tit{padding-left:20px; text-align:left; width:70%; font-size:16px; font-weight:normal; color:#555;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#main>.news>.container>.list>ul>li .time{color:#999; font-size:15px; font-weight:normal;}
#main>.news>.container>.list>ul>li>a:hover:after{ background:#1b5698;}
#main>.news>.container>.list>ul>li>a:hover .tit{color:#1b5698;}
#main>.news .more{text-align:center; padding:30px 0;}
#main>.news .more>a{width:120px; border:1px solid #ddd;padding-right:10px; text-align:right; margin:0 auto;}
#main>.news .more span{color:#666;transform: translateX(-50%) !important;}
#main>.news .more a img{ left:85%; opacity:.8; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);  -o-filter: grayscale(100%); filter: grayscale(100%);}
#main>.news .more a:hover span{color:#1b5698;}
#main>.news .more a:hover img{left:85%; opacity:1; -webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0);  -o-filter: grayscale(0); filter: grayscale(0);}
#main>.news .more a:hover{ border:1px solid #1b5698;}

#main>.brand{ width:100%; height:530px; background:url("../images/brand-bg.jpg") no-repeat; background-position:0 0; background-attachment:fixed; background-size:cover; overflow:hidden; margin:0 auto;}
#main>.brand>.container{ position:relative; width:90%;max-width:1360px; text-align:left; margin:0 auto;}
#main>.brand>.container>.year{padding:100px 0px 30px 0px; font-size:14px; color:#fff;line-height:30px;}
#main>.brand>.container>.txt h1{ padding:20px 0; font-size:36px; font-weight:bold; color:#fff;}
#main>.brand>.container>.txt p{font-size:14px;color:#fff;line-height:24px;padding-bottom:50px;}
#main>.brand>.container>.txt span{font-size:10px;color:#fff;font-family: "poppins light";}
#main>.brand .more{ position:absolute;z-index:1; right:0;bottom:24%;}
@media only screen and (max-width: 1600px){
  #main>.workshop>.container{max-width: 1360px;}
  #main>.solution>.container{max-width: 1360px;}
  #main>.news>.container{max-width: 1360px;}
  #main>.solution>.container>ul>li{height: 231px;}
  #main>.solution>.container>ul>li:first-child{height:231px;}
  #main>.solution>.container>ul>li:last-child{height:231px;}
}
@media only screen and (max-width: 1460px){
  #main>.news>.container>.isnew>ul>li .con{ width:100%;}
  #main>.workshop>.container{max-width: 1200px;}
  #main>.solution>.container{max-width: 1200px;}
  #main>.solution>.container>ul>li{height: 204px;}
  #main>.solution>.container>ul>li:first-child{height:204px;}
  #main>.solution>.container>ul>li:last-child{height:204px;}
}
@media only screen and (max-width: 1280px){
  #main>.news>.container>.isnew>ul>li .img{width:200px; height:122px;}
  #main>.news>.container>.isnew>ul>li .con{ width:100%; padding:0 2%;}
}
@media only screen and (max-width: 1080px){
  #main>.news>.container>.isnew>ul>li .img{width:180px; height:110px;}
  #main>.news>.container>.isnew>ul>li .con>.tit{ font-size:20px;}
  #main>.solution>.container>ul>li .con{ margin-top:-60px; height:120px;}
  #main>.solution>.container>ul>li .con>.icon>img{height:72px;}
  #main>.advantage>.container>ul>li .con{margin-top:-80px;}
  #main>.advantage>.container>ul>li .con>.tit{ font-size:22px;}
  #main>.brand>.container>.txt{ padding:30px 0; font-size:28px;}
}
@media only screen and (max-width: 960px){
  #main>.news>.container>.isnew>ul>li .img{width:160px;height:100px;}
  #main>.news>.container>.isnew>ul>li .con{ width:46%;}
  #main>.news>.container>.isnew>ul>li .con>.tit{ font-size:22px;}
  #main>.news>.container>.isnew>ul>li .con>.txt{ height:70px; font-size:14px;}
  #main>.news>.container>.isnew>ul>li .con>.time{font-size:14px;}
  #main>.news>.container>.list>ul>li .tit{ font-size:14px;}
  #main>.news>.container>.list>ul>li .time{font-size:14px;}

  #main>.solution>.container>ul>li .con{ margin-top:-50px; height:100px;}
  #main>.solution>.container>ul>li .con>.icon>img{height:56px;}
  #main>.solution>.container>ul>li .con>.tit{ padding:12px 0; font-size:16px;}
  #main>.advantage>.container>ul>li .con>.tit{ font-size:20px;}
  #main>.brand>.container>.txt{ font-size:25px;}

}
@media only screen and (max-width: 820px){
  #main>.advantage>.container>ul>li .con{margin-top:-60px;}
  #main>.advantage>.container>ul>li .con>.icon>img{ width:90px; height:auto;}
  #main>.advantage>.container>ul>li .con>.tit{ font-size:18px;}
  #main>.solution>.container>ul>li .con>.tit{ font-size:14px;}
}
@media only screen and (max-width: 760px){
  #main .more>a{ width:40px;height:40px;line-height:40px; }
  #main>.news>.container>.isnew>ul>li{display:block; float:none; width:100%; padding:15px 0;}
  #main>.news>.container>.isnew>ul>li .img{width:200px; height:122px;}
  #main>.news>.container>.isnew>ul>li .con{ width:60%;}
  #main>.news>.container>.list>ul>li{ float:none!important; width:100%;}
}
@media only screen and (max-width: 650px){
  #main .title{ font-size:20px;}
  #main>.product>.container{padding:10px 0;}
  #main>.product>.container .swiper-container{ width:90%;}
  #main>.product>.container .swiper-slide>a{padding:0;}
  #main>.product>.container .swiper-slide>a>.tit{ font-size:14px;}
  #main>.product>.container .button-next{ width:30px; height:30px;}
  #main>.product>.container .button-prev{ width:30px; height:30px;}
  #main>.news{padding:24px 12px;}
  #main>.news>.container>.isnew>ul>li .img{width:100%; float:none;height:auto;}
  #main>.news>.container>.isnew>ul>li .con{ width:100%; float:none;}
  #main>.news>.container>.isnew>ul>li .con>.tit{ padding-top:10px; font-size:18px;}
  #main>.solution>.container>ul>li{width:50%; margin-right:0 !important; float:left; height: auto;}

  #main>.solution>.container>ul>li:first-child{width:100%;}
  #main>.solution>.container>ul>li:last-child{width:100%;}
  #main>.solution>.container>ul>li:nth-child(3n){margin-right:0 !important;}
  #main>.solution>.container>ul>li:nth-child(even){ float:right;}
  #main>.solution>.container>ul>li .con>.icon>img{height:64px;}
  #main>.solution>.container>ul>li .con>.tit{ font-size:16px;}
   #main>.workshop>.container{width:96%; margin:0px auto;}
  #main>.workshop>.container>ul>li{width:100%; float:none!important;}
  #main>.workshop>.container>ul>li img{max-width: 100%; max-height: 100%;}
  #main>.advantage>.container>ul>li{width:100%; float:none!important;}
  #main>.brand{ height:420px;}
  #main>.brand>.container>.year{padding-top:30px; padding-bottom:16px}
  #main>.brand>.container>.txt{ padding:10px 0;font-size:18px;}
  #main>.brand>.container>.logo{ padding:20px 0 40px 0; }
#main>.brand>.container>.txt p{padding-bottom:24px;}
  #main>.brand .more{ position:relative; left:0; right:auto;bottom:auto;}

}
@media only screen and (max-width: 460px){
  #main>.solution>.container>ul>li .con{ margin-top:-40px; height:80px;}
  #main>.solution>.container>ul>li .con>.icon>img{height:46px;}
  #main>.solution>.container>ul>li .con>.tit{ padding:10px 0; font-size:12px;}
}


/*kefu TOP*/
#kefu{position:fixed;z-index:1001;right:0;bottom:105px;width:70px;height:240px;}
#kefu .kefu-box{position:relative;float:right;}
#kefu .clearfix:after{content:""; display:block; clear:both;}
#kefu .a{display:block;width:44px;height:44px;background:#000;cursor:pointer;outline:none;}
#kefu .a.active, #kefu .a:hover{background-color:#1b5698;}
#kefu .a .i{float:left;width:44px;height:44px;background-image:url(../images/kefu_icon.png);background-repeat:no-repeat;}
#kefu .a-service .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../images/kefu-bg.png);background-repeat:no-repeat;background-position:0 0;}
#kefu .a-service-phone .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../images/kefu-bg.png);background-repeat:no-repeat;background-position:-27px 0;}
#kefu .a-mall .i{width:20px; height:20px; margin-top:12px; margin-left:12px; background-image:url(../images/ico.kf.taobao.png); background-repeat:no-repeat; background-size:100%;}
#kefu .a-qrcode .i{background-position:-44px 0;}
#kefu .a-cart .i{background-position:-88px 0;}
#kefu .a-top .i{background-position:-132px 0;}
#kefu .a-top{background:rgba(0,0,0,.8);display:none;}
#kefu .a-top:hover{background:rgba(0,0,0,.4);}
#kefu .d{display:none;width:223px;background:#fff;position:absolute;right:67px;min-height:90px;border:1px solid #E0E1E5;border-radius:3px;box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);}
#kefu .d .arrow{position:absolute;width:8px;height:12px;background:url(../images/kefu_bg_arrow.png) no-repeat;right:-8px;top:31px;}
#kefu .d-service{top:0;}
#kefu .d-service-phone{top:34px;}
#kefu .d-qrcode{top:78px;}
#kefu .d .inner-box{padding:8px 22px 12px;}
#kefu .d-service-item{border-bottom:1px solid #eee;padding:14px 0;}
#kefu .d-service .d-service-item{border-bottom:none;}
#kefu .d-service-item .circle{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#F1F1F3;display:block;float:left;}
#kefu .d-service-item .i-qq{width:44px;height:44px;background:url(../images/kefu_con_icon03.png) no-repeat center 15px;display:block;transition:all .2s;border-radius:50%;overflow:hidden;}
#kefu .d-service-item:hover .i-qq{background-position:center 3px;}
#kefu .d-service-item .i-tel{width:44px;height:44px;background:url(../images/kefu_con_icon02.png) no-repeat center center;display:block;}
#kefu .d-service-item h3{float:left;width:112px;line-height:44px;font-size:15px;margin-left:12px;}
#kefu .d-service-item .text{float:left;width:112px;line-height:22px;font-size:15px;margin-left:12px;}
#kefu .d-service-item .text .number{font-family:Arial; color:#1b5698;}
#kefu .d-service-intro{padding-top:10px;}
#kefu .d-service-intro p{float:left;line-height:27px;font-size:12px;width:50%;white-space:nowrap;color:#888;}
#kefu .d-service-intro i{background:url(../images/kefu_con_icon01.png) no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;}
#kefu .d-qrcode{text-align:center; width:290px;}
#kefu .d-qrcode .inner-box{padding:20px 0;}
#kefu .d-qrcode .qrcode{ display:inline-block; width:110px;padding:0 9px; border-left:1px solid #eee;}
#kefu .d-qrcode .qrcode:first-child{ border:0 !important;}
#kefu .d-qrcode .qrcode>img{ width:100%; height:auto;}
#kefu .d-qrcode p{font-size:12px;color:#93959c;}
#kefu .d-mall{text-align:center; width:145px; top: 128px;}
#kefu .d-mall .inner-box{padding:20px 0;}
#kefu .d-mall .qrcode{ display:inline-block; width:110px; padding:0 9px; border-left:1px solid #eee;}
#kefu .d-mall .qrcode:first-child{ border:0 !important;}
#kefu .d-mall .qrcode img{ width:100%; height:auto;}
#kefu .d-mall p{font-size:12px;color:#93959c;}
@media only screen and (max-width: 960px){
  #kefu{display:none;}
}
/*END*/