@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, .Products .probox::after, .contact-box .contact::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }

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

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: 16px; 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: 10px; }
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; }

section { display: block; width: 100%; position: relative; }

.Company { background: url(../images/inbg-com.jpg) no-repeat center; height: 808px; text-align: center; }
.Company img { margin-top: 20px; }
.Company p { width: 50%; margin: 50px auto; display: block; }
.Company b { display: block; color: #007516; font-size: 24px; margin-bottom: 10px; }

.About { background: url(../images/in-about.png) no-repeat center; height: 626px; z-index: 10; margin-top: -65px; }
.About div { position: absolute; width: 35%; right: 10%; top: 50px; }
.About span { display: block; text-align: center; margin-bottom: 30px; }
.About p { color: #fff; }

.icon { text-align: center; margin: 120px auto 80px auto; width: 100%; }

.Products { background: url(../images/inbg.jpg) repeat; padding: 8% 5%; }
.Products .title1 { display: block; text-align: center; }
.Products .title2 { display: none; text-align: center; }
.Products .probox { margin: 50px auto; width: 80%; }
.Products .probox div { float: left; width: 33.3%; text-align: center; position: relative; }
.Products .probox div .box { display: block; background: #71ba09; padding: 15% 0 8% 0; height: 580px; }
.Products .probox div .box b { font-size: 30px; color: #71ba09; background: #fff; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: block; width: 80%; margin: 10px auto; }
.Products .probox div .box i { color: #fdff62; font-size: 20px; padding: 10px 0; border-bottom: 1px dotted #fdff62; display: block; width: 80%; margin: 10px auto; }
.Products .probox div .box p { color: #fff; font-size: 20px; line-height: 36px; display: block; margin-bottom: 50px; }
.Products .probox div .box a { color: #fff; padding: 10px; border: 1px solid #fff; }
.Products .probox div .box a:hover { color: #fdff62; border: 1px solid #fdff62; }
.Products .probox div .arrow1 { display: block; margin-top: -12%; }
.Products .probox div .arrow1 img { display: block; }
.Products .probox div .arrow2 { display: none; margin-top: -12%; }
.Products .probox div .arrow2 img { display: block; }
.Products .probox div .img { width: 100%; text-align: center; position: relative; z-index: 10; padding: 0 5%; display: block; }
.Products .probox div .img img { border: 10px solid #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
.Products .probox div:nth-of-type(2) .box { background: #736a62; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.Products .probox div:nth-of-type(2) .arrow1 { display: none; }
.Products .probox div:nth-of-type(2) .arrow2 { display: block; }

.contact-top { width: 100%; height: 0; padding-bottom: 19.53125%; background: url(../images/in-contact.jpg) no-repeat center; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; position: relative; }
.contact-top span { display: block; color: #fff; position: absolute; bottom: 20%; left: calc(50% - 640px); width: 100%; max-width: 1280px; }
.contact-top span b { font-size: 30px; }
.contact-top span p { width: 60%; }
.contact-top span i { display: block; }

#map { width: 100%; height: 400px; display: block; }
#map iframe { width: 100%; height: 100%; display: block; }

.contact-box { display: block; width: 100%; padding: 5% 0; background: #f0f0f0; }
.contact-box .title { font-size: 36px; color: #71ba09; display: block; width: 96%; max-width: 1280px; margin: 0 auto 30px auto; }
.contact-box .title i { margin-left: 10px; }
.contact-box .contact { display: block; width: 96%; max-width: 1280px; margin: 0 auto; }
.contact-box .contact table { float: left; width: 50%; }
.contact-box .contact table td { padding: 5px; line-height: 36px; }
.contact-box .contact table td:first-child { font-size: 18px; color: #555; width: 80px; }
.contact-box .contact table input[type=text], .contact-box .contact table textarea { width: 100%; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px; border: none; }
.contact-box .contact table input.w20 { width: 20%; }
.contact-box .contact table input.w20 + img { vertical-align: middle; margin-left: 5px; }
.contact-box .contact table tr:last-child td { text-align: center; padding: 20px; }
.contact-box .contact .con-text { float: right; width: 40%; color: #777; }
.contact-box .contact .con-text p { font-size: 20px; }
.contact-box .contact .con-text p i { color: #71ba09; margin: 0 10px; }
.contact-box .contact .con-text span { display: block; margin: 20px auto; }
.contact-box .contact .con-text span b { display: inline-block; border-bottom: 1px solid #555; width: calc(80% - 100px); height: 1px; vertical-align: middle; }
.contact-box .contact .con-text span a { display: inline-block; vertical-align: middle; }
.contact-box .contact .con-text span a:hover { opacity: .7; }
.contact-box .contact .con-text ul { font-size: 16px; line-height: 36px; }
.contact-box .contact .con-text ul li { padding-left: 35px; }
.contact-box .contact .con-text ul li:nth-child(1) { background: url(../images/icon-phone2.png) no-repeat 0 5px; }
.contact-box .contact .con-text ul li:nth-child(2) { background: url(../images/icon-fax.png) no-repeat 0 5px; }
.contact-box .contact .con-text ul li:nth-child(3) { background: url(../images/icon-mail.png) no-repeat 0 5px; }
.contact-box .contact .con-text ul li:nth-child(4) { background: url(../images/icon-home.png) no-repeat 0 5px; }

.btnA { background: #71ba09; color: #fff; padding: 5px 25px; border: none; font-size: 16px; cursor: pointer; }

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: 15px; }
  header .menu nav a.line:before { content: "/"; color: #71ba09; margin: 0 5px; }
  header .menu nav .search { margin-left: 5px;}
  header .menu nav .search input{ width: 120px; }
  .About div {  width: 40%; right: 5%; top: 15px; }
  .About span {  margin-bottom: 10px; } }
@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) { .icon { width: 90%; }
  .Products .probox div .box p { font-size: 16px; }
  .contact-top span { bottom: 15%; left: 2%; width: 90%; } }
@media (max-width: 1024px) { .contact-top span { bottom: 5%; left: 2%; width: 50%; }
  .contact-top span p { width: auto; }
  .contact-top span i { display: inline-block; } }
@media (max-width: 768px) { .Company { background: url(../images/inbg-com.jpg) no-repeat left; }
  .Company p { width: 80%; }
  .About { background: url(../images/in-about.png) no-repeat right top; height: 500px; margin-top: 0px; }
  .About div { position: absolute; width: 80%; right: 10%; top: 20px; }
  .icon { margin: 80px auto; width: 90%; }
  .Products .probox { margin: 50px auto; width: 100%; }
  .Products .probox div .img { left: calc(50% - 90px); top: 0; width: 180px; }
  .Products .probox div .box b { font-size: 20px; }
  .contact-top { background: url(../images/in-contact.jpg) no-repeat left bottom; -moz-background-size: auto; -o-background-size: auto; -webkit-background-size: auto; background-size: auto; height: 150px; padding-bottom: 0; }
  .contact-top span { display: block; color: #fff; position: static; width: 90%; margin: 0px auto; padding-top: 30px; }
  .contact-box .title { font-size: 24px; }
  .contact-box .contact table { float: none; width: 100%; }
  .contact-box .contact .con-text { float: none; width: 100%; padding-top: 50px; border-top: 1px solid #ccc; }
  .contact-box .contact .con-text span b { width: calc(90% - 100px); } }
@media (max-width: 640px) { .contact-box .contact table td:first-child { font-size: 16px; color: #555; width: 80px; }
  .Products .probox { margin: 0px auto; width: 100%; }
  .Products .probox div { float: none; width: 100%; margin-bottom: 50px; padding-top: 5%; }
  .Products .probox div .box { display: block; padding: 15% 0 8% 0; height: auto; }
  .Products .probox div .box b { font-size: 18px; }
  .Products .probox div .box i { font-size: 16px; }
  .Products .probox div .box p { font-size: 16px; line-height: 36px; display: block; margin-bottom: 50px; }
  .Products .probox div .box a { color: #fff; padding: 10px; border: 1px solid #fff; }
  .Products .probox div .box a:hover { color: #fdff62; border: 1px solid #fdff62; }
  .Products .probox div .arrow1 { display: none; }
  .Products .probox div:nth-of-type(2) .arrow2 { display: none; }
  .Products .probox div .img img { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
  .Products .title1 { display: none; }
  .Products .title2 { display: block; }
  .contact-box .contact .con-text p { font-size: 16px; }
  .contact-box .contact table td:first-child { font-size: 14px; }


   }
@media (max-width: 480px) { .contact-top { height: auto; }
  .contact-top span b { font-size: 18px; }
  .contact-top span {padding: 20px 5px; }
  .About { height: 700px;  }
  .Company p { margin: 20px auto; width: 90%; }
  }
@media (max-width: 414px) {
  .About div { top: 30px; }
  .About div { width: 90%; right: 5%; top: 10px; }
  .icon {  margin: 30px auto; width: 100%; }
  .About { background:#5ea500 url(../images/in-about.png) no-repeat right top;  }
  }


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