@charset "utf-8";
/* common */
*{font-family:Verdana,微軟正黑體, Microsoft JhengHei, Arial, Helvetica, sans-serif;}
html,body{height:100%; margin:0; padding:0;}
body{font-size:13px; margin:0;background:url(../images/bg3-4.jpg) no-repeat center top #268692;overflow: hidden;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

h1{font-size:3em;}
h2{font-size:1.615em;}
h3{font-size:1.154em;}
/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#268692; /* change if the mask should have another color then white */
	z-index:999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/status2.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}
#waterwrapper{height:100%;}
#pageheader{ height:145px;}
#pageheader .logo{position:absolute; margin-left:20px; margin-top:20px;}
#btn01{position:absolute; margin-left:315px; margin-top:73px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform:scale(0.9);-webkit-transform:scale(0.9);}
#btn02{position:absolute; margin-left:433px; margin-top:54px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform:scale(0.9);-webkit-transform:scale(0.9);}
#btn04{position:absolute; margin-left:550px; margin-top:40px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform:scale(0.9);-webkit-transform:scale(0.9);}
#btn03{position:absolute; margin-left:630px; margin-top:71px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform:scale(0.9);-webkit-transform:scale(0.9);}
#btn05{position:absolute; margin-left:743px; margin-top:56px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform:scale(0.9);-webkit-transform:scale(0.9);}
#btn06{position:absolute; margin-left:851px; margin-top:32px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform:scale(0.9);-webkit-transform:scale(0.9);}

#btn01:hover{transform:scale(1.1);-webkit-transform:scale(1.1);}
#btn02:hover{transform:scale(1.1);-webkit-transform:scale(1.1);}
#btn03:hover{transform:scale(1.1);-webkit-transform:scale(1.1);}
#btn04:hover{transform:scale(1.1);-webkit-transform:scale(1.1);}
#btn05:hover{transform:scale(1.1);-webkit-transform:scale(1.1);}
#btn06:hover{transform:scale(1.1);-webkit-transform:scale(1.1);}

.contentwrapper{margin-top:40px;}
.contentwrapper .titlebar{width:100%; text-align:center; padding:30px 0 20px 0;}

#about-01 {text-align:center; height:520px;}
#about-02 {position:absolute; margin-top:220px;}

#serviceall{height:990px; width:100%;}
#service-01{position:absolute; width:545px; height:400px; margin-left:0px; margin-top:0px;}
#service-02{position:absolute; width:400px; margin-left:555px; margin-top:135px;}
#service-03{position:absolute; margin-left:395px; margin-top:400px;}
#service-04{position:absolute; width:300px; margin-left:75px; margin-top:570px; text-align:right;}

#ib-container {height:600px; margin-top:50px;}
#case01 {position:absolute; margin-left:330px; margin-top:145px;}
#case02 {color:#fff; font-size:18px;position:absolute; margin-left:320px; margin-top:325px;}
#case03 {position:absolute; margin-left:40px; margin-top:140px;}
#case04 {position:absolute; margin-left:210px; margin-top:40px;}
#case05 {position:absolute; margin-left:390px; margin-top:5px;}
#case06 {position:absolute; margin-left:570px; margin-top:40px;}
#case07 {position:absolute; margin-left:735px; margin-top:140px;}
#case08 {position:absolute; margin-left:655px; margin-top:305px;}
#case09 {position:absolute; margin-left:490px; margin-top:420px;}
#case10 {position:absolute; margin-left:300px; margin-top:420px;}
#case11 {position:absolute; margin-left:150px; margin-top:305px;}

.contactblock{width:500px; margin:0 auto;}
.contactblock textarea{ overflow:auto;}



.footerblock{width:100%; padding:15px 0; text-align:center;}

/* 驗證 */
input.errorstyle {border: 1px solid red;}
textarea.errorstyle {border: 1px solid red;}
.errorstyle{color:red;}
/* 作品集 */
.ib-container{
	display: block;
}
.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}
.ib-container .myarticle{
	display: block;
	width: 180px;
	height: 180px;
	cursor: pointer;
	color:#fff;
	text-align: center;
	text-transform: none;
	margin: 15px;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-webkit-transition: 
		opacity 0.4s linear, 
		-webkit-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-moz-transition: 
		opacity 0.4s linear, 
		-moz-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-o-transition: 
		opacity 0.4s linear, 
		-o-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-ms-transition: 
		opacity 0.4s linear, 
		-ms-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	transition: 
		opacity 0.4s linear, 
		transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
}

/* Hover Style for all the items: blur, scale down*/
.ib-container .myarticle.blur{
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0.4;
}

/* Hover Style for single item: scale up */
.ib-container .myarticle.active{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	z-index: 100;	
	opacity: 1;
}


/* cycle2 before case */
.cycle-slideshow>div{ width:966px; height:610px;}
/* for feedback */
.cycle-slideshow>div.feedback{width:816px; height:655px; padding-left:150px;}
.cycle-slideshow>div.design{width:535px; height:400px;}
.case{position:absolute;}
.caseslideshow>div{ width:966px; height:610px;}
/* for feedback */
.caseslideshow>div.feedback{width:816px; height:655px; padding-left:150px;}
.caseslideshow>div.design{width:535px; height:400px;}
.case{position:absolute;}

/* cycle2 pager */
.slider-pager { 
    text-align: center; width:100%; overflow: hidden;
}
.slider-pager span { 
    font-family: arial; display: inline-block; color:#999; cursor: pointer; 
}
.slider-pager span.cycle-pager-active { color: #fff;}

.slider-pager a{color:#CCCCCC; text-decoration:none; margin-right:10px; font-size:12px; font-weight:bold; }
.slider-pager a:hover{color:#fff;}
.slider-pager a.cycle-pager-active{color:#fff;}

/* 按鈕 */
.genbtn{background:url(../images/BgBtnOut.gif) repeat-x bottom #9fdef8; border:1px solid #9fdef8; padding:5px 15px;*padding:5px;_padding:5px;color:#2e6b87; font-size:15px; margin:0px 2px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px; font-weight:bold;}
.genbtnhover{background:url(../images/BgBtnOver.gif) repeat-x bottom #1abcff; border:1px solid #1abcff; padding:5px 15px;*padding:5px;_padding:5px;color:#05336d; font-size:15px; cursor:pointer; margin:0px 2px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;font-weight:bold;}

/* 版面控制項 */
.twocol{width:100%;}
.twocol:after{display:block; clear:both; content:"."; visibility:hidden; height:0;}
.twocol .center{width:100%; text-align:center;}
.twocol .right{float:right;}
.twocol .left{float:left;}

.halfliqid{margin:0 auto; max-width:1400px; min-width:980px;}
.fixwidth{width:980px;margin:0 auto;}
.fullliquid{width:100%; min-width:980px; padding:0;}

/* 間距微調與美編 */
.margin5TB{margin:5px 0;}
.margin10TB{margin:10px 0;}
.margin10B{margin-bottom:10px;}
.margin10T{margin-top:10px;}
  
/* 雙色表單 */
.gentable table{border-collapse:collapse;}
.gentable td{padding:5px; border-collapse:collapse; border-bottom:1px dotted #bababa;}
.gentable td td{border:0; padding:5px 0;}

.stripeMe table{border-collapse:collapse; border:1px solid #9ac0d1;}
.stripeMe td{padding:10px 5px; border-collapse:collapse; border:1px solid #9ac0d1; background-color:#f8fcfe;}
.stripeMe th{color:#000; padding:8px; border-collapse:collapse; border:1px solid #9ac0d1; background:#cbe2ef;}
.stripeMe th a{color:#fff; text-decoration:none;}
.stripeMe th a:hover{text-decoration:underline;}
.stripeMe tr.alt td {background-color:#edf6fb;}

.stripeMe td table{border:0;}
.stripeMe td td{border:0;background:transparent;}

/* input */
.inputex{padding:8px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; background:url(../images/bg-input.png); color:#fff; border:0; font-size:16px;}
.inputsizeSSS{width:40px;}
.inputsizeSS{width:60px;}
.inputsizeS{width:100px;}
.inputsizeM{width:150px;}
.inputsizeMM{width:200px;}
.inputsizeL{width:300px;}
.inputsizeLL{width:350px;}
.inputsizeXL{width:500px;}
.width10{width:10%;}
.width15{width:15%;}
.width20{width:20%;}
.width25{width:25%;}
.width30{width:30%;}
.width35{width:35%;}
.width40{width:40%;}
.width60{width:60%;}
.width65{width:65%;}
.width70{width:70%;}
.width75{width:75%;}
.width80{width:80%;}
.width85{width:85%;}
.width90{width:90%;}
.width95{width:95%;}
.width99{width:99%;}
.width100{width:100%;}	

/* line-hight */
.lineheight01{line-height:1.2em;}
.lineheight02{line-height:1.5em;}
.lineheight03{line-height:1.8em;}
.lineheight04{line-height:2em;}
.lineheight05{line-height:2.5em;}
/* font */
.font-size1{font-size:0.769em;}
.font-size2{font-size:0.923em;}
.font-size3{font-size:1.154em;}
.font-size4{font-size:1.385em;}
.font-size5{font-size:1.615em;}
.font-size6{font-size:1.843em;}
.font-size7{font-size:2em;}
.font-size8{font-size:2.2em;}
.font-size9{font-size:2.5em;}
.font-bold{font-weight:bold;}

/* 藍色淺底系統 */
/* 一般用字 */
.font-normal{color:#fff;}
.font-normal a{color:#ffe010;}
.font-normal a:hover{color:#ff9110;}
/* 有色用字 */
.font-stress{color:#249dca;}
.font-stress a{color:#249dca; text-decoration:none;}
.font-stress a:hover{color:#00aeee;}
/* 標題用字 */
.font-title{color:#0e9ebc;}
.font-title a{color:#0e9ebc; text-decoration:none;}
.font-title a:hover{color:#2173b3;}
.font-subtitle{color:#00830f;}
.font-subtitle a{color:#00830f; text-decoration:none;}
.font-subtitle a:hover{color:#2173b3;}
/* 說明用字 */
.font-light{color:#5f5f5f;}
.font-light a{color:#5f5f5f; text-decoration:none;}
.font-light a:hover{color:#00aeee; text-decoration:underline;}
.font-copy{color:#f2f2f2;}
.font-copy a{color:#f2f2f2; text-decoration:none;}
.font-copy a:hover{color:#00aeee;}
/* 純白字 */
.font-white{color:#fff;}
.font-white a{color:#fff; text-decoration:none;}
.font-white a:hover{color:#FF6;}

.font-red{color:#FF0000;}

/*
*{
scrollbar-3Dlight-color:#433E30;
scrollbar-arrow-color:#756842;
scrollbar-darkshadow-color:#555144;
scrollbar-face-color:#AB9962;
scrollbar-highlight-color:#CAC5A6;
scrollbar-shadow-color:#766E38;
scrollbar-track-color:#605F53;
}
SCROLLBAR-3DLIGHT-COLOR 捲軸邊框3D底部顏色 
SCROLLBAR-ARROW-COLOR 捲軸箭頭顏色 
SCROLLBAR-DARKSHADOW-COLOR 捲軸右下邊框陰影顏色 
SCROLLBAR-FACE-COLOR 捲軸整體面顏色 
SCROLLBAR-HIGHLIGHT-COLOR 捲軸邊框亮面顏色 
SCROLLBAR-SHADOW-COLOR 捲軸左上邊框陰影顏色 
SCROLLBAR-TRACK-COLOR 捲軸底部顏色 

*/