body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  /* vertical-align: middle; */
  display: block;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}
.blendmode_screen {
  mix-blend-mode: screen;
  pointer-events: none;
}
.blendmode_multiply {
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* 【以上內容勿動!!!  有關基本樣式設定】 */
/* 開版設定 */
.wrap {
  max-width: 1000px;
  margin: 0 auto;
  /* 【超過】 開版範圍 就不呈現 */
  overflow: hidden;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
  position: relative;
}

/* 定位 */
/* --- Auto-generated image classes (Do not edit) --- */

.thing_1-1 {
  top: 6%;
  left: 2%;
  width: 71.3%;
  -webkit-mask: url("../images/thing_1-1.png") no-repeat center center;
  mask: url("../images/thing_1-1.png") no-repeat center center;
  mask: url("../images/thing_1-1.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.salsbutton {
  top: 67%;
  left: 0%;
  width: 100%;
}

.swiper_info {
  top: 5%;
  left: 2%;
  width: 100%;
  overflow: visible;
}
.swiper_info .swiper-slide {
  transform: scale(1);
  transition: 0.5s;
}
.swiper_info .swiper-slide-active {
  transform: scale(1.1);
  transition: 0.5s;
}

.thing_3-1 {
  top: 0%;
  left: 0%;
  width: 99.6%;
  -webkit-mask: url("../images/thing_3-1.png") no-repeat center center;
  mask: url("../images/thing_3-1.png") no-repeat center center;
  mask: url("../images/thing_3-1.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing_3-2 {
  top: 32%;
  left: 7%;
  width: 87.7%;
  height: 14%;
}
.thing_3-2_light {
  -webkit-mask: url("../images/thing_3-2.png") no-repeat center center;
  mask: url("../images/thing_3-2.png") no-repeat center center;
  mask: url("../images/thing_3-2.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.thing_3-3_light {
  -webkit-mask: url("../images/thing_3-3.png") no-repeat center center;
  mask: url("../images/thing_3-3.png") no-repeat center center;
  mask: url("../images/thing_3-3.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.thing_3-4_light {
  -webkit-mask: url("../images/thing_3-4.png") no-repeat center center;
  mask: url("../images/thing_3-4.png") no-repeat center center;
  mask: url("../images/thing_3-4.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.thing_3-2 > div,
.thing_3-3 > div,
.thing_3-4 > div {
  height: 100%;
}
.thing_3-2A {
  top: 31%;
  left: 6%;
  width: 100%;
}
.thing_3-2B {
  top: 12%;
  left: 5%;
  width: 88%;
}
.thing_3-2C {
  top: 60%;
  left: 1%;
  width: 16%;
}

.thing_3-3 {
  top: 48.5%;
  left: 7%;
  width: 45.7%;
  height: 26%;
}
.thing_3-3A {
  top: 82%;
  left: 9%;
  width: 100%;
}
.thing_3-3B {
  top: 52%;
  left: 10%;
  width: 77%;
}

.thing_3-4 {
  top: 48.5%;
  left: 49%;
  width: 46%;
  height: 26%;
}
.thing_3-4A {
  top: 77%;
  left: -9%;
  width: 100%;
}
.thing_3-4B {
  top: 52%;
  left: 10%;
  width: 76%;
}

.thing_4-1 {
  top: 5.5%;
  left: 64%;
  width: 31.5%;
}

.thing_5-1 {
  top: 19%;
  left: 52%;
  width: 26.7%;
}

.thing_5-2 {
  top: 27%;
  left: 72%;
  width: 28.9%;
}

.thing_5-3 {
  top: 51%;
  left: 0%;
  width: 22.8%;
}

.thing_5-4 {
  top: 65.5%;
  left: 16%;
  width: 30.8%;
}

.thing_5-5 {
  top: 85%;
  left: 15.15%;
  width: 69.7%;
  -webkit-mask: url("../images/thing_5-5.png") no-repeat center center;
  mask: url("../images/thing_5-5.png") no-repeat center center;
  mask: url("../images/thing_5-5.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing_6-1 {
    top: 61%;
    left: 14%;
    width: 26.4%;
}

.thing_7-1 {
  top: 0%;
  left: 4%;
  width: 100%;
}
.thing_7-1A {
  width: 95.9% !important;
  right: 0;
}
.thing_7-4 {
    top: 55%;
    left: 2%;
    width: 9.4%;
    z-index: 1;
}

.thing_7-5 {
    top: 55%;
    right: 2%;
    width: 9.4%;
    z-index: 1;
}

.thing_8-1,
.thing_8-2,
.thing_8-3 {
    top: 5%;
    left: 2.8%;
    width: 94.4%;
}
.bg08-hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.thing_9-1 {
    top: 27%;
    left: 1%;
    width: 55%;
}

.thing_9-2 {
    top: 27%;
    left: 48%;
    width: 51.6%;
}

.thing_9-3 {
    top: 61%;
    left: 1%;
    width: 53.9%;
}

.thing_9-4 {
  top: 61%;
  left: 48%;
  width: 51.7%;
}

.thing_10-1 {
    top: 41%;
    left: 3.9%;
    width: 92.2%;
    -webkit-mask: url("../images/thing_10-1.png") no-repeat center center;
    mask: url("../images/thing_10-1.png") no-repeat center center;
    mask: url("../images/thing_10-1.avif") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing_11-1 {
  top: 2%;
  left: 0%;
  width: 99.6%;
  -webkit-mask: url("../images/thing_3-1.png") no-repeat center center;
  mask: url("../images/thing_3-1.png") no-repeat center center;
  mask: url("../images/thing_3-1.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing_11-2 {
  top: 34%;
  left: 7%;
  width: 87.7%;
  height: 14%;
}
.thing_11-2_light {
  -webkit-mask: url("../images/thing_3-2.png") no-repeat center center;
  mask: url("../images/thing_3-2.png") no-repeat center center;
  mask: url("../images/thing_3-2.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.thing_11-3_light {
  -webkit-mask: url("../images/thing_3-3.png") no-repeat center center;
  mask: url("../images/thing_3-3.png") no-repeat center center;
  mask: url("../images/thing_3-3.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.thing_11-4_light {
  -webkit-mask: url("../images/thing_3-4.png") no-repeat center center;
  mask: url("../images/thing_3-4.png") no-repeat center center;
  mask: url("../images/thing_3-4.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.thing_11-2 > div,
.thing_11-3 > div,
.thing_11-4 > div {
  height: 100%;
}
.thing_11-2A {
  top: 33%;
  left: 6%;
  width: 100%;
}
.thing_11-2B {
  top: 14%;
  left: 5%;
  width: 88%;
}
.thing_11-2C {
  top: 62%;
  left: 1%;
  width: 16%;
}

.thing_11-3 {
  top: 50.5%;
  left: 7%;
  width: 45.7%;
  height: 26%;
}
.thing_11-3A {
    top: 91%;
    left: 11%;
    width: 100%;
}
.thing_11-3B {
  top: 57%;
  left: 10%;
  width: 77%;
}

.thing_11-4 {
  top: 50.5%;
  left: 49%;
  width: 46%;
  height: 26%;
}
.thing_11-4A {
    top: 90%;
    left: 1%;
    width: 100%;
}
.thing_11-4B {
  top: 57%;
  left: 10%;
  width: 76%;
}

.thing_12-1 {
    top: 41.5%;
    left: 39.5%;
    width: 54.6%;
    -webkit-mask: url("../images/thing_12-1.png") no-repeat center center;
    mask: url("../images/thing_12-1.png") no-repeat center center;
    mask: url("../images/thing_12-1.avif") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing_12-2 {
    top: 86.5%;
    left: 8.9%;
    width: 82.2%;
    -webkit-mask: url("../images/thing_12-2.png") no-repeat center center;
    mask: url("../images/thing_12-2.png") no-repeat center center;
    mask: url("../images/thing_12-2.avif") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing_13-1 {
    top: 42%;
    left: 60%;
    width: 34.6%;
    -webkit-mask: url("../images/thing_13-1.png") no-repeat center center;
    mask: url("../images/thing_13-1.png") no-repeat center center;
    mask: url("../images/thing_13-1.avif") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing_13-2 {
    top: 86.5%;
    left: 8.9%;
    width: 82.2%;
    -webkit-mask: url("../images/thing_13-2.png") no-repeat center center;
    mask: url("../images/thing_13-2.png") no-repeat center center;
    mask: url("../images/thing_13-2.avif") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing_14-1 {
    top: 16.3%;
    left: 25%;
    width: 8.9%;
}

.thing_14-2 {
    top: 16.3%;
    left: 52%;
    width: 6.9%;
}

.thing_14-3 {
  top: 28.5%;
  left: 59.9%;
  width: 31.4%;
  -webkit-mask: url("../images/thing_14-3.png") no-repeat center center;
  mask: url("../images/thing_14-3.png") no-repeat center center;
  mask: url("../images/thing_14-3.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing_14-4 {
    top: 80.5%;
    left: 13.8%;
    width: 72.4%;
    -webkit-mask: url("../images/thing_14-4.png") no-repeat center center;
    mask: url("../images/thing_14-4.png") no-repeat center center;
    mask: url("../images/thing_14-4.avif") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing_15-1 {
    top: 52%;
    left: 17%;
    width: 65.1%;
}

.thing_15-2 {
    top: 73.5%;
    left: 2.65%;
    width: 94.7%;
}
/* --- End of auto-generated classes --- */