@charset "utf-8";
/* CSS Document */
/* page design width: 1280 */

body {/* height:778px; min-height:778px; */ -webkit-user-select: none; -webkit-touch-callout: none; color:#fff;font-family:"Arial";font-size:12px;text-align:center;background:#fff;padding:0;margin:0;scrollbar-base-color:#555;}

#top-wrapper{-webkit-user-select: none; -webkit-touch-callout: none; position:relative;top:0px;height:70px;width:100%;background:#fff;color:#000;}
#top-shadow{-webkit-user-select: none; -webkit-touch-callout: none; position:absolute;height:20px;top:50px;left:0px;width:100%;background:url(../img/main_bg_shadow_n.jpg) repeat-x;z-index:0; }

#top-then {-webkit-user-select: none; -webkit-touch-callout: none; position:absolute;left:0px;top:38px;width:272px;height:32px;
background:url(../img/top_nav_left.gif) no-repeat;z-index:2;cursor:pointer;z-index:10;

color: White; font-family: Arial Narrow,Arial,sans-serif; font-size: 22px; font-weight: bold; padding-top:3px; text-align: right; letter-spacing: 0px; overflow:hidden;
}

#top-now {-webkit-user-select: none; -webkit-touch-callout: none; position:absolute;right:0px;top:38px;width:272px;height:32px;
background:url(../img/top_nav_right.gif) no-repeat;z-index:3;cursor:pointer;z-index:10;

color: White; font-family: Arial Narrow,Arial,sans-serif; font-size: 22px; font-weight: bold; padding-top:3px;  text-align: left; letter-spacing: 0px; overflow:hidden;
}

/*#top-menu{ margin: 0px auto; width:1280px; height:25px; text-align:center; margin-top:-12px; font-size:25px; }*/  /* page design width: 1280 */
#top-menu{ margin:0px auto;width:685px;height:25px;text-align:center; }

#top-menu ul{ margin:0 auto;padding:0px;list-style:none; }
#top-menu li{ float:left;margin:1px 2px; }
#top-menu li:hover{  }
#top-menu li a{ color:#333;text-decoration:none;padding:2px 5px 2px 5px;display:block; }
#top-menu li a:hover{ color:#ab00fd;border-bottom:2px solid #ab00fd;padding-top:0px; }
#top-menu li a.active{ color:#719326;border-bottom:2px solid #719326;padding-top:0px; }

#center-wrapper{position:relative;width:100%;height:650px;background:#000 url(../img/main_bg.jpg) center top no-repeat;border-top:3px solid #000;border-bottom:3px solid #000;z-index:1;}

#bottom-wrapper{position:absolute;left:0px;bottom:0px;height:65px;width:100%;background:#fff;}

#sidebar {-webkit-user-select: none; -webkit-touch-callout: none; float:left;height:270px;overflow:hidden;position:relative;width:100%;}
#sidebarbottomlist{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;height:20px;width:100%;color:#fff;text-align:center; }
#sidebarbottomlistdiv{ margin:0 auto;width:auto; }
.sidebarbottomlistbox{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;height:10px;width:20px;margin-left:16px;background:#FFF;cursor:pointer; }
.sidebarbottomlistboxhighlight{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;height:10px;width:20px;margin-left:16px;background:#F03; }
#sidebarbottom{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;height:179px;width:100%; }
#sidebartop{ -webkit-user-select: none; -webkit-touch-callout: none; height:179px;width:100%; }
.sidebarmoveleft{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;margin-left:5px;width:114px;height:174px;background:url(../img/moveleft.png) no-repeat;cursor:pointer; }
.sidebarmoveright{ -webkit-user-select: none; -webkit-touch-callout: none; float:right;margin-right:5px;width:114px;height:174px;background:url(../img/moveright.png) no-repeat; background-position:right; cursor:pointer; }
.sidebar2nd{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;height:400px;width:20px;background:#eee;}
.sidebarmoveleft3x{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;margin-left:5px;width:114x;height:174px;background:url(../img/moveleft3x.png) no-repeat;cursor:pointer; }
.sidebarmoveleft2x{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;margin-left:5px;width:90px;height:174px;background:url(../img/moveleft2x.png) no-repeat;cursor:pointer; }
.sidebarmoveleft1x{ -webkit-user-select: none; -webkit-touch-callout: none; float:left;margin-left:5px;width:114px;height:174px;background:url(../img/moveleft1x.png) no-repeat;cursor:pointer; }
.sidebarmoveright3x{ -webkit-user-select: none; -webkit-touch-callout: none; float:right;margin-left:5px;width:114px;height:174px;background:url(../img/moveright3x.png) no-repeat; background-position:right; cursor:pointer; }
.sidebarmoveright2x{ -webkit-user-select: none; -webkit-touch-callout: none; float:right;margin-left:5px;width:90px;height:174px;background:url(../img/moveright2x.png) no-repeat; background-position:right; cursor:pointer; }
.sidebarmoveright1x{ -webkit-user-select: none;  -webkit-touch-callout: none; float:right;margin-left:5px;width:90px;height:174px;background:url(../img/moveright1x.png) no-repeat; background-position:right; cursor:pointer; }
.clr{clear:both;}

#menu {width:100%;list-style:none;padding:0;margin:0;top:0;position:relative;height:100%;}
#menu td {padding:0px;margin:0px;text-align:center;}
#menu td a:link, a:visited {color:#369;text-decoration:none;}
#menu td img{width:286px;height:160px;display:block;border:1px solid #eee;}
#menu td p{ margin:0; padding:0;line-height:19px;font-size:14px;font-weight:bold;}

.viewport {border:none;margin:0px;padding:12px;width:288px;height:234px;color:#eee;text-align:center;overflow:hidden;background:url(../img/viewport_bg.png) no-repeat;}
.viewport:hover { color:#333;}
.viewport:hover span{ color:#333;}

.viewport .project-title {font-weight: bold;font-size:30px; text-align:left; color:rgb(254,237,199);}	

.viewport .project-content {font-weight: normal;font-size:10px;text-align:left;padding: 11px 4px 4px 4px;width: 288px;height: 74px;overflow:hidden;  position:relative; top:-11px;}

.viewport a {display: block;position: relative;}
.viewport a .title{display: block;position: relative;}

#center-wrapper-shadow{ position:absolute;left:0px;top:0px;width:100%;height:100%;background:#555;z-index:999;visibility:hidden;opacity:0.8;filter:alpha(opacity=80); }
.viewportshowbox{position:absolute;padding:20px;z-index:1000;overflow:hidden;text-align:justify;}
.viewportshowbox a{ color:#FFE87C; }
.viewportshowboxtl{position:absolute;top:0px;left:0px;width:20px;height:20px;background:url(../img/data7tl.png) no-repeat;}
.viewportshowboxtm{position:absolute;top:0px;left:20px;height:20px;background:url(../img/data7tm.png) repeat-x;}
.viewportshowboxtr{position:absolute;top:0px;width:20px;height:20px;background:url(../img/data7tr.png) no-repeat;}
.viewportshowboxml{position:absolute;top:20px;left:0px;width:20px;background:url(../img/data7ml.png) repeat-y;}
.viewportshowboxmm{ -webkit-overflow-scrolling: touch; overflow-y: scroll; position:absolute;top:20px;left:20px;background:#111;border:1px solid #fff;}
.viewportshowboxmr{position:absolute;top:20px;width:20px;background:url(../img/data7mr.png) repeat-y;}
.viewportshowboxbl{position:absolute;left:0px;width:20px;height:20px;background:url(../img/data7bl.png) no-repeat;}
.viewportshowboxbm{position:absolute;left:20px;height:20px;background:url(../img/data7bm.png) repeat-x;}
.viewportshowboxbr{position:absolute;width:20px;height:20px;background:url(../img/data7br.png) no-repeat;}
.viewportshowboxclose{position:absolute;z-index:1002;width:30px;height:30px;}

#menu li {padding:10px 0;text-align:right;display:block;cursor:hand;cursor:pointer;width:50px;height:50px;float:left;}
#menu li a {background:#1f1f1f;color:#ddd;font-family:helvetica, arial, verdana;font-size:9px;font-weight:900;display:inline;text-decoration:none;}
#menu li span {font-family:georgia, arial;font-size:9px;color:#464646;}

#bottom-wrapper{ position:relative;top:0px;height:70px;width:100%;background:#fff;color:#000;z-index:1000; }
#bottom-shadow{ position:absolute;height:20px;top:0px;left:0px;width:100%;background:url(../img/main_bg_shadow_s.jpg) repeat-x;z-index:1 }
#bottom-company-title{ position:absolute;height:50px;width:300px;right:0px;top:-25px;z-index:2; }
.bottom-company-title-box{ float:left;width:50px;height:50px;margin:0px 20px 0px 20px; }

.fancysmallbox{ float:left;width:200px;height:150px;margin:2px;background:#444;border:1px solid #eee;padding:1px; }
.fancysmallbox:hover{ background:#06F;border:1px solid #06F; }

.moviebox4x3div6, .moviebox4x3div9, .moviebox16x9div6, .moviebox16x9div9{ position:absolute; left:0; top:0; width:100%;height:100%; text-align:center;}

.movieboxiframe6, .movieboxframe9 { border-style:none;
	webkit-box-shadow: 0px 0px 10px 4px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 10px 4px rgba(255,255,255,1);
	box-shadow: 0px 0px 10px 4px rgba(255,255,255,1);
}


.slideshowdiv{ border:1px solid #555;padding:2px;}
.slideshowdiv ul{margin:0px;padding:0px;list-style:none;}

/* vertical page */
#center-wrapper-v{position:relative;width:100%;height:750px;background:#000 url(../img/main_bg.jpg) center top no-repeat;overflow:hidden;border-top:3px solid #000;border-bottom:3px solid #000;}

#v-top{ width:100%;height:30px; }
.v-scroll{  -webkit-user-select: none; -webkit-touch-callout: none; margin:5px auto;width:700px;height:25px;}
.v-scroll-up{  -webkit-user-select: none; -webkit-touch-callout: none; float:left;width:200px;height:25px;background:url(../img/v_moveup.png) no-repeat;cursor:pointer; }
.v-scroll-down{  -webkit-user-select: none; -webkit-touch-callout: none; float:right;width:200px;height:25px;background:url(../img/v_movedown.png) no-repeat;cursor:pointer; }

.v-scroll-up-top{  -webkit-user-select: none; -webkit-touch-callout: none; float:left;width:200px;height:25px;background:url(../img/v_moveup.png) no-repeat;cursor:pointer; }
.v-scroll-down-top{  -webkit-user-select: none; -webkit-touch-callout: none; float:right;width:200px;height:25px;background:url(../img/v_movedown.png) no-repeat;cursor:pointer; }

.v-scroll-up-bottom{  -webkit-user-select: none; -webkit-touch-callout: none; float:left;width:200px;height:25px;background:url(../img/v_moveup.png) no-repeat;cursor:pointer; }
.v-scroll-down-bottom{  -webkit-user-select: none; -webkit-touch-callout: none; float:right;width:200px;height:25px;background:url(../img/v_movedown.png) no-repeat;cursor:pointer; }


#v-container-bg{ border:1px solid #555;overflow:hidden;margin:0px auto;width:1160px;height:640px;position:relative; }
#v-container{float:left;position:relative;width:1130px;height:auto;}

.v-box-container{display: table; -webkit-overflow-scrolling: touch; overflow-y: scroll;  width:1130px; height:640px; min-height:640px;margin: 5px auto;text-align:center;font-family:"Arial";color:#fff;  }
.v-box-container-centered{display: inline-block; display: table-cell; vertical-align: middle;}


.v-box-side{ float:left;width:260px;height:600px;overflow:hidden; }
.v-box-center{ float:left;width:600px;height:600px;overflow:hidden;padding:0px 5px 0px 5px; }
.v-box-title{ width:600px;height:30px;margin:0px;text-align:center;font-size:16px;font-weight:bold;overflow:hidden;text-shadow:2px 2px 2px #111; }
.v-box-text{ width:590px;padding:5px;max-height:115px;text-align:justify;font-size:13px;overflow:hidden; }
.v-box-content{ width:600px;max-height:320px;padding:10px 0px;text-align:center;overflow:hidden;align:center;}
.v-box-breakline{ width:100%;height:30px;background:#fff; }
.v-box-custom-title {width:100%;height:30px;margin:0px;text-align:center;font-size:16px;font-weight:bold;overflow:hidden;text-shadow:2px 2px 2px #111; }
.v-box-custom-text{ width:800px;min-height:20px;margin:5px auto;font-size:13px;text-align:justify;padding:5px; }

#v-slidebar{ position:relative;float:left;width:15px;height:640px;background:#444;color:#fff; }
#v-slider1{ position:absolute;width:15px;height:5px;background:#999; }
#v-slider2{ position:absolute;width:15px;height:5px;background:#999; }