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;
}

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

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.wrap {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

.bg-color {
    background-color: #76D8C9;
}

.logo img {
    padding-top: 5%;
    margin: 0 auto;
    width: 40%;
}

@media (max-width:768px) {
    .logo img {
        width: 50%;
    }
}


/* 定位 */

.thing01-1 {
    width: 6.2%;
    right: 52%;
    top: 7%;
    animation: light2 2s infinite ease-in-out;
}

.thing01-2 {
    width: 50.1%;
    left: 7%;
    top: 11%;
}

.thing01-2 span {
    -webkit-mask: url("../images/fv02.png") no-repeat center center;
    mask: url("../images/fv02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.thing01-3 {
    width: 61.8%;
    right: 19%;
    bottom: 17.5%;
    animation: scale 2s infinite ease-in-out;
}

.thing02-0 {
    width: 100%;
    right: 0%;
    top: 34%;
    scale: 1.818;
    rotate: -10deg;
}

.thing02-1 {
    width: 100%;
    right: 0%;
    top: 0%;
    mix-blend-mode: multiply;
}

.thing02-2 {
    width: 100%;
    right: 0%;
    top: 0%;
    z-index: 1;
}

.thing02-3 {
    width: 93.4%;
    right: 3.3%;
    top: 25.4%;
}

.thing02-3 span {
    -webkit-mask: url("../images/thing1-1.png") no-repeat center center;
    mask: url("../images/thing1-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.thing02-4 {
    width: 33.9%;
    right: 1%;
    top: 16.5%;
}

.thing02-5 {
    width: 12.8%;
    right: 14%;
    top: 48%;
}

.thing03-1 {
    width: 100%;
    right: 0%;
    top: 36%;
    scale: 2.438;
    opacity: 0.4;
}

.thing03-2 {
    width: 100%;
    right: 0%;
    top: 0%;
}

.thing03-3 {
    width: 90.7%;
    right: 4%;
    top: 22%;
}

.thing03-4 {
    width: 6.5%;
    right: 28%;
    bottom: 4.5%;
    animation: scale 1.5s infinite ease-in-out;
}

.thing04-1 {
    width: 59.1%;
    left: 11.5%;
    top: 58.5%;

}

.thing04-2 {
    width: 77.4%;
    left: 12.5%;
    bottom: 8.25%;
}

.thing05-0 {
    width: 31.2%;
    right: 24%;
    top: 42%;
}

.thing05-1 {
    width: 29.1%;
    right: 0;
    top: 39%;
}

.thing05-2 {
    width: 7.7%;
    right: 22.2%;
    top: 58.4%;
}

.thing05-3 {
    width: 7.9%;
    right: 23%;
    top: 63.8%;
}

.thing05-4 {
    width: 6.6%;
    right: 24.5%;
    top: 69%;
}

.thing05-5 {
    width: 6.5%;
    right: 27%;
    top: 72.9%;
}

.thing05-6 {
    width: 6.1%;
    right: 29%;
    top: 76.9%;
}

.thing05-7 {
      width: 8%;
    right: 11.5%;
    top: 67.2%;
}

.thing05-8 {
    width: 10.5%;
    right: 12.6%;
    top: 72.5%;
}

.thing05-9 {
    width: 7.9%;
    right: 17.2%;
    top: 78%;
}

.thing05-10 {
    width: 7.1%;
    right: 20.2%;
    top: 83.1%;
}

.thing05-11 {
    width: 8.6%;
    right: 22.5%;
    top: 87.8%;
}

.thing05-12 {
    width: 4.2%;
    right: 28.5%;
    top: 92.5%;
}

.thing06-1 {
    width: 47.8%;
    right: 9.5%;
    top: 8%;
}

.thing06-1 .light {
    -webkit-mask: url("../images/thing4-1.png") no-repeat center center;
    mask: url("../images/thing4-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.thing06-2 {
    width: 64.8%;
    left: 13.5%;
    top: 30.25%;
}

.thing07-1 {
    width: 33%;
    right: 8%;
    top: 26%;
    animation: scale 2s infinite ease-in-out;
}

.thing07-2 {
    width: 73%;
    right: 13%;
    bottom: 22%;
    animation: bounce 2s infinite ease-in-out;
}

.thing07-3 {
    width: 15.4%;
    right: 32%;
    top: 24%;
}

.thing07-3 span {
    -webkit-mask: url("../images/offericon.png") no-repeat center center;
    mask: url("../images/offericon.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.thing08-1 {
    width: 19.5%;
    left: 39.5%;
    top: 38%;
    z-index: 1;
    filter: drop-shadow(0px 8px 0px rgb(15, 129, 130, 0.4));
}

@media (max-width:768px) {
    .thing08-1 {
        filter: drop-shadow(0px 4px 0px rgb(15, 129, 130, 0.4));
    }
}

.thing08-2 {
    width: 6.4%;
    right: 13.5%;
    top: 46%;
    animation: light2 2s infinite ease-in-out;
}

.thing08-3 {
    width: 62.2%;
    left: 18.5%;
    top: 49%;
}

.thing08-4 {
    width: 45%;
    right: 4.5%;
    bottom: 2%;
}


/* .thing08-4 .light {
    -webkit-mask: url("../images/thing5-4.png") no-repeat center center;
    mask: url("../images/thing5-4png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
} */

.thing10-1 {
    width: 21.1%;
    left: 41.5%;
    top: 2.5%;
    z-index: 1;
    filter: drop-shadow(0px 8px 0px rgb(15, 129, 130, 0.4));
}

@media (max-width:768px) {
    .thing10-1 {
        filter: drop-shadow(0px 4px 0px rgb(15, 129, 130, 0.4));
    }
}

.thing10-2 {
    width: 6.4%;
    right: 10.5%;
    top: 9.5%;
    animation: light2 2s infinite ease-in-out;
}

.thing10-3 {
    width: 62.2%;
    left: 20.5%;
    top: 12%;
}

.thing10-4 {
    width: 47.8%;
    right: 24.5%;
    bottom: 7.5%;
}

.thing10-4 span {
    -webkit-mask: url("../images/thing6-3.png") no-repeat center center;
    mask: url("../images/thing6-3.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.thing11-1 {
    width: 20.8%;
    left: 41.5%;
    top: 3%;
    z-index: 1;
    filter: drop-shadow(0px 8px 0px rgb(15, 129, 130, 0.4));
}

@media (max-width:768px) {
    .thing11-1 {
        filter: drop-shadow(0px 4px 0px rgb(15, 129, 130, 0.4));
    }
}

.thing11-2 {
    width: 6.4%;
    right: 5.5%;
    top: 10%;
    animation: light2 2s infinite ease-in-out;
}

.thing11-3 {
    width: 78.3%;
    left: 11.5%;
    top: 12.75%;
}

.thing11-4 {
    width: 58.3%;
    right: 19.5%;
    bottom: 8%;
    animation: scale 2s infinite ease-in-out;
}

.thing12-1 {
    width: 70%;
    left: 15.5%;
    top: 0%;
}

.thing12-2 {
    width: 52.7%;
    right: 22.5%;
    bottom: 19.5%;
    animation: scale 2s infinite ease-in-out;
}

.thing13-1{
     width: 21.7%;
    right: 12%;
    bottom: 18.1%;
}
.thing14-1 {
    width: 33%;
    right: 8%;
    top: 20%;
    animation: scale 2s infinite ease-in-out;
}

.thing14-2 {
    width: 73%;
    right: 13%;
    bottom: 20.5%;
    animation: bounce 2s infinite ease-in-out;
}

.thing14-3 {
    width: 15.4%;
    right: 32%;
    top: 18%;
}

.thing15-1 {
    width: 19.8%;
    right: 39.25%;
    top: 5.5%;
    animation: rotate 12s infinite linear;
}

.thing15-2 {
    width: 100%;
    left: 0%;
    top: 11%;
}

.thing16-1 {
    width: 73.6%;
    left: 13%;
    top: 21.25%;
    z-index: 1;
}

.thing16-2 {
    width: 90%;
    height: 34.75%;
    left: 5%;
    top: 47.2%;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}

@media (max-width:768px) {
    .thing16-2 {
        border-radius: 0 0 15px 15px;
    }
}

.thing17-1 {
    width: 100%;
    left: 0%;
    top: 20%;
}

.thing17-2 {
    width: 24.8%;
    left: 0;
    top: 42%;
    animation: scale 2s infinite ease-in-out;
}

.thing18-1 {
    width: 18.2%;
    left: 6.5%;
    top: 3.5%;
}
.thing18-1 span {
    -webkit-mask: url("../images/offer36.png") no-repeat center center;
    mask: url("../images/offer36.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}
.thing18-2 {
    width: 18.6%;
    left: 54%;
    top: 5%;
}
.thing18-2 span {
    -webkit-mask: url("../images/offer49.png") no-repeat center center;
    mask: url("../images/offer49.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain
}
.phone {
    width: 100%;
    height: 6%;
    bottom: 33%;
    left: 0%;
}

.mail {
    width: 100%;
    height: 3%;
    bottom: 7%;
    left: 0%;
}

.line {
    width: 100%;
    height: 15%;
    bottom: 13%;
    left: 0%;
}

/* offer */

.offer01 {
    width: 73%;
    left: 13.5%;
    bottom: 11.5%;
    animation: bounce 2s infinite ease-in-out;
}

.offer02 {
    width: 36.6%;
    left: 8%;
    bottom: 22.5%;
    /* animation: bounce 2s infinite ease-in-out; */
}

.offer03 {
    width: 36.6%;
    right: 7.5%;
    bottom: 22.5%;
    /* animation: bounce 2s infinite ease-in-out; */
}

.sticky {
    position: sticky;
    top: 0%;
    margin: 0 auto;
    z-index: 99;
    width: 100%;
    max-width: 1000px;
    box-shadow: 0px 2px 5px #3e3e3e;
}