@charset "UTF-8";
.product {
  width: 100%;
  height: auto;
}
.product .fake-bar {
  position: fixed;
  left: 0;
  top: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  background-color: #fff;
  z-index: 99;
}
.product .fake-bar.show {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.product .banner {
  width: 100%;
  position: relative;
}
.product .banner.waypoint .type, .product .banner.waypoint .text, .product .banner.waypoint .btn-scroll {
  opacity: 0;
  -webkit-transition: 0.6s 0.8s;
  -o-transition: 0.6s 0.8s;
  transition: 0.6s 0.8s;
}
.product .banner.waypoint .title {
  opacity: 0;
  -webkit-transform: translate(15px, 0);
      -ms-transform: translate(15px, 0);
          transform: translate(15px, 0);
  -webkit-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}
.product .banner.show .type, .product .banner.show .text, .product .banner.show .btn-scroll {
  opacity: 1;
}
.product .banner.show .title {
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
.product .banner .container {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .product .banner .tool-box {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .product .banner .swiper-pagination {
    display: none !important;
  }
}
.product .banner .swiper-slide {
  width: 100%;
  height: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}
.product .banner .swiper-slide.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product .banner .swiper-slide.center .text-wrap {
  text-align: center;
}
.product .banner .swiper-slide.left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.product .banner .swiper-slide.left .text-wrap {
  text-align: left;
}
.product .banner .swiper-slide.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.product .banner .swiper-slide.right .text-wrap {
  text-align: left;
}
.product .banner .inner-wrap {
  width: 100%;
  padding: 0 15vw;
  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;
}
@media only screen and (max-width: 500px) {
  .product .banner .inner-wrap {
    padding: 0 10vw;
  }
}
.product .banner .inner {
  width: 100%;
  max-width: 360px;
  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: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 500px) {
  .product .banner .inner {
    max-width: 100%;
  }
}
.product .banner .text-wrap {
  margin-bottom: 72px;
  position: relative;
  z-index: 5;
}
@media only screen and (max-width: 768px) {
  .product .banner .text-wrap {
    margin-bottom: 0;
  }
}
.product .banner .text-wrap .type {
  display: inline-block;
  font-family: "QUESTION", "CenturyGothicBold", "Microsoft JhengHei Bold", "微軟正黑體修正", "Microsoft JhengHei Bold", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .product .banner .text-wrap .type {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .product .banner .text-wrap .type {
    font-weight: bold;
  }
}
.product .banner .text-wrap .title {
  font-family: "QUESTION", "CenturyGothicBold", "Microsoft JhengHei Bold", "微軟正黑體修正", "Microsoft JhengHei Bold", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: 4.5rem;
  line-height: 1.2;
  letter-spacing: -1.8px;
  margin-bottom: 18px;
}
@media only screen and (max-width: 767px) {
  .product .banner .text-wrap .title {
    font-size: 2.625rem;
    letter-spacing: -1.05px;
    margin-bottom: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .product .banner .text-wrap .title {
    font-weight: bold;
  }
}
.product .banner .text-wrap .text {
  font-family: "QUESTION", "CenturyGothicBold", "Microsoft JhengHei Bold", "微軟正黑體修正", "Microsoft JhengHei Bold", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: 1.3125rem;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .product .banner .text-wrap .text {
    font-weight: bold;
  }
}
.product .banner .btn-scroll {
  position: static;
}
@media only screen and (max-width: 768px) {
  .product .banner .btn-scroll {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media only screen and (max-width: 1024px) {
  .product .bar .bar-list:first-child {
    display: none;
  }
  .product .bar .bar-list:nth-child(2):before {
    display: none;
  }
}
.product .product-content {
  width: 100%;
  padding: 65px 0 20px;
}
@media only screen and (max-width: 767px) {
  .product .product-content {
    padding: 45px 0 25px;
  }
}
@media only screen and (max-width: 350px) {
  .product .product-content {
    padding: 40px 0 20px;
  }
}
.product .product-content .container {
  width: 100%;
}
.product .product-content .title-wrap {
  width: 100%;
  margin-bottom: 72px;
}
@media only screen and (max-width: 767px) {
  .product .product-content .title-wrap {
    margin-bottom: 45px;
  }
}
.product .product-content .card-wrap {
  width: 100%;
}
.product .product-content .card-wrap .card-box {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media only screen and (max-width: 1500px) {
  .product .product-content .card-wrap .card-box {
    max-width: 960px;
  }
}
@media only screen and (max-width: 1024px) {
  .product .product-content .card-wrap .card-box {
    max-width: 100%;
    padding: 0;
  }
}
.product .product-content .card-wrap .card {
  width: 100%;
  max-width: 360px;
  margin: 0 65px 90px;
  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;
  position: relative;
}
.product .product-content .card-wrap .card.waypoint {
  opacity: 0;
  -webkit-transform: skewX(5deg);
      -ms-transform: skewX(5deg);
          transform: skewX(5deg);
  -webkit-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}
.product .product-content .card-wrap .card.waypoint .image-wrap .fake-color {
  opacity: 0;
  -webkit-transition: 0.9s 0.5s;
  -o-transition: 0.9s 0.5s;
  transition: 0.9s 0.5s;
}
.product .product-content .card-wrap .card.show {
  opacity: 1;
  -webkit-transform: skewX(0deg);
      -ms-transform: skewX(0deg);
          transform: skewX(0deg);
}
.product .product-content .card-wrap .card.show .image-wrap .fake-color {
  opacity: 1;
}
@media only screen and (max-width: 1500px) {
  .product .product-content .card-wrap .card {
    margin: 0 60px 80px;
  }
}
@media only screen and (max-width: 1024px) {
  .product .product-content .card-wrap .card {
    max-width: calc(50% - 120px);
  }
}
@media only screen and (max-width: 767px) {
  .product .product-content .card-wrap .card {
    max-width: calc(50% - 60px);
    margin: 0 30px 50px;
  }
  .product .product-content .card-wrap .card .image-wrap .fake-color {
    display: none;
  }
}
@media only screen and (max-width: 575px) {
  .product .product-content .card-wrap .card {
    max-width: calc(50% - 30px);
    margin: 0 15px 70px;
  }
  .product .product-content .card-wrap .card .txt-wrap .text, .product .product-content .card-wrap .card .txt-wrap .btn-learn {
    display: none;
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1025px) {
  .product .product-content .card-wrap .card:hover .card-mask {
    opacity: 1;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    z-index: 3;
  }
  .product .product-content .card-wrap .card:hover .card-mask .text {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  .product .product-content .card-wrap .card:hover .card-mask .cir {
    opacity: 1;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }
}
.product .product-content .card-wrap .card .inner {
  width: 100%;
}
.product .product-content .card-wrap .card .image-wrap {
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 20px;
}
@media only screen and (max-width: 575px) {
  .product .product-content .card-wrap .card .image-wrap {
    margin-bottom: 8px;
  }
}
.product .product-content .card-wrap .card .image-wrap .fake-color {
  width: 100%;
  height: 100%;
  position: absolute;
  right: -25px;
  bottom: -45px;
  z-index: 1;
}
.product .product-content .card-wrap .card .image-wrap .image-control {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 133.334%;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .product .product-content .card-wrap .card .image-wrap .image-control {
    padding-bottom: 130.5%;
  }
}
.product .product-content .card-wrap .card .image-wrap .image-control .image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .product .product-content .card-wrap .card .image-wrap .image-control .image {
    display: none;
  }
}
.product .product-content .card-wrap .card .image-wrap .image-control .image.mob {
  display: none;
}
@media only screen and (max-width: 768px) {
  .product .product-content .card-wrap .card .image-wrap .image-control .image.mob {
    display: block;
  }
}
.product .product-content .card-wrap .card .txt-wrap {
  width: 100%;
  color: #202121;
  padding-left: 28px;
  position: relative;
  z-index: 3;
}
@media only screen and (max-width: 767px) {
  .product .product-content .card-wrap .card .txt-wrap {
    padding-left: 0;
  }
}
.product .product-content .card-wrap .card .txt-wrap .title {
  font-family: "QUESTION", "CenturyGothicBold", "Microsoft JhengHei Bold", "微軟正黑體修正", "Microsoft JhengHei Bold", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
  .product .product-content .card-wrap .card .txt-wrap .title {
    font-size: 1.125rem;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 575px) {
  .product .product-content .card-wrap .card .txt-wrap .title {
    position: absolute;
    left: 0;
    top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .product .product-content .card-wrap .card .txt-wrap .title {
    font-weight: bold;
  }
}
.product .product-content .card-wrap .card .txt-wrap .text {
  font-size: 0.875rem;
  line-height: 1.6;
}
.product .product-content .card-wrap .card .txt-wrap .btn-learn {
  display: none;
}
/*# sourceMappingURL=product.css.map */