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

/* --------------------------------- 共用部分 --------------------------------- */

body,h1,h2,h3,h4,p,ul,li,blockquote,address,img {
	margin:0;
	padding:0;
	border:none;
	font-size:100%;
	font-style:normal;
	font-weight:normal:0;
	list-style::none;
	font-family:Arial, Helvetica, sans-serif;
	line-height: 16px;
}

body {
	background-image: url(../images/bg00.gif);
	background-color: #c0c00; 
	overflow-y: hidden;
}
a { outline: none; }
a:link , a:visited{	text-decoration:none;color:#666; }
a:hover { color:#f29600; }
a:active{ color:#007EB7; }

#wrapper{
	position:relative;
	width:898px;
	height:615px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../images/bg01.gif);
	padding:15px 16px 0 16px;
}

#wrapper ul { list-style:none;}

#menubar{
	float:left;
	width:234px;
	margin-left:16px;
	font-size:12px;
	font-weight:bold;
	height: 550px;
}

.navigation{ 
	position: relative;
	width: 104px;
}

.navigation li{
	position: relative;
	min-height: 18px;
	cursor: pointer;
	background-repeat: no-repeat;
}

.navigation li a{ 
	height: 18px;
	display: block;
}

.subNav{
	display: none;
	width: 165px;
	margin-bottom: 3px;
}

.navigation li:hover,
.navigation li.on{ background-position: 0 -18px; }
.navigation li.on .subNav{ display: block; }

.b1{ background-image: url("../images/b1.jpg"); }
.b2{ background-image: url("../images/b2.jpg"); }
.b3{ background-image: url("../images/b3.jpg"); }
.b4{ background-image: url("../images/b4.jpg"); }
.b5{ background-image: url("../images/b5.jpg"); }
.b6{ background-image: url("../images/b6.jpg"); }
.b7{ background-image: url("../images/b7.jpg"); }
.b5-1{ background-image: url("../images/b5-1.jpg"); }
.b5-2{ background-image: url("../images/b5-2.jpg"); }
.b5-3{ background-image: url("../images/b5-3.jpg"); }
.b6-1{ background-image: url("../images/b6-1.jpg"); }
.b6-2{ background-image: url("../images/b6-2.jpg"); }
.b6-3{ background-image: url("../images/b6-3.jpg"); }

#content{
	float:left;
	padding-top:3px;
}

#logo{
	position:absolute;
	left:34px;
	margin:0;
	padding:0px;
	bottom:61px;
}

#footer{
	position:absolute;
	width:878px;
	font-size:9px;
	color:#999999;
	top: 600px;
	left: 25px;
}

/* --------------------------------- about.html --------------------------------- */

.border01{
	position:relative;
	border:#ccc 1px solid;
	width:559px;
	height:493px;
	padding:25px 35px 25px 35px;
	color:#666666;
	font-size:12.5px;
	letter-spacing:2px;
}

.border01>p{ line-height:1.8em; }
.t1{ 
	text-shadow:#ccc 1px 1px 3px; 
	font-weight:bold; 
	font-family:"華康中圓體", "新細明體", "微軟正黑體", "標楷體"; 
}

.about-photo{	
	float: left;
	height: 205px;
	margin-right: 25px;
}

/* --------------------------------- services.html --------------------------------- */

.border02{
	position:relative;
	border:#ccc 1px solid;
	width:580px;
	height:493px;
	padding:25px 10px 25px 39px;
	color:#666666;
	font-size:12px;
}

.area{
	float:left;
	width:290px;
}

.txtarea{
	float:left;
	border:#ccc 1px solid;
	margin:12px 0 12px 0;
	padding:10px 5px 6px 12px ;
	width:240px;
	color:#999999;
	letter-spacing:2px;
}

.t2{ 
	font-size:13.5px; 
	color:#F29600; 
	font-family:"華康中圓體", "新細明體", "微軟正黑體", "標楷體";
}
.t2 .en{ letter-spacing: 0px; font-family: Arial, Helvetica, sans-serif;}

a:hover .t2{
	color: #333;
}

.arrow{
	display: inline-block;
	color:#333;
	-webkit-animation: btn_arrow 1s infinite;
	animation: btn_arrow 1s infinite;
}
@-webkit-keyframes btn_arrow{
	0%{
		margin-left: 0;
	}
	50%{
		margin-left: 10px;
	}
	100%{
		margin-left: 0px;
	}
}
@keyframes btn_arrow{
	0%{
		margin-left: 0;
	}
	50%{
		margin-left: 10px;
	}
	100%{
		margin-left: 0px;
	}
}

/*--------------------------------- pricing.html --------------------------------- */

.border03{
	position:absolute;
	top:18px;
	border:#ccc 1px solid;
	width:613px;
	height:155px;
	padding-top:380px;
	padding-left:15px;
	color:#999;
	font-size:12px;
	letter-spacing:1px;
	z-index: 99;
}
.tb01{ border-collapse:collapse;margin-top:10px; }
.tb01 td{ border:none; }
/*--------------------------------- link.html --------------------------------- */

.border05{
	position:absolute;
	top:18px;
	border:#ccc 1px solid;
	width:613px;
	height:115px;
	padding-top:420px;
	padding-left:15px;
	color:#999;
	font-size:11px;
	letter-spacing:1px;
	z-index: 99;
}

.link{ margin-top: 20px; }
.link li{ float: left; margin-right: 35px;}
.link li:hover .link-icon{ background-position: 0 -30px; }
.link li:hover .link-text{ display: block;}
.link-icon{
	width: 30px;
	height: 30px;
}
.link-text{ 
	display: none;
	position: absolute; 
	color: #F29600;
}
.link-text span{ font-family: Arial, Helvetica, sans-serif; }
.link-line {
	margin-top: 4px;
	height: 25px;
	border-right: 1px solid #999;
}

/*--------------------------------- contact.html --------------------------------- */

p.info{
	margin-top: 15px;
	font-size: 12px;
	line-height:1.4em;
}

.s4 { letter-spacing: 4px;}

/*--------------------------------- office.html --------------------------------- */

#casebox{
	position: relative;
	height: 250px;
	width: 210px;
	margin-top: 20px;
	border-top: dotted #666 2px;
}

.moveItem {
  position: absolute;
  width: 5px;
  height: 7px;
  background: url("../images/arrow.png") no-repeat;
  transition: top 0.3s;
}

.scroll{
	height: 235px;
	width: 225px;
	margin-top: 15px;
}

.list{ margin-left: 12px; }
.list li{ 
	margin-bottom: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666;
	cursor: pointer;
}
.list li:hover,
.list li.on{ color: #F29600; }

.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 5px;
  height: 30px;
  border-radius: 0;
  background: #ccc;
}
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail { width: 0px;}

/*--------------------------------- press.html --------------------------------- */

.border{
  position: absolute;
  top: 18px;  
  width: 629px;
  height: 544px;
  left: 266px;
  border: #ccc 1px solid;
}

.viewport{
  float:left;
  position: relative;
  width: 629px;
  height: 575px;
  margin-top: -15px;
}

iframe{
	position: absolute;
	top: 80px;
	right: 60px;
}