@charset "UTF-8";

:root{
	--height-memtop: 23rem;
}

/******* layout *******/
div.member{position:relative; width:100%; min-height:100vh; background:#fff; overflow:hidden;}
div.member span.esse{color:red; font-weight:700; margin:2px; vertical-align:top; font-size:0.9rem;}
div.member div.top{padding:2rem 3rem; position:fixed; width:100%; height:var(--height-memtop); overflow:hidden; background:linear-gradient(180deg, rgba(14,75,140,1) 0%, rgba(0,101,179,1) 100%); z-index:1;}
div.member div.top:before{position:absolute; top:0; left:0; content:""; display:block; width:100%; height:var(--height-memtop); background:url("/fro_end/img/member_bg.jpg")center/cover no-repeat; opacity:0.1; z-index:-1;}
div.member div.top div.t-head{display:flex; justify-content:space-between; align-items:center;}
div.member div.top div.t-head div.logo{width:var(--width-logo);}
div.member div.top div.t-head div.logo a{}
div.member div.top div.t-head div.logo a img{width:100%; height:100%; object-fit:contain;}
div.member div.top div.t-head div.home{}
div.member div.top div.t-head div.home a{color:#fff; font-family:'Montserrat_R','NanumNeo_R',sans-serif; border-bottom:1px solid #fff; opacity:.6;}
div.member div.top div.t-head div.home a:hover{opacity:1;}
div.member div.top div.t-step{margin-top:1rem;}
div.member div.top div.t-step ul{display:flex; align-items:center; justify-content:center; color:#fff; gap:3rem;}
div.member div.top div.t-step ul li{display:flex; flex-direction:column; align-items:center; gap:0.5rem;}
div.member div.top div.t-step ul li div.num{position:relative; width:2.5rem; height:2.5rem; line-height:2.5rem; font-size:0.9rem; font-family:'Montserrat_M','NanumNeo_B',sans-serif; text-align:center; background:rgba(255,255,255,0.2); border-radius:50%;}
div.member div.top div.t-step ul li div.num:after{content:''; display:block; width:2rem; height:1px; background:#fff; opacity:.3; position:absolute; top:50%; right:-2.8rem; transform:translateY(-50%);}
div.member div.top div.t-step ul li:last-child div.num:after{display:none;}
div.member div.top div.t-step ul li div.txt{font-size:0.9rem;  opacity:.6;}
div.member div.top div.t-step ul li.on div.num{background:#fff; color:var(--color-main01); font-family:'Montserrat_B','NanumNeo_EB',sans-serif; box-shadow:0 8px 20px rgba(0,0,0,0.3);}
div.member div.top div.t-step ul li.on div.txt{opacity:1;  font-family:'NanumNeo_EB',sans-serif;}
div.member div.top h2.t-title{color:#fff; text-align:center; font-size:2rem; font-family:'NanumNeo_EB',sans-serif; margin-top:3rem;}

div.member div.form{position:relative; width:62rem; height:auto; padding:3rem; margin:0 auto; margin-top:calc(var(--height-memtop) - 10rem); background:#fff; border-radius:2rem; box-shadow:0 0 50px rgba(0, 0, 0, 0.3); z-index:2; margin-bottom:5rem;}
div.member div.form h3.form-tit{display:flex; justify-content:space-between; align-items:flex-end; font-size:1.5rem; font-family:'NanumNeo_EB',sans-serif; margin-bottom:1rem; border-bottom:2px solid #333; padding-bottom:1rem;}
div.member div.form h3.form-tit span.right-inf{font-size:1rem; font-family:'NanumNeo_R',sans-serif; color:#777;}
div.member div.form p.form-tit-explain{color:#555; font-size:0.9rem; line-height:1.6;}
div.member div.form section.sect{margin-bottom:4rem;}
div.member div.copy{position:absolute; bottom:0; left:0; width:100%; padding:1.5rem 0; text-align:center; font-size:0.8rem; color:#ccc;}

/* 회원구분 */
div.member div.mem-type-wrap{display:flex; align-items:flex-start; justify-content:center; gap:2rem; margin-top:2rem; flex-wrap:wrap;}
div.member div.mem-type-wrap a.type{display:block; width:46%; height:100%; background:#fff;border:2px solid #ddd; padding:1.8rem 1.5rem; border-radius:1.5rem; text-align:center; transition:0.3s; -webkit-transition:0.3s;}
div.member div.mem-type-wrap a.type div.ico{width:2rem; height:2rem; margin:0 auto; margin-bottom:0.5rem; opacity:.75;}
div.member div.mem-type-wrap a.type div.ico img{display:block; width:100%; height:100%; object-fit:contain;}
div.member div.mem-type-wrap a.type div.txt{font-size:1.3rem; font-family:'NanumNeo_EB',sans-serif;}
div.member div.mem-type-wrap a.type div.inf{background:#f7f7f7; border-radius:1rem; padding:1.5rem; font-size:0.9rem; margin-top:1rem; line-height:1.6;}
div.member div.mem-type-wrap a.type div.inf ul{}
div.member div.mem-type-wrap a.type div.inf ul li{text-align:left; margin-bottom:1rem; line-height:1.4; padding-left:0.6rem; position:relative;}
div.member div.mem-type-wrap a.type div.inf ul li:last-child{margin-bottom:0;}
div.member div.mem-type-wrap a.type div.inf ul li:before{content:''; display:block; width:4px; height:4px; background:#555; border-radius:50%; position:absolute; top:0.45rem; left:0;}
@media(hover:hover){
	div.member div.mem-type-wrap a.type:hover{border-color:#333; box-shadow:0 15px 25px rgba(0,0,0,0.1);}
}

/* 회원구분 선택박스 */
div.member div.type-chk{display:flex; align-items:center; justify-content:space-between; margin-bottom:0.65rem;}
div.member div.type-chk label.c-input{width:49%; margin:0;}
div.member div.type-chk label.c-input div.ci-show{display:flex; align-items:center; justify-content:center; gap:0.5rem;}
div.member div.type-chk label.c-input div.ci-show span[class^="ico-"]{display:inline-block; width:1.15em; height:1.15em; opacity:.2;}
div.member div.type-chk label.c-input div.ci-show span.ico-student{background:url("/fro_end/img/login_student.svg")center/contain no-repeat;}
div.member div.type-chk label.c-input div.ci-show span.ico-company{background:url("/fro_end/img/login_company.svg")center/contain no-repeat;}
div.member div.type-chk label.c-input input:checked ~ div.ci-show span[class^="ico-"]{opacity:1;}

/* 보안코드 */
div.member div.code-box{background:#fff3f3; padding:1.5rem; border-radius:1rem;}
div.member div.code-box div.tit{font-family:'NanumNeo_EB',sans-serif; margin-bottom:0.5rem;}
div.member div.code-box div.tit > img{width:100%; height:100%; object-fit:contain;}
div.member div.code-box div.con{display:flex; align-items:center; justify-content:space-between;}
div.member div.code-box div.con div.code-num{width:18%; height:3rem; line-height:3rem; border-radius:0.5rem; text-align:center; background:#f13a6a; color:#fff;}
div.member div.code-box div.con div.code-txt{width:80%;}
div.member div.code-box div.con div.code-txt input{width:100%;}


/****** login *******/
div.member.login div.form{width:32rem; padding:2.5rem;}
div.member.login div.form div.tit{width:100%; height:auto; font-family:'Montserrat_B','NanumNeo_EB',sans-serif; margin-bottom:2rem; font-size:2rem; text-align:center; color:var(--color-main01); letter-spacing:1px;}
div.member.login div.form div.input div.account{width:100%; height:auto; border:1px solid #ccc; border-radius:0.65rem; overflow:hidden;}
div.member.login div.form div.input div.account div.input-box{position:relative;}
div.member.login div.form div.input div.account div.input-box input{width:100%; height:3.6rem; line-height:3.6rem; padding:0 0.8rem; padding-top:1rem; border-radius:0; border:0;}
div.member.login div.form div.input div.account div.input-box input.id{border-bottom:1px solid #ccc;}
div.member.login div.form div.input div.account div.input-box span.label{position:absolute; top:50%; left:1rem; transform:translateY(-50%); transition:0.3s; -webkit-transition:0.3s;}
div.member.login div.form div.input div.account div.input-box input:valid + span.label,
div.member.login div.form div.input div.account div.input-box input:focus + span.label,
div.member.login div.form div.input div.account div.input-box input:active + span.label{top:0.5rem; left:0.4rem; transform:scale(0.8); color:#777;}
div.member.login div.form div.input div.id-save{width:100%; margin:0.5rem 0;}
div.member.login div.form div.input div.id-save label.c-input{margin:0;}
div.member.login div.form div.input a.btn-login{font-family:'Montserrat_B','NanumNeo_EB',sans-serif; font-size:1.125rem; display:block; width:100%; height:3.5rem; line-height:3.5rem; margin:1rem 0 3rem 0; border-radius:0.5rem; background:var(--color-main01); color:#fff; text-align:center; letter-spacing:1px;}
div.member.login div.form ul.link{display:flex; align-items:center; width:100%; height:auto; text-align:center; position:relative;}
div.member.login div.form ul.link:after{content:''; display:block; width:1px; height:80%; background:#ccc; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
div.member.login div.form ul.link li{width:50%;}
div.member.login div.form ul.link li a{color:#777;}


/****** join *******/
div.member.join div.form div.join-confirm{text-align:center;}
div.member.join div.form div.join-confirm p.txt01{font-size:1.5rem; font-family:'NanumNeo_EB',sans-serif; word-break:keep-all;}
div.member.join div.form div.join-confirm p.txt01:before{content:''; display:block; width:4rem; height:4rem; background:url("/fro_end/img/join_confirm.svg")center/contain no-repeat; margin:0 auto; margin-bottom:1rem;}
div.member.join div.form div.join-confirm p.txt02{line-height:1.6; padding:1.5rem; border-radius:1rem; background:#f5f5f5; margin-top:1rem; word-break:keep-all;}


/****** find *******/
div.member.find div.form h3.form-tit{align-items:center;}
div.member.find div.form h3.form-tit a.btn-find{font-family:'NanumNeo_B',sans-serif; font-size:1.125rem; position:relative; padding-right:1.5em; opacity:.8;}
div.member.find div.form h3.form-tit a.btn-find:after{content:''; display:block; width:1em; height:1em; background:url("/fro_end/img/ico_arrow.svg")center/contain no-repeat; position:absolute; top:45%; right:5px; transform:translateY(-50%); transition:0.3s; -webkit-transition:0.3s;}
div.member.find.step2 div.form div.find-wrap div.form-item div.con{width:100%;}
div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:0 1rem;}
div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li{width:48%; border:1px solid var(--color-border-input); border-radius:0.8rem; transition:0.3s; -webkit-transition:0.3s; padding-left:1.5rem;}
div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li label.c-input{width:100%; height:100%; margin:0; font-size:1.125rem; padding:1.125rem; padding-left:2.25rem; line-height:initial; font-family:'NanumNeo_B',sans-serif;}
div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li p.user-inf{font-size:0.9rem; color:#777; margin-top:0.25rem; font-family:'NanumNeo_R',sans-serif;}
@media(hover:hover){
	div.member.find div.form h3.form-tit a.btn-find:hover{opacity:1;}
	div.member.find div.form h3.form-tit a.btn-find:hover:after{right:0;}
	div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li:hover{background:#f7f7f7;}
}

/****** privacy *******/
div.member.privacy{}
div.member.privacy div.top{position:absolute;}
div.member.privacy div.form{width:80%;} 
div.member.privacy div.form h3.sub-tit{font-size:2.25rem; font-family:'NanumNeo_B',sans-serif; text-align:center; margin-bottom:2rem;} 
div.member.privacy div.form div.privacy-wrap{} 
div.member.privacy div.form div.privacy-wrap div.main-box{font-family:'NanumNeo_M',sans-serif; background:#f7f7f7; padding:1.5rem 2rem; font-size:1.125rem; line-height:1.5; border-radius:1rem; margin-bottom:1rem; word-break:keep-all;} 
div.member.privacy div.form div.privacy-wrap div.con{margin:2.5rem 0;} 
div.member.privacy div.form div.privacy-wrap div.con:last-child{margin-bottom:0;}
div.member.privacy div.form div.privacy-wrap div.con h3.sec-tit{font-size:1.5rem; margin-bottom:1.5rem;}
div.member.privacy div.form div.privacy-wrap div.con p{font-family:'NanumNeo_M',sans-serif; font-size:1.125rem; margin-bottom:1rem;} 
div.member.privacy div.form div.privacy-wrap div.con ul{} 
div.member.privacy div.form div.privacy-wrap div.con ul > li{position:relative; margin-bottom:0.5rem; padding-left:1rem;} 
div.member.privacy div.form div.privacy-wrap div.con ul > li:last-child{margin-bottom:0;}
div.member.privacy div.form div.privacy-wrap div.con ul > li:before{content:''; display:block; width:4px; height:4px; background:#555; border-radius:50%; position:absolute; top:0.45rem; left:0;}
div.member.privacy div.form div.privacy-wrap div.con div.sub-box{background:#f7f7f7; padding:1.5rem; border-radius:1rem; word-break:keep-all;}
div.member.privacy div.form div.privacy-wrap div.con div.in-con{margin-bottom:1.5rem;}
div.member.privacy div.form div.privacy-wrap div.con div.in-con:last-child{margin-bottom:0;}

@media screen and (max-width:1600px){}

@media screen and (max-width:1440px){}

@media screen and (max-width:1280px){
	/****** privacy *******/
	div.member.privacy div.form{width:90%;}
}

@media screen and (max-width:1024px){
	
	/* layout */
	div.member div.form{width:90%;}

	/* find */
	div.member.find div.form div.find-wrap div.auth-list{margin:3rem 0;}

}

@media screen and (max-width:800px){
	
	/* 회원구분 */
	div.member div.mem-type-wrap{gap:1rem;}
	div.member div.mem-type-wrap a.type{padding:1.25rem; border-radius:1rem; width:48%;}
	div.member div.mem-type-wrap a.type div.ico{width:1.8rem; height:1.8rem;}
	div.member div.mem-type-wrap a.type div.txt{font-size:1.25rem;}
	div.member div.mem-type-wrap a.type div.inf{padding:1rem; font-size:0.85rem; line-height:1.5;}
	div.member div.mem-type-wrap a.type div.inf ul li:before{top:0.35rem;}

	/****** privacy *******/
	div.member.privacy div.form h3.sub-tit{font-size:2rem;}
}

@media screen and (max-width:640px){

	/* layout */
	div.member div.top{padding:1.5rem 2rem;}
	div.member div.form{padding:2.5rem;}
	div.member div.form h3.form-tit{font-size:1.35rem; margin-bottom:0.65rem; padding-bottom:0.65rem;}
	
	/* login */
	div.member.login div.form{width:80%;}

	/* 보안코드 */
	div.member div.code-box div.con div.code-num{width:30%;}
	div.member div.code-box div.con div.code-txt{width:68%;}

	/* find */
	div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list{padding:0;}
	div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li{padding-left:1rem; width:100%;}
	div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li label.c-input{font-size:1rem; padding:1rem; padding-left:2rem;}
	div.member.find.step2 div.form div.find-wrap div.form-item div.con ul.find-list li p.user-inf{font-size:0.85rem;}

	/****** privacy *******/
	div.member.privacy div.form{width:92%; padding:1.5rem;}
	div.member.privacy div.form h3.sub-tit{font-size:1.85rem;}
}

@media screen and (max-width:480px){

	/* layout */
	div.member div.top{padding:1.5rem;}
	div.member div.top div.t-step{margin-top:2rem;}
	div.member div.top div.t-step ul{gap:2rem;}
	div.member div.top div.t-step ul li div.num:after{width:1.5rem; right:-2.2rem;}

	/* login */
	div.member.login div.form{width:90%; padding:2rem;}

	/* 회원구분 */
	div.member div.mem-type-wrap a.type{width:100%;}

	/* term */
	div.term div.term-con{font-size:0.85rem; padding:0;}
	div.term div.term-con p.tit01{font-size:1.2rem; margin:2rem 0;}
	div.term div.term-con p.tit02{font-size:1rem; margin:1rem 0 0.25rem 0;}
	div.term div.term-con p.txt01{line-height:1.4; margin:0.5rem 0 0.25rem 0;}

	/****** privacy *******/
	div.member.privacy div.form div.privacy-wrap div.main-box{padding:1rem; font-size:1rem;}

}

@media screen and (max-width:400px){
	
	:root{
		--height-memtop:21rem;
	}

	/* layout */
	div.member div.top{padding:1rem;}
	div.member div.top div.t-step ul li{gap:0.3rem;}
	div.member div.top div.t-step ul li div.num{width:2.25rem; height:2.25rem; line-height:2.25rem; font-size:0.85rem;}
	div.member div.form{width:95%; padding:2rem;}
	div.member div.form h3.form-tit span.right-inf{font-size:0.8rem;}
}

@media screen and (max-width:320px){}