.topbar{ width: 100%; height: 64px; position: absolute; left: 0; top: 0;}
.topbar-container{ width: 80%;}


.topbar-left{}
.topbar-left span a{ color: #ea001b;}
.topbar-left span:after{ content: "|"; padding: 0 10px;}
.topbar-left img{ margin-right: 10px;}

.topbar-right{}
.topbar-right a{ color: #FFFFFF;}
.topbar-right a img{ margin-right: 5px;}
.topbar-right a:first-child:after{ content: "|"; padding: 0 10px; color: #FFFFFF;}
.topbar-right a:hover{ text-decoration: underline;}

.topbar.active{ color:#fff;}
.topbar.active .topbar-left a{ color:#fff;}

.topbar.active1{ width: 100%; height: 64px; position: inherit; left:inherit; top: inherit;}
.topbar.active1{ color:#333;}
.topbar.active1 .topbar-left a{ color:#333;}
.topbar.active1 .topbar-right a:first-child:after{ content: "|"; padding: 0 10px; color: #ccc;}
.topbar.active1 .topbar-right a{ color:#333;}
.topbar.active1 .topbar-right a img{ filter: brightness(500) invert(1);}




.banner{ width: 100%;}

.banner-left{ width: 50%; background: url(../images/bannerleft.jpg) no-repeat center; background-size:cover;}
.banner-leftinfo{ width: 60%; margin: 0 auto;}
.banner-leftinfo h1{ font-size: 3rem; line-height: 62px;}
.banner-leftinfo p{ margin-top: 20px; font-size: 1.1rem;}

.banner-search{ width: 100%; background: #FFFFFF; margin-top: 50px; height: 82px; padding: 8px; border-radius: 8px; border: 2px solid #EA001B;}
.banner-search input{ width: 80%; height: 62px; border: none; padding: 0 15px; font-size: 1.2rem;}
.banner-search button{ width: 20%; height: 62px; background: #EA001B; color: #FFFFFF; border: none; border-radius: 4px; font-size: 2rem;}
.banner-search button:hover{ background: #111111;}

.banner-right{ width: 50%;}
.banner-right img{ width: 100%; height: 100%; object-fit: cover;}
.banner-right video{ width: 100%; height: 100%; object-fit: cover;}

header.current{ width: 100%;  position: fixed !important;  left: 0 !important; top: 0 !important; border-radius:0 ; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}

header{ width: 94%; background: #FFFFFF; position: fixed; top: 64px; border-radius: 8px; left: 3%; padding: 18px 0; z-index: 999; transition: width .2s ease;}
header .header-container{ width: 85%;}
header .logo{ width: 168px; height: 61px;}
header .logo img{width: 168px; height: 61px;}

header.active1{width: 100%; position:inherit; top: inherit;  left: inherit; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}


.nav-box{ }
.nav-box li{ position:relative; padding: 0 20px;}
.nav-box li a{ font-size: 1rem;}
.nav-box li a:hover{ text-decoration: underline;}
.nav-box li.dropdown-menu ul{ display:none; position:absolute; left:0; top:24px; background:#fff; z-index:666; padding:10px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1); border-radius:6px; width:320px;}
.nav-box li.dropdown-menu ul li{ line-height:40px; padding: 0;}
.nav-box li.dropdown-menu ul li a{ color:#333; font-size: 0.9rem;}
.nav-box li.dropdown-menu i{ margin-left:10px;}


header .header-right{}
header .header-right-user{}
header .header-right-user a{ position: relative; margin-right: 12px; width: 40px; height: 40px; border-radius: 10px;border: 1px solid #EA001B}
header .header-right-user a:last-child{ border-color:#111111;}
header .header-right-user a em{ display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius:50%; background: red; color: #FFFFFF; font-size: 0.8rem; position: absolute; z-index: 333; right: -10px; top: -10px;}


header .header-right-rfq{ margin-left: 30px;}
header .header-right-rfq a{ display: inline-block;  color: #FFFFFF; background: #111111; height: 40px; line-height: 40px; border-radius: 10px; padding: 0 20px;}
header .header-right-rfq a:hover{ background: #EA001B;}
header .header-right-search{ margin-left: 30px;}
header .header-right-search a{ font-size: 2rem; color: #111111;}


.web-language-box{ display:none; background:rgba(0,0,0,.5); width:100%; height:100%; position:fixed; left:0; top:0; z-index:999;}
.web-language-box .flex{width:100%; height:100%;  }
.web-language-box .flex a{ display: inline-block; border-radius:6px; height: 42px; line-height: 42px; overflow: hidden; text-align: center; color: #FFFFFF; margin-bottom: 10px;  background:#ffbf43; width: 120px;}
#web-language-close{ width: 60px; font-size: 1.5rem;}



.search-window{ display:none; position:absolute;background: #fff;border-radius: 0 0 4px 4px;border-top: none;box-shadow: 0 4px 4px -2px #999;padding: 20px;top: 40px;left: 0;width: 100%;z-index: 999;}
.search-window a{margin-right:10px;line-height:24px;color: #999!important;}
.search-window ul.search-rst{
    padding-left: 0;
}
.search-window ul.search-rst li{margin-bottom: 8px;}
.search-window ul.search-rst li a p{color:#000;margin-bottom: 0px;}
.search-window ul.search-rst li a:hover p{color:#d64851;}
.search-window ul.search-rst li a p.mfg{ color:#999 }
.search-window b{font-size:1rem; display:block;}


header .topmenu{ display: none;}


.quote-warp{ display: none; width: 100%; height: 100%; z-index: 666; background: rgba(0,0,0,0.3);  position: fixed; left: 0; top: 0;}

.quote-box{ position: fixed; left:50%; top: 50%;  transform: translate(-50%, -50%); width:60%; background: #fff; box-shadow:0 1px 20px rgba(0,0,0,.04); padding: 50px; z-index: 999; border-radius: 20px;}
.quote-box a{ position: absolute; right: 20px; top: 20px; font-size: 2rem; color: #111111; z-index: 888;}
.quote-box b{ display: block; font-size: 2rem; color: #000000; line-height: 42px;}
.quote-box p{ line-height: 32px; font-size: 1rem;}
.quote-box-list{ width: 100%; }
.quote-box-list dl{ width: 47%; margin-bottom: 1px;}
.quote-box-list dl dt{ font-size: 1rem; color: #000000; line-height: 40px;}
.quote-box-list dl dd input{ width: 100%; background: none; border:1px solid #CCCCCC; border-radius:10px; padding: 0 15px; line-height: 46px;}
.quote-box-list dl dd textarea{ width: 100%; background: none; border:1px solid #CCCCCC; border-radius:10px; padding:15px; line-height: 26px; height: 100px;}
.quote-warp dl:nth-child(7){ width: 100%;}

.quote-box-btn{ width: 100%; margin-top: 10px; text-align: right;}
.quote-box-btn button{ background: #000000; border: none; border-radius:6px; color: #FFFFFF; height: 36px; line-height: 36px; font-size: 1rem; padding: 0 25px;}
.quote-box-btn button:hover{ background: #EA001B;}




.quote-warp1{ display: none; width: 100%; height: 100%; z-index: 666; background: rgba(0,0,0,0.3);  position: fixed; left: 0; top: 0;}
.quote-warp1 dl:nth-child(6){ width: 100%;}
.quote-warp1 dl:nth-child(5){ width: 100%;}

@media (max-width: 768px) {

.topbar{ display: none;}

header{ border-bottom:1px solid #EEEEEE; width: 100%; left: 0; top: 0; border-radius:0 ; padding: 0;}
header .header-container{background: #FFFFFF; width: 100%; padding: 10px 3%;}
header .header-right{ display: none;}
.header-all{ padding: 15px 0;}
header .topmenu{ display: block; }
header .topmenu a{ border: 1px solid #0C0427;  color: #0C0427; border-radius: 3px; padding: 8px; font-size: 20px; }

.logo{ width: auto; height: auto;}

.navright li.navlangue{ display: block;}
.logo img{ width:120px; height: auto;}



.web-language-box .flex a{ display: block; width: 48%; float: left; margin: 1%; }
.web-language-box .flex div{ width: 100%; justify-content: space-between;}
#web-language-close{ width: 60px; font-size: 1.5rem;}



.nav-box{ width: 100%; height: auto;  background: #FFFFFF; line-height: 42px;  overflow: hidden; position: absolute; left: 0; top: 70px; z-index:999; }
.nav-box li{ width: 100%; border-bottom:1px solid #EEEEEE;}
.nav-box li a{font-size: 1rem;}
.nav-box li a:hover{ text-decoration: underline;}

.nav-box li.dropdown-menu ul{ display:none; position:inherit; left:inherit; top:inherit; background:#fff; z-index:666; padding:10px 25px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1); border-radius:6px; margin-bottom: 10px; width:100%; z-index:999;}

.banner{ margin-top: 81px;}

.banner-left{ width: 100%; }
.banner-leftinfo{ width: 94%; margin: 0 auto; padding: 35px 0;}
.banner-leftinfo h1{ font-size: 1.6rem; line-height: 32px;}
.banner-leftinfo p{ margin-top:10px; font-size: 0.9rem;}

.banner-search{  margin-top: 20px; height: 62px; padding: 4px; border-radius: 8px; border: 1px solid #EA001B;}
.banner-search input{  height: 42px;  font-size: 0.9rem;}
.banner-search button{ height: 42px;font-size: 1.4rem;}
.banner-search button:hover{ background: #111111;}

.banner-right{ width: 100%;}



#mainnav {
    display: none;
    transition: max-height 0.3s ease;
}

/* 当添加 active 类时显示 */
#mainnav.active {
    display: block;
}

#mainnav1 {
    display: none;
    transition: max-height 0.3s ease;
}

/* 当添加 active 类时显示 */
#mainnav1.active {
    display: block;
}


.quote-box{  width:94%; padding: 20px; z-index: 999; border-radius: 20px;}
.quote-box a{  right: 10px; top: 10px; font-size: 1.6rem;}
.quote-box b{ font-size: 1.4rem; line-height: 32px;}
.quote-box p{ line-height:22px; font-size: 0.9rem;}
.quote-box-list{ margin-top: 20px;}
.quote-box-list dl dd textarea{  height: 60px;}

}