@charset "utf-8";

body {background:#f1f4fb}

/****************************************************************************************************************************************
 login 시작
*****************************************************************************************************************************************/
/* logo-header */
.log-hd {position: relative; margin:0 auto; padding:0; width: 100%;}
.log-hd-inner {position: relative; display: flex; align-items: center; margin:0 auto; padding:0 15px; width:1200px; height:80px}
.login-logo > img {width:132px;}
ul.logo-nav {position: relative; margin: 0 0 0 50px; padding:0; display: flex; width:calc(100% - 96px)}
ul.logo-nav > li {margin:0 10px; color:#091225;}
ul.logo-nav > li > a {display: block; color: #091225;}
ul.logo-nav > li > a:hover {text-decoration: underline;}


#login_wraper {position: relative; margin:100px 0; padding:32px 0; width:100%; display: grid;}

/* 로그인박스 */
.login_box {position:relative; margin:0 auto; padding:40px 40px; width:420px; background: #fff; border-radius: 8px; box-shadow: 0px 1.3px 1.3px rgba(0,0,0,0.2),0px 4.5px 4.5px rgba(0,0,0,0.03),0px 20px 20px rgba(0,0,0,0.05);}
.login_form {position:relative; display: flex; flex-direction: column; flex-wrap: wrap;}

.login_form > h3 {margin:0 auto 30px auto; padding:0; width:100%; text-align: left; font-size: 30px; font-weight: 600; color:#091225}

ul.login-input {position: relative; display: flex; flex-direction: column;}
ul.login-input > li {position: relative; margin:10px auto; padding:0; width:100%;}
ul.login-input > li > label {display: block; margin:0 auto 10px auto; padding:0; text-align: left; font-size: 14px; color:#091225}
ul.login-input > li > input {display:block; position: relative; padding:0 10px; width:100%; line-height:50px; font-size:16px; color:#091225; background:transparent; border:1px #dbe3f4 solid; border-radius: 3px;}
ul.login-input > li > input:focus {border:1px #00a0ff solid;}
ul.login-input > li > input::placeholder {color:#a6b9de; font-weight: 400;} 

.loginform-btns {position: relative;}
.loginform-btns > button {position: relative; margin: 10px auto; padding: 0; width:100%; line-height:50px; font-size:16px; color:#fff; border-radius: 3px; border: none;}
.loginform-btns > button.btn_login {background:#00a0ff;}
.loginform-btns > button.btn_join {background:#c700ff;}
.loginform-btns > button.btn_login:hover {background:#018ddf;}
.loginform-btns > button.btn_join:hover {background:#aa03d9;}

.log-bt-img {position: relative; margin:0 auto 50px auto; padding-top:32px;}
.log-bt-img > img {width:183px;}

.log-ft {position: relative;  margin:0 auto 30px auto; padding:0;}
.log-ft > p {margin-top: 24px; color:#091225}

/****************************************************************************************************************************************
 로그인 미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1230px) {	
	.log-hd-inner {width:100%}
} 

@media (max-width:630px) {
	#login_wraper {margin: 50px auto; padding:0 15px}
	.login_box {width:100%}	
} /* 미디어쿼리문 끝 */


@media (max-width:500px) {	
	.log-hd-inner {flex-direction: column; justify-content: unset; height: auto; margin-top:40px;}
	.login-logo {margin:0 auto; width:100%; text-align: center;}
	ul.logo-nav {margin:20px auto; width:100%; justify-content: center;}
	#login_wraper {margin:30px auto}
} /* 미디어쿼리문 끝 */

/****************************************************************************************************************************************
 Join 시작
*****************************************************************************************************************************************/
#join_wraper {position: relative; margin: 0 auto; padding:32px 0; width:100%; display: grid; text-align: center; overflow: hidden;}
.join_box {position:relative; margin:0 auto; padding:40px 40px; width: 600px; text-align: center; background: #fff; border-radius: 8px; box-shadow: 0px 1.3px 1.3px rgba(0,0,0,0.2),0px 4.5px 4.5px rgba(0,0,0,0.03),0px 20px 20px rgba(0,0,0,0.05);}
.join_form {position:relative;}
.join_form  > h3 {margin:0 auto 30px auto; padding:0; width:100%; text-align: left; font-size: 30px; font-weight: 600; color:#091225}


/* join-list */
ul.join-list {position:relative;}
ul.join-list > li {position: relative; margin: 10px 0;}
ul.join-list > li > label {display: block; margin:0 auto 10px auto; padding:0; text-align: left; font-size: 14px; color:#091225}
ul.join-list > li > input {display:block; position: relative; padding:0 10px; width:100%; line-height:40px; font-size:15px; color:#091225; background:transparent; border:1px #dbe3f4 solid; border-radius: 3px;}
ul.join-list > li > input:focus {border:1px #00a0ff solid;}
ul.join-list > li > input::placeholder {color:#a6b9de} 
ul.join-list > li > .btn_check {display:block; margin:10px auto; width:100%; line-height:40px; color:#fff; background: #3f51b5; border: none;}
ul.join-list > li > .btn_check:hover {background:#2f3e8d}
ul.join-list > li > select {display:block; position: relative; padding:0 10px; width:100%; height:40px; line-height:40px; font-size:15px; color:#091225; background:transparent; border:1px #dbe3f4 solid; border-radius: 3px;}

/* join_btns */
.join_btns {position: relative; display: flex; justify-content: space-between;}
.join_btns > button {position: relative; margin: 10px auto; padding: 0; width:calc(100% / 2); height:50px; line-height:50px; font-size:14px; color:#fff; border-radius: 3px; border: none;}
.join_btns > button.join_signUp {background:#00a0ff;}
.join_btns > button.btn_cancel {margin-left:10px; background:#c700ff;}
.join_btns > button.join_signUp:hover {background:#018ddf;}
.join_btns > button.btn_cancel:hover {background:#aa03d9;}


/****************************************************************************************************************************************
 회원가입 미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:630px) {
	#join_wraper {margin:0 auto; padding:0 15px}
	.join_box {margin:50px auto; width:100%}
} /* 미디어쿼리문 끝 */


@media (max-width:463px) {
	.join_box {margin:0 auto 30px auto; padding:40px 20px;}
	.join_form > h3 {font-size: 24px; letter-spacing: -1px;}
} /* 미디어쿼리문 끝 */