/*page*/
/*Common header start*/
.page-banner{position: relative; height: 460px; display: flex;align-items: center;justify-content: center; overflow: hidden}
.page-banner-mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;background: linear-gradient(135deg, #00236a 0%, rgba(6, 52, 120, 0.2) 100%);}
.page-banner-content{position: relative;z-index: 1; max-width: 768px; text-align: center;}
.page-banner-content h2{font-size:clamp(3.2rem, 4.8vw, 4.8rem); font-weight: 700; color: #fff; margin: 40px 0 20px;}
.page-banner-content p{font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 30px; color: rgba(255,255,255,.7);}

/*about*/
.about-company{margin: 50px 0 80px;}
.company-overview{align-items: center;}
.company-image{position: relative; justify-self: end;order: 2;}
.company-image figure{border-radius: 12px;box-shadow: var(--shadow-md);transition: all 0.3s ease;display: flex; overflow: hidden}
.company-image figure img{display: block;transition: all 0.5s ease;}
.company-image figure:hover {box-shadow: var(--shadow-lg);}
.company-image figure:hover img{transform: scale(1.1)}
.company-image .company-since{position: absolute; padding: 15px; box-shadow: var(--shadow); border-radius: 12px; background-color: rgba(255,255,255,1); z-index: 1; bottom:-20px;left: -20px; display: grid; grid-template-columns: 40px 1fr; animation: sinceSlide 3s ease-in-out infinite alternate;}
.company-image .company-since h6{font-weight: 600; font-size: 1.6rem;}
.company-image .company-since  i{font-size: 3.2rem; color: var(--primary-color);}
@keyframes sinceSlide { 0%, 100% {transform: translateX(0);} 50% {transform: translateX(10px);} }
.company-content{line-height: 160%; font-size: 1.8rem;}
.company-content h1{font-size: 3.6rem; font-weight: 700; margin-bottom: 30px;}
.about-strengths,.about-team{margin: 80px auto; }
.strengths-item{padding: 2.4rem;}
.strengths-item h6{font-size: 2.2rem; font-weight: 700; margin-bottom: 12px;}
.strengths-icon i{font-size: 2.4rem; width: 4.8rem; height: 4.8rem; line-height: 4.8rem; display: inline-block; border-radius: 8px; text-align: center; background-color: var(--bg-light); color: var(--primary-color); margin-bottom: 12px;}
.strengths-text p{position: relative; padding-left: 25px;}
.strengths-text p::before{content: "\e62f"; font-family: "iconfont";  position: absolute; left: 0; color: var(--primary-color);}
.about-history,.about-production,.testimonials{margin: 0 auto;background-color: var(--bg-light); padding: 50px 0 80px}
.history-container{position: relative; max-width: 896px; margin: 0 auto; display: grid;}
.timeline-line{position: absolute; top: 0; left: 20px; width: 2px; height: 100%; background-color: var(--bg-secondary);}
.history-content{display: grid;margin-left: 80px; align-items: flex-start; gap: 20px;}
.history-item-dot{position: absolute; left: 10px; width: 20px; height: 20px; line-height: 20px; box-shadow: var(--shadow-md); text-align:center; border-radius: 50%; background-color: #fff;}
.history-item-dot span{width: 12px; height: 12px; border-radius: 50%; background-color: var(--bg-dark); display: inline-block;}
.history-item:hover {transform: inherit;}
.history-item{padding: 24px;}
.history-item:last-of-type{border-left: 3px solid var(--color-accent);}
.history-year h6{position: relative; cursor: pointer; padding: 0 15px; font-size: 1.4rem; font-weight: 600; color: var(--text-dark); border-radius: 10px; background-color: var(--bg-light); display: inline-block;}
.history-summary{margin-top: 20px;}
.history-title{font-weight: 700; font-size: 2.2rem; line-height: 120%; margin-bottom: 20px; color: #333;}
.team-item{padding: 30px 24px; background-color: var(--bg-light); box-shadow: var(--shadow-sm);}
.team-item.light-card i{font-size: 3.2rem; width: 8rem; height: 8rem; line-height: 8rem; font-weight: 500; color: var(--bg-dark); margin-bottom: 12px;}
.team-text h4{font-size: 2.2rem; font-weight: 700; margin: 12px 0;}
.team-text .team-subtitle{font-size: 1.6rem; font-weight: 600; margin-bottom: 12px;}

.production-image {position: relative;height: 220px;overflow: hidden;}
.production-image img {width: 100%;height: 100%;object-fit: cover;}
.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: grid; grid-template-columns: 5rem 1fr; margin-bottom: 20px;}
.production-title i{background-color: rgba(15,82,186,0.1); color: var(--bg-dark); border-radius: 50%; width: 4rem; height: 4rem; line-height: 4rem; margin-right: 15px; text-align: center; display: inline-block}
.production-description{color: var(--text-secondary)}
.about-partners{padding: 50px 0}
.partners-side{justify-content: center; align-items: center; color: var(--text-secondary)}
.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{margin-top: 20px;}
.testimonial-item{padding: 24px;}
.testimonial-star{color: var(--color-warning);}
.testimonial-description{margin: 20px 0; font-style: italic;}
.testimonial-content-bottom{display: grid; grid-template-columns: 48px 1fr; gap: 20px;}
.testimonial-image{width: 48px; height: 48px; border-radius: 50%; overflow: hidden;}
.testimonial-image img{width: 100%; height: 100%; object-fit: cover;}
.testimonial-title h3{font-size: 1.8rem;}
.testimonial-title p{font-size: 1.4rem; color: var(--text-secondary);}
/*contact*/
.card-contact{margin: 80px auto; 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(--bg-dark); font-weight: 700;}
.contact-us .contact-title{text-transform: uppercase; color: var(--primary-color)}
.contact-hr-line{width: 80px; height: 4px; background-color: var(--border-primary);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(--bg-dark); 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(--bg-dark);}
.follow-us .social-links a:hover{background-color: var(--bg-primary); color:var(--text-primary);}
.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(--shadow);transition: all 0.3s ease; overflow: hidden}
.contact-msg .form-header{font-size: clamp(2rem, 3.6vw, 2.4rem); color: var(--bg-dark); 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(--border-primary); 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(--bg-dark); color: var(--text-primary); padding: 1.5rem 0; border-radius: 8px;transition: all 0.3s ease;}
.contact-submit:hover{background-color: var(--bg-primary);}

/*product*/
.goods-body{margin: 50px auto;}
.category-card{display: flex; flex-direction: column; background-color: var(--bg-light);border-radius: 12px; padding: 20px; overflow: hidden;box-shadow: var(--cat-card-shadow);}
.category-title{padding-bottom: 10px; border-bottom: 1px solid var(--border-secondary)}
.category-title h3{font-size: 2rem; font-weight: 700;}
#subMenu{display: none}
.category-nav-item{border-radius: 10px; border-left: 3px solid transparent; background-color: rgba(10,61,98,0.05); padding: 0 10px; margin-bottom: 10px;transition: transform 0.3s ease;}
.category-nav-item.active{border-left: 3px solid var(--bg-primary);}
.category-nav{margin-top: 10px;}
.category-nav-title{padding: 1.2rem 0;display: grid; grid-template-columns: 1fr minmax(10px, 20px);gap: 10px;justify-content: center;}
.category-nav-title a{color: var(--text-color);}
.category-nav-title span{text-align: right; cursor: pointer}
.category-level{display: none}
.category-level.active{display: block}
.category-level li{padding: 1rem 0; 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: #666;}
.category-level ul li{font-size: 1.4rem;}
.arrow.rotate {transform: rotate(90deg);transition: transform 0.3s ease;}
.goods-header{margin-bottom: 30px;}
.goods-header h2{font-size: 2.4rem; font-weight: 700; color: var(--bg-dark);}
.goods-header .goods-count{text-align: right; font-size: 1.4rem; color: var(--text-secondary);}
.product-item .grid-image{height: 300px;}
.product-badge{position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 5px; font-size: 1.2rem; font-weight: 600; background-color: var(--color-error); color: #fff;}
.product-content{padding: 24px;}
.product-title{font-size: 2rem; line-height: 120%; font-weight: 700; color: var(--bg-dark); margin-bottom: 10px; word-break: break-all;}
.product-description{line-height: 150%; color: var(--text-secondary); margin-bottom: 20px;}
.selecting-product{padding: 50px 0; background-color: var(--color-accent); text-align: center;}
.selecting-product-content{color: #fff;}
.selecting-product-content h3{font-size: clamp(2.4rem,3.6vw,3.6rem); font-weight: 700; margin-bottom: 20px;}
.selecting-product-btn a{display: inline-block; margin-top: 20px; padding: 1.5rem 2.5rem; border: 1px solid rgba(0,0,0,.1); background-color: #fff; color: var(--primary-color); font-weight: 600; border-radius: 8px;transition: all 0.3s ease;}
/* 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: var(--bg-light); border-radius: 6px; text-decoration: none;transition: background-color .3s;border: 1px solid var(--border-primary);margin: 0 2px;}
.pagination a:hover:not(.active) {background-color: var(--color-accent); color: #fff;}
.pagination li.active span {background-color: var(--color-accent);color: white;border: 1px solid var(--bg-primary);}
.pagination li.disabled span {color: var(--bg-secondary);cursor: not-allowed;pointer-events: none;}
.noData{text-align: center; color: var(--text-secondary);}
/*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;}
/*product read*/
.page-location-main{padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,.05);}
.page-location {color: var(--text-secondary);}
.page-location a{color: var(--primary-color); font-size: 1.3rem; font-weight: normal}
.page-location a:hover{color: var(--text-dark)}
.page-banner .page-location{color: var(--text-muted);}
.page-banner .page-location a{color: var(--text-primary); font-size: 1.3rem; font-weight: normal}
.page-banner .page-location a:hover{color: var(--text-muted)}
.goods-read{padding: 50px 0; background:linear-gradient(to bottom, rgba(255,255,255,1),var(--bg-light));}
.goods-read-main{display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 50px;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; aspect-ratio: 1 / 1; justify-content: center; align-items: center; background-color: var(--bg-gray)}
.goods-image-show .slider-item video{width: 100%;}
.goods-image-show .slider-indicators{bottom: 110px}
.goods-image-show .slider-thumbnails{margin: 15px 0; display: block; overflow-x: auto; width: 100%; justify-content: start; scrollbar-width: none; white-space: nowrap; }
.goods-image-show .slider-thumbnail{display: inline-block; border-radius: 8px;border-color: var(--bg-light); 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(--text-secondary); margin-bottom: 10px;}
.goods-operation{box-shadow: var(--shadow-md); 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(--text-secondary);}
.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(--color-warning)}
.goods-read-certified i{color: #009700}
.goods-operation button{border: 1px solid var(--bg-primary); cursor: pointer; background-color: var(--bg-primary); 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: 10px; background-color: var(--light-color); border-radius: 8px;}
.goods-operation-contact a:hover{background-color: var(--bg-light); color: var(--primary-color)}
.goods-operation-down a{width: 100%; border: 1px solid var(--bg-primary); background-color: #fff; color: var(--primary-color)}
.goods-operation a:hover,.goods-operation button:hover{background-color: var(--bg-dark);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(--shadow-md); 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(--primary-color); text-align: center; background-color: var(--bg-light)}
.goods-support-item p{color: var(--text-secondary);}
.goods-features{padding: 50px 0;}
.goods-features-item{display: flex; flex: 1; flex-direction: column; padding: 20px; text-align: inherit;}
.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(--text-secondary); line-height: 120%; flex-grow:1; }
.goods-desc{padding: 50px 0; background: var(--bg-light);}
.goods-desc-wrapper{background-color: #fff; border-radius: 12px; box-shadow: var(--shadow-md);}
.goods-desc-header{display: flex; align-items: center; border-bottom: 1px solid var(--border-secondary); margin-bottom: 20px;}
.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: #444; 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{width: 100%;border-collapse: collapse;}
table tr{border: 1px solid var(--border-table);}
table td,table th{border-left: 1px solid var(--border-table); text-align: center; vertical-align: middle; padding: 3px;}
table th{background-color: var(--border-table)}
.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(--bg-light); 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(--text-link)}
.goods-quality-item{padding: 20px; border-radius: 8px; background-color: var(--bg-light); margin-top: 15px;}
.goods-quality-slider{margin-top: 10px;}
.goods-quality-slide-text{color: var(--text-secondary); 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(--bg-secondary); 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(--text-secondary);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(--bg-secondary);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(--border-primary);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(--primary-color); color: #fff;transition: all 0.3s ease;}
.comment-submit-btn:hover{background-color: var(--bg-dark)}
.recs-goods{padding: 50px 0;}
.recs-goods-header{color: var(--text-secondary); margin-bottom: 30px; border-bottom: 1px solid var(--bg-light)}
.recs-goods-header h3{font-size: clamp(2rem, 3vw, 2.8rem); color: var(--primary-color);}
/*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(--text-secondary); 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%;} }

/*solutions*/
.solutions-body{padding: 50px 0; background:linear-gradient(to bottom, rgba(255,255,255,1),var(--bg-light));}
.solutions-image {position: relative;height: 240px;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(--text-secondary);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(--bg-light); 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}
/*faq*/
.faq-banner{height: 60vh; max-height: 550px;}
.head-search{display: grid; margin: 0 auto; max-width: 700px; flex-direction: column; color: #fff; text-align: center;}
.head-search h2{font-size: clamp(3rem, 3.2vw, 4.2rem);}
.head-search p{font-size: clamp(1.6rem, 2vw, 2rem); line-height: 140%; margin-bottom: 20px; color: var(--text-muted);}
.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,.3); outline: 2px; border: 1px solid rgba(255,255,255,.25);transition: all 0.3s ease;}
.faq-form input:focus{outline: 2px solid var(--bg-dark); color: #000; background-color: rgba(255,255,255,.8);}
.faq-form input::placeholder {color: var(--text-muted);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(--bg-light-blue);transition: all 0.3s ease-in;}
.faq-form-btn:hover{background-color: var(--bg-primary); 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(--bg-light));}
.faq-grid{display: grid; flex-direction: column; gap: 32px;}
.faq-item{border-radius: 12px; box-shadow: var(--shadow-sm);  padding: 20px; transition: all 0.3s ease-in;}
.faq-item:hover{box-shadow: var(--shadow-md); transform: translateY(-5px)}
.faq-title{display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; cursor: pointer;}
.faq-title i{font-size: 1.2em; transition: all 0.3s ease-in;}
.faq-title h3{font-weight: 600; font-size: 2.2rem;}
.faq-title h3 i{font-size: 2rem; margin-right: 5px; color: var(--color-error);}
.faq-title span{width: 2rem; height: 2rem; background-color: var(--bg-secondary); line-height: 140%; border-radius: 50%; align-items: end; transition: all 0.3s ease-in;}
.faq-title:hover span{background-color: var(--primary-color); }
.faq-title:hover span i{color: #fff;}
.faq-content{color: var(--text-secondary); display: none; margin-top: 10px; padding-top: 15px; border-top: 1px solid var(--border-secondary);}
.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}

/*news*/
.news-menu.category-menu{background: #fff;}
.news-body{padding: 50px 0;background:linear-gradient(to bottom, rgba(255,255,255,1),var(--bg-light));}
.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(--text-secondary); line-height: 110%; font-size: 1.5rem;}
.news-item-footer{display: flex; margin-top: 15px;}
.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(--border-secondary); 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(--border-secondary); background-color: #fff; padding: 20px 20px 10px;transition: all 0.2s ease-in;}
.news-sidebar-item:hover{background-color: var(--bg-light)}
.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(--bg-light); 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(--bg-light-blue); transform: translateY(-2px)}
.header-menu-item.active{background-color: var(--bg-light-blue)}
.header-menu-item a{color: #333;padding: 10px 20px; display: block; font-weight: 600;}
.header-menu-item:hover a{color: var(--bg-dark);}

.news-read{padding: 50px 0;background:linear-gradient(to bottom, rgba(255,255,255,1),var(--bg-light));}
.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: 120%; padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px solid var(--border-secondary); color: var(--primary-color)}
.news-read-main article{padding: 20px;}
.article-text{margin: 20px 0;}
.article-text h2,.article-text h3{font-size: clamp(2.2rem, 3.2vw, 2.6rem); margin-bottom: 10px; color: var(--primary-color); font-weight: 600;}
.article-text h3{font-size: clamp(2rem, 3vw, 2.4rem);}
.article-text ul,.article-text ol{margin: 10px 0; list-style-position: outside; padding-left: 30px;}
.article-text ul li,.article-text ol li{line-height: 160%; margin-bottom: 5px; list-style: disc;}
.article-text ol li{list-style: decimal;}

/*quality*/
.quality-commitment{margin: 80px 0;}
.quality-process{padding: 50px 0; background-color: var(--bg-light);}
.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(--bg-primary); 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: 600px; 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(--text-secondary); 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{margin: 80px 0;}
.testing-content{padding: 24px;}
.testing-content h3{font-size: 2.4rem; font-weight: 600; margin-bottom: 10px;}
.testing-content p{color: var(--text-secondary); font-weight: 400;}
.testing-tags{margin-top: 20px;}
.testing-tags span{display: inline-block; margin: 3px 0; font-size: 1.2rem; background-color: var(--bg-light); padding: 3px 10px; border-radius: 20px; color: var(--text-dark)}
.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-methodology-item{display: grid; grid-template-columns: 50px 1fr; gap: 20px; align-items: center; margin: 10px 0;}
.quality-methodology-icon{width: 50px; height: 50px; line-height: 50px; background-color: var(--bg-light); border-radius: 50%; text-align: center}
.quality-methodology-icon i{font-size: 2.2rem; color: var(--primary-color)}
.quality-methodology-content h5{font-size: 1.8rem;}
.quality-methodology-content p{color: var(--text-secondary)}
.quality-solutions{padding: 80px 0; background-color: var(--bg-light)}
.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(--text-secondary)}
.quality-solutions-title{font-size: 1.3rem; color: var(--text-secondary)}
.quality-solutions-title i{font-size: 1.2rem;}
.quality-solutions-list h3{font-size: 2.2rem; margin: 10px 0;}