@charset "utf-8";
@import url("/common/css/global.css?v=1.0.0");
@import url("./common.css?v=1.0.0");

#index-header {
	height: 396px;
	background-image: url('../img/bg_header_index.png');
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #E0C2F5;
}
#index-content {
	height:auto;
}

#login-box {
	aspect-ratio: 1/1;
	background: url('/media/image/bg.circle.trans50.png') center no-repeat;
	background-size: 80% 80%;
}
#login-box, #login-form input {
	font-size: 12px;
}
.btn-login {
	background-color: rgba(255, 51, 0, 0.5);
	border: 0;
	color: #111;
}
.btn-login:hover {
	background-color: #ff3300;
	color: #fff;
}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
	#index-header {
		height: 162px;
	}
	#login-box {
		aspect-ratio: unset;
		background-size: contain;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
	#index-header {
		height: 216px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
	#index-header {
		height: 288px;
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {
	#index-header {
		height: 342px;
	}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1399.98px) {
	#index-header {
		height: 396px;
	}
}