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, fieldset, form, label, legend, 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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

dl, dt, dd, ol, ul, li {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

td {
  vertical-align: middle; }
  td img {
    max-width: none; }

.cell img {
  max-width: none; }

a {
  color: inherit; }

button, label, input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"] {
  cursor: pointer; }

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

/** comm */
body {
  font-family: "微軟正黑體", 'Minion Pro', 'BauerBodni Blk BT', 'Microsoft JhengHei', "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
  font-size: 14px; }
  body a {
    text-decoration: none; }

#container {
  min-width: 1200px;
  margin: 0 auto; }

#header {
  position: absolute;
  width: 100%;
  min-width: 1200px;
  text-align: center;
  z-index: 99; }
  #header .inner-wrap {
    position: relative;
    width: 1200px;
    text-align: left;
    margin: 20px auto 0;
    overflow: hidden; }
    #header .inner-wrap #logo {
      display: inline-block;
      width: 250px;
      vertical-align: middle;
      margin: 0 0 0 10px; }
      #header .inner-wrap #logo img {
        width: 100%;
        margin: 0 auto; }
    #header .inner-wrap .main-nav {
      position: absolute;
      right: 0;
      top: 0;
      text-align: right; }
      #header .inner-wrap .main-nav ul {
        margin: 0 55px 0 0;
        padding: 0;
        text-align: center;
        overflow: hidden; }
        #header .inner-wrap .main-nav ul li {
          display: inline-block;
          width: 90px;
          height: 90px;
          margin: 0 10px;
          color: #fff; }
          #header .inner-wrap .main-nav ul li.on {
            background: url(../images/home-menu-hover.png); }
          #header .inner-wrap .main-nav ul li img {
            display: block;
            margin: 15px auto 10px; }
          #header .inner-wrap .main-nav ul li:hover {
            background: url(../images/home-menu-hover.png); }

#banner .inner-wrap {
  position: relative;
  height: 320px;
  overflow: hidden; }
  #banner .inner-wrap img {
    display: block;
    margin: 0 auto; }
  #banner .inner-wrap:after {
    content: '';
    width: 100%;
    height: 186px;
    display: block;
    background: url(../images/banner-top.png) center no-repeat;
    position: absolute;
    bottom: 0;
    z-index: 0; }
#banner.home .cycle-wrap {
  position: relative;
  margin: 0 auto;
  padding: 0;
  text-align: center; }
  #banner.home .cycle-wrap .cycle-slideshow {
    height: 490px;
    overflow: hidden; }
    #banner.home .cycle-wrap .cycle-slideshow .cycle-item img {
      display: inline-block;
      margin: 0 auto; }
  #banner.home .cycle-wrap:after {
    content: '';
    width: 100%;
    height: 186px;
    display: block;
    background: url(../images/banner-top.png) center no-repeat;
    position: absolute;
    bottom: 0;
    z-index: 0; }
#banner.home .cycle-item-min {
  position: absolute;
  top: 400px;
  width: 100%;
  bottom: 0;
  z-index: 1; }
  #banner.home .cycle-item-min img {
    max-width: 100%; }
  #banner.home .cycle-item-min ul {
    display: block;
    width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 0; }
    #banner.home .cycle-item-min ul li {
      display: inline-block;
      width: 110px;
      height: 110px;
      margin: 0 7px;
      border: 5px solid #D1D1D1;
      border-radius: 50%;
      vertical-align: middle; }
      #banner.home .cycle-item-min ul li:hover {
        border: 5px solid #00B7EE; }
    #banner.home .cycle-item-min ul .on {
      border: 5px solid #00B7EE; }
    #banner.home .cycle-item-min ul .link {
      background: url(../images/home-4.png) center no-repeat; }
      #banner.home .cycle-item-min ul .link a {
        display: block;
        height: 100%;
        text-indent: -9999px; }
      #banner.home .cycle-item-min ul .link:hover {
        background: url(../images/home-4-hover.png) center no-repeat; }

#content .inner-wrap {
  position: relative;
  width: 1000px;
  min-height: 700px;
  margin: 70px auto 0;
  padding: 0 15px;
  box-sizing: border-box;
  overflow: hidden; }
  #content .inner-wrap h1 {
    font-size: 18px;
    font-weight: bold;
    color: #00b7ee;
    margin: 0 0 20px 0; }
    #content .inner-wrap h1 span {
      margin: 0 0 0 5px;
      font-size: 14px;
      color: #757474; }
    #content .inner-wrap h1:after {
      content: '';
      display: block;
      position: absolute;
      top: 25px;
      left: 0;
      width: 1000px;
      height: 2px;
      background: #959595; }
  #content .inner-wrap.home {
    width: 1200px;
    min-height: 550px;
    margin: 100px auto 0;
    padding: 0; }

#footer {
  position: relative;
  height: 100%;
  text-align: center;
  background: #505050;
  border-top: 12px solid #d1d1d1; }
  #footer .top {
    position: absolute;
    top: -45px;
    width: 100%; }
    #footer .top a {
      margin: 0 auto;
      display: block;
      width: 90px;
      height: 90px;
      text-indent: -9999px;
      background: url(../images/footer-top.png) center no-repeat; }
  #footer .inner-wrap {
    width: 1400px;
    margin: 0 auto; }
    #footer .inner-wrap #footer-nav {
      padding: 75px 0 65px 0;
      text-align: center;
      border-bottom: 1px solid #fff; }
      #footer .inner-wrap #footer-nav dl {
        margin: 0 65px;
        padding: 0;
        display: inline-block;
        vertical-align: top;
        color: #fff;
        line-height: 1.3em; }
        #footer .inner-wrap #footer-nav dl dt {
          display: inline-block;
          margin: 0 0 5px 0;
          font-size: 15px;
          font-weight: bold; }
          #footer .inner-wrap #footer-nav dl dt a {
            vertical-align: middle; }
            #footer .inner-wrap #footer-nav dl dt a:hover {
              color: #00B7EE; }
          #footer .inner-wrap #footer-nav dl dt:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin: 0 5px 0 0;
            background: url(../images/footer-icon.png) center no-repeat; }
        #footer .inner-wrap #footer-nav dl dd {
          margin: 0 0 0 15px;
          font-size: 12px;
          color: #E3E3E3; }
          #footer .inner-wrap #footer-nav dl dd:hover {
            color: #00B7EE; }
    #footer .inner-wrap .info-wrap {
      width: 970px;
      margin: 25px auto;
      text-align: left;
      overflow: hidden;
      color: #fff; }
      #footer .inner-wrap .info-wrap h2 {
        float: left;
        font: bold 28px BauerBodni Blk BT;
        line-height: 22px;
        padding: 7px 12px;
        border-right: 6px solid #D1D1D1; }
        #footer .inner-wrap .info-wrap h2 span {
          font: normal bold 14px 微軟正黑體; }
      #footer .inner-wrap .info-wrap address {
        margin: 5px 0 20px 180px; }
        #footer .inner-wrap .info-wrap address dl, #footer .inner-wrap .info-wrap address dt, #footer .inner-wrap .info-wrap address dd {
          display: inline-block; }
        #footer .inner-wrap .info-wrap address dl {
          margin: 0 20px 0 0;
          font-size: 15px; }
          #footer .inner-wrap .info-wrap address dl dt {
            color: #00b7ee; }
          #footer .inner-wrap .info-wrap address dl dd {
            margin: 0; }
      #footer .inner-wrap .info-wrap .copyright {
        margin: 0 0 0 180px;
        font-size: 13px;
        overflow: hidden; }
        #footer .inner-wrap .info-wrap .copyright span:nth-last-child(1) {
          text-align: right;
          margin: 0 20px 0 0; }

/** home */
.home .comm-home {
  position: relative;
  display: inline-block;
  min-height: 410px;
  width: 380px;
  text-align: center;
  vertical-align: top;
  margin: 0 26px 0 0; }
  .home .comm-home figure {
    height: 215px;
    margin: 0 0 20px 0; }
    .home .comm-home figure img {
      display: block;
      margin: 0 auto; }
  .home .comm-home .text {
    width: 350px;
    margin: 0 auto; }
    .home .comm-home .text h2 {
      font: bolder 24px Minion Pro Bold;
      color: #616161;
      margin: 0 0 10px 0; }
    .home .comm-home .text p {
      font-weight: bold;
      letter-spacing: -1px;
      line-height: 1.3em; }
    .home .comm-home .text .home-btn {
      position: absolute;
      bottom: 0;
      width: 350px;
      text-align: center; }
      .home .comm-home .text .home-btn a {
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
        line-height: 23px;
        vertical-align: middle;
        text-decoration: underline; }
        .home .comm-home .text .home-btn a:before {
          content: '';
          display: inline-block;
          width: 23px;
          height: 23px;
          vertical-align: middle;
          margin: -4px 5px 0 0;
          background: url(../images/home-btn-off.png) center no-repeat; }
        .home .comm-home .text .home-btn a:hover {
          text-decoration: none; }
          .home .comm-home .text .home-btn a:hover:before {
            background: url(../images/home-btn-on.png) center no-repeat; }
  .home .comm-home.comm-home:nth-last-child(1) {
    margin: 0; }

/** about */
.about table {
  display: inline-block;
  vertical-align: top;
  width: 660px;
  margin: 0 20px 0 0; }
  .about table tr td:nth-child(1) {
    font: bold 30px Amazone BT;
    color: #236dd2; }
  .about table tr td {
    padding: 20px 20px 20px 0;
    vertical-align: middle;
    border-bottom: 1px solid #E5E5E5;
    font-size: 13px;
    line-height: 1.3em; }
.about figure {
  display: inline-block;
  vertical-align: top;
  margin: 10px 0; }
  .about figure img {
    display: block;
    margin: 0 auto; }

/** service */
.service .pic-wrap, .service .text {
  margin: 40px 0 0;
  display: inline-block;
  vertical-align: top; }
.service .pic-wrap {
  position: relative;
  height: 288px;
  width: 334px;
  text-align: right;
  overflow: hidden; }
  .service .pic-wrap .slick-list {
    height: 250px;
    overflow: hidden; }
    .service .pic-wrap .slick-list .pic-item {
      display: inline-block;
      margin: 0 auto; }
  .service .pic-wrap .slick-prev, .service .pic-wrap .slick-next {
    width: 38px;
    height: 38px;
    margin: 0 0 0 1px;
    display: inline-block;
    border: 0 none;
    font-size: 0;
    text-indent: -999px;
    overflow: hidden; }
  .service .pic-wrap .slick-prev {
    background: url(../images/service-icon-left.jpg) center no-repeat; }
    .service .pic-wrap .slick-prev:hover {
      background: url(../images/service-icon-left-hover.jpg) center no-repeat; }
  .service .pic-wrap .slick-next {
    background: url(../images/service-icon-right.jpg) center no-repeat; }
    .service .pic-wrap .slick-next:hover {
      background: url(../images/service-icon-right-hover.jpg) center no-repeat; }
.service .text {
  margin-left: 45px; }
  .service .text h2 {
    font-size: 18px;
    font-weight: bold;
    color: #01539f; }
  .service .text ul {
    width: 585px;
    margin: 15px 0 0;
    padding: 0; }
    .service .text ul li {
      display: inline-block;
      position: relative;
      margin: 11px 0 11px 12px;
      min-width: 278px;
      font-size: 16px; }
      .service .text ul li:before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border: 1px solid #000;
        background: #01539F;
        border-radius: 50%;
        position: absolute;
        left: -12px;
        top: 3px; }

/** product */
.product h1 {
  padding: 0 0 30px 0; }
.product .info-nav {
  display: inline-block;
  width: 215px;
  font-size: 15px;
  vertical-align: top; }
  .product .info-nav .list, .product .info-nav .list-2 {
    margin: 0;
    padding: 0;
    list-style: none outside none; }
  .product .info-nav .list > li {
    display: block;
    position: relative;
    padding: 10px 0 10px 20px;
    border-bottom: 2px solid #E7E7E7; }
    .product .info-nav .list > li:before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #00B7EE;
      position: absolute;
      top: 12px;
      left: 5px; }
    .product .info-nav .list > li.on .list-2 {
      display: block; }
  .product .info-nav .list-2 {
    margin: 10px 0 0 -20px;
    padding: 5px 0 0 5px;
    border-top: 2px solid #E7E7E7;
    display: none; }
    .product .info-nav .list-2 li {
      padding: 5px 0 5px 0;
      font-size: 12px;
      color: #828282;
      border: 0; }
      .product .info-nav .list-2 li.on a {
        text-decoration: underline; }
.product .item-group {
  display: inline-block;
  width: 736px;
  vertical-align: top;
  margin: 0 0 0 15px; }
  .product .item-group ul {
    margin: 0;
    padding: 0; }
    .product .item-group ul li {
      position: relative;
      display: inline-block;
      width: 225px;
      margin: 0 9px 35px 9px; }
      .product .item-group ul li figure {
        height: 175px;
        border: 1px solid #E5E5E5;
        box-sizing: border-box;
        vertical-align: top; }
        .product .item-group ul li figure img {
          display: block;
          height: 100%; }
        .product .item-group ul li figure:hover:after {
          content: '';
          display: block;
          width: 225px;
          height: 175px;
          background: url(../images/product-hover.png) center no-repeat;
          position: absolute;
          top: 0;
          left: 0; }
      .product .item-group ul li h3 {
        margin: 10px 0;
        font-size: 15px; }
.product .detail {
  display: inline-block;
  width: 720px;
  vertical-align: top;
  margin: 0 0 0 30px;
  position: relative; }
  .product .detail .figure {
    float: left;
    width: 314px;
    height: 244px;
    border: 2px solid #E5E5E5;
    margin: 0 25px 10px 0;
    box-sizing: border-box;
    vertical-align: top; }
    .product .detail .figure:hover .big {
      display: block; }
    .product .detail .figure .big {
      display: none;
      border: 2px solid #E5E5E5;
      width: 720px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99; }
      .product .detail .figure .big img {
        width: 100%; }
  .product .detail .text-wrap h2, .product .detail .text-wrap a, .product .detail .text-wrap img {
    display: inline-block; }
  .product .detail .text-wrap h2 {
    font-size: 15px;
    font-weight: bolder;
    line-height: 22px;
    color: #01539f;
    margin: 0 10px 0 0; }
  .product .detail .text-wrap a {
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    color: #fff;
    width: 82px;
    height: 22px;
    margin: 0 5px;
    background: #00A0E9;
    border-radius: 5px;
    vertical-align: top; }
    .product .detail .text-wrap a:hover {
      background: #959595; }
    .product .detail .text-wrap a img {
      margin: 0 2px 0 0; }
  .product .detail .text-wrap .text {
    margin: 35px 0 0;
    font-size: 12px;
    line-height: 1.2em; }
    .product .detail .text-wrap .text p {
      margin: 0 0 25px 0; }

/** contact */
.contact .form-wrap {
  width: 870px;
  margin: 40px 0 0; }
  .contact .form-wrap caption {
    margin: 0 0 12px 0;
    text-align: left; }
  .contact .form-wrap .blue-text {
    font-weight: bold;
    color: #2b41a1; }
  .contact .form-wrap td {
    vertical-align: top; }
    .contact .form-wrap td .w-wrap {
      width: 400px;
      height: 38px;
      position: relative;
      border: 1px solid #BFBFBF;
      border-radius: 5px;
      margin: 8px 15px 8px 0;
      padding: 0 10px;
      box-sizing: border-box; }
      .contact .form-wrap td .w-wrap span {
        position: absolute;
        left: 0;
        top: 2px;
        line-height: 38px;
        padding: 0 10px;
        font-weight: bold bold;
        color: #2b41a1; }
      .contact .form-wrap td .w-wrap input {
        display: block;
        width: 100%;
        height: 100%;
        font: normal 14px/38px 微軟正黑體;
        outline: none;
        background: none;
        border: 0 none;
        padding: 0 0 0 10px;
        box-sizing: border-box; }
      .contact .form-wrap td .w-wrap.message {
        width: 835px;
        height: 120px;
        padding: 10px 10px 10px 15px;
        margin: 8px 0 16px 0; }
        .contact .form-wrap td .w-wrap.message textarea {
          font: normal 14px/16px 微軟正黑體;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: block;
          border: 0 none;
          outline: none; }
    .contact .form-wrap td .captcha {
      display: inline-block;
      width: 400px;
      position: relative;
      border: 1px solid #BFBFBF;
      box-sizing: border-box;
      border-radius: 5px;
      margin: 0 15px 0 0;
      padding: 0 0 0 10px;
      vertical-align: top; }
      .contact .form-wrap td .captcha input {
        border: 0 none;
        width: 95%;
        height: 100%;
        line-height: 38px;
        outline: none; }
    .contact .form-wrap td .submit-wrap {
      display: inline-block; }
      .contact .form-wrap td .submit-wrap img {
        vertical-align: top; }
      .contact .form-wrap td .submit-wrap input {
        width: 108px;
        height: 100%;
        border: 0;
        border-radius: 5px;
        font: normal 15px/38px 微軟正黑體;
        color: #fff;
        background: #00B7EE;
        margin: 0 0 0 10px;
        vertical-align: top; }
        
        
        /* 增加對小螢幕的縮放處理 */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden; /* 防止橫向滾動條 */
    transform: scale(0.8); /* 縮小到80%大小 */
    transform-origin: top left; /* 變換原點設為左上角 */
  }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden; /* 防止橫向滾動條 */
    transform: scale(0.6); /* 縮小到60%大小 */
    transform-origin: top left; /* 變換原點設為左上角 */
  }
}

/* 調整小於 480px 的裝置 */
@media (max-width: 480px) {
  body {
    width: 275%; /* 設置寬度為 100% */
    height: 227vh; /* 固定高度為視口高度 */
    font-size: 14px; /* 根據需要調整字體大小 */
    padding: 10px; /* 添加內邊距以避免內容貼邊 */
    box-sizing: border-box; /* 包含內邊距和邊框在內 */
  }
  
  /* 對特定元素調整寬度 */
  #container {
    width: 120%; /* 讓主容器稍微縮小一些，適應小屏幕 */
    margin: 0 auto; /* 水平居中 */
  }
}

/* 調整小於 480px 的裝置 */
@media (max-width: 395px) {
  body {
    width: 300%; /* 設置寬度為 100% */
    height: 227vh; /* 固定高度為視口高度 */
    font-size: 14px; /* 根據需要調整字體大小 */
    padding: 5px; /* 添加內邊距以避免內容貼邊 */
    box-sizing: border-box; /* 包含內邊距和邊框在內 */
  }
  
  /* 對特定元素調整寬度 */
  #container {
    width: 100%; /* 讓主容器稍微縮小一些，適應小屏幕 */
    margin: 0 auto; /* 水平居中 */
  }
}



/* 調整小於 480px 的裝置 */
@media (max-width: 380px) {
  body {
    width: 290%; /* 設置寬度為 100% */
    font-size: 14px; /* 根據需要調整字體大小 */
    padding: 0.1px; /* 添加內邊距以避免內容貼邊 */
    box-sizing: border-box; /* 包含內邊距和邊框在內 */
  }
  
  /* 對特定元素調整寬度 */
  #container {
    width: 100%; /* 讓主容器稍微縮小一些，適應小屏幕 */
    margin: 0 auto; /* 水平居中 */
  }
}


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