@charset "utf-8";

/* ============================================= */



/* 头部 */

.Header-wrapper{width: 100%;position: fixed;left: 0;top: 0;z-index: 999;background: #fff;}

.Header-container{width: 1280px;margin: 0 auto;}

.Header-logo{height: 80px;width: 250px;float: left;overflow: hidden;text-align: center;position: relative;}

.Header-logo:before{content: "";opacity: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #ec1b24;z-index: 4;transition: all .4s ease;-webkit-transition: all .4s ease;}

.Header-logo a{display: block;width: 100%;height: 100%;overflow: hidden;}

.Header-logo img{width: auto;object-fit: cover;margin: 26px auto 0;opacity: 1;position: relative;z-index: 4;transition: all .4s ease;-webkit-transition: all .4s ease;}

.Header-logo .logoimghover{display: block;}

.Header-logo .logoimg{display: none;}



.Header-sonbox:before{content: "";position: absolute;width: 100%;height: 1px;left: 0;bottom: 0;z-index: 1;background: #eee;}

.Header-sonbox .Header-logo:before{width: 0;opacity: 0;}

.Header-sonbox .Header-logo img{margin: 26px 0 0;}

.Header-sonbox .logoimghover{display: none;}

.Header-sonbox .logoimg{display: block;}



.Header-index:before{content: "";position: absolute;width: 100%;height: 1px;left: 0;bottom: 0;z-index: 1;background: #eee;}

.Header-index .Header-logo:before{width: 0;opacity: 0;}

.Header-index .Header-logo img{margin: 26px 0 0;}

.Header-index .logoimghover{display: block;}

.Header-index{background: #ec1b24;}

.Header-index .Header-navmenu{color: #fff;}

.Header-index .Header-navmenu:hover,.Header-index .Header-navmenu.ontrue {color: #fff;}

.Header-index .Header-navmenu:before{background: #fff;}

.Header-index .Header-lanclick i,.Header-index .Header-lanclick span{color: #fff;}

.Header-index .Header-lanclick i {background: url('../images/public/languageHW.png') no-repeat;}

.Header-index .Header-lanclick:hover span{color: #fff;}

.Header-index .Header-lanclick:hover i{background: url('../images/public/languageHW.png') no-repeat;}

.Header-index .Header-searclick {background: url('../images/public/searchHW.png') no-repeat center center;}

.Header-index .Header-searclick:hover {background: url('../images/public/searchHW.png') no-repeat center center;}

.Header-index .Header-searclick.ontrue {background: url('../images/public/closeHW.png') no-repeat center center /17px auto;}

.Header-index .Header-searclick.ontrue:hover {background: url('../images/public/closeHW.png') no-repeat center center /17px auto;}









.Header-search{float: right;position: relative;}

.Header-searclick{float: right;width: 38px;cursor: pointer;height: 80px;background: url('../images/public/search.png') no-repeat center center;position: relative;user-select: none;}

.Header-searsize{border: 1px solid #eee;border-top: none;display: none;position: absolute;width: 360px;height: 44px;background-color: #fff;right: 0;top: 80px;padding-right: 44px;box-sizing: border-box;font-size: 0;}

.Header-searsize input{width: 100%;box-sizing: border-box;border: none;height: 100%;padding: 0 10px;outline: none;font-size: 16px;color: #333;display: block;font-family: "medium";}

.Header-searsize span{width: 44px;height: 44px;cursor: pointer;display: inline-block;background: url('../images/public/search.png') no-repeat center center;position: absolute;right: 0;top: 0;z-index: 3;transition: all .2s linear;-webkit-transition: all .2s linear;}

.Header-searclick:hover,.Header-searsize span:hover{background: url('../images/public/searchH.png') no-repeat center center;}

.Header-searclick.ontrue{background: url('../images/public/close.png') no-repeat center center /17px auto;}

.Header-searclick.ontrue:hover{background: url('../images/public/closeH.png') no-repeat center center /17px auto;}



.Header-language{float: right;position: relative;}

.Header-lanclick{display: block;width: 120px;height: 80px;line-height: 84px;text-align: center;}

.Header-lanclick i,.Header-lanclick span{display: inline-block;vertical-align: middle;font-family: "semibold";font-size: 16px;color: #333;transition: all .2s linear;-webkit-transition: all .2s linear;}

.Header-lanclick i{width: 19px;height: 19px;background: url('../images/public/language.png') no-repeat;margin: -2px 6px 0 0;}

.Header-lanclick:hover span{color: #ec1b24;}

.Header-lanclick:hover i{background: url('../images/public/languageH.png') no-repeat;}



.Header-navclick{height: 60px;cursor: pointer;float: right;user-select: none;display: none;margin-left: 8px;}

.Header-navclick span{width: 30px;height: 3px;background: #333;display: block;position: relative;margin-top: 28.5px;transition: all .2s linear;}

.Header-navclick span:before,.Header-navclick span:after{content: "";position: absolute;height: 3px;background: #333;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); }

}





.Header-navbar{float: right;position: relative;}

.Header-navbars{width: 100%;}

.Header-navbar ul li{display: block;float: left;padding: 0 24px;}

.Header-navmenu{display: block;font-family: "semibold";font-size: 18px;color: #333;width: 100%;height: 80px;line-height: 84px;padding: 0 2px;transition: all .2s linear;-webkit-transition: all .2s linear;position: relative;}

.Header-navmenu:hover,.Header-navmenu.ontrue{color: #ec1b24;}

.Header-navmenu:before{content: "";position: absolute;left: auto;right: 0;bottom: 0;width: 0%;height: 5px;background: #ec1b24;z-index: 3;transition: all .2s linear;-webkit-transition: all .2s linear;}

.Header-navmenu:hover:before,.Header-navmenu.ontrue:before{width: 100%;right: auto;left: 0;}











/* 底部 */

.Footer-wrapper{width: 100%;}

.Footer-contact{width: 100%;background: #ec1b24;padding: 42px 4% 32px;overflow: hidden;text-align: center;}

.Footer-contit,.Footer-conbtn,.Footer-conlink{width: 100%;overflow: hidden;}

.Footer-contit h6{font-size: 48px;color: #fff;font-family: "semibold";text-transform: uppercase;}

.Footer-contit p{font-size: 16px;color: #fff;margin-top: 18px;}

.Footer-conbtn a{display: block;margin: 28px auto 0;width: 360px;height: 46px;border: 1px solid #fff;border-radius: 30px;line-height: 46px;text-align: center;font-size: 16px;color: #fff;text-transform: uppercase;transition: all .3s linear;-webkit-transition: all .3s linear;}

.Footer-conbtn a:hover{background: #fff;color: #ec1b24;}

.Footer-conlink{margin-top: 10px;}

.Footer-conlink p{font-size: 16px;color: #ffb4b7;margin-top: 8px;}

.Footer-conlink p a{text-decoration: underline;transition: all .2s linear;-webkit-transition: all .2s linear;}

.Footer-conlink p a:hover{color: #fff;}

.Footer-copyinfo{width: 100%;overflow: hidden;padding: 38px 0 46px;background: #fff;}

.Footer-copy{width: 1280px;margin: 0 auto;}

.Footer-logo{width: 100%;overflow: hidden;}

.Footer-logo img{width: auto;}

.Footer-wordslink{width: 100%;overflow: hidden;margin-top: 18px;}

.Footer-words{float: left;}

.Footer-words p{font-size: 12px;color: #666;margin-top: 8px;}

.Footer-link{float: right;font-size: 0;}

.Footer-link a{display: inline-block;margin-left: 12px;border-radius: 50%;transition: all .2s linear;-webkit-transition: all .2s linear;}

.Footer-link a:hover{-webkit-animation: shakeI 1s ease-in-out both;animation: shakeI 1s ease-in-out both;}

@keyframes shakeI {

    0% {transform: scale(1);}

    10%,20% {transform: scale(0.9) rotate(-3deg);}

    30%,50%,70%,90% {transform: scale(1) rotate(3deg);}

    40%,60%,80% {transform: scale(1) rotate(-3deg);}

    100% {transform: scale(1) rotate(0);}

}

@-webkit-keyframes shakeI {

    0% {transform: scale(1);}

    10%,20% {transform: scale(0.9) rotate(-3deg);}

    30%,50%,70%,90% {transform: scale(1) rotate(3deg);}

    40%,60%,80% {transform: scale(1) rotate(-3deg);}

    100% {transform: scale(1) rotate(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) */

}



@media all and (max-width:1359px) {

    /* 1280 × (800/854/1024) */

    .Header-container, .Footer-copy{width: 94%;}

}



@media all and (max-width:1279px) {

    /* 1152 × (864) */

    .Header-navbar ul li {padding: 0 18px;}

}



@media all and (max-width:1151px) {

    /* 1024 × (600/768) */

}





/* ------------------------手机端-------------------------- */

@media all and (max-width:1000px) {

    /* 360移动终端以上 */

    .Header-logo {height: 60px;width: auto;background: #fff;}

    .Header-navclick{display: block;}

    .Header-logo img {margin: 16px auto 0 !important;}

    .Header-logo .logoimghover {display: none;}

    .Header-logo .logoimg {display: block;}

    .Header-navbar{width: 100%;padding-bottom: 16px;display: none;}

    .Header-navbarsize {overflow-y: auto;}

    .Header-navbar ul li {width: 100%;padding: 0;border-bottom: 1px solid #f1f1f1;}

    .Header-navmenu:before{display: none;}

    .Header-navmenu{height: 44px;line-height: 44px;}

    .Header-lanclick{height: 60px;line-height: 64px;}

    .Header-searclick{height: 60px;}

    .Header-lanclick{width: 130px;}

    .Header-search{position: static;}

    .Header-searsize {width: 100%;top: 60px;border-top: 1px solid #f1f1f1;}

    .Header-searclick.ontrue:hover{background: url('../images/public/close.png') no-repeat center center /17px auto;}

    .Header-searclick:hover {background: url('../images/public/search.png') no-repeat center center;}



    .Footer-contact {padding: 32px 4% 24px;}

    .Footer-contit h6{font-size: 32px;}

    .Footer-contit p {margin-top: 12px;line-height: 22px;}

    .Footer-conbtn a {margin: 18px auto 0;width: 280px;height: 42px;line-height: 42px;}

    .Footer-conlink p {font-size: 14px;line-height: 20px;}

    .Footer-words{width: 100%;}

    .Footer-copyinfo {padding: 28px 0 32px;}

    .Footer-wordslink {margin-top: 12px;}

    .Footer-link{width: 100%;overflow: hidden;text-align: left;margin-top: 20px;}

    .Footer-link a{margin: 0 12px 0 0;}

}