@charset "utf-8";
/* ====================公共样式========================= */


/* 头部 */
.Header-wrapper{width: 100%;position: fixed;z-index: 99999;top: 0;left: 0;background: #fff;user-select: none;border-bottom: 1px solid #e7e7e7}

.Header-logo{float: left;height: 90px;display: flex;align-items: center;position: relative;z-index: 999;}
.Header-logo img{height: auto;}
.Header-stock{float:left;height: 90px;display: flex;justify-content: center;position: relative;flex-direction: column;padding-left: 20px;margin-left: 20px}
.Header-stock:after{content: '';height: 29px;width: 1px;position: absolute;left: 0;top: 50%;border-left: 1px dashed #ababab;transform: translateY(-50%)}
.Header-stock p:nth-child(1){font-size: 14px;color:#666}
.Header-stock p:nth-child(2){font-size: 18px;color:#036eb8}

.Header-lang{float: right;position: relative;z-index: 999;margin-left: 20px}
.Header-lang-menu{display: flex;align-items: center;height: 90px;}
.Header-lang-menu span{display: block;padding-left: 20px;background: url('../images/common/lang.svg') no-repeat left center /20px auto;line-height: 22px;font-size:0}
.Header-lang.active .Header-lang-menu span{color: #036eb8;}

.Header-navbar{visibility:visible;opacity:1}
body.PC .Header-navbar{display:block!important}
.Header-navbar li{float:left;padding:0 28px;z-index:9;position:relative}
.Header-navbar li:last-child{margin-right:0}
.Header-navbar li:first-child{margin-left:0}
.Header-menu{position:relative;height:46px;display:flex;align-items:center;font-size:16px;color:#fff;transition:color .4s ease}
/* .Header-menu::before{content:"";width:100%;left:0;opacity:0;height:3px;position:absolute;bottom:-1px;background:#036eb8;transition:all .4s ease} */
.Header-navbar li.active{
    background: #0e6cac;
}
.Header-navbar li.active .Header-menu,.Header-navbar li:hover .Header-menu{color:#fff}
.Header-navbar li.active .Header-menu::before{opacity:1}
.Header-arrow{display:none}
.Header-drop{position:absolute;background:rgba(3,110,184,.96);top:47px;right:-200px;padding:50px;display:none}
.Header-drop-inner{width: 100%;justify-content:center;display: flex}
.Header-drop-l{width:236px}
.Header-drop-l img{width: 230px;
    height: 150px;object-fit:cover}
.Header-drop-r{min-width:360px;padding-left:42px;position:relative}
.Header-drop.style-2 .Header-drop-r{min-width:190px}
.Header-drop-r:after{content:'';height:96%;width:1px;background:#4990c1;position:absolute;left:50%;top:2%}
.Header-drop.style-2 .Header-drop-r:after{display: none}
.Header-drop-menu:not(:first-of-type){margin-top:12px}
.Header-drop-item{text-align: left;font-size:16px;color:#fff;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .4s ease}
.Header-drop-item:hover,.Header-drop-list a:hover,.Header-drop-menu.on .Header-drop-item{color:#68cffe}
.Header-drop-list{position:absolute;left:calc(55% + 30px);top:0;z-index:1;opacity:0;visibility:hidden;transform:translateX(-10px);margin-top:-10px;max-width: 36%}
.Header-drop-list.on{opacity:1;visibility:visible;transform:translateX(0);transition:all 1s ease}
.Header-drop-list a{display:block;color:#fff;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:10px;transition:all .4s ease}
.Header-navclick{display: none;width: 24px;height: 60px;cursor: pointer;float: right;user-select: none;align-items: center;}
.Header-navclick span{width: 100%;height: 2px;background: #777;display: block;position: relative;transition: all .2s linear;}
.Header-navclick span:before,.Header-navclick span:after{content: "";position: absolute;height: 2px;background: #777;display: block;left: 0;width: 100%;transition: all .2s linear;}
.Header-navclick span:before{top: -7px;}
.Header-navclick span:after{top: 7px;}
.Header-navclick.active span{-moz-animation: buttonAnimation 0.3s ease forwards;-webkit-animation: buttonAnimation 0.3s ease forwards;animation: buttonAnimation 0.3s ease forwards;}
.Header-navclick.active span:before{-moz-animation: buttonAnimationBefore 0.3s ease forwards;-webkit-animation: buttonAnimationBefore 0.3s ease forwards;animation: buttonAnimationBefore 0.3s ease forwards; }
.Header-navclick.active span:after{-moz-animation: buttonAnimationAfter 0.3s ease forwards;-webkit-animation: buttonAnimationAfter 0.3s ease forwards;animation: buttonAnimationAfter 0.3s ease forwards;}
@-moz-keyframes buttonAnimationBefore {
    0% {-moz-transform: translateY(0px) rotate(0);transform: translateY(0px) rotate(0);}
    50% {-moz-transform: translateY(7px) rotate(0);transform: translateY(7px) rotate(0);}
    100% {-moz-transform: translateY(7px) rotate(45deg);transform: translateY(7px) rotate(45deg);}
}
@-webkit-keyframes buttonAnimationBefore {
    0% {-webkit-transform: translateY(0px) rotate(0);transform: translateY(0px) rotate(0);}
    50% {-webkit-transform: translateY(7px) rotate(0);transform: translateY(7px) rotate(0);}
    100% {-webkit-transform: translateY(7px) rotate(45deg);transform: translateY(7px) rotate(45deg);}
}
@keyframes buttonAnimationBefore {
    0% {-moz-transform: translateY(0px) rotate(0);-ms-transform: translateY(0px) rotate(0);-webkit-transform: translateY(0px) rotate(0);transform: translateY(0px) rotate(0);}
    50% {-moz-transform: translateY(7px) rotate(0);-ms-transform: translateY(7px) rotate(0);-webkit-transform: translateY(7px) rotate(0);transform: translateY(7px) rotate(0);}
    100% {-moz-transform: translateY(7px) rotate(45deg);-ms-transform: translateY(7px) rotate(45deg);-webkit-transform: translateY(7px) rotate(45deg);transform: translateY(7px) rotate(45deg);}
}
@-moz-keyframes buttonAnimationAfter {
    0% {-moz-transform: translateY(0) rotate(0);transform: translateY(0) rotate(0);}
    50% {-moz-transform: translateY(-7px) rotate(0);transform: translateY(-7px) rotate(0);}
    100% {-moz-transform: translateY(-7px) rotate(-45deg);transform: translateY(-7px) rotate(-45deg);}
}
@-webkit-keyframes buttonAnimationAfter {
    0% {-webkit-transform: translateY(0) rotate(0);transform: translateY(0) rotate(0);}
    50% {-webkit-transform: translateY(-7px) rotate(0);transform: translateY(-7px) rotate(0);}
    100% {-webkit-transform: translateY(-7px) rotate(-45deg);transform: translateY(-7px) rotate(-45deg);}
}
@keyframes buttonAnimationAfter {
    0% {-moz-transform: translateY(0) rotate(0);-ms-transform: translateY(0) rotate(0);-webkit-transform: translateY(0) rotate(0);transform: translateY(0) rotate(0);}
    50% {-moz-transform: translateY(-7px) rotate(0);-ms-transform: translateY(-7px) rotate(0);-webkit-transform: translateY(-7px) rotate(0);transform: translateY(-7px) rotate(0);}
    100% {-moz-transform: translateY(-7px) rotate(-45deg);-ms-transform: translateY(-7px) rotate(-45deg);-webkit-transform: translateY(-7px) rotate(-45deg);transform: translateY(-7px) rotate(-45deg);}
}
@-moz-keyframes buttonAnimation {
    0% {background: transparent;}
    50% {background: rgba(255, 255, 255, 0);}
    100% {background: rgba(255, 255, 255, 0);}
}
@-webkit-keyframes buttonAnimation {
    0% {background: transparent; }
    50% {background: rgba(255, 255, 255, 0);}
    100% {background: rgba(255, 255, 255, 0);}
}
@keyframes buttonAnimation {
    0% {background: transparent; }
    50% {background: rgba(255, 255, 255, 0);}
    100% {background: rgba(255, 255, 255, 0);}
}