html {--header-height:100px;}
@media (max-width:1600px) {html {--header-height:90px;}
}
@media (max-width:1200px) {html {--header-height:calc(1rem + 0px);}
} 
/**头部导航**/
/* .header-sticky .header-box {background-color:#ffffff;} */
.header-box {position:fixed;top:0;z-index:9;width:100%;height:var(--header-height);opacity:1;background:rgba(0,0,0, .1);
  transition:transform 0.4s ease,opacity 0.3s,background 0.3s;}
.header-box .form-type-a {--form-width:200px;--h:48px;--form-color:var(--color);z-index:2;left:0;top:100%;border-top:0 none;width:var(--form-width);padding:0;background:transparent;
  box-shadow:0 0 10px rgba(0,0,0,0);transition:opacity 0.5s,margin 0.5s;}
.header-box .form-type-a .form {position:relative;width:100%;}
.header-box .form-type-a .form::before {opacity:0.4;}
.header-box:hover {background-color:rgba(0,0,0, .1);}
.header-box .form-type-a .form input::input-placeholder{ color:#fff !important;caret-color:#fff;}
/* .header-box:hover #header {--color:#333333;}
.header-box:hover #header .logo-box .imgs .i {opacity:0;}
.header-box:hover #header .logo-box .imgs .i-h {opacity:1;} */
.search-show .header-box .form-type-a {margin-top:0;opacity:1;pointer-events:auto;}
#header {--h:var(--header-height);--color:#ffffff;--hover-color:var(--main-color);box-shadow:0 0 15px rgba(0,0,0,0.1);background-color:rgba(0,0,0, .1);color:var(--color);
  transition:all 0.4s ease;}
#header .logo-box {position:relative;z-index:2;height:var(--h);}
#header .logo-box .imgs {position:relative;}
#header .logo-box .imgs img {display:block;width:192px;transition:height 0.3s,opacity 0.3s;}
#header .logo-box .imgs .i {opacity:1;}
#header .logo-box .imgs .i-h {position:absolute;left:0;top:0;opacity:0;}
#header .search-check {--size:20px;--fill:var(--color);}
#header .search-check:hover {--fill:var(--main-color);}
@media (min-width:1500px){
  #header .menu-block .menu .menu-title { padding:0 var(--pad) !important;}
}
@media (min-width:1201px) {
  /* .header-sticky {padding-top:var(--header-height);} */
  #header .logo-box .imgs img {width:192px;}
  #header .menu-block .wrap-div {width:auto;}
  #header .menu-block .menu {--i-h:var(--h);--pad:calc(var(--wrap-width)*0.016);padding-right:var(--pad);font-size:18px;line-height:var(--i-h);color:var(--color);}
  #header .menu-block .menu .menu-son {position:relative;background:transparent;}
  #header .menu-block .menu .menu-son:hover .menu-title,#header .menu-block .menu .menu-son.on .menu-title {color:#f57720;}
  #header .menu-block .menu .menu-son:hover .menu-title::before,#header .menu-block .menu .menu-son.on .menu-title::before {left:0;width:100%;}
  #header .menu-block .menu .menu-son:hover .menu-title .sub-icon {top:50%;opacity:1;}
  #header .menu-block .menu .menu-son:hover .sub-block {margin-top:0;opacity:1;pointer-events:auto;}
  #header .menu-block .menu .menu-title {position:relative;overflow:hidden;padding:0 10px;text-align:center;transition:all 0.3s;}
  #header .menu-block .menu .menu-title::before {content:"";display:none;position:absolute;left:50%;bottom:0;width:0;height:2px;background-color:var(--main-color);transition:all 0.3s;}
  #header .menu-block .menu .menu-title .sub-icon {content:"";display:block;margin-top:0.86em;position:absolute;left:0;top:40%;opacity:0;width:100%;height:10px;
    background:url(../image/menu-icon.png) no-repeat center / contain;transition:all 0.3s;}
  #header .menu-block .menu .menu-title-word {position:relative;}
  #header .menu-block .sub-block {--flexpad:40px;display:block!important;margin-top:10px;position:absolute;left:50%;top:100%;transform:translateX(-50%);
    box-shadow:0 5px 25px rgba(0,0,0,0.3);background:#ffffff;border-radius:5px;min-width:100%;word-break:keep-all;white-space:nowrap;font-size:16px;line-height:1.4em;
    color:#666666;opacity:0;pointer-events:none;transition:opacity 0.5s,margin 0.5s;}
  #header .menu-block .sub-block .flex-box {display:flex;padding:var(--flexpad);gap:var(--flexpad);}
  #header .menu-block .sub-block .img-box {display:block;width:315px;}
  #header .menu-block .sub-block .img-box::before {padding-top:75%;}
  /* #header .menu-block .sub-block .a-list {border-right:1px solid #cccccc;padding-right:var(--flexpad);} */
  #header .menu-block .sub-block .a-list .a {display:block;border-bottom:1px solid #eeeeee;min-width:7.4em;padding:0.7em 0;background:transparent;text-align: center;}
  #header .menu-block .sub-block .a-list .a:hover {border-bottom-color:#f57720;color:#f57720;}
  #header .phone-menu {display:none;}
  #header .phone-show-block {display:none;}
  .small-header {--header-height:80px;}
  .small-header .header-box {transform:translateY(-100%);opacity:0;pointer-events:none;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.1);}
  .small-header .header-box #header .logo-box .imgs img {width:150px;}
  .small-header .header-box #header .menu-block .menu {font-size:16px;}
  .small-header.show-header .header-box {transform:translateY(0);opacity:1;pointer-events:auto;}
  .header-type-a .header-box {background-color:rgba(0,0,0, .1);box-shadow:0px 3px 5px 0px rgba(0,0,0,0.1);}
  .header-type-a .header-box #header {--color:#fff;}
  .header-type-a .header-box #header .logo-box .imgs .i {opacity:0;}
  .header-type-a .header-box #header .logo-box .imgs .i-h {opacity:1;}
}
@media (min-width:1201px) and (max-width:1600px) {
  #header .logo-box .imgs img {width:150px;}
  #header .menu-block .menu {font-size:17px;}
}
@media (min-width:1201px) and (max-width:1300px) {#header .menu-block .menu {font-size:16px;}
}
.small-header .header-box {box-shadow:0 0 15px rgba(0,0,0,0.1);background-color:rgba(0,0,0, .1);}
.small-header .header-box #header .logo-box .imgs .i {opacity:0;}
.small-header .header-box #header .logo-box .imgs .i-h {opacity:1;}
.phone-menu {--background-color:var(--main-color);display:flex;position:relative;width:44px;height:30px;}
.phone-menu .phone-menu-i {display:block;position:absolute;top:50%;left:0%;margin-top:-1px;transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);
  -ms-transform:rotate(0);-o-transform:rotate(0);width:100%;height:2px;background-color:#f57720;opacity:1;transition:all 0.3s;}
.phone-menu .phone-menu-i.i1 {margin-top:-6px;}
.phone-menu .phone-menu-i.i3 {margin-top:4px;}
.menu-show .phone-menu .phone-menu-i {background-color:#f57720;}
.menu-show .phone-menu .phone-menu-i.i1 {margin-top:-1px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);}
.menu-show .phone-menu .phone-menu-i.i2 {width:100%;opacity:0;}
.menu-show .phone-menu .phone-menu-i.i3 {margin-top:-1px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);}
@media (max-width:1200px) {
  .phone-menu {display:flex;position:relative;width:0.44rem;height:0.3rem;}
  .phone-menu .phone-menu-i {margin-top:-0.02rem;border-radius:0.02rem;height:0.04rem;}
  .phone-menu .phone-menu-i.i1 {margin-top:-0.15rem;}
  .phone-menu .phone-menu-i.i2 {margin-top:-0.02rem;width:60%;}
  .phone-menu .phone-menu-i.i3 {margin-top:0.11rem;}
}
@media (max-width:1200px) {
  .header-box {position:sticky;}
  #header {--color:#333;}
  #header .logo-box {height:1rem;}
  #header .logo-box .imgs img {width:1.8rem;}
  #header .logo-box .imgs .i {opacity:0;}
  #header .logo-box .imgs .i-h {opacity:1;}
  #header .menu-block {position:fixed;z-index:9;left:0;top:var(--header-height);transform:translateX(-100%);width:100%;height:calc(100vh - var(--header-height));padding-bottom:1.5rem;
    opacity:0;overflow-y:auto;background:#ffffff;pointer-events:none;transition:opacity 0.4s,transform 0.8s ease;}
  #header .menu-block::before {content:'';display:block;position:absolute;left:0;top:0;pointer-events:none;width:100%;height:5px;box-shadow:3px 4px 5px 0px rgba(236,236,236,0.75);}
  #header .menu-block .menu {--l-h:0.84rem;--default-color:#666666;padding-top:0.2rem;flex-wrap:wrap;color:var(--default-color);}
  #header .menu-block .menu .menu-son {border-bottom:1px solid #d3d3d3;width:100%;}
  #header .menu-block .menu .menu-son .menu-title {display:flex;justify-content:space-between;align-items:center;padding:0 0 0 15px;font-size:0.28rem;line-height:var(--l-h);}
  #header .menu-block .menu .menu-son .menu-title .sub-icon {position:relative;height:var(--l-h);width:0.62rem;}
  #header .menu-block .menu .menu-son .menu-title .sub-icon::before,#header .menu-block .menu .menu-son .menu-title .sub-icon::after {content:'';display:block;position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);border-radius:0.015rem;background:#333333;transition:width 0.3s,height 0.3s,background 0.3s;}
  #header .menu-block .menu .menu-son .menu-title .sub-icon::before {width:0.22rem;height:0.03rem;}
  #header .menu-block .menu .menu-son .menu-title .sub-icon::after {width:0.03rem;height:0.22rem;}
  #header .menu-block .menu .menu-son .menu-title.on {color:var(--main-color);}
  #header .menu-block .menu .menu-son .menu-title.on .sub-icon::before,#header .menu-block .menu .menu-son .menu-title.on .sub-icon::after {background:var(--main-color);}
  #header .menu-block .menu .menu-son .menu-title.on .sub-icon::after {height:0;}
  #header .menu-block .menu .sub-block {color:#666666;display:none;font-size:0.26rem;line-height:calc(var(--l-h) - 0.2rem);}
  #header .menu-block .menu .sub-block .a-li {border-top:1px solid #eeeeee;width:100%;padding:0.1rem 0 0.1rem 0.25rem;}
  #header .menu-block .menu .sub-block .a-li .a {display:block;padding:0;}
  #header .search-check {--size:0.34rem;}
  #header .form-type-a {--h:0.7rem;--color:#999;transform:translate(0,-100%);position:absolute;z-index:9;left:0;top:100%;border-top:1px solid #eeeeee;
    border-bottom:1px solid #eeeeee;width:100%;padding:0.25rem 0;background-color:#ffffff;opacity:0;pointer-events:none;transition:transform 0.3s,opacity 0.3s;}
  #header .form-type-a .form {width:var(--wrap-1600-width);}
  #header .phone-menu {margin-left:0.3rem;}
  .menu-show #header {box-shadow:3px 4px 5px 0px rgba(236,236,236,0.75);background-color:#ffffff;}
  .menu-show #header .logo-box .imgs .i {opacity:0;}
  .menu-show #header .logo-box .imgs .i-h {opacity:1;}
  .menu-show #header .menu-block {transform:translateX(0);opacity:1;pointer-events:auto;}
  .search-show #header .form-type-a {transform:translate(0,0%);opacity:1;pointer-events:auto;}
}