*{padding:0;margin:0;box-sizing:border-box}
body, html { background:#1b1e31; }
.swiper-container,body,html{width:100%;height:100%;overflow:hidden;font-family: "Roboto", sans-serif; font-size: 14px; line-height: 1.4;}
input, textarea, select { font-family: "Roboto", 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(../images/bg0.jpg) no-repeat center center;*/ background: #000; 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; line-height:58px; text-transform:uppercase; font-size:16px; letter-spacing:2px; position:absolute;right:0; bottom:100px; background:url(../images/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(../images/arrow.png) no-repeat 0 0; }
.logo { display: block; width:180px;  position:absolute; left:-50px; top:20px; }
.logo img { display:block; width:100%; }
.play-music1, .play-music2 { display:block; width:60px; height:60px; background:url(../images/music.png) no-repeat 0 0/100% 100%; position:absolute; right:20px; top:20px; z-index:4; }
.play-music1.on, .play-music2.on { background-image: url(../images/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(../images/bg1.jpg) no-repeat center center; }
.sec2 { background:url(../images/bg2.jpg) no-repeat center center; }
.sec4 { background:url(../images/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(../images/bg4.jpg) no-repeat center center; }
.frost-female  { background:url(../images/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(../images/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-family: "Noto Serif TC", serif; 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(../images/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(../images/index-play.png) no-repeat center center;*/ background:url(../images/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(../images/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(../images/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(../images/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(../images/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(../images/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(../images/title1.png) no-repeat 0 0; }
.tit2 { width:366px; height:108px; background:url(../images/title2.png) no-repeat 0 0; }
.tit3 { width:374px; height:104px; background:url(../images/title3.png) no-repeat 0 0; }
.tit4 { width:326px; height:101px; background:url(../images/title4.png) no-repeat 0 0; }

.a-txt { width:80%; margin:0 auto; font-family: "Merriweather", serif; }
.a-txt p { padding:10px 0; }
.a-txt p, .a-txt li  { font-size:18px; text-align:left; }
.more-info { position: relative; padding:30px 10px; background:url(../images/mask3.png) no-repeat 0 0/105% 105%; }
.more-info:before, .more-info:after { content: ""; width: 50px; height:40px; display:block; background:url(../images/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: 150%;}
.a-txt li { list-style-type:disc; margin-left:20px; font-size:110%; padding:5px 0; }
.simple-appearance-video { display:block; width:150px; height:150px; background:url(../images/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(../images/bg2.png) no-repeat center center/cover; }

.sec3 .more-info { background-image:url(../images/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(../images/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(../images/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(../images/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(../images/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:absolute;bottom:0;width:100%;padding:20px auto;font-size:12px;color:#fff;background:#000;z-index:30;transform:translateY(100%);transition:transform .2s linear}
.footer.show{transform:translateY(0)}
.footer a{color:#fff}

/*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(../images/box1.png) no-repeat 0 0/100% 100%;  }

.close {position: absolute;top: 5px;right: -30px; width: 66px; height: 67px; font-size:0; background:url(../images/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(../images/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; background:url(../images/btn2.png) no-repeat center center; text-align:right; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; font-size:16px; font-family: 'Merriweather', serif; }
.video-tabs a:hover, .video-tabs a.on { background-image:url(../images/btn2-hover.png); }
.video-tabs a:after { content:""; width: 32px; height:33px; background:url(../images/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(../images/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(../images/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; }
}

.bgm { position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none; }