@charset "utf-8";

/* LHI 2025.11.05
   component - color form btn table popup
*/

:root {
   
    }

/* input */
input::placeholder {font-size:max(1.6rem, 15px); font-weight:400; color:#888; }
label {position:relative; display:inline-block; vertical-align:middle;}
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="month"], input[type="time"], 
select.sel_st01, select.sel_st02, select.sel_st03, input[type="radio"]{ 
	position:relative; width:30rem; min-height:4rem; font-family:var(--font-base); font-size:max(1.6rem, 14px); color:#666; margin-right:15px; border:none; border-radius:7px; background:#f7f7f7;
	padding:1.3rem; outline:none; box-sizing:border-box;
	}
textarea{width:100%; font-family:var(--font-base); font-size:max(1.6rem, 14px); color:#888; border:none; border-radius:7px; background:#f7f7f7;padding:1.3rem 1.5rem; margin-right:0; outline:none; box-sizing:border-box; }
input[type="search"] {position:relative; width:34rem; min-height:4rem; font-family:var(--font-base); font-size:max(1.5rem, 14px); color:#666; border:none; border-radius:7px; background:#f7f7f7; padding:0 65px 0 15px;}
input[type="search"] + .btn_srch {position:absolute; top:0; right:0;}
input[type="search"]:disabled {color:var(--blck-30); border-color:var(--gray-60); background-color:var(--gray-30); pointer-events:none; cursor:unset;}
input[type="search"][readonly="readonly"], input[type="text"][readonly="readonly"] {color:#666; background-color:#eee; pointer-events:none; cursor:unset;}
input[type="search"]:disabled:after, input[type="search"][readonly="readonly"]:after { background-position-y:-250px;}

input[type="checkbox"], input[type="radio"] {width:auto; vertical-align:middle; margin:-2px 5px 0 0; line-height:1;}

.base__fileup{position:relative;}
input.filename{display:inline-block; width:30rem; font-size:max(1.5rem, 15px); color:#666; vertical-align:middle; padding:15px; margin-right:15px; border:none; border-radius:7px; background:#f7f7f7;}
input[type="file"] {position:absolute; width:100%; height:100%; padding:0; margin:-1px; overflow:hidden; border:0; opacity:0;}
.sports_select {display:flex; flex-wrap:wrap; gap:10px 5px;}
.sports_select li {min-width:10rem; font-size:max(1.7rem, 14px); font-weight:600; text-align:center;}
.sports_select li .choose_box{display: block; position: relative; height:-webkit-fill-available; border:1px solid var(--color-main); border-radius: 25px; padding:1.5rem 2rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none;}
.choose_box input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.choose_box input:checked ~ .choose_sports {color:#fff; background-color: var(--color-main); background-position: 0 0; }
.choose_box input ~ .choose_sports:hover {color:#fff; background-color:  var(--color-main);}
.choose_box .choose_sports {display:flex; justify-content:center; align-items:center;  position: absolute; top: 50%; left:0; transform: translateY(-50%); height: 100%; width: 100%; font-weight: 500; color:  var(--color-main);  background:#fff; border-radius: 50px; transition: background 1s ease, color 0.25s ease;}
.result_input label{position:relative; width:30rem; min-height:4rem; font-family:var(--font-base); font-size:max(1.5rem, 13px); color:#666; margin-right:15px; border:none; border-radius:7px; background:#f7f7f7;
	padding:1.3rem; outline:none; box-sizing:border-box;}
.result_input label input[type="text"]{position:absolute; top:50%; left:80px; transform:translateY(-50%); width:calc(100% - 80px - 1.3rem); padding:0;  }

/* 셀렉트 스타일 */
select{-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select.sel_st01{max-width:17rem; background:url('../images/common/icon_close.png') right 10px center no-repeat #f7f7f7;}
select.sel_st02, select.sel_st03{background:url('../images/common/icon_drop.png') right 10px center no-repeat #fff;}
select.sel_st03{max-width:170px; float:right; margin:0 0 10px 0; color:#222; border:1px solid #ddd;}

/* 자동완성 초기화 */
input[type="text"]:autofill, input[type="text"]:autofill:hover, input[type="text"]:autofill:focus, input[type="text"]:autofill:active,
input[type="password"]:autofill, input[type="password"]:autofill:hover, input[type="password"]:autofill:focus, input[type="password"]:autofill:active,
input[type="number"]:autofill, input[type="number"]:autofill:hover, input[type="number"]:autofill:focus, input[type="number"]:autofill:active,
input[type="search"]:autofill, input[type="search"]:autofill:hover, input[type="search"]:autofill:focus, input[type="search"]:autofill:active {box-shadow:0 0 0 60px #fff inset; -webkit-text-fill-color:var(--blck-70);}

/* 주요버튼 */
button{text-decoration:none !important;}
.btn_login {position:relative; width:100px; height:80px; font-size:20px; font-weight:400; text-align:center; line-height:80px;}
.btn_login:before {content:""; display:inline-block; width:16px; height:16px; margin-right:5px; background:url(../images/common/icon_wrap.png) -180px 0 no-repeat;}
.btn_login:hover, .btn_login:focus, .btn_login:active {font-weight:600; color:var(--blue); text-decoration:none;}
.btn_login:hover:before, .btn_login:focus:before, .btn_login:active:before {background-position-y:-30px;}
.btn_logout {position:relative; width:80px; height:80px; padding:25px 29px; text-align:center; background:var(--blue);}
.btn_logout:before {content:""; display:block; width:27px; height:30px; background:url(../images/common/icon_wrap.png) -210px 0 no-repeat;}
.btn_srch {position:relative; height:4rem;  aspect-ratio:1/1; border-radius:7px; background:var(--color-main);}
.btn_srch:before{content:""; display:block; width:2.1rem; height:2.1rem; margin:0 auto; background:url(../images/common/btn_sch.png) no-repeat; background-size:contain;}
.btn_blk{min-width:115px; font-size:max(1.4rem, 13px); font-weight:600; color:#fff; padding:1.2rem 1.8rem; border-radius:8px; background:#222;}
a.log_btnsml {padding:0.8rem 1.5rem; border:1px solid var(--color-main); border-radius:17px; color: var(--color-main); line-height:1; }
a.log_btnsml:hover{color:#fff; background:var(--color-main); transition:1s ease; }
a.vrf_phone {width:100%; font-size:max(1.4rem, 13px); padding:1.8rem; border:1px solid #ddd; border-radius:50px; color:#666; line-height:1;}
a.vrf_phone:hover{border:1px solid #aaa; transition:0.5s ease; }

/* 기본버튼 */
.btn_wrap {display:flex;  }
button.btn_cr_grd, a.btn_cr_grd{width:100%; margin-top:2.5rem; font-size:max(1.8rem, 15px);}
button.btn_cr_grd:hover, a.btn_cr_grd:hover { background:var(--color-main);  }
.btn_cr_grd , a.btn_cr_grd {display:flex; justify-content:center; align-items:center; height:52px; font-weight:600; line-height:1; color:#fff; text-align:center; background:var(--grad-1); border-radius:26px; padding:1.8rem; }
.btn_sqr {display:flex; justify-content:center; font-size:max(1.7rem, 15px); font-weight:600; color:#fff; align-items:center; padding:1rem 2rem; border-radius:7px; background:var(--color-main); }


/* 하단버튼 */
.bt_btn {margin-top:40px;}
.bt_btn.ta_c {width:80%; margin:3rem auto 2rem; justify-content:center; gap:10px;}
.bt_btn.ta_d {width:70%; margin:3rem auto 2rem; gap:10px;}
.bt_btn button, .bt_btn a {min-width:125px; padding:1.3rem 3rem; }
.btn_bottom{display:flex; justify-content:space-between; gap:2rem;}
.btn_bottom_gr{display:grid; grid-template-columns:repeat(4, 1fr);}
.btn_bottom button{ font-size:max(1.8rem, 15px); border-radius:30px; text-align:center; padding:1.3rem 5rem; }
.btn_list, .btn_nml{font-size:max(1.8rem, 15px);color:#fff; font-weight:600; background-color:var(--color-main); border-radius:50px;}
.btn_next{	
	font-size:max(1.8rem, 15px);
	color:#fff; font-weight:600;
	background-position:right 3rem center;
	background-color:var(--color-main); 
	background-image:url(../images/common/icon_arr.png);
	background-repeat:no-repeat;
	background-position:right 10px center;
	background-size:15px;
	border-radius:50px;
}
.btn_cncl{font-size:max(1.8rem, 15px);color:#666; font-weight:600; border:1px solid #aaa; border-radius:50px;}
.btn_bor{font-size:max(1.8rem, 15px);color:var(--color-main); font-weight:600; background-color:#fff; border:1px solid var(--color-main);border-radius:50px;}

/* 조회 */
.srch_wrap {display:flex; justify-content:center; flex-wrap:wrap; margin-bottom:40px; padding:20px; border-radius:8px; background:var(--gray-40);}

.srch_wrap input[type="text"], .srch_wrap select {height:fit-content; border:none;}
.srch_wrap .btn_sqr{max-height:47px;}
.ntc_srch input[type="text"]{background:#fff; }
.inp_srch{position:relative;}
.pop_body input[type="search"] {width:100%;}
.srch_term{display:flex; justify-content:space-between; width:68%; margin-right:15px;}
.srch_wrap .srch_term > div{width:100%;}
.srch_wrap .srch_term > label{min-width:10rem; font-size:max(1.5rem, 14px);padding-top:16px; word-break:keep-all;}
.srch_wrap .srch_term input[type="date"]{width:47%; background:#fff; margin-right:0;}
.date_radio{}
.date_radio label{font-size:max(1.4rem, 12px); margin:10px 15px 0 0;}
.date_radio label:last-child{margin:10px 0 0 0;}

/* 테이블 */
.tb_wrap {position:relative;}
.tb_joinform{border-top:1px solid #222; margin-top:2.5rem; }
.tb_form {width:100%; box-sizing:border-box;}
.tb_form tr {display:flex;  border-bottom:1px solid #ddd; padding:2rem 0; }
.tb_form tr th{width:14.5rem; padding-top:calc((4rem - 1.6rem) / 2);}
.tb_form tr th, .tb_form tr td{display:flex; flex-wrap:wrap;  font-size:max(1.6rem, 14px); font-weight:500; color:#666; text-align:left; word-break:keep-all; }
.tb_form tr td{width:calc(100% - 15rem); gap:10px;}
.tb_form tr th.req{position:relative;}
.tb_form tr th.req:after{content:"*"; display:inline-block; margin-left:3px; font-size:15px; color:var(--color-main); vertical-align:middle;}
.tb_info {position:relative; width:100%; font-size:max(1.4rem, 13px); margin-top:10px; padding-left:2rem; color:#222; word-break:keep-all;}
.tb_info:before {content:"!"; position:absolute; top:1px; left:0; width:15px; height:15px; font-size:11px; font-weight:600; color:#fff; text-align:center; line-height:18px; border-radius:50%; background:var(--color-main);}
.tb_info:first-child {margin-top:0;}
.tb_form tr td > label{ margin-right:3rem;}
.tb_form tr td div{display:flex;}

.wrap_result{overflow-x:auto; }
.wrap_result::-webkit-scrollbar{height:6px;}
.wrap_result::-webkit-scrollbar-thumb{background:var(--color-main); border-radius:3px;}
.wrap_result::-webkit-scrollbar-track{background:#e9e9e9;}
.tb_result { width:100%; min-width:670px; box-sizing:border-box; font-size:max(1.5rem, 14px); font-weight:500; color:#666;text-align:center; }
.tb_result thead{color:#222; font-size:max(1.6rem, 15px); background:#eaf0f6; }
.tb_result th{padding:13px;}
.tb_result tbody tr{border-bottom:1px solid #eee; }
.tb_result td{padding:7px;}
.result_chk {display:block; position:relative; min-height:2.8rem; line-height:1; border:1px solid var(--color-main); border-radius:7px; padding:14px 15px; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none;}
.result_chk input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.result_chk input:checked ~ .chk_cmp {color:#fff; background-color: var(--color-main); background-position: 0 0;  border-radius:7px; }
.result_chk input ~ .chk_cmp:hover {color:#fff; background-color:  var(--color-main); border-radius:7px; }
.result_chk .chk_cmp {display:flex; justify-content:center; align-items:center;  position: absolute; top: 50%; left:0; transform: translateY(-50%); height: 100%; width: 100%; font-weight: 500; color:  var(--color-main);  background:#fff; border-radius: 7px; transition: background 1s ease, color 0.25s ease;}.result_chk input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.tb_base{width:100%; table-layout:fixed; border-top:1px solid #222; border-collapse:collapse; box-sizing:border-box; margin-top:10px;}
.tb_base tr td{font-size:max(1.6rem, 15px);color:#888; text-align:center; border-bottom:1px solid #ddd;padding:3rem 1rem; }
.tb_base tr td.notice_tit {color:#222; text-align:left; }
.tb_base td.notice_tit a{overflow:hidden; max-width:100%; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;}
.tb_notice{display:block; width:50px; font-size:14px; color:var(--color-main); padding:3px 10px; margin:0 auto; border:1px solid var(--color-main); border-radius:30px;}
.tb_date, .tb_view{position:relative;}
.tb_date:before, .tb_view:before{content:""; display:inline-block; width:13px; height:12px; margin:-2px 5px 0 0; vertical-align:middle; }
.tb_date:before{background:url(../images/common/icon_clock.png) no-repeat;}
.tb_view:before{background:url(../images/common/icon_eye.png) no-repeat;}
.tb_new{display:inline-block; height:15px; aspect-ratio:1/1; font-size:12px; color:#fff; text-align:center; background:var(--color-main); margin-left:5px;}

.view_tit{ margin-top:2.5rem; width:100%; box-sizing:border-box; border-top:1px solid #222;}
.view_tit tr{font-size:max(1.6rem, 15px); text-align:left; border-bottom:1px solid #ddd; }
.view_tit tr th{color:#222; font-weight:500; padding:2rem; background:#eaf0f6; }
.view_tit tr td{color:#666; font-weight:500; padding:2rem; }
.view_tit tr td.view_title{font-weight:600; color:#222;}
.view_tit tr td a{position:relative; padding-left:26px;}
.view_tit tr td a:before{content:'';position:absolute; top:0; left:0; width:17px; height:17px; background:url(../images/common/icon_file.png)no-repeat;}

.rcd_table, .rank_table{overflow-x:auto; width:100%; }
.rcd_table::-webkit-scrollbar, .rank_table::-webkit-scrollbar, .myrank_wrap::-webkit-scrollbar{height:6px;}
.rcd_table::-webkit-scrollbar-thumb, .rank_table::-webkit-scrollbar-thumb, .myrank_wrap::-webkit-scrollbar-thumb{background:var(--color-main); border-radius:3px;}
.rcd_table::-webkit-scrollbar-track, .rank_table::-webkit-scrollbar-track, .myrank_wrap::-webkit-scrollbar-track{background:#e9e9e9;}
.rcd_table table{min-width:1000px; width:100%; text-align:center; margin-bottom:1rem;}
.rcd_table thead tr th{font-size:max(1.8rem, 16px); font-weight:600; color:#222; background:#eaf0f6; padding:1.7rem;}
.rcd_table thead tr th:first-child{border-radius:8px 0 0 0;}
.rcd_table thead tr th:last-child{border-radius:0 8px 0 0;}
.rcd_table tbody tr{font-weight:500; border-bottom:1px solid #cfd7df;}
.rcd_table tbody tr:last-child{border-bottom:1px solid #666;}
.rcd_table tr td{font-size:max(1.7rem, 15px); color:#666;padding:1.3rem; }
.rcd_table tr td.rcd_name{color:#222;}
.rcd_table tr td input[type="radio"]{-webkit-appearance: none; -moz-appearance: none; appearance: none; height:17px; min-height:unset; width:17px; border:1px solid #cfd7df; border-radius:3px; background:#fff; padding:0; box-sizing: border-box;}
.rcd_table tr td input[type="radio"]:checked{border:none; background:url(../images/common/rcd_chk.png)no-repeat; }

.rank_table table{min-width:600px; width:100%; text-align:center; margin-bottom:1rem;}
.rank_table thead tr th{font-size:max(1.8rem, 16px); font-weight:500; color:#222; background:#f7f7f7; padding:1.7rem;}
.rank_table tbody tr{border-bottom:1px solid #ddd;}
.rank_table tr td{min-width:80px; font-size:max(1.6rem, 14px); color:#222; padding:1.2rem; }
.rank_table tr td .nick_nm{font-size:max(1.7rem, 15px); font-weight:600; }
.rank_table tr td.rk_prz { font-size:0; width:30px; height:42px;}
.rank_table tr td.first_rank{ background:url(../images/common/m_first.png) center center no-repeat;}
.rank_table tr td.second_rank{background:url(../images/common/m_second.png) center center no-repeat;}
.rank_table tr td.third_rank{background:url(../images/common/m_third.png) center center no-repeat;}
.rank_table tr td .pro_date{display:flex; align-items:center;}
.rank_table tr td .pro_date img{width:40px; height:40px; border-radius:50%; margin-right:15px;}
.rank_table tr.my_hl{background:#eaf0f6; }
.rank_table tr td.ranking span{font-weight:800; margin-right:3px;}

/* layer pop */
.layer_wrap {overflow:hidden; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; z-index:-1;}
.layer_wrap.layer_open {opacity:1; visibility:visible; z-index:99;}
.layer_wrap button{text-decoration:none;}

.layer_cont {position:absolute; top:50%; left:50%; width:100%; height:auto; max-height:90%; transform:translate(-50%, -50%); box-sizing:border-box;}
.layer_cont .pop_head {position:relative; padding:2rem 3rem; border-radius:20px 20px 0 0; background:var(--color-main); }
.layer_cont .pop_head .pop_tit {font-size:1.8rem; font-weight:500; color:#fff; }
.layer_cont .pop_head .btn_close {overflow:hidden; position:absolute; top:2rem; right:3rem; width:19px; height:19px; text-indent:-9999px; background:url('../images/common/btn_close.png') no-repeat;}
.layer_cont .pop_body {max-height:calc(100vh - 180px); padding:4rem 3rem 5rem; text-align:center; border-radius:0 0 20px 20px; background:#fff; box-sizing:border-box;}
.layer_body h4{font-size:3rem; font-weight:700; color:#222; margin-bottom:2rem;}
.layer_body > p{font-size:max(1.6rem, 14px); font-weight:400; line-height:1.5; color:#666; margin-bottom:3rem;}
.layer_body p .fc_main{color:var(--color-main); font-weight:600;}
.layer_body p .fc_bl{color:#222; font-weight:600;}
.layer_body .client_id{width:100%; font-size:3rem; font-weight:700; color:var(--color-main); border-radius:5px; padding:2rem; background:#f7f7f7; }
.layer_body .client_pw{display:flex; justify-content:center; align-items:center; width:100%; font-size:1.8rem; font-weight:600; color:var(--color-main); padding:2rem; background:#f7f7f7; margin-bottom:3rem;}
.layer_body .client_pw p{color:#222;font-weight:600; margin-left:5px;}
.layer_body .btn_cr_grd{width:100%;}
.fd_pw{display:flex; justify-content:space-between; align-items:center; font-size:max(1.4rem, 13px); margin-top:3rem; }


/* layer pop size */
.layer_cont.layer_md {max-width:420px;}
.layer_cont.layer_lrg {max-width:750px;}


/* 페이징 */
.page_wrap {position:relative; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:0.7rem; margin-top:3rem; text-align:center;}
.page_wrap > a {position:relative; display:inline-block; width:30px; height:30px; font-size:max(1.4rem, 14px); line-height:30px; border-radius:3px;}
.page_wrap > a:not(.on):hover, .page_wrap > a:not(.on):focus, .page_wrap > a:not(.on):active {text-decoration:none; background-color:#f7f7f7;}
.page_wrap > a[class^='page_'] {overflow:hidden; margin-right:0; font-size:0; text-indent:-9999px; vertical-align:bottom; border:1px solid transparent; background:url('../images/common/btn_st.png') no-repeat; background-position:center;}
.page_wrap > a.page_before {background:url('../images/common/btn_prv.png') no-repeat; background-position:center;}
.page_wrap > a.page_after {background:url('../images/common/btn_nxt.png') no-repeat; background-position:center;}
.page_wrap > a.page_last {background:url('../images/common/btn_lp.png') no-repeat; background-position:center;}
.page_wrap > a.on {font-weight:600; color:#fff; text-decoration:none; border-radius:3px; background:var(--color-main);}

@media screen and (max-width:1024px){
	.bt_btn.ta_d {width:80%;}
}
	
@media screen and (max-width:910px){
	.join_form{width:80%; padding:7rem 7rem 5rem;}
	input[type="text"], input[type="password"], input[type="date"], input[type="month"], input[type="time"], 
	select.sel_st01{ width:55%; margin-right:10px;}
		
	.tb_form tr th{width:12.5rem; margin-right:10px;}
	.tb_form tr td{width:calc(100% - 14rem);}
	.rcd_form .tb_form tr th{width:10rem; }
	.rcd_form .tb_form tr td{width:calc(100% - 11rem);}
	.tb_form tr td div.base__fileup{width:100%; }
	
	.tb_base colgroup{display:none;}
	.tb_base tr {display:block; padding:20px 0; border-bottom:1px solid #ddd; }
	.tb_base tr td{display:inline-block; padding:0; border:none;}
	.tb_base tr td.notice_tit {display:block; width:100%; margin:12px 0;}
	.tb_base tr td.notice_tit a{}
	.tb_base td .tb_date, .tb_base td .tb_view{margin:0 5px;}
	
}

@media screen and (max-width:800px){
	.srch_wrap {gap:10px;}
    .srch_wrap select, .srch_wrap input[type="text"], .srch_wrap button {flex:1 0 100%;}
	.ntc_srch input[type="text"], .ntc_srch select{margin-right:0;}
	.srch_term{width:100%; margin-right:0;}
	
	.layer_cont.layer_lrg {max-width:calc(100% - 40px);}
	
	.bt_btn.ta_d{width:50%;}
	.btn_bottom_gr{grid-template-columns:repeat(2, 2fr);}
}
@media screen and (max-width:640px){
   
   input[type="text"], input[type="password"], input[type="date"], input[type="month"], input[type="time"], select.sel_st01{width:100%;}
   .login_inp input[type="text"], .login_inp input[type="password"]{margin:0;}
   input[type="search"], .result_input label{width:100%;}
   .result_input label input[type="text"]{left:65px; width:calc(100% - 65px - 1.3rem);}
   
   .tb_form tr td div{flex-wrap:wrap;}
   .filename{margin-bottom:10px;}
   select.sel_st01{max-width:unset;}
   .bt_btn button, .bt_btn a, .btn_bottom button{width:50%; padding:1.3rem 2.5rem;}
   .bt_btn button, .bt_btn a{min-width:unset;}
   .bt_btn.ta_d.bt_btn button{width:100%;}
   .bt_btn.ta_c{width:90%; gap:7px;}
   .bt_btn.ta_d{width:90%;}
   .btn_sqr{width:100%; }
   
   .srch_wrap .srch_term input[type="date"]{width:100%;}
   .date_pick{text-align:center;}
   
   .tb_info{padding-left:2.5rem;}
}
@media screen and (max-width:420px){
	.layer_cont.layer_md {max-width:calc(100% - 40px);}
	
	.bt_btn.ta_c{width:100%;}
	.bt_btn button, .bt_btn a, .btn_bottom button{padding:1.3rem;}
	.btn_list, .btn_nml, .btn_cncl{}
	
	.srch_term{flex-wrap:wrap;}
	.srch_wrap .srch_term > label{min-width:unset; width:100%; margin-bottom:10px;}
	.date_radio label{margin:10px 5px 0 0;}
	
}