@import url(style.css);
@import url(mobile.css);
@import url(custom.css);
@import url(pscroll.css);
@import url(app.css);
@import url(map.css);

/*网站body反色页面黑白包含多款浏览器*/
/*html { */
/*    -webkit-filter: grayscale(100%); */
/*    -moz-filter: grayscale(100%); */
/*    -ms-filter: grayscale(100%); */
/*    -o-filter: grayscale(100%); */
/*    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  */
/*    _filter:none; */
/*} */
/*全部图片标签反色黑白处理支持Chrome, Safari, Opera浏览器*/
/*img {*/
/*    -webkit-filter: grayscale(100%); */
/*    filter: grayscale(100%);*/
/*}*/

/*轮显*/
.banner_page{ position:absolute; width:110px; text-align:center; left:50%; margin-left:-881px; color:rgba(255,255,255,0.81); font-size:15px; z-index:10; bottom:25px; line-height:40px; z-index:5; /*font-style:italic;*/transition:all 0.3s; font-family:PingFang SC Medium; letter-spacing:2px;}
.banner_page .current{ font-size:40px; color:#fff;}
.banner_tit{position:absolute;left:50%; margin-left:-881px; color:#fff; font-size:18px;  bottom:140px; line-height:30px; letter-spacing:4px;}
.main .banner .swiper-button-next{ position:relative; right:0;}
/*公司简介*/
.i_title{ text-align:center; margin-top:6%; overflow:hidden;}
.i_title .h3{ /*font-weight:bold;*/ color:#222222; overflow:hidden; line-height:1.3;}
.i_title span{ display:block; line-height:1.1;overflow:hidden; color:#222; text-transform:uppercase; font-family:Arial; font-weight:bold; letter-spacing:-2px;}
.i_title span em{ font-style:normal; color:#0000cd;}
.i_title .p{ overflow:hidden; line-height:1.3; margin-top:1.5%; color:#999; font-size:16px;}
.i_one{ margin-top:6%; margin-bottom:6%;}
.i_one .imgs{ float:left; width:48.5%; overflow:hidden; position:relative;}
.i_one .imgs:after{ content:""; width:111px; height:111px; left:-111px; bottom:-25px; position:absolute; background:url(../images/i_pic5.png) no-repeat; background-size:100% 100%;}
.i_one .imgs img{display: block;width: 100%;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.6s ease-out 0s; -moz-transition:all 0.6s ease-out 0s; -o-transition:all 0.6s ease-out 0s; transition:all 0.6s ease-out 0s;}
.i_one .imgs:hover img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);}


.i_one .txts{ float:right; width:49%; overflow:hidden; max-width:660px; background:url(../images/i_bg5.png) 60% bottom no-repeat; background-size:410px auto; padding-bottom:4%;}
.i_one  .cons{ color:#888888; font-size:16px; overflow:hidden; line-height:36px; margin-top:5%;}
.i_one  .cons p{ padding-bottom:5px;}
.i_one .counter{ overflow:hidden; text-align:center; margin-top:7%;}
.i_one .counter ul li{ display:inline-block; vertical-align:top; padding-right:5.5%; margin-right:5.5%; transition:all 0.3s; position:relative; text-align:center; }
.i_one .counter ul li:after{ content:""; position:absolute; right:0; top:50%; margin-top:-24px; height:48px; width:1px; background:#e6e6e6;}
.i_one .counter ul li:last-child:after{ width:0;}
.i_one .counter ul li:last-child{ margin-right:0; padding-right:0;}
.i_one .counter ul li .txts2{}
.i_one .counter ul li .nums{ overflow:hidden; color:#333; line-height:1;}
.i_one .counter span{display:inline-block; vertical-align:top; overflow:hidden;  color:#0000cd; font-weight:bold; font-family:Arial;}
.i_one .counter label{display:inline-block;vertical-align:top; margin-top:-5%; line-height:2;font-weight:500; font-size:14px; color:#999999;  }
.i_one .counter .h6{ font-weight: normal; font-size:14px;  overflow:hidden; line-height:24px; height:24px;  white-space:nowrap;text-overflow:ellipsis; margin-top:2px; margin-bottom:6px; color:rgba(51,51,51,0.5);}
.i_one .counter ul li:hover{-webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0);}
.i_title2.bgs1{ background-image:url(../images/i_t2.png);}
.i_title2.bgs2{ background-image:url(../images/i_t3.png);}
.i_title2.bgs3{ background-image:url(../images/i_t5.png);background-size:auto 85px;}
.i_title2{ overflow:hidden; margin-top:3%; background-repeat:no-repeat; background-size:auto 61px; background-position:left top; text-align:left;}
.i_title2 .h3{  overflow:hidden; color:#333;  line-height:1.1;}
.i_title2.bgs3 .h3{ margin-top:35px;}
.i_title2 .h3 span{ display:inline-block; vertical-align:middle; margin-left:2%; margin-right:2%;}
.i_title2 .p{ color:#333333; overflow:hidden;margin-top:6%; padding-top:7%; position:relative;}
.i_title2 .p:after{ content:""; position:absolute; top:0; left:0; width:63px; height:3px; background:#d8271c;}

.i_more{ display:block; width:199px; height:48px; line-height:48px; overflow:hidden; margin-top:20px;  background:url(../images/i_bg1.png) no-repeat; background-size:100% 100%; font-style:normal; }

/*四大基地*/
.i_two{ overflow:hidden;background-attachment: fixed; background-repeat: no-repeat;  background-position: center center; background-size: cover;text-align:center;}
.i_two .wrap{ margin-bottom:266px; padding-top:1%;}
.i_two .i_title .h3{color:#fff;}
.i_two .i_title span{ color:#fff;}
.i_two .i_title .p{ color:#fff;}
.i_two_2{ position:relative; margin-bottom:5%;}
.i_two_ul{ margin-top:-204px;}
.i_two_ul li{ float:left; width:50%; overflow:hidden;transition:all 0.3s; background:#fff;}
.i_two_ul li:nth-child(2),.i_two_ul li:nth-child(3){ background:#f0f0f0;}
.i_two_ul li:hover{box-shadow: 2px 5px 25px rgba(0,0,0,0.1);}
.i_two_ul li .boxs{ padding:30px; overflow:hidden;}
.i_two_ul li .imgs{ float:left; position:relative;/* padding-top:22.5%;*/ padding-top:144px;  transition:all 0.3s; width:205px; margin-right:5%; overflow:hidden;}
.i_two_ul li .imgs img{ display: block;width: 100%; height:100%; position:absolute; top:0; left:0;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.6s ease-out 0s; -moz-transition:all 0.6s ease-out 0s; -o-transition:all 0.6s ease-out 0s; transition:all 0.6s ease-out 0s; /*-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;*/}
.i_two_ul li:hover .imgs img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);/*-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%);-o-filter: grayscale(0%); filter: grayscale(0%); filter:none;*/}
.i_two_ul li .txts{ overflow:hidden;}
.i_two_ul li .h3{ font-weight:600; height:36px; line-height:36px; margin-top:18px; overflow:hidden; color:#333;  transition:all 0.3s;white-space:nowrap;text-overflow:ellipsis;}
.i_two_ul li:hover .h3{ color:#0000cd;  }
.i_two_ul li .p{ overflow:hidden; line-height:28px; height:56px;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top:15px; color:#666; font-size:16px;}
/*服务网络*/
.i_three{ overflow:hidden; }
.i_three .wrap{ padding-top:6%; padding-bottom:6%;position:relative;}
.i_three_r{ float:right; width:88%; overflow:hidden; position:relative;}
.i_three_r .maps{ width:100%;}
.i_three_r .maps#maps2{ display:none;}
.i_three_r .i_three_map{ position:absolute; width:100%; height:100%; top:0; left:0;}
.i_three_l{ position:absolute; left:0; top:0; height:90%; width:40%; overflow:hidden;display: flex; align-items: center; justify-content: left; z-index:1;}
.i_three_l .boxs{ overflow:hidden; width:100%;}
.i_three_l .i_title{ text-align:left; margin-top:0;}
.i_three_l .i_title .h3{ margin-top:1%;}
.i_three_l .i_title .p{ color:#555555; line-height:1.8; margin-top:5%; max-width:460px;}
.i_three_l .i_more{ margin-top:14%;}
/*目标*/
#c-about{position: relative;}
#c-about .c-main-wrap { position: relative;height: 100vh;}
#c-about .c-main-wrap.on .c-wrap{padding: 0;}
#c-about .c-main-wrap.on .c-wrap .i_about_svg svg { transform: rotateZ(0deg);}
#c-about .c-wrap { position: sticky; top: 0; height: 100vh; padding: 0.8rem 13.55%; transition: 0.5s;overflow: hidden;}
#c-about .c-wrap .c-box { position: relative; width: 100%; height: 100%;overflow: hidden;}
#c-about .c-wrap .c-box::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
#c-about .c-wrap .c-box img { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width:none;}
#c-about .c-wrap .c-box img:nth-child(2) {display: none;}
#c-about .c-wrap .c-box .i_about_svg svg { position: absolute;bottom: 0; left: 50%; z-index: 2; margin-left: -42vw;width: 84vw;transform-origin: bottom center; transform: rotateZ(-180deg);
 transition: all 0.5s 0.5s linear;}
#c-about .c-wrap .c-box .c-text-box {position: absolute; top: 50%; left: 0; z-index: 5; width: 100%; -webkit-transform: translateY(-50%);transform: translateY(-50%);}
#c-about .c-wrap .c-box .c-text-box .c-text { margin: 0 auto; width:96%; max-width: 850px; margin-bottom: 0.5rem; line-height: 1.3; text-align: center;color: #fff; font-weight:bold;}
#c-about .i_more{ margin:0 auto; margin-top:8%;}
/*大事记*/
.i_four{ overflow:hidden;}
.i_four .i_title{ text-align:left;}
.i_four .i_more{ float:right; margin-top:-52px; position:relative;}
.i_news{ margin-top:47px; border-top:1px solid #e8e8e8;}

/*合作*/
.i_product_bg{ overflow:hidden; background:url(../images/i_img4.jpg) center center no-repeat; background-size:cover;}
.i_product_t{ text-align:center; color:#fff; overflow:hidden; margin-top:7%;}
.i_product_t.bgs2{ color:#0000cd;}
.i_product_t.bgs4{ color:#0000cd;}
.i_product_t .desc{ overflow:hidden; line-height:1.3;}
.i_product_t .h4{ font-weight:normal; overflow:hidden; line-height:1.5;  max-width:590px; margin:0 auto; color:#fff;margin-top:2%;}
.i_product_t.bgs2 .h4{ max-width:980px; color:#000;}
.i_product_t.bgs3 .h4{ max-width:916px; }
.i_product_t.bgs4 .h4{ max-width:428px; color:#000;}
/*服务*/
.animate3s {
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}

.imgh:hover img {
  transform: scale(1.08);
}
.imgBox {
    overflow: hidden;
}
.i_service{ max-width:100%; margin:0 auto; margin-top:5%; overflow:hidden; margin-bottom:9%;}
.i_service ul {
  margin: -1.5px;
  font-size: 0;
  text-align: center;
}
.i_service ul li {
  display: inline-block;
  vertical-align: top;
  width: 33.33%;
  padding: 1.5px;
}
.i_service ul li .Box {
  display: block;
  position: relative;
  /*background: #090f17;*/
}
.i_service ul li .Box img {
  width: 100%;
  opacity: 0.5;
}
.i_service ul li .Box .tank {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.i_service ul li .Box .tank .div {
  position: absolute;
  left: 0;
  top: 35%;
  width: 100%;
  padding: 10px;
}
.i_service ul li .Box .tank .div .title {
  font-size: 20px;
  line-height: 1.4em;
  color: #ffffff;
  margin-bottom: 7px;
}
.i_service ul li .Box .tank .div .more {
  display: block;
  position: relative;
  height: 30px;
  width: 30px;
  margin: 0 auto;
  border: 1px solid #fff;
  border-radius: 50%;
}
.i_service ul li .Box .tank .div .more::before,
.i_service ul li .Box .tank .div .more::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  background-color: #fff;
}
.i_service ul li .Box .tank .div .more::before {
  width: 60%;
  height: 1px;
}
.i_service ul li .Box .tank .div .more::after {
  width: 1px;
  height: 60%;
}
.i_service ul li .Box:hover img {
  opacity: 1;
}
@media screen and (max-width: 1800px) {
/*轮显*/
.banner_page{ margin-left:-48%;}
.banner_tit{margin-left:-48%;}
}

@media screen and (max-width:1440px) {
/*关于我们*/
.i_one .counter ul li{ padding-right:5%; margin-right:5%; }
.i_one .counter span{ font-size:42px;}
.i_title2{ background-size:auto 55px;}
.i_title2.bgs3{background-size:auto 78px;}
}

@media screen and (max-width: 1400px) {
/*轮显*/
.main .banner .down{ bottom:35px;}
.main .banner .btn{ bottom:75px;}
.banner_tit{ bottom:125px;}


}
@media screen and (max-width: 1360px) {
/*关于我们*/
.i_one .counter{ margin-top:4%;}
.i_one .counter ul li{ float:left; width:25%;padding-right:0%; margin-right:0%; }
.i_one .counter span{ font-size:40px;}

}
@media screen and (max-width: 1300px) {
/*轮显*/
.main .banner .btn{ bottom:70px;}
.banner_tit{ bottom:120px; font-size:17px;}
}
@media screen and (max-width: 1200px) {
/*公司简介*/
.i_one .txts{background-size: 350px auto;}
.i_one .cons{ font-size:15px; line-height:30px;}
.i_one .counter .h6{ font-size:13px;}
.i_one .counter label{ font-size:13px;}
.i_one .counter span{ font-size:32px;}
.i_title .p{ font-size:15px;}
/*四大基地*/
.i_two .wrap{ margin-bottom:228px;}
.i_two_ul{ margin-top:-177px;}
.i_two_ul li .boxs{ padding:20px;}
.i_two_ul li .imgs{ width:190px; padding-top: 133px; margin-right:2%;}
.i_two_ul li .h3{ height:32px; line-height:32px;}
.i_two_ul li .p{ font-size:15px; line-height:26px; height:52px; margin-top:12px;}

/*方案*/

  .i_service ul {
    padding-bottom: 45px;
  }
  .i_service ul li .Box .tank .div .title {
    font-size: 18px;
  }
  .i_service ul li .Box .tank .div .more {
    height: 26px;
    width: 26px;
  }

}


@media screen and (max-width:1100px) {
/*关于我们*/
.i_one .cons{ line-height:26px; margin-top:4%;}
.i_one .counter{ margin-top:3%; overflow:visible;}
.i_one .counter .h6{ font-size:14px;}
.i_one .counter ul li .nums{ line-height:normal; overflow:visible;}
.i_one .counter span{ font-size:30px;}
.i_title2{ margin-top:3%;}
.i_title2.bgs3{background-size:auto 65px;}

}

@media screen and (max-width: 1024px) {
/*服务网络*/
.i_three_r{ float:none; width:100%;}
.i_three_r .i_three_map{ display:none;}
.i_three_r .maps#maps2{ display:block;}
.i_three_r .maps#maps1{ display:none;}
.i_three_l{ position:static; display:block; width:100%; margin-bottom:5%;}
.i_three_l .i_title{ text-align:center;}
.i_three_l .i_title .p{ max-width:none;}
.i_three_l .i_more{ margin:0 auto; margin-top:8%;}
}

@media (max-width: 972px) {
/*目标*/
 /* #c-about .c-main-wrap {
    height: 150vh;
  }*/
  #c-about .c-wrap {
    padding: 1.5rem 1rem;
  }
  
}

@media screen and (max-width: 960px) {
/*轮显*/
.banner_page .current{ font-size:26px;}
.main .banner .btn{ bottom:60px;}
.main .banner .btn .boxs{ width:72px;}
.main .banner .down{ height:40px; width:25px;}
.main .banner .down span{ height:40px;}
.main .banner .swiper-button-prev, .main .banner .swiper-button-next, .main .banner .swiper_button_play{ width:32px; height:32px;}

.banner_page{ line-height:32px; width:92px;  font-size:13px;}
.banner_tit{ bottom:118px; font-size:16px;}
/*公司简介*/
.i_title .p{ font-size:14px;}
.i_title2{ background-size:auto 50px; margin-top:0; }
.i_title2.bgs3{background-size:auto 55px;}
.i_title2 .h3{ margin-top:20px;}
.i_title2.bgs3 .h3{ margin-top:25px;}
.i_one .txts{background-size: 300px auto;}
.i_one .cons{ font-size:14px; line-height:24px;}

.i_more{ width:170px;}
/*四大基地*/
.i_two_ul li .boxs{ padding:12px;}
.i_two_ul li .imgs{ width:160px; padding-top: 112px;}
.i_two_ul li .p{ font-size:14px; line-height:24px; height:48px; margin-top:8px;}
.i_two_ul li .h3{ margin-top:10px;}
}

@media screen and (max-width: 780px) {
/*公司简介*/
.i_title .p{ font-size:13px;}
.i_title2{ background-size:auto 40px; margin-top:7%;  }
.i_title2.bgs3{background-size:auto 62px;background-position:center top;text-align:center;}
.i_title2.bgs1{background-position:center top;text-align:center;}
.i_title2 .h3{ margin-top:18px;}
.i_title2.bgs3 .h3{ margin-top:23px;}
.i_title2 .p{ margin-top:4%; padding-top:4%;}
.i_title2.bgs1 .p:after,.i_title2.bgs3 .p:after{ left:50%; margin-left:-31px;}
.i_one .imgs{ float:none; width:100%;}
.i_one .txts{ float:none; width:100%; max-width:none; margin-top:3%;background-size: 250px auto;}
.i_one .cons{ margin-top:4%;}
.i_one .counter{ margin-top:7%;}
.i_one .counter label{ font-size:13px;}
.i_one .counter .h6{ font-size:13px;}
.i_one .counter span{ font-size:26px;}

/*四大基地*/
.i_two .wrap{ margin-bottom:170px;}
.i_two_ul{ margin-top:-123px;}
.i_two_ul li .imgs{ width:140px; padding-top:98px;}
.i_two_ul li .p{ font-size:13px; line-height:22px; height:44px;}
.i_two_ul li .h3{ height:26px; line-height:26px; margin-top:5px;}
/*服务*/
.i_service ul {
    padding-bottom: 30px;
  }
.i_service ul li {
    width: 50%;
  }
.i_service ul li .Box .tank .div .title {
    margin-bottom: 4px;
    font-size: 16px;
  }
.i_service ul li .Box .tank .div .more {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 748px) {
/*目标*/
  #c-about .c-main-wrap {
    margin-top: 0.5rem;
    height: 45vh;
  }
  #c-about .c-wrap {
    height: 45vh;
  }
    #c-about .c-wrap .c-box img {
    display: none;
  }
  #c-about .c-wrap .c-box img:nth-child(2) {
    display: block;
  }
}
@media screen and (max-width: 640px) {
/*轮显*/
.main .banner .down{ height:30px; width:19px;bottom:20px;}
.main .banner .down span{ height:30px;}
.main .banner .btn{bottom:55px;}
.banner_page{ bottom:17px;}
.banner_tit{ bottom:100px; font-size:15px;}
/*公司简介*/
.i_title .p{ font-size:12px;}
.i_title2{ background-size:auto 36px; }
.i_title2.bgs3{background-size:auto 56px;}
.i_title2 .h3{ margin-top:15px;}
.i_title2.bgs3 .h3{ margin-top:20px;}
.i_title2.bgs2{background-position:center top;text-align:center;}
.i_title2.bgs2 .p:after{ left:50%; margin-left:-31px;}
.i_one .counter ul li{ width:49%; text-align:center; margin-bottom:2%;}
.i_one .counter ul li:nth-child(2):after{ width:0;}
.i_more{ width:150px; height:38px; line-height:38px;}
/*四大基地*/
.i_two .wrap{ margin-bottom:140px;}
.i_two_ul{ margin-top:-108px;}
.i_two_ul li .imgs{ width:120px; padding-top:84px;}
.i_two_ul li .p{ font-size:12px; line-height:20px; height:40px;}
.i_two_ul li .h3{ height:24px; line-height:24px;}
/*服务网络*/
.i_three_l .i_more{ margin-top:6%;}
/*大事记*/
.i_news{ margin-top:30px;}

}

@media screen and (max-width: 480px) {
/*轮显*/
.main .banner .down{bottom:18px; display:none;}
.main .banner .btn{bottom:52px;}
.banner_page{ bottom:12px;}
.banner_tit{ bottom:70px; font-size:14px; line-height:26px;}

/*四大基地*/
.i_two_ul li{ float:none; width:100%;}
.i_two_ul li:nth-child(3){ background:#fff;}
.i_two_ul li:nth-child(4){ background:#f0f0f0;}
/*大事记*/
.i_news{ margin-top:20px;}
.i_four .i_more{ margin-top:-40px;}


}


@media screen and (max-width: 420px) {
/*关于我们*/
.i_one .counter .h6{ font-size:12px;}
.i_one .counter label{ font-size:12px;}
}
@media screen and (max-width: 360px) {

}
@keyframes mymove6
{
	from {filter:alpha(opacity=0);opacity:0;  -webkit-transform: translateY(-100px) translateX(0);
  -moz-transform: translateY(-100px) translateX(0);
  transform: translateY(-100px) translateX(0);
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;}
	to { filter:alpha(opacity=100);opacity:1; -webkit-transform: translateY(0px) translateX(0);
  -moz-transform: translateY(0px) translateX(0);
  transform: translateY(0px) translateX(0);}
}

@-webkit-keyframes mymove6
{
	/*from { filter:alpha(opacity=0);opacity:0; margin-bottom:-20%;}
	to {margin-bottom:3%;filter:alpha(opacity=1);opacity:1;}*/
	from {filter:alpha(opacity=0);opacity:0;  -webkit-transform: translateY(-100px) translateX(0);
  -moz-transform: translateY(-100px) translateX(0);
  transform: translateY(-100px) translateX(0);
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;}
	to { filter:alpha(opacity=100);opacity:1; -webkit-transform: translateY(0px) translateX(0);
  -moz-transform: translateY(0px) translateX(0);
  transform: translateY(0px) translateX(0);}
}
@keyframes animate1 {
  0% {
    transform: translate(-50%, 0%);
  }
  50% {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}
/*圆圈*/
.cycle-box ,
.cycle-box * {
        box-sizing: border-box;
}
.cycle-box .cycle-son::before{box-sizing: border-box;}
.cycle-box .cycle-son::after{box-sizing: border-box;}

.cycle-box {
  --size: 40px;
  --time: 4s;
  width: var(--size);
  height: var(--size);
}
.cycle-box .cycle-son {
  position: absolute;
  top: 0;
  height: var(--size);
  width: calc(var(--size)*0.5);
  overflow: hidden;
}
.cycle-box .cycle-son::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 
}
.cycle-box .left-c {
  left: 0;
}
.cycle-box .left-c::before {
  transform-origin: right center;
  border-radius: calc(var(--size)*0.5) 0 0 calc(var(--size)*0.5);
  border: 1px solid #ffffff;
  border-right: 0;
  transform: rotate(-180deg);
}
.cycle-box .right-c {
  right: 0;
}
.cycle-box .right-c::before {
  transform-origin: left center;
  border-radius: 0 calc(var(--size)*0.5) calc(var(--size)*0.5) 0;
  border: 1px solid #ffffff;
  border-left: 0;
  transform: rotate(-180deg);
}
.cycle-box.run .left-c::before {
  animation: cycle-left var(--time) linear;
}
.cycle-box.run .right-c {
  right: 0;
}
.cycle-box.run .right-c::before {
  animation: cycle-right var(--time) linear;
}
@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);
  }
}

.btn .swiper-btn .cycle-box {
  position: absolute;
  left: -1px;
  top: -1px;
}
@media (max-width: 1200px) {
  .btn .swiper-btn {
    width: 0.6rem;
    height: 0.6rem;
  }
  .btn .swiper-btn .cycle-box {
    --size: 0.6rem;
  }
}

@media (max-width: 960px) {
.cycle-box {
  --size: 32px;
}
}