/*************************************************
 * client:  TRENDY TEXTILE 慶展實業
 * project: 官網
 * date:    Fri Jan 18 2019 16:30:28 
 * copyright (c) 2019 BBDO Taiwan | Vincent Fang.
 *************************************************/
@import url(https://use.fontawesome.com/releases/v5.0.10/css/all.css);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Sawarabi+Mincho);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
.col_green:before, .col-title:before, .product_cover-title:before, .loading_container:before, .loading_visual::before, .icon-custom:before, .icon-custom:after, .hamburger .burger_line:before, .hamburger .burger_line:after, .menu_item:after, .menu_item_link:after, .menu_item_text:after, .language_box:after, .col-title:after, .product_cover:after, .product_cover:not(.product_cover-title):before, .product_title:after {
  content: "";
  display: inline-block;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.loading_percent, .header_container, .hamburger .burger_text, .client_logo, .license_pic {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.icon-X:before, .icon-X:after, .icon-prev:before, .icon-prev:after, .icon-next:before, .icon-next:after, .hamburger .burger_line, .hamburger .burger_line:before, .hamburger .burger_line:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.col_green, .col-title, .product_cover-title, .product_cover-title:before {
  background: rgba(0, 157, 102, 0.75);
}

.col_green:before, .col-title:before, .product_cover-title:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.13);
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  outline: 0;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* CSS Document */
/* http: //meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License:  none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

.table, table {
  border-collapse: collapse;
  border-spacing: 0;
}

area {
  display: block;
}

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

/* Vincent */
html, body, *, div,
input, textarea, select,
ul, li, button, span,
a, p, h1, h2, h3, h4, h5, h6 {
  font-family: "Fira Sans Condensed", "Noto Sans TC", sans-serif;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  font-size: 15px;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

img {
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

p {
  font-size: 1rem;
}

h1 {
  font-size: 3.2rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.4rem;
}

h5 {
  font-size: 1.2rem;
}

h6 {
  font-size: 1.1rem;
}

input, textarea, select, *[contenteditable="true"] {
  outline: none;
  border: none;
  background: none;
  resize: none;
  word-break: break-all;
  font-size: 1rem;
}

.ulList, .olList {
  padding-left: 1.5rem;
  list-style-position: outside;
  text-indent: 0;
}

.ulList {
  list-style-type: disc;
}

.olList {
  list-style-type: decimal;
}

.font-weight-L {
  font-weight: 100;
}

.font-weight-R {
  font-weight: 300;
}

.font-weight-B {
  font-weight: 600;
}

.font-weight-H {
  font-weight: 900;
}

.font-xs {
  font-size: 0.75em;
}

.font-sm {
  font-size: 0.875em;
}

.font-lg {
  font-size: 1.125em;
}

.font-xl {
  font-size: 1.25em;
}

.font-initial {
  font-size: 300%;
}

.font-color-white {
  color: white;
}

.text-nowrap {
  white-space: nowrap;
}

.text-ellipsis {
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}

.grid {
  width: 100%;
}

.grid .row .col {
  float: none;
}

@-moz-document url-prefix() {
  .row .col {
    margin-right: -1px;
  }
}

.row {
  width: 100%;
  overflow: visible;
  font-size: 0;
  direction: ltr;
}

.row-contour .col {
  padding-bottom: 100%;
  margin-bottom: -100%;
}

.row-rtl {
  direction: rtl;
}

.row-ltr {
  direction: ltr;
}

.row-rtl .col, .row-ltr .col {
  direction: ltr;
}

.col {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  overflow: hidden;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .col {
    margin-right: -4px;
  }
}

.col-0 {
  width: 0%;
}

.offset-0 {
  margin-left: 0%;
}

.col-1 {
  width: 8.33333%;
}

.offset-1 {
  margin-left: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.col-3 {
  width: 25%;
}

.offset-3 {
  margin-left: 25%;
}

.col-4 {
  width: 33.33333%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.col-6 {
  width: 50%;
}

.offset-6 {
  margin-left: 50%;
}

.col-7 {
  width: 58.33333%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.col-9 {
  width: 75%;
}

.offset-9 {
  margin-left: 75%;
}

.col-10 {
  width: 83.33333%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.offset-11 {
  margin-left: 91.66667%;
}

.col-12 {
  width: 100%;
}

.offset-12 {
  margin-left: 100%;
}

@media (max-width: 539px) {
  .show-xs {
    display: none !important;
  }
}

@media (min-width: 540px) {
  html {
    font-size: 18px;
  }
  .row-xs-rtl {
    direction: rtl;
  }
  .row-xs-ltr {
    direction: ltr;
  }
  .row-xs-rtl .col, .row-xs-ltr .col {
    direction: ltr;
  }
  .col-xs-absolute {
    position: absolute;
    top: 0;
  }
  .col-xs-relative {
    position: relative;
  }
  .col-xs-0 {
    width: 0%;
  }
  .offset-xs-0 {
    margin-left: 0%;
  }
  .col-xs-1 {
    width: 8.33333%;
  }
  .offset-xs-1 {
    margin-left: 8.33333%;
  }
  .col-xs-2 {
    width: 16.66667%;
  }
  .offset-xs-2 {
    margin-left: 16.66667%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .offset-xs-3 {
    margin-left: 25%;
  }
  .col-xs-4 {
    width: 33.33333%;
  }
  .offset-xs-4 {
    margin-left: 33.33333%;
  }
  .col-xs-5 {
    width: 41.66667%;
  }
  .offset-xs-5 {
    margin-left: 41.66667%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .offset-xs-6 {
    margin-left: 50%;
  }
  .col-xs-7 {
    width: 58.33333%;
  }
  .offset-xs-7 {
    margin-left: 58.33333%;
  }
  .col-xs-8 {
    width: 66.66667%;
  }
  .offset-xs-8 {
    margin-left: 66.66667%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .offset-xs-9 {
    margin-left: 75%;
  }
  .col-xs-10 {
    width: 83.33333%;
  }
  .offset-xs-10 {
    margin-left: 83.33333%;
  }
  .col-xs-11 {
    width: 91.66667%;
  }
  .offset-xs-11 {
    margin-left: 91.66667%;
  }
  .col-xs-12 {
    width: 100%;
  }
  .offset-xs-12 {
    margin-left: 100%;
  }
  .hide-xs {
    display: none !important;
  }
}

@media (max-width: 639px) {
  .show-sm {
    display: none !important;
  }
}

@media (min-width: 640px) {
  html {
    font-size: 20px;
  }
  .row-sm-rtl {
    direction: rtl;
  }
  .row-sm-ltr {
    direction: ltr;
  }
  .row-sm-rtl .col, .row-sm-ltr .col {
    direction: ltr;
  }
  .col-sm-absolute {
    position: absolute;
    top: 0;
  }
  .col-sm-relative {
    position: relative;
  }
  .col-sm-0 {
    width: 0%;
  }
  .offset-sm-0 {
    margin-left: 0%;
  }
  .col-sm-1 {
    width: 8.33333%;
  }
  .offset-sm-1 {
    margin-left: 8.33333%;
  }
  .col-sm-2 {
    width: 16.66667%;
  }
  .offset-sm-2 {
    margin-left: 16.66667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .col-sm-4 {
    width: 33.33333%;
  }
  .offset-sm-4 {
    margin-left: 33.33333%;
  }
  .col-sm-5 {
    width: 41.66667%;
  }
  .offset-sm-5 {
    margin-left: 41.66667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .col-sm-7 {
    width: 58.33333%;
  }
  .offset-sm-7 {
    margin-left: 58.33333%;
  }
  .col-sm-8 {
    width: 66.66667%;
  }
  .offset-sm-8 {
    margin-left: 66.66667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .col-sm-10 {
    width: 83.33333%;
  }
  .offset-sm-10 {
    margin-left: 83.33333%;
  }
  .col-sm-11 {
    width: 91.66667%;
  }
  .offset-sm-11 {
    margin-left: 91.66667%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .offset-sm-12 {
    margin-left: 100%;
  }
  .hide-sm {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .show-md {
    display: none !important;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
  .row-md-rtl {
    direction: rtl;
  }
  .row-md-ltr {
    direction: ltr;
  }
  .row-md-rtl .col, .row-md-ltr .col {
    direction: ltr;
  }
  .col-md-absolute {
    position: absolute;
    top: 0;
  }
  .col-md-relative {
    position: relative;
  }
  .col-md-0 {
    width: 0%;
  }
  .offset-md-0 {
    margin-left: 0%;
  }
  .col-md-1 {
    width: 8.33333%;
  }
  .offset-md-1 {
    margin-left: 8.33333%;
  }
  .col-md-2 {
    width: 16.66667%;
  }
  .offset-md-2 {
    margin-left: 16.66667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .col-md-4 {
    width: 33.33333%;
  }
  .offset-md-4 {
    margin-left: 33.33333%;
  }
  .col-md-5 {
    width: 41.66667%;
  }
  .offset-md-5 {
    margin-left: 41.66667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .col-md-7 {
    width: 58.33333%;
  }
  .offset-md-7 {
    margin-left: 58.33333%;
  }
  .col-md-8 {
    width: 66.66667%;
  }
  .offset-md-8 {
    margin-left: 66.66667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .col-md-10 {
    width: 83.33333%;
  }
  .offset-md-10 {
    margin-left: 83.33333%;
  }
  .col-md-11 {
    width: 91.66667%;
  }
  .offset-md-11 {
    margin-left: 91.66667%;
  }
  .col-md-12 {
    width: 100%;
  }
  .offset-md-12 {
    margin-left: 100%;
  }
  .hide-md {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .show-lg {
    display: none !important;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
  .row-lg-rtl {
    direction: rtl;
  }
  .row-lg-ltr {
    direction: ltr;
  }
  .row-lg-rtl .col, .row-lg-ltr .col {
    direction: ltr;
  }
  .col-lg-absolute {
    position: absolute;
    top: 0;
  }
  .col-lg-relative {
    position: relative;
  }
  .col-lg-0 {
    width: 0%;
  }
  .offset-lg-0 {
    margin-left: 0%;
  }
  .col-lg-1 {
    width: 8.33333%;
  }
  .offset-lg-1 {
    margin-left: 8.33333%;
  }
  .col-lg-2 {
    width: 16.66667%;
  }
  .offset-lg-2 {
    margin-left: 16.66667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .col-lg-4 {
    width: 33.33333%;
  }
  .offset-lg-4 {
    margin-left: 33.33333%;
  }
  .col-lg-5 {
    width: 41.66667%;
  }
  .offset-lg-5 {
    margin-left: 41.66667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .col-lg-7 {
    width: 58.33333%;
  }
  .offset-lg-7 {
    margin-left: 58.33333%;
  }
  .col-lg-8 {
    width: 66.66667%;
  }
  .offset-lg-8 {
    margin-left: 66.66667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .col-lg-10 {
    width: 83.33333%;
  }
  .offset-lg-10 {
    margin-left: 83.33333%;
  }
  .col-lg-11 {
    width: 91.66667%;
  }
  .offset-lg-11 {
    margin-left: 91.66667%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .offset-lg-12 {
    margin-left: 100%;
  }
  .hide-lg {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .show-xl {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
  .row-xl-rtl {
    direction: rtl;
  }
  .row-xl-ltr {
    direction: ltr;
  }
  .row-xl-rtl .col, .row-xl-ltr .col {
    direction: ltr;
  }
  .col-xl-absolute {
    position: absolute;
    top: 0;
  }
  .col-xl-relative {
    position: relative;
  }
  .col-xl-0 {
    width: 0%;
  }
  .offset-xl-0 {
    margin-left: 0%;
  }
  .col-xl-1 {
    width: 8.33333%;
  }
  .offset-xl-1 {
    margin-left: 8.33333%;
  }
  .col-xl-2 {
    width: 16.66667%;
  }
  .offset-xl-2 {
    margin-left: 16.66667%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .col-xl-4 {
    width: 33.33333%;
  }
  .offset-xl-4 {
    margin-left: 33.33333%;
  }
  .col-xl-5 {
    width: 41.66667%;
  }
  .offset-xl-5 {
    margin-left: 41.66667%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .col-xl-7 {
    width: 58.33333%;
  }
  .offset-xl-7 {
    margin-left: 58.33333%;
  }
  .col-xl-8 {
    width: 66.66667%;
  }
  .offset-xl-8 {
    margin-left: 66.66667%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .col-xl-10 {
    width: 83.33333%;
  }
  .offset-xl-10 {
    margin-left: 83.33333%;
  }
  .col-xl-11 {
    width: 91.66667%;
  }
  .offset-xl-11 {
    margin-left: 91.66667%;
  }
  .col-xl-12 {
    width: 100%;
  }
  .offset-xl-12 {
    margin-left: 100%;
  }
  .hide-xl {
    display: none !important;
  }
}

@media (max-width: 1439px) {
  .show-xxl {
    display: none !important;
  }
}

@media (min-width: 1440px) {
  html {
    font-size: 22px;
  }
  .row-xxl-rtl {
    direction: rtl;
  }
  .row-xxl-ltr {
    direction: ltr;
  }
  .row-xxl-rtl .col, .row-xxl-ltr .col {
    direction: ltr;
  }
  .col-xxl-absolute {
    position: absolute;
    top: 0;
  }
  .col-xxl-relative {
    position: relative;
  }
  .col-xxl-0 {
    width: 0%;
  }
  .offset-xxl-0 {
    margin-left: 0%;
  }
  .col-xxl-1 {
    width: 8.33333%;
  }
  .offset-xxl-1 {
    margin-left: 8.33333%;
  }
  .col-xxl-2 {
    width: 16.66667%;
  }
  .offset-xxl-2 {
    margin-left: 16.66667%;
  }
  .col-xxl-3 {
    width: 25%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .col-xxl-4 {
    width: 33.33333%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333%;
  }
  .col-xxl-5 {
    width: 41.66667%;
  }
  .offset-xxl-5 {
    margin-left: 41.66667%;
  }
  .col-xxl-6 {
    width: 50%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .col-xxl-7 {
    width: 58.33333%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333%;
  }
  .col-xxl-8 {
    width: 66.66667%;
  }
  .offset-xxl-8 {
    margin-left: 66.66667%;
  }
  .col-xxl-9 {
    width: 75%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .col-xxl-10 {
    width: 83.33333%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333%;
  }
  .col-xxl-11 {
    width: 91.66667%;
  }
  .offset-xxl-11 {
    margin-left: 91.66667%;
  }
  .col-xxl-12 {
    width: 100%;
  }
  .offset-xxl-12 {
    margin-left: 100%;
  }
  .hide-xxl {
    display: none !important;
  }
}

.mb .hide-mb {
  display: none;
}

.tb .hide-tb {
  display: none;
}

.pc .hide-pc {
  display: none;
}

.popup, .loading {
  position: fixed;
  top: -100vh;
  left: -100vw;
  width: 100%;
  height: 100%;
  -webkit-transition: top 0s 0.45s, left 0s 0.45s, opacity 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
  transition: top 0s 0.45s, left 0s 0.45s, opacity 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
  -o-transition: top 0s 0.45s, left 0s 0.45s, opacity 0.45s ease-in-out, -o-transform 0.45s ease-in-out;
  -moz-transition: top 0s 0.45s, left 0s 0.45s, transform 0.45s ease-in-out, opacity 0.45s ease-in-out, -moz-transform 0.45s ease-in-out;
  transition: top 0s 0.45s, left 0s 0.45s, transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: top 0s 0.45s, left 0s 0.45s, transform 0.45s ease-in-out, opacity 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out, -moz-transform 0.45s ease-in-out, -o-transform 0.45s ease-in-out;
}

.popup_active:checked + .popup, .popup.on-visible, .loading_active:checked + .popup, .loading.on-visible, .popup_active:checked + .loading, .loading_active:checked + .loading {
  top: 0;
  left: 0;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

.popup {
  overflow: hidden;
  overflow: auto;
}

.popup_X {
  position: absolute;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0s 0.45s ease-in-out;
  transition: -webkit-transform 0s 0.45s ease-in-out;
  -o-transition: -o-transform 0s 0.45s ease-in-out;
  -moz-transition: transform 0s 0.45s ease-in-out, -moz-transform 0s 0.45s ease-in-out;
  transition: transform 0s 0.45s ease-in-out;
  transition: transform 0s 0.45s ease-in-out, -webkit-transform 0s 0.45s ease-in-out, -moz-transform 0s 0.45s ease-in-out, -o-transform 0s 0.45s ease-in-out;
}

.popup_active {
  display: none;
}

.popup_active:checked + .popup, .popup.on-visible {
  opacity: 1;
}

.popup_active:checked + .popup .popup_X, .popup.on-visible .popup_X {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.45s 0s ease-in-out;
  transition: -webkit-transform 0.45s 0s ease-in-out;
  -o-transition: -o-transform 0.45s 0s ease-in-out;
  -moz-transition: transform 0.45s 0s ease-in-out, -moz-transform 0.45s 0s ease-in-out;
  transition: transform 0.45s 0s ease-in-out;
  transition: transform 0.45s 0s ease-in-out, -webkit-transform 0.45s 0s ease-in-out, -moz-transform 0.45s 0s ease-in-out, -o-transform 0.45s 0s ease-in-out;
}

.popup_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loading {
  background: #009d66;
  opacity: 0;
  z-index: 200;
}

.loading_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 0;
}

.loading_container:before {
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.loading_content {
  width: auto;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(-25%);
     -moz-transform: translateY(-25%);
      -ms-transform: translateY(-25%);
       -o-transform: translateY(-25%);
          transform: translateY(-25%);
  font-size: 1rem;
}

.loading_visual {
  position: relative;
}

.loading_visual::before {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  width: 6rem;
  height: 6rem;
  border: 4px solid white;
  -webkit-animation: loading 3s ease-in-out infinite;
     -moz-animation: loading 3s ease-in-out infinite;
       -o-animation: loading 3s ease-in-out infinite;
          animation: loading 3s ease-in-out infinite;
}

.loading_percent {
  min-width: 1rem;
  min-height: 1rem;
  letter-spacing: .15em;
  font-weight: 100;
}

.loading.on-visible {
  opacity: 1;
}

.pleaseLandscape, .pleasePortrait {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pc .pleaseLandscape, .pc .pleasePortrait {
  display: none;
}

@media screen and (orientation: landscape) {
  .pleaseLandscape {
    top: -100vh;
    left: -100vw;
  }
}

@media screen and (orientation: portrait) {
  .pleasePortrait {
    top: -100vh;
    left: -100vw;
  }
}

.btn {
  position: relative;
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
}

.btnGroup {
  width: 100%;
  font-size: 0;
}

.btn_text {
  z-index: 1;
}

.icon-custom {
  width: 1rem;
  height: 1rem;
}

.icon-custom:before, .icon-custom:after {
  position: absolute;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -webkit-box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01);
  transition: -webkit-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -webkit-box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01);
  -o-transition: box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -o-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01);
  -moz-transition: transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -moz-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -moz-box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01);
  transition: transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01);
  transition: transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -webkit-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -moz-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -o-transform 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -webkit-box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01), -moz-box-shadow 0.35s cubic-bezier(0, 1.2, 0.8, 1.01);
}

.icon-X:before {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

.icon-X:after {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.icon-prev:before, .icon-prev:after {
  left: 0;
  -webkit-transform-origin: 0% 50%;
     -moz-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
       -o-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}

.icon-prev:before {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.icon-prev:after {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

.icon-next:before, .icon-next:after {
  right: 0;
  -webkit-transform-origin: 100% 50%;
     -moz-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
       -o-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}

.icon-next:before {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

.icon-next:after {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.header {
  position: fixed;
  width: 100%;
  height: 0;
  z-index: 180;
}

.header_container, .header_content {
  position: relative;
}

.logo {
  position: absolute;
  left: 1.25rem;
  margin-top: 1.5rem;
  width: 4rem;
  height: 4rem;
}

.hamburger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 1rem;
  -webkit-transform: translateX(0%);
     -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
       -o-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: -webkit-transform 0.35s ease-in-out;
  transition: -webkit-transform 0.35s ease-in-out;
  -o-transition: -o-transform 0.35s ease-in-out;
  -moz-transition: transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out, -o-transform 0.35s ease-in-out;
}

.hamburger .burger {
  position: relative;
  width: 2rem;
  height: 2rem;
}

.hamburger .burger_line {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 0.2rem;
}

.hamburger .burger_line, .hamburger .burger_line:before, .hamburger .burger_line:after {
  background: white;
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  -webkit-transition: background .35s ease-in-out, -webkit-transform .35s ease-in-out;
  transition: background .35s ease-in-out, -webkit-transform .35s ease-in-out;
  -o-transition: background .35s ease-in-out, -o-transform .35s ease-in-out;
  -moz-transition: background .35s ease-in-out, transform .35s ease-in-out, -moz-transform .35s ease-in-out;
  transition: background .35s ease-in-out, transform .35s ease-in-out;
  transition: background .35s ease-in-out, transform .35s ease-in-out, -webkit-transform .35s ease-in-out, -moz-transform .35s ease-in-out, -o-transform .35s ease-in-out;
}

.hamburger .burger_line:before, .hamburger .burger_line:after {
  width: 100%;
  height: 0.2rem;
}

.hamburger .burger_line:before {
  -webkit-transform: translateY(-0.9rem) rotate(0deg);
     -moz-transform: translateY(-0.9rem) rotate(0deg);
      -ms-transform: translateY(-0.9rem) rotate(0deg);
       -o-transform: translateY(-0.9rem) rotate(0deg);
          transform: translateY(-0.9rem) rotate(0deg);
}

.hamburger .burger_line:after {
  -webkit-transform: translateY(0.9rem) rotate(0deg);
     -moz-transform: translateY(0.9rem) rotate(0deg);
      -ms-transform: translateY(0.9rem) rotate(0deg);
       -o-transform: translateY(0.9rem) rotate(0deg);
          transform: translateY(0.9rem) rotate(0deg);
}

.close_active {
  display: none;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  z-index: 179;
  display: inline-block;
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
       -o-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.35s ease-in-out;
  transition: -webkit-transform 0.35s ease-in-out;
  -o-transition: -o-transform 0.35s ease-in-out;
  -moz-transition: transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out, -o-transform 0.35s ease-in-out;
}

.menu_active {
  display: none;
}

.menu_active:checked ~ .header .hamburger .burger_line {
  background: rgba(255, 255, 255, 0);
  -webkit-box-shadow: 0 0 1rem transparent;
     -moz-box-shadow: 0 0 1rem transparent;
          box-shadow: 0 0 1rem transparent;
}

.menu_active:checked ~ .header .hamburger .burger_line:before {
  -webkit-transform: translateY(0) rotate(45deg);
     -moz-transform: translateY(0) rotate(45deg);
      -ms-transform: translateY(0) rotate(45deg);
       -o-transform: translateY(0) rotate(45deg);
          transform: translateY(0) rotate(45deg);
}

.menu_active:checked ~ .header .hamburger .burger_line:after {
  -webkit-transform: translateY(0) rotate(135deg);
     -moz-transform: translateY(0) rotate(135deg);
      -ms-transform: translateY(0) rotate(135deg);
       -o-transform: translateY(0) rotate(135deg);
          transform: translateY(0) rotate(135deg);
}

.menu_active:checked ~ .menu {
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}

.menu_active:checked ~ .menu .menu_item {
  -webkit-transform: translateX(0%);
     -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
       -o-transform: translateX(0%);
          transform: translateX(0%);
}

.menu_list {
  position: relative;
  padding-top: 6rem;
  z-index: 15;
  font-size: 0;
  text-align: center;
}

.menu_item {
  background: rgba(0, 0, 0, 0.5);
  -moz-background-clip: content-box;
       background-clip: content-box;
  padding-bottom: 2px;
  font-size: 1rem;
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
       -o-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.35s ease-in-out;
  transition: -webkit-transform 0.35s ease-in-out;
  -o-transition: -o-transform 0.35s ease-in-out;
  -moz-transition: transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out, -o-transform 0.35s ease-in-out;
}

.menu_item:nth-child(1) {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

.menu_item:nth-child(2) {
  -webkit-transition-delay: 0.05s;
     -moz-transition-delay: 0.05s;
       -o-transition-delay: 0.05s;
          transition-delay: 0.05s;
}

.menu_item:nth-child(3) {
  -webkit-transition-delay: 0.1s;
     -moz-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.menu_item:nth-child(4) {
  -webkit-transition-delay: 0.15s;
     -moz-transition-delay: 0.15s;
       -o-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

.menu_item:nth-child(5) {
  -webkit-transition-delay: 0.2s;
     -moz-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.menu_item:nth-child(6) {
  -webkit-transition-delay: 0.25s;
     -moz-transition-delay: 0.25s;
       -o-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

.menu_item:nth-child(7) {
  -webkit-transition-delay: 0.3s;
     -moz-transition-delay: 0.3s;
       -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.menu_item:nth-child(8) {
  -webkit-transition-delay: 0.35s;
     -moz-transition-delay: 0.35s;
       -o-transition-delay: 0.35s;
          transition-delay: 0.35s;
}

.menu_item:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 2px;
  height: 1rem;
  -moz-background-clip: content-box;
       background-clip: content-box;
  display: none;
  background: white;
}

.menu_item_link {
  position: relative;
  display: block;
  overflow: hidden;
}

.menu_item_link:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 3rem;
  background: rgba(0, 132, 85, 0.75);
  -webkit-transform: translateX(101%);
     -moz-transform: translateX(101%);
      -ms-transform: translateX(101%);
       -o-transform: translateX(101%);
          transform: translateX(101%);
  -webkit-transition: -webkit-transform 0.35s ease-in-out;
  transition: -webkit-transform 0.35s ease-in-out;
  -o-transition: -o-transform 0.35s ease-in-out;
  -moz-transition: transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out, -o-transform 0.35s ease-in-out;
}

.menu_item_text {
  position: relative;
  padding: 1rem 4rem;
  color: white;
  display: block;
  z-index: 1;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
  -webkit-transition: color 0.35s ease-in-out, text-shadow 0.35s ease-in-out;
  -o-transition: color 0.35s ease-in-out, text-shadow 0.35s ease-in-out;
  -moz-transition: color 0.35s ease-in-out, text-shadow 0.35s ease-in-out;
  transition: color 0.35s ease-in-out, text-shadow 0.35s ease-in-out;
}

.menu_item_text:after {
  position: absolute;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  width: 1rem;
  height: 100%;
  background: white;
  -moz-background-clip: content-box;
       background-clip: content-box;
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
     -moz-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
  -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
       -o-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  -webkit-transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
  -o-transition: opacity 0.35s ease-in-out, -o-transform 0.35s ease-in-out;
  -moz-transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, -moz-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out, -moz-transform 0.35s ease-in-out, -o-transform 0.35s ease-in-out;
}

.menu_item:first-child:after {
  display: none;
}

.menu_item:hover .menu_item_link:after {
  -webkit-transform: translateX(0) translateY(0);
     -moz-transform: translateX(0) translateY(0);
      -ms-transform: translateX(0) translateY(0);
       -o-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
}

.menu_item:hover .menu_item_text {
  text-shadow: 0 0 1rem transparent;
}

.menu_item.on-active .menu_item_text:after {
  opacity: 1;
  -webkit-transform: translateY(0%);
     -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
       -o-transform: translateY(0%);
          transform: translateY(0%);
}

.language {
  position: relative;
  padding-bottom: 0;
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
     -moz-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
  -webkit-border-radius: 1rem;
     -moz-border-radius: 1rem;
          border-radius: 1rem;
  z-index: 500;
  text-align: center;
}

.language:after {
  display: none !important;
}

.language_box {
  position: relative;
  -webkit-box-shadow: 0 0 0 1px white;
     -moz-box-shadow: 0 0 0 1px white;
          box-shadow: 0 0 0 1px white;
  -webkit-border-radius: 1rem;
     -moz-border-radius: 1rem;
          border-radius: 1rem;
  font-size: 0;
}

.language_box:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  padding-right: .25rem;
  background: white;
  -webkit-border-radius: 1rem;
     -moz-border-radius: 1rem;
          border-radius: 1rem;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  -webkit-transition: -webkit-transform .15s ease-in-out;
  transition: -webkit-transform .15s ease-in-out;
  -o-transition: -o-transform .15s ease-in-out;
  -moz-transition: transform .15s ease-in-out, -moz-transform .15s ease-in-out;
  transition: transform .15s ease-in-out;
  transition: transform .15s ease-in-out, -webkit-transform .15s ease-in-out, -moz-transform .15s ease-in-out, -o-transform .15s ease-in-out;
}

.language_label {
  position: relative;
  min-width: 50%;
  padding: .25rem;
  display: inline-block;
  z-index: 10;
}

.language_text {
  height: 1rem;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
  color: white;
  -webkit-transition: color .15s ease-in-out;
  -o-transition: color .15s ease-in-out;
  -moz-transition: color .15s ease-in-out;
  transition: color .15s ease-in-out;
}

.language_active {
  display: none;
}

.language_active[value="en"]:checked ~ .menu .language_text-en {
  text-shadow: 0 0 1rem transparent;
  color: #009d66;
}

.language_active[value="en"]:checked ~ .menu .language_box:after {
  -webkit-transform: translateX(-webkit-calc( 100% - .48rem));
     -moz-transform: translateX(-moz-calc( 100% - .48rem));
      -ms-transform: translateX(calc( 100% - .48rem));
       -o-transform: translateX(calc( 100% - .48rem));
          transform: translateX(calc( 100% - .48rem));
}

.language_active[value="ch"]:checked ~ .menu .language_text-ch {
  text-shadow: 0 0 1rem transparent;
  color: #009d66;
}

.language_active[value="ch"]:checked ~ .menu .language_box:after {
  -webkit-transform: translateX(0%);
     -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
       -o-transform: translateX(0%);
          transform: translateX(0%);
}

.language_active[value="en"]:checked ~ * .ch {
  display: none;
}

.language_active[value="ch"]:checked ~ * .en {
  display: none;
}

@media (min-width: 992px) {
  .hamburger {
    -webkit-transform: translateX(300%);
       -moz-transform: translateX(300%);
        -ms-transform: translateX(300%);
         -o-transform: translateX(300%);
            transform: translateX(300%);
  }
  .menu {
    width: 100%;
    height: auto;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
  }
  .menu_list {
    background: rgba(255, 255, 255, 0);
    padding-top: 3rem;
  }
  .menu_item {
    background: none;
    display: inline-block;
    -webkit-transform: skewX(-15deg) !important;
       -moz-transform: skewX(-15deg) !important;
        -ms-transform: skewX(-15deg) !important;
         -o-transform: skewX(-15deg) !important;
            transform: skewX(-15deg) !important;
  }
  .menu_item:after {
    display: block;
  }
  .menu_item_link {
    margin-right: 1px;
  }
  .menu_item_link:after {
    height: 2rem;
  }
  .menu_item_text {
    padding: 1rem 1.5rem;
    -webkit-transform: skewX(15deg);
       -moz-transform: skewX(15deg);
        -ms-transform: skewX(15deg);
         -o-transform: skewX(15deg);
            transform: skewX(15deg);
  }
  .menu_item_text:after {
    margin-bottom: 5px;
    right: 0;
    height: 5px;
    width: -webkit-calc( 100% - 3rem);
    width: -moz-calc( 100% - 3rem);
    width: calc( 100% - 3rem);
    -webkit-transform: translateX(0%) translateY(100%);
       -moz-transform: translateX(0%) translateY(100%);
        -ms-transform: translateX(0%) translateY(100%);
         -o-transform: translateX(0%) translateY(100%);
            transform: translateX(0%) translateY(100%);
  }
  .menu_item:last-child .menu_item_link {
    border-right: 0;
  }
  .language {
    position: fixed;
    right: 1.25rem;
    top: 1.5rem;
    -webkit-transform: skewX(0) !important;
       -moz-transform: skewX(0) !important;
        -ms-transform: skewX(0) !important;
         -o-transform: skewX(0) !important;
            transform: skewX(0) !important;
  }
  .language_box {
    padding: .25rem .15rem;
  }
  .language_label {
    min-width: 0%;
    padding: 0 .35rem;
  }
}

.wrapper {
  position: relative;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.background {
  position: relative;
  top: 0;
  left: 50%;
  margin: auto;
  min-width: 177.77778vh;
  min-height: 56.25vw;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
}

.background-absolute {
  position: absolute;
}

.background-width100 {
  position: absolute;
  min-width: 0;
  min-height: 0;
  height: auto;
}

.content {
  position: relative;
  width: 100%;
}

.title.view, .text.view {
  opacity: 0;
  -webkit-transform: translateY(1rem);
     -moz-transform: translateY(1rem);
      -ms-transform: translateY(1rem);
       -o-transform: translateY(1rem);
          transform: translateY(1rem);
  -webkit-transition: opacity .5s ease-in-out, -webkit-transform 1s ease-in-out;
  transition: opacity .5s ease-in-out, -webkit-transform 1s ease-in-out;
  -o-transition: opacity .5s ease-in-out, -o-transform 1s ease-in-out;
  -moz-transition: transform 1s ease-in-out, opacity .5s ease-in-out, -moz-transform 1s ease-in-out;
  transition: transform 1s ease-in-out, opacity .5s ease-in-out;
  transition: transform 1s ease-in-out, opacity .5s ease-in-out, -webkit-transform 1s ease-in-out, -moz-transform 1s ease-in-out, -o-transform 1s ease-in-out;
}

.title.view.on-visible, .text.view.on-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

.title {
  position: relative;
  text-align: left;
}

.title_text {
  color: white;
  line-height: 1.125em;
  white-space: nowrap;
}

.title_text_pic {
  display: inline-block;
}

.title_text-en {
  font-weight: 100;
  font-family: 'Fira Sans Condensed',  sans-serif;
}

.title_text-ch {
  font-weight: 600;
  letter-spacing: .5rem;
}

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

.title_text-right {
  text-align: right;
}

.title-deco {
  background: url(../img/title_deco.png) repeat-y;
  padding-left: 1.25rem;
  display: inline-block;
}

.text {
  padding-top: 1.25rem;
  line-height: 1.5em;
  color: white;
}

.col {
  vertical-align: middle;
  z-index: 1;
}

.col_box {
  position: relative;
}

.col_pic {
  max-width: 100%;
}

.col-padding {
  padding: 1.5rem 1.25rem;
}

.col-title {
  height: 100%;
  text-align: center;
  vertical-align: middle;
  font-size: 0;
}

.col-title:after {
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.col-title .col_box {
  width: 100%;
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
}

#index {
  height: 100%;
}

.index_content {
  background: black;
}

.index_content, .index_main {
  height: 100%;
}

.index_background {
  position: absolute;
  bottom: 0;
  height: auto;
  opacity: 0;
  -webkit-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

.index_background.on-visible {
  opacity: 1;
}

.index_main {
  text-align: center;
}

.index_catch {
  top: 45%;
  max-width: 100%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-block;
}

.index_catch_pic {
  max-width: -webkit-calc( 100% - 2rem);
  max-width: -moz-calc( 100% - 2rem);
  max-width: calc( 100% - 2rem);
  max-height: 100%;
  margin: 0 1rem;
  margin-top: .5rem;
  opacity: 0;
  -webkit-transform: translateY(100%);
     -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
       -o-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: opacity 2.5s ease-in-out, -webkit-transform 3s ease-in-out;
  transition: opacity 2.5s ease-in-out, -webkit-transform 3s ease-in-out;
  -o-transition: opacity 2.5s ease-in-out, -o-transform 3s ease-in-out;
  -moz-transition: transform 3s ease-in-out, opacity 2.5s ease-in-out, -moz-transform 3s ease-in-out;
  transition: transform 3s ease-in-out, opacity 2.5s ease-in-out;
  transition: transform 3s ease-in-out, opacity 2.5s ease-in-out, -webkit-transform 3s ease-in-out, -moz-transform 3s ease-in-out, -o-transform 3s ease-in-out;
}

.index_catch_pic.intro-1 {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

.index_catch_pic.intro-2 {
  -webkit-transition-delay: .25s;
     -moz-transition-delay: .25s;
       -o-transition-delay: .25s;
          transition-delay: .25s;
}

.index_catch_pic.intro-3 {
  -webkit-transition-delay: 2s;
     -moz-transition-delay: 2s;
       -o-transition-delay: 2s;
          transition-delay: 2s;
}

.index_catch_pic.on-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

.index_catch_text {
  font-size: 0;
  white-space: normal;
  -webkit-animation: float 10s infinite linear;
     -moz-animation: float 10s infinite linear;
       -o-animation: float 10s infinite linear;
          animation: float 10s infinite linear;
}

.about_intro {
  margin: 0 0 7.5rem 0;
  padding: 3rem 1.75rem;
}

.client_logo {
  max-width: 100%;
}

.client_logos {
  background: white;
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0;
}

.client_logos_col {
  max-width: 100%;
  display: inline-block;
}

.product_box:hover .product_cover:before {
  opacity: 0;
}

.product_box:hover .product_title_text {
  background: rgba(0, 132, 85, 0.75);
}

.product_box:hover .product_pic {
  -webkit-transform: scale(1.125);
     -moz-transform: scale(1.125);
      -ms-transform: scale(1.125);
       -o-transform: scale(1.125);
          transform: scale(1.125);
}

.product_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.product_cover:after {
  width: 0;
  height: 100%;
}

.product_cover:not(.product_cover-title):before {
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 101%;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  background: -o-radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  background: radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  display: block;
  -webkit-transition: opacity .45s ease-in-out;
  -o-transition: opacity .45s ease-in-out;
  -moz-transition: opacity .45s ease-in-out;
  transition: opacity .45s ease-in-out;
}

.product_cover-title {
  position: relative;
  height: auto;
  padding: 1.5rem 1.25rem;
}

.product_cover-title .title, .product_cover-title:after {
  display: inline-block;
  vertical-align: middle;
}

.product_title {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 0;
}

.product_title:after, .product_title_text {
  display: inline-block;
  vertical-align: middle;
}

.product_title:after {
  position: relative;
  width: 0;
  height: 100%;
}

.product_title_text {
  background: rgba(0, 132, 85, 0);
  display: inline-block;
  -webkit-transition: background .45s ease-in-out;
  -o-transition: background .45s ease-in-out;
  -moz-transition: background .45s ease-in-out;
  transition: background .45s ease-in-out;
}

.product_pic {
  width: 100%;
  -webkit-transition: -webkit-transform .45s ease-in-out;
  transition: -webkit-transform .45s ease-in-out;
  -o-transition: -o-transform .45s ease-in-out;
  -moz-transition: transform .45s ease-in-out, -moz-transform .45s ease-in-out;
  transition: transform .45s ease-in-out;
  transition: transform .45s ease-in-out, -webkit-transform .45s ease-in-out, -moz-transform .45s ease-in-out, -o-transform .45s ease-in-out;
}

.product_pic-title {
  position: absolute;
  top: 0;
}

.license {
  background: white;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  background: -o-radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  background: radial-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  padding: 1rem 1.5rem;
}

.license_box {
  padding: .5rem 0;
}

.license_nav_btn {
  padding: .5rem;
}

.license_nav_btn.slick-current .license_title {
  color: #009d66;
}

.license_title {
  padding-bottom: 1rem;
  line-height: 1.25em;
  display: block;
  text-align: center;
  color: white;
}

.license_title:last-child {
  padding: 0;
}

.license_pic {
  max-width: 100%;
}

.footer {
  bottom: 0;
  width: 100%;
  padding: 1rem 0;
  background: black;
  z-index: 100;
}

.footer_container {
  overflow: hidden;
}

.footer_content {
  height: 100%;
  padding: .5rem 1.5rem;
}

.footer_content-right {
  text-align: right;
}

.footer_nav {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}

.footer_nav_item {
  margin: 0 .25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: grey;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  line-height: 1.5rem;
  text-align: center;
  display: inline-block;
  font-size: 1rem;
}

.footer_nav_item:last-child {
  margin-right: 0;
}

.footer_nav_item:first-child {
  margin-left: 0;
}

.footer_nav_text {
  color: white;
}

.footer_logo, .footer_catch {
  display: inline-block;
  vertical-align: middle;
}

.footer_logo {
  position: relative;
  margin-right: .25rem;
  width: 4rem;
}

.footer_catch {
  top: 0;
  -webkit-transform: translate(0);
     -moz-transform: translate(0);
      -ms-transform: translate(0);
       -o-transform: translate(0);
          transform: translate(0);
}

.footer_catch_text {
  -webkit-animation-duration: 0s;
     -moz-animation-duration: 0s;
       -o-animation-duration: 0s;
          animation-duration: 0s;
}

.footer_catch_pic {
  height: 1rem;
  margin: .25rem .25rem 0 .25rem;
}

.footer_catch_pic-ch {
  height: .65rem;
}

.contact {
  padding: .5rem 1.5rem;
  vertical-align: top;
}

.contact_info {
  padding: 1rem 0;
}

.contact_company {
  padding-bottom: .5rem;
}

.contact_office, .contact_company, .contact_data, .contact_link {
  color: white;
}

.contact_link:hover {
  background: white;
  color: #009d66;
}

.contact_office, .contact_company, .contact_data {
  line-height: 1.25em;
}

.contact_list {
  overflow: hidden;
}

.contact_list_title {
  float: left;
  color: white;
  line-height: 1.25em;
}

@media (min-width: 540px) {
  .about_content {
    padding: 0 1.5rem;
  }
  .about_intro {
    margin: 7.5rem 0 10rem 0;
  }
}

@media (min-width: 1200px) {
  .client_logos {
    padding: 5rem 1.5rem;
  }
  .product_cover-title {
    position: absolute;
    height: 100%;
  }
  .product_pic-title {
    position: relative;
  }
}

@-webkit-keyframes float {
  0%,
  90%,
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  45% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
}

@-moz-keyframes float {
  0%,
  90%,
  100% {
    -moz-transform: translateY(0px);
         transform: translateY(0px);
  }
  45% {
    -moz-transform: translateY(-12px);
         transform: translateY(-12px);
  }
}

@-o-keyframes float {
  0%,
  90%,
  100% {
    -o-transform: translateY(0px);
       transform: translateY(0px);
  }
  45% {
    -o-transform: translateY(-12px);
       transform: translateY(-12px);
  }
}

@keyframes float {
  0%,
  90%,
  100% {
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);
  }
  45% {
    -webkit-transform: translateY(-12px);
       -moz-transform: translateY(-12px);
         -o-transform: translateY(-12px);
            transform: translateY(-12px);
  }
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
            transform: rotate(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scaleX(1) scaleY(1);
            transform: rotate(180deg) scaleX(1) scaleY(1);
  }
  100% {
    -webkit-transform: rotate(360deg) scaleX(1) scaleY(1);
            transform: rotate(360deg) scaleX(1) scaleY(1);
  }
}

@-moz-keyframes loading {
  0% {
    -moz-transform: rotate(0deg) scaleX(1) scaleY(1);
         transform: rotate(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -moz-transform: rotate(180deg) scaleX(1) scaleY(1);
         transform: rotate(180deg) scaleX(1) scaleY(1);
  }
  100% {
    -moz-transform: rotate(360deg) scaleX(1) scaleY(1);
         transform: rotate(360deg) scaleX(1) scaleY(1);
  }
}

@-o-keyframes loading {
  0% {
    -o-transform: rotate(0deg) scaleX(1) scaleY(1);
       transform: rotate(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -o-transform: rotate(180deg) scaleX(1) scaleY(1);
       transform: rotate(180deg) scaleX(1) scaleY(1);
  }
  100% {
    -o-transform: rotate(360deg) scaleX(1) scaleY(1);
       transform: rotate(360deg) scaleX(1) scaleY(1);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
       -moz-transform: rotate(0deg) scaleX(1) scaleY(1);
         -o-transform: rotate(0deg) scaleX(1) scaleY(1);
            transform: rotate(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scaleX(1) scaleY(1);
       -moz-transform: rotate(180deg) scaleX(1) scaleY(1);
         -o-transform: rotate(180deg) scaleX(1) scaleY(1);
            transform: rotate(180deg) scaleX(1) scaleY(1);
  }
  100% {
    -webkit-transform: rotate(360deg) scaleX(1) scaleY(1);
       -moz-transform: rotate(360deg) scaleX(1) scaleY(1);
         -o-transform: rotate(360deg) scaleX(1) scaleY(1);
            transform: rotate(360deg) scaleX(1) scaleY(1);
  }
}