@charset "UTF-8";

/* ================================================
- Basic
================================================ */

body {
  color: #333;
  font: 13px/1.6em "Century Gothic", Arial, "Microsoft JhengHei", "蘋果儷中黑",
    "儷黑 Pro", "新細明體", "sans-serif";
  /* background: url("../images/kv_bg.jpg") top center no-repeat, url("../images/bg.jpg") top center repeat-y currentColor; */ /* background-color: currentColor; */
  background-color: transparent;
  /* min-width: 1200px; */
}
body.overlay {
  height: 100vh;
  overflow: hidden;
}
a {
  display: block;
  text-decoration: none;
}
:focus {
  outline: none;
}
i {
  font-style: normal;
}
.hide {
  display: none !important;
}
.hd_pc {
  /* max-width: 1200px; */
  width: 100%;
}
.hd_m {
  display: none;
}
.pc_mode {
  display: block;
}
.m_mode {
  display: none;
}
.M_menu_wrap {
  display: none;
}
.display_pc {
  display: block;
}
.display_m {
  display: none;
}

.wrapper {
  background-color: #5b3e80;
  width: 100%;
  height: auto;
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: hidden;
}

.all_bg_move {
  display: none;
  width: 2000px;
  height: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
  /* position */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.all_bg_move:before {
  content: " ";
  display: block;
  background: url("../images/bg_move_right.png") no-repeat center left;
  width: 23%;
  height: 100vh;
  margin: auto;
  /* position */
  position: absolute;
  top: 0; /* bottom: 0; */
  right: 0; /* left: 77%; */
  /* z-index: 3; */
}
.all_bg_move:after {
  content: " ";
  display: block;
  background: url("../images/bg_move_left.png") no-repeat center right;
  width: 21%;
  height: 100vh;
  margin: auto;
  /* position */
  position: absolute;
  top: 0; /* bottom: 0; */
  /* right: 79%; */
  left: 0;
  /* z-index: 3; */
}

.header {
  display: none;
}

.main {
  background: none !important;
  width: 100%;
  margin: auto;
  overflow: initial !important;
  overflow-y: initial !important;
  overflow-x: initial !important;
}

.float-wrapper {
  display: none;
  text-align: center;
  width: 5.8em;
  height: 5.8em;
  /* position */
  position: fixed;
  right: 0;
  bottom: 15%;
  z-index: 99;
}
.float-wrapper a {
  color: white;
  font-size: 1em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #5b3e80;
  width: 3.5em;
  height: 3.5em;
  margin: 0 auto 10px;
  box-shadow: 0 0 6px 0px rgb(0 0 0 / 65%);
}
.float-wrapper .home {
  display: none;
  background-color: #e08c47;
  width: 5.8em;
  height: 5.8em;
  border-radius: 100%;
}
.float-wrapper .go_top {
  background-color: rgb(136 136 136 / 80%);
  border-radius: 0.5em;
  box-shadow: 0 0 6px 0px rgb(0 0 0 / 30%);
}

/* ================================================
- 主視覺 kv
================================================ */

.kv_wrapper {
  background: url("../images/bg_kv.jpg") no-repeat center top,
    url("../images/bg.jpg") repeat-y center top;
  background-color: #5b3e80;
   height: 640px; 
/*  height: 710px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.kv_container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.kv_logo {
  box-sizing: border-box;
  background-color: white;
  width: 220px;
  padding: 10px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 1px 5px rgb(0 0 0 / 50%), inset 0 1px 5px rgb(0 0 0 / 20%);
  /* position */
  position: absolute;
  top: 0;
  left: 0;
}
.kv_logo img {
  width: 100%;
}
.kv_logo.fixed {
  background: transparent;
  padding: 0;
  margin-top: 5px;
  border-radius: 0;
  box-shadow: none;
  /* position */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.kv_logo.fixed img {
  height: 60px;
}
/*主標題*/
.kv_slogan {
  text-align: center;
  padding-top: 40px;
}
.kv_slogan img {
  max-width: 100%;
}
/*體驗會員*/
.mgm_wrapper {
  display: flex;
  justify-content: center;
  position: relative;
}
.bn_mgm {
  width: 620px;
  padding-right: 12%;
}
.btn_mgmRule {
  position: absolute;
  z-index: 1;
  width: 15%;
  padding-bottom: 5%;
  right: 7%;
  bottom: 25%;
  cursor: pointer;
}
.btn_mgmGO {
  position: absolute;
  z-index: 1;
  width: 63.5%;
  padding-bottom: 12.3%;
  left: 20%;
  top: 23.2%;
  cursor: pointer;
  background: url("../images/btn_mgmGO.png") no-repeat right;
  background-size: contain;
  transition: 0.2s linear;
}
.btn_mgmGO {
	animation-name: bounce;
	animation-duration: 1.6s;
	animation-timing-function: ease;
	transform-origin: 50% 100%;
	animation-iteration-count:infinite;
}
@media (hover: hover) {
  .btn_mgmGO:hover {
    transform: translateY(-5px);
    filter: brightness(1.2);
  }
}
/*overlay*/
.overlay_wrapper {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.overlay .overlay_wrapper {
  display: flex;
}
.ruleMgm_modal {
  padding: 0 1.2em;
  background: #fff;
  border-radius: 1em;
  width: 80%;
  max-width: 500px;
  font-size: 2em;
  line-height: 1.6;
  font-weight: 700;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  position: relative;
}
.ruleMgm_modal img {
  width: 100%;
  margin-top: -2.5em;
}
.ruleMgm_modal .btn_mgmGO {
  position: relative;
  left: inherit;
  bottom: inherit;
  margin: auto;
  width: 60%;
  padding-bottom: 17%;
}
.ruleMgm_modal .btn_close {
  position: absolute;
  margin-top: -1.5em;
  cursor: pointer;
}
.overlay_mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
}
/*計數器*/
.countdown_wrapper {
  color: white;
  background: url("../images/countdown.png") no-repeat center;
  background-size: 100% 100%;
  max-width: 520px;
  padding: 1.582rem 1.2rem;
  margin-top: -3.6rem;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease-in-out;
}
.countdown {
  color: currentColor;
  font-size: 2rem;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 1rem auto;
}
.countdown .numbers {
  font-size: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.countdown_unit {
  color: #fff;
  font-size: 2rem;
  min-width: 2.6rem;
  padding: 0 0.1em;
  margin-right: 0.4rem;
  height: 2.6rem;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
}
#dhour:after {
  content: "時";
  font-size: 0.85rem;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
}
#dmin:after {
  content: "分";
  font-size: 0.85rem;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
}
#dsec:after {
  content: "秒";
  font-size: 0.85rem;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
}
#count2 {
  margin: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown_wrapper.fixed {
  color: #000;
  max-width: inherit;
  margin: 0;
  padding: 0.3em 0;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.8);
  background-image: none;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  /* position */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
/* .countdown_wrapper.fixed .home { display: block; float: right; } */
.countdown_wrapper.fixed .countdown {
  float: right;
  margin: 0;
  transform: scale(0.8) translate(10%, 0);
}
/* 回首頁 */
.home {
  display: none;
  text-align: center;
}
.home span {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.home a/*, .home img, .home span*/ {
  display: block;
  width: 100%;
}
.home span i {
  margin-bottom: 5px;
}
.home span i + b {
  padding-left: 0;
}
.icon-home::before {
  content: " ";
  display: block; /*background: url("../images/home.svg") no-repeat center; background-size: contain;*/
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: url("../images/home.svg");
  -webkit-mask-image: url("../images/home.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background-blend-mode: screen, normal;
}

/*錨點 float **/
.Nav {
  /* background: #f3f3f8; */
  /* background-color: rgb(243 243 248 / 92%); */
}
.NavArea {
  /* display: none; */
  max-width: 1050px;
  margin: auto;
}
.Nav-slide.active {
  /* color: #fff; */
  /* background: #b3afd8; */
  /* text-shadow: #000 0 0 1em; */
}
.NavArea.fixed {
  margin: auto;
  /* position */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.NavArea.fixed .Nav-wrapper {
  flex-wrap: initial;
  /* width: 80%; */
  height: 70px;
}
.NavArea.fixed .Nav-wrapper li img {
  display: none;
}
.NavArea.fixed .Nav-wrapper li b {
  display: block;
}
.NavArea.fixed .home {
  display: block;
}

.gotop {
  background: rgba(0, 0, 0, 0.7);
  color: #1c2147;
  font-size: 22px;
  line-height: 60px;
  text-align: center;
  height: 60px;
  position: fixed;
  left: calc(50% + 620px);
  width: 60px;
  border-radius: 30px;
  bottom: 250px;
  z-index: 900;
  display: none;
  cursor: pointer;
}
.go_top {
  /* display: block; */
  display: none;
  cursor: pointer;
}

.float_tit {
  display: none;
  text-align: center;
  width: 94%;
  margin: auto;
}
.float_tit img {
  width: 100%;
  max-width: 100%;
}

.float_main {
  width: 138px;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.Nav-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
}

.Nav-wrapper li {
  font-size: 1.5em;
  line-height: 1em;
  text-align: center;
  /* background: transparent; */
  /* background: #e8ecfe; */
  /* background: rgb(232 236 254 / 92%); */
  margin: auto;
  /* border-bottom: 1px solid #fff; */
  position: relative;
}

.Nav-wrapper li.highlight0 {
  color: #1c2147;
  font-size: 1.3em;
  line-height: 1.2em;
  font-weight: bold;
  border-radius: 20px 0 0 0;
  padding-top: 20px;
  padding-left: 2px;
}

.Nav-wrapper li.highlight1 {
  padding-left: 2px;
}

.Nav-wrapper li.highlight2 {
  font-size: 24px;
  border-radius: 10px 10px 20px 20px;
  padding-bottom: 20px;
  padding-left: 2px;
}
.Nav-wrapper li.go_top:before {
  content: " ";
  display: block;
  background: url("../images/float_bottom.png");
  position: absolute;
  width: 126px;
  height: 116px;
  bottom: -85px;
  right: -20px;
  z-index: 251;
}

.Nav-wrapper li.Nav-slide {
}

.Nav-wrapper li.Nav-slide img {
  width: 100%;
  max-width: 100%;
}

.Nav-wrapper li a {
  color: #1c2147;
  font-weight: bold;
  line-height: 2em;
  display: block;
  width: 100%;
  padding: 2px 0;
  position: relative;
  z-index: 500;
  cursor: pointer;
}

.Nav-wrapper li a:hover,
.Nav-wrapper li a:focus,
.Nav-wrapper li a:active {
  color: #1c2147;
  /* text-shadow: #1c2147 0 0 1em; */
}

.Nav-wrapper li b {
  color: #1c2147;
  display: none;
  text-align: center;
  margin: 0 auto 3px;
  padding: 3px 8px;
  border-radius: 10px;
}

.Nav-wrapper li:after {
  display: none;
  background: transparent;
  /* box-shadow: transparent 0 0 1em; */
  height: 2px;
  position: absolute;
  right: 51%;
  left: 51%;
  bottom: 0;
  z-index: 1;
  content: "";
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: left, right;
  transition-property: left, right;
}

.Nav-wrapper li:hover:after,
.type_leftmenu li:focus:after,
.type_leftmenu li:active:after,
.type_leftmenu li.active:after,
.type_leftmenu li.Nav-slide.active:after {
  right: 10%;
  left: 10%;
}

.Nav-wrapper li:hover,
.type_leftmenu li:focus,
.type_leftmenu li:active,
.type_leftmenu li.active,
.type_leftmenu li.Nav-slide.active {
  transform: translateY(-5px);
}

.Nav-wrapper li.highlight0:after {
  background: transparent;
}

@media screen and (max-width: 1440px) {
  /* fixed */
  /*錨點 float **/
  .NavArea.fixed {
    max-width: calc(100% - 190px - 345px);
    margin-left: 190px;
    /* margin-right: 400px; */
  }
  .NavArea.fixed .Nav-wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 920px) {
  .float-wrapper .home {
    /*display: block;*/
    display: flex;
  }
  /* fixed */
  /*錨點 float **/
  .NavArea.fixed {
    background: rgba(85, 85, 85, 0.85);
    background: -moz-linear-gradient(
      0deg,
      rgba(85, 85, 85, 0.85) 0%,
      rgba(17, 17, 17, 0.85) 100%
    );
    background: -webkit-linear-gradient(
      0deg,
      rgba(85, 85, 85, 0.85) 0%,
      rgba(17, 17, 17, 0.85) 100%
    );
    background: linear-gradient(
      0deg,
      rgba(85, 85, 85, 0.85) 0%,
      rgba(17, 17, 17, 0.85) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0px -1px 1px #333;
    width: 100%;
    max-width: initial;
    margin-left: initial;
    margin-right: initial;
    /* position */
    top: initial;
    bottom: 0;
  }
  .NavArea.fixed .Nav-slide {
    width: 33%;
    height: 100%;
    padding: 0;
    border-top: 1px solid #999;
    border-right: 1px solid #666;
    border-left: 1px solid #222;
  }
  .NavArea.fixed .Nav-slide a,
  .NavArea.fixed .Nav-slide b {
    color: white;
  }
  .NavArea.fixed .Nav-slide a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .Nav-wrapper li:hover,
  .type_leftmenu li:focus,
  .type_leftmenu li:active,
  .type_leftmenu li.active,
  .type_leftmenu li.Nav-slide.active {
    transform: translateY(0);
  }
  .NavArea.fixed .home {
    display: none;
  }
  .NavArea.fixed .Nav-wrapper {
  }
}
@media screen and (max-width: 768px) {
  .kv_wrapper {
    height: 100vw;
    background-size: 291vw;
  }
  .kv_logo {
    width: 170px;
  }
  .kv_slogan {
    padding-top: 13vw;
  }
  /*錨點 float **/
  .NavArea {
  }
  .Nav-wrapper {
    width: 98%;
  }
  .Nav-wrapper li.Nav-slide {
    width: 45%;
  }
  /* fixed */
  /*錨點 float **/
  .NavArea.fixed {
  }
  .NavArea.fixed .Nav-wrapper {
    /* float: right; width: 70%; margin-right: 2%; */
  }
  .NavArea.fixed .Nav-wrapper li b {
    font-size: 13px;
    font-weight: normal;
  }
  .countdown_wrapper {
    margin-bottom: 1rem;
  }
  /*計數器*/
  .countdown_wrapper.fixed {
    /* height: 125px; */
  }
  .countdown_wrapper.fixed .countdown {
    /* float: none; margin-top: 55px; */
  }
}
@media screen and (max-width: 480px) {
  /*錨點 float **/
  .NavArea {
  }
  .Nav-wrapper {
    /* flex-wrap: wrap; */
  }
  .kv_logo.fixed {
    width: 125px;
  }
}

/* ================================================
- 商品區塊
================================================ */

.title_temp {
  max-width: 1200px;
  margin: auto;
}

.pro_temp {
  display: none;
}

.main_wrapper,
.prod_wrapper {
  position: relative;
}

.main_container,
.prod_container {
  position: relative;
  overflow: hidden;
}

.ProductList {
  margin: auto;
  position: relative;
}

.group-district {
}
.group-district-01 {
  background: url("../images/bg.jpg") repeat-y center top #5b3e80; /*background-size: contain;*/ /*padding-top: 40px; padding-bottom: 40px;*/
}
.group-district-01 iframe {
}
.group-district-02 {
  background: url("../images/bg.jpg") repeat-y center top #5b3e80; /*background-size: contain;*/ /*padding-top: 40px; padding-bottom: 40px;*/
}
.group-district-02 iframe {
}
.group-district-03 {
  background: url("../images/bg2.jpg") repeat-y center top #000000; /*background-size: contain;*/ /*padding-top: 40px; padding-bottom: 40px;*/
}
.group-district-03 iframe {
}
.group-district-04 {
  background: url("../images/bg2.jpg") repeat-y center top #000000; /*background-size: contain;*/ /*padding-top: 40px; padding-bottom: 40px;*/
}
.group-district-04 iframe {
}

@import url("group-limited.css");
@import url("group-swiper.css");
@import url("group_tab.css");

/* ================================================
- Loading
================================================ */

.loading_container {
  background: url("../images/loading.gif") no-repeat center;
  background-color: #252525;
  background-size: 120px;
  border-radius: 20px;
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 5px;
  right: 5px;
  z-index: 12;
}

.group_01 .loading_container {
  background-image: url("../images/loading-white.gif");
  background-color: #f37b7b;
  background-size: 120px;
  bottom: -15px;
}
.group_02 .loading_container {
  background-image: url("../images/loading-white.gif");
  background-position-x: center;
  background-position-y: 80px;
  background-color: #b6b5f3;
  background-size: 120px;
  bottom: -15px;
}
.group_03 .loading_container,
.group_04 .loading_container {
  background-color: #252525;
}
.group_outlet .loading_container {
  background-color: #6a5a43;
}

/* ================================================
- 至適應
================================================ */

@media screen and (max-width: 1440px) {
  .all_bg_move {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  body {
    width: 100vw;
    min-width: inherit;
  }

  * {
    box-sizing: border-box;
  }
  .header {
    width: 100vw;
    /* position: fixed; */
    /* position: absolute; */
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .footer,
  .drift {
    display: none;
  }
  .hd_pc {
    display: none;
  }
  .hd_m {
    display: block;
  }
  .pc_mode {
    display: none;
  }
  .m_mode {
    display: block;
  }
  .display_m {
    display: block !important;
  }
  .display_pc {
    display: none !important;
  }
  .inline-block_m {
    display: inline-block !important;
  }

  .wrapper {
    /* background: url("../images/bg.jpg") top center repeat-y #fff6ec; */
    padding-bottom: 70px;
  }

  .main {
    /* background: url(../images/bg_all_m.jpg) top center repeat-y #fff6ec; background-size: 100%; */
  }

  .float-wrapper {
  }

  /** kv **/
}

@media screen and (max-width: 576px) {
  .kv_wrapper {
    height: 120vw;
    background-size: 360vw;
  }
  .kv_slogan {
    width: 88vw;
    margin: auto;
    padding-top: 20vw;
  }
  .bn_mgm {
    width: 98vw;
    padding-right: 8%;
  }
  .btn_mgmGO {
    top: 14.2%;
  }
  .btn_mgmRule {
    right: 12%;
  }
  .ruleMgm_modal {
    font-size: 1.6em;
  }
  .ruleMgm_modal img {
    width: 120%;
  }
  .ruleMgm_modal .btn_mgmGO {
    width: 81%;
    padding-bottom: 22%;
  }
  .ruleMgm_modal .btn_close {
    width: 7vw;
  }
  /*計數器*/
  .countdown_wrapper {
    max-width: 98vw;
    padding: 0.6rem 0.8rem;
    margin-top: -2.5em;
    margin-bottom: 0;
  }
  .countdown {
    font-size: 1.2rem;
    /* transform: scale(.75) translate(15%, 0); */
  }
  .countdown .numbers {
    font-size: 1.8rem;
  }
  .countdown_unit {
    font-size: 1.6rem;
  }
  #count2 {
    font-size: 1em;
    margin: 0 0.4em 0 0;
  }
}

@media screen and (max-width: 480px) {
  .all_bg_move {
    display: none;
  }
}

@media screen and (max-width: 320px) {
}