/* ==========================================================================
   Index Page
   ========================================================================== */
/*首页banner大图样式*/

.ibanner{ position:relative; height:100vh; width: 100%; overflow: hidden;}
.ibanner .swiper-container {width: 100%;height: 100%;}
.ibanner .swiper-slide { background-repeat:no-repeat; background-position:center center; background-size:cover;text-align: center;/* Center slide text vertically */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; position:relative; background-color: #000; transform: scale(1.1);}
.ibanner .swiper-img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform: scale(1.1); opacity: 0; transition: all 0s;}
.ibanner .swiper-slide-active .swiper-img{ transform: scale(1); opacity: 1; transition: all 4s;}
.ibanner .swiper-container-horizontal > .swiper-scrollbar{ width:272px; left:251px; bottom:30%;}

.ibanner .swiper-scrollbar-drag{ background:#1b85e7;}
.ibanner .ban-img{ display:block; width:100%; height:100%; color:#fff;text-align:left;}
.ibanner .swiper-pagination{ left: auto; bottom: 80px; line-height: 36px; position: absolute; text-align: left; width: 130px;color: #fff; font-size: 18px; right: 0; top: 40%;}
.ibanner .swiper-pagination-bullet{background: #ffffff; opacity: 0.5; position: relative; width: 10px; height: 10px; border-radius: 10px; display: block; margin: 27px auto!important; cursor: pointer;}
.ibanner .swiper-pagination-bullet-active{ 
    background: #ffffff; 
    opacity: 1;
    position: relative;
}

.ibanner .swiper-pagination-bullet-active::after{ 
    content: ""; 
    position: absolute; 
    border: 1px solid transparent;
    width: 24px; 
    height: 24px; 
    top: -8px; 
    left: -8px; 
    border-radius: 24px;  
    opacity: 0;  
    transform: scale(0.8);  
    transition: opacity 0.3s ease;
}

/* 默认状态 - 隐藏 */
.ibanner .swiper-pagination-bullet-active::after {
    opacity: 0;
}

/* 动画进行中状态 */
.ibanner .swiper-pagination-bullet-active.animating::after {
    opacity: 1;
    animation: drawCircle 1s ease-out forwards;
}

/* 动画完成状态 */
.ibanner .swiper-pagination-bullet-active.animation-complete::after {
    opacity: 1;
    border: 1px solid #ffffff;
    transform: scale(1);
    animation: none;
}

/* 画圆动画 */
@keyframes drawCircle {
    0% {
        border-color: transparent;
        border-top-color: #ffffff;
        border-right-color: #ffffff;
        border-bottom-color: #ffffff;
        border-left-color: #ffffff;
        transform: scale(0.8) rotate(0deg);
    }
    25% {
        border-top-color: #ffffff;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50% {
        border-top-color: #ffffff;
        border-right-color: #ffffff;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    75% {
        border-top-color: #ffffff;
        border-right-color: #ffffff;
        border-bottom-color: #ffffff;
        border-left-color: transparent;
    }
    100% {
        border-top-color: #ffffff;
        border-right-color: #ffffff;
        border-bottom-color: #ffffff;
        border-left-color: #ffffff;
        transform: scale(1) rotate(360deg);
    }
}
.ibanner .swiper-pagination span{ font-size: 18px;color: #fff;}
.ibanner .pagination-numbers{ text-align: center; margin-top: 10rem; position: relative;}
.ibanner .pagination-numbers:before{ width: 1px; height: 8rem; content: ""; display: block; background: rgba(255,255,255,.2); position: absolute; left: 0; right: 0; margin: 1rem auto; bottom: 3rem;}
.ibanner .swiper-pagination-current{ font-size: 2.8rem !important;}

@keyframes spin-left {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.ibanner .bH{ height: 100%; position: relative; width: 85%; align-items: start; margin-top: 18%;}
.ibanner .bfont{ color: #fff; text-align: left;}
.ibanner .bfont span{ display: block; font-size: 4.3rem; line-height: 1.5; transform: translateY(100px); opacity: 0; transition: all 2s ease .5s;}
.ibanner .bfont p{ font-size: 6rem; margin-top: 10px; transform: translateY(200px); opacity: 0;  transition: all 2s ease .7s; font-weight: bold;}


.bfont1{ display: flex; justify-content: flex-start; align-items: center; max-width: 500px; width: 100%; margin-top: 7rem; transform: translateY(100px); opacity: 0; transition: all 2s ease .5s;}
.m_b1{ max-width: 230px; width: 48%; margin-right: 2%; display: flex; justify-content: flex-start; align-items: center;}
.m_b1 span{ width: 80%; border: 1px solid rgba(255,255,255,0.5); height: 60px; line-height: 60px; font-size: 16px; color: #ffffff;}
.m_b1 span img{ margin-right: 10px;}
.m_b1 i{ width: 20%; border: 1px solid rgba(255,255,255,0.5); height: 60px; line-height: 60px; font-size: 3rem; color: #ffffff;}

.m_b2{ max-width: 230px; width: 48%; margin-left: 2%; display: flex; justify-content: flex-start; align-items: center;}
.m_b2 span{ width: 80%; border: 1px solid #c30813; height: 60px; line-height: 60px; font-size: 16px; color: #ffffff; background: #c30813;}
.m_b2 span img{ margin-right: 10px;}
.m_b2 i{ margin-left: 2px; width: 20%; border: 1px solid #c30813; height: 60px; line-height: 60px; font-size: 3rem; color: #ffffff; background: #c30813;}

.bfont2{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; margin-top: 10%;}
.bfont2 p{ color: #ffffff; text-transform: uppercase; font-size: 14px; text-align: left;}
.bfont2 img{ margin-top: 2rem;}

.ibanner .bfont a{ display: inline-block; height: 5.5rem; color: #fff; line-height: 5.5rem; ; margin-top: 6rem; width: 220px; text-align: center; background: linear-gradient(to right,#00a398,#00b791); border-radius: 30px; font-size: 18px; transform: translateY(200px); opacity: 0;}
.ibanner .bfont a i{ display: inline-block; margin-left: 10px; font-size: 20px; font-weight: bold;}
.ibanner .bfont a:hover{background: linear-gradient(to right,#00a398,#00a398); border-radius: 5rem; transition: all 0.4s;}


.ibanner .scroll-dot{  position: absolute; bottom: 35px; right: 0; left: 0; margin: 0 auto; z-index: 10; font-size: 14px; color: #fff;}
.ibanner .scroll-dot::after{ content: ""; position: absolute; background: url(../img/tt.png) no-repeat center;  width: 28px; height: 29px; bottom: 0; margin: 0 auto; right: 0; left: 0;}
.ibanner .scroll-dot::after{ width: 28px; height: 29px; bottom: 18px; animation: scroll 4s infinite;}
.ibanner .swiper-slide-active .btit{ transform: translateY(0); opacity: 1; transition: all 2s ease .5s;}
.ibanner .swiper-slide-active .binfo{ transform: translateY(0); opacity: 1; transition: all 2s ease .7s;}
.ibanner .swiper-slide-active .bfont1{ transform: translateY(0); opacity: 1; transition: all 2s ease .7s;}

@keyframes scroll{0%{ bottom: 5px;}
	50%{ bottom: 20px;}
	100%{ bottom: 5px;}
}
::-webkit-scrollbar{ display: none;}

a.more1{  max-width: 223px; width: 100%;  font-size: 16px; color: #ffffff;  text-align: center; margin: 5rem 0 0;  border-radius: 50px; display: block;  background: #c30813; height: 73px; line-height: 73px; transition: all 0.3s;}
a.more1:hover{ background: #1c7de0;}


/*关于我们*/
.sect_k1{ padding: 8rem 0 2rem;}
.sect_k1 .span-3{ width: 24%; margin-right: 1%;}
.tit_i1{ text-align: center;  position: relative;}
.tit_i1 span{ display: block; font-size: 4.6rem; color: #333333;  font-family: 'HARMONYOS_SANS_SC_MEDIUM';}
.tit_i1 em{ font-size: 16px; color: #bababa; font-style: normal; display: block;}
.tit_i1 p{ font-size: 16px; color: #8d8d8d; margin-top: 2rem;}

.box_i3{ margin-bottom: 20px;}
.box_i3 a{ background: #f2f3f5; padding: 5rem 4rem 2rem; display: flex; justify-content: center; align-items:flex-start; flex-wrap: nowrap;}
.box_i3 a:hover i{ background: #c30813;}
.box_i3 a:hover i img{ transform: translateZ(30px) rotateY(180deg) scale(1.0);
    -webkit-transform: translateZ(30px) rotateY(180deg) scale(1.0);
    -ms-transform: translateZ(30px) rotateY(180deg) scale(1.0);
    -moz-transform: translateZ(30px) rotateY(180deg) scale(1.0);}
.box_i3 a:hover div span{ color: #c30813;}
.box_i3 a i{ width: 9rem; height: 9rem; display: flex; align-items: center; background: #055eb0; border-radius: 100%; overflow: hidden;}
.box_i3 a i img{ width: 100%; height: auto;}
.box_i3 a div{ margin-left: 15px; width: calc(100% - 9rem);}
.box_i3 a div span{ font-size: 2.5rem; color: #333333; line-height: 1.5; }
.box_i3 a div p{ font-size: 14px; color: #6c6c6c; line-height: 1.8; text-align: left; min-height: 127px;}

.sect_k2{ padding: 8rem 0 2rem;}

.prodBox{ width: 100%; position: relative; z-index: 100; }
.prodBox .hd{margin:0 auto; width: 80%; background: #ffffff; position: absolute; left: 0; bottom: 15.7%; z-index: 100; }
.prodBox .hd ul{ padding-left: 9%; position: relative;}
.prodBox .hd ul:before{ width: 10%; height: 8rem; background: #1c7de0; content: ""; position: absolute; left: 0; bottom: 0;}
.prodBox .hd ul li{ float: left; width: 20%;  text-align: center;line-height: 8rem;  position: relative; z-index: 0;cursor: pointer; }
.prodBox .hd ul li:first-child{ text-align: left; width: 15%; background: #1c7de0;}
.prodBox .hd ul li:first-child p{ color: #ffffff;}
.prodBox .hd ul li:last-child{ margin-right: 0;}
.prodBox .hd ul li:hover p{ color: #ffffff;}
.prodBox .hd ul li p{color: #333333; font-size: 16px; position: relative;}
.prodBox .hd ul li.on{ color: #ffffff; background: #1c7de0; cursor: pointer;}
.prodBox .hd ul li.on p{ color: #ffffff;}

.case_i1{margin-bottom: 0; overflow: hidden; }
.case_i1 .icon{ background: #ffffff;  overflow: hidden;}
.case_i1 .icon img{ width: 100%; height: 100%; object-fit: cover;}
.case_i1 a:hover .icon img{ transform: scale(1);}
.box_i6{ font-size: 16px; line-height: 1.8; text-transform: uppercase;}
.box_i7{ font-size: 16px; line-height: 1.8;}
.box_i8{ font-size: 16px; line-height: 1.8; text-transform: uppercase; font-style: normal; text-decoration: underline;  text-decoration-color: #ffffff; text-decoration-thickness: 1px; text-underline-offset: 4px; font-family: 'HARMONYOS_SANS_SC_LIGHT'; margin-left: 20%;}

.itit{ background: #055eb0; padding: 7rem 0; width: 92%; margin-top: -5rem; position: relative; z-index: 1000;}
.itit_1{ padding: 0 0 0 8%; color: #ffffff;}
.sect_k3{ padding: 8rem 0 2rem;}
.pro_i1{margin-bottom: 0; overflow: hidden; }
.pro_i1 .icon{ background: #ffffff;  overflow: hidden;}
.pro_i1 .icon img{ width: 100%; height: 100%; object-fit: cover;}
.pro_i1:hover .ptit{ opacity: 1; bottom: 0; transition: all 0.3s;}
.pro_i1 .ptit{ width:calc(100% - 40px); overflow: hidden; opacity: 0; background: #055eb0; padding:15px 20px 30px; position: absolute; bottom: -4rem; transition: all 0.3s;}
.pro_i1 .ptit h3{ color: #ffffff;  font-size: 2.5rem; color: #fefefe; border-bottom: 1px solid #ffffff; line-height: 2;}
.pro_i1 .ptit p{ color: #ffffff; font-size: 18px;   text-align: left; line-height: 2;}
.pro_i1 .ntit{ background: #ededed; text-align: center; padding: 10px;}
.pro_i1 .ntit p{ font-size: 2.5rem; color: #2a2a2a; line-height: 2;  word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}

.sect_k4{  padding: 8rem 0 2rem; overflow: hidden;}

.box_i4{ padding-left: 18%;}
.box_i5{ padding-top: 8rem;}
.box_i5 span{ font-size: 3.8rem; color: #1c7de0; font-weight: bold; line-height: 2; display: block;}
.box_i5 em{ font-size: 3.1rem; color: #333333; position: relative; display: block; position: relative; font-style: normal;}
.box_i5 p{ font-size: 16px; color: #333333; line-height: 1.8; text-align: left; max-width: 700px; margin-left: 0; margin-top: 4rem; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;}

.box_a2{ background: #f2f3f5; padding: 8rem 0;}

.list_i1{ list-style: none; clear: both; overflow: hidden;}
.list_i1 li{ width: 28%; float: left; position: relative;}
.list_i1 li:nth-child(4){ width: 15%;}
.list_i1 li:nth-child(4)::after{ display: none;}
.list_i1 li:first-child{ width: 25%;}
.list_i1 li:after{ width: 1px; display: block; height: 80%; content: ""; background: #eaeaec; position: absolute; right: 35%; top: 20%;}
.list_i1 li img{ margin-bottom: 10px;}
.list_i1 li p{ font-size:5rem ;}
.list_i1 li p b{ font-size:5rem ;}
.list_i1 li p i{ margin-left: 10px; font-size: 2.2rem; color: #757575; font-family: 'HARMONYOS_SANS_SC_LIGHT';}
.list_i1 li span{ font-size: 2.2rem; color: #757575; font-family: 'HARMONYOS_SANS_SC_LIGHT'; line-height: 2;}
a.more4{ right: 10%; top: 15%; position: absolute;  display: flex; justify-content: flex-start; align-items: center; max-width: 180px; text-align: left;  color: #333333; height: 4.8rem; line-height: 4.8rem; font-size: 18px; color: #ffffff; }
a.more4 p{ position: relative; color: #333333; font-size: 16px;}
a.more4 p:after{ width: 100%; height: 2px; background: #333333; content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 4px;}
a.more4 i{ font-size: 24px; border-radius: 100%; margin-right: 15px; color: #ffffff; width: 54px; height: 54px; display:inline-block; background:linear-gradient(to bottom,#00b691,#009f9a); text-align: center; line-height: 54px;}

.sect_k5{ padding: 8rem 0; position: relative; clear: both; overflow: hidden;}
.news_i1{margin-bottom: 0; overflow: hidden; }
.news_i1 .icon{ background: #ffffff;  overflow: hidden;}
.news_i1 .icon img{ width: 100%; height: 100%; object-fit: cover;}

.news_i1 .ntit{ text-align: left; }
.news_i1 .ntit h3{ word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 2rem; color: #333333; margin: 2rem 0 1rem; padding: 0; text-align: left;}
.news_i1 .ntit p{ font-size:15px; color: #9d9d9d; line-height: 1.8;  word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.news_i1 .ntit i{ width: 50px; height: 50px; border: 1px solid #9a9a9a; border-radius: 100%; display: block; margin-left: 0; text-align: center; line-height: 50px; margin-top: 20px; font-size: 2rem;}
.news_i1:hover i{ background: #055eb0; color: #ffffff; border: 1px solid #ffffff;}
.news_i1 .time{ background: #055eb0; color: #ffffff; font-size: 18px; border-radius: 25px; line-height: 1.5; position: absolute; left: 15px; top: 15px; padding: 0 15px;}

.i-prev,.i-next{ background: none; top: 55%;}
.i-prev{ left: 3%;}
.i-prev:hover i,.i-next:hover i{ color: #c30813;}
.i-next{ right: 3%;}
.i-prev i,.i-next i{ font-size: 4rem; color: #999999;}