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

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

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

.token-wrapper { position:relative; }
    .token-wrapper .bbg {  }
    .token-wrapper .amo { position:absolute; display:flex; justify-content:center; align-items:center; color:#ffffff; font-size:64px; font-weight:bold; text-shadow:0px 0px 6px #000000; bottom:12%; width:100%; height:80% }

.etab-wrapper { display:flex; gap:6px; max-width:90%; justify-content:center; margin:0 auto; position:relative; z-index:1 }
.etab { text-transform:uppercase; cursor:pointer; position:relative; filter:brightness(.3) }
    .etab.aaa, .etab:hover { filter:brightness(1) }

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

.eggsbox { width:80%; display:flex; flex-wrap:wrap }
    .eggs { width:33.33%; margin-bottom:2% }
        .eggs img { max-width:65%; animation: glowing 1.4s linear; animation-iteration-count: 0; animation-fill-mode: forwards; }
        .eggs img:hover { animation-iteration-count: infinite; }

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

.tnc-wrapper { max-width:80%; margin:3% auto 5% }

.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 { }
    .rewardwrap.stop { filter:brightness(0.5); pointer-events:none }
.rewcon { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:94%; max-width:310px; }
    .rewcon .ttext { position:absolute; display:flex; justify-content:center; align-items:center; font-size:60px; color:#000000; font-weight:bold; top:25%; right:0%; width:100%; height:34%; display:none }
    .rewcon .bbg {  }
    .rewcon .bbg .on, .rewcon.aaa .bbg .off { display:none }
    .rewcon.aaa .bbg .on, .rewcon.aaa .ttext { display:flex }

.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:850px }
    .modal-rules .modal-content { background-color:transparent; border:0 }

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

    .token-wrapper .amo { font-size:5.4vw }

}

@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) {


}

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



}