@charset "utf-8";

body{position:relative; min-height:100%; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-attachment:fixed}

#login{position:relative; margin:auto; box-sizing:border-box; font-family:'Noto Sans KR'}
#login div.header img{display:block; max-width:100%; margin:0 auto}
@media screen and (max-width:1280px){
	#login{max-width:420px; width:100%; padding:50px 10px}
	#login div.header{margin:0 0 20px 0}
	#login div.header img{max-width:240px; width:100%}
}
@media screen and (min-width:1281px){
	#login{width:420px; height:100%; padding:60px 0 40px}
	#login div.header{margin:0 0 30px 0}
	#login div.header img{max-width:270px}
}

#loginLayer{position:relative}
#loginLayer ul li{position:relative}
#loginLayer ul li.input{height:50px; padding:2px; border-radius:500px; box-sizing:border-box; background-color:#fff}
#loginLayer ul li.input div.mask{z-index:0; border-color:#dfdfdf; border-radius:500px; transition:all .3s}
#loginLayer ul li.input:hover div.mask{border-color:#333}
#loginLayer ul li.input.on div.mask{border-width:1px; border-color:#003e73}
#loginLayer ul li.input.password{padding-right:44px}
#loginLayer ul li.input label.lbl{position:absolute; top:0; left:18px; z-index:1; opacity:0; visibility:hidden; display:flex; align-items:center; padding:0 4px; background-color:#fff; color:#555; font-weight:300; transition:all .3s}
#loginLayer ul li.input.on label.lbl{opacity:1; visibility:visible; color:#003e73; font-weight:700}
#loginLayer ul li.input input{position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100%; padding:0 20px; border:0; border-radius:500px; box-sizing:border-box; background-color:#fff !important; font-family:'pretendard','Noto Sans KR'; font-size:16px}
#loginLayer ul li.input input:-webkit-autofill,
#loginLayer ul li.input input:-webkit-autofill:hover,
#loginLayer ul li.input input:-webkit-autofill:active,
#loginLayer ul li.input input:-webkit-autofill:focus{background-color:#fff !important; -webkit-box-shadow:0 0 0 1000px white inset !important}
#loginLayer ul li.input a.passToggleBtn{position:absolute; top:1px; right:1px; display:flex; justify-content:center; align-items:center; width:50px; height:50px; padding:18px; box-sizing:border-box}
#loginLayer ul li.input a.passToggleBtn div.bar{position:absolute; top:50%; left:50%; transform:rotate(45deg); opacity:0; visibility:hidden; width:2px; height:40%; margin:-20% 0 0 -1px; background-color:#000; transition:all .3s}
#loginLayer ul li.input a.passToggleBtn.on div.bar{opacity:1; visibility:visible}
#loginLayer ul li.input a.passToggleBtn div.ico{width:100%; height:100%}
#loginLayer ul li.input a.passToggleBtn svg{display:block; width:100%; height:100%; fill:#666; transition:all .3s}
#loginLayer ul li.input a.passToggleBtn:hover svg{fill:#000}
#loginLayer ul li.input a.passToggleBtn:focus svg{fill:#000}
#loginLayer ul li.submit button.submit{display:block; width:100%; height:50px; border-radius: 500px; box-sizing:border-box; background-color:#003e73; font-weight:500; color:#fff; font-family:'pretendard','Noto Sans KR'; margin-top: 25px; font-size:18px; transition:all .3s}
#loginLayer ul li.submit button.submit:hover{background-color:#00315c}
#loginLayer ul li.submit button.submit:focus{background-color:#00315c}
#loginLayer ul li.bottom{display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; margin:0}
#loginLayer ul li.bottom div.saveId{position:relative}
#loginLayer ul li.bottom label.saveId{display:flex; flex-wrap:nowrap; align-items:center; height:19px; padding:0 0 0 28px; font-size:16px; cursor:pointer}
#loginLayer ul li.bottom label.saveId:before{content:''; position:absolute; top:1px; left:0; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; width:16px; height:16px; border:1px solid #ccc; border-radius:50%; transition:all .3s}

#loginLayer ul li.bottom input[type="checkbox"]:checked + label.saveId:before{content:'\f00c'; font-family:'FontAwesome'; font-size: 11px; border-color:#409eee; background-color:#409eee; color:#fff}
#loginLayer ul li.bottom input[type="checkbox"]:focus + label.saveId:before{border-color:#409eee}
#loginLayer ul li.bottom a{display:inline-block; color:#666; font-weight:400; font-size:16px}
#loginLayer ul li.bottom a:hover{color:#000; text-decoration:underline}
#loginLayer ul li.bottom a:focus{color:#000; text-decoration:underline}
@media screen and (max-width:1280px){
	#loginLayer ul li{margin:0 0 10px 0}
	#loginLayer ul li.input label.lbl{height:18px; font-size:12px}
	#loginLayer ul li.input.on label.lbl{top:-9px}
}
@media screen and (max-width:320px){
	#loginLayer{padding:10px 0}
}
@media screen and (min-width:321px) and (max-width:360px){
	#loginLayer{padding:10px 0}
}
@media screen and (min-width:361px) and (max-width:383px){
	#loginLayer{padding:12px 0}
}
@media screen and (min-width:384px) and (max-width:428px){
	#loginLayer{padding:16px 0}
}
@media screen and (min-width:429px) and (max-width:767px){
	#loginLayer{padding:20px 0}
}
@media screen and (min-width:768px) and (max-width:1024px){
	#loginLayer{padding:24px 0}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	#loginLayer{padding:28px 0}
}
@media screen and (min-width:1281px){
	#loginLayer{}
	#loginLayer ul li{margin:0 0 15px 0}
	#loginLayer ul li.input label.lbl{height:20px; font-size:14px}
	#loginLayer ul li.input.on label.lbl{top:-10px}
}

#login a.reg{display:flex; justify-content:center; align-items:center; width:100%; height:50px; background-color:#e6e7ed; color:#51575c; font-size:16px; font-weight:500; transition:all .3s}
#login a.reg:hover{background-color:#d4d5d9; color:#51575c}
#login a.reg:focus{background-color:#d4d5d9; color:#51575c}
@media screen and (max-width:1280px){
	#login a.reg{margin:12px 0 0 0}
}
@media screen and (min-width:1281px){
	#login a.reg{margin:30px 0 0 0}
}

#login ul.snsLogin{display:flex; flex-wrap:wrap}
#login ul.snsLogin li{width:100%; box-sizing:border-box}
#login ul.snsLogin li:last-child{margin:0}
#login ul.snsLogin li button{position:relative; display:block; font-family:'pretendard','Noto Sans KR'; width:100%; height:50px; box-sizing:border-box; transition:all .3s}
#login ul.snsLogin li button:hover{}
#login ul.snsLogin li button:focus{}
#login ul.snsLogin li button.naver{border:1px solid #1ec800; background-color:#1ec800}
#login ul.snsLogin li button.kakao{background-color:#fee500}
#login ul.snsLogin li button.facebook{border:1px solid #3B5998; background-color:#3B5998}
#login ul.snsLogin li button.google{border:1px solid #dfdfdf; background-color:#fff}
#login ul.snsLogin li button div.ico{position:absolute; left:0; top:0; width:50px; height:50px}
#login ul.snsLogin li button .ico img{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:20px; height:20px}
#login ul.snsLogin li button p{font-size:16px; height:50px; font-family:'pretendard','Noto Sans KR'; color:#fff; line-height:50px; text-align:center; letter-spacing:-0.6px; font-weight:500}
#login ul.snsLogin li button:hover p{text-decoration:underline}
#login ul.snsLogin li button:focus p{text-decoration:underline}
#login ul.snsLogin li button.kakao p{color:#191919}
#login ul.snsLogin li button.google p{color:#191919}
@media screen and (max-width:1280px){
	#login ul.snsLogin{margin:12px 0 0 0}
	#login ul.snsLogin li{margin:0 0 8px 0}
}
@media screen and (min-width:1281px){
	#login ul.snsLogin{margin:10px 0 0 0}
	#login ul.snsLogin li{margin:0 0 12px 0}
	#login ul.snsLogin li button p{}
}

#login div.reaction{display:none; padding:10px; color:red}
#login div.reaction.on{display:block}
#login div.nonmember{text-align:center; font-weight:600}
#login div.nonmember a{display:flex; justify-content:center; align-items:center; background-color:#606268; color:#fff; text-align:center; transition:all .3s}
#login div.nonmember a:hover{background-color:#444}
#login div.nonmember a:focus{background-color:#444}
@media screen and (max-width:1280px){
	#login div.nonmember{margin:10px 0 0 0}
	#login div.nonmember a{height:50px; font-size:16px}
}
@media screen and (min-width:1281px){
	#login div.nonmember{margin:10px 0 0 0}
	#login div.nonmember a{height:50px; font-size:16px}
}

footer.loginFoot{position:relative; text-align:center;color:#8e8e91; font-family:'pretendard','Noto Sans KR'}
@media screen and (max-width:1280px){
	footer.loginFoot{padding:0 0 10px 0; font-size:12px}
}
@media screen and (min-width:1281px){
	footer.loginFoot{padding:0 0 20px 0; font-size:14px}
}