html {
	background: #000;
}
/* body {
	min-width:1040px;
	min-height: 640px;
} */
.splash_wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	top: 0;
	overflow: hidden;
}
/*
.brand_copy_wrapper {
	position: absolute;
	width: 50%;
	height: 15%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 9999;
}
.brand_copy {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.brand_copy.copy_socie {
	background-image: url('../../images/splash/copy_socie.svg');
	opacity: 0;
}
.brand_copy.copy_bytbc {
	background-image: url('../../images/splash/copy_bytbc.svg');
	opacity: 0;
}
.brand_copy.copy_future {
	background-image: url('../../images/splash/copy_future.png');
	opacity: 0;
}
*/
.the_man_wrapper {
	position: absolute;
	width: 50%;
	height: 100vh;
	top: 0;
	right: 0;
	background: #fff;
}

.the_man {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url('../../images/splash/the_man.png');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	opacity: 0;
}
.logo_box_wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
 	background: #fff;
}
.logo_box {
	position: absolute;
	box-sizing: border-box;
 	width: 0%;
 	height: 0%;
}
.logo_box_black {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
}
.logo_box_left {
	border-bottom: solid max(3vw, 3vh) #000;
	border-right: solid max(3vw, 3vh) #000;
	bottom: 0;
	right: 0;
	opacity: 0;
}
.logo_box_right {
	border-top: solid max(3vw, 3vh) #000;
	border-left: solid max(3vw, 3vh) #000;
	top: 0;
	left: 0;
	opacity: 0;
}
.logo_box_wrapper .logo {
	position: absolute;
	width: 238px;
	/*width: 476px;*/
	height: 50px;
	/*height: 100px;*/
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-image: url('../../images/splash/logo.svg');
	background-size: 476px 50px;
	/*background-size: 952px 100px;*/
	background-position-y: 0px;
}
.logo_box_wrapper .logo_black {
	background-position-x: 0px;
	opacity: 0;
}
.logo_box_wrapper .logo_white {
	background-position-x: -238px;
	/*background-position-x: -476px;*/
	opacity: 0;
}


.logo_box_wrapper p.concept {
	width: 85%;
	color: #fff;
	position: absolute;
	line-height: 2.2rem;
	text-align: center;
	font-size: 14px;
	left: 0;
	right: 0;
	margin: auto;
	top: 28%;
	/*bottom: 4%;*/
	opacity: 0;
	/*margin-bottom: 0%;*/

	/*z-index: 9999;*/
}



button.s_button {
	width: 220px;
	height: 30px;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	font-weight: bold;
	font-size: 16px;
	color: #fff;
	/*position: absolute;
	left: 0;
	right: 0;
	margin: auto;*/
	margin: 0 auto;
	border: none;
	border-radius: 5px 5px 5px 5px;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	z-index: 9999;
}
button.s_button:hover {
	filter: brightness(140%) contrast(140%);
}


button.more {
	background: #85010c;
	bottom: 10%;
}
button.more:hover {
	/*bottom: 10.2%;*/
}

button.next {
	background: #8c7b54;
    /*line-height: 90px;*/
	/*bottom: 17%;*/
}
button.next:hover {
	/*bottom: 17.2%;*/
}

.s_button.show_concept {
	bottom: -20%;
}

.sp {
	display: none;
}


/*******************************************************
 ANIMATION
 *******************************************************/
/*
.splash_wrapper.animate .brand_copy.copy_socie {
	animation: ani_fadein 0.5s ease-in 0.0s forwards, ani_fadeout 1.0s ease-out 2.0s forwards;
}
.splash_wrapper.animate .brand_copy.copy_bytbc {
	animation: ani_fadein 0.5s ease-in 3.5s forwards, ani_fadeout 1.0s ease-out 5.5s forwards;
}
.splash_wrapper.animate .brand_copy.copy_future {
	animation: ani_fadein 0.0s ease-in 7.5s forwards, ani_fadeout 1.0s ease-out 10s forwards;
}
*/
.splash_wrapper.animate .logo_box_wrapper .logo_black {
	animation: ani_fadein 0.0s ease-in 0.5s forwards, ani_fadeout 1s linear 3s forwards;
}
.splash_wrapper.animate .logo_box_left {
	animation: logo_anim 1s linear 1s forwards;
}
.splash_wrapper.animate .logo_box_right {
	animation: logo_anim 1s linear 1s forwards;
}
.splash_wrapper.animate .logo_box_wrapper {
	animation: logo_crush 0.5s linear 2.5s forwards;
}
.splash_wrapper.animate .logo_box_black {
	animation: ani_fadein 1s ease-in 3s forwards;
}
.splash_wrapper.animate .logo_box_wrapper .logo_white {
	animation: ani_fadein 1s linear 3s forwards, move_up 0.4s linear 4s forwards;
}
.splash_wrapper.animate .the_man {
	animation: ani_fadein 1s ease-in 2.5s forwards;
}



/*.splash_wrapper.animate .logo_white {
	animation: move_up 0.25s linear 0s forwards;
}

*/

.splash_wrapper.animate .logo_box_wrapper p.concept {
	animation: ani_textin 0.25s ease-in 4.5s forwards;
}


.splash_wrapper.animate .s_button {
	animation: ani_fadein 0s ease-in 4.5s forwards;
}

/*
.splash_wrapper.animate .s_button.show_concept {
	animation: ani_fadein 0s ease-in 0s forwards;
}

.splash_wrapper.animate .logo_box_wrapper .logo_white.show_concept {
	animation: move_up 0.25s linear 0s forwards;
}
.splash_wrapper.animate .logo_box_wrapper p.concept.show_concept {
	animation: ani_textin 0.25s ease-in 0.25s forwards;
}
*/

@keyframes logo_anim {
	0%{
		opacity: 100%;
		width: 0%;
		height: 0%;
	}
	100%{
		opacity: 100%;
		width: 100%;
		height: 100%;
	}
}
@keyframes logo_crush {
	0%{
		width: 100%;
	}
	100%{
		width: 50%;
	}
}
@keyframes ani_fadein {
	0%{
		opacity: 0%;
		visibility: visible;
	}
	100%{
		opacity: 100%;
		visibility: visible;
	}
}
@keyframes ani_fadeout {
	0%{
		opacity: 100%;
	}
	100%{
		opacity: 0%;
	}
}
@keyframes ani_textin {
	0%{
		opacity: 0%;
		visibility: visible;
		/*bottom: 4%;*/
		z-index: 9999;
		/*margin-bottom: 0%;*/
	}
	100%{
		opacity: 100%;
		visibility: visible;
		/*bottom: 8%;*/
		z-index: 9999;
		/*margin-bottom: 12%;*/
	}
}
@keyframes move_up {
	0%{
		top: 0%;
		opacity: 100%;
	}
	100%{
		top: -60%;
		opacity: 100%;
	}
}