/**
	login skin css
*/
body{background:url(../img/login/login_bg.jpg) var(--kefa-primary-40) repeat center center;background-size:100% auto}

header,header a{display:flex;justify-content:center;align-items:center;height:50px;background-color:var(--kefa-white)}
header img{height:30px}
@media screen and (min-width:767px) {
	header,header a{height:70px}
	header img{height:40px}
}
@media screen and (min-width:1200px) {
	header,header a{height:100px}
	header img{height:60px}
}

#container{overflow-y:auto;display:flex;height:calc(100vh - 150px);padding:20px 0;background:url(../img/login/login_fbg.jpg) repeat-x center bottom;}
#contents{overflow:hidden;max-width:1050px;width:calc(100% - 2rem);min-height:350px;margin:auto;padding:0 !important;background-color:var(--kefa-white)}
#contents .login_img{display:none;float:left;max-width:550px;width:52.38%;line-height:0}
#contents .login{max-width:500px;width:100%;margin:0 auto;padding:40px;text-align:left}
#contents .login h2{margin:0;padding-bottom:1rem;border:0;background-color:transparent;font-size:var(--kefa-fz-title-xxlg);font-weight:800;color:var(--kefa-success-80);text-align:center}
#contents .login li{padding-top:10px;font-size:0.9rem}
#contents .login li.login3{padding:1rem 0}
#contents .login li:last-child{padding-top:20px}
#contents .login li.login5{text-align:center}
#contents .login li.login5 .bar{display:inline-block;width:1px;height:0.8rem;margin:0 0.75rem;background-color:#e5e5e5;vertical-align:middle}
#contents .login [type="text"],#contents .login [type="password"]{width:100%}
#contents .login .btn-submit{width:100%;font-weight:600;color:var(--kefa-white)}
#contents .login .btnWrap{margin-top:1rem;text-align:center}
#contents .login .btnWrap .btn{text-decoration:none}
#contents .login .btnWrap .btn+.btn:before{content:"|";display:inline-block;margin-right:5px;font-weight:200;color:var(--kefa-gray-30)}
#contents .login .btnWrap .btn.btn-txt:hover,#contents .login .btnWrap .btn.btn-txt:focus{border:none;background-color:transparent;outline:none;box-shadow:none;color:var(--kefa-success)}
@media screen and (min-width:767px) {
	#container{min-height:calc(100vh - 130px)}
	#contents .login_img{display:block;float:left;max-width:550px;width:52.38%}
	#contents .login{float:left;max-width:47.62%;padding:50px 60px 0}
	#contents .login [type="text"],#contents .login [type="password"]{padding:6%}
}
@media screen and (min-width:1000px) {
	#contents .login{padding:70px 60px 0}
	#contents .login h2{padding-bottom:2rem}
}
@media screen and (min-width:1200px) {
	#container{min-height:calc(100vh - 200px)}
	#contents .login{padding:80px 60px}
	#contents .login_img{width:550px}
}

#footer{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100px;padding:0 20px;box-shadow:0px -1px 0px rgba(0, 0, 0, .1);background-color:var(--kefa-white);line-height:1.5}
#footer .company{display:inline-block;padding-top:0.5rem}
#footer .company span{padding-right:0.5rem}
#footer address{display:inline-block;padding-bottom:0.25rem;padding-right:0.5rem;font-weight:600}
#footer .tel{display:inline-block;font-size:var(--kefa-fz-body-lg);font-weight:800;color:var(--kefa-success)}
#footer .tel b{font-weight:600}
#footer .copyright{padding-top:1rem;font-size:11px;color:#888}
#footer .visitor{padding-top:0.25rem}
#footer .visitor a{text-decoration:none}
#footer .visitor .badge{display:inline-block;min-width:10px;padding:3px 5px;font-size:10px;font-weight:700;color:var(--kefa-white);line-height:1;vertical-align:baseline;white-space:nowrap;text-align:center;background-color:#999;border-radius:10px}
@media (min-width: 550px){
	#footer{text-align:center}
}