@charset "UTF-8";
@import url(fonts.css);
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }
html ol, html ul, html li { list-style: none; }
html table { border-collapse: collapse; border-spacing: 0; }
html caption, html th, html td { text-align: left; font-weight: normal; vertical-align: middle; }
html q, html blockquote { quotes: none; }
html q:before, html q:after, html blockquote:before, html blockquote:after { content: ""; content: none; }
html img { border: none; }
html article, html aside, html details, html figcaption, html figure, html footer, html header, html hgroup, html main, html menu, html nav, html section, html summary { display: block; }
html :link, html :visited, html ins { text-decoration: none; }
html *, html *:after, html *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html .clearfix { zoom: 1; }
html .clearfix:before, html .clearfix:after { content: " "; display: table; }
html .clearfix:after { clear: both; }

header .header::after, header .menu .topmenu::after, .Container::after, .About::after, .Pro .prolist::after, .ProMain::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }

.gogotop, .Pro .prolist li p { -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }

.unreset address, .unreset blockquote, .unreset dd, .unreset div, .unreset dl, .unreset dt, .unreset fieldset, .unreset form, .unreset frame, .unreset frameset, .unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset noframes, .unreset ol, .unreset p, .unreset ul, .unreset center, .unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block; }
.unreset li { display: list-item; }
.unreset head { display: none; }
.unreset col { display: table-column; }
.unreset colgroup { display: table-column-group; }
.unreset td, .unreset th { display: table-cell; }
.unreset caption { display: table-caption; }
.unreset th { font-weight: bolder; text-align: center; }
.unreset caption { text-align: center; }
.unreset body { margin: 8px; }
.unreset h1 { font-size: 2em; margin: 0.67em 0; }
.unreset h2 { font-size: 1.5em; margin: 0.75em 0; }
.unreset h3 { font-size: 1.17em; margin: 0.83em 0; }
.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu { margin: 1.12em 0; }
.unreset h5 { font-size: .83em; margin: 1.5em 0; }
.unreset h6 { font-size: .75em; margin: 1.67em 0; }
.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong { font-weight: bolder; }
.unreset blockquote { margin-left: 40px; margin-right: 40px; }
.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address { font-style: italic; }
.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp { font-family: monospace; }
.unreset pre { white-space: pre; }
.unreset button, .unreset textarea, .unreset input, .unreset select { display: inline-block; }
.unreset big { font-size: 1.17em; }
.unreset small, .unreset sub, .unreset sup { font-size: 0.83em; }
.unreset sub { vertical-align: sub; }
.unreset sup { vertical-align: super; }
.unreset s, .unreset strike, .unreset del { text-decoration: line-through; }
.unreset hr { border: 1px inset; }
.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd { margin-left: 40px; }
.unreset ol, .unreset ol li { list-style-type: decimal; }
.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0; }
.unreset ul, .unreset ul li { list-style-type: disc; }
.unreset u, .unreset ins { text-decoration: underline; }
.unreset br:before { content: "\A"; white-space: pre-line; }
.unreset center { text-align: center; }
.unreset :link, .unreset :visited { text-decoration: underline; }
.unreset :focus { outline: thin dotted invert; }

body { font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 15px; line-height: 24px; }

article { padding-bottom: 0px; position: relative; overflow: hidden; }

img { max-width: 100%; }

.mv { -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }

.gogotop { background: #71ba09; width: 80px; height: 38px; text-align: center; position: fixed; bottom: 15%; right: -100%; z-index: 100; border: 5px solid #eee; border-right: none; -moz-border-radius: 50px 0px 0px 50px; -webkit-border-radius: 50px; border-radius: 50px 0px 0px 50px; }
.gogotop a { color: #fff; display: block; }
.gogotop:hover { background: #06c; }

header { width: 100%; background: #fff; border-top: 5px solid #262626; border-bottom: 3px solid #71ba09; }
header .header { width: 100%; max-width: 1280px; margin: 0px auto; padding: 0 1%; }
header .logo { display: block; float: left; width: 40%; margin: 40px 0 20px 0; }
header .menu { display: block; float: right; width: 60%; text-align: right; }
header .menu .topmenu { display: inline-block; height: 35px; padding: 3px 20px 0 30px; -moz-border-radius: 0 0 5px 0; -webkit-border-radius: 0; border-radius: 0 0 5px 0; background: url(../images/topline.jpg) no-repeat; }
header .menu .topmenu p { display: inline-block; color: #fff; font-size: 12px; margin-right: 20px; }
header .menu .topmenu p img { vertical-align: middle; }
header .menu .topmenu a { display: inline-block; vertical-align: middle; }
header .menu .topmenu a:hover { opacity: .7; }
header .menu nav { display: block; margin-top: 30px; }
header .menu nav a { display: inline-block; font-size: 18px; color: #555; }
header .menu nav a:hover { color: #5bc001; }
header .menu nav a.line:before { content: "/"; color: #71ba09; margin: 0 20px; }
header .menu nav .search { border: 1px solid #5bc001; padding: 2px 5px 2px 2px; display: inline-block; margin-left: 50px; }
header .menu nav .search input { border: none; padding: 2px; }
header .menu nav .search a { font-size: 14px; color: #71ba09; }
header .menu nav .search a:hover { color: #000; }

.Banner { width: 100%; max-width: 1920px; max-height: 798px; margin: 0 auto; display: block; }
.Banner #abgne_fade_pic { position: relative; width: 100%; height: 0; padding-bottom: 41.5625%; }
.Banner #abgne_fade_pic .ad { position: absolute; }
.Banner #abgne_fade_pic .ad img { max-width: 100%; }
.Banner #abgne_fade_pic .control { display: none; }

.BannerPage { width: 100%; max-width: 1920px; max-height: 283px; margin: 0 auto; display: block; }

.Mobile { display: none; width: 100%; background: #fff; position: relative; height: 80px; z-index: 200; border-top: 5px solid #71ba09; }
.Mobile .logo { width: calc(80% - 30px); display: block; margin: 10px 0 0 10px; }
.Mobile .menuBtn { width: 40px; position: absolute; top: 15px; right: 5%; z-index: 101; transition: top 300ms; }
.Mobile .menuBtn span, .Mobile .menuBtn:before, .Mobile .menuBtn:after { display: block; content: ""; transition: all 300ms; background-color: #999; margin: 7px; width: 26px; height: 4px; text-indent: -100%; overflow: hidden; white-space: nowrap; }
.Mobile .active { transform: rotate(180deg); }
.Mobile .active span { background-color: transparent; box-shadow: none; }
.Mobile .active:before, .Mobile .active:after { background-color: #999; }
.Mobile .active:before { transform: translateY(11px) rotate(-45deg); }
.Mobile .active:after { transform: translateY(-11px) rotate(45deg); }
.Mobile ul { display: block; width: 100%; position: absolute; top: 75px; background: rgba(113, 186, 9, 0.9); }
.Mobile ul li { width: 100%; text-align: center; border-bottom: 1px solid #fff; }
.Mobile ul li a { color: #fff; display: block; padding: 15px 5px; }
.Mobile ul li a:hover { background: #333; }
.Mobile ul li.icon { padding: 15px 5px; }
.Mobile ul li.icon a { display: inline-block; width: 24px; height: 16px; padding: 0; margin: 0 5px; }
.Mobile ul li.icon a:hover { background: none; opacity: .7; }
.Mobile ul li.search input { width: calc(100% - 50px); padding: 5px; }
.Mobile ul li.search a { display: inline-block; vertical-align: middle; }
.Mobile ul li.Micon { text-align: center; }
.Mobile ul li.Micon a { display: inline-block; }

.Container { display: block; width: 100%; max-width: 1280px; margin: 50px auto; min-height: 700px; }

.btnA { color: #fff; font-size: 15px; background: #06c; border: none; border-bottom: 3px solid #004f9d; padding: 6px 30px 5px 30px; cursor: pointer; margin-right: 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
.btnA:hover { background: #ff0000; color: #fff; border-bottom: 3px solid #b40b0b; }

.btnB { color: #fff; font-size: 15px; background: #999; border: none; border-bottom: 3px solid #666; padding: 6px 30px 5px 30px; cursor: pointer; margin-right: 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
.btnB:hover { background: #ccc; color: #fff; border-bottom: 3px solid #bfbfbf; }

.About { margin: 50px 0 100px 0; }
.About .left { float: left; width: 49%; display: block; }
.About .left p { font-size: 20px; line-height: 36px; }
.About .right { float: right; width: 49%; display: block; }
.About .text { float: left; width: 100%; }
.About .text b { background: url(../images/dot.jpg) no-repeat; color: #007516; font-size: 25px; padding-left: 50px; }
.About .text p { font-size: 20px; line-height: 36px; }

.Pro .list { display: block; position: relative; margin: 30px auto; }
.Pro .list dt { border-bottom: 1px solid #337c23; padding: 0 20px; }
.Pro .list dt a { display: inline-block; color: #337c23; font-size: 24px; }
.Pro .list dt a:after { content: '●'; margin: 0 20px; color: #b9b1ab; }
.Pro .list dt a:hover, .Pro .list dt a.on { color: #000; }
.Pro .list dt a:last-child:after { content: ''; }
.Pro .list dd { display: block; border-top: 1px solid #fff; background: #337c23; }
.Pro .list dd a { display: inline-block; color: #fff; margin: 0 20px; padding: 15px 0; font-size: 16px; }
.Pro .list dd a:hover { color: #f2e400; }
.Pro .prolist li { width: 33.3%; padding: 0 2%; float: left; margin-bottom: 50px; }
.Pro .prolist li a { display: block; position: relative; }
.Pro .prolist li img { display: block; border: 5px solid #dbdbdb; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.Pro .prolist li p { display: block; width: 100%; height: 100%; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.5); position: absolute; color: #fff; text-align: center; font-size: 20px; vertical-align: middle; padding-top: 55%; opacity: 0; }
.Pro .prolist li:hover p { opacity: 1; }

.ProMain { display: block; width: 900px; height: auto; background: url(../images/overbg.jpg) repeat; margin: 30px auto; padding: 30px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.ProMain .prod-img { float: left; width: 35%; }
.ProMain .prod-img img { display: block; border: 5px solid #dbdbdb; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.ProMain .prod-wd { float: left; width: 60%; margin: 5% 0 0 5%; }
.ProMain .prod-wd > b { font-size: 20px; }
.ProMain .prod-wd .ser { display: block; background: #9e968f; color: #fff; font-size: 13px; padding: 5px 0 5px 20px; margin: 10px auto; }
.ProMain .prod-wd .ser i { padding-left: 25px; margin-right: 10px; }
.ProMain .prod-wd .ser i:first-child { background: url(../images/icon-o1.png) no-repeat; }
.ProMain .prod-wd .ser i:last-child { background: url(../images/icon-o2.png) no-repeat; }
.ProMain .prod-wd .text b { color: #337c23; }

footer { display: block; width: 100%; padding: 2% 0; background: #000; }
footer div { text-align: center; color: #ddd; }
footer div .IwareFoot { display: block; }
footer div a { color: #ddd; }

@media (max-width: 1024px) { header .menu nav a { font-size: 16px; }
  header .menu nav a.line:before { content: "/"; color: #71ba09; margin: 0 10px; }
  header .menu nav .search { margin-left: 20px; } }
@media (max-width: 768px) { html header, .Desktop { display: none; }
  .Mobile { display: block; } }
@media (max-width: 375px) { .Mobile .logo span { font-size: 24px; }
  .Mobile .logo b { font-size: 31px; }
  .Mobile .logo i { font-size: 13px; } }
@media (max-width: 320px) { .Mobile .logo span { font-size: 18px; }
  .Mobile .logo b { font-size: 24px; }
  .Mobile .logo i { font-size: 13px; } }
@media (max-width: 1280px) { .Container { width: 96%; } }
@media (max-width: 1024px) { .About { margin: 20px 0 50px 0; }
  .About .left p { font-size: 16px; line-height: 30px; }
  .About .text b { font-size: 20px; padding-left: 50px; }
  .About .text p { font-size: 16px; line-height: 30px; }
  .Pro .list dt a { font-size: 20px; }
  .ProMain { width: 100%; } }
@media (max-width: 768px) { .Container { background: none; margin: 10px auto; }
  .Pro .list dt a { font-size: 16px; }
  .Pro .list dt a:after { margin: 0 15px; }
  .Pro .list dd a { margin: 0 10px; padding: 15px 0; font-size: 14px; }
  .ProMain .prod-img { width: 42%; }
  .ProMain .prod-wd { width: 55%; margin: 5% 0 0 3%; }
  .ProMain .prod-wd .ser i { margin-right: 0px; display: block; } }
@media (max-width: 640px) { .Pro .prolist li { width: 50%; padding: 0 2%; float: left; margin-bottom: 50px; } }
@media (max-width: 480px) { .About .left { float: none; width: 100%; }
  .About .right { float: none; display: none; }
  .ProMain .prod-img { float: none; width: 50%; }
  .ProMain .prod-wd { float: none; width: 100%; margin: 5% 0 0 3%; } }

/*# sourceMappingURL=style-page.css.map */