@charset "utf-8";

/* Homepage hero/banner: merged from assets/css/index/banner.css in v23 to remove CSS @import request chaining. */
/* banner */
.banner {position: relative; width: 100%; height: 100vh; overflow: hidden; background: #ccc;}
.banner .slide-wrapper,
.banner .slide-item { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner .slide-item img{width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .25s ease;}
/* Progressive enhancement: the static image is visible by default.
   Hide it only after the native Canvas effect has rendered a working frame. */
.banner.banner--effect-ready .slide-item img{opacity:0;}

.banner:hover .scene-nav {opacity: 1;}
.banner:hover .scene-nav.scene-nav--prev {left: 30px;}
.banner:hover .scene-nav.scene-nav--next {right: 30px;}
.banner canvas.banner-effect-canvas { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; max-width:none; opacity:0; transition:opacity .25s ease; }
.banner.banner--effect-ready canvas.banner-effect-canvas { opacity:1; }
.banner.banner--effect-failed .slide-item img { opacity:1; }

.scene-nav {position: absolute; top: 50%; margin-top: -20px;font-size: 40px;line-height: 1;color: #fff;z-index: 10;cursor: pointer;opacity: 0;transition: 0.45s;}
.scene-nav--prev {left: -30px;}
.scene-nav--next {right: -30px;}

.scene-nav i{display: block; width: 20px; height: 20px; border: 2px solid #fff; transform: rotate(45deg);}
.scene-nav--prev i{border-top: none; border-right: none;}
.scene-nav--next i{border-bottom: none; border-left: none;}

.slide-dit {position: absolute; left: 30px;bottom: 60px;z-index: 12;overflow: hidden; display: none;}
.slide-dit span {display: block; margin-top: 15px; width: 12px;height: 16px;cursor: pointer;background: url(../images/banner/water.webp) center no-repeat;transition: 0.44s;}
.slide-dit span.active {animation: shake 1s forwards;background: url(../images/banner/water1.webp) center no-repeat;}

.banner-text {position: absolute; left: 0; top: 0 ; z-index: 10; width: 50%; height: 100%; }
.banner-text-item {position: absolute; left: 160px; top: 50%; width: 100%; opacity: 0; visibility: hidden; transform-origin: 0 50%; transition: 1.5s; transform: scale(0.8);}
.banner-text-item h1,
.banner-text-item h3 {display:block; line-height:1.2; font-size:54px; color:#fff;}
.banner-text-item p{ margin-top: 20px; font-size: 20px;line-height: 1.6;color: #fff;}
.banner-text-item a{ position: relative; margin-top: 35px; display: inline-block; padding: 0 45px; line-height: 50px; border: 1px solid #fff; color: #fff;}
.banner-text-item a:hover{background-color: #fff; color: #333;}
.banner-text-item.active { opacity: 1; visibility: visible; transform: scale(1); transition: 1.5s 1s;}

@media (max-width:1600px) {
    .banner-text-item { left: 100px;}
    .banner-text-item h1, .banner-text-item h3 { font-size:48px; }
}

@media (max-width:1440px) {
    .banner-text-item {left: 60px; top: 65%;}
    .banner-text-item h1, .banner-text-item h3 { font-size:36px; }
}

@media (max-width:1200px) {
    .banner-text-item {left: 30px; }
}

@media (max-width:768px) {
    .banner-text {width: 100%;  top: inherit; bottom: 0; height:100%;}
    .banner-text-item {left: 0; top: inherit; bottom: 100px; text-align: center; transform-origin: 50% 50%;}
    .banner-text-item h1, .banner-text-item h3 { font-size:36px; }
}

@media (max-width:640px) {
    .banner-text-item h1, .banner-text-item h3 {font-size:28px; color:#fff;}
    .banner-text-item p{ font-size: 16px; }
    .banner-text-item a{ padding: 0 45px; line-height: 45px; }
}

@keyframes shake {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(.9, 1.1); }
  50% { transform: scale(1.1, .9); }
  75% { transform: scale(.95, 1.05); }
}

/* Homepage content */
/* product */
.index-product-left{width:58%; padding:clamp(72px,6vw,108px) clamp(70px,9vw,170px) clamp(64px,5vw,88px) clamp(60px,8vw,150px);}
.index-product-desc .swiper-container{overflow: hidden;}
.index-product-title p{ font-size: 24px; color: var(--default);}
.index-product-title h3{ margin-top: 15px; font-size: 32px;}

.index-product-content{margin-top:28px; max-width:760px; line-height:1.75; font-size:17px;}
.index-product-more{margin-top:34px;}
.index-product-more a{ position: relative; display: inline-block; padding: 0 60px 0 25px; line-height: 45px; background-color: var(--default); color: #fff;}
.index-product-more a i{ position: absolute; top: 18px; right: 20px; display: block; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}

@media (max-width:1600px) {
    .index-product-left{padding:86px 110px 72px 82px;}
    .index-product-more{margin-top: 30px;}
}

@media (max-width:1440px) {
    .index-product-left{padding:76px 56px 66px;}
    .index-product-more{margin-top: 30px;}
}

@media (max-width:1200px) {
    .index-product-left{width:100%;padding:62px 30px;}
}

@media (max-width: 768px) {
    .index-product-left{width:100%;padding:46px 15px;}
    .index-product-title p{ font-size: 18px; color: var(--default);}
    .index-product-title h3{ font-size: 24px;}
    .index-product-content{ margin-top: 25px; font-size: 16px;}
}

@media (max-width: 640px) {
    .index-product-content{font-size:15px;}
}
/* list */
.index-product-list{margin-top:clamp(56px,6vw,86px);}
.index-product-list .swiper-container{ position: relative; padding-bottom: 25px; overflow: hidden;}
.index-product-item h3{padding: 15px 0; font-size: 18px; color: var(--default);}
.index-product-pic{padding: 15px 5px; border: 1px solid #eee; overflow: hidden;}
.index-product-pic img{width: 100%;}

.index-product-list .swiper-container .swiper-slide-thumb-active .index-product-pic{background-color: #f5f5f5;}
.index-product-list .swiper-container .swiper-scrollbar-drag{background-color: var(--default);}

.index-product{position:relative; align-items:stretch; overflow:visible;}
.index-product-left{position:relative; z-index:1;}
.index-product-right{position:relative; display:flex; align-items:flex-end; justify-content:flex-start; width:42%; min-height:clamp(420px,34vw,640px); padding-top:clamp(78px,7vw,118px); overflow:visible; background-image:url(../images/product-bg.webp); z-index:2;}
/* Keep the poster box able to overhang into the left column, but clip Swiper sibling slides so only the active product image is visible. */
.index-product-poster{position:relative; z-index:2; width:100%; max-width:885px; margin-left:-200px; transform:none;}
.index-product-poster .swiper-container{overflow:hidden;}
.index-product-poster .swiper-wrapper,
.index-product-poster .swiper-slide{height:100%;}
.index-product-poster .swiper-slide a{display:block;}
.index-product-poster .swiper-slide img{display:block; width:100%; height:auto;}
@media (max-width:1600px) {
    .index-product-list{margin-top:62px;}
    .index-product-poster{margin-left:-140px;}
}

@media (max-width:1440px) {
    .index-product-list{margin-top:48px;}
    .index-product-right{padding-top:96px; min-height:400px;}
    .index-product-poster{margin-left:-72px;}
}

@media (max-width:1200px) {
    .index-product-list{margin-top: 50px;}
    .index-product-right{display: none;}
    .index-product-poster{margin-left:0;}
}

/*  */
.index-special-bg{background-image: url(../images/special-bg.webp);}

.index-special-title{text-align: center; color: #fff;}
.index-special-title h3{font-size: 36px;}
.index-special-title p{ margin: 25px auto 0; max-width: 800px; line-height: 1.6; font-size: 18px;}

.index-special-list{margin-top:48px;}
.index-special-list ul li{width: 33.33%; text-align: center; overflow: hidden;}

.index-special-point{ position: relative; margin: 50px 0;}
.index-special-point::after{position: absolute; top: 50%; left: 0; content: ''; width: calc( 50% - 30px ); height: 1px;  border: 1px dashed #fff;}

.index-special-point span{ position: relative; display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; color: #fff; background-color: rgba(255,255,255,.3); }
.index-special-point span::before{position: absolute; top: -10px; left: -10px; content: ''; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #fff;}

.index-special-list ul li:first-child .index-special-point::after{ left: inherit; right: 0;}
.index-special-list ul li:nth-child(2) .index-special-point::before{position: absolute; top: 50%; right: 0; content: ''; width: calc( 50% - 30px ); height: 1px; border: 1px dashed #fff;}

.index-special-desc{color: #fff;}
.index-special-desc h3{font-size: 32px;}
.index-special-desc p{ margin-top: 15px; line-height: 1.6; font-size: 18px;}
.index-special-desc p span{display: block;}

@media (max-width:1200px) {
    .index-special-desc h3{font-size: 24px;}
    .index-special-desc p{padding: 0 10px; font-size: 16px;}
    .index-special-desc p span{display: initial;}

}

@media (max-width: 768px) {
    .index-special-title h3{font-size: 24px;}
    .index-special-title p{ font-size: 16px;}

    .index-special-list{margin-top: 0;}
    .index-special-list ul li{width: 100%; margin-top: 25px;}
    .index-special-desc h3{font-size: 20px;}
    .index-special-point{ position: relative; margin: 20px 0;}
    .index-special-point::before,
    .index-special-point::after{display: none;}
}

/* app */
.index-app{background-color: #F7FAF8;}
.index-app-list{width: 25%;}
.index-app-list ul li{width: 50%; text-align: center; align-items: center;justify-content: center; border: 1px solid #EAEAEA;}
.index-app-list ul li :is(a,button){ display: block; width: 100%; padding: 30px 15px; text-align: center;}
.index-app-list ul li :is(a,button) svg{ max-width: 125px; fill: #808080;}
.index-app-list ul li :is(a,button) h3{ margin-top: 10px; font-size: 18px; color: #808080;}

.index-app-list ul li:hover,
.index-app-list ul li.on{background-color: var(--default); border-color: var(--default);}
.index-app-list ul li:hover svg,
.index-app-list ul li.on svg{fill: #fff;}
.index-app-list ul li:hover h3,
.index-app-list ul li.on h3{color: #fff;}

.index-app-poster{width: 75%;}
.index-app-poster .swiper-container{ width: 100%; overflow: hidden;}
.index-app-poster .swiper-slide{ width: 100%; height: 900px; padding: 160px 120px;}

.index-app-title{ position: relative; padding-bottom: 25px;}
.index-app-title::before{position: absolute; bottom: 0; left: 0; content: ''; width: 80px; height: 4px; background-color: #fff; }
.index-app-title h3{ font-size: 36px; color: #fff;}

.index-app-desc{margin-top: 100px; color: #fff;}
.index-app-desc h4{font-size: 30px;}
.index-app-desc p{ margin-top: 35px; line-height: 1.6; font-size: 18px; max-width: 400px;}

.index-app-more{margin-top: 50px;}
.index-app-more a{ position: relative; display: inline-block; padding: 0 60px 0 25px; line-height: 45px;  border: 1px solid #fff; color: #fff;}
.index-app-more a i{ position: absolute; top: 18px; right: 20px; display: block; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}

@media (max-width:1800px) {
    .index-app-list ul li :is(a,button){  padding: 32px 15px; }
}
@media (max-width:1600px) {
    .index-app-list ul li :is(a,button){  padding: 25px 15px; }
    .index-app-poster .swiper-slide{ height: 800px; padding: 100px;}
}
@media (max-width:1440px) {
    .index-app-list ul li :is(a,button){  padding: 30px 15px; }
    .index-app-list ul li :is(a,button) svg{ width: 55px;}
}

@media (max-width:1200px) {
    .index-app-list ul li :is(a,button){  padding: 20px 15px; }
    .index-app-list ul li :is(a,button) svg{ width: 50px;}
    .index-app-list ul li :is(a,button) h3{ margin-top: 20px;}

    .index-app-poster .swiper-slide{ height: 600px; padding: 50px;}

    .index-app-title h3{ font-size: 32px;}
    .index-app-desc{margin-top: 50px;}
    .index-app-desc h4{font-size: 24px;}
    .index-app-desc p{ margin-top: 25px; font-size: 16px;}

}

@media (max-width:860px) {
    .index-app-list ul li :is(a,button) svg{ width: 40px;}
    .index-app-list ul li :is(a,button) h3{ margin-top: 10px;}
    .index-app-poster .swiper-slide{ height: 500px; padding: 30px;}
    .index-app-title h3{ font-size: 24px;}
    .index-app-desc{margin-top: 30px; }
    .index-app-desc h4{font-size: 20px;}
    .index-app-desc p{ margin-top: 25px; font-size: 16px;}
    .index-app-more{margin-top: 30px;}
    .index-app-more a{ line-height: 40px; }
}

@media (max-width: 768px) {
    .index-app-list{width: 100%;}
    .index-app-list ul li{width: 25%;}
    .index-app-poster{width: 100%;}
}
@media (max-width: 640px) {
    .index-app-list ul li :is(a,button){  padding: 10px; }
    .index-app-list ul li a img{ width: 30px;}
    .index-app-list ul li :is(a,button) h3{ margin-top: 0; font-size: 12px;}
    .index-app-poster .swiper-slide{ height: 440px; padding: 50px 15px;}

    .index-app-desc h4{font-size: 18px;}
    .index-app-desc p{ margin-top: 20px; font-size: 14px;}

}

/* news */
.index-news-title{justify-content: space-between;}
.index-news-title h3{font-size: 36px; color: var(--default);}

.index-news-types{display: inline-block;}
.index-news-types ul li{margin-left: 15px;}
.index-news-types ul li :is(a,button){ display: inline-block; padding: 0 25px; line-height: 45px;  border: 1px solid #eee; color: #666;}
.index-news-types ul li.on :is(a,button),
.index-news-types ul li :is(a,button):hover{background-color: var(--default); color: #fff; border: 1px solid var(--default);}

.index-news-swiper {margin-top: 60px; display: none;}
.index-news-swiper .swiper-container{padding-bottom: 5px; overflow: hidden;}

.index-news-item{overflow: hidden;}
.index-news-pic{ position: relative; display: block; overflow: hidden;}
.index-news-pic::before{position: absolute; top: 0; left: 0; content: ''; z-index: 1; width: 100%; height: 100%; background-color: rgba(29, 101, 55,.4); opacity: 0; visibility: hidden; transition: .3s;}
.index-news-pic img{width: 100%;}

.index-news-content{position:relative; padding:24px 0 30px;}
.index-news-content::before,
.index-news-content::after{position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 1px; background-color: var(--default); transition: .3s;}
.index-news-content::after{height: 5px; bottom: -2px;}

.index-news-content span{font-size:14px; color:#707a74;}
.index-news-content h3{ margin-top: 10px;}
.index-news-content h3 a{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; min-height:2.8em; line-height:1.45; font-size:22px; color:#172045; overflow:hidden;}
.index-news-content p{margin-top:16px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; min-height:3.3em; line-height:1.65; font-size:15px; color:#626c66; overflow:hidden;}

/* .index-news-item:hover .index-news-pic::before{ opacity: 1; visibility: visible;} */
.index-news-item:hover .index-news-pic img{transform: scale(1.2);}
.index-news-item:hover .index-news-content::before{width: 100%;}
.index-news-item:hover .index-news-content::after{width: 80px;}

@media (max-width:1440px) {

}

@media (max-width: 640px) {
    .index-news-title{justify-content: center; flex-direction: column;}
    .index-news-title h3{font-size: 24px; color: var(--default); text-align: center;}
    .index-news-types{margin-top: 25px;}
    .index-news-types ul{justify-content: center;}
    .index-news-types ul li{margin: 0 5px;}
    .index-news-types ul li :is(a,button){ display: inline-block; padding: 0 20px; line-height: 40px;  border: 1px solid #eee; color: #666;}
    .index-news-swiper {margin-top: 40px;}

    .index-news-content h3 a{font-size: 18px; min-height: 2.8em;}
    .index-news-content p{ font-size: 14px;}
}

@media (max-width: 480px) {
    .index-news-types ul li{margin: 0 5px;}
    .index-news-types ul li :is(a,button){ padding: 0 10px; line-height: 35px;  font-size: 14px;}
}

/* contact */
.index-contact-bg{background-color: #F7FAF8;}
.index-contact-title h3{ font-size: 36px; color: #172045;}
.index-contact-title p{ margin-top: 22px; font-size: 18px; line-height: 1.6; color: #666;}

.index-contact{position: relative; z-index: 1; justify-content: space-between; overflow: hidden;}

.index-contact-left{width:44%; padding-top:clamp(64px,6vw,86px);}
.index-contact-form{justify-content: space-between;}
.index-contact-item{position: relative; width: 48%; margin-top: 20px;}
.index-contact-item input{ display: block; width: 100%; padding: 0 15px; line-height: 55px; font-size: 18px; background-color: #fff; box-shadow: inset 0 0 0 1px #edf1ee; }
/* Keep the keyboard focus ring inside the field so the parent overflow does not clip its inline-start edge. */
.index-contact-item input:focus-visible{
    outline: 3px solid var(--default);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95);
}
.index-contact-form .index-contact-company{width: 100%;}
.index-contact-form button{ position: relative; margin-top: 20px; display: inline-block; padding: 0 60px; line-height: 55px; background-color: var(--default); border: none; color: #fff; font-size: 18px;}

.index-contact-poster{width:54%; height:460px; padding-top:44px; padding-left:40px;}
.index-contact-poster img{width: 100%;}

@media (max-width:1440px) {
    .index-contact-left{width: 600px; padding: 90px 0;}
    .index-contact-poster{ position: absolute; bottom: 0; right:0; z-index: -1; width: 58%; height: 500px; padding-top: 60px; padding-left: 0; }
}

@media (max-width: 768px) {

    .index-contact-title h3{ font-size: 24px;}
    .index-contact-title p{ margin-top: 15px; font-size: 16px;}

    .index-contact-left{width: 100%; padding: 90px 0;}
    .index-contact-poster{  bottom: -100px; width: 100%; height:auto; padding:0;}
}

@media (max-width: 640px) {
    .index-contact-title p{ font-size: 14px;}

    .index-contact-left{ padding: 50px 0;}
    .index-contact-item{ width: 100%;}
    .index-contact-item input{ line-height: 40px; font-size: 14px;}
    .index-contact-form button{  padding: 0 40px; line-height: 40px;  font-size: 14px;}
}

/*  */