@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Lato|Offside|Gabriela|Merriweather+Sans:400,300);
body{
	margin:0;
	padding:0; 
	font-family:'Lato', sans-serif; 
	font-size:11px;
	-webkit-text-size-adjust:none;
	background:url(../images/bg.gif) #5e0010;
	line-height:18px;
}
*{ outline:0; border:0;}
h1, h2, h3, h4, h5,.text3-3 div span{ margin:0 0 10px 0; padding:0; font-family: 'Gabriela', sans-serif, "微軟正黑體", "黑體";}
h1{ font-size:25px; line-height:125%;}
h2{ font-size:20px; line-height:125%;}
h3{ font-size:16px; line-height:125%;}
ul,ol,li{ margin:0; padding:0;}
li{ margin-left:20px;}


#warp-body{ width:100%; margin-top:-280px; position:absolute; z-index:10; top:50%; text-align:center; padding:0;}
#warp-body a{color:#333; text-decoration:none;}
#warp-body a:hover{ color:#A40B38;}
#warp{
	width:800px; 
	margin:0 auto;
}
#warp .corner{ 
	width:53px; 
	height:52px; 
	position:absolute; 
	z-index:9999; 
	margin:488px 0 0 747px; 
	background:url(../images/bg-corner.gif) no-repeat;
}

#index{ height:540px; overflow:hidden; background: #c9c9c9; position:relative;}
#index span{ position:absolute; z-index:11; margin:180px 0 0 720px; color:#fff; letter-spacing:1px;}
#index div{position:absolute; z-index:10; background-repeat:no-repeat !important; display:none;}
#index div#loading{ width:70px; height:70px; margin:-260px 0 0 320px; left:50%; top:50%; z-index:9999;}
#index div#IMG-01{
	width:429px; 
	height:539px; 
	background:url(../images/index/img-01.gif);
	margin:55px 0 0 126px;
}
#index div#text-01{
	width:300px; 
	height:100px; 
	color:#333; 
	text-align:left; 
	margin:320px 0 0 430px;
}
#index div#IMG-02{
	width:429px; 
	height:539px; 
	background:url(../images/index/img-02.gif);
	margin:56px 0 0 127px;
}
#index div#IMG-03{
	width:421px; 
	height:522px; 
	background:url(../images/index/img-03.gif);
	margin:72px 0 0 127px;
}
#index div#IMG-04{
	width:254px; 
	height:316px; 
	background:url(../images/index/img-04.gif);
	margin:170px 0 0 162px;
}
#index div#IMG-05{
	width:254px; 
	height:316px; 
	background:url(../images/index/img-05.gif);
	margin:170px 0 0 162px;
}
#index #IMG-06{
	opacity:0;
	width:178px; 
	height:45px;
	margin:323px 0 0 219px;
	position:absolute;
	z-index:20;
	display:block;
}
#index div#IMG-07{
	position:absolute;
	z-index:50;
	width:300px; 
	height:120px;
	text-align:left;
	margin:420px 0 0 480px;
}
#content.index .left-logo div{opacity:0; height:0; overflow:hidden; position:absolute; margin:80px 0 0 250px; z-index:20;}
#content.index .menu a{ display:none;}

#content{
	width:796px; 
	height:536px;
	text-align:left;
	color:#666;
	padding:0;
	background:#e2e2e2;
	border:2px solid #8c908c;
}
#content.projects,#content.index{background:none; position:absolute; z-index:1;}
#content > div{ float:left; padding:10px 0;}
#content > div:first-child{ margin:0;}
#content .left-logo{ width:117px; padding:30px 0; text-align:left;}
#content .content-info{ width:550px; padding:35px 10px; letter-spacing:1px;}
#content .content-info div{ float:left; margin:0 0 10px 10px;}
#content .menu{
	margin-left:12px!important;
	width:93px;
	background:url(../images/bg-menu.png) no-repeat 0 bottom;
}

#content .menu a{
	display:inline-block; 
	margin:0 5px;
	width:20px;
	height:120px;
	padding:25px 0 0 0;
	background:url(../images/icon-menu.gif) no-repeat 0 0;
	letter-spacing:1.5px;
	float:left;
}
#content .menu a{
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

#content .menu a:hover,#content .menu a.on{ background-position:-20px 0; color:#666; text-shadow:-1px 0 2px #efefef;}
#content .menu a *{ cursor:pointer;}
#content .menu a span{line-height:19px;}
#content .menu a:hover span{display:none;}
#content .menu a label{line-height:23px; display:none;}
#content .menu a:hover label{display:block;}

#warp #btm{ clear:both; color:#666; text-align:left; letter-spacing:1px; margin:10px 0 0 0;}
#warp #btm span{ float:right;}
#warp #btm a{ color:#999;}
#warp #btm a:hover{ color:#A40B38;}
#warp #btm a.on{ text-decoration:underline;}
#warp #btm img{ margin:0 10px -2px 0;}
#warp #btm .ling{ position:relative;}
#warp #btm .ling div{
	/*background:url(../images/ling-box.gif) no-repeat;*/
	display:none;
	color:#fff; 
	padding:0; 
	width:230px; 
	height:150px; 
	position:absolute;
	z-index:50;
	left:0;
	top:-160px;
	/*pacity:0.8;*/
}
#warp #btm .ling div label{
	display:block; 
	width:11px;
	height:6px; 
	position:absolute;
	top:150px;
	left:10px;
	background:url(../images/bg-pop-ling.gif) no-repeat;
}
/*----------------------Banner setting*/
#Banner{ clear:both; height:540px; overflow:hidden; padding:0;}
#Banner ul, #Banner li{ margin:0; padding:0; list-style:none;}
#Banner ul{ display:block;}
#Banner li{ float:left; display: inline; width:800px; height:540px; background:#fff;}
#Banner li > img{ width:800px; display:none;}
#Banner li > img:first-child{ display:block;}
#Banner li span{
	display:block;
	position:relative;
	z-index:1;
	padding:10px;
	color:#fff!important;
	text-align:left;
	width:300px;
	height:100px;
	background:url(../images/projects/bg-text.png) no-repeat 2px 0px;
	margin:10px 0 0 0;
}
#Banner li span h1{ font-family:'Merriweather Sans', sans-serif; font-size:60px; float:left; margin:0 10px;}
#Banner li span h1 small{ font-size:30px; font-family:Verdana, Geneva, sans-serif; color:#ccc!important;}/*2018-03-26*/
#Banner div{ position:fixed; z-index:5; width:670px; margin:10px 0 0 50px; text-align:left;}
#Banner div > h1{
	font-family:Verdana, Geneva, sans-serif;
	color:#fff;
	font-size:30px;
	text-shadow:0 0 8px #555;
	position:absolute;
	margin:-5px 0 0 -40px;
	padding-right:10px;
	border-right:2px solid #eee;
}
#Banner div label{
	display:inline-block;
	float:left;
	width:15px;
	height:30px;
	/*border:1px solid #efefef;*/
	color:#999;
	padding:5px;
	cursor:pointer;
	text-shadow:1px 1px 0 #333;
	font-size:16px;
	font-family:'Merriweather Sans', sans-serif;
}
#Banner div label:hover,#Banner div label.on{ /*background:#c02626;*/ font-weight:bold; font-size:18px; color:#c92c2c;}
#Banner ul li span dl{ display:inline;}
#Banner ul li font{
	display:inline-block;
	background:#999;
	width:12px;
	height:12px;
	margin:0 5px 5px 0;
	position:relative;
	cursor:pointer;
}
#Banner ul li font:hover,
#Banner ul li font.on{ background:#C92C2C;}
#Banner h4,#Banner h5{
	display:none; 
	position:absolute;
	z-index:10;
	/*background:url(../images/arrow-banner.png) no-repeat;*/
	width:17px;
	height:32px;
	margin-top:30px;
	cursor:pointer;
}
#Banner h4{ background-position:left top; margin-left:30px;}
#Banner h5{ background-position:right top; margin-left:753px;}
#Banner h4:hover{ background-position:left bottom;}
#Banner h5:hover{ background-position:right bottom;}