﻿.header-all{width: 100%;padding: 0 15px 15px;background: url(../images/header-all.png) no-repeat center;background-size:cover;}

.top-bar{ width: 100%; height:42px; line-height: 42px; background: #cee4fb; border-radius: 8px  8px  0px  0px; text-align: center;}
.top-bar a{ display: inline-block; font-weight: bold; color: #111111; font-size: 1rem;}
.top-bar h1{ display: inline-block;  font-size: 1rem;}
.top-bar b{display: inline-block;   font-size: 1rem;}
.top-bar a img{ margin: 0 10px;}

header.current{ position:fixed; left: 0; top: 0; z-index: 999;}
header{width: 100%;height: auto;padding: 8px 0;background: #335597;border-radius:0px  0px 8px  8px;}
header h1{color:#fff;font-size: 1.2rem;}
.header-top{ height: auto; }
.header-top .logo{width: 50px;height: 50px;}
.header-top .logo a{display: block;width: 50px;height: 50px;background: url(../images/logo.png) no-repeat;background-size:cover;}
.header-top .logo a h1{ display: none;}

.header-top .top-right{ }
.header-top .top-right .top-search{ width: 78%; height: 38px; background: #FFFFFF; border-radius: 19px; position:relative;}
.header-top .top-right .top-search input{ width: 66%; border: none; background:url(../images/top-search.png) no-repeat 19px center; padding-left: 42px;}
.header-top .top-right .top-search a.upbom{ display: block; height: 24px; line-height: 24px; padding: 0 20px; border-left: 1px solid #CCCCCC; margin-top: 7px;}
.header-top .top-right .top-search a.upbom img{ margin-right: 5px;}
.header-top .top-right .top-search button{ font-size: 1rem; padding: 0 28px; height: 38px; color: #FFFFFF; border: none; background: linear-gradient( 90deg, #0088FF 0%, #00FFC2 100%); border-radius: 19px;}
.header-top .top-right .top-search button:hover{ text-decoration:underline; background: linear-gradient( 90deg, #00FFC2 0%,#0088FF  100%); }
.search-window{ display:none; position:absolute;background: #fff;border-radius:10px;border-top: none;box-shadow: 0 4px 4px -2px #999;padding: 20px;top: 36px;left: 0;width: 800px;z-index: 20;}
.search-window a{margin-right:10px;line-height:24px;color: #666!important; font-size:0.8rem;}
.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:#ff6221;}
.search-window ul.search-rst li a p.mfg{ color:#999 }
.search-window b{font-size:1rem; display:block;}


.header-top .top-right .top-cart{ text-align: right; height: 41px;}
.header-top .top-right .top-cart a{ display: inline-block; width: 41px; height: 41px; margin-left: 5px; position:relative}
.header-top .top-right .top-cart a em{ width: 26px; height: 26px; line-height: 26px; border-radius: 50%; text-align: center; color: #FFFFFF; font-size: 0.8rem; position: absolute; right: -10px; top: -10px; background: #e60000;}
.header-top .top-right .top-cart a:hover img{ opacity:0.4;}


header .topmenu{ display: none;}


.header-nav{ height: 56px; line-height: 56px;}




.navleft{ width: 15%; height: 56px; line-height: 56px; color: #FFFFFF;  position: relative;}
.navleft a{ display: block; color: #FFFFFF; line-height: 56px;}
.navleft a i{line-height: 56px;}
.navleft a i.fa-indent{ margin-left: 10px;}
.navleft:hover ul.navul{ display: block;}
.navleft ul{ width: 280px; padding: 10px 0; z-index: 999; background: #023493; position: absolute; display: none; top:48px; left: 0; border-radius: 0px  0px 6px  6px ;}
.navleft ul li{ font-size: 0.9rem;}
.navleft ul li a{ display: block; line-height: 32px; height: 32px; overflow: hidden; padding: 0 20px;}
.navleft ul li a img{ margin-right: 10px; filter: invert(1) brightness(2) grayscale(1);}
.navleft ul li a i{ line-height: 32px; color: #999; font-size: 18px;}
.navleft ul li a:hover{ background: #0088ff;}
.navleft ul li a:hover i{ color: #FFFFFF;}
.navleft ul li.navmore{ font-weight: bold; margin-top: 10px; font-size: 1rem;}
.navleft ul li.navmore a:hover{ background: none;}
.navleft ul li ul{ display: none; padding: 20px; width: 900px; border:2px solid #023493; min-height: 420px; position: absolute; left:100%; top: 0; background: #FFFFFF;}
.navleft ul li ul li{ width: 33.3%; line-height: 32px; height: 32px; overflow: hidden; float: left;}
.navleft ul li ul li a{ display: block; line-height: 32px; height: 32px; color: #333333;}
.navleft ul li ul li a:hover{ color: #FFFFFF;}
.navleft ul li:hover ul{ display: block;}



.top-langue{ color: #FFFFFF; cursor: pointer; position: relative; line-height: 48px; font-size: 1rem;}
.top-langue i{ margin-left: 5px;}
.top-langue ul{ display: none; position: absolute; border-radius: 6px; left: 0; top: 41px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1); background: #FFFFFF; width: 120px; text-align: center;}
.top-langue ul li{ line-height: 42px; height: 42px; overflow: hidden; border-bottom: 1px solid #EEEEEE;}
.top-langue:hover ul{ display: block;}


.navright{ width: 85%;  height: 56px; line-height: 56px; color: #FFFFFF;}
nav ul{ width:100%;}
nav li a{ color: #FFFFFF;  font-size: 1rem;}
nav li a:hover{ color: #FFFFFF;}

@media (max-width: 768px) {

.top-bar{ display: none;}
.header-all{ width: 100%; padding: 0 0 10px 0; }

header{ height: auto;   border-radius:0px;}
.header-top{ height: 60px; border-bottom: none; padding:0 0;}


.header-nav{}
.top-right{display: none;}
.navleft{display: none;}
.top-langue{display: none;}

nav{ width: 100%; display: none; height: auto; background: #FFFFFF; line-height: 42px; position: absolute; left: 0; top: 60px; z-index: 999;}
nav li { margin-left: 0; padding: 0; font-weight: normal; background: #FFFFFF; width: 100%; height: 42px; line-height: 42px; border-bottom:1px solid #EEEEEE;}
nav li a{ color: #333; padding:  0 25px;}
nav li a:hover{ color: #023493;}

header .topmenu{ display: block; }
header .topmenu a{ border: 1px solid #FFFFFF; color: #FFFFFF; border-radius: 3px; padding: 8px; font-size: 20px; }



#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;
}


}