/* 로그인 */
div.login-wrap{position:relative; width:100%; height:100vh; overflow:hidden;}
div.login-wrap > img[class^="bg"]{position:absolute; z-index:-1;}
div.login-wrap > img.bg01{top:-17rem; left:-28rem;}
div.login-wrap > img.bg02{top:-37rem; right:-31rem;}
div.login-wrap > img.bg03{bottom:-13rem; right:-12rem;}
div.login-wrap div.login-top{position:relative; padding:2rem;}
div.login-wrap div.login-top div.left{float:left;}
div.login-wrap div.login-top div.left a.home{display:block; width:9rem; height:auto;}
div.login-wrap div.login-top div.left a.home img{display:block; width:100%; height:auto;}
div.login-wrap div.login-top div.right{float:right;}
div.login-wrap div.login-top div.right div.lang{display:inline-block; width:6rem; margin-right:2rem;}
div.login-wrap div.login-top div.right div.lang div.sel-wrap{border-radius:5px;}
div.login-wrap div.login-top div.right div.lang div.sel-wrap select:focus{border:none;}
div.login-wrap div.login-top div.right a.homepage{display:inline-block; width:12rem; height:3.5rem; line-height:3.5rem; border-radius:2rem; background:#5a85fc; text-align:center; color:#fff; font-size:1.25rem; box-shadow:0 10px 20px rgba(0, 0, 0, 0.4);}
div.login-wrap div.login-top div.right a.homepage img{display:inline-block; width:1.5rem; height:auto; margin-right:0.8rem; vertical-align:middle; transform:translateY(-2px);}
div.login-wrap div.login-form{position:absolute; top:50%; left:20%; transform:translateY(-50%);}
div.login-wrap div.login-form div.txt{margin-bottom:3rem;}
div.login-wrap div.login-form div.txt div.txt01{font-size:1.375rem; font-family:"Montserrat_L";}
div.login-wrap div.login-form div.txt div.txt01 br{display:none;}
div.login-wrap div.login-form div.txt div.txt02{font-size:3rem; font-family:"Montserrat_B";}
div.login-wrap div.login-form div.input-wrap{width:30rem; height:3.5rem; line-height:3.5rem; padding-left:3rem; border-bottom:1px solid #333;}
div.login-wrap div.login-form div.input-wrap.id{background:url("/new_fro_end/img/login_id.svg") 0 center / 1.75rem auto no-repeat; margin-bottom:1rem;}
div.login-wrap div.login-form div.input-wrap.pw{background:url("/new_fro_end/img/login_pw.svg") 0 center / 1.95rem auto no-repeat;}
div.login-wrap div.login-form div.input-wrap input{position:inherit; top:auto; left:auto; width:100%; height:auto; line-height:normal; border:0; background:transparent; font-size:1.25rem; z-index:1;}
div.login-wrap div.login-form a.login-btn{display:block; width:30rem; height:4rem; line-height:4rem; margin:2.5rem 0 2rem 0; border-radius:1rem; background:#5a85fc; text-align:center; color:#fff; font-size:1.5rem; font-family:"Montserrat_SB";}
div.login-wrap div.login-form ul.mem-btn-list li{display:inline-block; margin-right:1rem;}
div.login-wrap div.login-form ul.mem-btn-list li:last-child{margin-right:0;}
div.login-wrap div.login-form ul.mem-btn-list li a{display:inline-block; width:auto; height:3rem; line-height:3rem; padding:0 1.5rem; border:1px solid #333; border-radius:1.5rem; text-align:center; font-size:1.125rem;}

/* 회원가입 */
div.form div.list.pw div.con div.con01 input{float:left; width:70%}
div.form div.list.pw div.con div.con01 span.pw-secure{float:right; display:inline-block; width:28%; margin:0.5rem 0;}
div.form div.list.pw div.con div.con02{margin-top:0.5rem;}
div.form div.list.pw div.con div.con02 ul.pw-txt li{padding-left:1rem; text-indent:-1rem;}
div.form div.list.birth div.con div.con01 div.sel-wrap{float:left; width:31%; margin-right:3.5%;}
div.form div.list.birth div.con div.con01 div.sel-wrap:last-child{margin-right:0;}
div.form div.list.mail div.con div.con01 input{float:left; width:70%; border-top-right-radius:0; border-bottom-right-radius:0;}
div.form div.list.mail div.con div.con01 a{float:left; display:inline-block; width:30%; height:3rem; line-height:3rem; background:#333; border-top-right-radius:0.5rem; border-bottom-right-radius:0.5rem; text-align:center; color:#fff;}
div.form div.list.mail div.con div.con02{margin-top:0.5rem;}





@media screen and (max-width:1440px){
	div.login-wrap > img.bg01{top:-20rem; left:-33rem;}
	div.login-wrap > img.bg02{display:none;}
	div.login-wrap > img.bg03{bottom:-18rem; right:-15rem;}
	
	div.login-wrap div.login-top{padding:1.5rem;}
	div.login-wrap div.login-top div.left a.home{width:18rem;}
	
	div.login-wrap div.login-form{left:15%;}
}

@media screen and (max-width:1024px){
	div.login-wrap > img.bg01{display:block; top:-8rem; left:-8rem; width:35rem;}
	div.login-wrap > img.bg03{display:block; bottom:-8rem; right:-8rem; width:40rem;}
	
	div.login-wrap div.login-top div.right div.lang{margin-right:1rem;}

	div.login-wrap div.login-form{left:50%; transform:translate(-50%, -50%); width:30rem; text-align:center;}
	div.login-wrap div.login-form div.txt{margin-bottom:2rem;}
	div.login-wrap div.login-form div.txt div.txt01 br{display:block;}
	div.login-wrap div.login-form div.input-wrap,
	div.login-wrap div.login-form a.login-btn{width:100%;}
	div.login-wrap div.login-form ul.mem-btn-list li{margin-right:0.3rem;}
}

@media screen and (max-width:640px){
	div.login-wrap div.login-top{padding:1rem;}
	div.login-wrap div.login-top div.left a.home{width:15rem;}
	div.login-wrap div.login-top div.right a.homepage{width:9rem; height:3rem; line-height:3rem; font-size:1.125rem;}
	div.login-wrap div.login-top div.right a.homepage img{width:1.25rem;}
	
	div.login-wrap div.login-form div.txt{margin-bottom:1.5rem;}
	div.login-wrap div.login-form div.txt div.txt01{font-size:1rem;}
	div.login-wrap div.login-form div.txt div.txt02{font-size:2.5rem;}
	div.login-wrap div.login-form div.input-wrap{height:3rem; line-height:3rem; padding-left:2rem;}
	div.login-wrap div.login-form div.input-wrap.id{background-size:1.25rem auto;}
	div.login-wrap div.login-form div.input-wrap.pw{background-size:1.45rem auto;}
	div.login-wrap div.login-form div.input-wrap input{font-size:1.125rem;}
	div.login-wrap div.login-form a.login-btn{margin:2rem 0;}
	div.login-wrap div.login-form ul.mem-btn-list li a{height:2.5rem; line-height:2.5rem; padding:0 1rem; font-size:1rem;}
}

@media screen and (max-width:480px){
	div.login-wrap > img.bg01{top:-6rem; left:-10rem; width:100%;}
	div.login-wrap > img.bg03{width:100%;}

	div.login-wrap div.login-top div.right div.lang{width:5rem; margin-right:0.3rem;}
	div.login-wrap div.login-top div.right div.lang div.sel-wrap select{padding:0 0.5rem;}

	div.login-wrap div.login-form{width:100%; padding:0 1.5rem;}

	div.form div.list.pw div.con div.con01 input{float:none; width:100%;}
	div.form div.list.pw div.con div.con01 span.pw-secure{float:none; display:block; width:100%;}
	div.form div.list.mail div.con div.con01 input{width:60%;}
	div.form div.list.mail div.con div.con01 a{width:40%}
}

@media screen and (max-width:425px){
	div.login-wrap div.login-top{padding:1rem 0.5rem;}
	div.login-wrap div.login-top div.left a.home{width:12rem;}
	div.login-wrap div.login-top div.right div.lang div.sel-wrap select{height:2.5rem; line-height:2.5rem;}
	div.login-wrap div.login-top div.right a.homepage{width:7rem; height:2.5rem; line-height:2.5rem; font-size:1rem;}
	div.login-wrap div.login-top div.right a.homepage img{width:1.125rem; margin-right:0.5rem;}
}

@media screen and (max-width:360px){
	div.login-wrap div.login-form ul.mem-btn-list li a{padding:0 0.5rem;}
}