*{padding:0;margin:0;box-sizing:border-box}
.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; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.preview.on { background-image:url(../images/bg1.jpg); }
.preview .step2, .preview.on .step1 { display:none; }
.preview .step1, .preview.on .step2 { display:block; }

.step { position:relative; width:60%; text-align:center; margin:0 auto; }
.step.step2 { width:100%; }
.text { color:#fff; color:#ffefbf; font-size:18px; margin:130px auto; font-family: "Playball", cursive; }
.typer-paragraph { font-size:20px; padding:10px 0; width:60%; margin:0 auto; }
.skip-btn { display: block; width:120px; height:42px; margin: 0 auto; border:1px solid #d6c8a0; color:#d6c8a0; text-align:center; line-height:38px; text-transform:uppercase; font-size:16px; letter-spacing:2px; }
.skip-btn:hover { color:#ffefbf; border-color:#ffefbf; }
.logo { display: block; width:225px; margin:0 auto; }
.logo img { display:block; width:100%; }

.bagua { width: 423px; height: 423px; background: url(../images/bagua.png) no-repeat center center; margin:0 auto; }
.preview-slogan { width:863px; height:298px; background:url(../images/slogan.png) no-repeat center center; margin:-20px auto 0; }
.enter-btn { display: block; width: 223px; height:56px; background:url(../images/btn1.png) no-repeat center center; text-align: center; line-height: 56px; color:#b2948a; font-size:16px; letter-spacing:2px; text-transform:uppercase; margin:0 auto; animation:zoom 2s linear infinite; }
.enter-btn:hover { background-image:url(../images/btn1-hover.png); }
.roll { animation: roll 16s linear infinite; }

.section { position: relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.section .wrapper { position: relative; margin:0 auto; width:1200px; z-index:2; }
.section .logo { position:absolute; left:10%; top:6%; }
.sec1 { background:url(../images/bg2.jpg) no-repeat center top; }
.sec2 { background:url(../images/bg3.jpg) no-repeat center top; }
.sec3 { background:url(../images/bg4.jpg) no-repeat center top; }
.sec4 { background:url(../images/bg5.jpg) no-repeat center center; }
.sec1 .wrapper { display:flex; align-items:flex-start; justify-content:center; height:100%; }
.sec2 .wrapper { width:1240px; }

.sec-nav { position:fixed; right: 20px; top: 50%; margin-top: -141px; z-index:2; padding:30px 0 20px 0; display:none; }
.sec-nav:before { position: absolute; left: 50%; top: 50%; margin-top: -141px; content:""; width:1px; height:282px; background:#000; margin-left:-0.5px }
.sec-nav a:nth-child(1):before, .sec-nav a:nth-last-child(1):after { position:absolute; left:50%; margin-left:-10px; content:""; display:block; width:20px; height:20px; background:url(../images/dot.png) no-repeat 0 0; }
.sec-nav a:nth-child(1):before { top:-35px; }
.sec-nav a:nth-last-child(1):after { bottom:-28px; }
.sec-nav a { position: relative; display:block; width:201px; height:58px; line-height:50px; background:url(../images/side.png) no-repeat center center; text-align:center; color:#000; font-family: "Noto Serif TC", serif; font-size:16px; font-weight:bold; }
.sec-nav a:hover, .sec-nav a.on { background-image:url(../images/side-hover.png); color:#f8ce79; }

/*sec1*/
.login-content { position:absolute; right:10%; top:8%; }
.login-btn { display:block; width:78px; height:78px; background:url(../images/login.png) no-repeat 0 0; font-size:0; }
.login-btn#btnLogout { background-image:url(../images/logout.png); margin-right:10px; }
.login-btn:hover { background-image:url(../images/login-hover.png); }
.login-btn#btnLogout:hover { background-image:url(../images/logout-hover.png); }
.before-login, .after-login { display:none; }
.before-login.show, .after-login.show { display:flex; align-items:center; justify-content:center; }

.play-video { /*position:absolute; top:600px; left:50%; margin-left:-64px; z-index:3;*/ }
.play-video a { position: relative; display:block; width:128px; height:128px; background:url(../images/play.png) no-repeat center center;  margin: 0 auto;}
.play-video a:hover { filter:brightness(1.2); }
.play-video a:before { content:""; display:block; width:128px; height:128px; background:url(../images/play-circle.png) no-repeat center center; position:absolute; left:0; top:0; animation: roll 5s linear infinite;  }

.index-cont { position:relative; height:100%; }
.index-slogan { width:956px; height:735px; background:url(../images/slogan3.png) no-repeat center center; margin:0 auto; height:720px; background:none; }
.sec1 .wrapper > * { z-index:3; }
.sec1 .wrapper > video { z-index:1; }
.sec1 .wrapper > .index-cont { z-index:2; }

.kv-video{position:absolute;top:0;left:0;width:100%;height:1080px;object-fit:cover;transition:opacity .5s ease;object-position: top;}
#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}

/*sec2*/
.title { margin:0 auto; width:100%; font-size:0; }
.title1 { height:127px; background:url(../images/title1.png) no-repeat center center; }
.appearance { display:flex; align-items:center; justify-content:space-between; }
.sub-title { width:350px; height:128px; }
.sub-title[data-type="1"] { background:url(../images/appearance1.png) no-repeat 0 0; }
.sub-title[data-type="2"] { background:url(../images/appearance2.png) no-repeat 0 0; }
.sub-title[data-type="3"] { background:url(../images/appearance3.png) no-repeat 0 0; }
.intro { width:337px; height:299px; background:url(../images/titlebg.png) no-repeat 0 0; padding:50px 60px 10px 45px; text-align:center; font-size:16px; }
.progress {  border-bottom:1px solid #b43d09; padding-bottom:10px; }
.progress a { color:#7a2f19; }
.progress a:hover { text-decoration:underline; }
.collect-num { width:158px; height:48px; background:url(../images/numbg.png) no-repeat center center; padding-right:58px; text-align:center; color:#fefbed; font-weight:bold; line-height:42px; font-size:20px; margin:10px auto 30px; cursor:pointer; }

.img { position: relative; width:816px; height:816px;}
.img:before { position: absolute; right: -150px; top: -30px; content:""; display:block; width:1108px; height:803px;  background:url(../images/dec1.png) no-repeat right center;  }
.small-pic, .img-tabs { position:absolute; }
.small-pic { z-index: 3; left: -100px; bottom: 100px; width:281px; height:281px; background:url(../images/small-circle.png) no-repeat 0 0; display:flex; align-items:center; justify-content:center; }
.small-pic img { display:block; width: 240px; height:240px; border-radius:240px; }
.img-tabs { position:absolute; left:-50px; top:20px; z-index:4; }
.img-tabs a { position: absolute; display:block; width:126px; height:126px; background:url(../images/tab.png) no-repeat 0 0; display:flex; align-items:center; justify-content:center; color:#93361b; font-family: "Noto Serif TC", serif; font-weight:bold; font-size:20px; line-height:1; }
.img-tabs a:hover, .img-tabs a.on { background-image:url(../images/tab-hover.png); }
.img-tabs a:nth-child(1) { left:135px; top:5px; }
.img-tabs a:nth-child(2) { left:35px; top:110px; }
.img-tabs a:nth-child(3) { left:-10px; top:240px; }

.pic { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.pic:before { content:""; position:absolute; z-index:2; width:816px; height:816px; background:url(../images/circle.png) no-repeat center center; animation: roll 16s linear infinite;}
.pic:after { position: absolute; right: 0; bottom: 70px; z-index: 2; content:""; width:648px; height:279px; background:url(../images/dec2.png) no-repeat center center; }
.pic p { position: relative; width: 666px; height: 666px; border-radius: 666px; overflow:hidden; flex-shrink:0; z-index:1; }
.pic p img { display:block; position:absolute; left:50%; top:50%; margin: -350px 0 0 -350px; width:700px; height:700px; }

.rule-btn { position: absolute; left: 0; top: 100px; display:block; width:118px; height:157px; background:url(../images/rule.png) no-repeat 0 0; animation: rotate 3s ease-in-out infinite}
.rule-btn:hover { background-image:url(../images/rule-hover.png); }

/*sec3*/
.title2 { height:127px; background:url(../images/title2.png) no-repeat center center; }
.rankings { margin-top:20px; }
.rank-tabs { position: relative; width:100%; height: 80px; background:url(../images/line.png) no-repeat center 10px; }
.rank-tabs-panel { position: relative; width:1040px; height: 85px;  margin:0 auto; overflow:hidden; }
.all-rank-tabs { position: absolute; left: 0; top: 0; width: 1430px; display:flex; align-items:flex-start; justify-content:flex-start; transition:all .5s ease-in-out }
.all-rank-tabs.end { left:-390px; }
.tab-prev, .tab-next { position: absolute; top: 40px; width:15px; height:23px; background:url(../images/arrow.png) no-repeat 0 0; opacity:0.6 }
.tab-prev { left:40px; transform:rotate(180deg); }
.tab-next { right:40px; }
.tab-prev:hover, .tab-next:hover { opacity:1; }
.all-rank-tabs a { display:block; flex-shrink:0; width:130px; text-align:center; color:#333333; padding:0 5px; line-height:1; font-weight:bold; }
.all-rank-tabs a:hover, .all-rank-tabs a.on { font-size: 16px; color:#b32b09; }
.all-rank-tabs a:before { content:""; display:block; width: 30px; height: 27px; background: url(../images/dot2.png) no-repeat center center; margin:0 auto 10px; }
.all-rank-tabs a:hover:before, .all-rank-tabs a.on:before { background-image:url(../images/dot2-hover.png); }
.rank-cont { width:1173px; height:616px; background:url(../images/tablebg.png) no-repeat 0 0; display:flex; align-items:center; justify-content:flex-start; padding:0 35px; }
.rank-first { width:310px; text-align:center; flex-shrink:0; }
.rank-others { width:750px; flex-shrink:0; margin-left:10px; }
.rank-first > * { margin:0 auto; }
.rank-name { width:194px; height:34px; line-height:34px; background:url(../images/rank-titlebg.png) no-repeat 0 0; font-family: "Noto Serif TC", serif; font-weight:bold; font-size:16px; }
.user-avatar { position: relative; width:310px; height:310px; background:url(../images/classbg.png) no-repeat 0 0; margin:0 auto 20px; }
.user-avatar img { display:block; width:310px; height:310px; position:absolute; left:0; top:0; }
/*.user-avatar:before { content:""; display:block; width:310px; height:310px; position:absolute; left:0; top:0; background:url(../images/class/male/pirate.png) no-repeat center center; }

.user-avatar[data-type="1"]:before { background-image:url(../images/class/male/archer.png); }
.user-avatar[data-type="2"]:before { background-image:url(../images/class/male/dragon.png); }
.user-avatar[data-type="3"]:before { background-image:url(../images/class/male/fire-taoist.png); }
.user-avatar[data-type="4"]:before { background-image:url(../images/class/male/monk.png); }
.user-avatar[data-type="5"]:before { background-image:url(../images/class/male/ninja.png); }
.user-avatar[data-type="6"]:before { background-image:url(../images/class/male/pirate.png); }
.user-avatar[data-type="7"]:before { background-image:url(../images/class/male/thunder.png); }
.user-avatar[data-type="8"]:before { background-image:url(../images/class/male/trojan.png); }
.user-avatar[data-type="9"]:before { background-image:url(../images/class/male/warrior.png); }
.user-avatar[data-type="10"]:before { background-image:url(../images/class/male/water-taoist.png); }
.user-avatar[data-type="11"]:before { background-image:url(../images/class/male/windwalker.png); }
.user-avatar[data-type="12"]:before { background-image:url(../images/class/male/xiake.png); }

.user-avatar.female[data-type="1"]:before { background-image:url(../images/class/female/archer.png); }
.user-avatar.female[data-type="2"]:before { background-image:url(../images/class/female/dragon.png); }
.user-avatar.female[data-type="3"]:before { background-image:url(../images/class/female/fire-taoist.png); }
.user-avatar.female[data-type="4"]:before { background-image:url(../images/class/female/monk.png); }
.user-avatar.female[data-type="5"]:before { background-image:url(../images/class/female/ninja.png); }
.user-avatar.female[data-type="6"]:before { background-image:url(../images/class/female/pirate.png); }
.user-avatar.female[data-type="7"]:before { background-image:url(../images/class/female/thunder.png); }
.user-avatar.female[data-type="8"]:before { background-image:url(../images/class/female/trojan.png); }
.user-avatar.female[data-type="9"]:before { background-image:url(../images/class/female/warrior.png); }
.user-avatar.female[data-type="10"]:before { background-image:url(../images/class/female/water-taoist.png); }
.user-avatar.female[data-type="11"]:before { background-image:url(../images/class/female/windwalker.png); }
.user-avatar.female[data-type="12"]:before { background-image:url(../images/class/female/xiake.png); }*/


/*职业对照*/
/*
1：弓手
2：李小龙
3：火道
4：武僧
5：忍者
6：海岛
7：雷神
8：勇士
9：战士
10：水道
11：铁扇门
12：侠客
*/

.user-name { position: absolute; left: 50%; margin-left: -126px; bottom: -15px; width:249px; height:68px; line-height:68px; background:url(../images/rank1bg.png) no-repeat 0 0; padding-left:43px; text-align:center; font-size:16px; }
.user-details li { display:flex; align-items:center; justify-content:center; }
.user-details li label { display:block; width:50%; text-align:right; flex-shrink:0; font-size:16px; }
.user-details li p { width:48%; text-align:left; flex-shrink:0; margin-left:2%; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rank-others table { width:680px; margin: 0 auto; text-align:center; line-height:40px; }
.rank-list { background:url(../images/tablebg1.png) no-repeat center 40px; }
.rank-list th { font-size:16px; padding-bottom:12px }
.rank-list td { font-size:16px; font-weight:bold; line-height:38px }
.rank-list td p { font-size:16px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-list tbody tr:nth-child(-n+2) td { line-height:50px; color:#fff; }

.type-tabs { display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.type-tabs a { display:block; width:145px; height:30px; line-height: 30px; background:url(../images/btn2.png) no-repeat center center; color:#ffefbf; text-align:center; margin:0 10px; }
.type-tabs a:hover, .type-tabs a.on { filter:brightness(1.4); }

/*.rankings[data-type="1"] .rank-name, .rankings[data-type="1"] .type-tabs { display:none; }*/
.rankings[data-type="1"] .user-avatar { margin-top:-30px; }
.rankings[data-type="2"] .rank-list { background-image:url(../images/tablebg2.png); }
.rankings[data-type="2"] .rank-list tbody tr:nth-child(-n+3) td { line-height:50px; color:#fff; }


/*sec4*/
.title3 { height:127px; background:url(../images/title3.png) no-repeat center center; }
.lantern { width:600px; display:flex; align-items:center; justify-content:space-between; margin:0 auto; padding:120px 0 50px }
.lantern a { display:block; width: 246px; height: 379px; background: url(../images/light.png) no-repeat 0 0; display:flex; align-items:center; justify-content:center; padding-bottom:100px; padding-left:10px; animation: float 5s ease-in-out infinite, sway 4s ease-in-out infinite, rotate 6s ease-in-out infinite, shine 4s ease-in-out infinite; }
.lantern a.claim { animation-delay: 0.3s; }
.lantern a:before { content:""; display:block; width:103px; height:53px; margin:0 auto; }
.lantern a.wish:before { background: url(../images/txt1.png); }
.lantern a.claim:before { background: url(../images/txt2.png); }
.lantern a:hover { filter:brightness(1.1); }



/*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; }
.box4 { width:1133px; height:679px; background:url(../images/box1.png) no-repeat 0 0; }
.box2 { width:958px; height:613px; background:url(../images/box2.png) no-repeat 0 0; }
.box3 { width:919px; height:581px; background:url(../images/box4.png) no-repeat 0 0; padding-right:40px }
.box1 { width:600px; height:482px; background:url(../images/box5.png) no-repeat 0 0; }
.close {position: absolute;top: 45px;right: 40px; width: 63px; height: 58px; font-size:0; background:url(../images/close.png) no-repeat 0 0; }
.box3 .close { width:96px; height:93px; background:url(../images/close2.png) no-repeat 0 0; right:-35px; top:-10px; }
#video-box .close { background:#f8efe7; width:30px; height:30px; font-size:40px; line-height:28px; text-align:center; color:#840000; right:-30px; top:0; }
.close:hover { filter:brightness(1.2); }
.con { padding:60px 70px }
#video-box .con { padding:0; }
.box3 .con { padding:90px 70px; }
.box1 .con, .tipbox { padding:100px 70px; }
#rule-box1 .box1 .con, #rule-box2 .box1 .con { padding:80px 70px; }
.con h3, .tipbox h2 { text-align:center; font-size:26px; }
.progress-tit { font-size:26px; text-align:center; }
.progress-tit span { color:#a13136 }
.my-crystal ul { display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; margin:20px auto; }
.my-crystal li { position: relative; width:160px; background:url(../images/crystalbg.png) no-repeat center top; text-align:center; margin:2px; }
.my-crystal li a { position: absolute; left: 50%; top: 120px; z-index: 2; display:block; width:165px; height:33px; line-height:33px; background:url(../images/btn3.png) no-repeat 0 0; text-align:center; color:#ffefbf; font-size:16px; margin-left:-82px; }
.my-crystal li a.inactive { filter:grayscale(1); }
.my-crystal li p { font-size:16px; line-height:1; }
.my-crystal li .crystal-img { margin:36px auto 40px; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
.my-crystal li .crystal-img img { display:block;  }
.note { text-align:center; font-size:16px; } 
.rule-cont { margin:10px auto; height: 300px; overflow-y:auto; }
.rule-cont p { padding:3px 0; }

.user-wish { width: 100%; display:flex; align-items:flex-start; justify-content:center; margin-bottom:15px; }
.user-wish .avatar { width:77px; height:74px; flex-shrink:0; margin-right:10px; }
.user-wish .avatar.female { background:url(../images/avatar-female.png) no-repeat 0 0; }
.user-wish .avatar.male { background:url(../images/avatar-male.png) no-repeat 0 0; }
.wish-cont { width:560px; }
.wish-cont textarea { width: 560px; height: 260px; padding: 5px; background: rgba(255,246,228,0.6); border:2px solid #d0bd9f; }
.wish-cont * { font-size:16px; }
.wish-cont table { width:100%; margin-left: 20px; }
.wish-cont td { border-top:2px solid #d0bd9f; border-bottom:2px solid #d0bd9f; text-align:center; }
.wish-cont td a { margin:0 10px; color:#8f2222; }
.wish-cont td a:hover { text-decoration:underline; }
.upload-img { width:132px; position:relative; }
.upload-img a { display:block; width:132px; height:44px; background:url(../images/btn6.png) no-repeat 0 0; text-align:center; color:#542413; line-height:44px; font-size:16px; }
.upload-img a:hover, .submit-btn:hover, .two_btns a:hover, .btn_tip:hover, .upload-info p a:hover { filter:brightness(1.2); }
.upload-img input { display:block; width:100%; height:100%; opacity:0; z-index:3; position:absolute; left:0; top:0; cursor:pointer; }
.submit-btn { display:block; margin:0 auto; width:252px; height:64px; background:url(../images/btn5.png) no-repeat 0 0; text-align:center; line-height:64px; font-size:20px; font-weight: bold; color:#542413; font-family: "Noto Serif TC", serif; }
.upload-info, .upload-info p { display:flex; align-items:center; justify-content:space-between; }
.upload-info p img { margin-right:5px; }
.upload-info p a { display:block; width: 102px; height:44px; line-height:44px; background:url(../images/btn8.png) no-repeat 0 0; text-align:center; color:#542413; margin-left:5px; }
.upload-cont .upload-img { display:block; }
.upload-cont .upload-info { display:none; }
.upload-cont.uploaded .upload-img { display:none; }
.upload-cont.uploaded .upload-info { display:flex; }

.user-pic img { display:block; border:2px solid #d0bd9f; max-width: 100%; max-height: 300px;}
.like-user { display: flex; align-items: center; justify-content: space-between; margin-top:10px; }
.like-user p { font-size:14px; line-height:1.2; margin-right:5%; color:#542413; width:85%; word-break: break-word; }
.like { display:flex; align-items:center; justify-content:flex-end; width:10%; flex-shrink:0; }
.like span { display:none; }
.like-btn { display: block; width:20px; height:20px; border-radius:20px; border: 1px solid #775340; background:url(../images/heart.png) no-repeat center center; }
.like-btn:hover, .liked .like-btn { background:url(../images/heart-on.png) no-repeat center center #682b09; border-color:#682b09; }
.like.liked span { display:block; margin-left:5px; }


.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; }
.msg_form_class { z-index:1000; }
.common_msg { font-size:16px; }

.video iframe { width:640px; height:360px; }

.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(0.9); }
    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 }
}

/*花瓣*/
.petals-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none; z-index: 1;}
.petal{position:absolute;background-color:#ffccd5;border-radius:100% 0;opacity:.8;top:-10%;transform:translateZ(0);will-change:transform,opacity}
.petal.type-1{width:12px;height:12px;background-color:#ffccd5}
.petal.type-2{width:15px;height:15px;background-color:#ffb3c1}
.petal.type-3{width:10px;height:10px;background-color:#ff8fab}
@keyframes fall-1{0%{transform:translate(0,0) rotate(0);opacity:.8}
100%{transform:translate(100px,100vh) rotate(360deg);opacity:.4}
}
@keyframes fall-2{0%{transform:translate(0,0) rotate(45deg);opacity:.7}
100%{transform:translate(-80px,100vh) rotate(-360deg);opacity:.3}
}
@keyframes fall-3{0%{transform:translate(0,0) rotate(90deg);opacity:.9}
100%{transform:translate(50px,100vh) rotate(180deg);opacity:.5}
}
@keyframes fall-4{0%{transform:translate(0,0) rotate(135deg);opacity:.6}
100%{transform:translate(-120px,100vh) rotate(-180deg);opacity:.2}
}

.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;}


/*打字效果*/
.typer-cursor{display:inline-block;width:6px;height:1.2rem;background-color:#ffefbf;margin-left:3px;animation:blink 1s step-end infinite}
@keyframes blink{from,to{opacity:1}50%{opacity:0}}
.typer-paragraph{margin-bottom:1rem}
.typer-paragraph:last-child{margin-bottom:0}


@media screen and (max-height: 930px) {
    .sec1, .sec2, .sec3, .sec4 { background-size:cover; }
}

@media screen and (max-height: 800px) {
	.index-slogan { height:86vh; }
	.kv-video { height:100%;}
}

/*sp*/
body[data-lang="sp"] .login-btn { background-image:url(../images/sp/login.png); }
body[data-lang="sp"] .login-btn#btnLogout { background-image:url(../images/sp/logout.png);}
body[data-lang="sp"] .login-btn:hover { background-image:url(../images/sp/login-hover.png); }
body[data-lang="sp"] .login-btn#btnLogout:hover { background-image:url(../images/sp/logout-hover.png); }
body[data-lang="sp"] .sub-title[data-type="1"] { background-image:url(../images/sp/appearance1.png); }
body[data-lang="sp"] .sub-title[data-type="2"] { background-image:url(../images/sp/appearance2.png); }
body[data-lang="sp"] .sub-title[data-type="3"] { background-image:url(../images/sp/appearance3.png); }
body[data-lang="sp"] .lantern a:before { width:126px; height:56px; }
body[data-lang="sp"] .lantern a.wish:before { background-image: url(../images/sp/txt1.png); }
body[data-lang="sp"] .lantern a.claim:before { background-image: url(../images/sp/txt2.png); }
body[data-lang="sp"] .rule-btn { background-image:url(../images/sp/rule.png); }
body[data-lang="sp"] .rule-btn:hover { background-image:url(../images/sp/rule-hover.png); }
body[data-lang="sp"] .title2 { background-image:url(../images/sp/title2.png); }
body[data-lang="sp"] .title3 { background-image:url(../images/sp/title3.png); }
body[data-lang="sp"] .rank-list th:nth-child(1) { width:72px; }