@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 }

.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:flex }

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

.mission-wrap {  }
.missionbox { max-width:53%; margin:-5% auto 0; position:relative }
    .missionbox .bbg {  }
    .missionbox .car { position:absolute; width:26%; transform:scaleX(-1); left:8%; bottom:1%; z-index:1 }
        .missionbox.s2 .car { transform:scaleX(1); left:67%; bottom:28%; }
        .missionbox.s3 .car { transform:scaleX(-1); left:60%; bottom:40%; }
        .missionbox.s4 .car { transform:scaleX(-1); left:12%; top:34%; }
        .missionbox.s5 .car { transform:scaleX(1); left:15%; top:23%; }
        .missionbox.s6 .car { transform:scaleX(-1); left:60%; top:12%; }
    .missionbox .mss { position:absolute; filter:brightness(.3); cursor:pointer }
        .missionbox .mss.done, .missionbox .mss.aaa { filter:brightness(1) }
        .missionbox .mss.done::before { content:""; position:absolute; width:60%; height:100%; background-image:url(../img/done.png); background-position:center center; background-size:100% auto; background-repeat:no-repeat; left:20% }
        .missionbox .mss1 { bottom:3%; right:30%; width:32% }
        .missionbox .mss2 { bottom:28%; left:30%; width:32% }
        .missionbox .mss3 { bottom:42%; right:-26%; width:36% }
        .missionbox .mss4 { top:24%; right:22%; width:36% }
        .missionbox .mss5 { top:16%; left:-24%; width:36% }
        .missionbox .mss6 { top:3%; right:-17%; width:36% }

.rewardwrap { position:fixed; z-index:1050; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); transition:none; display:none }
    .rewardwrap.aaa { display:block }
    .rewardwrap .rewcon { position:absolute; max-width:530px; width:80%; top:50%; left:50%; transform:translate(-50%, -50%); position:relative }
        .rewardwrap .rewcon .cons { position:absolute; top:22%; text-align:center; width:74%; left:15%; display:flex; flex-direction:column; gap:5px }
            .rewardwrap .rewcon .cons .ttitle { color:#793601; font-size:18px; font-weight:bold; }
            .rewardwrap .rewcon .cons .actbtn { filter:brightness(.3); pointer-events:none; max-width:52%; margin:0 auto }
            .rewardwrap .rewcon .cons .actbtn.aaa { animation: glowing 1.4s linear; animation-iteration-count: 0; animation-fill-mode: forwards; animation-iteration-count: infinite; pointer-events:auto; cursor:pointer }

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

.minigame-iframe {  }
    .minigame-iframe iframe { width:100%; border:0px; height:58vh; min-height:880px }

.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 only screen and (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 }

}

@media only screen and (max-width: 767px) {
    .missionbox { max-width:64% }
    .minigame-iframe iframe { min-height:auto; height:100vh; max-height:760px }
}

@media only screen and (max-width: 630px) {

    .rewardwrap .rewcon .cons .ttitle { font-size:2.6vw }
    .token-wrapper .amo { font-size:4vw }

}

@media only screen and (max-width: 479px) {
    .minigame-iframe iframe { max-height:80vh }
}