@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html,
body {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: visible;
  font-size: 14px;
  color: #000;
  background-color: #fff;
  line-height: 1.6;
  font-family: 'Open Sans', '微軟正黑體' , sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .pace:after {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 165, 168, 0.8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  background: #00A5A8;
  position: fixed;
  z-index: 200000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px; }

/*共用屬性*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

* {
  -webkit-overflow-scrolling: touch; }

a {
  text-decoration: none;
  color: inherit; }

a:active, a:hover {
  outline: none; }

img {
  max-width: 100%;
  width: auto;
  height: auto; }

input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0; }

/*泛用表格*/
.t {
  display: table; }
  .t > .t-row {
    display: table-row; }
    .t > .t-row > .t-cell {
      display: table-cell;
      vertical-align: middle;
      border-collapse: collapse;
      margin: 0;
      padding: 0; }

/*定義區塊*/
.container {
  margin: auto;
  position: relative;
  z-index: 100;
  width: 1300px;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

.container100 {
  margin: auto;
  position: relative;
  z-index: 100;
  width: calc(100% -20px);
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

.row {
  margin-left: -10px;
  margin-right: -10px; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-left: 10px;
  padding-right: 10px; }

.col-12 {
  width: 100%; }

.col-11 {
  width: 91.66666667%; }

.col-10 {
  width: 83.33333333%; }

.col-9 {
  width: 75%; }

.col-8 {
  width: 66.66666667%; }

.col-7 {
  width: 58.33333333%; }

.col-6 {
  width: 50%; }

.col-5 {
  width: 41.66666667%; }

.col-4 {
  width: 33.33333333%; }

.col-3 {
  width: 25%; }

.col-2 {
  width: 16.66666667%; }

.col-1 {
  width: 8.33333333%; }

.pic {
  position: relative;
  font-size: 0; }
  .pic > span {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center; }
    .pic > span:before {
      content: ' ';
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle; }
    .pic > span > img, .pic > span > iframe {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: inline-block;
      vertical-align: middle; }
    .pic > span > iframe {
      width: 100%;
      height: 100%; }

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

.bg_img {
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat; }

.editor i {
  font-style: italic; }

.editor em, .editor b, .editor strong {
  font-weight: bold; }

.editor img {
  height: auto !important; }

a {
  outline: none; }
  a:active, a:focus, a:visited {
    border: none; }

header {
  background: #fff;
  z-index: 999;
  position: fixed;
  color: #fff;
  width: 100%;
  height: auto;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear; }
  header * {
    -webkit-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear; }
  header.header_scroll .header_container #logo {
    padding-top: 10px; }
  header.header_scroll .header_container nav .menu li {
    height: 70px;
    padding-top: 0; }
  header.header_scroll .header_container nav .menu .dropdown > .sub_menu {
    top: 70px; }
  header.header_scroll .header_container #lang {
    margin-top: 7px; }
  header .header_container {
    width: 1300px;
    margin: auto; }
    header .header_container #logo {
      float: left;
      width: 30%;
      padding-top: 21px;
      padding-left: 10px; }
    header .header_container nav {
      float: left;
      width: 70%;
      padding-left: 10px; }
      header .header_container nav .menu {
        font-size: 0; }
        header .header_container nav .menu li {
          display: inline-block;
          width: calc(100% / 6);
          font-size: 1.286rem;
          line-height: 350%;
          text-align: center;
          height: 100px;
          padding-top: 15px;
          color: #000; }
          header .header_container nav .menu li a {
            display: block; }
            header .header_container nav .menu li a.rwd-on {
              display: none; }
          header .header_container nav .menu li:hover, header .header_container nav .menu li.active {
            background: #00A5A8; }
            header .header_container nav .menu li:hover a, header .header_container nav .menu li.active a {
              color: #fff; }
        header .header_container nav .menu li:last-child {
          color: #000; }
          header .header_container nav .menu li:last-child a {
            display: inline-block; }
        header .header_container nav .menu .active {
          color: #b6914b;
          background: black; }
        header .header_container nav .menu .dropdown {
          position: relative; }
          header .header_container nav .menu .dropdown > .sub_menu {
            visibility: hidden;
            opacity: 0;
            background: rgba(0, 0, 0, 0.5);
            font-size: 1rem;
            position: absolute;
            z-index: 999;
            -webkit-transition: all .2s ease-out;
            -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
            width: 100%;
            top: 100px;
            bottom: 0;
            margin: auto; }
            header .header_container nav .menu .dropdown > .sub_menu > li {
              position: relative;
              width: 100%;
              margin: 0;
              padding: 1rem;
              line-height: 200%;
              height: auto;
              background: rgba(0, 0, 0, 0.5);
              -webkit-transition: all .25s linear;
              -o-transition: all .25s linear;
              transition: all .25s linear; }
              header .header_container nav .menu .dropdown > .sub_menu > li a {
                display: block; }
              header .header_container nav .menu .dropdown > .sub_menu > li:hover {
                color: #b6914b;
                background: black; }
                header .header_container nav .menu .dropdown > .sub_menu > li:hover > ul {
                  display: block; }
              header .header_container nav .menu .dropdown > .sub_menu > li > ul {
                position: absolute;
                left: 100%;
                top: 0;
                width: 100%;
                display: none; }
                header .header_container nav .menu .dropdown > .sub_menu > li > ul > li {
                  position: relative;
                  width: 100%;
                  margin: 0;
                  padding: 1rem;
                  line-height: 200%;
                  height: auto;
                  color: #FFFFFF;
                  background: rgba(0, 0, 0, 0.5);
                  -webkit-transition: all .25s linear;
                  -o-transition: all .25s linear;
                  transition: all .25s linear; }
                  header .header_container nav .menu .dropdown > .sub_menu > li > ul > li a {
                    display: block; }
                  header .header_container nav .menu .dropdown > .sub_menu > li > ul > li:hover {
                    color: #b6914b;
                    background: black; }
          header .header_container nav .menu .dropdown.active {
            color: #fff;
            background-color: transparent; }
          header .header_container nav .menu .dropdown:hover {
            cursor: pointer; }
            header .header_container nav .menu .dropdown:hover > .sub_menu {
              max-height: 300px;
              visibility: visible;
              opacity: 1; }
    header .header_container #lang {
      float: right;
      width: 60px;
      margin-top: 20px;
      padding-left: 5px; }
      header .header_container #lang .lang-select {
        text-align: center; }
        header .header_container #lang .lang-select li {
          margin: 3px 0; }
        header .header_container #lang .lang-select a {
          display: block;
          border: 1px solid #fff; }
  header:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden; }

h3 {
  font-size: 2.857rem; }

.h3 {
  text-align: center; }
  .h3:after {
    content: '';
    background: #000;
    height: 5px;
    width: 150px;
    display: block;
    margin: auto; }

.p_c {
  text-align: center;
  margin-top: 3rem; }

.width100 {
  width: 100%; }
  .width100 b {
    width: 100%; }

#service #section1 {
  background: url(../_img/service/banner.jpg) top center no-repeat;
  padding-top: 270px;
  color: #fff;
  text-align: center;
  height: 700px; }

#service #section2 {
  font-size: 0; }
  #service #section2 .figure05 {
    display: none; }
  #service #section2 figure {
    display: inline-block;
    width: 35%;
    vertical-align: middle; }
  #service #section2 > div {
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    font-size: 1rem;
    padding: 2rem; }
    #service #section2 > div h3 {
      text-align: center; }
    #service #section2 > div p {
      color: #666;
      line-height: 200%; }

#service .section3 figure, #service .section3 > div {
  display: block;
  width: 50%;
  float: left; }

#service .section3 > div {
  padding: 1rem 3rem; }
  #service .section3 > div p {
    color: #666;
    line-height: 200%; }

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

#service .section4 figure, #service .section4 > div {
  display: block;
  width: 50%;
  float: right; }

#service .section4 > div {
  padding: 1rem 3rem; }
  #service .section4 > div p {
    color: #666;
    line-height: 200%; }

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

#contact_us {
  padding-top: 240px;
  background: url(../_img/contact_bg.jpg) right center no-repeat;
  background-attachment: fixed; }
  #contact_us h3 {
    margin-bottom: 2rem; }
  #contact_us .contact_form {
    padding: 0 4rem 10rem;
    text-align: center;
    background: url(../_img/contact_line.jpg) right top no-repeat; }
    #contact_us .contact_form input, #contact_us .contact_form textarea {
      background: #f7f7f7; }
    #contact_us .contact_form form {
      margin-top: 2rem; }
  #contact_us .infor_wrapper {
    padding: 0 3rem 10rem; }
  #contact_us .infor li {
    padding-bottom: 10px; }
    #contact_us .infor li .fa {
      width: 30px;
      height: 30px;
      border-radius: 50px;
      color: #fff;
      background: #231815;
      text-align: center;
      line-height: 200%;
      margin-right: 1rem;
      display: inline-block;
      vertical-align: top; }
    #contact_us .infor li span {
      width: calc(100% - 35%);
      display: inline-block; }
  #contact_us .contact_google_map {
    width: 100%;
    height: 500px; }

footer {
  background: #231815;
  color: #ccc;
  padding: 3rem 0; }
  footer .txt-footer {
    font-size: 1.286rem; }
  footer h2, footer dt {
    color: #fff;
    font-size: 1.286rem;
    padding-bottom: 50px; }
  footer dt {
    color: #fff;
    font-size: 1.286rem;
    padding-bottom: 20px; }
  footer .odm {
    float: right; }
    footer .odm img {
      vertical-align: middle;
      text-align: right; }
  footer a:hover {
    color: #fff;
    text-decoration: underline; }
  footer #youmore {
    color: #fff; }
    footer #youmore .footer_menu {
      margin: 20px 0; }
      footer #youmore .footer_menu li {
        display: inline-block;
        padding-right: 10px; }
        footer #youmore .footer_menu li:before {
          content: '';
          border-left: 1px solid #fff;
          padding: 0 10px;
          height: 20px; }
        footer #youmore .footer_menu li:first-child:before {
          border-left: none;
          padding: 0; }
    footer #youmore .copyright {
      font-size: 0.857rem;
      color: #ccc; }
      footer #youmore .copyright b {
        opacity: .6; }
      footer #youmore .copyright span {
        opacity: .2; }
  footer #product {
    padding-left: 2.5%; }
    footer #product dd {
      line-height: 220%; }
      footer #product dd:before {
        content: ' - '; }
  footer #contact dd {
    padding-bottom: 10px; }
    footer #contact dd .fa {
      width: 30px;
      height: 30px;
      border-radius: 50px;
      background: #fff;
      color: #231815;
      text-align: center;
      line-height: 200%;
      margin-right: 1rem;
      display: inline-block;
      vertical-align: top; }
    footer #contact dd span {
      width: calc(100% - 20%);
      display: inline-block; }

#pagination {
  margin: 50px 0 30px;
  text-align: center; }

#pagination .page-list > li {
  display: inline-block;
  margin: 0 8px;
  vertical-align: middle; }

#pagination .page-item {
  width: 16px; }

#pagination .page-item:hover, #pagination .page-item.active {
  font-size: 1.25em;
  text-decoration: underline; }

#pagination a {
  cursor: pointer; }

#banner {
  z-index: 1;
  top: 0;
  width: 100%; }
  #banner #video {
    font-size: 0;
    height: auto;
    width: 100%; }
    #banner #video #tubular-container {
      height: 0 !important;
      padding-bottom: 56.25% !important; }
  #banner img {
    width: 100%;
    height: auto; }
  #banner:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden; }
  #banner .slick-dots {
    bottom: 100px; }
    #banner .slick-dots li {
      width: 35px;
      height: 35px; }
      #banner .slick-dots li button {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #FFFFFF;
        opacity: .5;
        -webkit-transition: all 0.25s linear;
        -o-transition: all 0.25s linear;
        transition: all 0.25s linear; }
        #banner .slick-dots li button:before {
          content: ''; }
      #banner .slick-dots li.slick-active button {
        opacity: 1; }

#index {
  clear: both;
  /*foundation*/
  /*reliable_supplier*/
  /*video*/
  /*discover_taiwan*/
  /*crafting_from_taiwan*/
  /*functional_product*/
  /*product*/
  /*clients_saying*/
  /*inquiries_map*/ }
  #index h4 {
    font-size: 4.286rem; }
  #index #foundation {
    color: #4b4b4b;
    text-align: center;
    font-size: 0;
    padding: 40px 0; }
    #index #foundation article {
      width: 25%;
      display: inline-block;
      font-size: 1rem;
      -webkit-transition: all 0.25s linear;
      -o-transition: all 0.25s linear;
      transition: all 0.25s linear; }
      #index #foundation article h5 {
        font-size: 2.857rem; }
      #index #foundation article p {
        font-size: 1.286rem; }
      #index #foundation article:hover {
        -webkit-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2); }
  #index #reliable_supplier {
    background: #d6c5b1;
    text-align: center;
    padding: 50px 0; }
    #index #reliable_supplier h3 {
      font-size: 3.429rem;
      text-align: center;
      color: #555;
      line-height: 300%; }
    #index #reliable_supplier .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    #index #reliable_supplier article {
      background: #fff;
      width: 300px;
      display: inline-block;
      vertical-align: top;
      margin: 0 10px;
      text-align: left; }
      #index #reliable_supplier article span {
        padding: 40px 30px;
        display: block;
        overflow: hidden; }
      #index #reliable_supplier article h5 {
        font-size: 1.714rem;
        line-height: 1.5;
        margin-bottom: 10px; }
      #index #reliable_supplier article p {
        font-size: 0.857rem; }
  #index #video {
    text-align: center;
    background: url(../_img/index/video_bg.jpg) top center no-repeat;
    padding: 200px 0; }
    #index #video p {
      font-size: 1.286rem; }
  #index #discover_taiwan {
    text-align: center;
    padding: 70px 0; }
    #index #discover_taiwan h5 {
      font-size: 1.714rem;
      color: #138199; }
    #index #discover_taiwan p {
      font-size: 1.286rem; }
  #index #crafting_from_taiwan {
    color: #fff;
    background: url(../_img/index/crafting.jpg) top center no-repeat;
    padding: 190px 0 180px 200px; }
    #index #crafting_from_taiwan .since {
      font-size: 1.286rem; }
  #index #functional_product {
    font-size: 0; }
    #index #functional_product figure {
      width: 65%;
      display: inline-block;
      vertical-align: middle;
      padding-bottom: 90px;
      background: url(../_img/index/functional.jpg) left top no-repeat;
      background-size: contain;
      height: 550px; }
    #index #functional_product article {
      width: 35%;
      display: inline-block;
      vertical-align: middle;
      font-size: 1rem;
      padding: 0 2rem 0 1rem; }
  #index #product h4 {
    color: #fff;
    text-align: center;
    background-color: #00A5A8; }
  #index #product .product_slider li {
    padding: 10px;
    text-align: center; }
    #index #product .product_slider li img {
      margin: auto; }
  #index #clients_saying {
    text-align: center;
    height: 550px; }
    #index #clients_saying h4 {
      line-height: 250%; }
      #index #clients_saying h4:after {
        content: '';
        background: #000;
        height: 5px;
        width: 280px;
        display: block;
        margin: auto; }
    #index #clients_saying .clients_slider {
      margin: 50px 0;
      font-size: 1.286rem; }
      #index #clients_saying .clients_slider h6 {
        margin-top: 2rem; }
  #index #inquiries_map {
    display: block;
    height: 700px; }
    #index #inquiries_map .inquiries {
      background: #eee;
      text-align: center;
      width: 50%;
      float: left;
      display: block; }
      #index #inquiries_map .inquiries h5 {
        color: #00A5A8;
        font-size: 2.857rem; }
      #index #inquiries_map .inquiries .inquiry_form {
        width: 400px;
        height: 700px;
        margin: auto;
        padding: 90px 0; }
        #index #inquiries_map .inquiries .inquiry_form p {
          margin: 1rem 0; }
    #index #inquiries_map .googlemap {
      width: 50%;
      float: left;
      display: block; }
      #index #inquiries_map .googlemap .map {
        width: 100%;
        height: 700px; }
    #index #inquiries_map:after {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 165, 168, 0.8);
      z-index: 99999;
      display: block; }
  #index .slick-prev {
    left: 0;
    z-index: 99; }
  #index .slick-prev:before {
    content: url(../_img/layout/arrow_prev.png);
    opacity: 1;
    width: 30px; }
  #index .slick-next {
    right: 0;
    z-index: 99; }
  #index .slick-next:before {
    content: url(../_img/layout/arrow_next.png);
    opacity: 1;
    width: 30px; }
  #index:after {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 165, 168, 0.8);
    z-index: 99999;
    display: block; }

.form {
  margin-top: 20px; }
  .form input, .form textarea {
    border: none;
    font-family: 'Open Sans', '微軟正黑體' , sans-serif;
    width: 100%;
    color: #000;
    padding: 5px 10px;
    margin-bottom: 10px;
    outline: 0; }

.button {
  margin: auto; }
  .button b {
    color: #fff;
    border: none;
    font-size: 1rem;
    width: 50%;
    display: inline-block;
    text-align: center;
    line-height: 250%;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    background: #231815;
    -webkit-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s; }
    .button b:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #00A5A8;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      -o-transition-property: transform;
      transition-property: transform;
      transition-property: transform, -webkit-transform;
      -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      transition-timing-function: ease-out; }
    .button b:hover {
      background: #231815; }
    .button b:hover:before, .button b:focus:before, .button b:active:before {
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0); }

.widthhalf {
  width: 49%;
  display: inline-block; }

#about {
  padding-top: 270px;
  /*about us*/
  /*journey*/
  /*members*/ }
  #about .slick-prev {
    left: 0;
    z-index: 99; }
  #about .slick-prev:before {
    content: url(../_img/layout/arrow_prev.png);
    opacity: 1;
    width: 30px; }
  #about .slick-next {
    right: 0;
    z-index: 99; }
  #about .slick-next:before {
    content: url(../_img/layout/arrow_next.png);
    opacity: 1;
    width: 30px; }
  #about .slick-slide img {
    display: inline; }
  #about #about_us {
    padding-bottom: 90px; }
    #about #about_us h3 b {
      border-bottom: 5px solid #000; }
    #about #about_us p {
      margin: 2rem 0; }
    #about #about_us .banner_slider {
      text-align: center; }
      #about #about_us .banner_slider li {
        text-align: center; }
  #about #journey {
    background: #eee;
    padding: 70px 0; }
    #about #journey h3 {
      text-align: center;
      padding-bottom: 30px; }
    #about #journey ul {
      font-size: 0; }
      #about #journey ul li {
        width: calc(100% / 4);
        display: inline-block;
        padding: 10px 10px;
        vertical-align: top;
        position: relative; }
        #about #journey ul li img:first-child + img {
          position: absolute;
          left: 10px;
          top: 10px;
          opacity: 0; }
  #about #journey_crafting section {
    width: 470px;
    height: 680px;
    background: #333;
    margin-left: 20%;
    padding: 10% 5%;
    overflow: hidden; }
    #about #journey_crafting section h4 {
      font-size: 2.857rem;
      color: #fff; }
    #about #journey_crafting section .editor {
      color: #999; }
  #about #members h3 {
    text-align: center;
    top: -50px;
    position: relative; }
    #about #members h3:after {
      content: '';
      background: #000;
      height: 5px;
      width: 150px;
      display: block;
      margin: auto; }
  #about #members #list li {
    vertical-align: top;
    margin-bottom: 5rem; }
  #about #members #list figure {
    text-align: center;
    margin: auto; }
    #about #members #list figure > div {
      width: 100%;
      font-size: 0;
      height: 0;
      padding-bottom: 100%; }
      #about #members #list figure > div span {
        left: 0; }
  #about #members #list h5 {
    color: #000;
    font-size: 1.286rem;
    text-align: center;
    line-height: 1.75rem;
    height: 3.5rem;
    overflow: hidden;
    margin-top: 5px; }
  #about #members #list h6 {
    color: #666;
    font-size: 1rem;
    line-height: 1.5rem;
    height: 9rem;
    word-wrap: break-word;
    overflow: hidden; }
  #about #members #member_banner {
    text-align: center; }
  #about #members #photo_album {
    text-align: center; }
    #about #members #photo_album h5 {
      font-size: 1.286rem; }
    #about #members #photo_album .col-4 {
      margin-bottom: 3rem; }
    #about #members #photo_album .album_content {
      display: none; }

.news-box {
  background: #00A5A8;
  position: relative; }
  .news-box.w-bg {
    background: #fff; }
    .news-box.w-bg .news-list {
      border-top: 2px #00A5A8 solid; }
      .news-box.w-bg .news-list li {
        color: #00A5A8;
        border-bottom: 2px #00A5A8 solid; }
        .news-box.w-bg .news-list li .list-title {
          color: #000; }
  .news-box .news-list {
    border-top: 2px #fff solid;
    margin-top: 80px; }
    .news-box .news-list li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #fff;
      padding: 2% 3%;
      border-bottom: 2px #fff solid; }
      .news-box .news-list li .list-title {
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        text-align: left;
        padding: 5px 2%;
        color: #fff; }
      .news-box .news-list li .new a {
        color: #fff;
        background: #00A5A8;
        padding: 5px 10px;
        font-size: 16px;
        display: block;
        width: 120px;
        border-radius: 2px; }
      .news-box .news-list li i {
        color: #f4f4f4; }
      .news-box .news-list li:hover {
        background: #00A5A8; }
        .news-box .news-list li:hover .list-title {
          color: #f4f4f4; }
        .news-box .news-list li:hover a i {
          color: #fff; }
        .news-box .news-list li:hover .new a {
          color: #00A5A8;
          background-color: #fff; }
        .news-box .news-list li:hover .date {
          color: #fff; }
  .news-box .date {
    color: #00A5A8;
    padding: 5px 0 5px 2%;
    min-width: 150px;
    text-align: center; }

.news-in-box h4 {
  font-size: 25px !important;
  color: #00A5A8;
  padding-bottom: 10px;
  font-weight: bold;
  border-bottom: 2px #f4f4f4 solid; }

.news-in-box .date {
  color: #00A5A8;
  font-size: 16px;
  text-align: right;
  margin: 10px 0 20px; }
  .news-in-box .date span {
    float: left; }

.news-in-box p {
  margin: 10px 0; }

.news-in-box .editor {
  padding: 10px 0;
  border-bottom: 2px solid #f4f4f4;
  margin-bottom: 30px; }

.news-in-box .button {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center; }
  .news-in-box .button a {
    max-width: 150px; }
    .news-in-box .button a b {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 150px; }

#product_list .title2 {
  text-align: center;
  padding: 120px 0 3rem; }

#product_list #style1 ul.p-list {
  font-size: 0;
  margin-left: 0;
  margin-right: 0; }
  #product_list #style1 ul.p-list li {
    display: inline-block;
    width: calc(100% / 3 - 20px);
    font-size: 1rem;
    text-align: center;
    position: relative;
    margin: 10px; }
    #product_list #style1 ul.p-list li img:first-child + img {
      position: absolute;
      opacity: 0;
      left: 0;
      top: 0; }

#product_list #style1.add-border ul.p-list li {
  border: 1px solid #9c9c9c; }

#product_list #style2 .container {
  width: 980px; }

#product_list #style2 ul.p-list {
  font-size: 0;
  padding: 2rem 0; }
  #product_list #style2 ul.p-list li {
    display: inline-block;
    width: calc(100% / 3 - 22px);
    font-size: 1rem;
    border: 1px solid #ccc;
    text-align: center;
    margin: 10px;
    position: relative; }
    #product_list #style2 ul.p-list li img:first-child + img {
      position: absolute;
      opacity: 0;
      left: 0px;
      top: 0px; }

#product_list .fancybox-arrow:after {
  content: "<";
  font-family: 'Open Sans', '微軟正黑體' , sans-serif;
  font-size: 1rem;
  position: absolute;
  top: 28px;
  width: 44px;
  height: 44px;
  background-color: rgba(30, 30, 30, 0.8);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 24px 24px; }

#product_list .aside-style {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  #product_list .aside-style aside {
    width: 300px;
    padding-left: 30px;
    padding-right: 30px; }
    #product_list .aside-style aside .aside-list > li {
      margin-bottom: 1rem;
      cursor: pointer; }
      #product_list .aside-style aside .aside-list > li.active > ul {
        display: block; }
      #product_list .aside-style aside .aside-list > li > span {
        display: block;
        background-color: #00A5A8;
        padding: 10px 10px;
        color: #fff;
        font-size: 1.2rem; }
      #product_list .aside-style aside .aside-list > li > ul {
        display: none; }
        #product_list .aside-style aside .aside-list > li > ul > li:hover > a, #product_list .aside-style aside .aside-list > li > ul > li.active > a {
          border-bottom: 1px solid #000; }
        #product_list .aside-style aside .aside-list > li > ul > li > a {
          display: block;
          padding: 10px 15px;
          font-size: 1.1rem;
          border-bottom: 1px solid transparent; }
  #product_list .aside-style ul.p-list {
    width: calc(100% - 300px); }

#product_album_photo {
  width: 90%;
  margin: auto;
  padding: 2rem; }
  #product_album_photo .left, #product_album_photo .right {
    float: left;
    display: block; }
  #product_album_photo .left {
    width: 70%; }
  #product_album_photo .right {
    width: 30%; }
  #product_album_photo h2 {
    font-size: 20px;
    text-align: left; }
  #product_album_photo h3 {
    font-size: 1rem;
    text-align: left;
    margin-bottom: 10px; }
  #product_album_photo .txt {
    font-size: 1rem;
    line-height: 1.5;
    min-height: 6rem; }
  #product_album_photo .btn_close {
    float: right;
    display: inline-block; }
  #product_album_photo .photo_big {
    width: 100%;
    display: block;
    border: 3px solid #000;
    font-size: 0;
    position: relative; }
    #product_album_photo .photo_big .item {
      text-align: center; }
      #product_album_photo .photo_big .item img {
        margin: auto; }
    #product_album_photo .photo_big .bg_img {
      display: block;
      width: 100%;
      height: 100%;
      background-position: 50% 50%;
      background-size: 100% auto; }
  #product_album_photo .photo_list {
    width: 100%;
    display: block;
    padding: 0 0 20px 0; }
    #product_album_photo .photo_list .list_small {
      font-size: 0; }
      #product_album_photo .photo_list .list_small li {
        width: 50%;
        display: inline-block;
        padding: 0 0 20px 20px; }
        #product_album_photo .photo_list .list_small li img {
          cursor: pointer; }
    #product_album_photo .photo_list .inquiry_product {
      border: 1px solid #000;
      margin-left: 20px; }
      #product_album_photo .photo_list .inquiry_product .title {
        background: #000;
        color: #fee300;
        text-align: center;
        line-height: 250%;
        position: relative; }
      #product_album_photo .photo_list .inquiry_product .form .button b {
        width: 100%; }
      #product_album_photo .photo_list .inquiry_product .form .button p {
        position: relative; }
      #product_album_photo .photo_list .inquiry_product .form .button:hover p:before {
        border-bottom-color: #231815; }
      #product_album_photo .photo_list .inquiry_product .form .button.b226 b {
        background: #000000; }
        #product_album_photo .photo_list .inquiry_product .form .button.b226 b:before {
          background: #000000; }
        #product_album_photo .photo_list .inquiry_product .form .button.b226 b:hover {
          background: #333333; }
      #product_album_photo .photo_list .inquiry_product .form .button.b226 p:before {
        border-bottom-color: #000000; }
      #product_album_photo .photo_list .inquiry_product .form .button.b226:hover p:before {
        border-bottom-color: #333333; }

/*----------------max-width:1380------------------*/
@media screen and (max-width: 1500px) {
  #contact_us {
    background-image: url(../_img/contact_bg.png); } }

/*----------------max-width:1299------------------*/
@media screen and (max-width: 1299px) {
  header .header_container {
    width: 96%; } }

/* 1299 END */
/*----------------max-width:1024------------------*/
@media screen and (max-width: 1024px) {
  header {
    position: relative; }
    header.header_scroll {
      position: fixed; }
  #product_list .title2 {
    padding: 3rem 0; }
  #banner .slick-dots {
    bottom: 30px; }
  #index #reliable_supplier article {
    width: 29%; }
  #index #crafting_from_taiwan {
    padding: 16% 0 16% 5%; }
  #index #functional_product figure {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 90px; }
  #index #functional_product article {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
    padding: 10% 5% 16%; }
  #index #inquiries_map {
    height: 580px; }
    #index #inquiries_map .inquiries .inquiry_form {
      width: 86%;
      height: 580px; }
    #index #inquiries_map .googlemap .map {
      width: 100%;
      height: 580px; }
  /*index*/
  #about {
    padding-top: 20%; }
  #service #section1 {
    padding-top: 25%;
    height: 500px; }
  #service #section2 .figure05 {
    width: 100%;
    vertical-align: top;
    display: block; }
  #service #section2 figure {
    display: none; }
  #service #section2 > div {
    width: 100%; }
  #service .section3, #service .section4 {
    margin-bottom: 3rem; }
    #service .section3 figure, #service .section3 > div, #service .section4 figure, #service .section4 > div {
      width: 100%;
      display: block; }
  /*service*/
  #contact_us {
    padding-top: 18%;
    background-size: 60%;
    background-position: 100% 100%; } }

/* 1024 END */
/*----------------max-width:768-------------------*/
@media screen and (max-width: 768px) {
  header .header_container nav .menu .rwd-off {
    display: none; }
  header .header_container nav .menu li a.rwd-on {
    display: block; }
  #index #reliable_supplier article {
    width: 29%; }
  #index .slick-slide img {
    margin: auto;
    text-align: center; }
  #index #functional_product figure {
    width: 100%;
    padding-bottom: 0;
    height: 280px; }
  #index #functional_product article {
    width: 100%;
    padding: 0 5% 16%; }
  #index #inquiries_map {
    height: auto; }
    #index #inquiries_map .inquiries {
      width: 100%;
      float: none;
      display: block; }
    #index #inquiries_map .googlemap {
      width: 100%;
      float: none;
      display: block; }
      #index #inquiries_map .googlemap .map {
        height: 380px; }
  /*index*/
  #about #about_us {
    padding-bottom: 2%; }
    #about #about_us .col-4, #about #about_us .col-8 {
      width: 100%;
      float: none; }
  #about #members h3 {
    top: 0;
    margin-bottom: 20px; }
  #about #members #list .col-3 {
    width: 50%; }
  #about #members #photo_album .col-4 {
    width: 50%; }
  /*about*/
  #product_album_photo {
    width: 96%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    #product_album_photo .left {
      width: 100%;
      float: none;
      display: block;
      margin-bottom: 20px; }
    #product_album_photo .right {
      width: 100%;
      float: none;
      display: block; }
      #product_album_photo .right .photo_list .list_small li {
        width: 25%;
        padding: 0 10px 20px; }
      #product_album_photo .right .photo_list .inquiry_product {
        margin-left: 0; }
  /*product_album_photo*/
  #contact_us .col-6 {
    width: 100%;
    float: none; }
  #contact_us .contact_form {
    background: none;
    padding: 0 4rem 5rem;
    border-bottom: 1px #333 solid;
    margin-bottom: 5rem; }
  #contact_us .contact_google_map {
    height: 300px; }
  /*contact_us*/
  footer .col-6 {
    width: 100%; }
  footer #product, footer #contact {
    display: none; } }

/* 768 END */
/*----------------max-width:667-------------------*/
@media screen and (max-width: 667px) {
  #banner .slick-dots {
    bottom: 10px; }
    #banner .slick-dots li {
      width: auto;
      height: auto; }
      #banner .slick-dots li button {
        width: 15px;
        height: 15px; }
  #index h4 {
    font-size: 2.857rem; }
  #index #foundation article {
    width: 50%;
    margin-bottom: 5rem; }
  #index #reliable_supplier {
    padding: 5%; }
    #index #reliable_supplier h3 {
      line-height: 200%; }
    #index #reliable_supplier article {
      width: 100%;
      font-size: 0;
      margin: 0;
      margin-bottom: 2rem; }
      #index #reliable_supplier article figure img {
        width: 100%; }
  /*index*/
  #about #journey ul li {
    width: calc(100% / 2); }
  #about #journey_crafting section {
    width: 100%;
    height: auto;
    margin-left: 0; }
  /*about*/
  #product_list #style1 ul.p-list li {
    width: calc(100% / 2 - 20px); }
  #product_list .aside-style aside,
  #product_list .aside-style .p-list {
    width: 100% !important; }
  #product_list .aside-style aside {
    margin-bottom: 2rem; }
  /*product_list*/ }

/* 667 END */
/*----------------max-width:480-------------------*/
@media screen and (max-width: 480px) {
  #index #crafting_from_taiwan {
    padding: 25% 0 25% 5%; }
  #index #functional_product figure {
    height: 160px; }
  #about {
    padding-top: 35%; }
  #service #section1 {
    padding-top: 35%;
    height: 400px; }
  #contact_us {
    padding-top: 35%; }
    #contact_us h3 {
      text-align: center; }
    #contact_us .infor li span {
      width: calc(100% - 19%); }
    #contact_us .contact_form, #contact_us .infor_wrapper {
      padding: 0 2% 5rem; } }

/* 480 END */
/*----------------max-width:320-------------------*/
/*320 END */
@media only screen and (max-width: 768px) {
  header {
    width: 100%;
    z-index: 200;
    height: auto; }
    header.header_scroll .header_container #logo {
      width: 180px;
      padding: 8px 0 7px; }
    header.header_scroll .header_container nav .menu li {
      height: auto; }
    header.header_scroll .header_container nav .menu .dropdown > .sub_menu {
      top: 0; }
    header .header_container #logo {
      display: block;
      width: 210px;
      text-align: center;
      padding: 12px 5px 9px;
      -webkit-transition: all 0.25s linear;
      -o-transition: all 0.25s linear;
      transition: all 0.25s linear; }
    header .header_container nav {
      width: 100%;
      float: none;
      max-height: 0;
      height: auto;
      overflow: hidden;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background-color: #00A5A8;
      padding-left: 0; }
      header .header_container nav.active {
        max-height: calc( 100vh - 100px);
        overflow: auto;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
      header .header_container nav .menu {
        height: auto; }
        header .header_container nav .menu > li {
          width: 100%;
          padding-top: 0;
          height: auto;
          line-height: 2.5;
          border-bottom: 1px solid rgba(221, 221, 221, 0.5); }
        header .header_container nav .menu .dropdown {
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s;
          color: #FFF; }
          header .header_container nav .menu .dropdown > .sub_menu {
            position: relative;
            max-height: auto;
            background: #00f0f5;
            padding-top: 0;
            padding-bottom: 5px;
            top: 0;
            bottom: auto;
            visibility: visible;
            opacity: 1; }
            header .header_container nav .menu .dropdown > .sub_menu > li {
              width: 100%;
              display: block;
              line-height: 1.7;
              padding: 5px 0; }
              header .header_container nav .menu .dropdown > .sub_menu > li > ul {
                position: relative;
                display: block;
                left: auto;
                line-height: 1.8;
                margin: 0 0 5px; }
                header .header_container nav .menu .dropdown > .sub_menu > li > ul > li {
                  font-size: 16px;
                  line-height: 1.5;
                  padding: 0; }
            header .header_container nav .menu .dropdown > .sub_menu.active {
              max-height: 100vh;
              -webkit-transition: all linear .3s;
              -o-transition: all linear .3s;
              transition: all linear .3s; }
          header .header_container nav .menu .dropdown:hover > .sub_menu {
            max-height: 600px; }
    header .header_container #lang {
      position: absolute;
      top: 10px;
      right: 50px;
      margin-top: 0;
      padding-left: 0; }
  #phone_icon .button {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 25px;
    height: 20px;
    border-bottom: 3px solid #00A5A8;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    z-index: 99999;
    cursor: pointer; }
    #phone_icon .button:before, #phone_icon .button:after {
      content: "";
      position: absolute;
      top: 20%;
      width: 100%;
      height: 3px;
      background: #00A5A8 none repeat scroll 0% 0%; }
    #phone_icon .button:after {
      content: "";
      top: 60%; }
    #phone_icon .button.action {
      display: block;
      width: 30px;
      height: 20px;
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      border-bottom: medium none !important;
      -webkit-transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s; }
      #phone_icon .button.action:before {
        top: 50%;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s; }
      #phone_icon .button.action:after {
        top: 50%;
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s; }
    #phone_icon .button.scroll {
      top: 15px; } }

@media only screen and (max-width: 480px) {
  header .header_container #logo {
    width: 220px; }
  #phone_icon .button {
    top: 22px;
    right: 10px; } }

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