@charset "big5";
/* CSS Document */
body {margin: 0}
h1, h2 {margin: 0; padding: 0; height: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; _display: none;}
.clear {clear: both;}

/* 主視覺 */
.header {padding-top: 40px;}
.header img {display: block; width: 100%;}
.top-normal, .top-normal div {width: 100%; height: 360px;}
.top-normal {position: relative;}
.top-normal div {background-position: center top; background-repeat: no-repeat; position: absolute; top: 0; left: 0; display: none \0; display: none \9;}
.top-mobile {display: none;}

/* 主視覺圖像變換 */
@keyframes top-summer-fade {
  0%   {opacity: 0;}
  15%  {opacity: 0;}
  25%  {opacity: 1;}
  80%  {opacity: 1;}
  90%  {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes top-autumn-fade {
  0%   {opacity: 0;}
  40%  {opacity: 0;}
  50%  {opacity: 1;}
  80%  {opacity: 1;}
  90%  {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes top-winter-fade {
  0%   {opacity: 0;}
  65%  {opacity: 0;}
  75%  {opacity: 1;}
  90%  {opacity: 1;}
  100% {opacity: 0;}
}
.top-spring {background-image: url(../images/top_01.jpg);}
.top-summer {background-image: url(../images/top_02.jpg); animation: top-summer-fade 20s linear infinite;}
.top-autumn {background-image: url(../images/top_03.jpg); animation: top-autumn-fade 20s linear infinite;}
.top-winter {background-image: url(../images/top_04.jpg); animation: top-winter-fade 20s linear infinite;}

/* IE9以下不支援animation，改為配合頁籤顯示相對應的圖片 */
.season-spring .top-spring {display: block \0; display: block \9;}
.season-summer .top-summer {display: block \0; display: block \9;}
.season-autumn .top-autumn {display: block \0; display: block \9;}
.season-winter .top-winter {display: block \0; display: block \9;}

/* 內容 */
.container {margin: auto; padding-top: 10px; width: 980px;}
.main {width: 540px; float: left;}
.aside {width: 430px; float: right;}
.footer {clear: both;}

/* 選單 */
.nav {width: 100%; max-width: 540px;}
.nav a {display: block; width: 25%; float: left; position: relative;}
.nav a img {display: block; width: 100%; border: none;}
.nav a img.hover {position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.25s;}
.nav a:hover img.hover, .nav a.current img.hover {opacity: 1; filter: alpha(opacity=100);}
.nav .clear {height: 5px;}

/* 景點介紹 */
.section {margin: 10px 0; position: relative; }
.figure img {display: block; width: 100%;}
.details {transition: opacity 0.5s;}
.details .summary, .details p, .see {position: absolute;}
.details .summary, .see {background-color: rgba(0,0,0,0.7); background-color: #000000 \9; color: #ffffff;}
.details .summary {padding: 8px; font-size: 24px; line-height: 26px; font-family: Arial, Helvetica, sans-serif, '微軟正黑體'; border-left-style: solid; border-width: 10px; top: 10px; left: 0;}
.details p {margin: 10px; padding: 5px; background-color: rgba(255,255,255,0.8); background-color: #ffffff \9; color: #333333; font-size: 13px; text-align: justify; left: 0; bottom: 0; _position: static;}
.copy, .copy a, copy a:hover {color: #999999;}
.see {margin: 10px; padding: 5px 8px; top: 0; right: 0; cursor: default; display: none \9;}
.see i {font-size: 24px; line-height: 24px;}
.photo-seeing {opacity: 0; filter: alpha(opacity=0);}
.gotoprod {display: none; padding: 0 15px; text-align: right;}
.gotoprod a {display: inline-block; padding: 0 10px; background-color: #ff0066; color: #ffffff; font-size: 16px; line-height: 24px; font-family: Arial, Helvetica, sans-serif, '微軟正黑體'; border-radius: 20px;}
.gotoprod a:hover {background-color: #ff00ff;}
@keyframes gotoprod-arrow {
  form {left: 0px;}
  to   {left: 5px;}
}
.gotoprod b {margin-right: 5px; font-size: 24px; position: relative; animation: gotoprod-arrow 0.5s linear infinite alternate;}

/* 景點介紹各頁籤標題顏色 */
.season-spring .summary {border-color: #ff66ff;}
.season-summer .summary {border-color: #00cc66;}
.season-autumn .summary {border-color: #ff6666;}
.season-winter .summary {border-color: #3399ff;}

/* 產品區 */
.aside .contain {padding-bottom: 20px;}
.hotline {width: 94%; height: 1px; margin: 0px auto; background: url(../images/line.gif) center bottom repeat-x;}
#prod {display: none; margin-bottom: 25px; padding-top: 15px; padding-bottom: 10px; color: #6600cc; font-size: 26px; font-weight: bold; font-family: Arial, Helvetica, sans-serif, '微軟正黑體'; text-align: center; border-bottom-style: dotted; border-bottom-width: 2px;}
#prod b {background-color: #ffffff; position: relative; top: 20px;}

/* 地圖 */
.map {padding-bottom: 10px; width: 430px; float: right;}
.map img {display: block; margin: auto; width: 100%; max-width: 430px;}

/* 回頁首 */
a#jump {display: none \9;}
a#jump div {width: 50px; height: 50px; background-color: #cc0000; color: #ffffff; font-size: 16px; line-height: 16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; opacity: 0.7; filter: alpha(opacity=70); cursor: pointer; position: fixed; right: 15px; bottom: 15px; border-radius: 50%; z-index: 6; _display: none; transition: background-color 0.2s linear, opacity 0.2s linear, filter 0.2s linear, transform 0.1s linear;}
a#jump:hover div {background-color: #ff00ff; opacity: 1; filter: alpha(opacity=100); transform: scale(1.25,1.25); box-shadow: 0 2px 6px rgba(0,0,0,0.7);}
a#jump b {display: block; font-size: 24px; line-height: 24px; font-family: Verdana, Geneva, sans-serif; position: relative; top: 5px;}