@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

@media screen and (max-width: 640px) {
  html {
    font-size: 8px;
  }
}

body {
  width: 100%;
  font-size: 1.6rem;
  background-color: #fce0ed;
  font-family: Arial, 'Noto Sans TC', '微軟正黑體', sans-serif;
  font-weight: 400;
}

a {
  display: inline-block;
  text-decoration: none;
}

span {
  display: inline-block;
}

img {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.container {
  max-width: 80rem;
  width: 100%;
  min-height: 100vh;
  margin: 136px auto 0;
  overflow: hidden;
}

@media (max-width: 800px) {
  .container {
    margin: calc(136 / 800 * 100%) auto 0;
  }
}

.top-btn {
  max-width: 80rem;
  width: 100%;
  margin: auto;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffd7da;
  /* align-items: stretch; */
}

.top-btn li {
  width: calc(200 / 800 * 100%);
  height: 0;
  padding-bottom: calc(136 / 800 * 100%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
}

.top-btn a {
  width: 100%;
  height: 0;
  padding-bottom: 68%;
}

.top-btn li:nth-child(1) {
  background-image: url(/images/anniversary2023_annual/top_btn_1.jpg?v=1);
}

.top-btn li:nth-child(2) {
  background-image: url(/images/anniversary2023_annual/top_btn_2.jpg?v=1);
}

.top-btn li:nth-child(3) {
  background-image: url(/images/anniversary2023_annual/top_btn_3.jpg?v=1);
}

.top-btn li:nth-child(4) {
  background-image: url(/images/anniversary2023_annual/top_btn_4.jpg?v=1);
}

.top-btn li:nth-child(1).active,
.top-btn li:nth-child(2).active,
.top-btn li:nth-child(3).active,
.top-btn li:nth-child(4).active {
  background-position: bottom center;
}

/* -------------------------------------------------------------- */
/* 首頁 */
/* .section-top {
} */

/* -------------------------------------------------------------- */
/* 最強新品 */
.section-clx .main-1,
.section-clx .main-2,
.section-clx .main-3 {
  position: relative;
}

.section-clx a,
.section-tiu a {
  width: calc(184 / 800 * 100%);
  height: 0;
  padding-bottom: calc(43 / 800 * 100%);
  background-image: url(/images/anniversary2023_annual/clx_btn.png?v=1);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  position: absolute;
}

.section-clx .main-1 a {
  bottom: 18.2%;
  right: 6.9%;
}

.section-clx .main-2 a {
  bottom: 22.9%;
  right: 6.9%;
}

.section-clx .main-3 a {
  bottom: 14.4%;
  left: 7.2%;
}

/* -------------------------------------------------------------- */
/* #GNRN */
.section-GNRN .main-1,
.section-GNRN .main-2 {
  position: relative;
}

.section-GNRN a {
  width: calc(153 / 800 * 100%);
  height: 0;
  padding-bottom: calc(40 / 800 * 100%);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  position: absolute;
}

.section-GNRN a.detail-btn {
  background-image: url(/images/anniversary2023_annual/GNRN_btn_1.png?v=1);
}

.section-GNRN a.try-btn {
  background-image: url(/images/anniversary2023_annual/GNRN_btn_2.png?v=1);
}

.section-GNRN .main-1 a:nth-of-type(1) {
  top: 60.7%;
  left: 9.7%;
}

.section-GNRN .main-1 a:nth-of-type(2) {
  top: 43.9%;
  left: 32%;
}

.section-GNRN .main-1 a:nth-of-type(3) {
  top: 39.6%;
  left: 66.6%;
}

.section-GNRN .main-2 a:nth-of-type(1) {
  top: 23.7%;
  left: 19.7%;
}

.section-GNRN .main-2 a:nth-of-type(2) {
  top: 67.3%;
  left: 71.2%;
}

/* -------------------------------------------------------------- */
/* #or */
.section-or .main-2 {
  position: relative;
}

.section-or .main-2 .event-btn a {
  width: calc(317 / 800 * 100%);
  height: 0;
  padding-bottom: calc(71 / 800 * 100%);
  background-image: url(/images/anniversary2023_annual/or_main2_btn.png?v=1);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  position: absolute;
  bottom: 7.3%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* -------------------------------------------------------------- */
/* #preorder */
.section-preorder .main-1 {
  position: relative;
}

.section-preorder .main-1 .event-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(534 / 800 * 100%);
  position: absolute;
  top: 50.7%;
  left: 50%;
  transform: translate(-50%, 0);
}

.section-preorder .main-1 .event-btn a {
  width: calc(258 / 534 * 100%);
  height: 0;
  padding-bottom: calc(246 / 534 * 100%);
}

/* -------------------------------------------------------------- */
/* #predate */
.section-predate .main-1 {
  position: relative;
}

.section-predate .main-1 .event-btn {
  width: calc(620 / 800 * 100%);
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
}

.section-predate .main-1 .event-btn a {
  width: 100%;
  height: 0;
  padding-bottom: 16.29%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  margin-bottom: calc(18 / 800 * 100%);
}

.section-predate .main-1 .event-btn a:nth-child(1) {
  background-image: url(/images/anniversary2023_annual/predate_main1_btn_1.png?v=1);
}

.section-predate .main-1 .event-btn a:nth-child(2) {
  background-image: url(/images/anniversary2023_annual/predate_main1_btn_2.png?v=1);
}

.section-predate .main-1 .event-btn a:nth-child(3) {
  background-image: url(/images/anniversary2023_annual/predate_main1_btn_3.png?v=1);
}

.section-predate .main-1 .preorder-btn a {
  width: 100%;
  height: 0;
  padding-bottom: calc(129 / 800 * 100%);
  background-image: url(/images/anniversary2023_annual/predate_main1_btn_4.png?v=1);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  position: absolute;
  bottom: 43.5%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* 注意事項 */
.section-predate .rule-txt {
  /* background-color: #e53566; */
  background-image: linear-gradient(175deg, #e53566 20%, #ce2655);
  font-size: 2.2rem;
  font-weight: 500;
  color: #fff;
  padding-bottom: calc(33 / 800 * 100%);
}

@media (max-width: 640px) {
  .section-predate .rule-txt {
    font-size: 1.8rem;
  }
}

.section-predate .rule-title {
  display: inline-block;
  background-color: #fff;
  color: #e53566;
  margin: calc(45 / 800 * 100%) 0 0 calc(29 / 800 * 100%);
  padding: calc(6 / 800 * 100%) calc(10 / 800 * 100%);
}

.section-predate .rule-txt ul {
  /* list-style-type: '* '; */
  list-style-position: outside;
  font-family: 'Noto Sans TC', '微軟正黑體';
  line-height: 1.6;
  padding: calc(12 / 800 * 100%) calc(29 / 800 * 100%);
}

.section-predate .rule-txt li {
  text-indent: -2.5rem;
  padding-left: 2.9rem;
  letter-spacing: .03rem;
}

@media (max-width: 640px) {
  .section-predate .rule-title {
    margin: calc(45 / 800 * 100%) 0 0 calc(50 / 800 * 100%);
  }

  .section-predate .rule-txt ul {
    padding: calc(12 / 800 * 100%) calc(50 / 800 * 100%);
  }

  .section-predate .rule-txt li {
    text-indent: -2.1rem;
  }
}

/* -------------------------------------------------------------- */
/* EDM 共用按鈕 */
.section-edm>div {
  position: relative;
}

.section-edm .event-btn {
  width: calc(268 / 400 * 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 1;
}

.section-edm .event-btn a {
  width: 100%;
  height: 0;
  padding-bottom: calc(60 / 268 * 100%);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
}

.section-edm .event-btn a:nth-child(1) {
  background-image: url(/images/anniversary2023_annual/edm_btn_1.png?v=1);
  margin-bottom: calc(12 / 268 * 100%);
}

.section-edm .event-btn a:nth-child(2) {
  background-image: url(/images/anniversary2023_annual/edm_btn_2.png?v=1);
}

/* -------------------------------------------------------------- */
/* #ann */
.section-ann {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.section-ann>div:not(:nth-child(5n+1)) {
  width: 50%;
}

.section-ann .main-1 .event-btn {
  top: 77.9%;
  left: 18.4%;
}

.section-ann .main-2 .event-btn {
  top: 77.9%;
  left: 15.4%;
}

.section-ann .main-3 .event-btn {
  top: 77.2%;
  left: 18.4%;
}

.section-ann .main-4 .event-btn {
  top: 77.2%;
  left: 15.4%;
}

.section-ann .main-5 .ann-btn a {
  width: 100%;
  height: 0;
  padding-bottom: calc(129 / 800 * 100%);
  background-image: url(/images/anniversary2023_annual/ann_main5_btn.png?v=1);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  position: absolute;
  bottom: 13.6%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* -------------------------------------------------------------- */
/* #gn01 */
/* #clx01 */
/* #ren01 */
.edm-btn-row .event-btn {
  width: 100%;
  flex-direction: row;
}

.edm-btn-row .event-btn a {
  width: calc(268 / 800 * 100%);
  padding-bottom: calc(60 / 800 * 100%);
}

.edm-btn-row .event-btn a:nth-child(1) {
  margin-bottom: 0;
  margin-right: calc(33 / 800 * 100%);
}

.edm-btn-row .main-1 .event-btn {
  top: 85.5%;
  left: 0;
}

/* -------------------------------------------------------------- */
/* #gn02 */
/* #clx02 */
/* #ren02 */
.edm-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.edm-bottom .main-1 .event-btn {
  top: 73.5%;
  left: 19.6%;
}

.edm-bottom .main-2 .event-btn {
  top: 73.5%;
  left: 15.1%;
}

/* -------------------------------------------------------------- */
/* #ab01 */
.section-ab01,
.section-ab02 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-ab01 .main-1 .event-btn {
  top: 75.7%;
  left: 19.6%;
}

.section-ab01 .main-2 .event-btn {
  top: 75.7%;
  left: 15.1%;
}

/* -------------------------------------------------------------- */
/* #ab02 */
.section-ab02 .main-1 .event-btn {
  top: 73.4%;
  left: 19.6%;
}

.section-ab02 .main-2 .event-btn {
  top: 73.4%;
  left: 15.1%;
}

/* -------------------------------------------------------------- */
/* #tiu */
.section-tiu .main-1 a {
  bottom: 13.3%;
  left: 10.4%;
}

/* -------------------------------------------------------------- */
/* #tiu01 */
.section-tiu01 .main-1 .event-btn {
  top: 82.5%;
}

/* -------------------------------------------------------------- */
/* #lip */
.section-lip .main-1 .event-btn {
  top: 79%;
}

/* -------------------------------------------------------------- */
/* #jumbo */
.section-jumbo .event-btn {
  width: calc(241 / 800 * 100%);
}

.section-jumbo .event-btn a {
  padding-bottom: calc(55 / 241 * 100%);
}

.section-jumbo .event-btn a:nth-child(1) {
  background-image: url(/images/anniversary2023_annual/jumbo_main1_btn_1.png?v=1);
  margin-bottom: calc(16 / 241 * 100%);
}

.section-jumbo .event-btn a:nth-child(2) {
  background-image: url(/images/anniversary2023_annual/jumbo_main1_btn_2.png?v=1);
}

.section-jumbo .main-1 .event-btn:nth-of-type(1) {
  top: 31.3%;
  left: 8.4%;
}

.section-jumbo .main-1 .event-btn:nth-of-type(2) {
  top: 31.3%;
  left: 52.3%;
}

.section-jumbo .main-1 .event-btn:nth-of-type(3) {
  top: 53.5%;
  left: 8.4%;
}

.section-jumbo .main-1 .event-btn:nth-of-type(4) {
  top: 53.5%;
  left: 52.3%;
}

.section-jumbo .main-1 .event-btn:nth-of-type(5) {
  top: 75.75%;
  left: 8.4%;
}

.section-jumbo .main-1 .event-btn:nth-of-type(6) {
  top: 75.75%;
  left: 52.3%;
}

.section-jumbo .main-1 .event-btn:nth-of-type(7) {
  top: 89.8%;
  left: 52.3%;
}

/* -------------------------------------------------------------- */
/* 跳窗 */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(237, 113, 145, 0.87);
  z-index: 100;
  /* display: none; */
  overflow-y: auto;
}

.popup-wrap {
  max-width: 800px;
  width: 100%;
  min-height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

.popup-content {
  width: calc(701 / 800 * 100%);
  padding: 5rem 0;
  margin: auto;
  transform: translateY(-5%);
  position: relative;
}

.popup-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.popup-close {
  width: calc(94 / 701 * 100%);
  padding-bottom: calc(94 / 701 * 100%);
  background-image: url(/images/anniversary2023_annual/popup_close.png?v=1);
  background-size: 100% 100%;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  top: 5rem;
  right: 0;
}

.popup-body {
  position: relative;
}

.popup .btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  bottom: 15%;
}

.popup .btn {
  width: calc(312 / 701 * 100%);
  padding-bottom: calc(81 / 701 * 100%);
  background-image: url(/images/anniversary2023_annual/popup_btn.png?v=1);
  background-size: 100% 100%;
}
/* animation */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active in <2.1.8 */

{
  opacity: 0
}