@charset "utf-8";

.login-wrap {display: flex; width: 100%; min-height: 100vh; align-items: center; justify-content: center; background: url(../img/bg10.jpeg) no-repeat center center; background-size: cover; padding: 0 14%}
.login-wrap .login-left {width: 55%; text-align: center;}
.login-wrap .login-left p b {font-weight: 900; font-size: 24px;}
.login-wrap .login-right {width:45%; background: #fff; padding: 100px 60px 80px; border-radius: 10px; box-shadow: 2px 2px 4px rgba(0,0,0,.035)}
.login-wrap .login-right h2 {text-align: center; font-size: 24px; font-weight: 700;padding-bottom: 40px;}
.login-layout .form-input {font-size: 15px; border: 1px solid #ccc; border-radius: 4px; width: 100%; padding: 10px; margin-bottom: 10px;}
.login-layout .form-input::placeholder {color: #ccc;}
.login-layout .layout-info {padding-top: 10px; margin-top: 10px; border-top: 1px solid #ccc; font-size: 15px; color: #aeaeae;}
.login-layout .layout-info i {padding-right: 10px;}
.form-btn {margin: 10px 0 40px;}
.form-btn .btn {background: #221e1f; width: 100%; border-radius: 5px; font-size: 15px; font-weight: 700; text-align: center; color: #fff; padding: 14px 0}

/* **************************************** *
 * desktop-l-width : 1440px;
 * **************************************** */
@media (max-width: 1440px){
	.login-wrap {padding: 0 20px;}
	.login-wrap .login-left {width: 50%;}
	.login-wrap .login-left img {width: 80%; max-width: 380px;}
	.login-wrap .login-right {width: 50%;}

}
/* **************************************** *
 * ~980px
 * **************************************** */
@media (max-width: 980px){
	.login-wrap {flex-flow: column;}
	.login-wrap .login-left {width: 100%; padding-bottom: 20px;}
	.login-wrap .login-left img {width: 80%; max-width: 160px;}
	.login-wrap .login-left p {display: none;}
	.login-wrap .login-right {width: 100%;}
}