/*
 * Author: clovis(706706)
 * Version: 0.1.0
 * Compile Date: 2026-07-10 18:06
*/ 
* {
    box-sizing: border-box
}

body,
html {
    background: #1b1e31;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font: 20px/1.5 "Microsoft Yahei";
}

.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
}

input,
textarea,
select {
    font-family: sans-serif;
}

.full-bg {
    position: relative;
    width: 100%;
    height: 100%;
}

.preview {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
   /* background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg0.jpg) no-repeat center center;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.step {
    z-index: 2;
}

.step,
.section .wrapper,
.appearance-bg {
    position: relative;
    width: 1100px;
    height: 100%;
    text-align: center;
    margin: 0 auto;
}

.skip-btn {
    display: flex;
    width: 139px;
    height: 58px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding-bottom: 5px;    
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    bottom: 100px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/btn1.png) no-repeat 0 0;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transform: scale(1.0);
    transition: all .2s ease-in-out;
    animation: zoom 1s linear 0s infinite;
}

.skip-btn:hover {
    transform: scale(1.05);
}

.skip-btn:after {
    content: "";
    display: block;
    width: 32px;
    height: 24px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/arrow.png) no-repeat 0 0;
}

.logo {
    display: block;
    width: 120px;
    position: absolute;
    left: -50px;
    top: 20px;
}

.logo img {
    display: block;
    width: 120px !important;
}

.play-music1,
.play-music2 {
    display: block;
    width: 60px;
    height: 60px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/music.png) no-repeat 0 0/100% 100%;
    position: absolute;
    right: 60px;
    top: 60px;
    z-index: 4;
}

.play-music1.on,
.play-music2.on {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/music-on.png);
    animation: roll 2s linear 0s infinite;
}

.section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec1 {
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg1.jpg) no-repeat center center;
}

.sec2 {
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg2.jpg) no-repeat center center;
}

.sec4 {
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg5.jpg) no-repeat center center;
}

.frost-switch,
.frost-male,
.frost-female {
    width: 100%;
    height: 100%;
    position: relative;
}

.frost-male,
.frost-female {
    position: absolute;
    left: 0;
    top: 0;
}

.frost-male {
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg4.jpg) no-repeat center center;
}

.frost-female {
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg3.jpg) no-repeat center center;
}

.sec-nav {
    position: fixed;
    height: 674px;
    right: 20px;
    top: 50%;
    margin-top: -337px;
    z-index: 2;
    display: none;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/side-line.png) no-repeat center center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 60px;
}

.sec-nav.on {
    display: flex;
}

.sec-nav a {
    position: relative;
    width: 54px;
    height: 54px;    
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin: 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0.5);
    transition: all .2s ease-in-out;
}

.sec-nav a span {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    line-height: 1;
    text-align: center;
}

.sec-nav a:after {
    content: "";
    position: absolute;
    display: block;
    width: 134px;
    height: 134px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/side.png) no-repeat center center;
    left: 50%;
    top: 50%;
    margin: -67px 0 0 -69px;
    z-index: 1;
}

.sec-nav a:hover,
.sec-nav a.on {
    filter: brightness(1);
}

.sec-nav a:nth-child(3) {
    font-size: 12px;
}

/*sec1*/
.bg-video,
.preview-video,
.main-video,
.slogan-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1080px;
    object-fit: cover;
    transition: opacity .5s ease;
    z-index: 1;
}

.slogan-wrap {
    z-index: 7;
}

.slogan-wrap2 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.slogan {
    position: relative;
    width: 960px;
    margin: 0 auto 8vh auto;
    width: 96vh;
}

.slogan img {
    display: block;
    width: 100%;
    opacity: 0;
}

.section .wrapper {
    z-index: 5;
}

.sec2 .wrapper,
.sec3 .wrapper,
.sec4 .wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.play-video {
    position: absolute;
    top: 50%;
    right: -30px;
    z-index: 3;
    display: block;
    width: 110px;
    height: 110px;
    margin-top: -55px;
    width: 11vh;
    height: 11vh;
    margin-top: -7vh;
    right: -2vh;
}

.play-video a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    /*background:url(https://img5.99.com/zf/activity/2026/07/feature/img/index-play.png) no-repeat center center;*/
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/play.png) no-repeat center center;
    transition: all .2s ease-in-out;
    background-size: 35% 42%;
    z-index: 2;
}

.play-video:after {
    content: "";
    width: 100%;
    height: 100%;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/index-play-bg.png) no-repeat 0 0/100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    animation: roll 12s linear 0s infinite;
}

.play-video a:hover {
    filter: brightness(1.2);
}


.video-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/mask1.png) no-repeat center center/100% 100%;
    z-index: 2;
}

.appearance-bg {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -550px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.appearance-bg:after {
    content: "";
    width: 370px;
    height: 100%;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/mask2.png) no-repeat center center/100% 100%;
}

.appearance-info {
    width: 370px;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5% 0;
}

.appearance-video {
    position: relative;
    width: 254px;
    height: 254px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appearance-video:before {
    content: "";
    width: 100%;
    height: 100%;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/circle2.png) no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 0;
    animation: roll 6s linear 0s infinite;
}

.a-info-cont {
    position: relative;
}

.a-video-cont {
    width: 176px;
    height: 176px;
    position: relative;
}

.a-video-cont img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 176px;
}

.a-video-mask {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    border-radius: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.a-video-mask:after {
    content: "";
    display: block;
    width: 40px;
    height: 51px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/play.png) no-repeat 0 0;
    transition: all .2s ease-in-out;
    animation: zoom 1s linear 0s infinite;
}

.a-video-mask:hover:after {
    transform: scale(1.2);
}

.title {
    margin: 0 auto;
    font-size: 0;
}

.tit1 {
    width: 355px;
    height: 124px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/title1.png) no-repeat 0 0;
}

.tit2 {
    width: 366px;
    height: 108px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/title2.png) no-repeat 0 0;
}

.tit3 {
    width: 374px;
    height: 104px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/title3.png) no-repeat 0 0;
}

.tit4 {
    width: 326px;
    height: 101px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/title4.png) no-repeat 0 0;
}

.a-txt {
    width: 89%;
    margin: 0 auto;
}

.a-txt p,
.a-txt li {
    font-size: 18px;
    text-align: left;
}

.more-info {
    position: relative;
    padding: 30px 10px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/mask3.png) no-repeat 0 0/105% 105%;
}

.more-info:before,
.more-info:after {
    content: "";
    width: 50px;
    height: 40px;
    display: block;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/dec1.png) no-repeat 0 0;
    position: absolute;
    left: -8px;
    top: 10px;
}

.more-info:after {
    left: auto;
    top: auto;
    right: -8px;
    bottom: 10px;
    transform: rotate(180deg);
}

.more-info>p {
    color: #54e7ff;
    font-size: 20px;
    margin: 5px 0;
}
.more-info>ul {
    margin: 5px 0 0;
}

.a-txt li {
    list-style-type: disc;
    margin-left: 20px;    
    padding: 3px 0;
}

.simple-appearance-video {
    display: block;
    width: 150px;
    height: 150px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/play1-all.png) no-repeat 0 0;
    margin: 0 auto;
    transition: all .2s ease-in-out;
    animation: play 1s steps(6) infinite;
}

.simple-appearance-video:hover {
    filter: brightness(1.2);
}

.bg-mount {
    z-index: 4;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg2.png) no-repeat center center/cover;
}

.sec3 .more-info {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/mask4.png);
}

.sec3 .a-info-cont {
    padding-top: 5%;
}

.sec3 .frost-male .appearance-info {
    color: #0f1335;
}

.sec3 .frost-male .more-info {
    background: none;
}

.sec3 .frost-male .more-info>p {
    color: #304386;
}

.sec3 .frost-male .more-info:before,
.sec3 .frost-male .more-info:after {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/dec2.png);
}

.sec3 .frost-male .wrapper {
    justify-content: flex-start;
}

.frost-switch {
    position: relative;
    z-index: 1;
}

.frost-switch-btns {
    position: absolute;
    left: 0;
    bottom: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.frost-switch-btns a {
    display: block;
    width: 198px;
    height: 99px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/switch.png) no-repeat 0 0;
    line-height: 99px;
    text-align: center;
    color: #c0c4e4;
    font-family: "Merriweather", serif;
}

.frost-switch-btns a:hover,
.frost-switch-btns a.on {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/switch-hover.png);
    color: #b5c6ff;
}

.sec3 .preview-hint {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 70px;
    color: #fff;
    z-index: 3;
}

.sec4 .bg-mount {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/bg5.png);
}

.sec4 .a-info-cont {
    padding-top: 20%;
}

/*.kv-video{position:absolute;top:0;left:0;width:100%;height:1080px;object-fit:cover;transition:opacity .5s ease}
#loadingVideo{opacity:1;z-index:1}
#mainVideo{opacity:0;z-index:1;display:none}
#mainVideo.show{display:block;opacity:1}
#loadingVideo.hide{opacity:0;pointer-events:none}*/

/*common*/
.go-footer {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #000;
    background: rgba(255, 255, 255, .75);
    z-index: 40;
    padding: 0 20px;
    border-radius: 15px
}

.go-footer.show i {
    transform: rotate(180deg)
}

.go-footer i {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(https://hw.99.com/uploads/wtop/sports/img/icon-arrow.png) no-repeat;
    margin-left: 5px;
    vertical-align: middle;
    transition: all .3s
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    color: #fff;
    background: #000;
    height: 125px;
    z-index: 30;
    transform: translateY(100%);
    transition: transform .2s linear
}

.footer.show {
    transform: translateY(0)
}

.footer a {
    color: #fff;
    text-decoration: none;
}

/*box*/
.pop,
.commonbox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    background: rgba(0, 0, 0, .8);
    z-index: 999;
}

.pop.show,
.commonbox.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spop,
.tipbox {
    position: relative;
    margin: 0 auto;
}

.spop {
    width: 900px;
    height: 553px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/box1.png) no-repeat 0 0/100% 100%;
}

.close {
    position: absolute;
    top: 5px;
    right: -30px;
    width: 66px;
    height: 67px;
    font-size: 0;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/close.png) no-repeat 0 0;
    z-index: 3;
}

.close:hover {
    filter: brightness(1.2);
    animation: roll .5s ease-in-out;
}

.con {
    padding: 60px 70px
}

#video-box .con {
    padding: 0;
}

.box3 .con {
    padding: 90px 70px;
}

.box1 .con,
.tipbox {
    padding: 100px 70px;
}

.con h3,
.tipbox h2 {
    text-align: center;
    font-size: 26px;
}

.rule-cont {
    margin: 10px auto;
    height: 400px;
    overflow-y: auto;
}

.rule-cont p {
    padding: 3px 0;
}


.form li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 15px 0;
}

.form li label {
    display: block;
    width: 30%;
    text-align: right;
    font-size: 16px;
    margin-right: 4px;
}

.form li select,
.form li input {
    width: 50%;
    height: 36px;
    line-height: 36px;
    border: 1px solid #a6483f;
    margin: 0;
    padding: 0 3px;
}

.form li input.code {
    width: 30%;
}

.code_img {
    display: block;
    width: 20%;
}

.code_img img {
    width: 100% !important;
}

.two_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.two_btns li {
    margin: 0 5px;
}

.two_btns a,
.btn_tip {
    display: block;
    width: 210px;
    height: 42px;
    line-height: 42px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/btn7.png) no-repeat center center;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin: 0 auto;
}

.accountmore {
    text-align: center;
    margin-top: 10px;
}

.accountmore a {
    color: #b12004;
    margin: 0 40px;
}

.accountmore a:hover {
    text-decoration: underline;
}

.msg_form_class .tip_con {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.common_msg {
    font-size: 16px;
}

.video {
    position: relative;
}

.video-tabs {
    display: none;
    position: absolute;
    top: 30px;
    left: -200px;
}

.video-tabs a {
    position: relative;
    display: block;
    width: 229px;
    height: 94px;
    line-height: 1.2;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/btn2.png) no-repeat center center;
    text-align: right;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    font-size: 16px;    
}

.video-tabs a:hover,
.video-tabs a.on {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/btn2-hover.png);
}

.video-tabs a:after {
    content: "";
    width: 32px;
    height: 33px;
    background: url(https://img5.99.com/zf/activity/2026/07/feature/img/dot.png) no-repeat center center;
    position: absolute;
    right: -22px;
    top: 50%;
    margin-top: -16px;
}

.video-tabs a.on:after,
.video-tabs a:hover:after {
    background-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/dot-hover.png);
}

.video-tabs a span {
    display: block;
    color: #8decfe;
    font-size: 14px;
}

.video iframe {
    width: 100%;
    height: 454px;
    box-sizing: border-box;
}

#videocode {
    padding: 43px 50px 44px 43px;
}

.video img {
    max-width: 100%;
    height: 454px;
    display: block;
    margin: 0 auto;
}

.video .preview-hint {
    position: absolute;
    left: 0;
    bottom: 60px;
    text-align: center;
    width: 100%;
    z-index: 2;
    color: #fff;
    display: none;
}

.fog {
    -webkit-mask-image: url(https://img5.99.com/zf/activity/2026/07/feature/img/mask-center.png);
    -webkit-mask-size: 3000% 100%;
    -webkit-mask-position: 0 center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    -webkit-animation: startMask2 .8s steps(29) both 1;
    animation: startMask .8s steps(29) both 1;
    z-index: 13;
    background: #fff;
    display: none;
}

@-webkit-keyframes startMask {
    to {
        -webkit-mask-position: 100% center;
        mask-position: 100% center
    }
}

@keyframes startMask {
    to {
        -webkit-mask-position: 100% center;
        mask-position: 100% center
    }
}

@keyframes breath {
    0% {
        transform: rotate(0deg) scale(1.0);
    }

    25% {
        transform: rotate(90deg) scale(0.9);
    }

    50% {
        transform: rotate(180deg) scale(1.0);
    }

    75% {
        transform: rotate(270deg) scale(0.9);
    }

    100% {
        transform: rotate(360deg) scale(1.0);
    }
}

@keyframes roll {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.0);
    }
}

/* 1. 优化的上下浮动动画：增加关键帧密度 */
@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 2. 优化的左右摇摆动画：非对称路径更自然 */
@keyframes sway {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
    }
}

/* 3. 优化的旋转动画：更细腻的角度变化 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes shine {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0.8
    }

    100% {
        opacity: 1
    }
}

@keyframes play {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -900px;
    }

    /* 总宽度 = 单帧宽度 * 帧数 */
}

@keyframes playclient {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -540px;
    }

    /* 总宽度 = 单帧宽度 * 帧数 */
}


.pop ::-webkit-scrollbar {
    width: 6px;
    border-radius: 6px;
}

.pop ::-webkit-scrollbar-thumb {
    background: #d46e39;
    border-radius: 6px;
}

.pop ::-webkit-scrollbar-track {
    background: #a38779;
    border-radius: 6px;
}


@media screen and (max-width: 1200px) {

    .step,
    .section .wrapper,
    .appearance-bg {
        width: 80%;
        margin: 0 auto;
    }

    .appearance-bg {
        margin-left: -40%;
    }
}


@media screen and (min-width: 1920px) {

    .sec1,
    .sec2,
    .frost-female,
    .frost-male,
    .sec4,
    .preview {
        background-size: cover
    }

    .slogan {
        width: 50vw;
    }

    .play-video {
        width: 6vw;
        height: 6vw;
        margin-top: -3vw;
        right: -3vw;
    }
}

@media screen and (max-width: 100vw) and (max-height: 50vw) {
    .slogan {
        margin: 0 auto 6vh auto;
        /*margin:0 auto 7vw auto;*/
        width: 50vw;
    }

    .play-video {
        width: 6vw;
        height: 6vw;
        margin-top: -3vw;
        right: -3vw;
    }
}