@charset "big5";
/* CSS Document */

/*虎航動畫*/
@keyframes bgchange {from {background:darkorange;} to {background:#F60;}}

body {margin: 0;}
h1 {margin: 0; padding: 0; height: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; _display: none;}
.main {background-color:#733300;}
.containter {margin: 0 auto; width: 980px;}

.header {background-color: #ffffff;}
.top-normal, .top-img {height: 340px;}
.top-normal {margin-bottom: 10px; background: url(../images/index-bg.png) center top repeat-x; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);padding-top:35px}
.top-img {background: url(../images/top-img1.png) center top no-repeat; }
.top-mobile {display: none; padding-top: 40px;}
.top-mobile img {display: block; max-width:100%; height:auto;}

.article {width: 540px; float: left;}
.aside {width: 440px; background: url(../images/frame_02.gif) center top repeat-y; float: right;}
.footer {height: 10px; clear: both;}
div.aside a.bnrice {position:fixed; right:60px; top:60px; z-index:2; }

#menu {height: 50px; text-align: center; position: relative; top: -10px;}
#menu a {display: inline-block; margin: 0 1%; height: 30px; width: 21%; background-color: #ffffff; background: linear-gradient(#ffd9cc, #ffffff); color: #733300; vertical-align: top; overflow: hidden; cursor: pointer; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); border-radius: 0 0 9px 9px;}
#menu a:not(.current) {transition: height 0.3s;}
#menu a b, #menu a small {display: block; font-family: '微軟正黑體'; white-space: nowrap;}
#menu a b {padding-top: 2px; font-size: 22px; line-height: 27px; letter-spacing: 1px; font-weight: bold;}
#menu a:hover, #menu a.current {height: 50px; background: linear-gradient(#fff2cc, #ffffff); color: #cc0000;}
#menu a small {font-size: 15px; line-height: 18px; font-weight: bold;}
#menu a.current {cursor: default;}

.content {margin: 10px 0;}
.content h2, .content p, .content .figure {clear: both;}
.content h2 {margin: 0 5px 10px; padding: 3px 5px; font-size: 18px; line-height: 22px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif, '微軟正黑體'; text-align: left; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0 15px 15px 0;}
.content p, .content .box, .content .section {margin: 0 10px 10px; color: #ffffff; font-size: 13px; line-height: 22px; letter-spacing: 1px; text-align: justify;}
.content .figure {margin-bottom: 10px; position: relative;}
.content .figure img {display: block; margin: 0 auto; width: 97%; *width: auto; max-width: 520px;}
.content .figure hr {width: 1px; height:100%; background-color: #2c1200; border: none; position: absolute; top: 0; left: 50%;}
.content p img, .content .figure img, .content .box img, .content .section img {border: solid 1px #2c1200;}
.content p img {margin-bottom: 10px;}
.content p img[align=left] {margin-right: 10px;}
.content p img[align=right] {margin-left: 10px;}
.content .box {position: relative;}
.content .box .text {padding: 10px; width: 310px; height: 101px; background-color: #ffc099; color: #200000; position: absolute; top: 0; right: 0;}
.content .section p {margin-left: 0;}
.content .section img {margin-left: 10px;}
.content img[align=left], .content img[align=right] {width: 50%; width: 180px \9; max-width: 180px;}
#content-1 h2 {background-color: #ffb97f; color: #200000;}
#content-2 h2 {background-color: #99ee88; color: #002000;}
#content-3 h2 {background-color: #eebbcc; color: #300000;}
#content-4 h2 {background-color: #cee6f2; color: #000020; margin-left: 0; margin-right: 190px; margin-bottom: 5px;}
#content-4 h2, #content-4 .section p {clear: none;}

.link {padding-top: 20px; text-align: right;}
img.side {display: block; margin: auto;}

.menu-prod {margin: 0 80px; padding-left: 3% \9; width: 94%; alignment-adjust:central;}
.menu-prod a {display: block; margin: 0 1px; padding: 8px 0; background-color: #808080; color: #ffffff; font-size: 16px; line-height: 16px; font-weight: bold; font-family:'微軟正黑體'; text-align: center; float: left; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);}
.menu-prod a.current, .menu-prod a:hover {background-color: #cc9933; background: linear-gradient(#d6ad5c, #a37a29); cursor: pointer;}
.menu-prod a.current {cursor: default;}
#menu-prod-1 {width: 25%; padding-left: 1.5%; padding-left: 0 \9; border-radius: 20px 0 0 20px;}
#menu-prod-2 {width: 30%;}
#menu-prod-3 {width: 19.5%;}
#menu-prod-4 {width: 19.5%; padding-right: 1.5%; padding-right: 0 \9; border-radius: 0 20px 20px 0;}
.content-prod {padding: 10px 10px 0; clear: both;}

.hotline {width: 94%; height: 1px; margin: 0px auto; background: url(../images/line.gif) center bottom repeat-x;}

#online{position:fixed;right:0;top:200px;cursor:pointer;z-index:999;}
#onlinefb{position:fixed;right:0;top:318px;cursor:pointer;z-index:999;}
#onlineline{position:fixed;right:0;top:361px;cursor:pointer;z-index:999;}
