@charset "utf-8";
/************************************************************************
 * filename : login.css
 * description : MY JUNO > 로그인, 아이디/비밀번호찾기
 * date : 2017.08.30
************************************************************************/
/*common*/
.login .sub_menu{display: none}
.header_btm{display: none;}

/*style*/
.section_content {opacity: 1;transform: translateY(0) !important;width:100% !important}
.login #contents{padding-bottom: 300px;}
.login .section1,
.login .section2{text-align: center;}

.login .section_content{border-top:1px solid #333;border-bottom: 1px solid #333;margin-top: 25px;}
.login .section_content .form_wrap{overflow: hidden;width: 490px;margin:30px auto}
.login .section_content .form_wrap .form_left{float: left;}
.login .section_content .form_wrap .form_left p {overflow: hidden}
.login .section_content .form_wrap .form_left p:first-child{margin-bottom: 10px;}
.login .section_content .form_wrap .form_left p strong{float: left;width: 70px;text-align: right;display: block;line-height: 40px;font-size:15px;font-weight: 700;color:#333;margin-right: 9px;}
.login .section_content .form_wrap .form_left p input{width: 270px;height: 40px;box-sizing: border-box;background: #f8f8f8;border:1px solid #e5e5e5;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;padding:0 4px}

.login .section_content .form_wrap .form_right{float: right;}
.login .section_content .form_wrap .form_right a{display: block;color:#fff;text-align: center;background: #ed1c24;font-size:15px;font-weight: 600;;line-height: 90px;width: 130px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}

.login .section_content .form_wrap .form_btm{text-align: center;margin-top: 20px;}
.login .section_content .form_wrap .form_btm ul{overflow: hidden;display: inline-block;}
.login .section_content .form_wrap .form_btm ul li{float: left;}
.login .section_content .form_wrap .form_btm ul li input{width:0;height:0;overflow: hidden;margin:0;padding:0;display: none}
.login .section_content .form_wrap .form_btm ul li label{background-image: url(/static_resources/images/myjuno/member_checkbox_off.png);background-repeat: no-repeat;background-size: 20px 20px;background-position:left center;overflow: hidden;display: inline-block;vertical-align: middle;cursor: pointer;padding-left: 24px;line-height: 20px;font-size:15px;color:#333;}
.login .section_content .form_wrap .form_btm ul li input:checked+label{background-image: url(/static_resources/images/myjuno/member_checkbox_on.png)}
.login .section_content .form_wrap .form_btm ul li.bar{width: 1px;height: 13px;background: #c0c0c0;margin:3.5px 15px 0 15px;}
.login .section_content .form_wrap .form_btm ul li a{font-size:15px;color:#333;line-height: 20px;}

.login .section_content .or{text-align: center; position: relative;margin:40px 0;}
.login .section_content .or::before{
	content: " ";
	width: 200px;
	height: 1px;
	background-color: black;
	display: inline-block;;
	position: absolute;
	left: 50%;
	margin-left: -230px;
	top:10px;
}
.login .section_content .or::after{
	content: " ";
	width: 200px;
	height: 1px;
	background-color: black;
	display: inline-block;;
	position: absolute;
	right:50%;
	margin-right: -230px;
	top:10px;
}
.social_btns{text-align: center; margin-bottom: 25px;}
.facebook_btn{margin-left: -2px;}
#kakao-login-btn{display: block;text-align: center;}
#naver_id_login{text-align: center; margin-top: 10px; display: inline-block;}
#naver_id_login img{width:222px !important;}
.login .section2 .sec2_btm{border-top: 1px solid #e3e3e3;;}

@media (max-width:1150px){
	.login #contents{padding-bottom: 200px;}

}
@media (max-width:1024px){
	.header_btm{display: block;}
}

@media (max-width:768px){
	.login .section_content .form_wrap{width: 360px;overflow: visible;margin:20px auto}
	.login .section_content .form_wrap .form_left{float: none;width:100%;}
	.login .section_content .form_wrap .form_left p:first-child{margin-bottom: 6px;}
	.login .section_content .form_wrap .form_left p strong{display: none}
	.login .section_content .form_wrap .form_left p input{float: none;width: 90%;margin:0 auto;display: block;height: 35px;}
	.login .section_content .form_wrap .form_right{float: none;width:100%;margin-top: 14px;}
	.login .section_content .form_wrap .form_right a{width:90%;margin:0 auto;line-height: 50px;}

	.login .section_content .form_wrap .form_btm ul li label{font-size:12px}
	.login .section_content .form_wrap .form_btm ul li a{font-size:12px}
	.login .section_content .form_wrap .form_btm ul li.bar{height: 10px;margin: 5px 10px ;}
}
@media (max-width:360px){
	.login .section_content .form_wrap{width:100%;overflow: visible;margin:20px auto}
}