/*=========== =======================RESPONSIVE LAYOUTS===============================================*/
/* 大屏（1680px） */
@media (max-width: 1680px) {
    .wrapper,.container{margin: 0 auto; max-width: 1200px;}
}
@media (max-width: 1440px) {
    .nav-list > li > a{padding: 0 12px;}
    .slide-content{left: 35%}
}
@media (max-width: 1200px) {
    header.maskLayer-in{background-color: var(--bg-dark); overflow-y: auto}
    header.opacity{border-bottom: none;}
    .nav-container{border-bottom: 1px solid rgba(255,255,255,0.3);}
    .nav-logo-img{height: 42px; margin: 5px 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(--text-muted);}
    .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(--text-muted);}
    .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; display: block;}
    .nav-child a,.nav-child:last-child,.nav-children:last-child{border: 0;}
    .nav-child a:hover{color:var(--text-muted);}
    .nav-dropdown-wrap{max-width: 100%; margin: 0 30px; grid-template-columns: 1fr auto;}
    .nav-dropdown-menu{position: relative;border: 0;background:none; top: 0;}
    .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.3); }
    .search-form input{order: 1; flex: 1; border: 0; border-radius: initial; background: none; color: #fff;}
    .search-form input:focus{outline: none; color: #fff;}
    .search-form input::placeholder {color: rgba(255,255,255,0.5);opacity: 1;}
    .search-form input:focus::-webkit-input-placeholder {color: transparent;}
    .search-form input:focus::-moz-placeholder {color: transparent;}
    .search-form input:focus:-ms-input-placeholder {color: transparent;}
    .nav-search-submit{background: none; width: 3.6rem;}
    .nav-search-submit i{font-size: 2.2rem;}
    .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;}
    .g-4{grid-template-columns: repeat(2, 1fr);}
    .company-overview{grid-template-columns: repeat(1, 1fr); gap: 50px;}
    .company-image {justify-self: center;order: 0;}
    .partners-logo{grid-template-columns: repeat(4, 1fr); gap: 30px}
    .products-list{grid-template-columns: repeat(2, 1fr); gap: 30px}
    .news-wrapper{grid-template-columns: 2fr minmax(220px, 300px); gap: 30px}
    .news-item-footer{display: grid;}
}
@media (max-width: 980px) {
    .company-wrapper,.contact-us{grid-template-columns: repeat(1, 1fr);}
    .company-content{order: 1}
    .company-pic{margin: 0 auto; max-width: 600px; order: 0}
    .g-3{grid-template-columns: repeat(1, 1fr);}
    .grid-image{height: 300px}
    .footer{padding: 3rem 20px}
    .footer-content{grid-template-columns: repeat(2, 1fr);gap: 30px}
    .production-card,.goods-features-card{grid-template-columns: repeat(3, 1fr); gap: 20px}
    .partners-item-image{padding: 0;}
    .contact-wrapper{display: block;}
    .production-title{font-size: 1.8rem;}
    .ga-min,.news-wrapper{grid-template-columns: repeat(1, 1fr); gap: 30px}
    .products-list{grid-template-columns: repeat(2, 1fr); gap: 20px}
    .product-item .grid-image{height: 360px;}
    .news-read-wrapper{grid-template-columns: inherit; display: block;}
    .quality-metrics{padding: 0 0 50px;}
    .quality-commitment,.testing-card{grid-template-columns: repeat(3, 1fr); gap: 20px}
    .quality-metrics-grid{grid-template-columns: repeat(1, 1fr); gap: 30px}
    .process-item-pic figure{max-width: 360px;}

    /* .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} */
}
@media (max-width: 767px) {
    .nav-container{padding: 0 10px 0 0}
    .carousel .my-slider,.carousel .slider-item{max-height: 720px;}
    .slide-content .btn{padding: 8px 25px}
    .company-wrapper{gap: 50px;}
    .company-pic{max-width: 500px;}
    .company-pic .company-since{padding: 10px}
    .company-text h6,.company-text p{margin-bottom: 0; padding-bottom: 0}
    .products-grid{grid-template-columns: repeat(1, 1fr);}
    .testimonial-relative{width: 100%; padding: 0 30px;}
    .footer-links li{border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 5px;}
    /*以上是首页*/
    .production-card,.partners-side{grid-template-columns: repeat(1, 1fr); gap: 30px}
    .partners-side{gap: 0;}
    .partners-item-image{max-width: 600px; margin: 0 auto; display: none;}
    .product-item .grid-image{height: 260px;}
    .goods-features-card{grid-template-columns: repeat(2, 1fr);}
    .news-item-image{min-width: 220px;}
    .primaryMenu-item{margin-right: 5px}
    .primaryMenu-item a{padding: 10px; font-size: 1.4rem;}
    .head-search{max-width: 80vw;}
    .faq-title{gap: 10px}
    .faq-title h3{font-size: 2rem; line-height: 120%;}
    .testing-image img{width: 100%; height: 100%; object-fit: cover;}
    .process-item{box-shadow: var(--card-shadow); border-radius: 12px; overflow: hidden}
    .process-item-grid,.quality-commitment,.testing-card,.quality-solutions-list .g-3{grid-template-columns: repeat(1, 1fr); gap: 30px}
    .process-item-pic figure{max-width: 100%; height: 220px; 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;}
}
@media (max-width: 576px) {
    .nav-logo-text{font-size: 2.2rem;}
    .company-content ul{display: grid;}
    .company-content li{width: 100%; margin-right: 0;}
    .grid-image{height: 240px;}
    .g-2 {grid-template-columns: repeat(1, 1fr);}
    .g-4 {grid-template-columns: repeat(1, 1fr);}
    .testimonials,.brand-section{padding: 50px 0}
    .testimonial-relative .my-slider{padding: 0}
    .testimonial-relative .slider-prev,.testimonial-relative .slider-next{display: none}
    .footer-content{grid-template-columns: repeat(1, 1fr);}
    .partners-logo{grid-template-columns: repeat(4, 1fr); gap: 20px}
    .history-content{margin-left: 50px;}
    .contact-msg{padding: 2rem;}
    .products-list,.goods-features-card{grid-template-columns: repeat(1, 1fr); gap: 30px}
    .product-item .grid-image{height: 360px;}
    .goods-image-show .slider-thumbnail{width: 60px; height: 60px;}
    .goods-read-main{grid-template-columns: inherit; display: block; gap: 30px; justify-content: start;}
    .goods-image-show .slider-prev{left: 0;}
    .goods-image-show .slider-next{right: 0;}
    .goods-read-item{font-size: 1.4rem;}
    .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}
    .goods-container{padding: 20px;}
    .article-comments{box-shadow: none;padding: 0;}
    .goods-container .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}
    .primaryMenu-item a{padding: 8px 10px; font-size: 1.4rem;}
    .news-item{display: grid;}
    .news-item-image{min-width: 100%;}
    .news-item-image img{position: relative; height: 100%; object-fit: cover;}
    .news-item-more{margin-left: inherit; margin-top: 15px;}
}
@media only screen and (max-width: 414px) {
    .company-pic .company-since{border-radius: 8px; left: -10px; box-shadow: var(--shadow-sm)}
    .company-text p{font-size: 1.4rem}
    .grid-image{height: 220px;}
    .history-content{margin-left: 40px;}
    .product-item .grid-image{height: 320px;}
    .goods-desc-wrapper{box-shadow: none;}
    .form-group-wrapper,.form-table .form-group{grid-template-columns: repeat(1, 1fr);}
    .goods-read-item{display: grid;}
    .goods-read-item span.goods-read-line{display: none;}
}
@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) {

    .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}
}