@charset "utf-8";

.memberTopBox {width:100%; margin-bottom:40px;}
.memberTopBox .memberTitleBox {font-family: 'GmarketSansMedium',sans-serif!important; font-size:30px; color:#333; letter-spacing:-0.025em; line-height:34px; text-align: center; padding-bottom:50px;}
.memberTopBox .memberNavBox {width:100%; overflow: hidden; position:relative; margin-bottom:30px;}
.memberTopBox .memberNavBox::before {content:""; width:100%; height:2px; background-color:#d6dde4; position:absolute; top:14px; left:0; z-index:1;}
.memberTopBox .memberNavBox::after {content:""; width:0; height:2px; background-color:#168bf5; position:absolute; top:14px; left:0; z-index:2;}

.memberTopBox .memberNavBox div {width:300px; float:left; position:relative; z-index:3;}
.memberTopBox .memberNavBox div::before {content:""; width:12px; height:12px; background-color:#d6dde4; -ms-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; position:absolute; top:9px; left:50%; transform: translateX(-50%);}
.memberTopBox .memberNavBox div p {width:30px; height:30px; -ms-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size:16px; color:#fff; font-weight:300; letter-spacing:-0.05em; position:relative; margin: auto; position:relative; z-index:2; opacity:0;}
.memberTopBox .memberNavBox div p::before {content:""; width:0; height:0; background-color:#168bf5; -ms-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:-1;}
.memberTopBox .memberNavBox div span {display: block; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:20px; text-align: center; margin-top:8px;}

.memberTopBox .memberNavBox.mn_ani2::after {width:150px;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(1)::before {background-color:#168bf5;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(1) p {opacity:1;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(1) p::before {width:30px; height:30px;}

.memberTopBox .memberNavBox.mn_ani3::after {width:450px;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(1)::before {background-color:#168bf5;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(2)::before {background-color:#168bf5;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(2) p {opacity:1;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(2) p::before {width:30px; height:30px;}

.memberTopBox .memberNavBox.mn_ani4::after {width:750px;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(1)::before {background-color:#168bf5;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(2)::before {background-color:#168bf5;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(3)::before {background-color:#168bf5;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(3) p {opacity:1;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(3) p::before {width:30px; height:30px;}


.memberTopBox .memberNavBox.mn_ani1::after {animation: mn_line_ani1 0.6s ease forwards; animation-delay:0.6s;}
.memberTopBox .memberNavBox.mn_ani1 div:nth-child(1) p {animation: mn_ani_on 0.3s ease forwards; animation-delay:1.2s;}
.memberTopBox .memberNavBox.mn_ani1 div:nth-child(1) p::before {animation: mn_ani_on2 0.6s ease forwards; animation-delay:1.2s;}

.memberTopBox .memberNavBox.mn_ani2::after {animation: mn_line_ani2 0.6s ease-out forwards; animation-delay:1s;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(1) p {animation: mn_ani_off 0.3s ease forwards; animation-delay:0.8s;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(1) p::before {animation: mn_ani_off2 0.6s ease forwards; animation-delay:0.6s;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(2) p {animation: mn_ani_on 0.6s ease-out forwards; animation-delay:1.6s;}
.memberTopBox .memberNavBox.mn_ani2 div:nth-child(2) p::before {animation: mn_ani_on2 0.6s ease-out forwards; animation-delay:1.6s;}

.memberTopBox .memberNavBox.mn_ani3::after {animation: mn_line_ani3 0.6s ease-out forwards; animation-delay:1s;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(2) p {animation: mn_ani_off 0.3s ease-in forwards; animation-delay:0.8s;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(2) p::before {animation: mn_ani_off2 0.6s ease-in forwards; animation-delay:0.6s;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(3) p {animation: mn_ani_on 0.6s ease-out forwards; animation-delay:1.6s;}
.memberTopBox .memberNavBox.mn_ani3 div:nth-child(3) p::before {animation: mn_ani_on2 0.6s ease-out forwards; animation-delay:1.6s;}

.memberTopBox .memberNavBox.mn_ani4::after {animation: mn_line_ani4 0.6s ease-out forwards; animation-delay:1s;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(3) p {animation: mn_ani_off 0.3s ease-in forwards; animation-delay:0.8s;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(3) p::before {animation: mn_ani_off2 0.6s ease-in forwards; animation-delay:0.6s;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(4) p {animation: mn_ani_on 0.6s ease-out forwards; animation-delay:1.6s;}
.memberTopBox .memberNavBox.mn_ani4 div:nth-child(4) p::before {animation: mn_ani_on2 0.6s ease-out forwards; animation-delay:1.6s;}

@keyframes mn_ani_on {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes mn_ani_on2 {
	0% {width:0; height:0;}
	100% {width:30px; height:30px;}
}
@keyframes mn_ani_off {
	0% {opacity:1;}
	100% {opacity:0;}
}
@keyframes mn_ani_off2 {
	0% {width:30px; height:30px;}
	100% {width:0; height:0;}
}
@keyframes mn_line_ani1 {
	0% {width:0;}
	100% {width:150px;}
}
@keyframes mn_line_ani2 {
	0% {width:150px;}
	100% {width:450px;}
}
@keyframes mn_line_ani3 {
	0% {width:450px;}
	100% {width:750px;}
}
@keyframes mn_line_ani4 {
	0% {width:750px;}
	100% {width:1050px;}
}

.memberTopBox .memberSTitleBox {width:100%; background-color:#fbfbfb; padding:45px 0px; text-align: center;}
.memberTopBox .memberSTitleBox p {font-size:24px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:32px;}
.memberTopBox .memberSTitleBox p font {font-size:24px; color:#168bf5;}
.memberTopBox .memberSTitleBox span {font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:22px; display: block; margin-top:15px;}
.memberTopBox .memberSTitleBox b {font-size:20px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:22px; display: block; margin-top:30px;}
.memberTopBox .memberSTitleBox ul {width:100%; text-align: center; font-size:0; margin-top:18px;}
.memberTopBox .memberSTitleBox ul li {width:360px; display:inline-block; zoom:1; *display:inline; vertical-align: middle; border:1px solid #dfdfdf; background-color:#fff; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:50px; margin:0px 5px;}
.memberTopBox .memberSTitleBox ul li font {font-size:16px; color:#168bf5;}




.join_agree {width:100%; position: relative;}
.join_agree .new_mem_benefit {width: 100%;}
.join_agree .new_mem_benefit h2 {font-size: 16px; color: #00b0f0; font-weight: 600;}
.join_agree .new_mem_benefit ul {width: 100%; margin-top: 10px; overflow: hidden;}
.join_agree .new_mem_benefit ul li {float: left; width: calc(100% / 4 - 60px / 4); border:2px solid #00B0F0; background: linear-gradient(to top,#f3f3f3 5%,#fff 25%); padding: 10px 10px 15px; -o-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; box-sizing: border-box;}
.join_agree .new_mem_benefit ul li + li {margin-left: 20px;}
.join_agree .new_mem_benefit ul li span {display: block; text-align: center;}
.join_agree .new_mem_benefit ul li span img {}
.join_agree .new_mem_benefit ul li p {font-size: 14px; color: #454545; font-weight: 600; text-align: center; margin-top: 5px;}
.join_agree .new_mem_benefit ul li p em {font-size: 13px; color: #666; font-weight: 400; letter-spacing: -0.06em;}

.join_agree .join_info_box {width:100%; border:1px solid #d7d7d7; padding:18px 25px; margin-top:30px; -webkit-border-radius:15px; -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; border-radius:15px; background:linear-gradient(to top,#f3f3f3 5%,#fff 25%); box-sizing:border-box;}
.join_agree .join_info_box p.j_info_txt01 {font-size:16px; color:#00B0F0; font-weight:600; padding-bottom:10px;}
.join_agree .join_info_box p.j_info_txt02 {font-size:16px; color:#888; line-height:22px;}
.join_agree .join_info_box .j_contact p.j_info_txt03 {font-size:13px; color:#1D9EE8; line-height:20px; padding-top:10px; display:inline-block; vertical-align: top;}
.join_agree .join_info_box .j_contact p.j_info_txt04 {font-size:13px; color:#1D9EE8; line-height:20px; padding-top:10px; display:inline-block; vertical-align: top;}

.member_btn_box {width:415px; overflow: hidden; margin: auto; padding-bottom:30px;}
.member_btn_box div {width:200px; float:left; padding:10px 0px; text-align: center; font-size:17px; font-weight:400; letter-spacing:-0.025em; transition:all 0.2s;}
.member_btn_box div.memBtn01 {border:1px solid #ccc; color:#666;}
.member_btn_box div.memBtn01:hover {border:1px solid #0051bf; color:#0051bf;}
.member_btn_box div.memBtn02 {float:right; border:1px solid #168BF5; background-color:#168BF5; color:#fff;}
.member_btn_box div.memBtn02:hover {background-color:#0051bf; border:1px solid #0051bf;}


.file_input_img_btn { position:absolute; background:linear-gradient(to top,#f5f5f5,#fff); width:100px; height:30px; text-align: center; border:1px solid #e1e1e1; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; color:#666; font-size:13px; line-height:30px; cursor:pointer; top: 0px;}
input.file_input_hidden {
    width: 100%!important;
    font-size: 32px;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    cursor: pointer;
}
.input_file_Box {width:580px; float:left; margin-left:10px; position:relative; /*padding-bottom: 5px;*/}
.dr_input {float:left; width: 180px; height: 33px; border: 1px solid #ddd!important; padding: 0px 5px; font-size: 14px; color: #666!important; vertical-align: middle;}

.file_input_textbox {float: left; width: 70%!important; height: 30px!important; border: 0!important; padding-left: 110px!important; margin-top: 0px;}
.file_input_textbox::placeholder {color:#a6a6a6!important; font-size:14px;}

.cboth {font-size: 14px; color: #333; display: inline-block; line-height: 30px;}
.cboth_p {padding-top:5px; font-size:14px; clear: both;}
.cboth_span {padding-top:5px;line-height:40px; margin-left: 7px;
    font-size: 14px;
    color: #333;}



/* email */
.fleft_email{float: left; font-size: 15px; margin-right: 12px; color: #333; margin-top: 5px;}


/* ���԰��?*/
.radio_box {width: 100%;overflow: hidden; padding-bottom: 10px; display: flex;}
.radio_box p {font-size: 14px; color: #333; font-weight: 500; /*float: left;*/ flex-shrink: 0;}

.radio_btn02 {/*float: left;*/ padding-left: 10px; padding-bottom: 6px;}
.radio_btn02 label {font-size: 14px;  color: #333; vertical-align: middle; background:none!important; padding:0px!important; margin-left: 4px;}
.radio_btn02 input {width: 14px!important;height: 14px!important;float: none!important; display: inline-block; vertical-align: middle!important; border: 1px solid #ccc!important; padding: 0px 5px!important; font-size: 14px!important; color: #666!important;}
.radio_btn02 label + input {margin-left : 10px;}
.radio_btn02 div {display: inline-block;}
.radio_btn02 div + div {margin-left : 10px;}
.radio_btn02 div:nth-child(10) {margin-left: 0;}

/** ���԰��?���ý� */
.join_route {width: 100%; border-top: 1px dashed #d7d7d7; padding-top: 10px; clear: both; margin-top: 10px;}
.join_route .line35 {float: left; line-height: 30px; width: 115px; text-align: left; padding-left: 12px; font-size: 14px; color: #333; font-weight: 500;}
.txt-field02 input {float: left;  width: 160px!important; width: 160px!important; border: solid 1px #ddd; height: 32px;}


/* ���ԿϷ�(���δ��? */
.complete_box div.txt1 {font-size: 26px; color: #333;font-weight: 600;padding-bottom: 20px;}
.complete_box div.txt1 span{font-size: 26px; color: #178BF5;}

.complete_meg {text-align: center; padding: 16px 0px;}
.complete_meg p.txt1{line-height: 25px; font-size: 15px;}  


.join_type_box {width:1200px; margin: auto; padding:100px 0px;}
.join_type_box p.jt_title {font-size:30px; color:#333; font-weight:500; letter-spacing:-0.05em; padding-bottom:50px; text-align: center;}

.join_type_box .join_type_sel_box {width:100%; padding:30px; overflow: hidden; background-color:#F5F5F5;}
.join_type_box .join_type_sel_box .htBox {width:550px; float:left;}
.join_type_box .join_type_sel_box .htBox:last-child {float:right;}
.join_type_box .join_type_sel_box .htBox .ht_info_box {width:100%; border:1px solid #ccc; padding:20px; padding-left:120px; position:relative; background-color:#fff;}
.join_type_box .join_type_sel_box .htBox .ht_info_box img.typeIcon {position:absolute; top:20px; left:20px;}
.join_type_box .join_type_sel_box .htBox .ht_info_box p {font-size:20px; color:#333; font-weight:400; letter-spacing:-0.025em; }
.join_type_box .join_type_sel_box .htBox .ht_info_box span {font-size:16px; color:#333; font-weight:400; letter-spacing:-0.025em; display: block;}
.join_type_box .join_type_sel_box .htBox .ht_info_box ul {width:100%; padding-top:15px;}
.join_type_box .join_type_sel_box .htBox .ht_info_box ul li {font-size:14px; color:#555; font-weight:400; letter-spacing:-0.03em; position:relative; padding-left:8px; line-height:21px;}
.join_type_box .join_type_sel_box .htBox .ht_info_box ul li::after {content:"·"; font-size:14px; color:#555; font-weight:400; line-height:21px; position:absolute; top:0; left:0;}

.join_type_box .join_type_sel_box .htBox .jtBtn {width:200px; margin: auto; background-color:#158BF5; font-size:16px; color:#fff; font-weight:300; letter-spacing:-0.05em; text-align: center; line-height:47px; margin-top:30px; transition:all 0.2s;}
.join_type_box .join_type_sel_box .htBox .jtBtn:hover {background-color:#086fcb;}

.join_type_box .jtBanner {width:100%; height:80px; background-image:url("../img/member/jtbanner.jpg"); background-repeat: no-repeat; padding:0px 30px; margin-top:30px;}
.join_type_box .jtBanner p {font-size:20px; color:#333; font-weight:400; letter-spacing:-0.025em; line-height:80px; background-image:url("../img/member/bannerArrow.png"); background-repeat: no-repeat; background-position:right center; display:inline-block; zoom:1; *display:inline; padding-right:30px;}



.member_certified {width:100%; text-align: center; margin-bottom:30px;}
.member_certified .certified_type {display:inline-block; zoom:1; *display:inline; width:585px; border:1px solid #dfdfdf; padding:50px 0; background-color:#fff; transition:all 0.3s;}
.member_certified .certified_type:hover {border:1px solid #158BF5;}

.member_certified .certified_type img {display: block; margin: auto;}
.member_certified .certified_type p {font-size:20px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:24px; margin-top:20px;}
.member_certified .certified_type span {font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:20px; display: block; margin-top:6px;}

.member_certified .certified_info {width:100%; margin: auto; padding:30px 0; border-bottom:1px solid #dfdfdf;}
.member_certified .certified_info p {font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:22px; display: block;}




/* 2024.04.23 이선구 로그아웃 타이머 추가 */
.timer_area {display:flex;align-items:center;gap:10px;position:absolute;top:0;right:0;}
.timer_area .txt_user {font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:14px;color:#333;letter-spacing:-0.025em;}
.timer_area .pipe {width:1px;height:11px;background-color:#d6dde4;}
.timer_area .time {padding-left:22px;background:url("../img/member/icon_timer.png") no-repeat 0 50%;background-size:16px;font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:15px;line-height:17px;color:#168bf5;}
.timer_area .time em {font-size:15px;line-height:17px;}
.timer_area .btn_extend {height:22px;padding:0 8px;border-radius:5px;background-color:#168bf5;font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:13px;color:#fff;letter-spacing:-0.025em;}

.popup_auto_logout {display:none;overflow:hidden;position:fixed;top:50%;left:50%;z-index:10000002;transform:translate(-50%, -50%);width:590px;background-color:#fff;box-shadow:0 21px 21px 0px rgba(0,0,0,.2);border-radius:10px;}
.dim_popup {display:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:10000001;background-color:rgba(0,0,0,.4);}
.popup_auto_logout .title {padding:18px 0;font-family:'Spoqa Han Sans Neo',sans-serif !important;font-weight:500;font-size:16px;line-height:18px;color:#000;text-align:center;}
.popup_auto_logout .btn_popup_close {position:absolute;top:20px;right:20px;width:15px;height:15px;background:url("../img/member/close.png") no-repeat 0 0;background-size:100%;}
.popup_auto_logout .img {margin:15px auto 0;width:68px;height:74px;background:url("../img/member/img_logout.png") no-repeat 0 0;background-size:100%;}
.popup_auto_logout .txt_notice {margin-top:10px;font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:16px;line-height:28px;color:#000;letter-spacing:-0.05em;text-align:center;}
.popup_auto_logout .txt_notice em {font-size:16px;font-weight:500;}
.popup_auto_logout .txt_notice em strong {font-weight:500;color:#178bf5;}
.popup_auto_logout .box_timer {display:flex;align-items:center;justify-content:center;gap:12px;width:calc(100% - 40px);height:60px;margin:16px auto 0;background-color:#f4f6fa;}
.popup_auto_logout .box_timer .txt {font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:14px;color:#000;}
.popup_auto_logout .box_timer .time {padding-left:22px;background:url("../img/member/icon_timer.png") no-repeat 0 50%;background-size:16px;font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:14px;line-height:16px;color:#178bf5;}
.popup_auto_logout .box_timer .time em {font-size:14px;line-height:16px;}
.popup_auto_logout .btn_extend {margin-top:20px;width:100%;height:60px;font-family:'Spoqa Han Sans Neo',sans-serif !important;font-size:18px;color:#fff;background-color:#178bf5;}