@charset "utf-8";

body { background: none; }
.login-wrap { width: 100%; height: 100%; position: relative; }
.login-wrap .logo-area { position: absolute; top: 62px; left: 67px; z-index: 30; }
.login-wrap .logo-area img { width: 180px; height: 33px; }

.login-wrap .left-area { float: left; position: relative; width: 60%; height: 100%; border-right: 1px solid #2a345f; background: url(../../img/login/bg.png) no-repeat center top; -webkit-background-size: cover; background-size: cover;}
.login-wrap .left-area .tit { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center; font-size: 3rem; line-height: 38px; width: 100%; z-index: 1; }
.login-wrap .left-area .tit .h1 { color: #989dc5; }
.login-wrap .left-area .tit .h2 { color: #fff; font-weight: 600; }
.login-wrap .left-area .item { position: absolute; display: none; }
.login-wrap .left-area.no-animation .item { display: block; }
.login-wrap .left-area .item01 { top: 30%; left: 18%; }
.login-wrap .left-area .item02 { top: 22%; right: 24%; }
.login-wrap .left-area .item03 { bottom: 22%; left: 21%; }
.login-wrap .left-area .item04 { bottom: 18%; right: 17%; }
.login-wrap .left-area .spline-canvas { position: relative; width: 100%; height: 100%; }
.login-wrap .left-area .spline-canvas canvas { width: 100%; height: 100%; outline: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; }
.login-wrap .left-area.no-animation .spline-canvas { display: none; }

.login-wrap .right-area { float: right; position: relative; width: 40%; height: 100%; background:#f6f7fc; }
.login-wrap .right-area .login-form { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.login-wrap .right-area .login-form .tit { text-align: center; color: #e7f1ff; padding-bottom: 40px; }
.login-wrap .right-area .login-form .tit h2 { font-size: 3rem; line-height: 30px; padding-bottom: 22px; font-weight: 600; color: #111638; }
.login-wrap .right-area .login-form .tit p { font-size: 1.6rem; line-height: 16px; font-weight: 100; color: #111638; }
.login-wrap .right-area .login-form .login-input input { background: #fff; border: 1px solid  #d5d9ed; width: 370px; height: 45px; border-radius: 4px; padding: 0 22px; font-size: 1.4rem; color: #818799; margin-bottom: 15px; display: block; -webkit-transition: -webkit-box-shadow .2s ease; transition: -webkit-box-shadow .2s ease; -o-transition: box-shadow .2s ease; transition: box-shadow .2s ease; transition: box-shadow .2s ease, -webkit-box-shadow .2s ease; }
.login-wrap .right-area .login-form .login-input input:hover { -webkit-box-shadow: 0 0 5px rgba(218,230,255,0.3); box-shadow: 0 0 5px rgba(218,230,255,0.3); }
.login-wrap .right-area .login-form .login-input input::-webkit-input-placeholder { color: #818799; }
.login-wrap .right-area .login-form .login-input input::-moz-placeholder { color: #818799; }
.login-wrap .right-area .login-form .login-input input:-ms-input-placeholder { color: #818799; }
.login-wrap .right-area .login-form .login-input input::placeholder { color: #818799; }
.login-wrap .right-area .login-form .login-input button.login-btn { width: 370px; height: 45px; background: #2576ff; border-radius: 4px; color: #e7f1ff; font-size: 1.5rem; border: 0; margin-top: 35px; -webkit-transition: -webkit-box-shadow .2s ease; transition: -webkit-box-shadow .2s ease; -o-transition: box-shadow .2s ease; transition: box-shadow .2s ease; transition: box-shadow .2s ease, -webkit-box-shadow .2s ease; }
.login-wrap .right-area .login-form .login-input button.login-btn:hover { -webkit-box-shadow: 0 0 5px rgba(218,230,255,0.3); box-shadow: 0 0 5px rgba(218,230,255,0.3); }

.login-wrap .right-area .footer { position: absolute; bottom: 60px; left: 50%; margin-left: -65px; text-align: center; }
.login-wrap .right-area .footer p { color: #b9c1d3; }
.login-wrap .right-area .footer a { color: #b9c1d3; margin: 0 2px; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; }
.login-wrap .right-area .footer a:hover { opacity: .7; }


@media all and (max-width: 1440px) {
	.login-wrap .left-area .tit { font-size: 2.5rem; }
	.login-wrap .left-area .item { width: 115px; }
}
@media all and (max-width: 1040px) {
	.login-wrap .left-area { display: none; }
	.login-wrap .right-area { width: 100%; }
	.login-wrap .logo-area { width: 100%; left: 0; text-align: center; }
}
@media all and (max-width: 640px) {
	.login-wrap .right-area .login-form { width: 100%; text-align: center; }
	.login-wrap .right-area .login-form .login-input { width: 100%; }
	.login-wrap .right-area .login-form .login-input input { display: inline-block; width: 80%; }
	.login-wrap .right-area .login-form .login-input button.login-btn { display: inline-block; width: 80%; }
	.login-wrap .right-area .login-form .tit h2 { padding-bottom: 15px; }
	.login-wrap .right-area .login-form .tit p { font-size: 1.4rem; }
}