@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

* { transition: all 0.3s; }

body { font-family: 'Roboto', 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;}
.top-sec { text-align: center; position: relative; }
.title-wrap { position: relative; margin-top:3% }
    .title-wrap .hbtn { position:absolute; max-width:10%; top:2%; left:0 }
    .title-wrap .mbtn { position:absolute; max-width:10%; top:2%; 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:96% }

.music-wrapper { position: fixed; z-index: 98; right: 0; top: 2%; 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;}

.float-nav { position:fixed; z-index:99; right:1%; top:2%; display:flex; flex-direction:column; gap:0px; }
    .float-nav a { margin-top:-6% }
    .float-nav img { max-width:12vw }

.section-wrap { display:flex; gap:2%; justify-content:center; align-items:center; position:relative; z-index:2; padding:0 2% }
    .section-wrap div { max-width:70% }

.iframe-wrapper { position:relative; max-width:80%; margin:0px auto }
    .iframe-wrapper iframe { width:100%; border:0px; height:50vh; min-height:720px }

.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:19%; left:14%; width:72% }
        .rules-wrapper .ccon ul {}
        .rules-wrapper .ccon ul li { padding-bottom:12px }
        .rules-wrapper .ccon ul ul li { padding:6px 0px 0px }
        .rules-wrapper .ccon ul.cus { list-style:lower-roman }
    .rules-wrapper .ttable { position:absolute; top:22%; width:86%; height:68%; overflow-y:auto; left:6%; padding:8px }
        .rules-wrapper .ttable table { width:100% }
        .rules-wrapper .ttable table th,.rules-wrapper .ttable table td { text-align:center; padding:8px }
        .rules-wrapper .ttable table th { font-size:22px; font-weight:bold; color:#925f26 }
        .rules-wrapper .ttable table td { font-size:16px; color:#925f26; }
        .rules-wrapper .ttable table td small { font-size:10px; display:block }
    .rules-wrapper .gf { position:absolute; bottom:0; z-index:1 }
        .rules-wrapper .gf.g1 { left:0; max-width:20%; }
        .rules-wrapper .gf.g2 { right:0; max-width:16% }

.modal-rules { max-width:1160px }
    .modal-rules .modal-content { background-color:transparent; border:0 }

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

    .rules-wrapper .ccon { font-size:1.3vw; }
    .rules-wrapper .ccon ul { padding-left:4vw }
    .rules-wrapper .ccon ul li { padding-bottom:.6vw }
    .rules-wrapper .ccon ul ul li { padding:.4vw 0 0 }
    .rules-wrapper .ttable table th,.rules-wrapper .ttable table td { padding:1vw }
    .rules-wrapper .ttable table th { font-size:3.4vw; }
    .rules-wrapper .ttable table td { font-size:2.8vw; }

}

@media only screen and (max-width: 980px) {
    .iframe-wrapper { max-width:100% }
}

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

}

@media only screen and (max-width: 580px) {
    .iframe-wrapper iframe { height:62vh; min-height:auto}
}