@charset "big5";
/* CSS Document */
body {margin: 0;}
h1 {margin: 0; padding: 0; height: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; _display: none;}
.main {margin: 0 auto; width: 980px; background-color: #ffffff; *background-color: #f9e7ff;}

.top-normal {height: 360px; background: url(../images/top.jpg) center top no-repeat;}
.top-mobile {display: none;}
.top-mobile img {display: block; width: 100%;}

.containter {background-color: #f9e7ff; border:solid 1px #330066; border-radius: 10px; position: relative;}
.article {width: 530px; float: left;}
.aside {width: 440px; float: right; position: relative;}
.footer {height: 10px; clear: both;}

#menu {position: absolute; top: -41px; text-align: center; *position: static; *float: left; *width: 530px;}
#menu a {display: block; float: left; width: 133px;}
#menu a i {display: block; width: 100%; height: 40px; background-position: 0 0; background-repeat: no-repeat;}
#menu a.current i, #menu a:hover i {background-position: 0 -40px;}
#menu a em {display: none; margin: 5px 0; padding: 8px 0; width: 100%; background-color: #b366cc; color: #ffffff; font-size: 22px; line-height: 22px; letter-spacing: 1px; font-family: '微軟正黑體'; font-weight: normal; font-style: normal; text-align: center; text-shadow: 1px 1px 0 #660099; border: solid 1px #660099; box-sizing: border-box;}
#menu a.current em, #menu a:hover em {background-color: #ffccff; color: #660099; font-weight: bold; text-shadow: none; box-shadow: 0 3px 6px #cc99ff;}
#menu hr {height: 0; border: none; clear: both;}

#menu-1 i {background-image: url(../images/menu_01.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu_01.png', sizingMethod='crop');}
#menu-2 i {background-image: url(../images/menu_02.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu_02.png', sizingMethod='crop');}
#menu-3 i {background-image: url(../images/menu_03.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu_03.png', sizingMethod='crop');}
#menu-4 i {background-image: url(../images/menu_04.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu_04.png', sizingMethod='crop');}
#menu-5 i {background-image: url(../images/menu_05.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu_05.png', sizingMethod='crop');}
#menu-6 i {background-image: url(../images/menu_06.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu_06.png', sizingMethod='crop');}

.goto {position: absolute; top: -81px; right: -1px; *display: none;}
.goto a i {display: block; width: 175px; height: 80px; background-repeat: no-repeat; background-size: cover; background-image: url(../images/goto.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/goto.png', sizingMethod='crop');}
.goto a i:hover {background-image: url(../images/goto_hover.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/goto_hover.png', sizingMethod='crop');}
.goto a em {display: none; color: #ffffff; font-size: 18px; line-height: 18px; letter-spacing: 1px; font-family: '微軟正黑體'; font-weight: normal; font-style: normal;}

.prod {margin-top: 10px; margin-right: 10px; padding: 10px 0; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 6px rgba(51, 0, 102, 0.5);}
.menu-prod {margin-left:27%; width: 100%; max-width: 400px;}
.menu-prod a {display: block; width: 25%; max-width: 100px; float: left; position: relative;}
.menu-prod a img {width: 100%; border: none;}
.menu-prod a img.hover {position: absolute; top: 0; left: 0; visibility: hidden;}
.menu-prod a:hover img.hover {visibility: visible;}
.hotline {width: 94%; height: 1px; margin: 0px auto; background: url(../images/line.gif) center bottom repeat-x;}

.content {margin: 0 auto; padding: 10px 0; width: 495px;}
.content section {margin-bottom: 10px;}
.content h2, .content h3 {clear: both;}
.content h2 {margin: 0; margin-bottom: 5px; padding: 0; height: 30px; background-position: center center; background-repeat: no-repeat; color: #f9e7ff; font-size: 0; text-indent: 100%; _text-indent: 0; white-space: nowrap; overflow: hidden;}
.content h3 {margin: 0; margin-bottom: 5px; padding: 5px; background-color: #000099; color: #ffffff; font-size: 16px; line-height: 16px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif, '微軟正黑體'}
.content p {margin: 0; margin-bottom: 5px; padding: 0; font-size: 13px; line-height: 20px; letter-spacing: 1px; text-align: justify;}
.content .figure-l, .content .figure-r {margin: 5px 0 15px; padding: 5px; width: 180px; background-color: #ffffff; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);}
.content .figure-l {float: left; margin-right: 10px;}
.content .figure-r {float: right; margin-left: 10px;}
.content .figure-l img, .content .figure-r img {display: block;}
.content .figure-l em, .content .figure-r em {display: block; margin-top: 3px; font-size: 11px; line-height: 11px; letter-spacing: 1px; font-weight: normal; font-style: normal; text-align: right;}
.content .figure-h img  {display: block; margin: 0 auto 5px; width: 100%; max-width: 492px;}

.mapdl {margin-top: 10px;}
.mapdl a img {display: block; margin: 0 auto; width: 96%; max-width: 410px; border: solid 2px #ffffff; border-radius: 10px;}
.mapdl a:hover img {border-color: #006600;}
.img{
    display: block;
    width: 100%;
    height: auto;
}
.img img{
    width: 100%;
    height: auto;
}