@charset "utf-8";

/* sub */
.sub-container {width: 100%; padding: 80px 0 150px 0;}
.sub-tit {display: block; text-align: center; font-size: 24px; font-weight: 700; padding-bottom: 60px; font-family: 'Taenada';}
.sub-tit .line {display: block; width: 188px; height: 3px; background-color: #C4FA2F; margin: 12px auto 0 auto; content: '';}

.tab-btn-area {width: 100%; display: flex; column-gap: 30px; justify-content: center; padding-top: 10px;}
.tab-btn-area .tab-link {width: 188px; height: 58px; line-height: 64px; font-family: 'Taenada'; font-size: 22px; text-align: center; background: #E9E9E9; cursor: pointer;}
.tab-btn-area .tab-link.active {background-color: #C4FA2F;}

.tab-cont-area .tab-cont {display: none; padding-top: 60px;}
.tab-cont-area .tab-cont.active {display: block;}

.tab-btn-area.tab-style-2 {padding-top: 0;}
.tab-btn-area.tab-style-2 .tab-link {height: 46px; line-height: 46px; font-weight: 500; font-size: 17px; background-color: #fff; border: 1px solid #E0E0E0;}
.tab-btn-area.tab-style-2 .tab-link.active {position: relative; background-color: #2B2B2B; color: #fff; line-height: 43px;}
.tab-btn-area.tab-style-2 .tab-link.active::after {position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; background-color: #C4FA2F; display: block; content: '';} 

.btn-area {display: flex; align-items: center; justify-content: center; column-gap: 30px; margin-top: 64px;}
.btn-default {width: 140px; height: 48px; display: flex; align-items: center; justify-content: center; column-gap: 10px; border-radius: 30px; border: 1px solid #DEDEDE; background-color: #fff; cursor: pointer;font-weight: 600; font-size: 20px;}
.btn-default-l {width: 180px; height: 60px; border-radius: 30px; background-color: #004C99; border: 1px solid #004C99;}
.btn-default-l span {font-weight: 600; font-size: 20px;} 
.btn-input {border-radius: 5px; font-size: 18px; font-weight: 500; flex-shrink: 0;}
.bg_black {background-color: #575757; border: 1px solid #575757;}
.bg_navy {background-color: #004C99; border: 1px solid #004C99; color: #fff;}
.bg_black span,
.bg_navy span {color: #fff;}

.checkbox-item input[type="checkbox"] {display:none;}
.checkbox-item input[type="checkbox"] + label{position: relative; cursor:pointer; color: var(--text1) !important; padding-left: 24px !important;}
.checkbox-item input[type="checkbox"] + label:hover {color: var(--text2) !important; transition: all 0.3s;}
.checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; background-color: var(--text_w); width:16px; height:16px; border:1px solid var(--line); left:0; top: 50%; transform: translate(0, -50%);}
.checkbox-item input[type="checkbox"]:checked + label:before{ content:""; background-color: var(--text1); border: 1px solid var(--text1); background-image: url('../img/chk.png'); background-repeat: no-repeat; background-position: 50%;}

.fileupload-item {display: flex; align-items: center; column-gap: 10px;}
.fileupload-item input[type=file]::file-selector-button {display: none;}
.fileupload-item input[type=file] {width: calc(100% - 130px) !important; border: 1px solid #E9E9E9 !important; background-color: #fff !important; padding: 0 20px !important; line-height: 50px;}
.fileupload-item label {width: 120px;height: 50px;line-height:50px;background: #575757; border-radius: 5px; color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer; font-size: 18px;}
.fileupload-item .file_del {width: 100%; display: flex; align-items: center; column-gap: 10px;}
.fileupload-item .file_del label {width: 100%; background-color: #EEE; color: #656565;}
.fileupload-item .file_del input[type="checkbox"] {width: 50px !important; height: 50px;}

.input-box {display: flex; flex-direction: column; row-gap: 30px;}
.input-area .input_multi,
.input-area .input_triple {width: 100%; display: flex; align-items: center; column-gap: 30px;}
.input-area .input_multi > div {width: calc(100% / 2);}
.input-area .input_triple > div {width: calc(100% / 3);}
.input-area .input-item {width: 100%;}
.input-area .input-item > span {position: relative; font-size: 18px; font-weight: 500; padding-bottom: 10px;}
.input-area .input-item.must > span::after {position: absolute; top: -2px; right: -11px; font-size: 18px; content: '*'; color: #0066FF;}
.input-area .input-item.checkbox-area {display: flex; flex-direction: column; row-gap: 10px; padding-top: 30px;}
.input-area .input-item .input-item-area {display: flex; column-gap: 10px;}
.input-area .input-item .input-item-area input,
.input-area .input-item .input-item-area select,
.input-area .input-item .input-item-area.textarea-area textarea,
.input-area .input-item .input-item-area.fileupload-item .span-upload {width: 100%; height: 50px; background-color: #EEE; border: 1px solid #EEE; padding: 16px 20px; color: #656565; font-size: 16px; font-weight: 500; outline: none; border-radius: 5px;}
.input-area .input-item .input-item-area input:focus,
.input-area .input-item .input-item-area select:focus,
.input-area .input-item .input-item-area.link-item-area input:focus,
.input-area .input-item .input-item-area.textarea-area textarea:focus {border: 1px solid #000; background-color: #fff; transition: all 0.3s;}
.input-area .input-item .input-item-area select {padding:0 42px 0 20px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; outline: none;appearance: none;}
.input-area .input-item .input-item-area.textarea-area textarea {height: 240px; resize: none;}
.input-area .input-item .input-item-area.textarea-area .wr_content {width: 100%;}
.input-area .input-item .input-item-area.fileupload-item {flex-wrap: wrap; row-gap: 20px;}
.input-area .input-item .input-item-area.radio-area {display: flex; align-items: center; column-gap: 10px;}
.input-area .input-item .input-item-area.radio-area .radio-item {width: 50%;}
.input-area .input-item .input-item-area.link-item-area {position: relative;}
.input-area .input-item .input-item-area.link-item-area label {position: absolute; top: 50%; left: 20px; transform: translate(0, -50%); width: 30px; height: 30px; background-color: #656565; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.input-area .input-item .input-item-area.link-item-area input {border: 1px solid #E9E9E9; background-color: #fff; padding: 16px 20px 16px 62px;}
.input-area .select-item {position: relative; cursor: pointer;}
.input-area .select-item svg {position: absolute; top: 50%; right: 20px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; pointer-events: none;}
.input-area .select-item:focus-within svg {transform: translate(0, -50%) rotate(180deg);}

.sub-visual {position: relative; width: 100%; height: 400px;}
.sub-visual::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; display: block; content: '';}
.sub-visual > .inner {position: relative; height: 100%;}
.sub-visual > .inner .sub-visual-tit {position: absolute; z-index: 1; right: 0; bottom: 53px; display: block; text-align: right; font-size: 32px; font-family: 'Taenada'; line-height: 60px; color: #fff;}
.sub-visual > .inner .sub-visual-tit::after {position: absolute; width: 188px; height: 3px; background-color: #C4FA2F; bottom: 0; right: 0; display: block; content: '';}

.sub-visual.notice {background: url(../img/sub-banner_notice.jpg) no-repeat center center; background-size: cover;}
.sub-visual.ranking { background: url(../img/sub-banner_ranking.jpg) no-repeat center center; background-size: cover;}
.sub-visual.sponsor { background: url(../img/sub-banner_sponsor.jpg) no-repeat center center; background-size: cover;}
.sub-visual.event { background: url(../img/sub-banner_event.jpg) no-repeat center center; background-size: cover;}
.sub-visual.rules { background: url(../img/sub-banner_rules.jpg) no-repeat center center; background-size: cover;}

.accordian h5 {font-size: 20px; font-weight: 600;}
.accordian p {font-size: 18px; font-weight: 500;}
.accordian p b {font-weight: 600;}
.accordian .accordian-tit {display: flex; justify-content: space-between; align-items: center; height: 60px; background-color: var(--bg7); padding: 0 41px 0 46px; cursor: pointer;}
.accordian .accordian-info {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; border-bottom: 1px solid var(--line4);}
.accordian .accordian-info > li h5 {padding-bottom: 6px;}
.accordian .accordian-info > li p b {display: block;}
.accordian .accordian-info > li:not(:last-child) {padding-bottom: 18px;}
.accordian .accordian-arrow svg {fill: transparent !important;}

.accordian.active .accordian-info {padding: 30px 46px; max-height: none; transition: max-height 0.3s ease-in-out; border-top: 1px solid var(--line4); border-left: 1px solid var(--line4); border-right: 1px solid var(--line4);}
.accordian.active .accordian-arrow {transition: transform 0.3s ease;}
.accordian.active .accordian-arrow.rotate {transform: rotate(-180deg);}

/* 게시판 */
.bo_new .tbl_head01 thead th {height: 60px; font-size: 20px; font-weight: 600; background-color: var(--line3); padding: 0;}
.bo_new .tbl_head01 td {height: 84px;font-size: 20px;padding: 0;font-weight: 500;}
.bo_new .tbl_head01 a:hover {text-decoration: none;}
.bo_new #bo_list {margin-bottom: 0;}
.bo_new #bo_list tbody .even td {background: var(--text_w);}
.bo_new #bo_list .td_num2,
.bo_new #bo_list .td_num {width: 6%;}
.bo_new #bo_list .td_name,
.bo_new #bo_list .td_datetime {width: 16%; padding: 0;}
.bo_new #bo_list .td_subject {width: 50%;}
.bo_new #bo_list .td_subject .bo_tit {padding: 0 10px 0 30px;}
.bo_new #bo_list .td_subject .bo_ti a { display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.bo_new #bo_list tbody tr:hover td {background: var(--bg7);}
.bo_new #bo_list tbody tr:hover {border-left: 0;}
.bo_new .bo_tit {font-weight: 500;}
.bo_new #bo_list .td_name span {display: block; text-align: center;}
.bo_new .chk_box_area {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.bo_new #bo_btn_top {width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin: 22px 0 17px 0;}
.bo_new #bo_btn_top::after {display: none;}
.bo_new #bo_list_total {float: none; line-height: normal; font-size: 20px; font-weight: 500; color: var(--bg3);}

#bo_list .bo_tit .fa-link,
#bo_list .bo_tit .fa-download,
#bo_list .cnt_cmt {width: 15px; height: 15px;display: inline-flex; align-items: center; justify-content: center; line-height: normal; font-size: 9px; border-radius: 50%; background-color: var(--text3); color: #fff;}

/* 갤러리형 
.bo_new #bo_gall #gall_ul {margin: 0; display: flex; column-gap: 30px; row-gap: 80px; flex-wrap: wrap;}
.bo_new #bo_gall #gall_ul:after {display: none;}
.bo_new #bo_gall .gall_box {margin: 0; border-radius: 0;}
.bo_new .gall_row .col-gn-3 {width: calc(100% / 3 - 20px); padding: 0; border: 1px solid var(--bg7);}
.bo_new #bo_gall .gall_text_href {padding: 24px 16px; margin: 0;}
.bo_new #bo_gall .gall_img {border-bottom: 0;}
.bo_new #bo_gall .gall_img,
.bo_new #bo_gall .gall_img span {background: var(--bg7);}
.bo_new #bo_gall .bo_tit {height: 48px; margin-bottom: 16px; font-size: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.bo_new #bo_gall .bo_cnt {height: 57px; font-size: 16px; color: var(--text1);display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
*/
#gall_ul .gall_box {display: flex; align-items: center;}
#gall_ul .gall_con {width: 100%; display: flex; align-items: center; justify-content: space-around; column-gap: 20px;}

#gall_ul li:nth-of-type(1) {border-top: 1px solid #DADADA;}
#gall_ul li {padding: 10px 0; border-bottom: 1px solid #DADADA;}
#gall_ul li .gall_img a {width: 298px; height: 308px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
#gall_ul li .gall_img a img {width: 100%; height: 100%; object-fit: contain;}
#gall_ul li .gall_text_href {display: flex; flex-direction: column; row-gap: 10px;}
#gall_ul li .gall_text_href .bo_tit {font-size: 20px; font-weight: 600; padding-bottom: 12px; }
#gall_ul li .gall_text_href .bo_cnt { display: -webkit-box;--webkit-line-clamp: 3;--webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;max-height: calc(1.5em * 3); /* 줄 수 × line-height */}
#gall_ul li .btn-area {display: flex; flex-direction: column; row-gap: 14px; margin-top: 0;}
#gall_ul li .btn-area .bg_black:hover {background-color: #C4FA2F; transition: all 0.3s;}
#gall_ul li .btn-area .bg_black:hover span {color: #000; transition: all 0.3s;}
#gall_ul li .btn-area .bg_black:hover svg path {fill: #000; transition: all 0.3s;}

#gall_ul li .btn-area .btn-default {display: flex; justify-content: center; align-items: center; column-gap: 12px; width: 140px; height: 42px; border-radius: 0; font-size: 16px; font-weight: 500; border: 0;}
#gall_ul li .btn-area .btn-default > span {color: #000;}
#gall_ul li .btn-area .btn-default > svg path {fill: #000;}

#gall_ul li .btn-area .bg_black {background-color: #2B2B2B;}
#gall_ul li .btn-area .bg_black > span {color: #fff;}
#gall_ul li .btn-area .bg_black > svg path {fill: #fff;}
#gall_ul li .btn-area .bg_ygreen {background-color: #C4FA2F;}

#bo_btn_top .btn_bo_user {display: flex; column-gap: 4px; align-items: center;}
#bo_btn_top .btn_bo_user > li {width: 50px; height: 50px;}
#bo_btn_top .btn_bo_user > li a,
#bo_btn_top .btn_bo_user > li .btn_b01 {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #E0E0E0; font-size: 28px;}
#bo_btn_top .btn_bo_user > li a.btn_admin,
#bo_btn_top .btn_bo_user > li .btn_b01 {color: var(--bg)}
#bo_btn_top .btn_bo_user > li:hover a.btn_admin,
#bo_btn_top .btn_bo_user > li:hover .btn_b01 {background-color: var(--bg); border: 1px solid var(--bg); color: var(--text_w); transition: all 0.3s;}
#bo_btn_top .btn_bo_user > li a.btn_b01 {background-color: var(--primary); border: 1px solid var(--primary); color: var(--bg);}
#bo_btn_top .btn_bo_user .fa-spin {animation: none;}

.search-area .bo_sch form {width: 100%; padding: 0; display: flex; justify-content: space-between;}
.search-area .select {position: relative; cursor: pointer;}
.search-area .select select {border: 1px solid #E0E0E0; width: 140px; height: 50px; padding: 0 45px 0 16px; font-size: 20px; color: var(--text1);border-radius: 0;box-shadow: revert; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; outline: none;appearance: none;}
.search-area .select svg {position: absolute; top: 50%; right: 16px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; pointer-events: none;}
.search-area .select:focus-within svg {transform: translate(0, -50%) rotate(180deg);}
.search-area .bo_sch {position: revert; display: flex; align-items: center; column-gap: 30px; width: 100%; max-height: none; margin-left: 0; margin-top: 0; box-shadow: revert; border: 0; border-radius: 0; background: transparent;}
.search-area .bo_sch:after {display: none;}
.search-area .bo_sch .sch_bar {margin-top: 0; display: flex; column-gap: 30px; border: 0; box-shadow: revert; border-radius: 0; justify-content: flex-end;} 
.search-area .bo_sch .sch_bar input {width: 625px; border: 1px solid #E0E0E0; height: 50px; padding: 15px 16px; color: var(--bg3); font-size: 18px; outline: none;}
.search-area .bo_sch .sch_bar input:focus,
.search-area select:focus  {border: 1px solid var(--bg);}
.search-area .bo_sch .sch_bar button {flex-shrink: 0; background-color: var(--bg); width: 80px; height: 50px; display: flex; align-items: center; justify-content: center; column-gap: 9px;}
.search-area .bo_sch .sch_bar button span {color: var(--text_w); font-size: 18px; font-weight: 600;}

/* login */
.login-wrap.mbskin {margin: 0 !important; width: auto !important; height: 100vh; display: flex; align-items: center; justify-content: center;}
.login-wrap.mbskin .mbskin_box {width: 420px; display: flex; flex-direction: column; row-gap: 60px;  padding: 60px 50px; border: 1px solid #d4d4d4;}
.login-wrap.mbskin .mbskin_box .login-logo {width: 140px;}
.login-wrap.mbskin .mbskin_box #login_fs {padding: 0; border: 0;}
.login-wrap.mbskin .mbskin_box #login_fs .btn_submit {margin: 0 !important; background-color: var(--primary-btn-bg); color: var(--primary-btn-text); font-weight: normal;}
.login-wrap.mbskin .mbskin_box #login_fs .btn_submit:hover {background-color: var(--primary-btn-hover-bg);}
.login-wrap.mbskin .mbskin_box #login_fs #login_info {display: flex; flex-direction: column; row-gap: 8px;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info:after {display: none;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info .login_if_lpl {text-align: initial;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info .login_if_lpl:hover a {color: var(--primary); transition: all 0.3s;}
.login-wrap.mbskin .input-wrap .input-item-box {display: flex; flex-direction: column; align-items: flex-start;}
.login-wrap.mbskin .input-wrap .input-item-box .input-item input {height: auto !important; margin: 0 !important; box-shadow: none;}
.login-wrap .btn-default {width: 100%; height: 44px !important; font-size: 20px; color: var(--text1); display: flex; align-items: center; justify-content: center; font-size: 16px !important; border: 1px solid var(--text1); border-radius: 0;}
.login-wrap .btn-default:hover {background-color: var(--text1) !important; color: #fff !important; transition: all 0.3s;}
.login-wrap .checkbox-wrap {padding: 0 4px;}
.login-wrap .btn-wrap {margin-top: 0;}

/* input */
.input-wrap {display: flex; flex-direction: column; row-gap: 20px;}
.input-wrap .input-item-box > span {position: relative; padding-bottom: 4px;}
.input-wrap .input-item-box.must > span::after {position: absolute; display: block; top: 0; right: -10px; content: '*'; color: #ff0000;}
.input-wrap .input-item-box .input-item {width: 100%;}
.input-wrap .input-item-box .input-item input[type="text"],
.input-wrap .input-item-box .input-item input[type="password"] {width:100%; padding: 10px 12px; outline: none; border: 1px solid var(--line); border-radius: 0;}
.input-wrap .input-item-box .input-item input[type="text"]:focus,
.input-wrap .input-item-box .input-item input[type="password"]:focus {border: 1px solid var(--text1);  transition: all 0.3s;}
.input-wrap .input-item-box .input-item input[readonly] {background-color: var(--depth2);}
.input-wrap .input-item-box .input-item input[readonly]:focus {border: 1px solid var(--line); background-color: var(--depth2); pointer-events: none;background-color: #f5f5f5; cursor: default;}
.input-wrap .input-item-box .input-item input[readonly]::placeholder {color: var(--text1);}


/* 공지사항 */
.notice .chk_box_area .checkbox-item input[type="checkbox"] + label {padding-left: 0 !important;}
.notice .chk_box_area .checkbox-item input[type="checkbox"] + label:before {left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* 스폰서 */
.sponsor .sub-contants > ul {width: 100%; display: flex; column-gap: 30px; row-gap: 80px; flex-wrap: wrap;}
.sponsor .sub-contants > ul > li {position: relative; width: calc(100% / 3 - 20px); border: 1px solid var(--bg7);}
.sponsor .sub-contants > ul > li a {width: 100%; height: 100%;}
.sponsor .sub-contants > ul > li:hover {border: 1px solid var(--primary); transition: all 0.3s;}
.sponsor .sub-contants > ul > li .img-wrap {display: flex; align-items: center; justify-content: center; width: 100%; height: 175px; background-color: var(--bg7);}
.sponsor .sub-contants > ul > li .img-wrap img {width: auto; height: 88px; object-fit: scale-down;}
.sponsor .sub-contants > ul > li .img-l img {height: 120px;}
.sponsor .sub-contants > ul > li .img-s img {height: 43px;}
.sponsor .sub-contants > ul > li .shortcut-btn {position: absolute; width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; right: 0; top: 0; background-color: var(--primary);}
.sponsor .sub-contants > ul > li .info {padding: 24px 16px;}
.sponsor .sub-contants > ul > li .info h4 {display: block; height: 48px; margin-bottom: 16px; font-size: 20px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.sponsor .sub-contants > ul > li .info p {display: block; height: 57px; word-break: keep-all; font-size: 16px; color: var(--text1);display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.sponsor .sub-contants > ul > li:nth-of-type(3) h4 br {display: none;}

/* 랭킹 */
.card-style > ul {display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 30px; row-gap: 50px;}
.card-style > ul > li {width: calc(100% / 3 - 20px);}
.card-style > ul > li .player-info {position: relative; width: 100%; height: 255px; border: 3px solid #D9D9D9; padding: 16px 15px; overflow: hidden;}
.card-style > ul > li .player-info:hover {border: 3px solid #C4FA2F; transition: all 0.3s;}
.card-style > ul > li .player-info > div {display: flex; column-gap: 8px; align-items: center; }
.card-style > ul > li .player-info > div span {font-size: 15px; font-weight: 600; font-family: 'Taenada';}
.card-style > ul > li .player-info > div span:nth-of-type(1) {background-color: #C4FA2F; padding: 4px 14px; font-family: 'Pretendard-Regular';}
.card-style > ul > li .player-info h4 {font-size: 24px; font-weight: 600; padding-top: 15px; padding-bottom: 8px;}
.card-style > ul > li .player-info p {font-size: 14px; color: #7D7D7D;}
.card-style > ul > li .player-info img {position: absolute; z-index: -1; object-fit: contain; right: 0; top: 40px;}
.card-style > ul > .card .list {width: 100%; display: flex; flex-direction: column;}
.card-style > ul > .card .list li {width: 100%; height: 40px;}
.card-style > ul > .card .list li a {width: 100%; height: 100%;  display: flex; align-items: center; justify-content: space-between; column-gap: 10px; padding: 0 10px; text-align: center; background-color: #F3F3F3}
.card-style > ul > .card .list li:nth-of-type(2n) a {background-color: #E6E6E6;}
.card-style > ul > .card .list li p {font-size: 14px; font-weight: 500;}
.card-style > ul > .card .list li span {font-size: 12px; font-weight: 500; color: #666;}
.card-style > ul > .card .list li:hover a,
.card-style > ul > .card .list li:nth-of-type(2n):hover a {background-color: #D2D2D2; transition: all 0.3s;}
.card-style > ul > .card .more {width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; column-gap: 6px; background-color: #C4FA2F; color: #000; font-size: 16px; font-weight: 500;}

.team-cont table {width: 100%;}
.team-cont table th {height: 58px; background-color: #000; color: #fff; font-weight: 500; font-size: 17px; vertical-align: middle;}
.team-cont table td {padding: 19px 12px; font-weight: 500; font-size: 16px; background-color: #F3F3F3; text-align: center; cursor: pointer;}
.team-cont table td.team-img {width: 298px;}
.team-cont table td .img-box {display: flex; flex-direction: column; row-gap: 10px;}
.team-cont table td .img-box .img-wrap {width: 100%; height: 132px;}
.team-cont table td .img-box .img-wrap img {object-fit: contain;}
.team-cont table tbody tr:nth-of-type(2n) td {background-color: #E6E6E6;}
.team-cont table tr:hover td,
.team-cont table tbody tr:nth-of-type(2n):hover td {background-color: #D2D2D2; transition: all 0.3s;}

.player-info-section {background-color: #000; height: 712px;}
.player-info-section .inner {height: 100%; display: flex; column-gap: 30px;}
.player-info-section .inner .info {width: 24%; flex-shrink: 0; padding-top: 32px;}
.player-info-section .inner > div:not(.info) {width: 100%;}
.player-info-section .inner ul {width: 100%; flex-shrink: 0;}
.player-info-section .inner .info {display: flex; flex-direction: column; row-gap: 60px;}
.player-info-section .inner .info > div span:not(.name) {font-size: 12px; font-weight: 500; padding: 0 10px; line-height: 19px; background-color: #4E4E4E; color: #fff;}
.player-info-section .inner .info > div span.name {font-size: 20px; font-weight: 600; color: #D2D2D2; display: flex; align-items: center; column-gap: 10px;}
.player-info-section .inner .info > div span.name h4 {font-size: 40px; font-weight: 600; color: #fff;}
.player-info-section .inner .info ul:not(.detail) {width: 100%; display: flex; justify-content: space-around; align-items: center; text-align: center;}
.player-info-section .inner .info ul:not(.detail) li {display: flex; flex-direction: column; row-gap: 20px;}
.player-info-section .inner .info ul:not(.detail) li h5 {color: #C4FA2F; font-size: 20px; font-weight: 800; font-family: 'Taenada';}
.player-info-section .inner .info ul:not(.detail) li p {color: #fff; font-size: 36px; font-weight: 600;}
.player-info-section .inner .info ul:not(.detail) .line {display: block; width: 1px; height: 72px; background-color: #fff;}
.player-info-section .inner .info ul.detail li {display: flex; column-gap: 20px;}
.player-info-section .inner .info ul.detail li:not(:last-of-type) {padding-bottom: 18px;}
.player-info-section .inner .info ul.detail li span {height: 22px; line-height: 25px; font-size: 18px; font-weight: 800; color: #C4FA2F; font-family: 'Taenada';}
.player-info-section .inner .info ul.detail li p {height: 22px; font-size: 16px; font-weight: 500; color: #fff;}
.player-info-section .inner .img {position: relative; display: flex; justify-content: center; align-items: flex-end; overflow: hidden;}
.player-info-section .inner .img img {width: auto; height: 660px; position: absolute; bottom: -100px;}
.player-info-section .inner .img-mo {display: none;}
.player-info-section .inner .yt {padding-top: 60px;}
.player-info-section .inner .yt .yt-tit {display: flex; color: #fff; font-size: 24px; display: flex; column-gap: 7px; line-height: 26px; font-family: 'Taenada'; margin-bottom: 10px;}
.player-info-section .inner .yt .list {width: 100%; border: 1px solid #fff; padding: 20px; display: flex; flex-direction: column; row-gap: 14px;}
.player-info-section .inner .yt .list li {width: 100%;}
.player-info-section .inner .yt .list li a {width: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: 10px; color: #fff;}
.player-info-section .inner .yt .list li a:hover {color: #C4FA2F; transition: all 0.3s;}
.player-info-section .inner .yt .list li a .result {width: 55px; height: 25px; text-align: center; line-height: 25px; border-radius: 5px; flex-shrink: 0;}
.player-info-section .inner .yt .list li a .result.win {background-color: #C4FA2F; color: #000;}
.player-info-section .inner .yt .list li a .result.lose {background-color: #666; color: #fff;}
.player-info-section .inner .yt .more {width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; column-gap: 10px; background-color: #f0f0f0; color: #000; font-size: 18px; font-weight: 600;}

.team-info-section {background-color: #000; padding: 27px 0 140px 0}
.team-info-section span,
.team-info-section p,
.team-info-section h2,
.team-info-section h4 {color: #fff;}
.team-info-section .team-top {display: flex; column-gap: 30px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #2D2D2D;}
.team-info-section .team-top .img-wrap {width: 35%; height: 297px; background-color: #fff;}
.team-info-section .team-top .img-wrap img {object-fit: contain;}
.team-info-section .team-top .info-detail {width: calc(65% - 30px); display: flex; flex-direction: column; row-gap: 15px;}
.team-info-section .team-top .info-detail span {font-size: 16px; font-weight: 800; color: #C4FA2F; font-family: 'Taenada';}
.team-info-section .team-top .info-detail .rank span {color: #fff; padding-left: 10px;}
.team-info-section .team-top .info-detail .name {font-size: 40px; font-weight: 700; padding-bottom: 5px;}
.team-info-section .team-top .info-detail > ul li {display: flex; column-gap: 10px; align-items: center;}
.team-info-section .team-top .info-detail > ul li span {width: 100px; height: 19px; line-height: 25px;}
.team-info-section .team-top .info-detail > ul li:not(nth-last-of-type) {margin-bottom: 12px;}
.team-info-section .team-top .info-detail > ul li p {font-weight: 500;}

.team-info-section .inner > ul {display: flex; flex-wrap: wrap; row-gap: 150px; column-gap: 20px;}
.team-info-section .inner > ul li {display: flex; row-gap: 6px; flex-direction: column;}
.team-info-section .inner > ul li:first-of-type {width: 100%; padding-bottom: 20px;}
.team-info-section .inner > ul li:not(:first-of-type) {width: calc(100% / 4 - 15px);}
.team-info-section .inner > ul li h4 {color: #C4FA2F; padding-bottom: 13px; font-family: 'Taenada';}
.team-info-section .inner > ul li p {font-size: 14px;}
.team-info-section .inner > ul li p b {display: inline-block; width: 60px; color: #C4FA2F; font-size: 14px; padding-right: 8px;}

/* event */
.event_list .select-area {width: 100%; display: flex; justify-content: flex-end; padding-bottom: 18px;}
.event_list .select {position: relative; cursor: pointer; width: 297px;}
.event_list .select select { width: 100%; height: 50px; font-size: 20px; text-align: center; background-color: #484848; color: var(--text_w); font-family: 'Taenada'; line-height: 56px; border-radius: 0;box-shadow: revert; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; outline: none;appearance: none;}
.event_list .select svg {position: absolute; top: 50%; right: 40px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; pointer-events: none;}
.event_list .select svg line {stroke: #D9D9D9;}
.event_list .select:focus-within svg {transform: translate(0, -50%) rotate(180deg);}
.event_list > ul li:nth-of-type(1) {border-top: 1px solid #DADADA;}
.event_list > ul li {display: flex; align-items: center; column-gap: 30px;padding: 10px 0; border-bottom: 1px solid #DADADA;}
.event_list > ul li .img-wrap {width: 298px; height: 308px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.event_list > ul li .img-wrap img {width: 100%; height: 100%; object-fit: contain;}
.event_list > ul li .info {display: flex; flex-direction: column; row-gap: 10px;}
.event_list > ul li .info h4 {font-size: 20px; font-weight: 600; padding-bottom: 12px; }
.event_list > ul li .info p:nth-of-type(3) {display: -webkit-box;--webkit-line-clamp: 3;--webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;max-height: calc(1.5em * 3); /* 줄 수 × line-height */}
.event_list > ul li .btn-area {display: flex; flex-direction: column; row-gap: 14px; margin-top: 0;}
.event_list > ul li .btn-area .bg_black:hover {background-color: #C4FA2F; transition: all 0.3s;}
.event_list > ul li .btn-area .bg_black:hover span {color: #000; transition: all 0.3s;}
.event_list > ul li .btn-area .bg_black:hover svg path {fill: #000; transition: all 0.3s;}
.event_list > ul li .btn-area .btn-default {display: flex; justify-content: center; align-items: center; column-gap: 12px; width: 140px; height: 42px; border-radius: 0; font-size: 16px; font-weight: 500; border: 0;}
.event_list > ul li .btn-area .btn-default > span {color: #000;}
.event_list > ul li .btn-area .btn-default > svg path {fill: #000;}
.event_list > ul li .btn-area .bg_black {background-color: #2B2B2B;}
.event_list > ul li .btn-area .bg_black > span {color: #fff;}
.event_list > ul li .btn-area .bg_black > svg path {fill: #fff;}
.event_list > ul li .btn-area .bg_ygreen {background-color: #C4FA2F;}
.event_list .pg_area {width: 100%; display: flex; justify-content: center; margin-top: 60px;}

.view-top {display: flex; align-items: flex-start; column-gap: 30px; border-bottom: 1px solid #D4D4D4; padding-bottom: 60px;}
.view-top .view-img-swiper {width: 60%; height: 580px; background-color: #eee;}
.view-top .view-img-swiper .swiper-button-next,
.view-top .view-img-swiper .swiper-button-prev {display: flex; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6);}
.view-top .view-img-swiper .swiper-button-next svg,
.view-top .view-img-swiper .swiper-button-prev svg {width: auto !important; height: auto !important;}
.view-top .view-img-swiper .swiper-button-next:after,
.view-top .view-img-swiper .swiper-rtl .swiper-button-prev:after,
.view-top .view-img-swiper .swiper-button-prev:after,
.view-top .view-img-swiper .swiper-rtl .swiper-button-next:after {content: '' !important;}
.view-top > div:not(.view-img-swiper) {width: 40%;}
.view-top > div:not(.view-img-swiper) ul {display: flex; flex-direction: column; row-gap: 20px; padding-top: 30px; margin-top: 8px; border-top: 1px solid #E4E4E4;}
.view-top > div:not(.view-img-swiper) ul li {font-size: 16px;}
.view-top > div:not(.view-img-swiper) ul li span {display: block; padding-bottom: 4px; font-weight: 600;}
.view-top .view-tit {font-size: 20px; font-weight: 600; display: -webkit-box;--webkit-line-clamp: 2;--webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.2;max-height: calc(1.2em * 2);}

.fight-tit {font-size: 40px; display: block; width: 100%; text-align: center; padding-top: 60px; font-family: 'Taenada';}
.fight-card-area li {display: flex; justify-content: space-between; column-gap: 30px; padding: 57px 0 30px 0; border-bottom: 1px solid #D4D4D4;}
.fight-card-area li .img {display: block; width: 24%; height: 275px; flex-shrink: 0; border: 6px solid #E3E3E3;}
.fight-card-area li .img.win {position: relative; border: 6px solid #C4FA2F;}
.fight-card-area li .img.win::after {position: absolute; top: -6px; left: -6px; width: 80px; height: 40px; background-color: #C4FA2F; color: #000; line-height: 40px; text-align: center; font-size: 18px; content: 'WIN'; font-family: 'Taenada';}
.fight-card-area li > div:not(.img) {width: 100%;}
.fight-card-area li > .mid {display: flex; flex-direction: column; justify-content: space-between;}
.fight-card-area li > .mid .player {display: flex; justify-content: space-between; align-items: center;}
.fight-card-area li > .mid .player > div:not(.mid) {display: flex; flex-direction: column; row-gap: 9px; flex-shrink: 0;}
.fight-card-area li > .mid .player > div.right {align-items: flex-end;}
.fight-card-area li > .mid .player .grade {width: 109px; height: 32px; background-color: #2B2B2B; line-height: 32px; text-align: center; font-size: 16px; font-weight: 500; color: #fff;}
.fight-card-area li > .mid .player .name {display: flex; align-items: flex-end; column-gap: 10px; font-size: 16px; font-weight: 600;}
.fight-card-area li > .mid .player .name h4 {font-size: 30px; font-weight: 800;}
.fight-card-area li > .mid .player .result {font-weight: 600;}
.fight-card-area li > .mid .player .mid {width: 100%; text-align: center;}
.fight-card-area li > .mid .player .mid h5 {font-size: 40px; font-weight: 600;}
.fight-card-area li > .mid .sns {display: flex; align-items: center; justify-content: center; column-gap: 16px;}
.fight-card-area li > .mid .sns a {display: flex; align-items: center; column-gap: 6px; font-size: 20px; font-weight: 600;}
.fight-card-area li > .mid .sns .line {display: block; width: 2px; height: 20px; background-color: #000;}
.fight-card-area li .progressbar-area {width: 100%; display: flex; height: 35px;}
.fight-card-area li .progressbar-area .left,
.fight-card-area li .progressbar-area .right {height: 100%; background-color: #000; line-height: 35px; color: #fff; font-weight: 600;}
.fight-card-area li .progressbar-area .left {padding-left: 14px;}
.fight-card-area li .progressbar-area .right {padding-right: 14px; text-align: right;}
.fight-card-area li .progressbar-area .win {position: relative; background-color: #C4FA2F; color: #000;}
.fight-card-area li .progressbar-area .win.left::after {content: ""; position: absolute; right: -33px; bottom: 0;width: 0;height: 0;border-right: 35px solid transparent;border-top:35px solid #C4FA2F;}
.fight-card-area li .progressbar-area .win.right::after {content: ""; position: absolute; left: -17px; bottom: 0; transform: translateX(-50%);width: 0;height: 0;border-left: 35px solid transparent;border-top:35px solid #C4FA2F;}

.mo.game-tit {display: none;}
.game-tit { width: 100%; font-size: 18px; font-weight: 600; font-family: 'Taenada'; padding-bottom: 19px;}

/* 반응형 */
@media screen and (max-width: 1280px) {
    .sub-visual > .inner .sub-visual-tit {right: 20px;}

    .tab-btn-area {column-gap: 20px;}
}
@media screen and (max-width: 1024px) {
    .tab-btn-area.tab-style-2 {flex-wrap: wrap; row-gap: 6px;}
    .tab-btn-area.tab-style-2 .tab-link {width: calc(100% / 3 - 14px);}

    .sponsor .sub-contants > ul > li {width: calc(100% / 2 - 15px);}

    .card-style > ul > li {width: calc(100% / 2 - 15px);}

    .search-area .bo_sch form {flex-wrap: wrap; row-gap: 10px;}
    .search-area .bo_sch .sch_bar input {width: 100%;}

    #bo_v_link li {width: 100%;}

    .player-info-section {height: auto;}
    .player-info-section .inner {flex-wrap: wrap;}
    .player-info-section .inner .info {row-gap: 30px;}
    .player-info-section .inner .info,
    .player-info-section .inner > div:not(.img) {width: calc(100% / 2 - 15px);}
    .player-info-section .inner .img {height: 800px;}
    .player-info-section .inner .img img {width: auto; height: 100%;}
    .player-info-section .inner .img-pc {display: none;}
    .player-info-section .inner .img-mo {display: flex;}

    .event_list > ul li .img-wrap {width: 20vw;}
    .event_list > ul li .info p:nth-of-type(3) {--webkit-line-clamp: 2; max-height: calc(1.5em * 2);}

    .view-top {flex-direction: column; row-gap: 30px;}
    .view-top .view-img-swiper,
    .view-top > div:not(.view-img-swiper) {width: 100%;}
    .view-top .view-img-swiper {height: 55vw;}

    .game-tit {display: none;}
 
}
@media screen and (max-width: 768px) {
    .sub-visual {height: 48vw;}
    .sub-visual > .inner .sub-visual-tit {bottom: 6vw; font-size: 28px;}
    .sub-visual > .inner .sub-visual-tit::after {width: 168px;}

    .bo_new .tbl_head01 thead th,
    .bo_new .tbl_head01 td {font-size: 18px;}

    .input-area .input_multi,
    .input-area .input_triple {flex-wrap: wrap; row-gap: 10px;}
    .input-area .input_multi > div {width: 100%;}

    .card-style > ul > li .player-info img {width: 27vw !important; height: 66vw !important; top: 50px;}

    .team-info-section .team-top {flex-direction: column; row-gap: 30px;}
    .team-info-section .team-top .img-wrap,
    .team-info-section .team-top .info-detail {width: 100%;}
    .team-info-section .team-top .img-wrap {height: 36vw;}
    .team-info-section .inner > ul {row-gap: 120px;}
    .team-info-section .team-top .info-detail > ul li {align-items: flex-start;}
    .team-info-section .team-top .info-detail > ul li span {width: 85px; flex-shrink: 0;}
    .team-info-section .team-top .info-detail > ul li p {word-break: keep-all;}
    .team-info-section .inner > ul li:not(:first-of-type) {width: calc(100% / 3 - 14px);}
    .team-cont table td.team-img {width: 30%;}
    .team-cont table td .img-box .img-wrap {height: 12vw;}

    .event_list > ul li {padding: 20px 0; flex-wrap: wrap; row-gap: 20px;}
    .event_list > ul li .img-wrap {width: 33vw;}
    .event_list > ul li .info {width: calc(100% - 39vw);}
    .event_list > ul li .btn-area {width: 100%; align-items: flex-start;}
    .event_list .select {width: 240px;}

    .fight-card-area li {flex-direction: column; row-gap: 20px;}
    .fight-card-area li .img {width: 100% ; height: 240px;}
    .fight-card-area li > .mid {row-gap: 10px;}
    .mo.game-tit {display: block; padding-bottom: 0; text-align: center;}
}
@media screen and (max-width: 600px) {
    .tab-btn-area.tab-style-2 {column-gap: 10px;}
    .tab-btn-area.tab-style-2 .tab-link {width: calc(100% / 3 - 7px);}

    .sponsor .sub-contants > ul {row-gap: 40px;}
    .sponsor .sub-contants > ul > li {width: 100%;}
    .sponsor .sub-contants > ul > li .info p,
    .sponsor .sub-contants > ul > li .info h4 {height: auto;word-break: keep-all; }

    .card-style > ul > li {width: 100%;}

    .search-area .bo_sch {flex-wrap: wrap; row-gap: 10px;}
    .search-area .select ,
    .search-area .select select {width: 100%;}

    .tbl_wrap table {border-bottom: 0; border-top: 2px solid #000;}
    .bo_new .tbl_head01 thead {display: none;}
    .bo_new .tbl_head01 td {position: relative; border-top: 0; height: auto; border-bottom: 0; line-height: normal;}
    #bo_list tbody tr {display: flex; flex-wrap: wrap; width: 100%; border-bottom: 1px solid #ecf0f1; padding: 12px 4px; row-gap: 8px; column-gap: 17px;}
    #bo_list .td_chk,
    .bo_new #bo_list .td_num2 {display: none;}
    .bo_new #bo_list .td_name,
    .bo_new #bo_list .td_datetime,
    .bo_new #bo_list .td_num2,
    .bo_new #bo_list .td_num {width: auto;}
    .bo_new #bo_list .td_subject {width: 100%;}
    .bo_new #bo_list td:not(.td_subject):not(.td_datetime)::after {position: absolute; width: 1px; height: 12px; background-color: #ccc; display: block; top: 50%; right: -8px; transform: translate(0, -50%); content: '';}
    .bo_new #bo_list td:not(.td_subject),
    .sv_member {font-size: 16px; color: #666;}
    .bo_new #bo_list tbody tr:hover {background: var(--bg7); border-bottom: 1px solid var(--bg7); border-left: 2px solid transparent;}
    .bo_new #bo_list tbody tr:hover td {background: transparent;}
    .bo_new #bo_list_total {font-size: 18px;}

    .bo_new #bo_list .td_subject .bo_tit {padding: 0;}

    .player-info-section .inner {row-gap: 30px;}
    .player-info-section .inner .info,
    .player-info-section .inner > div:not(.img) {width: 100%;}
    .player-info-section .inner .img {height: 600px;}
    .player-info-section .inner .yt {padding-top: 0;}

    .team-info-section .inner > ul {row-gap: 100px}
    .team-info-section .inner > ul li:not(:first-of-type) {width: calc(100% / 2 - 10px);}

    .event_list > ul li .info {width: 100%;}
    .event_list > ul li .img-wrap {width: calc(100vw - 40px);}
}
@media screen and (max-width: 500px) {
    .sub-container {padding: 60px 0 120px 0;}
    .sub-visual {height: 240px;}
    .sub-visual > .inner .sub-visual-tit {bottom: 30px;}

    .sub-tit {padding-bottom: 40px;}

    .tab-cont-area .tab-cont {padding-top: 40px;}
    
    .accordian p {word-break: keep-all;}
    .accordian .accordian-tit {padding: 0 20px;}
    .accordian.active .accordian-info {padding: 24px 30px;}

    .team-cont table th {font-size: 16px;}
    .team-cont table td {font-size: 15px; padding: 19px 1vw;}

    .btn-area {column-gap: 10px;}

    .fight-tit {font-size: 36px;}
    .fight-card-area li > .mid .player .mid h5 {font-size: 32px;}

    .event_list .select {width: 100%;}

    .card-style > ul > li .player-info img {width: 40vw !important; height: 110vw !important;}
    
}
@media screen and (max-width: 480px) {
    .tab-btn-area {column-gap: 10px;}
    .tab-btn-area .tab-link {width: calc(100% / 3); font-size: 20px;}
    .tab-btn-area.tab-style-2 .tab-link {width: calc(100% / 2 - 5px); font-size: 16px;}

    .search-area .bo_sch .sch_bar,
    .bo_new #bo_btn_top {column-gap: 10px;}
    .bo_new #bo_list_total {font-size: 16px; word-break: keep-all;}
    .bo_v_nb li {column-gap:10px;}
    .bo_v_nb li .nb_tit {padding-right: 0;}
    #bo_v_link a {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    #bo_v_link a .link-icon {flex-shrink: 0;}

    .accordian h5 {font-size: 18px;}

    .login-wrap.mbskin .mbskin_box {width: 100vw; height: 100vh; border: 0; border-radius: 0; justify-content: center; align-items: center; padding: 0px 20px 40vw 20px;}
    .login-wrap.mbskin .mbskin_box > form {width: 100%;}

    .player-info-section .inner .info > div span.name h4 {font-size: 36px;}

    .team-info-section .inner > ul {row-gap: 40px}
    .team-info-section .inner > ul li:not(:first-of-type) {width: 100%;}
    .team-cont table th {font-size: 15px;}
}
@media screen and (max-width: 360px) {
    .tab-btn-area .tab-link {height: 50px; line-height: 50px; font-size: 4.5vw;}
}
@media screen and (max-width: 340px) {
    .fight-card-area li > .mid .player .mid h5 {font-size: 28px;}
    .fight-card-area li > .mid .player .name {font-size: 14px; column-gap: 6px;}
    .fight-card-area li > .mid .player .name h4 {font-size: 24px;}
    .fight-card-area li > .mid .player .grade {width: 80px; height: 30px; line-height: 30px; font-size: 15px;;}
}