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

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

.Header-important{}
.Header-important ul{display: flex;padding-left:80px;}
.Header-important ul li{padding:0 20px; }
.Header-important-menu{display: flex;align-items: center;font-size: 16px;color: #000;height: 84px;transition: height .4s;position: relative;}
.Header-important-menu::after{content: "";position: absolute;width: 100%;height: 1px;background: #fff;left: 0;bottom: 12px;opacity: 0;transition: all .4s ease;}
.Header-important ul li:hover .Header-important-menu::after{opacity: 1;background:#ad0000;}
.Header-important ul li:hover>a{color:#ad0000;}
.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: 84px;transition: height .4s;cursor: pointer;float: right;user-select: none;align-items: center;position: relative;z-index: 999992;}
.Header-navclick .login{display:flex;}
.Header-navclick .login .user-news,.Header-navclick .login .log-in,.Header-navclick .login .shopBar{margin-right:20px;height:84px;line-height:84px;}
.Header-navclick .login .user-news .icon img{width:19px;}
.Header-navclick .login .log-in:hover .drop-menu{display:block;}
.Header-navclick .login .log-in img{padding-right:3px;}
.Header-navclick .login .user-news a,.Header-navclick .login .log-in a,.Header-navclick .login .shopBar a{display:flex; }
.Header-navclick .login .shopBar img{padding-right:3px;}
.log-in .drop-menu{
    position: absolute;
    top: 63px;
    width: 120px;
    z-index: 5;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 10px 0;
    border-radius: 2px;
    display: none;
}
 
 .log-in .drop-menu li{padding: 0 10px;height: 32px;text-align: center;}
.log-in .drop-menu li a{position: relative;height: 32px;line-height: 32px;}
.log-in .drop-menu li a:hover,.drop-menu a:focus {color:#2D2D2D;background: unset;}
.log-in .button-group span {display:inline-block;line-height:24px;height:24px;width:24px}
.log-in .button-group ul:before {position:absolute;top:-8px;left:50px;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #fff;border-left:8px solid transparent;content:'';}
.log-in .button-group ul:after {position:absolute;top:-8px;left:50px;display:inline-block;border-right:8px solid transparent;border-bottom:8px solid #e9e8e8;border-left:8px solid transparent;content:'';}
.log-in .button-group .button {padding:0;line-height:18px;font-size:20px}
.log-in .button-group .drop-menu {padding: 10px 0; left: -40px;border-top:0px solid #ff0000;-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.075);box-shadow: 0px 8px 10px rgba(0,0,0,.05);border-radius:4px;}
.log-in a.user-ico{width:32px;height:32px;line-height:32px;background:#ECEFF5;display:block;}
.log-in a.user-head{width:32px;height:32px;overflow:hidden;display:block;}
.log-in a.user-head img{width:32px;height:32px;}
.Header-navclick span.login{background:url(../images/common/user.svg) left center no-repeat;padding-left:20px;margin-right:20px;}
.Header-navclick span.cart{background:url(../images/common/cart.svg) left center no-repeat;padding-left:21px;margin-right:20px;}
.Header-navclick span.login:hover{color:#ad0000;background:url(../images/common/user1.svg) left center no-repeat;}
.Header-navclick span.cart:hover{color:#ad0000;background:url(../images/common/cart1.svg) left center no-repeat;}
.Header-navclick span.menu{display:none;width: 50px;height: 50px;border-radius: 50%;position: relative;transition: all .4s ease;}
.Header-navclick span.menu span{height: 3px;width: 30px;display: block;background: #ad0000;margin-top: 24px;margin-left: 10px;transition: all .4s ease;}
.Header-navclick span.menu:before,.Header-navclick span.menu:after{content: "";position: absolute;height: 3px;transition: all .4s ease;background: #ad0000;display: block;margin-left: 10px;width: 30px;}
.Header-navclick span.menu:before{top: 16px;}
.Header-navclick span.menu:after{bottom: 15px;}
.Header-navclick span.menu:hover:before{top: 24px;}
.Header-navclick span.menu:hover::after{bottom: 24px;}
.Header-navclick.active span.login,.Header-navclick.active span.cart{display:none;}
.Header-navclick.active span.menu span{display:none;}
.Header-navclick.active span.menu:before{top: 24px;transform: rotate(45deg);}
.Header-navclick.active span.menu::after{bottom: 24px;transform: rotate(-45deg);}

/* 下拉 */
.Header-arr{display: none;}
.Header-dropdown{display:none;width: 100%;background: #fff;position: absolute;top: 80px;left: 0;border-top: 1px solid #eee;padding: 40px 0 30px;text-align: left;box-shadow:0px 5px 41.82px 9.18px rgba(140, 140, 140, 0.11);}
.Header-dropdown-contain{width: 1200px;margin: 0 auto;}
.Header-dpmenu{width: 17%;float: left;min-height: 180px;}
.Header-dpmenu p{display: block;width: 100%;}
.Header-dpmenu a{display: inline-block;padding-left: 22px;position: relative;font-size: 15px;color: #333;height: 36px;line-height: 36px;transition: all .4s ease;}
.Header-dpmenu a i{position: absolute;top: 0;left: 0;height: 100%;width: 20px;text-align: left;background: url('../images/pages/dropArr.png') no-repeat center;}
.Header-dpmenu a.ontrue{color: #ae0002;}
.Header-dpcont{width: 83%;float: right;}
.Header-dpitem{display: none;width: 100%;overflow: hidden;}
.Header-dpitem.ontrue{display: block;}
.Header-dpitem ul{padding-left:0px;}
.Header-dpitem ul li{width:33.33%;padding:0 10px;}
.Header-dpitem ul li .nav-img{height:190px;text-align:center;background:#efeaee;padding:10px;}
.Header-dpitem ul li .nav-img img{height:100%;}
.Header-dpitem ul li p{padding-top:10px;}
.Header-prolink{width: 60%;float: left;padding: 0 60px;border-right: 1px solid #e5e5e5;min-height: 180px;overflow: hidden;}
.Header-prolink p{display: block;width: 50%;float: left;}
.Header-prolink a{display: inline-block;font-size: 15px;color: #333;height: 36px;line-height: 36px;transition: all .4s ease;}
.Header-prolink a.ontrue{color: #1f5dcb;}
.Header-proimg{width: 40%;text-align: center;float: right;}
.Header-proimg-img{max-width: 100%;display: none;margin: 0 auto;height: 180px;}
.Header-proimg-img.ontrue{display: block;}

.Header-sonwdimg{width: 100%;overflow: hidden;padding-left: 60px;}
.Header-sonwd{width: 52%;float: left;}
.Header-sonwd p{font-size: 14px;color: #666;line-height: 28px;}
.Header-sonimg{width: 34%;float: right;}
.Header-sonimg img{width: 100%;object-fit: cover;}
.Header-dropmore .Header-dpmenu{width: 24%;}
.Header-dropmore .Header-dpcont{width: 76%;}
.Header-dropmore .Header-sonimg{width: 35.2%;}

.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,.8);transition: opacity 0.8s;opacity: 0;}
.Header-navbar{font-size: 0;width: 100%;text-align: center;}
.Header-navbar ul li{display: inline-block;margin: 0 18px;}
.Header-Menu{display: block;height: 80px;line-height: 82px;font-size: 16px;color: #333;padding: 0 4px;transition: all .4s ease-in-out;}
.Header-navbar ul li.ontrue .Header-Menu{color: #1f5dcb;font-weight: 700;}
.Header-Menu:hover{color: #1f5dcb;}
.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: 16px;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);}}

/* 底部 */
.footer.in .ft-content{opacity:1;transition: all 1s ease 2s;}
.ft-content{opacity:0;width:400px;font-size:16px;transition: all 1s ease 1s;padding-top:70px;}
.ft-content h3{font-size:20px;color:#fff;font-weight:600;margin-bottom:18px;}
.ft-content p{margin-bottom:13px;color:#fff;opacity:.6;}
.Footer-wrapper{width: 100%;background: #2c2a2b;position: relative;z-index: 9;}
.Footer-items{width: 100%;padding: 70px 0 88px;overflow: hidden;display:flex;flex-direction:column;}
.Footer-logo{padding-bottom:20px;}
.Footer-logo img{max-width: 100%;width: 260px;}
.Footer-navbar{overflow: hidden;user-select: none;}
.Footer-navbar ul{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;flex-direction:column}
.Footer-navbar li{width: auto;}
.Footer-menu{font-size: 16px;color: #fff;display: block;font-weight:600;margin-top:30px;}
.Footer-drop{width: 100%;margin-top: 20px;}
body.PC .Footer-drop{display: flex !important;}
.Footer{display:flex;}
.Footer .Footer-contact{padding-top:170px;width:45%;}
.Footer .Footer-contact h3{font-size:20px;color:#fff;font-weight:600;margin-bottom:18px;}
.Footer .Footer-contact p{margin-bottom:13px;color:#fff;opacity:.6;}
.Footer .Footer-contact .ft-demo-icons{display: flex;align-items: center;width:400px;margin-top:30px;}
.Footer .Footer-contact .ft-demo-icons .ft-demo-code{margin:0 20px;position: relative;transition: opacity .4s ease;}
.Footer .Footer-contact .ft-demo-icons .ft-demo-code .ft-demo-image{opacity:.6;}
.Footer .Footer-contact .ft-demo-icons .ft-demo-link{margin:0 20px;opacity: .6;transition: opacity .4s ease;}
.Footer .Footer-contact .ft-demo-icons .ft-demo-code .ft-demo-qr{text-align:center;width:135px;display: none;background-color: #545454;position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);padding: 10px;color: #fff;font-size: 14px;}
.Footer .Footer-contact .ft-demo-icons .ft-demo-code:hover .ft-demo-qr{display: flex}
.Footer .Footer-contact .ft-demo-icons .ft-demo-code .ft-demo-qr .ft-demo-qr-item .ft-demo-qr-image{width: 115px}

.Footer-drop a{display: block;font-size: 16px;color: #fff;opacity: 0.6;margin-right:25px;line-height: 1;padding: 10px 0;transition: all .4s ease;}
.Footer-drop a:hover{opacity: 1;}
.Footer-copyright{width: 100%;border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 24px 0;}
.Footer-copyright .contain{display: flex;justify-content:center;}
.Footer-copyright-info{font-size: 14px;color: rgba(255, 255, 255, 0.5);}
.Footer-copyright-link a{display: inline-block;vertical-align: middle;position: relative;font-size: 14px;color: rgba(255, 255, 255, 0.5);transition: all .4s ease;margin-right: 20px;}
.Footer-copyright-link a::after{content: "";position: absolute;width: 1px;height: 14px;background: rgba(255, 255, 255, 0.5);top: 50%;margin-top: -7px;right: -12px;pointer-events: none;}
.Footer-copyright-link a:hover{color: #fff;}
.Footer-copyright-link a:last-child{margin-right: 0;}
.Footer-copyright-link a:last-child::after{display: none;}


/* 置顶 */
.backTop {display: none;width: 52px;height: 52px;transform: rotate(180deg);overflow: hidden;user-select: none;border-radius: 50%;background: #ad0000 url('../images/common/arrDW.svg') no-repeat center/20px auto;position: fixed;z-index: 999;right: 50px;bottom: 60px;cursor: pointer;}
.backTop:hover{animation: backTopRun .8s ease both;}
@keyframes backTopRun{0%{background-position: center top 50%;}50%{background-position: center top calc(100% + 20px);}50.00001%{background-position: center top -20px;}100%{background-position: center top 50%;}}
@media all and (max-width:1599px) {.backTop {right: 40px;}}
@media all and (max-width:1000px) {.backTop {right: 4%;animation: none !important;}}
@media all and (max-width:640px) {.backTop {right: 4%;bottom: 56px;width: 40px;height: 40px;}}

/* 中间+共用部分 */
.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: #fff;box-shadow:0px 5px 41.82px 9.18px rgba(140, 140, 140, 0.11);}
body.noLucency .Header-navbar {padding: 160px 0 0 60px;}
body.noLucency .Header-important-menu::after{}

body.indexFullpage{background: #2c2a2b;overflow: hidden;}
body.indexFullpage .Header-logo, body.indexFullpage .Header-important-menu, body.indexFullpage .Header-navclick{height: 83px;align-items: center;}
body.indexFullpage .Header-important-menu{padding-bottom: 0px;}
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: 1300px;}
    .contain{width: 1300px;}
    .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:1359px) {
    /* 1280 */
    .contain-1560{width: 1200px;}
}

@media all and (max-width:1279px) {
    /* 1152 × (700) */
    .contain-1560, .contain{width: 880px;}
    .Footer-navbar {width: 560px;}
    .Footer-items {padding: 60px 0 64px;}
}

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

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


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .contain-padding{padding: 0 4%;}
    .contain-1560, .contain{width: 92%;}
		.Header-navclick span.menu{display:block}
    .Footer-wrapper .contain{width: 100%;}
    .Footer-logo{width: 100%;text-align: center;}
    .Header-logo img{width: 170px;}
    .Footer-items{padding: 36px 0 30px;}
    .Footer-items .contain {width: 100%;display: block;}
    .Footer-navbar{width: 100%;margin-top: 20px;}
    .Footer-navbar li{width: 100% !important;}
    .Footer-menu {height: 40px;line-height: 40px;padding: 0 4%;position: relative;}
    .Footer-menu::after{content: "";width: 44px;height: 40px;position: absolute;z-index: 9;right: 0;top: 0;background: url('../images/common/arrDW.svg') no-repeat center /18px auto;}
    .Footer-menu.active::after{transform: rotate(180deg);}
    .Footer-drop a{padding: 8px 4%;}
    .Footer-drop{display: none;margin-top: 0;}
    .Footer-copyright {padding: 20px 0;text-align: center;}
    .Footer-copyright-link{width: 100%;}
    .Footer-copyright-info{width: 100%;margin-top: 4px;}
    .Footer-logo img {width: 170px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
		.Header-navclick span.menu{display:block;}
    .Header-important ul li{display: none;margin-right: 20px;}
    .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;}
}