/* input style 시작 */
.login_container{display: flex; justify-content: center; align-items: center; position: fixed; top:0; left:0; bottom:0; right:0; margin:auto; background: #fff;}

.input_box input:focus ~ label,
.input_box input:valid ~ label {
	font-size: 11px;
	color: #575757;
	bottom: 15px;
	-webkit-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
	transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
	font-weight: 400;
}
.login_wrap .right form{ width: 65%; margin: 0 auto;}
.input_box {
	position: relative;
	border: 1px solid #ddd;
	border-radius: 40px;padding: 7px 20px;
	
}
.input_box:hover {border: 1px solid #333}
.input_box input {
	border-radius: 0;
	width: 100%;
	font-size: 13px;;
	border: 0;
	outline: none
}
.login_wrap h4{ font-size: 16px; line-height: 1.3em; text-align: left;  margin-top: 25px; margin-bottom: 10px;}
.input_box.er {border: 1px solid #d5691d;}
.input_box.er input:focus ~ label,
.input_box.er input:valid ~ label, 
.input_box.er label {color: #d5691d}

.input_box_no input:focus ~ label,
.input_box_no input.valid ~ label {
	font-size: 11px;
	color: #575757;
	bottom: 15px;
	-webkit-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
	transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
	font-weight: 400;
}
.input_box_no {
	margin: 15px 0 0;
	position: relative;
	border: 1px solid #ddd;
	border-radius: 8px;padding: 20px 20px 5px;
}
.input_box_no:hover {border: 1px solid #333}
.input_box_no label {
	color: #555;
	padding: 10px 20px;
	position: absolute;
	bottom:0px;
	left: 0;
	-webkit-transition: all 0.15s cubic-bezier(0.2, 0, 0.03, 1);
	transition: all 0.15s cubic-bezier(0.2, 0, 0.03, 1);
	pointer-events: none;
	font-weight: 400;font-size: 16px;
}
.input_box_no input {
	padding: 10px 0 0;
	border-radius: 0;
	width: 100%;
	font-size: 1em;
	border: 0;
	outline: none
}
.input_box_no span {font-size: 13px;color: #575757;}
.input_box_no textarea {height: 100px;width: 100%;border: 0;outline: none}
.input_box_no textarea.noti {height: 300px;width: 100%;border: 0;outline: none}
.join_info_text {font-size: 12px;padding-left: 10px}
.read_box {
	margin: 15px 0 0;background: #fafafa;
	position: relative;
	border: 1px solid #ddd;
	border-radius: 8px;padding: 10px 20px;
}
.read_box label {
	font-size: 11px;
	color: #575757;
	font-weight: 400;
	display: block;
	line-height: 2em;
}
.read_box ul li label {display: inline-block;margin-left: 5px;font-size: 14px}



.select_box div {line-height: 1.5em}

.select_box {
	margin: 15px 0 0;background: #fff;
	position: relative;
	border: 1px solid #ddd;
	border-radius: 8px;padding: 10px 20px;
}
.select_box label {
	font-size: 11px;
	color: #575757;
	font-weight: 400;
	display: block;
	line-height: 1em;
}
.select_box select {
	width: 100%;
	padding: 0; /* 여백으로 높이 설정 */ 
	background: url('/images/common/down-arrow.png') no-repeat 100% 10%;background-size: 10px; /* 네이티브 화살표 대체 */ 
	border-radius: 0;
	border: 0; /* iOS 둥근모서리 제거 */ 
	-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
	-moz-appearance: none; 
	appearance: none;
	font-size: 14px;
	outline: none;
	margin: 0px auto !important;
}
/* input style 종료 */

.login_wrap {
	width: 1200px;background: #fff;border-radius: 12px;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(232,232,232,1);
	-moz-box-shadow: 0px 0px 25px 0px rgba(232,232,232,1);
	box-shadow: 0px 0px 25px 0px rgba(232,232,232,1);
	overflow: hidden;
	display: flex; justify-content: space-between; align-items: center;
	position: relative
}


.login_wrap .left {width: 50%;position: relative; overflow: hidden;}

.login_wrap .right {width: 50%;text-align: center;align-items: center;}
.login_wrap .right .logo {text-align: center;margin-bottom: 10px}
.login_wrap .right .logo img {height: 20px;margin: 0 15px}
.login_wrap .right .logo_title {text-align: center;font-weight: 500;font-size: 18px;line-height: 2em;margin-bottom: 80px}
.login_wrap .right .bottom_logo {position: absolute;right: 40px;bottom: 40px}
.login_wrap .right .bottom_logo img {height: 30px;}

.login_wrap .login_opt {font-size: 12px;font-weight: 600;color: #666;margin-top: 15px; text-align: left;}
.login_wrap .login_opt span {margin-left: 3px;display: inline-block;font-weight:600; color: #8c8c8c}
.login_wrap .login_btn {text-align: center;margin-top: 50px}
.login_wrap .login_btn button {
	width: 170px;height: 50px;font-weight: 500;color: #fff;border: 0;border-radius: 25px;
	background: rgb(0,70,133);
	background: -moz-linear-gradient(0deg, rgba(0,70,133,1) 0%, rgba(1,83,157,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,70,133,1) 0%, rgba(1,83,157,1) 100%);
	background: linear-gradient(0deg, rgba(0,70,133,1) 0%, rgba(1,83,157,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004685",endColorstr="#01539d",GradientType=1);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(200,200,200,1);
	-moz-box-shadow: 0px 0px 15px 0px rgba(200,200,200,1);
	box-shadow: 0px 0px 15px 0px rgba(200,200,200,1);
}
.login_wrap .login_btn button:hover {
	background: rgb(21,108,188);
	background: -moz-linear-gradient(90deg, rgba(21,108,188,1) 0%, rgba(42,130,212,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(21,108,188,1) 0%, rgba(42,130,212,1) 100%);
	background: linear-gradient(90deg, rgba(21,108,188,1) 0%, rgba(42,130,212,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#156cbc",endColorstr="#2a82d4",GradientType=1);
}

.login_wrap .join_text {position: relative;display: table;margin: 30px auto;line-height: 1.4em;font-size: 14px;font-weight: 500}
.login_wrap .join_text:before {content: '';position: absolute;left: 0;bottom: 0;height: 1px;width: 100%;background: #ccc}
.login_wrap .join_text a {color: #333;}
.login_wrap .sns_login {line-height: 50px;padding: 30px 0;border-top:1px solid #ddd;font-size: 13px;font-weight: 600;color: #999}
.login_wrap .sns_login .sns_text {float: left}
.login_wrap .sns_login .sns_icon {float: right}
.login_wrap .sns_login img {height: 50px}

.login_wrap .join_head {text-align: center;padding: 70px 0 30px}
.login_wrap .join_head img {height: 46px}
.login_wrap .join_head .login_text {margin-top: 30px;font-size: 14px;font-weight: 500}
.login_wrap .join_head .login_text a {margin-left: 5px;position: relative;color: #6dbec1}
.login_wrap .join_head .login_text a:before {content: '';position: absolute;left: 0;bottom: 0;height: 1px;width: 100%;background: #6dbec1}


.login_wrap .join_wrap {padding: 0 120px}
.login_wrap .join_wrap .join_head .sns_btn {margin-top: 30px;}
.login_wrap .join_wrap .join_head .sns_btn ul {display: table;margin: 0 auto 20px}
.login_wrap .join_wrap .join_head .sns_btn ul li {display: table-cell;padding: 0 5px}
.login_wrap .join_wrap .join_head .sns_btn ul li button {border: 1px solid #ddd;background: #fff;border-radius: 5px;width: 200px;height: 45px;font-size: 14px}
.login_wrap .join_wrap .join_head .sns_btn ul li button img {height: 22px;margin-right: 5px}
.login_wrap .join_wrap .join_body {border-top:1px solid #ddd;padding: 30px 0 20px}
.login_wrap .join_wrap .join_body .join_checklist {margin-top: 30px}
.login_wrap .join_wrap .join_body .join_checklist ul li label {font-weight: 400;font-size: 14px;cursor: pointer}
.login_wrap .join_wrap .join_body .join_checklist ul li label span {margin-left: 10px;font-weight: 500;color: #f62929}

.login_wrap .join_wrap .join_footer {padding: 30px 0 80px;border-top: 1px solid #ddd}
.login_wrap .join_wrap .join_footer ul {margin-bottom: 50px}
.login_wrap .join_wrap .join_footer ul li {color: #9d9d9d;font-size: 14px;margin-bottom: 4px}
.login_wrap .join_wrap .join_btn {text-align: center;margin-top: 30px}
.login_wrap .join_wrap .join_btn button {
	width: 340px;height: 50px;font-weight: 500;color: #fff;border: 0;border-radius: 25px;
	background: rgb(42,130,212);
	background: -moz-linear-gradient(90deg, rgba(42,130,212,1) 0%, rgba(48,147,239,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(42,130,212,1) 0%, rgba(48,147,239,1) 100%);
	background: linear-gradient(90deg, rgba(42,130,212,1) 0%, rgba(48,147,239,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a82d4",endColorstr="#3093ef",GradientType=1);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(200,200,200,1);
	-moz-box-shadow: 0px 0px 15px 0px rgba(200,200,200,1);
	box-shadow: 0px 0px 15px 0px rgba(200,200,200,1);
}
.login_wrap .join_wrap .join_btn button:hover {
	background: rgb(21,108,188);
	background: -moz-linear-gradient(90deg, rgba(21,108,188,1) 0%, rgba(42,130,212,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(21,108,188,1) 0%, rgba(42,130,212,1) 100%);
	background: linear-gradient(90deg, rgba(21,108,188,1) 0%, rgba(42,130,212,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#156cbc",endColorstr="#2a82d4",GradientType=1);
}



@media screen and (max-width: 850px){
	.login_wrap {width: 90%;overflow: hidden}
	.login_wrap .left {display: none}
	.login_wrap .left img{ display: block; max-width: 100%; height: auto;}
	.login_wrap .right {width: 100%;float: none;height: inherit;padding: 30px}
	.login_wrap .right form{ width: 100%; margin: 0 auto 80px;}
	.login_wrap .right .logo {text-align: center;margin-bottom: 10px;margin-top:20px}
	.login_wrap .right .logo img {height: 14px;margin: 0 10px}
	.login_wrap .right .logo_title {text-align: center;font-weight: 500;font-size: 16px;line-height: 2em;margin-bottom: 40px}
	.login_wrap .right .bottom_logo {position: absolute;right: 30px;bottom: 30px}
	.login_wrap .right .bottom_logo img {height: 20px;}
	
}