@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanssc.css);

#preload { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100vw; height: 100vh; z-index: 999999; }
#preload .loading { position: absolute; width: auto; height: auto; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }

html, body{padding:0;margin:0;font-family: 'noto sans', arial, san-serif;color:#CAC4C1;}

.landing{
	display: block;
	position: relative;
	height: 100vh;
	min-height: 550px;
	width: 100%;
	top: 0;
	left: 0;
}
.landing .bg-img{
	position: absolute;
	height: 100%;
	width: 100%;
}
.landing .bg-img #bg1{
	z-index: 1;
	opacity: 1;
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-image: url('../images/landing_default_v3.jpg');
}
.landing .bg-img #bg1_spark{
	z-index: 2;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-image: url('../images/landing_default_v3_spark.png');
	animation: sparkFlash 2s alternate infinite;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}
.landing .bg-img #bg2{
	z-index: 4;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-image: url('../images/landing_phase1.jpg');
}
.landing .bg-img #bg2_spark{
	z-index: 5;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-image: url('../images/landing_phase1_spark.png');
	animation: sparkFlash 2s alternate infinite;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}
.landing .bg-img #bg3{
	z-index: 4;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center bottom;
	background-image: url('../images/landing_phase2.jpg');
}
.landing .bg-img #bg3_spark{
	z-index: 5;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center bottom;
	background-image: url('../images/landing_phase2_spark.png');
	animation: sparkFlash 2s alternate infinite;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}

@keyframes sparkFlash {
	0% {opacity:0}
	100% {opacity:1}
}

.landing .bg-img .img{
transition: opacity 1.2s ease;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;}
.landing .bg-img .img._hover{opacity: 1 !important}

.bars{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
.bars .bar{
	position: absolute;
	height: 100%;
	width: 280px;
	max-width: 50%;
	font-size: 12px;
	line-height: 1.2em;
	text-align: center;
}
.bars .bar.phase1{
	top:0;
	left:0;
	background-image: url('../images/pattern_p1.png');
	background-repeat: repeat;
	background-position: top left;
	background-size: 15px;
}
.bars .bar.phase2{
	top:0;
	right:0;
	background-image: url('../images/pattern_p2.jpg');
	background-repeat: repeat;
	background-position: top left;
	background-size: 15px;
}
.bars .bar .logo{
	display: inline-block;
	margin-top: 40vh;
	width: 350px;
	max-width: 81%;
	height: 72px;
	position: relative;
}

.bars .bar.phase2 .logo{
	width:94%;
}
.bars .bar .logo img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* cursor: pointer; */
}
.bars .bar .disclaimer{
	position: absolute;
	display: inline-block;
	padding: 15px;
	left: 0;
	bottom: 10px;
	text-align: center;
	font-weight: 300;
}
.disclaimer span.mobile{
	display: none;
}
.bars .bar.phase1 .logo .glow,
.bars .bar.phase2 .logo .glow{
	opacity: 0;
	transition: opacity .5s ease;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
}
.bars .bar.phase1:hover .logo .glow,
.bars .bar.phase2:hover .logo .glow{
	opacity: 1;
}

.landing .img-disclaimer{
	position: absolute;
	width: calc(100% - 590px);
	left: 50%;
	bottom: 10px;
	transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	font-size: 12px;
	font-weight: 200;
	transition: opacity 1.2s ease
}
.landing .disclaimer-notice{
	font-size:1.1rem;
	line-height:1.2rem;
	margin-bottom:30px;
}
@media (max-width: 992px){
	.landing .img-disclaimer{font-size: 10px;}
}
@media (max-width: 720px){
	.landing .img-disclaimer{font-size: 8px;}
}
.landing .img-disclaimer#img-dis1{z-index: 3; opacity: 1}
.landing .img-disclaimer#img-dis2,
.landing .img-disclaimer#img-dis3{z-index: 6; opacity: 0}
/* .landing .img-disclaimer#img-dis3-m.mobile{z-index: 6;  opacity: 0; display: none} */
.landing .img-disclaimer._hover{opacity: 1 !important}

@media (max-width: 960px){
	.bars .bar{
		width: 200px;
	}
	.landing .img-disclaimer{
		width: calc(100% - 420px);
	}
}

@media (max-width: 640px){
	.landing .bg-img{
		height: 52vh;
		top: 24vh;
	}
	.bars .bar{
		width: 100%;
		max-width: 100%;
		height: 230px;
		height: 25vh;
		font-size: 10px;
	}
	.bars .bar.phase2{
		top: auto;
		bottom: 0;
	}
	.bars .bar .logo{
		margin-top: 10px;
		height: calc(22vh - 70px);
	}
	.bars .bar .logo img{
		width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
	}
	.bars .bar .disclaimer{
		line-height: 1.1em;
		padding: 0 15px;
		bottom: 10px;
	}
	.bars .bar .disclaimer span.mobile{
		display: inline-block;
	}
	.bars .bar .disclaimer br.mobile{
		display: none;
	}
	.landing .img-disclaimer{
		width: 98%;
		bottom: 12px;
	}
	.landing .img-disclaimer#img-dis3{
		bottom: 20px;
		/* bottom: inherit; */
		/* display: none; */
	}
	/* .landing .img-disclaimer#img-dis3-m.mobile{ */
		/* top: 20px; */
		/* bottom: inherit; */
		/* display: block} */
		
	.landing .disclaimer-notice{
		font-size:unset;
		line-height:unset;
		margin-bottom:unset;
	}
}