@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 .form_wrap{margin:30px auto}
.login .form_top {width:490px;margin:0 auto;}
.login .form_left{float: left;}
.login .form_left p {overflow: hidden}
.login .form_left p:first-child{margin-bottom: 10px;}
.login .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 .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 .form_right{float: right;}
.login .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 .form_btm {text-align: center;margin-top: 20px;}
.login .form_btm ul{overflow: hidden;display: inline-block;}
.login .form_btm li{position:relative;float: left;padding-left:35px;}
.login .form_btm li:after {content:'';display:block;position:absolute;left:20px;top:4px;width: 1px;height: 13px;background: #c0c0c0;}
.login .form_btm li:first-child {padding-left:0;}
.login .form_btm li:first-child:after {display:none}
.login .form_btm li input{width:0;height:0;overflow: hidden;margin:0;padding:0;display: none}
.login .form_btm 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 .form_btm li input:checked+label{background-image: url(/static_resources/images/myjuno/member_checkbox_on.png)}
.login .form_btm li a{font-size:15px;color:#333;line-height: 20px;}
.login .form_btm li.non_memberchk {padding-right:20px;font-weight:700;background:url(/static_resources/images/myjuno/nonmember_arr.png) no-repeat 98% center;}

.login .or{text-align: center; position: relative;margin:40px 0 26px;}
.login .or::before{content: " ";width: 200px;height: 1px;background-color: black;display: inline-block;;position: absolute;left: 50%;margin-left: -230px;top:10px;}
.login .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: 40px; margin-top: 15px;}
/*
.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;;}
.foot_non_memberchk {display:none;}

.nonmember_content .form_wrap {width:800px;}
.nonmember_content .form_wrap:after {content:'';display:block;clear:both}
.nonmember_content .groupboxL {float:left;width:490px;}
.nonmember_content .groupboxR {position:relative;float:left;width:310px;padding-left:61px;box-sizing:border-box;}
.nonmember_content .groupboxR:after {content:'';display:block;width:1px;height:91px;position:absolute;top:0;left:30px;background:#e0e0e0;}
.nonmember_content .groupboxR .btn_order {width:259px;height:89px;line-height:86px;font-size:15px;font-weight:700;text-align:center;border:1px solid #333;border-radius:4px}
.nonmember_content .groupboxR .non_memberchk {margin-top:20px;padding-right:20px;font-weight:700;background:url(/static_resources/images/myjuno/nonmember_arr.png) no-repeat 98% center;}
.login .nonmember_content .form_btm {padding-left:10px;}
.login .nonmember_content .or::before {width:300px;margin-left:-333px;}
.login .nonmember_content .or::after {width:300px;margin-right:-338px;}


.section_tit .bar {display:inline-block;}
.section_tit .tit {display:block;}
.section_tit .tit_logo {display:none;}
.btn_login {display:block;}
.btn_login_m {display:none; width:100%;}
.social_btns a {display:inline-block; margin-left:15px; cursor:pointer;}



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

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

@media (max-width:768px){
	.login .section_content {border-bottom:0}
	.login .form_wrap{width:100%;overflow: visible;margin:20px auto}
	.login .form_top {width:100%;overflow: visible;}
	.login .form_left{float: none;width:100%;}
	.login .form_left p:first-child{margin-bottom: 6px;}
	.login .form_left p strong{display: none}
	.login .form_left p input{float: none;width: 90%;margin:0 auto;display: block;height: 35px;}
	.login .form_right{float: none;width:100%;margin-top: 14px;}
	.login .form_right a{width:90%;margin:0 auto;line-height: 50px;}
	.login .form_btm li label{font-size:12px}
	.login .form_btm li a{font-size:12px}
	.login .form_btm li.non_memberchk {display:none;}
	.social_btns > div {display:block;}
	.social_btns > a {display:inline-block;margin-top:4px;}
	.foot_non_memberchk {display:block;width:100%;margin:0 auto;padding:25px 17px 0;text-align:center;border-top:1px solid #242424;box-sizing:border-box;}
	.foot_non_memberchk a {display:block;width:100%;height:50px;line-height:50px;margin:0 auto;font-size:15px;font-weight:700;color:#fff;text-align:center;border-radius:4px;background:#333}

	.nonmember_content .form_wrap {width:100%;}
	.nonmember_content .groupboxL {float:none;width:100%;margin:0 auto;}
	.nonmember_content .groupboxR {float:none;width:100%;margin:0 auto;padding-left:0;text-align:center;margin-top:25px;}
	.nonmember_content .groupboxR:after {display:none}
	.nonmember_content .groupboxR .non_memberchk {display:none;}
	.nonmember_content .groupboxR .btn_order {width:90%;height:55px;line-height:55px;margin:0 auto;border:0;border-top:1px solid #e0e0e0;border-radius:0}
	.nonmember_content .groupboxR .btn_order span {padding-right:15px;background:url(/static_resources/images/myjuno/nonmember_arr_m.png) no-repeat 98% center;-webkit-background-size:auto 10px;
	background-size:auto 10px;}

	.login .nonmember_content .or {margin-top:5px;}
	.login .nonmember_content .or::before {width:200px;margin-left:-230px;}
	.login .nonmember_content .or::after {width:200px;margin-right:-230px;}
}

@media (max-width:420px){
	#header {display:none;}
	.sub_visual {display:none;}
	#footer {display:none;}

	.section_tit .bar {display:none;}
	.section_tit .tit {display:none;}
	.section_tit .tit_logo {display:block; margin-top:50px;}
	.section_tit .tit_logo img {max-width:320px;}

	.login .section_content {border-top:0px;}
	.login .form_left p input {max-width:320px;}
	.login .form_right a {max-width:320px; font-size:18px;}

	.social_btns {margin-top:50px; margin-bottom:25px;}
	.social_btns a {margin-left:0px; cursor:pointer;}
	.btn_login {display:none;}
	.btn_login_m {display:block;}
	.foot_non_memberchk a {max-width:320px;}
}

@media (max-width:360px){
	.login .form_wrap{width:100%; overflow:visible; margin:20px auto;}

	.btn_login {display:none;}
	.btn_login_m {display:block;}
}