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

img {
    /* max-width: 100%; */
    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;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

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

.container {
    max-width: 1000px;
    margin: 0 auto;
}
iframe{border: none;}
.hidden {
    overflow: hidden;
}

.bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.bg0 {
    background-image: url(./images/BG/bg0.jpg);
}

.bg1 {
    background-image: url(./images/BG/bg1.jpg);
}


.bg2 {
    background-image: url(./images/BG/bg2.jpg);
}

.bg3 {
    background-image: url(./images/BG/bg3.jpg);
}

.bg4 {
    background-image: url(./images/BG/bg4.jpg);
}

.bg5 {
    background-image: url(./images/BG/bg5.jpg);
}

.bg6 {
    background-image: url(./images/BG/bg6.jpg);
}

.bg7 {
    background-image: url(./images/BG/bg7.jpg);
}

.bg8 {
    background-image: url(./images/BG/bg8.jpg);
}

.bg9 {
    background-image: url(./images/BG/bg9.jpg);
}

/* FV  */
.header {
    width: 100%;
    top: 0%;
    left: 0%;
    opacity: 0.9;
    scale: 1.920;
}

.headerLogo {
    width: 34.8%;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
}

.thing01-1 {
    width: 91.8%;
    left: 5%;
    top: 13%;
    z-index: 2;
}

.thing01-2 {
    width: 69%;
    left: 16.7%;
    top: 22.6%;
    z-index: 2;
    animation: circle 15s infinite forwards;
}

.thing01-3 {
    width: 1%;
    left: 50.7%;
    top: 10.3%;
    z-index: 2;
    animation: circleround 18s infinite forwards;
}

.thing01-4 {
    width: 10%;
    right: 2%;
    bottom: -1%;
    z-index: 2;
}

.scaleD {
    transform: scale(0.9);
}

@keyframes circle {
    0% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(-30deg);
    }

    100% {
        transform: rotate(30deg);
    }
}

@keyframes circleround {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* 需要動的球 */
.circle {
    width: 140%;
    max-width: 1700px;
    /* scale: 1.496; */
    filter: drop-shadow(0px 0px 20px rgb(255, 255, 255, 0.8));
    transition: all 2.5s;
    opacity: 0.8;
}

.circle1 {
    right: -100%;
    top: -100%;

}

.circle1-show {
    right: -30%;
    top: -65%;
}

.circle2 {
    left: -100%;
    bottom: -100%;

}

.circle2-show {
    left: -32%;
    bottom: -65%;
}

.circle3 {
    right: -2%;
    top: -150%;
}

.circle3-show {
    right: -14%;
    top: -191%;
    width: 170%;
    max-width: 2500px;
}

.circle4 {
    left: -2%;
    bottom: -150%;

}

.circle4-show {
    left: 2%;
    bottom: -100%;
}

@media (max-width:1181px) {
    .circle1-show {
        right: -65%;
        top: -70%;
    }
    .circle2-show {
        left: -65%;
        bottom: -69%;
    }
    .circle3-show {
        right: -50%;
        top: -185%;
        width: 200%;
    }
    .circle4-show {
        left: 2%;
        bottom: -100%;
    }
    .circlebtm-show {
        left: 0%;
        bottom: 0%;
    }
}

@media (max-width:821px) {
    .circle1-show {
        right: -68%;
        top: -48%;
    }
    .circle2-show {
        left: -69%;
        bottom: -59%;
    }
    .circle3-show {
        right: -50%;
        top: -150%;
        width: 200%;
    }
    .circle4-show {
        left: 2%;
        bottom: -100%;
    }
    .circlebtm-show {
        left: 0%;
        bottom: 0%;
    }
}

@media (max-width:768px) {
    .circle1-show {
        right: -68%;
        top: -48%;
    }
    .circle2-show {
        left: -69%;
        bottom: -59%;
    }
    .circle3-show {
        right: -50%;
        top: -100%;
        width: 200%;
    }
    .circle4-show {
        left: 2%;
        bottom: -100%;
    }
    .circlebtm-show {
        left: 0%;
        bottom: 0%;
    }
}


/* BG02 */

.thing2-2 {
    width: 90%;
    left: 5%;
    scale: 1.3;
    bottom: 15%;
}

.thing2-3 {
    width: 6.5%;
    right: 14%;
    bottom: 3%;
    z-index: 1;
    rotate: -90deg;
}

.thing2-4 {
    width: 6.5%;
    left: 15.5%;
    top: 0.5%;
    z-index: 1;
    rotate: -90deg;
}

.thing3-1 {
    width: 100%;
    left: 0%;
    top: 0%;
    /* z-index: 1; */
}

.thing3-2 {
    transform: scale(0.9);
    width: 90%;
    left: 5%;
    bottom: 0.5%;
}

.thing4-2 {
    transform: scale(0.9);
    width: 90%;
    left: 5%;
    bottom: 0.5%;
}

.thing5-2 {
    transform: scale(0.9);
    width: 90%;
    left: 5%;
    bottom: 0.5%;
}
.thing06-0 {
    width: 16.9%;
    left: 41.5%;
    bottom: 5.1%;
    cursor: pointer;
}

.thing07-1 {
    width: 41%;
    left: 29%;
    bottom: 14.5%;
    cursor: pointer;
    animation: scale 2s infinite ease-in-out;
}

.thing08-1{
    width: 86.2%;
    height: 74.2%;
    left: 7%;
    bottom: 9.9%;
}
.thing09-1{
    width: 86.3%;
    height: 72.7%;
    left: 7%;
    bottom: 13.6%;
}

@media (max-width:821px) {
    .thing2-2 {
        width: 90%;
        left: 5%;
        bottom: 17.5%;
        scale: 1.3;
    }

    .thing3-1 {
        width: 114%;
        left: -7%;
        top: -3%;
    }

    .thing3-2 {
        width: 95%;
        left: 2.5%;
        bottom: -3.7%;
        scale: 1.05;
        z-index: 1;
    }

    .thing4-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1.05;
    }

    .thing5-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1.05;
    }
    .thing07-1 {
        bottom: 8.5%;
    }
    .thing06-0 {
        width: 31.9%;
        left: 33.2%;
        bottom: 5.1%;
        cursor: pointer;
    }
}
@media (max-width:768px) {
    .thing2-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1;
    }

    .thing3-1 {
        width: 114%;
        left: -7%;
    }

    .thing3-2 {
        width: 95%;
        left: 2.5%;
        bottom: -7.7%;
        scale: 1.05;
        z-index: 1;
    }

    .thing4-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1.05;
    }

    .thing5-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1.05;
    }
    .thing07-1 {
        bottom: 8.5%;
    }
}
@media (max-width:414px) {
    .thing2-2 {
        width: 97%;
        left: 2.7%;
        bottom: 4%;
        scale: 1.1;
    }

    .thing3-1 {
        width: 114%;
        left: -7%;
    }

    .thing3-2 {
        width: 95%;
        left: 2.5%;
        bottom: -7.7%;
        scale: 1.05;
        z-index: 1;
    }

    .thing4-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1.05;
    }

    .thing5-2 {
        width: 95%;
        left: 2.5%;
        bottom: -2.5%;
        scale: 1.05;
    }
    .thing07-1 {
        bottom: 8.5%;
    }
}


@keyframes scale {
    0%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(1.05,1.05);
    }
    100%{
        transform: scale(1,1);
    }
    
}