@import url('https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&display=swap');
/*reset*/
body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form, div { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em, b { font-style: normal; }
a { text-decoration: none; color: #000; }
a:hover, a:active { text-decoration: none; }
img { border: 0; }
button, input, select, textarea, video { font-size: 100%; outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
td, th, ul, ol { padding: 0; }
ul, ol { list-style-type: none; }

/*main*/
body,html{position:relative; width: 100%; color: #000; overflow-x:hidden; color:#000; font-size:16px; font-family: "Chocolate Classical Sans", sans-serif; }
.wrap { position: relative; width:100%; background: url(../images/bg.jpg) no-repeat center top; z-index:1; }
.header { height:480px; }
.wrapper { position: relative; width:1100px; margin:0 auto; }
.top-btns { position:absolute; right:0; top:20px; display:flex; align-items:center; justify-content:flex-end; height:30px; line-height:30px; }
.lang { position: relative; margin-left:60px; display:flex; align-items:center; justify-content:center; }
.lang:before { position: absolute; content:""; display:block; width:22px; height:22px; background:url(../images/global.png) no-repeat 0 0; left:-25px; top:50%; margin-top:-11px; }
.lang a { padding:0 8px; border-right:2px solid #000; display:block; line-height:14px; }
.lang a:nth-last-child(1) { border-right:none; }
.lang a:hover, .lang a.on { color:#ae3117; }

.before-login.hide, .after-login.hide { display:none; }

.logo { position:absolute; top:52px; left:52%; }
h1.hide { height:0; width:100%; overflow:hidden; font-size:0; opacity:0; }
.dlbtn { position: fixed; right: 200px; top: 50%; margin-top: -85px; display: block; width:186px; height:171px; background:url(../images/dlbtn.png) no-repeat center center; color:#ffecc6; display:flex; align-items:center; justify-content:center; line-height:22px; font-size:110%; text-align:center; z-index:2; }
.dlbtn:hover { background-image:url(../images/dlbtn-hover.png); }

.step-list { display:flex; align-items:center; justify-content: space-between; }
.step-list li { position: relative; width:340px; height:340px; background:url(../images/stepbg.png) no-repeat center center; text-align:center; color:#fceecf; }
.step-list li:after { position: absolute; right: -38px; top: 50%; margin-top: -23px; content:""; width:38px; height:55px; background:url(../images/arrow.png) no-repeat center center; }
.step-list li:nth-last-child(1):after { display:none; }
.step-title { width:100%; height:60px; font-size:0; margin-top:10px; }
.step1 .step-title { background:url(../images/st1.png) no-repeat center center; }
.step2 .step-title { background:url(../images/st2.png) no-repeat center center; }
.step3 .step-title { background:url(../images/st3.png) no-repeat center center; }
.btn { display:block; width: 230px; height: 62px; line-height: 62px; color: #150b05; font-size: 140%; font-weight: bold; background: url(../images/btn1.png) no-repeat center center; margin:0 auto; }
.btn:hover { filter:brightness(1.1); }
.step-main { width: 80%; margin: 0 auto; height:156px; display:flex; align-items:center; justify-content:center; font-size:110%; }
.step-main img { display:block; margin:0 auto }
.hint { padding:10px 0; color:#e3b567; font-size:90%; }

.rules h2 { height: 76px; font-size:0; background:url(../images/title2.png) no-repeat center center; margin:70px auto 20px; }
.rule-content { width:100%; height:430px; background:url(../images/rulebg.png) no-repeat center center; box-sizing:border-box; font-size:110%; padding:40px 100px; line-height:23px; }
.rule-content p { padding:3px 0; }
.rule-content a { color:#ab3118; text-decoration:underline; }

.footer { padding: 50px 0 30px 0; font-size:14px; }
.footer, .footer a { color:#fff; }
.footer .social { margin-bottom:10px; }

/*box common*/
.popbox { display: flex; z-index: 999; width: 100%; height: 100%; position: fixed; left: 0; top: 0; align-items: center; }
.popbox.hide { display: none; }
.pop { position: relative; margin: 0 auto; z-index: 3; padding:50px; box-sizing:border-box; }
.box1 { width:500px; height:320px; background:url(../images/box1.png) no-repeat center center; }
.box2 { width:710px; height:auto; background:url(../images/box2.png) no-repeat center center; background-size:100% 100%; }
.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1;}
.close { position:absolute; right:20px; top:20px; z-index: 2; width:44px; height:44px; background:url(../images/close.png) no-repeat center center; }
.box1 .msgcont { height:150px; display:flex; align-items:center; justify-content:center; }
.msg-btns { display:flex; align-items:center; justify-content:center; }
.msg-btns a { display:block; width:143px; height:43px; line-height:43px; font-size:110%; text-align:center; background:url(../images/btn2.png) no-repeat center center; font-weight:bold; margin:0 10px; color:#2d1714; }
.msg-btns a:hover, .close:hover { filter:brightness(1.1); }
.select-character { width: 100%; }
.select-character li { display:flex; align-items:center; justify-content:center; width:100%; padding:5px 0; }
.select-character label { width:20%; text-align:right; margin-right:1%; }
.select-character select{ width:50%; height: 32px; line-height:32px; }
.btn.inactive { filter:grayscale(1); color:#333; }
@media screen and (max-width: 1900px) {
	.dlbtn { right:20px; }
}