@charset "utf-8";
/* ====================公共样式========================= */
/* 头部 */
.Header-wrapper{width: 100%;position: fixed;z-index: 99;top: 0;left: 0;background: transparent;user-select: none;transition: background .4s;}

.Header-logo{float: left;height: 116px;display: flex;align-items: center;position: relative;z-index: 999;transition: height .4s;}
.Header-logo img{width: 652px;}

.Header-important{float: right; width: 12%; display: flex; justify-content: space-between;align-items: center;}
.Header-important ul{display: flex;position: relative;}
.Header-important ul li{position: relative;}
.Header-important-menu{display: flex;align-items: center;font-size: 16px;color: #fff;height: 116px;transition: height .4s;position: relative;}
.Header-important-menu::after{content: "";position: absolute;width: 100%;height: 1px;background: #fff;left: 0;bottom: 44px;opacity: 0;transition: all .4s ease;}
.Header-important ul li:hover .Header-important-menu::after{opacity: 1;}
.Header-important-drop{position: absolute;}
.Header-important-menu.line{pointer-events: none;}
.Header-important-menu.line i{width: 1px;height: 15px;background: #fff;position: relative;top: 1px;}

.Header-important-drop{opacity: 0;pointer-events: none;transform: translateY(30px);top: 83px;transition: all .5s ease;position: absolute;width: 100px;left: 50%;margin-left: -50px;background: rgba(0,0,0,.7);padding: 8px 0 14px;box-shadow: 0 0 20px rgba(29,56,75,.2);}
.Header-important-drop a{display: flex;align-items: center;height: 38px;position: relative;font-size: 14px;color: rgba(255, 255, 255, 0.5);transition: all .4s ease;justify-content: center;}
.Header-important-drop a:hover{background: rgba(173,0,0,.7);color: #fff;}
.Header-important li.active .Header-important-drop{opacity: 1;pointer-events: auto;transform: translateY(0) !important;}

.Header-navclick{display: flex;height: 116px;transition: height .4s;cursor: pointer;float: right;user-select: none;align-items: center;position: relative;z-index: 999992;}
.Header-navclick span{width: 40px;height: 40px;border-radius: 50%;background: #ad0000;position: relative;transition: all .4s ease;}
.Header-navclick span:before,.Header-navclick span:after{content: "";position: absolute;height: 2px;transition: all .4s ease;background: #fff;display: block;left: 50%;margin-left: -10px;width: 20px;}
.Header-navclick span:before{top: 23px;}
.Header-navclick span:after{bottom: 23px;}
.Header-navclick:hover span:before{top: 19px;}
.Header-navclick:hover span::after{bottom: 19px;}
.Header-navclick.active span:before{top: 19px;transform: rotate(45deg);}
.Header-navclick.active span::after{bottom: 19px;transform: rotate(-45deg);}

.Header-wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999991;visibility: hidden;pointer-events: none;}
.Header-mask{position: absolute;top: 0;right: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.58);transition: opacity 0.58s;opacity: 0;}
.Header-navbar{position: absolute;opacity: 0;width: 312px;height: 100vh;right: 0;top: 0;transform: translate(312px,0);overflow: hidden;transition: all .8s;background: #2c2a2b;padding: 150px 0 0 60px;}
.Header-navbar li{width: 100%;position: relative;}
.Header-arrow{display: none;}
.Header-menu{font-size: 18px;color: #fff;display: block;width: 100%;position: relative;}
.Header-menu span{display: inline-block;position: relative;height: 58px;line-height: 58px;}
.Header-menu span::after{content: "";position: absolute;width: 0%;height: 1px;background: #ad0000;left: 0;bottom: 0;transition: width .6s;}
.Header-menu::after, .Header-navbar li::after{content: "";position: absolute;width: 100%;height: 1px;background: rgba(255, 255, 255, 0.1);left: 0;bottom: 0;}
.Header-menu::after{opacity: 0;transition: all .6s;}
.Header-drop{width: 100%;position: relative;height: 0;overflow: hidden;transition: all .6s;}
.Header-drop a{display: flex;align-items: center;width: 100%;height: 36px;font-size: 15px;color: rgba(255, 255, 255, 0.5);transition: color .4s ease;}
.Header-drop a:first-child{margin-top: 10px;}
.Header-drop a:last-child{margin-bottom: 10px;}
.Header-drop a:hover{color: #fff;}
.Header-navbar li.active .Header-menu span::after{width: 100%;}
.Header-navbar li.active .Header-menu::after{opacity: 1;}
.Header-wrap.active{visibility: visible;pointer-events: auto;}
.Header-wrap.active .Header-mask{opacity: 1;}
.Header-wrap.active .Header-navbar{opacity: 1;transform: translate(0,0);}
.Header-wrap.active .Header-navbar li{animation: HeaderRun .8s ease both;}
@keyframes HeaderRun {0%{transform: translateX(312px);}100%{transform: translateX(0);}}

.Header-ewm{width: 35px;display: inline-block;position: relative; }
.Header-ewm .weixin{width: 35px;height: 35px;border-radius: 35px;background: #ededed url(../images/wx.png) no-repeat 7px center; border: solid 1px #777; cursor: pointer;}
.qrcode{ position: absolute; top: calc(100% + 20px);; left: 50%; background: #fff; transform: translate(-50%); width: 100px; opacity: 0; transition: all ease .3s;}
.qrcode:after{content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);}
.Header-ewm:hover .qrcode{ opacity: 1;}

.Header-sous{width: 35px;display: inline-block;}
#demo-b input[type=search] {
    color: transparent;
    cursor: pointer;
}
#demo-b input[type=search]:hover {
    background-color: #fff;
}
#demo-b input[type=search]:focus {
    width: 230px; padding-left: 30px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}
#demo-b input:-moz-placeholder {
    color: transparent;
}
#demo-b input::-webkit-input-placeholder {
    color: transparent;
}
input[type=search] {
    background: #ededed url(../images/icon-search.png) no-repeat 7px center;
    border: solid 1px #777;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
input[type=search]:focus {
    width: 230px;
    margin-left: -200px;
    background-color: #fff;
    border-color: #777;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}



/* 置顶 */

/* 中间+共用部分 */
.Container-wrapper{width: 100%;}
.contain-1560, .contain{margin: 0 auto;}
.contain-padding{padding: 0 50px;}
.contain-1560{width: 1560px;}
.contain{width: 1400px;}

body.noLucency .Header-logo, body.noLucency .Header-important-menu, body.noLucency .Header-navclick{height: 84px;}
body.noLucency .Header-wrapper{background:rgba(0, 0, 0, .65);}
body.noLucency .Header-navbar {padding: 160px 0 0 60px;}
body.noLucency .Header-important-menu::after{bottom: 28px;}

body.indexFullpage{background: #2c2a2b;overflow: hidden;}
body.indexFullpage .Header-logo, body.indexFullpage .Header-important-menu, body.indexFullpage .Header-navclick{height: 83px;align-items: flex-end;}
body.indexFullpage .Header-important-menu{padding-bottom: 14px;}
body.indexFullpage .Header-important-menu::after{bottom: 12px;}
body.indexFullpage .Header-logo{padding-bottom: 4px;}
body.indexFullpage .Header-important-menu.line i{top: -3px;}

/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900) */
    .contain-1560{width: 1500px;}
}

@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .contain-padding{padding: 0 25px;}
    .contain-1560{width: 95%;}
    .contain{width: 95%;}
    .Footer-items {padding: 70px 0 80px;}
    .Header-navbar {padding: 140px 0 0 60px;}
    body.noLucency .Header-navbar {padding: 120px 0 0 60px;}
}

@media all and (max-width:1439px) {
    /* 1360 */
}


@media all and (max-width:1151px) {
    /* 1024 */
    .Header-navclick:hover span:before{top: 21px;}
    .Header-navclick:hover span::after{bottom: 21px;}
    .Header-navclick.active span:before{top: 19px;transform: rotate(45deg);}
    .Header-navclick.active span::after{bottom: 19px;transform: rotate(-45deg);}

    .Header-arrow{display: block;width: 58px;height: 58px;position: absolute;z-index: 9;right: 0;top: 0;background: url('../images/arrDW.svg') no-repeat center /18px auto;}
    .Header-arrow.active{transform: rotate(180deg);}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .contain-padding{padding: 0 2%;}

}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .Header-important ul li:last-child{display: block;}
    body.indexFullpage .Header-important-menu {padding-bottom: 13px;}
    .Header-logo, .Header-navclick{height: 70px;}
    body.noLucency .Header-logo, body.noLucency .Header-important a, body.noLucency .Header-navclick, .Header-important-menu{height: 70px;}
    .Header-navbar, body.noLucency .Header-navbar {padding: 80px 0 0 40px;}
    .Header-navbar{width: 250px;transform: translate(250px,0);}
    .Header-menu span{height: 50px;line-height: 50px;}
    .Header-arrow{width: 50px;height: 50px;}
    .Header-menu {font-size: 16px;}
    .Header-drop a {height: 34px;}
    .Header-drop a:first-child{margin-top: 8px;}
    .Header-drop a:last-child{margin-bottom: 8px;}
    body.indexFullpage .Header-logo, body.indexFullpage .Header-important a, body.indexFullpage .Header-navclick {height: 60px;}
}



/*浮动ＱＱ*/
.sideBar-wrapper{position: fixed;bottom: 15%;right: 0;margin-top: -101px;width: 50px;height: 203px;z-index: 6666;}
.sideBar-wrapper ul li{height: 50px;position: absolute;left: 0;}
.sideBar-wrapper ul li.backTop{top: 0;width: 62px;}
.sideBar-wrapper ul li.relQq{top: 51px;width: 126px;transition: all .4s;}
.sideBar-wrapper ul li.relDh{top: 102px;width: 172px;transition: all .4s;}
.sideBar-wrapper ul li.relEwm{top: 153px;width: 62px;}
.sideBar-wrapper ul li a{display: block;font-family: "Microsoft Yahei";color: #fff;font-size: 14px;height: 50px;line-height: 50px;overflow: hidden;background-color: #242f7e;opacity: .87;border-radius: 6px;}
.sideBar-wrapper ul li a img{display: block;float: left;width: 24px;height: 24px;margin: 12px 12px 14px 14px;}
.sideBar-wrapper ul li a:hover{opacity: 1;}
.sideBar-wrapper ul li.relQq:hover{left: -70px;}
.sideBar-wrapper ul li.relDh:hover{left: -116px;}
.sideBar-wrapper-ewm{position: absolute;top: -144px;left: -144px;background: url('../images/side-arr.png') no-repeat bottom right;width: 140px;height: 149px;padding-bottom: 9px;display: none;}
.sideBar-wrapper-ewm img{display: block;background-color: #FFF;width: 140px;height: 140px;}
.sideBar-wrapper ul li.relEwm:hover .sideBar-wrapper-ewm{display: block;}