@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

* { transition: all 0.3s; }

body { font-family: 'Noto Sans SC', sans-serif; font-size:14px; color:#ffffff; background: #000000 url("../img/bg.jpg")no-repeat; background-size: cover; background-position: top center; min-height:100vh; line-height:normal}

a { text-decoration: none; cursor:pointer; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; }

a:hover, a:focus, button:focus, button:hover { text-decoration: none; outline: none; }

img { max-width:100%;}

.max-container { max-width: 1180px; margin: 0 auto; padding: 0 10px; position: relative; z-index:1; overflow: hidden;}
.top-sec { text-align: center; position: relative; }
.title-wrap { position: relative; }
    .title-wrap .title-deco1 { position: absolute; bottom: 20%; left: 3%; filter: saturate(3) hue-rotate(-20deg);}
    .title-wrap .title-deco2 { position: absolute; bottom: 20%; right: 3%; transform: scaleX(-1); filter: saturate(3) hue-rotate(-20deg);}
    .title-wrap .hbtn { position:absolute; max-width:8%; top:3%; left:0 }
    .title-wrap .mbtn { position:absolute; max-width:8%; top:3%; right:0; cursor:pointer }
        .title-wrap .mbtn .on, .title-wrap .mbtn.aaa .off { display:none }
        .title-wrap .mbtn.aaa .on { display:block }
    .title-wrap .mainimg { margin-top:2% }
    .title-wrap .title-deco { position: absolute; }
    .title-wrap .mainimg img { max-width:100% }

.music-wrapper { position: fixed; z-index: 99; right: 0; top: 5%; opacity: 1; transition: 0.3s; overflow: hidden; height: 40px; width: 40px; background: #7f1203; border-radius: 10px 0 0 10px; display:none }
.music-wrapper audio { position: absolute; left: -5px;}

.how-wrap {  }
    .how-wrap .howtop {  }
        .how-wrap .howtop img { max-width:52%; }
    .how-wrap .howstep { display:flex; gap:12px; justify-content:center; align-items:center; margin-top:30px; }

.event-wrapper { margin-top:0% } 

.event-group-wrapper { display:flex; align-items:center;flex-direction: column; }

.etab-wrapper {display: flex; justify-content: center; margin:0 auto; position:relative; z-index:1; margin-top: 5%; gap:12px; }
.etab { text-transform:uppercase; cursor:pointer; position:relative; filter:brightness(.3) }
    .etab.aaa, .etab:hover { filter:brightness(1) }
.etab .bbg { display:flex; justify-content:center; align-items:center }
    .etab .bbg .iimg { width:82% }
    .etab .bbg .tnc { width:18%; margin-bottom:5% }

.eshow-wrapper { position:relative; z-index:2 }
    .eshow-wrapper .bbg { display:flex; gap:8px }
    .eshow-wrapper .cons { padding-top:3% }
.eeebox { display:none; justify-content:center; align-items:center; flex-wrap:wrap; }
    .eeebox.aaa { display:block;}

.stepwrap { position:relative; z-index:1 }

.token-wrapper { position:relative; max-width:208px; margin:0 auto; width:52% }
    .token-wrapper .bbg {  }
    .token-wrapper .amo { position:absolute; display:flex; justify-content:center; align-items:center; color:#ffffff; font-size:28px; font-weight:bold; text-shadow:0px 0px 6px #000000; left:30%; bottom:10%; width:62%; height:90% }

@keyframes glowing {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 #209060);
        transform: scale(1);
    }
    50% { filter:brightness(1.3) drop-shadow(0px 0px 8px #209060) drop-shadow(0px 0px 8px #209060); transform:scale(1.02) }
}

.gashapon-wrap{width:100%;}
.minigame-iframe {display: flex;justify-content: center;align-items: center;transform: translateY(0vh);}
    .minigame-iframe iframe {width: 100%;border: 0;height: 58vh;min-height: 880px;margin-top: -10%;}

.tnc-wrap{position:absolute;right:7%;top:80%;}
.tnc-wrap img{max-width:100px;width:8vw;}
.tnc-wrapper { max-width:80%; margin:3% auto 5% }

.rules-wrapper { position:relative; margin:0 15px }
    .rules-wrapper .ttitle { position:relative; margin:-3% 0 3%; text-align:center }
        .rules-wrapper .ttitle img { max-width:66% }
        .rules-wrapper .ttitle.s2 { margin:-4% 0 -0.5% }
    .rules-wrapper .bbg {  }
    .rules-wrapper .ccon { color:#ffffff; font-size:14px; position:absolute; top:22%; left:4%; width:92% }
        .rules-wrapper .ccon ul { padding-left:20px }
        .rules-wrapper .ccon ul li { padding-bottom:8px }
        .rules-wrapper .ccon ul ul li { padding:0 }
        .rules-wrapper .ccon ul.cus { list-style:lower-roman }
    .rules-wrapper .ttable { border:2px solid #a47b3b; border-radius:8px; background:rgba(0,0,0,0.5); position:absolute; top:22%; width:76%; left:12%; padding:8px 30px }
        .rules-wrapper .ttable table { width:100% }
        .rules-wrapper .ttable table th,.rules-wrapper .ttable table td { text-align:center; padding:4px }
        .rules-wrapper .ttable table th { font-size:16px; font-weight:bold; color:#ffc10a }
        .rules-wrapper .ttable table td { font-size:14px; color:#fdf3b6 }
        .rules-wrapper .ttable table td small { font-size:10px; display:block }

.modal-rules { max-width:790px }
    .modal-rules .modal-content { background-color:transparent; border:0 }

@media (min-width:1441px) {
    body{background-size:100% 100%;}
}

@media (max-width:1440px) {
    .eeebox.aaa {display: block;padding-bottom: 8vh;}
    .minigame-iframe {transform: translateY(12vh);}
}

@media (max-width:1024px) {
    .minigame-iframe {transform: translateY(14vh);}
}

@media (max-width:1024px) and (min-height:900px) {
    .eeebox.aaa {display: block;padding-bottom: 0vh;}
    .minigame-iframe iframe{min-height:780px;height:56vh;}
    .minigame-iframe {transform: translateY(4vh);}
}

@media (max-width:850px) {
    .rules-wrapper .ccon {font-size: 1.6vw;}
        .rules-wrapper .ccon ul {padding-left: 2vw;}
            .rules-wrapper .ccon ul li {padding-bottom: .7vw;}
    .eeebox.aaa {display: block;padding-bottom: 11vh;}
    .minigame-iframe {transform: translateY(12vh);}
        .minigame-iframe iframe {min-height: auto;height: 60vh;max-height: 760px;}
}

@media (max-width:850px) and (min-height:1180px) {
    .eeebox.aaa {display: block;padding-bottom: 0vh;}
    .minigame-iframe {transform: translateY(4vh);}
}

@media (max-width:768px) and (min-height:1024px) {
    .eeebox.aaa {display: block;padding-bottom: 0vh;margin-top: -5vh;}
    .minigame-iframe {transform: translateY(12vh);}
}

@media (max-width:767px) {
    .missionbox {max-width: 64%;}
    .minigame-iframe {transform: translateY(14vh);}
        .minigame-iframe iframe {height: 72vh;max-height: 760px;min-height: auto;}
}
@media (max-width:767px) {
    .minigame-iframe {transform: translateY(6vh);}
}

@media (max-width:479px) {
    #tncModal .rules-wrapper .bbg img {min-height: 310px;}
    .rules-wrapper .ccon {font-size: 8.5px;top: 18%;}
        .rules-wrapper .ccon ul {padding-left: 3.8vw;}
    .eeebox.aaa {display: flex;padding-bottom: 0;}
    .tnc-wrap {top: 85%;}
        .tnc-wrap img {width: 10vw;}
    .minigame-iframe {transform: translateY(2vh);}
}

@media (max-width:479px) and (max-height:740px) {
    .gashapon-wrap{width:88%;}

    .minigame-iframe {transform: translateY(0vh);}
        .minigame-iframe iframe{height:70vh;}
}

@media (max-width:360px) and (max-height:740px) {
    .gashapon-wrap{width:100%;}
    .minigame-iframe {transform: translateY(0vh);}
}