@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@500&display=swap");

* {
  margin: 0;
  padding: 0;
}

img {
  border: none;
}

.clear {
  clear: both;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans TC", sans-serif;
}

.content {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
}

.content img {
  max-width: 900px;
  width: 100%;
}

.header {
  background: url("../images/header.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg01 {
  background: url("../images/index_01.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

/* 數值 */
.c01 {
  position: absolute;
  width: 25%;
  top: 48%;
  left: 15%;
  z-index: 1;
  filter: drop-shadow(0px 0px 20px #7ad2e180);
}

.c02 {
  position: absolute;
  width: 25%;
  top: 40%;
  right: 8%;
  z-index: 1;
  filter: drop-shadow(0px 0px 20px #7ad2e180);
}

.c03 {
  position: absolute;
  width: 25%;
  bottom: 20%;
  right: 15%;
  z-index: 1;
  filter: drop-shadow(0px 0px 20px #7ad2e180);
}

.c01_content {
  font-family: "Ibarra Real Nova", serif;
  font-weight: 500;
  background: linear-gradient(#4c4a0a, #000439);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0, 0, 5px, #ffffff50);
  position: absolute;
  top: 52%;
  left: 19.5%;
  z-index: 2;
}

.c02_content {
  font-family: "Ibarra Real Nova", serif;
  font-weight: 500;
  background: linear-gradient(#4c4a0a, #000439);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0, 0, 5px, #ffffff50);
  position: absolute;
  top: 44%;
  right: 13%;
  z-index: 2;
}

.c03_content {
  font-family: "Ibarra Real Nova", serif;
  font-weight: 500;
  background: linear-gradient(#4c4a0a, #000439);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0, 0, 5px, #ffffff50);
  position: absolute;
  bottom: 27%;
  right: 20%;
  z-index: 2;
}

.c01_content span,
.c02_content span,
.c03_content span {
  font-size: 4.5rem;
}

@media screen and (max-width: 800px) {
  .c01_content span,
  .c02_content span,
  .c03_content span {
    font-size: 4rem;
  }
}

@media screen and (max-width: 700px) {
  .c01_content span,
  .c02_content span,
  .c03_content span {
    font-size: 3.5rem;
  }
}

@media screen and (max-width: 500px) {
  .c01_content span,
  .c02_content span,
  .c03_content span {
    font-size: 2.1rem;
  }
}

@media screen and (max-width: 400px) {
  .c01_content span,
  .c02_content span,
  .c03_content span {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 320px) {
  .c01_content span,
  .c02_content span,
  .c03_content span {
    font-size: 1.5rem;
  }
}
/* 數值 END */

.bg02 {
  background: url("../images/index_02.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg03 {
  background: url("../images/index_03.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.girl_face {
  width: 70%;
  position: absolute;
  top: 0;
  left: 15%;
}

.bg04 {
  background: url("../images/index_04.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg05 {
  background: url("../images/index_05.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg06 {
  background: url("../images/index_06.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.c04 {
  width: 25%;
  position: absolute;
  bottom: 15%;
  left: 2%;
  filter: drop-shadow(0px 0px 20px #7ad2e160);
}

.c05 {
  width: 25%;
  position: absolute;
  bottom: 20%;
  right: 5%;
  filter: drop-shadow(0px 0px 20px #ffffff60);
}

.c06 {
  width: 25%;
  position: absolute;
  bottom: 6%;
  right: 9%;
  filter: drop-shadow(0px 0px 20px #7ad2e160);
}

.bg07 {
  background: url("../images/index_07.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

/* 註解 */
.no1_01 {
  position: absolute;
  top: 23%;
  left: 0;
  z-index: 1;
}

.no1_02 {
  position: absolute;
  top: 43%;
  left: 0;
  z-index: 1;
}

.no1_03 {
  position: absolute;
  bottom: 8%;
  left: 0;
  z-index: 1;
}

.tip01 {
  position: absolute;
  top: 60%;
  right: 28%;
  z-index: 2;
}

.tip02 {
  position: absolute;
  bottom: 13.5%;
  right: 8%;
  z-index: 2;
}

.tip03 {
  position: absolute;
  bottom: 3%;
  right: 31%;
  z-index: 2;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip img {
  max-width: 40px;
  width: 100%;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  letter-spacing: 0.5px;
  font-weight: 100;
  position: absolute;
  z-index: 4;
  top: 105%;
  right: 50%;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 900px) {
  .tooltip .tooltiptext {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 768px) {
  .tooltip img {
    max-width: 25px;
  }
}

@media screen and (max-width: 500px) {
  .tooltip img {
    max-width: 20px;
  }

  .tooltip .tooltiptext {
    width: 250px;
  }
}

@media screen and (max-width: 400px) {
  .tooltip .tooltiptext {
    width: 220px;
  }
}

@media screen and (max-width: 320px) {
  .tooltip img {
    max-width: 18px;
  }

  .tooltip .tooltiptext {
    font-size: 0.75em;
    width: 180px;
  }
}
/* 註解 END */

.bg08 {
  background: url("../images/index_08.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.texture01 {
  width: 40%;
  position: absolute;
  top: 42%;
  left: 5%;
}

.texture02 {
  width: 40%;
  position: absolute;
  top: 48%;
  right: 10%;
}

.bg09 {
  background: url("../images/index_09.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg10 {
  background: url("../images/index_10.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg11 {
  background: url("../images/index_11.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg12 {
  background: url("../images/index_12.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.queen {
  width: 85%;
  position: absolute;
  bottom: 5%;
  left: 7.5%;
}

.bg13 {
  background: url("../images/index_13.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg14 {
  background: url("../images/offer_01.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg15 {
  background: url("../images/offer_02.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg16 {
  background: url("../images/offer_03.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.bg17 {
  background: url("../images/offer_04.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}
.bg18 {
  background: url("../images/offer_05.jpg") top center no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.btn01 {
  width: 50%;
  position: absolute;
  bottom: 6%;
  left: 25.5%;
}

.btn02 {
  width: 37%;
  position: absolute;
  bottom: 4%;
  left: 7%;
}

.btn03 {
  width: 37%;
  position: absolute;
  bottom: 4%;
  right: 7%;
}

.btn04 {
  width: 55%;
  position: absolute;
  bottom: 12%;
  right: 10%;
}

.btn05 {
  width: 55%;
  position: absolute;
  bottom: 20%;
  right: 9%;
}

/* ボタン自体のstyle */
.button {
  display: inline-block;
  border-radius: 10px;
}
/* 光らせるためのstyle */
.shine {
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
/* 光の疑似要素 */
.shine::before {
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
/* 光の動き */
@keyframes shine {
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

/* ig */
.slide {
  position: absolute;
  top: 18%;
  left: 0;
  width: 80%;
}

.slide img {
  border: none;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width: 750px) {
  .slick-initialized .slick-slide {
    display: block;
  }
}

@media screen and (max-width: 500px) {
  .slide {
    width: 90%;
  }
}

@media screen and (max-width: 320px) {
  .slide {
    width: 95%;
  }
}
/* ig END */

@media screen and (min-width: 1921px) {
  body {
    background: #031528;
  }
  section {
    max-width: 1920px;
  }
}

@media screen and (max-width: 900px) {
  .content {
    margin: 0;
    width: 100%;
  }

  .content img {
    width: 100%;
  }
}

@media screen and (max-width: 900px) {
  .collapsible {
    font-size: 24px;
  }
}

@media screen and (max-width: 600px) {
  .collapsible {
    font-size: 18px;
  }
}

/*---CTA---*/
/*footer start*/
.SA_footer,
.SA_footer a {
  font-size: 100%;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  text-align: center;
  color: #222222;
  padding-bottom: 30px;
  padding-top: 20px;
}

/*footer end*/

.store1 {
  background: url(../images/store_1.gif) no-repeat top center;
  background-size: cover;
  margin: 0 auto;
}

.store2 {
  background: url(../images/store_2.jpg) no-repeat top center;
  background-size: cover;
  margin: 0 auto;
}

#video1 {
  position: absolute;
  width: 45%;
  left: 4%;
  top: 1%;
}

#video2 {
  position: absolute;
  width: 45%;
  right: 4%;
  top: 3%;
}