:root{
  --color1:#fe0000;
  --color2:#8ebb34;
}
.ui-breadcrumb{margin:15px 0}
.ui-pagination{margin:30px 0;justify-content:center}
.container{max-width:1260px}
  /*header start*/
.header-wrap{padding-top:20px;padding-bottom:20px;background:rgba(16,29,35,.8);position:absolute;top:0;right:0;width:100%;z-index:201}
.header{justify-content:space-between;align-items:center}
.logo img{max-height:30px;backface-visibility:hidden;display:block}
.nav{display:flex;justify-content:flex-end;align-items:center}
.nav__item{padding:12px 25px;position:relative}
.nav__item > a{font-size:15px;color:#fff;transition:color .3s}
.nav__item > a:hover{color:#f9f9f9}
.nav__item > a:after{content:'';position:absolute;bottom:0px;left:50%;width:0;height:2px;transform:translateX(-50%);background:#999;transition:width .3s}
.nav__item > a:hover:after,
.nav__item.cur > a:after{width:28px}
.nav__item.icon:after{content:'\e83a';font-size:12px;font-family:iconfont;position:absolute;top:15px;right:5px}
.nav__extend{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__extend a{display:block;text-align:center;padding:4px 12px;white-space:nowrap}
.nav__extend a:hover{background:#f9f9f9}
.nav__item:hover .nav__extend{height:auto;padding:5px 0;top:100%;z-index:101;opacity:1}
.nav-switch{display:none}
@media (max-width:1200px){
  .nav__item{padding:12px 15px}
}
@media (max-width:1024px){
  .nav__item{padding:12px 10px}
  .nav__item > a{font-size:14px}
  .nav__lang{margin-left:10px}
}
@media (max-width:768px){
  :root{--header-height:59px}
  body:before{content:'';display:block;height:var(--header-height)}
  .header-wrap{padding-top:18px;padding-bottom:18px;position:fixed;background:rgba(16,29,35,1)}
  .logo img{max-height:23px}
  .nav{padding:0 8%;position:fixed;top:var(--header-height);left:0;right:0;height:0;background:#fcfcfc;flex-direction:column;justify-content:flex-start;overflow:hidden;transition:height .3s}
  .nav[is-open]{overflow:auto;height:calc(100vh - var(--header-height));z-index:11}
  .nav__item{width:100%;border-bottom:solid 1px #eee;padding:0 10px}
  .nav__item.icon:after{display:none}
  .nav__item > a{color:#222;font-size:15px;display:inline-block;padding:13px 0}
  .nav__item > a:after{display:none}
  .nav__item:hover .nav__extend{height:0;padding:0;top:auto;opacity:1;transition:height .3s}
  .nav__extend{height:0;overflow:hidden;padding:0;position:static;top:auto;z-index:101;opacity:1;width:100%;border:0;box-shadow:none;background:transparent;transition:height .3s}
  .nav__extend:before{content:'\e83a';position:absolute;top:15px;right:0;font-family:iconfont}
  .nav__extend[is-open]:before{content:'\e845'}
  .nav__extend:after{content:'';position:absolute;top:0;right:0;left:40%;height:40px;z-index:2}
  .nav__extend a{color:#666;text-align:left;padding-left:20px}
  .nav__extend a:last-child{padding-bottom:15px}
  .nav__extend a:hover{background:transparent}
  .nav-switch{display:flex;width:22px;height:16px;;position:relative;border-top:solid 2px #ddd;border-bottom:solid 2px #ddd;transition:.4s}
  .nav-switch:before,
  .nav-switch:after{content:'';height:2px;width:100%;position:absolute;right:0;top:5px;background:#ddd;transition:.3s}
  .nav-switch.open{border-color:#101D23}
  .nav-switch.open:before{transform:rotate(45deg)}
  .nav-switch.open:after{transform:rotate(-45deg)}
  .nav-switch-lang{margin-right:15px;width:16px;height:16px;border-radius:100%;font-size:16px;display:flex;justify-content:center;align-items:center}
}
/*header end*/
/*footer*/
.footer{background:#151515;padding-top:40px;;color:#999}
.footer a{color:#999}
.footer-text{flex-basis:70%}
.footer-link{padding-bottom:20px;font-size:15px;display:flex}
.footer-link a{margin-right:23px}
.footer-contact{}
.footer-contact li{padding:5px 0}
.footer-contact li:before{content:'';font-family:iconfont;font-size:16px;color:#aaa;margin-right:12px}
.footer-contact li:nth-child(1):before{content:'\e634'}
.footer-contact li:nth-child(2):before{content:'\e637'}
.footer-qrcode{margin-top:20px}
.footer-qrcode__item{text-align:center;margin-left:20px}
.footer-qrcode__item img{display:block;width:100px;margin-bottom:9px}
.footer-qrcode__item span{}
.copyright{background:#111;margin-top:18px;border-top:solid 1px #333;padding:10px 0;text-align:center;color:#999;font-size:12px}
.copyright a{color:#999}
@media (max-width:768px){
  .footer{padding-top:25px;padding-bottom:15px}
  .footer-text{flex-basis:100%}
  .footer-link{justify-content:space-between}
  .footer-link a{margin-right:0}
  .footer-qrcode{display:none}
  .footer-text .link{word-spacing:5px;font-size:14px}
}
@media (max-width:512px){
  .footer{padding-bottom:10px}
  .footer-text{font-size:12px;padding-bottom:10px}
  .footer-link{padding-bottom:10px;font-size:12px}
  .copyright{margin-top:5px}
}
/*footer end*/
/*banner*/
.home-banner{position:relative}
.home-banner .swiper-slide{height:750px;background-repeat:no-repeat;background-position:center 0;background-size:cover;display:flex;align-items:center}
.home-banner .swiper-slide article{padding-top:5%;text-align:center;width:100%}
.home-banner .swiper-slide h3{color:#f9f9f9;font-size:min(40px, 4vw)}
.home-banner .swiper-slide p{margin-top:10px;color:#ddd;font-size:min(20px, 3vw);;font-weight:300}
@media (max-width:1280px){
  .home-banner .swiper-slide{height:60vw}
}
@media (max-width:768px) {
  .home-banner .swiper-slide article{padding-top:0;padding:0 12px}
}
.bottom-line{display:flex}
.bottom-line:before,
.bottom-line:after{content:'';height:4px}
.bottom-line:before{width:65px;background:var(--color1)}
.bottom-line:after{width:9px;;background:#777;margin-left:9px}
.main-title{text-align:center;margin-bottom:min(38px,5vw)}
.main-title h3{font-size:clamp(20px, 3vw, 32px);text-transform:uppercase;font-weight:300}
.main-title__line{margin-top:10px;justify-content:center}
.main-title__tips{margin-top:30px;color:#2c3080;font-family:"Muli", Sans-serif;font-size:16px}
/*banner end*/
/*home*/
.home-box{padding-top:70px;padding-bottom:60px}
@media (max-width:1200px){
  .home-box{padding-top:60px;padding-bottom:50px}
}
@media (max-width:1024px){
  .home-box{padding-top:50px;padding-bottom:40px}
}
@media (max-width:768px){
  .home-box{padding-top:40px;padding-bottom:30px}
}
@media (max-width:512px){
  .home-box{padding-top:25px;padding-bottom:25px}
}
.main-more{margin-top:35px}
.main-more a{display:inline-block;background:#333;color:#fff;padding:9px 20px 9px 25px;border-radius:18px;transition:background-color .3s}
.main-more a:hover{background:#000}
.main-more a:after{content:'\e649';font-family:iconfont;margin-left:5px}
@media (max-width:768px){
  .main-more{margin-top:25px}
}
@media (max-width:512px){
  .main-more{margin-top:20px}
  .main-more a{font-size:12px}
}
.page-banner{height:500px;background-repeat:no-repeat;background-position:center 0;background-size:cover}
@media (max-width:1024px){
  .page-banner{height:45vw}
}
.home-about{display:grid;grid-template-columns:50% 45%;column-gap:5%}
.home-about-img{display:grid;grid-template-columns:48.5% 48.5%;grid-template-rows:200px 230px;column-gap:3%;row-gap:15px}
.home-about-img img{width:100%;height:100%;object-fit:cover}
.home-about-img__1,.home-about-img__3{border-radius:9px;overflow:hidden}
.home-about-img__2{border-radius:9px 9px 9px 110px;overflow:hidden}
.home-about-img__2{grid-area:2/1/3/2}
.home-about-img__3{grid-area:1/2/3/3}
.home-about-intro{padding-top:45px}
.home-about-intro__name{font-size:clamp(20px, 3vw, 36px);color:var(--color1)}
.home-about-intro__txt{font-size:17px;font-weight:300;line-height:1.8;margin-top:20px}
@media (max-width:1280px){
  .home-about-img{grid-template-rows:16vw 20vw}
  .home-about-intro{padding-top:25px}
}
@media (max-width:1024px){
  .home-about-intro{padding-top:15px}
  .home-about-intro__txt{font-size:15px;margin-top:12px}
}
@media (max-width:768px){
  .home-about-intro{padding-top:0}
  .home-about{grid-template-columns:100%;column-gap:0;row-gap:25px}
  .home-about-img{grid-template-rows:30vw 39vw}
}
.home-product-wrap{background:#f9f9f9}
.home-product{display:grid;grid-template-columns:48.5% 48.5%;column-gap:3%;row-gap:35px}
.home-product__grid{background:#fff;padding:9px;border-radius:4px;box-shadow:0 0 7px 1px rgba(0,0,0,.1)}
.home-product__img{height:300px}
.home-product__img img{width:100%;height:100%;object-fit:cover}
.home-product__name{font-size:25px;padding:12px;font-weight:400}
.home-product__txt{padding:0 12px;font-weight:300;line-height:1.7}
@media (max-width:1280px){
  .home-product__img{height:24vw}
}
@media (max-width:768px){
  .home-product{grid-template-columns:100%;column-gap:0;row-gap:25px}
  .home-product__img{height:48vw}
  .home-product__name{font-size:20px}
}
@media (max-width:512px){
  .home-product__name{padding:9px 0}
  .home-product__txt{padding:0}
}
.home-advantage-txt{font-size:16px;background:#f9f9f9;padding:15px;line-height:1.8;font-weight:300;border-radius:5px}
.page-main{margin-bottom:min(35px,9vw)}
.page-nav{background:#f5f5f5}
.page-nav .container{align-items:center}
.page-sort{display:flex}
.page-sort a{padding:22px;border-left:solid 1px #ddd}
.page-sort a:hover{background:#eee}
.page-sort a.cur{background:var(--color1);color:#fff}
@media (max-width:1024px){
  .page-sort a{padding:20px 15px}
}
@media (max-width:768px){
  .page-sort + .ui-breadcrumb{display:none}
}
@media (max-width:512px){
  .page-sort a{padding:12px}
}
.page-title{text-align:center;position:relative;margin:40px 0;padding-bottom:15px}
.page-title:before{content:'';position:absolute;bottom:0;left:50%;margin-left:-25px;width:50px;height:2px;background:#333}
.page-title span{font-size:clamp(22px,3vw,30px)}
.page-title small{display:block;color:#999;font-size:min(16px,3vw);margin-top:9px;text-transform:uppercase}
@media (max-width:1024px){
  .page-title{margin:30px 0 20px}
  .page-title small{margin-top:6px}
}
.about-txt{font-size:16px;background:#f9f9f9;padding:15px;line-height:1.8;font-weight:300;border-radius:5px;margin-bottom:30px}
.about-environment{margin-top:30px;display:grid;grid-template-columns:repeat(4,24%);column-gap:1.3%}
.about-environment__grid{height:230px}
.about-environment__grid img{width:100%;height:100%;object-fit:cover;border-radius:3px}
@media (max-width:1280px){
  .about-environment__grid{height:18vw}
}
@media (max-width:768px){
  .about-environment{margin-top:30px;grid-template-columns:repeat(2,48.5%);column-gap:3%;row-gap:18px}
  .about-environment__grid{height:35vw}
}
.product-row{display:grid;grid-template-columns:37% 60%;column-gap:3%;margin-bottom:30px;background:#f9f9f9;padding:9px;border-radius:4px}
.product-row__img{height:290px}
.product-row__img img{width:100%;height:100%;object-fit:cover}
.product-row__txt{display:flex;align-items:center}
.product-row__name{font-size:25px;font-weight:500}
.product-row__txt p{font-size:16px;line-height:1.7;margin-top:15px;font-weight:300}
@media (max-width:1280px){
  .product-row__img{height:25vw;min-height:100%}
}
@media (max-width:768px){
  .product-row{grid-template-columns:100%;column-gap:0;margin-bottom:25px}
  .product-row__img{height:45vw;min-height:auto;margin-bottom:25px}
}
.contact-page{padding:60px 0;background:url("../images/map-bg.png") no-repeat 0 center}
.contact-page .flex-wrap-between{flex-direction:row-reverse}
.contact-info{flex:0 0 45%;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}
.contact-info__item:before{content:'';font-family:iconfont;color:var(--color1);font-size:20px;display:block;text-align:center}
.contact-info__item.address:before{content:'\e636'}
.contact-info__item.phone:before{content:'\e633'}
.contact-info__item.email:before{content:'\e620'}
.contact-info__item.hours:before{content:'\e62d'}
.feedback{flex:0 0 50%;padding:50px;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{flex-wrap:wrap;justify-content:space-between}
.feedback .ui-input{flex:0 0 32%;width:32%;height:42px}
.feedback .ui-textarea{flex:0 0 100%;height:200px}
.feedback .submit{}
@media (max-width:1280px) {
  .contact-page{padding:40px 0}
  .contact-info{flex:0 0 100%;padding-top:0}
  .contact-info__item span{font-size:18px}
  .contact-info__item p{font-size:14px}
  .feedback{flex:0 0 100%;padding:50px}
  .feedback-title strong{font-size:30px}
}
@media (max-width:768px) {
  .contact-page{padding:30px 0}
  .feedback{padding:30px}
  .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}
  .feedback .ui-btn{width:100%}
}