/* 공통적용 */
html { scroll-behavior: smooth; }
body {background: #000; overflow-x: hidden;}
img { max-width: 100%; }
input, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; } 
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;} 
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="url"] {border: 1px solid #333; padding: 10px; height: 45px; background: #111; color: #fff; }  

textarea { width: 100%; resize: none; height: 100px; border: 0; border: 1px solid #333; padding: 10px; background: #111; color: #fff;} 
select {
    padding: 10px; border: 1px solid #333; height:45px; position: relative; color: #CBCBCA;
    background:#111 url('../img/icon_select_arrow.png') no-repeat 97% 50%/10px auto;
}
select option {background: #000;}

input::placeholder,
textarea::placeholder { color: #555; font-size: 0.875rem;} 

input[type="radio"] { border-radius: 10px; margin-top: -1px;}
input[type="checkbox"] { margin-top: 0px; } 

input[type="checkbox"],
input[type="radio"] {
    margin-right: 7px; border: 1px solid #aaa; background: #111; vertical-align: middle; width: 20px; height: 20px;
} 
input[type="checkbox"]:checked,
input[type="radio"]:checked { border: 5px solid var(--mainColor); } 
label { margin-right: 20px; display: inline-block; } 
label:last-child { margin-right: 0; } 

button {
    border: 1px solid var(--mainColor); background: var(--mainColor); color: #000; height: 45px; font-size: 0.875rem; line-height: 1;
    cursor: pointer;
}

.shorts-container {
    position: relative; padding-bottom: 178%; height: 0; overflow: hidden; max-width: 100%; background-color: #000;
}
.video-container {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background-color: #000;
} 
.shorts-container iframe,
.shorts-container object,
.shorts-container embed,
.shorts-container video,
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 


/* 줄바꿈 */
.brPc {display: block;}
.brM {display: none;}


/* popup */
.popup {
    overflow: hidden; position: fixed; width: 100%; height: 100%; display: none;
    z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .8);
} 
.popup.on {display: block;}
.popup .popup_inner {
    position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #111; padding:25px; border-top:2px solid var(--mainColor); border-bottom:2px solid var(--mainColor);
}
.popup .popup_tit {color: var(--mainColor); font-size: 1.25rem; text-align: center; margin-bottom: 10px;}

#popupVote .popup_inner {max-width: 380px;}
#popupVote .popup_box .txt {text-align: center; font-size: 1rem; margin-bottom: 20px;}
#popupVote #voteOrNot {display: flex; margin: 0 -5px;}
#popupVote #voteOrNot.off {display: none;}
#popupVote #voteOrNot a {font-size: 1rem; height: 45px; width: 100%; margin: 05px;}
#popupVote #voteCert {display: none;}
#popupVote #voteCert.on {display: block;}
#popupVote #voteCert .input {margin-bottom: 10px; display: flex;}
#popupVote #voteCert .input input {width: 70%;}
#popupVote #voteCert .input button {width: 30%;}
#popupVote #voteSubmit {margin-top: 20px; font-size: 1rem; height: 45px; width: 100%;}


/* btn style */
.btnStyle01 {
    background:var(--mainColor); border:1px solid var(--mainColor); padding:10px; transition: all .5s; border-radius: 5px; text-align: center;
    display:flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px; text-align: center; color: #000;
}
.btnStyle01:hover {background:#997838; border:1px solid #997838;}

.btnStyle02 {
    background:#666; border:1px solid #666; padding:10px; transition: all .5s; border-radius: 5px; text-align: center;
    display:flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px; text-align: center;
}
.btnStyle02:hover {background:#333; border:1px solid #333;}


.inner {width:90%; max-width:1400px; margin:0 auto;}
#container {position:relative; z-index: 1; min-height: 100vh;}

#footer {background: #111; padding:50px 0; color: #aaa; position:relative; z-index: 1;}
#footer .host { display: flex; margin-bottom: 60px; gap: 40px;}
#footer .host .naeyong {display: flex; flex-wrap: wrap; gap: 30px;}
#footer .host .naeyong img {height: 28px;}

#footer .name {font-size: 1.25rem;}
#footer .info {margin-top: 10px;}
#footer .info p {font-size: 1rem;}
#footer .info .txt {margin-right: 10px; display: inline-block}
#footer .copy {font-size: 0.875rem; margin-top: 20px; color: #777}

#footer .host{display: flex; flex-direction: column;}
#footer .box{display: flex;}
#footer .box img{object-fit: cover;}
#footer .gubun{color: #FFC85E; margin-right: 20px; min-width: 200px;margin-top: 5px;}

#topLogo {text-align: center; padding-bottom: 80px;}
#topLogo .logo {width:115px;}

.top_wrap {position: relative;}
.top_wrap .bgMain {height: 100% !important;}

.bgMain {
    background:#000; position:fixed; top:0; left:50%; width:100%; height:100vh; overflow: hidden;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
    z-index: -1; transform: translateX(-50%);
}
.bgMain::before,
.bgMain::after {display: block; content:""; position: absolute;  left:0; width:100%; height:50vh; z-index: 1; transition: all 1s;}
.bgMain::before {opacity: 0; top: 0;   background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));}
.bgMain:after {
    display:block; bottom:0;  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
}
.bgMain.scrolled::before {opacity: 1;}

.bgMain .bgStar {position: absolute; width:100%; height:100%; background-repeat: no-repeat; background-size: 100% auto; overflow: hidden;}
.bgMain .bgStar.left {
    top:0; left:0; background-image: url("../img/bg_star_left.png"); background-position: left top;
}
.bgMain .bgStar.right {
    bottom:0; right: 0; background-image: url("../img/bg_star_right.png"); background-position: right bottom;
}
/* .bgMain .bgTxt {
    position:absolute; width:100%; height:90%; top:0; left:0; opacity: .18;
    display: flex; flex-direction: column; justify-content: space-between;
}
.bgMain .bgTxt .track {height:16%;}
.bgMain .bgTxt .track img {max-height:100%; height:100%; width:auto; max-width: unset;}
.bgMain .bgTxt .track:nth-child(odd) { animation: bgMainTxtOdd 100s linear infinite;}
.bgMain .bgTxt .track:nth-child(even) { animation: bgMainTxtEven 100s linear infinite;}

@keyframes bgMainTxtOdd {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes bgMainTxtEven {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
} */

.top_s .inner {padding:100px 0; overflow: hidden;}
.top_s .tit_box {width:100%; text-align: center}
.top_s .tit_box .img  {width: 80%; max-width: 500px; margin: 0 auto;}
.top_s .tit_box .txt {font-size: 1.25rem; color:#fff; margin-top: 40px;}
.top_s .tit_box .txt .cmnt {font-size: 1rem; margin-top:20px;}
.top_s .btn_box {display: flex; gap: 10px; margin-top: 70px;}
.top_s .btn_box a {
    width:100%; background:var(--mainColor); padding:10px 3px; height:90px; font-size: 1.25rem; transition: all .5s; color: #000; font-weight: 800;
    display:flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px; text-align: center; line-height: 1.2;
}
.top_s .btn_box a:hover {background:#997838;  }
.top_s .btn_box a.voteCompleate {background: #222; color: #444; pointer-events: none; position: relative}
.top_s .btn_box a.voteCompleate:before {
    display:block; content: ""; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    background:url("../img/vote_completed.png") no-repeat center center / contain; width:120%; height:120%;
}
.top_s .btn_box a p {font-size: 1rem; margin-top: 5px;}

.main_s {width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}

.vote_s .inner {max-width: unset;}

.vote_tit {
    font-size: 3.75rem; line-height: 1; font-weight: 700; color: var(--mainColor); text-align: center; 
    padding:50px 0; display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* .vote_tit:before {
    content: ""; background: url("../img/img_title_mini.png") no-repeat center center / contain;
    width: 70px; height: 70px; vertical-align: middle;
} */
.vote_tit .small {font-size: 1.75rem;; margin-top: 20px; line-height: 1.4; color: #fff}

.vote_list {display: flex;  gap: 20px; padding-bottom: 120px;}
.vote_list .item {width: 100%; display: flex; flex-direction: column;}
.vote_list .item .img_box {aspect-ratio: 4/5; font-size: 0;}
.vote_list .item .img_box img {width: 100%; height: 100%; object-fit: cover;}
.vote_list .item .txt_box {color: var(--mainColor); display: flex; flex-direction: column; flex: 1 0 0;}
.vote_list .item .info {flex: 1 0 0; padding: 10px; background: rgba(0, 0, 0,  1); }
.vote_list .item .info .name {font-size: 1rem; font-weight: 700;}
.vote_list .item .info .history {font-size: 0.82rem; margin-top: 4px; color: #fff;}

.vote_list .item .voteBtn {font-size: 0.875rem; padding: 10px; margin: 0 10px;}

.vote_team {padding-bottom: 30px; display: flex; flex-wrap: wrap; gap: 20px;}
.vote_team .item {width: calc(50% - 10px); display: flex; padding:30px; gap: 40px; background: rgba(0, 0, 0,  .8); align-items: center;}
.vote_team .item .img_box {width: 320px; aspect-ratio: 1/1; background: #000;}
.vote_team .item .img_box img {width: 100%; height: 100%; object-fit: cover;}
.vote_team .item .txt_box {flex: 1 0 0; color: var(--mainColor); display: flex; flex-direction: column; gap: 10px;}
.vote_team .item .title .teamName {font-size: 1.5rem; font-weight: 700;}
.vote_team .item .info {color: #fff; display: flex; flex-wrap: wrap; gap:5px 10px;}
.vote_team .item .info .game {font-size: 0.875rem; font-weight: 800; width: 100%;}
.vote_team .item .info .game::before {display: inline-block; content: "["; margin-right: 4px;}
.vote_team .item .info .game::after {display: inline-block; content: "]"; margin-left: 4px;}
.vote_team .item .info .box {width: calc(50% - 10px);}
.vote_team .item .info .type {font-weight: 800; font-size: 0.812rem;}
.vote_team .item .info .player {display: flex; flex-direction: column; gap: 2px; font-size: 0.812rem; margin-top: 2px;}
.vote_team .item .info .player li {display: flex; gap: 2px;}
.vote_team .item .info .player .gu {font-weight: 700;}
.vote_team .item .info .player .nae::before {display: inline-block; content: "(";}
.vote_team .item .info .player .nae::after {display: inline-block; content: ")";}

.vote_team .item.dct .info .box:nth-of-type(2) {order: 2;}
.vote_team .item.dct .info .box:nth-of-type(3) {order: 4; margin-top: -63px;}
.vote_team .item.dct .info .box:nth-of-type(4) {order: 3;}


.vote_team .item .voteBtn {margin-top: 30px; font-size: 1rem; height: 50px; max-width: 280px;}

.vote_moment {max-width: 1040px; margin:0 auto;}
.vote_moment li {display: flex; padding:100px 0; border-top:1px solid #222; align-items: center;}
.vote_moment .video_box {flex-basis: 300px; margin-right: 60px; border:1px solid #111;} 
.vote_moment .txt_box {flex: 1;}
.vote_moment .txt_box .title {font-size: 1.5rem;}
.vote_moment .txt_box .text {font-size: 1.25rem; color: var(--mainColor); margin-top: 10px;}
.vote_moment .voteBtn {margin-top: 60px; font-size: 1.125rem; height: 60px; max-width: 280px;}


.rec_wrap {position: fixed; background: rgba(0,0,0,.8); top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh;}
.rec_wrap .bgMain {z-index: 1; min-height: unset; max-width: 650px;}
.rec_wrap .bgMain .bgStar {background-size: 140% auto;}
.rec_wrap .bgMain .bgStar.left {top: -15%;}
.rec_wrap .bgMain .bgStar.right {bottom: -15%;}
.rec_inner {max-width: 650px; margin:0 auto; position: relative; height: 100%; overflow: hidden; background: #000;}
.rec_content { overflow-y: auto; height: 100%; position: relative; z-index: 2;}
.rec_content::-webkit-scrollbar {width: 5px; background-color: #111;}
.rec_content::-webkit-scrollbar-thumb {width: 5px; background-color: var(--mainColor); border-radius: 5px;}
.rec_content::-webkit-scrollbar-track {width: 5px; background-color: #222; border-radius: 5px; z-index: 1;}
.rec_wrap #footer .host {flex-direction: column;}




.rec_s {padding:100px 0; position: relative; z-index: 2;}
.rec_s .sec_tit {text-align: center;}
.rec_s .sec_tit .img {width: 70%; max-width: 320px; margin: 0 auto;}
.rec_s .sec_tit .big {font-size: 2.25rem; font-weight:700; margin-top: 60px; color: var(--mainColor);}
.rec_s .sec_tit .small {font-size: 1.25rem; margin-top: 15px;}
.rec_s .sec_tit .info {margin-top: 20px; color: var(--mainColor); font-weight: 700;}
.rec_s .sec_tit .date {font-size: 1.5rem;}
.rec_s .sec_tit .venun {font-size: 1.125rem;}
.rec_s .sec_tit .descrip {margin-top: 25px; line-height: 1.5;}
.rec_s .video_box {
    width: 100%; text-align: center; background:#333; color: #fff; font-size: 1.9rem; margin-top: 60px;
}
.rec_s .btn_box a {font-size: 1.125rem; height: 60px; max-width:280px; margin:0 auto;}

.form_box {max-width: 600px; margin: 60px auto 0; display: flex; flex-wrap: wrap; gap: 0 10px;}
.form_box li {margin-bottom: 40px; width: 100%;}
.form_box li.w50 {width: calc(50% - 5px);}
.form_box .req .gubun p::after {display: inline-block; content: "*"; margin-left: 3px; }
.form_box .gubun {margin-bottom: 10px;}
.form_box .gubun .head {color: var(--mainColor); margin-bottom: 5px; font-weight: 800;}
.form_box .naeyong {display: flex; gap: 10px; width: 100%;}
.form_box .label {display: flex; flex-wrap: wrap; gap:10px 20px;}
.form_box .label.wp30 p {width: calc(50% - 10px);}
.form_box .labelB {display: flex; flex-direction: column; gap: 10px;}
.form_box .input {width: 100%;}
.form_box .input input[type="text"],
.form_box .input input[type="tel"],
.form_box .input input[type="url"] {width: 100%;}
.form_box .input textarea {height: 120px;}
.form_box .input input::placeholder,
.form_box .input textarea::placeholder {font-size: 1rem;}
.form_box .input label {margin-bottom:10px;}
.form_box .input_2 {display: flex; gap: 10px;}
.form_box .input_2 select {width: 100%;}

.dongBan {margin-bottom: 60px;}
.dongBan .top_tit {font-size: 1.25rem; padding-bottom: 5px; color: var(--mainColor); border-bottom: 2px solid var(--mainColor);}
.dongBan .form_box {margin-top: 30px; border-bottom: 2px solid var(--mainColor); }
.dongBan .btn_box {padding-top: 20px; }
.dongBan .btn_box .btnAdd {
    display: block; width: max-content; margin: 0 0 0 auto; background: var(--mainColor);
    color: #000; height: 40px; line-height: 40px; border-radius: 5px; padding:0 10px; font-size: 1rem;
}
.dongBan .deleteDong {color: #ccc; width: max-content; height: 40px; line-height: 40px; padding:0 10px; border: 1px solid #ccc; cursor: pointer; margin-left: auto;}
.text_box{font-size: 0.812rem;}