body,
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: Noto Sans TC;
    font-size: 20px;
}

p {
    margin: 0;
    padding: 0;
}

.hr {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #707070, #70707000);
    /*transform: rotate(135deg);*/
    margin: 80px 0;
}


/*--- section bg:區塊背景 ---*/
.section-01-bg {
    background-image: linear-gradient(to bottom, #edafa1 60%, #fff6ef 70%);
}

.section-02-bg {
    position: relative;
    background-color: #fff6ef;
}

.section-04-bg {
    position: relative;
    background-image: linear-gradient(to bottom, #ffe3dd 65%, #fff 65%);
    overflow-x: unset;
}

.section-04-bg:before {
    content: '';
    position: absolute;
    top: -220px;
    width: 100vw;
    height: 459px;
    background-image: url(../img/bg-section-04.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.section-03-bg,
.section-06-bg {
    width: 100vw;
    background-image: url(../img/bg-section-03.png);
}

.section-05-bg,
.section-07-bg {
    position: relative;
}

.section-06-bg {
    position: relative;
    top: -120px;
}

.section-07-bg {
    overflow-x: unset;
    top: -200px;
}

.section-07-bg:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100vw;
    height: 120%;
    background-color: #ffd5cc;
}

/*--- section img:背景 ---*/
.section-01,
.section-02,
.section-03,
.section-04,
.section-05,
.section-06,
.section-07 {
    display: block;
    width: 100%;
    max-width: 1305px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 10;
}

.section-01 {
    height: 1439px;
    background-image: url(../img/section-01.png);
}

.section-02 {
    height: 1446px;
    background-image: url(../img/section-02.png);
}

.section-03 {
    height: 1593px;
    background-image: url(../img/section-03.png);
}

.section-04 {
    height: 1898px;
    background-image: url(../img/section-04.png);
}

.section-05 {
    height: 1692px;
    background-image: url(../img/section-05.png);
}

.section-06 {
    height: 1793px;
    background-image: url(../img/section-06.png);
}

.section-07 {
    position: relative;
    top: -115px;
    height: 1235px;
    background-image: url(../img/section-07.png);
}


/*--- popup ---*/
.popup {
    display: flex;
    position: fixed;
    top: 5%;
    background-color: rgba(254, 254, 254, 1);
    border-radius: 40px;
    height: 90vh;
    width: 80vw;
    z-index: 100;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.popup img {
    border-radius: 40px 0 0 40px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pop-img {
    position: relative;
    width: 60%;
}

.pop-img::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 90vh;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    z-index: 10;
}

.popup-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30%;
    padding: 40px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0.1em;
    color: rgba(67, 67, 67, 1);
}

.popup-text.popup-2 {
    align-items: center;
    width: 40%;
    margin: 40px;
    background-image: url(../img/bg-popup.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* 背景遮罩 */
.popup-overlay {
    display: none;
    position: fixed;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.popup-overlay.d-flex {
    display: flex;
}

/* 彈出視窗 */
.popup-content {
    width: 300px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.card-block {
    width: 100%;
    position: relative;
    padding: 40px;
    background-color: rgba(254, 254, 254, 1);
    box-shadow: 5px 2px 8px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    border-radius: 40px;
}

.card-tag {
    position: absolute;
    border-radius: 16px;
    top: -24px;
    left: 0;
    font-size: 18px;
    color: rgba(254, 254, 254, 1);
    font-weight: 400;
    line-height: 32.4px;
    letter-spacing: 0.1em;
    padding: 8px 24px;
    background-color: rgba(221, 150, 180, 1);
    box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

/*--- text ---*/
.fz-24 {
    font-size: 24px;
}

.fz-28 {
    font-size: 28px;
}

.color-1 {
    color: rgba(161, 132, 193, 1)
}

.text-en {
    font-family: Lato;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.1em;
    margin-top: 40px;
}


.text-name {
    font-weight: 500;
    line-height: 50.4px;
    letter-spacing: 0.1em;
}

/*--- 套件:slider ---*/
.slick-arrow {
    position: absolute;
    transform: none;
    top: 30%;
    z-index: 9;
    width: 80px;
    height: 80px;
    border: 1px solid transparent;
    border-radius: 100%;
    cursor: pointer !important;
}

.slick-arrow::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-right: 4px solid #3b3b3b;
    border-bottom: 4px solid #3b3b3b;
    top: 26px;
    border-radius: 4px;
    opacity: 1;
}

.slick-arrow.slick-prev {
    left: 40px;
    background: rgba(255, 255, 255, 0.4)
}

.slick-arrow.slick-prev::before {
    left: 40%;
    transform: rotate(135deg);

}

.slick-arrow.slick-next {
    right: 40px;
    background: rgba(255, 255, 255, 0.4)
}

.slick-arrow.slick-next::before {
    right: 40%;
    transform: rotate(-45deg);
}

.slick-arrow.slick-disabled {
    display: none !important;
}

.slick-arrow:hover::before {
    opacity: 1;
}

.slick-section-04.slick-slider {
    display: flex !important;
    justify-content: center !important;
    position: relative;
    top: 20%;
    padding: 0;
}

.slick-section-04 .slick-list {
    width: calc(100% - 100px);
}

.slick-initialized .slick-slide {
    display: flex;
    justify-content: center;
}

/* 圖片容器 */
.slick-section-04 .image-container {
    position: relative;
    width: 360px;
    height: 360px;
    border-radius: 50%; /* 圓形 */
    overflow: hidden; /* 隱藏超出範圍的部分 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 內層邊框 */
    padding: 10px; /* 內層邊框的寬度 */
    background-color: #fff; /* 內層邊框顏色 */
    z-index: 1;
}

/* 外層漸層邊框 */
.slick-section-04 .image-container::before {
    content: "";
    position: absolute;
    top: -10px; /* 外層邊框的寬度 */
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    padding: 10px;
    background: linear-gradient(180deg, #E8907C, #ECC480); /* 漸層色 */
    z-index: -1; /* 放在圖片後面 */
}

/* 圓形圖片 */
.slick-section-04 .image-container img {
    width: 90%;
    height: 90%;
    border-radius: 50%; /* 圓形圖片 */
    outline: 20px solid #ffe3dd;
    object-fit: cover;
    object-position: center;
}

.slick-list {
    width: 80%;
}

.slick-section-06 {
    display: flex;
    justify-content: center;
    top: 25%;
}

.slick-track {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slick-section-06 .image-container img {
    width: 120%;
    height: auto;
    object-fit: cover;
    filter: contrast(0.5);
}

.slick-section-06 .image-container.slick-current + .slick-active img {
    width: 140%;
    z-index: 1;
    filter: contrast(1);
}

.slick-section-06 .slick-next.slick-arrow {
    right: 15%;
    top: 40%;
    background: transparent;
}

.slick-section-06 .slick-arrow.slick-prev {
    left: 15%;
    top: 40%;
    background: transparent;
}

.slick-section-06 .slick-arrow::before {
    width: 64px;
    height: 64px;
    border-right: 20px solid #fff;
    border-bottom: 20px solid #fff;
}

@media (max-width: 768px) {
    .slick-section-04 .slick-arrow {
        width: 48px;
        height: 48px;
    }

    .slick-section-04 .slick-arrow.slick-prev {
        left: 8px;
    }

    .slick-section-04 .slick-arrow.slick-next {
        right: 8px;
    }

    .slick-arrow::before {
        width: 14px;
        height: 14px;
        border-right: 2px solid #A8B1BA;
        border-bottom: 2px solid #A8B1BA;
        top: 16px;
        border-radius: 2px;
    }

    .slick-section-04 .slick-list {
        width: 100%;
    }

    .section-01, .section-02, .section-03, .section-04, .section-05, .section-06, .section-07 {
        background-position: center top;
    }

    .section-01 {
        height: 900px;
    }

    .section-02 {
        height: 900px;
    }

    .section-03 {
        height: 980px;
    }

    .section-04 {
        height: 1280px;
        background-position: center;
    }

    .slick-section-04 .image-container {
        scale: .7;
        /*top: -80px;*/
    }

    .section-04-bg:before {
        top: -40px;
    }

    .section-05 {
        height: 1000px;
    }

    .section-06 {
        height: 1640px;
    }

    .section-06-bg {
        top: 0;
    }

    /*.section-07 {*/
    /*    height: 400px;*/
    /*}*/
    .slick-section-06 {
        /*top: 200px;*/
        /*left: -20px;*/
    }

    .slick-section-06 .slick-next.slick-arrow {
        right: 10%;
    }

    .section-07-bg:after {
        height: 600px;
        top: 200px;
    }

    .section-07 {
        height: 800px;
    }

    .section-07-bg {
        top: 0;
    }

    .slick-section-06 .slick-arrow::before {
        width: 24px;
        height: 24px;
        border-right: 10px solid #fff;
        border-bottom: 10px solid #fff;
    }


    .slick-section-06 .image-container img {
        width: 140%;
        height: auto;
        object-fit: contain;
        filter: contrast(0.5);
    }

    .slick-section-06 .image-container.slick-current + .slick-active img {
        width: 200%;
        z-index: 1;
        filter: contrast(1);
    }
}

@media (max-width: 540px) {
    .slick-section-04 .slick-arrow {
        width: 48px;
        height: 48px;
    }

    .slick-section-04 .slick-arrow.slick-prev {
        top: 40px;
    }

    .slick-section-04 .slick-arrow.slick-next {
        top: 40px;
    }

    .slick-arrow::before {
        width: 14px;
        height: 14px;
        border-right: 2px solid #A8B1BA;
        border-bottom: 2px solid #A8B1BA;
        top: 16px;
        border-radius: 2px;
    }

    .slick-section-04 .slick-list {
        width: 100%;
    }

    .section-01, .section-02, .section-03, .section-04, .section-05, .section-06, .section-07 {
        background-position: center top;
    }

    .section-01 {
        height: 580px;
    }

    .section-02 {
        height: 580px;
    }

    .section-03 {
        height: 580px;
    }

    .section-04 {
        height: 720px;
        background-position: center;
    }

    .slick-section-04 .image-container {
        scale: .4;
        top: -80px;
    }

    .section-04-bg:before {
        top: -30px;
        background-size: contain;
    }

    .section-05 {
        height: 540px;
    }

    .section-06 {
        height: 940px;
    }

    .section-07 {
        height: 400px;
    }

    .slick-section-06 {
        top: 200px;
        left: -20px;
    }

    .section-07-bg:after {
        height: 200px;
    }

    .slick-section-06 .slick-arrow::before {
        width: 24px;
        height: 24px;
        border-right: 10px solid #fff;
        border-bottom: 10px solid #fff;
    }


    .slick-section-06 .image-container img {
        width: 140%;
        height: auto;
        object-fit: cover;
        filter: contrast(0.5);
    }

    .slick-section-06 .image-container.slick-current + .slick-active img {
        width: 200%;
        z-index: 1;
        filter: contrast(1);
    }

    .slick-section-06 .slick-next.slick-arrow {
        right: 16px;
    }

    .popup {
        width: 85vw;
        flex-direction: column;
        overflow-y: auto;
    }

    .pop-img {
        width: 100%;
    }

    .popup img {
        border-radius: 40px 40px 0 0;
    }

    .pop-img::after {
        width: 100%;
        height: 80px;
        top: unset;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    }

    .popup-text {
        padding: 40px 24px;
        width: calc(100% - 48px);
    }
}

@media (max-width: 400px) {
    .section-01 {
        height: 440px;
    }

    .section-02 {
        height: 440px;
    }

    .section-03 {
        height: 440px;
    }
}