/*=========== =======================RESPONSIVE LAYOUTS===============================================*/
@media (max-width: 1440px) {
    .nav-list > li > a{padding: 0 12px;}
    .slide-content{left: 35%}
}
@media (max-width: 1200px) {
    header{background-color: rgba(5,20,40,0)}
    header.maskLayer-in{background-color: rgba(5,20,40,1); overflow-y: auto}
    header.header-visible{background-color: var(--footer-bg)}
    .nav-container{min-width: calc(100vw - 10px);}
    .nav-logo{flex: none; margin-right: auto;}
    .nav-logo h1,.nav-logo a{display: inline-block}
    .nav-logo-img{height: 42px; margin-top: 0}
    .nav-btn-group{margin-left: auto;}
    #m-nav{display:inline-block;width:30px; height:30px; text-align:center; cursor:pointer;}
    #m-nav span{position:relative; width:24px; height:30px; display:inline-block;}
    #m-nav > span{margin-top:6px}
    #m-nav span span{position:absolute;height:1.5px;z-index:1; left:0; top:0; background:#fff; display:block; overflow:hidden}
    #m-nav span.menuicon-middle{z-index:2;top:8px;}
    #m-nav span.menuicon-bottom{z-index:3;top:16px;}
    
    .nav-menu{flex: none; display: none; position: absolute; top: 98px; left: 0; margin: 0; width: 100%;}
    .nav-list{ flex: none; flex-direction: column; padding:0; margin: 0 auto; width: 90vw;}
    .nav-list > li{margin: 0; border-bottom: 1px solid rgba(255,255,255,0.3); height: auto; line-height: initial; display:block;transition: transform 0.3s ease;}
    .nav-list > li a{display: inline-block; width: 90%; padding: 15px 0; color: #fff;}
    .nav-list > li:hover > a{color:var(--accent);}
    .nav-has-children > a:before,.nav-category-header,.nav-child-summary{display: none}
    .nav-has-children{position: relative}
    .nav-has-children:before{position: absolute; top: 16px; right: 0; z-index: 1; content: "\e610"; padding-left: 6px; font-family: "iconfont",sans-serif; font-weight:500; color: rgba(255,255,255,.7); font-size: 1.6rem; transform: rotate(0deg); transition: transform 0.3s ease;}
    .nav-has-children:hover:before{transform: rotate(90deg);color:var(--accent);}
    .nav-list li.nav-has-children:hover .nav-dropdown-menu{padding: 10px 0;}
    .nav-child,.nav-children{width: 100%;border-bottom: 1px solid rgba(255,255,255,0.3); margin-left: 0}
    .nav-child a,.nav-child:last-child,.nav-children:last-child{border: 0;}
    .nav-child a:hover{color:var(--accent);}
    .nav-dropdown-wrap{max-width: 100%; margin: 0 30px}
    .nav-dropdown-menu{position: relative;border: 0;background:none}

    .language-dropdown-toggle.nav-btn{border-radius: 0; margin-right: 0; margin-left: 3px; height: 24px;}
    .nav-search{display: none; position: absolute; top: 58px; left: 0; width: 100%;}
    .nav-search-wrap{display: block; opacity: 1; margin: 0 auto; width: 90vw; left: 0; right: 0;}
    .nav-search-btn{display: none;}
    .search-form{justify-content:flex-start; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .nav-search-close{order: 2;}
    .search-form input{order: 1; flex: 1; border: 0; border-radius: initial; background: none; color: #fff;}
    .search-form input:focus{outline: none; color: #fff;}
    .nav-search-submit{background: none; width: 3.6rem;}
    .nav-search-submit i{font-size: 2.2rem;}
    .nav-search-close{display: block;}
    .nav-close{display: none;}
    .menu-fly-in{display: flex}
    .menu-fly-in ul > li,#search-form.menu-fly-in{opacity: 0;animation: flyIn 0.5s ease-out forwards;}
    @keyframes flyIn { 0% {opacity:0;transform:scale(1.1) translateX(100px)} 100% {opacity:1;transform:scale(1) translateX(0)} }
    .menu-fly-in li:nth-child(1){animation-delay:100ms;}
    .menu-fly-in li:nth-child(2){animation-delay:150ms;}
    .menu-fly-in li:nth-child(3){animation-delay:200ms;}
    .menu-fly-in li:nth-child(4){animation-delay:250ms;}
    .menu-fly-in li:nth-child(5){animation-delay:300ms;}
    .menu-fly-in li:nth-child(6){animation-delay:350ms;}
    .menu-fly-in li:nth-child(7){animation-delay:400ms;}
    .menu-fly-in li:nth-child(8){animation-delay:450ms;}
    .menu-fly-in li:nth-child(9){animation-delay:500ms;}
    .search-form.menu-fly-in{animation-delay:50ms;}
    .maskLayer-in{animation:maskIn 0.5s;animation-fill-mode:forwards;}
    @keyframes maskIn { 0% {opacity: 0;height: 0;} 100% {opacity:1;height: 100%;} }
    .maskLayer-out{animation:maskOut 0.3s;}
    @keyframes maskOut { 0% {background-color: rgba(5,20,40,.9); height: 100%;} 100% {background-color: rgba(5,20,40,.7);height: 48px;} }
    .menuicon-in span.menuicon-top,.menuicon-in span.menuicon-bottom,.menuicon-out span.menuicon-top,.menuicon-out span.menuicon-middle,.menuicon-out span.menuicon-bottom {animation:menuInx 1s;animation-fill-mode:forwards;}
    .menuicon-in span.menuicon-middle {animation:menuInm 0.5s;animation-fill-mode:forwards;}
    .menuicon-in span.menuicon-bottom {animation-name:menuIny;}
    .menuicon-out span.menuicon-top {animation-name:menuOutx;}
    .menuicon-out span.menuicon-middle {animation-name:menuOutm;}
    .menuicon-out span.menuicon-bottom {animation-name:menuOuty;}
    @keyframes menuInx { 0% {transform:rotate(0);top:0} 100% {transform:rotate(-45deg);top:8px;opacity:1} }
    @keyframes menuInm { 0% {opacity:1} 100% {opacity:0} }
    @keyframes menuIny { 0% {transform:rotate(0);top:16px} 100% {transform:rotate(45deg);top:8px;opacity:1} }
    @keyframes menuOutx { 0% {transform:rotate(-45deg);top:8px} 100% {transform:rotate(0);top:0} }
    @keyframes menuOutm { 0% {opacity:0} 100% {opacity:1} }
    @keyframes menuOuty { 0% {transform:rotate(45deg);top:8px} 100% {transform:rotate(0);top:16px} }

    .wrapper{max-width: initial; padding: 0 20px;}
    .goods-list .product-image{height: auto}
    .news-wrapper{grid-template-columns: 2fr minmax(220px, 260px);}
    .head-body{padding-top: 40px;}
}
@media (max-width: 980px) {
    .stat-icon,.stat-shadow{width: 96px; height: 96px;}
    .stat-icon i{font-size: 4.8rem}
    .stat-number{font-size: 3.6rem}
    .stat-shadow{left: 40px; top: 40px}
    .products-grid{gap: 20px;}
    .product-image{height: 180px;}
    .product-title{padding-bottom: 0; line-height: 120%;}
    .product-content{padding: 10px;}
    .testimonial-relative{width: 98%;}
    .appArea{padding: 50px 0}
    .appArea-item{display: flex;flex-direction: column;}
    .appArea-imgWrap{height: 320px; margin-bottom: 30px;}
    .appArea-imgWrap,.appArea-info{margin-left: 80px; width: calc(100% - 160px);}
    .manufacturing-item-left{margin-bottom: 30px;}
    .manufacturing-item {grid-template-columns: repeat(1, 1fr);gap: normal; margin: 0 auto; max-width: 600px}
    .brand-section{padding: 30px 0}
    .brand-item-list{gap: 15px}
    .footer{padding: 3rem 20px}
    .footer-content{grid-template-columns: repeat(2, 1fr);gap: 30px}

    .company-overview{grid-template-columns: auto;}
    .company-image{justify-self: start;order: inherit;}
    .company-image figure img{max-height: 360px}
    .beginning-content h3{margin: 10px 0;}
    .beginning-content .beginning-divider{margin: 10px 0;}
    .beginning-content p{margin-bottom: 0}
    .perspectives-item-wrapper{margin: 20px;}
    .card-contact{height: auto; margin: 50px 0;}
    .contact-us,.perspectives-content,.selecting-product-body,.news-read-wrapper{grid-template-columns: repeat(1, 1fr);}
    .selecting-product-btn{text-align: left}
    .goods-list .product-card{grid-template-columns: repeat(1, 1fr);}
    .goods-list .product-image{height: auto; max-height: 320px}
    .goods-desc-content table{display: inline-block;max-width: 100%;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;}
    .news-wrapper{grid-template-columns: 2fr minmax(220px, 300px);}
    .news-item{display: grid}
    .news-item-image{flex: none; max-width: 100%; max-height: 240px;}
    .news-item-image img{position: relative}
    .hot-news figure{aspect-ratio: inherit; width: 100%; height: 420px}
    .goods-suitable {display: grid; grid-template-columns: 220px 1fr; align-items: stretch; gap: 30px}
    .news-sidebar-pic img{height: 100%;object-fit: cover;}
    .quality-metrics-item ul{grid-template-columns: repeat(auto-fill, minmax(80px, 100px)); gap: 10px}
    .quality-metrics-item ul li img{padding: 0}
    .our-partner-grid{grid-template-columns: repeat(1, 1fr);}
    .our-partner-list{order: 1}
    .our-partner-pic{height: 400px;}
    .paginate-grid{justify-content: start;}
}
@media (max-width: 767px) {
    nav{padding: 0 10px}
    .carousel .my-slider,.carousel .slider-item{max-height: 720px;}
    .slide-desc{display: none}
    .slide-content .btn{padding: 8px 25px}
    .company-wrapper{display: grid; grid-template-columns: repeat(2, 1fr);gap: 20px}
    .company-grid{width: 100%;}
    .product-container{padding: 30px 0}
    .products-grid{grid-template-columns: repeat(2, 1fr);gap: 20px}
    .testimonial-relative{width: 100%; padding: 0 30px;}
    .index-newsArea-item,.footer-content{grid-template-columns: repeat(1, 1fr);gap: normal}
    .index-newsArea-list{margin-top: 20px;max-height: none}
    .footer-links li{border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 5px;}
    .newsletter-form{width: 300px;}
    /*以上是首页*/

    .primaryMenu-item{margin-right: 5px}
    .primaryMenu-item a{padding: 10px; font-size: 1.4rem;}
    .about-history{margin: 0; padding: 0 0 50px}
    .history-item{min-width: 100px;}
    .history-year{width: 8rem; height: 8rem; line-height: 8rem;}
    .history-scroll-btn{width: 4rem; height: 4rem; top: 4rem;}
    .company-cert-side{display: grid;grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));}
    .production-card,.beginning-content,.brand-mission-cert,.promise-content,.goods-main,.goods-read-main{grid-template-columns: repeat(1, 1fr);}
    .promise-item:nth-child(1){order: inherit}
    .brand-mission-card p{min-height: auto}
    .about-video{width: 100%}
    .partners-item-image{padding: 0;}
    .core-item{gap: 30px}
    .kst-advantages-grid,.goods-list .product-card{grid-template-columns: repeat(2, 1fr);}
    .goods-list .product-image{height: auto;}
    .goods-read-main{display: grid}
    .goods-image-show{align-items: center; justify-items: center}
    .goods-image-show .my-slider{max-width: 520px; }
    .goods-image-show .slider-item{height: 100vw; max-height: 460px;}
    .news-wrapper{grid-template-columns: repeat(1, 1fr);}
    .header-menu{display: grid; grid-template-columns: repeat(2, 1fr);}
    .header-menu-item{text-align: center}
    .category-title{display: grid; grid-template-columns: 1fr 30px;}
    #subMenu{display: block; border: 0; background-color: var(--blue-color); cursor: pointer; outline: none; color: #fff; width: 30px; height: 30px; border-radius: 5px;transition: all 0.3s ease-in;}
    #subMenu:hover{background-color: var(--footer-bg); }
    .category-nav,.goods-header{display: none}
    .goods-suitable {grid-template-columns: 180px 1fr; gap: 20px}
    .quality-stat{grid-template-columns: repeat(2, 1fr);gap: 20px}
    .quality-metrics-grid{grid-template-columns: repeat(1, 1fr);}
    .process-item{box-shadow: var(--card-shadow); border-radius: 12px; overflow: hidden}
    .process-item-grid{grid-template-columns: repeat(1, 1fr); gap: 30px}
    .process-item-pic figure{max-width: 100%; border-radius: inherit}
    .process-item-line,.process-item-circle{display: none}
    .process-item:nth-child(1) .process-item-text, .process-item:nth-child(3) .process-item-text{text-align: left;padding: 0 20px 20px;}
    .process-item:nth-child(1) .process-item-pic, .process-item:nth-child(3) .process-item-pic{order: inherit}
    .process-item-text{padding: 0 20px 20px;}
    .quality-metrics-item ul {grid-template-columns: repeat(auto-fill, minmax(60px, 90px));}
    .our-partner-pic{height: 320px;}
    .solutions-grid {grid-template-columns: repeat(1, 1fr);gap: 32px;}
    .head-main .brand-header-button{margin-top: 30px}
    .faq-head{max-height: 480px;}
    .faq-title{gap: 10px}
    .faq-title h3{font-size: 2rem; line-height: 120%;}
}
@media (max-width: 576px) {
    .nav-list > li,.nav-search{margin: 0;}
    .nav-dropdown-wrap{margin: 0 20px}
    .slide-content{left: 50%; width: 90vw;}
    .black-name-tab{margin: 0 10px}
    .products-grid{grid-template-columns: repeat(1, 1fr);gap: 20px}
    .product-image{height: 220px;}
    .appArea-imgWrap,.appArea-info{margin-left: 0; width: 100%;}
    .appArea-imgWrap{height: 220px;}
    .appArea-item-wrap.my-slider{padding-bottom: 20px}
    .appArea-item-wrap .slider-indicators{display:flex; bottom: 0; top: auto; left: 50%; transform: translateY(0); width: auto;}
    .appArea-item-wrap .slider-indicator{width: 8px; height: 8px; border-radius: 50%;}
    .testimonial-relative .my-slider{padding: 0}
    .testimonial-relative .slider-prev,.testimonial-relative .slider-next{display: none}
    .brand-item{height: 42px}
    .brand-section{padding: 10px 0;}
    .brand-item-list{gap: 5px}
    .brand-item-list li{padding: 0}
    .intro-button .btn{padding: 8px 25px;}
    .slide-content .btn{padding: 10px 25px;}
    .product-footer .btn{padding: 8px 16px;}
    /*page*/
    .page-head-shape{top: 20%;}
    .history-container{padding: 0 20px 240px}
    .history-summary{margin-top: 5rem;}
    .partners-side,.core-item,.core-item:nth-child(2),.kst-advantages-grid{grid-template-columns: repeat(1, 1fr);}
    .core-item:nth-child(2) .core-item-image{order: inherit}
    .contact-msg{width: 100%;}
    .brand-mission{padding: 5rem 0;}
    .brand-core,.brand-promise{padding: 50px 0}
    .gallery{grid-auto-rows: 260px; gap: 30px; padding: 0}
    .gallery-btn{margin-top: 50px}
    .core-content{gap: 30px}
    .brand-btn{padding: 1.2rem 2rem;}
    .team-header-card{gap: 20px}
    .goods-list .product-card,.form-table .form-group{grid-template-columns: repeat(1, 1fr);}
    .goods-list .product-image,.products-list .product-image{height: auto; max-height: 414px;}
    .goods-desc-header{display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-items: stretch;justify-items: center; overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;}
    .goods-container-tabs{padding: 15px 10px; display: inline-block}
    .article-comments{box-shadow: none}
    .comment-form{margin: 0;}
    .form-group-wrapper,.form-table .form-group{gap: 10px}
    .form-table .form-group{text-align: left}
    .article-comments h2{margin: 0; padding: 0 0 20px}
    .comment{margin: 30px 0;}
    .comment-replies{margin: 10px}
    .news-card .article-comments{padding: 0 20px;}
    .header-menu-item a{padding: 8px 10px; font-size: 1.4rem;}
    .goods-suitable {grid-template-columns: none}
    .quality-header .brand-header-button{display: grid; gap: 20px; justify-content: center}
    .quality-metrics-item ul {grid-template-columns: repeat(auto-fill, minmax(40px, 60px));}
    .our-partner-pic{height: auto;}
}
@media only screen and (max-width: 414px) {
    .company-grid{overflow: hidden}
    .stat{margin-bottom: 30px}
    .stat-icon,.stat-shadow{width: 80px; height: 80px;}
    .stat-shadow{left: 30px; top: 30px}
    .stat-icon i{font-size: 3.6rem}
    .stat-number{font-size: 3rem; margin-bottom: 10px}
    .product-card,.manufacturing-item-left-content,.index-newsArea-pic{border-radius: 8px}
    .product-image{height: 180px;}
    .index-newsArea-pic figure{min-height: 480px;}
    .manufacturing-subtitle{font-size: 1.6rem; line-height: 120%}
    .image-overlay{height: 70%; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent)}
    .index-newsArea-date span{display: block; font-size: 1.3rem;}
    .index-newsArea-pic-text{padding: 10px;}
    .index-newsArea-pic-text h4{text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);}
    .index-newsArea-pic-text p{line-height: 120%; font-size: 1.4rem;}
    .testimonials{padding: 50px 0 100px}
    .testimonial-relative{padding: 0}
    .testimonial-relative .bx-controls .bx-controls-direction{display: none}
    .newsletter-form{width: 180px;}
    .newsletter button{padding: 0.75rem 1rem}
    .footer-logo img{width: 180px;}
    /*page*/
    .company-image{padding: 0}
    .company-since{width: 8rem; height: 8rem;font-size: 2rem;}
    .history-container{padding: 0 20px 258px}
    .history-summary{margin-top: 4rem;}
    .brand-header-button{display: flow-root}
    .brand-btn{padding: 0.75rem 2rem; display: inline-block; margin-bottom: 10px;}
    .team-header-card{gap: 10px}
    .team-header-item{padding: 1rem;}
    .black-name-tab{font-size: 1.6rem;}
    .comment-header{display: grid}
    .hot-news-text h4 a{font-size: 2.2rem;}
    .quality-philosophy,.testing,.quality-metrics,.quality-solutions{padding: 50px 0;}
    .quality-metrics-item ul {grid-template-columns: repeat(auto-fill, minmax(40px, 65px));}
    .quality-solutions-header h2{font-size: 2.2rem;}
}
@media(max-height: 680px) {
    .carousel .my-slider,.carousel .slider-item{height: 100vh;}
    .quality-header p{font-size: clamp(1.8rem, 2.2vw, 2.4rem);}
    .quality-header .brand-header-button{margin-top: 20px}
    .quality-header .brand-btn{padding: 1rem 2rem}
    .quality-header .brand-header-scroll{bottom: 10px}
    .head-main,.faq-head{height: 100vh; min-height: auto; max-height: 550px;}
}
@media (max-height: 450px) {
    .slide-title,.slide-subtitle,.slide-desc{margin-bottom: 10px; line-height: 106%;}
    .slide-title{font-size: clamp(2.2rem, 3.2vw, 3.2rem)}
    .slide-subtitle{font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
    .slide-desc{display: none}
    .brand-header h2{font-size: 3.6rem;}
    .brand-header p{font-size: 2rem;}
    .brand-header-button{margin-top: 20px;}
    .brand-header-scroll{bottom: 10px}
    .quality-header p{display: none}
    .quality-header .brand-header-button{margin-top: 40px}
}