@charset "utf-8";
/* CSS Document */

#banner{position:relative; z-index:90; width:100%; height:auto;margin:0 auto; background:#fff; padding-top:90px;overflow:hidden; transition:all .35s;}
#banner .v-mob{ display:inline-block;}

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

/*#banner>.swiper-container {width: 100%; height:100%;}
#banner .swiper-slide { 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 .swiper-slide-ani{ position:absolute;z-index:99; left:50%; top:200px; margin-left:-600px; width:1200px; text-align:left;}
#banner .swiper-slide .swiper-slide-ani>.con{ position:absolute;z-index:4; width:600px; height:175px;}
#banner .swiper-slide .swiper-slide-ani>.con span{position:relative;z-index:1;}
#banner .swiper-slide .swiper-slide-ani>.con h2{ position:absolute;z-index:4; left:60px;top:50px; font-size:36px; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.3); text-align:left;}
#banner .swiper-slide .swiper-slide-ani>.con h3{position:absolute;z-index:4; left:60px;top:100px; font-size:24px; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.3); text-align:left;}
#banner .swiper-slide .swiper-slide-ani>.b1{left:0;top:0;}
#banner .swiper-slide .swiper-slide-ani>.b2{right:0;top:0; width:560px; text-align:left;}
#banner .swiper-slide img{max-width:100%; height:auto;}
#banner .swiper-slide:after{ position:absolute;z-index:5;left:0;top:0;width:100%;height:100%; background:rgba(0,0,0,.8); content:''; animation:opfade 4s infinite;animation-iteration-count:1;animation-fill-mode : forwards;}
#banner>.button-prev{ position:absolute;z-index:1;left:40px; top:50%; margin-top:-23px;outline:none; width:56px;height:56px; border-radius:100%; background:url("../img/prev.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.2; cursor:pointer; transition:all .35s;}
#banner>.button-prev:hover{opacity:.8; left:50px;}
#banner>.button-next{ position:absolute;z-index:1;right:40px; top:50%; margin-top:-23px;outline:none; width:56px;height:56px; border-radius:100%; background:url("../img/next.png") no-repeat; background-position:50% 50%; background-size:100% auto;opacity:.2; cursor:pointer; transition:all .35s;}
#banner>.button-next:hover{opacity:.8; right:50px;}
#banner .swiper-pagination{ bottom:20px;}
#banner .swiper-pagination-bullet {width: 60px!important;height: 2px!important;margin:0 5px; -webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;}

*/


.icon-left-open-big{ width:30px;height:30px; background:url("../img/icon_arrow_noline_left_white.png") no-repeat; background-position:50% 50%; background-size:100% auto;}

.icon-right-open-big{width:30px;height:30px; background:url("../img/icon_arrow_noline_right_white.png") no-repeat; background-position:50% 50%; background-size:100% auto;}







#main{margin:0 auto; background:#fff;}
#main>.solution{ width:86%; max-width:1610px; margin:0 auto;}
#main>.solution>.title{margin:0 auto;padding:60px 0;}
#main>.solution>.title>h2{ font-size:30px; font-weight:normal; color:#333; text-align:center;}
#main>.solution>.title>p{ display:block;padding:10px 0; text-align:center;font-size:16px; color:#666;}
#main>.solution>.container{margin:0 auto;}
#main>.solution>.container ul{margin:0 auto;}
#main>.solution>.container ul>li{ position:relative;overflow:hidden; display:block; float:left; width:25%;padding:0 5px; box-sizing:border-box;}
#main>.solution>.container .swiper-slide>a{display:block;position:relative;overflow:hidden; display:block;}
#main>.solution>.container .swiper-slide>a .tit{ position:absolute;z-index:3; left:0; top:0; width:100%; box-sizing:border-box;padding:50px; text-align:center; color:#fff;}
#main>.solution>.container .swiper-slide>a .tit>h2{font-size:32px; font-weight:normal;}
#main>.solution>.container .swiper-slide>a .tit>p{display:block;padding:10px 0; font-size:18px; font-weight:normal;}
#main>.solution>.container .swiper-slide>a .con{ position:absolute;z-index:9; top:600px; width:100%;box-sizing:border-box;padding:50px;opacity:0; transition:all .4s;}
#main>.solution>.container .swiper-slide>a .con>.icon{ text-align:center;}
#main>.solution>.container .swiper-slide>a .con>.txt{ padding:20px 0; color:#fff; font-size:17px; text-align:center; line-height:26px;}
#main>.solution>.container .swiper-slide>a .con>.more{ transition:all .35s;}
#main>.solution>.container .swiper-slide>a .con>.more>img{ height:22px; width:auto;}
#main>.solution>.container .swiper-slide>a .con>.more:hover{padding-left:20px;}
#main>.solution>.container .swiper-slide>a .img{position:relative; overflow:hidden; background:#000; margin:0 auto; transition:all .35s;}
#main>.solution>.container .swiper-slide>a .img>img{width:100%;height:auto; transition:all .6s;}
#main>.solution>.container .swiper-slide>a:hover .img>img{opacity:.3;}
#main>.solution>.container .swiper-slide>a:hover .con{top:150px; bottom:auto; opacity:1;}

#main>.catalog{margin:0 auto; background:url("../img/main_product_bg.jpg") no-repeat; background-position:left top;}
#main>.catalog>.title{margin:0 auto;padding:60px 0; padding-bottom:0 !important;}
#main>.catalog>.title>h2{ font-size:30px; font-weight:normal; color:#333; text-align:center;}
#main>.catalog>.title>p{ display:block;padding:10px 0; text-align:center;font-size:16px; color:#666;}
#main>.catalog>.container{ width:86%; max-width:1600px; margin:0 auto; padding-bottom:50px;}
#main>.catalog>.container>.swiper-container{margin:0 auto;}
#main>.catalog>.container .swiper-slide img{ width:100%;height:auto;}
#main>.catalog>.container .swiper-slide .tit{ position:absolute;z-index:99;}
#main>.catalog>.container .swiper-slide .tit>a{display:block; background:rgba(0,0,0,.5);padding:20px 30px; font-size:18px; color:#fff; text-align:left; transition:all .35s;}
#main>.catalog>.container .swiper-slide .tit>a>img{height:40px; width:auto; margin-right:10px;}
#main>.catalog>.container .swiper-slide .tit>a:hover{ background:rgba(23,97,171,.8)}
#main>.catalog>.container .swiper-slide .tit>a:hover{transform:scale(1.2);}
#main>.catalog>.container .swiper-slide .series{margin:0 auto;}
#main>.catalog>.container .swiper-slide .series>a{ position:relative;z-index:3; display:inline-block; margin:0 auto; box-sizing:border-box;padding:16px 50px; font-weight:bold; border-radius:8px; border:2px solid #026ab5; color:#026ab5; font-size:18px; transition:all .35s;}
#main>.catalog>.container .swiper-slide .series>a:hover{padding:16px 60px; border:2px solid #0298e3; color:#0298e3;}
#main>.catalog>.container .swiper-pagination{position:relative!important;margin:0 auto; padding:20px;}
#main>.catalog>.container .swiper-pagination-bullet {width: 12px!important;height: 12px!important;margin:0 5px;outline:none;}

#main>.about{ position:relative; margin:0 auto; }
#main>.about>.img{margin:0 auto;}
#main>.about>.img>img{ width:100%;height:auto;}
#main>.about>.container{ position:absolute;z-index:4;left:50%;top:0; height:100%; margin-left:-800px; width:1600px;}
#main>.about>.container>.con{ position:absolute;z-index:2; right:0;top:50%; margin-top:-150px; display:inline-block; box-sizing:border-box; height:300px; background:rgba(255,255,255,.7);padding:60px; text-align:left;}
#main>.about>.container>.con>h2{font-weight:bold; font-size:36px;}
#main>.about>.container>.con>p{padding:20px 0; font-size:16px; color:#666; line-height:24px;}
#main>.about>.container>.con>a{display:inline-block;background:#0298e3; font-size:14px; color:#fff;padding:10px 30px; transition:all .35s;}
#main>.about>.container>.con>a:hover{background:none; border:2px solid #0298e3; color:#0298e3;}

#main>.statistics{width:86%; max-width:1600px;margin:0 auto;padding:80px 0;}
#main>.statistics>ul{margin:0 auto;}
#main>.statistics>ul>li{display:inline-block; float:left; width:33.33%; box-sizing:border-box; padding-right:120px;text-align:left;}
#main>.statistics>ul>li>.tit{padding:10px 0;}
#main>.statistics>ul>li>.tit>h2{display:inline-block; font-size:60px; color:#026ab5;}
#main>.statistics>ul>li>.tit>span{display:inline-block;padding:0 10px;font-size:16px;color:#333;}
#main>.statistics>ul>li>.txt{font-size:18px; font-weight:bold; color:#333;line-height:30px;}


@media only screen and (max-width: 1440px){
  #banner .swiper-slide .swiper-slide-ani{ top:180px; margin-left:-40%; width:80%;}
  #banner .swiper-slide .swiper-slide-ani>.con h2{  left:60px;top:50px; font-size:30px;}
  #banner .swiper-slide .swiper-slide-ani>.con h3{left:60px;top:100px; font-size:24px;}
  #main>.about>.container{ margin-left:-43%; width:86%;}
  #main>.statistics>ul>li>.tit>span{display: block; padding: 0;}
  #main>.statistics>ul>li>.txt{font-size:16px;line-height:26px;}
}
@media only screen and (max-width: 1200px){

  #banner .swiper-slide .swiper-slide-ani{ top:120px;}
  #banner .swiper-slide .swiper-slide-ani>.con img{width:70px; height:auto;}
  #banner .swiper-slide .swiper-slide-ani>.con h2{top:30px; font-size:24px;}
  #banner .swiper-slide .swiper-slide-ani>.con h3{top:70px;font-size:18px;}


  #main>.catalog>.container .swiper-slide .tit>a{padding:10px 20px; font-size:16px;}
}

@media only screen and (max-width: 800px){
  #banner{ padding-top:60px;}
  #banner>.button-prev{ margin-top:-15px;width:30px;height:30px;}
  #banner>.button-next{ margin-top:-15px;width:30px;height:30px;}
  #main>.solution>.title>h2{ font-size:26px;}
  #main>.solution>.title>p{ padding:10px 60px;font-size:14px;}
  #main>.solution>.container .swiper-slide>a .tit>h2{font-size:28px;}
  #main>.solution>.container .swiper-slide>a .tit>p{font-size:16px;}
  #main>.solution>.container .swiper-slide>a .con{ top:600px;padding:30px 50px;}
  #main>.solution>.container .swiper-slide>a .con>.icon>img{ width:80px;height:auto;}
  #main>.solution>.container .swiper-slide>a .con>.txt{ font-size:14px;line-height:24px;}
  #main>.solution>.container .swiper-slide>a .img>img{opacity:.6;}
  #main>.solution>.container .swiper-slide>a .con{top:150px !important; bottom:auto!important; opacity:1 !important;}
  #main>.catalog>.title{ width:86%;}
  #main>.catalog>.title>h2{ font-size:26px; }
  #main>.catalog>.title>p{padding:10px 60px; font-size:14px;}
  #main>.catalog>.container .swiper-slide .tit>a{padding:6px 16px; font-size:14px;}
  #main>.about>.container{ position:absolute;z-index:4;left:auto; right:0; top:0; margin-left:0; width:100%;}
  #main>.about>.container>.con{  top:0; left:auto; right:0; margin-left:0; margin-top:0; display:inline-block; box-sizing:border-box; height:100%; background:rgba(255,255,255,.7);padding:30px; text-align:left;}
  #main>.about>.container>.con>h2{font-size:26px;}
  #main>.about>.container>.con>p{font-size:14px;}
  #main>.about>.container>.con>a{font-size:12px; }
  #main>.statistics>ul>li{float:none; width:100%; box-sizing:border-box; padding-bottom:60px;}
  #main>.statistics>ul>li>.tit>h2{ font-size:46px;}
}




@media only screen and (max-width: 640px){
  #banner .swiper-slide .swiper-slide-ani>.b2{ width:80%;}
  #banner .swiper-slide .swiper-slide-ani{ top:80px;}
  #banner .swiper-slide .swiper-slide-ani>.con img{width:50px;}
  #banner .swiper-slide .swiper-slide-ani>.con h2{left:40px;top:20px; font-size:20px;}
  #banner .swiper-slide .swiper-slide-ani>.con h3{left:40px;top:50px;font-size:16px;}

  #main>.solution>.title>p{ padding:10px;font-size:12px;}
  #main>.solution>.container .swiper-slide>a .tit>h2{font-size:24px;}
  #main>.solution>.container .swiper-slide>a .tit>p{ font-size:13px;}
  #main>.solution>.container .swiper-slide>a .con{ top:500px;padding:30px;}
  #main>.solution>.container .swiper-slide>a .con>.txt{ font-size:12px;line-height:20px;}

  #main>.catalog>.title>p{padding:10px; font-size:12px;}
  #main>.catalog>.container{ width:100%;}
  #main>.catalog>.container .swiper-slide .tit{ display:none;}
  #main>.catalog>.container .swiper-slide .series>a{ padding:6px 20px; font-size:14px; }

  #main>.about>.container{ position:relative;left:0;top:0; height:auto; margin-left:0; width:100%;}
  #main>.about>.container>.con{ position:relative;right:0;top:0; margin-top:0; display:block; height:auto; background:rgba(2,106,181,1);padding:30px;}
  #main>.about>.container>.con>h2{font-size:20px; color:#fff;}
  #main>.about>.container>.con>p{color:rgba(255,255,255,.7);}
  #main>.statistics{ padding:30px 0;}
  #main>.statistics>ul>li{ padding-right:0;}
  #main>.statistics>ul>li>.tit>span{font-size:12px;}

}


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

  #main>.solution>.container .swiper-slide>a .tit>h2{font-size:20px;}
  #main>.solution>.container .swiper-slide>a .tit>p{ font-size:12px;}
  #main>.solution>.container .swiper-slide>a .con{ top:400px;padding:20px;}
  #main>.solution>.container .swiper-slide>a .con>.txt{ font-size:12px;line-height:20px;}

}

@media only screen and (max-width: 480px){
  #main>.solution>.container .swiper-slide>a .tit>h2{font-size:24px;}
  #main>.solution>.container .swiper-slide>a .tit>p{ font-size:13px;}
  #main>.solution>.container .swiper-slide>a .con{ top:300px;padding:30px;}
  #main>.solution>.container .swiper-slide>a .con>.txt{ font-size:12px;line-height:20px;}

}


@media only screen and (max-width: 420px){
  #banner .swiper-slide .swiper-slide-ani{display:none;}
}





@keyframes opfade{
  from {opacity:1;}
  to {opacity:0;}
}
@-webkit-keyframes opfade{
  from {opacity:1;}
  to {opacity:0;}
}
@keyframes opfade{
  from {opacity:1;}
  to {opacity:0;}
}
@-webkit-keyframes opfade{
  from {opacity:1;}
  to {opacity:0;}
}