@font-face {
    font-family: "iconfont";
    src: url('../../../../Fonts/iconfont/iconfont.eot'); 
    src: url('../../../../Fonts/iconfont/iconfont.eot') format('embedded-opentype'),
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQsAAsAAAAACEwAAAPfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDDAqEGINeATYCJAMQCwoABCAFhG0HRxs/B1GUzU2W7EdCdipzoQjt1VeNwl7acTYe/v9+fPvcd3+mRST38kr+vTxqdGiAhjiteUBa4P31m/YYqEHSnMpWVZAlpdEhnIgaOfMv8682QMCN2oNr6v9aB5Zns7lElmVq4QBHCTSg6AIZ8CaMWw5nXoVH12YCtboFIjayCyvBWUZ6BeJG0rPgnNLJNemhWqgsmVh1SszloDq9TjcBvPF/H/8hPGeSigIZuHmWJUDqryMfj5Fjy7EaXYNx41kgTqPAJJCJw1LbNjIMTCLV6gHKMFhXq+DXsY4O8OuIy1vtXx4hKYhKRFYP+EVpcUp8m0nw66hWOkM+yN0cNnevRg3eAov/ML7bGwgEp/remq6dO2s1A0ZUC2IlFqr0uEYcsfjw9IPdlMHeA3aODRq26NCMIz1H7Bk3ooGurafrBKahjhl+X334sPTuw7GPCGr3jqtWa3cmh6vqfXWc/YH90aN7j8aOuFCjwlHZGoohmTqm3l699OBFb5pgZhw6tmstqyU0hE2idE8ZMfzh+0p49KFKd9x/++k+GlWtJuz2mhEzHiUxqppKopaWNZDXbQyCB3t6oM/A03NezX0VIN4Je8v2BnUNyT8iyMPvfCW8GtfjZ8O15bDWQe78bXEcc3GfzxGfu7PTZ5QtjNoLdqvW8KQ5exNnG4WF0cnBRiFp9t4BOW45o7PoO5XuBoDEl6hK71Z9W/+YvjtuVW0RKHUyFEqdrCoMF7uP9Xi92at8ldfl09GFrnjm3dFdSrlNpu6/01qdrx3NWZwzrW5xx+uui01avnYRwA+qq5b6HMbY3rPvODguPuOzPg2bRV64TM2Yo6Z/ujiLWgSWPlC9lNF8xwKhAOWrylZyrEB+0TlPJhB0b/L/Fl3ib2fmmkt+Xvp+EwTtQqBaumm5H5vR5ERZ6pwlIdHnrPlVngO04JmB7JYT+BJqqZsScbV6OYaio3UqoVpHDEmVLihUG0QzfhIq1FmEStWWodaEnOl12shIkWswbhKC0GwPJI3eQaHZLTTjX0CFTp+hUnMk1NqPrgvWGU6iM2TMKlhA3DAk8RazyIwKHaSXY/0gIysnhT6lGss2yY3CgkOz4RxsxvIYQ2yD9eGKIiJRtphQNtoOG40WZJUt7ZhXgtsUxRofEiKWvSmYt5iAtk6GsRSYAOEMg0h4FmaiW1xB575fDtMbxIgl1+TVWathMhupfiRMsNAWaI7M3CrvWq6xGUwvnEIhQkQyCxMkG1kwIw1YINbydu0wniJYWw+fVbwQXEhsKwueX2F6wjVQi2yQI0UROSpU3kvDBrFmJ29EGD0ES5zEWhQpCAAA') format('woff2'),
    url('../../../../Fonts/iconfont/iconfont.woff') format('woff'),
    url('../../../../Fonts/iconfont/iconfont.ttf') format('truetype'),
    url('../../../../Fonts/iconfont/iconfont.svg') format('svg');
}
body{
    font-family: 'DinExp' !important;
    font-weight: 500;
    background-color: #000000;
    color: #ffffff;
    scroll-padding-top: 65px;
}
*{
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -moz-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
}
*:before,*:after{
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
input,select,textarea{
    background-color: inherit;
    border-radius: inherit;
    -webkit-appearance: none;
    border: 0;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'DinExp';
    font-weight: 500;
    font-size: inherit;
    margin: 0;
    line-height: initial;
}
::selection {
    background:#0066FF !important; 
    color: #fff !important;
}

::-moz-selection {
    background:#0066FF !important; 
    color: #fff !important;
}
::-webkit-selection {
    background:#0066FF !important; 
    color: #fff !important;
}
p{
    margin: 0;
    line-height: normal;
    font-size: inherit;
}
ul,li{
    margin: 0;
    padding: 0;
    line-height: inherit;
    font-size: inherit;
    list-style: none;
}
img{
    max-width: 100%;
}
form{
    max-width: none !important;
}

a,a:hover,a:focus,a:link,a:active,a:visited{
    text-decoration: none;
    color: inherit;
    transition: none;
    cursor: pointer;
}
.hide{
    display: none;
}
.show{
    display: block;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.after:after{
    display: block;
    clear: both;
    content: '';
}
.overflow{
    overflow: hidden;
}
.sec-color,.sec-color:hover, .sec-color:focus, .sec-color:link, .sec-color:active, .sec-color:visited{
    color: #00ff00;
}
.main{
    position: relative;
    width: 62.5%;
    margin: 0 auto;
}
.subscribe-form label{
    display: none;
}
.subscribe-form .hs-error-msg{
    display: block;
    margin-top: 5px;
    font-weight: 400;
}
.subscribe-form .hs-main-font-element{
    display: block;
    margin-top: 5px;
    font-weight: 400;
}
.page-warning{
    position: relative;
    z-index: 4;
    color: #fff;
    width: 100%;
    height: 80px;
    text-align: center;
    font-size: 20px;
    background: #000;
    font-family: 'DinExp-Bold';
}
.warning-info{
    padding: 16px 0;
    line-height: 24px;
}
.header-icon-event{
    width: 88px;
    display: inline-block;
    margin-left: 18px;
    cursor: pointer;
}
/* customizable snowflake styling */
.snowflake {
    color: #fff;
    font-size: 1.2em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}
.snowflake img{
    display: block;
    width: 25px;
    height: 25px;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

/** 点击节流 **/
.click-save{
    animation: throttle 2s step-end forwards;
    -webkit-animation: throttle 2s step-end forwards;
}
.click-save:active{
    animation: none;
}
@keyframes throttle {
    from {
        pointer-events: none;
    }
    to {
        pointer-events: all;
    }
}

.go-top {
    position: fixed;
    right: 30px;
    bottom: 2vw;
    z-index: 4;
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: url('../../../../../hubfs/imgs/2022/icon/icon-up.png') no-repeat;
    background-size: 100%;
}
.go-top:hover{
    background: url('../../../../../hubfs/imgs/2022/icon/icon-up-2.png') no-repeat;
    background-size: 100%;
}
.go-top img {
    width: 100%;
}
.go-top p{
    text-align: center;
    font-size: 11px;
    color: #fff;
}
.go-program {
    position: fixed;
    right: 30px;
    bottom: 60px;
    z-index: 4;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: url('../../../../../hubfs/imgs/2022/icon/icon-questionnaire.png') no-repeat;
    background-size: 100%;
}
.go-program:hover{
    background: url('../../../../../hubfs/imgs/2022/icon/icon-questionnaire-2.png') no-repeat;
    background-size: 100%;
}
.go-program img {
    width: 100%;
}
.go-program span {
    float: left;
    margin-top: 62px;
    text-align: center;
    font-size: 11px;
    color: #fff;
}
/*check age*/
.age-check{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 31;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
}
.age-check-cnt{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 650px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.age-check h3{
    margin-bottom: 20px;
    font-size: 25px;
    color: #ffffff;
}
.age-check p{
    margin-bottom: 40px;
    line-height: 26px;
    color: #aaaaaa;
    font-weight: 400;
}
.age-check p a:hover{
    color: #00ff00;
}
.age-check-btn{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 35px;
    line-height: 33px;
    border-radius: 18px;
    border: solid 1px #ffffff;
    font-weight: 400;
    color: #ffffff;
    transition: all .3s cubic-bezier(.12,.96,.53,1.01);
}
.age-check-over{
    margin-left: 85px;
    border-color: #00ff00;
    color: #00ff00;
}
.age-check-over:hover{
    color: #00ff00;
}
.age-check-warning{
    display: block;
    margin-top: 60px;
    color: #00ff00;
    font-size: 14px;
    font-weight: 400;
}
.age-check-btn:before{
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    z-index: -1;
    border-radius: 18px;
    content: '';
    transition: all .3s;
}
.age-check-btn:hover{
    color: #000000;
}
.age-check-over:hover:before{
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-color: #00ff00;
}
.age-check-under:hover:before{
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-color: #ffffff;
}
.fixed.header-cnt{
    position: fixed;
    top: 0;
    background-color: #111111 !important;
}
.mask{
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}
.vbtn{
    position: relative;
    display: inline-block;
    border: solid 1px #ffffff;
    font-weight: 400;
    color: #ffffff;
    transition: all .3s cubic-bezier(.12,.96,.53,1.01);
}
.vbtn:before{
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    z-index: -1;
    border-radius: 0.91vw;
    content: '';
    transition: all .3s;
}
.vbtn:focus,.vbtn:link,.vbtn:active,.vbtn:visited{
    color: #00ff00;
}
.vbtn:hover{
    color: #000000;
}
.vbtn:hover:before{
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-color: #00ff00;
}

/*弹框*/
.code-mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 101;
    overflow: auto;
}
.code-close{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.code-close:before{
    font-family: 'iconfont';
    font-size: 12px;
    color: #666;
    content: '\e6b7';
}
.code-box{
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 430px;
    transform: translate3d(-50%,-50%,0);
    background-color: #fff;
    border-radius: 10px;
    padding: 50px 20px 60px 20px;
    text-align: center;
}
.code-box img{
    width: 160px;
    height: 115.59px;
    margin-bottom: 30px;
}
.code-box p{
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #222222;
}

/*提示框*/
.success-mask,.box-mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 101;
    overflow: auto;
    display: none;
}
.success-close,.box-close{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.success-close:before,.box-close:before{
    font-family: 'iconfont';
    font-size: 12px;
    color: #666;
    content: '\e6b7';
}
.success-box,.box{
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 431px;
    transform: translate3d(-50%,-50%,0);
    background-color: #fff;
    border-radius: 8px;
    padding: 50px 40px 40px 40px;
    text-align: center;
}
.error-box{
    width: 455px;
}
.success-box img{
    width: 61px;
    height: 61px;
}
.success-box h2,.box h2{
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
    letter-spacing: 1px;
}
.success-box p{
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #666;
    text-align: left;
}
.success-btn{
    display: inline-block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    margin-top: 35px;
    background-color: #00ff00;
    color: #000000;
}
.success-btn:hover{
    color: #000000;
}
/*loading*/
.powershop-loading{
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    z-index: 103;
}
.powershop-loading.fixed{
    position: fixed;
    height: auto !important;
}
body .powershop-loading.transparent{
    background-color: rgba(0,0,0,0.6) !important;
}
.powershop-loading.transparent span{
    display: none;
}
.loading-main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}
.loading-main img{
    width: 50px;
    height: 50px;
}
.loading-main span{
    font-weight: 400;
    font-size: 16px;
    color: #aaaaaa;
    height: 50px;
    line-height: 50px;
    margin-left: 18px;
    display: inline-block;
}
.f-bold{
    font-weight: bold !important;
}
.f-d-bold{
    font-family: 'DinExp-Bold' !important;
}
.why-vp{
    position: relative;
    width: 100%;
    height: 50.52vw;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 3;
    background: #000;
}
.why-vp h3{
    text-align: center;
    margin-top: 0;
}
.why-vp .content{
    width: 59.5vw;
    height: 30vw;
    margin: 4vw auto;
    display: flex;
    justify-items: center;
    justify-content: center;
}
.why-vp .content .item{
    position: relative;
    width: 12vw;
    height: 25vw;
    margin-right: 1.5vw;
    transition: all .8s;
    cursor: pointer;
}
.why-vp .content .item:last-child{
    margin-right: 0;
}
.why-vp .content .item .title{
    position: absolute;
    width: 10vw;
    height: 4vw;
    left: 50%;
    top: 50%;
    margin-top: -2vw;
    margin-left: -5vw;
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
}
.why-vp .content .item .text{
    position: absolute;
    width: 22vw;
    left: 0;
    padding: 0 1vw;
    bottom: 0;
    font-size: 0.6vw;
    opacity: 0;
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
    line-height: 1.5;
}
.why-vp .content .item .title p{
    text-align: center;
    font-size: 0.66vw;
    line-height: 1.5;
}
.why-vp .content .item .title img{
    display: block;
    width: 1.38vw;
    height: 1.38vw;
    margin: 0 auto;
    margin-bottom: 0.5vw;
}
.why-vp .content .item.bg1{
    background: url('../../../../../hubfs/imgs/2022/activity/why-vp/pic_innovation.jpg') no-repeat left;
    background-size: cover;
}
.why-vp .content .item.bg2{
    background: url('../../../../../hubfs/imgs/2022/activity/why-vp/pic_design.jpg') no-repeat left;
    background-size: cover;
    margin-top: 5vw;
}
.why-vp .content .item.bg3{
    background: url('../../../../../hubfs/imgs/2022/activity/why-vp/pic_compliance.jpg') no-repeat right;
    background-size: cover;
}
.why-vp .content .item.bg4{
    background: url('../../../../../hubfs/imgs/2022/activity/why-vp/pic_persistence.jpg') no-repeat right;
    background-size: cover;
    margin-top: 5vw;
}

@keyframes flip-front {
    0% {
        -webkit-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg)
    }
    50% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    100% {
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
}
@keyframes flip-back {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    50% {
        -webkit-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg)
    }
    100% {
        -webkit-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg)
    }
}
.flip-front {
    -webkit-animation-name: flip-front;
    animation-name: flip-front;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.flip-back {
    -webkit-animation-name: flip-back;
    animation-name: flip-back;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.halloween{
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 26vh;
    z-index: 5;
}
.halloween.r{
    left: auto;
    right: 0;
}
.halloween-p{
    position: absolute;
    left: 170px;
    top: 0;
    width: 10%;
    height: 80px;
    z-index: 12;
}
.halloween-s{
    position: absolute;
    right: 170px;
    top: -10px;
    width: 20%;
    height: 300px;
    z-index: 12;
    opacity: 0.7;
}
.halloween-bat{
    position: absolute;
    top: 20px;
    left: 26%;
    display: block;
    width: 44px;
    height: 25px;
    background: url('../../../2023/index/icon-bat.svg') no-repeat center;
    background-size: 100%;
    animation-duration: 3s !important;
}
.halloween-bat.r{
    background: url('../../../2023/index/icon-bat-r.svg') no-repeat center;
    background-size: 100%;
    left: auto;
    right: 26%;
    transform: rotate(-40deg);
}
.act-enter{
    display: block;
    position: fixed;
    right: 40px;
    bottom: 10vw;
    text-align: center;
    width: 170px;
    height: 170px;
    z-index: 4;
    background: transparent;
    border-radius: 50%;
}
.act-enter .close{
    position: absolute;
    right: 0;
    top: -4px;
    height: 16px;
    width: 16px;
    content: '';
    display: block;
    background: url('../../../2023/activity/armour/icon_close.png') no-repeat center;
    background-size: 100%;
    border-radius: 50%;
    cursor: pointer;
}
.act-enter .inno{
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 10px;
}
.act-enter.d{
    width: 90px;
    height: 90px;
    background: transparent;
    right: 20px;
    bottom: 2vw;
}
.act-enter.d .inno{
    width: 90px;
    height: 90px;
}
.act-enter.d .close{
    height: 20px;
    width: 20px;
    background: url('../../../2023/activity/icon/close_fill.svg') no-repeat center;
    background-size: 100%;
}
.act-enter .front {
    display: block;
    position: absolute;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.act-enter .back{
    display: block;
    position: absolute;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.f_underline{
    text-decoration: underline !important;
}
.section-banner{
    position: relative;
}
.section-banner .video-btn{
    position: relative;
    padding: 10px 46px 10px 18px;
    border-radius: 24px;
    border: 1px solid #F5F5F5;
    color: #F5F5F5;
}
.section-banner .video-btn::after{
    position: absolute;
    right: 15px;
    top: 8px;
    content: '';
    width: 22px;
    height: 22px;
    background: url('../../../2024/icon/icon_video_play.svg') no-repeat center;
    background-size: 100%;
}
.section-pro{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
.section-img-box{
    position: relative;
    height: 100%;
}
.section-content{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 1;
}
.text-fadeIn{
    transition: all 1s;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 25%, 0);
        -ms-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
.section-full-img{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    object-fit: cover;
    object-position: center;
}
.section-theme{
    margin-inline-start: auto;
    margin-inline-end: auto;
    position: relative;
    max-width: 1120px;
}
img[src=""],img:not([src]){
    opacity: 0;
}
#santa {
    width: 85px;
    height: 85px;
    background: url('../../../../../hubfs/imgs/2024/index/banner/santa-run.png') no-repeat left top;
    animation: santa-animation 1s steps(12) infinite;
    -webkit-animation: santa-animation 1s steps(12) infinite; 
}
#santaPath {
    position: absolute;
    width: 85px;
    bottom: -60px;
    left: 0;
    z-index: 20;
    animation: santa-run 12s infinite;
    -webkit-animation: santa-run 12s infinite;
    transition: all .5s;
}
  
@keyframes santa-animation { 0% { background-position: 0px 0;} 100% { background-position: -1024px 0;} }

@keyframes santa-run { 0% { left: 0;opacity: 0.8;transform: scale(0.7);} 50% {opacity: 1;} 100% { left: calc(100% - 120px);opacity: 0.9;transform: scale(1.2)} }

@media screen and (min-width: 1024px){
    .mb-10{
        margin-bottom: 1vw !important; 
    }
    .mb-20{
        margin-bottom: 1.8vw !important; 
    }
    .f-14{
        font-size: 0.68vw !important; /* 16px */
    }
    .f-16{
        font-size: 0.8vw !important; /* 16px */
    }
    .f-18{
        font-size: 0.9vw !important; /* 18px */
    }
    .f-20{
        font-size: 1vw !important; /* 20px */
    }
    .f-24{
        font-size: 1.18vw !important; /* 24px */
    }
    .f-32{
        font-size: 1.55vw !important; /* 32px */
    }
    .f-36{
        font-size: 1.62vw !important; /* 36px */
    }
    .f-40{
        font-size: 1.8vw !important; /* 40px */
    }
    .f-48{
        font-size: 2.2vw !important; /* 48px */
    }
    .f-56{
        font-size: 2.75vw !important; /* 56px */
    }
    .f-72{
        font-size: 3.18vw !important; /* 72px */
    }
    .f-100{
        font-size: 4vw !important; /* 120px */
    }
    .f-120{
        font-size: 5.28vw !important; /* 120px */
    }
    .f-140{
        font-size: 6.18vw !important; /* 120px */
    }
    .mb_4{
        margin-bottom: 4px !important;
    }
    .mb_7{
        margin-bottom: 7px !important;
    }
    .mb_9{
        margin-bottom: 9px !important;
    }
    .mb_10{
        margin-bottom: 10px !important;
    }
    .mb_11{
        margin-bottom: 11px !important;
    }
    .mb_12{
        margin-bottom: 12px !important;
    }
    .mb_14{
        margin-bottom: 14px !important;
    }
    .mb_15{
        margin-bottom: 15px !important;
    }
    .mb_16{
        margin-bottom: 16px !important;
    }
    .mb_18{
        margin-bottom: 18px !important;
    }
    .mb_20{
        margin-bottom: 20px !important;
    }
    .mb_21{
        margin-bottom: 21px !important;
    }
    .mb_22{
        margin-bottom: 22px !important;
    }
    .mb_24{
        margin-bottom: 24px !important;
    }
    .mb_25{
        margin-bottom: 25px !important;
    }
    .mb_26{
        margin-bottom: 26px !important;
    }
    .mb_28{
        margin-bottom: 28px !important;
    }
    .mb_32{
        margin-bottom: 32px !important;
    }
    .mb_35{
        margin-bottom: 35px !important;
    }
    .f_12{
        font-size: 12px !important;
    }
    .f_14{
        font-size: 14px !important;
    }
    .f_15{
        font-size: 15px !important;
        line-height: 20px;
    }
    .f_16{
        font-size: 16px !important;
    }
    .f_17{
        font-size: 17px !important;
    }
    .f_18{
        font-size: 18px !important;
    }
    .f_19{
        font-size: 19px !important;
    }
    .f_20{
        font-size: 20px !important;
    }
    .f_21{
        font-size: 21px !important;
    }
    .f_22{
        font-size: 22px !important;
    }
    .f_24{
        font-size: 24px !important;
    }
    .f_26{
        font-size: 26px !important;
    }
    .f_27{
        font-size: 27px !important;
    }
    .f_28{
        font-size: 28px !important;
    }
    .f_30{
        font-size: 30px !important;
        line-height: 36px;
    }
    .f_32{
        font-size: 32px !important;
        line-height: 40px;
    }
    .f_36{
        font-size: 36px !important;
    }
    .f_40{
        font-size: 40px !important;
        line-height: 44px;
    }
    .f_44{
        font-size: 44px !important;
        line-height: 60px;
    }
    .f_48{
        font-size: 48px !important;
        line-height: 52px;
    }
    .f_52{
        font-size: 52px !important;
    }
    .f_53{
        font-size: 53px !important;
    }
    .f_54{
        font-size: 54px !important;
        line-height: 60px;
    }
    .f_56{
        font-size: 56px !important;
    }
    .f_60{
        font-size: 60px !important;
        line-height: 60px;
    }
    .f_64{
        font-size: 64px !important;
        line-height: 70px;
    }
    .f_72{
        font-size: 72px !important;
        line-height: 80px;
    }
    .f_120{
        font-size: 120px !important;
        line-height: 120px;
    }
    .f_80{
        font-size: 80px !important;
    }
    .f_180{
        font-size: 180px !important;
        line-height: 1;
    }
    .x-hide{
        display: none !important;
    }
    /*header*/
    .home-santa{
        bottom: 10px;
        display: block;
        position: fixed;
        right: 35px;
        z-index: 20;
        width: 7.5vw;
        height: 7.5vw;
    }
    .header-acc{
        position: relative;
        width: 100%;
        height: 65px;
    }
    .trans .header-acc{
        height: 0;
    }
    .trans .header-cnt{
        background-color: rgba(17, 17, 17, 0.7);
        backdrop-filter: saturate(50%) blur(4px);
        -webkit-backdrop-filter: saturate(50%) blur(4px);
    }
    .header-cnt{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        width: 100%;
        height: 65px;
        color: #fff;
        background-color: #111111;
        transition: background-color 0.3s;
    }
    /* .header-cnt::after{
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 56px;
        width: 100%;
        height: 64px;
        background: url('../../../../../hubfs/imgs/2022/index/xmas/top_snow.png') no-repeat center;
        background-size: cover;
        z-index: 1;
    } */
      
    .logo{
        position: relative;
        z-index: 21;
        display: inline-block;
        margin-top: 19px;
        margin-left: 45px;
        width: 155px;
    }
    .nav{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 0;
        z-index: 20;
    }
    .nav>li{
        display: inline-block;
        padding: 23px 18px;
        font-size: 15px;
        cursor: pointer;
    }
    .nav li:hover>a,.nav li.active>a{
        color: #00ff00 !important;
        text-decoration: none !important;
    }
    .nav li:hover .nav-child{
        display: block;
        cursor: default;
    }
    .nav-other{
        position: relative;
        z-index: 20;
        float: right;
        display: flex;
        padding-right: 40px;
    }
    .store,.search{
        width: 21px;
        margin-right: 25px;
        padding-top: 22px;
    }
    .country{
        position: relative;
        padding-top: 21px;
        padding-bottom: 22px;
        line-height: 22px;
        font-size: 14px;
    }
    .country img{
        margin-right: 8px;
        width: 22px;
        float: left;
    }
    .nav-mask{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        backdrop-filter: blur(6px);
        background-color: rgba(34,34,34, 0.7);
    }
    .nav-child{
        display: none;
        position: absolute;
        left: 0;
        top: 65px;
        z-index: 2;
        width: 100%;
        background-color: rgba(34,34,34, 0.8);
        font-size: 0;
    }
    .nav-child>li{
        display: inline-block;
        font-size: 15px;
        padding: 0 30px;
    }
    .nav-child>li>a{
        display: inline-block;
        padding-top: 23px;
        padding-bottom: 23px;
    }
    .series{
        display: none;
        position: absolute;
        left: 0;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 40px;
        background-color: rgba(34,34,34, 0.8);
        font-size: 14px;
    }
    .nav-child>li.active .series{
        display: block;
    }
    .series-list{
        margin-bottom: 40px;
        font-size: 0;
    }
    .series-list li{
        display: inline-block;
        width: 200px;
        margin-right: 20px;
    }
    .series-list li:last-child{
        margin-right: 0;
    }
    .series-list .pro-img{
        display: block;
        margin-bottom: 20px;
        background-color: #ffffff;
        border-radius: 20px;
    }
    .series-list img{
        transition: transform 0.5s ease;
        border-radius: 20px;
    }
    .series-list img:hover{
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
}
    .series-list span{
        font-size: 14px;
    }
    .series-more{
        color: #00ff00 !important;
    }
    .country-list{
        display: none;
        position: absolute;
        top: 100%;
        left: -4px;
        padding: 10px 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: rgba(34,34,34, 0.8);
        font-size: 14px;
    }
    .country:hover .country-list{
        display: block;
    }
    .country-list li{
        padding: 6px 10px;
    }
    .country-list li:hover{
        color: #00ff00;
    }
    .search-box{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0 220px;
        height: 100%;
        z-index: 20;
        background-color: #111111;
    }
    .search-cnt{
        position: relative;
        padding: 12px 0;
        width: 100%;
        max-width: 800px;
        height: 100%;
        margin: 0 auto;
    }
    .search-btns{
        position: absolute;
        width: 20px;
        height: 41px;
        background: url('../../com/icon-search.png') no-repeat center center / 20px 20px;
        animation: slideInRight 0.5s both ease;
    }
    .search-cnt form{
        display: inline-block;
        max-width: none;
        width: 100%;
        height: 100%;
    }
    .search-cnt input{
        padding: 0 40px;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 20px;
        background-color: transparent;
        font-size: 15px;
        color: #fff;
        animation: slideInRight 0.5s both ease;
        -webkit-animation: slideInRight 0.5s both ease;
}
    .search-cnt input:placeholder{
        color: #666666;
    }
    .search-close{
        position: absolute;
        right: 15px;
        width: 30px;
        height: 41px;
        background: url('../../../../../hubfs/imgs/2022/com/close.png') no-repeat center center / 18px 18px;
    }
    @keyframes slideInRight{
        from{
            transform:translate3d(100%,0,0);
        }
        to{
            transform:translate3d(0,0,0);
        }
    }
    .rec-list{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px 40px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: rgba(34,34,34, 0.8);
        font-size: 14px;
    }
    .rec-list li{
        padding: 10px 0;
    }
    .rec-list li:first-child{
        font-size: 12px;
        color: #aaaaaa;
    }
    .nav-cnt,.nav-fl{
        display: inline;
    }
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .animated.infinite-5 {
        -webkit-animation-iteration-count: 15;
        animation-iteration-count: 15;
    }
    .animated.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    /*footer*/
    .footer-page{
        position: relative;
        z-index: 3;
        padding: 40px 6%;
        background-color: #111111;
        font-size: 15px;
        color: #999999;
        font-weight: 400;
    }
    .newsletter,.social{
        position: relative;
        float: left;
        width: 50%;
    }
    .social{
        padding-left: 4%;
    }
    .subscribe h3{
        margin-bottom: 10px;
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
    }
    .subscribe p{
        max-width: 530px;
        line-height: 22px;
    }
    .subscribe-form{
        position: relative;
        width: 50%;
        margin-top: 10px;
    }
    .subscribe-form input[type="email"]{
        height: 40px;
        width: 100%;
        background-color: #333333;
        border-radius: 19.5px;
        color: #fff;
        padding: 0 15px;
        padding-right: 110px;
        font-size: 14px;
        border: 0;
        font-weight: 400;
    }
    .subscribe-form input[type="email"]::placeholder{
        color: #999 !important;
    }
    .subscribe-form input[type="submit"]{
        color: #fff;
        font-size: 14px;
        position: absolute;
        top: 3px;
        right: 3px;
        width: 107px;
        border-radius: 16.5px;
        height: 33px;
        border: 0;
        background-color: #00ff00;
        padding: 0;
        text-align: center;
        color: #000000;
        font-weight: 400;
    }
    .subscribe-form input[type="submit"]:hover{
        background-color: #00ff00;
        color: #000000;
    }
    .subscribe-info{
        font-size: 13px;
    }
    .social-link{
        margin-top: 10px;
    }
    .social-link a{
        display: inline-block;
        width: 34px;
        margin-right: 30px;
    }
    .social-link a:last-child{
        margin-right: 0;
    }
    .footer-nav{
        padding: 80px 10% 80px 0;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-flow: wrap;
    }
    .footer-nav-item{
        display: flex;
        flex-direction: column;
    }
    .footer-nav-item h4 a{
        cursor: unset;
        color: #ffffff;
        font-weight: 500;
        font-size: 20px;
    }
    .footer-nav-item ul{
        margin-top: 15px;
    }
    .footer-nav-item li{
        padding: 6px 0;
    }
    .footer-nav-item li a:hover{
        color: #ffffff;
    }
    .hot-tel,.hot-email{
        display: block;
        padding-left: 5px;
        margin-bottom: 12px;
        color: rgba(170, 170, 170, 0.6);
    }
    .hot-tel img,.hot-email img{
        float: left;
        width: 18px;
        margin-top: 2px;
        margin-right: 10px;
    }
    .hot-line label{
        display: block;
        margin-bottom: 20px;
        color: #ffffff;
    }
    .footer-info p{
        line-height: 22px;
        margin-bottom: 15px;
    }
    .footer-info a{
        color: #00ff00;
    }
    .copyright{
        margin-bottom: 0;
    }
    .copyright a{
        color: #999999;
    }
    .copyright a:hover{
        color: #ffffff;
    }
}
@media screen and (max-width: 1023px){
    .section-pro{
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .halloween{
        width: 50%;
        left: 25%;
        height: 32vh;
    }
    .halloween.r{
        display: none;
    }
    .halloween-p{
        left: 140px;
        width: 20%;
        height: 74px;
    }
    .halloween-s{
        display: none;
    }
    .act-enter{
        display: block;
        position: fixed;
        right: 15px;
        bottom: 4.2rem;
        text-align: center;
        width: 100px;
        height: 100px;
        z-index: 4;
    }
    .act-enter .close{
        position: absolute;
        right: 0;
        top: 0;
        height: 14px;
        width: 14px;
        content: '';
        display: block;
        background: url('../../../2023/activity/armour/icon_close.png') no-repeat center;
        background-size: 100%;
        cursor: pointer;
    }
    .act-enter .inno{
        display: block;
        width: 100%;
        height: 100%;
        margin-top: 9px;
    }
    .act-enter.d{
        width: 80px;
        height: 80px;
        right: 15px;
        bottom: 0.5rem;
    }
    .act-enter.d .inno{
        width: 80px;
        height: 80px;
    }
    .home-santa{
        bottom: 0.5rem;
        display: block;
        position: fixed;
        right: 0.2rem;
        z-index: 20;
        width: 2rem;
        height: 2rem;
    }
    .snowflake img{
        display: block;
        width: 15px;
        height: 15px;
    }
    .mb-10{
        margin-bottom: 0.12rem !important; 
    }
    .mb-20{
        margin-bottom: 0.24rem !important; 
    }
    .f-14{
        font-size: 0.18rem !important; /* 16px */
    }
    .f-16{
        font-size: 0.24rem !important; /* 16px */
    }
    .f-18{
        font-size: 0.24rem !important; /* 18px */
    }
    .f-20{
        font-size: 0.24rem !important; /* 20px */
    }
    .f-24{
        font-size: 0.28rem !important; /* 24px */
    }
    .f-32{
        font-size: 0.32rem !important; /* 32px */
    }
    .f-36{
        font-size: 0.34rem !important; /* 36px */
    }
    .f-40{
        font-size: 0.36rem !important; /* 32px */
    }
    .f-48{
        font-size: 0.4rem !important; /* 48px */
    }
    .f-56{
        font-size: 0.48rem !important; /* 56px */
    }
    .f-72{
        font-size: 0.52rem !important; /* 56px */
    }
    .f-100{
        font-size: 0.6rem !important; /* 56px */
    }
    .f-120{
        font-size: 0.64rem !important; /* 56px */
    }
    .f-140{
        font-size: 0.72rem !important; /* 140px */
    }
    .mb_4{
        margin-bottom: 4px !important;
    }
    .mb_7{
        margin-bottom: 7px !important;
    }
    .mb_9{
        margin-bottom: 9px !important;
    }
    .mb_10{
        margin-bottom: .2rem !important;
    }
    .mb_11{
        margin-bottom: .22rem !important;
    }
    .mb_12{
        margin-bottom: .24rem !important;
    }
    .mb_14{
        margin-bottom: .16rem !important;
    }
    .mb_15{
        margin-bottom: .16rem !important;
    }
    .mb_16{
        margin-bottom: .2rem !important;
    }
    .mb_18{
        margin-bottom: 16px !important;
    }
    .mb_20{
        margin-bottom: 16px !important;
    }
    .mb_21{
        margin-bottom: 16px !important;
    }
    .mb_22{
        margin-bottom: 16px !important;
    }
    .mb_24{
        margin-bottom: 0.24rem !important;
    }
    .mb_25{
        margin-bottom: 18px !important;
    }
    .mb_26{
        margin-bottom: 18px !important;
    }
    .mb_28{
        margin-bottom: 20px !important;
    }
    .mb_32{
        margin-bottom: 20px !important;
    }
    .mb_35{
        margin-bottom: 0.36rem !important;
    }
    .pb_35{
        padding-bottom: 18px !important;
    }
    .f_12{
        font-size: .24rem !important;
    }
    .f_14{
        font-size: .28rem !important;
    }
    .f_15{
        font-size: .3rem !important;
    }
    .f_16{
        font-size: .32rem !important;
    }
    .f_17{
        font-size: .34rem !important;
    }
    .f_18{
        font-size: .36rem !important;
    }
    .f_19{
        font-size: .38rem !important;
    }
    .f_20{
        font-size: .4rem !important;
    }
    .f_21{
        font-size: .32rem !important;
    }
    .f_22{
        font-size: .32rem !important;
    }
    .f_24{
        font-size: .36rem !important;
    }
    .f_26{
        font-size: .52rem !important;
    }
    .f_27{
        font-size: .54rem !important;
    }
    .f_28{
        font-size: 24px !important;
    }
    .f_30{
        font-size: .6rem !important;
    }
    .f_32{
        font-size: .64rem !important;
    }
    .f_36{
        font-size: .72rem !important;
    }
    .f_40{
        font-size: 30px !important;
    }
    .f_44{
        font-size: 30px !important;
    }
    .f_48{
        font-size: 30px !important;
    }
    .f_52{
        font-size: 32px !important;
    }
    .f_53{
        font-size: 32px !important;
    }
    .f_54{
        font-size: 32px !important;
        line-height: 35px;
    }
    .f_56{
        font-size: 30px !important;
    }
    .f_60{
        font-size: 32px !important;
    }
    .f_64{
        font-size: 48px !important;
    }
    .f_72{
        font-size: 56px !important;
    }
    .f_120{
        font-size: 80px !important;
    }
    .f_80{
        font-size: 80px !important;
    }
    .f_180{
        font-size: 180px !important;
        line-height: 1;
    }
    .section-theme{
        max-width: 100%;
    }
    .section-content{
        padding: 0 0.5rem;
    }
    .contact-icon span{
        display: none !important;
    }
    .why-vp{
        height: 35.5rem;
    }
    .why-vp .content{
        width: 6.5rem;
        height: auto;
        margin: 1rem auto;
        display: block
    }
    .why-vp .content .item{
        width: 6.5rem;
        height: 5rem;
        margin: 0;
    }
    .why-vp .content .item .title{
        width: 4rem;
        height: 1rem;
        left: 50%;
        top: 50%;
        margin-top: -1.5rem;
        margin-left: -2rem;
    }
    .why-vp .content .item .title img{
        width: 0.5rem;
        height: 0.5rem;
        margin-bottom: 0.2rem;
    }
    .why-vp .content .item .title p{
        font-size: 0.24rem;
    }
    .why-vp .content .item .text{
        width: 6rem;
        opacity: 1;
        font-size: 0.18rem;
        left: 0.25rem;
        bottom: -1.5rem;
    }
    
    .why-vp .content .item.bg2{
        margin-top: 3rem;
    }
    .why-vp .content .item.bg3{
        margin-top: 3rem;
    }
    .why-vp .content .item.bg4{
        margin-top: 3rem;
    }
    .why-vp .content .item.bg4 .text{
        bottom: -2.5rem;
    }
    .header-icon-event{
        margin: 0.5rem;
    }
    html{
        font-size: 13.33333333333333vw !important;
    }
    .s-hide{
        display: none !important;
    }
    .main{
        width: 100%;
        padding: 0 0.3rem;
    }
    .vbtn:before{
        border-radius: 0.25rem;
    }
    .page-warning{
        font-size: .32rem;
        line-height: .35rem;
        height: 1.6rem;
    }
    .warning-info{
        padding: .32rem 0;
    }
    .header-acc{
        width: 100%;
        height: 60px;
        z-index: 10;
    }
    /* .header-cnt::after{
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 50px;
        width: 100%;
        height: 48px;
        background: url('../../../../../hubfs/imgs/2022/index/xmas/top_snow.png') no-repeat center;
        background-size: cover;
        z-index: 1;
    } */
    .header-cnt{
        position: relative;
        left: 0;
        top: 0;
        z-index: 20;
        width: 100%;
        height: 60px;
        color: #fff;
        font-size: 15px;
    }
    .nav-fl{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        padding: 14px 15px 12px 15px;
        background-color: #111;
    }
    .logo{
        position: relative;
        z-index: 21;
        display: inline-block;
        width: 130px;
        padding: 0;
        margin-top: 6px;
    }
    .locator{
        position: absolute;
        top: 21px;
        right: 134px;
        width: 21px;
        height: 21px;   
    }
    .store{
        position: absolute;
        top: 21px;
        right: 94px;
        width: 21px;
        height: 21px;
    }
    .search{
        position: absolute;
        top: 21px;
        right: 54px;
        width: 21px;
        height: 21px;
    }
    .navbar{
        position: absolute;
        top: 19px;
        right: 15px;
        width: 22px;
        height: 24px;
    }
    .navbar span{
        display: block;
        padding-top: 3px;
        padding-bottom: 3px;
        transition: all .4s ease;
    }
    .navbar span:before{
        content: '';
        display: block;
        height: 2px;
        width: 22px;
        border-top-right-radius: 2px;
        border-bottom-left-radius: 2px;
        transition: transform .4s ease .2s;
        background-color: #fff;
    }
    .navbar.open span:nth-child(1) {
        transform: translateY(8px);
    }
    .navbar.open span:nth-child(1):before {
        transform: rotate(45deg);
    }
    .navbar.open span:nth-child(2) {
        opacity: 0;
    }
    .navbar.open span:nth-child(3) {
        transform: translateY(-8px);
    }
    .navbar.open span:nth-child(3):before {
        transform: rotate(-45deg);
    }
    .nav-cnt{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding-top: 60px;
        overflow-y: auto;
        background-color: #000;
    }
    .nav-cnt a:hover{
        color: #00ff00;
    }
    .nav-item{
        position: relative;
    }
    .nav-item:after{
        content: '';
        position: absolute;
        right: 20px;
        top: 18px;
        width: 14px;
        height: 14px;
        background: url('../../../../../hubfs/imgs/2022/com/icon-sub-add.png') no-repeat -14px 0 / 28px 14px;
    }
    .nav>li>a,.nav-other>li>a{
        display: block;
        height: 51px;
        padding: 0 15px;
        line-height: 50px;
    }
    .nav>li>a:after,.nav-other>li>a:after{
        content: '';
        display: block;
        width: 100%;
        border-bottom: 1px solid #333;
    }
    .nav-item.open{
        background-color: #111111;
    }
    .nav-item.open:after{
        background-position: 0 0;
    }
    .nav>li.open>a:after,.nav-other>li.open>a:after{
        border: 0;
    }
    .nav-item>ul{
        display: none;
        font-size: 12px;
        background-color: #111111;
    }
    .nav-item>ul>li>a{
        display: block;
        padding: 10px 15px;
        color: #999999;
    }
    .country img{
        float: left;
        margin-top: 12px;
        margin-right: 5px;
        width: 22px;
    }
    .search-box{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 80px 20px 0 20px;
        overflow-y: auto;
        background-color: #000;
        font-size: 12px;
    }
    .search-cnt{
        position: relative;
    }
    .search-btns{
        position: absolute;
        top: 0.19rem;
        left: 0.42rem;
        width: 0.42rem;
        height: 0.42rem;
        background: url('../../com/icon-search.png') no-repeat center / 0.42rem;
    }
    .search-cnt input{
        width: 100%;
        height: 0.8rem;
        padding-left: 1rem;
        padding-right: 0.3rem;
        background-color: #111;
        border: 0;
        border-radius: 0.4rem;
        color: #fff;
        font-size: 0.28rem;
    }
    .search-cnt input:placeholder{
        font-size: 14px;
        color: #666666;
    }
    .rec-list{
        margin-top: 10px;
        padding: 0 10px;
    }
    .rec-list li{
        padding: 8px 0;
        color: #999999;
    }
    .rec-list li:first-child{
        color: #fff;
    }

    /*footer*/
    .footer-page{
        position: relative;
        padding: 20px 0;
        background-color: #111111;
        font-weight: 400;
        font-size: 12px;
        color: #aaaaaa;
    }
    .subscribe{
        padding: 0 15px;
    }
    .newsletter{
        position: relative;
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .subscribe h3{
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
    }
    .subscribe p{
        line-height: 16px;
    }
    .subscribe-form{
        position: relative;
        margin-top: 15px;
    }
    .subscribe-form .input{
        width: 100%;
        height: 35px;
        background-color: #333333;
        border-radius: 10px;
    }
    .subscribe-form input[type="email"] {
        width: 100%;
        height: 35px;
        padding: 0 96px 0 10px;
        background-color: #333333 !important;
        border-radius: 10px;
        color: #fff;
        border: 0;
    }
    .subscribe-form input[type="email"]::placeholder{
        color: #999 !important;
        font-size: 12px;
    }
    .subscribe-form input[type="submit"] {
        position: absolute;
        top: 2.5px;
        right: 2.5px;
        width: 98px;
        height: 30px;
        line-height: 29px;
        font-size: 12px;
        font-weight: 400;
        color: #000000;
        font-weight: normal;
        border: 0 !important;
        padding: 0 !important;
        border-radius: 9px!important;
        background-color: #00ff00 !important;
    }
    .subscribe-form input[type="submit"]:hover{
        background-color: #00ff00;
        color: #000000;
    }
    .subscribe-form .submitted-message{
        line-height: 29px;
        font-size: 12px;
    }
    .subscribe-info{
        display: block;
        margin-top: 8px;
        font-size: 11px;
    }
    .social{
        margin-top: 20px;
        padding-bottom: 35px;
    }
    .social-link{
        margin-top: 18px;
    }
    .social-link a{
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-right: 30px;
    }
    .footer-nav{
        border-top: 1px solid #565759;
    }
    .footer-nav-item{
        border-bottom: 1px solid #565759;
    }
    .footer-nav-item h4{
        position: relative;
        padding: 0 15px;
        line-height: 50px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }
    .footer-nav-item h4:after{
        content: '';
        position: absolute;
        right: 20px;
        top: 18px;
        width: 14px;
        height: 14px;
        background: url('../../../../../hubfs/imgs/2022/com/icon-sub-add.png') no-repeat -14px 0 / 28px 14px;
    }
    .footer-nav-item.open{
        background-color: #222222;
    }
    .footer-nav-item.open h4:after{
        background-position: 0 0;
    }
    .footer-nav-item h4 a{
        display: block;
    }
    .footer-nav-item>ul{
        display: none;
        padding-bottom: 10px;
    }
    .footer-nav-item>ul>li>a{
        display: block;
        padding: 6px 15px;
    }
    .footer-nav-item>ul>li>a:hover{
        color: #fff;
    }
    .footer-contact-us{
        padding: 0 15px;
    }
    .hot-tel,.hot-email{
        display: block;
        padding-left: 5px;
        margin-bottom: 12px;
        color: rgba(170, 170, 170, 0.6);
    }
    .hot-tel img,.hot-email img{
        float: left;
        width: 18px;
        margin-right: 10px;
    }
    .hot-line label{
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #ffffff;
    }
    .footer-info{
        padding: 0 15px;
    }
    .footer-info p:first-child{
        padding: 17px 0;
        border-bottom: 1px solid rgba(229, 229, 229, 0.15);
    }
    .footer-info a{
        color: #00ff00;
    }
    .copyright{
        padding-top: 20px;
        text-align: center;
    }
    .copyright span{
        display: block;
    }
    .copyright a{
        color: #aaaaaa;
    }
    .copyright a:hover{
        color: #fff;
    }

    /*check age*/
    .age-check-cnt{
        width: 320px;
    }
    .age-check-cnt h3{
        font-size: 20px;
    }
    .age-check-cnt p{
        margin-bottom: 30px;
        font-size: 12px;
        line-height: 18px;
    }
    .age-check-btn{
        position: relative;
        width: 120px;
        font-size: 14px;
        transition: all .3s cubic-bezier(.12,.96,.53,1.01);
    }
    .age-check-over{
        margin-left: 40px;
    }
    .age-check-warning{
        margin-top: 30px;
        font-size: 12px;
    }

    /*弹框*/
    .code-close{
        width: 37px;
        height: 37px;
        top: auto;
        left: 50%;
        bottom: -55px;
        transform: translateX(-50%);
        background: url('../../../authentic/new/mobile-verification-shutdown.png') no-repeat center center / cover;
    }
    .code-close:before{
        content: '';
    }
    .code-box{
        width: 92%;
        border-radius: 5px;
        padding: 25px 10px 40px 10px;
    }
    .code-box img{
        width: 104px;
        height: 75px;
        margin-bottom: 20px;
    }
    .code-box p{
        font-size: 15px;
        line-height: 22px;
    }

    /*提示框*/
    .success-box, .box{
        width: 90%;
        padding: 45px 28px 30px 28px;
    }
    .success-box img{
        width: 48px;
        height: 48px;
    }
    .success-box h2, .box h2{
        margin-top: 16px;
        font-size: 18px;
    }
    .success-box p{
        font-size: 12px;
    }
    .success-btn{
        margin-top: 21px;
        height: 43px;
        line-height: 43px;
        font-size: 15px;
        letter-spacing: 1.5px;
        width: 100%;
    }
    .go-top {
        right: 15px;
        bottom: 90px;
        width: 40px;
        height: 40px;
    }
    .go-top img {
        width: 13px;
        margin-top: 8px;
    }
    .go-program {
        right: 15px;
        bottom: 30px;
        width: 40px;
        height: 40px;
    }
    .go-program span {
       display: none;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1680px){
    .nav>li,.nav-child>li{
       font-size: 14px;
    }
    .series{
        font-size: 13px;
    }
    .series-list span{
        font-size: 13px;
    }
    .series-list li{
        width: 160px;
    }
    .header-icon-event{
        width: 78px;
    }
    .nav>li{
        padding: 23px 6px;
    }
    .nav-other{
        padding-right: 12px;
    }
    .header-icon-event{
        width: 64px;
        margin-bottom: 8px;
    }
    .logo{
        width: 120px;
        margin-top: 22px;
    }
    .search, .store{
        width: 18px;
        padding-top: 24px;
    }
}