@viewport {
	width: 750px;
}



/* reset */
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	-webkit-text-size-adjust: 100% !important;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline:0;
	vertical-align: baseline;
}


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html, body {
	border:0;
	outline:0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	overflow:hidden;
	width:100%;
}

h1,h2,h3,h4,h5,h6  {display:block;}

body  {-webkit-text-size-adjust: 100% !important; font-family: "Microsoft JhengHei", "Microsoft YaHei", Tahoma, Verdana, Arial, Simsun; background-color: #000; transform: translate3d(0, 0, 0)}

ol, ul {
	list-style: none;
}

a  {text-decoration:none;}

:focus {outline: 0;}

.clearfix {zoom:1} 
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


 

/* fonts */
@font-face {
	font-family: 'Conv_Mazda_Bd';
	src: url('../fonts/Mazda_Bd.eot');
	src: local('☺'), url('../fonts/Mazda_Bd.woff') format('woff'), url('../fonts/Mazda_Bd.ttf') format('truetype'), url('../fonts/Mazda_Bd.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_Mazda_Rg';
	src: url('../fonts/Mazda_Rg.eot');
	src: local('☺'), url('../fonts/Mazda_Rg.woff') format('woff'), url('../fonts/Mazda_Rg.ttf') format('truetype'), url('../fonts/Mazda_Rg.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}






/* main stage elements */
#main_stage  {background-color:#000; overflow:hidden; position:relative; width:100%; transition:background-color 500ms ease 400ms;}
	#main_stage > article  {position:relative; width:100%; transform: translate(0px,0px); transition: transform 900ms ease-in-out; overflow:hidden;}


#main_indicator  {position:absolute; top:300px; right:80px; z-index:8000; width:30px; height:200px; overflow:hidden; transition:top 400ms ease, right 400ms ease,opacity 800ms ease; opacity:0;}
	#main_indicator  ul  {display:block; width:25px; height:175px; overflow:hidden;}
		#main_indicator  ul  li  {width:25px; height:25px; margin:0 0 10px 0;}

			#main_indicator  ul  li  p  {display:block; text-indent:-9999px; width:6px; height:6px; transition: all 300ms ease; overflow:hidden; cursor:pointer; border-radius:9px; border:solid 2px #ffffff; background-color:transparent;}
			#main_indicator  ul  li.active p,#main_indicator  ul  li  p:hover  { width:0px; height:0px;border-width:5px;}


	@media (max-width: 750px) {
		#main_indicator  {right:40px;}
	}



#main_menu  {display:block; position:absolute; width:220px; height:43px; overflow:hidden; z-index:10000; top:80px; right:80px; transition: opacity 800ms ease; opacity:0;}
	#main_menu  p#main_menu_menu  {line-height:43px; text-align:center; font-size:15px; color:#fff; display:block; width:110px; height:43px; float:left; cursor:pointer; font-family:"Conv_Mazda_Rg"; transition:all 400ms ease; transform:translate(110px,0px); opacity:1;}
	#main_menu  p#main_menu_menu:hover  {color:#fff !important;}

	#main_menu  p#main_menu_close  {line-height:43px; text-align:center; font-size:15px; color:#fff; display:block; width:110px; height:43px; float:left; cursor:pointer; font-family:"Conv_Mazda_Rg"; transition:all 400ms ease; transform:translate(110px,0px); opacity:0;}
	#main_menu  p#main_menu_close:hover  {color:#fff !important;}

nav#main_menu.active p#main_menu_menu  {transform:translate(0px,0px); opacity:0;}
nav#main_menu.active p#main_menu_close  {transform:translate(0px, 0px); opacity:1;}

nav#main_menulayer  {width:190px; height:43px; top:80px; right:0;background-color:#cc0000; position:absolute; right:-190px; z-index:9000; transition:width 300ms ease, height 300ms  ease-in-out 300ms, right 300ms ease, top 300ms ease 300ms; overflow:hidden;}

	nav#main_menulayer.layerhover  {width:190px; height:43px; top:80px; right:0;}

	nav#main_menulayer.layeractive  {width:750px; top:0; right:0;}

	#main_menulayer  ul  {width:750px; margin:250px 0 0 100px;}
		#main_menulayer  ul  li {width:750px; height:80px;  text-align:left; overflow:hidden; clear:both;}
			#main_menulayer  ul  li  p  {display:block; float:left; height:56px; line-height:56px; font-size:22px; color:#fff; padding:0 0 2px 0; cursor:pointer;border-bottom:solid 4px #cc0000; font-weight:bold; opacity:0; transform: translate(0,50px);}
			#main_menulayer  ul  li  span  {display:block; width:4px; height:4px; background-color:#fff; float:left; margin:29px;opacity:0; transform: translate(0,-50px);}
		#main_menulayer  ul li p:hover  {border-bottom:solid 4px #fff;}

	#main_menulayer i  {position:absolute; left:0; bottom:0; width:0px; opacity:0.3; background-color:#fff; height:0; transition:height 600ms ease-out 600ms, transform 600ms ease-in 1200ms;  transform:translate(0px,0px);}

nav#main_menulayer.layeractive   i  {width:10px; height:70%; transform:translate(0px,-1580px);}

	#main_menulayer  ul  li:nth-child(1)  p  {transition: opacity 500ms ease 1200ms, border-color 400ms ease, transform 500ms ease 1200ms; }
	#main_menulayer  ul  li:nth-child(2)  p  {transition: opacity 500ms ease 1100ms, border-color 400ms ease, transform 500ms ease 1100ms; }
	#main_menulayer  ul  li:nth-child(3)  p {transition: opacity 500ms ease 1000ms, border-color 400ms ease, transform 500ms ease 1000ms;}
	#main_menulayer  ul  li:nth-child(4)  p  {transition: opacity 500ms ease 900ms, border-color 400ms ease, transform 500ms ease 900ms;}
	#main_menulayer  ul  li:nth-child(5)  p  {transition: opacity 500ms ease 800ms, border-color 400ms ease, transform 500ms ease 800ms;}

	#main_menulayer  ul  li:nth-child(1)   span {transition: opacity 500ms ease 1700ms, transform 500ms ease 1700ms;}
	#main_menulayer  ul  li:nth-child(2)   span {transition: opacity 500ms ease 1800ms, transform 500ms ease 1800ms;}
	#main_menulayer  ul  li:nth-child(3)   span  {transition: opacity 500ms ease 1900ms, transform 500ms ease 1900ms;}
	#main_menulayer  ul  li:nth-child(4)   span {transition: opacity 500ms ease 2000ms, transform 500ms ease 2000ms;}
	#main_menulayer  ul  li:nth-child(5)   span  {transition: opacity 500ms ease 2100ms, transform 500ms ease 2100ms;}

nav#main_menulayer.layeractive  ul  li:nth-child(1)  p  {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(2)  p  {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(3)  p  {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(4)  p   {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(5)  p   {opacity:1;transform: translate(0px,0px);}

nav#main_menulayer.layeractive  ul  li:nth-child(1)  span   {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(2)  span  {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(3)  span   {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(4)  span   {opacity:1;transform: translate(0px,0px);}
nav#main_menulayer.layeractive  ul  li:nth-child(5)  span   {opacity:1;transform: translate(0px,0px);}




.content_fullpage  {overflow:hidden; width:100%; position:relative;}
.content_fullpage_bg  {overflow:hidden; position:absolute; z-index:100; width:100%; height:100%; transition:all 700ms ease-out; position:absolute; top:0; left:0;}

.content_fullpage_bg_kv  {overflow:hidden; position:absolute; z-index:100; width:100%; height:100%; transition:all 900ms ease-in-out; position:absolute; top:0; left:0;}

.content_fullpage  section  {z-index:1000; position:relative; overflow:hidden;}




/* logo status */
/* original logo size: 977 x 587 */
/* logo status: original */
#main_logo  {position:absolute; top:0; left:0; z-index:10000; position:absolute; opacity:0; transition: opacity 2500ms ease-in-out;}

	#main_logo  section  {position:absolute; top:0; left:0; width:2273px; height:587px; transform: scale(0.2); transition: transform 2500ms ease; transform-origin:0 0;}
		#main_logo h1  {opacity:0; width:1px; height:1px; visibility:hidden;}
		#main_logo img  {position:absolute; transform-origin:center center; opacity:0;}
		#main_logo p  {position:absolute; width:454px; border-radius:0px; height:1px; overflow:hidden; position:absolute; left:0; bottom:-50px; background-color:#333;}
			#main_logo p  span  {position:absolute; width:0px; border-radius:2px; height:4px; overflow:hidden; position:absolute; left:0; bottom:0; text-indent:-9999px; background-color:#efefef; transition: width 1000ms ease;}

#main_logo_1  {transition: all 1500ms ease-in-out 100ms; transform:scale(1); left:152px; top:0px;}
#main_logo_2  {transition: all 1500ms ease-in-out 200ms; transform:scale(1); left:609px; top:17px;}
#main_logo_3  {transition: all 1500ms ease-in-out 300ms; transform:scale(1); left:841px; top:32px;}
#main_logo_4  {transition: all 1500ms ease-in-out 400ms; transform:scale(1); left:-300px; top:258px;}
#main_logo_5  {transition: all 1500ms ease-in-out 500ms; transform:scale(1); left:252px; top:358px;}
#main_logo_6  {transition: all 1500ms ease-in-out 400ms; transform:scale(1); left:510px; top:504px;}
#main_logo_7  {transition: all 1500ms ease-in-out 500ms; transform:scale(1); left:510px; top:860px;}
#main_logo_8  {transition: all 1500ms ease-in-out 500ms; transform:scale(1); left:512.5px; top:0px;}

#main_logo_1a  {transition: all 1500ms ease-in-out; transform:scale(1); left:152px; top:0px; opacity:0;}
#main_logo_2a  {transition: all 1500ms ease-in-out; transform:scale(1); left:609px; top:17px;opacity:0;}
#main_logo_3a  {transition: all 1500ms ease-in-out; transform:scale(1); left:841px; top:32px;opacity:0; }
#main_logo_4a  {transition: all 1500ms ease-in-out ; transform:scale(1); left:-300px; top:258px;opacity:0;}
#main_logo_5a  {transition: all 1500ms ease-in-out; transform:scale(1); left:252px; top:358px;opacity:0;}
#main_logo_6a  {transition: all 1500ms ease-in-out; transform:scale(1); left:510px; top:504px;opacity:0; }
#main_logo_7a  {transition: all 1500ms ease-in-out; transform:scale(1); left:510px; top:860px;opacity:0; }
#main_logo_8a  {transition: all 1500ms ease-in-out 500ms; transform:scale(1); left:512.5px; top:0px;}



/* logo status: loading */
@keyframes blinking {
	 0% {transform: scale(1.04);}
	 50% {transform: scale(0.97);}
	 100% {	transform: scale(1.04);}
}

header#main_logo.status_loading  {width:454px; height:117px; opacity:1;}
	header#main_logo.status_loading  section  {}
	header#main_logo.status_loading  img  {}
	header#main_logo.status_loading  p  {opacity:1;}

header#main_logo.status_loading  #main_logo_1  {-webkit-animation: blinking 1500ms ease 100ms infinite; left:252px; top:0px;opacity:1;}
header#main_logo.status_loading  #main_logo_2  { left:509px; top:117px;opacity:1;}
header#main_logo.status_loading  #main_logo_3  { left:741px; top:132px;opacity:1;}
header#main_logo.status_loading  #main_logo_4  {-webkit-animation: blinking 1500ms ease 400ms infinite; left:0px; top:258px;opacity:1;}
header#main_logo.status_loading  #main_logo_5  {-webkit-animation: blinking 1500ms ease 500ms infinite; left:252px; top:258px;opacity:1;}
header#main_logo.status_loading  #main_logo_6  {-webkit-animation: blinking 1500ms ease 400ms infinite; left:510px; top:304px;opacity:1;}
header#main_logo.status_loading  #main_logo_7  {-webkit-animation: blinking 1500ms ease 500ms infinite; left:510px; top:460px;opacity:1;}
header#main_logo.status_loading  #main_logo_8  {left:512.5px; top:0px;opacity:1;}


/* logo status: keyvisual */
header#main_logo.status_kv  {width:340px; height:88px; opacity:1;}
	header#main_logo.status_kv  section  {transform:scale(0.15);}
	header#main_logo.status_kv  img  {opacity:1;}
	header#main_logo.status_kv  p  {opacity:0;}

	header#main_logo.status_kv  #main_logo_1  { left:252px; top:0px;}
	header#main_logo.status_kv  #main_logo_2  { left:509px; top:117px;}
	header#main_logo.status_kv  #main_logo_3  { left:741px; top:132px;}
	header#main_logo.status_kv  #main_logo_4  { left:0px; top:258px;}
	header#main_logo.status_kv  #main_logo_5  { left:252px; top:258px;}
	header#main_logo.status_kv  #main_logo_6  { left:510px; top:304px;}
	header#main_logo.status_kv  #main_logo_7  { left:510px; top:460px;}
	header#main_logo.status_kv  #main_logo_8  { left:512.5px; top:0px;}

	header#main_logo.status_kv  #main_logo_1a  { left:252px; top:0px;}
	header#main_logo.status_kv  #main_logo_2a  { left:509px; top:117px;}
	header#main_logo.status_kv  #main_logo_3a  { left:741px; top:132px;}
	header#main_logo.status_kv  #main_logo_4a  { left:0px; top:258px;}
	header#main_logo.status_kv  #main_logo_5a  { left:252px; top:258px;}
	header#main_logo.status_kv  #main_logo_6a  { left:510px; top:304px;}
	header#main_logo.status_kv  #main_logo_7a  { left:510px; top:460px;}
	header#main_logo.status_kv  #main_logo_8a  { left:512.5px; top:0px;}


/* logo status: static */
header#main_logo.status_static  {width:272px; height:70px; opacity:1; left:80px; top:80px;}
	header#main_logo.status_static  section  {transform:scale(0.12);}
	header#main_logo.status_static  img  {opacity:1;}
	header#main_logo.status_static  p  {opacity:0;}

header#main_logo.status_static  #main_logo_1  {left:252px; top:0px;}
header#main_logo.status_static  #main_logo_2  {left:509px; top:117px;}
header#main_logo.status_static  #main_logo_3  {left:741px; top:132px;}
header#main_logo.status_static  #main_logo_4  {left:0px; top:258px;}
header#main_logo.status_static  #main_logo_5  {left:252px; top:258px;}
header#main_logo.status_static  #main_logo_6  {left:510px; top:304px;}
header#main_logo.status_static  #main_logo_7  {left:510px; top:460px;}
header#main_logo.status_static  #main_logo_8  {left:512.5px; top:0px;}


header#main_logo.status_static  #main_logo_1a  {left:252px; top:0px;}
header#main_logo.status_static  #main_logo_2a  {left:509px; top:117px;}
header#main_logo.status_static  #main_logo_3a  {left:741px; top:132px;}
header#main_logo.status_static  #main_logo_4a  {left:0px; top:258px;}
header#main_logo.status_static  #main_logo_5a  {left:252px; top:258px;}
header#main_logo.status_static  #main_logo_6a  {left:510px; top:304px;}
header#main_logo.status_static  #main_logo_7a  {left:510px; top:460px;}
header#main_logo.status_static  #main_logo_8a  {left:512.5px; top:0px;}

/* logo status: zoom */
header#main_logo.status_zoom  {width:400px; height:400px;}




/* section1 */
#content_s1  {opacity:0; transition:opacity 500ms ease;}
div#content_s1.animated  {opacity:1;}

#content_s1  section  {}

#content_s1 .content_fullpage_bg  {background-color:#000;}

#s1_kv_pilot  {width:100%;padding:38vh 0 0 0;position:relative; text-align:center; opacity:0; transition:all 1500ms ease-in-out 500ms; transform: translate(0px,50px); z-index:200;}

	div#content_s1.animated  #s1_kv_pilot  {opacity:1;  transform: translate(0px,0px);}
	#s1_kv_pilot  p  {width:160px; display:block; margin:0 auto; text-align:left; font-size:0.8vw; color:#fff;  font-family:"Conv_Mazda_Rg";}

	@media (max-width: 750px) {
		#s1_kv_pilot  p  {font-size:21px; width:202px;}
	}


div#content_s1.animated  #s1_kv_copy  {opacity:1;  transform: translate(0px,0px);}

#s1_kv_copy  {width:100%;margin:5vh 0 0 0;position:relative; opacity:0; transition:all 1500ms ease-in-out 900ms; transform: translate(0px,50px); z-index:200;}
	#s1_kv_copy  li  {text-align:center; position:absolute; top:0; left:0;width:100%;}
		#s1_kv_copy  li  p  { display:block; width:100%; font-size:0.95vw; line-height:2.2vw; color:#868686; opacity:0; letter-spacing:1em;
		transform:translate(0px,0px) scale(1.5);
		transition:all 1200ms ease 2800ms; 
	}
		#s1_kv_copy  li  span  { display:block; width:100%; font-size:2.5vw; line-height:1.6vw; color:#fff;opacity:0; 
		transform:translate(0px,0px) scale(1.5); 
		transition: all 1200ms ease 2500ms;  font-family:"Conv_Mazda_Bd";
	}

		#s1_kv_copy  li  span  br  {display:none;}

	@media (max-width: 750px) {

		#s1_kv_copy  li  span  {font-size:35px; line-height:52px;}
		#s1_kv_copy  li  p  {font-size:18px;}
		#s1_kv_copy  li  span  br  {display:block;}
	}



		#s1_kv_copy  li.active  p  { opacity:1;transform:translate(0px,0px) scale(1);}
		#s1_kv_copy  li.active  span  { opacity:1;transform:translate(0px,0px) scale(1);}


@keyframes s1_scrollmotion {
	 0% {opacity:0;top:8px;}
	 50% {opacity:1;top:8px;}
	 100% {	opacity:0;top:14px;}
}

#s1_scroll  {width:100%;margin:15vh 0 0 0;position:relative; text-align:center; z-index:200;}

	#s1_scroll  span  {display:block; width:19px; height:37px; position:relative; margin:0 auto; overflow:hidden;  border-radius:10px; background-color:#fff;}
		#s1_scroll  span i  {text-indent:-9999px;overflow:hidden; border-radius: 4px; background-color:#000; width:5px; height:5px; position:absolute; top:8px; left:7px; 
		-webkit-animation: s1_scrollmotion; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 1s; 
		animation: s1_scrollmotion; animation-iteration-count: infinite;  animation-duration: 1s; 
		-ms-animation: s1_scrollmotion; -ms-animation-iteration-count: infinite;  -ms-animation-duration: 1s; 		
		}

#s1_wave{	width:100px; height:100px; position: absolute; top:0; left:0;	margin:0 auto; z-index:100; }
	#s1_wave .curve  {width: 0;height: 0;	top: 50vh;	left: 50vw;	opacity:0;	position: absolute; border-radius: 55%;animation: ani_s1_wave 10s ease-in infinite;	background:transparent;	border:solid 1px #fff; z-index:101;}

	#s1_wave  span  {display:block; width:35%; height:35%;border-radius: 55%; background-color:#000; z-index:102; position:relative;  animation: ani_s1_circle 20s linear infinite; transform-origin:50% 50%;}
	#s1_wave .curve1{	-webkit-animation-delay: 0s;animation-delay: 0s;}
	#s1_wave .curve2{	-webkit-animation-delay: 2s;animation-delay: 2s;}
	#s1_wave .curve3{	-webkit-animation-delay: 4s;animation-delay: 4s;}
	#s1_wave .curve4{	-webkit-animation-delay: 6s;animation-delay: 6s;}
	#s1_wave .curve5{	-webkit-animation-delay: 8s;animation-delay: 8s;}
	#s1_wave .curve6{	-webkit-animation-delay: 10s;animation-delay: 10s;}

@keyframes ani_s1_circle{
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}


@keyframes ani_s1_wave{
	0% {
		width: 0;
		height: 0;
		top: 50%;
		left: 50%;
		opacity:0;
		filter:blur(0px);
	}

	45% {
		opacity:0.3;
		filter:blur(0px);
	}

	100% {
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		opacity:0;
		filter:blur(3px);
	}
}


#s1_mask  {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../images/s1_mask.png") repeat 0 0; z-index:170;}

/* s1 shape */
#s1_shape {
  perspective: 800px;
  position: absolute;
  top:0px;
  left:0px;
  overflow: hidden;
  width: 100%;
  height:100%;
  background: transparent;
  font-size: 100%;
  z-index:150; -webkit-transform-style: preserve-3d;

}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d; 

}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;

  animation: ani_shape1 65s linear infinite;


}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;  -webkit-backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="pyramid"] .face-wrapper .face {
  transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
}
[class*="pyramid"] .bk {
  left: 100%;
}
[class*="pyramid"] .bm {
  top: 100%;
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="pyramid"] .rt, [class*="pyramid"] .lt {
  transform-origin: 50% 0;
}
/* .pyr-1 styles */
.pyr-1 {
  transform:translate3D(0.0625em, 7.625em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:10.625em;
  height:15.25em;
  margin:-7.625em 0 0 -5.3125em;
}
.pyr-1 .face-wrapper {
  width:10.625em;
  height:5.3125em;
}
.pyr-1 .face-wrapper .face {
  width:10.625em;
  height:10.625em;
}
.pyr-1 .ft {
  transform:scaleZ(3.0397823633623835) scaleY(3.0397823633623835) rotateX(19.20632641829548deg);
}
.pyr-1 .bk {
  transform:scaleZ(3.0397823633623835) scaleY(3.0397823633623835) rotateX(-19.20632641829548deg) rotateY(180deg);
}
.pyr-1 .rt {
  transform:scaleX(3.0397823633623835) scaleY(3.0397823633623835) rotateZ(19.20632641829548deg) rotateY(-90deg);
}
.pyr-1 .lt {
  transform:scaleX(3.0397823633623835) scaleY(3.0397823633623835) rotateZ(-19.20632641829548deg) rotateY(90deg);
}
.pyr-1 .bm {
  width:10.625em;
  height:10.625em;
}
.pyr-1 .face {
  background-color:rgba(255,255,255,1);
}
.pyr-1 .ft > div {
  background-color:rgba(25,25,25,1);
}
.pyr-1 .bk > div {
  background-color:rgba(55,55,55,1);
}
.pyr-1 .bm {
  background-color:rgba(95,95,95,1);
}
.pyr-1 .lt > div {
  background-color:rgba(125,125,125,1);
}
.pyr-1 .rt > div {
  background-color:rgba(215,215,215,1);
}


/* .pyr-2 styles */
.pyr-2 {
  transform:translate3D(0.0625em, -5.75em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:9.749999999999998em;
  height:11.75em;
  margin:-5.875em 0 0 -4.874999999999999em;
}
.pyr-2 .face-wrapper {
  width:9.749999999999998em;
  height:4.874999999999999em;
}
.pyr-2 .face-wrapper .face {
  width:9.749999999999998em;
  height:9.749999999999998em;
}
.pyr-2 .ft {
  transform:scaleZ(2.609470437307562) scaleY(2.609470437307562) rotateX(22.53325007900427deg);
}
.pyr-2 .bk {
  transform:scaleZ(2.609470437307562) scaleY(2.609470437307562) rotateX(-22.53325007900427deg) rotateY(180deg);
}
.pyr-2 .rt {
  transform:scaleX(2.609470437307562) scaleY(2.609470437307562) rotateZ(22.53325007900427deg) rotateY(-90deg);
}
.pyr-2 .lt {
  transform:scaleX(2.609470437307562) scaleY(2.609470437307562) rotateZ(-22.53325007900427deg) rotateY(90deg);
}
.pyr-2 .bm {
  width:9.749999999999998em;
  height:9.749999999999998em;
}
.pyr-2 .face {
  background-color:rgba(255,255,255,1);
}
.pyr-2 .ft > div {
  background-color:rgba(25,25,25,1);
}
.pyr-2 .bk > div {
  background-color:rgba(55,55,55,1);
}
.pyr-2 .bm {
  background-color:rgba(95,95,95,1);
}
.pyr-2 .lt > div {
  background-color:rgba(125,125,125,1);
}
.pyr-2 .rt > div {
  background-color:rgba(215,215,215,1);
}




@keyframes ani_shape1 {
  from {
    transform:  scale(1.5)rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: scale(1.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg) ;
  }
}



#s1_license  {position:absolute; bottom:10px; width:100%; text-align:center; z-index:200;}
	#s1_license  a  {text-decoration:none; font-size:12px; color:#666;}





/* section2 */
#content_s2  {}
#content_s2 .content_fullpage_bg  {background-color:#fff;}

#s2_para  {margin:10px 20vw 0 20vw; color:#fff;}
	#s2_para   h2  {color:#000; font-size:30px; line-height:35px; font-family:"Conv_Mazda_Bd"; opacity:0; transform:translate(0px,50px); transition: all 500ms ease 1000ms;}
	#s2_para   h3  {color:#000; font-size:20px; line-height:35px; opacity:0; transform:translate(0px,50px); transition: all 500ms ease 1200ms;}
	#s2_para   p  {color:#000; font-size:14px; line-height:22px; padding:20px 0 0 0; opacity:0; transform:translate(0px,50px); transition: all 500ms ease 1400ms;}

	#s2_divider   {width:100%; height:26px; text-align:center; margin:50px 0 0 0;background:url("../images/s2_divider.gif") repeat-x 0 0; opacity:0; transform:translate(0px,50px); transition: all 500ms ease 1600ms;}
		#s2_divider  h4  {width:260px; overflow:hidden; color:#000; font-size:16px; line-height:26px; padding:0 10px; background-color:#fff;margin:0 auto; font-family:"Conv_Mazda_Bd"; }

	#s2_para  ul  {width:100%; margin:15px 0 0 0; opacity:0; transform:translate(0px,50px); transition: all 500ms ease 1800ms;}
		#s2_para  ul  li  {float:left; width:12.5%; text-align:center;}
			#s2_para  ul  li  img  {margin:0 auto; transform:scale(1); transform-origin:center top; max-width:100%;}

	div#content_s2.animated  h2  {transform:translate(0px,0px); opacity:1;}
	div#content_s2.animated  h3  {transform:translate(0px,0px); opacity:1;}
	div#content_s2.animated  p  {transform:translate(0px,0px); opacity:1;}
	div#content_s2.animated  #s2_divider  {transform:translate(0px,0px); opacity:1;}
	div#content_s2.animated  ul  {transform:translate(0px,0px); opacity:1;}

	@media (max-width: 1500px) {
		#s2_para  ul  li  img  {transform:scale(0.6);}
	}

	@media (max-width: 750px) {
		#s2_para  {margin:50px 8vw 0 8vw;}
		#s2_para  ul  li  {width:25%;}
		#s2_para  ul  li  img  {transform:scale(0.8);}
		#s2_para   p  {font-size:20px; line-height:26px;} 
	}


#s2_logo  {width:440px; height:440px; position:relative; margin:0 auto; overflow:hidden; z-index:200;}

	#s2_logo_img  {position:absolute; top:50%; left:0; max-width:60%; z-index:200; transform:translateY(-50%);}
	#s2_logo_bg  {position:absolute; top:0; left:0; width:100%; height:100%;  animation: ani_s2_logo 65s linear infinite; z-index:190; opacity:0.7;}

	@keyframes ani_s2_logo {
		 0% {transform: rotate(0deg)}
		 100% {	transform: rotate(360deg);}
	}

#s2_wave{	width:100px; height:100px; position: absolute; top:0; left:0;	margin:0 auto; z-index:100; }
	#s2_wave .curve  {width: 0;height: 0;	top: 50vh;	left: 50vw;	opacity:0;	position: absolute; border-radius: 55%;animation: ani_s1_wave 10s ease-in infinite;	background:transparent;	border:solid 1px #666; z-index:101;}

	#s2_wave .curve1{	-webkit-animation-delay: 0s;animation-delay: 0s;}
	#s2_wave .curve2{	-webkit-animation-delay: 2s;animation-delay: 2s;}
	#s2_wave .curve3{	-webkit-animation-delay: 4s;animation-delay: 4s;}
	#s2_wave .curve4{	-webkit-animation-delay: 6s;animation-delay: 6s;}
	#s2_wave .curve5{	-webkit-animation-delay: 8s;animation-delay: 8s;}
	#s2_wave .curve6{	-webkit-animation-delay: 10s;animation-delay: 10s;}
 



/* section3 */
#content_s3  {}

	#content_s3  ul  {width:100%;margin:12% 0 0 0;}
		#content_s3  ul  li  {width:23%; float:left; padding:0 5% 0 5%; text-align:center;height:370px; position:relative; }
			#content_s3  ul  li   img  {margin:0 auto 21px auto; width:6vw; height:6vw;}
			#content_s3  ul  li   h2  {color:#333; font-size:1.34vw; line-height:1.6vw; font-family:"Conv_Mazda_Rg";}
			#content_s3  ul  li   h3  {color:#333; font-size:16px; line-height:1.4vw;}
			#content_s3  ul  li   p  { text-align:left; color:#333; font-size:13px; line-height:19px; padding:5% 0 0 0;}
			#content_s3  ul  li   span  {display:block; font-size:14px; line-height:28px; text-align:center;  width:90px; height:28px; background-color:#333; color:#fff; border-radius:8px; transition:all 500ms ease-in-out; margin:20px auto 0 auto; cursor:pointer;}
			#content_s3  ul  li   span:hover  {border-radius:0; background-color:#000;}

			#content_s3  ul  li   div  { position:absolute; left:0; bottom:0; width:100%; text-align:center;}

			#content_s3  ul  li:nth-child(1)  {opacity:0; transition: all 600ms ease 1000ms; transform:translate(0,100px);}
			#content_s3  ul  li:nth-child(2)  {opacity:0; transition: all 600ms ease 1200ms; transform:translate(0,100px);}
			#content_s3  ul  li:nth-child(3)  {opacity:0; transition: all 600ms ease 1400ms; transform:translate(0,100px);}
	 
		div#content_s3.animated   ul  li:nth-child(1)  {opacity:1; transform:translate(0px,0px);}
		div#content_s3.animated   ul  li:nth-child(2)  {opacity:1; transform:translate(0px,0px);}
		div#content_s3.animated   ul  li:nth-child(3)  {opacity:1; transform:translate(0px,0px);}




@media (max-width: 750px) {
	#content_s3  ul  {margin:5vh 0 0 0;}
		#content_s3  ul  li  {width:100%; float:none; padding:5% 0 5% 0; text-align:center; height:auto;}
			#content_s3  ul  li   img  {margin:0 auto 0 auto; width:19vw; height:19vw;}
			#content_s3  ul  li   h2  {font-size:28px; line-height:30px; font-family:"Conv_Mazda_Bd";}
			#content_s3  ul  li   h3  {font-size:22px; line-height:30px; letter-spacing:1em;}
			#content_s3  ul  li   p  { display:none;}
			#content_s3  ul  li   span  {display:block; font-size:22px; line-height:45px; text-align:center;  width:120px; height:45px; background-color:#333; color:#fff; border-radius:0; transition:all 500ms ease-in-out; margin:5px auto 0 auto; cursor:pointer; }
			#content_s3  ul  li   span:hover  {border-radius:0; background-color:#000;}

			#content_s3  ul  li   div  { position:static;}
}

#content_s3 .content_fullpage_bg  {background:url("../images/s3_bg.jpg") no-repeat 0 0 #cc0000;background-size:cover;}




/* section4 */
#content_s4  {}


#content_s4  ul  {width:100%;margin:12% 0 0 0;}
	#content_s4  ul  li  {width:23%; float:left; padding:0 5% 0 5%; text-align:center; height:390px; position:relative;}
		#content_s4  ul  li   img  {margin:0 auto 21px auto; width:6vw; height:6vw;}
		#content_s4  ul  li   h2  {color:#ccc; font-size:1.35vw; line-height:1.6vw; font-family:"Conv_Mazda_Rg";}
		#content_s4  ul  li   h3  {color:#ccc; font-size:16px; line-height:1.4vw;}
		#content_s4  ul  li   p  { text-align:left; color:#ccc; font-size:13px; line-height:19px; padding:5% 0 0 0;}
		#content_s4  ul  li   span  {display:block; font-size:14px; line-height:28px; text-align:center;  width:90px; height:28px; background-color:#ccc; color:#333; border-radius:8px; transition:all 500ms ease-in-out; margin:20px auto 0 auto; cursor:pointer;}
		#content_s4  ul  li   span:hover  {border-radius:0; background-color:#fff;}

		#content_s4 ul  li   div  { position:absolute; left:0; bottom:0; width:100%; text-align:center;}

		#content_s4  ul  li:nth-child(1)  {opacity:0; transition: all 600ms ease 1000ms; transform:translate(0,100px);}
		#content_s4  ul  li:nth-child(2)  {opacity:0; transition: all 600ms ease 1200ms; transform:translate(0,100px);}
		#content_s4  ul  li:nth-child(3)  {opacity:0; transition: all 600ms ease 1400ms; transform:translate(0,100px);}
 
	div#content_s4.animated   ul  li:nth-child(1)  {opacity:1; transform:translate(0px,0px);}
	div#content_s4.animated   ul  li:nth-child(2)  {opacity:1; transform:translate(0px,0px);}
	div#content_s4.animated   ul  li:nth-child(3)  {opacity:1; transform:translate(0px,0px);}


@media (max-width: 750px) {
	#content_s4  ul  {margin:5vh 0 0 0;}
		#content_s4  ul  li  {width:100%; float:none; padding:5% 0 5% 0; text-align:center; height:auto;}
			#content_s4  ul  li   img  {margin:0 auto 0 auto; width:19vw; height:19vw;}
			#content_s4  ul  li   h2  {font-size:28px; line-height:30px; font-family:"Conv_Mazda_Bd";}
			#content_s4  ul  li   h3  {font-size:22px; line-height:30px; letter-spacing:1em;}
			#content_s4  ul  li   p  { display:none;}
			#content_s4  ul  li   span  {display:block; font-size:22px; line-height:45px; text-align:center;  width:120px; height:45px; background-color:#ccc; color:#333; border-radius:0; transition:all 500ms ease-in-out; margin:5px auto 0 auto; cursor:pointer;}
			#content_s4  ul  li   span:hover  {border-radius:0; background-color:#fff;}
			#content_s4  ul  li   div  { position:static;}

}

#content_s4 .content_fullpage_bg  {background:url("../images/s4_bg.jpg") no-repeat 0 0 #cc0000;background-size:cover;}




/* section5 */
#content_s5  {}

	#content_s5  section  {}

	#s5_column  {width:520px; margin:150px auto 0 auto; z-index:1000;color:#fff;transform: translateZ(120px); position:relative;}

		#s5_column > div:nth-child(1)  {float:left; width:400px; opacity:0; transform:translate(0px,50px); transition: all 600ms ease 1000ms;}
		#s5_column > div:nth-child(2)  {float:left; width:120px; opacity:0; transform:translate(0px,50px); transition: all 600ms ease 1400ms;}

			#s5_column > div	h2  {color:#fff; font-size:30px; line-height:35px; font-family:"Conv_Mazda_Bd";}
			#s5_column > div  h3  {color:#fff; font-size:20px; line-height:35px;}
			#s5_column > div  p  {color:#fff; font-size:14px; line-height:22px; padding:20px 0 0px 0;}
			#s5_column > div  a  {color:#fff; text-decoration:none; font-size:14px;}
			#s5_column > div  a:hover  {text-decoration:underline;}

			

		div#content_s5.animated  #s5_column > div:nth-child(1)  {transform:translate(0px,0px); opacity:1;}
		div#content_s5.animated  #s5_column > div:nth-child(2)  {transform:translate(0px,0px); opacity:1;}

		#s5_column > div:nth-child(2)  img:nth-child(1)  {margin:90px 0px 18px 20px; width:100px; height:100px;}
		#s5_column > div:nth-child(2)  img:nth-child(2)  {margin:0px 0px 10px 20px; width:100px; height:100px;}


#content_s5 .content_fullpage_bg  {background:url("../images/s5_bg.jpg") no-repeat 0 0 #cc0000;background-size:cover;}

@media (max-width: 750px) {

	#s5_column  {margin:145px 8vw 0 8vw; width:auto;}

		#s5_column > div:nth-child(1)  {float:none; width:750px;}
		#s5_column > div:nth-child(2)  {float:none; width:750px;}		

		#s5_column > div:nth-child(2)  img:nth-child(1)  {margin:20px 20px 0px 0px;}
		#s5_column > div:nth-child(2)  img:nth-child(2)  {margin:20px 0px 0px 0px;}

		#s5_column > div	h2  { font-size:30px; line-height:35px;}
		#s5_column > div  h3  { font-size:20px; line-height:35px;}
		#s5_column > div  p,#s5_column > div  p a  {font-size:20px; line-height:26px;}
		

}


/* section5 shapes */
#s5_shape1  {
	transform: scale(1.5) translate(0,100px); transform-origin: 0 0; 
	position:absolute; top:10vh;   left:0px; width:600px; height:600px;
	overflow:hidden;
	z-index:900;
	filter:blur(3px);
	opacity:0;
	transition:all 1500ms ease 1000ms;
}

#s5_shape2  {
	transform: scale(0.5) translate(0,50px); transform-origin: 0 0; 
	position:absolute; top:40vh; right:0px; width:600px; height:600px; 
	overflow:hidden;
	z-index:900;
	filter:blur(1px);
	opacity:0;
	transition:all 1500ms ease 1400ms;
}

div#content_s5.animated  #s5_shape1  {transform: scale(1.5) translate(0px,0px); opacity:0.8;} 
div#content_s5.animated  #s5_shape2  {transform:scale(0.5) translate(0px,0px); opacity:0.8;} 


@media (max-width: 750px) {

	div#content_s5.animated  #s5_shape1  {transform: scale(1) translate(0px,0px); } 
	div#content_s5.animated  #s5_shape2  {transform:scale(0.25) translate(0px,0px); top:60vh;} 

}


.pyramid {
    position: relative;
	top:40px;
    height: 400px;
    width: 100px;
	margin:0 auto;
    transform-style: preserve-3d;
    transform-origin: 116px 200px 116px;

}


.pyramid_spin1  {

    animation: spin 165s linear infinite;

}


.pyramid_spin2  {

    animation: spin 365s linear infinite;

}


@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

.pyramid > div {
    position: absolute;
    border-style: solid;
    border-width: 200px 0 200px 346px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    transform-origin:         0 0;
}

.pyramid > div:first-child  {
    border-color: transparent transparent transparent rgba(50, 50, 50, 0.3);
    -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
    -moz-transform:    rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
    -ms-transform:     rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
    transform:         rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
}

.pyramid > div:nth-child(2) {
    border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);
    -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
    -moz-transform:    rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
    -ms-transform:     rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
    transform:         rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
}

.pyramid > div:nth-child(3) {
    border-color: transparent transparent transparent rgba(50, 50, 50, 0.7);
    -webkit-transform: rotateX(60deg) rotateY(19.5deg);
    -moz-transform:    rotateX(60deg) rotateY(19.5deg);
    -ms-transform:     rotateX(60deg) rotateY(19.5deg);
    transform:         rotateX(60deg) rotateY(19.5deg);
}

.pyramid > div:nth-child(4) {
    border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
    -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
    -moz-transform:    rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
    -ms-transform:     rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
    transform:         rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
}





/* layer: video */
#layer_video  {z-index:20000; position:absolute; top:50px; left:-2750px; overflow:hidden; box-shadow: 0 0  1px 1px #666; background-color:#fff; transition: transform 500ms ease, opacity 500ms ease; transform: scale(0.95); opacity:0;}
	#layer_video iframe  {width:100%; margin:40px 0 0 0;}
	#layer_video  span  {position:absolute; top:0; right:0; font-size:16px; width:110px; height:40px; line-height:40px; text-align:center; color:#666; cursor:pointer; font-family:"Conv_Mazda_Bd";}
	#layer_video  p  {display:none;}

@media (max-width: 750px) {
	#layer_video  p  {display:block; font-size:24px; line-height:32px; padding:10%;}
}





/* cache */
#imagecache  {
	opacity:0; 
	overflow:hidden; 
	width:0px; 
	height:0px;
	/* background: url("../images/video/1.jpg"),
	url("../images/video/2.jpg"),
	url("../images/video/39.jpg"),
	url("../images/video/40.jpg"),
	url("../images/video/41.jpg"); */
}