@charset "big5";
/* CSS Document */


/*????*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);


/*虎航動畫*/
@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:#bfeaff;}
.containter {margin: 0 auto; width: 980px;}

.header {background-color:#bfeaff;}
.top-normal, .top-img {height: 324px;}
.top-normal {margin-bottom: 10px;  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);}
.top-img {background: url(../images/top.jpg) center top no-repeat;}
.top-mobile {display: none; padding-top: 40px;}
.top-mobile img {display: block; width: 100%;}

.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: 0px; 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(#dcaaf2, #ffffff); color: #0c7a75; 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(#98eba9, #ffffff); color: #483691;}
#menu a small {font-size: 16px; line-height: 20px; 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: 20px; line-height: 32px; 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 14px 14px 0;}
.content p, .content .box, .content .section {margin: 10px 10px 10px; color: #0c5791; font-size: 14px; line-height: 24px; letter-spacing: 0.5px;  font-family: '微軟正黑體'; 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: #1477c4; color: #ffffff; margin-left: 0; margin-right: 190px; margin-bottom: 8px;}
#content-1 h2, #content-1 .section p {clear: none;}
#content-2 h2 {background-color: #1477c4; color: #ffffff; margin-left: 0; margin-right: 190px; margin-bottom: 8px;}
#content-2 h2, #content-2 .section p {clear: none;}
#content-3 h2 {background-color: #1477c4; color: #ffffff; margin-left: 0; margin-right: 190px; margin-bottom: 8px;}
#content-3 h2, #content-3 .section p {clear: none;}
#content-4 h2 {background-color: #1477c4; color: #ffffff; margin-left: 0; margin-right: 190px; margin-bottom: 8px;}
#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-left: 50px; padding-left: 2% \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(#34814b, #0b4711); cursor: pointer;}
.menu-prod a.current {cursor: default;}
#menu-prod-1 {width:19.5%; 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;}