:root{
  --color-main:#c00e12;
  --color-main-light:#d6181d;
  --color-main-dark:#b3060a;
  --color2:#f4e10b;
  --padding-about:16px;
  --padding-home-box:clamp(25px,5vw,80px);
  --padding-page-box:clamp(25px,3.5vw,40px);
  --padding-more:min(12px,2vw) min(40px,4vw);
  --padding-around:clamp(18px,3vw,30px);
  --padding-around-long:clamp(25px,3.5vw,45px);
  --padding-around-short:clamp(12px,2vw,20px);
  --margin-default:clamp(16px,2.5vw,30px);
  --margin-long:clamp(25px,3.5vw,45px);
  --margin-short:20px;
  --font-size-title:clamp(22px,3.5vw,35px);
  --font-size-page-title:clamp(20px,3.3vw,32px);
  --font-size-box-title:clamp(18px,2vw,24px);
  --font-size-list-title:clamp(16px,2vw,18px);
  --font-size-desc:min(16px,3vw);
  --font-size-detail-title:clamp(20px,2.5vw,28px);
  --font-size-detail-desc:clamp(15px,1.5vw,17px);
  --grid-row-gap:clamp(22px,3vw,30px);
  --grid-row-gap-long:clamp(25px,3.5vw,40px);
  --grid-row-gap-short:20px;
  --grid-two:repeat(2,48.5%);
  --grid-three:repeat(3,31%);
  --grid-four:repeat(4,23.5%);
  --grid-five:repeat(5,19%);
  --svg-bolang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2560 747.84'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h2559.84v747.84H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M2560 149.21c-257.71-198.94-642.9-198.94-1155.54 0C891.73 348.15 423.59 348.15 0 149.21v468.91C0 688.75 57.31 746 128 746h2304c33.95 0 66.5-13.47 90.51-37.45a127.798 127.798 0 0 0 37.49-90.43V149.21zm0 0' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --svg-yinhao:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M576.967 554.894C576.967 227.84 849.55 34.844 1024 0v192.996c-95.403 29.496-209.892 179.598-215.324 343.125H1024v203.435C1024 896.654 896.654 1024 739.556 1024H576.967V554.894zM0 554.894C0 227.84 272.583 34.844 447.033 0v192.996C351.63 222.492 237.14 372.594 231.708 536.12h212.594v203.435c0 157.098-127.346 284.444-284.444 284.444H0V554.894z'/%3E%3C/svg%3E");
}
@media (max-width:1280px){
  :root{

  }
}
@media (max-width:1024px){
  :root{
    --grid-four:repeat(2, 48.5%);
  }
}
@media (max-width:768px){
  :root {
    --grid-two:100%;
    --grid-three:repeat(2,48%);
  }
}
@media (max-width:512px){
  :root{

  }
}
@media (max-width:414px){
  :root{
    --grid-four:100%;
  }
}
.container{max-width:1360px;margin:0 auto}
.container.blank{padding-left:var(--padding-about);padding-right:var(--padding-about)}
.bg-light{background:#f7f7f7}
.header-wrap{background:#f9f9f9;box-shadow:var(--ui-shadow)}
.header{padding-top:25px;padding-bottom:25px;display:flex;align-items:center;justify-content:space-between}
.logo img{max-height:clamp(36px,4vw,66px);backface-visibility:hidden;display:block}
.nav{flex:1;display:flex;justify-content:flex-end;align-items:center}
.nav__item{padding:12px clamp(10px,2vw,25px);position:relative}
.nav__item > a{font-size:18px;transition:color .3s}
.nav__item > a:hover{color:var(--color-main)}
.nav__item > a:after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;transform:translateX(-50%);background:#333;transition:width .3s}
.nav__item > a:hover:after,
.nav__item.cur > a:after{width:28px}
.nav__item.dropdown:after{content:'';width:16px;height:16px;position:absolute;top:15px;right:5px;background:var(--svg-bottom) no-repeat}
.nav__dropdown{width:100%;height:0;overflow:hidden;z-index:-10;opacity:0;position:absolute;top:130%;left:50%;transform:translateX(-50%);padding:0;border:solid 1px #ddd;border-radius:3px;box-shadow:0 2px 5px 1px rgba(0,0,0,.05);background:#fff;transition:top .3s,opacity .3s}
.nav__dropdown li{text-align:center;padding:6px 0;border-bottom:solid 1px #f2f2f2}
.nav__dropdown li:last-child{border-bottom:none}
.nav__dropdown li:hover{background-color:#f5f5f5}
.nav__item:hover .nav__dropdown{height:auto;padding:5px 0;top:100%;z-index:101;opacity:1}
.nav-switch{display:none}
@media (max-width:1024px){
  body:before{content:'';display:block;height:63px}
  .header-wrap{position:fixed;top:0;right:0;width:100%;z-index:201}
  .header{padding-top:13px;padding-bottom:13px}
  .nav{display:block;position:fixed;top:0;right:110%;bottom:0;width:80%;z-index:211;background:#222;padding:30px 0 0;overflow:auto;transition:right .3s}
  .nav.open{right:20%;box-shadow:18px 0 18px 2px rgba(0,0,0,.1),0 0 5px 1px rgba(0,0,0,.1)}
  .nav__item{padding:0;width:100%;;border-bottom:solid 1px rgba(255,255,255,.05)}
  .nav__item > a{color:#fff;font-size:15px;line-height:58px;display:inline-block;margin-left:40px}
  .nav__item > a:after{display:none}
  .nav__item.dropdown:after{width:auto;height:auto;border:4px solid transparent;border-bottom:0;border-top-color:#fff;right:30px;top:27px}
  .nav__item:hover .nav__dropdown{height:0;padding:0}
  .nav__dropdown{position:static;background:#303030;opacity:1;box-shadow:none;border:0;transform:translateX(0);transition:height .3s !important}
  .nav__dropdown li{text-align:left;padding:11px 10px 11px 60px;border-bottom:solid 1px rgba(255,255,255,.05)}
  .nav__dropdown li:hover{background-color:transparent}
  .nav__dropdown li a{color:#eee}
  .nav-switch{display:flex;width:22px;height:16px;;position:relative;border-top:solid 2px #555;border-bottom:solid 2px #555;transition:.4s}
  .nav-switch:before,
  .nav-switch:after{content:'';height:2px;width:100%;position:absolute;right:0;top:5px;background:#555;transition:transform .3s}
  .nav-switch.open{border-color:#fff;transition:0s}
  .nav-switch.open:before{transform:rotate(45deg)}
  .nav-switch.open:after{transform:rotate(-45deg)}
}
.home-banner{position:relative}
.home-banner__slide{height:min(700px,50vw)!important;background-repeat:no-repeat;background-position:center 0;background-size:cover}
.home-box{padding-top:var(--padding-home-box);padding-bottom:var(--padding-home-box)}
.home-more{margin-top:min(50px,6vw);display:flex;align-items:center;justify-content:center}
.home-more a{background:var(--color-main);padding:var(--padding-more);color:#fff;border-radius:4px;transition:background-color .3s}
.home-more a:hover{background:var(--color-main-dark)}
.page-main{padding:var(--padding-page-box) 0 var(--padding-home-box)}
.page-breadcrumb-wrap{background:var(--color-main-dark);padding:65px 0;background:url("../images/breadcrumb.webp") center center no-repeat;background-size:100%;position:relative}
.page-breadcrumb-wrap:before{content:'';position:absolute;inset:0;background:var(--color-main-dark);opacity:.85}
.page-breadcrumb{display:flex;justify-content:space-between;align-items:center;z-index:1;position:relative}
.page-breadcrumb__name{color:#fff;font-size:var(--font-size-page-title);font-weight:100}
.page-breadcrumb__link{color:#fff;font-size:12px}
.page-breadcrumb__link div{display:inline-block}
.page-breadcrumb__link div + div:before{padding:0 5px;color:#ccc;content:"/\00a0"}
.page-breadcrumb__link a{color:#fff}
@media (max-width:1024px){
  .page-breadcrumb-wrap{padding:35px 0;background-size:cover}
}
@media (max-width:512px){
  .page-breadcrumb-wrap{padding:25px 0}
}
.page-title{text-align:center;position:relative;margin:0 0 var(--margin-default);padding-bottom:14px}
.page-title:before{content:'';position:absolute;bottom:0;left:50%;margin-left:-25px;width:50px;height:2px;background:#333}
.page-title span{font-size:var(--font-size-page-title)}
.main-title{text-align:center;margin-bottom:min(5vw,40px)}
.main-title h3{font-size:clamp(20px,4vw,42px);color:#3a3a3a;font-weight:500}
.main-title p{font-size:16px;letter-spacing:1px}
.main-title small{margin-top:22px;background-color:var(--color-main);width:46px;height:3px;position:relative;display:inline-block}
.main-title small:before,
.main-title small:after{content:'';background-color:var(--color-main);width:3px;height:3px;display:inline-block;position:absolute}
.main-title small:before{right:-6px}
.main-title small:after{right:-12px}
@media (max-width:512px) {
  .main-title p{font-size:12px}
}
.home-product{display:flex;;justify-content:center;flex-wrap: wrap}
.home-product__item{flex-basis:31%;margin-right:3.5%;margin-bottom:38px;box-shadow:var(--ui-shadow);transition:transform .3s}
.home-product__item:nth-child(3),
.home-product__item:nth-child(6),
.home-product__item:nth-child(9){margin-right:0}
.home-product__item:hover{;transform:translateY(5px)}
.home-product__figure{height:280px}
.home-product__figure img{width:100%;height:100%;object-fit:cover}
.home-product__info{padding:8px 16px 20px;position:relative}
.home-product__info:before{content:'';background-image:var(--svg-bolang);width:100%;aspect-ratio:1/.3;position:absolute;top:-60px;right:0}
.home-product__name{font-size:22px;position:relative;z-index:2;text-align:center;display:block;margin-bottom:20px}
.home-product__name:hover{color:var(--color-main)}
.home-product__desc{display:none;margin:20px 0;color:#666;position:relative;z-index:2}
.home-product__more{display:flex;margin:0 auto;justify-content:center;position:relative;z-index:2}
.home-product__more a{background:#f0f0f0;padding:8px 15px;border-radius:3px;transition:background-color .3s}
.home-product__more a:hover{background:#ddd}
@media (max-width:1350px){
  .home-product__figure{height:20vw}
  .home-product__info:before{top:-4vw}
}
@media (max-width:768px){
  .home-product__item{flex-basis:48%;margin-right:2%;margin-bottom:28px}
  .home-product__item:nth-child(1),
  .home-product__item:nth-child(3),
  .home-product__item:nth-child(5),
  .home-product__item:nth-child(7){margin-right:2%}
  .home-product__item:nth-child(2),
  .home-product__item:nth-child(4),
  .home-product__item:nth-child(6),
  .home-product__item:nth-child(8){margin-right:0}
  .home-product__figure{height:30vw}
  .home-product__info:before{top:-6vw}

}
.home-feature-wrap{background:#f8f8f8}
.home-feature{display:grid;grid-template-columns:repeat(2,48%);justify-content:space-between;row-gap:var(--grid-row-gap-long)}
.home-feature__item{background:#fff;display:flex;border-radius:6px;transition:.3s}
.home-feature__item:hover{transform:translateY(-5px);transition:.3s}
.home-feature__item figure{flex-basis:25%;height:180px;border-radius:6px 0 0 6px;display:flex;align-items:center;justify-content:center}
.home-feature__item svg{width:86px}
.home-feature__item article{flex:0 0 75%;padding:16px;display:flex;align-items:center}
.home-feature__item h5{font-size:var(--font-size-box-title);margin-bottom:12px;font-weight:500}
.home-feature__item p{line-height:1.8;color:#777}
@media (max-width:768px){
  .home-feature{grid-template-columns:100%}
  .home-feature__item article{padding:15px}
  .home-feature__item figure{height:auto}
  .home-feature__item figure svg{width:50px}
  .home-feature__item h5{margin-bottom:8px}
}
@media (max-width:512px){
  .home-feature__item figure{flex:0 0 25%}
  .home-feature__item article{flex:0 0 75%}
}
.footer-wrap{background:#0e0e0e}
.footer-copyright{background:#050505;padding:15px 0;text-align:center;color:#666;font-size:12px}
.footer{padding:40px 12px;display:grid;grid-template-columns:35% 35%;justify-content:space-between}
.footer-title{color:#fff;font-size:20px;margin-bottom:16px;font-weight:100;font-family:"Raleway", sans-serif}
.footer-about{}
.footer-about p{font-size:12px;color:#777;line-height:24px}
.footer-contact{}
.footer-contact p{color:#777;margin-top:10px;line-height:24px}
.footer-message{}
.footer-message-row{display:grid;grid-template-columns:46% 46%;justify-content:space-between}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;color:#777;margin-bottom:8px}
.form-group input[type=text]{width:100%;border:0;padding:9px;background:#e5e5e5;border-radius:3px}
.form-group textarea{width:100%;height:60px;border:0;padding:9px;background:#e5e5e5;border-radius:3px}
.form-group input[type=submit]{background:var(--color-main);color:#fff;border:0;padding:9px 15px;border-radius:3px}
@media (max-width:1024px){
  .footer{grid-template-columns:46% 46%}
}
@media (max-width:768px){
  .footer{grid-template-columns:100%;row-gap:30px}
}
.page-title{text-align:center;position:relative;margin:0 0 var(--margin-default);padding-bottom:14px}
.page-title:before{content:'';position:absolute;bottom:0;left:50%;margin-left:-25px;width:50px;height:2px;background:#333}
.page-title span{font-size:var(--font-size-page-title)}
.page-about{padding:min(40px,6vw) 0;position:relative}
.page-about:before,
.page-about:after{content:'';background:var(--svg-yinhao);width:min(30px,5vw);aspect-ratio:1/1;background-size:100%;position:absolute;opacity:.3}
.page-about:before{top:0;left:0}
.page-about:after{bottom:0;right:0;transform:rotate(180deg)}
.page-about p{font-size:16px;line-height:1.8;margin-bottom:15px;color:#666}
.about-data{margin-top:var(--margin-long);padding:var(--padding-around);display:grid;grid-template-columns:repeat(3, 1fr);background:url("../images/page-about-data.webp") ;background-size:cover;border-radius:8px}
.about-data__box{text-align:center;position:relative}
.about-data__value strong{font-size:clamp(23px, 4vw, 40px);font-family:'impact',sans-serif;color:#fff;font-weight:500}
.about-data__value sub{vertical-align:3px;color:#fff}
.about-data__name{margin-top:5px;font-size:var(--font-size-desc);color:#eee}
.page-about__top{}
.page-about__top h2{font-size:30px;margin-bottom:32px;font-weight: 500}
.page-about__top p{color:#777;line-height:1.5;font-size:22px}
.page-about__hr{margin:50px 0;background-image: linear-gradient(to right, transparent, #dbdbdb, transparent);height: 1px;border: 0}
.page-about__bottom h2{color:var(--color-main);font-size:27px}
.page-about__bottom p{font-size:22px;margin-top:20px;color:#777;line-height:1.5}
@media (max-width:768px){
  .page-about__top h2{font-size:25px;margin-bottom:28px}
  .page-about__top p{font-size:20px}
  .page-about__bottom h2{font-size:24px}
  .page-about__bottom p{font-size:20px}
  .page-about__hr{margin:35px 0}
}
@media (max-width:512px){
  .about-data{padding:20px 12px;grid-template-columns:100%}
  .about-data__box{padding:15px 2px;border-bottom:solid 1px rgba(255,255,255,.2)}
  .about-data__box:nth-child(3){border-bottom:0}
}
.page-advantage{background:#f9f9f9}
.advantage-list{display:grid;grid-template-columns:repeat(4,23.5%);justify-content:space-between;row-gap:25px}
.advantage__item{padding:30px 30px 50px;background:#fff;position:relative}
.advantage__item:hover{box-shadow:0 0 15px 1px rgba(0,0,0,.1)}
.advantage__item img{}
.advantage__item h2{margin:25px 0 20px;font-size:18px}
.advantage__item p{color:#777;line-height:1.7}
@media (max-width:1024px){
  .advantage__item{padding:20px 20px 40px}
  .advantage__item:after{bottom:10px;left:14px}
}
@media (max-width:768px){
  .advantage-list{grid-template-columns:repeat(2,48%)}
}
@media (max-width:512px){
  .advantage__item img{width:50px}
}
.page-product-desc{font-size:19px;line-height:1.6;color:#777}
.product-banner{margin:40px 0}
.product-banner img{width:100%}
.product-group{margin-top:30px;padding-top:20px;border-top:solid 1px #eee}
.product-group__title{font-size:var(--font-size-box-title);margin-bottom:25px;font-weight:600}
.product-group__list{display:grid;grid-template-columns:repeat(4,23.5%);justify-content:space-between;row-gap:20px}
@media (max-width:1024px){
  .page-product-desc{font-size:16px}
  .product-banner{margin:25px 0}
  .product-group__list{grid-template-columns:repeat(3,32%)}
}
@media (max-width:768px){
  .product-group__list{grid-template-columns:repeat(2,48%)}
}
.contact-page{display:grid;grid-template-columns:48% 48%;justify-content:space-between;row-gap:25px;background:url("../images/map-bg.png") no-repeat 0 center}
.contact-page .flex-wrap-between{flex-direction:row-reverse}
.contact-info{padding-top:80px;display:flex;flex-wrap:wrap}
.contact-info__item {flex:0 0 49%;text-align:center;margin-bottom:40px}
.contact-info__item span{display:block;font-size:22px;font-family:'Poppins', sans-serif;font-weight:600;color:#3a3a3a;margin-top:12px}
.contact-info__item p{color:#5f5f5f;font-size:16px;line-height:25px;margin:10px 0 0 0}
.feedback{padding:30px;box-shadow:0 6px 35px rgb(0 0 0 / 7%);background:#fff}
.feedback-title{margin-bottom:25px}
.feedback-title strong{font-size:34px;font-weight:600;font-family:'Poppins', sans-serif;line-height:50px;color:#3a3a3a}
.feedback-title p{font-size:16px;line-height:26px}
.feedback .ui-form-row{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:15px}
.feedback input[type=text]{flex:0 0 32%;width:32%;height:42px}
.feedback textarea{flex:0 0 100%;height:200px}
.feedback input[type=submit]{background:var(--color-main);color:#fff;padding:9px 30px}
@media (max-width:1024px) {
  .contact-page{grid-template-columns:100%}
  .contact-info{padding-top:0}
  .contact-info__item span{font-size:18px}
  .contact-info__item p{font-size:14px}
  .feedback-title strong{font-size:30px}
}
@media (max-width:768px) {
  .contact-page{padding:30px 0}
  .feedback-title{margin-bottom:15px}
  .feedback-title strong{font-size:25px}
  .feedback-title p{font-size:14px}
}
@media (max-width:512px) {
  .contact-page{padding:20px 0}
  .feedback{padding:20px}
  .feedback-title strong{font-size:20px}
  .contact-info__item {flex:0 0 100%;margin-bottom:25px;position:relative;text-align:left}
  .contact-info__item:before{position:absolute;left:0;top:4px;font-size:17px}
  .contact-info__item span{margin-top:0;padding-left:25px;font-size:16px}
  .feedback-title{margin-bottom:5px}
  .feedback .ui-input{flex:0 0 100%;width:100%;margin-top:15px}
}
.band-list{display:grid;grid-template-columns:var(--grid-four);justify-content:space-between;row-gap:var(--grid-row-gap)}
.band-list__item{}
.band-list__img{aspect-ratio:1/.9;padding: 20px;border: solid 1px #ddd;border-radius: 5px;display: flex;justify-content: center;align-items: center;box-shadow:0 0 9px 1px rgba(0,0,0,.08),0 0 6px -2px rgba(0,0,0,.08)}
.band-list__img img{max-width: 100%;max-height: 100%}
.band-list__name{text-align: center;margin-top:15px}