@charset "utf-8";
/* CSS Document */

#container{width:100%; height:100%; margin:0; padding:0; position:relative;}
.intro_slogan{width:636px; height:392px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -318px; z-index:999; background:url(../images/slogan.png) no-repeat; text-indent:-9999px; background-size:100%}
.trigger{ z-index:999; position:absolute}
.header{ overflow:hidden;width: 100%;height: 100%;}
.cover{width:100%; height:100%;  position:absolute; overflow:hidden; background:url(../images/cover.png); z-index:998; text-indent:-9999px}









/* Trigger Button */
button.trigger {position: fixed;bottom: -80px;left: 50%;z-index: 5000;display: block;margin-left: -127px;padding:0;width:254px;height:298px;border:none;background:transparent;color:transparent;cursor: pointer;}
button.trigger:focus {outline: none;}
button.trigger span {position: relative;display: block;overflow: hidden;width: 254px;height: 298px; margin:0; padding:0;; top:80px; left:0}
button.trigger span::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: url(../images/trigger.png);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
button.trigger.en span::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: url(../images/trigger_en.png);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
button.trigger.ch span::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: url(../images/trigger_cn.png);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
button.trigger.jp span::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: url(../images/trigger_jp.png);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
button.trigger span.ipad::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: url(../images/trigger2.png);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.container:not(.notrans) button.trigger {-webkit-transition: opacity 0.3s 0.5s;transition: opacity 0.3s 0.5s;}
.container.modify:not(.notrans) button.trigger {opacity: 0;pointer-events: none;-webkit-transition-delay: 0s;transition-delay: 0s;}



.trigger.mobile span::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: url(../images/trigger2.png) !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}


@media screen and (max-width:960px){
video {  
   height:100%;  
   background:transparent url(../images/m_intro.jpg) no-repeat center; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
   
}
.intro_slogan{width:100%; margin:0; top:25%; left:0;background-size:80%; background-position:center top}	
button.trigger span::before {transform: scale(.6);}

}


/* -------------------------- */
/* Push */
/* -------------------------- */
.intro-effect-push:not(.notrans) .header,
.intro-effect-push:not(.notrans) > .title,
.intro-effect-push:not(.notrans) .content > div {
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
}

.intro-effect-push:not(.notrans) .header {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transition-duration: 1.2s;
	transition-duration: 1.2s;
}

.intro-effect-push .codrops-demos a {
	color: #108576;
}

.intro-effect-push .header {
	position: absolute;
	z-index: 1;
}

.intro-effect-push > .title {
	position: relative;
	top: auto;
	left: auto;
	padding: 6em 1em 2em;
}

.intro-effect-push .content > div {
	color: #fff;
}

.intro-effect-push > .title,
.intro-effect-push .content > div {
	-webkit-transform: translateY(400px);
	transform: translateY(400px);
	opacity: 0;
}

.intro-effect-push.modify > .title,
.intro-effect-push.modify .content > div {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.intro-effect-push.modify .header {
	opacity: 0;
	-webkit-transform: translateY(-100%) scale(0.9);
	transform: translateY(-100%) scale(0.9);
}

/* Delays */
.intro-effect-push.modify:not(.notrans) > .title {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.intro-effect-push.modify:not(.notrans) .content > div {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}