@charset "UTF-8";

#wrap.fullpage div.quick-menu{display:none;}

/* background */
div.nonmember-wrap{min-height:100vh; width:100%; background:url("/fro_end/img/nonmember_intro_bg.jpg")center/cover no-repeat; position:relative;}
div.nonmember-wrap:after{content:''; display:block; width:100%; height:100%; background:#000; opacity:.5; position:absolute; top:0; left:0; z-index:1;}
div.nonmember-wrap div.inner{position:absolute; width:90%; height:auto; top:45%; left:50%; transform:translate(-50%, -50%); z-index:3;}

/* header&footer */
div.nonmember-wrap header.header{width:100%; position:absolute; top:0; left:0; padding:1rem 2rem; background:rgba(255,255,255,0.1); z-index:5;}
div.nonmember-wrap header.header div.logo{width:18rem; height:3rem;}
div.nonmember-wrap header.header div.logo a{display:block; width:100%; height:100%;}
div.nonmember-wrap header.header div.logo img{display:block; width:100%; height:100%; object-fit:contain;}
div.nonmember-wrap footer.footer{padding:1rem; position:absolute; bottom:0; width:100%; z-index:5;}
div.nonmember-wrap footer.footer p{font-family:'Pretendard-Light',sans-serif; line-height:1.6; font-size:0.9rem; color:#fff; opacity:.8; text-align:center;}

/* intro */
div.nonmember-wrap.intro div.inner section.title{margin-bottom:6rem;}
div.nonmember-wrap.intro div.inner section.title div.txt-area{color:#fff;}
div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt01{font-size:1.25rem; margin-bottom:0.5rem; opacity:.8;}
div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt02{font-size:2.25rem; font-family:'Pretendard-Bold',sans-serif;}
div.nonmember-wrap.intro div.inner section.intro{}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box{display:flex; align-items:center; justify-content:space-between;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box{border:2px solid #fff; background:rgba(255,255,255,0.1); width:31%; text-align:center; transition:0.4s; -webkit-transition:0.4s; position:relative;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:after{content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; transition:0.4s; -webkit-transition:0.4s; background:url("/fro_end/img/nonmember_intro_box_bg.jpg")center/cover no-repeat;  opacity:0;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a{display:block; width:100%; height:100%; padding:3rem 1rem; z-index:2; position:relative;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico{width:2.5rem; height:2.5rem; margin:0 auto; margin-bottom:1rem; position:relative;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico div{width:100%; height:100%; position:absolute; top:0; left:0; transition:0.4s; -webkit-transition:0.4s;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico div img{width:100%; height:100%; object-fit:contain;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico div.hover{opacity:0;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a p.tit{text-align:center; margin-bottom:3rem; color:#fff; font-size:1.85rem; font-family:'Pretendard-Bold',sans-serif; text-shadow:0 3px 5px rgba(0,0,0,0.2); transition:0.4s; -webkit-transition:0.4s;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a span.btn{display:inline-block; text-align:center; width:70%; padding:1rem; background:#fff; font-size:1.125rem; font-family:'Pretendard-Medium',sans-serif; transition:0.4s; -webkit-transition:0.4s;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover{background:#fff; border-width:4px; border-color:var(--color-main01); transform:translateY(-0.6rem); box-shadow:0 20px 40px rgba(0,0,0,0.3);}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover:after{opacity:.1;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover a div.ico{}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover a div.ico div.def{opacity:0;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover a div.ico div.hover{opacity:1;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover a p.tit{color:var(--color-main04); text-shadow:none;}
div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box:hover a span.btn{background:var(--color-main01); color:#fff;}

/* login */
div.nonmember-wrap.login{}
div.nonmember-wrap.login div.inner{top:53%;}
div.nonmember-wrap.login div.inner div.login-wrap{background:#fff; width:45%; margin:0 0 0 auto; padding:5rem; position:relative; padding-top:10rem;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-tit{background:var(--color-main01); color:#fff; position:absolute; top:-10%; left:-10%; width:100%; padding:3rem; overflow:hidden;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-tit:after{content:''; display:block; width:10rem; height:10rem; background:url("/fro_end/img/symbol.png")center/contain no-repeat; position:absolute; top:-0.5rem; right:0; opacity:.4;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-tit p.eng{font-family:'Pretendard-Light',sans-serif; margin-bottom:0.5rem; opacity:.6; letter-spacing:1px;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-tit p.kor{font-size:2rem; font-family:'Pretendard-Bold',sans-serif;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con{}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set{display:flex; align-items:center; margin:1rem 0;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form{width:85%; display:flex; align-items:center; gap:0.5rem;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set span.label{width:15%; font-family:'Pretendard-Bold',sans-serif; font-size:1.125rem;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-login{width:100%; background:var(--color-main04); color:#fff; text-align:center; padding:1.125rem; font-size:1.25rem; margin-top:1rem; font-family:'Pretendard-Bold',sans-serif; transition:0.3s; -webkit-transition:0.3s; transform:scale(0.95);}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-login:hover{transform:scale(1);}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-back{width:fit-content; margin:0 0 0 auto; margin-top:3rem; display:block; position:relative; padding-left:1.25rem; font-family:'Pretendard-Medium',sans-serif; transition:0.3s; -webkit-transition:0.3s;}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-back:before{content:''; display:block; width:1em; height:1em; background:url("/fro_end/img/ic_arrow02.svg")center/80% auto no-repeat; position:absolute; top:2px; left:0; transform:rotate(-180deg);}
div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-back:hover{padding-left:1.5rem;  font-family:'Pretendard-Bold',sans-serif;}


@media screen and (max-width:1600px){}
@media screen and (max-width:1440px){
	
	/* login */
	div.nonmember-wrap.login div.inner div.login-wrap{width:60%;}	

}
@media screen and (max-width:1280px){}
@media screen and (max-width:1024px){
	
	/* intro */
	div.nonmember-wrap.intro div.inner{top:50%;}
	div.nonmember-wrap.intro div.inner section.title{margin-bottom:2rem;}
	div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt01{font-size:1rem;}
	div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt02{font-size:2rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box{flex-wrap:wrap; gap:2rem 0;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box{width:48%;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a{padding:2rem 1rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico{width:2rem; height:2rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a p.tit{font-size:1.6rem; margin-bottom:2.5rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a span.btn{font-size:1rem; padding:0.8rem;}

	/* login */
	div.nonmember-wrap.login div.inner div.login-wrap{width:80%; padding:4rem; padding-top:9rem;}

}
@media screen and (max-width:800px){}
@media screen and (max-width:640px){
	
	/* header&footer */
	div.nonmember-wrap header.header{padding:0.65rem 1rem;}
	div.nonmember-wrap header.header div.logo{width:15rem;}
	div.nonmember-wrap footer.footer p{font-size:12px; word-break:keep-all;}
	
	/* login */
	div.nonmember-wrap.login div.inner div.login-wrap{width:100%; padding:3rem; padding-top:7rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-tit{width:90%; left:-2.5%; padding:2.5rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-tit:after{width:9rem; height:9rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-tit p.eng{font-size:0.9rem; margin-bottom:0.25rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-tit p.kor{font-size:1.8rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-login{transform:scale(1);}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set{display:block;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set span.label{width:100%; font-size:1rem; margin-bottom:0.5rem; display:block;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form{width:100%;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-back{margin-top:2.5rem;}

}
@media screen and (max-width:480px){
	
	/* header */
	#wrap.fullpage header.header div.header-inner div.logo a{background-image:url("/fro_end/img/logo.png");}

	/* intro */
	div.nonmember-wrap.intro div.inner{top:45%;}
	div.nonmember-wrap.intro div.inner section.title div.txt-area{text-align:center;}
	div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt01{margin-bottom:0.25rem;}
	div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt02{font-size:1.65rem; word-break:keep-all;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico{width:1.8rem; height:1.8rem; margin-bottom:0.8rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a p.tit{font-size:1.5rem;}

	/* login */
	div.nonmember-wrap.login div.inner{top:45%;}
	div.nonmember-wrap.login div.inner div.login-wrap{padding:2rem; padding-top:6rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-tit{padding:2rem;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form{flex-wrap:wrap;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form input.email-item01{width:90%;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form span.bar{width:5%;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form input.email-item02{width:55%;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con div.input-set div.form select.email-item03{width:40%;}
	div.nonmember-wrap.login div.inner div.login-wrap div.login-con a.btn-login{font-size:1.125rem; margin-top:0;}

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

	/* header&footer */
	div.nonmember-wrap footer.footer p{font-size:10px;}

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

	/* intro */
	div.nonmember-wrap.intro div.inner section.title div.txt-area p.txt02{font-size:1.5rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box{gap:1.5rem 0;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a{padding:1.5rem 0.5rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a div.ico{width:1.6rem; height:1.6rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a p.tit{font-size:1.35rem; margin-bottom:2rem;}
	div.nonmember-wrap.intro div.inner section.intro ul.intro-box li.box a span.btn{padding:0.6rem;}
}