@charset "utf-8";
/* 로그인 */
.login > form{display:flex; align-items: stretch; padding:40px 0; border:1px solid #000; border-width: 1px 0;}
.login > form > div{width:33.3333%; padding:0 60px; text-align: center;}
.login > form > div + div{border-left:1px solid #ddd;}
.login button{border:1px solid #ddd; background:none; width:100%; height:50px; line-height:50px; text-align: center; border-radius:5px;}

.login h2{font-family: var(--tit_font); font-weight:700; font-size:28px; margin-bottom:40px; color:#222;}

.login_left .line_btn{border-color:var(--main_color); color:var(--main_color);}
.login_left p.bg_line_c{position:relative; margin:30px auto;}
.login_left p.bg_line_c:before{content:''; width:100%; height:1px; display:block; background:#eee; position:absolute; top:0; bottom:0; left:0; margin:auto; z-index: -1;}
.login_left p.bg_line_c span{display:block; width:fit-content; background:#fff; padding:0 20px; margin:0 auto; color:#999;}
.login_left button.etc{ display:flex; justify-content: center; align-items: center; background:transparent; height:auto; gap:10px;}
.login_left button.etc + button.etc{margin-top:20px;}
.login_left button.etc img{flex-grow: 0; width:25px; height:25px; border-radius:5px; display:block;}
.login_left button.etc span{display:block; text-align: left;}

.login_center .lg_form_group{text-align:left;}
.login_center .lg_form_group + .lg_form_group{margin-top:20px;}
.login_center .lg_form_group label{display:block; font-size:15px; line-height:100%; margin-bottom:10px; font-weight:500; color:#222;}
.login_center .lg_form_group input{display:block; height:50px; line-height:50px; width:100%; margin:0;}
.login_center .btn_confirm{margin-top:20px; background:var(--main_color); color:#fff; font-size:18px;}
.login_center .btn_confirm + button{margin-top:10px;}

.login_right button + button{margin-top:10px;}

/* 회원가입 - 약관 */
.all_check_btn{display:flex; justify-content: center; position:relative; margin-bottom:60px;}
.all_check_btn input[type="checkbox"]{width:100%; height:100%; appearance: none; position:absolute; top:0; left:0;}
.all_check_btn input[type="checkbox"] + label{display:flex; justify-content: center; width:100%; height:100%; padding:20px; border-radius:10px; background:#f9f9f9; font-size:18px; border:1px solid #ddd;}
.all_check_btn input[type="checkbox"] + label span{position:relative; padding-left:25px; line-height:100%; color:#666;}
.all_check_btn input[type="checkbox"] + label span:before{content:"\f2bd";  font-size:1.25em; position:absolute; top:0; left:0; display:block; font-family:boxicons !important; color:#999;}

.all_check_btn input[type="checkbox"]:checked + label{background:#000;}
.all_check_btn input[type="checkbox"]:checked + label span{color:#fff; font-weight:600;}
.all_check_btn input[type="checkbox"]:checked + label span:before{color:#fff; font-weight:normal;}

.policy + .policy{padding-top:60px;}
.policy h3{margin-bottom:20px; font-size:24px; font-family: var(--tit_font); font-weight:700; color:#222;}
.policy .scroll_y_box{border:1px solid #ddd; border-radius:10px 10px 0 0; height:250px; padding:30px; color:#666; overflow-y:auto;}

.policy .check_item{margin-top:30px; position:relative;}
.policy .check_item input[type="checkbox"]{width:100%; height:100%; appearance: none; position:absolute; top: 0; left:0;}
.policy .check_item input[type="checkbox"]:before{display:none;}
.policy .check_item input[type="checkbox"] + label{width:100%; height:100%; padding:20px; background:#f9f9f9; font-size:18px; border:1px solid #ddd; border-width:1px 0;}
.policy .check_item input[type="checkbox"] + label span{position:relative; padding-left:30px; line-height:100%; color:#666;}
.policy .check_item input[type="checkbox"] + label span:before{content:"\f2bd";  font-size:1.25em; position:absolute; top:0.1em; left:0; display:block; font-family:boxicons !important; color:#999;}

.policy .check_item input[type="checkbox"]:checked + label{}
.policy .check_item input[type="checkbox"]:checked + label span{color:#222;}
.policy .check_item input[type="checkbox"]:checked + label span:before{color:var(--main_color);}

/* 회원가입 팝업 커스텀 */
.mem_type_select{text-align:center; font-family: var(--tit_font); padding:30px 0;}
.mem_type_select > strong{font-size:20px; font-weight: 600; display:block; margin-bottom:30px;}
.mem_type_select > ul{display:flex; justify-content: center; gap: 40px; align-items:center;}
.mem_type_select > ul > li{width:280px;}
.mem_type_select > ul > li > a{display:block; border:1px solid #ddd; border-radius:10px; background:#fff; text-align:center; padding:20px 0; transition:all 0.4s;}
.mem_type_select > ul > li > a:before{content:''; display:block; width:38px; height:38px; margin:0 auto 10px; background-size: 80%; background-position: center; background-repeat: no-repeat; transition:all 0.4s;}
.mem_type_select > ul > li:nth-child(1) > a:before{background-image: url('/images/page/member/mem_ind.png'); }
.mem_type_select > ul > li:nth-child(2) > a:before{background-image: url('/images/page/member/mem_corp.png'); }
.mem_type_select > ul > li > a > span{font-weight: 500; transition: all 0.4s;}

.mem_type_select > ul > li > a:hover{border:none; position:relative;}
.mem_type_select > ul > li > a:hover:after{content: ''; display:block; width:100%; height:100%; border-radius:10px; border:3px solid var(--main_color); position:absolute; top:0; left:0;}
.mem_type_select > ul > li > a:hover:before{background-size: 100%;}
.mem_type_select > ul > li:nth-child(1) > a:hover:before{background-image: url('/images/page/member/mem_ind_on.png'); }
.mem_type_select > ul > li:nth-child(2) > a:hover:before{background-image: url('/images/page/member/mem_corp_on.png'); }
.mem_type_select > ul > li > a:hover span{color:var(--main_color);}

/* 회원가입 폼 커스텀 */
.hidden_policy{margin-top:60px;}
.corp_search{border:1px solid #ddd; border-width: 1px 0; padding:30px 0;}
.corp_search .mail{max-width: 100%; justify-content: center;}


.corp_search p{width:fit-content; margin:10px auto 0;}

/* 회원가입 완료 */
.join_box .join_txt {text-align: center; padding: 40px 40px; border: 1px solid #ddd;}
.join_box .join_txt .check {position: relative; display: block; width: 72px; height: 72px; background-color: #111; margin: 0 auto 20px; border-radius: 50%;}
.join_box .join_txt .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 .join_txt > h3 {font-size: 24px;}
.join_box .join_txt > p {margin-top: 40px;}
.join_box .join_txt .info {background-color: #f8f8f8; padding: 10px 20px; color: #666; margin-top: 20px;}
.join_box .join_txt .info > p {word-break: keep-all;}

/* 아이디 & 비밀번호 찾기 */
.login.find > form{justify-content: center;}
.login.find .login_center{border:1px solid #ddd; border-radius:15px; padding:60px;}
.login.find p.comment{word-break: keep-all; margin-top:10px; color:#666;}
.find_opt{margin-top:10px; display:flex; justify-content: center; align-items: center;}
.find_opt a{width:50%; text-align:center; color:#666; font-size:14px; padding:5px 10px; display:block;}
.find_opt a + a{position:relative;}
.find_opt a + a:before{content:'|'; font-size:10px; color:#ddd; position:absolute; top:0; bottom:0; left:0; margin:auto; height:fit-content;}

@media (max-width: 1280px) {

	.login h2{font-size:25px;}
	.login > form > div{padding:0 40px;}

}

@media (max-width: 1024px) {

	.login > form{flex-direction: column; width:100%; max-width:640px; margin:0 auto;}
	.login > form > div{width:100%; padding:0 20px;}
	.login > form > div + div{border-left:none;}

	.login_left{order:2; margin-top:10px;}
	.login_center{order:1;}
	.login_right{order:3; margin-top:50px;}

	.login_left{margin-top:15px; padding-top:15px !important; border-top:1px dashed #ddd;}
	.login_left h2{display:none;}
	.login_left button.etc + button.etc{margin-top:10px;}

	.login > form > div.login_right{padding:30px; background:#e6ecff; border-radius:10px; display:flex; justify-content: center; flex-wrap: wrap; gap:10px;}
	.login_right h2{font-size:18px; text-align: left; margin-bottom:10px; width:100%;}
	.login_right button{width:calc((100% - 10px)/2); background:#fff;}
	.login_right button + button{margin-top:0;}

}

@media (max-width: 576px) {

	/* 아이디 & 비밀번호 찾기 */
	.login.find .login_center{padding:30px;}

	/* 회원가입 팝업 커스텀 */
	.mem_type_select > strong{font-size:18px; word-break: keep-all;}
	.mem_type_select > ul{gap:10px;}
}

@media (max-width: 425px) {

	.certify_wrap .ctf_box{flex-wrap: wrap;}
	.certify_wrap .ctf_box input{width:100% !important;}
	.certify_wrap .ctf_box button{width:calc(50% - 6px); margin:3px;}
	.certify_wrap .ctf_box button + button{}

}