@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(120deg, rgba(0,71,132,1) 20%, rgba(4,191,174,1) 100%); background-size:400% 400%; animation:gradiBg 6s ease infinite; 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_eng/img/sitemap_bg.jpg")center/cover no-repeat; opacity:0.05; 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:25rem;}
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','Pretendard-Regular',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; 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','Pretendard-Medium',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:-5rem; 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; text-align:center;}
div.member div.top div.t-step ul li.on div.num{background:#fff; color:var(--color-main01); font-family:'Montserrat_B','Pretendard-Bold',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:'Pretendard-Bold',sans-serif;}
/* 내용박스 */
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:'Pretendard-Bold',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:'Pretendard-Regular',sans-serif; color:#777;}
div.member div.form p.form-tit-explain{color:#999;}
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.code-box{background:#fff3f3; padding:2rem; border-radius:1rem;}
div.member div.code-box div.tit{font-family:'Pretendard-Bold',sans-serif; margin-bottom:1rem;}
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:var(--color-main04); color:#fff;}
div.member div.code-box div.con div.code-txt{width:80%;}


/****** 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','Pretendard-Bold',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%;}
div.member.login div.form div.input a.btn-login{font-family:'Montserrat_B','Pretendard-Bold',sans-serif; font-size:1.125rem; display:block; width:100%; height:3.5rem; line-height:3.5rem; margin:0.5rem 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;}
div.member.login p.login-inf{background:#fff; background:#f5f5f5; padding:1rem; text-align:center; word-break:keep-all; border-radius:1rem; margin-top:2rem;}
div.member.login p.login-inf:before{content:'!'; display:block; width:18px; height:18px; line-height:18px; text-align:center; font-size:12px; color:#fff; font-family:'Montserrat_B', 'Pretendard-Bold',sans-serif; background:#aaa; border-radius:50%; margin:0 auto; margin-bottom:0.5rem;}




/****** join *******/
div.member.join.step2 div.form section.sect02{position:relative;}
div.member.join.step2 div.form section.sect02 a.form-con-fold{width:2rem; height:2rem; border-radius:5px; border:1px solid #333; background:#fff url("/fro_end_eng/img/ico_next.svg")center/60% auto no-repeat; position:absolute; top:0; right:0; transform:rotate(-90deg); transition:0.3s; -webkit-transition:0.3s:}
div.member.join.step2 div.form section.sect02 a.form-con-fold:hover{background:#333 url("/fro_end_eng/img/ico_next_wh.svg")center/60% auto no-repeat;}
div.member.join.step2 div.form section.sect02 a.form-con-fold.off{transform:rotate(90deg);}
/* 로그인 성공 */
div.member.join div.success{}
div.member.join div.success div.complete{}
div.member.join div.success div.complete div.checkmark{}
div.member.join div.success div.complete div.checkmark div.icon{width:3rem; height:3rem; background:url("/fro_end/img/ico_complete.svg")center/contain no-repeat; margin:0 auto; margin-bottom:1rem;}
div.member.join div.success div.complete div.join_ok{text-align:center;}
div.member.join div.success div.complete div.join_ok div.txt01{font-family:'Pretendard-Bold',sans-serif; font-size:1.5rem; margin-bottom:1rem;}
div.member.join div.success div.complete div.join_ok div.txt02{background:#f5f5f5; border-radius:1rem; padding:2rem; font-size:1.125rem; line-height:1.6;}


/******* modify *******/
div.member.modify div.form div.form-item.chg-pw div.con div.row{justify-content:space-between; flex-wrap:wrap;}
div.member.modify div.form div.form-item.chg-pw div.con div.row p.txt{font-family:'Pretendard-Medium',sans-serif; font-size:0.9rem; position:relative; padding-left:1.4rem; color:#777;}
div.member.modify div.form div.form-item.chg-pw div.con div.row p.txt:before{content:''; display:block; width:1rem; height:1rem; background:url("/fro_end_eng/img/ico_clock.svg")center/100% auto no-repeat; position:absolute; top:1px; left:0; opacity:.6;}

/******* find *******/
div.member.find div.form{padding:0; background:transparent; box-shadow:0 30px 50px rgba(0, 0, 0, 0.3); overflow:hidden;}
div.member.find div.form div.find-tab{}
div.member.find div.form div.find-tab ul{display:flex; background:rgba(255,255,255,0.2); backdrop-filter:blur(2px);}
div.member.find div.form div.find-tab ul li{width:50%; text-align:center; font-size:1.25rem; color:#fff;}
div.member.find div.form div.find-tab ul li a{padding:1.5rem 0; width:100%;}
div.member.find div.form div.find-tab ul li a span{position:relative;}
div.member.find div.form div.find-tab ul li a span:after{content:''; display:block; width:0; height:3px; background:rgba(255,255,255,0.8); position:absolute; bottom:-5px; left:0; transition:0.3s; -webkit-transition:0.3s;}
div.member.find div.form div.find-tab ul li.on{background:#fff; color:var(--color-main01); font-family:'Pretendard-Bold',sans-serif; border-radius:1.5rem 1.5rem 0 0;}
div.member.find div.form div.find-tab ul li.on a{cursor:default;}
div.member.find div.form div.find-tab ul li.on a span:after{width:100%; background:var(--color-main01);}
@media(hover:hover){
	div.member.find div.form div.find-tab ul li:hover{font-family:'Pretendard-Bold',sans-serif;}
	div.member.find div.form div.find-tab ul li:hover a span:after{width:100%;}
}

div.member.find div.form div.find-wrap{padding:3rem; background:#fff;}
div.member.find div.form div.find-wrap div.auth-list{margin:4rem 0;}
div.member.find div.form div.find-wrap div.auth-list ul{display:flex; gap:2rem; justify-content:center; flex-wrap:wrap;}
div.member.find div.form div.find-wrap div.auth-list ul li.auth{border:2px solid #333; border-radius:1rem; text-align:center; width:40%; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; transition:0.4s; -webkit-transition:0.4s;}
div.member.find div.form div.find-wrap div.auth-list ul li.auth a{padding:2rem; width:100%; height:100%;}
div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.tit{font-family:'Pretendard-Bold',sans-serif; font-size:1.5rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid #ddd;}
div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.con{word-break:keep-all; opacity:.6; font-size:0.95rem; line-height:1.4;}
@media(hover:hover){
	div.member.find div.form div.find-wrap div.auth-list ul li.auth:hover{border-color:var(--color-main01); background:var(--color-main01); color:#fff; transform:scale(1.065) translateY(-5px); box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
}

div.member.find.id.step2 div.form div.find-wrap div.form-item div.con{width:100%;}
div.member.find.id.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.id.step2 div.form div.find-wrap div.form-item div.con ul.find-list li{width:48%; padding-right:1rem; border:1px solid #ddd; padding:1rem; padding-left:1.5rem; border-radius:0.5rem; transition:0.3s; -webkit-transition:0.3s;}
div.member.find.id.step2 div.form div.find-wrap div.form-item div.con ul.find-list li label.c-input{width:100%; height:100%; font-size:1.125rem; padding-left:2.5rem; line-height:initial;}
div.member.find.id.step2 div.form div.find-wrap div.form-item div.con ul.find-list li p.user-inf{font-size:0.9rem; color:#999; margin-top:0.25rem;}
@media(hover:hover){
	div.member.find.id.step2 div.form div.find-wrap div.form-item div.con ul.find-list li:hover{background:#f7f7f7;}
}

div.member.find.pw.step2 div.form div.find-wrap div.code-box{margin-top:1rem;}


@media screen and (max-width:1600px){}
@media screen and (max-width:1440px){
	/* layout */
	div.member div.top div.t-head div.logo{width:22rem;}
}
@media screen and (max-width:1280px){

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

	/* layout */
	div.member div.form{width:90%;}

	/* find */
	div.member.find div.form div.find-wrap{padding:2.5rem;}
	div.member.find div.form div.find-wrap div.auth-list{margin:3rem 0;}
}
@media screen and (max-width:800px){

	/* find */
	div.member.find div.form div.find-wrap{padding:2rem;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth{width:45%;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a{padding:1.5rem;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row{flex-wrap:wrap; gap:0.5rem;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row input[type="text"]{width:30%;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row a.form-btn{margin-left:0;}

}
@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%;}

	/* find */
	div.member.find div.form div.find-tab ul li{font-size:1.125rem;}
	div.member.find div.form div.find-tab ul li a{padding:1.25rem 0;}
	div.member.find div.form div.find-wrap div.auth-list ul{gap:1.25rem;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth{width:47%;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a{padding:1.25rem;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.tit{font-size:1.25rem;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.con{font-size:0.9rem; line-height:1.2;}
	div.member.find.id.step2 div.form div.find-wrap div.form-item div.con ul.find-list{padding:0; gap:0.65rem;}
	div.member.find.id.step2 div.form div.find-wrap div.form-item div.con ul.find-list li{width:100%;}
}
@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.code-box{padding:1.5rem;}
	div.member div.code-box div.con div.code-num{width:25%;}
	div.member div.code-box div.con div.code-txt{width:73%;}

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

	/* find */
	div.member.find div.form div.find-wrap div.auth-list{margin:1.5rem 0;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.tit{margin-bottom:0.8rem; padding-bottom:0.8rem; font-size:1.15rem;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.con{word-break:initial;}
	div.member.find div.form div.find-wrap div.auth-list ul li.auth a div.con > br{display:none;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row input[type="text"].email01{width:90%; margin:0;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row input[type="text"].email02{width:45%; margin:0;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row select.email03{width:40%;}
	div.member.find div.form div.find-wrap div.form-item.email div.con div.row a.form-btn{width:100%; text-align:center;}

}
@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.top div.t-head div.logo{width:18rem;}
	div.member div.form{width:95%; padding:2rem;}
	div.member div.form h3.form-tit span.right-inf{font-size:0.8rem;}

	/* find*/
	div.member.find div.form div.find-wrap{padding:1.5rem;}
}
@media screen and (max-width:320px){

	/* find */
	div.member.find div.form div.find-wrap div.auth-list ul li.auth{width:100%;}
}