@charset "utf-8";

/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2016 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Jia & Ting $
 * $Date: 2017 Jun. $
*/

/* Font Definition */
@import url('https://fonts.googleapis.com/css?family=Heebo:400,700,900');

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.eot');
  src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular.woff2') format('woff2'), url('../fonts/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype'), url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.eot');
  src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold.woff2') format('woff2'), url('../fonts/Roboto-Bold.woff') format('woff'), url('../fonts/Roboto-Bold.ttf') format('truetype'), url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Oleo Script';
  src: url('../fonts/OleoScript-Regular.eot');
  src: url('../fonts/OleoScript-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/OleoScript-Regular.woff2') format('woff2'), url('../fonts/OleoScript-Regular.woff') format('woff'), url('../fonts/OleoScript-Regular.ttf') format('truetype'), url('../fonts/OleoScript-Regular.svg#OleoScript-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Oleo Script';
  src: url('../fonts/OleoScript-Bold.eot');
  src: url('../fonts/OleoScript-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/OleoScript-Bold.woff2') format('woff2'), url('../fonts/OleoScript-Bold.woff') format('woff'), url('../fonts/OleoScript-Bold.ttf') format('truetype'), url('../fonts/OleoScript-Bold.svg#OleoScript-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Didact Gothic';
  src: url('../fonts/DidactGothic.woff2') format('woff2'), url('../fonts/DidactGothic.woff') format('woff'), url('../fonts/DidactGothic.ttf') format('truetype'), url('../fonts/DidactGothic.svg#DidactGothic') format('svg');
  font-weight: 400;
  font-style: normal;
}

/* Global Style */
html {
  font-size: 16px;
}

body {
  line-height: 1.625;
  font-size: 1rem;
  font-family: 'Roboto', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
}

img {
  border: 0;
  vertical-align: bottom;
}

a, a:visited, a:hover, a:focus, a:active {
  text-decoration: none;
}

:focus, :active {
  outline: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

p {
  line-height: inherit;
}

label {
  font-weight: inherit;
}

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  *font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

textarea {
  resize: vertical;
}

ol.reset, ul.reset, li.reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

section, article, aside, footer, header, nav, main {
  display: block;
}

/* Font Style */
.oleo {
  font-family: 'Oleo Script', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
}

.didact {
  font-family: 'Didact Gothic', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
}

.heebo {
  font-family: 'Heebo', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
}

.bold {
  font-weight: 700;
}

.black {
  font-weight: 900;
}

/* Container Style */
@media (min-width:1366px) {
  .container-1230 {
    width: 1230px;
  }

}

.container-1520 {
  max-width: 1520px;
  width: auto;
}

/* Header */
.header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 120px;  /*border-bottom: 2px solid #f39801;*/
  background: #0035ff;
  padding: 15px 15px 10px;
  top: -100px;
  left: 0;
  opacity: 0;
  transition: top .5s, opacity .5s, transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: top .5s, opacity .5s, transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-transition: top .5s, opacity .5s, transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.header.view {
  top: 0;
  opacity: 1;
}

.header.scroll {
  transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

.skiptranslate:not([style^="display"]) ~ .header {
  top: -60px;
}

.skiptranslate:not([style^="display"]) ~ .header.view {
  top: 40px;
}

.header .logo {
  display: inline-block;
  float: left;
  width: 180px;
  height: 100px;
  margin: -5px 0 0 -15px;
}

.header .logo a {
  display: block;
  position: relative;
  height: 100px;  /*background: url('../images/header_logo_txt.png') no-repeat;
      background-size: cover;*/
  font-size: 0;
}

.header .logo a img {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.header .logo a i {
  display: block;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}

.header .logo a i:nth-child(1) {
  width: 54px;
  height: 12px;
  background-image: url('../images/header_logo_1.png');
  top: 20px;
  left: 31px;
  animation: logo-1 2s linear infinite;
  -moz-animation: logo-1 2s linear infinite;
  -webkit-animation: logo-1 2s linear infinite;
}

.header .logo a i:nth-child(2) {
  width: 79px;
  height: 16px;
  background-image: url('../images/header_logo_2.png');
  top: 14px;
  left: 21px;
  animation: logo-2 2s linear infinite;
  -moz-animation: logo-2 2s linear infinite;
  -webkit-animation: logo-2 2s linear infinite;
}

.header .logo a i:nth-child(3) {
  width: 103px;
  height: 22px;
  background-image: url('../images/header_logo_3.png');
  top: 7px;
  left: 12px;
  animation: logo-3 2s linear infinite;
  -moz-animation: logo-3 2s linear infinite;
  -webkit-animation: logo-3 2s linear infinite;
}

@keyframes logo-1 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes logo-1 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes logo-1 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@keyframes logo-2 {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes logo-2 {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes logo-2 {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@keyframes logo-3 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes logo-3 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes logo-3 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

.header .nav-switch {
  display: none;
}

.header .options {
  float: right;
  position: relative;
  font-size: 0;
  margin-top: -5px;
}

.header .options:before {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 16px;
  background: #fff;
  top: 12px;
  right: 46px;
}

.header .options .lang {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.header .options .lang .current-lang {
  position: relative;
  line-height: 40px;
  font-size: 0.9375rem;
  color: #fff;
  padding: 0 10px 0 34px;
  cursor: pointer;
}

.header .options .lang .current-lang:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  background: url('../images/header_opt.png') no-repeat;
  background-size: 44px 22px;
  top: 9px;
  left: 6px;
}

.header .options .lang ul {
  display: none;
  position: absolute;
  min-width: 100%;
  background: rgba(0, 0, 0, .5);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.header .options .lang:hover ul {
  display: inline-block;
}

.header .options .lang ul:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 4px 6px 4px;
  border-color: transparent transparent rgba(0, 0, 0, .5) transparent;
  top: -6px;
  left: 50%;
  margin-left: -4px;
}

.header .options .lang ul li a {
  display: block;
  line-height: 26px;
  font-size: 0.9375rem;
  color: #fff;
  padding: 3px 10px;
  text-align: center;
  white-space: nowrap;
}

.header .options .lang ul li a:hover {
  background: rgba(0, 0, 0, .25);
}

.header .options .btn-gotoiq {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  vertical-align: top;
}

.header .options .btn-gotoiq:before {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('../images/icon_cart.png') no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  top: 4px;
  right: 5px;
}

.header .options .btn-gotoiq .num {
  position: absolute;
  top: .0;
  right: -4px;
  border-radius: 50px;
  background: #1571ff;
  color: #fff;
  font-size: .75rem;
  font-style: normal;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.header .options .search-switch {
  display: inline-block;
  position: absolute;
  width: 40px;
  height: 40px;
  vertical-align: top;
  margin-left: 13px;
  top: 36px;
  right: 0;
}

.header .options .search-switch:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  background: url('../images/header_opt.png') no-repeat;
  background-size: 44px 22px;
  background-position: -22px 0;
  top: 9px;
  left: 9px;
}

.header .google-lang {
  float: right;
  width: calc(100% - 225px);
  text-align: right;
  margin-top: 4px;
  margin-right: 45px;
}

.header .google-lang > div {
  display: inline-block;
  vertical-align: top;
}

.header .nav-menu {
  float: right;
  margin-top: -5px;
  margin-right: 10px;
}

.header .nav-menu .menu-main {
  font-size: 0;
  text-align: center;
}

.header .nav-menu .menu-main > li {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.header .nav-menu .menu-main > li:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #f39801 transparent;
  top: 102px;
  left: 50%;
  margin-left: -6px;
  transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform: scaleY(0);
  -moz-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transition: transform .2s;
  -moz-transition: transform .2s;
  -webkit-transition: transform .2s;
}

.header .nav-menu .menu-main > li:hover:after {
  transform: scaleY(1);
  -moz-transform: scaleY(1);
  -webkit-transform: scaleY(1);
}

.header .nav-menu .menu-main > li > .main-ti {
  margin: 0;
}

.header .nav-menu .menu-main > li > .main-ti > a {
  display: block;
  line-height: 40px;
  font-size: 1.25rem;
  color: #fff;
  padding: 0 25px;
  letter-spacing: 1px;
}

.header .nav-menu .menu-sub {
  display: inline-block;
  position: absolute;
  font-size: 0;
  vertical-align: top;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  margin-top: 70px;
  padding: 20px 0 30px;
  opacity: 0;
  transform: scale(0) translateX(-50%);
  -moz-transform: scale(0) translateX(-50%);
  -webkit-transform: scale(0) translateX(-50%);
  transition: opacity .4s, transform 0s .4s;
  -moz-transition: opacity .4s, transform 0s .4s;
  -webkit-transition: opacity .4s, transform 0s .4s;
}

.header .nav-menu .menu-main > li:hover > .menu-sub {
  opacity: 1;
  transform: scale(1) translateX(-50%);
  -moz-transform: scale(1) translateX(-50%);
  -webkit-transform: scale(1) translateX(-50%);
  transition: opacity .4s, transform 0s;
  -moz-transition: opacity .4s, transform 0s;
  -webkit-transition: opacity .4s, transform 0s;
}

.header .nav-menu .menu-sub:before {
  content: '';
  display: block;
  position: absolute;
  width: 200vw;
  height: 100%;
  background: rgba(255, 255, 255, .95);
  top: 0;
  left: -100vw;
  -webkit-backface-visibility: hidden;
  transform-origin: top center;
  -moz-transform-origin: top center;
  -webkit-transform-origin: top center;
  transform: scaleY(0);
  -moz-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transition: transform .4s;
  -moz-transition: transform .4s;
  -webkit-transition: transform .4s;
}

.header .nav-menu .menu-main > li:hover > .menu-sub:before {
  transform: scaleY(1);
  -moz-transform: scaleY(1);
  -webkit-transform: scaleY(1);
}

.header .nav-menu .menu-sub:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 70px;
  top: -70px;
  left: 0;
}

.header .nav-menu .menu-sub > .item {
  display: inline-block;
  position: relative;
  text-align: left;
  vertical-align: top;
}

.header .nav-menu .menu-sub > .item + .item {
  margin-left: 100px;
}

.header .nav-menu .menu-sub > .item > .sub-ti {
  line-height: 32px;
  font-size: 0.9375rem;
  color: #0e0e0e;
  margin: 0;
  text-transform: uppercase;
}

.header .nav-menu .menu-sub > .item > .sub-ti a {
  color: #0e0e0e;
}

.header .nav-menu .menu-sub > .item > .sub-ti a:hover {
  color: #009ddc;
}

.header .nav-menu .sub-list {
  font-size: 0;
  text-align: center;
}

.header .nav-menu .sub-ti + .sub-list {
  text-align: left;
}

.header .nav-menu .sub-list > li {
  display: inline-block;
  vertical-align: top;
}

.header .nav-menu .sub-list > li + li {
  margin-left: 30px;
}

.header .nav-menu .sub-list > li > .grand-ti {
  line-height: 32px;
  font-size: 0.9375rem;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  margin: 0;
}

.header .nav-menu .sub-ti + .sub-list > li > .grand-ti {
  line-height: 26px;
  font-weight: normal;
  text-transform: initial;
}

.header .nav-menu .sub-list > li > .grand-ti > a {
  color: #0e0e0e;
}

.header .nav-menu .sub-list > li > .grand-ti > a:hover {
  color: #009ddc;
}

.header .sub-logo {
  float: right;
  width: calc(100% - 360px);
  font-size: 0;
  text-align: right;
  margin-top: 6px;
}

.header .sub-logo > a {
  display: inline-block;
  vertical-align: top;
}

.header .sub-logo > div {
  margin-top: 5px;
  text-align: right;
}

.header .sub-logo .sub-logo-1 {
  height: 15px;
}

.header .sub-logo .sub-logo-2 {
  height: 30px;
}

.header .sub-logo img {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

@media (max-width:1365px) {
  .header .nav-menu {
    margin-right: 5px;
  }

  .header .nav-menu .menu-main > li > .main-ti > a {
    padding: 0 13px;
  }

}

@media (max-width:1199px) {
  .header {
    padding: 10px 0 5px;
  }

  .header .nav-menu {
    margin-right: 10px;
  }

  .header .nav-menu .menu-main > li > .main-ti > a {
    padding: 0 9px 0 10px;
  }

  .header .nav-menu .menu-sub > .item + .item {
    margin-left: 50px;
  }

  .header .nav-menu .sub-list > li + li {
    margin-left: 15px;
  }

}

@media (min-width:1200px) {
  .nav-mask {
    display: none !important;
  }

}

@media (max-width:1023px) {
  .header .logo {
    position: absolute;
    width: 180px;
    height: 100px;
    margin: 0;
    top: 10px;
    left: 15px;
  }

  .header .logo a {
    height: 100px;    /*background-image: url('../images/logo_404.png');*/
  }

  .header .logo a i {
    display: none;
  }

  .header .nav-switch {
    display: block;
    float: right;
    position: relative;
    width: 40px;
    height: 40px;
    font-size: 0;
    margin-top: 0;
    transition: transform .2s;
    -moz-transition: transform .2s;
    -webkit-transition: transform .2s;
  }

  .header .nav-switch.open {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }

  .header .nav-switch i {
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 100%;
    left: 18px;
  }

  .header .nav-switch i:nth-last-child(1) {
    top: 11px;
  }

  .header .nav-switch i:nth-last-child(2) {
    top: 18px;
  }

  .header .nav-switch i:nth-last-child(3) {
    top: 25px;
  }

  .header .options {
    margin-top: 0;
    margin-right: 13px;
  }

  .header .options:before {
    display: none;
  }

  .header .options:after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 16px;
    background: #fff;
    top: 12px;
    right: -7px;
  }

  .header .google-lang {
    width: 100%;
  }

  .header .nav-menu {
    position: fixed;
    width: 230px;
    height: calc(100vh - 120px);
    background: rgba(255, 255, 255, .95);
    top: 120px;
    right: -230px;
    margin: 0;
    padding: 0 0 40px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .4s, right .4s;
    -moz-transition: opacity .4s, right .4s;
    -webkit-transition: opacity .4s, right .4s;
  }

  .skiptranslate:not([style^="display"]) ~ .header .nav-menu {
    top: 160px;
  }

  .header .nav-menu.open {
    right: 0;
    opacity: 1;
  }

  .header .nav-menu .menu-main {
    text-align: left;
  }

  .header .nav-menu .menu-main > li {
    display: block;
    border-bottom: 1px solid #ddd;
  }

  .header .nav-menu .menu-main > li:after {
    border-color: transparent transparent #eee transparent;
    top: 32px;
    left: 25px;
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
  }

  .header .nav-menu .menu-main > li:hover:after {
    transform: scaleY(0);
    -moz-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
  }

  .header .nav-menu .menu-main > li.open:after {
    transform: scaleY(1);
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transition: transform .2s;
    -moz-transition: transform .2s;
    -webkit-transition: transform .2s;
  }

  .header .nav-menu .menu-main > li > .main-ti > a {
    font-size: 1rem;
    font-weight: bold;
    color: #0e0e0e;
    padding: 0 15px;
    text-transform: uppercase;
  }

  .header .nav-menu .menu-sub {
    display: block;
    position: absolute;
    width: 100%;
    background: #eee;
    white-space: normal;
    top: auto;
    left: auto;
    margin: 0;
    padding: 5px 15px;
    opacity: 0;
    transform-origin: top center;
    -moz-transform-origin: top center;
    -webkit-transform-origin: top center;
    transform: scaleY(0);
    -moz-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
  }

  .header .nav-menu .menu-main > li:hover > .menu-sub {
    opacity: 0;
    transform: scaleY(0);
    -moz-transform: scaleY(0);
    -webkit-transform: scaleY(0);
  }

  .header .nav-menu .menu-main > li.open > .menu-sub {
    position: relative;
    opacity: 1;
    transform: scaleY(1);
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }

  .header .nav-menu .menu-sub:before, .header .nav-menu .menu-sub:after {
    display: none;
  }

  .header .nav-menu .menu-sub > .item {
    display: block;
  }

  .header .nav-menu .menu-sub > .item + .item {
    margin-top: 5px;
    margin-left: 0;
  }

  .header .nav-menu .menu-sub > .item > .sub-ti {
    text-transform: initial;
  }

  .header .nav-menu .sub-list {
    text-align: left;
  }

  .header .nav-menu .sub-ti + .sub-list {
    padding-left: 10px;
  }

  .header .nav-menu .sub-list > li {
    display: block;
  }

  .header .nav-menu .sub-list > li + li {
    margin-left: 0;
  }

  .header .nav-menu .sub-list > li > .grand-ti {
    line-height: 34px !important;
    font-size: 1rem;
    font-weight: normal;
    text-transform: initial;
  }

  .header .nav-menu .sub-list > li > .grand-ti > a {
    display: block;
  }

  .header .sub-logo {
    width: 100%;
  }
  .header .options .search-switch {
    margin-left: 0;
    top: 0;
    right: 42px
  }
  .header .google-lang{
    margin-right: 3px;
  }


}

@media (max-width:767px) {
  .header {
    height: 75px;
    padding: 5px 0;
  }

  .header .logo {
    width: 117px;
    height: 65px;
    top: 5px;
    left: 10px;
  }

  .header .logo a {
    height: 65px;
  }

  .header .nav-switch {
    width: 34px;
    height: 34px;
    margin-top: 0;
  }

  .header .nav-switch i {
    left: 15px;
  }

  .header .nav-switch i:nth-last-child(1) {
    top: 8px;
  }

  .header .nav-switch i:nth-last-child(2) {
    top: 15px;
  }

  .header .nav-switch i:nth-last-child(3) {
    top: 22px;
  }

  .header .options {
    margin-top: 0;
    margin-right: 9px;
  }

  .header .options:before {
    top: 9px;
    right: 38px;
  }

  .header .options:after {
    top: 9px;
    right: -5px;
  }

  .header .options .google-lang {
    right: -43px;
  }

  .header .options .lang .current-lang {
    width: 34px;
    height: 34px;
    font-size: 0;
    padding: 0;
  }

  .header .options .lang .current-lang:before {
    top: 6px;
    left: 6px;
  }

  .header .options .btn-gotoiq {
    margin-right: 3px;
  }

  .header .options .search-switch {
    width: 34px;
    height: 34px;
    margin-left: 0;
    top: 3px;
    right: 45px
  }

  .header .options .search-switch:before {
    top: 6px;
    left: 6px;
  }

  .header .google-lang {
    margin-top: 0;
    margin-right: 0;
  }

  .header .nav-menu {
    height: calc(100% - 75px);
    top: 75px;
  }

  .skiptranslate:not([style^="display"]) ~ .header .nav-menu {
    top: 115px;
  }

  .header .sub-logo {
    display: none;
  }

  .header .sub-logo .sub-logo-2 {
    display: none;
  }

}

@media (max-width:419px) {
  .header .container-fluid {
    padding: 0 5px;
  }

  .header .options:before {
    right: 34px;
  }

  .header .options .lang .current-lang {
    width: 30px;
  }

  .header .options .lang .current-lang:before {
    left: 4px;
  }

  .header .options .search-switch {
    width: 30px;
  }

  .header .options .search-switch:before {
    left: 4px;
  }

}

/* Search */
.search-form {
  position: fixed;
  z-index: 80;
  width: 100%;
  font-size: 0;
  background: rgba(255, 255, 255, .95);
  top: 120px;
  left: 0;
  text-align: center;
  padding: 25px;
  opacity: 0;
  transform-origin: center top;
  -moz-transform-origin: center top;
  -webkit-transform-origin: center top;
  transform: scaleY(0);
  -moz-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transition: opacity .4s, transform .4s;
  -moz-transition: opacity .4s, transform .4s;
  -webkit-transition: opacity .4s, transform .4s;
}

.skiptranslate:not([style^="display"]) ~ .search-form {
  top: 160px;
}

.search-form.open {
  opacity: 1;
  transform: scaleY(1);
  -moz-transform: scaleY(1);
  -webkit-transform: scaleY(1);
}

.search-form * {
  display: inline-block;
  height: 40px;
  vertical-align: top;
}

.search-form form {
  display: block;
  height: auto;
}

.search-form select, .search-form input {
  width: 420px;
  line-height: 39px;
  font-size: 1.125rem;
  color: #222;
  border: none;
  border-bottom: 1px solid #a3a2a2;
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
  letter-spacing: 1px;
}

.search-form select {
  background-image: url('../images/select_arrow.png');
  background-size: 9px 6px;
  background-repeat: no-repeat;
  background-position: right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.search-form select::-ms-expand {
  display: none;
}

.search-form input {
  margin-left: 40px;
}

.search-form input::-webkit-input-placeholder {
  color: #222;
}

.search-form input::-moz-placeholder {
  color: #222;
}

.search-form input:-ms-input-placeholder {
  color: #222;
}

.search-form input:-moz-placeholder {
  color: #222;
}

.search-form button {
  width: 160px;
  font-size: 0.9375rem;
  color: #fff;
  border: none;
  background: #535353;
  text-align: center;
  text-transform: uppercase;
  margin-left: 40px;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

.search-form button:hover {
  background: #373737;
}

.search-form button:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('../images/header_opt.png') no-repeat;
  background-size: 44px 22px;
  background-position: -22px 0;
  vertical-align: middle;
  margin-right: 4px;
  margin-bottom: 2px;
}

.search-form a.search-close {
  position: absolute;
  width: 40px;
  font-size: 0;
  top: 25px;
  right: 25px;
}

.search-form a.search-close:before, .search-form a.search-close:after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background: #2f2f2f;
  top: 19px;
  left: 5px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.search-form a.search-close:after {
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

@media (max-width:1365px) {
  .search-form select, .search-form input {
    width: 320px;
  }

}

@media (max-width:1199px) {
  .search-form select, .search-form input {
    width: 260px;
  }

  .search-form input, .search-form button {
    margin-left: 20px;
  }

  .search-form button {
    width: 140px;
  }

}

@media (max-width:991px) {
  .search-form {
    padding: 15px;
    text-align: left;
  }

  .search-form * {
    height: 34px;
  }

  .search-form select, .search-form input {
    width: calc(50% - 92px);
    line-height: 33px;
    font-size: 1rem;
  }

  .search-form button {
    width: 120px;
  }

  .search-form input, .search-form button {
    margin-left: 10px;
  }

  .search-form a.search-close {
    width: 34px;
    top: 15px;
    right: 15px;
  }

  .search-form a.search-close:before, .search-form a.search-close:after {
    width: 24px;
    top: 16px;
  }

}

@media (max-width:767px) {
  .search-form {
    top: 75px;
  }

  .skiptranslate:not([style^="display"]) ~ .search-form {
    top: 115px;
  }

}

@media (max-width:639px) {
  .search-form select, .search-form input {
    width: calc(50% - 70px);
  }

  .search-form a.search-close {
    display: none;
  }

}

@media (max-width:543px) {
  .search-form {
    text-align: center;
  }

  .search-form select, .search-form input {
    width: 100%;
    margin-bottom: 10px;
  }

  .search-form input, .search-form button {
    margin-left: 0;
  }

}

@media (max-width:419px) {
  .search-form {
    top: 60px;
  }

}

/* Footer */
.footer {
  position: relative;
  background: #202020 url('../images/footer_bg.jpg');
}

.footer .infos {
  padding: 40px 0 35px;
}

.footer .infos .container {
  position: relative;
  padding-left: 525px;
}

.footer .brand {
  position: absolute;
  width: 450px;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.footer .intro {
  float: right;
  width: 400px;
}

.footer .intro .logo {

  /*max-width: 200px;*/
  margin-bottom: 5px;
}

.footer .intro .logo img {
  display: inline-block;
  vertical-align: top;
}

.footer .intro .logo img.mg {
  margin-left: 15px;
}

.footer .intro .data li {
  position: relative;
  line-height: 26px;
  font-size: 0.9375rem;
  color: #fff;
  padding-left: 30px;
}

.footer .intro .data li i {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('../images/footer_data.png') no-repeat;
  background-size: 32px 16px;
  top: 5px;
  left: 0;
}

.footer .intro .data li i.ico-1 {
  background-position: 0 0;
}

.footer .intro .data li i.ico-2 {
  background-position: -16px 0;
}

.footer .intro .data li a {
  color: #fff;
}

.footer .intro .data li a:hover {
  color: #eee;
}

.footer .intro .social-ti {
  position: relative;
}

.footer .intro .social-ti:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #434343;
  left: 0;
  bottom: 0;
}

.footer .intro .social-ti span {
  display: inline-block;
  position: relative;
  line-height: 37px;
  font-size: 1.0625rem;
  color: #fff;
  border-bottom: 1px solid #f39801;
  vertical-align: top;
}

.footer .intro .social-list {
  font-size: 0;
  margin-top: 15px;
  margin-bottom: 20px;
}

.footer .intro .social-list li {
  display: inline-block;
  vertical-align: top;
}

.footer .intro .social-list li + li {
  margin-left: 10px;
}

.footer .intro .social-list li a {
  display: block;
  position: relative;
  width: 35px;
  height: 35px;
  font-size: 0;
}

.footer .intro .social-list li a:hover {
  opacity: .9;
}

.footer .intro .social-list li a:before {
  content: '';
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  background: url('../images/footer_social.png') no-repeat;
  background-size: 280px 35px;
  top: 0;
  left: 0;
}

.footer .intro .social-list li a.wp:before {
  background-position: 0 0;
}

.footer .intro .social-list li a.bs:before {
  background-position: -35px 0;
}

.footer .intro .social-list li a.br:before {
  background-position: -70px 0;
}

.footer .intro .social-list li a.cq:before {
  background-position: -105px 0;
}

.footer .intro .social-list li a.pl:before {
  background-position: -140px 0;
}

.footer .intro .social-list li a.fb:before {
  background-position: -175px 0;
}

.footer .intro .social-list li a.tt:before {
  background-position: -210px 0;
}

.footer .intro .social-list li a.yt:before {
  background-position: -245px 0;
}

.footer .links {
  float: left;
}

.footer .links .main {
  font-size: 0;
}

.footer .links .main > li {
  display: inline-block;
  vertical-align: top;
  padding-top: 5px;
  padding-right: 40px;
}

.footer .links .main-ti {
  line-height: 28px;
  font-size: 1.0625rem;
  color: #fff;
}

.footer .links .sub + .main-ti {
  margin-top: 6px;
}

.footer .links .main-ti a {
  color: #fff;
}

.footer .links .main-ti a:hover {
  color: #eee;
}

.footer .links .sub {
  margin-top: 3px;
}

.footer .links .sub > li {
  position: relative;
  line-height: 26px;
  font-size: 0.9375rem;
  padding: 3px 0 3px 16px;
}

.footer .links .sub > li:before {
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f39801;
  border-radius: 100%;
  top: 13px;
  left: 0;
}

.footer .links .sub > li a {
  color: #b3b3b3;
}

.footer .links .sub > li a:hover {
  color: #c4c4c4;
}

.footer .copy {
  background: #000;
  text-align: center;
  padding: 15px 0;
}

.footer .copy span, .footer .copy a {
  display: inline-block;
  line-height: 22px;
  font-size: 0.8125rem;
  color: #fff;
  vertical-align: top;
  padding: 4px 0;
}

.footer .copy span {
  text-transform: uppercase;
  margin-right: 6px;
}

.footer .copy a {
  color: #b4b4b4;
}

.footer .copy a:hover {
  color: #c7c7c7;
}

@media (min-width:1366px) and (max-width:1499px) {
  .footer .infos .container {
    max-width: 1349px;
    padding-left: 400px;
  }

  .footer .brand {
    width: 350px;
  }

}

@media (min-width:1200px) and (max-width:1365px) {
  .footer .infos .container {
    padding-left: 320px;
  }

  .footer .brand {
    width: 260px;
  }

  .footer .intro {
    width: 300px;
  }

  .footer .intro .social-list {
    margin-bottom: 10px;
  }

  /*.footer .intro .social-list li {
    margin-bottom: 10px;
  }
  .footer .intro .social-list li:nth-child(3n) {
    margin-right: 95px;
  }
  .footer .intro .social-list li:nth-child(3n+1) {
    margin-left: 0;
  }*/
}

@media (max-width:1199px) {
  .footer .infos {
    padding: 25px 0;
  }

  .footer .infos .container {
    padding-left: 15px;
  }

  .footer .brand {
    position: static;
    max-width: 250px;
    margin-bottom: 15px;
    transform: none;
    -moz-transform: none;
    -webkit-transform: none;
  }

  .footer .intro {
    width: 360px;
  }

  /*.footer .intro .logo img {
    height: 34px;
  }*/
  .footer .intro .logo img.mg {
    margin-left: 10px;
  }

  .footer .intro .social-list {
    margin-bottom: 10px;
  }

  .footer .intro .social-list li {
    width: 45px;
    margin-bottom: 10px;
  }

  .footer .intro .social-list li + li {
    margin-left: 0;
  }

  .footer .links {

    /*float: none;*/
    width: calc(100% - 400px);
  }

  .footer .links .main > li {
    width: 33.333%;
    padding-right: 20px;
  }

}

@media (max-width:992px) {
  .footer .intro {
    float: none;
    width: 100%;
  }

  .footer .intro .logo {

    /*width: 180px;*/
    margin-bottom: 5px;
  }

  .footer .intro .logo img {
    height: auto;
  }

  .footer .intro .social-list {
    width: 100%;
  }

  .footer .links {
    float: none;
    width: 100%;
    margin-top: 20px;
  }

}

@media (max-width:767px) {
}

@media (max-width:639px) {
  .footer .intro .logo img {
    display: block;
  }

  .footer .intro .logo img.mg {
    margin-top: 5px;
    margin-left: 0;
  }

  .footer .links .main > li, .footer .links .main > li:last-child {
    width: 50%;
  }

  .footer .links .main > li:nth-child(n+3) {
    margin-top: 15px;
  }

  .footer .copy span {
    display: block;
    margin-right: 0;
  }

}

@media (max-width:479px) {
  .footer .intro {
    width: 100%;
  }

}

@media (max-width:379px) {
  .footer .intro .social-list li {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .footer .intro .social-list li + li {
    margin-left: 0;
  }

  .footer .links {
    margin-top: 15px;
  }

  .footer .links .main > li, .footer .links .main > li:last-child {
    display: block;
    width: 100%;
    padding-right: 0;
  }

  .footer .links .main > li + li, .footer .links .main > li:nth-child(n+3) {
    margin-top: 10px;
  }

}

/* Go to Top */
a.go-top {
  display: block;
  position: fixed;
  z-index: 20;
  width: 50px;
  height: 50px;
  line-height: 22px;
  font-size: 0.8125rem;
  color: #fff;
  background: #000;
  border-radius: 100%;
  padding-top: 18px;
  text-align: center;
  right: 30px;
  bottom: 30px;
  opacity: 0;
  transform: scale(0);
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transition: opacity .2s, transform 0s .2s;
  -moz-transition: opacity .2s, transform 0s .2s;
  -webkit-transition: opacity .2s, transform 0s .2s;
}

a.go-top.scroll-view {
  opacity: 1;
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transition: opacity .2s, transform 0s;
  -moz-transition: opacity .2s, transform 0s;
  -webkit-transition: opacity .2s, transform 0s;
}

a.go-top.scroll-view:hover {
  opacity: .85;
}

a.go-top:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 3px 4px 3px;
  border-color: transparent transparent #f39801 transparent;
  top: 13px;
  left: 50%;
  margin-left: -3px;
}

@media (max-width:767px) {
  a.go-top {
    right: 20px;
    bottom: 30px;
  }

}

/* Page Wrapper */
.g-wrap {
  background: #fff;
  margin-top: 100vh;
}

.g-wrap.no-banner {
  margin-top: 120px;
}

.g-wrap.page {
  margin-top: 470px;
}

.g-wrap.p-category {
  background: #f2f2f2;
  margin-top: 0;
  padding-top: 120px;
}

.g-wrap.p-wrap-list {
  margin-top: 0;
  padding-top: 120px;
}

@media (max-width:1199px) {
  .g-wrap.page {
    margin-top: 380px;
  }

}

@media (max-width:991px) {
  .g-wrap {
    margin-top: 0;
  }

}

@media (max-width:767px) {
  .g-wrap {
    margin-top: 0;
  }

  .g-wrap.no-banner {
    margin-top: 75px;
  }

  .g-wrap.page {
    margin-top: 240px;
  }

  .g-wrap.p-category, .g-wrap.p-wrap-list {
    padding-top: 75px;
  }

}

/* Page Banner */
.p-banner {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 470px;
  top: 0;
  left: 0;
  overflow: hidden;
}

.p-banner img {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

@media (max-width:991px) {
  .p-banner, .p-banner img {
    height: 380px;
  }

}

@media (max-width:767px) {
  .p-banner, .p-banner img {
    height: 240px;
  }

}

/* Page Carousel Banner */
.g-carousel {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.p-wrap-list .g-carousel {
  position: relative;
  z-index: inherit;  /*height: 100vh;*/
}

.g-carousel .scroll-down {
  position: absolute;
  width: 30px;
  height: 56px;
  border: 1px solid #fff;
  border-radius: 15px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  left: 50%;
  bottom: 100px;
  margin-left: -15px;
}

.g-carousel .scroll-down.mb {
  height: 44px;
  border-radius: 3px;
}

.g-carousel .scroll-down:before {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 24px;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 15px 15px;
  left: -1px;
  bottom: -1px;
}

.g-carousel .scroll-down.mb:before {
  height: 20px;
  border-radius: 0 0 3px 3px;
}

.g-carousel .scroll-down span {
  display: block;
  position: absolute;
  line-height: 16px;
  font-size: 0.8125rem;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
  white-space: nowrap;
  letter-spacing: 2px;
  padding-left: 2px;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.g-carousel .scroll-down.mb span {
  top: 54px;
}

.g-carousel .scroll-down i {
  display: block;
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 100%;
  top: 14px;
  left: 12px;
  animation: scroll-down 1.5s linear infinite;
  -moz-animation: scroll-down 1.5s linear infinite;
  -webkit-animation: scroll-down 1.5s linear infinite;
}

.g-carousel .scroll-down.mb i {
  margin-top: -4px;
  animation-name: swipe-up;
  -moz-animation-name: swipe-up;
  -webkit-animation-name: swipe-up;
}

@keyframes scroll-down {
  0% {
    opacity: 0;
    top: 14px;
  }

  15% {
    opacity: 1;
    top: 14px;
  }

  65% {
    opacity: 1;
    top: 30px;
  }

  80% {
    opacity: 0;
    top: 30px;
  }

  100% {
    opacity: 0;
    top: 14px;
  }

}

@-moz-keyframes scroll-down {
  0% {
    opacity: 0;
    top: 14px;
  }

  15% {
    opacity: 1;
    top: 14px;
  }

  65% {
    opacity: 1;
    top: 30px;
  }

  80% {
    opacity: 0;
    top: 30px;
  }

  100% {
    opacity: 0;
    top: 14px;
  }

}

@-webkit-keyframes scroll-down {
  0% {
    opacity: 0;
    top: 14px;
  }

  15% {
    opacity: 1;
    top: 14px;
  }

  65% {
    opacity: 1;
    top: 30px;
  }

  80% {
    opacity: 0;
    top: 30px;
  }

  100% {
    opacity: 0;
    top: 14px;
  }

}

@keyframes swipe-up {
  0% {
    opacity: 0;
    top: 30px;
  }

  15% {
    opacity: 1;
    top: 30px;
  }

  65% {
    opacity: 1;
    top: 14px;
  }

  80% {
    opacity: 0;
    top: 14px;
  }

  100% {
    opacity: 0;
    top: 30px;
  }

}

@-moz-keyframes swipe-up {
  0% {
    opacity: 0;
    top: 30px;
  }

  15% {
    opacity: 1;
    top: 30px;
  }

  65% {
    opacity: 1;
    top: 14px;
  }

  80% {
    opacity: 0;
    top: 14px;
  }

  100% {
    opacity: 0;
    top: 30px;
  }

}

@-webkit-keyframes swipe-up {
  0% {
    opacity: 0;
    top: 30px;
  }

  15% {
    opacity: 1;
    top: 30px;
  }

  65% {
    opacity: 1;
    top: 14px;
  }

  80% {
    opacity: 0;
    top: 14px;
  }

  100% {
    opacity: 0;
    top: 30px;
  }

}

.g-carousel-slick {

  /*height: 100vh;*/
}

.g-carousel-slick .item {
  position: relative;  /*height: 100vh;*/
  overflow: hidden;
}

.g-carousel-slick .item img {
  display: block;
  max-width: 100%;  /*position: absolute;
      width: 100%;
      height: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);*/
}

.g-carousel-slick .item .txt {
  position: absolute;
  width: 500px;
  top: 45%;
  left: 50%;
  margin-top: -69px;
  margin-left: 12.5%;
  text-align: center;
  opacity: 0;
  transform: translate(60px, -50%);
  -moz-transform: translate(60px, -50%);
  -webkit-transform: translate(60px, -50%);
  transition: opacity .5s, transform .5s;
  -moz-transition: opacity .5s, transform .5s;
  -webkit-transition: opacity .5s, transform .5s;
}

.g-carousel-slick .item.view .txt {
  opacity: 1;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

.g-carousel-slick .item .txt.has-more {
  margin-top: 0;
}

.g-carousel-slick .item .txt .title {
  line-height: 64px;
  font-size: 3.25rem;
  color: #fff;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
  margin: 0;
}

.g-carousel-slick .item .txt .title.small {
  line-height: 52px;
  font-size: 2.875rem;
}

.g-carousel-slick .item .txt .info {
  line-height: 30px;
  font-size: 1.25rem;
  color: #fff;
  margin: 30px 0 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
  text-align: left;
  text-align: justify;
}

.g-carousel-slick .item .txt .more {
  display: inline-block;
  line-height: 26px;
  font-size: 0.9375rem;
  color: #fff;
  background: #f39801;
  vertical-align: top;
  margin: 90px 0 0;
  padding: 11px 65px;
  text-transform: uppercase;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

.g-carousel-slick .item .txt .more:hover {
  background: #ffa716;
}

.g-carousel-slick .slick-dots {
  display: inline-block;
  position: absolute;
  height: 10px;
  vertical-align: top;
  left: 50%;
  bottom: 50px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.g-carousel-slick .slick-dots li {
  display: inline-block;
  vertical-align: top;
  margin: 0 8px;
}

.g-carousel-slick .slick-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  border: none;
  background: #fff;
  border-radius: 100%;
  padding: 0;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

.g-carousel-slick .slick-dots li.slick-active button {
  background: #f39801;
}

/*@media (max-aspect-ratio: 16/9) {
.g-carousel-slick .item img {
  width: auto;
  height: 100%;
}
}*/

/*@media (max-height: 800px) {
.g-carousel-slick .item .txt {
  top: 120px;
  bottom: auto;
}
}*/
@media (max-width:1399px) {
  .g-carousel-slick .item .txt {
    width: 420px;
  }

  .g-carousel-slick .item .txt .title {
    line-height: 52px;
    font-size: 2.5rem;
  }

  .g-carousel-slick .item .txt .title.small {
    line-height: 46px;
    font-size: 2rem;
  }

  .g-carousel-slick .item .txt .info {
    margin-top: 10px;
  }

}

@media (max-width:1199px) {
  .g-carousel-slick .item .txt {
    width: 360px;
  }

}

@media (min-width:992px) and (max-height:920px) {
  .g-carousel-slick .item .txt {
    top: 50%;
  }

  .g-carousel-slick .item .txt .title {
    line-height: 40px;
    font-size: 2rem;
  }

  .g-carousel-slick .item .txt .info {
    line-height: 24px;
    font-size: 0.9375rem;
  }

  .g-carousel-slick .item .txt .more {
    margin-top: 20px;
  }

}

@media (max-width:991px) {
  .g-carousel {
    position: relative;
    z-index: initial;
    top: auto;
    left: auto;
  }

  .p-wrap-list .g-carousel {
    height: auto;
  }

  .g-carousel, .g-carousel-slick, .g-carousel-slick .item {
    height: auto;
  }

  .g-carousel .scroll-down {
    top: -120px;
    margin-top: 56.25%;
    display: none;
  }

  .g-carousel-slick .item img {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
    transform: none;
    -moz-transform: none;
    -webkit-transform: none;
  }

  .g-carousel-slick .item .txt {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #cdcdcd;
    background: #fff;
    top: auto;
    left: auto;
    margin: 0;
    padding: 15px 15px 65px 15px;
    opacity: 1;
    transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }

  .g-carousel-slick .item.view .txt {
    transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }

  .g-carousel-slick .item .txt:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 49px;
    background-color: #fff;
    left: 0;
    bottom: 0;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE7E7E6');
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…dpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #ffffff), color-stop(100%, #e7e7e6));
    background-image: -moz-linear-gradient(top, #fff 0, #e7e7e6 100%);
    background-image: -webkit-linear-gradient(top, #fff 0, #e7e7e6 100%);
    background-image: linear-gradient(to bottom, #fff 0, #e7e7e6 100%);
  }

  .g-carousel-slick .item .txt > * {
    position: relative;
  }

  .g-carousel-slick .item .txt .title {
    line-height: 40px;
    font-size: 2rem;
    color: #222;
    text-shadow: none;
    opacity: 0;
    transition: opacity .5s;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
  }

  .g-carousel-slick .item .txt .title.small {
    line-height: 28px;
    font-size: 1.5rem;
  }

  .g-carousel-slick .item .txt .info {
    line-height: 24px;
    font-size: 0.9375rem;
    color: #444;
    margin-top: 10px;
    text-shadow: none;
    opacity: 0;
    transition: opacity .5s;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
  }

  .g-carousel-slick .item .txt .more {
    margin-top: 10px;
    padding: 5px 20px;
    opacity: 0;
    transition: opacity .5s;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
  }

  .g-carousel-slick .item.view .txt .title, .g-carousel-slick .item.view .txt .info, .g-carousel-slick .item.view .txt .more {
    opacity: 1;
  }

  .g-carousel-slick .slick-dots {
    top: -25px;
    bottom: auto;
    margin-top: 56.25%;
  }

  .g-carousel-slick .slick-dots li {
    margin: 0 3px;
  }

}

@media (max-width:991px) {

  /*.g-carousel .scroll-down {
    margin-top: 92.86%;
  }*/
  .g-carousel-slick .slick-dots {
    margin-top: calc(41.667% - 10px);
  }

  .g-carousel-slick .slick-dots li {
    margin: 0 3px;
  }

}

@media (max-width:767px) {

  /*.g-carousel .scroll-down {
    margin-top: 92.86%;
  }*/
  .g-carousel-slick .slick-dots {
    margin-top: 92.86%;
  }

  .g-carousel-slick .slick-dots li {
    margin: 0 3px;
  }

}

/* Page Video */
.p-video {
  position: relative;
  background: #000;
  overflow: hidden;
}

.p-video a.cover {
  display: block;
  position: relative;
}

.p-video a.cover > i {
  display: block;
  position: absolute;
  width: 88px;
  height: 88px;
  border: 1px solid #fff;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.p-video a.cover > i:before {
  content: '';
  display: block;
  position: absolute;
  width: 44px;
  height: 88px;
  border: 2px solid #fff;
  border-right: none;
  border-radius: 44px 0 0 44px;
  top: -1px;
  left: -1px;
  transform-origin: right center;
  -moz-transform-origin: right center;
  -webkit-transform-origin: right center;
  transition: transform .5s;
  -moz-transition: transform .5s;
  -webkit-transition: transform .5s;
}

.p-video a.cover:hover > i:before {
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.p-video a.cover > i:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent #fff;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -4px;
  transition: transform .5s;
  -moz-transition: transform .5s;
  -webkit-transition: transform .5s;
}

.p-video a.cover:hover > i:after {
  transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.p-video .p-video-box {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.p-video.fix-window .p-video-box {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  top: 0;
  left: 0;
}

.p-video .p-video-box iframe {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.p-video .p-video-close {
  display: block;
  position: absolute;
  line-height: 26px;
  font-size: 1rem;
  color: #fff;
  top: 15px;
  right: 15px;
  padding-right: 12px;
  opacity: .5;
  transition: opacity .2s;
  -moz-transition: opacity .2s;
  -webkit-transition: opacity .2s;
}

.p-video .p-video-close:hover {
  opacity: 1;
}

.p-video .p-video-close:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  top: 9px;
  right: 0;
}

/*.p-video .p-video-close:before,
.p-video .p-video-close:after {
content: '';
display: block;
position: absolute;
width: 47px;
height: 1px;
background: #000;
top: 29px;
left: 6px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.p-video .p-video-close:after {
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}*/
@media (max-width:767px) {
  .p-video .p-video-close {
    width: 39px;
    height: 39px;
  }

  .p-video .p-video-close:before, .p-video .p-video-close:after {
    width: 27px;
    top: 19px;
  }

}

/* Page Video New */
.p-video-new {
  position: relative;
  overflow: hidden;
}

.p-video-new > div {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.p-video-new.fix-window > div {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  top: 0;
  left: 0;
}

.p-video-new iframe {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  top: 0;
  left: 0;
}

/*layout-ting*/
.container-1520 {
  max-width: 1520px;
  width: auto;
}

.bg-grey {
  background: #f2f2f2;
}

.g-title {
  margin: 0;
  font-size: 2rem;
  color: #000;
  text-align: center;
}

@media screen and (min-width:992px) {
  .g-title.ani {
    -moz-transition: -moz-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

}

@media screen and (min-width:992px) {
  .g-title.ani-bottom {
    -moz-transition: opacity .5s, -moz-transform 0.5s ease;
    -o-transition: opacity .5s, -o-transform 0.5s ease;
    -webkit-transition: opacity .5s, -webkit-transform 0.5s ease;
    transition: opacity .5s, transform 0.5s ease;
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    opacity: 0;
  }

  .g-title.ani.scroll-view {
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

}

.g-title.ani-bottom.scroll-view {
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

@media screen and (max-width:991px) {
  .g-title {
    font-size: 1.5rem;
  }

}

@media screen and (max-width:640px) {
  .g-title.ani {
    font-size: 1.3rem;
  }

}

.aw {
  width: 18px;
  height: 1px;
  background: #000;
  display: block;
  position: relative;
}

.aw:after {
  content: "";
  position: absolute;
  right: 0%;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*breadcrumb */
.bread_crumb {
  padding: 20px 50px;
  text-align: right;
  font-size: 0;
}

.bread_crumb a {
  color: #000;
  display: inline-block;
  font-size: 0.8rem;
}

.bread_crumb a:after {
  content: "";
  display: inline-block;
  margin: 0 5px;
  width: 1px;
  height: 8px;
  background: #000;
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
}

.bread_crumb a:last-child {
  color: #f39801;
}

.bread_crumb a:last-child:after {
  display: none;
}

.bread_crumb a:hover {
  text-decoration: underline;
}

@media screen and (max-width:1200px) {
  .bread_crumb {
    padding: 20px;
  }

}

/*產品格式 */
.p-box-wrap {
  padding: 0 5px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}

.p-box-wrap.ani {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.p-box-wrap.ani.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.p-box-wrap .img {
  background: #f2f2f2;
  overflow: hidden;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.p-box-wrap .img img {
  max-width: 100%;
  -moz-transition: -moz-transform 1.3s, opacity 1.3s;
  -o-transition: -o-transform 1.3s, opacity 1.3s;
  -webkit-transition: -webkit-transform 1.3s, opacity 1.3s;
  transition: transform 1.3s, opacity 1.3s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-backface-visibility: hidden;
}

.p-box-wrap .title {
  padding: 25px 10px 30px 10px;
  font-size: 1.2rem;
  text-align: center;
  margin: 0;
  position: relative;
}

.p-box-wrap .title .aw {
  position: absolute;
  left: 48%;
  bottom: 15%;
  margin-left: -9px;
  opacity: 0;
  -moz-transition: opacity 0.6s, left 0.6s;
  -o-transition: opacity 0.6s, left 0.6s;
  -webkit-transition: opacity 0.6s, left 0.6s;
  transition: opacity 0.6s, left 0.6s;
}

.p-box-wrap a {
  color: #000;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}

@media screen and (min-width:991px) {
  .p-box-wrap:hover .img {
    -moz-transform: scale(0.97, 0.97);
    -ms-transform: scale(0.97, 0.97);
    -webkit-transform: scale(0.97, 0.97);
    transform: scale(0.97, 0.97);
  }

  .p-box-wrap:hover .img img {
    opacity: 0.8;
    -moz-transform: scale(1.1) rotate(-1deg);
    -ms-transform: scale(1.1) rotate(-1deg);
    -webkit-transform: scale(1.1) rotate(-1deg);
    transform: scale(1.1) rotate(-1deg);
  }

  .p-box-wrap:hover .title .aw {
    left: 50%;
    opacity: 1;
  }

}

@media screen and (max-width:640px) {
  .p-box-wrap .title {
    padding: 15px 10px;
    font-size: 1rem;
  }

}

/*2+3排版 */
.sec-two-three {
  margin: 50px -5px;
  font-size: 0;
}

.sec-two-three .p-box-wrap {
  width: 50%;
}

@media screen and (max-width:640px) {
  .sec-two-three {
    margin: 25px -5px;
  }

}

@media screen and (min-width:481px) {
  .sec-two-three .p-box-wrap:nth-child(n+3) {
    width: 33.33%;
  }

}

@media screen and (max-width:480px) {
  .sec-two-three .p-box-wrap {
    width: 100%;
  }

}

/*分隔線*/
.hr2 {
  border: none;
  border-bottom: 1px solid #cdcdcc;
  margin: 0;
  height: 50px;
  background-color: #ffffff;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE7E7E6');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e7e7e6));
  background-image: -moz-linear-gradient(top, #ffffff 0%, #e7e7e6 100%);
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e7e7e6 100%);
  background-image: linear-gradient(to bottom, #ffffff 0%, #e7e7e6 100%);
}

/*頁碼 */
.pagers {
  text-align: center;
  font-size: 0;
  margin-bottom: 20px;
}

.pagers a {
  font-size: 0.95rem;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  color: #555;
  border: 1px solid #ddd;
}

.pagers a.on, .pagers a:hover {
  color: #009ddc;
  border-color: #009ddc;
}

.pagers a.prev, .pagers a.next {
  border: none;
  background: none;
  color: #6e6e6e;
  font-size: 1.6rem;
}

.pagers a.prev:hover, .pagers a.next:hover {
  color: #000;
}

@media screen and (max-width:480px) {
  .pagers a {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 0.8rem;
  }

  .pagers a:not(.on):not(.prev):not(.next) {
    display: none;
  }

  .pagers a.prev {
    float: left;
  }

  .pagers a.next {
    float: right;
  }

}

/*頁籤樣式*/
.detail-menu {
  margin: 50px 0;
  text-align: center;
  font-size: 0;
}

.detail-menu .toggle {
  display: none;
}

.detail-menu .nav-tabs {
  border: none;
}

.detail-menu li {
  display: inline-block;
  vertical-align: top;
  float: none;
  font-size: 1.25rem;
  padding: 20px;
}

.detail-menu li a {
  line-height: 30px;
  color: #000;
  padding: 0px 20px;
  border: none;
  position: relative;
  display: block;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.detail-menu li a:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: 0;
  width: 1px;
  background: #f39801;
  -moz-transition: height 0.3s;
  -o-transition: height 0.3s;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}

.detail-menu li:hover a, .detail-menu li:focus a, .detail-menu li.active a {
  color: #f39801 !important;
  border: none !important;
  background: none !important;
}

.detail-menu li:hover a:before, .detail-menu li:focus a:before, .detail-menu li.active a:before {
  height: 20px;
}

.detail-menu li a img {
  display: inline-block;
  width: auto;
  height: 30px;
  vertical-align: middle;
  margin-right: 5px;
  opacity: .75;
  transition: opacity .3s;
  -moz-transition: opacity .3s;
  -webkit-transition: opacity .3s;
}

.detail-menu li:hover a img, .detail-menu li.active a img {
  opacity: 1;
}

@media screen and (max-width:1200px) {
  .detail-menu li a {
    line-height: 21px;
    padding: 0px;
  }

  .detail-menu li a img {
    height: 21px;
  }

}

@media screen and (max-width:990px) {
  .detail-menu {
    margin: 30px 0;
  }

  .detail-menu li {
    font-size: 1rem;
  }

}

@media screen and (min-width:769px) {
  .detail-menu ul {
    display: block !important;
  }

}

@media screen and (max-width:768px) {
  .detail-menu {
    margin: 30px 0;
    text-align: left;
    padding: 0 5px;
  }

  .detail-menu li {
    font-size: 1rem;
    padding: 8px 10px;
  }

  .detail-menu li a {
    border-bottom: 3px solid transparent;
  }

  .detail-menu li a:before {
    display: none;
  }

  .detail-menu li:hover a, .detail-menu li:focus a, .detail-menu li.active a {
    border-bottom: 3px solid #f39801 !important;
  }

  .detail-menu.has-toggle {
    text-align: left;
    margin: 30px 0;
    position: relative;
  }

  .detail-menu.has-toggle .toggle {
    display: block;
    border: 1px solid #f39801;
    font-size: 1rem;
    padding: 10px 15px;
    color: #f39801;
    position: relative;
  }

  .detail-menu.has-toggle .toggle .down {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 15px;
    height: 100%;
    background: #f39801;
    color: #fff;
  }

  .detail-menu.has-toggle ul {
    position: absolute;
    z-index: 10;
    display: none;
    width: 100%;
    border: 1px solid #eee;
    background: #fff;
    padding: 10px;
    -moz-box-shadow: 0 0 3px #ddd;
    -webkit-box-shadow: 0 0 3px #ddd;
    box-shadow: 0 0 3px #ddd;
  }

  .detail-menu.has-toggle li {
    width: 100%;
    display: block;
    padding: 10px;
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
  }

  .detail-menu.has-toggle li a {
    border: none !important;
  }

}

/*nodata*/
.nodata {
  min-height: 30vh;
  text-align: center;
  font-size: 1rem;
  padding: 50px 20px;
}

/* Index */
@media (min-width:992px) {
  #index .hr2 {
    display: none;
  }
}

.product-carousel {
  background: #fff;
  padding: 70px 0;

}
#pdetail .product-carousel{
  margin-bottom: 70px;
}
#pdetail .product-carousel.scroll-view{
  -webkit-animation: detailInUp 1.2s both;
  -o-animation: detailInUp 1.2s both;
  animation: detailInUp 1.2s both;
}
.product-carousel .btn-p-addiq{
  margin-top: 15px;
}

.product-carousel .title, .p-related .title {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 45px;
}

.product-carousel-slick .item {
  padding: 0 10px;
}

.product-carousel-slick .item a {
  display: block;
  outline: none;
  text-align: center;
}

.product-carousel-slick .item .pic {
  position: relative;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.product-carousel-slick .item .pic img {
  -webkit-backface-visibility: hidden;
  transition: transform .5s;
  -moz-transition: transform .5s;
  -webkit-transition: transform .5s;
}

.product-carousel-slick .item a:hover .pic img {
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

.product-carousel-slick .item .name {
  line-height: 32px;
  font-size: 1.125rem;
  color: #222;
  margin: 18px 0 0;
  transition: color .2s;
  -moz-transition: color .2s;
  -webkit-transition: color .2s;
  line-height: 1.5;
}

.product-carousel-slick .item a:hover .name {
  color: #009dd7;
}

.product-carousel-slick .item .info {
  line-height: 26px;
  font-size: 1rem;
  color: #222;
  margin: 4px 0 0;
}

.product-carousel-slick .slick-arrow {
  display: block;
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 34px;
  font-size: 0;
  border: none;
  background: rgba(255, 255, 255, 0);
  top: -17px;
  margin-top: calc(7.598% - 6.078px);
  overflow: hidden;
  perspective: 400px;
  -moz-perspective: 400px;
  -webkit-perspective: 400px;
  transition: border .4s;
  -moz-transition: border .4s;
  -webkit-transition: border .4s;
}

.product-carousel-slick .slick-prev {
  left: -34px;
  border-right: 1px solid #1b1b1b;
}

.product-carousel-slick .slick-next {
  right: -34px;
  border-left: 1px solid #1b1b1b;
}

.product-carousel-slick .slick-prev:hover, .product-carousel-slick .slick-next:hover {
  border-color: #009ddc;
}

.product-carousel-slick .slick-prev:before, .product-carousel-slick .slick-next:before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  border-style: solid;
  border-width: 5px;
  border-color: transparent transparent #1b1b1b #1b1b1b;
  top: 4px;
  left: 7px;
  transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}

.product-carousel-slick .slick-next:before {
  border-color: #1b1b1b #1b1b1b transparent transparent;
  left: auto;
  right: 7px;
}

.product-carousel-slick .slick-prev:hover:before, .product-carousel-slick .slick-next:hover:before {
  transform: rotateX(180deg) rotateZ(45deg);
  -moz-transform: rotateX(180deg) rotateZ(45deg);
  -webkit-transform: rotateX(180deg) rotateZ(45deg);
}

.product-carousel-slick .slick-prev:hover:before {
  border-color: transparent transparent #009ddc #009ddc;
}

.product-carousel-slick .slick-next:hover:before {
  border-color: #009ddc #009ddc transparent transparent;
}

@media (max-width:1579px) {
  .product-carousel-slick {
    padding: 0 40px;
  }

  .product-carousel-slick .slick-prev {
    left: 0;
  }

  .product-carousel-slick .slick-next {
    right: 0;
  }

}

@media (max-width:991px) {
  .product-carousel {
    padding: 40px 0;
  }

  .product-carousel .title, .p-related .title {
    font-size: 1.5rem;
  }

  .product-carousel-slick .item .name {
    line-height: 26px;
    font-size: 1rem;
    margin-top: 10px;
  }

  .product-carousel-slick .item .info {
    line-height: 24px;
    font-size: 0.9375rem;
  }

  .product-carousel-slick .slick-arrow {
    margin-top: calc(10.265% - 14.371px);
  }

}

@media (max-width:639px) {
  .product-carousel-slick .slick-arrow {
    margin-top: calc(15.397% - 18.477px);
  }

}

@media (max-width:480px) {
  .product-carousel-slick .slick-arrow {
    margin-top: calc(30.799% - 30.799px);
  }
  .p-related .title{
    margin-bottom: 30px;
  }
}

#index .product-category {
  padding-top: 75px;
}

@media (max-width:991px) {
  #index .product-category {
    padding-top: 50px;
  }

}

#index .dm-box {
  position: relative;
  height: 650px;
  overflow: hidden;
}

#index .dm-box > .pic {
  display: block;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
}

#index .dm-box .txt {
  position: absolute;
  z-index: 3;
  width: 440px;  /*background: url('../images/index_dm_txt.png') top center no-repeat;*/
  right: 50%;
  bottom: 85px;
  margin-right: 130px;
  text-align: center;  /*padding-top: 260px;*/
}

#index .dm-box .txt .pic {
  margin-bottom: 15px;
}

#index .dm-box .txt .title {
  max-width: 340px;
  line-height: 72px;
  font-size: 3.875rem;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
  margin: 0 auto;
}

#index .dm-box .txt .title.small {
  line-height: 52px;
  font-size: 2.875rem;
}

#index .dm-box .txt .info {
  line-height: 26px;
  font-size: 1.125rem;
  color: #fff;
  margin: 15px 0 0;
}

#index .dm-box .txt a.more {
  display: inline-block;
  line-height: 26px;
  font-size: 0.9375rem;
  color: #fff;
  background: #f39801;
  vertical-align: top;
  margin: 15px 0 0;
  padding: 11px 65px;
  text-transform: uppercase;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

#index .dm-box .txt a.more:hover {
  background: #ffa716;
}

@media (max-width:1199px) {
  #index .dm-box .txt {
    bottom: 30px;
    margin-right: 50px;
  }

}

@media (max-width:991px) {
  #index .dm-box {
    height: auto;
    padding: 40px 0;
  }

  #index .dm-box .txt {
    position: relative;
    width: 100%;    /*background-size: 314px 200px;*/
    padding: 0 15px;
    right: 0;
    bottom: auto;
    margin: 0;
  }

  #index .dm-box .txt .pic img {
    margin: auto;
  }

  #index .dm-box .txt .title {
    max-width: 100%;
    line-height: 46px;
    font-size: 2rem;
  }

  #index .dm-box > .pic {
    display: none !important;
  }

}

#index .related-website {
  padding: 75px 0;
}

#index .related-website .list {
  font-size: 0;
  margin-top: 40px;
}

#index .related-website .list li {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  margin-top: 40px;
  padding: 0 40px;
}

#index .related-website .list li a {
  display: block;
  text-align: center;
}

#index .related-website .list li a .pic {
  position: relative;
  overflow: hidden;
}

/*#index .related-website .list li a .pic:before {
content: '';
display: block;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25);
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
}
#index .related-website .list li a .pic:after {
content: '';
display: block;
position: absolute;
z-index: 2;
width: 22px;
height: 22px;
background: url('../images/header_opt.png') no-repeat;
background-size: 44px 22px;
background-position: -22px 0;
top: 50%;
left: 50%;
margin: -11px 0 0 -11px;
opacity: 0;
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
}
#index .related-website .list li a:hover .pic:before,
#index .related-website .list li a:hover .pic:after {
opacity: 1;
}*/
#index .related-website .list li a .pic img {
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
}

#index .related-website .list li a:hover .pic img {
  transform: scale(1.1) rotate(-1deg);
  -moz-transform: scale(1.1) rotate(-1deg);
  -webkit-transform: scale(1.1) rotate(-1deg);
}

#index .related-website .list li a .name {
  line-height: 28px;
  font-size: 1.125rem;
  color: #333;
  margin: 10px 0 0;
}

@media (max-width:1199px) {
  #index .related-website .list li {
    width: 33.333%;
  }

}

@media (max-width:991px) {
  #index .related-website {
    padding: 40px 0;
  }

  #index .related-website .list {
    margin-top: 20px;
  }

  #index .related-website .list li {
    margin-top: 20px;
    padding: 0 15px;
  }

}

@media (max-width:719px) {
  #index .related-website .list li {
    width: 50%;
  }

}

@media (max-width:480px) {
  #index .related-website .list li {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0;
  }

}

/* About Us */

/** Company **/
#company .sec-1 {
  position: relative;
  padding-bottom: 90px;
}

#company .sec-1 .g-title {
  margin-top: 20px;
  margin-bottom: 45px;
}

#company .sec-1 .g-title, #company .sec-1 .info {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .4s, transform .4s;
  -moz-transition: opacity .4s, transform .4s;
  -webkit-transition: opacity .4s, transform .4s;
}

#company .sec-1.scroll-view .g-title, #company .sec-1.scroll-view .info {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#company .sec-1 .info {
  transition-delay: .4s;
  -moz-transition-delay: .4s;
  -webkit-transition-delay: .4s;
}

#company .sec-1 .info p {
  line-height: 28px;
  font-size: 1.0625rem;  /*text-align: center;*/
  margin: 0;
}

#company .sec-1 .info p + p {
  margin-top: 28px;
}

#company .sec-2 {
  background: url('../images/company_sec2_bg.jpg');
  padding: 70px 0 0;
}

#company .sec-2.opened {
  padding-bottom: 70px;
}

#company .sec-2 .history {
  position: relative;
  margin-top: 40px;
}

#company .sec-2 .history:before {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 0;
  background: #000;
  top: 16px;
  left: 50%;
  transition: height .8s;
  -moz-transition: height .8s;
  -webkit-transition: height .8s;
}

#company .sec-2.view .history:before {
  height: calc(100% - 16px);
}

#company .sec-2 .history .list > li {
  position: relative;
  width: calc(50% - 30px);
}

#company .sec-2 .history .list > li:nth-child(n+11) {
  display: none;
}

#company .sec-2 .history .list > li:nth-child(odd) {
  margin-left: calc(50% + 30px);
}

#company .sec-2 .history .list > li:nth-child(even) {
  margin-right: calc(50% + 30px);
  text-align: right;
}

#company .sec-2 .history .list > li:before {
  content: '';
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
  top: 13px;
  opacity: 0;
  transform: scale(0) rotate(45deg);
  -moz-transform: scale(0) rotate(45deg);
  -webkit-transform: scale(0) rotate(45deg);
  transition: opacity .4s .8s, transform .4s .8s;
  -moz-transition: opacity .4s .8s, transform .4s .8s;
  -webkit-transition: opacity .4s .8s, transform .4s .8s;
}

#company .sec-2 .history .list > li.view:before {
  opacity: 1;
  transform: scale(1) rotate(45deg);
  -moz-transform: scale(1) rotate(45deg);
  -webkit-transform: scale(1) rotate(45deg);
}

#company .sec-2 .history .list > li:nth-child(odd):before {
  left: -33px;
}

#company .sec-2 .history .list > li:nth-child(even):before {
  background: #fff6e6;
  right: -34px;
}

#company .sec-2 .history .year {
  display: inline-block;
  position: relative;
  width: 135px;
  line-height: 32px;
  font-size: 1.5rem;
  border-bottom: 1px solid #000;
  vertical-align: top;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  -moz-transform: translateY(20px);
  -webkit-transform: translateY(20px);
  transition: color .2s, border .2s, opacity .4s .8s, transform .4s .8s;
  -moz-transition: color .2s, border .2s, opacity .4s .8s, transform .4s .8s;
  -webkit-transition: color .2s, border .2s, opacity .4s .8s, transform .4s .8s;
}

#company .sec-2 .history .list > li.view .year {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#company .sec-2 .history .list > li:hover .year {
  color: #0080cb;
  border-bottom-color: #0080cb;
}

#company .sec-2 .history .list > li.has-content:nth-child(odd) .year {
  padding-right: 10px;
}

#company .sec-2 .history .list > li.has-content:nth-child(even) .year {
  padding-left: 10px;
}

#company .sec-2 .history .content {
  position: relative;
  margin-top: 20px;
  padding: 0 15px;
  text-align: left;
}

#company .sec-2 .history .content:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 1px;
  background: #000;
  top: -21px;
  left: 135px;
  transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transition: width .2s linear 1.2s, background .2s;
  -moz-transition: width .2s linear 1.2s, background .2s;
  -webkit-transition: width .2s linear 1.2s, background .2s;
}

#company .sec-2 .history .list > li.has-content:nth-child(even) .content:before {
  left: auto;
  right: 135px;
  transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#company .sec-2 .history .list > li.view .content:before {
  width: 16px;
}

#company .sec-2 .history .list > li:hover .content:before {
  background: #0080cb;
}

#company .sec-2 .history .content:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 1px;
  background: #000;
  top: -32px;
  left: 145px;
  transition: width .6s ease-out 1.4s, background .2s;
  -moz-transition: width .6s ease-out 1.4s, background .2s;
  -webkit-transition: width .6s ease-out 1.4s, background .2s;
}

#company .sec-2 .history .list > li.has-content:nth-child(even) .content:after {
  left: auto;
  right: 145px;
}

#company .sec-2 .history .list > li.view .content:after {
  width: calc(100% - 145px);
}

#company .sec-2 .history .list > li:hover .content:after {
  background: #0080cb;
}

#company .sec-2 .history .content {
  opacity: 0;
  transition: opacity .4s 1.2s;
  -moz-transition: opacity .4s 1.2s;
  -webkit-transition: opacity .4s 1.2s;
}

#company .sec-2 .history .list > li.view .content {
  opacity: 1;
}

#company .sec-2 .history .content li {
  line-height: 26px;
  font-size: 1rem;
  padding: 2px 0;
  transition: color .2s;
  -moz-transition: color .2s;
  -webkit-transition: color .2s;
}

#company .sec-2 .history .content li:hover {
  color: #0080cb;
}

#company .sec-2 .more {
  display: block;
  position: relative;
  line-height: 50px;
  font-size: 2rem;
  color: #fff;
  background: #808080;
  text-align: center;
  margin-top: 20px;
  padding: 60px 30px;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

#company .sec-2 .more:hover {
  background: #666;
}

#company .sec-2 .more:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #808080 transparent;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  transition: border .2s;
  -moz-transition: border .2s;
  -webkit-transition: border .2s;
}

#company .sec-2 .more:hover:before {
  border-bottom-color: #666;
}

#company .sec-2 .more #aw-ani {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: top;
}

#company .sec-2 .more #aw-ani .arrow {
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation: arrow 1.5s 0s ease infinite;
  -moz-animation: arrow 1.5s 0s ease infinite;
  -ms-animation: arrow 1.5s 0s ease infinite;
  -o-animation: arrow 1.5s 0s ease infinite;
  animation: arrow 1.5s 0s ease infinite;
}

#company .sec-2 .more #aw-ani .p3 {
  opacity: 0;
  -webkit-animation: show-2 1.5s 0s ease infinite;
  -moz-animation: show-2 1.5s 0s ease infinite;
  -ms-animation: show-2 1.5s 0s ease infinite;
  -o-animation: show-2 1.5s 0s ease infinite;
  animation: show-2 1.5s 0s ease infinite;
}

#company .sec-2 .more #aw-ani .p2 {
  opacity: 0;
  -webkit-animation: show-1 1.5s 0s ease infinite;
  -moz-animation: show-1 1.5s 0s ease infinite;
  -ms-animation: show-1 1.5s 0s ease infinite;
  -o-animation: show-1 1.5s 0s ease infinite;
  animation: show-1 1.5s 0s ease infinite;
}

#company .sec-3 {
  padding: 70px 0 90px;
}

#company .sec-3.no-pt {
  padding-top: 0;
}

#company .sec-3 .g-title {
  margin-bottom: 45px;
}

#company .sec-3 .g-title, #company .sec-3 .content {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .4s, transform .4s;
  -moz-transition: opacity .4s, transform .4s;
  -webkit-transition: opacity .4s, transform .4s;
}

#company .sec-3.scroll-view .g-title, #company .sec-3.scroll-view .content {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#company .sec-3.scroll-view .content {
  transition-delay: .4s;
  -moz-transition-delay: .4s;
  -webkit-transition-delay: .4s;
}

#company .sec-3 .album {
  float: left;
  width: calc(50% - 15px);
}

#company .sec-3 .album-slick .slick-dots {
  position: absolute;
  height: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

#company .sec-3 .album-slick .slick-dots li {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}

#company .sec-3 .album-slick .slick-dots li button {
  display: block;
  width: 12px;
  height: 12px;
  font-size: 0;
  border: none;
  background: #fff;
  border-radius: 100%;
}

#company .sec-3 .album-slick .slick-dots li.slick-active button {
  background: #006ebc;
}

#company .sec-3 .info {
  float: right;
  width: calc(50% - 15px);
}

#company .sec-3 .info .clearfix {
  border-top: 1px solid #ccc;
  background: url('../images/company_sec3_shadow.jpg') top center no-repeat;
  background-size: 100% 15px;
  padding-top: 15px;
}

#company .sec-3 .box {
  float: left;
  width: calc(45% - 15px);
  padding: 10px 0 20px;
}

#company .sec-3 .box:nth-child(even) {
  width: calc(55% - 15px);
}

#company .sec-3 .box.full {
  float: none;
  width: 100%;
}

#company .sec-3 .info-title {
  position: relative;
  line-height: 32px;
  font-size: 1.25rem;
  margin: 0;
  padding-left: 25px;
}

#company .sec-3 .info-title:before {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  background: #f39801;
  border-radius: 100%;
  top: 9px;
  left: 0;
}

#company .sec-3 .info-title:after {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #fff;
  background: #009ddc;
  border-radius: 100%;
  top: 9px;
  left: 6px;
}

#company .sec-3 .info-txt {
  line-height: 28px;
  font-size: 1rem;
  margin: 0;
  padding-left: 25px;
}

#company .sec-3 .info-txt a {
  color: #333;
}

#company .sec-3 .info-txt a:hover {
  color: #0080cb;
}

#company .sec-3 .info-txt a i.fa {
  color: #f39801;
}

#company .sec-3 .info-txt a:hover i.fa {
  color: #f26900;
}

@media (max-width:1199px) {
  #company .sec-3 .box {
    float: none;
    width: 100%;
  }

  #company .sec-3 .box:nth-child(even) {
    width: 100%;
    border-top: 1px solid #ccc;
    background: url(../images/company_sec3_shadow.jpg) top center no-repeat;
    background-size: 100% 15px;
    padding-top: 25px;
  }

}

@media (max-width:991px) {
  #company .sec-1 {
    padding-bottom: 60px;
  }

  #company .sec-1 .g-title {
    margin-bottom: 25px;
  }

  #company .sec-1 .info p {
    line-height: 26px;
    font-size: 1rem;
  }

  #company .sec-2 {
    padding: 40px 0 0;
  }

  #company .sec-2.opened {
    padding-bottom: 40px;
  }

  #company .sec-2 .more {
    line-height: 40px;
    font-size: 1.5rem;
    padding: 30px 15px;
  }

  #company .sec-2 .more #aw-ani {
    width: 35px;
    height: 40px;
  }

  #company .sec-3 {
    padding: 40px 0;
  }

  #company .sec-3 .g-title {
    margin-bottom: 25px;
  }

  #company .sec-3 .album {
    float: none;
    width: 100%;
    max-width: 760px;
    margin: auto;
  }

  #company .sec-3 .info {
    float: none;
    width: 100%;
    margin-top: 15px;
    padding: 0;
  }

}

@media (max-width:767px) {
  #company .sec-2 .history {
    height: auto !important;
    margin-top: 20px;
    padding-bottom: 20px;
  }

  #company .sec-2 .history:before {
    left: 5px;
  }

  #company .sec-2 .history .list > li {
    width: 100%;
    margin: 0 0 20px !important;
    padding-left: 20px;
    text-align: left !important;
  }

  #company .sec-2 .history .list > li:before {
    left: 2px !important;
  }

  #company .sec-2 .history .list > li.has-content:nth-child(even) .year {
    padding-left: 0;
    padding-right: 10px;
  }

  #company .sec-2 .history .list > li.view .content {
    margin-top: 10px;
    padding: 0;
  }

  #company .sec-2 .history .content:before {
    top: -11px;
  }

  #company .sec-2 .history .list > li.has-content:nth-child(even) .content:before {
    left: 135px;
    right: auto;
    transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -webkit-transform-origin: left bottom;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  #company .sec-2 .history .content:after {
    top: -22px;
  }

  #company .sec-2 .history .list > li.has-content:nth-child(even) .content:after {
    left: 145px;
    right: auto;
  }

  #company .sec-2 .more:before {
    left: 10px;
    margin-left: 0;
  }

}

/** ISO **/
#iso {
  background: #eee;
  padding-bottom: 100px;
}

#iso .iso-slick {
  margin-top: 50px;
  padding: 0 50px;
  opacity: 0;
  transition: opacity .5s .5s;
  -moz-transition: opacity .5s .5s;
  -webkit-transition: opacity .5s .5s;
}

#iso .inner.scroll-view .iso-slick {
  opacity: 1;
}

#iso .iso-slick .item {
  text-align: center;
}

#iso .iso-slick .item .name {
  display: inline-block;
  line-height: 30px;
  font-size: 1.25rem;
  border-bottom: 1px solid #000;
  vertical-align: top;
  margin: 0 0 40px;
  padding: 3px 0;
}

#iso .iso-slick .item .pic img {
  margin: auto;
}

#iso .iso-slick .slick-arrow {
  display: block;
  position: absolute;
  width: 38px;
  height: 110px;
  font-size: 0;
  border: none;
  background: rgba(0, 0, 0, .9);
  top: 50%;
  margin-top: -55px;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

#iso .iso-slick .slick-arrow:hover {
  background: rgba(27, 146, 203, .75);
}

#iso .iso-slick .slick-prev {
  border-right: 3px solid #1b92cb;
  left: 0;
}

#iso .iso-slick .slick-prev:before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  top: 45px;
  left: 12px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#iso .iso-slick .slick-next {
  border-left: 3px solid #1b92cb;
  right: 0;
}

#iso .iso-slick .slick-next:before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  top: 45px;
  right: 12px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

@media (max-width:991px) {
  #iso {
    padding-bottom: 60px;
  }

  #iso .iso-slick {
    margin-top: 30px;
  }

  #iso .iso-slick .item .name {
    line-height: 26px;
    font-size: 1rem;
    margin-bottom: 20px;
  }

}

/** Trademark **/
#trademark .trademark-inner-wrap {
  overflow: hidden;
}

#trademark .inner {
  position: relative;
  margin-top: -40px;
  padding-top: 40px;
  padding-bottom: 100px;
}

#trademark .text {
  position: relative;
  margin-top: 50px;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .5s .5s, transform .5s .5s;
  -moz-transition: opacity .5s .5s, transform .5s .5s;
  -webkit-transition: opacity .5s .5s, transform .5s .5s;
}

#trademark .inner.scroll-view .text {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#trademark .text p {
  line-height: 28px;
  font-size: 1.0625rem;
  margin-bottom: 28px;
}

#trademark .text p.no-mg {
  margin-bottom: 0;
}

#trademark .text p strong {
  line-height: 32px;
  font-size: 1.25rem;
}

#trademark .text p strong.normal {
  line-height: 28px;
  font-size: 1.0625rem;
}

#trademark .text p img {
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
}

#trademark .text ul {
  margin: 0 0 28px;
  padding-left: 20px;
  line-height: 28px;
  font-size: 1.0625rem;
}

@media (max-width:991px) {
  #trademark .inner {
    padding-bottom: 60px;
  }

  #trademark .text p {
    line-height: 26px;
    font-size: 0.9375rem;
    margin-bottom: 20px;
  }

  #trademark .text p strong {
    line-height: 30px;
    font-size: 1rem;
  }

  #trademark .text p img {
    height: 50px;
  }

}

/** RMA **/
#rma .text {
  position: relative;
  margin: 50px auto 70px;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .5s, transform .5s;
  -moz-transition: opacity .5s, transform .5s;
  -webkit-transition: opacity .5s, transform .5s;
}

#rma .text.scroll-view {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#rma .text p {
  line-height: 28px;
  font-size: 1rem;
  margin: 0 0 28px;
}

#rma .text p.center {
  text-align: center;
}

#rma .text .text-title {
  line-height: 32px;
  font-size: 1.5rem;
  text-align: center;
  margin: 15px 0;
}

#rma .text table {
  width: 100%;
  border: 1px solid #313131;
  background: #f7f7f7;
  border-collapse: collapse;
  table-layout: fixed;
}

#rma .text table td {
  line-height: 28px;
  font-size: 1.0625rem;
  border: 1px solid #313131;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

#rma .bot {
  position: relative;
  background: #f8f8f8;
}

#rma .bot .pic {
  position: absolute;
  width: 33.333%;
  height: 100%;  /*background: url('../images/rma_pic.jpg') center no-repeat;*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  top: 0;
  left: 0;
}

#rma .bot .txt {
  float: right;
  width: 66.667%;
  line-height: 28px;
  font-size: 1rem;
  padding: 100px 125px;
}

#rma .bot .txt > div {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .5s, transform .5s;
  -moz-transition: opacity .5s, transform .5s;
  -webkit-transition: opacity .5s, transform .5s;
}

#rma .bot .txt > div.scroll-view {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#rma .bot .txt p {
  line-height: 32px;
  font-size: 1.25rem;
  margin: 0 0 25px;
}

#rma .bot .txt ul.main {
  margin-bottom: 25px;
}

#rma .bot .txt ul.main > li {
  position: relative;
  padding-left: 40px;
}

#rma .bot .txt ul.main > li + li {
  margin-top: 20px;
}

#rma .bot .txt ul.main > li:before {
  content: attr(data-no);
  display: block;
  position: absolute;
  width: 28px;
  height: 28px;
  color: #fff;
  background: #f39801;
  border-radius: 100%;
  text-align: center;
  top: 0;
  left: 0;
}

#rma .bot .txt ul.sub > li {
  position: relative;
  padding-left: 15px;
}

#rma .bot .txt ul.sub > li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 1px;
  background: #333;
  top: 13px;
  left: 0;
}

@media (max-width:1199px) {
  #rma .bot .txt {
    padding: 50px;
  }

}

@media (max-width:991px) {
  #rma .text {
    margin: 30px auto 40px;
  }

  #rma .text .text-title {
    line-height: 28px;
    font-size: 1.125rem;
  }

  #rma .text table td {
    font-size: 1rem;
  }

  #rma .bot .txt {
    padding: 20px 30px;
  }

  #rma .bot .txt p {
    line-height: 28px;
    font-size: 1.0625rem;
    margin: 0 0 15px;
  }

  #rma .bot .txt ul.main {
    margin: 0 0 15px;
  }

  #rma .bot .txt ul.main > li + li {
    margin-top: 10px;
  }

}

@media (max-width:767px) {
  #rma .bot .pic {
    position: relative;
    width: 100%;
    height: 240px;
    background-position: center 35%;
  }

  #rma .bot .txt {
    float: none;
    width: 100%;
    padding-bottom: 40px;
  }

}

/** Where to Buy **/
#wheretobuy {
  background: #f4f4f4;
}

#wheretobuy .top {
  padding-bottom: 75px;
}

#wheretobuy .map .map-pic {
  position: relative;
  height: 0;
  padding-bottom: 50%;
  overflow: hidden;
}

#wheretobuy .map .map-pic img {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

#wheretobuy .map .map-pic img.map-effect {
  height: 100%;
}

#wheretobuy .map #map-img.asia {
  top: -100% !important;
}

#wheretobuy .map #map-img.europe {
  top: -200% !important;
}

#wheretobuy .map #map-img.america {
  top: -300% !important;
}

#wheretobuy .map #map-img.meandaf {
  top: -400% !important;
}

#wheretobuy .map-select.mb {
  display: none;
}

#wheretobuy .country-list {
  display: none;
  margin-top: 30px;
}

#wheretobuy .country-list .region {
  line-height: 34px;
  font-size: 1.875rem;
  border-bottom: 1px solid #898989;
  margin: 0 0 15px;
  padding-bottom: 10px;
}

#wheretobuy .country-list .list {
  font-size: 0;
}

#wheretobuy .country-list .list li {
  display: inline-block;
  width: calc(20% - 16px);
  vertical-align: top;
  margin-top: 10px;
  margin-right: 20px;
}

#wheretobuy .country-list .list li:nth-child(5n) {
  margin-right: 0;
}

#wheretobuy .country-list .list li.no-data {
  width: 100%;
  line-height: 30px;
  font-size: 1rem;
  color: #ccc;
  margin-right: 0;
  padding: 10px;
  text-align: center;
}

#wheretobuy .country-list .list li a {
  display: block;
}

#wheretobuy .country-list .list li a img {
  display: inline-block;
  vertical-align: top;
}

#wheretobuy .country-list .list li a span {
  display: inline-block;
  width: calc(100% - 75px);
  line-height: 26px;
  font-size: 1rem;
  color: #222;
  vertical-align: top;
  margin-left: 15px;
  padding: 5px 0;
}

#wheretobuy .country-list .list li a:hover span {
  color: #009ddc;
}

#wheretobuy .store-list {
  display: none;
  background: #1b92cb;
  padding: 70px 0 90px;
}

#wheretobuy .store-list .country {
  line-height: 34px;
  font-size: 1.875rem;
  color: #fff;
  margin: 0;
}

#wheretobuy .store-list .head {
  font-size: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-top: 15px;
}

#wheretobuy .store-list .head > div {
  display: inline-block;
  line-height: 26px;
  font-size: 0.875rem;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  padding: 7px 10px;
}

#wheretobuy .store-list .head .name, #wheretobuy .store-list .item .name {
  width: 300px;
}

/*#wheretobuy .store-list .head .address,
#wheretobuy .store-list .item .address {
width: calc(100% - 950px);
}*/
#wheretobuy .store-list .head .address, #wheretobuy .store-list .item .address {
  width: calc(100% - 730px);
}

#wheretobuy .store-list .head .phone, #wheretobuy .store-list .item .phone, #wheretobuy .store-list .head .fax, #wheretobuy .store-list .item .fax {
  width: 220px;
}

#wheretobuy .store-list .head .ico, #wheretobuy .store-list .item .ico {
  width: 70px;
}

#wheretobuy .store-list .item {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding: 10px 0;
}

#wheretobuy .store-list .item > div {
  display: table-cell;
  line-height: 26px;
  font-size: 0.875rem;
  color: #fff;
  vertical-align: middle;
  padding: 10px 30px;
}

#wheretobuy .store-list .item > div + div {
  border-left: 1px solid rgba(255, 255, 255, .5);
}

#wheretobuy .store-list .item .name {
  font-size: 1rem;
  padding-left: 0;
}

#wheretobuy .store-list .item .phone, #wheretobuy .store-list .item .ico {
  text-align: center;
}

#wheretobuy .store-list .item .ico {
  padding: 10px;
}

#wheretobuy .store-list .item .ico a {
  display: inline-block;
  position: relative;
  width: 34px;
  height: 34px;
  font-size: 0;
  vertical-align: top;
}

#wheretobuy .store-list .item .ico a:hover {
  opacity: .75;
}

#wheretobuy .store-list .item .ico a:before {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  background: url('../images/wheretobuy_ico.png') no-repeat;
  background-size: 102px 34px;
  top: 0;
  left: 0;
}

#wheretobuy .store-list .item .ico.map a:before {
  background-position: 0 0;
}

#wheretobuy .store-list .item .ico.mail a:before {
  background-position: -34px 0;
}

#wheretobuy .store-list .item .ico.link a:before {
  background-position: -68px 0;
}

#wheretobuy .store-list .no-data {
  line-height: 30px;
  font-size: 1rem;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  padding: 10px;
}

#wheretobuy .store-list .pagers {
  margin-top: 30px;
}

#wheretobuy .store-list .pagers a {
  color: #fff;
  border-color: #fff;
}

#wheretobuy .store-list .pagers a:hover {
  background: rgba(255, 255, 255, .15);
}

#wheretobuy .store-list .pagers a.on {
  color: #009ddc;
  border-color: #fff;
  background: #fff;
}

#wheretobuy .store-list .pagers a.prev, #wheretobuy .store-list .pagers a.next {
  color: rgba(255, 255, 255, .75);
}

#wheretobuy .store-list .pagers a.prev:hover, #wheretobuy .store-list .pagers a.next:hover {
  color: #fff;
  background: none;
}

@media (max-width:1199px) {
  #wheretobuy .country-list .list li {
    width: calc(25% - 15px);
  }

  #wheretobuy .country-list .list li:nth-child(5n) {
    margin-right: 20px;
  }

  #wheretobuy .country-list .list li:nth-child(4n) {
    margin-right: 0;
  }

  #wheretobuy .store-list .item > div {
    padding: 10px 15px;
  }

  #wheretobuy .store-list .head .name, #wheretobuy .store-list .item .name {
    width: 220px;
  }

  #wheretobuy .store-list .head .phone, #wheretobuy .store-list .item .phone, #wheretobuy .store-list .head .fax, #wheretobuy .store-list .item .fax {
    width: 180px;
  }

  /*#wheretobuy .store-list .head .address,
  #wheretobuy .store-list .item .address {
    width: calc(100% - 790px);
  }*/
  #wheretobuy .store-list .head .address, #wheretobuy .store-list .item .address {
    width: calc(100% - 610px);
  }

}

@media (max-width:1024px) {
  #wheretobuy .map.pc {
    display: none;
  }

  #wheretobuy .map-select.mb {
    display: block;
    font-size: 0;
  }

  #wheretobuy .map-select a {
    display: inline-block;
    position: relative;
    width: calc(50% - 5px);
    height: 60px;
    background: #92959c;
    border-radius: 3px;
    text-align: center;
    vertical-align: top;
    margin-bottom: 10px;
    padding: 0 10px;
    transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s;
  }

  #wheretobuy .map-select a:nth-child(even) {
    margin-left: 10px;
  }

  #wheretobuy .map-select a:hover, #wheretobuy .map-select a.current {
    background: #1b92cb;
  }

  #wheretobuy .map-select a span {
    display: block;
    position: relative;
    line-height: 26px;
    font-size: 1rem;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }

}

@media (max-width:991px) {
  #wheretobuy .top {
    padding-bottom: 40px;
  }

  #wheretobuy .country-list .region {
    line-height: 30px;
    font-size: 1.25rem;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #wheretobuy .country-list .list li {
    width: calc(33.333% - 13.333px);
  }

  #wheretobuy .country-list .list li:nth-child(4n) {
    margin-right: 20px;
  }

  #wheretobuy .country-list .list li:nth-child(3n) {
    margin-right: 0;
  }

  #wheretobuy .country-list .list li a span {
    font-size: 0.9375rem;
  }

  #wheretobuy .store-list {
    padding: 40px 0 60px;
  }

  #wheretobuy .store-list .country {
    line-height: 30px;
    font-size: 1.25rem;
    margin-bottom: 10px;
  }

  #wheretobuy .store-list .head {
    display: none;
  }

  #wheretobuy .store-list .item {
    display: block;
    font-size: 0;
  }

  #wheretobuy .store-list .head + .item {
    border-top: 1px solid rgba(255, 255, 255, .5);
  }

  #wheretobuy .store-list .item > div {
    display: block;
    width: 100% !important;
    min-height: 30px;
    position: relative;
    padding: 2px 5px 2px 90px !important;
  }

  #wheretobuy .store-list .item > div + div {
    border-left: none;
  }

  #wheretobuy .store-list .item .name {
    font-size: 0.875rem;
  }

  #wheretobuy .store-list .item .phone {
    text-align: left;
  }

  #wheretobuy .store-list .item .name:before, #wheretobuy .store-list .item .address:before, #wheretobuy .store-list .item .phone:before {
    display: block;
    position: absolute;
    top: 2px;
    left: 5px;
  }

  #wheretobuy .store-list .item .name:before {
    content: 'Name:';
  }

  #wheretobuy .store-list .item .address:before {
    content: 'Address:';
  }

  #wheretobuy .store-list .item .phone:before {
    content: 'Telephone:';
  }

  #wheretobuy .store-list .item .fax:before {
    content: 'Fax:';
  }

  #wheretobuy .store-list .item .ico {
    display: inline-block;
    width: calc(33.333% - 6.667px) !important;
    margin-top: 5px;
    padding: 0 !important;
    vertical-align: top;
  }

  #wheretobuy .store-list .item .ico + .ico {
    margin-left: 10px;
  }

  #wheretobuy .store-list .item .ico a {
    display: block;
    width: 100%;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 3px;
  }

  #wheretobuy .store-list .item .ico a:before {
    left: 50%;
    margin-left: -17px;
  }

}

@media (max-width:767px) {
  #wheretobuy .country-list .list li {
    width: calc(50% - 10px);
  }

  #wheretobuy .country-list .list li:nth-child(3n) {
    margin-right: 20px;
  }

  #wheretobuy .country-list .list li:nth-child(even) {
    margin-right: 0;
  }

}

@media (max-width:479px) {
  #wheretobuy .country-list .list li {
    width: 100%;
    margin-right: 0 !important;
  }

}

/* Marketing */

/** Banner **/
#marketing {
  padding-bottom: 100px;
}

#marketing .banner-list {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .5s .5s, transform .5s .5s;
  -moz-transition: opacity .5s .5s, transform .5s .5s;
  -webkit-transition: opacity .5s .5s, transform .5s .5s;
}

#marketing .banner-list.scroll-view {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#marketing .banner-list .year-select {
  border: 1px solid #dcdcdc;
  border-bottom: none;
  background: #9fd1e6;
  padding: 9px;
  text-align: right;
}

#marketing .banner-list .year-select select {
  display: inline-block;
  width: 190px;
  height: 36px;
  border: 1px solid #dcdcdc;
  font-size: 0.9375rem;
  background: #fff url('../images/select_arrow.png') 166px center no-repeat;
  background-size: 12px 8px;
  padding: 0 25px 0 10px;
  vertical-align: top;
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

#marketing .banner-list .year-select select::-ms-expand {
  display: none;
}

#marketing .banner-list .year-select select:focus {
  border-color: #f39801;
}

#marketing .banner-list .no-data {
  line-height: 26px;
  font-size: 0.9375rem;
  color: #999;
  padding: 50px 0;
  text-align: center;
}

#marketing .banner-table {
  width: 100%;
  border: 1px solid #dcdcdc;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 40px;
}

#marketing .banner-table thead th {
  line-height: 26px;
  font-size: 1rem;
  border-bottom: 1px solid #dcdcdc;
  background: #e9e9e9;
  text-align: center;
  vertical-align: middle;
  padding: 12px 10px;
}

#marketing .banner-table thead th + th {
  border-left: 1px solid #fff;
}

#marketing .banner-table thead th.pic {
  width: 30%;
}

#marketing .banner-table thead th.title {
  width: 25%;
}

#marketing .banner-table thead th.size {
  width: 20%;
}

#marketing .banner-table thead th.date {
  width: 15%;
}

#marketing .banner-table thead th.download {
  width: 10%;
}

#marketing .banner-table tbody td {
  line-height: 26px;
  font-size: 1rem;
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  padding: 40px 15px;
}

#marketing .banner-table tbody td a.download-btn {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  font-size: 0;
  border: 1px solid #333;
  background: #fff;
  border-radius: 100%;
  vertical-align: top;
  transition: background .2s, box-shadow .2s;
  -moz-transition: background .2s, box-shadow .2s;
  -webkit-transition: background .2s, box-shadow .2s;
}

#marketing .banner-table tbody td a.download-btn:hover {
  background: #eee;
  box-shadow: 0 0 4px rgba(0, 0, 0, .25);
}

#marketing .banner-table tbody td a.download-btn:before {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('../images/marketing_download.png') no-repeat;
  background-size: cover;
  top: 7px;
  left: 7px;
}

@media (max-width:1199px) {
  #marketing .banner-table tbody td {
    padding: 20px 10px;
  }

}

@media (max-width:991px) {
  #marketing {
    padding-bottom: 60px;
  }

  /*#marketing .banner-list .year-select {
    text-align: center;
  }*/
  #marketing .banner-table, #marketing .banner-table tbody, #marketing .banner-table tr, #marketing .banner-table td {
    display: block;
  }

  #marketing .banner-table thead {
    display: none;
  }

  #marketing .banner-table tbody tr {
    font-size: 0;
    padding: 10px;
  }

  #marketing .banner-table tbody tr + tr {
    border-top: 1px solid #dcdcdc;
  }

  #marketing .banner-table tbody td {
    display: inline-block;
    width: 50%;
    position: relative;
    line-height: 32px;
    font-size: 0.9375rem;
    border: none;
    padding: 0;
    vertical-align: top;
  }

  #marketing .banner-table tbody td:first-child {
    width: 100%;
    margin-bottom: 10px;
  }

  #marketing .banner-table tbody td:not(:first-child) {
    text-align: left;
    padding: 2px 0 2px 95px;
  }

  #marketing .banner-table tbody td:not(:first-child):before {
    content: attr(data-title)':';
    display: block;
    position: absolute;
    top: 2px;
    left: 10px;
  }

  #marketing .banner-table tbody td img {
    max-height: 300px;
    margin: auto;
  }

}

@media (max-width:640px) {
  #marketing .banner-table tbody td {
    width: 100%;
    line-height: 26px;
  }

  #marketing .banner-table tbody td:last-child:before {
    top: 5px;
  }

}

/** Catalogues & DM **/
#marketing .dm-inner {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .5s .5s, transform .5s .5s;
  -moz-transition: opacity .5s .5s, transform .5s .5s;
  -webkit-transition: opacity .5s .5s, transform .5s .5s;
}

#marketing .dm-inner.scroll-view {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#marketing .dm-select {
  font-size: 0;
}

#marketing .dm-select li {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

#marketing .dm-select li + li {
  border-left: 1px solid #fff;
}

#marketing .dm-select li a {
  display: block;
  line-height: 26px;
  font-size: 1rem;
  color: #333;
  background: #e9e9e9;
  text-align: center;
  padding: 12px 10px;
}

#marketing .dm-select li a:hover {
  background: #eee;
}

#marketing .dm-select li.current a {
  color: #fff;
  background: #a0a0a0;
}

#marketing .dm-box {
  position: relative;
  border: 1px solid #dcdcdc;
  border-top: none;
}

#marketing .dm-box:before {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background: #dcdcdc;
  top: 0;
  left: 264px;
}

#marketing .dm-box .dm-menu {
  float: left;
  width: 265px;
  padding: 30px 25px;
}

#marketing .dm-box .dm-menu-main > li {
  position: relative;
}

#marketing .dm-box .dm-menu-main > li > a {
  display: block;
  position: relative;
  line-height: 26px;
  font-size: 1.125rem;
  color: #333;
  border-bottom: 1px solid #707070;
  padding: 7px 20px 7px 0;
}

#marketing .dm-box .dm-menu-main > li > a:hover {
  color: #009ddc;
}

#marketing .dm-box .dm-menu-main > li.has-menu > a:before {
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  top: 50%;
  right: 6px;
  margin-top: -6px;
  transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

#marketing .dm-box .dm-menu-main > li.has-menu.current > a:before {
  margin-top: -3px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#marketing .dm-box .dm-menu-main > li:not(.current) > .dm-menu-sub {
  display: none;
}

#marketing .dm-box .dm-menu-sub > li {
  position: relative;
}

#marketing .dm-box .dm-menu-sub > li:after {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background: #f39801;
  border-radius: 100%;
  top: 15px;
  left: 5px;
  pointer-events: none;
}

#marketing .dm-box .dm-menu-sub > li > a {
  display: block;
  position: relative;
  line-height: 25px;
  font-size: 1rem;
  color: #333;
  border-bottom: 1px solid #dbd9d9;
  padding: 5px 20px 5px 25px;
}

#marketing .dm-box .dm-menu-sub > li > a:hover {
  background: #fafafa;
}

#marketing .dm-box .dm-menu-sub > li.has-menu > a:before {
  content: '';
  display: block;
  position: absolute;
  width: 9px;
  height: 1px;
  background: #f39801;
  top: 17px;
  right: 6px;
}

#marketing .dm-box .dm-menu-sub > li.has-menu:not(.current) > a:after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 9px;
  background: #f39801;
  top: 13px;
  right: 10px;
}

#marketing .dm-box .dm-menu-sub > li:not(.current) > .dm-menu-grand {
  display: none;
}

#marketing .dm-box .dm-menu-grand > li {
  position: relative;
}

#marketing .dm-box .dm-menu-grand > li > a {
  display: block;
  line-height: 25px;
  font-size: 0.9375rem;
  color: #333;
  border-bottom: 1px solid #dbd9d9;
  background: #eee;
  padding: 5px 5px 5px 40px;
}

#marketing .dm-box .dm-menu-grand > li > a:hover {
  background: #eaeaea;
}

#marketing .dm-box .dm-menu-grand > li.current > a {
  color: #fff;
  background: #f39801;
}

#marketing .dm-box .dm-content {
  float: right;
  width: calc(100% - 265px);
}

#marketing .dm-box .dm-search {
  font-size: 0;
  border-bottom: 1px solid #dcdcdc;
  padding: 35px;
}

#marketing .dm-box .dm-search input {
  display: inline-block;
  width: calc(100% - 60px);
  height: 40px;
  line-height: 38px;
  font-size: 0.9375rem;
  border: 1px solid #333;
  background: #fff;
  border-radius: 2px 0 0 2px;
  padding: 0 15px;
  transition: border .2s;
  -moz-transition: border .2s;
  -webkit-transition: border .2s;
}

#marketing .dm-box .dm-search input:focus {
  border-color: #009ddc;
}

#marketing .dm-box .dm-search button {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 40px;
  font-size: 0;
  border: none;
  background: #333;
  border-radius: 0 2px 2px 0;
  vertical-align: top;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

#marketing .dm-box .dm-search button:hover {
  background: #009ddc;
}

#marketing .dm-box .dm-search button:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  background: url('../images/header_opt.png') -22px 0 no-repeat;
  background-size: 44px 22px;
  top: 9px;
  left: 19px;
}

#marketing .dm-box .dm-list .no-data {
  line-height: 26px;
  font-size: 0.9375rem;
  color: #999;
  text-align: center;
  padding: 50px 15px;
}

#marketing .dm-box .dm-item {
  position: relative;
  font-size: 0;
  border-bottom: 1px solid #dcdcdc;
}

#marketing .dm-box .dm-item:before {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background: #dcdcdc;
  top: 0;
  left: 289px;
}

#marketing .dm-box .dm-item .pic {
  display: inline-block;
  width: 290px;
  padding: 15px;
  vertical-align: top;
}

#marketing .dm-box .dm-item .pic img {
  max-height: 240px;
  margin: auto;
}

#marketing .dm-box .dm-item .name {
  display: inline-block;
  width: calc(100% - 290px);
  line-height: 26px;
  font-size: 1rem;
  vertical-align: top;
  margin: 0;
  padding: 55px 35px 105px 35px;
}

#marketing .dm-box .dm-item .links {
  position: absolute;
  width: calc(100% - 290px);
  right: 0;
  bottom: 0;
}

#marketing .dm-box .dm-item .links a {
  display: inline-block;
  width: 50%;
  height: 50px;
  line-height: 32px;
  font-size: 1rem;
  color: #fff;
  text-align: center;
  vertical-align: top;
  padding: 9px 10px;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

#marketing .dm-box .dm-item .links a.dm-read {
  background: #0198d9;
}

#marketing .dm-box .dm-item .links a.dm-read:hover {
  background: rgba(1, 152, 217, .85);
}

#marketing .dm-box .dm-item .links a.dm-download {
  background: #f39801;
}

#marketing .dm-box .dm-item .links a.dm-download:hover {
  background: rgba(243, 152, 1, .85);
}

#marketing .dm-box .dm-item .links a:before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('../images/dm_links_ico.png') no-repeat;
  background-size: 64px 32px;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
}

#marketing .dm-box .dm-item .links a.dm-read:before {
  background-position: 0 0;
}

#marketing .dm-box .dm-item .links a.dm-download:before {
  background-position: -32px 0;
}

#marketing .dm-box .pagers {
  margin: 50px 0;
}

@media (max-width:1199px) {
  #marketing .dm-box .dm-item:before {
    left: 199px;
  }

  #marketing .dm-box .dm-item .pic {
    width: 200px;
  }

  #marketing .dm-box .dm-item .name {
    width: calc(100% - 200px);
    padding: 30px 15px 80px;
  }

  #marketing .dm-box .dm-item .links {
    width: calc(100% - 200px);
  }

}

@media (min-width:992px) {
  #marketing .dm-box .dm-menu-main {
    display: block !important;
  }

}

@media (max-width:991px) {
  #marketing .dm-box:before {
    display: none;
  }

  #marketing .dm-box .dm-menu {
    float: none;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 15px;
  }

  #marketing .dm-box .dm-menu {
    position: relative;
  }

  #marketing .dm-box .dm-menu-toggle {
    position: relative;
    line-height: 26px;
    font-size: 1rem;
    border: 1px solid #333;
    margin: 0;
    padding: 7px 40px 7px 10px;
    cursor: pointer;
  }

  #marketing .dm-box .dm-menu-toggle:before {
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    background: #333;
    top: 0;
    right: 0;
  }

  #marketing .dm-box .dm-menu-toggle:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    top: 50%;
    right: 10px;
    margin-top: -6px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  #marketing .dm-box .dm-menu-main {
    display: none;
    position: absolute;
    z-index: 10;
    width: calc(100% - 30px);
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 0 0 3px #ddd;
    padding: 10px;
    top: calc(100% - 10px);
    left: 15px;
    margin-top: 5px;
  }

  #marketing .dm-box .dm-menu-main > li > a {
    line-height: 22px;
    font-size: 0.9375rem;
    border-bottom: 1px solid #eee;
    padding: 5px 25px 5px 10px;
  }

  #marketing .dm-box .dm-menu-main > li > a:hover {
    color: #333;
  }

  #marketing .dm-box .dm-menu-main > li.current > a {
    background: #f6f6f6;
  }

  #marketing .dm-box .dm-menu-sub > li:after {
    display: none;
  }

  #marketing .dm-box .dm-menu-sub > li > a {
    line-height: 22px;
    font-size: 0.9375rem;
    border-bottom: 1px solid #eee;
    padding: 5px 25px 5px 20px;
  }

  #marketing .dm-box .dm-menu-sub > li > a:hover {
    background: #fff;
  }

  #marketing .dm-box .dm-menu-sub > li.current > a {
    background: #f1f1f1;
  }

  #marketing .dm-box .dm-menu-grand > li > a {
    position: relative;
    line-height: 22px;
    font-size: 0.9375rem;
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 5px 5px 5px 30px;
  }

  #marketing .dm-box .dm-menu-grand > li > a:hover {
    background: #fff;
  }

  #marketing .dm-box .dm-menu-grand > li.current > a {
    color: #f39801;
    background: #fff;
  }

  #marketing .dm-box .dm-menu-grand > li.current > a:before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background: #f39801;
    border-radius: 100%;
    top: 13px;
    left: 10px;
  }

  #marketing .dm-box .dm-content {
    float: none;
    width: 100%;
  }

  #marketing .dm-box .dm-search {
    padding: 10px 15px;
  }

  #marketing .dm-box .dm-search input {
    width: calc(100% - 30px);
  }

  #marketing .dm-box .dm-search button {
    width: 30px;
  }

  #marketing .dm-box .dm-search button:before {
    left: 4px;
  }

  #marketing .dm-box .pagers {
    margin: 30px 0;
  }

}

@media (max-width:767px) {
  #marketing .dm-box .dm-item:before {
    left: 119px;
  }

  #marketing .dm-box .dm-item .pic {
    width: 120px;
    padding: 5px;
  }

  #marketing .dm-box .dm-item .name {
    width: calc(100% - 120px);
    padding: 10px 10px 50px;
  }

  #marketing .dm-box .dm-item .links {
    width: calc(100% - 120px);
  }

  #marketing .dm-box .dm-item .links a {
    height: 40px;
    line-height: 26px;
    padding: 7px 10px;
  }

  #marketing .dm-box .dm-item .links a:before {
    width: 26px;
    height: 26px;
    background-size: 52px 26px;
  }

  #marketing .dm-box .dm-item .links a.dm-read:before {
    background-position: 0 0;
  }

  #marketing .dm-box .dm-item .links a.dm-download:before {
    background-position: -26px 0;
  }

}

@media (max-width:479px) {
  #marketing .dm-box .dm-item:before {
    display: none;
  }

  #marketing .dm-box .dm-item .pic {
    display: block;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    padding: 10px;
  }

  #marketing .dm-box .dm-item .name, #marketing .dm-box .dm-item .links {
    width: 100%;
  }

}

/** Product Photo **/
#marketing .dm-box.photo {
  position: relative;
  border: none;
  opacity: 0;
  transform: translateY(40px);
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transition: opacity .5s .5s, transform .5s .5s;
  -moz-transition: opacity .5s .5s, transform .5s .5s;
  -webkit-transition: opacity .5s .5s, transform .5s .5s;
}

#marketing .dm-box.photo.scroll-view {
  opacity: 1;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
}

#marketing .dm-box.photo:before {
  display: none;
}

#marketing .dm-box.photo .dm-menu {
  width: 210px;
  padding: 0;
}

#marketing .photo-content {
  float: right;
  width: calc(100% - 275px);
}

#marketing .photo-content .photo-title {
  line-height: 26px;
  font-size: 1.125rem;
  border-bottom: 1px solid #333;
  margin: 0;
  padding: 7px 0;
}

#marketing .photo-content .photo-list {
  font-size: 0;
}

#marketing .photo-content .photo-list .item {
  display: inline-block;
  width: calc(33.333% - 20px);
  vertical-align: top;
  margin-top: 30px;
  margin-right: 30px;
}

#marketing .photo-content .photo-list .item:nth-child(3n) {
  margin-right: 0;
}

#marketing .photo-content .photo-list .item .pic img {
  margin: auto;
}

#marketing .photo-content .photo-list .item .txt {
  text-align: center;
}

#marketing .photo-content .photo-list .item .txt .name {
  line-height: 26px;
  font-size: 1rem;
  margin: 5px 0;
}

#marketing .photo-content .photo-list .item .txt .angle-select {
  display: inline-block;
  height: 34px;
  font-size: 0.9375rem;
  color: #666;
  border: none;
  border-bottom: 1px solid #dcdcdc;
  background: url('../images/select_arrow.png') right center no-repeat;
  background-size: 12px 8px;
  vertical-align: top;
  margin: 0 0 10px;
  padding: 0 20px 0 4px;
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

#marketing .photo-content .photo-list .item .txt .angle-select::-ms-expand {
  display: none;
}

#marketing .photo-content .photo-list .item .txt .angle-select:focus {
  border-bottom-color: #666;
}

#marketing .photo-content .photo-list .item .txt .date {
  line-height: 24px;
  font-size: 0.875rem;
}

#marketing .photo-content .photo-list .item .links {
  margin-top: 10px;
}

#marketing .photo-content .photo-list .item .links a {
  display: inline-block;
  width: 50%;
  line-height: 32px;
  font-size: 0.875rem;
  color: #333;
  background: #e5e5e5;
  text-align: center;
  vertical-align: top;
  transition: color .2s, background .2s;
  -moz-transition: color .2s, background .2s;
  -webkit-transition: color .2s, background .2s;
}

#marketing .photo-content .photo-list .item .links a + a {
  border-left: 1px solid #fff;
}

#marketing .photo-content .photo-list .item .links a:hover {
  color: #fff;
  background: #009ddc;
}

#marketing .photo-content .photo-list + .pagers {
  margin-bottom: 0;
}

@media (max-width:991px) {
  #marketing .dm-box.photo .dm-menu {
    float: none;
    width: 100%;
  }

  #marketing .dm-box.photo .dm-menu-main {
    width: 100%;
    top: 100%;
    left: 0;
  }

  #marketing .photo-content {
    float: none;
    width: 100%;
    margin-top: 20px;
  }

}

@media (max-width:767px) {
  #marketing .photo-content .photo-list .item {
    width: calc(50% - 10px);
    margin-right: 20px;
  }

  #marketing .photo-content .photo-list .item:nth-child(3n) {
    margin-right: 20px;
  }

  #marketing .photo-content .photo-list .item:nth-child(even) {
    margin-right: 0;
  }

}

@media (max-width:419px) {
  #marketing .photo-content .photo-list .item {
    width: 100%;
    margin-top: 20px;
    margin-right: 0 !important
  }

}

.mfp-iframe-holder {
  padding: 0 !important;
}

.mfp-iframe-holder .mfp-content {
  max-width: inherit !important;
}

.mfp-iframe-holder .mfp-close {
  position: absolute;
  right: 0 !important;
  top: 0 !important;
  background: #fff !important;
  color: #000 !important;
  width: 50px !important;
  text-align: center !important;
  padding: 0 !important;
}

/*影片播放按鈕 */
.play-btn {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: auto;
  border: 1px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  font-size: 0;
  text-align: center;
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.play-btn:before, .play-btn:after {
  content: "";
  position: absolute;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.play-btn:before {
  margin: auto;
  overflow: hidden;
  left: -1px;
  top: -1px;
  width: 50px;
  height: 100px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 3px solid #fff;
  border-right: 0;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

.play-btn:after {
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -8px;
  border-style: solid;
  border-width: 12px 0 12px 16px;
  border-color: transparent transparent transparent #fff;
}

.play-btn:hover:after {
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

@media screen and (max-width:640px) {
  .play-btn {
    width: 50px;
    height: 50px;
  }

  .play-btn:before {
    width: 25px;
    height: 50px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }

}

.g-tit-sub {
  margin: 15px auto;
  text-align: center;
  font-size: 1.2rem;
  max-width: 1380px;
  opacity: 0;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -moz-transition: opacity 0.6s, -moz-transform 0.6s;
  -o-transition: opacity 0.6s, -o-transform 0.6s;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
}

.g-tit-sub.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

@media screen and (max-width:640px) {
  .g-tit-sub {
    font-size: 1rem;
  }

}

.share {
  margin: 50px 0;
  text-align: center;
  font-size: 0;
}

.share img {
  max-width: 100%;
}

.share .share-icon {
  display: inline-block;
  font-size: 1.7rem;
  padding: 10px;
  vertical-align: middle;
}

.share a {
  margin: 0 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  opacity: 1;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.share a:hover {
  opacity: 1;
}

.share a img {
  transition: opacity .5s;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
}

.share a img.ico-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.share a:hover img.ico {
  opacity: 0;
}

.share a:hover img.ico-hover {
  opacity: 1;
}

@media screen and (max-width:768px) {
  .share a {
    max-width: 40px;
  }

}

/*第三層分類產品樣式 */
.p-box-wrap2 {
  padding: 0 5px;
  display: inline-block;
  vertical-align: top;
  max-width: 370px;
  margin: 10px auto;
}

.p-box-wrap2.ani {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.p-box-wrap2.ani.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.p-box-wrap2 .img {
  overflow: hidden;
  background: #f2f2f2;
  position: relative;
}

.p-box-wrap2 .img img {
  max-width: 100%;
  position: relative;
  z-index: 2;
  -moz-transition: ease 0.5s;
  -o-transition: ease 0.5s;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
  -webkit-backface-visibility: hidden;
}

.p-box-wrap2 .img:before, .p-box-wrap2 .img:after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.p-box-wrap2 .img:before {
  z-index: 1;
  background-color: #f2f2f2;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF2F2F2', endColorstr='#FFDFDFDF');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmZGZkZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #dfdfdf));
  background-image: -moz-linear-gradient(top, #f2f2f2 0%, #dfdfdf 100%);
  background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #dfdfdf 100%);
  background-image: linear-gradient(to bottom, #f2f2f2 0%, #dfdfdf 100%);
}

.p-box-wrap2 .img:after {
  z-index: 2;
  top: auto;
  height: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.7);
  -moz-transition: height 0.5s, opacity 0.5s;
  -o-transition: height 0.5s, opacity 0.5s;
  -webkit-transition: height 0.5s, opacity 0.5s;
  transition: height 0.5s, opacity 0.5s;
}

.p-box-wrap2 .img .more {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid #fff;
  width: 50%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  margin: auto;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

.p-box-wrap2 .img .more:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  border: 1px solid #fff;
  border-right: 0;
}

.p-box-wrap2 .info {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 25px;
  text-align: center;
}

.p-box-wrap2 .info:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  background: url(../images/box-before.png) no-repeat center 100%;
  background-size: 100%;
  height: 29px;
  width: 100%;
}

.p-box-wrap2 .info .title {
  color: #009ddc;
  font-size: 1.1rem;
  margin: 0 0 15px 0;
}

.p-box-wrap2 .info .describe {
  height: 52px;
  padding: 0 15px;
  color: #222;
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-box-wrap2 .info .tag {
  margin: 15px -2px;
  font-size: 0;
}

.p-box-wrap2 .info .tag span {
  display: inline-block;
  vertical-align: top;
  background: #e5e5e5;
  color: #222;
  font-size: 0.75rem;
  padding: 5px 8px;
  margin: 2px;
}

@media screen and (min-width:991px) {
  .p-box-wrap2:hover .img img {
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  .p-box-wrap2:hover .img:after {
    height: 100%;
    opacity: 1;
  }

  .p-box-wrap2:hover .img .more {
    opacity: 1;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  .p-box-wrap2:hover .info .title {
    text-decoration: underline;
  }

}

/*圖+文樣式 */
.g-block-wrap {
  width: 100%;
  overflow: hidden;
  opacity: 0;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -moz-transition: opacity 1s, -moz-transform 1s;
  -o-transition: opacity 1s, -o-transform 1s;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
}

.g-block-wrap.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.g-block-wrap .img {
  overflow: hidden;
}

.g-block-wrap .img img {
  -moz-transition: -moz-transform 2s, opacity 2s;
  -o-transition: -o-transform 2s, opacity 2s;
  -webkit-transition: -webkit-transform 2s, opacity 2s;
  transition: transform 2s, opacity 2s;
}

/*.g-block-wrap .img:hover img { opacity: 0.7; }*/
.g-block-wrap .word {
  overflow: hidden;
}

.g-block-wrap .word .inner {
  display: table;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.g-block-wrap .word .inner .vertical {
  display: table-cell;
  vertical-align: middle;
  padding: 20px 50px;
}

.g-block-wrap .word .inner .title {
  line-height: 42px;
  font-size: 2rem;
  margin: 0 0 15px;
  color: #0385da;
}

.g-block-wrap .word .inner .describe {
  font-size: 1.2rem;
  margin-bottom: 25px;
  color: #000;
  width: 85%;
  margin: auto;
  text-align: left; /*text-align: justify; -moz-text-align-last: left; text-align-last: left; text-justify: inter-word;*/
}

.g-block-wrap .word .inner .readmore {
  background: #f39801;
  color: #fff;
  text-align: center;
  display: block;
  max-width: 200px;
  margin: 20px auto;
  padding: 10px 20px;
  position: relative;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

.g-block-wrap .word .inner .readmore:hover {
  background: #ffa716;
}

.g-block-wrap .img, .g-block-wrap .word {
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
}

.g-block-wrap.full .img {
  width: 100%;
}

.g-block-wrap.full .img img {
  width: 100%;
}

.g-block-wrap.full .word {
  width: 100%;
}

.g-block-wrap.full .word .inner .vertical {
  padding: 50px;
}

.g-block-wrap.full.reverse .img:not(.pc) {
  display: none;
}

@media screen and (max-width:1440px) {
  .g-block-wrap .word .inner .vertical {
    padding: 15px 30px;
  }

  .g-block-wrap .word .inner .title {
    font-size: 2rem;
  }

  .g-block-wrap .word .inner .describe {
    font-size: 1.1rem;
  }

}

@media screen and (max-width:1200px) {
  .g-block-wrap .word .inner .title {
    font-size: 1.6rem;
  }

  .g-block-wrap .word .inner .describe {
    font-size: 1rem;
  }

}

/*@media screen and (min-width: 990px) { .g-block-wrap:hover .inner .title, .g-block-wrap:hover .inner .describe, .g-block-wrap:hover .inner .readmore { opacity: 0; -webkit-animation: liner 0.4s 0s ease both; -moz-animation: liner 0.4s 0s ease both; -ms-animation: liner 0.4s 0s ease both; -o-animation: liner 0.4s 0s ease both; animation: liner 0.4s 0s ease both; }
.g-block-wrap:hover .inner .describe { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.g-block-wrap:hover .inner .readmore { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } }*/
@media screen and (max-width:990px) {
  .g-block-wrap .word .inner .title {
    font-size: 1.6rem;
  }

  .g-block-wrap .word .inner .describe {
    font-size: 1rem;
  }

}

@media screen and (max-width:768px) {
  .g-block-wrap {
    border-bottom: 1px solid #f6f6f6;
  }

  .g-block-wrap .word .inner .vertical {
    padding: 30px !important;
  }

  .g-block-wrap.full.reverse .img:not(.pc) {
    display: block;
  }

  .g-block-wrap.full.reverse .img.pc {
    display: none;
  }

}

@media screen and (max-width:640px) {
  .g-block-wrap .word .inner .vertical {
    padding: 30px 20px !important;
  }

  .g-block-wrap .word .inner .title {
    font-size: 1.3rem;
  }

  .g-block-wrap .word .inner .describe {
    width: 100%;
  }

}

/*左圖右文 */
.g-block-wrap.left .img {
  float: left;
}

.g-block-wrap.left .word {
  float: right;
}

/*右圖左文 */
.g-block-wrap.right .img {
  float: right;
}

.g-block-wrap.right .word {
  float: left;
}

.g-block-wrap.left .img, .g-block-wrap.left .word, .g-block-wrap.left .vertical, .g-block-wrap.right .img, .g-block-wrap.right .word, .g-block-wrap.right .vertical {
  height: 830px;
}

.g-block-wrap.left .img, .g-block-wrap.right .img {
  width: 70%;
}

.g-block-wrap.left .word, .g-block-wrap.right .word {
  width: 30%;
}

@media screen and (max-width:1440px) {
  .g-block-wrap.left .img, .g-block-wrap.left .word, .g-block-wrap.left .vertical, .g-block-wrap.right .img, .g-block-wrap.right .word, .g-block-wrap.right .vertical {
    height: 650px;
  }

}

@media screen and (max-width:1200px) {
  .g-block-wrap.left .img, .g-block-wrap.left .word, .g-block-wrap.left .vertical, .g-block-wrap.right .img, .g-block-wrap.right .word, .g-block-wrap.right .vertical {
    height: 450px;
  }

  .g-block-wrap.left .img, .g-block-wrap.right .img {
    width: 65%;
  }

  .g-block-wrap.left .word, .g-block-wrap.right .word {
    width: 35%;
  }

}

@media screen and (min-width:1025px) {
  .g-block-wrap.left .img img, .g-block-wrap.right .img img {
    position: relative;
    left: 50%;
    top: 50%;
    min-width: 100%;
    height: 100%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

}

@media screen and (max-width:1024px) {
  .g-block-wrap.left .img, .g-block-wrap.left .word, .g-block-wrap.left .vertical, .g-block-wrap.right .img, .g-block-wrap.right .word, .g-block-wrap.right .vertical {
    width: 100%;
    height: auto !important;
  }

  .g-block-wrap.left .img img, .g-block-wrap.right .img img {
    width: 100%;
  }

}

/*solution */
.solution-icon {
  background: #dcdcdc;
  margin: 50px 0;
  font-size: 0;
  width: 100%;
}

.solution-icon .hr {
  margin: 0;
  border-color: #eee;
}

.solution-icon .s-box {
  width: 25%;
  font-size: 0;
  display: table;
  float: left;
  position: relative;
  margin: 0;
  padding: 20px;
  height: 110px;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.solution-icon .s-box.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.solution-icon .s-box.scroll-view .s-icon {
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.solution-icon .s-box a {
  color: #000;
  display: table-cell;
  vertical-align: middle;
}

.solution-icon .s-box .s-icon, .solution-icon .s-box .title {
  display: inline-block;
  vertical-align: middle;
}

.solution-icon .s-box .s-icon {
  width: 60px;
  position: relative;
  z-index: 2;
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.solution-icon .s-box .s-icon img {
  max-width: 100%;
}

.solution-icon .s-box .title {
  width: calc(100% - 60px);
  font-size: 1.2rem;
  padding: 0 15px;
  padding-right: 0;
  margin: 0;
}

.solution-icon .s-box:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 60%;
  background: #eee;
  display: block;
  top: 20%;
}

.solution-icon .s-box:last-child:after {
  display: none;
}

@media screen and (min-width:991px) {
  .solution-icon .s-box:hover .title {
    -webkit-animation: liner 0.3s 0.2s ease both;
    -moz-animation: liner 0.3s 0.2s ease both;
    -ms-animation: liner 0.3s 0.2s ease both;
    -o-animation: liner 0.3s 0.2s ease both;
    animation: liner 0.3s 0.2s ease both;
  }

}

@media screen and (max-width:768px) and (min-width:641px) {
  .solution-icon .s-box .s-icon, .solution-icon .s-box .title {
    display: block;
  }

  .solution-icon .s-box .s-icon {
    margin: auto;
  }

  .solution-icon .s-box .title {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 0;
    padding-top: 15px;
  }

}

@media screen and (max-width:640px) {
  .solution-icon .hr {
    display: none;
  }

  .solution-icon .s-box {
    width: 50%;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .solution-icon .s-box .s-icon {
    width: 40px;
  }

  .solution-icon .s-box .title {
    width: calc(100% - 40px);
    font-size: 1rem;
  }

  .solution-icon .s-box:nth-child(2n):after {
    display: none;
  }

}

@media screen and (max-width:480px) {
  .solution-icon .s-box {
    height: 100px;
  }

  .solution-icon .s-box .title {
    font-size: 0.85rem;
    padding-left: 10px;
  }

}

.solution-pic {
  margin: 0 -5px;
  font-size: 0;
  padding-bottom: 60px;
}

.solution-pic .p-box-wrap {
  width: 33.33%;
}

@media screen and (max-width:480px) {
  .solution-pic .p-box-wrap {
    width: 100%;
  }

}

/*產品列表 */
.list-title {
  background: #808080;
  padding-bottom: 50px;
}

.list-title .g-title {
  color: #fff;
}

.list-title .btn-gotofaq {
  display: block;
  width: 200px;
  height: 40px;
  margin: 20px auto 0 auto;
  border: 1px solid #f39801;
  background: #f39801;
  color: #fff;
  text-align: center;
  line-height: 40px;
  -webkit-transition: background .25s, color .25s;
  -o-transition: background .25s, color .25s;
  transition: background .25s, color .25s;
}

.list-title .btn-gotofaq:hover {
  background: #ffa716;
  border-color: #ffa716;
}

.list-title .container {
  position: relative;
}

.btn-how-to-use {
  background: #808080;
  font-size: 2rem;
  text-align: center;
  opacity: 0;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -moz-transition: ease 0.3s;
  -o-transition: ease 0.3s;
  -webkit-transition: ease 0.3s;
  transition: ease 0.3s;
}

.btn-how-to-use.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.btn-how-to-use a {
  color: #fff;
  display: block;
  padding: 50px 20px;
}

.btn-how-to-use a #aw-ani {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: top;
}

.btn-how-to-use a #aw-ani .arrow {
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation: arrow 1.5s 0s ease infinite;
  -moz-animation: arrow 1.5s 0s ease infinite;
  -ms-animation: arrow 1.5s 0s ease infinite;
  -o-animation: arrow 1.5s 0s ease infinite;
  animation: arrow 1.5s 0s ease infinite;
}

.btn-how-to-use a #aw-ani .p2 {
  opacity: 0;
  -webkit-animation: show-1 1.5s 0s ease infinite;
  -moz-animation: show-1 1.5s 0s ease infinite;
  -ms-animation: show-1 1.5s 0s ease infinite;
  -o-animation: show-1 1.5s 0s ease infinite;
  animation: show-1 1.5s 0s ease infinite;
}

.btn-how-to-use a #aw-ani .p3 {
  opacity: 0;
  -webkit-animation: show-2 1.5s 0s ease infinite;
  -moz-animation: show-2 1.5s 0s ease infinite;
  -ms-animation: show-2 1.5s 0s ease infinite;
  -o-animation: show-2 1.5s 0s ease infinite;
  animation: show-2 1.5s 0s ease infinite;
}

.btn-how-to-use:hover {
  background: #f39801;
}

@media screen and (max-width:640px) {
  .btn-how-to-use {
    font-size: 1.6rem;
  }

  .btn-how-to-use a {
    padding: 40px 20px;
  }

  .btn-how-to-use a #aw-ani {
    width: 35px;
  }

}

.p-list {
  padding: 50px 0;
  margin: 0;
  font-size: 0;
}
.p-list.p-list-has-banner {
  padding: 70px 0 50px;
}
.p-related .p-list{
  padding: 30px 0;
}
.p-list .p-box-wrap2 {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 30px;
}

.p-list .p-box-wrap2 a {
  display: block;
}

.btn-p-addiq {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 40px;
  border: 1px solid #ccc;
  background: none;
  color: #999;
  text-align: center;
  line-height: 40px;
  position: relative;
  margin: 0 auto;
  -webkit-transition: background .25s, color .25s;
  -o-transition: background .25s, color .25s;
  transition: background .25s, color .25s;
  font-size: 0.875rem;
}
.btn-p-addiq.single {
  margin: 20px auto ;
}
.btn-p-addiq:before {
  content: '+';
  display: inline-block;
  margin-right: 10px;
}

.btn-p-addiq:hover {
  background: #0080cb;
  color: #fff;
  border-color: #0080cb;
}

.p-mode-slide {
  margin: 0 auto;
}
.p-list .p-mode-slide  .p-box-wrap2 { 
  max-width: none;
}
.p-mode-slide .slick-track{
  margin: auto;
}
.p-mode-slide .slick-arrow {
  display: block;
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 34px;
  font-size: 0;
  border: none;
  background: rgba(255, 255, 255, 0);
  top: 50%;
  margin-top: -17px;
  overflow: hidden;
  perspective: 400px;
  -moz-perspective: 400px;
  -webkit-perspective: 400px;
  transition: border .4s;
  -moz-transition: border .4s;
  -webkit-transition: border .4s;
}

.p-mode-slide .slick-prev {
  left: -34px;
  border-right: 1px solid #1b1b1b;
}

.p-mode-slide .slick-next {
  right: -34px;
  border-left: 1px solid #1b1b1b;
}

.p-mode-slide .slick-prev.slick-disabled {
  border-right: 1px solid #aaa;
}

.p-mode-slide .slick-next.slick-disabled {
  border-left: 1px solid #aaa;
}

.p-mode-slide .slick-prev:hover, .p-mode-slide .slick-next:hover {
  border-color: #009ddc;
}

.p-mode-slide .slick-prev.slick-disabled:hover, .p-mode-slide .slick-next.slick-disabled:hover {
  border-color: #aaa;
}

.p-mode-slide .slick-prev:before, .p-mode-slide .slick-next:before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  border-style: solid;
  border-width: 5px;
  border-color: transparent transparent #1b1b1b #1b1b1b;
  top: 4px;
  left: 7px;
  transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}

.p-mode-slide .slick-prev.slick-disabled:before, .p-mode-slide .slick-prev.slick-disabled:hover:before {
  border-color: transparent transparent #aaa #aaa;
}

.p-mode-slide .slick-next.slick-disabled:before, .p-mode-slide .slick-next.slick-disabled:hover:before {
  border-color: #aaa #aaa transparent transparent;
}

.p-mode-slide .slick-next:before {
  border-color: #1b1b1b #1b1b1b transparent transparent;
  left: auto;
  right: 7px;
}

.p-mode-slide .slick-prev:hover:before, .p-mode-slide .slick-next:hover:before {
  transform: rotateX(180deg) rotateZ(45deg);
  -moz-transform: rotateX(180deg) rotateZ(45deg);
  -webkit-transform: rotateX(180deg) rotateZ(45deg);
}

.p-mode-slide .slick-prev:hover:before {
  border-color: transparent transparent #009ddc #009ddc;
}

.p-mode-slide .slick-next:hover:before {
  border-color: #009ddc #009ddc transparent transparent;
}
.p-mode-slide .p-box-wrap2{
  padding: 0 10px;
}
.p-mode-slide .p-box-wrap2 .info{
  padding: 0;
}
.p-mode-slide .p-box-wrap2 .info .title{
  font-size: 1.125rem;
  color: #009ddc;
  margin: 18px 0 0;
  text-decoration: none;
}
.p-mode-slide .p-box-wrap2 a:hover .info .title{
  color: #009ddc;
  text-decoration: underline;
}
.p-mode-slide .p-box-wrap2 .info:before{
  display: none;
}
.p-mode-slide .p-box-wrap2 .img{
  border-radius: 4px;
}
.p-mode-slide .p-box-wrap2  .btn-p-addiq{
  margin-top: 15px;
}
@media screen and (max-width:1579px) {
  .p-mode-slide {
    padding: 0 40px;
  }

  .p-mode-slide .slick-prev {
    left: 0;
  }

  .p-mode-slide .slick-next {
    right: 0;
  }

}

@media screen and (max-width:768px) {
  .p-list {
    padding: 70px 0 50px;
  }
  .p-list.p-list-has-banner {
    padding: 50px 0;
  }
  .p-related .p-list{
    padding: 0 0 30px 0;
  }

  .p-list .p-box-wrap2 {
    width: 50%;
  }

  .list-title .btn-gotofaq {
    position: relative;
    top: auto;
    right: auto;
    margin: 20px auto 0 auto;
    width: 100%;
    max-width: 150px;
    line-height: 35px;
    height: 35px;
  }

}

@media screen and (max-width:640px) {
  .p-mode-slide {
    padding: 0;
  }
  .p-list {
    padding: 50px 0 20px;
  }
  .p-list.p-list-has-banner {
    padding: 40px 0 20px 0;
  }
  .p-list .p-box-wrap2 .info {
    padding: 15px 10px;
  }

  .p-list .p-box-wrap2 .info .title {
    font-size: 1rem;
  }

  .p-list .p-box-wrap2 .info .describe {
    height: auto;
    font-size: 0.8rem;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 99;
  }

}

@media screen and (max-width:990px) {
  .pad-grey {
    border-top: 1px solid #cdcdcc;
    position: relative;
    z-index: 2;
  }

  /*.pad-grey:before { content: ""; position: absolute; z-index: -1; height: 50px; width: 100%; background-color: #ffffff; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE7E7E6', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e7e6), color-stop(100%, #ffffff)); background-image: -moz-linear-gradient(top, #e7e7e6 0%, #ffffff 100%); background-image: -webkit-linear-gradient(top, #e7e7e6 0%, #ffffff 100%); background-image: linear-gradient(to bottom, #e7e7e6 0%, #ffffff 100%); }*/
}

/* product detail introduction */
.p-mode-detail{
  width: 100%;
  max-width: 1230px;
  margin: 10px auto;
  padding: 0 15px;
  -webkit-animation: detailInUp 1.2s both;
  -o-animation: detailInUp 1.2s both;
  animation: detailInUp 1.2s both;
  border-top: 1px solid #ddd;
}
#pdetail .p-mode-detail{
  padding: 20px 15px 70px 15px;
  border-top: none;
}
.p-mode-detail.first-item{
  border-top: none;
}
.p-mode-detail .left {
  width: 50%;
  position: relative;
  float: left;
}
.p-mode-detail .left img{
  max-width: 100%;
}
.p-mode-detail .left .big-slide{
  position: relative;
  border: 1px solid #eee;
}
.p-mode-detail .left .big-slide .box > div{
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}
.p-mode-detail .left .big-slide .box > div img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.p-mode-detail .left .thumb-slide {
  margin: 0;
  padding: 0 40px;
}
.p-mode-detail .left .thumb-slide .box {
  padding: 15px;
}
.p-mode-detail .left .thumb-slide .box > div {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}
.p-mode-detail .left .thumb-slide .box > div img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
}
.p-mode-detail .left .thumb-slide .slick-current > div img  {
  border: 1px solid #f39801;
}
.p-mode-detail .left .thumb-slide .slick-arrow {
  display: block;
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 34px;
  font-size: 0;
  border: none;
  background: rgba(255, 255, 255, 0);
  top: 50%;
  margin-top: -17px;
  overflow: hidden;
  perspective: 400px;
  -moz-perspective: 400px;
  -webkit-perspective: 400px;
  transition: border .4s;
  -moz-transition: border .4s;
  -webkit-transition: border .4s;
}

.p-mode-detail .left .thumb-slide .slick-prev {
  left: 0;
  border-right: 1px solid #1b1b1b;
}

.p-mode-detail .left .thumb-slide .slick-next {
  right: 0;
  border-left: 1px solid #1b1b1b;
}

.p-mode-detail .left .thumb-slide .slick-prev.slick-disabled {
  border-right: 1px solid #aaa;
}

.p-mode-detail .left .thumb-slide .slick-next.slick-disabled {
  border-left: 1px solid #aaa;
}

.p-mode-detail .left .thumb-slide .slick-prev:hover, .p-mode-detail .left .thumb-slide .slick-next:hover {
  border-color: #009ddc;
}

.p-mode-detail .left .thumb-slide .slick-prev.slick-disabled:hover, .p-mode-detail .left .thumb-slide .slick-next.slick-disabled:hover {
  border-color: #aaa;
}

.p-mode-detail .left .thumb-slide .slick-prev:before, .p-mode-detail .left .thumb-slide .slick-next:before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  border-style: solid;
  border-width: 5px;
  border-color: transparent transparent #1b1b1b #1b1b1b;
  top: 4px;
  left: 7px;
  transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}

.p-mode-detail .left .thumb-slide .slick-prev.slick-disabled:before, .p-mode-detail .left .thumb-slide .slick-prev.slick-disabled:hover:before {
  border-color: transparent transparent #aaa #aaa;
}

.p-mode-detail .left .thumb-slide .slick-next.slick-disabled:before, .p-mode-detail .left .thumb-slide .slick-next.slick-disabled:hover:before {
  border-color: #aaa #aaa transparent transparent;
}

.p-mode-detail .left .thumb-slide .slick-next:before {
  border-color: #1b1b1b #1b1b1b transparent transparent;
  left: auto;
  right: 7px;
}

.p-mode-detail .left .thumb-slide .slick-prev:hover:before, .p-mode-detail .left .thumb-slide .slick-next:hover:before {
  transform: rotateX(180deg) rotateZ(45deg);
  -moz-transform: rotateX(180deg) rotateZ(45deg);
  -webkit-transform: rotateX(180deg) rotateZ(45deg);
}

.p-mode-detail .left .thumb-slide .slick-prev:hover:before {
  border-color: transparent transparent #009ddc #009ddc;
}

.p-mode-detail .left .thumb-slide .slick-next:hover:before {
  border-color: #009ddc #009ddc transparent transparent;
}

.p-mode-detail .right {
  width: 50%;
  float: right;
  position: relative;
  padding: 20px 15px 0 45px;
}
.p-mode-detail .right .name{
  font-size: 2.5rem;
  line-height: 1.3;
  margin: 0 0 15px 0;
  font-weight: 600;
  color: #009ddc;
}
.p-mode-detail .right .feature-list li{
  padding-left: 20px;
  position: relative;
  display: block;
  margin: 0 0 5px 0;
  line-height: 1.5;
  font-size: 1.0625rem;
}
.p-mode-detail .right .feature-list li:before{
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f39801;
  top: 8px;
  left: 3px;
}
.p-mode-detail .right .include-list{
  padding: 20px 20px 20px 110px;
  margin: 30px auto 0 auto;
  position: relative;
  background: #f6f6f6;
  font-size: 1rem;
}
.p-mode-detail .right .include-list:before{
  content: attr(data-title);
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 90px;
  font-size: 1rem;
}
.p-mode-detail .right .btn-box{
  font-size: 0;
  text-align: center;
  margin: 30px auto 0 auto;
}
.p-mode-detail .right .btn-box .btn-pview-back, .p-mode-detail .right .btn-box .btn-pview-addiq, .p-mode-detail .right .btn-box .btn-pview-hasaddiq {
  height: 48px;
  line-height: 48px;
  border: none;
  width: 50%;
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 0.9375rem;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
  -webkit-transition: background .15s, color .15s;
  -o-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
}
.p-mode-detail .right .btn-box .btn-pview-back:before, .p-mode-detail .right .btn-box .btn-pview-addiq:before, .p-mode-detail .right .btn-box .btn-pview-hasaddiq:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background-image: url(../images/icon_pdetail.png);
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin-right: 10px;
  margin-left: -10px;
}
.p-mode-detail .right .btn-box .btn-pview-back {
  background: #808080;
}
.p-mode-detail .right .btn-box .btn-pview-back:hover {
  background: #707070;
}
.p-mode-detail .right .btn-box .btn-pview-back:before{
  background-position: 0 0;
}
.p-mode-detail .right .btn-box .btn-pview-addiq {
  background: #f39801;
}
.p-mode-detail .right .btn-box .btn-pview-addiq:hover {
  background: #f37301;
}
.p-mode-detail .right .btn-box .btn-pview-addiq:before{
  background-position: 50% 0;
}
.p-mode-detail .right .btn-box .btn-pview-hasaddiq, .p-mode-detail .right .btn-box .btn-pview-hasaddiq:hover {
  background: #fff;
  border: 1px solid #f39801;
  color: #f39801;
}
.p-mode-detail .right .btn-box .btn-pview-hasaddiq:before{
  background-position: 100% 0;
}

@media screen and (max-width:1579px) {
  .p-mode-detail .left .thumb-slide {
    padding: 0 40px;
  }
  .p-mode-detail .left .thumb-slide .slick-prev {
    left: 0;
  }

  .p-mode-detail .left .thumb-slide .slick-next {
    right: 0;
  }
}
@media screen and (max-width:1199px) {
  .p-mode-detail .right .name{
    font-size: 2rem;
  }
  .p-mode-detail .left{
    width: 40%;
  }
  .p-mode-detail .right{
    width: 60%;
  }
}
@media screen and (max-width:991px) {
  .p-mode-detail{
    padding: 0 15px
  }
  #pdetail .p-mode-detail{
    padding: 0 15px 50px 15px
  }
  .p-mode-detail .right .feature-list{
    font-size: 1rem;
  }
  .p-mode-detail .right .name{
    font-size: 1.625rem;
  }
  .p-mode-detail .left .thumb-slide {
    padding: 0 21px;
  }
  .p-mode-detail .left .thumb-slide .box {
    padding: 10px;
  }
}
@media screen and (max-width:767px) {
  .p-mode-detail{
    padding: 0 15px 0 15px
  }
  #pdetail .p-mode-detail{
    padding: 0 15px 30px 15px
  }
  .p-mode-detail .left{
    width: 100%;
    float: none;
    max-width: 500px;
    margin: 0 auto ;
  }
  .p-mode-detail .right{
    width: 100%;
    float: none;
    padding: 20px 0 0 0 ;
  }
  .p-mode-detail .right .feature-list li{
    font-size: 1rem;
  }
  .p-mode-detail .right .include-list{
    padding: 15px;
  }
  .p-mode-detail .right .include-list:before{
    position: relative;
    display: block;
    width: auto;
    font-weight: 600;
    top: auto;
    left: auto;
  }
  .p-mode-detail .right .btn-box .btn-pview-back, .p-mode-detail .right .btn-box .btn-pview-addiq, .p-mode-detail .right .btn-box .btn-pview-hasaddiq {
    font-size: 0.875rem;
  }
  .p-mode-detail .right .btn-box .btn-pview-back:before, .p-mode-detail .right .btn-box .btn-pview-addiq:before, .p-mode-detail .right .btn-box .btn-pview-hasaddiq:before {
    margin-right: 4px;
  }
}
@media screen and (max-width:499px) {
  .p-mode-detail .right .name{
    font-size: 1.375rem;
  }
  .p-mode-detail .right .btn-box .btn-pview-back, .p-mode-detail .right .btn-box .btn-pview-addiq, .p-mode-detail .right .btn-box .btn-pview-hasaddiq {
    font-size: 0.75rem;
  }
}


/*產品詳細 */
.tab-content {
  margin-bottom: 100px;
  overflow: hidden;
}

@media screen and (max-width:990px) {
  .tab-content {
    padding: 0 15px;
  }

}

#highlights .block {
  margin: 10px -5px;
}

#highlights .block .box {
  width: 50%;
  padding: 0 5px;
  float: left;
  display: block;
  overflow: hidden;
}

#highlights .block.reverse .box {
  float: right;
}

#highlights .block .box .inner {
  background: #e7f3f8;
  overflow: hidden;
  height: 550px;
}

#highlights .block .box .inner img {
  max-width: 100%;
}

#highlights .block .box .if-word {
  padding: 15px 50px;
}

#highlights .block .box .if-word li {
  line-height: 25px;
  font-size: 0.95rem;
}

#highlights .block .box .if-word li:before {
  content: "•";
  font-size: 1.5rem;
  vertical-align: middle;
  padding-right: 8px;
  color: #009ddc;
}

#highlights .block:nth-child(even) .box .inner {
  background: #fcf0dc;
}

#highlights .block .box .if-pic {
  background: #fff;
}

@media screen and (min-width:1201px) {
  #highlights .block .box .if-pic {
    height: 550px;
    position: relative;
  }

}

@media screen and (max-width:1200px) {
  #highlights .block .box .inner, #highlights .block .box .if-pic {
    height: 400px;
  }

}

@media screen and (min-width:769px) {
  #highlights .block .box .if-pic img {
    position: absolute;
    height: 100% !important;
    left: 50%;
    max-width: inherit;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    object-fit: contain;
    width: 100%!important;
  }

}

@media screen and (max-width:768px) {
  #highlights .block {
    margin: 0 -5px;
  }

  #highlights .block .box {
    width: 100%;
    float: none;
    margin-bottom: 10px;
  }

  #highlights .block .box .inner, #highlights .block .box .if-pic {
    height: auto;
  }

}

#specification img {
  max-width: 100%;
  height: auto !important;
}

#specification .spec-table {
  border: 1px solid #dcdcdc;
  width: 100%;
}

#specification .spec-table tr:nth-child(odd) {
  background: #f6f6f6;
}

#specification .spec-table tr td {
  border: 1px solid #dcdcdc;
  padding: 20px;
}

#specification .spec-table tr td.tit {
  background: #626262;
  color: #fff;
  width: 20%;
}

@media screen and (max-width:990px) {
  #specification {
    margin: 0 -15px;
  }

}

@media screen and (max-width:480px) {
  #specification .spec-table tr td {
    padding: 12px;
    font-size: 0.9rem;
  }

  #specification .spec-table tr td.tit {
    width: 15%;
  }

}

#download .nav-tabs {
  border: none;
  font-size: 0;
}

#download .nav-tabs li {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0;
}

#download .nav-tabs li a {
  border: 1px solid #fff;
  border-left: none;
  border-top: none;
  background: #535353;
  color: #fff;
  border-radius: 0;
  padding: 20px 15px;
  font-size: 1.1rem;
  margin: 0;
}

#download .nav-tabs li:hover a, #download .nav-tabs li:focus a, #download .nav-tabs li.active a {
  background: #009ddc;
}

#download .tab-content {
  margin-bottom: 0px;
}

#download .down-wrap {
  margin-top: 50px;
}

#download .down-wrap .title {
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: #000;
  text-align: center;
}

#download .down-wrap .down-table {
  width: 100%;
}

#download .down-wrap .down-table td:nth-child(1) {
  width: 25%;
}

#download .down-wrap .down-table td:nth-child(2) {
  width: 45%;
}

#download .down-wrap .down-table td:nth-child(3) {
  width: 15%;
  text-align: center;
}

#download .down-wrap .down-table td:nth-child(4) {
  width: 15%;
  text-align: center;
}

#download .down-wrap .down-table .down-head {
  border: 1px solid #898989;
  border-left: 0;
  border-right: 0;
  text-align: center;
}

#download .down-wrap .down-table .down-head td {
  text-align: center;
  padding: 15px;
  font-weight: bold;
  font-size: 1.05rem;
}

#download .down-wrap .down-table .down-body td {
  padding: 20px 15px;
  border-bottom: 1px solid #898989;
  position: relative;
}

#download .down-wrap .down-table .down-body td:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 70%;
  top: 15%;
  right: 0;
  background: #898989;
  right: 0;
}

#download .down-wrap .down-table .down-body td:last-child:after {
  display: none;
}

#download .down-wrap .down-table .down-body td .no-data {
  color: #999;
}

#download .down-wrap .down-table .down-body a {
  color: #000;
  display: block;
}

#download .down-wrap .down-table .down-body .down-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #000;
  display: block;
  color: #000;
  margin: auto;
  -moz-transition: ease 0.3s;
  -o-transition: ease 0.3s;
  -webkit-transition: ease 0.3s;
  transition: ease 0.3s;
}

#download .down-wrap .down-table .down-body .down-btn i {
  padding: 0;
  margin: 0;
  line-height: 30px;
}

#download .down-wrap .down-table .down-body .down-btn:hover {
  background: #000;
  color: #fff;
}

#download .down-wrap .down-table .down-body .desc-box {
  position: relative;
  overflow: hidden;
}

@media (max-width:640px) {
  #download .down-wrap .down-table .down-body .desc-box {
    position: relative;
    max-height: 27px;
  }

  #download .down-wrap .down-table .down-body .desc-box.multiple {
    margin-bottom: 15px;
    padding-right: 30px;
  }

  #download .down-wrap .down-table .down-body .desc-box.view {
    max-height: none;
  }

  #download .down-wrap .down-table .down-body .desc-box a.desc-switch {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 0;
    top: 0;
    right: 5px;
  }

  #download .down-wrap .down-table .down-body .desc-box:not(.multiple) a.desc-switch {
    display: none;
  }

  #download .down-wrap .down-table .down-body .desc-box a.desc-switch:before {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    top: 3px;
    left: 5px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  #download .down-wrap .down-table .down-body .desc-box.view a.desc-switch:before {
    top: 7px;
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }

}

@media (min-width:641px) {
  #download .down-wrap .down-table .down-body .desc-box.multiple {
    height: 26px;
    padding-right: 30px;
  }

  #download .down-wrap .down-table .down-body .desc-box.multiple.view {
    height: auto;
  }

  #download .down-wrap .down-table .down-body .desc-box a.desc-switch {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 0;
    top: 3px;
    right: 0;
  }

  #download .down-wrap .down-table .down-body .desc-box:not(.multiple) a.desc-switch {
    display: none;
  }

  #download .down-wrap .down-table .down-body .desc-box a.desc-switch:before {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    top: 3px;
    left: 5px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  #download .down-wrap .down-table .down-body .desc-box.view a.desc-switch:before {
    top: 7px;
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }

}

/*@media (max-width: 640px) {
#download .down-wrap .down-table .down-body .desc-box.view a.desc-switch {
  display: none;
}
}*/
@media screen and (max-width:990px) {
  #download .nav-tabs {
    margin: 0 -15px;
  }

  #download .nav-tabs li a {
    padding: 15px 10px;
    font-size: 0.95rem;
  }

  #download .down-wrap {
    margin: 30px -15px 0;
  }

  #download .down-wrap .down-table .down-head td {
    font-size: 0.95rem;
  }

}

@media screen and (max-width:640px) {
  #download .nav-tabs li {
    width: 50%;
  }

}

@media screen and (max-width:640px) {
  #download .down-wrap .down-table .down-head {
    display: none;
  }

  #download .down-wrap .down-table tr {
    border-bottom: 1px solid #898989;
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }

  #download .down-wrap .down-table td {
    padding: 0px !important;
    display: inline-block;
    vertical-align: bottom;
    border: none !important;
    width: auto !important;
  }

  #download .down-wrap .down-table td:after {
    display: none;
  }

  #download .down-wrap .down-table td:nth-child(1) {
    display: block;
  }

  #download .down-wrap .down-table td:nth-child(1):before {
    content: attr(data-title);
    color: #999;
    display: block;
    font-size: 0.75rem;
  }

  #download .down-wrap .down-table td:nth-child(2) {
    display: block;
  }

  #download .down-wrap .down-table td:nth-child(2):before {
    content: attr(data-title);
    color: #999;
    display: block;
    font-size: 0.75rem;
  }

  #download .down-wrap .down-table td:nth-child(3) {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  #download .down-wrap .down-table td:nth-child(4) {
    text-align: left;
    font-size: 0.85rem;
  }

}

#video.tab-pane {
  padding: 0 15px;
}

#video .p-video-group {
  max-width: 1200px;
  font-size: 0;
  margin: auto;
}

.mfp-pview-video .mfp-inline-holder .mfp-content, .mfp-pview-video .mfp-ajax-holder .mfp-content{
  width: 80%;
  margin: 0;
}

.mfp-pview-video .mfp-close {
  position: absolute;
  right: 0 !important;
  top: 0 !important;
  background: #fff !important;
  color: #000 !important;
  width: 50px !important;
  text-align: center !important;
  padding: 0 !important;
}
.mfp-pview-video .video-popup{
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
}
.mfp-pview-video .video-popup iframe{
  width: 100%!important;
  height: 100%!important;
  position: absolute;
  top: 0;
  left: 0;
}
.video-popup {
  position: relative;
  padding-bottom: 56.25%;
}
.video-open{
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  margin-bottom: 10px;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}
.video-open img{
  max-width: 102%;
  max-height: 102%;
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0.9;
}
.video-open:before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #009ddc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -8px;
  z-index: 5;
  -webkit-transition: transform .35s;
  -o-transition: transform .35s;
  transition: transform .35s;
}
.video-open:after{
  content: '';
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  border: 2px solid #009ddc;
  -webkit-transition: transform .35s;
  -o-transition: transform .35s;
  transition: transform .35s;
}
.video-open:hover:before, .video-open:hover:after{
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

#video .p-video-wrap {
  display: inline-block;
  position: relative;
  width: calc(50% - 15px);
  margin-bottom: 30px;
  vertical-align: top;
}

#video .p-video-wrap:nth-child(even) {
  margin-left: 30px;
}

#video .p-video-wrap .title {
  font-size: 1rem;
}

#video .p-video-wrap .img {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

#video .p-video-wrap .img img {
  max-width: 100%;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
}

#video .p-video-wrap .img:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: black;
  opacity: 0.3;
  z-index: 1;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

#video .p-video-wrap a {
  outline: none;
}

@media screen and (min-width:991px) {
  #video .p-video-wrap:hover {
    color: #009ddc;
  }

  #video .p-video-wrap:hover .play-btn:before {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  #video .p-video-wrap:hover .img:before {
    opacity: 0;
  }

  #video .p-video-wrap:hover .img img {
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

}

@media screen and (max-width:768px) {
  #video .p-video-wrap {
    width: 100%;
    margin-left: 0 !important;
  }

  /*#video .p-video-wrap .img { height: 250px; }
  #video .p-video-wrap .img img { max-width: inherit; position: absolute; left: 50%; top: 0; height: 100%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }*/
}

@media screen and (max-width:480px) {
  #video .p-video-wrap .img {
    height: 160px;
  }
  .video-open:before{
    border-width: 6px 0 6px 10px;
    margin-left: -5px;
    margin-top: -6px;
  }
  .video-open:after{
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
}

#faq.tab-pane {
  padding: 0 15px;
}

#faq .faq-wrap {
  max-width: 1200px;
  margin: auto;
  padding-left: 50px;
}

#faq .faq-wrap .title {
  border-bottom: 1px solid #f8dfb4;
  position: relative;
  padding: 10px 30px 10px 0;
  font-size: 1.05rem;
  cursor: pointer;
}

#faq .faq-wrap .title:before {
  content: "Q";
  position: absolute;
  font-size: 1rem;
  left: -50px;
  top: 0;
  margin: 10px 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  background: #f39801;
  text-align: center;
  border-radius: 50%;
}

#faq .faq-wrap .title:after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 3px solid #ccc;
  border-left: 3px solid #ccc;
  top: 16px;
  right: 10px;
  transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transition: top .3s, border .3s, transform .3s;
  -moz-transition: top .3s, border .3s, -moz-transform .3s;
  -webkit-transition: top .3s, border .3s, -webkit-transform .3s;
}

#faq .faq-wrap .title.open:after {
  border-color: #333;
  top: 20px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#faq .faq-wrap .content {
  background: #faefdd;
  position: relative;
  padding: 30px 50px;
  display: none;
}

#faq .faq-wrap .content img {
  max-width: 100%;
  height: auto !important;
}

#faq .faq-wrap .content:before, #faq .faq-wrap .content:after {
  content: "";
  width: 25px;
  position: absolute;
  left: 0;
  top: 0;
}

#faq .faq-wrap .content:before {
  content: "A";
  text-align: center;
  height: 25px;
  color: #fff;
  background: #f39801;
  z-index: 2;
}

#faq .faq-wrap .content:after {
  bottom: 0;
  height: 100%;
  background: #f8d7a0;
}

@media screen and (max-width:640px) {
  #faq .faq-wrap .content {
    padding: 30px 30px 30px 50px;
  }

}

.related-wrap .g-title {
  margin-bottom: 40px;
}

.related-wrap .p-box-wrap2 .info .title {
  color: #000;
}

/*product search */
.product-search {
  padding: 50px 0;
}

.back-to-list {
  color: #fff !important;
  background: #959595;
  max-width: 230px;
  padding: 10px;
  text-align: center;
  margin: 20px auto;
  display: block;
  font-size: 1rem;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.back-to-list:hover {
  background: #009ddc;
}

/*how to use */
.page-describe {
  text-align: center;
}

.page-describe .word {
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
}

.how-to-use-block {
  overflow: hidden;
}

.how-to-use-block .g-title {
  margin: 70px 0;
}

@media screen and (max-width:480px) {
  .how-to-use-block .g-title {
    margin: 40px 0;
  }

}

/*news */
.detail-search {
  max-width: 1170px;
  margin: 30px auto;
  position: relative;
  font-size: 1rem;
}

.detail-search form {
  position: relative;
}

.detail-search.in-news {
  max-width: initial;
  padding: 0 30px;
}

.detail-search .box {
  background: #fff;
  border: 1px solid #333;
  width: 100%;
  padding: 5px 10px;
}

.detail-search .s-btn {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  width: 50px;
  text-align: center;
  border: 1px solid #333;
  background: #333;
  color: #fff;
}

.detail-search .s-btn i {
  padding: 0;
  margin: 0;
}

@media (max-width:1240px) {
  .detail-search:not(.in-news) {
    padding: 0 15px;
  }

}

@media (max-width:768px) {
  .detail-search.in-news {
    padding: 0 5px;
  }

}

.news-wrap {
  margin: 50px 0;
  font-size: 0;
}

.news-wrap .news-box {
  padding: 0 30px;
  margin-bottom: 50px;
  width: 25%;
  display: inline-block;
  vertical-align: top;
}

.news-wrap .news-box.ani {
  opacity: 0;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -o-transition: opacity 0.3s, -o-transform 0.3s;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.news-wrap .news-box.ani.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.news-wrap .news-box .title {
  line-height: 28px;
  font-size: 1.25rem;
  font-weight: bold;
  border-left: 1px solid #f39801;
  padding-left: 15px;
  margin: 0 0 15px 0;
  color: #000;
  height: 56px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.news-wrap .news-box .img {
  position: relative;
  overflow: hidden;
}

.news-wrap .news-box .img img {
  max-width: 100%;
}

.news-wrap .news-box .img:before, .news-wrap .news-box .img:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.news-wrap .news-box .img:before {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.news-wrap .news-box .img:after {
  content: "";
  font-family: FontAwesome;
  width: 45px;
  height: 45px;
  line-height: 43px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: auto;
  font-size: 1.1rem;
  text-align: center;
  padding: 0;
  color: #fff;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.news-wrap .news-box .content {
  padding: 15px 0;
}

.news-wrap .news-box .content .date, .news-wrap .news-box .content .sort {
  display: inline-block;
  vertical-align: top;
  font-size: 0.75rem;
  color: #000;
}

.news-wrap .news-box .content .date {
  color: #009ddc;
}

.news-wrap .news-box .content .date:after {
  content: "|";
  margin: 0 10px;
}

.news-wrap .news-box .content .describe {
  font-size: 0.9rem;
  margin-top: 10px;
  color: #555;
  height: 70px;
  overflow: hidden;
}

.news-wrap .news-box:hover .img:before {
  opacity: 1;
}

.news-wrap .news-box:hover .img:after {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.news-wrap.search-list {
  max-width: 1200px;
  margin: 50px auto;
}

.news-wrap.search-list .news-box {
  width: 100%;
  margin-bottom: 10px;
  padding: 15px;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.news-wrap.search-list .news-box .title {
  margin: 0;
  height: auto;
  float: left;
}

.news-wrap.search-list .news-box .date {
  color: #009ddc;
  font-size: 0.9375rem;
  padding: 0 0 10px;
  display: block;
}

.news-wrap.search-list .news-box .sort {
  background: #ddd;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 0.75rem;
  display: inline-block;
  float: right;
  color: #555;
}

.news-wrap.search-list .news-box:hover {
  background: #f9f9f9;
}

.news-wrap.news-detail {
  max-width: 1200px;
  margin: 50px auto;
}

.news-wrap.news-detail .detail-title {
  line-height: 30px;
  font-size: 1.375rem;
  font-weight: bold;
  padding: 10px 0;
}

.news-wrap.news-detail .detail-bar {
  background: #eee;
  border: 1px solid #d4d4d4;
  border-right: 0;
  border-left: 0;
  padding: 10px;
}

.news-wrap.news-detail .detail-bar .date, .news-wrap.news-detail .detail-bar .sort {
  display: inline-block;
  vertical-align: top;
  font-size: 0.75rem;
  color: #000;
  margin-top: 10px;
}

.news-wrap.news-detail .detail-bar .date {
  color: #009ddc;
}

.news-wrap.news-detail .detail-bar .date:after {
  content: "|";
  margin: 0 10px;
}

.news-wrap.news-detail .detail-bar .describe {
  font-size: 0.9rem;
  margin-top: 10px;
  color: #555;
  height: 70px;
  overflow: hidden;
}

.news-wrap.news-detail .detail-bar .share {
  float: right;
  margin: -5px 0;
}

.news-wrap.news-detail .detail-bar .share .share-icon {
  font-size: 1rem;
}

.news-wrap.news-detail .detail-bar .share a {
  max-width: 30px;
  margin: 0 5px;
}

.news-wrap.news-detail .editor {
  padding: 30px 0;
  font-size: 1rem;
  border-bottom: 1px solid #ddd;
}

.news-wrap.news-detail .editor img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width:768px) {
  .news-wrap {
    margin: 50px -15px;
  }

  .news-wrap .news-box {
    width: 33.33%;
    padding: 0 20px;
  }

  .news-wrap.search-list .news-box .title {
    float: none;
  }

  .news-wrap.search-list .news-box .sort {
    float: none;
    margin: 10px 15px;
    margin-bottom: 0;
  }

}

@media screen and (max-width:640px) {
  .news-wrap .news-box {
    width: 50%;
    margin-bottom: 20px;
  }

  .news-wrap.news-detail {
    margin: 30px auto;
  }

  .news-wrap.news-detail .detail-bar {
    position: relative;
    margin-bottom: 20px;
  }

  .news-wrap.news-detail .detail-bar .share {
    float: none;
    margin: 8px 0;
    position: absolute;
    top: 100%;
    right: 0;
  }

}

@media screen and (max-width:375px) {
  .news-wrap .news-box {
    width: 100%;
  }

}

/** Infinite Scroll */
#infscr-loading {
  position: fixed;
  z-index: 100;
  width: 200px;
  color: #fff;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  left: 50%;
  bottom: 120px;
  margin-left: -100px;
  padding: 10px;
  font-size: 1rem;
}

/*video */
.video-wrap {
  max-width: 1200px;
  margin: 0 auto 60px;
}

.video-wrap .video-box {
  margin: 50px 0;
  overflow: hidden;
  opacity: 0;
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.video-wrap .video-box.scroll-view {
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.video-wrap .video-box .p-video {
  width: 50%;
  float: left;
}

.video-wrap .video-box .p-video-new {
  width: 50%;
  float: left;
}

.video-wrap .video-box .p-video .cover:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.video-wrap .video-box .p-video .cover > i {
  z-index: 2;
}

.video-wrap .video-box .video-content {
  width: 50%;
  float: right;
  padding-left: 20px;
}

.video-wrap .video-box .video-content .title {
  font-size: 1.5rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  position: relative;
  margin: 0;
  margin-bottom: 30px;
}

.video-wrap .video-box .video-content .title .date {
  color: #009ddc;
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 1rem;
  font-weight: normal;
  padding: 8px 0;
}

.video-wrap .video-box .video-content .relate-pro .main-name {
  font-size: 1.1rem;
}

.video-wrap .video-box .video-content .relate-pro a {
  color: #000;
}

.video-wrap .video-box .video-content .relate-pro a:hover {
  text-decoration: underline;
  color: #f39801;
}

.video-wrap .video-box .video-content .relate-pro .pro-block {
  margin: 10px 0;
  font-size: 0;
}

.video-wrap .video-box .video-content .relate-pro .pro-block .img, .video-wrap .video-box .video-content .relate-pro .pro-block .names {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
}

.video-wrap .video-box .video-content .relate-pro .pro-block .img {
  width: 40%;
  background: #f2f2f2;
}

.video-wrap .video-box .video-content .relate-pro .pro-block .img img {
  max-width: 100%;
}

.video-wrap .video-box .video-content .relate-pro .pro-block .names {
  width: 60%;
  padding-left: 20px;
}

.video-wrap .video-box .video-content .relate-pro .pro-block .names a {
  display: block;
}

@media screen and (max-width:640px) {
  .video-wrap .video-box {
    margin: 30px 0;
  }

  .video-wrap .video-box .p-video {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }

  .video-wrap .video-box .p-video-new {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }

  .video-wrap .video-box .video-content {
    width: 100%;
    float: none;
    padding: 0;
  }

  .video-wrap .video-box .video-content .title {
    font-size: 1.2rem;
  }

  .video-wrap .video-box .video-content .relate-pro .main-name {
    font-size: 1rem;
  }

}

/*sitemap */
.sitemap {
  padding: 60px 0;
  margin: 10px -15px;
  font-size: 0;
}

.sitemap .box {
  width: 20%;
  padding: 0 30px;
  display: inline-block;
  vertical-align: top;
}

.sitemap .box .title {
  color: #009ddc;
  position: relative;
  margin: 0;
  font-size: 1.3rem;
  padding-bottom: 10px;
}

.sitemap .box .title:before, .sitemap .box .title:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #f39801;
}

.sitemap .box .title:before {
  width: 30%;
  height: 3px;
}

.sitemap .box .title:after {
  height: 1px;
  width: 100%;
  opacity: 0.5;
}

.sitemap .box .content {
  padding: 10px;
  margin-bottom: 15px;
}

.sitemap .box .content a {
  color: #222;
  font-size: 1rem;
}

.sitemap .box .content a:hover {
  color: #f39801;
}

.sitemap .box .content .sec-content {
  padding-left: 15px;
  opacity: 0.8;
}

@media (max-width:1199px) {
  .sitemap .box {
    width: 33.33%;
    padding: 0 15px;
  }

}

@media screen and (max-width:768px) {
  .sitemap .box .title {
    font-size: 1.05rem;
  }

  .sitemap .box .content a {
    font-size: 0.9rem;
  }

}

@media screen and (max-width:640px) {
  .sitemap {
    padding: 30px 0;
  }

  .sitemap .box {
    width: 50%;
  }

}

@media (max-width:480px) {
  .sitemap {
    margin: 10px 0;
  }

  .sitemap .box {
    width: 100%;
    padding: 0;
  }

}

/* FAQ */
#faq-page .container {
  margin: 0 auto;
  width: 100%;
  max-width: 1230px;
  padding: 30px 15px 50px 15px;
}

#faq-page .g-title {
  margin: 0 auto 30px auto;
}

ul.faq-list {
  display: block;
  margin: 30px auto 70px auto;
}

.faq-list .box {
  display: block;
  padding: 0;
  margin: 0 0 20px 40px;
  opacity: 0;
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  -o-transform: translate(0, 20px);
  transform: translate(0, 20px);
  -webkit-transition: transform .8s, opacity .8s;
  -o-transition: transform .8s, opacity .8s;
  transition: transform .8s, opacity .8s;
}

.faq-list .box.shown {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.faq-list .box .q {
  color: #222;
  display: block;
  position: relative;
  margin: 0;
  font-size: 1.25rem;
  padding: 12px 40px 12px 0;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid #f2bf69;
}

.faq-list .box .q:before {
  content: "Q";
  position: absolute;
  top: 10px;
  left: -40px;
  width: 25px;
  height: 25px;
  display: inline-block;
  background-color: #f39801;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 25px;
  text-align: center;
  color: #fff;
  -moz-transition: background 0.15s;
  -o-transition: background 0.15s;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}

.faq-list .box .q:after {
  content: '';
  display: inline-block;
  top: 50%;
  margin-top: -5px;
  right: 20px;
  width: 8px;
  height: 8px;
  position: absolute;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: transform .25s;
  -o-transition: transform .25s;
  transition: transform .25s;
}

.faq-list .box .q:hover:before {
  background-color: #f36d01;
}

.faq-list .box .a {
  position: relative;
  display: none;
  padding: 30px 25px;
  margin: 0;
  font-size: 1.0625rem;
  color: #000;
  background: #faefdd;
  border-left: 25px solid #f8d7a0;
  border-bottom: 1px solid #f2bf69;
}

.faq-list .box .a:before {
  content: "A";
  position: absolute;
  top: 0;
  left: -25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  line-height: 25px;
  text-align: center;
  background: #f39801;
  color: #fff;
}

.faq-list .box.open .a {
  display: block;
}

.faq-list .box.open .a:before {
  -webkit-animation: fadeIn .2s both;
  -o-animation: fadeIn .2s both;
  animation: fadeIn .2s both;
}
.faq-list .box.open .q:after {
  border-right: 1px solid #f39801;
  border-bottom: 1px solid #f39801;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

@media (max-width:991px) {
  .faq-list .box .q {
    font-size: 1.125rem;
  }

}

@media (max-width:767px) {
  ul.faq-list {
    margin: 30px auto;
  }

  .faq-list .box {
    margin: 0 0 15px 25px;
  }

  .faq-list .box .q {
    font-size: 1.0625rem;
    padding-left: 10px;
    line-height: 1.4;
  }

  .faq-list .box .q:before {
    left: -25px;
  }

  .faq-list .box .a {
    margin-left: -25px;
    padding: 20px;
  }

  .faq-list .box .a:before {
    top: -1px;
  }

}

/* Inquiry */
#inquiry {
  background: url(../images/bg_inquiry.jpg) no-repeat 0 0;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

#inquiry .container {
  margin: 0 auto;
  width: 100%;
  max-width: 1230px;
  padding: 30px 15px 50px 15px;
}

#inquiry .btn-contact, #inquiry .btn-wheretobuy {
  height: 48px;
  width: calc(50% - 15px);
  max-width: 275px;
  line-height: 48px;
  margin: 0 5px;
  color: #fff;
  font-size: 0.9375rem;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: background .15s, color .15s;
  -o-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
}

#inquiry .btn-contact:before, #inquiry .btn-wheretobuy:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
  margin-right: 10px;
  background: url(../images/icon_inquiry_btn.png);
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}

#inquiry .btn-contact {
  background: #f39801;
}

#inquiry .btn-contact:hover {
  background: #f37301;
}

#inquiry .btn-contact:before {
  background-position: 0 0;
}

#inquiry .btn-wheretobuy {
  background: #009ddc;
}

#inquiry .btn-wheretobuy:hover {
  background: #0087dc;
}

#inquiry .btn-wheretobuy:before {
  background-position: 100% 0;
}

.inquiry-list {
  margin: 50px -10px;
}

.inquiry-list .box {
  padding: 10px;
  text-align: center;
  position: relative;
}

.inquiry-list .box .inner {
  display: block;
  background: #fff;
  overflow: hidden;
  -webkit-transition: background .5s;
  -o-transition: background .5s;
  transition: background .5s;
}

.inquiry-list .box .inner {
  background: #fff;
  position: relative;
  z-index: 1;
  display: block;
}

.inquiry-list .box .img {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto 25px auto;
  overflow: hidden;
}

.inquiry-list .box .img:before {
  content: "READ MORE";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  pointer-events: none;
  border: 1px solid #fff;
  width: 50%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(0) translate(-50%, -50%);
  -ms-transform: scale(0) translate(-50%, -50%);
  -o-transform: scale(0) translate(-50%, -50%);
  transform: scale(0) translate(-50%, -50%);
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

.inquiry-list .box .img:after {
  content: '';
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 61.11%;
  z-index: 2;
  opacity: 0;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  background: rgba(0, 0, 0, 0.7);
  -moz-transition: transform 0.5s, opacity 0.5s;
  -o-transition: transform 0.5s, opacity 0.5s;
  -webkit-transition: transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

.inquiry-list .box .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.inquiry-list .box .name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #222;
  height: 50px;
  margin: 0 auto;
  padding: 0 20px;
  font-weight: 600;
}

.inquiry-list .box .desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 1rem;
  line-height: 1.375;
  color: #222;
  height: 66px;
  margin: 15px auto 50px auto;
  padding: 0 20px 0 20px;
}

.inquiry-list .box .btn-del {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: #fff;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 0;
  z-index: 10;
  -webkit-transition: background .15s;
  -o-transition: background .15s;
  transition: background .15s;
}

.inquiry-list .box .btn-del:before, .inquiry-list .box .btn-del:after {
  content: '';
  width: 12px;
  height: 2px;
  margin-left: -6px;
  margin-top: -1px;
  background: #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: background .15s;
  -o-transition: background .15s;
  transition: background .15s;
}

.inquiry-list .box .btn-del:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inquiry-list .box .btn-del:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.inquiry-list .box .btn-del:hover {
  border: 2px solid #666;
  background: #666;
}

.inquiry-list .box .btn-del:hover:before, .inquiry-list .box .btn-del:hover:after {
  background: #fff;
}

.inquiry-list .box .inner:hover .img img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.inquiry-list .box .inner:hover .img:after {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
}

.inquiry-list .box .inner:hover .img:before {
  -webkit-transform: scale(1) translate(-50%, -50%);
  -ms-transform: scale(1) translate(-50%, -50%);
  -o-transform: scale(1) translate(-50%, -50%);
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}

.inquiry-list .slick-arrow {
  display: block;
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 34px;
  font-size: 0;
  border: none;
  background: rgba(255, 255, 255, 0);
  top: 50%;
  margin-top: -17px;
  overflow: hidden;
  perspective: 400px;
  -moz-perspective: 400px;
  -webkit-perspective: 400px;
  transition: border .4s;
  -moz-transition: border .4s;
  -webkit-transition: border .4s;
}

.inquiry-list .slick-prev {
  left: -34px;
  border-right: 1px solid #1b1b1b;
}

.inquiry-list .slick-next {
  right: -34px;
  border-left: 1px solid #1b1b1b;
}

.inquiry-list .slick-prev.slick-disabled {
  border-right: 1px solid #aaa;
}

.inquiry-list .slick-next.slick-disabled {
  border-left: 1px solid #aaa;
}

.inquiry-list .slick-prev:hover, .inquiry-list .slick-next:hover {
  border-color: #009ddc;
}

.inquiry-list .slick-prev.slick-disabled:hover, .inquiry-list .slick-next.slick-disabled:hover {
  border-color: #aaa;
}

.inquiry-list .slick-prev:before, .inquiry-list .slick-next:before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  border-style: solid;
  border-width: 5px;
  border-color: transparent transparent #1b1b1b #1b1b1b;
  top: 4px;
  left: 7px;
  transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}

.inquiry-list .slick-prev.slick-disabled:before, .inquiry-list .slick-prev.slick-disabled:hover:before {
  border-color: transparent transparent #aaa #aaa;
}

.inquiry-list .slick-next.slick-disabled:before, .inquiry-list .slick-next.slick-disabled:hover:before {
  border-color: #aaa #aaa transparent transparent;
}

.inquiry-list .slick-next:before {
  border-color: #1b1b1b #1b1b1b transparent transparent;
  left: auto;
  right: 7px;
}

.inquiry-list .slick-prev:hover:before, .inquiry-list .slick-next:hover:before {
  transform: rotateX(180deg) rotateZ(45deg);
  -moz-transform: rotateX(180deg) rotateZ(45deg);
  -webkit-transform: rotateX(180deg) rotateZ(45deg);
}

.inquiry-list .slick-prev:hover:before {
  border-color: transparent transparent #009ddc #009ddc;
}

.inquiry-list .slick-next:hover:before {
  border-color: #009ddc #009ddc transparent transparent;
}

@media screen and (max-width:1579px) {
  .inquiry-list {
    padding: 0 40px;
  }

  .inquiry-list .slick-prev {
    left: 0;
  }

  .inquiry-list .slick-next {
    right: 0;
  }

}

@media screen and (max-width:639px) {
  .inquiry-list {
    padding: 0;
    margin: 30px auto;
  }

  .inquiry-list .box {
    padding: 0;
    text-align: left;
    margin: 0 0 15px 0;
  }

  .inquiry-list .box .inner {
    padding: 10px 40px 10px 100px;
    min-height: 90px;
  }

  .inquiry-list .box .inner .img {
    width: 80px;
    position: absolute;
    top: 10px;
    left: 5px;
    margin: 0;
  }

  .inquiry-list .box .name {
    font-size: 1.0625rem;
    line-height: 1.3;
    padding: 0 5px 0 10px;
    height: auto;
    max-height: 45px;
  }

  .inquiry-list .box .desc {
    font-size: 1rem;
    padding: 0 5px 0 10px;
    margin: 10px 0 0 0;
    -webkit-line-clamp: 2;
    height: auto;
    max-height: 45px;
    color: #666;
  }

  .inquiry-list .box .img {
    border: 1px solid transparent;
    -webkit-transition: border .5s;
    -o-transition: border .5s;
    transition: border .5s;
  }

  .inquiry-list .box .img:hover {
    border: 1px solid #737990;
  }

  .inquiry-list .box .img:before {
    content: "\f002";
    font-family: 'FontAwesome';
    border: none;
  }

  .inquiry-list .box .btn-del {
    width: 30px;
    height: 30px;
  }

}

@media (max-width:499px) {
  #inquiry .btn-contact, #inquiry .btn-wheretobuy {
    width: calc(50% - 12px);
    margin: 0 3px;
    white-space: nowrap
  }

  #inquiry .btn-contact:before, #inquiry .btn-wheretobuy:before {
    display: none;
  }

}

/* Inquiry form */
#inquiry form, #inquiry .finish-wrap {
  background: #fff;
  padding: 40px;
  margin: 40px auto;
}

.form-msg {
  text-align: center;
  font-size: 1.0625rem;
  margin: 0 auto 35px auto;
}

.star {
  display: inline-block;
  font-style: normal;
  color: #f39801;
  font-size: 1.0625rem;
  margin-right: 2px;
}

.form-box {
  display: block;
  position: relative;
  margin: 0 auto 20px auto;
  padding: 0 0 0 110px;
}

.form-box.form-half {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 8px);
}

.form-box.form-half.odd {
  margin-right: 10px;
}

.form-box.form-half.even {
  margin-right: 0;
}

.form-gp {
  min-height: 45px;
  line-height: 45px;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 0 10px;
}

.form-box.code {
  padding-right: 130px;
  display: inline-block;
  vertical-align: middle;
}

.codeimg {
  width: 130px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.codeimg img {
  max-width: 100%;
  max-height: 100%;
}

.form-bottom {
  position: relative;
}

.form-bottom .form-box.code {
  width: 100%;
  max-width: 50%
}

.form-bottom .btn-wrap {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  max-width: 450px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: right;
}

.label-style {
  font-size: 1.0625rem;
  color: #444;
  padding: 0;
  margin: 12px 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.2;
  width: 90px;
  text-align: right;
}

.input-style {
  background: #fff;
  padding: 0 10px;
  height: 45px;
  width: 100%;
  display: block;
  outline: none;
  border-radius: 0;
  border: 1px solid #ddd;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition: border 0.15s;
  -o-transition: border 0.15s;
  -webkit-transition: border 0.15s;
  transition: border 0.15s;
}

.input-style:focus {
  border: 1px solid #555;
}

.input-style.input-half {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 8px);
}

.input-style.input-half.odd {
  margin-right: 10px;
}

.input-style.input-half.even {
  margin-right: 0;
}

.textarea-style {
  background: #fff;
  height: 85px;
  padding: 5px 10px;
  width: 100%;
  display: block;
  outline: none;
  border-radius: 0;
  border: 1px solid #ddd;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition: border 0.15s;
  -o-transition: border 0.15s;
  -webkit-transition: border 0.15s;
  transition: border 0.15s;
  overflow: hidden;
}

.textarea-style:-moz-read-only {
  background: #f6f6f6;
  height: auto;
  min-height: 40px;
}

.textarea-style:-moz-read-only:focus {
  border: 1px solid #ddd;
}

.textarea-style:read-only {
  background: #f6f6f6;
  height: auto;
  min-height: 42px;
}

.textarea-style:read-only:focus {
  border: 1px solid #ddd;
}

.textarea-style:focus {
  border: 1px solid #555;
}

.select-style {
  border-radius: 0;
  padding: 0 30px 0 10px;
  display: block;
  width: 100%;
  height: 45px;
  line-height: 45px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #fff url("../images/select_aw.png") right center no-repeat;
  background-size: auto 100%;
  outline: none;
  border: 1px solid #ddd;
  -moz-box-sizing: none;
  -webkit-box-sizing: none;
  box-sizing: none;
  -moz-transition: border 0.15s;
  -o-transition: border 0.15s;
  -webkit-transition: border 0.15s;
  transition: border 0.15s;
}

.select-style:focus {
  border: 1px solid #555;
}

.select-style::-ms-expand {
  display: none;
}

#inquiry .btn-back, #inquiry .btn-send {
  height: 45px;
  line-height: 45px;
  border: none;
  width: calc(50% - 10px);
  max-width: 220px;
  margin: 0 0 0 5px;
  color: #fff;
  font-size: 0.9375rem;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: background .15s, color .15s;
  -o-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
}

#inquiry .btn-back {
  background: #808080;
}

#inquiry .btn-send {
  background: #f39801;
}

#inquiry .btn-back:hover {
  background: #707070;
}

#inquiry .btn-send:hover {
  background: #f37301;
}

@media (max-width:991px) {
  .form-bottom {
    padding-right: 300px;
  }

  .form-bottom .btn-wrap {
    max-width: 280px;
  }

  .form-bottom .form-box.code {
    max-width: 100%;
  }

}

@media (max-width:839px) {
  .form-bottom {
    padding-right: 195px;
  }

  .form-bottom .btn-wrap {
    max-width: 190px;
  }

}

@media (max-width:767px) {
  #inquiry form, #inquiry .finish-wrap {
    padding: 20px;
    margin: 25px -15px -50px -15px;
  }

  .form-msg {
    text-align: left;
    font-size: 1rem;
  }

  .form-box {
    margin: 0 auto 15px auto;
    padding: 0 0 0 100px;
  }

  .form-box.form-half {
    display: block;
    width: 100%;
  }

  .form-box.form-half.odd {
    margin-right: 0;
  }

  .form-box.code {
    width: 100%;
    max-width: none;
  }

  .input-style.input-half {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .input-style.input-half.odd {
    margin-right: 0;
  }

  .label-style {
    font-size: 1rem;
  }

}

@media (max-width:639px) {
  .form-box.code {
    padding-right: 115px;
  }

  .codeimg {
    width: 115px;
  }

  .label-style {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .input-style {
    height: 40px;
  }

  .textarea-style {
    height: 100px;
  }

  .select-style {
    height: 40px;
    line-height: 40px;
    background-position: 102% 0;
  }

  .form-bottom {
    padding-right: 0;
  }

  .form-bottom .btn-wrap {
    max-width: none;
    position: relative;
    text-align: center;
    padding-left: 95px;
  }

  .form-bottom .form-box.code {
    max-width: none;
  }

  #inquiry .btn-back {
    margin: 0 3px 0 0;
  }

  #inquiry .btn-send {
    margin: 0 0 0 3px;
  }

}

@media (max-width:499px) {
  .label-style {
    position: relative;
    margin: 0 0 5px 0;
    width: auto;
    text-align: left;
  }

  .form-box {
    margin: 0 auto 15px auto;
    padding: 0;
  }

  .form-bottom .btn-wrap {
    padding-left: 0;
    margin: 20px auto;
  }

}

/* Inquiry Finish */
.finish-msg {
  margin: 0 auto 20px auto;
}

.finish-msg .btn-wrap {
  margin: 20px auto 0 auto;
  text-align: center;
}

.fc-success {
  width: 70px;
  height: 70px;
  margin: 20px auto;
  display: block;
  position: relative;
  border: 5px solid #0060b0 \9;
  background: #fff \9;
  border-radius: 50%;
  opacity: 0 \9;
}

.fc-success.scroll-view {
  opacity: 1 \9;
}

.fc-success .pie {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #fff;
  border: 5px solid #0060b0;
  display: none \9;
}

.fc-success .spin {
  border-radius: 35px 0 0 35px;
  z-index: 20;
  border-right: none;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
  display: none \9;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.fc-success.scroll-view .spin {
  -webkit-animation: fc_rotate 1s linear both;
  -o-animation: fc_rotate 1s linear both;
  animation: fc_rotate 1s linear both;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.fc-success .fill {
  border-radius: 0 35px 35px 0;
  z-index: 10;
  border-left: none;
  left: 50%;
  opacity: 0;
  display: none \9;
}

.fc-success.scroll-view .fill {
  -webkit-animation: fc_fill 1s ease both;
  -o-animation: fc_fill 1s ease both;
  animation: fc_fill 1s ease both;
  opacity: 1;
}

.fc-success .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 30;
  opacity: 1;
  background: #fff;
  border: none;
}

.fc-success.scroll-view .mask {
  -webkit-animation: fc_mask 1s ease both;
  -o-animation: fc_mask 1s ease both;
  animation: fc_mask 1s ease both;
  opacity: 0;
}

.fc-success .check {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  opacity: 0;
  display: block;
}

.fc-success.scroll-view .check {
  opacity: 1;
  -webkit-animation: zoomIn 0.5s ease-in-out;
  -o-animation: zoomIn 0.5s ease-in-out;
  animation: zoomIn 0.5s ease-in-out;
}

.fc-success .check span {
  position: absolute;
  z-index: 40;
  height: 6px;
  width: 25%;
  top: 50%;
  left: 23%;
  border-radius: 25px;
  background: #0060b0;
}

.fc-success .check span:nth-of-type(1) {
  width: 30%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.fc-success .check span:nth-of-type(2) {
  width: 63%;
  -webkit-transform: rotate(-45deg) translate(25%, 0);
  -ms-transform: rotate(-45deg) translate(25%, 0);
  -o-transform: rotate(-45deg) translate(25%, 0);
  transform: rotate(-45deg) translate(25%, 0);
}

.fc-ti {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #555;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
  opacity: 0;
}

.fc-text {
  display: block;
  text-align: center;
  margin: 10px auto;
  font-size: 1rem;
  opacity: 0;
}

.fc-ti.scroll-view, .fc-text.scroll-view {
  opacity: 1;
  -webkit-animation: fadeIn 0.5s ease;
  -o-animation: fadeIn 0.5s ease;
  animation: fadeIn 0.5s ease;
}

/*動畫 */
@-webkit-keyframes detailInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes detailInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes detailInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fc_rotate {
  from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50%, to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes fc_rotate {
  from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50%, to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes fc_rotate {
  from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50%, to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes fc_fill {
  from { opacity: 0; }
  80%, to { opacity: 1; }
}
@-moz-keyframes fc_fill {
  from { opacity: 0; }
  80%, to { opacity: 1; }
}
@keyframes fc_fill {
  from { opacity: 0; }
  80%, to { opacity: 1; }
}
@-webkit-keyframes fc_mask {
  from { opacity: 1; }
  50%, to { opacity: 0; }
}
@-moz-keyframes fc_mask {
  from { opacity: 1; }
  50%, to { opacity: 0; }
}
@keyframes fc_mask {
  0% { opacity: 1; }
  50%, to { opacity: 0; }
}

@-webkit-keyframes liner {
  from {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  49% {
    opacity: 0;
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }

  50% {
    opacity: 0;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  to {
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}

@-moz-keyframes liner {
  from {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  49% {
    opacity: 0;
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }

  50% {
    opacity: 0;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  to {
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}

@keyframes liner {
  from {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  49% {
    opacity: 0;
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }

  50% {
    opacity: 0;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  to {
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}

@-webkit-keyframes arrow {
  from {
    -moz-transform: translate(20px, 20px) scale(0);
    -ms-transform: translate(20px, 20px) scale(0);
    -webkit-transform: translate(20px, 20px) scale(0);
    transform: translate(20px, 20px) scale(0);
    opacity: 0;
  }

  20% {
    -moz-transform: translate(0px, 0px) scale(1);
    -ms-transform: translate(0px, 0px) scale(1);
    -webkit-transform: translate(0px, 0px) scale(1);
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes arrow {
  from {
    -moz-transform: translate(20px, 20px) scale(0);
    -ms-transform: translate(20px, 20px) scale(0);
    -webkit-transform: translate(20px, 20px) scale(0);
    transform: translate(20px, 20px) scale(0);
    opacity: 0;
  }

  20% {
    -moz-transform: translate(0px, 0px) scale(1);
    -ms-transform: translate(0px, 0px) scale(1);
    -webkit-transform: translate(0px, 0px) scale(1);
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@keyframes arrow {
  from {
    -moz-transform: translate(20px, 20px) scale(0);
    -ms-transform: translate(20px, 20px) scale(0);
    -webkit-transform: translate(20px, 20px) scale(0);
    transform: translate(20px, 20px) scale(0);
    opacity: 0;
  }

  20% {
    -moz-transform: translate(0px, 0px) scale(1);
    -ms-transform: translate(0px, 0px) scale(1);
    -webkit-transform: translate(0px, 0px) scale(1);
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes show-1 {
  from {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  25% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  40% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes show-1 {
  from {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  25% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  40% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@keyframes show-1 {
  from {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  25% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  40% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes show-2 {
  from {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  45% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  55% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes show-2 {
  from {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  45% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  55% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@keyframes show-2 {
  from {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  45% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0;
  }

  55% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes out {
  from {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    opacity: 0;
  }

}

@-moz-keyframes out {
  from {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    opacity: 0;
  }

}

@keyframes out {
  from {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    opacity: 0;
  }

}

/* 20180615 */
.g-block-wrap.video {
  position: relative;
}

.g-block-wrap.video .iframe {
  position: relative;
  width: 70%;
}

.g-block-wrap.video.right .iframe {
  margin-left: 30%;
}

.g-block-wrap.video.tb .iframe {
  width: 100%;
  background: #000;
}

.g-block-wrap.video .iframe:before {
  content: '';
  display: block;
  height: 0;
  padding-bottom: 56.25%;
}

.g-block-wrap.video.tb .iframe:before {
  padding-bottom: 35.9375%;
}

.g-block-wrap.video .iframe iframe {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/*.g-block-wrap.video.tb .iframe iframe {
width: 63.888%;
left: 18.056%;
}*/
.g-block-wrap.video .text {
  position: absolute;
  width: 30%;
  height: 100%;
  top: 0;
  right: 0;
}

.g-block-wrap.video.right .text {
  left: 0;
  right: auto;
}

.g-block-wrap.video.tb .text {
  position: relative;
  width: 100%;
  height: auto;
  top: auto;
  right: auto;
}

.g-block-wrap.video .text .mCSB_container {
  min-height: 100%;
}

.g-block-wrap.video .text .inner {
  position: relative;
  display: table;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.g-block-wrap.video .text .inner .vertical {
  display: table-cell;
  height: auto;
  vertical-align: middle;
  padding: 100px 50px;
}

.g-block-wrap.video.tb .text .inner .vertical {
  padding: 50px;
}

.g-block-wrap.video .text .title {
  line-height: 42px;
  font-size: 2rem;
  margin: 0 0 15px;
  color: #0385da;
}

.g-block-wrap.video .text .describe {
  font-size: 1.2rem;
  margin-bottom: 25px;
  color: #000;
  width: 85%;
  margin: auto;
  text-align: left;
}

.g-block-wrap.video .text .readmore {
  background: #f39801;
  color: #fff;
  text-align: center;
  display: block;
  max-width: 200px;
  margin: 20px auto;
  padding: 10px 20px;
  position: relative;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

.g-block-wrap.video .text .readmore:hover {
  background: #ffa716;
}

.g-block-wrap.video .iframe, .g-block-wrap.video .text {
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
}
.g-block-wrap.rl-text{
  display: table;
  width: 100%;
  max-width: 1430px;
  position: relative;
  font-size: 1.0625rem;
  margin: 50px auto;
}
.g-block-wrap.rl-text .left{
  width: 50%;
  display: table-cell;
  vertical-align: top;
  padding: 0 50px 0 15px;
}
.g-block-wrap.rl-text .right{
  width: 50%;
  display: table-cell;
  vertical-align: top;
  padding: 0 15px 0 50px;
}
.g-block-wrap.rl-text .title{
  font-size: 1.875rem;
  line-height: 1.43;
  color: #222;
  margin: 0 0 25px 0 ;
  padding: 0;
  font-weight: 600;
}
.g-block-wrap.rl-text .subtitle{
  font-size: 1.875rem;
  line-height: 1.43;
  color: #222;
  margin: 0 0 25px 0 ;
  padding: 0;
}
.g-block-wrap.rl-text .strong-title{
  font-size: 1.25rem;
  display: block;
  padding: 0;
  margin: 0 0 10px 0;
  font-weight: 400;
}
.g-block-wrap.rl-text p{
  margin: 0 0 25px 0;
}

@media (max-width:1440px) {
  .g-block-wrap.video .text .inner .vertical {
    padding: 50px 30px;
  }

}

@media (max-width:1200px) {
  .g-block-wrap.video .iframe {
    width: 65%;
  }

  .g-block-wrap.video.right .iframe {
    margin-left: 35%;
  }

  .g-block-wrap.video .text {
    width: 35%;
  }

  .g-block-wrap.video .text .title {
    font-size: 1.6rem;
  }

  .g-block-wrap.video .text .describe {
    font-size: 1rem;
  }

}

@media (max-width:1199px) {
  .g-block-wrap.rl-text .left{
    padding: 0 20px 0 15px;
  }
  .g-block-wrap.rl-text .right{
    padding: 0 15px 0 20px;
  }
}
@media (max-width:991px) {
  .g-block-wrap.rl-text .title, .g-block-wrap.rl-text .subtitle{
    font-size: 1.625rem;
    margin: 0 0 20px 0 ;
  }
  .g-block-wrap.rl-text .strong-title{
    font-size: 1.125rem;
  }
}
@media (max-width:768px) {
  .g-block-wrap.rl-text{
    display: block;
    font-size: 1rem;
  }
  .g-block-wrap.rl-text .left{
    width: 100%;
    display: block;
    padding: 0 15px;
  }
  .g-block-wrap.rl-text .right{
    width: 100%;
    display: block;
    padding: 0 15px;
  }
  .g-block-wrap.rl-text .title, .g-block-wrap.rl-text .subtitle{
    font-size: 1.3rem;
  }
  .g-block-wrap.video .iframe {
    width: 100%;
    margin: 0 !important;
  }

  /*.g-block-wrap.video.tb .iframe:before {
    padding-bottom: 56.25%;
  }
  .g-block-wrap.video.tb .iframe iframe {
    width: 100%;
    left: 0;
  }*/
  .g-block-wrap.video .text {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    left: auto !important;
    right: auto !important;
  }

  .g-block-wrap.video .text .inner .vertical, .g-block-wrap.video.tb .text .inner .vertical {
    padding: 30px;
  }

}

@media (max-width:640px) {
  .g-block-wrap.video .text .inner .vertical, .g-block-wrap.video.tb .text .inner .vertical {
    padding: 30px 20px;
  }

  .g-block-wrap.video .text .title {
    font-size: 1.3rem;
  }

  .g-block-wrap.video .text .describe {
    width: 100%;
  }

}

/* 20180903 */
.product-side-btn {
  position: fixed;
  z-index: 20;
  right: 30px;
  bottom: 80px;
  opacity: 0;
  transform: scale(0);
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transition: opacity .2s, transform .001s .2s;
  -moz-transition: opacity .2s, transform .001s .2s;
  -webkit-transition: opacity .2s, transform .001s .2s;
}

.product-side-btn.scroll-view {
  opacity: 1;
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transition: opacity .2s, transform .001s;
  -moz-transition: opacity .2s, transform .001s;
  -webkit-transition: opacity .2s, transform .001s;
}

.product-side-btn a {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 100%;
  margin-bottom: 10px;
  transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background .2s;
}

body.pc .product-side-btn a:hover {
  background: #333;
}

.product-side-btn a span {
  display: block;
  position: absolute;
  line-height: 50px;
  font-size: 0.9375rem;
  color: #fff;
  background: #fff;
  border-radius: 25px 0 0 25px;
  padding: 0 35px 0 15px;
  top: 0;
  right: 25px;
  white-space: nowrap;
  opacity: 0;
  transform-origin: right center;
  -moz-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transition: background .2s, opacity .2s, transform .001s .2s;
  -moz-transition: background .2s, opacity .2s, transform .001s .2s;
  -webkit-transition: background .2s, opacity .2s, transform .001s .2s;
}

body.pc .product-side-btn a:hover span {
  background: #333;
  opacity: 1;
  transform: scaleX(1);
  -moz-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transition: background .2s, opacity .2s, transform .001s;
  -moz-transition: background .2s, opacity .2s, transform .001s;
  -webkit-transition: background .2s, opacity .2s, transform .001s;
}

.product-side-btn a i {
  display: block;
  position: absolute;
  width: 30px;
  line-height: 30px;
  font-size: 1.25rem;
  color: #333;
  text-align: center;
  top: 10px;
  right: 10px;
  transition: color .2s;
  -moz-transition: color .2s;
  -webkit-transition: color .2s;
}

body.pc .product-side-btn a:hover i {
  color: #fff;
}

@media (max-width:767px) {
  .product-side-btn {
    right: 20px;
  }

  .product-side-btn a {
    margin-bottom: 5px;
  }

}

#company .sec-1 .info .grid-box {
  font-size: 0;
}

#company .sec-1 .info .grid-box .item {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  padding: 5px 0;
}

#company .sec-1 .info .grid-box .item:nth-child(4n+3), #company .sec-1 .info .grid-box .item:nth-child(4n+4) {
  direction: rtl;
}

#company .sec-1 .info .grid-box .item .pic {
  display: inline-block;
  width: calc(50% - 10px);
  vertical-align: middle;
  margin: 0 5px;
}

/* 20181225 .text_1 add new parameter */
#company .sec-1 .info .grid-box .item .text {
  display: inline-block;
  width: 50%;
  line-height: 26px;
  font-size: 1rem;
  vertical-align: middle;
  padding: 0 15px;
  direction: ltr;
}

.text_1 {
  display: inline-block;
  width: 100%;
  line-height: 26px;
  font-size: 1rem;
  vertical-align: middle;
  padding: 0 15px;
  direction: ltr;
}

#company .sec-1 .info .grid-box .item .text .text_1 strong {
  display: block;
  line-height: 28px;
  font-size: 1.125rem;
  text-align: center;
  margin-bottom: 10px;
}

@media (max-width:991px) {
  #company .sec-1 .info .grid-box {
    max-width: 640px;
    margin: auto;
  }

  #company .sec-1 .info .grid-box .item {
    width: 100%;
  }

  #company .sec-1 .info .grid-box .item:nth-child(4n+3), #company .sec-1 .info .grid-box .item:nth-child(4n+4) {
    direction: ltr;
  }

}

@media (max-width:479px) {
  #company .sec-1 .info .grid-box .item {
    padding: 0;
  }

  #company .sec-1 .info .grid-box .item + .item {
    margin-top: 20px;
  }

  #company .sec-1 .info .grid-box .item .pic {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 10px;
  }

  #company .sec-1 .info .grid-box .item .text .text_1 {
    display: block;
    width: 100%;
    padding: 0;
  }

  #company .sec-1 .info .grid-box .item .text .text_1 strong {
    margin-bottom: 5px;
  }

}

/*

/* Fix: modern browsers force focus-visible outline on tabs (2026-04-16) */
.detail-menu li a:focus-visible,
.nav-tabs > li > a:focus-visible,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}