*{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; background: #000;}
input, textarea, select { font-family: "Roboto", sans-serif; }
.full-bg{position:relative;width:100%;height:100%;}

.logo { display: block; width:14%; margin:0 auto; position:relative; z-index:3; }
.logo img { display:block; width:100%; }


.section { position: relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:url(../images/bg2.jpg) no-repeat center center; }
.bg-video { position:absolute;top: 0; left:0; width:100%; height: 100%; object-fit:cover; transition:opacity .5s ease; object-position: center center; }
.section .wrapper { position: relative; margin:0 auto; width:1200px; z-index:2; }
.section .logo { position:absolute; left:3%; top:3%; }
.sec1 { background-image:url(../images/bg1.jpg); }
.sec1 .wrapper { width: 1100px; display:flex; align-items:flex-start; justify-content:center; height:100%; }
.sec2 .wrapper { width:1240px; }
.sec1.hide { background:#000; }


.sec-nav { position:fixed; right: 0; top: 0; height: 100%; width: 291px; background:url(../images/sidebg.png) no-repeat center center; z-index:3;  align-items:flex-end; justify-content:center; flex-direction:column; display:flex; right:-397px; transition:all .4s ease-in-out 0s; }
.sec-nav:after { content:""; display:block; width:395px; height:306px; background:url(../images/dec.png) no-repeat 0 0; position:absolute; right:0; top:740px; }
.sec-nav.show {  right:0; }
.sec-nav ul a{ width:159px; height:52px; text-align:center; line-height:1; display:flex; align-items:center; justify-content:center; color:#000; padding-left:20px; font-size:16px; }
.sec-nav ul a:hover, .sec-nav ul a.on { background:url(../images/nav.png) no-repeat 0 0;}
.sec-nav ul { background:url(../images/line.png) no-repeat 125px center; height:603px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.sec-nav li { padding:5px 0; }
.hide-nav { display:block; width:100px; height:90px; line-height:90px; background:url(../images/btn5.png) no-repeat 0 0; text-align:center; color:#faf5eb; font-size:16px; }

/*sec1*/
.index-btns { position:absolute; right:0; top:-130px; display:flex; align-items:flex-end; justify-content:center; flex-direction:column; }
.index-btns a { display:block; width:86px; height:32px; background:url(../images/btn2.png) no-repeat 0 0; text-align:center; color:#000; line-height:32px; font-size:18px; font-weight:bold; margin:5px 0 }
.index-btns a.login-btn { margin:0; }
.before-login, .after-login { display:none; margin:5px 0 }
.before-login.show, .after-login.show { display:flex; align-items:center; justify-content:flex-end; }
.user-info { margin-right:10px; font-weight:bold; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; }

.play-video { position:absolute; top:20px; right: 40px; z-index:3; }
.play-video a { position: relative; display:block; width:85px; height:85px; 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:85px; height:85px; 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; margin-top: 130px; opacity:0; transition:all 1s ease-in-out; }
.sec1 .wrapper.show .index-cont { opacity:1;}
.index-slogan { width:890px; height:253px; background:url(../images/en/slogan.png) no-repeat center center; margin:0 auto; opacity:0; }
.sec1 .wrapper { display:flex; align-items:center; justify-content:flex-end; z-index:0; }
.sec1 .wrapper.show { z-index:2; }
.sec1 .wrapper > * { z-index:3; }
.sec1 .wrapper > video { z-index:1; }
.sec1 .wrapper > .index-cont { z-index:2; }
.hint-arrow { width: 63px; height:50px; background:url(../images/arrow2.png) no-repeat 0 0; position:absolute; left:50%; bottom:2%; margin-left:-31px; z-index:3; animation: move 2s infinite 
ease-in-out; }


/*.video-panel{position:absolute;top:0;left:0;width:100%; height:100%; object-fit:cover; transition:opacity .5s ease; object-position: bottom; z-index:2; }*/
.kv-video { position:absolute;top: 0; left:0; width:100%; height: 100%; object-fit:cover; transition:opacity .5s ease; object-position: center center; }
#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}

.reserve-progress { margin-top:60px; }
.bar { display:flex; align-items:center; justify-content:space-between; background:url(../images/bar.png) no-repeat 0 0; height:25px; width:640px; margin:0 auto; }
.progress-list { width:464px; height:25px;  position:relative; margin: 0 26px 0 62px; }
.claim-btn { display:block; width:78px; height:22px; background:url(../images/btn3.png) no-repeat 0 0; text-align:center; color:#280700; font-weight:bold; line-height:22px; margin-left:10px; font-size:16px; }
.progress, .progress-txt { z-index: 1; width:464px; height:16px; position:absolute; left:0; top:4.5px; background:url(../images/progress.png) no-repeat left center; }
.progress-txt { z-index: 2; background:none; display:flex; align-items: center; justify-content: space-between; color: #fff; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000; font-weight: bold; font-size:16px; padding-left:5%; }

.progress:before { content:""; width:28px; height:28px; background:url(../images/dot.png) no-repeat 0 0; position:absolute; right:0; margin-right:-14px; top: 50%; margin-top: -14px; z-index:3; }
.progress:after { content:""; width:42px; height:42px; position:absolute; right: 0; margin-right: -16px; top: -42px; background:url(../images/gif/walk.png) no-repeat 0 0; animation: walk 0.8s steps(4) infinite; }
.reserve { padding-top:50px; }
.reserve a { position: relative; display:block; margin: 0 auto; width:305px; height:69px; background:url(../images/gif/btn4.png) no-repeat 0 0; font-size:28px; line-height:69px; animation: light 2s steps(29) infinite; }
.reserve a span { display:block; color: #fffba8; width:100%; text-align:center; }
.reserve p { text-align:center; color:#000; font-size:16px; }
.reserve p b { color:#a31001; font-size:20px; }
.reserve.reserved a, .reserve.claimed a { filter:grayscale(1); cursor:default; font-size:0; }
.reserve.reserved a span:after { content:"Reserved"; font-size:28px; }
.reserve.claimed a span:after { content:"Claimed"; font-size:28px; }
.reserve.reserved a:hover { filter:brightness(1) grayscale(1); }

/*sec2*/
.sec2 .content { display:flex; align-items:center; justify-content:center; }
.title { margin:0 auto; width:100%; font-size:0; height:83px; }
.title1 { background:url(../images/en/title1.png) no-repeat center center; }

.class-img { position:relative; }
.img-tabs { position:absolute; z-index:2; left:20px; top:50px; }
.img-tabs a { position: relative; display:block; width:107px; height:111px; position:absolute; font-size:0; transition:all .2s ease-in-out; }
.img-tabs a[data-id="1"] { z-index: 3; top: 0; left: 100px; background: url(../images/tab-female.png) no-repeat 0 0; }
.img-tabs a[data-id="2"] { z-index: 2; top: 68px; left: 43px; background: url(../images/tab-male.png) no-repeat 0 0; }
.img-tabs a[data-id="3"] { z-index: 1; top: 146px; left: 0; background: url(../images/tab-weapon.png) no-repeat 0 0; }
.img-tabs a:before { position: absolute; left: 0; top: 70px; content:""; width:100%; height: 29px; display:block; }
.img-tabs a[data-id="1"]:before { background:url(../images/en/txt-female.png) no-repeat center top; }
.img-tabs a[data-id="2"]:before { background:url(../images/en/txt-male.png) no-repeat center top; }
.img-tabs a[data-id="3"]:before { background:url(../images/en/txt-weapon.png) no-repeat center top; }


.img-cont { position: relative; width: 740px; height: 740px; background: url(../images/characterbg.png) no-repeat 0 0; display:flex; align-items:center; justify-content:center; }
.img-cont:before { display: block; content:""; width:740px; height:740px; background:url(../images/female.png) no-repeat 0 0; }
.img-cont[data-id="1"]:before { background:url(../images/female.png) no-repeat 0 0; }
.img-cont[data-id="2"]:before { background:url(../images/male.png) no-repeat 0 0; }
.img-cont[data-id="3"]:before { background:url(../images/weapon.png) no-repeat 0 0; }

.class-intro { position: relative; width:468px; height:617px; background:url(../images/introbg.png) no-repeat 0 0; margin-left:-40px; z-index:2; padding:100px 30px; }
.intro-tabs { display:flex; align-items:center; justify-content:center; }
.intro-tabs a { display:block; width: 127px; height: 38px; line-height: 35px; background: url(../images/btn6.png) no-repeat 0 0; text-align:center; color:#fff; font-size:16px; margin:0 1%; }
.intro-tabs a:hover, .intro-tabs a.on { background-image:url(../images/btn6-hover.png); color:#000; }
.intro-cont { padding-top:30px; }
.intro-tit { position: relative; width:100%; height:58px; line-height:54px; background:url(../images/line2.png) no-repeat 0 0; padding-left:65px; font-size:24px; color:#f5e8be; }
.intro-tit:before { display: block; content:""; width:56px; height:41px; position:absolute; left:0; top:10px; }
.intro-cont[data-id="1"] .intro-tit:before { background: url(../images/icon-c1.png) no-repeat center center; }
.intro-cont[data-id="2"] .intro-tit:before { background: url(../images/icon-c2.png) no-repeat center center; }
.intro-cont[data-id="3"] .intro-tit:before { background: url(../images/icon-c3.png) no-repeat center center; }
.intro-txt { color:#f5e9c0; padding:10px 0; width:90%; margin:0 auto; }
.intro-txt p { padding:3px 0; }
.view-more { display:block; width:217px; height:72px; line-height: 72px; background:url(../images/btn7.png) no-repeat 0 0; text-align:center; color:#fff8ab; font-size:18px; padding-right:48px; margin:0 auto; }
.class-attr { width:230px; height:230px; background:url(../images/en/attr.png) no-repeat 0 0; position:absolute; right:30px; bottom:0; }

/*sec3*/
.sec3 .wrapper { width:1400px; }
.title2 { background:url(../images/en/title2.png) no-repeat center center; }
.sec3 .content { position: relative; width: 1389px; margin: 0 auto; height: 752px; background:url(../images/panel1.png) no-repeat center center; }
.system-txt { width:350px; position:absolute; right:182px; top:134px; color:#000; }
.system-txt .intro-txt, .system-txt .intro-tit { color:#000; }
.system-txt .intro-tit.c4:before { background: url(../images/icon-c4.png) no-repeat center center; }
.system-txt .intro-tit.c5:before { background: url(../images/icon-c5.png) no-repeat center center; }
.system-preivew { position:absolute; right:550px; top:130px; display:flex; align-items:center; justify-content:flex-end; }
.skill { width: 500px; height: 500px; background: url(../images/gif/skill.png) no-repeat 0 0;  }
.skill.move { animation: skill 5s steps(10) infinite; }
.meridian { width:228px; height:301px; background:url(../images/en/meridian.png) no-repeat 0 0; margin-right:-100px }

/*sec4*/
.sec4 .wrapper { width:1400px; }
.title3 { background:url(../images/en/title3.png) no-repeat center center; }
.sec4 .content { position: relative; width: 1337px; margin: 0 auto; height: 800px; background:url(../images/panel2.png) no-repeat center center; margin-top:-65px; padding-top:169px; }
.skill-list { width:800px; margin:0 auto; }
.skill-list a { display:block; height:50px; line-height:50px; font-size: 32px; color:#000; text-align:center; text-shadow: -2px -1px 0 #b69351; display:flex; align-items:center; justify-content:center; }
.skill-list a:nth-child(9) { height:60px; line-height:60px; }
.skill-list a:nth-child(10) { height:64px; line-height:64px; transform:rotate(2deg); }
.skill-list a:hover { color:#fff; text-shadow: 0 -1px 0 #ba973d, 0 0 10px #f7d231, 0 0 10px #f7d231, 0 0 10px #f7d231;}
.skill-list a:hover:before { display: block; content:""; width: 58px; height:46px; background:url(../images/arrow.png) no-repeat center center; margin-right:10px; }
.skill-cont { display: none; position: relative; width:900px; height:500px; background:url(../images/panel2-1.png) no-repeat 0 0/100% 100%; margin:0 auto; padding:20px 20px 20px 50px;  }
/*.skill-cont.show { display:block; animation:skillshow 1.5s ease-in-out forwards; }
.skill-cont.show:before { position: absolute; left: 0; top: 0; content:""; display:block; animation:black 1.5s steps(30) 1 forwards; background: url(../images/mask-center-black.png) no-repeat 0 0; width:100%; height:100%; z-index:5; }*/
.back-btn { width:182px; height:64px; background:url(../images/en/back.png) no-repeat 0 0; position:absolute; left:5px; top:-15px; font-size:0; z-index:6; }
.skill-name { position: relative; width:100%; height:70px; line-height:66px; background:url(../images/line4.png) no-repeat 0 0; padding-left:80px; font-size:36px; color:#000; margin-top:30px; }
.skill-name:before { display: block; content:""; width:56px; height:41px; position:absolute; left:9px; top:15px; background: url(../images/icon-c2.png) no-repeat center center; }
.skill-details { display:flex; align-items:flex-start; justify-content:center; }
.skill-txt { width:340px; margin: 20px; }
.skill-txt p { font-size:16px; }
.skill-video { position: relative; width:460px; height:321px; flex-shrink:0; margin-left:20px; }
.skill-video:before {content: "";position: absolute;background:url(../images/videobg2.png) no-repeat 0 0/100% 100%;display:block;width: 559px;height: 442px;left: -35px;top: -54px; z-index:2; }
.skill-icon { width:100%; height:24px; line-height:24px; background:url(../images/txtbg2.png) no-repeat 0 0; margin:20px 0 10px; display:flex; align-items:center; justify-content:flex-start; padding-left:15px; }
.skill-icon:before { content:""; width:5px; height:5px; background:#000; transform:rotate(45deg); margin-right:10px; }
.vpanel { width: 100%; height:100%; overflow:hidden;  }
.skill-video iframe, .skill-video video { width:100%; height:100%; transform:scale(1.5); }
.skill-more { display:flex; align-items:center; justify-content:flex-end; position:relative; z-index:2; position:absolute; right:0; top:445px; }
.skill-more a.view-more { margin:0; }

/*sec5*/
.title4 { background:url(../images/en/title4.png) no-repeat center center; }
.sec5 .content { position: relative;  }
.event-list { display:flex; align-items:flex-start; justify-content:space-between; padding-top:20px; }
.event-list li { width: 290px; height:511px; background:url(../images/panel3.png) no-repeat 0 0; padding: 110px 60px; display:flex; align-items:fles; justify-content:center; flex-direction:column; cursor:pointer; transform:translateY(0); transition: all .5s ease-in-out; }
.event-list li:nth-child(odd) { margin-top:50px; }
.event-list li.end { background-image:url(../images/panel3-gray.png); }
.event-list li.end:before { content:""; width:159px; height:160px; background:url(../images/en/timeout.png) no-repeat 0 0; position:absolute; left:50%; top:50%; margin:-80px 0 0 -80px; z-index:2; }
.event-list li.end > * { filter:grayscale(1); }
.event-list li.end:hover { filter:brightness(1); }

.event-rwd { width:182px; height:182px; background:url(../images/circle.png) no-repeat center center; display:flex; align-items:center; justify-content:center; }
.event-name { font-size:22px; text-align:center; line-height:1; font-weight:bold; padding-bottom:15px; background:url(../images/line3.png) no-repeat center bottom; margin-bottom:10px; }
.event-time { font-size:18px; text-align:center; }
.event-list li:hover { transform:translateY(-20px); }

/*sec6*/
.sec6 .wrapper { width:1400px; }
.benefit-tabs { width: 100%; height:102px;margin:0 auto; display:flex; align-items:center; justify-content:center; }
.benefit-tabs a { width:323px; text-align:center; color:#fff; display:flex; align-items:center; justify-content:center; line-height:1; font-size:28px; line-height:1; height: 100%;  background:url(../images/tab1.png) no-repeat 0 0; padding:13px 30px 0; margin:0 -15px; }
.benefit-tabs a.on, .benefit-tabs a:hover { color:#482e1d; background-image:url(../images/tab1-hover.png); padding:13px 30px 0 50px; }

.benefit-details { width:1400px; height:688px; background:url(../images/panel4.png) no-repeat 0 0; padding:100px 270px; }
.benefit-txt { width:828px; height:102px; background:url(../images/txtbg.png) no-repeat 0 0; padding:15px 30px; margin:0 auto; font-size:120%; display:flex; align-items:center; justify-content:center; }
.benefit-rwds { position: relative; display:flex; align-items:center; justify-content:center; margin-top:20px; }
.big-rwd { width:300px; height:325px; background:url(../images/prizebg1.png) no-repeat 0 0; padding:50px 40px 0 40px; }
.prize-img { width:215px; height:215px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.prize-img img { display:block; width:60%; }
.big-rwd .prize-img img { width:85%; }
.prize-name { text-align:center; font-size:16px; line-height:1; padding:5px 0; display:flex; align-items:center; justify-content:center; height:38px;  }
.other-rwd { display:flex; align-items:center; justify-content:flex-start; margin-left:-15px; }
.other-rwd li { position: relative; width:140px; height:165px; background:url(../images/prizebg2.png) no-repeat 0 0; padding:10px }
.other-rwd .prize-img { width:112px; height:112px; }
.other-rwd .prize-name { font-size:14px; }
.benefit-details .view-more { position:absolute; bottom:-20px; right:200px; }
.prize-des { display:none; width:240px; position:absolute; background: url(../images/txtbg3.png) no-repeat 0 0/100% 100%; color:#fdebc2; padding:10px 20px 30px; font-size:90%; line-height:1.2; left:50%; bottom:70%; }
.other-rwd li:hover .prize-des { display:block; }
.other-rwd li:hover { z-index:2; }

.big-rwd2 { width:441px; height:325px; background:url(../images/prizebg3.png) no-repeat 0 0; padding:50px 40px 0 40px;  }
.big-rwd2 .prize-img { width:100%; }
.special-rwd { margin:0 2%; }
.benefit-details[data-id="2"] .benefit-rwds { display:block; }
.benefit-details[data-id="2"] .special-rwd { display:flex; align-items:center; justify-content:center; }
.benefit-details[data-id="2"] .special-rwd .big-rwd { margin:0 2%; }
.benefit-details[data-id="2"] .view-more { position:relative; bottom:auto; right:auto; margin:0 auto; }
.benefit-details .special-rwd  .view-more { position:relative; bottom:auto; right:auto; margin:0 auto; }

.benefit-details[data-id="1"] .other-rwd li:nth-child(1) .prize-img img { width:93%; }

.return-claim { display: block; position: absolute; right: 228px; top: 0; display:block; width:130px; height:36px; line-height:36px; color:#000; background:url(../images/btn8.png) no-repeat 0 0/100% 100%; text-align:center; font-weight:bold; }

.sand-box { position:absolute; left:50%; bottom:0; margin-left:-960px; }


/*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://hwimg.99.com/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; }
.box1 { width:600px; height:374px; background:url(../images/box1.png) no-repeat 0 0/100% 100%; padding: 65px 56px 0 110px; }
.box2 { width:888px; height:554px; background:url(../images/box1.png) no-repeat 0 0; padding: 0 50px 0 120px; }
.box2 .con { padding:90px 70px; }
.close {position: absolute;top: 50px; right: 50px; width: 32px; height: 30px; font-size:0; background:url(../images/close.png) no-repeat 0 0; }
#video-box .close { background:#f8efe7; width:30px; height:30px; font-size:40px; line-height:28px; text-align:center; color:#840000; right:-30px; top:0; }
.box1 .close { right:30px; top:30px; }
.close:hover { filter:brightness(1.2); }
#video-box .con { padding:0; }
.con h3, .tipbox h2 { text-align:center; font-size:26px; /*background:url(../images/line5.png) no-repeat center bottom;*/ padding-bottom:20px; }
.box1 .con h3, .box1.con h3, .box1.tipbox h2 { padding-bottom:10px; }

.note { text-align:center; font-size:16px; } 
.rule-cont { margin:0 auto; height: 300px; overflow-y:auto; padding-right:5px; font-size:16px; overflow-x:hidden; }
.rule-cont p { padding:5px 0; font-size:16px; }
.rule-cont table { width:98%;  border: 1px solid #000; text-align:center; margin:5px auto; }
.rule-cont th, .rule-cont td { border: 1px solid #000; text-align:center; font-size:16px; }


.form li { display:flex; align-items:center; justify-content:flex-start; margin:8px 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:32px; line-height:32px; 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:20px; }
.two_btns li { margin:0 5px; }
.two_btns a, .btn_tip { display:block; width:120px; height:32px; line-height:32px; background:url(../images/btn8.png) no-repeat center center; text-align:center; font-size:18px; color:#000; margin:0 auto; }
.accountmore { text-align:center; margin-top:10px; }
.accountmore a { color:#b12004; margin:0 20px; }
.accountmore a:hover { text-decoration:underline; }
.msg_form_class .tip_con { height:200px; 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}}



.index-btns a, .intro-tabs a, .intro-tit, .skill-list a, .skill-name, .benefit-tabs a { font-family: "Kaushan Script", cursive; }
.claim-btn:hover, .index-btns a:hover, .hide-nav:hover, .img-tabs a:hover, .img-tabs a.on, .view-more:hover, .back-btn:hover, .event-list li:hover, .two_btns a:hover, .btn_tip:hover, .reserve a:hover, .return-claim:hover { filter:brightness(1.2); }




/*@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); }
}

@keyframes walk {
    100% { background-position: 0 -168px; } 
}
@keyframes light {
    100% { background-position: 0 -2001px; } 
}
@keyframes skill {
    100% { background-position: 0 -5000px; } 
}

@keyframes black {
    100% { background-position: -27000px 0; } 
}

@keyframes skillshow {
    100% { 
    	opacity: 1;
    	transform: scale(1);
    } 
}

@keyframes flash {
  0% { left: -100%; } /* 初始在左侧外部 */
  10%, 100% { left: 150%; } /* 10%时划到右侧外部，之后保持 */
}

@keyframes move {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px); /* 箭头向下移动的距离 */
  }
}


.pop ::-webkit-scrollbar{width:6px;}
.pop ::-webkit-scrollbar-thumb{background:#5b4935;}
.pop ::-webkit-scrollbar-track{background:#f1e3c9;}


/*打字效果*/
.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}

/*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; }*/

body[data-lang="sp"] .index-slogan { background-image: url(../images/sp/slogan.png); }
body[data-lang="sp"] .title1 { background-image:url(../images/sp/title1.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"] .title4 { background-image:url(../images/sp/title4.png); }
body[data-lang="sp"] .img-tabs a[data-id="1"]:before { background-image:url(../images/sp/txt-female.png); }
body[data-lang="sp"] .img-tabs a[data-id="2"]:before { background-image:url(../images/sp/txt-male.png); }
body[data-lang="sp"] .img-tabs a[data-id="3"]:before { background-image:url(../images/sp/txt-weapon.png); }
body[data-lang="sp"] .back-btn { background-image:url(../images/sp/back.png); }
body[data-lang="sp"] .event-list li.end:before { background-image:url(../images/sp/timeout.png); }
body[data-lang="sp"] .meridian { background-image:url(../images/sp/meridian.png);}
body[data-lang="sp"] .class-attr { background-image:url(../images/sp/attr.png); }
body[data-lang="sp"] .reserve.reserved a span:after { content:"Reservado"; font-size:28px; }
body[data-lang="sp"] .reserve.claimed a span:after { content:"Reclamado"; font-size:28px; }
body[data-lang="sp"] .return-claim { width:164px; }