@charset "utf-8";
/* CSS Document */

/*基本*/
body {
  margin: 0;
  padding: 0;
}

/*全BOX版面*/
.WRAPPER {
  z-index: 0;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: 100%;
  min-width: 1220px;
  background: #fae2ec;
  text-align: left;
  font-family: "Century Gothic", "Microsoft JhengHei", "微軟正黑體", Arial,
    sans-serif;
  height: auto;
  min-height: 100vh;
}
.WRAPPER img {
  border: 0px;
  vertical-align: top;
}
.WRAPPER a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/*預設清單樣式*/
.Area .list_00 ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.Area .list_00 li {
  list-style: none;
  float: left;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .WRAPPER {
    padding-bottom: 0px;
    min-width: inherit;
    min-height: 100vh;
    overflow: hidden;
  }
  .WRAPPER img {
    width: 100%;
    height: auto;
  }
}

.Area.Area_bottom {
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .Area.Area_bottom {
    margin-bottom: 0vw;
  }
}

/*fixed背景*/
.bg_01 {
  z-index: 0;
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center top;
  pointer-events: none;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .m_bg01 {
    z-index: 0;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    pointer-events: none;
    background-size: 100%;
  }
}

/*版頭背景*/
.Area_bgtop {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: 2000px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}
.Area_bgtop .bgtop_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1500px;
}
.Area_bgtop .bgtop_ span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center top;
}

@media screen and (min-width: 768px) {
  .Area_bgtop span {
    background-repeat: no-repeat;
  }
  .Area_title .date {
    z-index: 4;
    position: absolute;
    top: 20px;
    left: 929px;
  }
  .Area_title .comingsoon {
    z-index: 12;
    position: absolute;
    top: 360px;
    left: 84px;
  }
}
@media screen and (max-width: 767px) {
  .Area_title .comingsoon {
    z-index: 12;
    position: absolute;
    top: 32vw;
    left: 7vw;
    width: 32vw;
  }
  .Area_title .date {
    z-index: 4;
    position: absolute;
    top: 3.5vw;
    left: 81vw;
    width: 20.5%;
  }
}

.m_Area_bgtop {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.m_Area_bgtop .m_bgtop_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.m_Area_bgtop .m_bgtop_ span {
  position: absolute;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background-position: center top;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .m_Area_bgtop span {
    background-repeat: no-repeat;
  }
  .m_Area_bgtop_fixed {
    position: fixed;
    top: 0px;
  } /*搭配js-appBgFixed*/
}

/*版頭*/

@media screen and (min-width: 768px) {
  .Area_title {
    height: 474px;
    box-sizing: border-box;
  }
  .Area_title .title01 {
    z-index: 0;
    position: relative;
    right: 0;
  }

  /*版頭品輪播*/
  .Area_title .topPD {
    position: absolute;
    top: 0px;
    right: -130px;
    width: 100%;
  }
  .Area_title .topPD ul.PD_wrapper {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: content-box;
    grid-gap: inherit;
  }
  .Area_title .topPD ul.PD_wrapper li {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate(5%, 0);
  }
  .Area_title .topPD ul.PD_wrapper li.swiper-slide-active {
    opacity: 1;
    transition: 0.8s ease-out;
    transform: translate(0, 0);
  }
  .Area_title .topPD .PD_layout .PD_img {
    width: 100%;
    position: absolute;
    right: 238px;
  }
  .Area_title .PD_wrapper {
    background-color: rgba(255, 255, 255, 0);
  }
  .Area_title .PD_layout[data-pd-li*="BN"] li {
    border: rgba(255, 255, 255, 0);
  }
}

@media screen and (max-width: 767px) {
  .Area_title {
    height: 50vw;
  }
  .Area_title .title01 {
    z-index: 0;
    position: relative;
    width:75%;
    right: -28vw;
    top: 5vw;
  }
  /*版頭品輪播*/
  .Area_title .topPD {
    position: absolute;
    top: 0;
    right: 13vw;
    width: 91%;
  }
  .Area_title .topPD ul.PD_wrapper {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 80%;
    box-sizing: content-box;
    grid-gap: inherit;
  }
  .Area_title .topPD ul.PD_wrapper li {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate(5%, 0);
  }
  .Area_title .topPD ul.PD_wrapper li.swiper-slide-active {
    opacity: 1;
    transition: 0.8s ease-out;
    transform: translate(0, 0);
  }
  .Area_title .PD_wrapper {
    background-color: rgba(255, 255, 255, 0);
  }
  .Area_title .PD_layout[data-pd-li*="BN"] li {
    border: rgba(255, 255, 255, 0);
  }
}

/*提醒我按鈕*/
a.mo_remind_btn {
  z-index: 9999;
  position: absolute !important;
  right: 0;
  top: 62vw;
  width: 17%;
}

/*標題*/
@media screen and (min-width: 768px) {
  .Area_activ .title {
    padding: 0;
    margin-bottom: 30px;
  }
  .title {
    padding: 0 0 40px;
  }
}
@media screen and (max-width: 767px) {
  .Area_activ .title {
    margin-bottom: -1vw;
  }
  .title {
    margin: 0 auto 4vw;
  }
}

/*主打區*/
.Area_strategy .box {
  display: flex;
  gap: 16px;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .Area.Area_strategy {
    margin-top: 80px;
  }
  .Area_strategy .Area01 {
    position: relative;
    width: 80%;
    left: 130px;
  }
  .Area_strategy .btn_.btn_more {
    z-index: 5;
    position: absolute;
    top: 275px;
    left: 140px;
  }
  li {
    list-style: none;
  }
}
@media screen and (max-width: 767px) {
  .Area.Area_strategy {
    margin-top: 16vw;
  }
  .Area_strategy .box {
    width: 96%;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  .Area_strategy .Area01 {
    margin-top: 0;
    margin-left: 2vw;
    width: 96%;
  }
  .Area_strategy .btn_.btn_more {
    z-index: 5;
    position: absolute;
    top: 28vw;
    left: 0;
    background-size: 100%;
    width: 100%;
  }
  li {
    list-style: none;
  }
}

/*限時加碼*/
.Area.Area_style {
  margin-top: 31px;
}
.Area_style .box_main {
  /* margin-bottom: 5px; */
}
@media screen and (max-width: 767px) {
  .Area.Area_style {
    margin-top:0;
  }
  .Area_style .box_main {
    margin-bottom: 0;
  }}
	
/*Area02*/
.Area.Area_style2 {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .Area.Area_style2 {
  margin-top:11vw;
}
  .Area_style2 .box_main {
    margin-bottom: 0vw;width: 96%;left:2vw;
  }}


/*Area03*/
.Area03{ height: 450px; }
.Areabg{  position: absolute;padding: 25px 0;}
.Area03_bg{ left: 0; top:0;width: 100%; }
.Area03 .btnWrap{ display: flex; flex-direction: column; position: relative; top:50px;}
@media screen and (max-width:767px){
	.Area03{ height:50vw; }
	.Area03_bg{ left:2vw; top:0vw;width: 96%; }
	.Area03 .btnWrap{ top:9.5vw;width: 96%;left:2vw; }
}

	
	

.Area_style .cta {
  position: absolute;
  left: 27%;
  z-index: 6;
  bottom: -41px;
}
.Area_style .more {
  margin: 63px 0 13px 0;
}
@media screen and (max-width: 767px) {
  .Area_style .box {
    margin: 0 auto;
    width: 96%;
  }
  .Area_style .cta {
    bottom: -5vw;
    width: 48vw;
    left: 26vw;
  }
  .Area_style .more {
    margin: 11vw auto 0vw auto;
    width: 30vw;
  }
}


/*取消公版白底*/
.remove .PD_wrapper {
  background-color: unset;
  padding: 0;
}
.remove .PD_layout[data-pd-li*="BN"] li {
  border: none;
}
@media screen and (max-width: 767px) {
  .remove .PD_wrapper {
    background-color: unset;
  }
  .remove .PD_layout[data-pd-li*="BN"] li {
    border: none;
  }
}

/* 注意事項 */
.agreeArea .itembox {
  flex-direction: column;
}

#agree_more .agreeArea .itembox .itembox_box,
#agree_more .agreeArea .itembox .item-information {
  padding: 1em;
}

/*顏色控制*/
.spcolor {
  color: #ef3d85!important;
}
.agreeArea .box h3 {
  background-color: #ef3d85!important;
}

/*區塊_all*/
.Area2000 {
  margin: 0 auto;
  width: 2000px;
}
.Area1220 {
  margin: 0 auto;
  width: 1220px;
}
.Area960 {
  margin: 0 auto;
  width: 960px;
}
.Area {
  position: relative;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  text-align: center;
}
.Area a {
  position: relative;
  display: block;
}
@media screen and (max-width: 767px) {
  .Area1220 {
    width: 100%;
  }
  .Area960 {
    width: 100%;
  }
  .Area .go_bt:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

/*置底*/
.fixbn a {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
} /* 兼容 iOS >= 11.2 */
.fixbn {
  position: fixed;
  background-size: 100%;
  bottom: 0;
  display: block;
  z-index: 30;
}
.fixbn ul li {
  float: left;
  padding: 0;
  list-style-type: none;
  width: 50vw;
}
.fixbn ul li img {
  width: 100%;
  margin: 0 auto;
}

.fixbn ul {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0px;
}

/*分享浮層*/
.floatBox {
  position: relative;
  margin: 2% auto;
  padding: 2% 0;
  width: 700px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  border-radius: 20px;
}
.floatBox img {
  width: 100%;
  height: auto;
}
.floatBox .go_bt {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.floatBox .go_bt:hover {
  filter: brightness(120%);
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.floatBox .closeButton a {
  display: block;
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 2px #999999;
  font: bold 40px/1em "Century Gothic";
  color: #fff;
  text-align: center;
  background-color: rgba(0%, 0%, 0%, 0.5);
  text-decoration: none;
  z-index: 2;
}
.floatBox .closeButton:hover {
  background-color: #666;
  text-decoration: none;
}
.floatBox .title {
  display: inline-block;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #ffd800;
  font: bold 45px/1.5em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: -0.05em;
  color: #ffd800;
  text-align: center;
}
.floatBox .box_ {
  margin: 0 auto;
  width: 90%;
}
.floatBox .box_:after {
  content: "";
  display: block;
  clear: both;
}
.floatBox .box_btn {
  margin: 20px auto 0;
  width: 80%;
}
.floatBox .box_btn a {
  display: block;
  margin: 3% 0;
}
.floatBox .box_btn img {
  width: 100%;
}
.floatBox .box_btn .btn {
  margin: 0 auto;
  width: 60%;
}
.floatBox .box_btn2 a {
  float: left;
  margin: 0 1%;
  width: 48%;
}
@media screen and (max-width: 767px) {
  .floatBox {
    padding: 5% 0;
    width: 90%;
    height: auto;
  }
  .floatBox .closeButton a {
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 2px #999999;
    font: bold 30px/1em "Century Gothic";
    color: #fff;
    text-align: center;
    background-color: rgba(0%, 0%, 0%, 0.5);
    text-decoration: none;
    z-index: 2;
  }
  .floatBox .closeButton:hover {
    background-color: #666;
    text-decoration: none;
  }
  .floatBox .title {
    margin: 0 5% 3vw;
    font-size: 6vw;
    line-height: 2rem;
  }
  .floatBox .box_btn {
    margin: 2% auto 0;
  }
  .floatBox .box_btn .btn {
    margin: 0 auto;
    width: 80%;
  }
}

/*注意事項區*/
.edm_notice{ text-align:center; padding:10px 10px 15px 10px; color:#000; font:12px/18px Helvetica;position: relative;z-index: 2;}
.edm_notice .apple_notice{  padding:10px 0px 10px 0px; }


/*隱鑶*/
.for_pc {
}
.for_phone {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .for_pc {
    display: none !important;
  }
  .for_phone {
    display: block !important;
  }
}