@charset "utf-8";

/* 회원유형 선택 */
.certiList {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 20px; align-items: center;}
.certiList .certi_item {width: calc((100% - 20px) / 2); padding: 60px 40px; border: 1px solid #ddd; border-radius: 10px; text-align: center;}
.certiList .certi_item .icon {display: block; width: 120px; height: 120px; margin: 0 auto 20px; background: no-repeat 50% 50%; background-size: contain;}
.certiList .certi_item.member .icon {background-image: url('/images/page/contents/member_icon1.png');}
.certiList .certi_item.business .icon {background-image: url('/images/page/contents/member_icon2.png');}
.certiList .certi_item strong {font-size: 20px; font-weight: 600;}
.certiList .certi_item p {font-size: 16px; color: #666; margin-top: 10px;}
.certiList .certi_item .btn { margin-top: 30px;}

/* 약관동의 */
.agree_box {border: 1px solid var(--gray-200); padding: 24px 24px; overflow-y: auto; width: 100%; height: 240px; border-radius: 8px;}
.agree_box .list_st_dot > li + li {margin-top: 30px;}
.agree_box .tit {display: inline-block; position: relative; font-weight: 800; font-size: 16px; margin-bottom: 10px;}
.agree_box .txt {padding-left: 0; font-size: 1rem;}
.agree_box .line_box {margin-bottom: 0;}
.agree_box .line_box .txt {padding-bottom: 20px;}
.agree_box .line_box strong {display: block; font-weight: 800; margin-bottom: 10px;}

/* 로그인 & 회원가입 */
.account .login.box {width:min(480px, 100%); margin:0 auto; border-radius: 20px; padding: 0 40px;}
.account .login.box .input_field {margin: 10px 0;}
.account .login .designChk {margin-top: 10px; margin-bottom: 20px;}
.account .login .btn_wrap {padding-top: 0;}
.account .login .btn_wrap .btn {margin: 5px 0;}

/* 아이디 비밀번호 찾기 */
.account .login_other {text-align: center; margin-top: 20px;}
.account .login_other ul {font-size: 0;}
.account .login_other ul li {position: relative; font-size: 1rem; display: inline-block; padding: 0 10px;}
.account .login_other ul li:first-child:after {content: none;}
.account .login_other ul li:after {content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 1px; height: 12px; background-color: #e1e1e1;}
.account .login_other ul li a {color: #666;}
.account .login_other ul li a:hover {color: #333; text-decoration: underline;}

/* 간편로그인 영역 라인 */
.line_or{display: block; position: relative; width: 100%; padding: 15px 0; line-height: 0; font-size: 0; margin-top:30px;}
.txt_or{display: inline-block; width: 140px; line-height: 18px; font-size: 14px; text-align: center; color: var(--gray-500)}
.line_or:before,
.line_or:after{content: ""; display: inline-block; width: calc(50% - 70px); height: 1px; margin: 8px 0; background-color: rgba(0,0,0,0.06); vertical-align: top;}

/* sns login */
.sns_login .sns_btn {position: relative; width: 100%; height: 50px; background-color: #000; border: 1px solid #000; font-weight: 600; color: #fff; margin: 5px 0; border-radius: 10px;}
.sns_login .sns_btn.google {background-color: #fff; border: 1px solid var(--gray-200); color: var(--gray-500);}
.sns_login .sns_btn.kakao {background-color: #FEE500; border: 1px solid #FEE500; color: #000;}
.sns_login .sns_btn.naver {background-color: #1ec800; border: 1px solid #1ec800; color: #fff;}
.sns_login .sns_btn span:before {content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 60px; height: 100%; background: no-repeat 50% 50%; background-size: 20px auto; border-right: 1px solid rgba(255, 255, 255, .3); vertical-align: middle;}
.sns_login .sns_btn.google span:before {background-image: url('/images/page/common/icon_google.svg'); border-right-color: var(--gray-100);}
.sns_login .sns_btn.kakao span:before {background-image: url('/images/page/common/icon_kakao.svg');}
.sns_login .sns_btn.naver span:before {background-image: url('/images/page/common/icon_naver.svg');}

/* account common */
/* 타이머 */
/* .time_field {position: relative; display: inline-block;}
.time_field > input {padding-right: 60px;}
.time_field .timer {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 1rem; color: var(--main-color);} */

.time_field {position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 595px; background-color: var(--gray-100); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 10px 0;}
.time_field .timer b {color: var(--main-color); margin-left: 5px;}
.time_field button {color: var(--gray-400); text-decoration: underline; text-underline-position: under; margin: 0 5px;}

/* step */
.process {text-align: right; margin-bottom: 40px;}
.process ul {position: relative; font-size: 0; display: inline-block;}
.process ul li {position: relative; display: inline-block; font-size: 14px; padding-right: 60px; color: var(--gray-500);}
.process ul li.on {color: var(--main-color); font-weight: 600;}
.process ul li:before {content: ''; display: block; width: 20px; height: 20px; border: 1px solid var(--gray-200); border-radius: 50%; margin: 0 auto 5px;}
.process ul li:after {content: ''; position: absolute; top: 10px; right: 10%; display: block; width: 20%; border-top: 1px dashed var(--gray-300);}
.process ul li.on:before {background-color: var(--main-color); border-color: var(--main-color);}
.process ul li:last-child {padding-right: 0;}
.process ul li:last-child:after {content: none}

.process ul li.end {color: var(--gray-500);}
.process ul li.end:before {background-color: var(--gray-200); border-color: var(--gray-200);}


/* 홈페이지 약관 */
.all_check_btn {position:relative; margin-bottom:40px; background-color: var(--gray-100); border-radius: 10px; padding: 20px 20px; text-align: center;}

.policy + .policy {margin-top: 60px;}
.policy .scroll_y_box{border: 1px solid var(--gray-200); border-radius: 10px; height:250px; padding: 24px; overflow-y: auto;}
.policy .checkbox {margin-top: 10px;}

/* 회원가입 완료 */
.account .join.box {width:min(480px, 100%); margin:0 auto; background-color: var(--gray-100); border-radius: 20px; padding: 40px 40px;}
.join.box {text-align: center;}
.join.box .cont_box {padding-top: 60px; padding-bottom: 60px;}
.join.box .check {position: relative; display: block; width: 60px; height: 60px; background-color: var(--main-color); margin: 0 auto 20px; border-radius: 50%;}
.join.box .check:after {content: ''; display: block; height: 16px; width: 30px; position: absolute; top: 50%; margin-top: -5px; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); -ms-transform: translate3d(-50%, -50%, 0) rotate(-45deg); -moz-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-radius: 0;}
.join.box h3 {font-size: 24px; font-weight: 600;}
.join.box p {margin-top: 20px;}
.join.box .info {background-color: #fff; padding: 10px 20px; color: var(--gray-500); margin-top: 20px; border-radius: 5px;}
.join.box .info > p {word-break: keep-all; margin-top: 0;}


@media (max-width: 1920px) {

}

@media (max-width: 1680px) {

}

@media (max-width: 1440px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {
	.sns_login .sns_btn {height: 40px;}

}
@media (max-width: 768px) {
	.process {text-align: center; margin-bottom: 20px;}

}

@media (max-width: 640px) {
	/* 회원 유형 선택 */
	.certiList .certi_item {width: 100%;}
}

@media (max-width: 576px) {

}

@media (max-width: 420px) {
    /* 로그인 */
    .account .login.box {padding: 40px 20px;}

	/* 회원가입 완료 */
	.join.box h3 {font-size: 18px;}
	.join.box p {margin-top: 20px;}

	/* step */
	.process {text-align: left;}
	.process ul li {width: 100%; margin: 5px 0;}
	.process ul li:before {display: inline-block; margin-bottom: 0; vertical-align: middle; margin-right: 5px;}
	.process ul li:after {content: none;}

}

@media (max-width: 360px) {

}