@charset "utf-8";


/*메인 기본 */

.main_container {margin:0 var(--inner-padding); padding: 4rem 0 0rem;}


/*메인 종목 탭*/
.main_contents .sports_tab {--tab-w1 :16rem; --tab-h:5rem; --tab-padding:6rem;}

.main_contents .sports_tab::before {content:''; display: block; position: absolute; top:50%; left:calc(0px - var(--inner-padding)); width:calc(100% + var(--inner-padding) * 2); height:1px; background-color: #d6d6d6;} 
.main_contents .sports_tab_wrap {justify-content: center;}
.main_contents .sports_tab_wrap::before,
.main_contents .sports_tab_wrap::after {content:''; display: block; position:absolute; top:50%; left:0; width:0.6rem; height:0.6rem; border-radius: 50%; transform: translate(0, -50%); background-color: #000;}
.main_contents .sports_tab_wrap::after {left:auto; right:0;}
.main_contents .sports_tab.has-button .sports_tab_wrap::before,
.main_contents .sports_tab.has-button .sports_tab_wrap::after {display: none;}


.main_contents .sports_tab_mask .tbtn::before {content:''; display: block; width:2.4rem; height:2.4rem; background: url('../images/common/ico_common.png') no-repeat; background-size: 30rem auto;}

.main_contents .sports_tab_mask .tbtn.game-1::before {background-position: 0 0;}
.main_contents .sports_tab_mask .tbtn.game-2::before {background-position: -3rem 0;}
.main_contents .sports_tab_mask .tbtn.game-3::before {background-position: -6rem 0;}
.main_contents .sports_tab_mask .tbtn.game-4::before {background-position: -9rem 0;}
.main_contents .sports_tab_mask .tbtn.game-5::before {background-position: -12rem 0;}
.main_contents .sports_tab_mask .tbtn.game-6::before {background-position: -15rem 0;}
.main_contents .sports_tab_mask .tbtn.game-7::before {background-position: -18rem 0;}
.main_contents .sports_tab_mask .tbtn.game-8::before {background-position: -21rem 0;}
.main_contents .sports_tab_mask .tbtn.game-9::before {background-position: -24rem 0;}

.main_contents .sports_tab_mask .item.is-on .tbtn.game-1::before {background-position: 0 -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-2::before {background-position: -3rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-3::before {background-position: -6rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-4::before {background-position: -9rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-5::before {background-position: -12rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-6::before {background-position: -15rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-7::before {background-position: -18rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-8::before {background-position: -21rem -3rem;}
.main_contents .sports_tab_mask .item.is-on .tbtn.game-9::before {background-position: -24rem -3rem;}








/*종목 메인 영역 구분*/
.main_grid {margin-top:4rem;}
.main_grid-wrap {display: grid; grid-template-columns: 1fr 1fr; gap:4rem;}

.main_cell {min-width: 0;}
.main_cell.nth-1 {grid-row: 1 / 3;}
.main_cell.nth-2 {grid-row: 1;}
.main_cell.nth-3 {grid-row: 2;}
.main_cell.nth-4 {grid-row: 3 / 5;}
.main_cell.nth-5 {grid-row: 3;}
.main_cell.nth-6 {grid-row: 4;}



.main_box {padding:3rem; background-color: #fff; border-radius: var(--border-radius-1); height:100%; position: relative;}


@media screen and (max-width:1024px){
	.main_grid-wrap {grid-template-columns: 1fr;}
	.main_cell {grid-row:auto !important;}
	.main_box {padding:2rem;}
}




/*타이틀영역*/
.main_box .tit_area {position: relative; display: flex; align-items: center; padding-bottom:1.5rem; border-bottom:1px solid #222;}
.main_box .tit_area .tit{font-size:max(2.4rem, 18px); font-weight: 700; color:#222;}

.main_box .btn_more {overflow:hidden; display: block; position: relative; width:2rem; height:2rem; margin-left:auto; font-size:0; text-indent:-9999px; transition: all 0.3s ease-in-out;}

.main_box .btn_more::before,
.main_box .btn_more::after {content:''; display: block; position: absolute; top:50%; left:50%; width: 100%; height:0.2rem; background-color: #222; transform: translate(-50%, -50%);}
.main_box .btn_more::before {transform: translate(-50%, -50%) rotate(90deg);}


/*main 타이틀 탭*/
.main_box .txt_tab .list{display: flex; align-items: flex-end; gap:2rem;}
.main_box .txt_tab .list .item {display: inline-flex; align-items: flex-end; gap:2rem;}
.main_box .txt_tab .list .item:not(:last-child)::after {content: ''; display: block; width:1px; height:2rem; margin-bottom:0.3rem; background-color: #d6d6d6;}

.main_box .txt_tab .list .tbtn {font-size: max(2rem, 16px); font-weight: 600; color:#999999; transition: color 0.3s ease-in-out;}
.main_box .txt_tab .list .item.is-on .tbtn {font-size: max(2.4rem, 18px); font-weight: 700; color:#222;}


@media (hover: hover) and (pointer: fine) {
	.main_box .btn_more:hover {transform: rotate(360deg); transition-duration: 1s;}
	.main_box .txt_tab .list .tbtn:hover {color:var(--color-main);}
}






/*나의 현황*/
.main_graph .garap_area {padding:2rem 0; display: flex; align-items: center; justify-content: center;}
.main_graph .garap_area canvas {max-height: 31rem; }
.info-txt {padding:2rem 0 0; border-top:1px solid #d6d6d6;}
.info-txt .txt {position: relative; padding:0 0 0 2.2rem; font-size:max(1.4rem, 11px); font-weight: 500; color:#666;}
.info-txt .txt::before {content:''; display: block; position: absolute; top:0; left:0; width:1.6rem; height:1.6rem;background: url('../images/common/ico_common.png') no-repeat; background-size: 30rem auto; background-position: 0 -21rem;}




/*월간현황*/
.main_month .main_box {position: relative; background-color: var(--color-main);  overflow: hidden; padding-bottom:0;}
.main_month .main_box::after {content:''; display: block; position: absolute; top:0; left:0; width:100%; height: 100%; border-radius: var(--border-radius-1); background:linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));}

.main_month .main_box .tit_area {border-bottom:0; z-index: 1;}
.main_month .main_box .tit_area .tit {color:#fff;}
.main_month .main_box .btn_more::before,
.main_month .main_box .btn_more::after {background-color: #fff;}


.main_month .main_month_data {position: relative; z-index: 1;}
.main_month .main_month_data .list {display: flex; gap:2.5rem;}
.main_month .main_month_data .item {padding:3rem 2rem 4rem; border-radius: 1rem; text-align: center; background-color: rgba(0, 0, 0, 0.4); flex:1;}
.main_month .main_month_data .tit {font-size: max(1.4rem, 11px); font-weight: 600; color:#4295e1;}
.main_month .main_month_data .data {color:#fff; margin-top:0.4rem; letter-spacing: -0.025em;}
.main_month .main_month_data .num {font-size:3rem; font-weight: 700;}
.main_month .main_month_data .unit {font-size:max(1.6rem, 13px);}



/*월간현황 - 기록등록버튼*/
.main_month .btn_wrap {position: relative; display: flex; margin-top:2rem; z-index: 1;}
.main_month .btn_wrap::before {content:''; display: block; position: absolute; top:-1px; left:50%; width:200%; height:1px; background-color: rgba(255, 255, 255, 0.2); transform: translate(-50%, 0);}

.main_month .rep_btn {position: relative; display: flex; align-items: center; justify-content: center; gap:0.8rem; text-align: center; height:6rem; flex:1; font-size:max(1.8rem, 15px); font-weight: 700; color:#fff;}
.main_month .rep_btn + .rep_btn {border-left:1px solid rgba(255, 255, 255, 0.2);}
.main_month .rep_btn::before,
.main_month .rep_btn::after {content:''; display: block; transition: all 0.3s ease-in-out;}
.main_month .rep_btn::before {width:2.8rem; height:2.8rem; background: url('../images/common/ico_common.png') no-repeat; background-size: 30rem auto; background-position: 0 -24rem; }
.main_month .rep_btn:nth-child(2):before {background-position: -3rem -24rem; }

.main_month .rep_btn::after {width:0.8rem; height:0.8rem; border:solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg);}

@media (hover: hover) and (pointer: fine) {
	.main_month .rep_btn:hover::after {transform: translateX(0.5rem) rotate(45deg);}
}

@media screen and (max-width:640px){
	.main_month .main_month_data .list {flex-wrap: wrap; gap:1.5rem;}
	.main_month .main_month_data .item {flex:1; flex-basis: 40%; padding:2rem 1.5rem 3rem;}
}
@media screen and (max-width:420px){
	.main_month .main_month_data .item {flex-basis: 100%;}
}


/*총 누적데이터*/
.main_total .main_box{padding:0; border-radius: 0; background-color: transparent;}

.main_total .main_total_data .list {display: flex; gap:1rem;}
.main_total .main_total_data .item {padding:2rem; border-radius: var(--border-radius-1); text-align: center; background-color: #fff; box-shadow: 0.3rem 0 1rem rgba(0, 0, 0, 0.2); flex:1;}
.main_total .main_total_data .tit {font-size: max(1.8rem, 15px); font-weight: 600; color:#222;}
.main_total .main_total_data .data {padding:2rem 1rem; margin-top:1.4rem;color:#222; letter-spacing: -0.025em; background-color: var(--color-bg-1); border-radius: 1rem;}
.main_total .main_total_data .num {font-size:2.6rem; font-weight: 700;}
.main_total .main_total_data .unit {font-size:max(1.5rem, 12px);}



@media screen and (max-width:640px){
	.main_total .main_total_data .list {flex-wrap: wrap;}
	.main_total .main_total_data .item {flex:1; flex-basis: 40%;}
}
@media screen and (max-width:420px){
	.main_total .main_total_data .item {flex-basis: 100%;}
}




/*랭킹*/
.main_box .tit_area.rkbox{border-bottom:none;}
.nth-4 .main_box .tabcon{position:relative;}
.nth-4 .main_box .btn_more{position:absolute; top:-4rem; right:0;}
.rkbox_tit{font-size:max(2.4rem, 18px); font-weight: 700; color:#222; margin-right:35px;}
.main_box .txt_tab .list.rk_tab{gap:5px;}
.main_box .txt_tab .list.rk_tab .item .tbtn{min-width:70px; font-size:max(1.8rem, 15px); font-weight:700; color:#91a3b6; text-align:center; line-height:1; border-radius:50px; border:2px solid #91a3b6; padding:0.5rem 2rem;}
.main_box .txt_tab .list.rk_tab .item.is-on .tbtn, .main_box .txt_tab .list.rk_tab .item .tbtn:hover{color:#fff; background:#000; border:2px solid #000; transition: color 0.3s ease-in-out;}
.main_box .txt_tab .list.rk_tab .item:not(:last-child)::after{content:none;}
.main_rk_select{display:flex; gap:10px;}
.main_rk_select select.sel_st03{max-width:unset; width:-webkit-fill-available; margin:0;}
.rank_table.main_rk_table{ margin-top:15px;}
.rank_table.main_rk_table table{ margin-bottom:0;}
.rank_table.main_rk_table table thead{border-top:1px solid #ddd;}
.rank_table.main_rk_table table th{font-size:max(1.4rem, 13px); color:#666; font-weight:500; background:var(--color-bg-1); padding:1rem;}
.rank_table.main_rk_table table tbody{border-top:2px solid #222;}
.rank_table.main_rk_table table td{padding:1.5rem;}

.my_rcd_rk{font-size:max(1.5rem, 13px); color:#000; font-weight:400; text-align:center; padding:0.5rem 1rem; border-radius:50px; background:#fff; margin-left:10px;}
.my_rcd_rk span{font-weight:700;}
.main_box .main_my_rank {width:100%; min-width:600px; display:flex; justify-content:space-between; align-items:center; font-size:max(1.6rem, 15px); color:#222; font-weight:500; background:#eaf0f6; margin-bottom:1rem; padding:2rem 2rem 2rem 0;}
.main_box .main_my_rank h5{display:flex; align-items:center; font-size:max(1.8rem, 16px); color:#fff; font-weight:600; background:#222; padding:1.2rem 2rem; border-radius:0 50px 50px 0;}
.main_box .ranking{position:relative; background:url('../images/common/m_others.png') center center no-repeat;}
.main_box .rank_table tr td.ranking span{position:absolute; bottom:2rem;left:50%; transform:translateX(-50%); font-size:max(1.5rem, 13px); margin-right:0;}
.main_box .main_my_rank div.myrk_group{display:flex; gap:10px; }
.main_box .main_my_rank div.myrk_group div:after{content:'｜'; color:#ccc; margin-left:10px;}
.main_box .main_my_rank div.myrk_group div:last-of-type:after{content:none;}
.whole_rk_btn{position:relative; font-size:max(1.6rem, 14px); color:#222; font-weight:700; background:#fff; border:1px solid #ddd; border-radius:8px; padding:13px 27px 13px 17px; }
.whole_rk_btn:hover{border:1px solid #222; transition: 0.3s ease-in-out;}
.whole_rk_btn:after{content:''; width:7px; height:13px; position:absolute; top:50%; right:11px; transform:translateY(-50%);background: url('../images/common/btn_rkwh.png') no-repeat; }
@media screen and (max-width:640px){
	.main_rk_select{flex-wrap:wrap; justify-content:space-between;}
	.main_rk_select select.sel_st03{width:100%; }
}
@media screen and (max-width:480px){
	.main_box .tit_area.rkbox{flex-wrap:wrap;}
	.rkbox_tit{width:100%; margin-bottom:10px;}
}




/* 개인기록 */
.main_mydata .main_box {padding-bottom:2rem;}
.main_mydata .btn_more{ position: absolute; top:3.5rem; right:3rem;}
.main_mydata .tit_area {padding-right:3rem;}

.main_mydata .txt_tab .item .num {display: inline-flex; gap:0.2rem; letter-spacing: -0.05em;}
.main_mydata .txt_tab .item .num::before {content:'('; color:#999;}
.main_mydata .txt_tab .item .num::after {content:')'; color:#999;}
.main_mydata .txt_tab .item.is-on .num {font-weight: 500; color:var(--color-point1);}
.main_mydata .txt_tab .item.is-on .num::before,
.main_mydata .txt_tab .item.is-on .num::after {color:#222;}

.mydata_list .item:not(:last-child) {border-bottom:1px solid #d6d6d6;}
.mydata_list .item.nodata {display: flex; align-items: center; justify-content: center; text-align: center; min-height: 24rem; font-size: 2rem; font-weight: 600; color:#91a3b6;}
.mydata_list .link {display: flex; align-items: center; gap:2rem; padding:1.5rem 1rem; color:#666;}
.mydata_list .g_info {flex-grow: 1; min-width: 0; max-width: 70%;}
.mydata_list .g_info .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:max(1.8rem, 15px); color:#222;}
.mydata_list .g_info .g_type {display: flex; align-items: center; gap:1rem; margin-top:0.5rem; color:#91a3b6;}
.mydata_list .g_info .g_type .type {display: inline-flex; align-items: center; justify-content: center; text-align: center; gap:0.5rem; min-width: 6rem; padding:0.2rem 1rem; border:0.2rem solid #91a3b6; border-radius: 2rem; font-size: max(1.3rem, 10px);}
.mydata_list .g_info .g_type .type em {display: inline-flex; gap:0.5rem; font-weight: 700;}
.mydata_list .g_info .g_type .type em:not(:last-child)::after {content:'/'; color:#d6d6d6}
.mydata_list .g_info .g_type .date {font-size: max(1.4rem, 11px);}
.mydata_list .g_rank {flex-shrink: 0; width: 15%; font-weight: 700; color:#222; text-align: right;}
.mydata_list .g_item {flex-shrink: 0; width: 15%; text-align: center;}
.mydata_list .link:hover,
.mydata_list .link:hover .g_info .tit,
.mydata_list .link:hover .g_rank {color:var(--color-main);}

@media screen and (max-width:1024px){
	.main_mydata .btn_more{ top:2.5rem; right:2rem;}
}

@media screen and (max-width:480px){
	.mydata_list .link {flex-wrap: wrap; gap:1rem 2rem;}
	.mydata_list .g_info {flex-grow: 1; max-width: none; width:100%; padding-bottom:1rem; border-bottom:1px dashed #d6d6d6;}
	

	.mydata_list .g_rank {width: calc(50% - 1rem); text-align: center;}
	.mydata_list .g_item {width: calc(50% - 1rem);}

}








/*메인 공지리스트*/
.main_notice .main_box {padding-bottom:2rem;}
.main_notice-list {margin-top:1.5rem;}
.main_notice-list .item {display: flex; align-items: center;}
.main_notice-list .item.nodata {display: flex; align-items: center; justify-content: center; text-align: center; min-height: 19rem; font-size: 2rem; font-weight: 600; color:#91a3b6;}
.main_notice-list .link {display: flex; align-items: center; gap:1rem; width:100%; padding:0.8rem 0; color:#222; }
.main_notice-list .link::before {content:''; display: block; flex-shrink: 0; width:0.6rem; height:0.6rem; border-radius: 50%;  background-color: var(--color-main); }
.main_notice-list .link .tit {flex-grow: 1; display: block; width:100%; font-size:max(1.8rem, 15px); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main_notice-list .link .date {flex-shrink: 0; font-size:max(1.4rem, 11px); color:#91a3b6;}

.main_notice-list .link:hover {color:var(--color-main)}