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

/* 头部 */
.Header-wrapper{width: 100%;position: fixed;left: 0;top: 0;z-index: 9999999;background-color: #ffffff;box-shadow: 0 0 12px rgba(0, 0, 0, 0.16);}
.Header-wrapper::after{content: '';display: none;width: 100%;height: 1px;background-color: #f0e7e7;position: absolute;left: 0;bottom: 0;}
/* logo */
.Header-logo{float: left;}
.Header-logo a{display: block;width: 176px;line-height: 120px;}
.Header-logo a img{width: 100%;object-fit: cover;}

/* 导航 */
.Header-navbar{float: right;margin-right: 46px;}
.Header-navbar ul li{display: inline-block;margin: 0 30px;position: relative;}
.Header-navbar ul li:last-child{margin-right: 0;}
.Header-navbar ul li:first-child{margin-left: 0;}
.Header-navmenu{display: inline-block;font-size: 16px;color: #555555;height: 120px;line-height: 120px;transition: all .4s ease;position: relative;}
.Header-navmenu::after{content: ''; width: 0%;height:4px;background-color: #d73339;position: absolute;right: 0;bottom: 0;transition: all .4s ease;}
.Header-navbar ul li.ontrue .Header-navmenu::after, .Header-navbar ul li:hover .Header-navmenu::after{width: 100%;right: auto;left: 0;}
.Header-navbar ul li.ontrue .Header-navmenu,.Header-navbar ul li:hover .Header-navmenu{color:#dd5d60;}
.Header-navarr{display: none;}

/* 导航下拉 */
.Header-drop{display: none; width: 215px;position: absolute;left: -76px;top: 120px;box-shadow: 2px 0 2px rgba(0, 0, 0, 0.16);}
.Header-drop a{display: inline-block; width: 100%;height: 52px;background-color: #ffffff;font-size: 15px;color: #666666;line-height: 52px;text-align: center;transition: all .4s ease;}
.Header-drop a:hover{background-color: #d73339;color: #ffffff;}


/* 语言 */
.Header-lang{float: right;font-size: 0;display: flex;}
.Header-lang i{display:inline-block; width:24px;height:120px;line-height: 120px;background: url('../images/common/lang.png') no-repeat center;}
.Header-lang span{display: inline-block;font-size: 16px;color: #d73339;margin-left: 6px;height:120px;line-height: 120px;}
/* 手机汉堡键 */
.Header-navclick{width: 24px;height: 120px;align-items: center;cursor: pointer;float: right;user-select: none;display: none;}
.Header-navclick span{width: 100%;height: 2px;background:#555555;display: block;position: relative;transition: all .2s linear;}
.Header-navclick span:before,.Header-navclick span:after{content: "";position: absolute;height: 2px;background:#555555;display: block;left: 0;width: 100%;transition: all .2s linear;}
.Header-navclick span:before{top: -8px;}
.Header-navclick span:after{top: 8px;}
.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(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); }
}

/* 底部 */
.Footer-wrapper{width: 100%; background: url(../images/common/footerbg.png)no-repeat left top/100% 100%;}
.Footer-navbaritem{width: 100%;display: flex;justify-content: space-between;}
.Footer-navbar{width:78%;overflow: hidden;border-right: 1px solid #494f56;padding: 56px 0 76px;}
.Footer-navbar ul li{float: left;width: 14.28%;font-size: 0;}
.Footer-menu{ font-size: 16px;color: #ffffff;margin-bottom: 16px;}
.Footer-link{width: 100%;}
.Footer-link a{display:block;font-size: 14px;color: #969da6;line-height: 30px;transition: all .4s ease;}
.Footer-link a:hover{color:#dd5d60;}
.Footer-ewmitem{float:right;overflow: hidden;padding: 56px 0 76px;width: 22%;display: flex;flex-direction: column;padding-left: 26px;}
.Footer-ewmul{display: flex;justify-content: space-between;flex-wrap: wrap;}
.Footer-wechat{width: 118px;height: 128px;padding: 0px 0 10px;margin-bottom: 10px;background: #ffffff;border-radius: 8px;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}
.Footer-wechat img{max-width: 88%;max-height: 88%; object-fit: cover;}
.Footer-wechat span{font-size: 13px;color: #000000;display: inline-block;text-align:center; position: absolute;left: 0;right: 0;bottom: 0;margin: 0 auto;}
.Footer-contact{font-size: 20px;color: #ffffff;margin-top: 4px;font-family: Arial;font-weight: 700;}
.Footer-contact i{display: inline-block; width: 18px;height: 18px;background: url('../images/common/phoneicon.png')no-repeat center;margin-right: 4px;}
.Footer-copy{width: 100%;border-top: 1px solid #494f56;height: 77px;}
.Footer-copy .contain{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.Footer-recorditem{color:#969da6;}
.Footer-recorditem span{font-size: 12px;}
.Footer-copyaddress p{font-size: 14px;color:#969da6}
/* 中间+共用部分 */
.Container-wrapper{width: 100%;margin-top: 120px;}
.incontain{width: 1400px;margin: 0 auto;}
.contain{width: 1300px;margin: 0 auto;}



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

@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .incontain{width: 1200px;}
    .contain{width: 1100px;}
    .Header-navbar ul li {margin: 0 16px;}
    .Footer-wechat {width: 100px;height: 116px;}
}

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

@media all and (max-width:1359px) {
    /* 1280 */
}

@media all and (max-width:1279px) {
    /* 1152 × (700) */
    .incontain{width: 980px;}
    .contain{width: 900px;}
    .Header-navbar {margin-right: 18px;}
    .Header-navbar ul li {margin: 0 8px;}
    .Header-drop {width: 158px;left: -52px;}
    .Footer-navbar{width:76%;}
    .Footer-ewmitem{width: 24%;}
    .Footer-wechat {width: 88px;height: 106px;}
    .Footer-wechat span {font-size: 12px;}
}

@media all and (max-width:1151px) {
    /* 1024 */
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .incontain{width: 92%;}
    .contain{width: 92%;}
    .Header-wrapper::after{display: block;}
    .Header-logo a {width: 118px;line-height: 60px;}
    .Header-navclick{display:flex;margin-left:24px;height: 60px;}
    .Header-lang i {height: 60px;}
    .Header-lang span{height:60px;line-height: 60px;}
    .Header-navbar{display: none; width: 100%;background-color: #ffffff; position: absolute;left: 0;top: 60px; height: calc(100vh - 60px);}
    .Header-navbar ul{width: 100%; display: flex;flex-direction: column;padding: 0 4%;}
    .Header-navbar ul li{width: 100%; margin: 0;position: relative;margin-bottom: 8px;}
    .Header-navmenu{width: 100%; height: 32px;line-height: 32px;}
    .Header-navmenu::after{display: none;}
    .Header-navarr{display: block;width:24px;height: 32px;background: url('../images/common/dropArrH.svg')no-repeat center/18px auto;position: absolute;right: 0;top: 0px;transition: all .4s ease;}
    .Header-navarr.active{transform: rotate(180deg);}
    .Header-drop{width: 100%;position: static;box-shadow: none;height: auto !important;padding: 0 6px;}
    .Header-drop a{text-align: start;height: 32px;line-height: 32px;font-size: 14px;}
    .Footer-wrapper{background-size: 100% 100%;}
    .Footer-navbaritem{flex-direction: column;}  
    .Footer-navbar{width: 100%;border: none;padding: 56px 0 0px;}
    .Footer-navbar ul{width: 100%;display: flex;flex-direction: column;}
    .Footer-navbar ul li {width: 100%;margin-bottom: 14px;}
    .Footer-menu{width: 100%; position: relative;margin-bottom: 10px;}
    .Footer-menu::after{content: '';width: 24px;height: 32px;background:url('../images/common/dropArr.svg')no-repeat center/18px auto;position: absolute;right: 0;top:0px;}
    .Footer-menu.active::after{transform: rotate(180deg);}
    .Footer-link{display: none;padding: 12px 0;}
    .Footer-link a{line-height: 24px;}
    .Footer-ewmitem {width:100%;align-items: center;justify-content: center;padding: 38px 0 76px;}
    .Footer-wechat {width: 100px;height: 116px;margin-right: 10px;}
    .Footer-copy .contain {flex-direction: column-reverse;justify-content: center;}
    .Footer-copyaddress{margin-bottom: 4px;}

    .Container-wrapper{margin-top: 60px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .Header-navbar ul li {margin-bottom: 0;}
    .Header-navmenu{height: 36px;line-height: 36px;}
    .Footer-navbar ul li {margin-bottom: 6px;}
    .Footer-navbar {padding: 40px 0 0px;}
    .Footer-menu {margin-bottom: 0;}
    .Footer-ewmitem {padding: 28px 0 38px;}
    .Footer-wechat {width: 100px;height: 116px;}
    .Footer-contact {font-size: 18px;margin-top: 10px;}
    .Footer-wechat span {line-height: 18px;}
    .Footer-copyaddress p {font-size: 12px;}
    .Footer-recorditem {display: flex;flex-direction: column;text-align: center;}
}