@charset "utf-8";
#login {max-width:598px;  min-height:600px;margin:68px auto; margin-bottom:68px; border: 4px solid #ffd200;   position:relative; overflow:hidden;}
#login h2 {max-width:100%; height:86px;line-height:86px; text-align:center; font-size:24px; font-weight:bold;background-color:#ffd200;margin-bottom:22px;}
#login input[type=email], #login input[type=password] {width:71.90635451505017%;height:66px;border-radius:10px; margin:0 auto 14px;display:block;border:1px solid #bdb8b7; text-indent:15px;font-size:20px;font-weight:bold; }
#kakao_id + label {text-indent:-9999px; font-size:0;position:absolute; display:block; width:150px; height:150px;background:url(../img/login/1.png)0 0 no-repeat; top:92px; left:-137px;transition:1s;}
#kakao_id:hover + label, #kakao_id:focus + label {top:92px; left:-61px}
#pw + label {text-indent:-9999px; font-size:0; position:absolute; display:block;width:150px; height:150px;background:url(../img/login/2.png)0 0 no-repeat; top:-130px; right:-11px; transition:0.5s ease;}
#pw:hover + label, #pw:focus + label {top:173px; right:-11px;}
#login .about-btn {width:30px; height:30px; line-height:30px;border-radius:50%; background-color:#ffd200; font-size:20px; font-weight:bold; position:absolute; top:127px; right:98px;text-align:center;cursor:pointer;}
#login .about-btn:hover + .question,#login .about-btn:focus + .question, #login .question:hover, #login .question:focus {display:block;}
#login .question {display:none;position:absolute; width:250px; height:65px; font-size:14px; background-color:#3f2f26;color:#fff; padding:10px;top:163px; right:98px; word-break:keep-all; }
#login .about-btn:before {display:none; content:''; position:absolute; width:150px; height:150px; background:url(../img/login/1-2.png)0 0 no-repeat;top:-90px; right:128px; }
#login .about-btn:hover:before, #login .about-btn:focus:before  {display:block;}
#login .question:after {content:''; display:block; position:absolute; top:-14px; right:8px;height:0; border:7px solid transparent; border-bottom-color:#3f2f26;}
#login .question a {display:block; margin-top:13px; color:#ffd200;}
#login .acc_chk {width:71.90635451505017%; margin:0 auto; font-size:16px; }
#login .acc_chk:after {display:block; content:''; position:absolute; width:150px; height:150px; background:url(../img/common/empty.png)0 0 no-repeat; z-index:-1; left:10px; bottom:175px; transition:1s 0.3s;background-size:150px 150px;}
#login .acc_chk:hover:after {left:-17px; bottom:175px; display:block; background-image:url(../img/login/3.png);}
#login #acc_save {width:16px; height:16px;}
#login input[type=submit] {display:block; width:71.90635451505017%; height:72px; line-height:72px;border:1px solid #ffd200; border-radius:10px; background-color:#ffef3f; text-align:center; font-size:24px; font-weight:bold; margin:30px auto 0;}
#login #login_btn + label {text-indent:-9999px; font-size:0; position:absolute; display:none;width:150px; height:150px;background:url(../img/login/4.png)0 0 no-repeat; }
#login #login_btn:hover + label {display:block; bottom:95px; right:75px;}
#login .about_kakao_account {width:71.90635451505017%; height:0; padding-top:13.37792642140468%;text-indent:-99999px; background:url(../img/login/account.png)0 0 no-repeat; background-size:cover; margin:54px auto;}
#login form + p {width:71.90635451505017%; margin:0 auto; border-top:1px solid #3f2f26; padding:10px 0;}
#login form + p a {font-weight:bold; margin-right:70px;}
#login form + p a ~ a {font-weight:normal;text-align:right; display:inline-block; margin:0; padding-left:15px;padding-right: 15px;}
#login form + p a + a + a {border-left:1px solid #efefef;padding-left:15px; padding-right:0;}

@media (max-width:1023px) {
#container {margin-top:157px;}
}

@media (max-width:767px) {
#container {margin-top:115px;}
#login {width:100%; max-width:767px; border:none; min-height:500px;}
#login h2 {max-width:100%; height:52px;line-height:52px;font-size:20px;margin-bottom:16px;}
#login input[type=email], #login input[type=password] {width:95%;height:47px;border-radius:7px; text-indent:10px;font-size:16px;}
#login .about-btn {width:23px; height:23px; line-height:23px;border-radius:50%; font-size:16px; top:80px; right:18px;}
#login .question {top:110px; right:14px;}
#login .acc_chk {width:95%; font-size:14px; }
#login input[type=submit] {width:95%; height:52px; line-height:52px; border-radius:7px; font-size:20px;margin:20px auto 0;}
#login .about_kakao_account {width:95%; padding-top:16.37931034482759%;margin:38px auto;}
#login form + p {width:95%;padding:10px 0; font-size:14px;}
#login form + p a {font-weight:bold; margin-right:8px;}
#login form + p a ~ a {padding-left:5px;padding-right: 5px;}
#login form + p a + a + a {padding-left:5px;}

#kakao_id + label {top:100px; }
#kakao_id:hover + label, #kakao_id:focus + label {top:100px; }
#login .acc_chk:after {left:auto; right:-135px; bottom:50px; z-index:1;}
#login .acc_chk:hover:after {left:auto; right:-20px; bottom:50px;z-index:1;}
#login #login_btn:hover + label {background-image:url(../img/login/4-1.png);display:block; bottom:200px; right:0px;}
}