/* variable */
:root {
	--brand-color: #FF2600;
	--hover-color: #D82000;
}

/* Override */
	ul{
		padding-left: 20px;
		margin: 0;
	}

	body{
	  	margin: 0;
	  	padding: 0;
	}

/* Font Settings */

	body{
	  	font-family: 'Noto Sans HK', sans-serif;
	  	color: #101820;
	  	font-weight: 400;
	  	font-size: 16px;
	  	line-height: 133%;
	}

	.header-3{
	  	font-weight: 500;
	  	font-size: 28px;
	  	line-height: 120%;
	  	margin-bottom: 16px;
	  	width: 100%;
	}

	.header-5{
		font-weight: 500;
		font-size: 20px;
		line-height: 120%;
		margin-bottom: 8px;
		width: 100%;
	}

/* Style */

	.container{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
	}

	#logo {
		width: 150px;
		height: 68px;
	}

	.banner-container{
	  	width: calc(50vw - 216px);
	  	height: 100vh;
	  	position: relative;
	  	top: 0;
	  	right: 0;
	  	background-image: url('resource/bg.jpg');
	  	background-size: cover;
	  	box-shadow: inset -16px 0px 16px rgba(0, 0, 0, 0.25);
	}

	.content-container{
		height: 100vh;
		width: 856px;
		padding: 106px;
		box-sizing: border-box;
		overflow: auto;
		scrollbar-width: none;
	}

	.title-wrapper{
		margin-top: 32px;
		width: 100%;
	}

	.remark-wrapper{
		margin-top: 32px;
		width: 100%;
	}

	.divider{
		width: 100%;
		height: 1px;
		background-color: #D9D9D9;
		margin: 32px 0;
	}

	.apply-form{
		margin: 32px 0;
	}

	button{
		width: 343px;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--brand-color);
		transition: 0.25s;
		color: white;
		border-radius: 100px;
		border: none;
		box-shadow: none;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		margin-top: 32px;
	}

	button:hover{
		background-color: var(--hover-color);
	}

	#success-popup-container, #loading-container{
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background: rgba(73, 80, 87, 0.9);
		z-index: 2;
		align-items: center;
		justify-content: center;
		display: none;
		flex-wrap: wrap;
	}

	.popup-wrapper{
		width: 343px;
		padding: 32px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background-color: white;
		border-radius: 16px;
	}

	.popup-wrapper img{
		height: 96px;
	}

	.popup-wrapper span, .popup-wrapper .header-5{
		text-align: center;
	}

	.popup-wrapper .header-5{
		margin: 16px 0;
	}

	a{
		color: var(--brand-color);
	}

	#loading-container img{
		width: 40px;
	}

	#loading-container div{
		display: flex;
		width: 180px;
		flex-wrap: wrap;
		justify-content: center;
	}

	#loading-container span{
		color: white;
		width: 100%;
		display: block;
		text-align: center;
	}


	/* Input Field */
		.input-container{
			position: relative;
			margin-bottom: 8px;
			width: 343px;
			transition: 0.25s;
		}

		.input-container input,
		.input-container select{
			width: 100%;
			min-width: 100%;
			border-radius: 8px;
			border: 1px solid #DEE2E6;
			height: 60px;
			padding: 26px 16px 12px;
			box-sizing: border-box;
			font-size: 16px;
			background-color: white;
			-webkit-appearance: none;
  			-moz-appearance: none;
		}

		.input-container select{
			padding-left: 11px;
			background-image: url(resource/chevron-down.png);
			background-position: 95% 50%;
			background-size: 24px;
			background-repeat: no-repeat;
		}

		.input-container label{
			position: absolute;
			display: block;
			top: 18px;
			left: 16px;
			color: #ADB5BD;
			transition: 0.25s ease;
			pointer-events: none;
		}

		.input-container input:focus{
			outline: none;
			border: 1px solid #101820;
			box-shadow: 0px 4px 8px rgba(16, 24, 32, 0.1);
		}

		.input-container input:focus ~ label,
		.input-container input:valid ~ label,
		.input-container label.label-select
		{
			top: 5px;
			font-size: 12px;
		}

		.checkbox-container {
			display: flex;
			align-items: flex-start;
			margin-top: 32px;
		}

		.checkbox-container input{
			min-width: 24px;
			min-height: 24px;
			margin: 0;
			border: 1px solid #6C757D;
			border-radius: 4px;
		}

		.checkbox-container input:checked{
			accent-color: #101820;
		}

		.checkbox-container label{
			font-size: 14px;
			color: #495057;
			line-height: 133%;
			margin-left: 8px;
		}


/* Responsive */

	@media (max-width: 1320px){
	  	.banner-container{
			width: calc(100% / 3);
	  	}

	  	.content-container{
			width: calc(100% / 3 * 2);
			padding: calc(100vw / 12);
	  	}

	}

	@media (max-width: 992px){

	  	.header-3{
	  		font-size: 24px;
	  	}	

	  	.container{
	  		flex-wrap: wrap;
	  		width: 100%;
	  	}

	  	.banner-container{
	    	width: 100%;
	    	height: 128px;
	    	box-shadow: inset 0px -16px 16px rgba(0, 0, 0, 0.25);
	  	}

		.content-container{
		    width: 100%;
		    height: max-content;
		    padding: 32px 16px;
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: center;
		}
	}