@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; line-height:1.2; font-size:14px; color:#ffffff; background: #000000 url("../img/bg.jpg")no-repeat; background-size: cover; background-position: top center; min-height:100vh}

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; margin-top:12px }

.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; }
.music-wrapper audio { position: absolute; left: -5px;}

.step-wrapper { margin:1% 0 }
.stepbox { display:flex; justify-content:center; align-content:center; gap:12px }
    .stepbox div { cursor:pointer }
    .stepbox .tnc{max-width: 15vw;margin-top: 5px;padding: 5px;}
.mytoken{position:relative;cursor:default!important;}
.mytoken span{position:absolute; top:22%; right:13%; font-weight:bold; font-size:40px; display:flex; gap:8px; justify-content:center; align-items:center; color:#924F01;}
.predibox { position:relative; margin:15px 5px; }
    .predibox .bbg {  }
    .predibox .pp { position:absolute; top:8%; font-weight:bold; font-size:16px; display:flex; gap:8px; justify-content:center; align-items:center }
    .predibox .date { left:18%; }
    .predibox .time { right:10%; }
    .predibox .con { position:absolute; width:80%; left:10%; top:60%; transform:translateY(-50%); justify-content:center; align-items:center }
    .predibox .con .answer{width:80%;margin-top:2%;}
    .predibox .con .answer.aaa{cursor:pointer;}
    .predibox .con .answer.yesyes{pointer-events:none;}
.answer-wrap {position: relative;display: inline-block;}
    .answer-wrap.win::after,
    .answer-wrap.lose::after {content: '';position: absolute;top: 12%;right: -3%;width: 10%;height: 80%;z-index: 20;background-size: contain;background-repeat: no-repeat;background-position: center;}
    .answer-wrap.win::after {background-image: url('../img/a_correct.png');}
    .answer-wrap.lose::after {background-image: url('../img/a_wrong.png');}
    .predibox .con .answer-wrap.nono{pointer-events:none; filter:grayscale(1)}
    .predibox .act { position:absolute; bottom:-4%; left:50%; transform:translateX(-50%); z-index:1; cursor:pointer; max-width:37% }
        .predibox .act.nono { pointer-events:none; filter:grayscale(1) }
        .predibox .act:hover { filter:brightness(1.3) }
    .predibox .choosen { display:flex; width:100%; justify-content:center; align-items:center; gap:2px; }
        .predibox .choosen .sele { margin-top:8px; width:100% }
            .predibox .choosen .sele select { background:transparent; border:2px solid #1aa1ca; border-radius:20px; font-size:18px; font-weight:bold; background-color:#000000; color:#ffffff; width:50%; text-align:center }
        .predibox .choosen .ff { display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:12px; width:100%; }
        .predibox .choosen .ff span { font-size:12px; font-weight:bold; }
        .predibox .choosen .vs { width:70% }
        .predibox .choosen .vs .vsimg { margin-top:-33% }
        .predibox .choosen .vs .vsimg img { max-width:80% }
            .predibox .choosen .vs .act img { max-width:100% }
.flagwrap { position:relative }
    .flagwrap .bbg {  }
    .flagwrap .flag { position:absolute; top:17%; left:18%; max-width:64% }
.matchpred-wrapper { margin-bottom:60px }
.predtab-wrapper {  }
.predtab { text-transform:uppercase; cursor:pointer; position:relative; filter:brightness(.4) grayscale(1) opacity(.7); padding:0 4px }
    .predtab .ttext { position:absolute; width:100%; height:100%; top:0; left:0; display:flex; flex-direction:column; justify-content:center; align-items:center; font-weight:bold; color:#ffffff }
    .predtab span { font-size:38px; line-height:38px; margin-top:-5% }
    .predtab small { font-size:16px; line-height:22px; font-weight:bold }
    .predtab.aaa, .predtab:hover { filter:brightness(1) grayscale(0) opacity(1) }
.splide__list { justify-content:center }
.splide.is-overflow .splide__list { justify-content:normal }
.splide__arrow { width:24px; height:24px; }
.splide__track { margin:0 40px }
.predshow-wrapper {  }
.ptsbox { display:none; justify-content:center; align-items:center; flex-wrap:wrap; }
    .ptsbox.aaa { display:flex }
    .ptsbox .predibox { max-width:calc(50% - 10px) }
.restable { text-align:center; width:100% }
    .restable thead th { font-size:16px }
    .restable th, .restable td { padding:8px; }
    .restable img { max-width:30px; margin-right:3px }
.rules-wrapper { position:relative; margin:0 15px }
    .rules-wrapper .ttitle { position:absolute; width:100%; top:-3%; text-align:center }
        .rules-wrapper .ttitle img { max-width:38% }
        .rules-wrapper .ttitle.s2 { margin:-4% 0 -0.5% }
    .rules-wrapper .bbg {text-align:center;  }
    .rules-wrapper .ccon { color:#ffffff; font-size:14px; position:absolute; top:14%; left:6%; width:88% }
        .rules-wrapper .ccon ul { padding-left:20px }
        .rules-wrapper .ccon ul li { padding-bottom:14px }
        .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:18%; 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:950px }
    .modal-rules .modal-content { background-color:transparent; border:0 }
.anibutton:hover{transform: scale(1.08);}
.confirm-pred-modal {background: transparent;border: none;}
.confirm-pred-wrapper {position: relative;margin: auto;}
.confirm-popup-bg {width: 100%;display: block;}
.confirm-close {position: absolute;top: 0;right: 20px;width: 35px;height:35px;cursor: pointer;z-index: 5;transition: 0.2s ease;}
    .confirm-close:hover {transform: scale(1.08);}
.confirm-answer-img {position: absolute;top: 25%;left: 50%;transform: translateX(-50%);width: 70%;}
    .confirm-answer-img img {width: 100%;display: block;}
.confirm-text {position: absolute;top: 50%;width: 100%;text-align: center;color: white;font-size: 25px;font-weight: bold;}
.confirm-btn-wrap {position: absolute;bottom: 12%;left: 50%;transform: translateX(-50%);display: flex;gap: 30px;width:80%;}
.confirm-btn-img {width: 45%;cursor: pointer;transition: 0.2s ease;}
    .confirm-btn-img:hover {transform: scale(1.05);}
    .confirm-btn-img:active {transform: scale(0.96);}
.share-modal-close {position: absolute;top: 0;right: 11%;width: 60px;height: 60px;cursor: pointer;z-index: 5;transition: 0.2s ease;}
.tnc-modal-close {position: absolute;top: 0;right: 17%;width: 60px;height: 60px;cursor: pointer;z-index: 5;transition: 0.2s ease;}
.answer-wrap.yesyes .sel-home.answer.aaa{cursor:default;}
@media only screen and (max-width: 1160px) {
    .predibox .con {  }
    .predibox .choosen .sele select { font-size:14px } 
    .flagwrap { max-width:80% }
}

@media only screen and (max-width: 840px) {
    .rules-wrapper .ccon { font-size:1.6vw; }
    .rules-wrapper .ccon ul { padding-left:4vw }
    .rules-wrapper .ccon ul li { padding-bottom:1vw }
    .restable thead th { font-size:2.2vw }
    .restable th, .restable td { padding:.7vw }
    .restable img { max-width:4.8vw }
    .predtab-wrapper { gap:2vw }
    .predtab .ttext { font-size:2.6vw }
    .flagwrap { max-width:70% }
    .predibox .choosen .ff span { font-size:10px }
    .predibox .pp { font-size:1.6vw }
    .predibox .choosen .sele { margin-top:.5vw; font-size:1vw }
    .predibox .choosen .sele select { width:70% }

    .tabhow, .tabreward{max-width:29vw;}
}

@media only screen and (max-width: 580px) {
    .rules-wrapper .ccon { font-size:1.4vw; }
    .stepbox div { max-width:100% }
    .stepbox div img{max-width:28vw;}
    .stepbox .tnc{max-width: 15vw;margin-top: -5px;padding: 5px;}
    .stepbox .mytoken img{max-width:40vw;}
    .mytoken span{font-size:5vw;top:20%;}
    .splide__arrow { width:20px; height:20px; }
    .splide__track { margin:0 24px }
    .splide__arrow--prev { left:0 }
    .splide__arrow--next { right:0 }
    .predtab span { font-size:7vw; line-height:7vw }
    .predtab small { font-size:3vw; line-height:3vw }
    .ptsbox .predibox { max-width:100%; margin:5px }
    .predibox .pp { font-size:3vw }
    .confirm-text{font-size:4vw;}
    .confirm-close{top: -1%;right: 3.5%;width: 7vw;height: 7vw;}
    .share-modal-close{top: -1%;right: 7.5%;width: 7vw;height: 7vw;}
    .tnc-modal-close{top: -1%;right: 7.5%;width: 7vw;height: 7vw;}
}