/*
	 *  columned text
	 */
	.column-xs-4{column-count:4;column-gap:30px;}
	.column-xs-3{column-count:3;column-gap:30px;}
	.column-xs-2{column-count:2;column-gap:30px;}

	.scr-lg .column-4{column-count:4;column-gap:30px;}
	.scr-md .column-4{column-count:2;column-gap:30px;}
	.scr-sm .column-4{column-count:2;column-gap:30px;}
	.scr-xs .column-4{column-count:1;column-gap:30px;}

	.scr-lg .column-3{column-count:3;column-gap:30px;}
	.scr-md .column-3{column-count:3;column-gap:30px;}
	.scr-sm .column-3{column-count:2;column-gap:30px;}
	.scr-xs .column-3{column-count:1;column-gap:30px;}

	.scr-lg .column-2{column-count:2;column-gap:30px;}
	.scr-md .column-2{column-count:2;column-gap:30px;}
	.scr-sm .column-2{column-count:1;column-gap:30px;}
	.scr-xs .column-2{column-count:1;column-gap:30px;}

	#login-header{border-top:10px solid rgba(0,0,0,0);}
		/*#login-header #login-header-title{padding:10px 0 0 0;width:96vw;margin:0;display:block;}*/
		#login-header #login-header-title{padding:0;width:96vw;margin:0;display:block;}
		#login-header #login-header-subtitle{position:absolute;top:10px;right:30px;width:200px;}

	#login-termsofuse{display:block;margin-top:40px;}
		#login-termsofuse-text{padding:12px;font-size:17px;}
		.login-termsofuse-button{border:5px solid black;width:calc(100% - 20px);overflow:hidden;font-size:30px;line-height:32px;padding:24px 12px;margin:15px 0 0 0;text-align:center;cursor:pointer;}
		.login-termsofuse-button:hover{background:black;color:white;}

	#login-form{display:none;overflow:hidden;text-align:center;}
	#login-form .login__icon{
			width:60px;
			height:60px;
		}

		#login-form form{margin:90px 0 0 0;padding:0;text-align:center;position:relative;display:inline-block;}
			#login-form form .form-wrapper{
				display:table-cell;
				background-size:45px;background-position:center left;background-repeat:no-repeat;
				white-space:nowrap;margin:auto;}
				#login-form .pw{
					border:6px solid black;min-width:30vw;max-width:50vw;height:64px;font-size:40px;padding:12px;margin:0 0 0 20px;display:table-cell;vertical-align: middle;height:80px;}
				#login-form .submit{border:none;background:none;font-size:40px;line-height:40px;padding:0 20px;margin:0;overflow:hidden;display:table-cell;top:-1px;left:0px;vertical-align: middle;height:80px;}
				#login-form .submit:hover,
				#login-form .submit:active{background:black;color:white;}


	/* scr-xxs */
	@media (max-width:400px) {
		#login-header #title{margin:0 10px 10px 10px;}
		
		#login-form .login__icon{
			width:40px;
			height:40px;
			margin:auto;
		}

		#login-form form .form-wrapper{
			display:flex;
			flex-direction:column;

			/*width:100%;*/
		}
		#login-form .pw{
			border:4px solid black;
			height:48px;
			font-size:30px;
			padding:12px;
			max-width:100%;
			width:100%;
			margin:20px 0;
			
		}
		#login-form .submit{font-size:30px;line-height:40px;;height:48px;}
		#login-header #login-header-title{padding:10px 0;width:100%;}
		#login-header #login-header-subtitle{display:none;}
	} 
	/* scr-xs */
	@media (min-width:401px) and (max-width:767px) {
		#login-form .login__icon{
			width:40px;
			height:40px;
			margin:auto;
		}
		#login-form form .form-wrapper{
			display:flex;
			flex-direction:column;
			/*width:100%;*/
		}
		#login-form .pw{
			border:4px solid black;
			height:48px;
			font-size:30px;
			padding:12px;
			max-width:100%;
			width:100%;
			margin:20px 0;
			
		}
		#login-header #title{margin:0 10px 10px 10px;}
		#login-form .pw{min-width:50vw;max-width:50vw;width:50vw;}
		
		#login-form .pw{border:4px solid black;height:64px;font-size:40px;padding:12px;}
		#login-form .submit{font-size:40px;line-height:40px;;height:64px;}
		#login-header #login-header-title{padding:10px 0;width:100%;}
		#login-header #login-header-subtitle{display:none;}
	}
	/* scr-sm */
	@media (min-width:768px) and (max-width:991px) {
		#login-header #title{margin:0 10px 10px 10px;}
		#login-form .pw{min-width:50vw;max-width:50vw;width:50vw;}

		#login-form form .form-wrapper{background-size:30px;padding-left:40px;}
		#login-form .pw{border:4px solid black;height:64px;font-size:40px;padding:12px;}
		#login-form .submit{font-size:40px;line-height:40px;;height:64px;}
		#login-header #login-header-title{padding:10px 0;width:100%;}
		#login-header #login-header-subtitle{display:none;}
	}
	/* scr-md */
	@media (min-width:992px) and (max-width:1119px) {
		#login-header #title{margin:0 10px 10px 10px;}
		#login-form .pw{min-width:40vw;max-width:40vw;width:40vw;}
		#login-header #login-header-title{padding:10px 0;width:100%; margin:0 0 0 -20px;}
		#login-header #login-header-subtitle{display:none;}
	} 
	/* scr-lg */
	@media (min-width:1120px){
		#login-header #title{margin:0 10px 10px 10px;}
		#login-form .pw{min-width:40vw;max-width:40vw;width:40vw;}
		#login-header #login-header-title{margin:0 0 0 -20px;}
	}


    /*~~~~~~~~~~~~~~~~~~*/


	body{
		width:100vw;
		height:100dvh;
		overflow:hidden;
	}
		#login-form{
			position:absolute;
			top:0;
			padding-top:30vw;
			width:100vw;
			
		}
		#outestWrapper{
			height:100dvh;
		}
	
	.initial__logo .logo__wrapper span,
	.subtitle__logo span {
		font-family: "Futura-Maxi-Std-Demi" !important;
		font-weight:normal !important;
	}

	
	
	.subtitle__logo {
		font-size: 0.85em;
		line-height: 1.2em;
		letter-spacing: 0.01em;
		margin-top: 10px;
		position: fixed;
		top: 0;
		right: 10px;
		border-bottom: none;
		white-space:nowrap;
	}
	
	.subtitle__logo span:last-child{
		position: relative;
		top: 0.2em;
	}
	
	
	.logo__wrapper {
		line-height: 1.25em;
	}
	.logo__wrapper .title--1 span,
	.logo__wrapper .title--2 span {
		letter-spacing: 0;
	}
	
	.logo__wrapper .title--3 span {
		letter-spacing: -0.04em;
	}
	
	.title--2 {
		line-height: 1em;
	}
	
	.title--1 span,
	.title--2 span {
		margin-right: 0.35em;
	}
	
	/*year*/
	.title--3 span:nth-child(1) {
		margin-right: var(--logo-year-margin);
	}
	
	/*start-month/day*/
	.title--3 span:nth-child(2) {
		margin-right: var(--logo-openDate-margin);
	}
	
	/*start-DoW*/
	.title--3 span:nth-child(3) {
		margin-right: var(--logo-openWeekday-margin);
	}
	
	
/*haihun*/
	.title--3 span:nth-child(4) {
		position:relative;
		width: var(--logo-haihun-width);
		display:inline-block;
		height:0.75em;
		margin-right: var(--logo-haihun-margin);
	}
	.title--3 span:nth-child(4) div{
		position:absolute;
		background-color:black;
		width:100%;
		height:0.05em;
		top:50%;
		transform:translateY(-50%);
	}
	
	/*end-month/day*/
	.title--3 span:nth-child(5) {
		margin-right: var(--logo-closeDate-margin);
	}

	.logo__wrapper {
		text-decoration: none;
		white-space: nowrap;
	}
	

	.initial__logo .logo__wrapper {
		font-size: 7.6vw;
	}
	.login-footer-subtitle,
	.agree-footer-subtitle
	{
		margin-bottom:2em;
		margin-left:27px;
	}

	.agree__button{
		position:relative;
		width:calc(100%);
		height:2.6em;
		outline:5px solid;
		margin-top: 15px;
		font-size:30px;
		line-height:2.6em;
		text-align:center;
	}

	@media (max-width: 1080px) {

			.agree__button{
			width:calc(100% - 54px);
			margin: 2em auto 3em auto;
		}
	}

	@media (max-width: 400px) {

		.initial__logo .logo__wrapper {
		font-size: 7.4vw;
		}
		#login-form{
			overflow:hidden;
			position:fixed;
		}
		.gd .container{
			height:100dvh;
		}
	}

	.login-footer-subtitle{
			position:fixed;
			left:10px;
			bottom:10px;
			text-align:left;
			font-size: 0.85em;
			line-height: 1.2em;
			letter-spacing: 0.01em;
			margin:0;

		}

			.agree-footer-subtitle{
			position:relative;
			left:20px;
			bottom:10px;
			text-align:left;
			font-size: 0.85em;
			line-height: 1.2em;
			letter-spacing: 0.01em;
			margin:0;

		}