@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-image: url(../images/bg3.jpg);background-color:#6d7f53;height:100%;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:99; /* 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 */
}
/* 進版 */
#indexflash{position:absolute; margin-left:355px; margin-top:160px;}
.btn01{position:absolute; margin-left:270px; margin-top:200px; animation:2s indexbtn1;-webkit-animation:2s indexbtn1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;opacity:0;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.btn02{position:absolute; margin-left:490px; margin-top:330px; animation:2s 1.5s indexbtn2;-webkit-animation:2s 1.5s indexbtn2;opacity:0; -webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.btn03{position:absolute; margin-left:490px; margin-top:330px; animation:2s 2.5s indexbtn3;-webkit-animation:2s 2.5s indexbtn3;opacity:0; -webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.btn04{position:absolute; margin-left:640px; margin-top:200px; animation:2s 3.5s indexbtn4;-webkit-animation:2s 3.5s indexbtn4;opacity:0; -webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.btn05{position:absolute; margin-left:680px; margin-top:290px; animation:2s 4.5s indexbtn5;-webkit-animation:2s 4.5s indexbtn5;opacity:0; -webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.btn06{position:absolute; margin-left:650px; margin-top:400px; animation:2s 5s indexbtn6;-webkit-animation:2s 5s indexbtn6;opacity:0; -webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}

.btn01:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}
.btn02:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}
.btn03:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}
.btn04:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}
.btn05:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}
.btn06:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}

.logoUP{position:absolute; margin-left:480px; margin-top:55px;opacity:0;animation:1.5s 6s logoupmove;-webkit-animation:1.5s 6s logoupmove;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.logoDOWN{position:absolute; margin-left:370px; margin-top:490px;opacity:0;animation:1.5s 6s logodownmove;-webkit-animation:1.5s 6s logodownmove;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}

@-webkit-keyframes indexbtn1 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to {  margin-left:270px; margin-top:200px;opacity:0.6; }
}
@keyframes indexbtn1 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:270px; margin-top:200px;opacity:0.6; }
}
@-webkit-keyframes indexbtn2 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:230px; margin-top:290px;opacity:0.6; }
}
@keyframes indexbtn2 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:230px; margin-top:290px;opacity:0.6; }
}
@-webkit-keyframes indexbtn3 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:260px; margin-top:400px; opacity:0.6; }
}
@keyframes indexbtn3 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:260px; margin-top:400px; opacity:0.6;}
}
@-webkit-keyframes indexbtn4 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:640px; margin-top:200px;opacity:0.6; }
}
@keyframes indexbtn4 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:640px; margin-top:200px;opacity:0.6; }
}
@-webkit-keyframes indexbtn5 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:680px; margin-top:290px; opacity:0.6;}
}
@keyframes indexbtn5 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:680px; margin-top:290px; opacity:0.6;}
}
@-webkit-keyframes indexbtn6 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:650px; margin-top:400px;opacity:0.6; }
}
@keyframes indexbtn6 {
  from { margin-left:490px; margin-top:330px; opacity:0;}
  to { margin-left:650px; margin-top:400px; opacity:0.6;}
}
@-webkit-keyframes logoupmove{
  from { margin-left:480px; margin-top:120px; opacity:0;}
  to { margin-left:480px; margin-top:55px;opacity:1; }
}
@keyframes logoupmove{
  from { margin-left:480px; margin-top:120px; opacity:0;}
  to { margin-left:480px; margin-top:55px;opacity:1; }
}
@-webkit-keyframes logodownmove{
  from { margin-left:370px; margin-top:420px; opacity:0;}
  to { margin-left:370px; margin-top:490px;opacity:1; }
}
@keyframes logodownmove{
  from { margin-left:370px; margin-top:420px; opacity:0;}
  to { margin-left:370px; margin-top:490px;opacity:1; }
}


/* 版面控制項 */
.twocol{}
.twocol:after{display:block; clear:both; content:"."; visibility:hidden; height:0;}
.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;}

/* line-hight */
.lineheight01{line-height:1.2em;}
.lineheight02{line-height:1.5em;}
.lineheight03{line-height:1.8em;}
.lineheight04{line-height:2em;}

/* 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-menu{color:#ccdfb0;}
.font-menu a{color:#ccdfb0; text-decoration:none;}
.font-menu a:hover{color:#fff;}
/* 有色用字 */
.font-stress{color:#249dca;}
.font-stress a{color:#249dca; text-decoration:none;}
.font-stress a:hover{color:#00aeee;}
.font-green{color:#386700;}
.font-lightgreen{color:#5EA848;}
/* 標題用字 */
.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-nowork{color:#C5C5C5;}
.font-nowork a{color:#c5c5c5; text-decoration:none;}
.font-nowork 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 捲軸底部顏色 

*/