@import url(reset-min.css);
@import url(flickity.css);
@import url(jquery.mCustomScrollbar.min.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap|Source+Sans+Pro:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;600;700&display=swap");
@chartset "UTF-8";
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

::-moz-selection {
  background: #00FFFF; }

::selection {
  background: #00FFFF; }

.text-center {
  text-align: center; }

body {
  font-family: 'Noto Sans TC', sans-serif , -apple-system, 'microsoft jhenghei';
  font-weight: 500;
  background-color: #25201A; }

header {
  position: relative;
  width: 100%;
  height: 135px;
  background: #e6e6e6;
  padding-top: 20px; }
  header .inner {
    width: 100%;
    max-width: 1830px;
    padding: 0 15px;
    margin: 0 auto; }
  header .logo {
    display: inline-block;
    width: 200px;
    height: 104px;
    background: url(../images/logo.png) no-repeat;
    background-size: 200px;
    background-position: center top; }
    .en header .logo {
      background-image: url(../images/logo-en.png); }
  header .lang {
    position: absolute;
    right: 14px;
    height: 25px;
    font-size: 14px;
    font-family: 'Noto Sans TC', sans-serif, -apple-system, 'microsoft jhenghei';
    color: #736357;
    border: none;
    background: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-bottom: #736357 solid 3px;
    outline: none;
    cursor: pointer;
    text-align-last: center;
    border-radius: 0;
    padding: 0 0.2em 0 0.2em;
    margin-right: 14px; }
    header .lang option {
      color: #fff;
      background: #736357;
      font-family: -apple-system, 'microsoft jhenghei'; }
  header .nav {
    float: right;
    font-size: 15px;
    font-weight: 700;
    color: #25201A;
    margin: 79px 145px 0 0; }
    .en header .nav {
      font-family: 'Source Sans Pro', 'Noto Sans TC', sans-serif, -apple-system, 'microsoft jhenghei';
      font-weight: 600;
      font-size: 16px; }
    header .nav li {
      display: inline-block;
      line-height: 1.2em;
      border-right: #25201A solid 2px;
      padding: 0 18px 0 16px; }
      header .nav li:last-child {
        border-right: 0; }

.loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  line-height: 100vh;
  font-size: 20px;
  color: #fff;
  background: #25201A;
  text-align: center; }

.main-wrapper {
  height: calc(100vh - 135px);
  background: #000;
  overflow: hidden; }

.main {
  width: 100%;
  background: #000; }

.main-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../images/tools_4600s3.jpg) no-repeat;
  background-size: 100%;
  background-position: center top;
  overflow: hidden;
  border-spacing: 100px;
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
  will-change: background-size;
  margin: 0 auto; }
  .main-content img {
    display: block;
    width: 100%;
    height: auto; }
  .main-content .info {
    position: absolute;
    top: 26px;
    right: 23%;
    width: 40px;
    height: 40px;
    background: url(../images/info.svg) no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer; }

.zoom-point {
  position: absolute;
  width: 80px;
  height: 80px;
  background: url(../images/zoom-bg.svg) no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity, 0.3s;
  -ms-transition: opacity, 0.3s;
  -moz-transition: opacity, 0.3s;
  -webkit-transition: opacity, 0.3s; }
  @media (min-width: 901px) and (max-width: 1499px) {
    .zoom-point {
      width: 60px;
      height: 60px; } }
  .zoom-point.show {
    opacity: 1; }

area {
  outline: none; }

.point-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  width: 65%;
  transform: translateX(-50%);
  pointer-events: none; }
  .point-wrapper > div {
    position: relative;
    padding-top: 60.8%; }

#point1 {
  top: 40.7%;
  left: 1.5%; }

#point2 {
  top: 32%;
  left: 17.5%; }

#point3 {
  top: 13%;
  left: 28.8%; }

#point4 {
  top: 38.9%;
  left: 31.5%; }

#point5 {
  top: 54.8%;
  left: 20.2%; }

#point6 {
  top: 60.2%;
  left: 43.2%; }

#point7 {
  top: 73%;
  left: 27.3%; }

#point8 {
  top: 49.5%;
  left: 65.5%; }

#point9 {
  top: 21.6%;
  left: 60.2%; }

#point10 {
  top: 7.6%;
  left: 79%; }

.zoomin {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 0.7s;
  -ms-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s; }
  .zoomin.bg1 {
    background-image: url(../images/text1-bg.jpg); }
  .zoomin.bg2 {
    background-image: url(../images/text2-bg.jpg); }
  .zoomin.bg3 {
    background-image: url(../images/text3-bg.jpg); }
  .zoomin.bg4 {
    background-image: url(../images/text4-bg.jpg); }
  .zoomin.bg5 {
    background-image: url(../images/text5-bg.jpg); }
  .zoomin.bg6 {
    background-image: url(../images/text6-bg.jpg); }
  .zoomin.bg7 {
    background-image: url(../images/text7-bg.jpg); }
  .zoomin.bg8 {
    background-image: url(../images/text8-bg.jpg); }
  .zoomin.bg9 {
    background-image: url(../images/text9-bg.jpg); }
  .zoomin.bg10 {
    background-image: url(../images/text10-bg.jpg);
    background-position-y: -2px; }

.zoom-plus {
  position: absolute;
  width: 48px;
  height: 48px;
  background: url(../images/zoom-plus.svg) no-repeat;
  background-size: cover;
  background-position: center; }
  .bg1 .zoom-plus {
    top: 25%;
    left: 15.6%; }
  .bg2 .zoom-plus {
    top: 36.5%;
    left: 37%; }
  .bg3 .zoom-plus {
    top: 26%;
    left: 52.3%; }
  .bg4 .zoom-plus {
    top: 35.5%;
    left: 31.5%; }
  .bg5 .zoom-plus {
    top: 36.2%;
    left: 43.75%; }
  .bg6 .zoom-plus {
    top: 44.5%;
    left: 58.4%; }
  .bg7 .zoom-plus {
    top: 64.3%;
    left: 34.5%; }
  .bg8 .zoom-plus {
    top: 23.3%;
    left: 52.6%; }
  .bg9 .zoom-plus {
    top: 39.2%;
    left: 58.6%; }
  .bg10 .zoom-plus {
    top: 9%;
    left: 65.3%; }

.zoom-text {
  display: none;
  position: absolute;
  color: #fff;
  font-size: 14px;
  background: rgba(37, 32, 26, 0.8);
  padding: 23px 33px; }
  .zoom-text .close {
    width: 50px;
    height: 32px;
    background: url(../images/back.svg) no-repeat;
    background-size: auto;
    background-position: center;
    cursor: pointer;
    margin-bottom: 30px; }
  .zoom-text .title {
    font-size: 20px;
    margin-bottom: 5px; }
  .zoom-text.text1 {
    top: 25%;
    left: 24.5%; }
  .zoom-text.text2 {
    top: 37%;
    left: 41.5%; }
  .zoom-text.text3 {
    top: 26.2%;
    left: 57.4%;
    max-width: 34%; }
  .zoom-text.text4 {
    top: 35.5%;
    left: 38%; }
  .zoom-text.text5 {
    top: 36.2%;
    left: 50%; }
  .zoom-text.text6 {
    bottom: 60%;
    left: 58.6%; }
  .zoom-text.text7 {
    bottom: 40%;
    left: 34.5%; }
  .zoom-text.text8 {
    top: 18%;
    left: 18%;
    max-width: 30%; }
  .zoom-text.text9 {
    top: 13%;
    left: 58.6%; }
    @media (orientation: landscape) and (max-width: 1530px) and (min-width: 816px) {
      .zoom-text.text9 {
        top: 1%;
        left: initial;
        right: 10%; } }
  .zoom-text.text10 {
    top: 9%;
    right: 40%;
    max-width: 25%; }
  .zoom-text .text-content {
    display: none; }

.container {
  width: 100%;
  min-height: calc(100vh - 135px);
  background: url(../images/woodBG4600s.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 90px 4.8% 40px; }
  .container.pro {
    position: relative;
    max-height: 1120px;
    padding: 58.35% 0 0; }
    @media (min-width: 1921px) {
      .container.pro {
        height: 1120px;
        padding: 0; } }
    .container.pro.outer-overlay:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(50% - 960px);
      height: 100%;
      background: rgba(37, 32, 26, 0.85); }
    .container.pro.outer-overlay:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: calc(50% - 960px);
      height: 100%;
      background: rgba(37, 32, 26, 0.85); }
  .container.product {
    height: calc(100vh - 135px);
    min-height: initial; }
    @media screen and (orientation: landscape) and (max-height: 800px) {
      .container.product {
        height: auto; } }
  .container .inner {
    max-width: 1920px;
    margin: 0 auto; }

.about-sec1 {
  display: inline-block;
  width: 46.25%;
  color: #f0d7c1;
  margin-right: 10%; }
  .about-sec1 .text-wrapper {
    opacity: 0;
    border-bottom: #f0d7c1 solid 1px;
    transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    padding-bottom: 55px;
    margin-bottom: 55px; }
    .about-sec1 .text-wrapper:last-child {
      border-bottom: 0;
      margin-bottom: 0; }
    .about-sec1 .text-wrapper.show {
      opacity: 1; }
  .about-sec1 .title {
    display: inline-block;
    width: 54%;
    font-size: 36px;
    vertical-align: top;
    margin-right: 3%; }
  .about-sec1 .content {
    display: inline-block;
    width: 42%;
    font-size: 15px;
    line-height: 1.8em; }
  .about-sec1 ul {
    padding-left: 1em; }
    .about-sec1 ul li {
      text-indent: -0.45em; }
      .about-sec1 ul li:before {
        content: '\2713';
        display: inline-block;
        margin-right: 3px; }

.about-sec2 {
  display: inline-block;
  width: 600px;
  max-width: 43%;
  vertical-align: top; }
  .about-sec2 iframe {
    width: 100%;
    height: 378px; }

.thumb-wrapper {
  position: relative;
  display: inline-block;
  width: 330px;
  height: calc(100vh - 255px);
  vertical-align: top;
  margin-right: calc(5.4% - 30px); }
  .thumb-wrapper .item {
    width: calc(100% - 30px);
    margin-bottom: 45px; }
    .thumb-wrapper .item:last-child {
      margin-bottom: 0; }
    .thumb-wrapper .item .img-wrapper {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 12px; }
      .thumb-wrapper .item .img-wrapper .des {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(83, 71, 65, 0.7);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
        -ms-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s; }
        .thumb-wrapper .item .img-wrapper .des.show, .thumb-wrapper .item .img-wrapper .des.active {
          opacity: 1; }
        .thumb-wrapper .item .img-wrapper .des .title {
          line-height: 1.3em;
          font-size: 26px;
          font-weight: 700;
          text-align: center;
          padding: 0 15px;
          margin-bottom: 28px; }
        .thumb-wrapper .item .img-wrapper .des p {
          font-size: 18px;
          font-weight: 400;
          text-align: center; }
      .thumb-wrapper .item .img-wrapper:hover .des {
        opacity: 1; }
      .thumb-wrapper .item .img-wrapper img {
        display: block;
        width: 100%;
        height: auto; }
    .thumb-wrapper .item:after {
      content: '';
      display: block;
      clear: both; }

.slider-wrapper {
  position: relative;
  display: inline-block;
  width: 1500px;
  max-width: calc(94% - 300px);
  height: calc(100vh - 255px); }
  .slider-wrapper.sizem {
    height: auto;
    min-height: calc(100vh - 135px); }
    .slider-wrapper.sizem .main-carousel {
      max-height: calc(100vh - 255px);
      height: auto; }
      .slider-wrapper.sizem .main-carousel .cell {
        max-height: calc(100vh - 255px);
        height: auto; }
        .slider-wrapper.sizem .main-carousel .cell img {
          width: auto;
          height: calc(100vh - 255px); }

.slider-item {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%; }
  .slider-item.active {
    display: block; }

.download {
  float: right;
  line-height: 22px;
  color: #DDBAA8;
  font-size: 13px;
  background: url(../images/download.svg) no-repeat;
  background-size: 22px;
  background-position: center left;
  padding: 2px 0 2px 28px; }

.main-carousel {
  max-width: 100%;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto; }
  .main-carousel .cell {
    width: 100%;
    height: calc(100vh - 350px); }
  .main-carousel img {
    display: block;
    width: auto;
    height: 100%; }

.nav-carousel {
  max-width: 100%;
  margin: 0 auto; }
  .nav-carousel .cell {
    width: 14%;
    margin-right: 5px; }
  .nav-carousel img {
    width: 100%;
    height: auto; }

.contact-container {
  width: 100%;
  min-height: calc(100vh - 160px);
  background: url(../images/tools_4600s3.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-top: 105px;
  padding-bottom: 60px; }
  .contact-container .sec1 {
    display: inline-block;
    width: 24%;
    max-width: 325px;
    min-width: 275px;
    margin-right: 2.8%;
    margin-top: 230px; }
    .contact-container .sec1 .text-wrapper {
      padding: 28px 4% 28px 8%; }
  .contact-container .sec2 {
    display: inline-block;
    width: 26%;
    max-width: 430px;
    min-width: 370px;
    vertical-align: top;
    margin-right: 3%; }
    .contact-container .sec2 > div:after {
      content: '';
      display: block;
      clear: both; }
    .contact-container .sec2 > div:nth-child(2) {
      margin-top: 105px; }
      .contact-container .sec2 > div:nth-child(2) .text-wrapper {
        width: 100%;
        max-width: none; }
    .contact-container .sec2 .text-wrapper {
      float: left;
      width: 89%;
      max-width: 375px;
      padding: 35px 4% 30px 6%; }
    .contact-container .sec2 .social-media {
      float: right;
      width: 8%; }
    .contact-container .sec2 img {
      display: block;
      margin-bottom: 25px; }
    .contact-container .sec2:after {
      content: '';
      display: block;
      clear: both; }
    .contact-container .sec2 table {
      table-layout: fixed;
      margin-left: 0; }
      .contact-container .sec2 table td {
        vertical-align: top;
        word-break: break-word; }
        .contact-container .sec2 table td:first-child {
          word-break: keep-all;
          padding-right: 10px; }
  .contact-container .sec3 {
    display: inline-block;
    width: 27%;
    max-width: 520px;
    min-width: 450px;
    height: 425px;
    vertical-align: top; }
    .contact-container .sec3 .text-wrapper {
      padding: 40px 50px 35px; }
      .contact-container .sec3 .text-wrapper a:after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(../images/link-arrow.svg) no-repeat;
        background-size: 14px;
        background-position: center;
        vertical-align: middle;
        margin-left: 7px; }
  .contact-container .text-wrapper {
    line-height: 1.8em;
    font-size: 15px;
    color: #25201a;
    background: rgba(221, 186, 168, 0.75);
    text-align: left; }
    .contact-container .text-wrapper .light {
      font-weight: 400; }
      .en .contact-container .text-wrapper .light {
        font-family: 'Source Sans Pro', 'Noto Sans TC', sans-serif, -apple-system, 'microsoft jhenghei';
        font-weight: 300; }
    .contact-container .text-wrapper .title {
      line-height: 1.4em;
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 28px; }
      .en .contact-container .text-wrapper .title {
        font-family: 'Source Sans Pro', 'Noto Sans TC', sans-serif, -apple-system, 'microsoft jhenghei';
        font-size: 31px; }
    .contact-container .text-wrapper a {
      transition: all 0.3s;
      -ms-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s; }
      .contact-container .text-wrapper a:hover {
        color: #fff; }

@media (max-width: 1260px) and (orientation: landscape) {
  .contact-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 5%;
    padding-right: 5%; }
    .contact-container .sec1 {
      order: 3;
      flex: 0 0 55%;
      max-width: none;
      margin-top: 105px; }
    .contact-container .sec2 {
      order: 1;
      flex: 0 0 40%;
      min-width: initial;
      margin-right: 8%; }
    .contact-container .sec3 {
      order: 2;
      flex: 0 0 50%;
      min-width: initial; } }
.zoom-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  max-height: 1120px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%); }

.zoomViewport, .zoomContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.zoomTarget {
  position: absolute; }
  .zoomTarget img {
    display: block;
    width: 100%;
    height: auto; }
  .zoomTarget.selectedZoomTarget {
    z-index: 2; }
  .zoomTarget.zoom1 {
    top: 7.9%;
    left: 10.6%;
    width: 15.6%; }
  .zoomTarget.zoom2 {
    top: 3.3%;
    left: 27.5%;
    width: 17.29%; }
  .zoomTarget.zoom3 {
    top: 10.8%;
    left: 46%;
    width: 17.29%; }
  .zoomTarget.zoom4 {
    top: 10.8%;
    left: 64.47%;
    width: 11.97%; }
  .zoomTarget.zoom5 {
    top: 7.05%;
    left: 78.125%;
    width: 15.6%; }
  .zoomTarget.zoom6 {
    top: 31%;
    left: 6.35%;
    width: 7.97%; }
  .zoomTarget.zoom7 {
    top: 29.55%;
    left: 16.09%;
    width: 10.31%; }
  .zoomTarget.zoom8 {
    top: 33.66%;
    left: 46%;
    width: 31.25%; }
  .zoomTarget.zoom9 {
    top: 28.125%;
    left: 78.5%;
    width: 7.97%; }
  .zoomTarget.zoom10 {
    top: 46%;
    left: 6.35%;
    width: 7.97%; }
  .zoomTarget.zoom11 {
    top: 50%;
    left: 17.34%;
    width: 7.97%; }
  .zoomTarget.zoom12 {
    top: 51.875%;
    left: 27.5%;
    width: 17.29%; }
  .zoomTarget.zoom13 {
    top: 58.48%;
    left: 48.95%;
    width: 12.13%; }
  .zoomTarget.zoom14 {
    top: 58.48%;
    left: 62.9%;
    width: 17.29%; }
  .zoomTarget.zoom15 {
    top: 45.44%;
    left: 81.19%;
    width: 7.97%; }
  .zoomTarget.zoom16 {
    top: 75.17%;
    left: 13.54%;
    width: 31.25%; }
  .zoomTarget.zoom17 {
    top: 82.14%;
    left: 54.94%;
    width: 7.97%; }
  .zoomTarget.zoom18 {
    top: 82.14%;
    left: 65%;
    width: 7.97%; }
  .zoomTarget.zoom19 {
    top: 72.76%;
    left: 81.19%;
    width: 7.97%; }

.zoomContainer .zoomTarget {
  border: #000 solid 4px;
  border-radius: 7px; }
  .zoomContainer .zoomTarget:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    transition: background 0.3s;
    -ms-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -webkit-transition: background 0.3s; }
  .zoomContainer .zoomTarget:hover:before {
    background: rgba(255, 255, 255, 0.2); }
.zoomContainer .overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 200%;
  height: 200%;
  background: rgba(37, 32, 26, 0.85);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%); }
  .zoomNotClickable .zoomContainer .overlay {
    display: none; }

.zoomtext {
  display: none;
  position: absolute;
  color: #fff;
  font-size: 15px; }
  .zoomtext .close {
    width: 24px;
    height: 24px;
    background: url(../images/pro-close.svg) no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    margin-bottom: 38px; }
  .zoomtext.text1 {
    display: block;
    top: 80px;
    left: 55%; }
  .zoomtext.text2 {
    display: block;
    top: 105px;
    left: 55%; }
  .zoomtext.text3 {
    display: block;
    top: 115px;
    right: 55%; }
  .zoomtext.text4 {
    display: block;
    top: 115px;
    right: 55%; }
  .zoomtext.text5 {
    display: block;
    top: 95px;
    right: 55%; }
  .zoomtext.text6 {
    display: block;
    top: 210px;
    left: 36%; }
  .zoomtext.text7 {
    display: block;
    top: 110px;
    left: 44%; }
  .zoomtext.text8 {
    display: block;
    top: 57%;
    right: 25%; }
    @media (min-width: 1921px) {
      .zoomtext.text8 {
        right: 30%; } }
  .zoomtext.text9 {
    display: block;
    top: 170px;
    right: 45%; }
  .zoomtext.text10 {
    display: block;
    top: 210px;
    left: 36%; }
  .zoomtext.text11 {
    display: block;
    top: 210px;
    left: 36%; }
  .zoomtext.text11 {
    display: block;
    top: 210px;
    left: 44%; }
  .zoomtext.text12 {
    display: block;
    top: 210px;
    left: 55%; }
  .zoomtext.text13 {
    display: block;
    top: 210px;
    right: 58%; }
  .zoomtext.text14 {
    display: block;
    top: 250px;
    right: 55%; }
  .zoomtext.text15 {
    display: block;
    top: 180px;
    right: 46%; }
  .zoomtext.text16 {
    display: block;
    top: initial;
    bottom: 51%;
    right: 30%; }
  .zoomtext.text17 {
    display: block;
    top: 50%;
    right: 55%; }
  .zoomtext.text18 {
    display: block;
    top: 50%;
    right: 55%; }
  .zoomtext.text19 {
    display: block;
    top: 40%;
    right: 46%; }
  .zoomtext .text-content {
    display: none;
    vertical-align: middle;
    padding: 0 1.5em; }
    .zoomtext .text-content.text1, .zoomtext .text-content.text2, .zoomtext .text-content.text3 {
      width: 14.5em; }
    .zoomtext .text-content.text11 {
      width: 16em; }
    .zoomtext .text-content.text6, .zoomtext .text-content.text10 {
      width: 14em; }
    .zoomtext .text-content.text4, .zoomtext .text-content.text7, .zoomtext .text-content.text12, .zoomtext .text-content.text13, .zoomtext .text-content.text14, .zoomtext .text-content.text15, .zoomtext .text-content.text17, .zoomtext .text-content.text18, .zoomtext .text-content.text19 {
      width: 16em; }
    .zoomtext .text-content.text5 {
      width: 17em; }
    .zoomtext .text-content.text9, .zoomtext .text-content.text16 {
      width: 15em; }
  .zoomtext.en .text-content.text1, .zoomtext.en .text-content.text6 {
    width: 16em; }
  .zoomtext.en .text-content.text2 {
    width: 17em; }
  .zoomtext.en .text-content.text3, .zoomtext.en .text-content.text9 {
    width: 18em; }
  .zoomtext.en .text-content.text4, .zoomtext.en .text-content.text11 {
    width: 20em; }
  .zoomtext.en .text-content.text16 {
    width: 30em; }

.zoomNotClickable + .zoomtext {
  display: none; }

.zoomButton {
  display: inline-block;
  width: 13px;
  height: 30px;
  vertical-align: middle;
  cursor: pointer; }
  .zoomButton.prev {
    background: url(../images/prev.svg) no-repeat;
    background-size: cover;
    background-position: center; }
  .zoomButton.next {
    background: url(../images/next.svg) no-repeat;
    background-size: cover;
    background-position: center; }

.pro-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 160px);
  background: #000; }

@media screen and (orientation: portrait) {
  html {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vh;
    width: calc(var(--vh, 1vh) * 100);
    height: 100vw !important;
    transform: rotate(-90deg);
    transform-origin: left top;
    overflow: scroll; }

  body {
    height: 100vw;
    overflow: scroll; }

  .loader {
    line-height: 100vw; }

  header {
    height: 80px;
    padding-top: 10px; }
    header .inner {
      padding: 0 3.6%; } }
    @media screen and (orientation: portrait) and (max-width: 374px) {
      header .inner {
        padding-left: 4%; } }
@media screen and (orientation: portrait) {
    header .logo {
      width: 94px;
      height: 45px;
      background-size: 94px;
      background-position: center top;
      padding-top: 0;
      margin-top: 15px; } }
    @media screen and (orientation: portrait) and (max-width: 374px) {
      header .logo {
        width: 104px;
        height: 50px;
        background-size: 104px;
        margin-top: 10px; } }
@media screen and (orientation: portrait) {
    header .lang {
      right: 0;
      font-size: 13px; }
    header .nav {
      font-size: 12px;
      margin: 40px 0 0 0; }
      .en header .nav {
        font-size: 13px; } }
    @media screen and (orientation: portrait) and (max-width: 374px) {
      header .nav {
        margin-right: 0; } }

@media screen and (orientation: portrait) {
  .main-wrapper {
    height: calc(100vw - 80px);
    overflow: auto; }

  .main-content .info {
    right: 19%;
    width: 30px;
    height: 30px; }

  .zoom-point {
    width: 50px;
    height: 50px; }

  #point1 {
    top: 36.7%;
    left: 2.7%; }

  #point2 {
    top: 33%;
    left: 18.5%; }

  #point3 {
    top: 11%;
    left: 30.8%; }

  #point4 {
    top: 37.9%;
    left: 32.5%; }

  #point5 {
    top: 55%;
    left: 23.2%; }

  #point6 {
    top: 58.6%;
    left: 45.2%; }

  #point7 {
    top: 73%; }

  #point9 {
    top: 21.6%;
    left: 59.2%; }

  #point10 {
    top: 3.6%;
    left: 79%; }

  .zoom-plus {
    width: 40px;
    height: 40px; }
    .bg3 .zoom-plus {
      top: 24%;
      left: 50.3%; }

  .zoom-text.text1 {
    top: 16%;
    max-width: 48%; }
  .zoom-text.text2 {
    top: 20%;
    left: 47.5%;
    max-width: 45%; }
  .zoom-text.text3 {
    top: 16%;
    left: 60%;
    max-width: 37%; }
  .zoom-text.text4 {
    top: 30%; }
  .zoom-text.text5 {
    top: 20%;
    max-width: 43%; }
  .zoom-text.text6 {
    top: 2%;
    bottom: initial;
    left: 10%;
    max-width: 45%; }
  .zoom-text.text7 {
    max-width: 50%; }
  .zoom-text.text8 {
    top: 11%;
    left: 4%;
    max-width: 45%; }
  .zoom-text.text9 {
    top: 13%;
    left: 1%;
    max-width: 33%; }
  .zoom-text.text10 {
    max-width: 50%; }

  .container {
    min-height: calc(100vw - 80px);
    padding-top: 55px;
    padding-bottom: 40px; }
    .container.pro {
      min-height: initial; }
    .container.product {
      height: auto;
      min-height: calc(100vw - 80px); }
    .container .inner.about {
      display: flex;
      justify-content: space-between; }

  .about-sec1 {
    order: 2;
    height: calc(100vw - 170px);
    overflow-y: scroll;
    margin-right: 0; }
    .about-sec1 .title {
      display: block;
      width: 100%;
      margin-right: 0; }
    .about-sec1 .content {
      display: block;
      width: 100%; }
    .about-sec1::-webkit-scrollbar {
      width: 10px; }
    .about-sec1::-webkit-scrollbar-thumb {
      background: rgba(115, 99, 87, 0.75); }

  .about-sec2 {
    order: 1;
    position: relative;
    height: 0;
    padding-top: 33%; }
    .about-sec2 iframe {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%; }

  .thumb-wrapper {
    width: 30%;
    margin-right: 1.8%;
    height: auto; }
    .thumb-wrapper .item {
      margin-bottom: 30px; }
      .thumb-wrapper .item .img-wrapper {
        height: auto; }
        .thumb-wrapper .item .img-wrapper img {
          display: none; }
        .thumb-wrapper .item .img-wrapper .des {
          position: static;
          flex-flow: row;
          align-items: end;
          flex-wrap: wrap;
          background: transparent;
          opacity: 1; }
          .thumb-wrapper .item .img-wrapper .des.active {
            color: #DDBAA8; }
          .thumb-wrapper .item .img-wrapper .des .title {
            width: 100%;
            text-align: left;
            padding: 0;
            margin-bottom: 6px; }
          .thumb-wrapper .item .img-wrapper .des p {
            width: 100%;
            text-align: left; }

  .download {
    display: none;
    float: none;
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    text-align: center;
    background-color: rgba(37, 32, 26, 0.75);
    background-position-x: 21%;
    background-size: 30px;
    padding-left: 21%; }
    .download.active {
      display: block; }

  .slider-wrapper {
    max-width: 66%; }

  .nav-carousel .cell {
    width: 18%; }

  .contact-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 5%;
    padding-right: 5%; }
    .contact-container .sec1 {
      order: 3;
      flex: 0 0 55%;
      max-width: none;
      margin-top: 105px; }
    .contact-container .sec2 {
      order: 1;
      flex: 0 0 40%;
      min-width: initial;
      margin-right: 8%; }
    .contact-container .sec3 {
      order: 2;
      flex: 0 0 50%;
      min-width: initial; }

  .zoomContainer .zoomTarget {
    border-width: 2.5px;
    border-radius: 4px; }

  .zoomtext.text3 {
    top: 85px;
    right: 53%; }
  .zoomtext.text4 {
    top: 75px; }
  .zoomtext.text5 {
    top: 65px; }
  .zoomtext.text6 {
    top: 178px; }
  .zoomtext.text7 {
    top: 78px;
    left: 46%; }
  .zoomtext.text8 {
    top: 59%; }
  .zoomtext.text9 {
    top: 115px; }
  .zoomtext.text10 {
    top: 174px;
    left: 38%; }
  .zoomtext.text11 {
    top: 31%;
    left: 47%; }
  .zoomtext.text12 {
    top: 166px; }
  .zoomtext.text13 {
    top: 122px;
    right: 53%; }
  .zoomtext.text14 {
    top: initial;
    bottom: 20%;
    right: 53%; }
  .zoomtext.text15 {
    top: 140px; }
  .zoomtext.text16 {
    top: 40px;
    right: initial;
    left: 20%; }
  .zoomtext.text17 {
    top: 45%; }
  .zoomtext.text18 {
    top: 45%; }
  .zoomtext.text19 {
    top: 33%; }
  .zoomtext .text-content.text1, .zoomtext .text-content.text2, .zoomtext .text-content.text3, .zoomtext .text-content.text4, .zoomtext .text-content.text5, .zoomtext .text-content.text17, .zoomtext .text-content.text18 {
    width: 12em; }
  .zoomtext .text-content.text12, .zoomtext .text-content.text13, .zoomtext .text-content.text14 {
    width: 14em; }
  .zoomtext.en .text-content.text1, .zoomtext.en .text-content.text2, .zoomtext.en .text-content.text3, .zoomtext.en .text-content.text4, .zoomtext.en .text-content.text5, .zoomtext.en .text-content.text17, .zoomtext.en .text-content.text18 {
    width: 12em; }
  .zoomtext.en .text-content.text9, .zoomtext.en .text-content.text11 {
    width: 17em; }
  .zoomtext.en .text-content.text12, .zoomtext.en .text-content.text13, .zoomtext.en .text-content.text14 {
    width: 14em; }
  .zoomtext.en .text-content.text16 {
    width: 26em; }

  .pro-bg {
    min-height: calc(100vw - 80px); }

  .slider-wrapper {
    height: auto; }

  .main-carousel {
    height: auto; }
    .main-carousel .cell {
      height: auto; }
      .main-carousel .cell img {
        width: 100%;
        height: auto; } }
@media screen and (orientation: landscape) and (max-width: 900px) {
  header {
    height: 80px;
    padding-top: 10px; }
    header .logo {
      width: 94px;
      height: 45px;
      background-size: 94px;
      background-position: center top;
      padding-top: 0;
      margin-top: 9px; }
    header .nav {
      margin-right: 0;
      margin-top: 40px; }
      .en header .nav {
        font-size: 13px; }

  .main-wrapper {
    height: calc(100vh - 80px);
    overflow: auto; }

  .main-content .info {
    top: 10px;
    right: 20%;
    width: 30px;
    height: 30px; }

  .zoom-point {
    width: 50px;
    height: 50px; }

  .zoom-plus {
    width: 40px;
    height: 40px; }
    .bg3 .zoom-plus {
      top: 24%;
      left: 50.3%; }

  .zoom-text.text1 {
    top: 16%;
    max-width: 48%; }
  .zoom-text.text2 {
    top: 20%;
    left: 47.5%;
    max-width: 45%; }
  .zoom-text.text3 {
    top: 16%;
    left: 60%;
    max-width: 37%; }
  .zoom-text.text4 {
    top: 30%; }
  .zoom-text.text5 {
    top: 20%;
    max-width: 43%; }
  .zoom-text.text6 {
    top: 2%;
    bottom: initial;
    left: 10%;
    max-width: 45%; }
  .zoom-text.text7 {
    max-width: 50%; }
  .zoom-text.text8 {
    top: 11%;
    left: 4%;
    max-width: 45%; }
  .zoom-text.text9 {
    top: 13%;
    left: 1%;
    max-width: 33%; }
  .zoom-text.text10 {
    max-width: 50%; }

  .container {
    min-height: initial;
    padding-top: 55px;
    padding-bottom: 40px; }
    .container.product {
      height: auto; }
    .container .inner.about {
      display: flex;
      justify-content: space-between; }

  .about-sec1 {
    order: 2;
    height: calc(100vh - 170px);
    overflow-y: scroll;
    margin-right: 0; }
    .about-sec1 .title {
      display: block;
      width: 100%;
      margin-right: 0; }
    .about-sec1 .content {
      display: block;
      width: 100%; }
    .about-sec1::-webkit-scrollbar {
      width: 10px; }
    .about-sec1::-webkit-scrollbar-thumb {
      background: rgba(115, 99, 87, 0.75); }

  .about-sec2 {
    order: 1;
    position: relative;
    height: 0;
    padding-top: 33%; }
    .about-sec2 iframe {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%; }

  .thumb-wrapper {
    width: 30%;
    height: auto;
    margin-right: 1.8%; }
    .thumb-wrapper .item {
      margin-bottom: 30px; }
      .thumb-wrapper .item .img-wrapper {
        height: auto; }
        .thumb-wrapper .item .img-wrapper img {
          display: none; }
        .thumb-wrapper .item .img-wrapper .des {
          position: static;
          flex-flow: row;
          align-items: end;
          flex-wrap: wrap;
          background: transparent;
          opacity: 1; }
          .thumb-wrapper .item .img-wrapper .des.active {
            color: #DDBAA8; }
          .thumb-wrapper .item .img-wrapper .des .title {
            width: 100%;
            text-align: left;
            padding: 0;
            margin-bottom: 6px; }
          .thumb-wrapper .item .img-wrapper .des p {
            width: 100%;
            text-align: left; }

  .download {
    display: none;
    float: none;
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    text-align: center;
    background-color: rgba(37, 32, 26, 0.75);
    background-position-x: 21%;
    background-size: 30px;
    padding-left: 21%; }
    .download.active {
      display: block; }

  .slider-wrapper {
    width: 65% !important;
    max-width: 66%; }

  .main-carousel {
    width: 100% !important;
    height: auto; }
    .main-carousel .cell {
      width: 100%;
      height: auto; }
    .main-carousel img {
      width: 100%;
      height: auto; }

  .nav-carousel .cell {
    width: 18%; }

  .zoomContainer .zoomTarget {
    border-width: 2.5px;
    border-radius: 4px; }

  .zoomtext.text3 {
    top: 85px;
    right: initial;
    left: 10%; }
  .zoomtext.text4 {
    top: 75px; }
  .zoomtext.text5 {
    top: 65px; }
  .zoomtext.text6 {
    top: 178px; }
  .zoomtext.text7 {
    top: 78px;
    left: 46%; }
  .zoomtext.text8 {
    top: 59%; }
  .zoomtext.text9 {
    top: 115px; }
  .zoomtext.text10 {
    top: 174px;
    left: 38%; }
  .zoomtext.text11 {
    top: 33%;
    left: 47%; }
  .zoomtext.text12 {
    top: 166px; }
  .zoomtext.text13 {
    top: 122px;
    right: 53%; }
  .zoomtext.text14 {
    top: 187px; }
  .zoomtext.text15 {
    top: 140px; }
  .zoomtext.text16 {
    top: 40px; }
  .zoomtext.text17 {
    top: 45%; }
  .zoomtext.text18 {
    top: 45%; }
  .zoomtext.text19 {
    top: 33%; }
  .zoomtext .text-content.text1, .zoomtext .text-content.text2, .zoomtext .text-content.text3 {
    width: 13em; }
  .zoomtext .text-content.text12, .zoomtext .text-content.text13 {
    width: 14em; }
  .zoomtext.en.text3 {
    left: 8%; }
  .zoomtext.en .text-content.text3 {
    width: 15em; }
  .zoomtext.en .text-content.text4 {
    width: 14em; }
  .zoomtext.en .text-content.text12, .zoomtext.en .text-content.text13 {
    width: 12em; }
  .zoomtext.en .text-content.text14 {
    width: 14em; }
  .zoomtext.en .text-content.text16 {
    width: 25em; } }
@media screen and (orientation: landscape) and (max-width: 600px) {
  .zoom-text {
    transform: scale(0.9);
    -webkit-transform: scale(0.9); }
    .zoom-text.text1 {
      top: 17%; }
    .zoom-text.text2 {
      top: 13%; }
    .zoom-text.text3 {
      top: 0; }
    .zoom-text.text5 {
      top: 18%; }
    .zoom-text.text6 {
      left: 7%;
      max-width: 53%; }
    .zoom-text.text7 {
      bottom: 35%;
      max-width: 60%; }
    .zoom-text.text8 {
      top: 14%; }
    .zoom-text.text9 {
      top: 9%; }

  .zoom-point {
    transform: scale(0.8);
    -webkit-transform: scale(0.8); }

  #point1 {
    top: 36.7%;
    left: 1.5%; }

  #point2 {
    top: 28%;
    left: 18.5%; }

  #point3 {
    top: 4%;
    left: 29.8%; }

  #point4 {
    top: 33%;
    left: 32%; }

  #point5 {
    top: 51.5%;
    left: 23.2%; }

  #point6 {
    top: 54.2%; }

  #point7 {
    top: 69%;
    left: 34.3%; }

  #point8 {
    top: 47.5%;
    left: 66.5%; }

  #point9 {
    top: 16.6%; }

  #point10 {
    top: 2.6%;
    left: 75%; } }
@media (max-width: 320px) {
  .zoom-text {
    transform: scale(0.9);
    -webkit-transform: scale(0.9); }
    .zoom-text.text2 {
      top: 16%; }
    .zoom-text.text3 {
      top: 0; }
    .zoom-text.text4 {
      left: 43%; }
    .zoom-text.text5 {
      top: 5.5%;
      left: 53%;
      width: 248px; }
    .zoom-text.text6 {
      top: 1%;
      left: 4.6%;
      max-width: 53%; }
    .zoom-text.text7 {
      top: 1%;
      bottom: initial;
      max-width: 60%; }
    .zoom-text.text8 {
      top: 13%;
      left: 1%; }
    .zoom-text.text9 {
      top: 13%; }
    .zoom-text.text10 {
      left: 13%; }

  .contact-container .sec1 {
    width: 38.3%; }
  .contact-container .text-wrapper .title {
    font-size: 24px; } }

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