/* 공통 */
span.blue {color:#0036ce;}
p.square {position:relative; font-size:14px; line-height:20px; padding:0 0 0 12px; color:#808080;}
p.square:after {content:''; display:block; position:absolute; top:8px; left:0; width:4px; height:4px; background:#000;}

/* 타이틀 */
div.page_title_wrap h3.page_title.login {text-align:center;}

/* 로그인 박스 */
div.box_login {width:620px; margin:0 auto;}
div.box_login > h4 {margin-bottom:30px; font-size:22px; line-height:24px; text-align:center;}
div[data-role=login] {padding:50px 80px; box-sizing:border-box; background:#e3f0fc;}
div[data-role=login] > div[data-role=input] > input {padding:0 20px; height:60px; border:none; border-radius:3px; -webkit-box-shadow:0 0 0 1000px white inset;}
div[data-role=login] > div[data-role=input] > input::placeholder {color:#808080;}
div[data-role=login] > div[data-name=email] > input {background-image:url(../image/login_ico_id.png); background-repeat:no-repeat; background-position:right 20px center;}
div[data-role=login] > div[data-name=password] > input {background-image:url(../image/login_ico_password.png); background-repeat:no-repeat; background-position:right 20px center;}
div[data-role=login] > div.check_search {margin-top:15px;}
div[data-role=login] > div.check_search > label {cursor:pointer; vertical-align:middle;}
div[data-role=login] > div.check_search > button > i {display:inline-block; width:20px; height:20px; line-height:20px; border:1px solid #cccdcd; border-radius:20px; background:#fff; color:#cccdcd; vertical-align:middle; text-align:center;}
div[data-role=login] > div.check_search > button.on > i {border-color:#0036ce; background-color:#0036ce; color:#fff;}
div[data-role=login] > div.check_search > div.search {float:right; padding:5px 0; box-sizing:border-box;}
div[data-role=login] > div.check_search > div.search > a {position:relative; color:#808080;}
div[data-role=login] > div.check_search > div.search > a.email {margin:0 15px;}
div[data-role=login] > div.check_search > div.search > a.email:after {content:''; display:inline-block; position:absolute; right:-10px; top:3px; width:1px; height:15px; background:#b6c0ca;}
div[data-role=login] > div[data-role=button] {margin-top:25px; padding:0;}
div[data-role=login] > div[data-role=button] > button {display:inline-block; width:100%; height:60px; padding:0; font-size:18px; font-weight:600; line-height:60px;}
div[data-role=login] > div[data-role=button] > button.button_login {margin-bottom:5px;}
div[data-role=login] > div[data-role=button] > button.button_join {line-height:58px; border:1px solid #0036ce; background:#fff; color:#0036ce;}
div[data-role=login] > p.help {margin:10px 0 20px; line-height:20px; color:#666;}

/* SNS계정 로그인 */
.box_login div.sns {padding:30px 60px; border:1px solid #e0e0e0; box-sizing:border-box;}
.box_login div.sns > h4 {margin-bottom:25px; font-size:22px; text-align:center;}
.box_login div.sns > ul::after {content:''; display:block; clear:both;}
.box_login div.sns > ul > li {float:left; width:calc(100% / 6); text-align:center;}
.box_login div.sns > ul > li > a > div.img {height:50px; margin-bottom:10px; background-repeat:no-repeat; background-position:center;}
.box_login div.sns > ul > li.kakao > a > div.img {background-image:url(../image/sns_ico_kakako.png);}
.box_login div.sns > ul > li.naver > a > div.img {background-image:url(../image/sns_ico_naver.png);}
.box_login div.sns > ul > li.google > a > div.img {background-image:url(../image/sns_ico_google.png);}
.box_login div.sns > ul > li.facebook > a > div.img {background-image:url(../image/sns_ico_facebook.png);}
.box_login div.sns > ul > li.lifelongedu > a > div.img {background-image:url(../image/sns_ico_lifelongedu.png);}
.box_login div.sns > ul > li.civicedu > a > div.img {background-image:url(../image/sns_ico_civicedu.png);}
.box_login div.sns > ul > li.allprovider > a > div.img {background-image:url(../image/sns_ico_all.png);}
.box_login div.sns > ul > li > a > p {font-size:13px; line-height:15px; color:#808080;}

/* 안내 사항 */
div.info {margin-top:30px;}
div.info > strong {display:inline-block; width:100%; margin-bottom:10px; font-size:15px;}
div.info > strong > i {display:inline-block; width:18px; height:21px; background:url(../image/info_ico.png) no-repeat top center; vertical-align:middle;}

/* 상단 */
div.text_sns > p {padding-bottom:25px; font-size:22px; line-height:24px; border-bottom:2px solid #000; text-align:center;}
div.text_sns div.text {margin:25px 0;}
div.box_login.dormancy > h4 {word-break:keep-all;}
div.info_text_box {padding:25px 0 40px; margin:0 auto; width:620px; border-top:2px solid #000; border-bottom:1px solid #e0e0e0; text-align:center;}
div.info_text_box > p.dormancy_info {color:#666; font-size:15px; line-height:1.4; word-break:keep-all;}
div.info_text_box > div[data-role=join] {margin:30px 0; }
div.info_text_box > div[data-role=join] > p.dormancy_tit {margin-bottom:30px; color:#000; font-size:16px; font-weight:500;}
div.info_text_box > div[data-role=join] > span.dormancy_txt {font-size:20px;}
div[data-role=button].dormancy > button {padding:0 18px; width:200px;}
div[data-role=button].dormancy > button.close_button {background:#ebebeb;}

main.link_login div.context {padding-bottom:60px;}
main.link_login div.context div.box_login div[data-type='input'] {position:relative;}
main.link_login div.context div.box_login div[data-type='input'] > label {position:absolute; width:0px; height:0px; overflow:hidden;}
main.link_login div.context div.check_search > label {visibility:hidden;}
main.link_login div.context div.check_search > button {display:none;}

main.login div.context {padding-bottom:60px;}
main.login div.context div.box_login div[data-type='input'] {position:relative;}
main.login div.context div.box_login div[data-type='input'] > label {position:absolute; width:0px; height:0px; overflow:hidden;}
main.login div.context div.box_login div.sns > ul > li {width:calc(100% / 3);}
main.login div.context div.box_login div.sns > ul > li > a {display: block;}
main.login div.context div.check_search > label {visibility:hidden;}
main.login div.context div.check_search > button {display:none;}

@media (max-width:991px){
	div.box_popup div.popup {width:90% !important;}
}
@media (max-width:620px){
	div.info_text_box {width:100%;}
	div.box_login > h4 {font-size:18px;}
}
@media (max-width:430px){
	.dormancy {display: flex; flex-direction: column;}
	div[data-role=button].dormancy button {width: 100%;}
}

@media screen and (max-width:678px) {
	main.login div.context div.box_login div.sns > ul > li {width:calc(100% / 3);}
	/* 로그인 박스 */
	div.box_login {width:100%; margin:0;}
	
	div[data-role=login] {padding:50px 20px}
	main.subpage div.box_popup div.popup > div.popup_inner div[data-role=login] {padding:50px 20px}
	
	/* SNS계정 로그인 */
	.box_login div.sns {padding:20px;}
	.box_login div.sns > ul > li {width:calc(100% / 6); margin-bottom:10px;}
	
	/* 이메일/비밀번호 찾기 */
	div.email_search > ul > li {width:100%; margin-bottom:10px; border-right:1px solid #e0e0e0;}
	div.email_search > ul > li.kakao_search {margin-bottom:0;}
	div.box_popup div.popup > div.popup_inner.password_change_sucess {width:100%;}
	
	/* 이메일 찾기 완료 */
	div.box_popup div.popup > div.popup_inner.email_success div.email_complete > p {font-size:14px; font-weight:500;}
	div.box_popup div.popup > div.popup_inner.email_submit {width:100%;}
	
	/* 팝업 */
	div.box_popup div.popup {width:90%;}
	div.box_popup div.popup > div.popup_inner > div {height:calc(100vh - 220px);}
	div.box_popup div.popup > div.popup_inner > div > div.email_button > button {display:inline-block; width:100%;}
	div.box_popup div.popup > div.popup_inner > div > div.email_button > button.btn_submit {margin-top:10px;}
	div.box_popup div.popup > div.popup_inner.small > div {height:auto;}
}

@media screen and (max-width:480px) {
	div[data-role=login] > div.check_search > label {font-size:12px;}
	div[data-role=login] > div.check_search > div.search {padding:3px 0;}
	div[data-role=login] > div.check_search > div.search > a {font-size:12px;}

	/* 팝업 */
	div.box_popup div.popup > div.popup_inner > div {height:calc(80vh - 220px);}
}

@media screen and (max-width:380px) {
	div[data-role=tab] > div > h4 span.blue {display:block;}
}

@media screen and (max-width:321px) {
	div.text_sns > p {font-size:19px;}
	div[data-role=tab] > div > h4 {font-size:19px;}

	div.box_login > h4 span.blue {display:block;}

	div[data-role=button].dormancy > button {margin-bottom:10px;}
	div[data-role=button].dormancy > button:last-child {margin-bottom:0px;}
	div.info_text_box > p.dormancy_info {font-size: 13px;}
}