@charset "utf-8";

/* ----------------------------------------------
 css reset */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
table {	border-collapse: collapse;border-spacing: 0;}

/* ----------------------------------------------
 page css */
html{overflow-y:scroll;}
body{font-size:12px; line-height:1.8em; width:100%; height:100%; overflow:hidden;
	background:#000;
	background:-webkit-gradient(radial, center center, 0, center center, 100, from(#1C232B), to(#000000));
	background:-webkit-radial-gradient(center, circle cover, #1C232B 0%, #000000 100%);
	background:-moz-radial-gradient(center, circle cover, #1C232B 0, #000000 100%);
	background:-ms-radial-gradient(center, circle cover, #1C232B 0, #000000 100%);
	background:-o-radial-gradient(center, circle cover, #1C232B 0, #000000 100%);
	background:radial-gradient(#1C232B 0, #000000 100%);
}

/* movie */
#sectionMovie{ width:100%; position: absolute; left:0; top:0; z-index:40; overflow: hidden; background:#000;
opacity:0.45;filter: alpha(opacity=45);-ms-filter: "alpha(opacity=45)";-moz-opacity:0.45;-khtml-opacity: 0.45; }
#movieCover{width:100%; height:100%;position: absolute; left:0; top:0; z-index:41; background:url(../img/bg_b8.png) repeat; background-attachment:fixed;}

#container{ width:100%; height:100%; position:relative; z-index:50;}
#wrapper{text-align:center; width:100%;height:100%; position:relative; z-index:50;}


h1{ font-size:14px;font-family: 'Oswald', sans-serif; color:#222; margin:0px auto; text-align:center; width:100%; position: fixed; left:0; bottom:40px;}


#mainvisiWrap .image-area li a span.info span.txt{ margin-left:20px; color:#E5E5E5;
text-shadow: 0 0 10px #000, 0 0 12px #000, 0 0 0.40px #000;
behavior: url("/share/css/PIE.htc");}

footer{ text-align:center;position: fixed; left:0; bottom:20px; width:100%;}
footer #copy{ color:#222; font-size:9px;font-family: 'Oswald', sans-serif;}


/*---------- DOTS ----------
*/
#sectionDots{
	overflow:hidden;
	perspective: 50px; -webkit-perspective: 50px; -moz-perspective: 50px; -ms-perspective: 50px;
	transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%;
	width:100%; position: absolute; left:0; top:0; z-index:40; overflow: hidden; /*background:#000;*/
	opacity:0.75;filter: alpha(opacity=75);-ms-filter: "alpha(opacity=75)";-moz-opacity:0.75;-khtml-opacity: 0.75;
}
#sectionDotsInner{}

.dot {
	position: fixed;width: 25px;height: 25px;
	border-radius: 25px;behavior: url("/share/css/PIE.htc");
	background-color: #22ACE3;
}

/*---------- SVG ----------
*/
#sectionSVG{ width:100%;  margin: 0 auto; text-align:center; overflow:hidden; text-align:center;position: absolute; left:0; top:50%;margin-top:-12%; z-index:55;}
#sectionSVGWrap{ position:relative;width:100%;overflow:hidden;}
#svgTMZ10{ width:60%; margin:0 auto;}
#svgLayer{ text-align:center; position:absolute; left:0; top:50%; margin-top:-12%;/*margin-top:140px;*/}
#svgLayer .path{    
	stroke:#444;
	fill: #000; fill-opacity:0.6;
	stroke-width:0.5;
	stroke-dasharray: 1000;
	stroke-dashoffset:1000;

	-moz-animation:DASH 4s ease-in-out .5s forwards;
	-webkit-animation:DASH 4s ease-in-out .5s forwards;
	-o-animation:DASH 4s ease-in-out .5s forwards;
	-ms-animation:DASH 4s ease-in-out .5s forwards;
	animation:DASH 4s ease-in-out .5s forwards;
	
	-webkit-transition:all .1s ease-in-out;
	transition:all .1s ease-in-out;		
}

@-moz-keyframes DASH{
	0%  {stroke-DASHoffset:1000;fill:#111;}
	10% {stroke:#444;}
	20% {stroke:#CCC;}
	60% {stroke:#444;}
	80% {stroke-DASHoffset:650;fill:#111;}
	100%{stroke-DASHoffset:0;fill:#fff;stroke:#000;}
}

@-webkit-keyframes DASH{
	0%  {stroke-DASHoffset:1000;fill:#111;}
	10% {stroke:#444;}
	20% {stroke:#CCC;}
	60% {stroke:#444;}
	80% {stroke-DASHoffset:650;fill:#111;}
	100%{stroke-DASHoffset:0;fill:#fff;stroke:#000;}
}

@-o-keyframes DASH{
	0%  {stroke-DASHoffset:1000;fill:#111;}
	10% {stroke:#444;}
	20% {stroke:#CCC;}
	60% {stroke:#444;}
	80% {stroke-DASHoffset:650;fill:#111;}
	100%{stroke-DASHoffset:0;fill:#fff;stroke:#000;}
}

@-ms-keyframes DASH{
	0%  {stroke-DASHoffset:1000;fill:#111;}
	10% {stroke:#444;}
	20% {stroke:#CCC;}
	60% {stroke:#444;}
	80% {stroke-DASHoffset:650;fill:#111;}
	100%{stroke-DASHoffset:0;fill:#fff;stroke:#000;}
}

@keyframes DASH{
	0%  {stroke-DASHoffset:1000;fill:#111;}
	10% {stroke:#444;}
	20% {stroke:#CCC;}
	60% {stroke:#444;}
	80% {stroke-DASHoffset:650;fill:#111;}
	100%{stroke-DASHoffset:0;fill:#fff;stroke:#000;}
}

/*---------- Canvas Area ----------
*/
#secCanvas{position: absolute;left: 0;top: 0; z-index:39;	opacity:0.25;filter: alpha(opacity=25);-ms-filter: "alpha(opacity=25)";-moz-opacity:0.25;-khtml-opacity: 0.25; display:none;}

/*---------- Cube Area ----------
*/
#cubeArea{ position:relative; display:none; }
	#cubeArea .cube{
		position: absolute;
		color: #fff;
		text-align: center;
		-webkit-perspective: 500px;
		-moz-perspective: 500px;
		-ms-perspective: 500px;
		-o-perspective: 500px;
		perspective: 500px
	}
		#cubeArea .cube-container, #cubeArea .face-normal, #cubeArea .face-hover {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		#cubeArea .cube-container {
			-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
			-moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
			-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
			-ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
			transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
		}
			#cubeArea .menu-title {
				display: inline-block;
				vertical-align: middle;
				font-size: 24px;
				line-height: 26px;
				text-transform: uppercase;
			}
			#cubeArea .menu-title .l1, #cubeArea .menu-title .l2 {
				display: block;
				position: relative;
				-webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				-moz-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				-o-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				-ms-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			#cubeArea .cube:hover .menu-title .l1, #cubeArea .cube:hover .menu-title .l2 {
				left: 0 !important;
				top: 0 !important;
			}	
	#cubeArea .cube1{
		left: 0;
		top: 176px;
		width: 326px;
		height: 148px;
		line-height: 148px;
	}
		#cubeArea .cube1 .cube-container {
			-webkit-transform: translateZ(-163px);
			-moz-transform: translateZ(-163px);
			-ms-transform: translateZ(-163px);
			-o-transform: translateZ(-163px);
			transform: translateZ(-163px);
		}
		#cubeArea .cube1:hover .cube-container {
			-webkit-transform: translateZ(-163px) rotateY(90deg);
			-moz-transform: translateZ(-163px) rotateY(90deg);
			-ms-transform: translateZ(-163px) rotateY(90deg);
			-o-transform: translateZ(-163px) rotateY(90deg);
			transform: translateZ(-163px) rotateY(90deg);
		}
		#cubeArea .face-normal, #cubeArea .face-hover {
			overflow: hidden;
		}
		#cubeArea .cube1 .face-normal {
			background-color: #727e74;
			-webkit-transform: translateZ(163px);
			-moz-transform: translateZ(163px);
			-ms-transform: translateZ(163px);
			-o-transform: translateZ(163px);
			transform: translateZ(163px);
		}
		#cubeArea .cube1 .face-hover {
			background-color: #727e74;
			-webkit-transform: rotateY(-90deg) translateZ(163px);
			-moz-transform: rotateY(-90deg) translateZ(163px);
			-ms-transform: rotateY(-90deg) translateZ(163px);
			-o-transform: rotateY(-90deg) translateZ(163px);
			transform: rotateY(-90deg) translateZ(163px);
		}
		#cubeArea .cube1 .face-hover .menu-title .l1 {left: -50px;}
		#cubeArea .cube1 .face-hover .menu-title .l2 {left: 50px;}
		

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

.notes{ text-indent:-1em; padding-left:1em; font-size:10px;}

.mt00{margin-top:0!important;}.mt05{margin-top:5px!important;}
.mt10{margin-top:10px!important;}.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}.mt25{margin-top:25px!important;}
.mt30{margin-top:30px!important;}.mt35{margin-top:35px!important;}
.mt40{margin-top:40px!important;}.mt45{margin-top:45px!important;}
.mt50{margin-top:50px!important;}.mt55{margin-top:55px!important;}
.mt60{margin-top:60px!important;}
.mt70{margin-top:70px!important;}
.mt80{margin-top:80px!important;}
.mt90{margin-top:90px!important;}
.mt100{margin-top:100px!important;}

.mr00{margin-right:0!important;}.mr05{margin-right:5px!important;}
.mr10{margin-right:10px!important;}.mr15{margin-right:15px!important;}
.mr20{margin-right:20px!important;}.mr25{margin-right:25px!important;}
.mr30{margin-right:30px!important;}.mr35{margin-right:35px!important;}
.mr40{margin-right:40px!important;}.mr45{margin-right:45px!important;}
.mr50{margin-right:50px!important;}.mr55{margin-right:55px!important;}
.mr60{margin-right:60px!important;}
.mr70{margin-right:70px!important;}
.mr80{margin-right:80px!important;}
.mr90{margin-right:90px!important;}
.mr100{margin-right:100px!important;}

.mb00{margin-bottom:0!important;}.mb05{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}.mb25{margin-bottom:25px!important;}
.mb30{margin-bottom:30px!important;}.mb35{margin-bottom:35px!important;}
.mb40{margin-bottom:40px!important;}.mb45{margin-bottom:45px!important;}
.mb50{margin-bottom:50px!important;}.mb55{margin-bottom:55px!important;}
.mb60{margin-bottom:60px!important;}
.mb70{margin-bottom:70px!important;}
.mb80{margin-bottom:80px!important;}
.mb90{margin-bottom:90px!important;}
.mb100{margin-bottom:100px!important;}

.ml00{margin-left:0!important;}.ml05{margin-left:5px!important;}
.ml10{margin-left:10px!important;}.ml15{margin-left:15px!important;}
.ml20{margin-left:20px!important;}.ml25{margin-left:25px!important;}
.ml30{margin-left:30px!important;}.ml35{margin-left:35px!important;}
.ml40{margin-left:40px!important;}.ml45{margin-left:45px!important;}
.ml50{margin-left:50px!important;}.ml55{margin-left:55px!important;}
.ml60{margin-left:60px!important;}
.ml70{margin-left:70px!important;}
.ml80{margin-left:80px!important;}
.ml90{margin-left:90px!important;}
.ml100{margin-left:100px!important;}

.pt00{padding-top:0!important;}.pt05{padding-top:5px!important;}
.pt10{padding-top:10px!important;}.pt15{padding-top:15px!important;}
.pt20{padding-top:20px!important;}.pt25{padding-top:25px!important;}
.pt30{padding-top:30px!important;}
.pt40{padding-top:40px!important;}
.pt50{padding-top:50px!important;}
.pt60{padding-top:60px!important;}
.pt70{padding-top:70px!important;}
.pt80{padding-top:80px!important;}
.pt90{padding-top:90px!important;}
.pt100{padding-top:100px!important;}

.pr00{padding-right:0!important;}.pr05{padding-right:5px!important;}
.pr10{padding-right:10px!important;}.pr15{padding-right:15px!important;}
.pr20{padding-right:20px!important;}.pr25{padding-right:25px!important;}
.pr30{padding-right:30px!important;}
.pr40{padding-right:40px!important;}
.pr50{padding-right:50px!important;}
.pr60{padding-right:60px!important;}
.pr70{padding-right:70px!important;}
.pr80{padding-right:80px!important;}
.pr90{padding-right:90px!important;}
.pr100{padding-right:100px!important;}

.pb00{padding-bottom:0!important;}.pb05{padding-bottom:5px!important;}
.pb10{padding-bottom:10px!important;}.pb15{padding-bottom:15px!important;}
.pb20{padding-bottom:20px!important;}.pb25{padding-bottom:25px!important;}
.pb30{padding-bottom:30px!important;}
.pb40{padding-bottom:40px!important;}
.pb50{padding-bottom:50px!important;}
.pb60{padding-bottom:60px!important;}
.pb70{padding-bottom:70px!important;}
.pb80{padding-bottom:80px!important;}
.pb90{padding-bottom:90px!important;}
.pb100{padding-bottom:100px!important;}

.pl00{padding-left:0!important;}.pl05{padding-left:5px!important;}
.pl10{padding-left:10px!important;}.pl15{padding-left:15px!important;}
.pl20{padding-left:20px!important;}.pl25{padding-left:25px!important;}
.pl30{padding-left:30px!important;}
.pl40{padding-left:40px!important;}
.pl50{padding-left:50px!important;}
.pl60{padding-left:60px!important;}
.pl70{padding-left:70px!important;}
.pl80{padding-left:80px!important;}
.pl90{padding-left:90px!important;}
.pl100{padding-left:100px!important;}