@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

img {
	max-width:100%;
}

.clearfix {
  overflow: auto;
}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}


#web-outer {
	max-width:1920px;
}


#header {
	position: relative;
	margin: 0 auto;
}

h1,h2,h3 { display: none;}

.pics_outside {
    width: 100%;
	height: 576px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.pics img { max-width: 1920px;}

.logo { 
	z-index: 700;
	position:relative;
	top:80px;
	margin-left:59%;
}

.logo-pic img { max-width: 274px;}


.v { 
	z-index: 710;
	position: absolute;
	top:240px;
	left:128px;
}
.v img {  max-width: 25px;}

#slides { z-index: 10; position:absolute; top:0;}

.v {
  animation: animationFrames ease-in 1s;
  animation-iteration-count: infinite;
  transform-origin: 0% 50%;
  -webkit-animation: animationFrames ease-in 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin:0% 50%;
  -moz-animation: animationFrames ease-in 1s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames ease-in 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames ease-in 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,1px)  ;
  }
  33% {
    transform:  translate(0px,4px)  ;
  }
  83% {
    transform:  translate(0px,13px)  ;
  }
  100% {
    transform:  translate(0px,18px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,1px)  ;
  }
  33% {
    -moz-transform:  translate(0px,4px)  ;
  }
  83% {
    -moz-transform:  translate(0px,13px)  ;
  }
  100% {
    -moz-transform:  translate(0px,18px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,1px)  ;
  }
  33% {
    -webkit-transform:  translate(0px,4px)  ;
  }
  83% {
    -webkit-transform:  translate(0px,13px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,18px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,1px)  ;
  }
  33% {
    -o-transform:  translate(0px,4px)  ;
  }
  83% {
    -o-transform:  translate(0px,13px)  ;
  }
  100% {
    -o-transform:  translate(0px,18px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,1px)  ;
  }
  33% {
    -ms-transform:  translate(0px,4px)  ;
  }
  83% {
    -ms-transform:  translate(0px,13px)  ;
  }
  100% {
    -ms-transform:  translate(0px,18px)  ;
  }
}


/*----側選單---*/
.nav {
	position:fixed;
	z-index: 999;
	top:280px;
	right:10px;
	/*background:url(img/nav.png) 0 0 no-repeat;*/
	padding-top: 79px;
	width: 90px;
	/*height: 199px;*/
}

.nav-top { background:url(img/nav-top.png) center top no-repeat; height: 81px; text-indent: -3000px; }
.nav-bom {	
    width: 100%;  
	background: url(img/nav-bom.png) center top no-repeat;
	height: 42px;
     text-align: center;
}

.nav-bom a {
    width: 100%;
    height: 100%;
    display: block;
	color: #ded3ca;
    padding-top:12px;
}

.nav-bom a:hover {
	color:#ffffff;
    font-size: 16px;
    text-decoration: none;
}

.nav li {
	text-align: center;
	line-height: 7px;
	width: 90px;
    background: #ded3ca; 
    padding: 2px 0;
}

.nav li a {
	width: 90%;
	display: block;
	outline: none;
	font-size:14px;
	font-weight: bold;
	color:#937664;
	font-family: "微軟正黑體","黑體";
	border:1px solid #b9ada3; 
    margin: 0 5px;
}


.nav li#btn1 a:hover,.nav li#btn1 a.active {
	color:#ffffff;
	background: #8862a0;
}

.nav li#btn2 a:hover,.nav li#btn2 a.active {
	color:#ffffff;
	background: #31808a;
}

.nav li#btn3 a:hover,.nav li#btn3 a.active {
	color:#ffffff;
	background: #223550;
}

.nav li#btn4 a:hover,.nav li#btn4 a.active {
	color:#ffffff;
	background: #006444;
}

.nav li#btn5 a:hover,.nav li#btn5 a.active {
	color:#ffffff;
	background: #4f357c;
}

.nav li#btn6 a:hover,.nav li#btn6 a.active {
	color:#ffffff;
	background: #00416b;
}

/*------media query----------*/

/*---平板-----*/

@media only screen and (max-width:768px) {
	.nav { display: none;}
}

@media only screen and (min-width: 601px) and (max-width:768px) {
	.logo {margin-left:50%;}
}

@media only screen and (min-width: 481px) and (max-width:600px) {
	.logo { margin-left:20%;}
}

/*---手機版-----*/

@media only screen and (max-width:480px) {
	.logo { margin-left:16%; top:60px;}
}


/*---手機版2-----*/
@media only screen and (max-width:320px) {
	.logo { top: 60px; margin-left:auto;}
	.logo-pic {text-align: center;}
	.v {left: 50%; margin-left: -10px;}
}