﻿@import url(style.css);
@import url(mobile.css);
@import url(custom.css);
@import url(pscroll.css);
/*首页*/
/*轮显*/
.main .banner .wrap{ max-width:1820px;}
/*.main .banner .swiper-other {position: absolute; left: 0; bottom: 40px;z-index: 2;width: 100%;}*/
.main .banner .swiper-other .swiper-points-num{ position:absolute; right:0; bottom:0;}
.main .banner .swiper-other .swiper-pagination-bullet {--cw: 18px; margin: 0 12px; position: relative; cursor: pointer;background:none;}
.main .banner .swiper-pagination-bullet-active{ background:none;}
.main .banner .swiper-other .swiper-pagination-bullet::before {content: "";position: absolute; left: 0;top: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8);
 width: var(--cw); height: var(--cw);opacity: 1; transition: opacity 0.3s;}
 .main .banner .swiper-other .swiper-pagination-bullet-active::before {border: 2px solid rgba(255, 255, 255, 0.2);}
.main .banner .swiper-other .cycle-box {--size: var(--cw); --b-c: #ffffff; --b-w: 1px; display: block;}
.main .banner [flex]{display: flex;}
.main .banner [flex][flex~="aic"] {align-items: center;}
.main .banner [flex][flex~="jc"] {justify-content: center;}
.main .banner .cycle-box {--size: 40px; --time: 4s;--b-c: var(--main-color); --b-w: 3px; position: relative;width: var(--size);height: var(--size);}
.main .banner .cycle-box .cycle-son {position: absolute; top: 0;height: var(--size);width: calc(var(--size)*0.5);overflow: hidden;}
.main .banner .cycle-box .cycle-son::before {content: ''; display: block;position: absolute; left: 0;top: 0; width: 100%;height: 100%;}
.main .banner .cycle-box .left-c {left: 0;}
.main .banner .cycle-box .left-c::before {transform-origin: right center; border-radius: calc(var(--size)*0.5) 0 0 calc(var(--size)*0.5);border: var(--b-w) solid var(--b-c);
 border-right: 0; transform: rotate(-180deg);}
.main .banner .cycle-box .right-c {right: 0;}
.main .banner .cycle-box .right-c::before {transform-origin: left center;border-radius: 0 calc(var(--size)*0.5) calc(var(--size)*0.5) 0;border: var(--b-w) solid var(--b-c);
 border-left: 0; transform: rotate(-180deg);}
.main .banner .cycle-box.run .left-c::before {transform: rotate(0deg);animation: cycle-left var(--time) linear;}
.main .banner .cycle-box.run .right-c {right: 0;}
.main .banner .cycle-box.run .right-c::before {transform: rotate(0deg);animation: cycle-right var(--time) linear;}
.main .banner .cycle-box-h:hover .left-c::before { transform: rotate(0deg);animation: cycle-left var(--time) linear;}
.main .banner .cycle-box-h:hover .right-c {right: 0;}
.main .banner .cycle-box-h:hover .right-c::before {transform: rotate(0deg); animation: cycle-right var(--time) linear;}
.main .banner .run .cycle-box .left-c::before {animation: cycle-left var(--time) linear;}
.main .banner .run .cycle-box .right-c {right: 0;}
.main .banner .run .cycle-box .right-c::before { animation: cycle-right var(--time) linear;}
html{--scroll-w: 4px; --wrap-1600-width: clamp(calc(480px - var(--scroll-w) - 68px*2), calc(100vw - var(--scroll-w) - 68px*2), 1600px);}
/*产品中心*/
.i_title{ overflow:hidden; color:#999999; margin-top:6%;}
.i_title .h3{ font-weight:normal; overflow:hidden; line-height:1.3;color:#222; letter-spacing:2px;}
.i_title .p{ overflow:hidden;line-height:1.6; margin-top:1%;}
.i_one{ --cw: var(--wrap-1600-width); position:relative; margin-top:7%;/* padding-top:2%;*/ margin-bottom:6%;}
.auto-title-big{margin-left: -0.08em;/*opacity: 0.13;*/ word-break: keep-all;white-space: nowrap;letter-spacing: -0.05em;font-family: 'DIN';font-size: calc(var(--cw)*0.2507);font-weight: bold;
  line-height: 0.8em;color: #eef1f9;-webkit-text-stroke: 0.3px #fff; position:absolute; top:0; left:0;font-style:italic;}
.bnts_a{ transition:all 0.3s; --m-h: 46px; font-size: 15px;line-height: var(--m-h); color: #ffffff; text-align:center;--linear-color: linear-gradient(-124deg,#0bb0e5, #0191e4); --linear-color-h: linear-gradient(124deg, #0bb0e5, #0191e4);}
.bnts_a .a{ position: relative; padding: 0 3.3em; display:inline-block; vertical-align:top;  background: var(--linear-color);
border-radius: calc(var(--m-h) * 0.5) calc(var(--m-h) * 0.5) calc(var(--m-h) * 0.5) calc(var(--m-h) * 0.5); border: 1px solid transparent; transition: background 0.3s; color: #ffffff; }
.bnts_a .a:hover{ background: var(--linear-color-h);}
.bnts_a .a::before { content: ""; display: block; position: absolute;left: 0;top: 0; border-radius: calc(var(--m-h) * 0.5) calc(var(--m-h) * 0.5) calc(var(--m-h) * 0.5) 0px; border: 1px solid transparent;
 width: 100%;height: 100%;}
.bnts_a .a:hover::before { border-color: transparent;}
/*我们的优势*/
.i_two{ overflow:hidden; background:url(../img/i_bg1.jpg) center center no-repeat; background-size:cover;}
.i_two .i_title{ color:rgba(255,255,255,0.4); margin-top:10%;}
.i_two .i_title .h3{ color:#fff;}
.i_two .ul{ overflow:hidden; margin-top:9%; margin-bottom:9%;}
.i_two .ul li{ float:left; width:15.5%; margin-right:2%; overflow:hidden;}
.i_two .ul li:last-child{ width:12.5%; margin-right:0;}
.i_two .ul li img{ height:94px; display:block;transition:all 0.3s;}
.i_two .ul li:hover img{transform: rotateY(180deg);}
.i_two .ul li .h3{ font-weight:normal; overflow:hidden; color:#fff; line-height:30px; min-height:60px; margin-top:25px; max-width:190px;}
.i_two .ul li a{ display:inline-block; overflow:hidden; position:relative; z-index:0;}
.i_two .ul li a:after{ content:""; position:absolute; bottom:0; right:0; width:0px; height:0px; /*background:rgba(11,176,229,0.3);*/transition:all 0.3s; border-radius:50%; z-index:-1; background:linear-gradient(-124deg,#0bb0e5, #0191e4);opacity:0.3;filter:Alpha(opacity=30);}
.i_two .ul li:hover a:after{ width:60px; height:60px;}
.i_two .bnts_a{ text-align:left; margin-bottom:10.5%;}
/*关于我们*/
.i_about{ overflow:hidden; background:url(../img/i_bg2.jpg) center center no-repeat; background-size:cover;}
.i_about .wrap{ margin-top:6%; margin-bottom:6%;}
.i_about .i_about_l{ float:left; width:32.5%; overflow:hidden;}
.i_about .i_about_l .desc{ color:#afafaf; line-height:1.5; overflow:hidden;}
.i_about .i_about_l .h3{ font-weight:normal; overflow:hidden; line-height:1.3; margin-top:3%; color:#333;}
.i_about .i_about_r{ float:right; width:65.5%; overflow:hidden; max-width:976px;}
.i_about .i_about_r .p{ overflow:hidden; line-height:38px; font-size:18px; color:#666666; margin-top:70px;}
.i_about .i_about_r .p p{ margin-bottom:7px; overflow:hidden;}
.i_about .i_about_r .counter{ float:right; max-width:690px; width:100%;text-align:left; margin-top:18%;}
.i_about .i_about_r .counter ul li{ float:left;display:inline-block; vertical-align:top; width:48%; transition:all 0.3s; position:relative; }
.i_about .i_about_r .counter ul li:last-child{ float:right; max-width:250px;}
.i_about .i_about_r .counter ul li .txts2{}
.i_about .i_about_r .counter ul li .nums{  line-height:1; color:#0bb0e5;}
.i_about .i_about_r .counter span{display:inline-block; vertical-align:middle; overflow:hidden; font-weight:bold;}
.i_about .i_about_r .counter label{display:inline-block;vertical-align:top; font-size:16px;margin-left:5px;}
.i_about .i_about_r .counter label sup{ font-size:12px;}
.i_about .i_about_r .counter .h5{font-weight: normal;overflow:hidden; line-height:1.3;margin-top:10px;  color:#444444;max-width:290px;}
.i_about .i_about_r .counter .h6{ font-weight: normal; font-size:16px;  overflow:hidden; line-height:24px;margin-top:12px;  color:#777777;max-width:290px;}
.i_about .i_about_r .counter ul li:hover{-webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0);}
.i_about .bnts_a{ text-align:left; margin-top:6%;}


@media screen and (max-width: 1200px) {
/*轮显*/
.main .banner .swiper-slide .desc{ margin-bottom:20px;}
.main .banner:hover .btn .boxs{width:97%;}
.main .banner .btn .boxs{ width:98%;}
/*.main .banner .swiper-other { bottom: 30px;}*/
.main .banner .swiper-other .swiper-pagination-bullet { --cw: 12px; margin: 0 10px;}
.main .banner .swiper-other .swiper-pagination-bullet::before { border-width: 2px;}
.main .banner .swiper-other .cycle-box { --b-w: 2px; }
/*产品中心*/
.i_title{ margin-top:8%;}
/*我们的优势*/
.i_two .ul li img{ height:85px;}
/*关于我们*/
.i_about .i_about_r .p{ font-size:17px; line-height:32px; margin-top:40px;}

}
@media screen and (max-width: 960px) {
/*我们的优势*/
.i_two .ul{ margin-bottom:6%;}
.i_two .ul li{ width:32%; margin-bottom:5%;}
.i_two .ul li:nth-child(3n){ margin-right:0;}
.i_two .ul li:nth-child(3n+1){ clear:both;}
.i_two .ul li:last-child{ width:32%;}
.i_two .ul li img{ height:75px;}
/*关于我们*/
.i_about .i_about_r .p{ font-size:16px; line-height:30px; margin-top:30px;}
.i_about .i_about_r .counter label{ font-size:14px;}
.i_about .i_about_r .counter .h6{ font-size:14px;}
}

@media screen and (max-width: 780px) {
/*我们的优势*/
.i_two .ul li img{ height:70px;}
.i_two .ul li .h3{ margin-top:20px;}
/*关于我们*/
.i_about .i_about_l{ float:none; width:100%;}
.i_about .i_about_l .h3{ margin-top:2%;}
.i_about .i_about_r{ float:none; width:100%; max-width:none;}
.i_about .i_about_r .p{ margin-top:4%; line-height:26px;}
.i_about .i_about_r .counter{ float:none; max-width:none; margin-top:15%;}
}

@media screen and (max-width: 640px) {
/*轮显*/
.main .banner .swiper-slide .rbtn{ min-width:130px; padding:0 30px; font-size:15px;}
.main .banner .swiper-slide .rbtn span{ height:42px; line-height:42px; padding:0;}
.main .banner .swiper-button-prev,.main .banner .swiper-button-next{ width:40px; height:40px; margin-top:-20px;background-size:10px auto;}
/*.main .banner .swiper-other { bottom: 20px;}*/
.main .banner .swiper-other .swiper-pagination-bullet { margin:0 6px;}
.main .banner .down{ width:40px; height:40px;}
/*我们的优势*/
.i_two .ul li img{ height:60px;}
.i_two .ul li .h3{ margin-top:15px;}
/*关于我们*/
.i_about .i_about_r .counter .h6{ line-height:22px; margin-top:8px;}
.i_about .i_about_r .p{ font-size:15px;}
.i_about .i_about_r .counter .h6{ font-size:13px;}
.i_about .i_about_r .counter label{ font-size:13px;}

}
@media screen and (max-width: 480px) {
/*轮显*/
.main .banner .btn{bottom:22px;}
.main .banner .swiper-slide .rbtn{ min-width:110px; padding:0 20px; font-size:13px; margin-top:4%;}
.main .banner .swiper-slide .rbtn span{ height:36px; line-height:36px;}
.main .banner .swiper-slide .rbtn{ margin-top:1%;}
.main .banner .swiper-slide .txt{ letter-spacing:0; margin-bottom:15px;}
.main .banner .down{ display:none;}
/*产品中心*/
.bnts_a{ font-size:14px;--m-h: 40px; }
.bnts_a .a{padding: 0 3em;}
.i_one{ margin-bottom:8%;}
.auto-title-big{ display:none;}
/*我们的优势*/
.i_two .ul li{ width:48%;}
.i_two .ul li:nth-child(2n){ margin-right:0;}
.i_two .ul li:nth-child(3n+1){ clear:none;}
.i_two .ul li:nth-child(2n+1){ clear:both;}
.i_two .ul li:last-child{ width:48%;}
.i_two .ul li img{ height:50px;}
.i_two .ul li .h3{ margin-top:10px; line-height:26px; min-height:52px;}
.i_two .ul li:hover a:after{ width:50px; height:50px;}
/*关于我们*/
.i_about .i_about_l .h3{ line-height:1.4;}
.i_about .i_about_r .p{ font-size:14px; line-height:22px;}
.i_about .i_about_r .p p{ margin-bottom:5px;}
.i_about .i_about_r .counter label{ font-size:12px;}
.i_about .i_about_r .counter .h6{ font-size:12px; line-height:20px;}
}
@media screen and (max-width: 420px) {
/*轮显*/
.main .banner .swiper-slide .rbtn{ min-width:100px;}
.main .banner .swiper-slide .rbtn span{ height:32px; line-height:32px;}
/*产品中心*/
.bnts_a{ font-size:13px;--m-h: 36px;}
.bnts_a .a{padding: 0 2.5em;}
/*我们的优势*/
.i_two .ul li img{ height:44px;}
}
@media screen and (min-width: 1200px) {
/*轮显*/
.swiper-container{ height:100%!important;}
.main .banner .swiper-slide {position: relative; height:100%;}

}
@keyframes animate1 {
  0% {
    transform: translate(-50%, 0%);
  }
  50% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}

@keyframes cycle-left {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes cycle-right {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
