@charset "utf-8";

/* login wrap */

.login_wrap{width:100%;height: 100%;padding: 100px 0; display: flex; flex-wrap: wrap; justify-content: center;}
.login_wrap h2 {width: 100%; text-align: center; font-weight: 700; font-size: 3.436rem;margin-bottom: 25px;}
.login_wrap .con{width: 100%; max-width: 500px;}
.login_wrap .con p {text-align: center; font-weight: 400; font-size: 1.125rem; margin-bottom: 70px;}
.login_wrap h4{width:100%;margin-bottom: 30px;text-align: center;font-weight: 500;font-size:2.813rem ;}
.login_wrap .icon_login{display: block;margin: 0 auto;margin-bottom: 30px;}
.login_wrap .text_login{vertical-align: middle;width: 100%; height: 60px;margin-bottom: 20px;padding-left:65px;border: 1px solid #ccc; font-size: 1.125rem;background-position: 25px 50%;background-repeat: no-repeat;}
.login_wrap .text_login:focus{border: 2px solid #333;}
.login_wrap .text_login.id{background-image: url(..//image/icon_login_id.png);}
.login_wrap .text_login.pw{background-image: url(..//image/icon_login_pw.png);}

.login_wrap input::placeholder {color: #b7b7b7;font-size: 1.125rem; margin-top: 10px;}
.login_wrap .btn_basic{display: block;width: 100%;height: 60px;line-height: 60px;font-size: 1.25rem;font-weight: 500; text-align: center; color: #fff;}

/* login bottom area */
.login_wrap .login_bottom{width: 100%; margin: 25px 0;}
.login_wrap .login_bottom .join_box{float: right;}
.login_wrap .login_bottom .join_box a{margin-left: 12px;}
.login_wrap .login_bottom .join_box a::before{content: '';display:inline-block;width:1px;height: 14px;background-color: #e8e8e8;margin-right: 12px;}
.login_wrap .login_bottom .join_box a:first-of-type::before{display: none}


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

	.login_wrap{width:100%;height: 100%;padding: 100px 0 0 0; position: relative;}  
	.login_wrap h2 {width: 100%; text-align: center; font-weight: 700; font-size: 1.75rem;margin-bottom: 20px;}
	.login_wrap .con{width: 100%; max-width: 500px;}
	.login_wrap .con p {text-align: center; font-weight: 400; font-size: 0.875rem; margin-bottom: 40px;}
	.login_wrap .icon_login{width: 80px;}
	.login_wrap .text_login{width: calc(100% - 40px); height: 40px;padding-left:45px;border: 1px solid #e8e8e8; font-size: 0.813rem;background-position: 20px 50%;background-repeat: no-repeat; display: block; margin: 0 auto; margin-bottom: 10px;}
	.login_wrap .text_login.id{background-image: url(..//image/icon_login_id.png);background-size: 16px;}
	.login_wrap .text_login.pw{background-image: url(..//image/icon_login_pw.png); background-size: 16px ;}
	.login_wrap input::placeholder {color: #b7b7b7;font-size: 0.813rem; margin-top: 10px;}
	
	.login_wrap .btn_basic{width: calc(100% - 40px); height: 42px;line-height: 40px;font-size: 1rem;font-weight: 900; display: block; margin: 0 auto; margin-top: -10px;}  
	.login_wrap .login_bottom{width: 100%; margin: 15px 0;padding: 0 20px;}
	.login_wrap .login_bottom .join_box{text-align: center;float:left;width:100%;display: block;margin: 25px 0 10px; font-size: 0.813rem;}
	.login_wrap .login_bottom .join_box a{margin:0 9px;}
	.login_wrap .login_bottom .join_box a::before{content: '';display:inline-block;width:1px;height: 10px;background-color: #e8e8e8;margin-right: 9px;}  
}