.hero-section {
    background: #ffffff;
    padding: 0;
    position: relative;
}

.hero-content {
    width: 100%;
    height: 53.875rem;
}

.part1-title {
    width: 19rem;
    height: 7.0625rem;
    position: absolute;
    top: 10.5rem;
    left: 17.0625rem;
}

.part1-title2 {
    width: 23.1875rem;
    height: 3.9375rem;
    position: absolute;
    top: 16.6875rem;
    left: 19.3125rem;
}

.part1-img1 {
    width: 11.125rem;
    height: 9.1875rem;
    position: absolute;
    top: 5.125rem;
    left: 50.8125rem;
}

.part1-img2 {
    width: 74.875rem;
    height: 51.4375rem;
    position: absolute;
    top: 5.125rem;
    left: 50.8125rem;
}

.part1-img3 {
    width: 46.0625rem;
    height: 52.1875rem;
    position: absolute;
    top: 23.875rem;
    left: 9.5625rem;
}

.part1-img4 {
    width: 23.625rem;
    height: 23.875rem;
    position: absolute;
    top: 37.4375rem;
    left: 93.9375rem;
}

.circular-section {
    background: #5EC0C4;
}

.circular-content {
    box-sizing: border-box;
    height: 24.25rem;
    position: relative;
}

.part2-title {
    width: 35.625rem;
    height: 6.125rem;
    position: absolute;
    top: 9.0625rem;
    left: 62rem;
}


.product-showcase {
    background: #F5CC2A;
}

.showcase-content {
    position: relative;
    height: 153.5625rem;
}

.part3-title {
    width: 22.625rem;
    height: 8.375rem;
    position: absolute;
    top: 8.5938rem;
    left: 29.5625rem;
}

.part3-title2 {
    width: 59.25rem;
    height: 13.375rem;
    position: absolute;
    top: 15.9375rem;
    left: 21.25rem;
}

.part3-text {
    background: url(../images/pc/map/part3-text-bg.png) no-repeat center center;
    background-size: 100% 100%;
    width: 30rem;
    height: 23.4375rem;
    position: absolute;
    top: 30.625rem;
    left: 21.6875rem;
    text-align: center;
}

.part3-text-content {
    position: absolute;
    top: 8.4063rem;
    left: 6.125rem;
}

.part3-text p {
    font-family: Noto Sans CJK TC;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.875rem;
    letter-spacing: .05rem;
    text-align: center;
    color: var(--text-dark);
}

.part3-text p:first-of-type {
    color: #fff;
}

.part3-img1 {
    width: 19.125rem;
    height: 20.625rem;
    position: absolute;
    top: 13.25rem;
    left: 2.125rem;
}

.part3-img2 {
    width: 21.875rem;
    height: 21.9375rem;
    position: absolute;
    top: 2.8125rem;
    left: 93.4375rem;
}

.part3-img3 {
    width: 22.75rem;
    height: 10.3125rem;
    position: absolute;
    top: 52.3125rem;
    left: 45.1875rem;
}

.part3-img4 {
    width: 34rem;
    height: 31.9375rem;
    position: absolute;
    top: 31.25rem;
    left: 66.75rem;
}

.part3-img5 {
    width: 5.5rem;
    height: 5.5rem;
    position: absolute;
    top: 47rem;
    left: 63.375rem;
}

.part3-img6 {
    width: 8.875rem;
    height: 8.875rem;
    position: absolute;
    top: 31.3125rem;
    left: 93.3125rem;
}

.part3-img7 {
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 65.1875rem;
    left: 78.3125rem;
}

.part3-img8 {
    width: 2.375rem;
    height: 2.875rem;
    position: absolute;
    top: 65.375rem;
    left: 81.625rem;
}

.part3-img9 {
    width: 16.0625rem;
    height: 7.625rem;
    position: absolute;
    top: 61.25rem;
    left: 85.625rem;
}

.part3-img10 {
    width: 20.3125rem;
    height: 20.125rem;
    position: absolute;
    top: 60.375rem;
    left: 7.4375rem;
}

.part3-img11 {
    width: 24.375rem;
    height: 33.5625rem;
    position: absolute;
    top: 49.5625rem;
    left: 95.625rem;
}

.part4-img1 {
    width: 15rem;
    height: 14.375rem;
    position: absolute;
    top: 74.625rem;
    left: 40.5625rem;
}

.part4-img2 {
    width: 15.1875rem;
    height: 14.375rem;
    position: absolute;
    top: 85.4375rem;
    left: 48.75rem;
    z-index: 10;
}

.part4-img3 {
    width: 12.375rem;
    height: 11.5625rem;
    position: absolute;
    top: 89.1875rem;
    left: 64.625rem;
    z-index: 10;
}

.part4-img4 {
    width: 41.75rem;
    height: 7.6875rem;
    position: absolute;
    top: 95.3125rem;
    left: 41.1875rem;
}

.part4-img5 {
    width: 15.875rem;
    height: 15.875rem;
    position: absolute;
    top: 111.8125rem;
    left: 26.75rem;
}

.part4-img6 {
    width: 11.875rem;
    height: 11.5rem;
    position: absolute;
    top: 111.8125rem;
    left: 66.5rem;
}

.part4-img7 {
    width: 13.75rem;
    height: 10.3125rem;
    position: absolute;
    top: 100rem;
    left: 94.6875rem;
}

@media screen and (max-width: 48rem) {

    .hero-content {
        height: 41.25rem;
    }

    .part1-title {
        width: 11.125rem;
        height: 4rem;
        position: absolute;
        top: 22.75rem;
        left: 2.4375rem;
    }

    .part1-title2 {
        display: none;
    }

    .part1-img1 {
        width: 5.0625rem;
        height: 4.375rem;
        position: absolute;
        left: 1.5rem;
        top: .5rem;
    }

    .part1-img2 {
        width: 23.4375rem;
        height: 21.25rem;
        position: absolute;
        right: 0;
        left: auto;
        top: .5625rem;
    }

    .part1-img3 {
        width: 20.125rem;
        height: 23.5rem;
        position: absolute;
        left: 0;
        top: 25.9375rem;
    }

    .part1-img4 {
        width: 5.375rem;
        height: 5.375rem;
        position: absolute;
        left: 17.125rem;
        top: 18.6875rem;
    }

    .circular-content {
        height: 25rem;
    }

    .part2-title {
        width: 17.5rem;
        height: 6rem;
        position: absolute;
        top: 11.875rem;
        left: 3rem;
    }

    .showcase-content {
        height: 99.875rem;
    }

    .part3-img7,
    .part3-img8,
    .part3-img10 {
        display: none;
    }

    .part3-img1 {
        width: 6.1875rem;
        height: 5.875rem;
        position: absolute;
        top: 66.625rem;
        left: 12.75rem;
    }

    .part3-img2 {
        width: 6.1875rem;
        height: 7.5625rem;
        position: absolute;
        top: 39.125rem;
        left: 0;
    }

    .part3-img3 {
        width: 4.375rem;
        height: 7.375rem;
        position: absolute;
        top: 32.0625rem;
        left: 1.0625rem;
    }

    .part3-img4 {
        width: 13.0625rem;
        height: 12.3125rem;
        position: absolute;
        top: 32.3125rem;
        left: 9.1875rem;
    }

    .part3-img5 {
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: 38.125rem;
        left: 8.25rem;
    }

    .part3-img6 {
        width: 3.4375rem;
        height: 3.4375rem;
        position: absolute;
        top: 32.875rem;
        left: 19.375rem;
    }

    .part3-img9 {
        width: 8.75rem;
        height: 2.8125rem;
        position: absolute;
        top: 43.625rem;
        left: 12.8125rem;
    }

    .part3-img11 {
        width: 6.1875rem;
        height: 7.9375rem;
        position: absolute;
        top: 45.5rem;
        left: auto;
        right: 0;
    }

    .part3-title {
        width: 14.25rem;
        height: 4.4375rem;
        position: absolute;
        top: 3.75rem;
        left: 3.0625rem;
    }

    .part3-title2 {
        display: none;
    }

    .part3-title2-1 {
        width: 17rem;
        height: 4.5rem;
        position: absolute;
        top: 8.9063rem;
        left: 2.375rem;
    }

    .part3-title2-2 {
        width: 12rem;
        height: 3.375rem;
        position: absolute;
        top: 13.6875rem;
        left: 9.0625rem;
    }

    .part3-text {
        width: 20.875rem;
        height: 16.4375rem;
        position: absolute;
        top: 17.25rem;
        left: 0;
        background-image: url(../images/mobile/map/part3-text-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .part3-text-content {
        top: 5.75rem;
        left: 2rem;
        transform: rotate(-7.5deg);
    }

    .part3-text p {
        font-weight: 400;
        font-size: .75rem;
        line-height: 1.25rem;
        letter-spacing: .05rem;
    }


    .part4-img1 {
        width: 5.6875rem;
        height: 5.25rem;
        position: absolute;
        top: 51.25rem;
        left: 3.9375rem;
    }

    .part4-img2 {
        width: 5.625rem;
        height: 5.3125rem;
        position: absolute;
        top: 55.25rem;
        left: 6.9375rem;
    }

    .part4-img3 {
        width: 4.5625rem;
        height: 4.3125rem;
        position: absolute;
        top: 56.1875rem;
        left: 13.25rem;
    }   

    .part4-img4 {
        width: 15.3125rem;
        height: 2.8125rem;
        position: absolute;
        top: 58.8125rem;
        left: 4.1875rem;
    }   

    .part4-img5,
    .part4-img6,
    .part4-img7 {
        display: none;
    }
}

@media screen and (min-width: 48rem) {

    .part3-title2-1,
    .part3-title2-2 {
        display: none;
    }
}

/* ================= 地圖頁進入視口動畫 ================= */
.part2-title,
.part3-text,
.part3-img4,
.part4-img1 {
    opacity: 0;
    transform: translateY(2.5rem);
}

.part2-title.in-view,
.part3-text.in-view,
.part3-img4.in-view,
.part4-img1.in-view {
    animation: fadeUpMap 4s ease forwards;
}

@keyframes fadeUpMap {
    0% {
        opacity: 0;
        transform: translateY(2.5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}