@charset "UTF-8";

/* reset */

* {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  outline: none; }



body, header, footer, aside, nav, section, article, h1, h2, h3, h4, h5, h6, p, span, a, ul, ol, li, strong, img {

  padding: 0;

  margin: 0; }



img {

  max-width: 100%;

  vertical-align: top; }



a {

  text-decoration: none;

  cursor: pointer; }

.footer__linkitem

textarea {

  vertical-align: top; }



label {

  display: inline-block;

  cursor: pointer; }



/* reset end */

/* global */

body {

  font-family: 'Lato', '微軟正黑體';

  padding-top: 70px;

  overflow-x: hidden; }



.container {

  position: relative;

  z-index: 2;

  width: 100%;

  margin: 0 auto;

  padding: 0 15px; }



@media (min-width: 768px) {

  .container {

    width: 750px; } }



@media (min-width: 992px) {

  .container {

    width: 950px; } }



@media (min-width: 1200px) {

  .container {

    width: 1170px; } }



.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  padding-left: 30px;

  background-color: #fff;

  -webkit-transition: -webkit-box-shadow .5s;

  transition: -webkit-box-shadow .5s;

  -o-transition: box-shadow .5s;

  transition: box-shadow .5s;

  transition: box-shadow .5s, -webkit-box-shadow .5s; }

  .header--scroll {

    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }

  .header__listbox {

    text-align: center;

    background-color: #e6e6e6;

    font-size: 0;

    padding: 20px 0;

    overflow: auto;

    white-space: nowrap; }

    .header__listbox-link {

      display: inline-block;

      margin-left: 40px; }

      .header__listbox-link:first-child {

        margin: 0; }

    .header__listbox-title {

      color: #555;

      font-size: 13px;

      font-weight: 400;

      line-height: 1;

      margin: 8px 0 0; }



.footer {

  background-color: #282423; }

  .footer__wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap; }

  .footer__box {

    width: 50%;

    padding: 60px 0; }

    .footer__box:first-child {

      padding-right: 29px;

      border-right: 1px solid rgba(255, 255, 255, 0.1); }

    .footer__box:last-child {

      padding-left: 30px; }

  .footer__title {

    color: rgba(255, 255, 255, 0.3);

    font-size: 20px;

    line-height: 1;

    margin: 0 0 35px; }

  .footer__infobox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap; }

  .footer__info {

    width: 50%; }

    .footer__info-title {

      color: #fff;

      font-size: 16px;

      font-weight: 400;

      line-height: 1;

      margin: 0 0 15px; }

    .footer__info-text {

      color: rgba(255, 255, 255, 0.5);

      font-size: 14px;

      font-weight: 400;

      line-height: 1.78; }

      .footer__info-text a {

        color: rgba(255, 255, 255, 0.5); }

        .footer__info-text a:hover {

          color: #fff; }

  .footer__linkitembox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin: 0 -10px; }

  .footer__linkitem {

    width: 20%;

    padding: 0 10px; }

  .footer__linkbox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column; }

    .footer__linkbox-text {

      color: rgba(255, 255, 255, 0.5);

      font-size: 14px;

      font-weight: 400;

      line-height: 1;

      word-break: break-all;

      text-decoration: underline;

      margin: 15px 0 0; }

      .footer__linkbox-text:first-child {

        margin: 0; }



.copyright {

  padding: 26px 0;

  background-color: #fff; }

  .copyright__box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between; }

  .copyright__text {

    color: #767676;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.2; }

    .copyright__text a {

      color: #767676; }

  .copyright__iconbox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center; }

  .copyright__icon {

    display: block;

    width: 28px;

    margin-left: 8px;

    -webkit-transition: opacity .4s;

    -o-transition: opacity .4s;

    transition: opacity .4s; }

    .copyright__icon:hover {

      opacity: .8; }

    .copyright__icon:first-child {

      margin: 0; }



.logo {

  position: relative;

  z-index: 2;

  width: 61px; }



.nav {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap; }

  .nav__box {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center; }

  .nav__btn {

    position: relative;

    display: block;

    color: #999;

    font-size: 16px;

    font-weight: 400;

    line-height: 70px;

    padding: 0 20px;

    -webkit-transition: color .3s;

    -o-transition: color .3s;

    transition: color .3s; }

    .nav__btn::after {

      content: '';

      display: none;

      position: absolute;

      bottom: 0;

      left: calc(50% - 4px);

      width: 0;

      height: 0;

      border-style: solid;

      border-width: 0 4px 4px 4px;

      border-color: transparent transparent #f47718 transparent; }

    .nav__btn::before {

      color: #333; }

    .nav__btn--active {

      color: #333; }

      .nav__btn--active::after {

        display: block; }



.lang {

  position: relative; }

  .lang__current {

    min-width: 145px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    color: #333;

    font-size: 14px;

    line-height: 70px;

    padding: 0px 24px;

    background-color: #f5f5f5;

    -webkit-transition: background-color .4s;

    -o-transition: background-color .4s;

    transition: background-color .4s; }

    .lang__current::after {

      content: '';

      width: 0;

      height: 0;

      border-style: solid;

      border-width: 3px 3px 0 3px;

      border-color: #333333 transparent transparent transparent;

      margin-left: 6px; }

    .lang__current:hover {

      background-color: #ccc; }

    .lang__current img {

      width: 20px;

      margin-right: 5px; }

  .lang__box {

    position: absolute;

    top: 100%;

    left: 0;

    display: none;

    width: 100%;

    background-color: #fff; }

    .lang__box--open {

      display: block; }

  .lang__btn {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    color: #333;

    font-size: 14px;

    line-height: 40px;

    padding: 0 24px;

    -webkit-transition: background-color .4s;

    -o-transition: background-color .4s;

    transition: background-color .4s; }

    .lang__btn:hover {

      background-color: #f5f5f5; }

    .lang__btn img {

      width: 20px;

      margin-right: 5px; }



.tag {

  display: inline-block;

  color: #bbb;

  font-size: 18px;

  font-weight: 400;

  line-height: 38px;

  text-align: center;

  border: 1px solid #bbb;

  padding: 0 13px;

  margin: 0 0 20px; }

  .tag__white {

    color: #fff;

    border-color: #fff; }



.animation__detection .tag {

  opacity: 0;

  -webkit-transform: translateY(100%);

  -ms-transform: translateY(100%);

  transform: translateY(100%);

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }



.detail {

  position: relative;

  display: inline-block;

  color: #f2811c;

  font-size: 16px;

  line-height: 1;

  padding-left: 24px;

  margin: 40px 0 0;

  -webkit-transition: padding .4s;

  -o-transition: padding .4s;

  transition: padding .4s; }

  .detail::before {

    content: '';

    position: absolute;

    left: 0;

    top: 1px;

    width: 14px;

    height: 14px;

    background-image: url(../images/index/detail_icon.png);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat; }

  .detail:hover {

    padding-left: 34px; }



.readmore {

  position: relative;

  display: inline-block;

  color: #fff;

  font-size: 16px;

  line-height: 1;

  padding-left: 24px;

  margin: 40px 0 0;

  -webkit-transition: padding .4s;

  -o-transition: padding .4s;

  transition: padding .4s; }

  .readmore::before {

    content: '';

    position: absolute;

    left: 0;

    top: 1px;

    width: 14px;

    height: 14px;

    background-image: url(../images/index/more_icon.png);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat; }

  .readmore:hover {

    padding-left: 34px; }



.date {

  color: #f2811c;

  font-size: 14px;

  line-height: 1;

  margin: 0 0 10px; }



.bread {

  font-size: 0;

  padding: 18px 0;

  background-color: #f1f1f1; }

  .bread__btn {

    display: inline-block;

    color: #555;

    font-size: 14px;

    font-weight: 400; }

    .bread__btn::after {

      content: '/';

      margin: 0 4px; }

    .bread__btn:last-child::after {

      content: '';

      margin: 0; }



a.bread__btn {

  color: #999;

  -webkit-transition: color .4s;

  -o-transition: color .4s;

  transition: color .4s; }

  a.bread__btn:hover {

    color: #555; }



.paging {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  padding: 27px 0;

  margin: 40px 0 0;

  background-color: #f5f5f5; }

  .paging__btn {

    min-width: 34px;

    display: block;

    color: #777;

    font-size: 16px;

    line-height: 32px;

    text-align: center;

    background-color: #fff;

    border: 1px solid #ddd;

    padding: 0 5px;

    margin-left: 10px;

    -webkit-transition: color .4s, background-color .4s, border-color .4s;

    -o-transition: color .4s, background-color .4s, border-color .4s;

    transition: color .4s, background-color .4s, border-color .4s; }

    .paging__btn:hover, .paging__btn--active {

      color: #fff;

      background-color: #f58220;

      border-color: #f58220; }

    .paging__btn:first-child {

      margin: 0; }

    .paging__btn-prev, .paging__btn-next {

      padding: 0 20px; }



.return {

  display: block;

  width: 120px;

  color: #999;

  font-size: 16px;

  line-height: 40px;

  text-align: center;

  background-color: #333;

  border-radius: 3px;

  -webkit-transition: color .4s;

  -o-transition: color .4s;

  transition: color .4s; }

  .return:hover {

    color: #fff; }



.animation__detection .common__title {

  opacity: 0;

  -webkit-transform: translateY(100%);

  -ms-transform: translateY(100%);

  transform: translateY(100%);

  -webkit-transition-delay: .8s;

  -o-transition-delay: .8s;

  transition-delay: .8s;

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }



.common__section {

  padding: 90px 0; }

  .common__section-grey {

    background-color: #f5f5f5; }

  .common__section-notop {

    padding-top: 0; }



.common__title {

  color: #333;

  font-size: 36px;

  line-height: 1.33;

  margin: 0 0 35px; }



.common__btn {

  display: block;

  width: 120px;

  color: #fff;

  font-size: 16px;

  line-height: 40px;

  text-align: center;

  border-radius: 3px;

  background-color: #f2811c;

  margin: 22px auto 0;

  -webkit-transition: background-color .4s;

  -o-transition: background-color .4s;

  transition: background-color .4s; }

  .common__btn:hover {

    background-color: #d8721d; }



@media (min-width: 992px) {

  .burger {

    display: none; }

  .mobile__menu {

    display: none; } }



@media (max-width: 991px) {

  .mobile__menu {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    z-index: 5000;

    width: 300px;

    height: 100%;

    padding-top: 50px;

    background-color: #fff;

    -webkit-transform: translateX(100%);

    -ms-transform: translateX(100%);

    transform: translateX(100%);

    -webkit-transition: -webkit-transform .5s, -webkit-box-shadow .5s;

    transition: -webkit-transform .5s, -webkit-box-shadow .5s;

    -o-transition: transform .5s, box-shadow .5s;

    transition: transform .5s, box-shadow .5s;

    transition: transform .5s, box-shadow .5s, -webkit-transform .5s, -webkit-box-shadow .5s; }

    .mobile__menu--open {

      -webkit-transform: translateX(0);

      -ms-transform: translateX(0);

      transform: translateX(0);

      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

    .mobile__menu-close {

      position: absolute;

      top: 20px;

      right: 20px;

      display: block;

      width: 30px; }

  .mobile__nav {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column; }

    .mobile__nav-btn {

      color: #999;

      font-size: 16px;

      line-height: 50px;

      padding: 0 15px;

      -webkit-transition: color .4s;

      -o-transition: color .4s;

      transition: color .4s; }

      .mobile__nav-btn:hover {

        color: #333; }

      .mobile__nav-btn--active {

        color: #333; }

  .header {

    padding: 10px 20px; }

  .burger {

    position: absolute;

    top: 29px;

    right: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -ms-flex-line-pack: justify;

    align-content: space-between;

    width: 20px;

    height: 12px; }

    .burger::before, .burger::after {

      content: '';

      width: 100%;

      height: 2px;

      background-color: #000; }

    .burger__line {

      width: 100%;

      height: 2px;

      background-color: #000; }

  .nav__box {

    display: none; }

  .lang__current {

    padding: 0 15px;

    line-height: 50px; }

  .lang__box {

    position: static; }

  .lang__btn {

    padding: 0 15px; }

  .lang:not(.lang-mobile) {

    display: none; }

  .footer {

    padding: 40px 0; }

    .footer__box {

      width: 100%; }

      .footer__box:first-child {

        padding: 0;

        border: 0; }

      .footer__box:last-child {

        padding: 20px 0 0;

        margin: 20px 0 0;

        border-top: 1px solid rgba(255, 255, 255, 0.1); }

    .footer__title {

      margin: 0 0 15px; }

  .tag {

    font-size: 16px;

    line-height: 32px;

    margin: 0 0 15px; }

  .detail {

    margin: 10px 0 0; }

  .readmore {

    margin: 15px 0 0; }

  .common__section {

    padding: 40px 0; }

  .common__title {

    font-size: 28px;

    margin: 0 0 15px; } }



@media (max-width: 767px) {

  .footer {

    text-align: center; }

    .footer__linkbox {

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center; }

    .footer__linkitem {

      width: 100%; }

      .footer__linkitem:nth-child(n + 2) {

        margin: 20px 0 0; }

    .footer__info {

      width: 100%; }

      .footer__info:first-child {

        margin: 0 0 20px; }

      .footer__info-title {

        margin: 0 0 5px; }

  .copyright {

    padding: 15px 0; }

    .copyright__box {

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -ms-flex-direction: column;

      flex-direction: column; }

    .copyright__text {

      text-align: center;

      margin: 0 0 10px; } }



/* global end */

/* 首頁 */

.animation .slider__content {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .tag {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .common__title {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .productinfo__slider {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .productinfo__imgslider-box {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .indexlocation__content {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .indexservice__box:first-child {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .indexservice__box:nth-child(2) {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .info__bg {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .info__content {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .bottom__banner-title {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .productinfo__imgslider-mobile {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .indexservice__mobile {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.animated .productinfo__slider-mobile {

  opacity: 1;

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0); }



.slick-dotted.slick-slider {

  margin: 0; }



.banner {

  position: relative; }

  .banner__bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%; }

    .banner__bg-slide {

      height: 650px;

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat; }



.slider .slick-dots {

  bottom: 25px;

  text-align: right;

  padding-right: 20px; }

  .slider .slick-dots li {

    width: auto;

    height: auto;

    margin: 0 4px; }

    .slider .slick-dots li button {

      width: 12px;

      height: 12px;

      background-color: #e6e6e6;

      border: 1px solid #ccc;

      border-radius: 50%; }

      .slider .slick-dots li button::before {

        display: none; }

      .slider .slick-dots li button:hover {

        background-color: #f2811c;

        border-color: #f2811c; }

  .slider .slick-dots li.slick-active button {

    background-color: #f2811c;

    border-color: #f2811c; }



.slider__slide {

  position: relative;

  height: 650px;

  padding-bottom: 50px;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat; }

  .slider__slide-img {

    display: block;

    height: 150px;

    margin-bottom: 15px; }

  .slider__slide .container {

    height: 100%; }

  .slider__slide .common__btn {

    margin-left: 0; }



.slider__contentbox {

  position: relative;

  width: 100%;

  height: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-pack: start;

  -ms-flex-pack: start;

  justify-content: flex-start;

  -webkit-box-align: end;

  -ms-flex-align: end;

  align-items: flex-end;

  -ms-flex-line-pack: end;

  align-content: flex-end; }



.slider__content {

  width: 100%;

  max-width: 600px;

  opacity: 0;

  -webkit-transform: translateY(-100%);

  -ms-transform: translateY(-100%);

  transform: translateY(-100%);

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s;

  -webkit-transition-delay: .3s;

  -o-transition-delay: .3s;

  transition-delay: .3s; }



.slider__title {

  color: #222;

  font-size: 40px;

  font-weight: bold;

  line-height: 1.4; }



.slider__subtitle {

  max-height: 3.4em;

  color: #989898;

  font-size: 16px;

  font-weight: 400;

  line-height: 1.7;

  margin: 10px 0 0;

  overflow: hidden; }



.indexproduct {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  padding: 95px 0; }



@media (min-width: 768px) {

  .indexproduct {

    padding-left: calc((100% - 750px) / 2); } }



@media (min-width: 992px) {

  .indexproduct {

    padding-left: calc((100% - 950px) / 2); } }



@media (min-width: 1200px) {

  .indexproduct {

    padding-left: calc((100% - 1140px) / 2); } }



.productinfo__slider {

  width: calc(40% - 30px);

  opacity: 0;

  -webkit-transform: translateX(-100%);

  -ms-transform: translateX(-100%);

  transform: translateX(-100%);

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }

  .productinfo__slider .slick-arrow {

    width: 36px;

    height: 36px;

    top: auto;

    bottom: 0;

    -webkit-transform: translate(0);

    -ms-transform: translate(0);

    transform: translate(0);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 2; }

    .productinfo__slider .slick-arrow::before {

      display: none; }

  .productinfo__slider .slick-prev {

    left: 0;

    background-image: url(../images/index/product_info_prev.png); }

  .productinfo__slider .slick-next {

    left: 44px;

    right: auto;

    background-image: url(../images/index/product_info_next.png); }



.productinfo__slide {

  padding-bottom: 85px; }



.productinfo__title {

  color: #555;

  font-size: 18px;

  font-weight: 400;

  line-height: 1.2; }

  .productinfo__title span {

    color: #f2811c;

    font-size: 36px;

    font-weight: bold;

    margin-right: 5px; }



.productinfo__text {

  max-height: 12em;

  color: #777;

  font-size: 16px;

  font-weight: 400;

  line-height: 2;

  margin: 35px 0 0;

  overflow: hidden; }



.productinfo__imgslider {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-justify-content: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-align-items: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center; }

  .productinfo__imgslider-animated {

    -webkit-transition: -webkit-transform .5s;

    transition: -webkit-transform .5s;

    -o-transition: transform .5s;

    transition: transform .5s;

    transition: transform .5s, -webkit-transform .5s; }



.productinfo__imgslider-box {

  width: calc(60% - 30px);

  overflow: hidden;

  opacity: 0;

  -webkit-transform: translateX(100%);

  -ms-transform: translateX(100%);

  transform: translateX(100%);

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }



.productinfo__imgslide {

  display: block;

  width: 270px;

  opacity: .4;

  -webkit-filter: grayscale(1);

  filter: grayscale(1); }

  .productinfo__imgslide--active {

    opacity: 1;

    -webkit-filter: grayscale(0);

    filter: grayscale(0); }



.indexlocation {

  height: auto; }

  .indexlocation > .container {

    height: 100%; }

  .indexlocation__box {

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end; }

  .indexlocation__content {

    width: 100%;

    opacity: 0;

    -webkit-transform: translateY(100%);

    -ms-transform: translateY(100%);

    transform: translateY(100%);

    -webkit-transition: opacity .5s, -webkit-transform .5s;

    transition: opacity .5s, -webkit-transform .5s;

    -o-transition: transform .5s, opacity .5s;

    transition: transform .5s, opacity .5s;

    transition: transform .5s, opacity .5s, -webkit-transform .5s; }

    .indexlocation__content img {

      width: 100%;

      max-width: none; }

  .indexlocation__title {

    color: #fff;

    font-size: 36px;

    line-height: 1.33; }



.indexservice {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between; }

  .indexservice__box {

    width: calc(50% - 15px); }

    .indexservice__box:first-child {

      opacity: 0;

      -webkit-transform: translateX(-100%);

      -ms-transform: translateX(-100%);

      transform: translateX(-100%);

      -webkit-transition: opacity .5s, -webkit-transform .5s;

      transition: opacity .5s, -webkit-transform .5s;

      -o-transition: transform .5s, opacity .5s;

      transition: transform .5s, opacity .5s;

      transition: transform .5s, opacity .5s, -webkit-transform .5s; }

      .indexservice__box:first-child > a {

        height: 335px; }

        .indexservice__box:first-child > a:first-child {

          height: 800px;

          background-position: center; }

          .indexservice__box:first-child > a:first-child .indexservice__textbox {

            width: 100%;

            left: 0;

            bottom: 35px;

            -webkit-box-align: center;

            -ms-flex-align: center;

            align-items: center; }

            .indexservice__box:first-child > a:first-child .indexservice__textbox .indexservice__title {

              text-align: center; }

        .indexservice__box:first-child > a:nth-child(2) {

          background-position: right center; }

          .indexservice__box:first-child > a:nth-child(2) .indexservice__textbox {

            width: 100%;

            left: 0;

            bottom: 35px;

            -webkit-box-align: end;

            -ms-flex-align: end;

            align-items: flex-end; }

            .indexservice__box:first-child > a:nth-child(2) .indexservice__textbox .indexservice__title {

              text-align: right; }

        .indexservice__box:first-child > a:nth-child(3) {

          background-position: left center; }

          .indexservice__box:first-child > a:nth-child(3) .indexservice__textbox {

            width: 100%;

            left: 0;

            bottom: 35px;

            -webkit-box-align: start;

            -ms-flex-align: start;

            align-items: flex-start; }

    .indexservice__box:nth-child(2) {

      opacity: 0;

      -webkit-transform: translateX(100%);

      -ms-transform: translateX(100%);

      transform: translateX(100%);

      -webkit-transition-delay: .5s;

      -o-transition-delay: .5s;

      transition-delay: .5s;

      -webkit-transition: opacity .5s, -webkit-transform .5s;

      transition: opacity .5s, -webkit-transform .5s;

      -o-transition: transform .5s, opacity .5s;

      transition: transform .5s, opacity .5s;

      transition: transform .5s, opacity .5s, -webkit-transform .5s; }

      .indexservice__box:nth-child(2) > a {

        height: 360px; }

        .indexservice__box:nth-child(2) > a:first-child {

          background-position: right center; }

          .indexservice__box:nth-child(2) > a:first-child .indexservice__textbox {

            right: 0;

            top: 40px;

            -webkit-box-align: end;

            -ms-flex-align: end;

            align-items: flex-end; }

            .indexservice__box:nth-child(2) > a:first-child .indexservice__textbox .indexservice__title {

              text-align: right; }

        .indexservice__box:nth-child(2) > a:nth-child(2) {

          background-position: left center; }

          .indexservice__box:nth-child(2) > a:nth-child(2) .indexservice__textbox {

            width: 100%;

            left: 0;

            top: 35px;

            -webkit-box-align: start;

            -ms-flex-align: start;

            align-items: flex-start; }

        .indexservice__box:nth-child(2) > a:nth-child(3) {

          background-position: right center; }

          .indexservice__box:nth-child(2) > a:nth-child(3) .indexservice__textbox {

            right: 0;

            top: 40px;

            -webkit-box-align: end;

            -ms-flex-align: end;

            align-items: flex-end; }

            .indexservice__box:nth-child(2) > a:nth-child(3) .indexservice__textbox .indexservice__title {

              text-align: right; }

        .indexservice__box:nth-child(2) > a:nth-child(4) {

          background-position: left center; }

          .indexservice__box:nth-child(2) > a:nth-child(4) .indexservice__textbox {

            left: 0;

            top: 35px;

            -webkit-box-align: start;

            -ms-flex-align: start;

            align-items: flex-start; }

          .indexservice__box:nth-child(2) > a:nth-child(4) .indexservice__boxtitle {

            color: #fff; }

          .indexservice__box:nth-child(2) > a:nth-child(4) .indexservice__title {

            color: #fff; }

  .indexservice__link {

    position: relative;

    display: block;

    background-repeat: no-repeat;

    -webkit-transition: -webkit-box-shadow .4s;

    transition: -webkit-box-shadow .4s;

    -o-transition: box-shadow .4s;

    transition: box-shadow .4s;

    transition: box-shadow .4s, -webkit-box-shadow .4s; }

    .indexservice__link:hover {

      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

      .indexservice__link:hover .indexservice__textbox {

        opacity: 0;

        -webkit-transform: translateY(-30px);

        -ms-transform: translateY(-30px);

        transform: translateY(-30px); }

      .indexservice__link:hover .indexservice__inner {

        opacity: 1; }

        .indexservice__link:hover .indexservice__inner h3 {

          opacity: 1;

          -webkit-transform: translateY(0);

          -ms-transform: translateY(0);

          transform: translateY(0);

          -webkit-transition: opacity .3s, -webkit-transform .3s;

          transition: opacity .3s, -webkit-transform .3s;

          -o-transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s, -webkit-transform .3s;

          -webkit-transition-delay: .3s;

          -o-transition-delay: .3s;

          transition-delay: .3s; }

        .indexservice__link:hover .indexservice__inner h4 {

          opacity: 1;

          -webkit-transform: translateY(0);

          -ms-transform: translateY(0);

          transform: translateY(0);

          -webkit-transition: opacity .3s, -webkit-transform .3s;

          transition: opacity .3s, -webkit-transform .3s;

          -o-transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s, -webkit-transform .3s; }

        .indexservice__link:hover .indexservice__inner p {

          opacity: 1;

          -webkit-transform: translateY(0);

          -ms-transform: translateY(0);

          transform: translateY(0);

          -webkit-transition: opacity .3s, padding .3s, -webkit-transform .3s;

          transition: opacity .3s, padding .3s, -webkit-transform .3s;

          -o-transition: opacity .3s, transform .3s, padding .3s;

          transition: opacity .3s, transform .3s, padding .3s;

          transition: opacity .3s, transform .3s, padding .3s, -webkit-transform .3s;

          -webkit-transition-delay: .6s, .6s, 0s;

          -o-transition-delay: .6s, .6s, 0s;

          transition-delay: .6s, .6s, 0s; }

    .indexservice__link:nth-child(n + 2) {

      margin: 30px 0 0; }

  .indexservice__inner {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 20px;

    opacity: 0;

    background-color: rgba(0, 0, 0, 0.7);

    -webkit-transition: opacity .4s;

    -o-transition: opacity .4s;

    transition: opacity .4s; }

    .indexservice__inner h3 {

      color: #fff;

      text-shadow: none;

      opacity: 0;

      -webkit-transform: translateY(-100%);

      -ms-transform: translateY(-100%);

      transform: translateY(-100%); }

    .indexservice__inner h4 {

      color: #fff;

      text-shadow: none;

      opacity: 0;

      -webkit-transform: translateY(-100%);

      -ms-transform: translateY(-100%);

      transform: translateY(-100%); }

    .indexservice__inner p {

      margin: 10px 0 0;

      opacity: 0;

      -webkit-transform: translateY(-100%);

      -ms-transform: translateY(-100%);

      transform: translateY(-100%); }

  .indexservice__mobile {

    opacity: 0;

    -webkit-transform: translateY(100%);

    -ms-transform: translateY(100%);

    transform: translateY(100%);

    -webkit-transition: opacity .5s, -webkit-transform .5s;

    transition: opacity .5s, -webkit-transform .5s;

    -o-transition: transform .5s, opacity .5s;

    transition: transform .5s, opacity .5s;

    transition: transform .5s, opacity .5s, -webkit-transform .5s; }

  .indexservice__textbox {

    position: absolute;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    padding: 0 35px;

    -webkit-transition: opacity .3s, -webkit-transform .3s;

    transition: opacity .3s, -webkit-transform .3s;

    -o-transition: opacity .3s, transform .3s;

    transition: opacity .3s, transform .3s;

    transition: opacity .3s, transform .3s, -webkit-transform .3s; }

    .indexservice__textbox .detail {

      margin-top: 14px; }

  .indexservice__subtitle {

    margin-bottom: 5px;

    color: #777;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.2;

    text-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

  .indexservice__boxtitle {

    color: #333;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;

    text-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

  .indexservice__title {

    color: #333;

    font-size: 30px;

    font-weight: 700;

    line-height: 1.5;

    text-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

  .indexservice__en .indexservice__box:first-child a:nth-child(2) .indexservice__textbox .indexservice__title {

    max-width: 12em; }

  .indexservice__en .indexservice__box:first-child a:nth-child(3) .indexservice__textbox .indexservice__title {

    max-width: 12em; }

  .indexservice__en .indexservice__box:nth-child(2) a:first-child .indexservice__textbox .indexservice__title {

    max-width: 10em; }

  .indexservice__en .indexservice__box:nth-child(2) a:nth-child(2) .indexservice__textbox .indexservice__title {

    max-width: 12em; }

  .indexservice__en .indexservice__box:nth-child(2) a:nth-child(3) .indexservice__textbox .indexservice__title {

    max-width: 8em; }

  .indexservice__en .indexservice__box:nth-child(2) a:nth-child(4) .indexservice__textbox .indexservice__title {

    max-width: 12em; }

  .indexservice__en .indexservice__title {

    font-size: 28px; }



.info__slider {

  padding-bottom: 50px; }

  .info__slider .slick-arrow {

    width: 36px;

    height: 36px;

    top: auto;

    bottom: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    -webkit-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    transform: translate(0, 0); }

    .info__slider .slick-arrow::before {

      display: none; }

  .info__slider .slick-prev {

    left: auto;

    right: 44px;

    background-image: url(../images/index/product_info_prev.png); }

  .info__slider .slick-next {

    right: 0;

    background-image: url(../images/index/product_info_next.png); }

  .info__slider .info__slide {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap; }



.info__bg {

  width: 71%;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  opacity: 0;

  -webkit-transform: translateY(-100%);

  -ms-transform: translateY(-100%);

  transform: translateY(-100%);

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }

  .info__bg::before {

    content: '';

    display: block;

    padding-top: 39.5%; }



.info__content {

  position: relative;

  width: 29%;

  padding: 30px;

  background-color: #fff;

  opacity: 0;

  -webkit-transform: translateY(100%);

  -ms-transform: translateY(100%);

  transform: translateY(100%);

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }

  .info__content .detail {

    position: absolute;

    left: 30px;

    bottom: 30px;

    margin: 0; }



.info__title {

  color: #333;

  font-size: 20px;

  font-weight: 700;

  line-height: 1.4; }



.info__text {

  color: #777;

  font-size: 16px;

  font-weight: 400;

  line-height: 2;

  max-height: 8em;

  margin: 20px 0 0;

  overflow: hidden; }



.bottom__banner-box {

  height: 300px;

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  padding: 0 40px;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat; }

  .bottom__banner-box::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    opacity: .4; }



.bottom__banner-inner {

  position: relative; }



.bottom__banner-title {

  color: #fff;

  font-size: 36px;

  line-height: 1.3333;

  opacity: 0;

  -webkit-transform: translateY(100%);

  -ms-transform: translateY(100%);

  transform: translateY(100%);

  -webkit-transition-delay: .7s;

  -o-transition-delay: .7s;

  transition-delay: .7s;

  -webkit-transition: opacity .5s, -webkit-transform .5s;

  transition: opacity .5s, -webkit-transform .5s;

  -o-transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s;

  transition: transform .5s, opacity .5s, -webkit-transform .5s; }



.home-mobile {

  width: 100%;

  padding: 40px 0; }

  @media (min-width: 576px) {

    .home-mobile {

      display: none; } }

  @media (max-width: 575px) {

    .home-mobile ~ .indexproduct, .home-mobile ~ .indexlocation, .home-mobile ~ .common__section {

      display: none; } }

  .home-mobile__block {

    width: 100%; }



@media (max-width: 1199px) {

  .info__bg {

    width: 100%; }

  .info__content {

    width: 100%;

    padding: 20px; }

    .info__content .detail {

      position: relative;

      top: 0;

      left: 0;

      margin: 5px 0 0; }

  .info__text {

    margin: 5px 0 0; } }



@media (max-width: 1199px) and (min-width: 992px) {

  .indexlocation {

    background-position: 60% center; }

  .bottom__banner-box {

    height: 240px; } }



@media (min-width: 992px) {

  .productinfo__slider-mobile {

    height: 0;

    overflow: hidden; }

  .productinfo__imgslider {

    height: auto;

    overflow: visible; }

    .productinfo__imgslider-mobile {

      height: 0;

      overflow: hidden; }

  .indexlocation__img {

    display: none; }

  .indexservice__mobile {

    display: none;

    opacity: 0;

    -webkit-transform: translateY(100%);

    -ms-transform: translateY(100%);

    transform: translateY(100%);

    -webkit-transition: opacity .5s, -webkit-transform .5s;

    transition: opacity .5s, -webkit-transform .5s;

    -o-transition: transform .5s, opacity .5s;

    transition: transform .5s, opacity .5s;

    transition: transform .5s, opacity .5s, -webkit-transform .5s; } }



@media (max-width: 991px) {

  .banner__bg-slide {

    height: 550px; }

  .slider__slide {

    height: 550px; }

    .slider__slide-img {

      height: 80px; }

  .slider__title {

    font-size: 30px; }

  .slider__subtitle {

    font-size: 15px; }

  .productinfo__slider {

    height: 0;

    overflow: hidden; }

    .productinfo__slider-mobile {

      width: 100%;

      text-align: center;

      opacity: 0;

      -webkit-transform: translateY(100%);

      -ms-transform: translateY(100%);

      transform: translateY(100%);

      -webkit-transition: opacity .5s, -webkit-transform .5s;

      transition: opacity .5s, -webkit-transform .5s;

      -o-transition: transform .5s, opacity .5s;

      transition: transform .5s, opacity .5s;

      transition: transform .5s, opacity .5s, -webkit-transform .5s; }

      .productinfo__slider-mobile .slick-arrow {

        width: 36px;

        height: 36px;

        top: auto;

        bottom: 0;

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        -webkit-transform: translate(0);

        -ms-transform: translate(0);

        transform: translate(0); }

        .productinfo__slider-mobile .slick-arrow::before {

          display: none; }

      .productinfo__slider-mobile .slick-prev {

        left: calc(50% - 41px);

        right: auto;

        background-image: url(../images/index/product_info_prev.png); }

      .productinfo__slider-mobile .slick-next {

        left: auto;

        right: calc(50% - 41px);

        background-image: url(../images/index/product_info_next.png); }

  .productinfo__title span {

    font-size: 26px; }

  .productinfo__text {

    margin: 10px 0 0; }

  .productinfo__imgslider-box {

    height: 0;

    overflow: hidden; }

  .productinfo__imgslider-mobile {

    width: 100%;

    height: auto;

    overflow: visible;

    margin: 0 0 20px; }

    .productinfo__imgslider-mobile .slick-slide {

      opacity: .4;

      -webkit-filter: grayscale(1);

      filter: grayscale(1); }

      .productinfo__imgslider-mobile .slick-slide img {

        margin: 0 auto; }

    .productinfo__imgslider-mobile .slick-current {

      opacity: 1;

      -webkit-filter: grayscale(0);

      filter: grayscale(0); }

  .productinfo__imgslider-mobile {

    width: 100vw; }

  .indexproduct {

    margin: 0 auto;

    padding: 50px 15px; }

  .indexlocation {

    height: auto; }

    .indexlocation__img {

      margin: 0 0 30px; }

    .indexlocation__content {

      width: 100%;

      text-align: center; }

    .indexlocation__title {

      font-size: 30px; }

  .indexservice {

    display: none; }

    .indexservice__textbox {

      padding: 0 15px; }

      .indexservice__textbox .detail {

        margin-top: 5px; }

    .indexservice__link-mobile {

      position: relative;

      display: block;

      width: 100%;

      background-size: cover;

      background-position: center !important;

      background-repeat: no-repeat; }

      .indexservice__link-mobile::before {

        content: "";

        display: block;

        width: 100%; }

      .indexservice__link-mobile:hover .indexservice__inner {

        opacity: 1; }

        .indexservice__link-mobile:hover .indexservice__inner h3 {

          opacity: 1;

          -webkit-transform: translateY(0);

          -ms-transform: translateY(0);

          transform: translateY(0);

          -webkit-transition: opacity .3s, -webkit-transform .3s;

          transition: opacity .3s, -webkit-transform .3s;

          -o-transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s, -webkit-transform .3s;

          -webkit-transition-delay: .3s;

          -o-transition-delay: .3s;

          transition-delay: .3s; }

        .indexservice__link-mobile:hover .indexservice__inner h4 {

          opacity: 1;

          -webkit-transform: translateY(0);

          -ms-transform: translateY(0);

          transform: translateY(0);

          -webkit-transition: opacity .3s, -webkit-transform .3s;

          transition: opacity .3s, -webkit-transform .3s;

          -o-transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s;

          transition: opacity .3s, transform .3s, -webkit-transform .3s; }

        .indexservice__link-mobile:hover .indexservice__inner p {

          opacity: 1;

          -webkit-transform: translateY(0);

          -ms-transform: translateY(0);

          transform: translateY(0);

          -webkit-transition: opacity .3s, padding .3s, -webkit-transform .3s;

          transition: opacity .3s, padding .3s, -webkit-transform .3s;

          -o-transition: opacity .3s, transform .3s, padding .3s;

          transition: opacity .3s, transform .3s, padding .3s;

          transition: opacity .3s, transform .3s, padding .3s, -webkit-transform .3s;

          -webkit-transition-delay: .6s, .6s, 0s;

          -o-transition-delay: .6s, .6s, 0s;

          transition-delay: .6s, .6s, 0s; }

      .indexservice__link-mobile:first-child::before {

        padding-bottom: 113%; }

      .indexservice__link-mobile:nth-child(n+2)::before {

        padding-bottom: 65%; }

      .indexservice__link-mobile:nth-child(n + 2) {

        margin-top: 30px; }

    .indexservice__inner .indexservice__title {

      max-width: 100% !important; }

    .indexservice__inner p {

      margin-top: 5px; }

  .bottom__banner-title {

    font-size: 26px; } }



@media (max-width: 991px) and (min-width: 768px) {

  .productinfo__imgslider-mobile {

    margin-left: calc((100vw - 720px) * -1 / 2);

    margin-right: calc((100vw - 720px) * -1 / 2); }

  .indexproduct {

    width: 750px; }

  .bottom__banner-box {

    height: 190px; } }



@media (max-width: 991px) and (min-width: 576px) {

  .indexservice__title {

    font-size: 28px; }

  .indexservice__en .indexservice__title {

    font-size: 24px; } }



@media (max-width: 767px) {

  .productinfo__imgslider-mobile {

    margin-left: -15px;

    margin-right: -15px; }

  .bottom__banner-box {

    height: auto;

    padding: 20px; } }



@media (max-width: 575px) {

  .productinfo__title span {

    display: block;

    margin-right: 0;

    margin-bottom: 5px; }

  .productinfo__title {

    font-size: 32px; }

  .indexservice__title {

    font-size: 22px; }

  .indexservice__inner h3 {

    text-align: left !important; }

  .indexservice__en .indexservice__title {

    font-size: 20px; } }



/* 首頁 end */

/* 最新消息 */

.news {

  padding: 90px 0; }

  .news__itembox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap; }

  .news__item {

    display: block;

    background-color: #fff;

    margin: 40px 30px 0 0;

    -webkit-transition: -webkit-box-shadow .4s;

    transition: -webkit-box-shadow .4s;

    -o-transition: box-shadow .4s;

    transition: box-shadow .4s;

    transition: box-shadow .4s, -webkit-box-shadow .4s; }

    .news__item:hover {

      -webkit-box-shadow: 0 0 20px #dddddd;

      box-shadow: 0 0 20px #dddddd; }

      .news__item:hover .news__item-more {

        color: #f58220;

        padding-left: 24px; }

        .news__item:hover .news__item-more::before {

          opacity: 1;

          -webkit-transform: translateX(0);

          -ms-transform: translateX(0);

          transform: translateX(0); }

    .news__item-img {

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat; }

      .news__item-img::before {

        content: '';

        display: block;

        padding-top: 240px; }

    .news__item-content {

      position: relative;

      height: calc(100% - 240px);

      text-align: center;

      padding: 35px 20px 70px 20px;

      border: 1px solid #eee;

      border-top: 0; }

    .news__item-title {

      max-height: 2.54em;

      color: #333;

      font-size: 22px;

      font-weight: 700;

      line-height: 1.27;

      margin: 17px 0 0;

      overflow: hidden; }

    .news__item-text {

      max-height: 6em;

      color: #767777;

      font-size: 14px;

      font-weight: 400;

      line-height: 2;

      margin: 10px 0 0;

      overflow: hidden; }

    .news__item-more {

      position: absolute;

      bottom: 35px;

      left: 50%;

      display: -webkit-inline-box;

      display: -ms-inline-flexbox;

      display: inline-flex;

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center;

      color: #333;

      font-size: 16px;

      line-height: 1;

      -webkit-transform: translateX(-50%);

      -ms-transform: translateX(-50%);

      transform: translateX(-50%);

      -webkit-transition: color .4s, padding .4s;

      -o-transition: color .4s, padding .4s;

      transition: color .4s, padding .4s; }

      .news__item-more::before {

        content: '';

        position: absolute;

        top: 1px;

        left: 0;

        width: 14px;

        height: 14px;

        background-image: url(../images/index/detail_icon.png);

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        opacity: 0;

        -webkit-transform: translateX(-30px);

        -ms-transform: translateX(-30px);

        transform: translateX(-30px);

        -webkit-transition: opacity .2s, -webkit-transform .4s;

        transition: opacity .2s, -webkit-transform .4s;

        -o-transition: opacity .2s, transform .4s;

        transition: opacity .2s, transform .4s;

        transition: opacity .2s, transform .4s, -webkit-transform .4s; }

  .news-category {

    width: 100%;

    margin-bottom: 30px; }

    @media (max-width: 991px) {

      .news-category {

        margin-bottom: 40px; } }

    @media (max-width: 991px) {

      .news-category--open .news-category__btn:nth-child(n + 2) {

        border-top: 1px solid #ddd; }

      .news-category--open .news-category__btn:not(.news-category__btn--active) {

        display: block; }

      .news-category--open .news-category__controller::before {

        content: "收合"; } }

    .news-category__link {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -ms-flex-wrap: wrap;

      flex-wrap: wrap;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center;

      -ms-flex-line-pack: start;

      align-content: flex-start;

      width: 100%; }

    .news-category__btn {

      display: block;

      padding: 0 25px;

      margin: 0 0 10px;

      background-color: #f7f7f7; }

      @media (max-width: 991px) {

        .news-category__btn {

          display: none;

          width: 100%;

          margin: 0; } }

      .news-category__btn:hover p {

        color: #f2811c; }

      .news-category__btn p {

        padding: 12px 0 9px;

        font-size: 16px;

        font-weight: 400;

        line-height: 1.4;

        color: #555;

        text-align: center;

        -webkit-transition-property: color;

        -o-transition-property: color;

        transition-property: color;

        -webkit-transition-duration: 0.3s;

        -o-transition-duration: 0.3s;

        transition-duration: 0.3s;

        -webkit-transition-timing-function: linear;

        -o-transition-timing-function: linear;

        transition-timing-function: linear;

        -webkit-transition-delay: 0s;

        -o-transition-delay: 0s;

        transition-delay: 0s; }

        @media (max-width: 991px) {

          .news-category__btn p {

            padding: 12px 0; } }

      @media (min-width: 992px) {

        .news-category__btn--active p {

          color: #f2811c;

          border-bottom: 2px solid #f2811c; }

          .news-category__btn--active p:hover {

            color: #f2811c; } }

      @media (max-width: 991px) {

        .news-category__btn--active {

          display: block;

          background-color: #f2811c; }

          .news-category__btn--active p {

            color: #fff; }

            .news-category__btn--active p:hover {

              color: #fff; } }

    .news-category__controller {

      display: block;

      width: 100%;

      font-size: 14px;

      font-weight: 400;

      line-height: 36px;

      text-align: center;

      background-color: #fff;

      border: 1px solid #222; }

      .news-category__controller::before {

        content: "展開分類"; }

      @media (min-width: 992px) {

        .news-category__controller {

          display: none; } }



@media (min-width: 1200px) {

  .news__item {

    width: calc((100% - 60px) / 3); }

    .news__item:nth-child(3n) {

      margin-right: 0; }

    .news__item:nth-child(-n + 3) {

      margin-top: 0; } }



@media (max-width: 1199px) and (min-width: 992px) {

  .news__item-img::before {

    padding-top: 297px; }

  .news__item-content {

    height: calc(100% - 297px); } }



@media (max-width: 1199px) and (min-width: 768px) {

  .news__item {

    width: calc((100% - 30px) / 2); }

    .news__item:nth-child(2n) {

      margin-right: 0; }

    .news__item:nth-child(-n + 2) {

      margin-top: 0; }

    .news__item-img::before {

      padding-top: 230px; }

    .news__item-content {

      height: calc(100% - 230px); } }



@media (max-width: 767px) {

  .news__item {

    width: 100%;

    margin-right: 0; }

    .news__item:first-child {

      margin-top: 0; }

    .news__item-img::before {

      padding-top: 66.67%; }

    .news__item-content {

      height: auto;

      padding: 25px 20px 65px 20px; }

    .news__item-more {

      bottom: 25px; } }



/* 最新消息 end */

/* 最新消息內頁 */

.blog {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between; }

  .blog__main {

    width: calc(100% - 330px);

    padding: 40px 30px;

    background-color: #f5f5f5; }

    .blog__main-title {

      color: #202121;

      font-size: 30px;

      font-weight: 700;

      line-height: 1.2;

      margin: 0 0 17px; }

      .blog__main-title + .date {

        margin-bottom: 27px; }

  .blog__info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding-top: 35px;

    margin-top: 35px;

    border-top: 1px solid #ddd; }



.share {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center; }

  .share::before {

    content: attr(data-text);

    color: #aaa;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    margin-right: 15px; }

  .share__btn {

    display: block;

    width: 40px;

    margin-left: 10px;

    -webkit-transition: opacity .4s;

    -o-transition: opacity .4s;

    transition: opacity .4s; }

    .share__btn:hover {

      opacity: .8; }

    .share__btn:first-child {

      margin: 0; }



.sidebar {

  width: 300px;

  border: 1px solid #ddd; }

  .sidebar__title {

    color: #333;

    font-size: 18px;

    font-weight: 400;

    line-height: 44px;

    background-color: #ddd;

    padding: 0 14px; }

  .sidebar__list {

    padding: 25px; }

    .sidebar__list-link {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -ms-flex-wrap: wrap;

      flex-wrap: wrap;

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center;

      margin: 25px 0 0; }

      .sidebar__list-link:hover .sidebar__list-img {

        border: 1px solid #f2811c; }

      .sidebar__list-link:first-child {

        margin: 0; }

    .sidebar__list-img {

      width: 50px;

      height: 50px;

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat; }

    .sidebar__list-content {

      width: calc(100% - 50px);

      padding-left: 10px; }

    .sidebar__list-title {

      max-height: 1.28em;

      color: #444;

      font-size: 18px;

      font-weight: 700;

      line-height: 1.28;

      -o-text-overflow: ellipsis;

      text-overflow: ellipsis;

      white-space: nowrap;

      overflow: hidden; }

    .sidebar__list-date {

      color: #999;

      font-size: 13px;

      font-weight: 400;

      line-height: 1;

      margin: 8px 0 0; }



@media (max-width: 991px) {

  .blog__main {

    width: 100%; }

  .sidebar {

    width: 100%;

    margin: 20px 0 0; } }



@media (max-width: 767px) {

  .blog__main {

    padding: 25px 15px; }

    .blog__main-title {

      font-size: 26px; } }



@media (max-width: 575px) {

  .blog__info {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    flex-direction: column-reverse;

    padding-top: 20px;

    margin-top: 20px; }

  .share {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0 0 20px; }

    .share::before {

      width: 100%;

      text-align: center;

      margin: 0 0 10px; } }



/* 最新消息內頁 end */

/* 關於我們 */

.about {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap; }

  .about__img {

    width: 555px;

    background-size: cover;

    background-position: right center;

    background-repeat: no-repeat; }

    .about__img::before {

      content: '';

      display: block;

      padding-top: 71.35%; }

  .about__content {

    width: calc(100% - 555px);

    padding-right: 30px; }

  .about__title {

    color: #333;

    font-size: 36px;

    font-weight: 700;

    line-height: 1;

    margin: 0 0 22px; }

    .about__title span {

      color: #f58220;

      font-weight: 400; }

  .about__subtitle {

    color: #333;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    margin: 0 0 35px; }

  .about__text {

    color: #777;

    font-size: 15px;

    font-weight: 400;

    line-height: 2; }



.history {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  margin: 90px 0 0; }

  .history__title {

    width: 100%;

    color: #444;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    padding-bottom: 20px;

    margin-bottom: 30px;

    border-bottom: 1px solid #ddd; }

  .history__item {

    width: calc((100% - 60px) / 3);

    padding-bottom: 15px;

    margin-top: 30px;

    border-bottom: 1px solid #eee; }

    .history__item:nth-of-type(-n + 3) {

      margin-top: 0; }

    .history__item-title {

      color: #777;

      font-size: 18px;

      font-weight: 400;

      line-height: 1.55;

      margin-top: 15px; }

    .history__item img {

      width: 100%; }

  .history__time {

    color: #f58220;

    font-size: 16px;

    font-weight: 400;

    line-height: 1;

    margin: 7px 0 0; }



@media (max-width: 1199px) {

  .about {

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    text-align: center; }

    .about__img {

      display: none; }

    .about__content {

      width: 100%;

      padding: 0 0 20px; }

    .about__title {

      font-size: 28px;

      margin: 0 0 15px; }

    .about__subtitle {

      font-size: 20px;

      margin: 0 0 20px; } }



@media (max-width: 991px) {

  .history {

    margin: 30px 0 0; }

    .history__title {

      font-size: 20px;

      padding-bottom: 20px;

      margin-bottom: 20px; }

    .history__item {

      margin-top: 20px;

      padding-bottom: 10px; }

      .history__item:nth-of-type(3) {

        margin-top: 20px; }

      .history__item-title {

        margin-top: 10px; }

    .history__time {

      margin: 2px 0 0; } }



@media (max-width: 991px) and (min-width: 576px) {

  .history__item {

    width: calc(50% - 15px); } }



@media (max-width: 575px) {

  .history__item {

    width: 100%; }

    .history__item:nth-of-type(2) {

      margin-top: 20px; } }



/* 關於我們 end */

/* 產品展示 */

.product {

  width: calc(100% - 300px); }

  .product__wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between; }

    .product__wrap .sidebar {

      width: 270px; }

  .product__type {

    padding: 25px; }

    .product__type-btn {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -ms-flex-wrap: wrap;

      flex-wrap: wrap;

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center;

      -webkit-box-pack: justify;

      -ms-flex-pack: justify;

      justify-content: space-between;

      color: #777;

      font-size: 16px;

      line-height: 1.2;

      margin: 25px 0 0; }

      .product__type-btn::after {

        content: '';

        display: block;

        width: 5px;

        height: 8px;

        background-image: url(../images/product/type_arrow.png);

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat; }

      .product__type-btn:hover, .product__type-btn--active {

        color: #f2811c; }

        .product__type-btn:hover::after, .product__type-btn--active::after {

          background-image: url(../images/product/type_arrow-hover.png); }

      .product__type-btn:first-child {

        margin: 0; }

  .product__maintitle {

    color: #333;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.2;

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid #ddd; }

  .product__itembox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap; }

  .product__item {

    display: block;

    text-align: center;

    margin: 40px 40px 0 0; }

    .product__item:hover .product__item-btn {

      color: #fff;

      background-color: #f2811c;

      border-color: #f2811c; }

    .product__item img {

      padding: 0 30px; }

    .product__item-title {

      color: #545454;

      font-size: 16px;

      font-weight: 400;

      line-height: 1.2;

      margin: 22px 0 0; }

    .product__item-num {

      color: #f2811c;

      font-size: 28px;

      font-weight: 700;

      line-height: 1;

      margin: 16px 0 0; }

    .product__item-text {

      max-height: 3.42em;

      color: #888;

      font-size: 14px;

      font-weight: 400;

      line-height: 1.71;

      margin: 12px 0 0;

      overflow: hidden; }

    .product__item-btn {

      width: 120px;

      color: #aaa;

      font-size: 16px;

      font-weight: 400;

      line-height: 38px;

      text-align: center;

      border: 1px solid #aaa;

      border-radius: 3px;

      margin: 20px auto 0;

      -webkit-transition: color .4s, background-color .4s, border-color .4s;

      -o-transition: color .4s, background-color .4s, border-color .4s;

      transition: color .4s, background-color .4s, border-color .4s; }



@media (min-width: 1200px) {

  .product__item {

    width: calc(33.3333% - 26.6666px); }

    .product__item:nth-child(-n + 3) {

      margin-top: 0; }

    .product__item:nth-child(3n) {

      margin-right: 0; } }



@media (max-width: 1199px) and (min-width: 768px) {

  .product__item {

    width: calc((100% - 40px) / 2); }

    .product__item:nth-child(-n + 2) {

      margin-top: 0; }

    .product__item:nth-child(2n) {

      margin-right: 0; } }



@media (max-width: 991px) {

  .product {

    width: 100%; }

    .product__wrap {

      -webkit-box-orient: vertical;

      -webkit-box-direction: reverse;

      -ms-flex-direction: column-reverse;

      flex-direction: column-reverse; }

      .product__wrap .sidebar {

        width: 100%; }

    .product__maintitle {

      font-size: 24px;

      padding-bottom: 15px;

      margin-bottom: 15px; }

    .product__item-num {

      font-size: 20px; } }



@media (max-width: 767px) {

  .product__item {

    width: 100%;

    margin-right: 0; }

    .product__item:first-child {

      margin-top: 0; } }



/* 產品展示 end */

/* 產品展示內頁 */

.product__infobox {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start; }



.product__info {

  width: calc(100% - 350px);

  padding-left: 40px; }

  .product__info-title {

    color: #555;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.2; }

  .product__info-subtitle {

    color: #f2811c;

    font-size: 42px;

    font-weight: bold;

    line-height: 1;

    margin: 10px 0 0; }

  .product__info-box {

    padding: 30px 0;

    margin: 30px 0;

    border-top: 1px solid #ddd;

    border-bottom: 1px solid #ddd; }

    .product__info-box h6 {

      margin-bottom: 10px;

      font-size: 20px;

      font-weight: 700;

      line-height: 1.2;

      color: #333; }

    .product__info-box p {

      font-size: 16px;

      font-weight: 400;

      line-height: 1.7;

      color: #777; }



.product__detail {

  margin: 60px 0 0; }



.product__tabs {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-bottom: 40px;

  border-bottom: 1px solid #e6e6e6; }



.product__tab {

  display: block;

  width: 120px;

  color: #999;

  line-height: 40px;

  text-align: center;

  background-color: #ddd;

  margin-left: 1px;

  -webkit-transition: color .4s, background-color .4s;

  -o-transition: color .4s, background-color .4s;

  transition: color .4s, background-color .4s; }

  .product__tab:hover, .product__tab--active {

    color: #fff;

    background-color: #f2811c; }

  .product__tab:first-child {

    margin: 0; }



.product__contents + .return {

  margin: 40px auto 0; }



.product-mobile {

  width: 100%;

  margin-top: 30px; }

  @media (min-width: 576px) {

    .product-mobile {

      display: none; } }

  .product-mobile__block {

    width: 100%; }

    .product-mobile__block:nth-child(n + 2) {

      margin-top: 30px; }

  .product-mobile__title {

    width: 100%;

    padding-bottom: 15px;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.2;

    color: #333;

    border-bottom: 1px solid #e6e6e6; }



a.gallery__mainbox-img {

  position: relative;

  display: block; }

  a.gallery__mainbox-img::before {

    content: '';

    position: absolute;

    right: 20px;

    bottom: 20px;

    width: 35px;

    height: 35px;

    background-image: url(../images/product/detail__play.png);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat; }

  a.gallery__mainbox-img::after {

    content: attr(data-content);

    position: absolute;

    top: 0;

    left: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-justify-content: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-align-content: center;

    -ms-flex-line-pack: center;

    align-content: center;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    width: 100%;

    height: 100%;

    font-size: 16px;

    font-weight: 400;

    color: #fff;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;

    -webkit-transition: opacity .3s;

    -moz-transition: opacity .3s;

    -ms-transition: opacity .3s;

    -o-transition: opacity .3s;

    transition: opacity .3s; }

  a.gallery__mainbox-img:hover::after {

    opacity: 1; }



.gallery {

  width: 350px; }

  .gallery__mainbox-img {

    width: 100%;

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat; }

    .gallery__mainbox-img::before {

      content: "";

      display: block;

      width: 100%;

      padding-bottom: 120%; }

    .gallery__mainbox-img:nth-child(n + 2) {

      display: none; }

  .gallery__thumb {

    display: block;

    width: calc((100% - 30px) / 4);

    margin-left: 10px;

    border: 1px solid transparent;

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat; }

    .gallery__thumb::before {

      content: '';

      display: block;

      padding-top: 100%; }

    .gallery__thumb:first-child {

      margin: 0; }

    .gallery__thumb--active {

      border: 1px solid #ddd; }

    .gallery__thumb-box {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -ms-flex-wrap: wrap;

      flex-wrap: wrap;

      margin: 10px 0 0; }



.other {

  margin: 60px 0 0; }

  .other__title {

    color: #333;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.2;

    padding-bottom: 25px;

    margin-bottom: 40px;

    border-bottom: 1px solid #e6e6e6; }

  .other .product__item {

    margin: 30px 30px 0 0; }



.download {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap; }

  .download__item {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    color: #333;

    padding: 40px 30px;

    margin: 30px 30px 0 0;

    background-color: #fff;

    border: 1px solid #eee;

    -webkit-transition: color .4s, -webkit-box-shadow .4s;

    transition: color .4s, -webkit-box-shadow .4s;

    -o-transition: box-shadow .4s, color .4s;

    transition: box-shadow .4s, color .4s;

    transition: box-shadow .4s, color .4s, -webkit-box-shadow .4s; }

    .download__item .download__img-hover {

      display: none; }

    .download__item:hover {

      color: #f2811c;

      -webkit-box-shadow: 0 0 10px #ddd;

      box-shadow: 0 0 10px #ddd; }

      .download__item:hover .download__img-normal {

        display: none; }

      .download__item:hover .download__img-hover {

        display: block; }

      .download__item:hover .download__btn {

        background-color: #f2811c; }

  .download__img {

    width: 40px; }

  .download__title {

    width: calc(100% - 70px);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.55;

    padding: 0 10px;

    word-break: break-all; }

  .download__btn {

    width: 30px;

    height: 30px;

    background-color: #ccc;

    border-radius: 50%;

    background-size: 14px 15px;

    background-position: center;

    background-repeat: no-repeat;

    -webkit-transition: background-color .4s;

    -o-transition: background-color .4s;

    transition: background-color .4s; }



@media (min-width: 1200px) {

  .other .product__item {

    width: calc((100% - 90px) / 4); }

    .other .product__item:nth-child(-n + 4) {

      margin-top: 0; }

    .other .product__item:nth-child(4n) {

      margin-right: 0; } }



@media (max-width: 1199px) and (min-width: 768px) {

  .other .product__item {

    width: calc((100% - 30px) / 2); }

    .other .product__item:nth-child(-n + 2) {

      margin-top: 0; }

    .other .product__item:nth-child(2n) {

      margin-right: 0; } }



@media (min-width: 992px) {

  .download__item {

    width: calc((100% - 60px) / 3); }

    .download__item:nth-child(3n) {

      margin-right: 0; }

    .download__item:nth-child(-n + 3) {

      margin-top: 0; } }



@media (max-width: 991px) {

  .gallery {

    width: 100%; }

    .gallery__mainbox {

      text-align: center; }

  .product__info {

    width: 100%;

    padding: 20px 0 0; }

    .product__info-title {

      text-align: center; }

    .product__info-subtitle {

      font-size: 30px;

      text-align: center;

      margin: 10px 0 0; }

    .product__info-box {

      padding: 15px 0;

      margin: 15px 0; }

      .product__info-box + .share {

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center; }

  .product__detail {

    margin: 30px 0 0; }

  .product__contents + .return {

    margin: 15px auto 0; }

  .product__tabs {

    margin-bottom: 15px; }

  .other {

    margin: 30px 0 0; }

    .other__title {

      padding-bottom: 15px;

      margin-bottom: 20px; } }



@media (max-width: 991px) and (min-width: 576px) {

  .download__item {

    width: calc((100% - 30px) / 2); }

    .download__item:nth-child(2n) {

      margin-right: 0; }

    .download__item:nth-child(-n + 2) {

      margin-top: 0; } }



@media (max-width: 767px) {

  .other .product__item {

    width: 100%;

    margin-right: 0; }

    .other .product__item:first-child {

      margin-top: 0; } }



@media (min-width: 576px) {

  .product__content-mobile {

    display: none; } }



@media (max-width: 575px) {

  .other {

    display: none; }

  .product__detail {

    display: none; }

  .product__content-pc {

    display: none; }

  .product__tab {

    width: 96px; }

  .download__item {

    width: 100%;

    padding: 20px 15px;

    margin: 20px 0 0 0; }

    .download__item:first-child {

      margin-top: 0; } }



/* 產品展示內頁 end */

/* 聯絡我們 */

.form {

  padding: 40px 30px;

  background-color: #f5f4f4; }

  .form__item:nth-child(n + 2) {

    margin: 40px 0 0; }

  .form__title {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    color: #323333;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    margin: 0 0 30px; }

    .form__title span {

      color: #555;

      font-size: 14px;

      font-weight: 400; }

  .form__subtitle {

    color: #333;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;

    margin: 0 0 15px; }

  .form__block {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between; }

    .form__block:nth-child(n + 2) {

      margin: 25px 0 0; }

  .form__half {

    width: calc(50% - 15px); }

  .form__label {

    display: inline-block;

    color: #555;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    margin: 0 0 10px; }

  .form__input {

    width: 100%;

    height: 40px;

    font-family: 'Lato', '微軟正黑體';

    color: #555;

    font-size: 16px;

    font-weight: 400;

    background-color: #fff;

    border: 1px solid #dcdcdc;

    padding: 0 13px; }

    .form__input::-webkit-input-placeholder {

      color: #999; }

    .form__input:-ms-input-placeholder {

      color: #999; }

    .form__input::-ms-input-placeholder {

      color: #999; }

    .form__input::placeholder {

      color: #999; }

  .form__box:nth-of-type(n + 2) {

    margin: 25px 0 0; }

  .form__select {

    width: 100%;

    height: 40px;

    font-family: 'Lato', '微軟正黑體';

    color: #555;

    font-size: 16px;

    font-weight: 400;

    background-color: #fff;

    border: 1px solid #dcdcdc;

    padding: 0 13px; }

  .form__textarea {

    width: 100%;

    height: 200px;

    font-family: 'Lato', '微軟正黑體';

    color: #555;

    font-size: 16px;

    background-color: #fff;

    border: 1px solid #dcdcdc;

    padding: 13px;

    resize: none; }

  .form .common__btn {

    margin: 40px 0 0; }



.contact__btn-disabled {

  cursor: default;

  background-color: #555; }

  .contact__btn-disabled:hover {

    background-color: #555; }



.company {

  margin-top: 90px; }

  .company__tabs {

    font-size: 0;

    text-align: center;

    overflow: auto;

    white-space: nowrap;

    padding-bottom: 15px; }

    .company__tabs::-webkit-scrollbar-track {

      width: 8px;

      height: 8px;

      background-color: #F5F5F5; }

    .company__tabs::-webkit-scrollbar-thumb {

      background-color: #555; }

    .company__tabs::-webkit-scrollbar {

      height: 3px;

      background-color: #F5F5F5; }

  .company__tab {

    position: relative;

    display: inline-block;

    color: #aaa;

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

    margin-left: 40px;

    -webkit-transition: color .4s;

    -o-transition: color .4s;

    transition: color .4s; }

    .company__tab:hover {

      color: #323333; }

    .company__tab:first-child {

      margin: 0; }

    .company__tab--active {

      color: #323333; }

      .company__tab--active::after {

        content: '';

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        width: 100%;

        height: 2px;

        background-color: #f58220; }

  .company__itembox {

    margin-top: 50px; }

  .company__item {

    height: 0;

    overflow: hidden;

    opacity: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-transition: opacity .4s;

    -o-transition: opacity .4s;

    transition: opacity .4s; }

    .company__item--open {

      height: auto;

      overflow: visible;

      opacity: 1; }

  .company__box {

    text-align: center;

    padding: 30px 20px;

    border: 1px solid #ddd; }

    .company__box img {

      padding-bottom: 30px; }

  .company__content {

    text-align: left;

    padding-top: 20px;

    border-top: 1px solid #ddd; }

  .company__title {

    color: #333;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.2;

    margin: 0 0 20px; }

  .company__text {

    color: #555;

    font-size: 14px;

    line-height: 1.2;

    margin: 0 0 10px; }

    .company__text:last-child {

      margin: 0; }

    .company__text a {

      color: #f58220;

      word-break: break-all; }



@media (min-width: 992px) {

  .company__box {

    width: calc((100% - 90px) / 4); }

    .company__box:nth-child(n + 2) {

      margin-left: 30px; } }



@media (max-width: 991px) {

  .form {

    padding: 25px 20px; }

    .form__item:nth-child(n + 2) {

      margin: 30px 0 0; }

    .form__title {

      font-size: 24px;

      margin: 0 0 15px; }

    .form__block:nth-child(n + 2) {

      margin: 15px 0 0; }

    .form__box:nth-child(n + 2) {

      margin: 15px 0 0; }

    .form__half {

      width: 100%;

      margin: 15px 0 0; }

      .form__half:first-of-type {

        margin: 0; }

  .company__itembox {

    margin-top: 20px; } }



@media (max-width: 991px) and (min-width: 576px) {

  .company__box {

    width: calc((100% - 30px) / 2); }

    .company__box:nth-child(even) {

      margin-left: 30px; }

    .company__box:nth-child(n + 3) {

      margin-top: 30px; } }



@media (max-width: 575px) {

  .company__box {

    width: 100%;

    padding: 20px; }

    .company__box:nth-child(n + 2) {

      margin-top: 30px; } }



/* 聯絡我們 end */

/* 編輯器 */

.cke_editable h1, .cke_editable h2, .cke_editable h3, .cke_editable h4, .cke_editable h5, .cke_editable h6 {

  font-weight: 700;

  line-height: 1.4;

  margin: 0;

  color: #333; }



.cke_editable h1 {

  font-size: 48px; }



.cke_editable h2 {

  font-size: 40px; }



.cke_editable h3 {

  font-size: 32px; }



.cke_editable h4 {

  font-size: 28px; }



.cke_editable h5 {

  font-size: 24px; }



.cke_editable h6 {

  font-size: 20px; }



.cke_editable p {

  font-size: 16px;

  font-weight: 400;

  color: #777;

  line-height: 1.7;

  margin: 0; }



.cke_editable a {

  font-size: 16px;

  font-weight: 400;

  color: #f2811c;

  line-height: 1.7;

  text-decoration: underline;

  -webkit-transition: opacity .3s;

  -o-transition: opacity .3s;

  transition: opacity .3s; }

  .cke_editable a:hover {

    opacity: .7; }



.cke_editable ol {

  font-size: 15px;

  font-weight: 400;

  color: #777;

  line-height: 1.7;

  padding-left: 30px;

  margin: 0;

  list-style-type: decimal; }



.cke_editable ul {

  font-size: 15px;

  font-weight: 400;

  color: #777;

  line-height: 1.7;

  padding-left: 30px;

  margin: 0;

  list-style-type: disc; }



.cke_editable img {

  max-width: 100%;

  height: auto !important; }



.cke_editable table {

  font-size: 16px;

  font-weight: 400;

  border-collapse: collapse;

  max-width: 100%; }



.cke_editable th, .cke_editable td {

  padding: 10px 5px;

  white-space: normal !important;

  font-size: 16px;

  font-weight: 400;

  color: #777;

  line-height: 1.7;

  border: 1px solid #ddd; }



.cke_editable blockquote {

  padding: 5px 20px;

  margin: 10px 0px;

  border-style: solid;

  border-color: #ccc;

  border-width: 0 0 0 5px; }



.cke_editable strong {

  font-weight: bold; }



.cke_editable .iframe__youku {

  position: relative;

  width: 100%; }

  .cke_editable .iframe__youku::before {

    content: "";

    display: block;

    width: 100%;

    padding-bottom: 56.26%; }



.cke_editable iframe[name=youku] {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%; }



.cke_editable__table--scroll {

  width: 100%;

  overflow: auto; }

  .cke_editable__table--scroll::-webkit-scrollbar-track {

    background-color: #F5F5F5; }

  .cke_editable__table--scroll::-webkit-scrollbar {

    width: 8px;

    height: 8px;

    background-color: #F5F5F5; }

  .cke_editable__table--scroll::-webkit-scrollbar-thumb {

    background-color: #555; }



.responsive-embed-wrapper iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%; }



/* 編輯器 end */