/*page*/
/*Common header start*/
.page-head,.photo-header{position: relative; height: 420px; background: #012968 url('../images/banner-bg.jpg') no-repeat center;display: flex;align-items: center;justify-content: center; overflow: hidden}
.rotateme {animation-name: rotateme;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes rotateme { from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes bounce { 0%, 100% {right: 350px;animation-timing-function: ease-in;} 50% {right: 280px;animation-timing-function: ease-out;} }
.page-head-shape{position: absolute; z-index: 1; right: 10%; top: 30%; width: 66px; height: 72px; border-radius: initial;background:none}
.page-wrapper{margin: 0 auto; height: 100%;}
.page-head-info{height: 100%; padding: 0 30px; display: flex;flex-direction: column;justify-content: center; align-items: center;color: #fff}
.page-head .page-title{font-size:clamp(3.2rem, 4.8vw, 3.6rem); font-weight: 700; margin: 40px 0 20px;}
.page-head p{font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 30px; color: rgba(255,255,255,.7);}
.page-head a{color: var(--neutral-200)}
.page-head a:hover{color: #00ffff}
 /* 粒子容器 */
.particle-container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;pointer-events: none;}
/* 单个粒子 */
.particle {position: absolute;border-radius: 50%; opacity: 0.5}
/* 颜色定义 */
.bg-neonBlue { background-color: #FFF; }
.bg-neonPurple { background-color: #b967ff; }
.bg-neonCyan { background-color: #00ffff; }
.particle-flow {animation: particleFlow 6s linear infinite;}
/* 粒子流动动画 */
@keyframes particleFlow {
    0% { transform: translateY(500px) translateX(0) scale(1); opacity: 0.5 }
    50% {transform: scale(1.2);opacity: 0.7;}
    100% { transform: translateY(-200px) translateX(300px) scale(1); opacity: 0.5 }
}
.head-main{background: var(--blue-color) url('../images/solutions-banner.jpg') no-repeat center; height: 60vh; min-height: 530px; max-height: 550px;}
.head-body{margin: 0 auto; max-width: 768px; height: 100%; padding: 0 30px; display: flex;flex-direction: column;justify-content: center; align-items: center; text-align: center; color: #fff}
.head-body h2{font-size:clamp(3.2rem, 5vw, 5.6rem); font-weight: 700; line-height: 120%; margin-bottom: 20px;}
.head-body p{font-size:clamp(1.6rem, 3vw, 2rem);}
.solutions-head{height: 40vh; max-height: 360px;}
/*Common header end*/
/*page menu*/
.category-menu {background-color: #f8f9fa;border-bottom: 1px solid #e9ecef;}
.category-menu .wrapper{position: relative}
.primaryMenu {display: flex;overflow-x: auto;overflow-y: hidden;white-space: nowrap;padding: 12px 0;-ms-overflow-style: none;scrollbar-width: none;}
.primaryMenu::-webkit-scrollbar {display: none;}
.scroll-arrow {position: absolute;top: 50%;right: 0;transform: translateY(-50%);background: var(--neutral-300);color: #fff;border: none;margin-top: -2px;padding: 12px 2px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;cursor: pointer;z-index: 2;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}
.scroll-arrow:hover{background: var(--primary-color);}
.scroll-arrow i {font-size: 18px;}
.scroll-arrow.left i{transform: rotate(180deg);}
.scroll-arrow.hidden {opacity: 0;pointer-events: none;}
.primaryMenu-item {flex-shrink: 0;margin-right: 12px;}
.primaryMenu-item a {display: block;padding: 10px 18px;border-radius: 6px;color: #495057;text-decoration: none;font-weight: 500;transition: all 0.3s ease;}
.primaryMenu-item.active a,.primaryMenu-item a:hover {background-color: var(--primary-color);color: white;transform: translateY(-2px);box-shadow: var(--card-shadow);}
.primaryMenu-item a:active {transform: translateY(0);box-shadow: var(--card-shadow);}
.category-menu {position: -webkit-sticky; /* Safari */position: sticky;top: 0;z-index: 1000;}
/*about*/
.about-company{margin: 50px 0;}
.company-overview{display: grid;grid-template-columns: repeat(2, 1fr);gap: 32px;justify-content: center; align-items: center; color: var(--neutral-700)}
.company-image{position: relative;padding: 2.5rem; justify-self: end;order: 2;}
.company-image figure{border-radius: 12px;box-shadow: var(--card-shadow);transition: all 0.3s ease;display: flex; overflow: hidden}
.company-image figure img{max-height: 320px; display: block;transition: all 0.5s ease;}
.company-image figure:hover {transform: translateY(-8px);box-shadow: var(--card-hover-shadow);}
.company-image figure:hover img{transform: scale(1.1)}
.company-since{position: absolute; z-index: 1; left: 0; bottom: 0; width: 10rem; height: 10rem; line-height: 120%; color: #fff;align-items: center; font-size: 2.2rem; font-weight: 700; border-radius: 10px; background-color: var(--primary-color); display: grid; animation: sinceSlide 3s ease-in-out infinite alternate;}
@keyframes sinceSlide { 0%, 100% {transform: translateX(0);} 50% {transform: translateX(20px);} }
.company-content{line-height: 160%;}
.about-history{margin: 30px 0 0; padding: 50px 0;}
.history-container{position: relative; padding: 0 20px 200px; overflow: visible;}
.history-scroll-btn {position: absolute; top: 4.2rem; width: 5rem;height: 5rem;background-color: var(--orange-color);border:0;border-radius: 50%; display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 10;font-size: 18px;font-weight: bold;color: var(--light-color);}
.history-scroll-btn:hover {background-color: var(--primary-color);}
.history-scroll-btn.prev {left: 0;}
.history-scroll-btn.next {right: 0;}
.history-scroll-btn.hidden {background-color: var(--neutral-200);}
.timeline-line{position: absolute; width: 100%; z-index: 0; top: 6.5rem; left: 0; height: 3px; background-color: rgba(0,0,0,.1)}
.history-content{display: flex;padding: 16px;flex-direction: row;flex-wrap: nowrap; align-items: flex-start; gap: 20px; overflow-x: auto;scrollbar-width: none;}
.history-content::-webkit-scrollbar {display: none;}
.history-item{min-width: 160px}
.history-year{position: relative; cursor: pointer; width: 10rem; height: 10rem; line-height: 10rem; text-align: center; font-weight: 600; background-color: var(--footer-bg); font-size: 2rem; color: #fff; border-radius: 50%; z-index: 1;transition: all 0.3s ease;}
.history-year:hover,.history-year.active{background-color: var(--primary-color);}
.history-summary{position: absolute; width: 100%; z-index: 1; left: 0; margin-top: 6rem; text-align: center; line-height: 120%; color: var(--neutral-700); display: none}
.history-title{font-weight: 700; font-size: 2.2rem; line-height: 120%; margin-bottom: 30px; color: #333;}
.history-summary.active{display: block}
.company-cert{padding: 50px 0; background-color: var(--neutral-100);}
.company-cert-side {display: flex;padding: 16px;flex-direction: row;flex-wrap: nowrap;gap: 20px;align-items: center;overflow-x: auto;overflow-y: hidden; scrollbar-width: thin;-ms-overflow-style: -ms-autohiding-scrollbar;}
.company-cert-item{ min-height: 60px; min-width: 60px; padding: 20px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transition: all 0.3s ease; display: inline-block; overflow: hidden}
.company-cert-item img {width: auto; display: block;}
.company-cert-item:hover {transform: translateY(-8px);box-shadow: var(--card-hover-shadow);}
.about-production{margin: 50px 0}
.production-card{display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px;justify-content: center; align-items: center;}
.production-item {background-color: #FFFFFF;border-radius: 16px;overflow: hidden;box-shadow: var(--card-shadow);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%;}
.production-item:hover {transform: translateY(-8px);box-shadow: var(--card-hover-shadow);}
.production-image {position: relative;height: 220px;overflow: hidden;}
.production-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.production-item:hover .product-image img {transform: scale(1.1);}
.production-content {padding: 24px;flex-grow: 1;display: flex;flex-direction: column;}
.production-title{font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 700;display: flex;flex-direction: row; margin-bottom: 20px;}
.production-title i{background-color: rgba(15,82,186,0.1); color: var(--blue-color); border-radius: 50%; width: 4rem; height: 4rem; line-height: 4rem; margin-right: 15px; text-align: center; display: inline-block}
.production-description{color: var(--neutral-700)}
.company-video{margin: 50px 0 0; padding: 50px 0; background: var(--footer-bg) url('../images/about-video-bg.jpg') no-repeat center fixed;background-size: cover;}
.about-video{position: relative; margin: 0 auto; width: 720px; border-radius: 12px; overflow: hidden}
.about-partners{padding: 50px 0}
.partners-side{display: grid;grid-template-columns: repeat(2, 1fr);gap: 32px;justify-content: center; align-items: center; color: var(--neutral-700)}
.partners-item-image{padding: 50px;}
.partners-item-image figure{border-radius: 12px; overflow: hidden}
.partners-item-image img{display: block}
.partners-item h3{font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 15px; font-weight: 600; color: #333}
.partners-logo{display: grid; margin-top: 20px; grid-template-columns: repeat(4, 1fr);gap: 32px;justify-content: center; align-items: center;}
/*brand story*/
.brand-header{position: relative; height: 100vh; background: var(--footer-bg) url('../images/about-video-bg.jpg') no-repeat center fixed; color: #fff; background-size: cover;display: flex;align-items: center;justify-content: center; text-align: center; overflow: hidden}
.brand-header h2{font-size: clamp(4rem,8vw,9rem); line-height: 120%; margin-bottom: 20px;}
.brand-header p{font-size: clamp(1.8rem,3vw,2.4rem);}
.brand-header-button{margin-top: 50px;}
.brand-btn{padding: 1.5rem 3rem; border: 0.2rem solid var(--light-color); font-size: 1.6rem; font-weight: 600; border-radius: 9999px;color: var(--light-color); margin: 0 10px;transition: all 0.3s ease;}
.brand-btn.active{background-color: var(--brand-color); color: var(--footer-bg);border: 0.2rem solid var(--brand-color);}
.brand-btn:hover{border: 0.2rem solid var(--brand-color);color: var(--brand-color);}
.brand-btn.active:hover{background-color: var(--primary-color);border: 0.2rem solid var(--primary-color); color: #fff}
.brand-header-scroll{position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 1; max-width: 120px; display: inline-block; animation: brandSlide 2s ease-out infinite alternate;}
.brand-header-scroll a{color: var(--light-color); font-weight: 500;}
.brand-header-scroll span{display: block; font-size: 1.4rem;}
.brand-header-scroll i{font-weight: 700; font-size: 2.2rem;}
@keyframes brandSlide { 0%, 100% {transform: translateX(-50%) translateY(0);} 50% {transform: translateX(-50%) translateY(-10px);} }
.brand-beginning{padding: 80px 0}
.beginning-item{position: relative}
.decoration_square{position: absolute; z-index: 0; width: 12rem; height: 12rem; box-shadow: var(--card-shadow); border-radius: 8px; background-color:rgba(11,174,233,.2); left: 0; bottom: 0; display: inline-block}
.decoration_square.rt{bottom: auto; left: auto; top: 0; right: 0; background-color:rgba(0,0,0,.1);}
.beginning-content{display: grid;grid-template-columns: repeat(2, 1fr);gap: 32px;justify-content: center; align-items: center;}
.beginning-item-image{position: relative; z-index: 1; padding: 20px;}
.beginning-item-image figure{border-radius: 12px; box-shadow: var(--card-shadow);transition: all 0.3s ease; overflow: hidden}
.beginning-item-image figure:hover{box-shadow: var(--card-hover-shadow); transform: translateY(-10px) scale(1.02)}
.beginning-content h4,.brand-black-name h4{text-transform: uppercase; color: var(--accent)}
.beginning-content h3,.brand-black-name h3{margin: 20px 0; font-size: clamp(2rem, 3.6vw, 4.2rem); line-height: 110%; color: var(--footer-bg); font-weight: 700;}
.beginning-hr-line{width: 80px; height: 4px; background-color: var(--accent); margin-bottom: 20px;}
.beginning-content p,.brand-black-name p,.brand-mission-card p,.brand-commitment p,.core-item p,.promise-footer p{color: var(--text-color); margin-bottom: 10px;}
.beginning-content .beginning-divider{margin: 15px 0; font-size: clamp(2rem, 2.2vw, 3rem); line-height: 120%; color: var(--footer-bg); font-weight: 600; font-style: italic; border-left: 4px solid var(--accent); padding-left: 20px}
.brand-mission{padding: 8rem 0 5rem; background-color: var(--neutral-100)}
.brand-black-name{margin: 0 auto; max-width: 700px; text-align: center}
.brand-black-name .beginning-hr-line{display: inline-block}
.brand-mission-cert{margin-top: 50px; display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px;justify-content: center; align-items: stretch;}
.brand-mission-card,.brand-commitment{background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: var(--card-shadow);transition: all 0.3s ease;}
.brand-mission-title{font-size: clamp(1.8rem, 3vw, 2rem); font-weight: 700; color: var(--footer-bg); margin: 20px 0}
.brand-mission-head i{width: 6rem; height: 6rem; line-height: 6rem; border-radius: 50%; text-align: center;background-color:rgba(11,174,233,.2); display: inline-block; color:var(--footer-bg); font-size: 3rem;}
.brand-mission-card p{min-height: 106px}
.brand-mission-card:hover,.brand-commitment:hover{box-shadow: var(--card-hover-shadow); transform: translateY(-10px)}
.brand-commitment{position: relative; margin: 50px auto; max-width: 800px;}
.brand-commitment p{font-size: clamp(1.8rem, 3vw, 2rem); font-style: italic}
.brand-commitment h5{color: var(--footer-bg); font-size: 1.8rem; font-weight: 600}
.decoration_circle{position: absolute; right: 5px; bottom: 20px; width: 6rem; height: 6rem; border-radius: 50%; background-color: rgba(11,174,233,.7); display: inline-block; animation: commitmentSlide 3s ease-out infinite alternate;}
.decoration_circle.orange{right: 40px; bottom: 10px; width: 5rem; height: 5rem; background-color: rgba(185,103,255,.5);animation: commitmentSlide2 3s ease-out infinite alternate;}
@keyframes commitmentSlide { 0%, 100% {transform: translateX(0) translateY(0);} 50% {transform: translateX(10px) translateY(-10px);} }
@keyframes commitmentSlide2 { 0%, 100% {transform: translateX(0) translateY(0);} 50% {transform: translateX(-10px) translateY(10px);} }
.brand-core{padding: 80px 0;}
/* 基础Grid布局 */
.core-content {display: grid;gap: 50px; margin-top: 50px;}
.core-item {display: grid;grid-template-columns: 0.6fr 1fr;gap: 50px;justify-content: center;align-items: center;}
.core-item:nth-child(2) {grid-template-columns: 1fr 0.6fr;}
.core-item:nth-child(2) .core-item-image {order: 2;}
.core-item h5{font-size: clamp(1.8rem, 3.6vw, 3rem); color: var(--footer-bg); font-weight: 700; margin-bottom: 20px;}
.core-item .core-slogan{font-weight: 600; font-style: italic}
.core-item-image figure,.promise-item figure{border-radius: 12px; box-shadow: var(--card-shadow);transition: all 0.3s ease; overflow: hidden}
.core-item-image figure img,.promise-item figure img{display: block}
.core-item-image figure:hover,.promise-item figure:hover{box-shadow: var(--card-hover-shadow); transform: translateY(-10px)}
.brand-promise{padding: 80px 0; background-color: var(--footer-bg)}
.brand-black-name.white h3{color: #fff;}
.promise-content{margin-top: 50px; display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;justify-content: center;align-items: center;}
.promise-item{color: #fff; font-size: clamp(1.8rem, 3vw, 2rem); }
.promise-item:nth-child(1){order: 2;}
.promise-footer{margin-top: 20px; background-color: rgba(255,255,255,.1); border-left: 4px solid var(--brand-color); border-radius: 8px; padding: 20px; overflow: hidden}
.promise-footer h5{font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; margin-bottom: 15px;}
.promise-footer p{font-style: italic; color: #fff; margin-bottom: 0}
/*our team*/
.team-header{position: relative; height: 100vh; background: var(--footer-bg) url('../images/our-team-bg.jpg') no-repeat center fixed; color: #fff; background-size: cover; overflow: hidden}
.team-header h2{font-size: clamp(2.5rem,6vw,9rem); line-height: 120%; margin-bottom: 20px;}
.team-header p{margin: 0 auto; font-size: clamp(1.8rem,3vw,2.4rem); max-width: 760px}
.team-header-mask{display: flex;align-items: center;justify-content: center; text-align: center;width: 100%; height: 100%;background:linear-gradient(to right, rgba(10,36,99,0.8),rgba(18,18,18,.9));}
.team-header-card{margin: 30px auto 0; display: grid;grid-template-columns: repeat(3, 1fr); max-width: 760px; gap: 32px;justify-content: center; align-items: stretch;}
.team-header-item{padding: 1.5rem; background-color: var(--accent); border-radius: 8px;box-shadow: 0 1px 2px 0 #000;transition: all 0.3s ease;}
.team-header-item h4{font-size: clamp(2.4rem,3.6vw,3.6rem); font-weight: 700;}
.team-header-item p{font-size: clamp(1.6rem,2vw,1.8rem);}
.team-header-item:hover{box-shadow: var(--card-hover-shadow); transform: translateY(-10px)}
.team-card-tags{margin-top: 20px}
.team-card-tags span{background-color: rgba(11,174,233,.2);padding: 1px 1.5rem; margin-right: 5px; margin-bottom: 5px; font-size: 1.4rem; border-radius: 20px; display: inline-block; color: var(--footer-bg)}
.team-departments{margin: 30px 0; padding: 50px 0;}
.company-photos{padding: 50px 0 80px; background-color: var(--neutral-100)}
.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));grid-auto-rows: 200px;gap: 10px;padding: 20px;}
.gallery img {width: 100%;height: 100%; cursor: pointer; object-fit: cover;border-radius: 8px;transition: transform 0.3s ease;}
.gallery img:hover {transform: scale(1.02);}
.gallery-btn{margin-top: 30px; text-align: center}
.gallery-btn a{padding: 1.5rem 2.5rem; border: 1px solid rgba(0,0,0,.1); background-color: #fff; color: var(--blue-color); font-weight: 600; border-radius: 8px;transition: all 0.3s ease;}
.gallery-btn a:hover{border: 1px solid var(--blue-color); background-color: var(--blue-color); color: #fff;}
.team-perspectives{padding: 50px 0 80px;}
.perspectives-content{display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px;justify-content: center;align-items: stretch;}
.perspectives-item{border-radius: 12px; border: 1px solid rgba(0,0,0,.07); transition: all 0.3s ease; overflow: hidden}
.perspectives-item:hover{box-shadow: var(--card-hover-shadow); transform: translateY(-10px)}
.perspectives-item-wrapper{margin: 40px; color: var(--text-color); }
.perspectives-icon{font-size: 6.4rem; line-height: 6.4rem; color: rgb(10 77 162 / 0.2)}
.perspectives-message{display: flex; gap: 20px; margin-top: 20px;}
.perspectives-avatar{width: 6rem; height: 6rem; border-radius: 100%; border: 1px solid rgba(0,0,0,.2); overflow: hidden}
.perspectives-footer h4{color: var(--dark-color); margin-bottom: 6px;}
.perspectives-footer p{color: var(--neutral-700);font-size: 1.4rem;}
.join-us{background: var(--blue-color); display: flex;justify-content: center; align-items: center; color: #fff; padding: 50px 0; overflow: hidden}
.join-us-content{text-align: center; font-size: clamp(1.8rem,2.2vw,2rem); max-width: 670px; margin: 0 20px;}
.join-us-content h2{font-size: clamp(2.4rem,3.6vw,3.6rem); font-weight: 700; margin-bottom: 20px;}
.join-us-content p{padding-bottom: 30px}
.join-us .gallery-btn a{font-size: 1.8rem; box-shadow: var(--card-hover-shadow);}
.join-us .gallery-btn a:hover{border: 1px solid var(--footer-bg); background-color: var(--accent);}
.photo-header{ height: 500px; background: #012968 url('../images/gallery-banner-bg.jpg') no-repeat center;}
.photo-header .team-header-mask{background: linear-gradient(to right, rgba(10, 36, 99, 0.6), rgba(18, 18, 18, .8));}
.photo-main{margin: 80px 0;}
.photo-content{display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));grid-template-rows: 200px;gap: 10px;}
.photo-item{height: 100%; border-radius: 8px; overflow: hidden}
.photo-item img {width: 100%; height: 100%; cursor: pointer; object-fit: cover;transition: transform 0.3s ease;}
.photo-item img:hover {transform: scale(1.02);}
.photo-main .gallery-btn{margin-top: 50px;}
.photo-main .gallery-btn button{cursor: pointer; outline: 0;padding: 1.3rem 4rem; border: 1px solid rgba(0,0,0,.1); background-color: #fff; color: var(--blue-color); font-weight: 600; border-radius: 8px;transition: all 0.3s ease;}
.photo-main .gallery-btn button:hover{border: 1px solid var(--blue-color); background-color: var(--blue-color); color: #fff;}
/*contact*/
.card-contact{height: 100vh; display: flex; align-items: center;justify-content: center;}
.contact-us{display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;justify-content: center;align-items: center;}
.contact-us h2{font-size: clamp(2rem, 4.8vw, 4.2rem); color: var(--footer-bg); font-weight: 700;}
.contact-us .contact-title{text-transform: uppercase; color: var(--accent)}
.contact-hr-line{width: 80px; height: 4px; background-color: var(--accent);display: inline-block}
.contact-description{margin: 20px 0; color: var(--text-color); font-size: 1.8rem;}
.contact-information{display: grid;align-items: center; }
.contact-information li{position: relative; padding-left: 6rem; margin: 10px 0;}
.contact-information li:after{position: absolute; left: 0; top:0; text-align: center; font-size: 2rem; width: 5rem; height: 5rem; line-height: 5rem; border-radius: 50%; background-color: rgba(11,174,233,.2); content: '\e7e6';font-family: "iconfont",sans-serif;}
.contact-information li:nth-of-type(2):after{content: '\e667';}
.contact-information li:nth-of-type(3):after{content: '\e6b9';}
.contact-information li:nth-of-type(4):after{content: '\e681';}
.contact-information li strong,.follow-us h3{font-size: clamp(2rem, 3.6vw, 2.2rem);color: var(--footer-bg); display: block}
.contact-information .quality-info li:after{content: '\e681'}
.contact-information .quality-info li:nth-of-type(2):after{content: '\e680'}
.contact-information .quality-info li:nth-of-type(3):after{content: '\e9d7'}


.follow-us h3{margin: 20px 0}
.follow-us .social-links a{background-color: rgba(11,174,233,.2); color:var(--footer-bg);}
.follow-us .social-links a:hover{background-color: var(--blue-color); color:var(--light-color);}
.contact-wrapper{display: flex; align-items: center;justify-content: center;}
.contact-msg{padding: 4rem; min-width: 90%; background-color: rgba(249,250,251,1); border-radius: 12px; box-shadow: var(--card-shadow);transition: all 0.3s ease; overflow: hidden}
.contact-msg .form-header{font-size: clamp(2rem, 3.6vw, 2.4rem); color: var(--footer-bg); font-weight: 700; margin-bottom: 20px;}
.contact-msg .form-group label{font-size: clamp(1.4rem, 2vw, 1.6rem);color: var(--text-color);padding: 10px 0 5px; font-weight: 600;display: block;}
.contact-msg .form-group input,.contact-msg .form-group textarea{padding: 1.3rem; width: 100%; border: 1px solid #ddd;font-family: 'Inter', sans-serif}
.contact-msg .form-group input:focus,.contact-msg .form-group textarea:focus{outline: 1px solid var(--accent); border: 1px solid #ddd;padding: 1.3rem;box-sizing:border-box;border-radius: 5px;box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);background-color: #fff;transition: box-shadow 0.3s ease;}
.contact-msg .form-group input::placeholder,.contact-msg .form-group textarea::placeholder{color: #999;font-size: 1.5rem;}
.contact-submit{margin-top: 1.2rem; cursor: pointer; width: 100%; border: 0; outline: 0; font-size: 1.6rem; font-weight: 600; background-color: var(--footer-bg); color: var(--light-color); padding: 1.5rem 0; border-radius: 8px;transition: all 0.3s ease;}
.contact-submit:hover{background-color: var(--blue-color);}

/*Product index*/
.product-categories .product-title{position: absolute; left: 10px; bottom: 10px; z-index: 1;}
.product-categories .product-title a{color: #fff;}
.product-categories .product-content{padding: 0 20px 15px}
.product-categories .product-description{margin: 14px 0;}
.product-categories .product-footer span{float: right; font-size: 1.4rem;}
.product-custom{border: 2px dashed rgba(61,129,231,.3); padding: 20px; border-radius: 14px; height: 100%; display: flex;flex-direction: column; align-items: center;justify-content: center;}
.product-custom i.icon-xingzhuang{width: 6rem; height: 6rem; line-height: 6rem; text-align: center; font-size: 2.2rem; color: var(--footer-bg); border-radius: 50%; background-color: rgba(61,129,231,.1); transition: all 0.3s ease;}
.product-custom h3{font-size: 2.4rem; margin: 20px 0 10px}
.product-custom p{color: var(--text-color)}
.product-custom .btn{font-size: 1.8rem; color: var(--blue-color); font-weight: 600;transition: all 0.3s ease;}
.product-custom:hover i.icon-xingzhuang{background-color: rgba(61,129,231,.3);}
.product-custom:hover .btn{color: var(--primary-color);}
.products-featured{padding: 50px 0 80px; background: var(--footer-bg) url('../images/about-video-bg.jpg') no-repeat center fixed;background-size: cover;}
.products-list  {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
.products-list .product-card{box-shadow: var(--list-card-shadow); border-radius: 8px;}
.products-list .product-card:hover{box-shadow: var(--card-hover-shadow)}
.products-list .product-image {height: 260px;}
.products-list .product-content {padding: 20px;}
.products-list .product-title {font-size: 1.6rem;margin-bottom: 10px; line-height: 120%; font-weight: 500}
.products-list .product-description {line-height: 120%; font-size: 1.3rem; margin-bottom: 0; color: var(--neutral-700)}
.products-list .product-tags{margin-bottom: 10px;}
.products-list .product-tags span{padding: 0 8px; font-size: 1.2rem; margin-right: 4px; border-radius: 20px; background-color: rgba(61,129,231,.1); display: inline-block}
.products-list .product-footer .btn{text-align: center; background-color: rgba(61,129,231,.1); color: var(--blue-color); width: 100%; padding: 5px 0;transition: all 0.3s ease;}
.products-list .product-footer .btn:hover{background-color: rgba(61,129,231,.3); font-weight: 600;}
.kst-advantages{padding: 80px 0;}
.kst-advantages-grid{display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
.kst-advantages-card {background-color: var(--neutral-100);border-radius: 16px;overflow: hidden;box-shadow: var(--list-card-shadow);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%;}
.kst-advantages-card:hover{box-shadow: var(--list-hover-shadow); transform: translateY(-6px)}
.kst-advantages-item{padding: 20px;}
.kst-advantages-icon{width: 6rem; height: 6rem; line-height: 6rem; text-align: center; font-size: 2.2rem; color: var(--footer-bg); border-radius: 50%; background-color: rgba(61,129,231,.1); transition: all 0.3s ease;}
.kst-advantages-icon i{font-size: 2.2rem; color: var(--blue-color)}
.kst-advantages-item h4{margin: 20px 0 5px; font-size: 1.8rem; font-weight: 700;}
.kst-advantages-item p{line-height: 120%}
.selecting-product{margin-bottom: 50px;}
.selecting-product-body{display: grid; padding: 30px; grid-template-columns: 1fr 0.5fr;gap: 50px;justify-content: center;align-items: center; border-radius: 12px; background-color: var(--blue-color)}
.selecting-product-content{display: flex;flex-direction: column; justify-content: center;color: #fff;}
.selecting-product-content h3{font-size: 3rem; margin-bottom: 10px}
.selecting-product-btn{text-align: right}
.selecting-product-btn a{padding: 1.5rem 2.5rem; border: 1px solid rgba(0,0,0,.1); background-color: #fff; color: var(--blue-color); font-weight: 600; border-radius: 8px;transition: all 0.3s ease;}
.selecting-product-btn a:hover{border: 1px solid var(--blue-color); background-color: var(--neutral-100); color: var(--footer-bg)}
/**goods list**/
.goods-body{padding: 50px 0; background-color: var(--neutral-100)}
.goods-main{display: grid; grid-template-columns: minmax(220px, 280px) 1fr;gap: 30px;justify-content: center;}
.category-card{display: flex; flex-direction: column; background-color: #FFf;border-radius: 8px; padding: 20px; overflow: hidden;box-shadow: var(--cat-card-shadow);}
.category-title{padding-bottom: 10px; border-bottom: 1px solid var(--neutral-200)}
.category-title h3{color: var(--blue-color); font-size: 1.8rem; font-weight: 700;}
#subMenu{display: none}
.category-nav{margin-top: 10px;}
.category-nav-title,.category-level-title{padding: 1.2rem 0;display: grid; grid-template-columns: 1fr minmax(10px, 20px);gap: 10px;justify-content: center;}
.category-nav-title span{text-align: right; cursor: pointer}
.category-level{display: none}
.category-level.active{display: block}
.category-level li{padding: 1rem; font-size: 1.5rem;}
.category-level-title{padding: 0;}
.category-level li .count{margin-left: 5px; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; border-radius: 50%; background-color: rgba(61,129,231,.1); display: inline-block; font-size: 1.2rem; color: var(--neutral-700)}
.category-level ul li{font-size: 1.4rem;}
.arrow.rotate {transform: rotate(90deg);transition: transform 0.3s ease;}
.goods-header{display: grid; grid-template-columns: 1fr minmax(70px, 80px);gap: 10px;justify-content: center;align-items: center; background-color: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: var(--cat-card-shadow);}
.goods-header h2{font-size: 2.2rem; color: var(--blue-color); margin-bottom: 10px;}
.goods-header p{color: var(--neutral-700); padding-bottom: 0}
.goods-header-options{display: grid; grid-template-columns: 1fr 1fr;gap: 5px;}
.goods-header-options span{width: 3.6rem; height: 3.6rem; line-height: 3.2rem; text-align: center; cursor: pointer; color: var(--neutral-700); border: 1px solid var(--neutral-300); border-radius: 6px; display: inline-block}
.goods-header-options span.active{background-color: var(--blue-color); border-color: var(--blue-color); color: #fff;}
.goods-header-options span i{font-size: 1.4rem; font-weight: 600;}
.goods-list-container .products-list  {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 20px;}
.goods-list-container .products-list.goods-list{display: grid;grid-template-columns: 1fr;gap: 20px;}
.goods-list .product-card{display: grid;grid-template-columns: minmax(200px, 280px) 1fr;gap: 20px;}
.goods-list .product-image{height: 220px;}
.goods-list .product-title{font-size: 2.2rem;}
.goods-list .product-description{font-size: 1.6rem;}
.goods-list .product-footer{width: 100%; display: block}
.goods-list .product-footer .btn{float: right; width: auto; padding: 5px 16px; display: inline-block}
/* Pagination Container */
.paginate-grid{display: flex; margin: 10px 0; overflow-x: auto;scrollbar-width: none; justify-content: center;}
.pagination {display: flex;justify-content: center;align-items: center;margin-top: 30px;}
.pagination a,.pagination li span {color: black;float: left; width: 4rem; height: 4rem; line-height: 3.6rem; text-align: center; background-color: #fff; border-radius: 6px; text-decoration: none;transition: background-color .3s;border: 1px solid var(--neutral-300);margin: 0 2px;}
.pagination a:hover:not(.active) {background-color: var(--neutral-200);}
.pagination li.active span {background-color: var(--blue-color);color: white;border: 1px solid var(--blue-color);}
.pagination li.disabled span {color: var(--neutral-700);cursor: not-allowed;pointer-events: none;}
.noData{text-align: center; color: var(--neutral-700);}

/*product read*/
.page-location-main{padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,.05);}
.page-location {color: var(--neutral-900); font-weight: 600}
.page-location a{color: var(--neutral-700); font-size: 1.3rem; font-weight: normal}
.page-location a:hover{color: var(--blue-color)}
.goods-read{padding: 50px 0; background:linear-gradient(to bottom, rgba(255,255,255,1),var(--neutral-100));}
.goods-read-main{display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40vw, 570px), 1fr)); gap: 30px;justify-content: center;}
.goods-image-main{height: 100%;}
.goods-image-show{margin-bottom: 15px; overflow: hidden}
.goods-image-show .my-slider{padding-bottom: 100px}
.goods-image-show .slider-wrapper{border-radius: 8px; overflow: hidden}
.goods-image-show .slider-item{display: grid; height: 560px; justify-content: center; align-items: center; background-color: var(--neutral-700)}
.goods-image-show .slider-item video{width: 100%;}
.goods-image-show .slider-indicators{bottom: 110px}
.goods-image-show .slider-thumbnail{border-radius: 8px;border-color: var(--neutral-200); overflow: hidden}
.goods-image-show .slider-thumbnail.active{border-color: var(--primary-color)}
.goods-image-show .slider-prev,.goods-image-show .slider-next{transform: translateY(-140%)}
.goods-image-show img {width: 100%; height: 100%; cursor: pointer; object-fit: cover; display: block; transition: transform 0.5s ease;}
.goods-image-show img:hover {transform: scale(1.02);}
.goods-read-content h1{font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 120%; font-weight: 700; margin-bottom: 20px;}
.goods-read-desc{color: var(--neutral-700); margin-bottom: 10px;}
.goods-operation{box-shadow: var(--list-card-shadow); background-color: #fff; padding: 20px; border-radius: 8px;}
.goods-operation-title{font-weight: 600; margin-bottom: 15px;}
.goods-operation-title i{color: var(--primary-color); font-size: 2.2rem; font-weight: normal}
.goods-read-item{display: flex; gap: 10px; align-items: center; margin-bottom: 20px; color: var(--neutral-700);}
.goods-read-item span{margin-right: 10px;}
.goods-read-item span.goods-read-line{width: 1px; height: 20px; background-color: rgba(0,0,0,.08); display: inline-block; margin:0 15px 0 10px;}
.goods-read-reviews i{color: var(--orange-color)}
.goods-read-certified i{color: #009700}
.goods-operation button{border: 1px solid var(--blue-color); cursor: pointer; background-color: var(--blue-color); color: #fff; padding: 12px; font-size: 1.8rem;transition: all 0.3s ease;}
.goods-operation-contact{margin-bottom: 15px; display: grid; grid-template-columns: 1fr minmax(20px, 40px);gap: 10px;justify-content: center;}
.goods-operation-contact a{padding: 12px; background-color: var(--light-color); border-radius: 8px;}
.goods-operation-contact a:hover{background-color: var(--neutral-200); color: var(--blue-color)}
.goods-operation-down button{width: 100%; background-color: #fff; color: var(--blue-color)}
.goods-operation button:hover{background-color: var(--footer-bg);color:#fff;}
.goods-support{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px;justify-content: center; margin-top: 20px;}
.goods-support-item{box-shadow: var(--list-card-shadow); background-color: #fff; padding: 20px; border-radius: 8px;}
.goods-support-title{display: flex; gap: 10px; align-items: center; margin-bottom: 15px}
.goods-support-title i{width: 3rem; height: 3rem; line-height: 3rem; border-radius: 50%; color: var(--blue-color); text-align: center; background-color: var(--neutral-200)}
.goods-support-item p{color: var(--neutral-700);}
.goods-features{padding: 50px 0;}
.goods-features-card{display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30vw, 320px), 1fr));gap: 32px;}
.goods-features-item{display: flex; flex: 1; flex-direction: column; box-shadow: var(--list-card-shadow); background-color: var(--neutral-100); padding: 20px; border-radius: 8px;transition: all 0.3s ease;}
.goods-features-item:hover{box-shadow: var(--list-hover-shadow); }
.goods-features-icon i{width: 4.6rem; height: 4.6rem; line-height: 4.6rem; text-align: center; background-color: rgba(11,174,233,.1); color: var(--primary-color); border-radius: 50%; display: inline-block}
.goods-features-title{margin: 15px 0 10px; font-size: 1.8rem; font-weight: 600;}
.goods-features-desc{font-weight: 400; color: var(--neutral-700); line-height: 120%; flex-grow:1; }
.goods-desc{padding: 50px 0; background: var(--neutral-100);}
.goods-desc-wrapper{box-shadow: var(--list-card-shadow); background-color: #fff; border-radius: 8px;transition: all 0.3s ease;}
.goods-desc-header{display: flex; align-items: center; border-bottom: 1px solid var(--neutral-200); margin-bottom: 20px; color: var(--neutral-700);}
.goods-container-tabs{padding: 15px 20px; cursor: pointer}
.goods-container-tabs.active{border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: 600;}
.goods-container{padding: 20px 30px; color: var(--neutral-900); line-height: 160%}
.goods-container-item{display: none}
.goods-container-item.active{display: block}
.goods-desc-content h2,.goods-desc-content h3,.goods-desc-content h4,.goods-desc-content h5,.goods-desc-content h6,.goods-desc-content p,.goods-desc-content ul,.goods-desc-content ol,.goods-desc-content table{margin-bottom: 10px;}
.goods-desc-content ul li{list-style: disc; margin-left: 30px; margin-bottom: 5px;}
.goods-desc-content h2{font-size: 2.4rem;}
.goods-desc-content h3{font-size: 2.2rem;}
.goods-desc-content h4{font-size: 2rem;}
.goods-desc-content h5{font-size: 1.8rem;}
.table-wrapper{width: 100%; display: block; overflow-x: auto;}
table{ min-width: 100%; width: max-content;border-collapse: collapse;}
table tr{border: 1px solid var(--neutral-300);}
table td,table th{border-left: 1px solid var(--neutral-300); text-align: center; vertical-align: middle; padding: 3px;}
table th{background-color: var(--neutral-300)}
.goods-desc-cert{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));justify-content: center;gap: 32px;}
.goods-cert-title{margin-bottom: 10px;}
.goods-cert-title h4{font-size: 1.8rem; font-weight: 600;}
.goods-cert-title i{color: var(--primary-color); margin-right: 10px;}
.goods-cert-content,.goods-cert-quality{overflow: hidden}
.goods-cert-content-item{padding: 20px; border-radius: 8px; background-color: var(--neutral-100); margin-top: 15px; display: grid; grid-template-columns: 40px 1fr;gap: 10px;justify-content: center;}
.goods-cert-content-icon i{width: 40px; height: 40px; line-height: 40px; border-radius: 50%; text-align: center; background-color: rgba(11,174,233,.1);color: var(--primary-color); display: inline-block}
.goods-cert-content-text p{font-size: 1.4rem; padding-bottom: 0}
.goods-cert-content-text a{font-size: 1.4rem; color: var(--primary-color);transition: all 0.3s ease;}
.goods-cert-content-text a:hover{color: var(--blue-color)}
.goods-quality-item{padding: 20px; border-radius: 8px; background-color: var(--neutral-100); margin-top: 15px;}
.goods-quality-slider{margin-top: 10px;}
.goods-quality-slide-text{color: var(--neutral-900); font-size: 1.4rem;}
.goods-quality-slide-text-number{float: right; color: var(--primary-color)}
.goods-quality-slide-fade{position: relative;}
.quality-slide-fade,.quality-slide-fade-full{width: 100%; height: 8px; border-radius: 4px; background-color: var(--neutral-200); overflow: hidden; display: block}
.quality-slide-fade-full{position: absolute; left: 0; top: 0; width: 0; background-color: var(--primary-color);animation: fadeLine 2s ease-out forwards;}
@keyframes fadeLine { from {width: 0;} to {width: 100%;}}

/*comment*/
.article-comments {width: 100%; border-radius: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);box-sizing:border-box;}
.article-comments h2{position: relative; padding: 30px 0; margin:0 30px; font-size: 2rem; font-weight: 700;}
.article-comments h2:before{position: absolute; content: ''; left: 0; bottom: 0; width: 30px; height: 5px; background-color: var(--primary-color)}
.comment {margin: 30px 20px;border-radius: 5px;}
.comment-item{margin: 15px 0;}
.comment-header {display: flex;justify-content: space-between;margin-bottom: 5px;}
.comment-author {font-weight: bold;color: #000;font-size: 1.6rem;display: flex;align-items: center;}
.comment-author img{display: inline-block;border-radius: 50%; width: 70px; height: 70px; border: 3px solid #eee;}
.comment-author i{display: inline-block;padding: 15px; width: 40px; height: 40px; line-height: 40px; font-size: 4rem;color: rgba(255,255,255,.9);border-radius: 50%;background-color: rgba(0,0,0,.2);}
.comment-author span{margin-left: 10px; text-transform: uppercase;}
.comment-timestamp {color: #888;font-size: 12px;}
.comment-content {color: var(--neutral-700);margin: 10px 0;}
.comment-content p.red{color: var(--primary-color)}
.comment-actions {display: flex;justify-content: flex-end;border-bottom: 1px dotted #ddd;padding-bottom: 5px;}
.comment-reply-btn,.comment-like-btn {margin-left: 5px;padding: 0.75rem 2rem;background-color: var(--neutral-200);border: none;border-radius: 5px;cursor: pointer;transition: all 0.3s ease;}
.comment-reply-btn:hover{background-color: var(--primary-color); color: #fff;}
.comment-replies{margin: 10px 20px;}
.form-table{padding: 10px 0;border-radius: 8px;background-color: #fff;}
.comment-form {margin: 0 30px;padding: 10px 0;}
.comment-form h2{margin: 0;}
.form-group-wrapper{margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px}
.form-table .form-group{display: grid; grid-template-columns:  minmax(60px, 80px) 1fr;justify-content: center; align-items: center; text-align: right; gap: 20px; margin-bottom: 5px;}
.form-table .form-group input,.form-table .form-group textarea{flex: 1; border-radius: 5px; padding: 1rem; outline: none; border: 1px solid var(--neutral-300);box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.15); font-family: 'Inter', sans-serif}
.form-table .form-group input:focus,.form-table .form-group textarea:focus{box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(61, 129, 231, 0.5);}
.comment-submit-btn{margin-top: 10px; max-width: 160px; padding: 12px 0; font-size: 1.6rem; cursor: pointer; border: 0; outline: 0; border-radius: 5px; background-color: var(--blue-color); color: #fff;transition: all 0.3s ease;}
.comment-submit-btn:hover{background-color: var(--footer-bg)}
.recs-goods{padding: 50px 0;}
.recs-goods-header{color: var(--neutral-700); margin-bottom: 30px; border-bottom: 1px solid var(--neutral-200)}
.recs-goods-header h3{font-size: clamp(2rem, 3vw, 2.8rem); color: var(--neutral-900)}
/*From*/
#form-layer{position: fixed; top: 0; left:0; width: 100%; height: 100%; z-index: 999; display: none;}
#form-layer h3 .form-layer-close{float: right; display: inline-block; cursor: pointer; font-weight: normal; font-size: 3rem;transition: all 0.3s ease-in;}
#form-layer h3 .form-layer-close:hover{transform: rotate(90deg)}
#form-layer .form-layer-body{position: absolute; width: clamp(280px, 50vw, 600px);top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);}
#form-layer h3{padding: 0 15px 10px; border-bottom: 1px solid #eee; margin-bottom: 10px; font-size: 2rem;}
#form-layer .form-group-wrapper{gap:0; padding: 20px 40px; overflow-y: auto}
#form-layer .form-table .form-group{display: flex; flex-direction: column; flex: 1; justify-content: start; align-items: inherit; text-align: inherit; grid-template-columns: none; gap: 5px}
#form-layer .form-table .form-group label{font-weight: 500;}
.form-group-off{text-align: center; display: flex; justify-content: center; cursor: pointer; color: var(--neutral-700); transform: translateY(5px)}
.form-group-off:hover{color: var(--primary-color);}
.form-group-off i{font-size: 2rem; line-height: 14px; display: inline-block;}
.form-group-off span{font-size: 1.1rem; line-height: 100%;}
.form-group-hide{display: none}
#form-layer.mask-in{animation: fadeIn 0.3s ease-out forwards;}
@keyframes fadeIn { 0% {background-color: rgba(0,0,0,0);} 100% {background-color: rgba(0,0,0,0.7);} }
#form-layer.mask-in .form-layer-body{animation: flyDown 0.3s ease-out forwards; top: -100%;}
@keyframes flyDown { 0% {top: -100%;} 100% {top: 50%;} }
#form-layer.mask-out{animation: fadeOut 0.3s ease-out forwards;}
@keyframes fadeOut { 0% {background-color: rgba(0,0,0,0.7);} 100% {background-color: rgba(0,0,0,0);} }
#form-layer.mask-out .form-layer-body{animation: flyUp 0.3s ease-out forwards; top: 50%;}
@keyframes flyUp { 0% {top: 50%;} 100% {top: -100%;} }
/*news*/
.news-menu.category-menu{background: #fff;}
.news-body{padding: 50px 0;background:linear-gradient(to bottom, rgba(255,255,255,1),var(--neutral-100));}
.news-wrapper{display: grid; grid-template-columns: 2fr minmax(280px, 420px);gap: 32px}
.hot-news{position: relative; border-radius: 8px; box-shadow: var(--com-card-shadow); overflow: hidden}
.hot-news figure {position: relative;width: 100%;aspect-ratio: 16 / 9;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.hot-news figure img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.5s ease;}
.hot-news figure:hover img {transform: scale(1.1);}
.hot-news-text{position: absolute; z-index: 1; width: 100%; padding: 20px; left: 0; bottom: 0; color: rgba(255,255,255,.9)}
.hot-news-text h4 a{font-size: 3rem; color: #fff; line-height: 100%;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);transition: all 0.3s ease-in;}
.hot-news-text h4 a:hover{text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);}
.hot-news-text p{line-height: 120%; margin-top: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);}
.news-date span{font-size: 1.2rem; margin-right: 5px;}
.news-date span i{font-size: 1.2rem;margin-right: 3px;}
.news-list{margin-top: 30px; display: flex; flex-direction: column; gap: 32px}
.news-item{display: flex; align-items: stretch; background-color: #fff; gap: 15px; border-radius: 8px; box-shadow: var(--com-card-shadow); overflow: hidden;transition: all 0.3s ease-in;}
.news-item:hover{box-shadow: var(--list-hover-shadow); transform: translateY(-3px)}
.news-item-image {position: relative;flex: 0 0 auto; max-width: 320px;min-width: 280px; overflow: hidden;}
.news-item-image figure {position: relative; margin: 0;width: 100%; height: 100%;}
.news-item-image img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;display: block; transition: all 0.3s ease-in;}
.news-item-image img:hover{transform: scale(1.1);}
.news-item-content {flex: 2;padding: 16px;}
.news-item-content h4 {margin-bottom: 15px}
.news-item-content h4 a{font-size: 2.2rem; line-height: 100%;}
.news-item-content p,.news-sidebar-item p{color: var(--neutral-700); line-height: 110%; font-size: 1.5rem;}
.news-item-footer{display: flex;}
.news-item-more{margin-left: auto;}
.news-sidebar-wrapper{display: grid; border-radius: 8px; box-shadow: var(--com-card-shadow); margin-bottom: 30px; overflow: hidden}
.news-sidebar-title{display: flex; align-items: stretch; gap: 5px; padding: 10px 20px; border-bottom: 1px solid var(--neutral-200); background-color: #fff;}
.news-sidebar-title i{color: var(--primary-color); font-size: 2rem; margin-top: 6px;}
.news-sidebar-title h3{font-size: 2.4rem; font-weight: 700;}
.news-sidebar-list {display: grid;}
.news-sidebar-item{border-bottom: 1px solid var(--neutral-200); background-color: #fff; padding: 20px 20px 10px;transition: all 0.2s ease-in;}
.news-sidebar-item:hover{background-color: var(--neutral-100)}
.news-sidebar-pic{border-radius: 8px; margin-bottom: 10px; overflow: hidden;}
.news-sidebar-pic img{display: block; transition: all 0.3s ease-in;}
.news-sidebar-pic:hover img{transform: scale(1.1);}
.news-sidebar-item h5{font-size: 1.8rem; line-height: 120%; margin-bottom: 10px;}
.tags-list{background-color: #fff; padding: 20px;}
.tags-list span{display: inline-block; margin: 3px 0;}
.tags-list span a{padding: 3px 10px; background-color: var(--neutral-100); border-radius: 20px; font-size: 1.4rem;transition: all 0.2s ease-in;}
.tags-list span a:hover{background-color: var(--primary-color); color: #fff;}

.header-menu{display: flex; gap: 10px}
.header-menu-item{background-color: rgba(255,255,255,.7); border-radius: 8px; box-shadow: var(--list-card-shadow); transition: all 0.3s ease-in;}
.header-menu-item:hover{background-color: var(--brand-color); transform: translateY(-2px)}
.header-menu-item.active{background-color: var(--brand-color)}
.header-menu-item a{color: var(--neutral-900);padding: 10px 20px; display: block; font-weight: 600;}
.header-menu-item:hover a{color: var(--footer-bg);}
.news-read{padding: 50px 0;background:linear-gradient(to bottom, rgba(255,255,255,1),var(--neutral-100));}
.news-card{box-shadow: var(--com-card-shadow); border-radius: 8px; background-color: #fff; margin-bottom: 30px;}
.news-read-wrapper{display: grid; grid-template-columns: 2fr minmax(220px, 320px);gap: 32px}
.news-read-main h1{font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1.3; padding-bottom: 15px; border-bottom: 1px solid var(--neutral-200); color: var(--blue-color)}
.news-read-main article{padding: 20px;}
.article-text{margin: 20px 0;}
.article-text h2{font-size: clamp(2rem, 3.2vw, 2.4rem); margin-bottom: 10px; color: var(--blue-color)}
.article-text h3{font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: 10px; color: var(--blue-color)}
.article-text ul{margin: 10px 0;}
/*solutions*/
.solutions-body{padding: 50px 0; background:linear-gradient(to bottom, rgba(255,255,255,1),var(--neutral-100));}
.solutions-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px;}
.solutions-card {background-color: #FFFFFF;border-radius: 12px;overflow: hidden;box-shadow: var(--card-shadow);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%;}
.solutions-card:hover {transform: translateY(-8px);box-shadow: var(--card-hover-shadow);}
.solutions-image {position: relative;height: 220px;overflow: hidden;}
.solutions-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.solutions-card:hover .solutions-image img {transform: scale(1.1);}
.image-overlay {position: absolute;bottom: 0;left: 0;right: 0;height: 50%;background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);}
.solutions-badge {position: absolute;top: 16px;left: 16px;background-color: var(--primary-color);color: white;font-size: 12px;font-weight: 600;padding: 4px 12px;border-radius: 20px;}
.solutions-content{padding: 20px;}
.solutions-title{font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 130%; margin: 10px 0;}
.solutions-title a{color: var(--blue-color);transition: transform 0.5s ease;}
.solutions-title a:hover{color: var(--primary-color)}
.solutions-description{color: var(--neutral-700);line-height: 140%; margin-bottom: 10px;}
.solutions-btn a{color: var(--blue-color); font-weight: 600;transition: transform 0.5s ease;}
.solutions-btn a:hover{color: var(--primary-color);}
.news-sidebar-industry{padding: 20px; display: grid;}
.news-sidebar-industry ul{display: grid; gap: 20px}
.news-sidebar-industry ul li{position: relative; background-color: var(--neutral-100); border-radius: 5px; padding-left: 3rem; overflow: hidden}
.news-sidebar-industry ul li:after{position: absolute; top: 12px; left: 10px; width: 2.2rem; height: 2.2rem; line-height: 2.2rem; color: #fff; text-align: center; border-radius: 50%; background-color: var(--neutral-300); z-index: 1; font-family: "iconfont",sans-serif; content: "\e610";}
.news-sidebar-industry ul li a{padding: 10px; font-weight: 500; display: block}

/*quality*/
.quality-philosophy{padding: 80px 0; background:linear-gradient(to bottom, rgba(255,255,255,1),var(--neutral-100));}
.quality-stat{display: grid; grid-template-columns: repeat(4, 1fr);gap: 30px; margin-bottom: 50px}
.quality-stat-item{text-align: center; padding: 16px; background-color: var(--neutral-100); border-radius: 8px;}
.quality-stat-item .stat-number{margin-bottom: 5px; color: var(--blue-color)}
.quality-stat-item .stat-number.active{color: #27ae60}
.quality-stat-item p{color: var(--neutral-700)}
.quality-process{padding: 50px 0;}
.process-content{position: relative; margin: 50px 0;}
.process-item-line{position: absolute; height: 100%; width: 4px; left: 50%; top: 0; transform: translateX(-50%); background-color: rgba(61, 129, 231, 0.2)}
.process-item{position: relative; margin-bottom: 50px;}
.process-item-circle{position: absolute; left: 50%; top: 50%; z-index: 1; background-color: var(--blue-color); color: #fff; font-size: 2rem; transform: translateX(-50%) translateY(-50%); width: 5rem; height: 5rem; line-height: 5rem; border-radius: 50%; text-align: center;}
.process-item-grid{display: grid; grid-template-columns: repeat(2, 1fr);gap: 50px; align-items: stretch}
.process-item-pic{display: grid; justify-content: center; align-items: center;}
.process-item-pic figure{max-width: 460px; max-height: 300px; border-radius: 12px; overflow: hidden}
.process-item-pic img{width: 100%; height: 100%; object-fit: cover;}
.process-item-text{padding-left: 50px; display: grid; align-items: center;}
.process-item-text div > span{background-color: rgba(61, 129, 231, 0.3); padding: 3px 15px; border-radius: 20px; font-size: 1.3rem; color: var(--blue-color)}
.process-item-text h3{font-size: 2.4rem; font-weight: 600; margin: 10px 0;}
.process-item-text p{color: var(--neutral-700); font-weight: 400;}
.process-item-text ul li span{font-weight: 700; font-size: 2rem; padding-right: 5px;}
.process-item:nth-child(1) .process-item-pic,.process-item:nth-child(3) .process-item-pic{order: 1}
.process-item:nth-child(1) .process-item-text,.process-item:nth-child(3) .process-item-text{text-align: right; padding-left: 0; padding-right: 50px}
.testing{padding: 80px 0; background-color: var(--neutral-100)}
.quality-metrics{padding: 80px 0;}
.quality-metrics-grid{display: grid; grid-template-columns: repeat(2, 1fr);gap: 50px; align-items: stretch}
.quality-metrics-item h3{margin-bottom: 20px; font-size: 2.2rem; font-weight: 600}
.qualityTrendChart{min-height: 400px;}
.quality-metrics-item ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 130px));gap: 20px }
.quality-metrics-item ul li{box-shadow: var(--com-card-shadow); border-radius: 12px;transition: all 0.3s ease-in;}
.quality-metrics-item ul li:hover{box-shadow: var(--list-hover-shadow); transform: translateY(-5px)}
.quality-metrics-item ul li img{padding: 20px;}
.quality-solutions{padding: 80px 0; background-color: var(--neutral-100)}
.quality-solutions-header{margin-bottom: 50px; max-width: 700px}
.quality-solutions-header h2{font-size: 3.2rem; margin-bottom: 20px; font-weight: 700}
.quality-solutions-header p{color: var(--neutral-700)}
.quality-solutions-title{font-size: 1.3rem; color: var(--neutral-700)}
.quality-solutions-title i{font-size: 1.2rem;}
.quality-solutions-list h3{font-size: 2.2rem; margin: 10px 0;}
.projection{margin-top: 50px;}
.projection h3{font-size: 2.2rem; text-align: center; margin-bottom: 30px}
.marketGrowthChart{min-height: 300px;}
.our-partner{padding: 80px 0}
.our-partner-grid{margin-top: 50px; display: grid; grid-template-columns: repeat(2, 1fr);gap: 50px; align-items: center;}
.our-partner-item{display: grid; grid-template-columns: 40px 1fr; gap: 32px; margin-bottom: 20px;}
.our-partner-icon{width: 5rem; height: 5rem; line-height: 5rem; background-color: var(--neutral-200); border-radius: 50%; text-align: center}
.our-partner-icon i{font-size: 2.2rem; color: var(--blue-color)}
.our-partner-text h3{font-size: 2.2rem; color: var(--blue-color); font-weight: 600}
.our-partner-text p{color: var(--neutral-700)}
.our-partner-pic figure{height: 100%; border-radius: 12px; overflow: hidden}
.our-partner-pic figure img{width: 100%; height: 100%; object-fit: cover; display: block}
.partnership-header{background: var(--footer-bg) url('../images/partnership-bg.jpg') no-repeat center fixed;}
/*faq*/
.faq-head{background: var(--blue-color); height: 60vh; max-height: 550px;}
.faq-search{margin-top: 20px;}
.faq-search,.faq-form{position: relative; width: 100%;}
.faq-form input{width: 100%; padding: 16px; border-radius: 32px; font-size: 1.6rem; color:#fff;  background-color: rgba(255,255,255,.05); outline: 2px; border: 1px solid rgba(255,255,255,.25);transition: all 0.3s ease;}
.faq-form input:focus{outline: 2px solid rgba(77,255,243,1); background-color: rgba(0,48,89,.3);}
.faq-form input::placeholder {color: var(--neutral-300);opacity: 1;}
.faq-form-btn{position: absolute; right: 8px; top: 5px;  width: 4rem; height: 4rem; line-height: 4rem; text-align: center; font-size: 2rem; font-weight: 700; cursor: pointer; border-radius: 50%; outline: 0; border: 0; background-color: var(--brand-color);transition: all 0.3s ease-in;}
.faq-form-btn:hover{background-color: #fff;}
.faq-form input:focus::-webkit-input-placeholder {color: transparent;}
.faq-form input:focus::-moz-placeholder {color: transparent;}
.faq-form input:focus:-ms-input-placeholder {color: transparent;}
.faq-main{padding: 50px 0;background:linear-gradient(to bottom, rgba(255,255,255,1),var(--neutral-100));}
.faq-grid{display: grid; flex-direction: column; gap: 32px;}
.faq-item{border-radius: 12px; box-shadow: var(--cat-card-shadow);  padding: 20px; transition: all 0.3s ease-in;}
.faq-item:hover{box-shadow: var(--list-hover-shadow); transform: translateY(-5px)}
.faq-title{display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; cursor: pointer;}
.faq-title h3{font-weight: 600; font-size: 2.2rem;}
.faq-title h3 i{font-size: 2rem; margin-right: 5px}
.faq-title span{width: 2rem; height: 2rem; background-color: var(--neutral-200); line-height: 140%; border-radius: 50%; align-items: end; transition: all 0.3s ease-in;}
.faq-title i{font-size: 1.2em; color: var(--blue-color); transition: all 0.3s ease-in;}
.faq-title:hover span{background-color: var(--blue-color); }
.faq-title:hover span i{color: #fff;}
.faq-content{color: var(--neutral-700); display: none; margin-top: 10px; padding-top: 15px; border-top: 1px solid var(--neutral-200);}
.faq-content ul{list-style: inside disc; margin: 10px 0;}
.faq-title.active span{transform: rotate(180deg)}
.faq-item:first-child .faq-content,.faq-content.active{display: block}
/*chat*/
#liveChat{position: fixed; right: 20px; bottom: 40px; z-index: 666;}
.openchat{width: 5rem; height: 5rem; cursor: pointer; text-align: center; line-height: 5rem; border-radius: 50%; background: linear-gradient(to right, #ff8a30, #f1a501); display: inline-block;}
.openchat i{font-size: 2.4rem; color: #fff;}
.openchat:before,.openchat i::after {content: '';position: absolute;z-index: -1;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);background:linear-gradient(to right,#ff8a30, #f1a501);transform-origin: center;border-radius: 50%;opacity: 0.5;transition: all 0.3s ease;will-change: transform, opacity;}
.openchat i::before {width: 100%;height: 100%;animation: expandRing 2s ease-in-out infinite;}
.openchat i::after {width: 90%;height: 90%;animation: expandRing 2s ease-in-out infinite 0.5s;}
@keyframes expandRing { 0%{width: 100%;height: 100%;opacity: 0.5;} 100% {width: 140%;height: 140%;opacity: 0;}}
.almLayer-responsive .almLayer-title{position: relative; padding-left: 3rem;}
.almLayer-responsive .almLayer-title::before{position: absolute; left: 0; font-family: "iconfont", sans-serif; font-size: 2rem; content: '\e6b7'; width: 3rem; height: 3rem;}