@charset 'UTF-8';
/*!
 * n-theme 1.0.0
 * home css
 */
@font-face {
  font-family: 'icomoon';
  src: url('/wp-content/themes/cex/assets/fonts/icomoon.eot?h97869nakto');
  src: url('/wp-content/themes/cex/assets/fonts/icomoon.eot?h97869nakto#iefix') format('embedded-opentype'), url('/wp-content/themes/cex/assets/fonts/icomoon.ttf?h97869nakto') format('truetype'), url('/wp-content/themes/cex/assets/fonts/icomoon.woff?h97869nakto') format('woff'), url('/wp-content/themes/cex/assets/fonts/icomoon.svg?h97869nakto#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-line_icon:before {
  content: "\e902";
  color: #fff;
}
.icon-line_icon1:before {
  content: "\e903";
  color: #00c300;
}
.icon-arrow-down:before {
  content: "\e900";
}
.icon-arrow-left:before {
  content: "\e901";
}
.icon-arrow-right:before {
  content: "\e907";
}
.icon-arrow-up:before {
  content: "\e908";
}
.icon-chevron-down:before {
  content: "\e909";
}
.icon-chevron-left:before {
  content: "\e90a";
}
.icon-chevron-right:before {
  content: "\e90b";
}
.icon-chevron-up:before {
  content: "\e90c";
}
.icon-more-horizontal:before {
  content: "\e90d";
}
.icon-more-vertical:before {
  content: "\e90e";
}
.icon-play:before {
  content: "\e90f";
}
.icon-play-circle:before {
  content: "\e910";
}
.icon-share-2:before {
  content: "\e911";
}
@font-face {
  font-family: 'Bentham';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Bentham Regular'), local('Bentham-Regular'), url(https://fonts.gstatic.com/s/bentham/v10/VdGeAZQPEpYfmHglKWw.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v9/8vIJ7ww63mVu7gtL8Q.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Cinzel Bold'), local('Cinzel-Bold'), url(https://fonts.gstatic.com/s/cinzel/v9/8vIK7ww63mVu7gtzTUHeFA.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Cinzel Black'), local('Cinzel-Black'), url(https://fonts.gstatic.com/s/cinzel/v9/8vIK7ww63mVu7gtzdUPeFA.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Noto Sans TC Thin'), local('NotoSansTC-Thin'), url(https://fonts.gstatic.com/s/notosanstc/v10/-nFlOG829Oofr2wohFbTp9i9WyEJ.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans TC Regular'), local('NotoSansTC-Regular'), url(https://fonts.gstatic.com/s/notosanstc/v10/-nF7OG829Oofr2wohFbTp9iFOQ.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans TC Bold'), local('NotoSansTC-Bold'), url(https://fonts.gstatic.com/s/notosanstc/v10/-nFkOG829Oofr2wohFbTp9i9gwQvDQ.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('Noto Serif TC ExtraLight'), local('NotoSerifTC-ExtraLight'), url(https://fonts.gstatic.com/s/notoseriftc/v7/XLY9IZb5bJNDGYxLBibeHZ0Bvr8vbX8.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif TC'), local('NotoSerifTC-Regular'), url(https://fonts.gstatic.com/s/notoseriftc/v7/XLYgIZb5bJNDGYxLBibeHZ0BhnE.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Noto Serif TC SemiBold'), local('NotoSerifTC-SemiBold'), url(https://fonts.gstatic.com/s/notoseriftc/v7/XLY9IZb5bJNDGYxLBibeHZ0Bvq8qbX8.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Serif TC Bold'), local('NotoSerifTC-Bold'), url(https://fonts.gstatic.com/s/notoseriftc/v7/XLY9IZb5bJNDGYxLBibeHZ0BvssrbX8.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Noto Serif TC Black'), local('NotoSerifTC-Black'), url(https://fonts.gstatic.com/s/notoseriftc/v7/XLY9IZb5bJNDGYxLBibeHZ0BvvMpbX8.otf) format('opentype');
}
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  background-image: url('/wp-content/themes/cex/img/common/bg-ex.png?p_1');
  background-position: left top;
  z-index: 1031;
}
.loading .loading-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}
.loading .loading-wrap .steam-wrap {
  display: block;
  width: 100%;
  height: 50%;
  text-align: center;
}
.loading .loading-wrap .steam-wrap .steam {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 160px;
  height: 400px;
  z-index: 2;
  margin-left: -80px;
  margin-top: 0px;
  overflow: hidden;
  -webkit-animation: steam_Move 12s infinite linear;
  animation: steam_Move 12s infinite linear;
  transition: all 1s;
}
.loading .loading-wrap .steam-wrap .steam img {
  width: 100%;
  height: 100%;
}
.loading .loading-wrap .steam-wrap .move {
  z-index: 3;
  position: absolute;
  top: 0%;
  left: 50%;
  width: 160px;
  height: 400px;
  z-index: 2;
  margin-left: -80px;
  margin-top: 0px;
  overflow: hidden;
  -webkit-animation: steam_Move 12s infinite linear;
  animation: steam_Move 12s infinite linear;
  transition: all 1s;
}
.loading .loading-wrap .steam-wrap .move img {
  width: 100%;
  height: 100%;
}
.loading .loading-wrap .steam-wrap .steam2 {
  display: none;
}
@keyframes steam_Move {
  0% {
    filter: blur(10px);
    transform: rotateY(0deg);
    transform: scale(1, 1);
    opacity: 0.1;
    top: 0%;
  }
  10% {
    filter: blur(10px);
    transform: rotateY(-10deg);
    transform: scale(1.2, 1);
    opacity: 0.3;
  }
  33% {
    transform: rotateY(40deg);
    transform: scale(0.6, 1.2);
    opacity: 0.75;
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1.2, 0.4);
  }
  100% {
    filter: blur(16px);
    transform: rotateY(50deg);
    transform: scaleY(1.4, 1.2);
    opacity: 0;
    top: -20%;
  }
}
.loading .loading-wrap .coffee {
  width: 100%;
  height: 50%;
  text-align: center;
}
.loading .loading-wrap .coffee img {
  width: 100px;
  height: 100px;
}
@media (max-height: 550px) {
  @keyframes steam_Move {
    0% {
      filter: blur(10px);
      transform: rotateY(0deg);
      transform: scale(1, 1);
      opacity: 0.1;
      top: -30%;
    }
    10% {
      filter: blur(10px);
      transform: rotateY(-10deg);
      transform: scale(1.2, 1);
      opacity: 0.3;
    }
    33% {
      transform: rotateY(40deg);
      transform: scale(0.6, 1.2);
      opacity: 0.75;
    }
    66% {
      transform: rotateY(2deg);
      transform: scaleY(1.2, 0.4);
    }
    100% {
      filter: blur(16px);
      transform: rotateY(50deg);
      transform: scaleY(1.4, 1.2);
      opacity: 0;
      top: -80%;
    }
  }
}
.loading-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}
.loading-wrap .star-wrap {
  display: block;
  width: 100%;
  height: 100vh;
  text-align: center;
}
.loading-wrap .star-wrap .star-base {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  z-index: 2;
  margin-top: -150px;
  margin-left: -150px;
  overflow: hidden;
}
.loading-wrap .star-wrap .star-base img {
  width: 100%;
  height: 100%;
}
.loading-wrap .star-wrap .star-front {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  z-index: 5;
  margin-top: -150px;
  margin-left: -150px;
  overflow: hidden;
}
.loading-wrap .star-wrap .star-front img {
  width: 100%;
  height: 100%;
}
.blinking {
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  -moz-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
.photo-blur {
  filter: blur(10px);
  animation-name: blur;
  animation-duration: 2s;
}
@keyframes blur {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}
.hero {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #333;
}
.hero .hero-top {
  position: relative;
  display: block;
  width: 100%;
  height: 80vh;
}
.hero .hero-top h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: 1766px;
}
.hero .hero-top h1 img.logo-main {
  width: 100%;
  height: auto;
}
.hero .hero-top .logo-shadow {
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
  height: 85%;
  text-align: center;
}
.hero .hero-top .logo-shadow img {
  width: auto;
  height: 100%;
}
.hero .hero-top .award-m {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.hero .hero-top .award-m img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.hero .hero-top02 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.hero .hero-top02 h1.hero-img {
  position: relative;
  top: 0;
  left: 0;
  margin: 0 !important;
}
.hero .hero-top02 .award-m {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
}
.hero .hero-top02 .award-m img {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
}
.hero .hero-top02 .award-area {
  position: absolute;
  bottom: 2%;
  right: 3%;
  width: 45%;
}
.hero .hero-top02 .award-area .award-item {
  display: inline-block;
  width: 50%;
  height: auto;
  padding: 0;
  float: left;
  padding: 0 10px 5px;
}
.hero .hero-top02 .award-area .award-item img {
  width: 100%;
  height: auto;
}
.hero .hero-top02 .bnr-area {
  position: absolute;
  top: 1%;
  right: 3%;
  width: 18%;
}
.hero .hero-top02 .bnr-area .bnr-item {
  display: inline-block;
  width: 100%;
  height: auto;
  padding: 0;
  float: left;
  padding: 0 10px 10px;
}
.hero .hero-top02 .bnr-area .bnr-item img {
  width: 100%;
  height: auto;
}
.hero .hero-top02 .bnr-circle-left {
  position: absolute;
  bottom: 1%;
  left: 1%;
  width: 18%;
}
.hero .hero-top02 .bnr-circle-left .bnr-item {
  display: inline-block;
  width: 100%;
  height: auto;
  padding: 0;
  float: left;
  padding: 0 10px 10px;
}
.hero .hero-top02 .bnr-circle-left .bnr-item img {
  width: 100%;
  height: auto;
}
.hero .hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20vh;
}
.hero .hero-bottom p.billing {
  background-color: #fff;
  margin: 0;
  width: 100%;
  height: 100%;
}
.hero .hero-bottom p.billing img {
  width: auto;
  height: 100%;
  max-width: 100%;
}
.hero-sp {
  position: relative;
  display: block;
  width: 100%;
}
.hero-sp .hero-top {
  position: relative;
  display: block;
  width: 100%;
  height: 90%;
  background-image: url('/wp-content/themes/cex/img/sp/home/bg-hero.jpg?p_1');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.hero-sp .hero-top h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  text-align: center;
  margin: 0;
}
.hero-sp .hero-top h1 img.logo-main {
  width: auto;
  height: 95%;
  max-width: 100%;
  max-height: auto;
}
.hero-sp .hero-top .logo-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  text-align: center;
}
.hero-sp .hero-top .logo-shadow img {
  width: auto;
  height: 95%;
  max-width: 100%;
  max-height: auto !important;
}
.hero-sp .hero-top .catch-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 80%;
  text-align: right;
}
.hero-sp .hero-top .catch-img img {
  width: auto;
  height: 90%;
  max-width: 100%;
  max-height: auto !important;
}
.hero-sp .hero-top .catch-shadow {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 80%;
  text-align: center;
}
.hero-sp .hero-top .catch-shadow img {
  width: auto;
  height: 90%;
  max-width: 100%;
  max-height: auto !important;
}
.hero-sp .hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
}
.hero-sp .hero-bottom p.billing {
  background-color: #fff;
  margin: 0;
  width: 100%;
  height: 100%;
}
.hero-sp .hero-bottom p.billing img {
  width: auto;
  height: 100%;
  max-width: 100%;
}
@media (max-width: 242px) {
  .hero-sp .hero-top h1 {
    bottom: 10%;
  }
  .hero-sp .hero-top h1 img.logo-main {
    width: 100%;
    height: auto !important;
  }
  .hero-sp .hero-top .logo-shadow {
    bottom: 10%;
  }
  .hero-sp .hero-top .logo-shadow img {
    width: 100%;
    height: auto !important;
  }
  .hero-sp .hero-top .catch-img img,
  .hero-sp .hero-top .catch-shadow img {
    width: 100%;
    height: auto !important;
  }
}
@media (max-width: 400px) {
  .hero-sp .hero-top h1 {
    bottom: 10%;
  }
  .hero-sp .hero-top h1 img.logo-main {
    width: 100%;
    height: auto;
    max-width: auto;
    max-height: 100%;
  }
  .hero-sp .hero-top .logo-shadow {
    bottom: 10%;
  }
  .hero-sp .hero-top .logo-shadow img {
    width: 100%;
    height: auto;
    min-width: auto !important;
    max-height: 100%;
  }
  .hero-sp .hero-top .catch-img img,
  .hero-sp .hero-top .catch-shadow img {
    width: 100%;
    height: auto;
    min-width: auto !important;
    max-height: 100%;
  }
}
@media (max-height: 600px) {
  .hero-sp .hero-top h1 {
    bottom: 10%;
  }
  .hero-sp .hero-top h1 img.logo-main {
    width: auto;
    height: 100%;
  }
  .hero-sp .hero-top .logo-shadow {
    bottom: 10%;
  }
  .hero-sp .hero-top .logo-shadow img {
    width: auto;
    height: 100%;
  }
  .hero-sp .hero-top .catch-img img,
  .hero-sp .hero-top .catch-shadow img {
    width: 100%;
    height: auto;
  }
}
@media (min-width: 437px) and (min-height: 1023px) {
  .hero-sp .hero-top h1 {
    bottom: 10%;
  }
  .hero-sp .hero-top h1 img.logo-main {
    width: 100%;
    height: auto;
  }
  .hero-sp .hero-top .logo-shadow {
    bottom: 10%;
  }
  .hero-sp .hero-top .logo-shadow img {
    width: 100%;
    height: auto;
  }
  .hero-sp .hero-top .catch-img img,
  .hero-sp .hero-top .catch-shadow img {
    width: 100%;
    height: auto;
  }
}
@media (min-width: 640px) and (min-height: 1023px) {
  .hero-sp .hero-top h1 {
    bottom: 10%;
  }
  .hero-sp .hero-top h1 img.logo-main {
    width: auto;
    height: 100%;
  }
  .hero-sp .hero-top .logo-shadow {
    bottom: 10%;
  }
  .hero-sp .hero-top .logo-shadow img {
    width: auto;
    height: 100%;
  }
  .hero-sp .hero-top .catch-img img,
  .hero-sp .hero-top .catch-shadow img {
    width: 100%;
    height: auto;
  }
}
.bg-about {
  background-image: url('/wp-content/themes/cex/img/home/bg-content.jpg?p_1');
  background-position: left top;
}
.about-img-padding-top {
  padding-top: 4px;
}
.bg-key {
  background-image: url('/wp-content/themes/cex/img/home/bg-hero-p2.jpg?p_1');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100vh;
}
.hero-text-img {
  position: absolute;
  top: 0;
  right: 0;
}
/* Slider */
.slider-inner {
  padding: 50px 0;
  background-size: cover;
  position: relative;
  z-index: 0;
  background-color: #fff;
  cursor: pointer;
}
.slider-inner-cover {
  position: absolute;
  bottom: 0;
  left: 0;
}
.slider1-wrap button {
  background-color: rgba(0, 0, 0, 0);
  background-size: 100% auto;
}
.slider1-wrap ul {
  padding: 0;
  margin: 0;
}
.slider1-wrap .slider1 {
  margin-left: -15px;
  margin-right: -15px;
}
.slider1-wrap .slider1 .slick-slide {
  padding-left: 15px;
  padding-right: 15px;
}
.slider1-wrap .slider1 .slick-slide a:hover {
  cursor: pointer !important;
}
.slider1-wrap .slider1 .slick-slide a .btn-play {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  z-index: 99;
}
.slider1-wrap h3 {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.slider1-wrap img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 45%;
  display: block;
  width: 40px;
  height: 40px;
  margin-top: 0px;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  z-index: 1;
}
.slick-prev {
  left: -50px;
  background-image: url('/wp-content/themes/cex/img/home/arrow-left.svg');
  background-repeat: no-repeat;
  background-position: left top;
}
.slick-next {
  right: -50px;
  background-image: url('/wp-content/themes/cex/img/home/arrow-right.svg');
  background-repeat: no-repeat;
  background-position: left top;
}
/* Dots */
.slider1-wrap .slick-dots {
  position: absolute;
  bottom: 17px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slider1-wrap .slick-dots li button:before {
  font-size: 20px !important;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  content: '\f0c8';
  font: normal normal normal 14px/1 FontAwesome;
  text-align: center;
  color: #0c131e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 999;
}
.slick-dots li.slick-active button:before {
  color: #333;
}
@media (max-width: 480px) {
  .slider1-wrap {
    margin-left: -60px;
  }
}
#lightcase-overlay {
  background-color: #0c131e !important;
}
.bg-award {
  background-color: #f8f8f8;
}