@charset "utf-8";
@import url(reset.css);
@import url(icon_regular.css);
@import url(icon_bold.css);
@import url(icon_fill.css);
@import url(layout.css);
@import url(main.css);
@import url(component.css);
@import url(member.css);
@import url(sub1.css);
@import url(sub2.css);
@import url(sub3.css);
@import url(sub4.css);
@import url(sub5.css);
@import url(sub7.css);
@import url(sub8.css);
@import url(contents.css);


/* skip link */
.skip-nav {position:relative; z-index:999;}
.skip-nav a {display:inline-block; position:absolute; top:-100px; left:-999px; border:1px solid #24242c; background:#31313b; color:#fff;}
.skip-nav a:focus, .skip-nav a:active {display:inline-block; top:0; left:0; cursor:pointer; zoom:1; padding:5px 8px 4px; margin-right:9px; background:#31313B; font-weight:normal; font-size:11px; line-height:1.4;}

/* link */
a:focus, button:focus, input:focus, textarea:focus, select:focus {border-color: var(--clr-outline); outline: 2px dashed var(--clr-outline);}
a:hover {text-decoration: underline;}

/* ellipsis */
.ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word;}
.ellipsis.clamp1 {-webkit-line-clamp: 1; line-height: 1.6;}
.ellipsis.clamp2 {-webkit-line-clamp: 2;}
.ellipsis.clamp3 {-webkit-line-clamp: 3;}

/* select */
select { width: auto; height: 48px; padding: 0 40px 0 20px; font-size: 1.8rem; border: 1px solid #6b5f59; border-radius: 6px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='%237b8086'%3E%3Cpath d='M81.8 25.4a6 6 0 0 0-8.4.8L48 56.6 22.6 26.2a6 6 0 1 0-9.2 7.6l30 36a6 6 0 0 0 9.2 0l30-36a6 6 0 0 0-.8-8.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; background-color: white;}
select:focus {border-color: var(--clr-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='%23cc5621'%3E%3Cpath d='M81.8 25.4a6 6 0 0 0-8.4.8L48 56.6 22.6 26.2a6 6 0 1 0-9.2 7.6l30 36a6 6 0 0 0 9.2 0l30-36a6 6 0 0 0-.8-8.4'/%3E%3C/svg%3E");}

/* input */
input[type="text"], input[type="password"], input[type="number"], input[type="email"] {height: 48px; padding: 0 1.6rem; font-size: 1.8rem; border: 1px solid #6b5f59; border-radius: 6px;}

/* input : radio */
.it-radio {display:inline-block; position:relative; line-height: 2.8rem;}
.it-radio input[type="hidden"] { display:none; }
.it-radio input[type="radio"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.it-radio label {display:inline-block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; font-weight: 500; font-size: inherit;}
.it-radio label:before {content:''; display:inline-block; vertical-align:middle; width:2.8rem; height:2.8rem; line-height:2.8rem; margin:0 8px 0 0; text-align:center; background-color:#fff; border:1px solid #6e635d; border-radius:100%;}
.it-radio input[type="radio"]:checked ~ label:before {border-color: #ae4110; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23cc5621'/%3E%3C/svg%3E") center/contain no-repeat #fff; background-size: 1.8rem;}
.it-radio input[type="radio"]:disabled ~ label:before {border-color: #ccc; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ccc'/%3E%3C/svg%3E") center/contain no-repeat #fff;}

/* input : checkbox */
.it-check {position:relative; line-height: 2.8rem;}
.it-check input[type="hidden"] { display:none; }
.it-check input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.it-check label {display:inline-block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; font-weight: 500; font-size: inherit;}
.it-check label:before {content:''; display:inline-block; width:2.8rem; height:2.8rem; line-height:2.8rem; margin:0 8px 0 0; border:1px solid #6e635d; text-align:center; vertical-align:middle; border-radius:8px; background-color: #fff;}
.it-check input[type="checkbox"]:checked ~ label:before {border-color:#cc5621; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m9.5 15.6 4.6 4.4 8.4-8' style='fill:none;stroke:%23fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round'/%3E%3C/svg%3E") center/contain no-repeat #cc5621;}
.it-check input[type="checkbox"]:disabled ~ label:before {border-color:#ccc; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m9.5 15.6 4.6 4.4 8.4-8' style='fill:none;stroke:%23fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round'/%3E%3C/svg%3E") center/contain no-repeat #ccc;}

/* input : required */
.required {color: #ff0000; background: transparent;}

/* slush + bar */
.slush {color: #b6b6b6;}
.bet-wrap .bar {color: #e6e6e6; font-weight: 300;}

/* text : team + win + loser */
.red-team-badge, .blue-team-badge, .draw-badge {display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; line-height: 2.8rem; border-radius: 100%; font-weight: 600; font-size: 1.5rem; color: white;}
.red-team-badge {background-color: #e51d31;}
.blue-team-badge {background-color: #0139c9;}
.draw-badge {background-color: #545454;}
.red-team-text {color: #e51d31; font-weight: 500;}
.blue-team-text {color: #0139c9; font-weight: 500;}
.draw-text {color: #545454; font-weight: 500;}
.bet-wrap {font-weight: 500;}
.badge-rd {width: 45px; border-radius: 50px;}

.win, .loser {display: block; font-weight: 600;}
.win {color: #f65700;}
.loser {color: #5350ab;}
.draw {color: #545454;}

.gm-winer {display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 5.3rem; background: url(../img/badge_winner.png) 0 1px / contain no-repeat;}
.gm-winer [class$="team-badge"] {border: 1px solid white;}
.gm-draw {display: inline-flex; align-items: center; justify-content: center; background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='19.5' fill='white' stroke='%239A9A9A'/%3E%3C/svg%3E") center / contain no-repeat;}
.gm-draw .red-team-badge {background-color: #ab1120;}
.gm-draw .blue-team-badge {background-color: #15378b;}

.game-mch-wrap {display: grid; grid-template-columns: 1fr 2rem 1fr; align-items: center; gap: 0 .4rem;}
.game-mch-wrap .mch-vs {font-size: 1.4rem; color: #7c7c7c;}
.game-mch-wrap .badge-box {display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 6.4rem;}
.game-mch-wrap .mch-teams [class$="team-text"] {font-weight: 700;}
.game-mch-wrap div[data-team="red-team"] {display: flex; align-items: center; justify-content: flex-end;}
.game-mch-wrap div[data-team="blue-team"] {display: flex; align-items: center; justify-content: flex-start;}

/* icon color important */
.ph-arrow-square-out {color: #706c6c !important;}

/* margin */
.mgt20 {margin-top: 24px;}
.mgt40 {margin-top: 40px;}

/* modal layer */
body.modal-open::before {content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 999; pointer-events: auto;}
body.video-modal-open::before {content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .75); z-index: 999; pointer-events: auto;}
body.modal-open, body.video-modal-open {overflow: hidden;}

.modal-layer {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: white; border-radius: var(--br-lg); display: none; --contSub-title: 2.4rem; --page-title-color: #111;}
.modal-layer .modal-head {height: 6.2rem; padding: 1.2rem 4rem; border-bottom: 1px solid #e2e4e7;}
.modal-layer .modal-head h3 {font-weight: 700; font-size: 3rem; letter-spacing: -0.05em; color: #111;}
.modal-layer .modal-cont {width: 100%; height: calc(100% - 6.2rem); padding: 2.5rem 4rem 4rem; overflow-y: auto;}
.modal-layer .modal-cont .title {font-weight: 700; font-size: 2.6rem; line-height: var(--lh-heading); text-align: center;}
.modal-layer .modal-foot {position: absolute; top: 1rem; right: 3rem; display: flex; align-items: center;}
.modal-layer .modal-foot button {width: 4rem; height: 4rem;}
.modal-layer .modal-foot i[class^="ph"] {font-size: 2.4rem;}
.modal-layer .modal-foot i[class^="ph"]::before {vertical-align: middle;}

.modal-layer.modal-lg {width: 110rem; height: 90%;}
.modal-layer.modal-md {width: 110rem; height: auto;}
.modal-layer.modal-sm {width: 50rem; height: auto;}

/* video modal layer */
.vm-bg {width: 100%; height: 100%; position: absolute; top:0; left: 0; cursor: pointer; z-index: 1; background-color: transparent;}
.video-modal {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; display: flex; justify-content: center; align-items: center;}
.video-modal .vm-body {width: 93.66%; max-width: 850px; z-index: 2;}
.video-modal .vm-body video {box-shadow: 5px 5px 24px 0 rgb(0 0 0 / 0.75);}

@media screen and (max-width: 1440px) {
    .modal-layer {--contSub-title: 2.2rem;}
}
@media screen and (max-width: 1280px) {
    .modal-layer.modal-lg, .modal-layer.modal-md {width:90%}
    .modal-layer .modal-head {padding: 1.2rem 2rem;}
    .modal-layer .modal-cont {padding: 2.5rem 2rem 3rem;}
    .modal-layer .modal-foot {right: 1rem;}
}
@media screen and (max-width: 960px) {
    /* input : radio */
    .it-radio {line-height:2.4rem;}
    .it-radio input[type="radio"] + label:before {width:2.4rem; height:2.4rem; line-height:2.4rem;}
    .it-radio input[type="radio"]:checked + label:before {background-size: 1.6rem;}

    [class$="-team-badge"], .draw-badge {width: 2.4rem; height: 2.4rem; font-size: 1.3rem;}
    .gm-winer {width: 4rem; height: 4rem; line-height: 4rem;}
    .game-mch-wrap .badge-box {width: 4rem; height: 5.4rem;}
    .modal-layer {--contSub-title: 2rem;}
    .modal-layer .modal-head {height: 5.4rem;}
    .modal-layer .modal-head h3 {font-size: 2.4rem;}
    .modal-layer .modal-cont {height: calc(100% - 5.4rem);}
    .modal-layer .modal-foot {gap: 0;}
    .modal-layer .modal-foot button {width: 3.4rem; height: 3.4rem;}
    .modal-layer .modal-foot .bt-print {display: none;}
}
@media screen and (max-width: 568px) {
    .modal-layer.modal-sm {width: 90%;}
}