@charset "utf-8";
/* ====================公共样式========================= */

body.Header-lucency .Header-wrapper{background: rgba(4, 6, 84, 1);}
/* body.Header-lucency .Header-navbox li a{color: #000;} */
.Header-wrapper {width: 100%;height: 85px;background: rgba(4, 6, 84, .5);position: fixed;top: 0;left: 0;z-index: 999999;}
.Header-logo {float: left;}
.Header-logo a{display: inline-block;line-height: 85px;}
.Header-navbox {float: right;}
.Header-navbox li{display: inline-block;padding: 0 6px;margin: 0 12px;}
.Header-navbox li a{width: 100%;line-height: 85px;display: block;color: #fff;font-size: 16px;position: relative;}
.Header-navbox li a:before{content: "";width: 0;right: 0;height: 3px;background: linear-gradient(to right,#02d2fe,#3741e0);position: absolute;bottom: 4px;transition: all .4s ease;}
.Header-navbox li a.active:before,.Header-navbox li a:hover:before{right: auto;left: 0;width: 100%;}

/*汉堡菜单*/

.Header-navclick{height: 60px;cursor: pointer;float: right;user-select: none;display: none;}
.Header-navclick span{width: 24px;height: 2px;background: #fff;display: block;position: relative;margin-top: 28px;transition: all .2s linear;}
.Header-navclick span:before,.Header-navclick span:after{content: "";position: absolute;height: 2px;background: #fff;display: block;left: 0;width: 100%;transition: all .2s linear;}
.Header-navclick span:before{top: -8px;}
.Header-navclick span:after{top: 8px;}
.Header-navclick.ontrue span{-moz-animation: buttonAnimation 0.3s ease forwards;-webkit-animation: buttonAnimation 0.3s ease forwards;animation: buttonAnimation 0.3s ease forwards;}
.Header-navclick.ontrue span:before{-moz-animation: buttonAnimationBefore 0.3s ease forwards;-webkit-animation: buttonAnimationBefore 0.3s ease forwards;animation: buttonAnimationBefore 0.3s ease forwards; }
.Header-navclick.ontrue 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(8px) rotate(0);transform: translateY(8px) rotate(0);}
    100% {-moz-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
}
@-webkit-keyframes buttonAnimationBefore {
    0% {-webkit-transform: translateY(0px) rotate(0);transform: translateY(0px) rotate(0);}
    50% {-webkit-transform: translateY(8px) rotate(0);transform: translateY(8px) rotate(0);}
    100% {-webkit-transform: translateY(8px) rotate(45deg);transform: translateY(8px) 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(8px) rotate(0);-ms-transform: translateY(8px) rotate(0);-webkit-transform: translateY(8px) rotate(0);transform: translateY(8px) rotate(0);}
    100% {-moz-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);-webkit-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
}
@-moz-keyframes buttonAnimationAfter {
    0% {-moz-transform: translateY(0) rotate(0);transform: translateY(0) rotate(0);}
    50% {-moz-transform: translateY(-8px) rotate(0);transform: translateY(-8px) rotate(0);}
    100% {-moz-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}
}
@-webkit-keyframes buttonAnimationAfter {
    0% {-webkit-transform: translateY(0) rotate(0);transform: translateY(0) rotate(0);}
    50% {-webkit-transform: translateY(-8px) rotate(0);transform: translateY(-8px) rotate(0);}
    100% {-webkit-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) 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(-8px) rotate(0);-ms-transform: translateY(-8px) rotate(0);-webkit-transform: translateY(-8px) rotate(0);transform: translateY(-8px) rotate(0);}
    100% {-moz-transform: translateY(-8px) rotate(-45deg);-ms-transform: translateY(-8px) rotate(-45deg);-webkit-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) 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);}
}




/* 中间+共用部分 */
.contain{width: 1200px;margin: 0 auto;}

/*footer*/
.Footer-wrapper{
    background: #fff;
    padding: 15px 0;
}
.Footer-wrapper .footer-cont{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.Footer-wrapper .rgt span{
    font-size: 12px;
    color: #666666;
}
.Footer-wrapper .rgt span:not(:first-child){
    margin-left: 5px;
}

/* 视频 */
.popVideo{display: none;position: fixed;z-index: 999999;width: 100%;height: 100%;background: rgba(0,0,0,.5);top: 0;left: 0;}
.popVideo-content{display: flex;justify-content: center;align-items: center;position: relative;width: 66%;height: 100%;margin: 0 auto;}
.popVideo-core{position: relative;display: inline-block;vertical-align: middle;width: 100%;position: relative;}
.popVideo-core video{width: 100%;}
.popVideo-close {width: 28px;height: 28px;position: absolute;right: -28px;top: -28px;z-index: 3;background: url('../images/public/close.png') no-repeat center;cursor: pointer;opacity: .7;transition: all .6s ease;}
.popVideo-close:hover{opacity: 1;}
@media all and (max-width:1279px) {.popVideo-content{width: 92%;}.popVideo-close{right: 0;}}
/* ---- */




/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */
    .Header-navbox li {margin: 0 10px;}
}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
    .contain{width: 92%;}
    .Header-navbox li {margin: 0 8px;}
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .Header-navbox li {margin: 0 6px;}
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */
    .Header-navbox li {padding: 0 4px;}
    
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .Header-wrapper{height: 60px;}
    .Header-wrapper .bread-ico{display: block}
    .Header-logo a{line-height: 60px;}
    .Header-logo a img{width: 190px}
    .Header-navbox {
        display: none;
        background: #040654;
        width: 100%;
        position: absolute;
        left: 0;
        top: 60px;
        border-top: 1px solid;
        padding: 0 20px;
    }
    .Header-navclick {
        display: block;
    }
    .Header-navbox li{padding: 0;margin: 0;width: 100%;text-align: center}
    .Header-navbox li a{line-height: 40px;}
    .Header-navbox{padding: 20px;}
    .Header-navbox li a:before{display: none;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .Footer-wrapper .footer-cont .lft{display: none}
    .Footer-wrapper .footer-cont .rgt{text-align: center;}
}

