@charset "UTF-8";
/*-- preset --*/
/*-- custom --*/
.color-white,
.color-white-hover:hover,
.item:hover .color-white-hover, .color-lightergray,
.color-lightergray-hover:hover,
.item:hover .color-lightergray-hover, .color-lightgray,
.color-lightgray-hover:hover,
.item:hover .color-lightgray-hover, .color-gray,
.color-gray-hover:hover,
.item:hover .color-gray-hover, .color-darkgray,
.color-darkgray-hover:hover,
.item:hover .color-darkgray-hover, .color-darkergray,
.color-darkergray-hover:hover,
.item:hover .color-darkergray-hover, .color-black,
.color-black-hover:hover,
.item:hover .color-black-hover, .color-main,
.color-main-hover:hover,
.item:hover .color-main-hover, .color-red,
.color-red-hover:hover,
.item:hover .color-red-hover, .bg-white, .bg-white-hover:hover, .item:hover .bg-white-hover, .bg-black, .bg-black-hover:hover, .item:hover .bg-black-hover, .bg-lightergray, .bg-lightergray-hover:hover, .item:hover .bg-lightergray-hover, .bg-lightgray, .bg-lightgray-hover:hover, .item:hover .bg-lightgray-hover, .bg-gray, .bg-gray-hover:hover, .item:hover .bg-gray-hover, .bg-darkgray, .bg-darkgray-hover:hover, .item:hover .bg-darkgray-hover, .bg-darkergray, .bg-darkergray-hover:hover, .item:hover .bg-darkergray-hover, .bg-color-main, .bg-color-main-hover:hover, .item:hover .bg-color-main-hover, .owl-nav-block .owl-nav .owl-prev, .owl-nav-block .owl-nav .owl-next, .btn-gotop.style-2::before, .header, .banner .item, .banner .item:hover {
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out; }

.owl-carousel .owl-nav, .owl-carousel .owl-dots {
  display: none; }

.owl-carousel.owl-nav-block .owl-nav, .owl-carousel.owl-dots-block .owl-dots {
  display: block; }

.owl-nav-block .owl-nav, .owl-nav-block .owl-nav .owl-prev, .owl-nav-block .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

/*-- Gotop & ScrollDown--*/
/*-- Colors --*/
.color-white,
.color-white-hover:hover,
.item:hover .color-white-hover {
  color: white; }

.color-lightergray,
.color-lightergray-hover:hover,
.item:hover .color-lightergray-hover {
  color: #F3F3F3; }

.color-lightgray,
.color-lightgray-hover:hover,
.item:hover .color-lightgray-hover {
  color: #ebebeb; }

.color-gray,
.color-gray-hover:hover,
.item:hover .color-gray-hover {
  color: #bababa; }

.color-darkgray,
.color-darkgray-hover:hover,
.item:hover .color-darkgray-hover {
  color: #333333; }

.color-darkergray,
.color-darkergray-hover:hover,
.item:hover .color-darkergray-hover {
  color: #111111; }

.color-black,
.color-black-hover:hover,
.item:hover .color-black-hover {
  color: black; }

.color-main,
.color-main-hover:hover,
.item:hover .color-main-hover {
  color: #FCC804; }

.color-red,
.color-red-hover:hover,
.item:hover .color-red-hover {
  color: red; }

/*-- Backgrounds --*/
/* 背景圖片 Background Image */
.bg-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }

/* 背景圖片固定 Background Image */
.bg-fixed {
  background-attachment: fixed; }

/* 顏色覆蓋 Overlay */
.bg-overlay {
  position: relative;
  color: white; }
  .bg-overlay a {
    color: white; }
  .bg-overlay::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }
  .bg-overlay.dark::before, .bg-overlay.dark-hover:hover::before {
    background: #111111; }
  .bg-overlay.color-main::before, .bg-overlay.color-main-hover:hover::before {
    background: #FCC804; }
  .bg-overlay.opacity-90::before, .bg-overlay.opacity-90-hover:hover::before {
    opacity: 0.9; }
  .bg-overlay.opacity-80::before, .bg-overlay.opacity-80-hover:hover::before {
    opacity: 0.8; }
  .bg-overlay.opacity-70::before, .bg-overlay.opacity-70-hover:hover::before {
    opacity: 0.7; }
  .bg-overlay.opacity-60::before, .bg-overlay.opacity-60-hover:hover::before {
    opacity: 0.6; }
  .bg-overlay.opacity-50::before, .bg-overlay.opacity-50-hover:hover::before {
    opacity: 0.5; }
  .bg-overlay.opacity-40::before, .bg-overlay.opacity-40-hover:hover::before {
    opacity: 0.4; }
  .bg-overlay.opacity-30::before, .bg-overlay.opacity-30-hover:hover::before {
    opacity: 0.3; }
  .bg-overlay.opacity-20::before, .bg-overlay.opacity-20-hover:hover::before {
    opacity: 0.2; }
  .bg-overlay.opacity-10::before, .bg-overlay.opacity-10-hover:hover::before {
    opacity: 0.1; }
  .bg-overlay .top {
    position: relative;
    z-index: 2; }

/* 背景顏色 Background Colors */
.bg-white, .bg-white-hover:hover, .item:hover .bg-white-hover {
  background-color: white; }

.bg-black, .bg-black-hover:hover, .item:hover .bg-black-hover {
  background-color: black; }

.bg-lightergray, .bg-lightergray-hover:hover, .item:hover .bg-lightergray-hover {
  background-color: #F3F3F3; }

.bg-lightgray, .bg-lightgray-hover:hover, .item:hover .bg-lightgray-hover {
  background-color: #ebebeb; }

.bg-gray, .bg-gray-hover:hover, .item:hover .bg-gray-hover {
  background-color: #bababa; }

.bg-darkgray, .bg-darkgray-hover:hover, .item:hover .bg-darkgray-hover {
  background-color: #333333; }

.bg-darkergray, .bg-darkergray-hover:hover, .item:hover .bg-darkergray-hover {
  background-color: #111111; }

.bg-color-main, .bg-color-main-hover:hover, .item:hover .bg-color-main-hover {
  background-color: #FCC804; }

/*-- 按鈕樣式 Buttons --*/
.btn {
  border: none;
  outline: none; }

.table {
  width: 100%; }
  .table.default thead tr td {
    background: #FCC804;
    color: white;
    font-weight: 500;
    padding: 1.041666666vw 1.822916666vw;
    border-right: 3px solid white; }
  .table.default tbody tr td {
    background: white;
    padding: 1rem;
    padding: 1.041666666vw 1.822916666vw;
    border-right: 3px solid white; }
    .table.default tbody tr td:last-child {
      border-right: none; }
  .table.default tbody tr:nth-child(even) td {
    background: #ebebeb; }

/*--------------------------------------------------------------------------*/
/*-------------------------- 排版樣式 Grid Layout ----------------------------*/
.group.item2 .col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% / $item);
  flex: 0 0 calc(100% / $item);
  max-width: calc(100% / $item); }

.group.item3 .col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% / $item);
  flex: 0 0 calc(100% / $item);
  max-width: calc(100% / $item); }

.group.item4 .col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% / $item);
  flex: 0 0 calc(100% / $item);
  max-width: calc(100% / $item); }

.group.item5 .col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% / $item);
  flex: 0 0 calc(100% / $item);
  max-width: calc(100% / $item); }

.group.item6 .col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% / $item);
  flex: 0 0 calc(100% / $item);
  max-width: calc(100% / $item); }

.group.item7 .col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(100% / $item);
  flex: 0 0 calc(100% / $item);
  max-width: calc(100% / $item); }

.group.gap0 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 0px;
  margin-right: 0px; }
  .group.gap0 .col {
    padding-left: 0px;
    padding-right: 0px; }

.group.gap2 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -2px;
  margin-right: -2px; }
  .group.gap2 .col {
    padding-left: 2px;
    padding-right: 2px; }

.group.gap10 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.26042vw;
  margin-right: -0.26042vw; }
  .group.gap10 .col {
    padding-left: 0.26042vw;
    padding-right: 0.26042vw; }

.group.gap15 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.39063vw;
  margin-right: -0.39063vw; }
  .group.gap15 .col {
    padding-left: 0.39063vw;
    padding-right: 0.39063vw; }

.group.gap20 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.52083vw;
  margin-right: -0.52083vw; }
  .group.gap20 .col {
    padding-left: 0.52083vw;
    padding-right: 0.52083vw; }

.group.gap30 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.78125vw;
  margin-right: -0.78125vw; }
  .group.gap30 .col {
    padding-left: 0.78125vw;
    padding-right: 0.78125vw; }

.group.gap40 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1.04167vw;
  margin-right: -1.04167vw; }
  .group.gap40 .col {
    padding-left: 1.04167vw;
    padding-right: 1.04167vw; }

.group.gap45 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1.17188vw;
  margin-right: -1.17188vw; }
  .group.gap45 .col {
    padding-left: 1.17188vw;
    padding-right: 1.17188vw; }

.group.gap50 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1.30208vw;
  margin-right: -1.30208vw; }
  .group.gap50 .col {
    padding-left: 1.30208vw;
    padding-right: 1.30208vw; }

.group.gap60 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1.5625vw;
  margin-right: -1.5625vw; }
  .group.gap60 .col {
    padding-left: 1.5625vw;
    padding-right: 1.5625vw; }

.group.gap70 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1.82292vw;
  margin-right: -1.82292vw; }
  .group.gap70 .col {
    padding-left: 1.82292vw;
    padding-right: 1.82292vw; }

.group.gap80 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -2.08333vw;
  margin-right: -2.08333vw; }
  .group.gap80 .col {
    padding-left: 2.08333vw;
    padding-right: 2.08333vw; }

.group.gap95 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -2.47396vw;
  margin-right: -2.47396vw; }
  .group.gap95 .col {
    padding-left: 2.47396vw;
    padding-right: 2.47396vw; }

.group.gap100 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -2.60416vw;
  margin-right: -2.60416vw; }
  .group.gap100 .col {
    padding-left: 2.60416vw;
    padding-right: 2.60416vw; }

.group.gap130 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -3.38542vw;
  margin-right: -3.38542vw; }
  .group.gap130 .col {
    padding-left: 3.38542vw;
    padding-right: 3.38542vw; }

@media (max-width: 1240px) {
  .group.item4 .col, .group.item5 .col, .group.item6 .col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; } }

@media (max-width: 576px) {
  .group.item2 .col, .group.item3 .col, .group.item4 .col, .group.item5 .col, .group.item6 .col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .group.gap10, .group.gap2, .group.gap14, .group.gap20, .group.gap24, .group.gap26, .group.gap40, .group.gap50, .group.gap60, .group.gap80, .group.gap95 {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 0px;
    margin-right: 0px; }
    .group.gap10 .col, .group.gap2 .col, .group.gap14 .col, .group.gap20 .col, .group.gap24 .col, .group.gap26 .col, .group.gap40 .col, .group.gap50 .col, .group.gap60 .col, .group.gap80 .col, .group.gap95 .col {
      padding-left: 0px;
      padding-right: 0px; } }

/*-- Carousels --*/
/* Bootstrap */
.carousel-default {
  position: relative; }
  .carousel-default .carousel-indicators {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 4;
    bottom: -30px; }
    .carousel-default .carousel-indicators .item {
      position: relative;
      width: 12px;
      height: 12px;
      background: #bababa;
      border: 1px solid #FCC804;
      margin: 0 7px;
      -webkit-transition: all .25s ease-in-out;
      -o-transition: all .25s ease-in-out;
      transition: all .25s ease-in-out;
      border-radius: 100%;
      border: none; }
      .carousel-default .carousel-indicators .item:focus {
        outline: none; }
      .carousel-default .carousel-indicators .item:hover {
        background: #FCC804;
        -webkit-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out; }
      .carousel-default .carousel-indicators .item.active {
        background: #FCC804; }
  .carousel-default .carousel-controls {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%; }
    .carousel-default .carousel-controls .link-prev {
      position: absolute;
      left: 12px; }
      .carousel-default .carousel-controls .link-prev .carousel-control-prev-icon {
        background-image: url("../images/icon-arrow-line-left.svg");
        width: 18px;
        height: 35px; }
    .carousel-default .carousel-controls .link-next {
      position: absolute;
      right: 12px; }
      .carousel-default .carousel-controls .link-next .carousel-control-next-icon {
        background-image: url("../images/icon-arrow-line-right.svg");
        width: 18px;
        height: 35px; }

/* Owl */
.owl-nav-block .owl-stage-outer {
  z-index: 1; }

.owl-nav-block .owl-nav {
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0; }
  .owl-nav-block .owl-nav .owl-prev span, .owl-nav-block .owl-nav .owl-next span {
    font-size: 0;
    width: 15px;
    height: 25px;
    display: block;
    background-size: 45px;
    background-position: center;
    background-repeat: no-repeat; }
  .owl-nav-block .owl-nav .owl-prev {
    left: -2.604166666vw;
    right: auto; }
    .owl-nav-block .owl-nav .owl-prev span {
      background-image: url("https://api.iconify.design/ic:round-keyboard-arrow-left.svg"); }
    .owl-nav-block .owl-nav .owl-prev:hover span {
      background-image: url("https://api.iconify.design/ic:round-keyboard-arrow-left.svg?color=%230069AB"); }
  .owl-nav-block .owl-nav .owl-next {
    left: auto;
    right: -2.604166666vw; }
    .owl-nav-block .owl-nav .owl-next span {
      background-image: url("https://api.iconify.design/ic:round-keyboard-arrow-right.svg"); }
    .owl-nav-block .owl-nav .owl-next:hover span {
      background-image: url("https://api.iconify.design/ic:round-keyboard-arrow-right.svg?color=%230069AB"); }

.owl-dots-block .owl-dots {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  text-align: center; }
  .owl-dots-block .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    background: white;
    border: 1px solid #bababa;
    margin: 0 4px;
    -webkit-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    border-radius: 100%; }
    .owl-dots-block .owl-dots .owl-dot:focus {
      outline: none; }
    .owl-dots-block .owl-dots .owl-dot:hover {
      background: #bababa;
      -webkit-transition: all .25s ease-in-out;
      -o-transition: all .25s ease-in-out;
      transition: all .25s ease-in-out; }
    .owl-dots-block .owl-dots .owl-dot.active {
      background: #bababa; }

.dots-color-main .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background: white;
  border: 1px solid #FCC804;
  margin: 0 4px;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  border-radius: 100%; }
  .dots-color-main .owl-dots .owl-dot:focus {
    outline: none; }
  .dots-color-main .owl-dots .owl-dot:hover {
    background: #FCC804;
    -webkit-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out; }
  .dots-color-main .owl-dots .owl-dot.active {
    background: #FCC804; }

/*-- PageBanner --*/
.page_banner {
  position: relative;
  overflow: hidden;
  background: #FCC804;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .page_banner a {
    color: white; }
    .page_banner a :hover {
      opacity: .8; }
  .page_banner .container {
    position: relative;
    z-index: 2; }
  .page_banner .image {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 3.645833333vw;
    width: calc(54.6875vw + 3.645833333vw); }
    .page_banner .image .img {
      width: 100%; }
  .page_banner.no_image .banner {
    min-height: 110px;
    background: #333333; }
  .page_banner.no_image.small .banner {
    min-height: 50px;
    background: #000000;
    background: -moz-linear-gradient(top, #000000 0%, #000000 40%, #ffffff 40%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #000000 0%, #000000 40%, #ffffff 40%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(40%, #000000), color-stop(40%, #ffffff), to(#ffffff));
    background: -o-linear-gradient(top, #000000 0%, #000000 40%, #ffffff 40%, #ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%, #000000 40%, #ffffff 40%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); }
  .page_banner .page_title {
    padding-left: calc((100vw - 80.729166666vw) / 2 + 15px); }
    @media (max-width: 1440px) {
      .page_banner .page_title {
        padding-left: calc((100vw - 86vw) / 2 + 15px); } }
    .page_banner .page_title .title {
      font-size: 4.166666666vw;
      font-weight: 700;
      text-transform: uppercase; }
      @media (max-width: 576px) {
        .page_banner .page_title .title {
          font-size: 10vw; } }
  .page_banner .btn-scroll {
    color: white;
    top: 20vw; }
    .page_banner .btn-scroll::before {
      background: white; }

/*-- Breadcrumb --*/
.breadcrumb {
  background: transparent;
  width: 100%;
  margin: 20px 0; }
  .breadcrumb ol {
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .breadcrumb ol li {
      position: relative;
      list-style: none; }
      .breadcrumb ol li:not(:last-child) {
        margin-right: 25px; }
        .breadcrumb ol li:not(:last-child)::after {
          content: " > ";
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          right: -17px;
          font-size: .875rem; }
  .breadcrumb .item {
    font-size: 1rem;
    text-transform: capitalize; }
    .breadcrumb .item:hover {
      color: rgba(255, 255, 255, 0.7); }

/*--------------------------------------------------------------------------*/
/*------------------------------ 基礎設定 Basic ------------------------------*/
body {
  font-size: 16px;
  background: #F3F3F3;
  color: #333333;
  font-family: Arial, Microsoft JhengHei, sans-serif; }
  @media (max-width: 767px) {
    body {
      font-size: 14px; } }

a, a:hover {
  color: #333333; }

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

:focus {
  outline: none; }

ul.list {
  padding-left: 0; }
  ul.list li {
    list-style: none;
    padding-left: 0; }

@media (min-width: 1921px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1550px; }
    .container.narrow,
    .container-lg.narrow,
    .container-md.narrow,
    .container-sm.narrow,
    .container-xl.narrow {
      max-width: 1230px; } }

@media (max-width: 1920px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 80.729166666vw; }
    .container.narrow,
    .container-lg.narrow,
    .container-md.narrow,
    .container-sm.narrow,
    .container-xl.narrow {
      max-width: 64.0625vw; } }

@media (max-width: 1440px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 86vw; } }

@media (max-width: 768px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%; } }

/*--------------------------------------------------------------------------*/
/*--------------------------------- Main -----------------------------------*/
/*---------- Gotop Styles ----------*/
.btn-gotop.style-1 {
  color: white;
  position: absolute;
  top: auto;
  bottom: 8rem;
  left: auto;
  right: 3rem;
  z-index: 4;
  animation: icon-scroll .8s infinite alternate;
  -moz-animation: icon-scroll .8s infinite alternate;
  -webkit-animation: icon-scroll .8s infinite alternate; }
  .btn-gotop.style-1:hover {
    opacity: .8; }
  .btn-gotop.style-1::before {
    content: "";
    width: 37px;
    height: 1px;
    background: white;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  .btn-gotop.style-1.left {
    padding-left: 65px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right; }
    .btn-gotop.style-1.left::before {
      left: 12px; }
  .btn-gotop.style-1.right {
    padding-right: 65px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right; }
    .btn-gotop.style-1.right::before {
      right: 12px; }
  .btn-gotop.style-1:hover {
    color: white; }

.btn-gotop.style-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .btn-gotop.style-2::before {
    content: "\f106";
    font-family: fontello;
    width: 45px;
    height: 45px;
    background: #333333;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 15px; }

@-webkit-keyframes icon-scroll {
  0% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg); }
  100% {
    -webkit-transform: translateY(-15px) rotate(90deg);
    transform: translateY(-15px) rotate(90deg); } }

@keyframes icon-scroll {
  0% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg); }
  100% {
    -webkit-transform: translateY(-15px) rotate(90deg);
    transform: translateY(-15px) rotate(90deg); } }

/*---------- Social Medias ----------*/
.social-medias {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 0;
  padding-left: 0; }
  .social-medias .item {
    list-style: none;
    padding-left: 5px;
    padding-right: 5px; }
    .social-medias .item a {
      font-size: 1rem; }
  .social-medias.circle .item a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #333333;
    color: white; }
    .social-medias.circle .item a:hover {
      background: #FCC804; }
  .social-medias.circle.dark .item a {
    background: #333333;
    color: #FCC804; }
    .social-medias.circle.dark .item a:hover {
      background: #FCC804;
      color: white; }

/*--------------------------------------------------------------------------*/
/*-------------------------------- Header ----------------------------------*/
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px; }
  .header .logo img {
    -webkit-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
    width: clamp(160px, 17.60416vw, 338px);
    height: clamp(26px, 2.86458vw, 55px); }
  .header .slogan {
    letter-spacing: 5px; }
  @media (min-width: 768px) {
    .header {
      padding: 0 clamp(30px, 5.2083vw, 100px); } }
  @media (max-width: 767px) {
    .header {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .header .slogan {
        margin-top: 15px; } }

/*--------------------------------------------------------------------------*/
/*-------------------------------- Footer ----------------------------------*/
.footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px; }
  @media (min-width: 768px) {
    .footer {
      padding: 0 clamp(30px, 5.2083vw, 100px); } }

/*--------------------------------------------------------------------------*/
/*-------------------------------- Banner ----------------------------------*/
.banner {
  padding-left: clamp(30px, 5.2083vw, 100px); }
  .banner .item {
    text-align: center; }
    .banner .item .image {
      height: calc(100vh - clamp(26px, 2.864583vw, 55px) - clamp(20px, 10.66098081vh, 100px) - clamp(20px, 6.396588486vh, 60px) - clamp(20px, 6.396588486vh, 60px) - clamp(20px, 10.66098081vh, 100px) - 50px);
      overflow: hidden;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: start;
      -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); }
      .banner .item .image img {
        position: relative;
        width: 100%; }
    .banner .item:hover {
      cursor: pointer; }
  @media (max-width: 767px) {
    .banner {
      padding: 20px 15px; } }

/*--------------------------------------------------------------------------*/
/*-------------------------------- Banner ----------------------------------*/
#index {
  padding: 25px 0 20px;
  background: url("../images/bg-logo.png") center center no-repeat #F3F3F3;
  background-size: cover;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media (min-width: 768px) {
    #index {
      padding: clamp(20px, 8.55615vh, 80px) 0 clamp(20px, 6.95187vh, 65px); } }

/*--------------------------------------------------------------------------*/
/*-------------------------------- News ----------------------------------*/
.title-wrapper.text-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

#blog .left .item {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid #333; }
  #blog .left .item:first-child {
    padding-top: 0; }
  #blog .left .item:last-child {
    border: none; }
  #blog .left .item .btn {
    background: #fff;
    padding: 15px 50px;
    border-radius: 35px;
    border: 2px solid; }
    #blog .left .item .btn:hover {
      background: #FCC800; }

#blog .left .backbtn {
  padding: 20px 60px;
  background: #000;
  color: #fff;
  border-radius: 10px;
  border: 1px solid #000; }
  #blog .left .backbtn:hover {
    background: #fff;
    color: #000; }

#blog .right .sidebar .item {
  background: #fff;
  margin-bottom: 10px;
  padding: 15px;
  display: block; }
  #blog .right .sidebar .item.active {
    background: #FCC800; }
  #blog .right .sidebar .item:hover {
    background: #FCC800; }

#blog .right .news-list li {
  border-bottom: 1px solid;
  padding: 30px 0; }
  #blog .right .news-list li:last-child {
    border: none; }

#blog .right .news-list .item:hover .title {
  color: #808080; }

#blog .right .taglist li {
  background: #fff;
  border: 1px solid #000;
  padding: 8px;
  border-radius: 8px;
  margin: 3px; }
  #blog .right .taglist li:hover {
    background: #fcc800; }

@media (min-width: 992px) {
  #blog .fixedselect {
    display: none; } }

@media (max-width: 992px) {
  #blog .right .desktop {
    display: none; } }

/*--------------------------------------------------------------------------*/
/*-------------------------------- Products ----------------------------------*/
#pdweb .box {
  background: #fff;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  min-height: 620px;
  position: relative; }
  @media (max-width: 992px) {
    #pdweb .box {
      min-height: 700px; } }
  @media (max-width: 767px) {
    #pdweb .box {
      min-height: 630px; } }
  #pdweb .box.template {
    min-height: 700px; }
    @media (max-width: 1140px) {
      #pdweb .box.template {
        min-height: 750px; } }
    @media (max-width: 992px) {
      #pdweb .box.template {
        min-height: 840px; } }
    @media (max-width: 767px) {
      #pdweb .box.template {
        min-height: 680px; } }
    @media (max-width: 450px) {
      #pdweb .box.template {
        min-height: 800px; } }
  #pdweb .box.custom {
    min-height: 800px; }
    @media (max-width: 992px) {
      #pdweb .box.custom {
        min-height: 960px; } }
    @media (max-width: 767px) {
      #pdweb .box.custom {
        min-height: 780px; } }
    @media (max-width: 450px) {
      #pdweb .box.custom {
        min-height: 880px; } }
  #pdweb .box .top {
    background: #FCC800;
    padding: 1.5rem 2rem; }
  #pdweb .box .info {
    padding: 2rem 2rem; }
    #pdweb .box .info .items {
      list-style-type: none;
      padding-left: 0;
      line-height: 1.8; }
  #pdweb .box .bottom {
    background: #231815;
    color: #fff;
    padding: 1.5rem 2rem;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; }

/*-- 頁籤樣式 --*/
.page-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.page-controls li {
  list-style: none; }

.page-controls .page-item {
  margin-right: 7px;
  margin-left: 7px; }

.page-controls .page-link {
  width: 32px;
  height: 34px;
  background: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.page-controls .page-link.prev, .page-controls .page-link.next {
  background: transparent;
  font-size: 12px; }

.page-controls .page-link.active, .page-controls .page-link:hover {
  background: #fcc800;
  color: white; }

.divid {
  width: clamp(50px, 5.2083vw, 100px);
  opacity: 1;
  background: #fcc800; }

.divid:not([size]) {
  height: 4px; }

.divid.w-100 {
  width: 100%; }

.divid.small {
  width: clamp(25px, 2.60415vw, 50px); }