@charset "UTF-8";
/* CSS Document
 * ==========================================================================
 * 版權所有 2019 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Buzz $
 * $Date: 2019/03 $
 */
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-Bold.woff2") format("woff2"), url("../fonts/Kalam-Bold.woff") format("woff"), url("../fonts/Kalam-Bold.ttf") format("truetype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-Regular.woff2") format("woff2"), url("../fonts/Kalam-Regular.woff") format("woff"), url("../fonts/Kalam-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; }
body, html { margin: 0; padding: 0; font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #666; background: #fff; font-size: 16px; line-height: 1.8; }
html { -ms-overflow-style: scrollbar; }
_:-ms-input-placeholder, :root body { overflow-x: hidden; }

/* keyframe */
@-webkit-keyframes ani_pban_blur {
  0% { opacity: 0.1; -webkit-filter: blur(3px); filter: blur(3px); }
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
}
@-o-keyframes ani_pban_blur {
  0% { opacity: 0.1; -webkit-filter: blur(3px); filter: blur(3px); }
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
}
@keyframes ani_pban_blur {
  0% { opacity: 0.1; -webkit-filter: blur(3px); filter: blur(3px); }
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
}
@-webkit-keyframes ani_deco1 {
  0% { opacity: 0; -moz-transform: rotate(120deg) translateX(-100px); -ms-transform: rotate(120deg) translateX(-100px); -webkit-transform: rotate(120deg) translateX(-100px); transform: rotate(120deg) translateX(-100px); }
  100% { opacity: 1; -moz-transform: rotate(0deg) translateX(0); -ms-transform: rotate(0deg) translateX(0); -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); }
}
@-o-keyframes ani_deco1 {
  0% { opacity: 0; -moz-transform: rotate(120deg) translateX(-100px); -ms-transform: rotate(120deg) translateX(-100px); -webkit-transform: rotate(120deg) translateX(-100px); transform: rotate(120deg) translateX(-100px); }
  100% { opacity: 1; -moz-transform: rotate(0deg) translateX(0); -ms-transform: rotate(0deg) translateX(0); -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); }
}
@keyframes ani_deco1 {
  0% { opacity: 0; -moz-transform: rotate(120deg) translateX(-100px); -ms-transform: rotate(120deg) translateX(-100px); -webkit-transform: rotate(120deg) translateX(-100px); transform: rotate(120deg) translateX(-100px); }
  100% { opacity: 1; -moz-transform: rotate(0deg) translateX(0); -ms-transform: rotate(0deg) translateX(0); -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); }
}
@-webkit-keyframes ani_deco2 {
  0% { opacity: 0; -moz-transform: rotate(-120deg) translateX(100px); -ms-transform: rotate(-120deg) translateX(100px); -webkit-transform: rotate(-120deg) translateX(100px); transform: rotate(-120deg) translateX(100px); }
  100% { opacity: 1; -moz-transform: rotate(0deg) translateX(0); -ms-transform: rotate(0deg) translateX(0); -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); }
}
@-o-keyframes ani_deco2 {
  0% { opacity: 0; -moz-transform: rotate(-120deg) translateX(100px); -ms-transform: rotate(-120deg) translateX(100px); -webkit-transform: rotate(-120deg) translateX(100px); transform: rotate(-120deg) translateX(100px); }
  100% { opacity: 1; -moz-transform: rotate(0deg) translateX(0); -ms-transform: rotate(0deg) translateX(0); -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); }
}
@keyframes ani_deco2 {
  0% { opacity: 0; -moz-transform: rotate(-120deg) translateX(100px); -ms-transform: rotate(-120deg) translateX(100px); -webkit-transform: rotate(-120deg) translateX(100px); transform: rotate(-120deg) translateX(100px); }
  100% { opacity: 1; -moz-transform: rotate(0deg) translateX(0); -ms-transform: rotate(0deg) translateX(0); -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); }
}
@-webkit-keyframes ani_fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes ani_fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ani_fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes ani_fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes ani_fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ani_fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes ani_zoomIn {
  0% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  100% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@-o-keyframes ani_zoomIn {
  0% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  100% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@keyframes ani_zoomIn {
  0% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  100% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@-webkit-keyframes ani_zoomOut {
  0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  100% { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
}
@-o-keyframes ani_zoomOut {
  0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  100% { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
}
@keyframes ani_zoomOut {
  0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  100% { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
}
@-webkit-keyframes ani_slideRightIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-o-keyframes ani_slideRightIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes ani_slideRightIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes ani_slideRightOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@-o-keyframes ani_slideRightOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@keyframes ani_slideRightOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@-webkit-keyframes ani_sideAreaIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-o-keyframes ani_sideAreaIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes ani_sideAreaIn {
  0% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-webkit-keyframes ani_sideAreaOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@-o-keyframes ani_sideAreaOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@keyframes ani_sideAreaOut {
  0% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
}
@-webkit-keyframes ani_navbtn_zoomOut {
  0% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
  100% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); }
}
@-o-keyframes ani_navbtn_zoomOut {
  0% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
  100% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); }
}
@keyframes ani_navbtn_zoomOut {
  0% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
  100% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); }
}
@-webkit-keyframes ani_navbtn_zoomIn {
  0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@-o-keyframes ani_navbtn_zoomIn {
  0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@keyframes ani_navbtn_zoomIn {
  0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@-webkit-keyframes ani_navbtn_zoomIn_close1 {
  0% { -moz-transform: scaleX(0) rotate(45deg); -ms-transform: scaleX(0) rotate(45deg); -webkit-transform: scaleX(0) rotate(45deg); transform: scaleX(0) rotate(45deg); }
  100% { -moz-transform: scaleX(1) rotate(45deg); -ms-transform: scaleX(1) rotate(45deg); -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg); }
}
@-o-keyframes ani_navbtn_zoomIn_close1 {
  0% { -moz-transform: scaleX(0) rotate(45deg); -ms-transform: scaleX(0) rotate(45deg); -webkit-transform: scaleX(0) rotate(45deg); transform: scaleX(0) rotate(45deg); }
  100% { -moz-transform: scaleX(1) rotate(45deg); -ms-transform: scaleX(1) rotate(45deg); -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg); }
}
@keyframes ani_navbtn_zoomIn_close1 {
  0% { -moz-transform: scaleX(0) rotate(45deg); -ms-transform: scaleX(0) rotate(45deg); -webkit-transform: scaleX(0) rotate(45deg); transform: scaleX(0) rotate(45deg); }
  100% { -moz-transform: scaleX(1) rotate(45deg); -ms-transform: scaleX(1) rotate(45deg); -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg); }
}
@-webkit-keyframes ani_navbtn_zoomIn_close2 {
  0% { -moz-transform: scaleX(0) rotate(-45deg); -ms-transform: scaleX(0) rotate(-45deg); -webkit-transform: scaleX(0) rotate(-45deg); transform: scaleX(0) rotate(-45deg); }
  100% { -moz-transform: scaleX(1) rotate(-45deg); -ms-transform: scaleX(1) rotate(-45deg); -webkit-transform: scaleX(1) rotate(-45deg); transform: scaleX(1) rotate(-45deg); }
}
@-o-keyframes ani_navbtn_zoomIn_close2 {
  0% { -moz-transform: scaleX(0) rotate(-45deg); -ms-transform: scaleX(0) rotate(-45deg); -webkit-transform: scaleX(0) rotate(-45deg); transform: scaleX(0) rotate(-45deg); }
  100% { -moz-transform: scaleX(1) rotate(-45deg); -ms-transform: scaleX(1) rotate(-45deg); -webkit-transform: scaleX(1) rotate(-45deg); transform: scaleX(1) rotate(-45deg); }
}
@keyframes ani_navbtn_zoomIn_close2 {
  0% { -moz-transform: scaleX(0) rotate(-45deg); -ms-transform: scaleX(0) rotate(-45deg); -webkit-transform: scaleX(0) rotate(-45deg); transform: scaleX(0) rotate(-45deg); }
  100% { -moz-transform: scaleX(1) rotate(-45deg); -ms-transform: scaleX(1) rotate(-45deg); -webkit-transform: scaleX(1) rotate(-45deg); transform: scaleX(1) rotate(-45deg); }
}
@-webkit-keyframes ani_navbtn_zoomOut_close1 {
  0% { -moz-transform: scaleX(1) rotate(45deg); -ms-transform: scaleX(1) rotate(45deg); -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg); }
  100% { -moz-transform: scaleX(0) rotate(45deg); -ms-transform: scaleX(0) rotate(45deg); -webkit-transform: scaleX(0) rotate(45deg); transform: scaleX(0) rotate(45deg); }
}
@-o-keyframes ani_navbtn_zoomOut_close1 {
  0% { -moz-transform: scaleX(1) rotate(45deg); -ms-transform: scaleX(1) rotate(45deg); -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg); }
  100% { -moz-transform: scaleX(0) rotate(45deg); -ms-transform: scaleX(0) rotate(45deg); -webkit-transform: scaleX(0) rotate(45deg); transform: scaleX(0) rotate(45deg); }
}
@keyframes ani_navbtn_zoomOut_close1 {
  0% { -moz-transform: scaleX(1) rotate(45deg); -ms-transform: scaleX(1) rotate(45deg); -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg); }
  100% { -moz-transform: scaleX(0) rotate(45deg); -ms-transform: scaleX(0) rotate(45deg); -webkit-transform: scaleX(0) rotate(45deg); transform: scaleX(0) rotate(45deg); }
}
@-webkit-keyframes ani_navbtn_zoomOut_close2 {
  0% { -moz-transform: scaleX(1) rotate(-45deg); -ms-transform: scaleX(1) rotate(-45deg); -webkit-transform: scaleX(1) rotate(-45deg); transform: scaleX(1) rotate(-45deg); }
  100% { -moz-transform: scaleX(0) rotate(-45deg); -ms-transform: scaleX(0) rotate(-45deg); -webkit-transform: scaleX(0) rotate(-45deg); transform: scaleX(0) rotate(-45deg); }
}
@-o-keyframes ani_navbtn_zoomOut_close2 {
  0% { -moz-transform: scaleX(1) rotate(-45deg); -ms-transform: scaleX(1) rotate(-45deg); -webkit-transform: scaleX(1) rotate(-45deg); transform: scaleX(1) rotate(-45deg); }
  100% { -moz-transform: scaleX(0) rotate(-45deg); -ms-transform: scaleX(0) rotate(-45deg); -webkit-transform: scaleX(0) rotate(-45deg); transform: scaleX(0) rotate(-45deg); }
}
@keyframes ani_navbtn_zoomOut_close2 {
  0% { -moz-transform: scaleX(1) rotate(-45deg); -ms-transform: scaleX(1) rotate(-45deg); -webkit-transform: scaleX(1) rotate(-45deg); transform: scaleX(1) rotate(-45deg); }
  100% { -moz-transform: scaleX(0) rotate(-45deg); -ms-transform: scaleX(0) rotate(-45deg); -webkit-transform: scaleX(0) rotate(-45deg); transform: scaleX(0) rotate(-45deg); }
}
@-webkit-keyframes ani_slideZoom {
  0% { -moz-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); }
  100% { -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@-o-keyframes ani_slideZoom {
  0% { -moz-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); }
  100% { -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@keyframes ani_slideZoom {
  0% { -moz-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); }
  100% { -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@-webkit-keyframes ani_slideZoom_opacity {
  0% { opacity: 0; -webkit-filter: blur(3px); filter: blur(3px); -moz-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); }
  80% { opacity: 1; }
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@-o-keyframes ani_slideZoom_opacity {
  0% { opacity: 0; -webkit-filter: blur(3px); filter: blur(3px); -moz-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); }
  80% { opacity: 1; }
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@keyframes ani_slideZoom_opacity {
  0% { opacity: 0; -webkit-filter: blur(3px); filter: blur(3px); -moz-transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); transform: scale(1.1) translate(-50%, -50%); }
  80% { opacity: 1; }
  100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@-webkit-keyframes ani_jump {
  0%, 50%, 100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  25% { -moz-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); }
}
@-o-keyframes ani_jump {
  0%, 50%, 100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  25% { -moz-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); }
}
@keyframes ani_jump {
  0%, 50%, 100% { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  25% { -moz-transform: translate(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 0); }
}

/* === RESET === */
* { -webkit-backface-visibility: hidden; }
.disabled, .disabled:hover { cursor: not-allowed; }
a, a:visited, a:hover, a:focus, a:active { text-decoration: none; outline: 0; }
img, a img { border: none; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
section, article, aside, footer, header, nav, main { display: block; }
p { line-height: inherit; }
ol.reset, ul.reset, li.reset { list-style: none; margin: 0; padding: 0; }
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; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; box-shadow: none !important; }
input, textarea, select, input[type="radio"], input[type="checkbox"] { -webkit-appearance: none; }
input:not([type="button"]), input:not([type="submit"]), input:not([type="reset"]) { font-size: 16px !important; }
textarea { resize: vertical; }
input::-webkit-input-placeholder { color: #ccc; font-size: 14px; }
input:-moz-placeholder { color: #ccc; font-size: 14px; }
input::-moz-placeholder { color: #ccc; font-size: 14px; }
input:-ms-input-placeholder { color: #ccc; font-size: 14px; }
textarea::-webkit-input-placeholder { color: #ccc; font-size: 14px; }
textarea:-moz-placeholder { color: #ccc; font-size: 14px; }
textarea::-moz-placeholder { color: #ccc; font-size: 14px; }
textarea:-ms-input-placeholder { color: #ccc; font-size: 14px; }
input:-moz-read-only { background: #eee; color: #666; }
.input-style:-moz-read-only:focus { border: 1px solid #ddd; }
.textarea-style:-moz-read-only:focus { border: 1px solid #ddd; }
input:read-only { background: #eee; color: #666; }
.input-style:read-only:focus { border: 1px solid #ddd; }
.textarea-style:read-only:focus { border: 1px solid #ddd; }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ededed !important; border: 1px solid #eee; }

/* === MODULE === */

/* GOTOP */
.gotop { cursor: pointer; position: fixed; z-index: 200; bottom: 35px; right: 35px; width: 50px; height: 50px; background: #a61956; display: none; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.gotop span { position: absolute; display: block; color: #fff; top: 50%; left: 50%; padding-top: 14px; line-height: 1; font-size: 1rem; text-align: center; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.gotop span:before { content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 0 5px 6px 5px; position: absolute; left: 50%; margin-left: -5px; top: 0; }
.gotop:hover { background: #CF0C60; }
.gotop.scroll-view { display: block; -moz-animation: ani_fadeIn 0.8s both; -webkit-animation: ani_fadeIn 0.8s both; animation: ani_fadeIn 0.8s both; }
@media (max-width:767px) {
  .gotop { right: 0; bottom: 0; }
}

/* PAGER */
.p-pager { text-align: center; display: block; margin: 40px auto; opacity: 0; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.p-pager.scroll-view { opacity: 1; }
.p-pager a { font-weight: 600; display: inline-block; vertical-align: middle; text-align: center; font-size: 0.875rem; line-height: 40px; color: #222; background: none; border: none; margin: 0 6px; min-width: 40px; border-radius: 50px; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; -moz-transition: background 0.15s, color 0.15s; -o-transition: background 0.15s, color 0.15s; -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s; }
.p-pager a:hover { background: #eee; }
.p-pager a.disabled { opacity: 0.5; }
.p-pager a.num.current { color: #fff; background: #222 url(../images/texture_bg.png) repeat 0 0; }
.p-pager a.num.current:hover { color: #fff; background: #222 url(../images/texture_bg.png) repeat 0 0; }
.p-pager a.prev, .p-pager a.next { min-width: auto; font-size: 0; color: #a61956; border-radius: 0; -moz-transition: color 0.15s, border 0.15s; -o-transition: color 0.15s, border 0.15s; -webkit-transition: color 0.15s, border 0.15s; transition: color 0.15s, border 0.15s; }
.p-pager a.prev:before, .p-pager a.next:before { font-weight: 600; font-size: 0.875rem; line-height: 1.5; display: inline-block; vertical-align: middle; border-bottom: 1px solid #a61956; }
.p-pager a.prev:hover, .p-pager a.next:hover { color: #dab866; background: none; }
.p-pager a.prev:hover:before, .p-pager a.next:hover:before { border-bottom: 1px solid #dab866; }
.p-pager a.prev { margin-right: 30px; }
.p-pager a.prev:before { content: "PREV"; }
.p-pager a.next { margin-left: 30px; }
.p-pager a.next:before { content: "NEXT"; }
@media (max-width:767px) {
  .p-pager a.prev { margin-right: 15px; }
  .p-pager a.next { margin-left: 15px; }
}

/* HR */
.g-hr { display: block; height: 1px; width: 100%; margin: 15px auto; border: none; border-bottom: 1px solid #ddd; }

/* OVERFLOW */
.open-overlay { position: fixed; z-index: 190; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); display: none; }
.open-overlay.is-open { display: block; -moz-animation: ani_fadeIn 0.5s both linear; -webkit-animation: ani_fadeIn 0.5s both linear; animation: ani_fadeIn 0.5s both linear; }
.open-overlay.is-close { -moz-animation: ani_fadeOut 0.5s both linear; -webkit-animation: ani_fadeOut 0.5s both linear; animation: ani_fadeOut 0.5s both linear; }

/* FORM - BOX */
.form-box { display: block; position: relative; margin: 0 auto 20px auto; padding: 0 0 0 90px; }
.form-box.form-half { display: inline-block; vertical-align: top; width: calc(50% - 29px); }
.form-box.form-half.odd { margin-right: 50px; }
.form-box.form-half.even { margin-right: 0; }
.form-box.form-sex { padding-right: 170px; }
.form-box.form-sex .form-gp { position: absolute; bottom: 0; right: 0; width: 160px; min-height: 40px; line-height: 40px; }
.form-box.form-sex .form-gp .radio-style { width: 48%; margin: 0; padding-left: 10px; }
.form-box.form-adress .label-style { padding-left: 0.5rem; }
.form-box.form-adress .select-style { display: inline-block; vertical-align: top; width: calc((50% - 85px) / 2); }
.form-box.form-adress .select-style:nth-of-type(2) { margin-left: 5px; }
.form-box.form-adress .input-style { display: inline-block; vertical-align: top; width: calc(50% + 65px); margin-left: 5px; }
@media (max-width:1199px) {
  .form-box.form-half { width: calc(50% - 19px); }
  .form-box.form-half.odd { margin-right: 30px; }
  .form-box.form-half.even { margin-right: 0; }
}
@media (max-width:991px) {
  .form-box.form-half { display: block; width: 100%; }
  .form-box.form-half.odd { margin-right: 0; }
  .form-box.form-half.even { margin-right: 0; }
  .form-box.form-adress .select-style { width: calc(50% - 5px); }
  .form-box.form-adress .input-style { display: block; width: 100%; margin-top: 15px; margin-left: 0; }
}
@media (max-width:499px) {
  .form-box { margin-bottom: 12px; padding-left: 0; }
}

/* LABEL */
.label-style { font-size: 1rem; color: #444; padding: 0; margin: 0; width: 85px; line-height: 40px; display: block; border: none; position: absolute; top: 0; left: 0; }
@media (max-width:499px) {
  .label-style { position: relative; width: auto; line-height: 1.8; }
}

/* CODE */
.form-box.code { width: 100%; max-width: 510px; padding-right: 162px; display: inline-block; vertical-align: middle; }
.codeimg { width: 152px; position: absolute; bottom: 0; right: 0; }
@media (max-width:599px) {
  .form-box.code { max-width: none; }
}
.star { font-size: 1em; line-height: 0; font-family: "Arial", sans-serif; color: #a61956; display: inline-block; vertical-align: middle; margin-right: 3px; margin-top: -3px; font-style: normal; }

/* RADIO */
.radio-style { padding: 0; margin: 0 10px; display: inline-block; font-weight: normal; }
.radio-style input { outline: none; display: none; }
.radio-style input + span { display: inline-block; vertical-align: baseline; border: 2px solid #999; background: #fff; width: 15px; height: 15px; padding: 3px; margin: 0 8px -2px 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.radio-style input + span i { display: block; width: 100%; height: 100%; background: #999; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }
.radio-style input:checked + span { border-color: #999; }
.radio-style input:checked + span i { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.radio-style:hover input + span, .radio-style:active input + span { border-color: #666; }
.radio-style:hover input + span i, .radio-style:active input + span i { background-color: #666; }
.radio-style:hover input:checked + span, .radio-style:active input:checked + span { border-color: #666; background: #fff; }
.radio-style:hover input:checked + span i, .radio-style:active input:checked + span i { background-color: #666; }
@media (max-width:991px) {
  .radio-style { margin: 0 5px; }
}

/* TEXT */
.input-style { height: 40px; padding: 0 15px; width: 100%; display: block; outline: none; border-radius: 0; background: #fff; border: 1px solid #ddd; -moz-transition: border 0.15s, background 0.15s; -o-transition: border 0.15s, background 0.15s; -webkit-transition: border 0.15s, background 0.15s; transition: border 0.15s, background 0.15s; }
.input-style:focus { border: 1px solid #dab866; }

/* TEXTAREA */
.textarea-style { background: #fff; height: 90px; padding: 10px; width: 100%; display: block; outline: none; border: 1px solid #ddd; -moz-transition: border 0.15s; -o-transition: border 0.15s; -webkit-transition: border 0.15s; transition: border 0.15s; }
.textarea-style:focus { border: 1px solid #dab866; }
.select-style { padding: 0 40px 0 15px; display: block; width: 100%; height: 40px; line-height: 40px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff url("../images/select_aw.png") right 0 no-repeat; background-size: auto 100%; outline: none; border: 1px solid #ddd; border-radius: 0; -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; }
.select-style:focus { border-color: #dab866; }
.select-style::-ms-expand { display: none; }

/* BREADCRUMB */
.g-breadcrumb { background: #edf1f5; padding: 15px 0; line-height: 1.2; text-align: right; opacity: 0; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; -webkit-transition: opacity 0.6s; transition: opacity 0.6s; }
.g-breadcrumb.scroll-view { opacity: 1; }
.g-breadcrumb ul li { position: relative; display: inline-block; vertical-align: baseline; color: #888; padding-left: 30px; font-size: 13px; }
.g-breadcrumb ul li:before { content: ""; width: 8px; height: 1px; display: inline-block; position: absolute; background: #c0c0c0; left: 10px; top: 10px; -moz-transform: rotate(-55deg); -ms-transform: rotate(-55deg); -webkit-transform: rotate(-55deg); transform: rotate(-55deg); }
.g-breadcrumb ul li:first-child { padding-left: 0; }
.g-breadcrumb ul li:first-child:before { display: none; }
.g-breadcrumb ul li a { color: inherit; text-decoration: none; display: block; }
.g-breadcrumb ul li a:hover { text-decoration: underline; }
.g-breadcrumb ul li:last-child { color: #666; }
@media (max-width:991px) {
  .g-breadcrumb { padding: 10px 0; }
  .g-breadcrumb ul li { padding-left: 20px; }
  .g-breadcrumb ul li:before { left: 3px; }
  .g-breadcrumb ul li:first-child { padding-left: 0; }
  .g-breadcrumb ul li:first-child:before { display: none; }
}
@media (max-width:767px) {
  .g-breadcrumb { padding: 5px 0; }
  .g-breadcrumb ul li { display: inline; font-size: 10px; }
  .g-breadcrumb ul li a { display: inline; }
}

/* FUNCTION - CATEGORY */
.g-catetab { position: relative; text-align: center; width: 100%; z-index: 90; font-size: 0; padding: 0; margin: 0 auto 50px auto; opacity: 0; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -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-catetab.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.g-catetab .cur-item { display: none; }
.g-catetab ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.g-catetab ul li { display: inline-block; vertical-align: middle; }
.g-catetab ul li a { display: block; padding: 13px 15px; margin: 0 0 0 -1px; min-width: 145px; text-align: center; line-height: 1.25; font-size: 0.9375rem; color: #666; background: #fff; border: 1px solid #dab866; -moz-transition: color 0.15s, border 0.15s, background 0.15s; -o-transition: color 0.15s, border 0.15s, background 0.15s; -webkit-transition: color 0.15s, border 0.15s, background 0.15s; transition: color 0.15s, border 0.15s, background 0.15s; }
.g-catetab ul li a:hover { color: #222; background: #f6f6f6; }
.g-catetab ul li.current a { color: #fff; background: #dab866; }
@media (min-width:768px) {
  .g-catetab.more-item { z-index: 20; max-width: 400px; width: calc(100% - 30px); border: 1px solid transparent; background: none; overflow: visible; padding: 0; -moz-transition: border 0.2s, background 0.2s; -o-transition: border 0.2s, background 0.2s; -webkit-transition: border 0.2s, background 0.2s; transition: border 0.2s, background 0.2s; }
  .g-catetab.more-item .cur-item { cursor: pointer; white-space: nowrap; display: block; position: relative; z-index: 1; height: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 40px; margin: 5px; text-align: center; line-height: 44px; font-size: 1rem; border: 1px solid #dab866; color: #222; -moz-box-shadow: 0 1 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1 2px rgba(0, 0, 0, 0.1); -moz-transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; -o-transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; -webkit-transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; }
  .g-catetab.more-item .cur-item:after { content: ""; position: absolute; top: 50%; margin-top: -4px; right: 20px; display: inline-block; width: 8px; height: 8px; border: none; border-right: 2px solid #dab866; border-bottom: 2px solid #dab866; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .g-catetab.more-item .cur-item:hover { -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); background-color: rgba(255, 255, 255, 0.1); }
  .g-catetab.more-item ul { display: none; position: absolute; z-index: 0; border: 1px solid #dab866; padding: 50px 4px 4px 4px; margin: 0 0 0 0; top: 0; left: 0; right: 0; background: #fff; -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
  .g-catetab.more-item ul li { display: block; min-width: auto; padding: 0; margin: 0; border-top: 1px dotted #ddd; }
  .g-catetab.more-item ul li a { background-color: transparent; border: none; margin: 0; padding: 13px 8px 11px 8px; color: #666; font-size: 1rem; }
  .g-catetab.more-item ul li a:hover { background: #f6f6f6; color: #666; }
  .g-catetab.more-item ul li:first-child { border-top: none; }
  .g-catetab.more-item ul li.current a { background: #eee; color: #b0892a; font-weight: 600; }
  .g-catetab.more-item.open { padding: 0; }
  .g-catetab.more-item.open .cur-item { background: #dab866; color: #fff; border: 1px solid transparent; }
  .g-catetab.more-item.open .cur-item:after { border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
  .g-catetab.more-item.open ul { position: absolute; display: block; -moz-animation: ani_fadeIn 0.5s both; -webkit-animation: ani_fadeIn 0.5s both; animation: ani_fadeIn 0.5s both; }
}
@media (max-width:991px) {
  .g-catetab { margin: 0 auto 35px auto; }
}
@media (max-width:767px) {
  .g-catetab { z-index: 20; max-width: 400px; width: calc(100% - 30px); border: 1px solid transparent; background: none; overflow: visible; padding: 0; -moz-transition: border 0.2s, background 0.2s; -o-transition: border 0.2s, background 0.2s; -webkit-transition: border 0.2s, background 0.2s; transition: border 0.2s, background 0.2s; }
  .g-catetab .cur-item { cursor: pointer; white-space: nowrap; display: block; position: relative; z-index: 1; height: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 40px; margin: 5px; text-align: center; line-height: 44px; font-size: 1rem; border: 1px solid #dab866; color: #222; -moz-box-shadow: 0 1 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1 2px rgba(0, 0, 0, 0.1); -moz-transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; -o-transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; -webkit-transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; transition: color 0.15s, background 0.15s, border 0.15s, box-shadow 0.15s; }
  .g-catetab .cur-item:after { content: ""; position: absolute; top: 50%; margin-top: -4px; right: 20px; display: inline-block; width: 8px; height: 8px; border: none; border-right: 2px solid #dab866; border-bottom: 2px solid #dab866; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .g-catetab .cur-item:hover { -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); background-color: rgba(255, 255, 255, 0.1); }
  .g-catetab ul { display: none; position: absolute; z-index: 0; border: 1px solid #dab866; padding: 50px 4px 4px 4px; margin: 0 0 0 0; top: 0; left: 0; right: 0; background: #fff; -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
  .g-catetab ul li { display: block; min-width: auto; padding: 0; margin: 0; border-top: 1px dotted #ddd; }
  .g-catetab ul li a { background-color: transparent; border: none; margin: 0; padding: 13px 8px 11px 8px; color: #666; font-size: 1rem; }
  .g-catetab ul li a:hover { background: #f6f6f6; color: #666; }
  .g-catetab ul li:first-child { border-top: none; }
  .g-catetab ul li.current a { background: #eee; color: #b0892a; font-weight: 600; }
  .g-catetab.open { padding: 0; }
  .g-catetab.open .cur-item { background: #dab866; color: #fff; border: 1px solid transparent; }
  .g-catetab.open .cur-item:after { border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
  .g-catetab.open ul { position: absolute; display: block; -moz-animation: ani_fadeIn 0.5s both; -webkit-animation: ani_fadeIn 0.5s both; animation: ani_fadeIn 0.5s both; }
}
@media (max-width:499px) {
  .g-catetab { width: 100%; }
}
.btn-back { display: block; width: 125px; position: relative; margin: 50px auto; text-align: right; }
.btn-back:hover:before { background-color: #555; }
.btn-back:hover > div { letter-spacing: 0.01rem; }
.btn-back:before { content: ""; position: absolute; z-index: 0; right: 0; top: 50%; height: 58px; width: 58px; border-radius: 50%; background: #222 url(../images/texture_bg.png) repeat 0 0; -moz-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.btn-back > div { display: block; position: relative; line-height: 1; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; white-space: nowrap; padding-right: 20px; color: #fff; letter-spacing: 0; -moz-transition: letter-spacing 0.1s; -o-transition: letter-spacing 0.1s; -webkit-transition: letter-spacing 0.1s; transition: letter-spacing 0.1s; }
.btn-back > div .chgcolor { color: #222; display: inline-block; }
.btn-back > div:after { content: ""; display: block; height: 1px; width: 10px; background: #fff; position: absolute; top: 40%; right: 10px; }
@media (max-width:767px) {
  .btn-back { margin: 30px auto; font-size: 0.875rem; }
  .btn-back:before { width: 50px; height: 50px; }
}

/* FINISH EFFECT */
.fc-success { width: 70px; height: 70px; margin: 20px auto; display: block; position: relative; border: 5px solid #008 \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 #008; 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; -o-animation: fc_rotate 1s linear; animation: fc_rotate 1s linear; -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; -o-animation: fc_fill 1s ease; animation: fc_fill 1s ease; 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; -o-animation: fc_mask 1s ease; animation: fc_mask 1s ease; 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: #008; }
.fc-success .check span:nth-child(1) { width: 30%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.fc-success .check span:nth-child(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: 600; color: #555; font-size: 1.5rem; line-height: 1.2; margin: 0.5rem 0; font-family: "Poppins", "PingFangTC", "Noto Sans CJK", "Microsoft JhengHei", "Arial", "PMingLiU", sans-serif; 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; }
.finish-msg { margin: 0 auto 20px auto; }
.finish-msg .btn-wrap { margin: 20px auto 0 auto; }
.finish-msg .btn-wrap .btn-fly { width: 150px; height: 45px; display: inline-block; position: relative; border: none; line-height: 45px; text-align: center; color: #fff; font-size: 1.06rem; background: #008; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -moz-box-shadow: 0 0 3px transparent; -webkit-box-shadow: 0 0 3px transparent; box-shadow: 0 0 3px transparent; -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -moz-transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96); -o-transition: background 0.3s, color 0.3s, box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -o-transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96); transition: background 0.3s, color 0.3s, box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96); }
.finish-msg .btn-wrap .btn-fly span { position: relative; z-index: 1; }
.finish-msg .btn-wrap .btn-fly:before { content: ""; display: block; position: absolute; z-index: 0; background: #0000a2; width: 100%; height: 100%; top: 0; left: 0; -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); opacity: 0; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -o-transition: -o-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; }
.finish-msg .btn-wrap .btn-fly:hover { color: #fff; -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -webkit-transform: translateY(-2px); transform: translateY(-2px); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); }
.finish-msg .btn-wrap .btn-fly:hover:before { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }

/* No-data */
.msg-nodata { padding: 100px 15px; margin: auto; text-align: center; }
.msg-nodata .img { width: 80px; height: 80px; display: block; position: relative; margin: 0 auto 10px auto; border-radius: 50%; background: #dab866; }
.msg-nodata .img i { color: #fff; display: inline-block; font-size: 2rem; 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%); }
.msg-nodata .text { text-align: center; font-size: 1.125rem; font-weight: 600; margin-bottom: 50px; }
.msg-nodata .btn-style { display: block; max-width: 200px; margin: 25px auto; color: #222; font-size: 1rem; height: 45px; line-height: 45px; border: 1px solid #999; background: #fff; -moz-transition: background 0.3s, border 0.3s, color 0.3s, opacity 0.3s 0.33s, -moz-transform 0.3s 0.33s; -o-transition: background 0.3s, border 0.3s, color 0.3s, opacity 0.3s 0.33s, -o-transform 0.3s 0.33s; -webkit-transition: background 0.3s, border 0.3s, color 0.3s, opacity 0.3s, -webkit-transform 0.3s; -webkit-transition-delay: 0s, 0s, 0s, 0.33s, 0.33s; transition: background 0.3s, border 0.3s, color 0.3s, opacity 0.3s 0.33s, transform 0.3s 0.33s; }
.msg-nodata .btn-style:hover { color: #fff; background: #dab866; border: 1px solid #dab866; }
.msg-nodata[data-scrollview] .img { opacity: 0; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: opacity 0.4s ease-in-out, -moz-transform 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out, -o-transform 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
.msg-nodata[data-scrollview] .text { opacity: 0; -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); -webkit-transform: translate(0, -20px); transform: translate(0, -20px); -moz-transition: opacity 0.3s 0.2s, -moz-transform 0.3s 0.2s; -o-transition: opacity 0.3s 0.2s, -o-transform 0.3s 0.2s; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -webkit-transition-delay: 0.2s, 0.2s; transition: opacity 0.3s 0.2s, transform 0.3s 0.2s; }
.msg-nodata[data-scrollview] .btn-style { opacity: 0; -moz-transform: translate(0, 30px); -ms-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); }
.msg-nodata[data-scrollview].scroll-view .img { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.msg-nodata[data-scrollview].scroll-view .text, .msg-nodata[data-scrollview].scroll-view a { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
@media (max-width:1199px) {
  .msg-nodata { padding: 40px 15px 50px 15px; }
  .msg-nodata .img { width: 65px; height: 65px; }
  .msg-nodata .text { margin-bottom: 35px; }
}
@media (max-width:991px) {
  .msg-nodata { padding: 20px 15px 40px 15px; }
}

/* FUNCTION - CACULATE BOX */
.input-caculate { height: 35px; width: 120px; display: inline-block; position: relative; padding: 0 33px; margin: 0 auto; border: 1px solid #ccc; background: #fff; }
.input-caculate .numbtn { width: 30px; height: 100%; top: 0; bottom: 0; border: none; line-height: 1; text-align: center; position: absolute; padding: 0; font-family: "Arial", sans-serif; background: #fff; color: #666; -moz-transition: background 0.15s, color 0.15s; -o-transition: background 0.15s, color 0.15s; -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s; }
.input-caculate .numbtn.dec { left: 0; border-right: 1px solid #ccc; }
.input-caculate .numbtn.inc { right: 0; border-left: 1px solid #ccc; }
.input-caculate .numbtn:hover, .input-caculate .numbtn:active { background: #ccc; color: #fff; }
.input-caculate .numbtn input { border: none; background: none; width: auto; height: 100%; max-width: 50px; height: 33px; display: inline-block; padding: 0 5px; margin: 0; text-align: center; }
.input-caculate.full { width: 100%; margin-bottom: 10px; padding: 5px 30px; height: auto; }

/* === infinite scroll === */
.btn-loadmore { margin: 85px auto 10px auto; display: block; position: relative; width: 84px; height: 84px; border-radius: 50%; border: none; background: #a61956 url(../images/texture_bg.png) repeat 0 0; -moz-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); -moz-transform: rotate(90deg) translateX(-50%); -ms-transform: rotate(90deg) translateX(-50%); -webkit-transform: rotate(90deg) translateX(-50%); transform: rotate(90deg) translateX(-50%); -moz-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.btn-loadmore:hover { background-color: #CF0C60; }
.btn-loadmore span { display: block; position: absolute; font-size: 0.875rem; line-height: 1; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; white-space: nowrap; padding-right: 35px; left: -25px; top: 50%; color: #fff; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.btn-loadmore span i { color: #a61956; font-style: normal; }
.btn-loadmore span:after { content: ""; display: block; height: 1px; width: 19px; background: #fff; position: absolute; top: 40%; right: 5px; -moz-animation: ani_jump 1s infinite both; -webkit-animation: ani_jump 1s infinite both; animation: ani_jump 1s infinite both; }
.btn-loadmore span:before { content: ""; position: absolute; right: 0; top: 40%; margin-top: -4px; display: block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 8px; border-color: transparent transparent transparent #fff; -moz-animation: ani_jump 1s infinite both; -webkit-animation: ani_jump 1s infinite both; animation: ani_jump 1s infinite both; }

/* === LAYOUT === */
.container { width: 100%; max-width: 1530px; padding-left: 15px; padding-right: 15px; position: relative; }
@media (max-width:991px) {
max-width: 850px; }

/* === FOOTER === */
.footer { position: relative; z-index: 10; background: #fff; border-top: 4px solid #a61956; opacity: 0; -moz-transition: opacity 1s; -o-transition: opacity 1s; -webkit-transition: opacity 1s; transition: opacity 1s; }
.footer.scroll-view { opacity: 1; }
.f-top { padding-top: 75px; padding-bottom: 75px; }
.f-link { position: relative; z-index: 0; font-size: 0; vertical-align: top; text-align: center; }
.f-link li { position: relative; display: inline-block; vertical-align: top; width: calc(100% / 6); max-width: 120px; padding: 0 15px; text-align: center; }
.f-link li:before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #a61956; top: 50%; left: 0; margin-top: -2px; }
.f-link li a { display: block; font-weight: 600; color: #222; font-size: 1rem; white-space: normal; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.f-link li a:hover { color: #a61956; }
.f-link li:nth-child(1):before, .f-link li:nth-child(4):before { display: none; }
.f-link li:nth-child(3) { margin-right: 90px; }
.f-link li:nth-child(4) { margin-left: 90px; }
.f-logo { position: absolute; display: block; z-index: 1; width: 125px; height: 88px; left: 50%; top: 50%; margin-left: -63px; margin-top: -44px; font-size: 0; }
.f-logo > div { display: block; margin: 0 auto; background-image: url(../images/logo.png); background-repeat: no-repeat; -moz-background-size: auto 300%; -o-background-size: auto 300%; -webkit-background-size: auto 300%; background-size: auto 300%; }
.f-logo > div:before { content: ""; display: block; width: 100%; position: relative; }
.f-logo > div:nth-of-type(1) { width: 72%; background-position: 0 0; }
.f-logo > div:nth-of-type(1):before { padding-bottom: 52.222%; }
.f-logo > div:nth-of-type(2) { width: 100%; background-position: 100% 50%; }
.f-logo > div:nth-of-type(2):before { padding-bottom: 38.2111%; }
.f-copyright { background: #a61956; color: #dda8bf; padding: 15px; font-size: 0.875rem; text-align: center; word-break: break-all; }
.f-copyright span { display: inline; }
.f-grnet { color: #af557b; display: inline-block; }
.f-grnet a { color: #af557b; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.f-grnet a:hover { color: #dda8bf; }
@media (max-width:991px) {
  .f-top { padding-top: 35px; padding-bottom: 35px; }
  .f-link li { padding: 0 12px; max-width: 90px; }
  .f-link li:nth-child(3) { margin-right: 60px; }
  .f-link li:nth-child(4) { margin-left: 60px; }
  .f-link li a { font-size: 0.9375rem; }
  .f-logo { width: 100px; height: 70px; margin-left: -50px; margin-top: -35px; }
  .f-copyright { padding: 10px 15px; }
}
@media (max-width:767px) {
  .f-top { padding-top: 15px; padding-bottom: 15px; }
  .f-logo { display: none; width: 0; }
  .f-link li { width: auto; max-width: none; padding: 0 15px; }
  .f-link li:nth-child(3) { margin-right: 0; }
  .f-link li:nth-child(4) { margin-left: 0; }
  .f-link li:nth-child(4):before { display: inline-block; }
}
@media (max-width:599px) {
  .f-link li { padding: 0 10px; width: calc(100% / 3); white-space: nowrap; }
  .f-link li:nth-child(4):before { display: none; }
  .f-copyright span { display: inline-block; }
}
@media (max-width:399px) {
  .f-copyright span { display: block; }
}

/* === HEADER === */
.header { position: fixed; z-index: 200; left: 0; right: 0; top: 0; height: 92px; -moz-transition: height 0.25s; -o-transition: height 0.25s; -webkit-transition: height 0.25s; transition: height 0.25s; }
@media (min-width:992px) {
  .header.is-scroll { height: 62px; }
  .header.is-scroll .side-area { top: 74px; }
  .header.is-scroll .top-nav a.toplink-shop span .text, .header.is-scroll .top-nav a.toplink-contact span .text { display: none; -moz-animation: ani_fadeOut 0.25s both; -webkit-animation: ani_fadeOut 0.25s both; animation: ani_fadeOut 0.25s both; }
  .header.is-overban .g-logo span:nth-of-type(2) { background-position: 100% 50%; }
}
.g-logo { position: absolute; overflow: hidden; display: block; margin: -16px 0 0 0; padding: 0; z-index: 1; width: 233px; height: 47px; left: 30px; top: 50%; font-size: 0; }
.g-logo a { display: block; }
.g-logo span { display: inline-block; vertical-align: middle; margin: 0 auto; background-image: url(../images/logo.png); background-repeat: no-repeat; -moz-background-size: auto 300%; -o-background-size: auto 300%; -webkit-background-size: auto 300%; background-size: auto 300%; -moz-transition: all 0.25s; -o-transition: all 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s; }
.g-logo span:before { content: ""; display: block; width: 100%; position: relative; }
.g-logo span:nth-of-type(1) { width: 40.35%; background-position: 0 0; }
.g-logo span:nth-of-type(1):before { padding-bottom: 52.222%; }
.g-logo span:nth-of-type(2) { width: 55.15%; background-position: 100% 0; margin-left: 4%; }
.g-logo span:nth-of-type(2):before { padding-bottom: 38.2111%; }
.top-nav { position: absolute; width: 410px; height: 100%; font-size: 0; top: 0; right: 0; text-align: right; }
.top-nav:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: -12px; height: 12px; background: #a61956; display: block; }
.top-nav a { position: relative; display: inline-block; vertical-align: top; text-align: center; height: 100%; width: calc(100% / 3); background: #fff; }
.top-nav a:before { content: ""; display: block; width: 1px; height: 34px; position: absolute; top: 50%; left: 0; margin-top: -17px; background: #ddd; }
.top-nav a:first-of-type:before { display: none; }
.top-nav a.toplink-shop, .top-nav a.toplink-contact { text-align: center; color: #222; line-height: 1.5; -moz-transition: background 0.15s, color 0.15s; -o-transition: background 0.15s, color 0.15s; -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s; }
.top-nav a.toplink-shop span, .top-nav a.toplink-contact span { top: 50%; left: 0; display: block; width: 100%; text-align: center; position: absolute; font-size: 0.9375rem; letter-spacing: 0.016rem; font-weight: 600; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -moz-transition: font-size 0.25s; -o-transition: font-size 0.25s; -webkit-transition: font-size 0.25s; transition: font-size 0.25s; }
.top-nav a.toplink-shop span .text, .top-nav a.toplink-contact span .text { font-style: normal; font-size: inherit; font-weight: inherit; letter-spacing: inherit; display: block; white-space: normal; -moz-animation: ani_fadeIn 0.25s both; -webkit-animation: ani_fadeIn 0.25s both; animation: ani_fadeIn 0.25s both; }
.top-nav a.toplink-shop span:before, .top-nav a.toplink-contact span:before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto; padding: 0; background-image: url(../images/icon_topnav.png); background-repeat: no-repeat; -moz-background-size: auto 200%; -o-background-size: auto 200%; -webkit-background-size: auto 200%; background-size: auto 200%; }
.top-nav a.toplink-shop:hover, .top-nav a.toplink-contact:hover { color: #fff; background: #a61956; }
.top-nav a.toplink-shop:hover:before, .top-nav a.toplink-contact:hover:before { display: none; }
.top-nav a.toplink-shop span:before { background-position: 0 100%; }
.top-nav a.toplink-shop:hover span:before, .top-nav a.toplink-shop.is-open span:before { background-position: 0 0; }
.top-nav a.toplink-contact span:before { background-position: 100% 100%; }
.top-nav a.toplink-contact:hover span:before, .top-nav a.toplink-contact.is-open span:before { background-position: 100% 0; }
.top-nav a.toplink-nav div { position: absolute; display: inline-block; height: 3px; width: 34px; border-radius: 20px; top: 50%; left: 50%; margin-left: -17px; background: #444; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.top-nav a.toplink-nav div:nth-child(1), .top-nav a.toplink-nav div:nth-child(2) { margin-top: -5px; margin-left: -22px; }
.top-nav a.toplink-nav div:nth-child(3), .top-nav a.toplink-nav div:nth-child(4) { margin-top: 5px; margin-left: -12px; }
.top-nav a.toplink-nav div:nth-child(1), .top-nav a.toplink-nav div:nth-child(3) { -moz-transform-origin: left center; -ms-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.top-nav a.toplink-nav div:nth-child(2), .top-nav a.toplink-nav div:nth-child(4) { -moz-transform-origin: right center; -ms-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.top-nav a.toplink-nav div:nth-child(5), .top-nav a.toplink-nav div:nth-child(6) { display: none; }
.top-nav a.toplink-nav:not(.is-open):not(.is-close):hover div { background: #a61956; }
.top-nav a.toplink-nav:not(.is-open):not(.is-close):hover div:nth-child(1), .top-nav a.toplink-nav:not(.is-open):not(.is-close):hover div:nth-child(3) { -moz-animation: ani_navbtn_zoomIn 0.32s 0.2s both; -webkit-animation: ani_navbtn_zoomIn 0.32s 0.2s both; animation: ani_navbtn_zoomIn 0.32s 0.2s both; }
.top-nav a.toplink-nav:not(.is-open):not(.is-close):hover div:nth-child(2), .top-nav a.toplink-nav:not(.is-open):not(.is-close):hover div:nth-child(4) { -moz-animation: ani_navbtn_zoomOut 0.3s 0.1s both; -webkit-animation: ani_navbtn_zoomOut 0.3s 0.1s both; animation: ani_navbtn_zoomOut 0.3s 0.1s both; }
.top-nav a.toplink-nav.is-open div:nth-child(1), .top-nav a.toplink-nav.is-open div:nth-child(2), .top-nav a.toplink-nav.is-open div:nth-child(3), .top-nav a.toplink-nav.is-open div:nth-child(4) { display: none; }
.top-nav a.toplink-nav.is-open div:nth-child(5) { display: block; margin-top: -2px; margin-left: -17px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-animation: ani_navbtn_zoomIn_close1 0.32s 0.1s both; -webkit-animation: ani_navbtn_zoomIn_close1 0.32s 0.1s both; animation: ani_navbtn_zoomIn_close1 0.32s 0.1s both; }
.top-nav a.toplink-nav.is-open div:nth-child(6) { display: block; margin-top: -2px; margin-left: -17px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-animation: ani_navbtn_zoomIn_close2 0.32s 0.15s both; -webkit-animation: ani_navbtn_zoomIn_close2 0.32s 0.15s both; animation: ani_navbtn_zoomIn_close2 0.32s 0.15s both; }
.top-nav a.toplink-nav.is-close div:nth-child(1), .top-nav a.toplink-nav.is-close div:nth-child(3) { display: block; -moz-animation: ani_navbtn_zoomIn 0.3s 0.2s both; -webkit-animation: ani_navbtn_zoomIn 0.3s 0.2s both; animation: ani_navbtn_zoomIn 0.3s 0.2s both; }
.top-nav a.toplink-nav.is-close div:nth-child(5) { -moz-animation: ani_navbtn_zoomOut_close1 0.32s both; -webkit-animation: ani_navbtn_zoomOut_close1 0.32s both; animation: ani_navbtn_zoomOut_close1 0.32s both; }
.top-nav a.toplink-nav.is-close div:nth-child(6) { -moz-animation: ani_navbtn_zoomOut_close2 0.32s both; -webkit-animation: ani_navbtn_zoomOut_close2 0.32s both; animation: ani_navbtn_zoomOut_close2 0.32s both; }
_:-ms-input-placeholder, :root .top-nav a { width: calc(100% / 3.005); }
.is-oldie .top-nav a { width: 33%; }
.is-oldie .imgLiquid img { display: block !important; visibility: visible !important; }
.side-area { background: #fff; position: fixed; top: 92px; bottom: 0; right: 0; width: 100%; max-width: 410px; padding: 0; margin: 0; display: none; }
.side-area.is-open { display: block; -moz-animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_sideAreaIn 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
.side-area.is-close { -moz-animation: ani_sideAreaOut 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_sideAreaOut 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_sideAreaOut 0.6s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
.side-area > ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; align-content: stretch; height: 100%; overflow-y: auto; display: block \9; }
.side-area > ul li { width: 100%; align-content: stretch; display: block; text-align: center; background: #fff; flex: 1 1 245px; position: relative; padding: 0; display: inline-block \9; min-height: 245px \9; }
.side-area > ul li a { display: block; background: #fefefe; width: 100%; height: 100%; position: relative; overflow: hidden; }
.side-area > ul li a:before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; -moz-transition: opacity 0.25s; -o-transition: opacity 0.25s; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; }
.side-area > ul li a .text { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; text-align: left; padding: 0 40px; color: #fff; font-size: 1.625rem; letter-spacing: 0.033rem; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.side-area > ul li a.is-nohover:before { opacity: 1; }
@media (max-width:991px) {
  .header { background: #fff; height: 62px; -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); }
  .header:after { content: ""; z-index: 0; position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: -4px; height: 4px; background: #a61956; display: block; }
  .top-nav { width: calc(100% - 220px); }
  .top-nav:after { display: none; }
  .top-nav a.toplink-shop span:before, .top-nav a.toplink-contact span:before { display: inline-block; vertical-align: middle; }
  .top-nav a.toplink-shop span .text, .top-nav a.toplink-contact span .text { display: inline-block; vertical-align: middle; }
  .top-nav a.toplink-nav { width: 80px; }
  .top-nav a.toplink-nav div { width: 24px; margin-left: -12px; }
  .top-nav a.toplink-nav div:nth-child(1), .top-nav a.toplink-nav div:nth-child(2) { margin-left: -12px; }
  .top-nav a.toplink-nav div:nth-child(3), .top-nav a.toplink-nav div:nth-child(4) { margin-left: -5px; width: 17px; }
  .top-nav a.toplink-nav.is-open div:nth-child(5), .top-nav a.toplink-nav.is-open div:nth-child(6) { margin-left: -12px; }
  .g-logo { margin: -15px 0 0 0; width: 160px; height: 36px; left: 10px; }
  .g-logo span:nth-of-type(2) { background-position: 100% 50%; }
  .side-area { top: 62px; }
}
@media (max-width:639px) {
  .top-nav { width: calc(100% - 170px); max-width: 250px; }
  .top-nav a.toplink-shop span .text, .top-nav a.toplink-contact span .text { display: none; }
  .top-nav a.toplink-nav { width: calc(100% / 3); }
}
@media (max-width:439px) {
  .side-area { max-width: 100%; }
}
@media (max-width:499px) {
  .g-logo { width: 100px; height: 36px; margin: -18px 0 0 0; }
  .g-logo span:nth-of-type(1) { display: none; }
  .g-logo span:nth-of-type(2) { margin-left: 0; width: 100%; }
  .top-nav { width: calc(100% - 120px); }
}
@media (max-width:991px) {
  body { padding-top: 62px; }
}

/* === INDEX === */
.i-scroll { cursor: pointer; position: absolute; bottom: 0; left: 0; width: 86px; height: 235px; background: #a61956; opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -moz-transition: background 0.15s, opacity 0.5s, -moz-transform 0.5s; -o-transition: background 0.15s, opacity 0.5s, -o-transform 0.5s; -webkit-transition: background 0.15s, opacity 0.5s, -webkit-transform 0.5s; transition: background 0.15s, opacity 0.5s, transform 0.5s; }
.i-scroll.scroll-view { opacity: 0; -moz-transform: translateY(20px); -ms-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); }
.i-scroll:hover { background: #af1a5b; }
.i-scroll div { position: absolute; display: inline-block; color: #fff; padding-right: 76px; top: 50%; left: 50%; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; letter-spacing: 0.3rem; -moz-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); }
.i-scroll div:after { content: ""; width: 68px; height: 1px; background: #dab866; position: absolute; right: 0; top: 50%; }
@media (max-width:767px) {
  .i-scroll { width: 50px; height: 160px; }
  .i-scroll div { padding-right: 50px; letter-spacing: 0.1rem; }
  .i-scroll div:after { width: 40px; }
}
@media (max-width:499px) {
  .i-scroll { display: none; }
}
.i-slide-wrap { position: relative; overflow: hidden; z-index: 1; }
.i-slide { position: absolute; line-height: 0; top: 0; left: 0; right: 0; bottom: 0; }
.i-slide .box img { max-width: none; z-index: 0; position: absolute; top: 50%; left: 50%; -moz-transform-origin: left top; -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.i-slide .slick-dots { position: absolute; list-style: none; left: 0; right: 0; bottom: 50px; padding: 0; margin: 0; text-align: center; }
.i-slide .slick-dots > li { display: inline-block; vertical-align: middle; }
.i-slide .slick-dots > li button { outline: none; position: relative; display: inline-block; width: 8px; height: 8px; padding: 0; margin: 0 10px; border-radius: 50%; vertical-align: middle; border: none; background-color: #fff; font-size: 0; line-height: 0; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.i-slide .slick-dots > li button:before { content: ""; display: inline-block; position: absolute; border-radius: 50%; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 2px solid #fff; display: none; }
.i-slide .slick-dots > li button:hover { background-color: #a61956; }
.i-slide .slick-dots > li.slick-active button { background-color: #fff; }
.i-slide .slick-dots > li.slick-active button:before { -moz-animation: ani_zoomIn 0.15s both; -webkit-animation: ani_zoomIn 0.15s both; animation: ani_zoomIn 0.15s both; display: block; }
.i-slide .slick-dots > li.slick-active button:hover { border-color: #fff; }
.i-slide .slick-prev, .i-slide .slick-next { opacity: 0; position: absolute; padding: 0; z-index: 100; top: 50%; margin-top: -25px; line-height: 0; border: none; background: none; width: 50px; height: 50px; font-size: 0; background-color: transparent; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
.i-slide .slick-prev:before, .i-slide .slick-next:before { content: ""; width: 25px; height: 25px; margin: 0; display: inline-block; position: absolute; top: 50%; -moz-transform: rotate(-45deg) translateY(-55%); -ms-transform: rotate(-45deg) translateY(-55%); -webkit-transform: rotate(-45deg) translateY(-55%); transform: rotate(-45deg) translateY(-55%); -moz-transition: border-color 0.15s; -o-transition: border-color 0.15s; -webkit-transition: border-color 0.15s; transition: border-color 0.15s; }
.i-slide .slick-prev { left: 0; }
.i-slide .slick-prev:before { border-left: 1px solid #d3c2a5; border-top: 1px solid #d3c2a5; left: 50%; right: auto; }
.i-slide .slick-prev:hover:before, .i-slide .slick-prev:active:before { border-left: 1px solid #fff; border-top: 1px solid #fff; }
.i-slide .slick-next { right: 0; }
.i-slide .slick-next:before { border-right: 1px solid #d3c2a5; border-bottom: 1px solid #d3c2a5; margin-right: -12px; right: 50%; left: auto; }
.i-slide .slick-next:hover:before, .i-slide .slick-next:active:before { border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
.i-slide:hover .slick-prev, .i-slide:hover .slick-next { opacity: 1; }
.i-slide .first img { -moz-animation: ani_slideZoom_opacity 2s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_slideZoom_opacity 2s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_slideZoom_opacity 2s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
.i-slide .in img { -moz-animation: ani_slideZoom 1.8s both cubic-bezier(0.12, 0.55, 0.51, 0.96); -webkit-animation: ani_slideZoom 1.8s both cubic-bezier(0.12, 0.55, 0.51, 0.96); animation: ani_slideZoom 1.8s both cubic-bezier(0.12, 0.55, 0.51, 0.96); }
@media (min-width:768px) {
  .i-slide .box .pc { display: block; }
  .i-slide .box .mb { display: none; }
}
@media (min-width:768px) and (max-aspect-ratio:1500 / 960), (min-width:768px) and (min-aspect-ratio:1920 / 960) {
  .i-slide-wrap { width: 100%; padding-bottom: 50%; }
  .i-slide .box { width: 100%; padding-bottom: 50%; }
  .i-slide .box img { width: 100%; height: auto; }
}
@media (min-width:768px) and (min-aspect-ratio:1500 / 960) and (max-aspect-ratio:1920 / 960) {
  .i-slide-wrap { width: 100%; height: 100vh; }
  .i-slide .box { width: 100%; height: 100vh; }
  .i-slide .box img { width: auto; height: 100%; }
}
@media (max-width:991px) {
  .i-slide .slick-dots { bottom: 30px; }
}
@media (max-width:767px) {
  .i-slide-wrap { width: 100%; padding-bottom: 100%; }
  .i-slide .box { width: 100%; padding-bottom: 100%; }
  .i-slide .box img { width: 100%; height: auto; }
  .i-slide .box .pc { display: none; }
  .i-slide .box .mb { display: block; }
  .i-slide .slick-dots { bottom: 20px; }
  .i-slide .slick-dots > li button { width: 6px; height: 6px; margin: 0 7px; }
  .i-slide .slick-dots > li button:before { top: -4px; left: -4px; right: -4px; bottom: -4px; }
}
.i-sec1 { background: #f6f6f6; padding-top: 80px; padding-bottom: 50px; position: relative; overflow: hidden; z-index: 0; }
.i-sec1 > .container { z-index: 1; max-width: 1300px; }
.i-sec1.is-no-link .i-news { width: 100%; max-width: 670px; position: relative; float: none; margin: 20px auto 0 auto; padding: 0 30px; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.i-sec1.is-no-news .i-links-wrap { width: 100%; max-width: 670px; margin: 0 auto; float: none; }
.i-sec1-wave { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 0; }
.i-links-wrap { width: 50%; float: left; overflow: hidden; max-width: 670px; margin: 0 auto; position: relative; opacity: 0; -moz-transform: translate(10%, 0); -ms-transform: translate(10%, 0); -webkit-transform: translate(10%, 0); transform: translate(10%, 0); -moz-transition: opacity 1s 0.15s, -moz-transform 1s 0.15s; -o-transition: opacity 1s 0.15s, -o-transform 1s 0.15s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.15s, 0.15s; transition: opacity 1s 0.15s, transform 1s 0.15s; }
.i-links-wrap.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.i-links-wrap:before { content: ""; width: 100%; display: block; position: relative; padding-bottom: 56.42%; }
.i-links-wrap .i-links { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-right: 25px; }
.i-links-wrap .slick-slide { margin: 0 auto; }
.i-links-wrap .slick-slide > div { padding: 10px; }
.i-links-wrap .box { display: block; width: 100%; padding-bottom: 58.95%; overflow: hidden; position: relative; -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }
.i-links-wrap .box img { position: absolute; top: 50%; left: 50%; -moz-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); -moz-transition: -moz-transform 0.5s; -o-transition: -o-transform 0.5s; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -moz-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.i-links-wrap .box:hover img { -moz-transform: scale(1.01) translate(-50%, -50%); -ms-transform: scale(1.01) translate(-50%, -50%); -webkit-transform: scale(1.01) translate(-50%, -50%); transform: scale(1.01) translate(-50%, -50%); }
.i-links-wrap .slick-dots { width: 8px; top: 50%; right: 0; position: absolute; list-style: none; padding: 0; margin: 0; vertical-align: middle; text-align: center; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.i-links-wrap .slick-dots > li { display: block; vertical-align: middle; padding: 0; margin: 0; line-height: 1; }
.i-links-wrap .slick-dots > li button { outline: none; position: relative; display: inline-block; width: 8px; height: 8px; padding: 0; margin: 6px 0; border-radius: 50%; vertical-align: middle; border: none; background-color: #d5cdb9; font-size: 0; line-height: 0; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.i-links-wrap .slick-dots > li button:hover { background-color: #BCAE8F; }
.i-links-wrap .slick-dots > li.slick-active button { background-color: #a61956; }
.i-links-wrap .slick-dots > li.slick-active button:hover { border-color: #a61956; }
.i-news { width: 50%; position: relative; max-width: 670px; margin: 0 auto; float: right; padding: 25px 85px 0 100px; opacity: 0; -moz-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); -moz-transition: opacity 1s 0.05s, -moz-transform 1s 0.05s; -o-transition: opacity 1s 0.05s, -o-transform 1s 0.05s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.05s, 0.05s; transition: opacity 1s 0.05s, transform 1s 0.05s; }
.i-news.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.i-news .subhead { margin: 0; padding: 0; line-height: 1.2; }
.i-news .subhead .zh { font-size: 1.5625rem; color: #444; display: block; font-weight: 600; margin: 0 auto; padding: 0 10px; }
.i-news .subhead .en { font-size: 1.875rem; color: #dab866; display: block; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; margin: 0 auto; padding: 0 10px; line-height: 50px; }
.i-news .more { display: inline-block; position: relative; width: 84px; height: 84px; border-radius: 50%; background: #a61956 url(../images/texture_bg.png) repeat 0 0; -moz-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); }
.i-news .more:hover { background-color: #b31b5d; }
.i-news .more:hover > div { letter-spacing: 0.01rem; }
.i-news .more > div { display: block; position: absolute; line-height: 1; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; white-space: nowrap; padding-right: 25px; left: -42px; top: 50%; color: #fff; letter-spacing: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: letter-spacing 0.1s; -o-transition: letter-spacing 0.1s; -webkit-transition: letter-spacing 0.1s; transition: letter-spacing 0.1s; }
.i-news .more > div > div { color: #a61956; display: inline-block; }
.i-news .more > div:after { content: ""; display: block; height: 1px; width: 19px; background: #fff; position: absolute; top: 40%; right: 0; }
.i-news-slide { margin-bottom: 35px; }
.i-news-slide .box { display: block; padding: 20px 10px; border-bottom: 1px solid #ddd; font-size: 0; }
.i-news-slide .box .date { color: #666; line-height: 1.2; margin: 0; padding: 0; font-size: 0.9375rem; display: inline-block; vertical-align: top; font-style: normal; width: 80px; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; }
.i-news-slide .box .title { margin: 0; padding: 0; font-size: 1.0625rem; width: calc(100% - 81px); display: inline-block; vertical-align: top; color: #222; -moz-transition: color 0.15s; -o-transition: color 0.15s; -webkit-transition: color 0.15s; transition: color 0.15s; }
.i-news-slide .box .desc { display: none; color: #666; }
.i-news-slide .box:first-of-type .desc { display: block; font-size: 0.9375rem; }
.i-news-slide .box:first-of-type .date { display: block; width: 100%; }
.i-news-slide .box:first-of-type .title { display: block; width: 100%; margin: 15px 0 10px 0; }
.i-news-slide .box:hover .title { color: #a61956; }
@media (max-width:1699px) {
  .i-news { padding: 25px 50px 0 80px; }
}
@media (max-width:1299px) {
  .i-sec1 { padding-bottom: 20px; padding-top: 50px; }
  .i-news { padding: 25px 50px; }
}
@media (max-width:991px) {
  .i-links-wrap { width: 100%; float: none; margin: 0 auto; position: relative; }
  .i-links-wrap:before { display: none; }
  .i-links-wrap .i-links { position: relative; padding-right: 0; padding-bottom: 20px; }
  .i-links-wrap .slick-dots { width: 100%; height: 8px; top: auto; margin: 0; bottom: 15px; line-height: 0; left: 0; right: 0; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  .i-links-wrap .slick-dots > li { display: inline-block; vertical-align: top; }
  .i-links-wrap .slick-dots > li button { margin: 0 5px; }
  .i-news { width: 100%; float: none; padding: 25px 0; margin: 0 auto; }
  .i-news .subhead { text-align: center; }
  .i-news .subhead .zh { font-size: 1.375rem; }
  .i-news .subhead .en { font-size: 1.4125rem; line-height: 1.5; }
  .i-news .more { width: 60px; height: 60px; margin-right: 20px; }
}
@media (max-width:767px) {
  .i-sec1 { padding-top: 20px; }
  .i-sec1 > .container { padding-left: 5px; padding-right: 5px; }
  .i-sec1.is-no-link .i-news { padding: 0 15px; }
  .i-news-slide { margin-bottom: 20px; }
  .i-news-slide .box { padding: 10px; }
  .i-news-slide .box .date { display: block; }
  .i-news-slide .box .title { width: 100%; margin-top: 10px; }
}
.i-sec2 { position: relative; z-index: 10; padding-bottom: 60px; }
.i-p-slide { text-align: center; opacity: 0; -moz-transform: translate(0, 10%); -ms-transform: translate(0, 10%); -webkit-transform: translate(0, 10%); transform: translate(0, 10%); -moz-transition: opacity 1s 0.05s, -moz-transform 1s 0.05s; -o-transition: opacity 1s 0.05s, -o-transform 1s 0.05s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.05s, 0.05s; transition: opacity 1s 0.05s, transform 1s 0.05s; }
.i-p-slide.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.i-p-slide .box { width: 100%; max-width: 630px; margin: 0 auto 20px auto; }
.i-p-slide .box a { display: table; width: 100%; }
.i-p-slide .box a .img { width: 55%; display: table-cell; position: relative; vertical-align: middle; text-align: center; padding: 0; margin: 0; }
.i-p-slide .box a .img:before { content: ""; position: relative; display: block; width: 100%; padding-bottom: 100%; }
.i-p-slide .box a .img img { position: absolute; top: 50%; left: 50%; max-width: 100%; display: inline-block; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.i-p-slide .box a .text { width: 45%; display: table-cell; vertical-align: middle; text-align: left; padding: 0 0 0 25px; margin: 0; }
.i-p-slide .box a .text .name { display: block; font-size: 1.75rem; line-height: 1.2; margin: 0 0 25px 0; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.i-p-slide .box a .text .name:before { content: "Our Product"; font-size: 1rem; display: block; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #a61956; margin: 0 0 10px 0; }
.i-p-slide .box a .text .desc { color: #444; font-size: 1rem; display: block; margin: 0 0 25px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.i-p-slide .box a .text .more { display: block; position: relative; padding: 0 0 0 55px; color: #dab866; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; }
.i-p-slide .box a .text .more:before { content: ""; display: block; width: 50px; height: 1px; background: #dab866; position: absolute; left: 0; top: 40%; }
.i-p-slide-page { position: absolute; bottom: 80px; left: 50%; width: 120px; height: 30px; margin-left: -60px; padding: 0; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; font-size: 1.125rem; text-align: center; opacity: 0; -moz-transition: opacity 1s 0.3s; -o-transition: opacity 1s 0.3s; -webkit-transition: opacity 1s; -webkit-transition-delay: 0.3s; transition: opacity 1s 0.3s; }
.i-p-slide-page.scroll-view { opacity: 1; }
.i-p-slide-page:before { content: "/"; color: #c9c9c9; display: inline-block; vertical-align: middle; 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%); }
.i-p-slide-page #i-p-current { display: block; width: 35px; text-align: center; line-height: 30px; height: 30px; color: #a61956; position: absolute; top: 0; left: 20px; }
.i-p-slide-page #i-p-total { display: block; width: 35px; text-align: center; line-height: 30px; height: 30px; color: #666; position: absolute; top: 0; right: 20px; }
.i-p-slide-page .i-p-prev, .i-p-slide-page .i-p-next { position: absolute; z-index: 5; height: 30px; width: 18px; display: inline-block; font-size: 0; cursor: pointer; color: transparent; background-color: transparent; top: 0; padding: 0; border: none; outline: none; }
.i-p-slide-page .i-p-prev:before, .i-p-slide-page .i-p-next:before { position: absolute; text-align: center; width: 100%; height: 100%; line-height: 30px; font-size: 1.125rem; color: #6a6a6a; display: block; }
.i-p-slide-page .i-p-prev:hover:before, .i-p-slide-page .i-p-prev:active:before, .i-p-slide-page .i-p-next:hover:before, .i-p-slide-page .i-p-next:active:before { color: #a61956; }
.i-p-slide-page .i-p-prev { left: 0; }
.i-p-slide-page .i-p-prev:before { content: "<"; }
.i-p-slide-page .i-p-next { right: 0; }
.i-p-slide-page .i-p-next:before { content: ">"; }
.i-fulllink { opacity: 0; -webkit-filter: blur(3px); filter: blur(3px); -moz-transition: all 1s 0.1s; -o-transition: all 1s 0.1s; -webkit-transition: all 1s; -webkit-transition-delay: 0.1s; transition: all 1s 0.1s; }
.i-fulllink.scroll-view { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); }
.i-fulllink .box { display: block; position: relative; line-height: 0; }
.i-fulllink .box:before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 32.7%; }
.i-fulllink .box 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%); }
.i-fulllink .box .pc { display: block !important; }
.i-fulllink .box .mb { display: none !important; }
@media (max-width:1199px) {
  .i-p-slide .box a { display: table; width: 100%; }
  .i-p-slide .box a .img { width: 45%; }
  .i-p-slide .box a .text { width: 55%; padding: 0 0 0 15px; }
  .i-p-slide .box a .text .name { font-size: 1.375rem; margin: 0 0 20px 0; }
}
@media (min-width:992px) {
  .i-p-slide .box.odd { -moz-transform: translateY(-8%); -ms-transform: translateY(-8%); -webkit-transform: translateY(-8%); transform: translateY(-8%); padding: 8% 30px 0 30px; }
  .i-p-slide .box.even { -moz-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); padding: 8% 30px 0 30px; }
}
@media (max-width:991px) {
  .i-sec2 { padding-top: 30px; padding-bottom: 50px; }
  .i-p-slide-page { bottom: 20px; }
}
@media (max-width:767px) {
  .i-p-slide .box a .img { width: 40%; }
  .i-p-slide .box a .text { width: 50%; padding: 0 0 0 10px; }
  .i-p-slide .box a .text .name { font-size: 1.25rem; margin: 0 0 10px 0; }
  .i-p-slide .box a .text .desc { font-size: 0.9375rem; margin: 0 0 10px 0; }
  .i-fulllink .box:before { padding-bottom: 100%; }
  .i-fulllink .box .pc { display: none !important; }
  .i-fulllink .box .mb { display: block !important; }
}

/* === PAGES === */
.parallax-mirror { -moz-animation: ani_pban_blur 0.8s both; -webkit-animation: ani_pban_blur 0.8s both; animation: ani_pban_blur 0.8s both; }
.p-ban { width: 100%; padding-bottom: 25%; position: relative; display: block; overflow: hidden; }
.p-ban:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: white; background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1); opacity: 0.3; -moz-transform: translateX(101%); -ms-transform: translateX(101%); -webkit-transform: translateX(101%); transform: translateX(101%); -moz-transition: -moz-transform 1.2s, opacity 0.9s 0.3s; -o-transition: -o-transform 1.2s, opacity 0.9s 0.3s; -webkit-transition: -webkit-transform 1.2s, opacity 0.9s; -webkit-transition-delay: 0s, 0.3s; transition: transform 1.2s, opacity 0.9s 0.3s; }
.p-ban img { 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-ban .pagetitle { position: absolute; bottom: 0; text-align: center; width: 100%; left: 0; margin: 0; padding: 0 0 65px 0; }
.p-ban .pagetitle:before { content: ""; display: inline-block; position: absolute; width: 27px; height: 13px; border-radius: 25px 25px 0 0; background: #fff; margin-left: -14px; bottom: 0; left: 50%; opacity: 0; -moz-transform: translateY(20px); -ms-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); -moz-transition: opacity 0.5s 0.3s, -moz-transform 0.5s 0.3s; -o-transition: opacity 0.5s 0.3s, -o-transform 0.5s 0.3s; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -webkit-transition-delay: 0.3s, 0.3s; transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; }
.p-ban .pagetitle:after { content: ""; position: absolute; display: inline-block; width: 1px; height: 52px; background: #fff; bottom: 0; left: 50%; opacity: 0; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transition: opacity 0.5s 0.5s, -moz-transform 0.5s 0.5s; -o-transition: opacity 0.5s 0.5s, -o-transform 0.5s 0.5s; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -webkit-transition-delay: 0.5s, 0.5s; transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; }
.p-ban .pagetitle .zh { display: block; font-size: 2.25rem; color: #fff; letter-spacing: 0.033rem; opacity: 0; -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); -moz-transition: opacity 0.5s 0.1s, -moz-transform 0.5s 0.1s; -o-transition: opacity 0.5s 0.1s, -o-transform 0.5s 0.1s; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -webkit-transition-delay: 0.1s, 0.1s; transition: opacity 0.5s 0.1s, transform 0.5s 0.1s; }
.p-ban .pagetitle .en { display: block; font-size: 1.875rem; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #dab866; margin: 10px auto; opacity: 0; -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); -moz-transition: opacity 0.8s, -moz-transform 0.8s; -o-transition: opacity 0.8s, -o-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; }
.p-ban.scroll-view:before { opacity: 0; -moz-transform: translateX(-102%); -ms-transform: translateX(-102%); -webkit-transform: translateX(-102%); transform: translateX(-102%); }
.p-ban.scroll-view .pagetitle:before { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.p-ban.scroll-view .pagetitle:after { opacity: 1; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); }
.p-ban.scroll-view .pagetitle:before, .p-ban.scroll-view .pagetitle .zh, .p-ban.scroll-view .pagetitle .en { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
@media (max-width:1199px) {
  .p-ban { padding-bottom: 30%; }
}
@media (max-width:991px) {
  .p-ban .pagetitle .zh { font-size: 2rem; }
  .p-ban .pagetitle .en { font-size: 1.625rem; }
}
@media (max-width:767px) {
  .p-ban .pagetitle { padding: 0; bottom: 26%; }
  .p-ban .pagetitle:before { display: none; }
  .p-ban .pagetitle:after { display: none; }
  .p-ban .pagetitle .zh { font-size: 1.625rem; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
  .p-ban .pagetitle .en { font-size: 1.0625rem; margin: 5px auto 0 auto; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
}
@media (max-width:499px) {
  .p-ban { padding-bottom: 35%; }
  .p-ban .pagetitle .zh { font-size: 1.375rem; }
  .p-ban .pagetitle .en { font-size: 1rem; }
}
.p-deco1 { position: absolute; z-index: 0; width: 25%; max-width: 486px; top: 0; left: -5%; opacity: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.p-deco1:before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 81.81%; }
.p-deco1 svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transform: translateY(-18%); -ms-transform: translateY(-18%); -webkit-transform: translateY(-18%); transform: translateY(-18%); }
.p-deco1.scroll-view { opacity: 1; -moz-animation: ani_deco1 1.5s both; -webkit-animation: ani_deco1 1.5s both; animation: ani_deco1 1.5s both; }
.p-deco2 { position: absolute; z-index: 0; width: 26%; max-width: 500px; bottom: 0; right: -5%; opacity: 0; -moz-transform-origin: 35% 35%; -ms-transform-origin: 35% 35%; -webkit-transform-origin: 35% 35%; transform-origin: 35% 35%; }
.p-deco2:before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 81.81%; }
.p-deco2 svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transform: translateY(10%) rotate(180deg); -ms-transform: translateY(10%) rotate(180deg); -webkit-transform: translateY(10%) rotate(180deg); transform: translateY(10%) rotate(180deg); }
.p-deco2.scroll-view { opacity: 1; -moz-animation: ani_deco2 1.5s both; -webkit-animation: ani_deco2 1.5s both; animation: ani_deco2 1.5s both; }
@media (max-width:991px) {
  .p-deco1 { width: 50%; }
  .p-deco2 { width: 50%; }
}
.page-content { position: relative; padding-top: 85px; padding-bottom: 85px; overflow: hidden; }
.page-content > .container { z-index: 5; }
@media (max-width:991px) {
  .page-content { padding-top: 50px; padding-bottom: 50px; }
}
@media (max-width:767px) {
  .page-content { padding-top: 30px; padding-bottom: 30px; }
}

/* sitemap */
#sitemap { background: #f6f6f6; }
#sitemap > .container { padding-top: 2%; padding-bottom: 10%; }
.sitemap-list { margin-left: -10px; margin-right: -10px; font-size: 0; text-align: center; }
.sitemap-list .box { padding: 0 10px; margin: 0 auto 30px auto; display: inline-block; vertical-align: top; width: 20%; max-width: 265px; text-align: left; opacity: 0; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -moz-transition: opacity 0.6s 0.1s, -moz-transform 0.6s 0.1s; -o-transition: opacity 0.6s 0.1s, -o-transform 0.6s 0.1s; -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; -webkit-transition-delay: 0.1s, 0.1s; transition: opacity 0.6s 0.1s, transform 0.6s 0.1s; }
.sitemap-list .box.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.sitemap-list .box .title { display: block; font-size: 1.5625rem; line-height: 75px; padding: 0; margin: 0; color: #666; font-weight: 600; position: relative; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.sitemap-list .box .title .chgcolor { width: 75px; height: 75px; background: #a61956; color: #fff; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 10px; text-align: center; }
.sitemap-list .box a.title { margin-bottom: 25px; }
.sitemap-list .box a.title:hover { color: #a61956; }
.sitemap-list .box a.title:hover span { color: #fff; background: #b31b5d; }
.sitemap-list .box .sublist { margin-left: 35px; position: relative; }
.sitemap-list .box .sublist:before { content: ""; display: block; position: absolute; width: 1px; top: 0; bottom: 0; background: #a61956; }
.sitemap-list .box .sublist li { display: block; }
.sitemap-list .box .sublist li a { color: #222; font-size: 1.0625rem; display: block; padding: 5px 10px; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.sitemap-list .box .sublist li a:before { content: "-"; display: inline-block; margin-right: 10px; }
.sitemap-list .box .sublist li a:link { color: #222; }
.sitemap-list .box .sublist li a:hover { color: #a61956; }
@media (max-width:1199px) {
  #sitemap > .container { padding-top: 50px; padding-bottom: 50px; text-align: center; }
  .sitemap-list { text-align: left; display: inline-block; }
  .sitemap-list .box { max-width: 350px; width: calc(100% / 3.005); }
  .sitemap-list .box .title { font-size: 1.37rem; line-height: 1.5; margin-bottom: 15px; padding: 15px 25px; background: #a61956; color: #fff; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 50px; }
  .sitemap-list .box .title .chgcolor { width: auto; height: auto; margin: 0; padding: 0; background: none; color: inherit; vertical-align: top; position: relative; }
  .sitemap-list .box .sublist { margin-left: 20px; }
  .sitemap-list .box .sublist:before { display: none; }
}
@media (max-width:991px) {
  #sitemap > .container { padding-top: 30px; padding-bottom: 30px; }
  .sitemap-list .box { width: calc(100% / 2); }
}
@media (max-width:767px) {
  #sitemap > .container { padding-top: 20px; padding-bottom: 20px; }
  .sitemap-list .box .sublist { margin-left: 0; }
  .sitemap-list .box .sublist li a { font-size: 1rem; }
  .sitemap-list .box .title { font-size: 1.25rem; padding: 10px 25px; margin-bottom: 10px; }
}
@media (max-width:499px) {
  .sitemap-list { max-width: 350px; width: 100%; }
  .sitemap-list .box { width: 100%; display: block; max-width: none; padding: 0; }
}

/* Product */
.product-list { margin: 0 auto; padding: 0; font-size: 0; }
.product-list .box { padding: 0; margin: 0 0 40px 0; display: inline-block; width: 25%; vertical-align: top; opacity: 0; -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); -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; }
.product-list .box.scroll-view { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.product-list .box a { display: block; position: relative; padding: 20px; background-color: transparent; border: 1px solid transparent; -moz-transition: background 0.25s, border 0.25s; -o-transition: background 0.25s, border 0.25s; -webkit-transition: background 0.25s, border 0.25s; transition: background 0.25s, border 0.25s; }
.product-list .box a:hover { background-color: #f6f6f6; border: 1px solid #a61956; }
.product-list .box a:hover .more { color: #dab866; }
.product-list .box a:hover .more:before { width: 20px; background: #dab866; }
.product-list .box .img { width: 100%; position: relative; margin: 0 auto; }
.product-list .box .img:before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 100%; }
.product-list .box .img img { position: absolute; max-width: 100%; max-height: 100%; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.product-list .box .name { display: block; padding: 0 10px; margin: 15px 0; font-size: 1.75rem; line-height: 1.5; color: #333; }
.product-list .box .desc { display: block; margin: 0 0 25px 0; padding: 0 10px; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #666; }
.product-list .box .more { margin-left: 10px; width: auto; display: inline-block; vertical-align: top; white-space: nowrap; position: relative; text-align: right; font-size: 0.875rem; line-height: 1.2; font-weight: 600; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #a61956; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.product-list .box .more:before { content: ""; width: 50px; height: 1px; background: #a61956; position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; -moz-transition: width 0.25s, color 0.25s; -o-transition: width 0.25s, color 0.25s; -webkit-transition: width 0.25s, color 0.25s; transition: width 0.25s, color 0.25s; }
@media (max-width:1199px) {
  .product-list .box { margin: 0 0 30px 0; }
  .product-list .box .name { margin: 10px 0; font-size: 1.25rem; }
}
@media (max-width:991px) {
  .product-list .box { width: calc(100% / 3.005); }
  .product-list .box a { padding: 15px; }
}
@media (max-width:767px) {
  .product-list .box { margin: 0 0 20px 0; width: 50%; }
  .product-list .box a { padding: 10px; }
}
@media (max-width:499px) {
  .product-list .box { width: 100%; display: block; margin-bottom: 15px; }
  .product-list .box a { padding: 10px 10px 10px 180px; min-height: 180px; border: 1px solid #eee; -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
  .product-list .box .img { max-width: 160px; position: absolute; top: 10px; left: 10px; }
  .product-list .box .more { margin-bottom: 15px; margin-left: 0; }
  .product-list .box .more:before { width: 30px; }
  .product-list .box .name { padding: 0; font-size: 1.125rem; font-weight: 600; }
  .product-list .box .desc { padding: 0; -webkit-line-clamp: 2; }
}
@media (max-width:399px) {
  .product-list .box a { padding: 3px 10px 3px 148px; min-height: 148px; }
  .product-list .box .img { max-width: 140px; top: 3px; left: 3px; }
  .product-list .box .name { font-size: 1.0625rem; }
  .product-list .box .desc { font-size: 0.9375rem; }
}

/* Product view */
.pview-top { background: #f6f6f6; padding-top: 80px; padding-bottom: 80px; position: relative; overflow: hidden; }
.pview-top > .container { z-index: 5; max-width: 1300px; }
.pview-top .wave { position: absolute; left: 0; bottom: 0; width: 100%; }
.pview-left { width: 35%; float: left; opacity: 1; -moz-transform: translate(10%, 0); -ms-transform: translate(10%, 0); -webkit-transform: translate(10%, 0); transform: translate(10%, 0); -moz-transition: opacity 1s 0.05s, -moz-transform 1s 0.05s; -o-transition: opacity 1s 0.05s, -o-transform 1s 0.05s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.05s, 0.05s; transition: opacity 1s 0.05s, transform 1s 0.05s; }
.pview-left.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.pvimg-slide { position: relative; }
.pvimg-slide .slick-dots { position: absolute; list-style: none; left: 0; right: 0; bottom: 50px; padding: 0; margin: 0; text-align: center; }
.pvimg-slide .slick-dots > li { display: inline-block; vertical-align: middle; }
.pvimg-slide .slick-dots > li button { outline: none; position: relative; display: inline-block; width: 6px; height: 6px; padding: 0; margin: 0 8px; border-radius: 50%; vertical-align: middle; border: none; background-color: #dab866; font-size: 0; line-height: 0; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; }
.pvimg-slide .slick-dots > li button:before { content: ""; display: inline-block; position: absolute; border-radius: 50%; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid #dab866; display: none; }
.pvimg-slide .slick-dots > li button:hover { background-color: #dab866; }
.pvimg-slide .slick-dots > li.slick-active button { background-color: #dab866; }
.pvimg-slide .slick-dots > li.slick-active button:before { -moz-animation: ani_zoomIn 0.15s both; -webkit-animation: ani_zoomIn 0.15s both; animation: ani_zoomIn 0.15s both; display: block; }
.pvimg-slide .slick-dots > li.slick-active button:hover { border-color: #dab866; }
.pvimg-slide .slick-prev, .pvimg-slide .slick-next { opacity: 0; position: absolute; padding: 0; z-index: 100; top: 50%; margin-top: -27px; line-height: 0; border: none; background: none; width: 50px; height: 50px; font-size: 0; background-color: transparent; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
.pvimg-slide .slick-prev:before, .pvimg-slide .slick-next:before { content: ""; width: 18px; height: 18px; margin: 0; display: inline-block; position: absolute; top: 50%; -moz-transform: rotate(-45deg) translateY(-50%); -ms-transform: rotate(-45deg) translateY(-50%); -webkit-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%); -moz-transition: border-color 0.15s; -o-transition: border-color 0.15s; -webkit-transition: border-color 0.15s; transition: border-color 0.15s; }
.pvimg-slide .slick-prev { left: 0; }
.pvimg-slide .slick-prev:before { border-left: 1px solid #dda8bf; border-top: 1px solid #dda8bf; left: 50%; right: auto; }
.pvimg-slide .slick-prev:hover:before, .pvimg-slide .slick-prev:active:before { border-left: 1px solid #a61956; border-top: 1px solid #a61956; }
.pvimg-slide .slick-next { right: 0; }
.pvimg-slide .slick-next:before { border-right: 1px solid #dda8bf; border-bottom: 1px solid #dda8bf; margin-right: -12px; right: 50%; left: auto; }
.pvimg-slide .slick-next:hover:before, .pvimg-slide .slick-next:active:before { border-right: 1px solid #a61956; border-bottom: 1px solid #a61956; }
.pvimg-slide:hover .slick-prev, .pvimg-slide:hover .slick-next { opacity: 1; }
.pview-right { width: 65%; padding-left: 50px; float: right; opacity: 0; -moz-transform: translate(-15%, 0); -ms-transform: translate(-15%, 0); -webkit-transform: translate(-15%, 0); transform: translate(-15%, 0); -moz-transition: opacity 1s 0.12s, -moz-transform 1s 0.12s; -o-transition: opacity 1s 0.12s, -o-transform 1s 0.12s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.12s, 0.12s; transition: opacity 1s 0.12s, transform 1s 0.12s; }
.pview-right.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.pview-right .btn-buy-wrap { text-align: right; }
.pview-right .name { display: block; font-size: 1.75rem; line-height: 1.2; margin: 0 0 25px 0; color: #333; }
.pview-right .name:before { content: "Our Product"; font-size: 1rem; display: block; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #a61956; margin: 0 0 10px 0; }
.pview-right .desc { color: #444; font-size: 1rem; display: block; margin: 0 0 25px 0; }
.pview-right .spec-list { color: #666; margin: 0 auto 25px auto; }
.pview-right .spec-list ul li { position: relative; padding-left: 18px; }
.pview-right .spec-list ul li:before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #666; position: absolute; top: 12px; left: 5px; }
.pview-right .spec { color: #666; margin: 0 0 10px 0; }
.pview-right .spec:before { content: attr(data-tit) "："; display: inline-block; color: #444; font-weight: 600; }
.pview-detail { padding-top: 35px; padding-bottom: 80px; opacity: 0; -moz-transform: translate(0, 10%); -ms-transform: translate(0, 10%); -webkit-transform: translate(0, 10%); transform: translate(0, 10%); -moz-transition: opacity 1s 0.05s, -moz-transform 1s 0.05s; -o-transition: opacity 1s 0.05s, -o-transform 1s 0.05s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.05s, 0.05s; transition: opacity 1s 0.05s, transform 1s 0.05s; }
.pview-detail.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.pview-detail .btn-back { margin-top: 80px; margin-bottom: 0; }
.pview-detail .subhead { margin: 0 0 40px 0; padding: 0 0 75px 0; line-height: 1.2; text-align: center; position: relative; }
.pview-detail .subhead:after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; background: #dab866; }
.pview-detail .subhead .zh { font-size: 1.5625rem; color: #444; display: block; font-weight: 600; margin: 0 auto; padding: 0 10px; }
.pview-detail .subhead .en { font-size: 1.875rem; color: #dab866; display: block; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; margin: 0 auto; padding: 0 10px; line-height: 50px; }
.pview-detail img { width: 100% !important; height: auto !important; margin: 0 !important; }
@media (max-width:1199px) {
  .pview-top { padding-top: 50px; padding-bottom: 0; }
  .pview-top .p-deco1, .pview-top .p-deco2 { display: none; }
  .pview-left { width: 40%; }
  .pview-right { width: 60%; padding-left: 30px; }
}
@media (max-width:991px) {
  .pview-detail .subhead { margin: 0 0 20px 0; padding: 0 0 40px 0; }
  .pview-detail .subhead:after { height: 35px; }
  .pview-detail .subhead .zh { font-size: 1.375rem; }
  .pview-detail .subhead .en { font-size: 1.625rem; line-height: 1.5; }
}
@media (max-width:767px) {
  .pview-top { padding-top: 30px; }
  .pview-left { width: 100%; max-width: 450px; float: none; margin: 0 auto 20px auto; }
  .pview-right { width: 100%; padding: 0; margin: 0 auto; float: none; }
  .pview-right .name { font-size: 1.375rem; margin: 0 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid #ddd; text-align: center; }
  .pview-right .desc { color: #444; font-size: 1rem; display: block; margin: 0 0 25px 0; }
  .pview-right .btn-buy-wrap { text-align: center; }
  .pview-detail { padding-bottom: 50px; }
  .pview-detail .btn-back { margin-top: 50px; }
}

/* News */
#news { background: #f6f6f6; }
.news-list { padding: 0; font-size: 0; margin: 0 -30px; }
.news-list .box { padding: 0 30px; margin: 0 0 60px 0; display: inline-block; vertical-align: top; width: calc(100% / 3.005); opacity: 0; -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); -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; }
.news-list .box.scroll-view { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.news-list .box a { display: block; position: relative; padding: 0; background: #fff; -moz-transition: box-shadow 0.5s; -o-transition: box-shadow 0.5s; -webkit-transition: box-shadow 0.5s; transition: box-shadow 0.5s; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; }
.news-list .box a:hover { -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.news-list .box a:hover .more { color: #dab866; }
.news-list .box a:hover .more:before { width: 20px; background: #dab866; }
.news-list .box a:hover .img img { -moz-transform: translate(-50%, -50%) scale(1.02); -ms-transform: translate(-50%, -50%) scale(1.02); -webkit-transform: translate(-50%, -50%) scale(1.02); transform: translate(-50%, -50%) scale(1.02); }
.news-list .box a:hover .img .news-overlay path { d: path("M0, 57h464V2c0, 0-30.499-3.667-82.5, 0c-67.833, 2.333-168.5, 22-253, 22S0, 10, 0, 10V57z"); d: "M0, 57h464V2c0, 0-30.499-3.667-82.5, 0c-67.833, 2.333-168.5, 22-253, 22S0, 10, 0, 10V57z"; }
.news-list .box .img { width: 100%; padding-bottom: 58.69%; position: relative; overflow: hidden; }
.news-list .box .img .news-overlay { position: absolute; z-index: 2; left: -1px; bottom: -10px; width: 100.5%; }
.news-list .box .img .news-overlay path { d: path("M0, 57h464V22c0, 0-27, 2.667-72.5, 2C323.478, 23.003, 211, 1, 126.5, 1S0, 10, 0, 10V57z"); d: "M0, 57h464V22c0, 0-27, 2.667-72.5, 2C323.478, 23.003, 211, 1, 126.5, 1S0, 10, 0, 10V57z"; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.news-list .box .img img { position: absolute; z-index: 1; width: 100%; max-width: 100%; max-height: 100%; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -moz-transition: -moz-transform 0.35s; -o-transition: -o-transform 0.35s; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
.news-list .box .text { padding: 10px 30px 30px 30px; }
.news-list .box .name { display: block; padding: 0; margin: 0; font-size: 1.0625rem; text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); line-height: 1.5; color: #222; }
.news-list .box .desc { display: block; margin: 10px 0 0 0; padding: 0; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #666; }
.news-list .box .bottom { position: relative; margin-top: 20px; font-size: 0; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; }
.news-list .box .date { font-size: 0.9375rem; color: #666; display: inline-block; vertical-align: top; width: 100px; margin-top: -3px; font-style: normal; white-space: nowrap; }
.news-list .box .more { width: calc(100% - 100px); display: inline-block; vertical-align: top; position: relative; text-align: right; font-size: 0.875rem; line-height: 1.2; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; white-space: nowrap; font-weight: 600; color: #a61956; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.news-list .box .more:before { content: ""; width: 50px; height: 1px; background: #a61956; position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; -moz-transition: width 0.25s, color 0.25s; -o-transition: width 0.25s, color 0.25s; -webkit-transition: width 0.25s, color 0.25s; transition: width 0.25s, color 0.25s; }
@media (max-width:1199px) {
  .news-list { margin: 0 -15px; }
  .news-list .box { padding: 0 15px; margin: 0 0 30px 0; }
  .news-list .box .more:before { width: 30px; }
}
@media (max-width:991px) {
  .news-list .box { width: 50%; }
}
@media (max-width:767px) {
  .news-list .box .text { padding: 10px 20px 20px 20px; }
}
@media (max-width:639px) {
  .news-list { margin: 0 auto; }
  .news-list .box { padding: 0; width: 100%; }
}

/* News View */
.article-head { position: relative; padding-right: 290px; margin: 0 0 30px 0; opacity: 0; -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); -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; }
.article-head.scroll-view { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.article-head .date { font-style: normal; display: block; font-size: 0.9375rem; color: #a61956; }
.article-head .title { font-size: 1.875rem; display: block; color: #222; margin: 15px 0 0 0; padding: 0; }
.article-head .share-link { width: auto; position: absolute; right: 0; bottom: 0; padding-left: 110px; }
.article-head .share-link:before { content: "SHARE"; font-size: 0.9375rem; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #666; position: absolute; font-weight: 600; top: 0; left: 0; line-height: 35px; }
.article-head .share-link:after { content: ""; display: block; position: absolute; left: 60px; top: 50%; background: #666; width: 38px; height: 1px; }
.article-head .share-link li { display: inline-block; }
.article-head .share-link li a { display: inline-block; vertical-align: middle; width: 35px; height: 35px; border-radius: 50%; background: #dab866; position: relative; font-size: 0; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.article-head .share-link li a:before { display: inline-block; width: 15px; height: 15px; position: absolute; text-align: center; top: 50%; left: 50%; color: #fff; font-size: 14px; line-height: 15px; -moz-transform: translate(-46%, -50%); -ms-transform: translate(-46%, -50%); -webkit-transform: translate(-46%, -50%); transform: translate(-46%, -50%); }
.article-head .share-link li a.share-fb:before { content: ""; font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: normal; }
.article-head .share-link li a.share-fb:hover { background: #3b5998; }
.article-head .share-link li a.share-tw:before { content: ""; font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: normal; }
.article-head .share-link li a.share-tw:hover { background: #1da1f2; }
.article-head .share-link li a.share-line:before { width: 20px; height: 17px; content: ""; background: url(../images/icon_line.png) no-repeat 0 0; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; left: 47%; }
.article-head .share-link li a.share-line:hover { background: #00B700; }
.article-body { background: #fff; padding: 40px 75px; position: relative; opacity: 0; -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); -moz-transition: opacity 1s 0.15s, -moz-transform 1s 0.15s; -o-transition: opacity 1s 0.15s, -o-transform 1s 0.15s; -webkit-transition: opacity 1s, -webkit-transform 1s; -webkit-transition-delay: 0.15s, 0.15s; transition: opacity 1s 0.15s, transform 1s 0.15s; }
.article-body.scroll-view { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.article-releted { margin-top: 40px; }
.article-releted .related-tit { display: block; font-size: 1rem; color: #a61956; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; }
.article-releted .related-tit:after { content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 1px; background: #a61956; margin-left: 10px; }
.article-releted .related-prev, .article-releted .related-next { display: block; position: relative; padding-left: 75px; margin: 5px 0; color: #666; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.article-releted .related-prev:hover, .article-releted .related-next:hover { color: #a61956; }
.article-releted .related-prev:before, .article-releted .related-next:before { display: inline-block; width: 75px; position: absolute; top: 0; left: 0; color: #333; }
.article-releted .related-prev:before { content: "上一則"; }
.article-releted .related-next:before { content: "下一則"; }
@media (max-width:991px) {
  .article-head { padding: 0; margin-bottom: 20px; }
  .article-head .title { font-size: 1.625rem; margin-bottom: 15px; }
  .article-head .share-link { position: relative; }
  .article-head .share-link li a { width: 28px; height: 28px; }
  .article-body { padding: 40px; }
}
@media (max-width:767px) {
  .article-head { text-align: center; }
  .article-head .date { font-size: 0.875rem; }
  .article-head .title { font-size: 1.4125rem; margin-top: 15px; }
  .article-head .share-link { padding-left: 0; display: block; }
  .article-head .share-link:before, .article-head .share-link:after { display: none; }
  .article-body { padding: 30px 25px; }
}
@media (max-width:639px) {
  .article-head .title { font-size: 1.25rem; margin-top: 10px; }
  .article-body { padding: 15px; margin-left: -15px; margin-right: -15px; }
  .article-releted { margin-top: 15px; margin-left: -15px; margin-right: -15px; margin-bottom: -15px; padding: 15px; background: #eee; }
  .article-releted .related-prev, .article-releted .related-next { padding-left: 70px; }
}

/*  Shop  */
#shop { background: #f6f6f6; }
.shop-list { margin: 0 -10px; font-size: 0; }
.shop-list .box { width: calc(100% / 3.005); padding: 0 10px; margin: 20px auto 115px auto; position: relative; display: inline-block; vertical-align: top; opacity: 0; -moz-transition: opacity 0.8s, margin 0.8s; -o-transition: opacity 0.8s, margin 0.8s; -webkit-transition: opacity 0.8s, margin 0.8s; transition: opacity 0.8s, margin 0.8s; }
.shop-list .box.scroll-view { opacity: 1; margin-top: 0; }
.shop-list .box a { display: inline-block; width: 100%; max-width: 435px; position: relative; padding: 0 30px 20px 0; }
.shop-list .box a:hover .img { -moz-transform: scale(1.02); -ms-transform: scale(1.02); -webkit-transform: scale(1.02); transform: scale(1.02); }
.shop-list .box a:hover .name { background: #a61956; }
.shop-list .box .img { position: relative; z-index: 0; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: -moz-transform 0.25s; -o-transition: -o-transform 0.25s; -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; }
.shop-list .box .img:before { content: ""; display: block; position: relative; width: 100%; padding-bottom: 46.91%; z-index: 1; background: #fff; }
.shop-list .box .img:after { content: ""; display: block; position: absolute; top: -8px; left: -8px; z-index: 0; opacity: 0.8; width: calc(100% - 30px); height: calc(100% - 20px); background: url(../images/shop_shadow.png) no-repeat 0 0; -moz-background-size: auto 100%; -o-background-size: auto 100%; -webkit-background-size: auto 100%; background-size: auto 100%; }
.shop-list .box .img img { position: absolute; z-index: 2; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -moz-transition: -moz-transform 0.25s; -o-transition: -o-transform 0.25s; -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; }
.shop-list .box .name { display: block; position: absolute; bottom: 0; right: 0; background: #dab866; color: #fff; font-size: 1.0625rem; text-align: left; width: 60%; padding: 12px 65px 12px 15px; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.shop-list .box .name:after { content: "LINK"; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; font-size: 0.875rem; color: #fff; position: absolute; right: 22px; top: 50%; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.shop-list .box .name:before { content: ""; height: 1px; width: 19px; background: #fff; position: absolute; top: 50%; right: 0; }
@media (min-width:1200px) {
  .shop-list .box:nth-of-type(3n+1) { text-align: left; }
  .shop-list .box:nth-of-type(3n+2) { text-align: center; -moz-transform: translateY(23%); -ms-transform: translateY(23%); -webkit-transform: translateY(23%); transform: translateY(23%); }
  .shop-list .box:nth-of-type(3n+3) { text-align: right; }
}
@media (max-width:1199px) {
  .shop-list { max-width: 950px; margin: 0 auto; }
  .shop-list .box { width: 50%; margin-bottom: 65px; }
}
@media (min-width:600px) and (max-width:1199px) {
  .shop-list .box:nth-of-type(2n+1) { text-align: left; }
  .shop-list .box:nth-of-type(2n+2) { text-align: right; }
}
@media (max-width:991px) {
  .shop-list .box .name { width: 80%; font-size: 1rem; }
}
@media (max-width:767px) {
  .shop-list .box { margin: 0 auto 35px auto; text-align: center; }
  .shop-list .box a { padding: 0; }
  .shop-list .box a:hover { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
  .shop-list .box a:hover .img:after { opacity: 0.7; }
  .shop-list .box a:hover .img img { -moz-transform: translate(-50%, -50%) scale(1.02); -ms-transform: translate(-50%, -50%) scale(1.02); -webkit-transform: translate(-50%, -50%) scale(1.02); transform: translate(-50%, -50%) scale(1.02); }
  .shop-list .box .name { position: relative; width: 100%; }
}
@media (max-width:599px) {
  .shop-list .box { width: 100%; padding: 0; }
}

/*  Contact Us  */
#contact { padding-top: 50px; padding-bottom: 0; background: #f6f6f6; }
.contact-msg { text-align: center; margin-bottom: 50px; padding: 0 15px; position: relative; opacity: 0; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -moz-transition: -moz-transform 1s, opacity 1s; -o-transition: -o-transform 1s, opacity 1s; -webkit-transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; }
.contact-msg.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.contact-msg span { display: block; }
.contact-form { background: #fff; padding: 60px; margin-bottom: 75px; opacity: 0; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -moz-transition: -moz-transform 0.8s 0.1s, opacity 0.8s 0.1s; -o-transition: -o-transform 0.8s 0.1s, opacity 0.8s 0.1s; -webkit-transition: -webkit-transform 0.8s, opacity 0.8s; -webkit-transition-delay: 0.1s, 0.1s; transition: transform 0.8s 0.1s, opacity 0.8s 0.1s; }
.contact-form.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.contact-form form { max-width: 1200px; width: 100%; margin: 0 auto; }
.contact-sec2 { position: relative; background: #fff; padding: 50px 0 90px 0; }
.contact-sec2.scroll-view .contact-map-wrap { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.contact-sec2.scroll-view .subhead { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.contact-sec2 .p-deco1 { left: -8%; }
.contact-sec2 > .container { z-index: 5; }
.contact-sec2 .subhead { margin: 0 0 40px 0; padding: 0 0 75px 0; line-height: 1.2; text-align: center; opacity: 0; -moz-transform: translate(0, 15px); -ms-transform: translate(0, 15px); -webkit-transform: translate(0, 15px); transform: translate(0, 15px); -moz-transition: -moz-transform 1s 0.2s, opacity 1s 0.2s; -o-transition: -o-transform 1s 0.2s, opacity 1s 0.2s; -webkit-transition: -webkit-transform 1s, opacity 1s; -webkit-transition-delay: 0.2s, 0.2s; transition: transform 1s 0.2s, opacity 1s 0.2s; }
.contact-sec2 .subhead:after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; background: #dab866; }
.contact-sec2 .subhead .zh { font-size: 1.5625rem; color: #444; display: block; font-weight: 600; margin: 0 auto; padding: 0 10px; }
.contact-sec2 .subhead .en { font-size: 1.875rem; color: #dab866; display: block; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; margin: 0 auto; padding: 0 10px; line-height: 50px; }
.contact-map-wrap { padding-left: 380px; padding-bottom: 50px; position: relative; opacity: 0; -moz-transform: translate(0, -10px); -ms-transform: translate(0, -10px); -webkit-transform: translate(0, -10px); transform: translate(0, -10px); -moz-transition: -moz-transform 1s, opacity 1s; -o-transition: -o-transform 1s, opacity 1s; -webkit-transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; }
.contact-map-wrap:before { content: ""; z-index: 0; position: absolute; left: 0; bottom: 0; height: 50px; width: 88%; background: #a61956; }
.contact-info { z-index: 1; color: #fff; font-size: 1rem; position: absolute; width: 380px; left: 0; bottom: 0; }
.contact-info .logo { overflow: hidden; display: block; margin: 0 auto 25px auto; padding: 0; z-index: 1; width: 220px; height: 47px; left: 50%; font-size: 0; }
.contact-info .logo div { display: inline-block; vertical-align: middle; margin: 0 auto; background-image: url(../images/logo.png); background-repeat: no-repeat; -moz-background-size: auto 300%; -o-background-size: auto 300%; -webkit-background-size: auto 300%; background-size: auto 300%; -moz-transition: all 0.25s; -o-transition: all 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s; }
.contact-info .logo div:before { content: ""; display: block; width: 100%; position: relative; }
.contact-info .logo div:nth-of-type(1) { width: 40.35%; background-position: 0 0; }
.contact-info .logo div:nth-of-type(1):before { padding-bottom: 52.222%; }
.contact-info .logo div:nth-of-type(2) { width: 55.15%; background-position: 100% 50%; margin-left: 4%; }
.contact-info .logo div:nth-of-type(2):before { padding-bottom: 38.2111%; }
.contact-info ul { padding: 50px 20px 40px 40px; background: #a61956; }
.contact-info ul li { display: block; margin-bottom: 25px; padding-left: 26px; }
.contact-info ul li .tit { color: #dab866; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; display: block; margin-bottom: 10px; font-size: 1rem; margin-left: -26px; }
.contact-info ul li .tit i { width: 16px; text-align: center; margin-right: 10px; font-size: 1.0625em; }
.contact-info ul li a { color: #fff; -moz-transition: color 0.25s; -o-transition: color 0.25s; -webkit-transition: color 0.25s; transition: color 0.25s; }
.contact-info ul li a:hover { color: #dab866; text-decoration: underline; }
.contact-info ul li a.link-map:after { content: ""; display: inline-block; vertical-align: middle; margin-left: 5px; width: 22px; height: 22px; background: url(../images/icon_map.png) no-repeat 0 0; -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; }
.contact-map { z-index: 2; position: relative; height: 410px; width: 100%; }
.contact-map iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.btn-send { display: inline-block; position: relative; margin: 0; padding: 0; width: 84px; height: 84px; border-radius: 50%; border: none; background: #a61956 url(../images/texture_bg.png) repeat 0 0; -moz-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 5px 2px 0 rgba(0, 0, 0, 0.1); }
.btn-send:hover { background-color: #b31b5d; }
.btn-send > span { display: block; position: absolute; bottom: 0; left: 50%; margin-left: -17px; padding-bottom: 25px; text-align: center; width: 35px; line-height: 1.2; font-size: 0.9375rem; color: #fff; }
.btn-send > span:before { content: ""; display: block; width: 1px; height: 11px; background: #fff; position: absolute; bottom: 0; left: 50%; }
.btn-send > span:after { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: #fff; position: absolute; bottom: 10px; left: 50%; margin-left: -4px; }
.form-bottom { margin-top: 60px; padding-right: 90px; position: relative; }
.form-bottom .form-box { display: inline-block; vertical-align: middle; }
.form-bottom .btn-send { position: absolute; right: 0; top: 50%; -moz-transform: translateY(-55%); -ms-transform: translateY(-55%); -webkit-transform: translateY(-55%); transform: translateY(-55%); }
@media (max-width:1399px) {
  .contact-info ul { padding-bottom: 100px; }
}
@media (max-width:1299px) {
  .contact-sec2 .subhead { margin: 0 0 40px 0; padding: 0 0 40px 0; }
  .contact-sec2 .subhead:after { height: 35px; }
}
@media (max-width:991px) {
  .contact-form { padding: 0 20px 40px 20px; margin-bottom: 0; background: #f6f6f6; }
  .contact-msg { margin-bottom: 20px; }
  .contact-sec2 { padding: 30px 0 0 0; }
  .contact-sec2:after { display: none; }
  .contact-sec2 .p-deco1, .contact-sec2 .p-deco2 { display: none; }
  .contact-sec2 .subhead { display: none; }
  .contact-sec2 > .container { padding-left: 0; padding-right: 0; }
  .contact-map-wrap { padding-left: 0; padding-bottom: 0; }
  .contact-map-wrap:before { display: none; }
  .contact-map { padding-left: 0; background: #a61956; }
  .contact-info { width: auto; max-width: none; position: relative; }
  .contact-info .logo { margin-bottom: 15px; }
  .contact-info ul { padding: 0 15px 20px 15px; background: none; }
  .contact-info ul li { margin: 5px auto; text-align: center; color: #444; }
  .contact-info ul li a { color: #444; }
  .contact-info ul li a:hover { color: #a61956; }
}
@media (min-width:600px) and (max-width:991px) {
  .contact-info ul li { padding: 0; }
  .contact-info ul li .tit { margin: 0 15px 0 0; display: inline-block; }
}
@media (max-width:767px) {
  #contact { padding-top: 30px; padding-bottom: 0; }
  .contact-msg span { display: inline; }
  .contact-info ul li { display: block; width: 100%; padding: 0; }
  .contact-info ul li .tit { margin: 0 auto 10px auto; }
}
@media (max-width:599px) {
  .form-bottom { margin-top: 0; padding-right: 0; position: relative; }
  .form-bottom .btn-send { position: relative; right: 0; top: 0; width: 100%; display: block; height: 40px; border-radius: 0; margin: 10px auto; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  .form-bottom .btn-send span { width: auto; padding: 0; line-height: 40px; position: relative; left: auto; top: auto; margin: 0; }
  .form-bottom .btn-send span:before, .form-bottom .btn-send span:after { display: none; }
}

/*  About Us  */
#about-concept { padding-top: 0; }
.about-p { display: block; margin: 0 auto 15px auto; color: #444; font-size: 1rem; }
.about-tit { margin: 0 auto 20px auto; padding: 0; line-height: 1.5; }
.about-tit .zh { display: block; color: #333; font-size: 1.5625rem; font-weight: 600; }
.about-tit .en { display: block; font-family: "Kalam", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; color: #dab866; font-size: 1.875rem; line-height: 1.2; font-weight: 600; margin: 5px 0 0 0; }
.concept1 { padding-top: 80px; padding-bottom: 50px; background: #f6f6f6; position: relative; }
.concept1 > .container { position: relative; z-index: 10; }
.concept1 .half-wrap { position: relative; width: 100%; display: table; margin: 0 auto; }
.concept1 .about-wave { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 0; }
.concept1 .left { display: table-cell; vertical-align: middle; text-align: left; width: 45%; opacity: 0; -moz-transform: translate(0, -20%); -ms-transform: translate(0, -20%); -webkit-transform: translate(0, -20%); transform: translate(0, -20%); -moz-transition: opacity 0.8s, -moz-transform 0.8s; -o-transition: opacity 0.8s, -o-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; }
.concept1 .left.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.concept1 .left.scroll-view .img .img-logo { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.concept1 .right { display: table-cell; vertical-align: middle; text-align: left; padding-left: 5%; width: 55%; opacity: 0; -moz-transform: translate(0, 20%); -ms-transform: translate(0, 20%); -webkit-transform: translate(0, 20%); transform: translate(0, 20%); -moz-transition: opacity 0.8s, -moz-transform 0.8s; -o-transition: opacity 0.8s, -o-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; }
.concept1 .right.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.concept1 .img { position: relative; width: 100%; padding-bottom: 58.95%; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); }
.concept1 .img img { position: absolute; z-index: 1; width: 100%; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.concept1 .img .img-logo { overflow: hidden; z-index: 2; position: absolute; top: 50%; left: 50%; display: block; margin: -23px 0 0 -110px; padding: 0; width: 220px; height: 47px; font-size: 0; opacity: 0; -moz-transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); -moz-transition: opacity 0.5s 0.4s, -moz-transform 0.5s 0.4s; -o-transition: opacity 0.5s 0.4s, -o-transform 0.5s 0.4s; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -webkit-transition-delay: 0.4s, 0.4s; transition: opacity 0.5s 0.4s, transform 0.5s 0.4s; }
.concept1 .img .img-logo div { display: inline-block; vertical-align: middle; margin: 0 auto; background-image: url(../images/logo.png); background-repeat: no-repeat; -moz-background-size: auto 300%; -o-background-size: auto 300%; -webkit-background-size: auto 300%; background-size: auto 300%; -moz-transition: all 0.25s; -o-transition: all 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s; }
.concept1 .img .img-logo div:before { content: ""; display: block; width: 100%; position: relative; }
.concept1 .img .img-logo div:nth-of-type(1) { width: 40.35%; background-position: 0 0; }
.concept1 .img .img-logo div:nth-of-type(1):before { padding-bottom: 52.222%; }
.concept1 .img .img-logo div:nth-of-type(2) { width: 55.15%; background-position: 100% 0; margin-left: 4%; }
.concept1 .img .img-logo div:nth-of-type(2):before { padding-bottom: 38.2111%; }
.concept2 { font-size: 0; padding-top: 50px; }
.concept2 .box { overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 50%; padding: 4%; max-width: calc(50% - 15px); border: 1px solid #ddd; background: #fff; }
.concept2 .box .p-deco1, .concept2 .box .p-deco2 { z-index: 0; }
.concept2 .box .inner { position: relative; z-index: 5; padding-left: 165px; }
.concept2 .box .inner .right { position: relative; padding-left: 5%; }
.concept2 .box .inner .img { position: absolute; top: 50%; left: 0; right: auto; margin-top: -60px; display: inline-block; width: 120px; height: 120px; border-radius: 50%; background: #a61956 url(../images/texture_bg.png) repeat 0 0; }
.concept2 .box .inner .img:before { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background-image: url(../images/concept_img2.png); background-repeat: no-repeat; -moz-background-size: auto 100%; -o-background-size: auto 100%; -webkit-background-size: auto 100%; background-size: auto 100%; }
.concept2 .box:nth-of-type(1) { margin-right: 30px; opacity: 0; -moz-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); -moz-transition: opacity 0.8s, -moz-transform 0.8s; -o-transition: opacity 0.8s, -o-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; }
.concept2 .box:nth-of-type(1).scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.concept2 .box:nth-of-type(1) .img:before { background-position: 0 0; }
.concept2 .box:nth-of-type(1) .p-deco1 { top: -10%; }
.concept2 .box:nth-of-type(1) .p-deco1 svg { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.concept2 .box:nth-of-type(2) { opacity: 0; -moz-transform: translate(10%, 0); -ms-transform: translate(10%, 0); -webkit-transform: translate(10%, 0); transform: translate(10%, 0); -moz-transition: opacity 0.8s, -moz-transform 0.8s; -o-transition: opacity 0.8s, -o-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; }
.concept2 .box:nth-of-type(2).scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.concept2 .box:nth-of-type(2) .img:before { background-position: 100% 0; }
.concept2 .box:nth-of-type(2) .p-deco2 { bottom: -10%; }
.concept2 .box:nth-of-type(2) .p-deco2 svg { -moz-transform: rotate(0deg) scaleX(-1); -ms-transform: rotate(0deg) scaleX(-1); -webkit-transform: rotate(0deg) scaleX(-1); transform: rotate(0deg) scaleX(-1); }
@media (max-width:1199px) {
  .about-tit { margin-bottom: 15px; }
  .about-tit .zh { font-size: 1.375rem; }
  .about-tit .en { font-size: 1.625rem; }
  .concept1 .p-deco2 { width: 15%; }
  .concept2 .box { padding: 40px 20px; }
}
@media (min-width:768px) and (max-width:1199px) {
  .concept2 .box .inner { padding-left: 100px; }
  .concept2 .box .inner .img { width: 140px; height: 140px; top: 0; left: 0; margin-top: -45px; margin-left: -40px; border-radius: 0 0 80% 0; }
  .concept2 .box .inner .img:before { width: 80%; height: 80%; top: 5%; left: 10%; }
  .concept2 .box:nth-of-type(1) .p-deco1 { width: 35%; top: auto; left: auto; bottom: -10%; right: -5%; }
  .concept2 .box:nth-of-type(1) .p-deco1 svg { -moz-transform: rotate(0deg) scaleX(-1); -ms-transform: rotate(0deg) scaleX(-1); -webkit-transform: rotate(0deg) scaleX(-1); transform: rotate(0deg) scaleX(-1); }
  .concept2 .box:nth-of-type(2) .p-deco2 { width: 35%; }
  .concept2 .box:nth-of-type(2) .img:before { left: 15%; top: 6%; }
}
@media (max-width:767px) {
  .about-tit .en { font-size: 1.25rem; }
  .concept1 { padding-top: 50px; padding-bottom: 50px; }
  .concept1 .half-wrap { display: block; }
  .concept1 .left { display: block; text-align: center; width: 100%; margin-bottom: 20px; }
  .concept1 .right { display: block; text-align: center; padding-left: 0; width: 100%; }
  .concept2 { padding-top: 30px; }
  .concept2 .box { display: block; width: 100%; padding: 4%; max-width: none; margin: 0 auto 30px auto; }
  .concept2 .box .inner { padding-left: 120px; }
  .concept2 .box .inner .right { padding-left: 20px; }
  .concept2 .box:nth-of-type(1) { margin-right: auto; }
  .concept2 .box:nth-of-type(1) .p-deco1 { width: 30%; top: auto; left: auto; bottom: -10%; right: -5%; }
  .concept2 .box:nth-of-type(1) .p-deco1 svg { -moz-transform: rotate(0deg) scaleX(-1); -ms-transform: rotate(0deg) scaleX(-1); -webkit-transform: rotate(0deg) scaleX(-1); transform: rotate(0deg) scaleX(-1); }
  .concept2 .box:nth-of-type(2) .p-deco2 { width: 30%; }
}
@media (max-width:639px) {
  .concept1 .p-deco1 { width: 75%; }
  .concept1 .p-deco2 { width: 35%; opacity: 0.8; }
  .concept2 .box { padding: 20px; margin: 0 auto 20px auto; }
  .concept2 .box .inner { padding-left: 0; }
  .concept2 .box .inner .img { width: 60px; height: 60px; margin: 0; top: 0; }
  .concept2 .box .inner .right { display: block; width: 100%; padding-left: 0; }
  .concept2 .box .inner .right .about-tit { padding-left: 70px; padding-bottom: 15px; border-bottom: 1px solid #ddd; }
}
@media (max-width:499px) {
  .concept2 .box { padding: 20px 15px; }
  .concept2 .box:nth-of-type(1) .p-deco1 { width: 45%; }
}
.certi-list .box { display: table; width: 100%; margin: 0 auto; padding: 20px 0; border-top: 1px solid #ddd; opacity: 0; -moz-transform: translate(0, 20%); -ms-transform: translate(0, 20%); -webkit-transform: translate(0, 20%); transform: translate(0, 20%); -moz-transition: opacity 0.8s, -moz-transform 0.8s; -o-transition: opacity 0.8s, -o-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; }
.certi-list .box.scroll-view { opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.certi-list .box:first-of-type { border-top: none; }
.certi-list .box .img { width: 35%; display: table-cell; vertical-align: middle; }
.certi-list .box .text { position: relative; width: 65%; display: table-cell; vertical-align: middle; text-align: left; padding-left: 70px; }
.certi-list .box .text:before { content: ""; display: block; position: absolute; width: 1px; left: 35px; top: 50px; bottom: 50px; background: #ddd; }
.certi-list .box .text .tit { position: relative; font-weight: 600; color: #a61956; font-size: 1.75rem; line-height: 1.3; margin-bottom: 30px; }
.certi-list .box .text .tit:before { content: ""; display: inline-block; margin-right: 10px; font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-size: inherit; }
.certi-list .box .text p { color: #444; }
@media (max-width:1199px) {
  .certi-list .box .img { width: 30%; }
  .certi-list .box .text { width: 70%; padding-left: 50px; }
  .certi-list .box .text:before { left: 25px; top: 20px; bottom: 20px; }
  .certi-list .box .text .tit { font-size: 1.375rem; margin-bottom: 15px; }
}
@media (max-width:767px) {
  .certi-list .box { display: block; max-width: 530px; }
  .certi-list .box .img { width: 100%; display: block; margin: 0 auto 15px auto; }
  .certi-list .box .text { display: block; width: 100%; padding-left: 0; }
  .certi-list .box .text:before { display: none; }
  .certi-list .box .text .tit { text-align: center; }
  .certi-list .box .text .tit:before { display: none; }
}
@media (max-width:399px) {
  .certi-list .box .text .tit { font-size: 1.125rem; }
}