@charset "UTF-8";
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Regular.eot");
  src: url("../fonts/Newsreader-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Newsreader-Regular.woff") format("woff"), url("../fonts/Newsreader-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "NewsreaderNumber";
  src: url("../fonts/Newsreader-300.ttf");
  font-style: normal;
  font-weight: 300;
  unicode-range: U+30-39;
}
@font-face {
  font-family: "CormorantGaramond";
  src: url("../fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-style: normal;
  /*font-weight: 300;*/
}
@font-face {
  font-family: "CormorantGaramond";
  src: url("../fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}
/*
@font-face {
  font-family: "CormorantGaramond";
  src: url("../fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "CormorantGaramond";
  src: url("../fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "CormorantGaramond";
  src: url("../fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}
*/
@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay-Light.eot");
  src: url("../fonts/RedHatDisplay-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/RedHatDisplay-Light.woff") format("woff"), url("../fonts/RedHatDisplay-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay-Regular.eot");
  src: url("../fonts/RedHatDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/RedHatDisplay-Regular.woff") format("woff"), url("../fonts/RedHatDisplay-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay-Medium.eot");
  src: url("../fonts/RedHatDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/RedHatDisplay-Medium.woff") format("woff"), url("../fonts/RedHatDisplay-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay-SemiBold.eot");
  src: url("../fonts/RedHatDisplay-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/RedHatDisplay-SemiBold.woff") format("woff"), url("../fonts/RedHatDisplay-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay-ExtraBold.eot");
  src: url("../fonts/RedHatDisplay-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/RedHatDisplay-ExtraBold.woff") format("woff"), url("../fonts/RedHatDisplay-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
}
@media screen and (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }
}

@media screen and (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  display: none;
}
.cursor:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  left: 38px;
  top: 37.5px;
  transition: opacity 0.3s ease-in-out;
}
.cursor.dark {
  background-color: #2C2C2C;
}
.cursor.active-prev {
  width: 100px;
  height: 100px;
}
.cursor.active-prev:after {
  transform: scaleX(-1);
  background-image: url("../img/icon/arrow.svg");
  opacity: 1;
}
.cursor.active-next {
  width: 100px;
  height: 100px;
}
.cursor.active-next:after {
  opacity: 1;
  background-image: url("../img/icon/arrow.svg");
}
.cursor.read {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
}
.cursor.read .txt-read {
  display: inline-flex;
  align-items: center;
  font-size: 1.125em;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #5C5C5C;
}
.cursor.read .sign {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 2px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../img/icon/plus.svg");
  margin-left: 2px;
}

.highlight-head {
  position: relative;
}
.highlight-head:after {
  content: "";
  width: 90px;
  height: 1px;
  background-color: #CEB175;
  position: absolute;
  bottom: -20px;
  left: 0;
}
@media screen and (max-width: 991px) {
  .highlight-head:after {
    width: 68px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -16px;
  }
}

.com-btn {
  display: inline-block;
  position: relative;
  border: 1px solid #343434;
  border-radius: 200px;
  letter-spacing: 0.04em;
  font-size: 1.125em;
  line-height: 1.25;
  padding: 12px 32px;
  /*box-shadow: 2.29px 4.58px 45.8px 0px #FFFFFF40;*/
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .com-btn {
    font-size: 0.9375em;
    padding: 12px 20px;
  }
}
.com-btn:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  transition-duration: 0.4s;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom;
}
.com-btn .txt-wrap {
  position: relative;
}
.com-btn .txt {
  display: inline-block;
  transform: translateY(0);
  transition-duration: 0.4s;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.com-btn .txt-repeat {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  transform: translateY(200%);
  transition-duration: 0.4s;
  color: #343434;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.com-btn.btn-light {
  border-color: #ffffff;
}
.com-btn.btn-light:before {
  background-color: #ffffff;
}
.com-btn.btn-light-white {
  color: #ffffff;
  border-color: #ffffff;
}
.com-btn.btn-light-white:before {
  background-color: #ffffff;
}
.com-btn:hover:before {
  height: 100%;
  transition-duration: 0.6s;
}
.com-btn:hover .txt {
  transform: translateY(-150%);
  transition-duration: 0.6s;
}
.com-btn:hover .txt-repeat {
  transform: translateY(0);
  transition-duration: 0.6s;
}

.mfp-container {
  overflow: auto;
}

.mfp-bg {
  background-color: rgba(33, 33, 33, 0.8);
  opacity: 1;
  transition: all 0.2s ease-out;
}

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.2s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
  transition: all 0.2s ease-out;
}

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
  transition: all 0.2s ease-out;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.2s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
  transition: all 0.2s ease-out;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
  transition: all 0.2s ease-out;
}

.popup {
  margin: 60px auto;
  transition: all 0.2s ease-out;
}

.rte-wrap {
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.rte-wrap h1, .rte-wrap h2, .rte-wrap h3, .rte-wrap h4, .rte-wrap h5, .rte-wrap h6 {
  font-weight: 600;
}
.rte-wrap p, .rte-wrap ul, .rte-wrap ol {
  margin: 1rem 0;
}

.com-intro {
  max-width: 860px;
  margin-bottom: 130px;
}
@media screen and (max-width: 991px) {
  .com-intro {
    margin-bottom: 72px;
  }
}
.com-intro .desc {
  color: #5C5C5C;
  font-size: 1.25em;
  line-height: 1.52;
  letter-spacing: 0.04em;
  margin-bottom: 30px;
}
@media screen and (max-width: 991px) {
  .com-intro .desc {
    font-size: 1em;
  }
}
.com-intro .highlight-head {
  font-size: 3.75em;
  line-height: 1.2;
  letter-spacing: 0em;
  font-family: "NewsreaderNumber", "CormorantGaramond", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
}
@media screen and (max-width: 991px) {
  .com-intro .highlight-head {
    font-size: 2em;
  }
}
@media screen and (max-width: 991px) {
  .com-intro .highlight-head:after {
    transform: translateX(0);
    left: 0;
  }
}

.com-item {
  width: calc((100% - 42px) / 2);
  margin-right: 42px;
  margin-bottom: 60px;
}
@media screen and (max-width: 991px) {
  .com-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 100px;
  }
}
.com-item:nth-child(even) {
  margin-right: 0;
}
.com-item .thumbnail {
  display: block;
  /*border-radius: 20px;*/
  overflow: hidden;
  position: relative;
  height: auto;
}
.com-item .thumbnail:before {
  content: "";
  display: block;
}
@media (max-width: 991px) {
  .com-item .thumbnail:before {
    padding-top: 61.1854684512%;
  }
}
@media (min-width: 992px) {
  .com-item .thumbnail:before {
    padding-top: 61.1854684512%;
  }
}
@media screen and (max-width: 991px) {
  .com-item .thumbnail {
    /*border-radius: 12px;*/
  }
}
.com-item .thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.com-item .desc {
  padding: 40px 12px 0;
  text-align: center;
}
@media screen and (max-width: 991px) {
  .com-item .desc {
    padding: 12px 0 0 0;
  }
}
.com-item .desc h3 {
  font-family: "NewsreaderNumber", "CormorantGaramond", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
  color: #CEB175;
  font-size: 2em;
  line-height: 1.25;
  letter-spacing: 0em;
  margin-bottom: 10px;
  opacity: 0.8;
}
@media screen and (max-width: 991px) {
  .com-item .desc h3 {
    font-size: 1.375em;
  }
}
.com-item .desc .description {
  font-size: 1.125em;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #5C5C5C;
}
@media screen and (max-width: 991px) {
  .com-item .desc .description {
    font-size: 0.875em;
    line-height: 1.52;
  }
}
.com-item .desc .btn-container {
  margin-top: 24px;
}
@media screen and (max-width: 991px) {
  .com-item .desc .btn-container {
    margin-top: 20px;
  }
}

.com-more {
  text-align: center;
  color: #5C5C5C;
}
.com-more h3 {
  font-size: 2em;
  line-height: 1.25;
  letter-spacing: 0em;
  font-family: "NewsreaderNumber", "CormorantGaramond", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
  text-transform: capitalize;
}
@media screen and (max-width: 991px) {
  .com-more h3 {
    font-size: 1.375em;
  }
}
.com-more .btn-container {
  margin-top: 40px;
}
@media screen and (max-width: 991px) {
  .com-more .btn-container {
    margin-top: 18px;
  }
}

.item-row {
  display: flex;
}
@media screen and (max-width: 991px) {
  .item-row {
    flex-direction: column;
  }
}
.item-row .item {
  /*border-radius: 20px;*/
  padding: 52px 44px;
  margin-right: 32px;
  width: calc((100% - 32px) / 2);
  border: 1px solid #525252;
  text-align: center;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  background-color: rgba(44, 44, 44, 0.8);
  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.26);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 991px) {
  .item-row .item {
    margin-right: auto;
    width: 100%;
    padding: 40px 32px;
    max-width: 420px;
    margin-left: auto;
  }
}
@media screen and (min-width: 992px) {
  .item-row .item:nth-child(even) {
    margin-right: 0;
  }
}
@media screen and (max-width: 991px) {
  .item-row .item:not(:last-child) {
    margin-bottom: 24px;
  }
}
.item-row .item h3 {
  color: #CEB175;
  font-size: 2em;
  line-height: 1.25;
  letter-spacing: 0em;
  font-family: "NewsreaderNumber", "CormorantGaramond", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
}
@media screen and (max-width: 991px) {
  .item-row .item h3 {
    font-size: 1.375em;
    max-width: 100%;
  }
}
.item-row .item .description {
  color: #ffffff;
  margin-top: 27px;
  font-size: 1.125em;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 991px) {
  .item-row .item .description {
    margin-top: 20px;
    font-size: 0.875em;
    line-height: 1.52;
  }
}
.item-row .item .btn-container {
  margin-top: 32px;
}
@media screen and (max-width: 991px) {
  .item-row .item .btn-container {
    margin-top: 20px;
  }
}/*# sourceMappingURL=common.css.map */