@charset "UTF-8";
.login{width: 100%; height: 100vh; min-height: 700px;}
.login .inner{width: 100%; height: 100%; display: flex; flex-direction: row;}
.login .inner .background{width: calc(100% - 500px); height: 100%; display: flex; flex-direction: row; background-color: #FFFBF3;}
.login .inner .background .line{display: block; width: 50px; height: 100%; z-index: 100;}
.login .inner .background .line:nth-of-type(1){background-color: #FFC248;}
.login .inner .background .line:nth-of-type(2){background-color: #FFAD4A;}
.login .inner .background .logo-wrap{position: relative; width: calc(100% - 100px); display: flex; flex-direction: row; align-items: center; justify-content: center;}
.login .inner .background .logo-wrap .character{position: absolute; width: 180px; height: calc(180px * 2.2757); left: -30px; bottom: 40px; background-image: url('/resources/images/login-image.png'); background-repeat: no-repeat; background-size: contain;}
.login .inner .background .logo-wrap .bg{position: absolute; background-image: url('/resources/images/login-background.png'); background-position: center; background-repeat: no-repeat; background-size: contain;}
.login .inner .background .logo-wrap .bg:nth-of-type(2){width: 150px; height: 150px; bottom: 50px; right: 50px;}
.login .inner .background .logo-wrap .bg:nth-of-type(3){width: 80px; height: 80px; bottom: 200px; right: 30px; transform: rotate(45deg);}
.login .inner .background .logo-wrap .logo{position: relative; display: block; font-size: 20px; width: 35%; max-width: 300px;}
.login .inner .background .logo-wrap .logo img{width: 100%;}

.login .inner .form-wrap{width: 500px; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 1em;}
.login .inner .form-wrap .form{width: 100%; max-width: 400px;}
.login .inner .form-wrap .submit-wrap .button{width: 100%;}

@media(max-width: 1024px) {
	.login .inner {flex-direction: column-reverse;}
	.login .inner .background{width: 100%;}
	.login .inner .background .line{display: none;}
	.login .inner .background .logo-wrap{width: 100%;}
	.login .inner .background .logo-wrap .character{width: 100px; height: calc(100px * 2.2757);}
	.login .inner .background .logo-wrap .logo{display: none;}
	.login .inner .form-wrap{width: 100%;}
}