@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 img { max-width:100% }
    .title-wrap .tncbtn { position:absolute; max-width:9%; bottom:9%; right:7% }

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

.instruction-wrap {  }
    .instruction-wrap img { max-width:100% }

.info-wrap { display:flex; justify-content:center; align-items:center; gap:12px; margin:20px auto; max-width:70% }
    .info-wrap .tncbtn {  }

.records-wrap { position:relative }
    .records-wrap .bbg {  }
    .records-wrap .ttext { position:absolute; width:30%; height:60%; top:16%; right:8%; font-size:58px; font-weight:bold; display:flex; justify-content:center; align-items:center; }

.base-wrap { position:relative; margin-bottom:40px }
    .base-wrap .bbg {  }
    .base-wrap .ccon { position:absolute; top:11%; left:8%; width:84% }

.ciwrap { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap }
.cibox { width:calc(14.28% - 8px); position:relative; filter:brightness(.4); margin:.4% 0 }
    .cibox .iimg {  }
    .cibox .days { position:absolute; width:80%; left:10%; top:10%; font-size: 13px; font-weight:bold; text-transform:uppercase }
    .cibox .date { position:absolute; width:80%; left:10%; bottom:14%; font-size: 15px; font-weight:bold; text-transform:uppercase }
.cibox.miss { filter:grayscale(1) }
.cibox.done { filter:brightness(1) }
    .cibox.done::before { content:''; position:absolute; z-index:1; background-image:url(../img/day-check.png); background-repeat:no-repeat; background-position:center center; background-size:100% auto; width:100%; height:100%; top:0; left:0; }
.cibox.ready { cursor:pointer; pointer-events:auto; filter:brightness(1); animation: glowing 1.4s infinite; animation-timing-function:linear }

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

.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:#531b00; font-size:14px; position:absolute; top:16%; 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) {

    .ciwrap { gap:1vw }
    .cibox { width:calc(14.28% - 1vw) }
    .cibox .days { font-size:1.2vw }
    .cibox .date { font-size:1.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:1.4vw }

}

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

}

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

    .records-wrap .ttext { font-size:8.8vw }

}