@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; }
.effect { position: absolute; width: 100%; height:100%; overflow:hidden }
    .effect img { width: 100%; filter: blur(2px);}
.title-wrap { position: relative; }
    .title-wrap .title-deco1 { position: absolute; bottom: 20%; left: 3%; width: 30%;}
    .title-wrap .title-deco2 { position: absolute; bottom: 20%; right: 3%; transform: scaleX(-1); width: 30%;}
    .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% }

.title-wrap .mainimg .effect { position: absolute; height: 500px; }
.mask1 {
  -webkit-mask-box-image: url("../img/title.png");
  mask-repeat: no-repeat;
  height: 650px;    
}

.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 { position: relative; margin-top: -40px; }
    .tncbtn { position: absolute; right: 0px; }

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

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

.bar { background: #9b7a6a; color: #ffffff; font-weight: bold; position: absolute; top: 21%; padding: 3px; min-width: 65%; border-radius: 20px; }

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

.etab-wrapper {display: flex; justify-content: center; margin:0 auto; position:relative; z-index:1; margin-top: 7%; }
.etab-weapon { display: flex; position: absolute; bottom: 15%; }
.etab { text-transform:uppercase; cursor:pointer; position:relative; filter:brightness(.3); display: flex; justify-content: center; }
    .etab.aaa{ filter:brightness(1); animation: glowing 1.4s linear; animation-iteration-count: infinite; animation-fill-mode: forwards;  }
    .etab.done{ filter:brightness(1);  }


.eshow-wrapper { position:relative; z-index:2; width: 80%; margin: 0px auto; }
    .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; }

.barrelbox { width:100%; display:flex; flex-wrap:wrap }
    .barrel { width:33.33%; margin-bottom:2% }
        .barrel:nth-child(odd) { margin-top: 100px; }
        .barrel img { max-width:100%; animation: glowing 1.4s linear; animation-iteration-count: 0; animation-fill-mode: forwards; }
        .barrel img:hover { animation-iteration-count: infinite; }

.reward-wrapper { text-align: center; }
    .reward-wrapper .bbg { display: flex; justify-content: center;}
    .reward-wrapper .bbg .r-amo {
    position: absolute;
    font-size: 40px;
    top: 140px;
    color: #000000;
    font-weight: bold;
}

@keyframes glowing {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 #fff000);
        transform: scale(1);
    }
    50% { filter:brightness(1.3) drop-shadow(0px 0px 8px #fff000) drop-shadow(0px 0px 8px #fff000); transform:scale(1.02) }
}
.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:30px; color:black; font-weight:bold; top:15%; right:0%; width:94%; height:22%; display:none }
    .rewcon .bbg {  }
    .rewcon .bbg .on, .rewcon.aaa .bbg .off { display:none }
    .rewcon.aaa .bbg .on, .rewcon.aaa .ttext { display:flex }
.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:850px }
    .modal-rules .modal-content { background-color:transparent; border:0 }
    .etab-weapon { max-width: 60%; }

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

    .token-wrapper .amo { font-size:4.4vw; bottom: 8%; left: 5%; }

}

@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 }
    .token-wrapper .amo { left: 7%; }
    .token-wrapper .bbg img { max-width: 70%; }
    .token-wrapper .bbg { margin-top: -50px;}
    .tncbtn { width: 10%; }
    .bar { top: 20%; padding: 0px;}

}

@media only screen and (max-width: 767px) {
    .token-wrapper .bbg img { max-width: 45%; }
    .token-wrapper .bbg { margin-top: -30px;}
    .token-wrapper .amo { left: 5%; }
    .etab-weapon { max-width: 60%; }
    .title-wrap .title-deco1, .title-wrap .title-deco2 { max-width: 30% !important; }
    .mask1 { display: none !important; }
    .how {margin-top: -10px; }
    .reward-wrapper .bbg .r-amo { font-size: 30px; top: 80px; }
    .reward-wrapper .bbg img { max-width: 70%;}
    .eshow-wrapper { width: 100%; }
    .bar { font-size: 7px; top: 20%; padding: 0px; min-width: 60%;}
    


}

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



}