@charset "utf-8";



/* basic */
.inner {position:relative; width:100%; max-width:1400px; min-width: 320px; margin:0 auto;}

@media screen and (max-width:1440px){
    .inner {padding:0 20px;}
}



/* header */
.header {position:relative; background-image: var(--grad-1); box-shadow: 0 0 2rem rgba(20, 20, 20, 0.2); z-index: 10;}
.header .inner {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; height:8rem;}
.header .logo > a {display:block; width:27.6rem; height:4.6rem; background:url('../images/common/header_logo.png') no-repeat; background-size: contain; }

.header_util {display: flex; align-items: center; gap:2rem; position: relative;}

.header_util .btn_area .btn_item {position: relative;}
.header_util .btn_area .btn-alarm {display: block; width:2.4rem; height:2.4rem; position: relative; background: url('../images/common/ico_alert01.png') no-repeat left center; background-size: contain;}

.header_util .btn_area .btn-alarm span {overflow:hidden; display: block; width:0; height:0; font-size:0; text-indent: -9999px;}
.header_util .btn_area .btn-alarm.new span.num {overflow: visible; display: block; position: absolute; top:-0.5rem; right:-0.5rem; width:auto; height:auto; padding:0.2rem 0.5rem; font-size:max(1rem, 9px); font-weight: 700; color:#fff; line-height: 1; letter-spacing: -0.025em; border-radius: 1rem; background-color: var(--color-point1); text-indent: 0;}
.header_util .btn_area .btn-alarm.new::before {display: block;}

.header_util .profile_area {position: relative;}
.header_util .profile_area .btn_profile {display: block; width:3.2rem; height:3.2rem;}
.header_util .profile_area .btn_profile .thumb {overflow: hidden; display: block; width:100%; height:100%; border-radius: 50%; background-color: #eaf0f6;}

.header_util .util_layer {position: absolute; top:calc(100% + 1rem); right:50%; transform: translate(50%, 0); display: none; width:20rem; background-color: #fff; border-radius: var(--border-radius-1); padding:2rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s ease-in-out;}
.header_util .util_layer.is-active {opacity: 1;}


.header_util .alarm_layer {text-align: center;}
.header_util .alarm_layer .txt{font-size:max(1.4rem, 12px); color:#666; margin-bottom:2rem;}
.header_util .alarm_layer .txt strong{font-size:max(1.6rem, 13px); font-weight: 700; color:var(--color-point1); text-decoration: underline;}


.header_util .profile_layer .link {display: flex; align-items: center; gap:1rem;}
.header_util .profile_layer .thumb {display: block; width:5.5rem; height:5.5rem; background-color: #eaf0f6; border-radius: 50%; overflow: hidden; flex-shrink: 0;}
.header_util .profile_layer .user {flex-grow: 1; min-width: 0; line-height: 1.3;}
.header_util .profile_layer .user .u_name{display: block; font-size:max(1.6rem, 13px); font-weight: 700; color:#222;}
.header_util .profile_layer .user .u_id{overflow: hidden; display: block; font-size:max(1.2rem, 11px); font-weight: 400; color:#888; text-overflow: ellipsis; white-space: nowrap;}

.header_util .profile_layer .btn_wrap {display: flex; align-items: center; justify-content: center; gap:1rem; margin-top:2rem;}
.header_util .profile_layer .btn_wrap .sbtn {flex:1;}


/*Button Style*/
.sbtn {display: inline-block; font-size:max(1.3rem, 12px); font-weight: 700; color:#222; border:2px solid #222; border-radius: 0.5rem; text-align: center; padding:0.6rem 1.2rem; transition: all 0.3s ease-in-out; flex:1;}
.sbtn.type1 {color:#91a3b6; border-color:#91a3b6;}
.sbtn.type2 {background-color: #222; color:#fff; border-color:#222;}

.sbtn:hover {background-color: var(--color-main); color:#fff; border-color:var(--color-main);}




@media (max-width: 1600px) { 
	.header_util .profile_layer {right:-5rem; transform: translate(0);}
}
@media (max-width: 1280px) { 
	.header_util .profile_layer {width:24rem;}
}

@media (max-width: 768px) { 
	.header .logo > a {width:22rem; height:3.7rem;}
	.header_util {gap:1.5rem;}
}







/*전체메뉴*/
.open_nav {display: flex; align-items: center; position: relative;font-size:0; width: 2.4rem; height:2rem;}
.open_nav span {overflow: hidden; display: block; width:70%; height:2px; background-color: #fff; border-radius:1rem; transition: all 0.3s ease-in-out;}
.open_nav::before,
.open_nav::after {content:''; display: block; position: absolute; left:0; width:100%; height:2px; background-color: #fff; border-radius:1rem; transition: all 0.3s ease-in-out;}
.open_nav::before {top:0;}
.open_nav::after {bottom:0;}


.gnb {visibility:hidden; position: fixed; right:0; top:0; width: max(30%, 320px); height: 100%; background-color: #fff; transform: translateX(100%); transition: all 0.5s ease-in-out; opacity: 0; z-index: 3;  overflow: hidden; box-shadow: 0 0 5rem  rgba(0, 0, 0, 0.5);}
.is-menu .gnb { visibility: visible; opacity: 1;  transform: translateY(0);}

/* dim */
.gnb_dim {display: block; position: fixed; top:0; left:0; width:0; height:100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); } 
.is-menu .gnb_dim {opacity: 1; width:100%;}


.gnb_header {position: relative; display: flex; align-items: center; padding:1rem 3rem; height:8rem; background:var(--grad-1);}
.gnb_header .btn_home {display: flex; align-items: center; justify-content: center; width:5rem; height:5rem; border-radius: 50%; background:rgba(0, 0, 0, 0.5); transition: background-color 0.5s ease-in-out;}
.gnb_header .btn_home span {overflow: hidden; display: block; width:2.8rem; height:2.8rem; font-size:0; width:2.8rem; height:2.8rem; background:url('../images/common/ico_common.png') no-repeat; background-size: 30rem auto; background-position: 0 -6rem;}

.gnb .close_nav {overflow: hidden; position: absolute; top:4rem; right:3rem; width:3rem; height:3rem; font-size:0; text-indent: -9999px; transform: translate(0, -50%); transition: all 0.3s ease-in-out;}
.gnb .close_nav::before,
.gnb .close_nav::after {content:''; display: block; position: absolute; top:50%; left:50%; width:100%; height:0.2rem; background-color: #fff;}
.gnb .close_nav::before {transform: translate(-50%, -50%) rotate(45deg);}
.gnb .close_nav::after {transform: translate(-50%, -50%) rotate(-45deg);}




.gnb_wrap {height:calc(100% - var(--header-h)); padding:0 0 2rem; }
.gnb_list {overflow: auto; max-height:100%; }

.gnb_list > li {padding:0 3rem;}
.gnb_list > li > a {display: block; position: relative; padding:2rem 3rem 2rem 0; font-size:max(2.2rem, 17px); font-weight: 700; color:#222; border-bottom:1px solid #d6d6d6;}
.gnb_list > li > a::after {content:''; display: block; position: absolute; top:50%; right:1rem; transform: translate(0, -50%) rotate(45deg); width:1.4rem; height:1.4rem; border:solid #222; border-width: 0.2rem 0.2rem 0 0; transition: all 0.3s ease-in-out;}
.gnb_list > li.has-sub > a::after {transform: translate(0, -60%) rotate(135deg);}
.gnb_list > li.is-active > a::after {transform: translate(0, -30%) rotate(-45deg);}

.gnb_list > li > ul {display: none;}

.gnb_list > li > ul > li > a {display: block; font-size:max(1.8rem, 15px); font-weight: 600; padding:1rem;}
.gnb_list > li > ul > li:last-child > a {border-bottom:1px solid #d6d6d6;}


@media (hover: hover) and (pointer: fine) {
	.open_nav:hover span {width: 0;}
	.open_nav:hover::before {top:-3px;}
	.open_nav:hover::after {bottom:-3px;}


	.gnb_header .btn_home:hover {background-color: #000;}
	.gnb .close_nav:hover {transform: translate(0, -50%) rotate(360deg); transition-duration: 1s;}
}










/*Contents Area*/
main {min-height:calc(100vh - var(--header-h) - var(--footer-h)); min-width: 320px;}



/* sub layout */
.sub_container {display: flex; align-items: flex-start; gap:2rem; margin:0 var(--inner-padding); padding: 4rem 0 6rem;}

/*좌측메뉴*/
.sub_snb { flex-shrink: 0; width:24rem; border-radius: var(--border-radius-1); background-color: #fff; padding:4rem 2rem; box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);}
.sub_snb-tit {border-bottom:1px solid #ddd; padding-bottom:4rem; text-align: center;}
.sub_snb-tit .thumb {overflow: hidden; display: inline-block; width:5.5rem; height:5.5rem; border-radius: 50%; background-color: #eaf0f6;}
.sub_snb-tit .txt {display: block; font-size: 2.4rem; font-weight: 700; color:#222; margin-top:1rem;}


.sub_snb-wrap {padding:1rem 0 0 0;}
.sub_snb-btn {display: none;}

.sub_snb-wrap .item {padding:0 1rem;}
.sub_snb-wrap .item > a{display: block; padding:2rem 0; font-size:max(1.8rem, 15px); color:#666; font-weight: 500; letter-spacing: -0.01em; border-bottom:1px dashed #d6d6d6;}
.sub_snb-wrap .item.is-on > a {color:#222; font-weight: 700;}



@media (max-width: 1024px) { 
	.sub_container {flex-wrap: wrap;}

	.sub_snb {width:100%; padding:0; position: relative;}
	.sub_snb-tit {display: none;}
	.sub_snb-wrap {padding:0;}
	.sub_snb-btn { position: relative; display: flex; align-items: center; width:100%; padding:0 2rem; font-size:max(1.8rem, 15px); color:#222; font-weight: 700; text-align: left; height:6rem;}
	.sub_snb-btn::after {content:''; display: block; position: absolute; top:50%; right:3rem; transform: translate(0, -60%) rotate(135deg); width:1.4rem; height:1.4rem; border:solid #222; border-width: 0.2rem 0.2rem 0 0; transition: all 0.3s ease-in-out;}
	.sub_snb-btn.is-active::after {transform: translate(0, -30%) rotate(-45deg);}

	.sub_snb-wrap .list {display: none; position: absolute; top:6rem; left:0; width: 100%; padding:2rem; background-color: #fff; z-index: 2; border-radius: var(--border-radius-1); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);}

	.sub_snb-wrap .item > a{padding:1.5rem 0;}
	.sub_snb-wrap .item:last-child > a{border:0;}
}







/*콘텐츠 영역*/
.sub_contents {flex-grow: 1; border-radius: var(--border-radius-1); background-color: #fff; padding:4rem 4rem; min-width: 0;}


/*현재페이지 표시*/
.breadcrumb_nav .list {display: flex; align-items: center; justify-content:flex-start; gap:1rem; width:100%; }
.breadcrumb_nav .home .txt{overflow: hidden; display: block; flex-shrink: 0; width:2.4rem; height:2.4rem; font-size:0; text-indent:-9999px; border-radius: 50%; background:var(--color-main) url('../images/common/ico_common.png') no-repeat 0 -15rem; background-size: 30rem auto; transition: all 0.3s ease-in-out;}

.breadcrumb_nav .item {display: inline-flex; align-items: center; gap:1rem;}
.breadcrumb_nav .item:not(:last-child)::after {content:''; display: block; width:0.8rem; height:0.8rem; border:solid #888; border-width: 1px 1px 0 0; transform: translate(-0.3rem, 0) rotate(45deg);}
.breadcrumb_nav .item .txt {font-size:max(1.4rem, 12px); color:#888;}


/*페이지 타이틀*/
.page_title {margin-top:2rem; margin-bottom:2rem;}
.page_tit {font-size:2.5rem; font-weight: 700; color:#222;}


/*종목선택 탭*/
.sports_tab {position:relative; --tab-w1 :14rem; --tab-h:5rem; --tab-padding:6rem;}

.sports_tab_wrap { display: flex;}
.sports_tab.has-button {padding:0 var(--tab-padding);}
.sports_tab_mask {overflow: hidden; position: relative; border-radius: 3rem; background-color: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); padding-right:5rem;}
.sports_tab_mask::before {content:''; display: block; position:absolute; top:50%; right:0%; width:5rem; height:5rem; background:#fff; transform: translate(0%, -50%); border-radius: 50%; z-index: 1;}

.sports_tab .set_btn{overflow: hidden; display: block; position: absolute; top:50%; right:1rem; width:3rem; height:3rem; font-size:0; text-indent: -9999px; border-radius: 50%; background-color: var(--color-bg-1); transform: translate(0, -50%); z-index: 1; transition:all 0.3s ease-in-out;}

.sports_tab .set_btn::after {content:''; display: block; position:absolute; top:50%; left:50%; width:2rem; height:2rem; background:#222; transform: translate(-50%, -50%); transition: background 0.3s ease-in-out;  mask: url('../images/common/ico_common.png') no-repeat; -webkit-mask: url('../images/common/ico_common.png') no-repeat; mask-position:0rem -18rem; -webkit-mask-position: 0rem -18rem; mask-size: 30rem auto; -webkit-mask-size: 30rem auto;}

.sports_tab .set_btn:hover {background-color: var(--color-main);}
.sports_tab .set_btn:hover::after {background-color: #fff;}

.sports_tab_mask .list {display: flex; align-items: center; transition: transform 0.3s ease; will-change: transform;}
.sports_tab_mask .item {flex: 0 0 auto; width: var(--tab-w1);}
.sports_tab_mask .tbtn {display: flex; align-items: center; justify-content: center; gap:1rem; height:var(--tab-h); border-radius: 3rem; font-size:max(2rem, 15px); font-weight: 600; color:#222; transition: all 0.3s ease-in-out;}
.sports_tab_mask .item .tbtn:hover { color:var(--color-main);}
.sports_tab_mask .item.is-on .tbtn { color:#fff; background: var(--grad-1);}

.sports_tab_btn .abtn{overflow: hidden; position: absolute; top:50%; left:0%; width:var(--tab-h); height:var(--tab-h); font-size: 0; text-indent: -9999px; border-radius: 50%; background-color: #fff;box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); transform: translate(0%, -50%); transition: background 0.3s ease-in-out;}
.sports_tab_btn .abtn::after{content:''; display: block; width:2rem; height:2rem; position: absolute; top:50%; left:50%; background:#222; transform: translate(-50%, -50%); transition: background 0.3s ease-in-out;  mask: url('../images/common/ico_common.png') no-repeat; -webkit-mask: url('../images/common/ico_common.png') no-repeat; mask-position: -3rem -18rem; -webkit-mask-position: -3rem -18rem; mask-size: 30rem auto; -webkit-mask-size: 30rem auto;}

.sports_tab_btn .abtn.next {left:auto; right:0;}
.sports_tab_btn .abtn.next::after {mask-position: -6rem -18rem; -webkit-mask-position: -6rem -18rem;}

.sports_tab_btn .abtn:disabled {opacity: 0.5; pointer-events: none;}
.sports_tab_btn .abtn:hover {background: var(--color-main);}
.sports_tab_btn .abtn:hover::after {background-color: #fff;}


/*이용약관, 개인정보처리방침*/
.term_use {font-family:'Pretendard';font-size:max(1.4rem, 14px); color:#444; font-weight:300; line-height:1.3;}
.term_use .tou_box{width:100%; font-size:max(1.5rem, 14px); color:#222; font-weight:400; background:#eaf0f6; border-radius:8px; padding:25px;}
.term_use h4{font-family:var(--font-base); font-size:max(1.5rem, 15px); color:#222; font-weight:600; margin:2.5rem 0 0.7rem;}
.term_use p, .term_use li{margin-bottom:4px;}
.term_use ol{list-style-type: decimal; padding-left:7px;}
.term_use ol li{margin-left:8px;}
.term_use ul li{text-indent:-8px; margin-left:8px;}
.term_use ul li:before{content:'·'; color:#222; margin-right:5px;}
.term_use b{color:#222; font-weight:500;}



/*Footer*/
.footer {margin-top:6rem;}
.footer_wrap {border-top:1px solid #d9d9d9; padding:4rem var(--inner-padding); text-align: center;}
.footer_copy {color:#222; font-size: max(1.4rem, 11px); font-weight: 400;}
.footer_copy strong {font-weight: 700;}


@media (max-width: 768px) { 
	.footer {padding-bottom:var(--m-menu-h);}
}









/*Mobile Menu*/
.mobile_nav {display: none; position: fixed; bottom:0; left:0; width:100%; min-width: 320px; z-index: 1;}

.mobile_gnb {background-color: var(--color-main); border-radius: 1rem 1rem 0 0; padding:0 1rem;}
.mobile_gnb .list {display: flex;}
.mobile_gnb .item {flex:1 1 auto; }
.mobile_gnb .link {overflow: hidden; position: relative; display: block; width:100%; height: 100%; text-align: center; padding:0 0 2rem 0; color:#fff;}
.mobile_gnb .link::before {content:''; display: block; position: absolute; top:0; left:50%; transform: translate(-50%, -1rem); width:9rem; height:5rem; background:url('../images/common/bg_m_menu01.png') no-repeat top center / contain; opacity: 0; transition: all 0.3s ease-in-out;}

.mobile_gnb .ico {display: inline-block; position: relative; width:5rem; height:5rem; background-color: transparent; border-radius: 50%; transition: all 0.3s ease-in-out;}
.mobile_gnb .ico::after {content:''; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:2.8rem; height:2.8rem; background:url('../images/common/ico_common.png') no-repeat; background-size: 30rem auto; transition: all 0.3s ease-in-out;}

.mobile_gnb .item.nth-1 .ico::after {background-position:0 -6rem;}
.mobile_gnb .item.nth-2 .ico::after {background-position:-3rem -6rem;}
.mobile_gnb .item.nth-3 .ico::after {background-position:-6rem -6rem;}
.mobile_gnb .item.nth-4 .ico::after {background-position:-9rem -6rem;}
.mobile_gnb .item.nth-5 .ico::after {background-position:-12rem -6rem;}

.mobile_gnb .txt {display: block; font-size:max(1.4rem, 12px);}


.mobile_gnb .link:hover::before,
.mobile_gnb .item.is-on .link::before {opacity: 1; transform: translate(-50%, 0);}
.mobile_gnb .link:hover .ico,
.mobile_gnb .item.is-on .link .ico {background-color: #fff; transition-delay: 0.3s;}
.mobile_gnb .link:hover .ico::after,
.mobile_gnb .item.is-on .link .ico::after {background-position-y:-9rem;}



@media (max-width: 768px) { 
	.mobile_nav {display: block;}
}




/* login */
.login_inner{display:flex; justify-content:center; align-items:center; }
.login_wrap { position:relative; width:100%; max-width:420px; margin:0 auto; padding:4.2rem 3rem 6rem; text-align:center; border-radius:20px; background:#fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;}
.login_wrap.lost_id:before {content:""; display:block; width:55px; height:55px; margin:0 auto 1.5rem auto; background:url(../images/common/icon_login.png) no-repeat;}
.login_wrap > h3 {font-size:3rem; font-weight:700; }
.log_id, .log_pw{ width:100%; height:52px; display:flex; align-items:center; border-radius:26px; margin-top:10px; padding:0 20px 0 50px;  background:no-repeat left 20px center;border:1px solid #ddd;}
.log_id {background-image:url(../images/common/icon_id.png);}
.log_pw {background-image:url(../images/common/icon_pw.png);}
.login_inp.login_idpw{border-top:none; margin-top:3.5rem;}
.login_inp input[type="text"], .login_inp input[type="password"], .login_inp input[type="tel"] {width:100%; border:none; font-size:max(1.5rem, 14px); font-family:var(--font-base); font-weight:400;color:#666; background:#fff;}
.login_inp input::placeholder{font-size:max(1.5rem, 14px); font-weight:400; color:#666;}
.login_etc {margin-top:1.8rem; display:flex; justify-content:space-between; align-items:center; font-size:max(1.4rem, 13px); font-weight:500; color:var(--color-main);}
.login_etc .login_lst a{ margin:0 1.5rem; }
.login_etc .login_lst a:last-child{position:relative; margin-right:0;}
.login_etc .login_lst a:last-child:before{content:'｜'; position:absolute; left:-2.3rem; top:50%; transform:translateY(-50%); font-size:1.4rem; }

/* 아이디찾기 */
.lost_exp{width:85%; font-size:max(1.6rem, 15px); font-weight:400; line-height:1.4; color:#767676; text-align:center; margin:2rem auto 3rem; word-break:keep-all;}
.login_inp{border-top:1px solid #222; margin-bottom:2.5rem;}
.login_inp > div.lost{ display:flex; align-items:center; width:100%; height:52px; padding:2.5rem 0.5rem;  border-bottom :1px solid #ddd;}
.login_inp > div.lost label{min-width:6rem; font-size:max(1.6rem, 15px); font-weight:400; color:#666; text-align:left;margin-right:10px;}
.login_inp > div.lost input{font-size:max(1.5rem, 14px);color:#222;}
.counter{min-width:90px; display:flex; justify-content:space-between; font-size:max(1.4rem, 13px); font-weight:600; color:#e4580c; }
.counter span{font-weight:400;}

/* 비밀번호찾기 */
.npw_input input{width:100%;}
.new_pw{margin-bottom:10px;}

/* 회원가입-본인인증 */
.sub_wrap .join_inner{padding-top:5.5rem;}
.join_tit{font-size:3rem; font-weight:700; text-align:center; color:#222; margin:0  auto; }
.join_step{width:fit-content; display:flex; justify-content:space-between; font-size:1.8rem; font-weight:700; text-align:center; color:#222; border-radius:30px; margin:3rem  auto 5rem; background:#fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;}
.join_step li{padding:1.9rem 3rem; }
.join_step li.join_pageon{color:#fff; border-radius:30px; background:var(--grad-1);}
.join_ver{max-width:64rem; border-radius:20px; background:#fff; padding:6rem; margin:0 auto;}

.ver_exp{
	position:relative; width:100%; 
	font-size:max(1.6rem, 15px); font-weight:400; line-height:1.3; color:#666; 
	padding:3.3rem 3.3rem 3.3rem 86px; border-radius:10px; 
	background-position:left 26px center;
	background-color:#eaf0f6; 
	background-image:url(../images/common/icon_inq.png);
	background-repeat:no-repeat;
	word-break:keep-all;
}
.sns_ver{margin:4rem auto 7rem; }
.sns_ver h4{font-size:max(2rem, 18px); font-weight:700; color:#222; }
.sns_ver div a{
	width:100%; font-size:max(1.8rem, 15px); font-weight:500; color:#666; 
	border:1px solid #d9d9d9; border-radius: 10px; padding: 2.5rem 2.5rem 2.5rem 80px; margin-top:2rem;
	background-position:left 22px center;
	background-repeat:no-repeat;
}
.sns_ver div.sns_naver a{background-image:url(../images/common/icon_naver.png);}
.sns_ver div.sns_kakao a{background-image:url(../images/common/icon_kakao.png);}

.ver_help{width:100%; font-size:max(1.4rem, 13px); font-weight:400; line-height:1.3; color:#767676; text-align:center; margin:5rem auto 0; word-break:keep-all;}
.ver_help a{color:var(--color-sub);}

/* 회원가입-약관동의 */
.check_all{ display:flex; width:100%; border-bottom:1px solid #222; padding-bottom:2rem; }
.agr_whole{ font-size:max(2rem, 20px); font-weight:700; color:#222; }
.Accordion_wrap{margin:2rem auto 7rem;} 
.check_all > [type="checkbox"], .que > [type="checkbox"] {appearance: none; width:40px; height:32px; border:none; background:url(../images/common/box_unchecked.png) no-repeat;}
.check_all > [type="checkbox"]:checked, .que > [type="checkbox"]:checked {width:40px; height:32px; border:none; background:url(../images/common/box_checked.png) no-repeat;}
.que > [type="checkbox"], .que > [type="checkbox"]:checked{width:23px; height:20px; background-size:23px;}
.que{ display:flex; position: relative; font-size:max(1.8rem, 15px); font-weight:500; color:#666; border-bottom: 1px solid #ddd; padding: 2rem 0; cursor: pointer; word-break:keep-all;}
.que label{max-width:80%;}
.que.on>label{ font-weight: 700; color: #222; }

.anw {display: none;max-height:200px; overflow-y:auto; line-height:1.5; font-size:max(1.4rem, 14px); font-weight:400; color:#666; padding:2rem; background:#eaf0f6; } 
.anw h4{font-weight:600; margin:1rem 0;}
.anw h4:first-child{margin-top:0;}
.anw::-webkit-scrollbar{width:6px;}
.anw::-webkit-scrollbar-thumb{background:var(--color-main); border-radius:3px;}
.anw::-webkit-scrollbar-track{background:#e9e9e9;}
.arrow-wrap {min-width:3%; position: absolute; top:50%; right: 10px; transform: translate(0, -50%);}
.que .arrow-top {display: none; }
.que .arrow-bottom {display: flex;}
.que.on .arrow-bottom {display: none;}
.que.on .arrow-top {display: flex; }

/* 회원가입-등록양식 */
.join_form{max-width:1400px; width:95%; margin:0 auto; padding:7rem 15rem; background:#fff; border:1px solid #cfd7df; border-radius:20px;}

/* 가입완료 */
.login_wrap.welcome{color:#666; line-height:1.4; word-break:keep-all;}
.login_wrap h3{color:#222;}
.login_wrap.welcome:before {content:""; display:block; width:70px; height:70px; margin:0 auto 1.5rem auto; background:url(../images/common/welcom.png) no-repeat;}
.login_wrap .wel_exp{font-size:max(2rem, 16px); font-weight:500; margin:2.5rem auto 3rem;}
.login_wrap .wel_box{width:100%; font-size:max(1.6rem, 15px); font-weight:400; background:#eaf0f6; border-radius:10px; padding:3rem; }
a.fc_blue{color:var(--color-main); font-weight:600;}

/* 개인기록-등록목록 */
.wrap-chart{display:flex; justify-content:space-around; align-items:flex-end; width:100%; background:#eaf0f6; border-radius:15px; padding:4rem 5rem; margin-top:2.5rem;}
.rd_graph {display:flex; flex-direction:column; justify-content:space-between; text-align:center;}
.wrap-chart .donut-chart{width:32%;}
.wrap-chart .line-chart{width:60%;}
.line-chart, .donut-chart canvas{width:100%;} 
.wrap-chart .chart-info {margin-top: 30px;text-align: center;}
.wrap-chart .chart-info .info-tit {font-size:max(1.8rem, 17px); font-weight:700; color:#222; margin:2rem auto 0.8rem; }
.wrap-chart .chart-info .info-desc {display:flex; justify-content:center; align-items:center; position:relative;font-size:max(1.4rem, 14px); font-weight:500; color:#666;}
.wrap-chart .chart-info .info-desc:before{content:'!'; display:inline-block; height:16px; aspect-ratio:1/1; font-size:12px; font-weight:700;color:#222; margin-right:5px; border:1px solid #222; border-radius:50%; }
.list_wrap{margin-top:4.5rem;}
.listp_tit {display:flex; justify-content:space-between; align-items:center;}
.listp_tit h4{font-size:max(2rem, 18px); font-weight:700;margin-bottom:10px;}

/* 개인기록-등록양식 */
.rcd_form .inp_srch{margin-bottom:10px;}
.result_input{display:flex; flex-wrap:wrap; gap:10px;}
.sch_result > p{font-size:max(1.8rem, 15px); font-weight:600; color:#222; text-align:left; margin:2.5rem 0; }
.tb_form tr td div .mobile_show{display:none;}
.tb_form tr td.obj_gp15{gap:15px;}
.set_wod{flex-direction:column;}
.set_wod h4{color:#222;}
.wod_radio{gap:20px;}

/* 개인기록-재신청 */
.cfm_yn{align-items:center; font-size:max(1.4rem, 14px); color:#666; margin-bottom:15px;}
.cfm_yn span{display:inline-block; min-width:75px; font-size:max(1.3rem, 13px);color:#fff; text-align:center; padding:0.5rem 1rem; margin-right:10px;border-radius:20px;}
.cfm_yn span.cfm_no{background:#ff6446;}
.cfm_yn span.cfm_yes{background:var(--color-main);}
.cfm_yn span.cfm_wait{font-weight:700; color:#91a3b6; background:#fff; border:2px solid #91a3b6;}
.cfm_yn span.cfm_ing{font-weight:700; color:var(--color-sub); background:#fff; border:2px solid var(--color-sub);}
.no_reason{width:100%; font-size:max(1.5rem, 14px); color:#666; border-radius:10px; background:#eaf0f6; padding:2.2rem; }

/* 개인기록-확인 */
.record_view .cfm_yn{margin-bottom:0;}

/* 전체랭킹보기 */
.rank_list .srch_wrap{justify-content:space-between;}
.rank_cdt {display:flex; justify-content:space-between; width:calc(100% - 100px - 10px);}
.rank_cdt select.sel_st02{width:33%;}
.myrank_wrap{width:100%; overflow:auto; margin-bottom:3rem;}
.my_rank{width:100%; min-width:450px; 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 4rem 2rem 0;}
.my_rank h5{font-size:max(1.8rem, 16px); color:#fff; font-weight:600; background:#222; padding:1.2rem 2rem; border-radius:0 50px 50px 0;}
.my_rank .my_ranking{font-weight:700;}

/* 공지사항 */
.notice_list{padding-bottom:2rem;}
.ntc_srch{background:#eaf0f6; margin-top:2.5rem;}
.view_detail{font-size:max(1.6rem, 15px); font-weight:500; line-height:1.5; color:#666; padding:10rem 3rem; border-bottom:1px solid #ddd; }
.view_page {margin-top:3rem;}
.view_page > li {display:flex; flex-wrap:wrap; gap:15px; padding:20px 30px; border-radius:8px; background:#f7f7f7;}
.view_page > li:not(:last-of-type) {margin-bottom:10px;}
.view_page > li a {overflow:hidden; width:calc(100% - 80px); font-size:max(1.6rem, 15px); color:#666; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; text-decoration:none;}
.view_page > li b {color:#222; font-size:max(1.8rem, 16px);}

/* 회원탈퇴 */
.leave_mb {max-width:590px; display:flex; flex-direction:column; font-size:max(1.6rem, 15px); color:#666; font-weight:400; line-height:1.5;background:#f7f7f7; border-radius:20px; padding:5rem 2.8rem; margin:5rem auto; word-break:keep-all;}
.leave_mb h4{position:relative; font-size:max(3rem, 24px); color:#222; font-weight:700; padding-top:calc(55px + 2.4rem); margin:0 auto 2rem;}
.leave_mb h4.leave_bf:before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);display:inline-block; width:55px; height:55px; background:url(../images/common/leave.png) no-repeat;}
.leave_mb h4.leave_af:before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);display:inline-block; width:55px; height:55px; background:url(../images/common/welcom.png) no-repeat; background-size:contain;}
.leave_mb .leave_del{text-align:left; background:#fff; border-radius:8px; padding:3rem 2rem; }
.leave_mb .leave_del li{position:relative; text-indent:-8px; margin-left:8px; margin-bottom:6px;}
.leave_mb .leave_del li:before{content:'·'; color:#222; margin-right:5px;}
.leave_mb .leave_del li b{color:#222; font-weight:700;}
.leave_mb .leave_agr{display:flex; justify-content:center; align-items:start; width:100%; text-align:left;border-bottom:1px solid #ddd; margin:2rem auto 0; padding-bottom:2rem; }
.leave_mb .leave_agr input[type="checkbox"]{margin-top:3px;}
.leave_mb p{text-align:center;}

@media screen and (max-width:1200px){
	.join_form{width:90%; padding:7rem 5rem 5rem;}
	.set_wod input[type="text"]{width:100%;}
}

@media screen and (max-width:800px){	
    .view_wrap .view_tit {padding:15px 0;}
    .view_wrap .view_tit > h4 {margin-bottom:15px; font-size:22px;}
    .view_wrap .tb_notice {display:block; margin:0 0 10px 0;}
    .view_detail {padding:5rem 2rem;}
    .view_page > li {padding:20px; }	
	
	.set_wod{width:100%; border-bottom:1px dashed #ddd; padding-bottom:15px;}
	.set_wod:last-child{border-bottom:none;padding-bottom:0;}
	
	.rank_cdt{flex-wrap:wrap;gap:10px; width:100%;}
	.rank_cdt select.sel_st02{width:100%;}
}
@media screen and (max-width:768px){
	.wrap-chart{flex-wrap:wrap; padding:5rem 2rem;}	
	.wrap-chart .donut-chart{width:70%; }
	.wrap-chart .line-chart{width:100%;border-top:1px dashed #fff; padding-top:3rem; margin-top:3rem;}
}
@media screen and (max-width:640px){	
	.join_ver{width:calc(100vw - 40px); max-width:unset; padding:4rem 4rem 6rem;}
	.result_input{gap:10px;}
	.tb_form tr td div .mobile_show{display:flex; margin-top:10px;}
	.cfm_yn{gap:10px;}
	
}
@media screen and (max-width:500px){
	.login_wrap {width:90%; max-width:unset;}
	
	.join_step{max-width:80%;}
	.join_step li{padding:1.7rem; }
	.ver_exp br{display:none;}
	.sns_ver div a{padding:2.5rem 2.5rem 2.5rem 55px; background-position:left 10px center}
	.btn_next{background-size:15px;}
    .que > [type="checkbox"], .que > [type="checkbox"]:checked{margin-right:0; background-size:18px; background-position-y:5px; }
	
	.join_form{width:calc(100vw - 40px); padding:5rem 3rem;}
	
	.login_inp > div.lost{flex-wrap:wrap; height:100%; padding:2rem 0.5rem;}
	.login_inp > div.lost label, .login_inp > div.lost button{width:100%;}
	.login_inp > div.lost input{width:100%; margin:1rem 0; padding:1.3rem 0.5rem; background:#f7f7f7;}
	
	.view_tit colgroup{display:none;}
	.view_tit tr th{min-width:10.5rem; padding:2rem 1rem;}
	
    .view_page > li{width:calc(100vw - 40px - 10rem)}
	.view_page > li a, .view_page > li b{font-size:15px;} 
	
}

@media screen and (max-width:420px){
	.login_wrap {padding:4.2rem 2rem 6rem;}
}