body {
    margin: 0;
}

main {
    background: #B0C4D6;
    background-image: url(../../Images/Gold/Sos/box_bg.png);
    background-position: center 0;
    min-height: 100vh;
    padding-top: 65px;
    min-width:1000px;
}

main img{
    display: block;
    margin: 0 auto;
}

.box01 {
    margin: 44px auto 0;
}

.box01 img{
    max-width:1000px;
}


.box02, .box03, .box04, .box05, .box06, .box14 {
    margin: 0 0 128px;
}
 .box08, .box09, .box10, .box11, .box12, .box13, .box15, .box16, .box17, .box18{
     margin:128px 0;
 }

 .box18{
     margin-bottom:0;
 }

.box07 {
    position: relative;
    background-image: url(../../Images/Gold/Sos/box_bg02.png);
    background-position: center center;
    height: 100vh;
    overflow: hidden;
    padding-top:44px;
}

    .box07 .title {
        position: absolute;
        left: 50%;
        top: 40px;
        transform: translateX(-50%);
        z-index: 2;
    }

    .box07 .btn {
        position: absolute;
        left: 50%;
        top: 220px;
        transform: translateX(-50%);
        z-index: 2;
        opacity: 0; /* 初始不可見 */
        transition: opacity 0.3s ease-in-out;
    }

        .box07 .btn.active {
            opacity: 1; /* 顯示當前按鈕 */
        }

        .box07 .btn{
            width:65vh
        }

        .box07 .parallax-images img {
            width: 55vh
        }

.parallax-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .parallax-images .img {
        position: absolute;
        top: 65%;
        transform: translate(-50%,-50%) translate3d(0,0,0) !important;
        left: 50%;
        height: auto;
        transform: translate(-50%, -50%);
        opacity: 0; /* 初始不可見 */
        transition: opacity 0.3s ease-in-out;
    }

        .parallax-images .img.active {
            opacity: 1; /* 顯示當前圖片 */
        }

.box14 {
    position: relative;
}

    .box14 .link-box {
        position: absolute;
        bottom: 235px;
        left: 50%;
        transform: translateX(-50%);
        width: 730px;
        height: 45px;
    }

    .box14 a {
        position: absolute;
        bottom: 0;
        width: 120px;
        height: 45px;
    }

    .box14 .kids {
        left: 85px;
    }

    .box14 .adults {
        left: 233px;
    }

    .box14 .mature {
        left: 383px;
    }
        .box15{
            position:relative;
        }

            .box15 .link-box {
                position: absolute;
                bottom: 60px;
                left: 50%;
                transform: translateX(-50%);
                width: 660px;
                height: 230px;
            }

            .box15 a {
                position: absolute;
                bottom: 0;
                width: 125px;
                height: 235px;
            }

            .box15 .location {
                left: 50px;
            }
            .box15 .gobuy {
                left: 250px;
                width:150px;
            }
            .box15 .phone {
                left: 435px;
                width: 175px;
            }

.title img {
    display:none;
}

.box17 {
    position: relative;
    background-image: url(../../Images/Gold/Sos/box01_img17.png);
    background-position: center center;
    height: 1200px;
}

.box17 a{
    position:absolute;
    bottom:83px;
    left:50%;
    transform:translateX(-50%);
    width:532px;
    height:75px;
}

.box18 {
    position: relative;
}

.box18 .link-box{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-wrap:wrap;
    gap:48px;
    width:100%;
    max-width:653px;
    padding-top:185px;
}

.box18 .link-box a {
    height:215px;
    width:100%;
}

.FAQ {
    position:relative;
    background: #D9E4ED;
    /*height: 1200px;*/
    padding:96px 0;
}

.FAQ img{
    position:absolute;
    left:50%;
    top:96px;
    transform:translateX(-50%)
}

.faq-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-top:115px;
    font-family: Arial, sans-serif;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-title {
    display:flex;
    align-items:center;
    min-height:44px;
    padding-left: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
    color: #4C6774;
    font-size: 20px;
    font-weight: bolder;
    border-bottom: 1px solid #4C677480;
}

.faq-content {
    padding-top: 8px;
    padding-left: 27px;
    font-size: 18px;
    font-weight: bolder;
    color: #4A4A4A;
    line-height: 1.5;
    max-height: 0; /* 初始高度為 0 */
    overflow: hidden; /* 隱藏多餘內容 */
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-content {
    max-height: 300px; /* 根據內容高度調整 */
}

.box11 img{
  width: 50%;
}

@media (max-width: 576px) {
    main {
        padding-top: 1px;
        min-width:initial;
    }

    .box01{
        margin:72px 0 0;
    }

    .box02 img, .box03 img, .box04 img, .box05 img, .box06 img, .box08 img, .box09 img, .box10 img, .box11 img, .box12 img, .box13 img, .box14 img, .box15 img, .box16 img, .box18 img {
        width: 90%;
    }

    .box14 .link-box {
        width: 100%;
        bottom: 117px;
    }

    .box14 a {
        width: 80px;
        height: 30px;
        top: 0;
    }

    .box14 .kids {
        left: 103px;
    }

    .box14 .mature {
        left: 274px;
    }

    .box14 .adults {
        left: 185px;
    }


    .box15 .link-box {
        bottom: 30px;
        width: 100%;
        height: 130px;
    }

        .box15 a {
            position: absolute;
            bottom: 0;
            width: 85px;
            height: 130px;
        }

        .box15 .location {
            left: 50px;
        }

        .box15 .gobuy {
            left: 160px;
            width: 100px;
        }

        .box15 .phone {
            left: 270px;
            width: 105px;
        }

    .title img {
        display: block;
        width: 90%;
        margin: 50px auto 30px;
    }

    .box17 {
        background: url(../../Images/Gold/Sos/mb_box01_img17.png?01) no-repeat;
        background-size: contain;
        height: 687px;
    }

        .box17 a {
            bottom: 73px;
            width: 297px;
            height: 35px;
        }

    .box18 .link-box {
        gap: 33px;
        padding-top: 170px;
        width:88%;
    }

        .box18 .link-box a {
            height: 125px;
        }

    .box02 {
        margin: 34px 0;
    }


    .box03, .box04, .box05, .box06 {
        margin: 60px 0;
    }

    .box09, .box13, .box17, .box18 {
        margin: 0;
    }

        .box01 img, .box12 img, .box18 img {
            width: 100%
        }


    .box07 {
        padding: 70px 0;
    }

    .box07 .btn {
        width: 90%;
        top:190px;
    }

        .box07 picture:first-child img {
            width: auto;
        }

    .box07 .parallax-images .img {
        width: 90%;
        top: 65%;
    }

    .FAQ{
        padding:60px;
    }

    .faq-container{
        padding-top:135px;
    }

    .faq-title {
        font-size: 14px;
    }
    .faq-content {
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .box14 a {
        width: 70px;
        height: 30px;
        top: 0;
    }

    .box14 .kids {
        left: 56px;
    }

    .box14 .mature {
        left: 225px;
    }

    .box14 .adults {
        left: 139px;
    }



}

@media (max-width: 414px) {
/*    .box02 img, .box09 img, .box10 img, .box11 img, .box13 img, .box14 img, .box15 img, .box16 img, .box17 img {
        width: 100%;
    }
*/
    .box17 a {
        bottom: 95px;
    }

    .box18 .link-box {
        gap: 27px;
        padding-top: 160px;
    }
}
@media (max-width: 390px) {
/*    .box02 img, .box09 img, .box10 img, .box11 img, .box13 img, .box14 img, .box15 img, .box16 img, .box17 img {
        width: 100%;
    }*/

    .box14 .link-box{
        bottom:106px;
    }

    .box14 a {
        width: 70px;
        height: 30px;
        top: 0;
    }

    .box14 .kids {
        left: 46px;
    }

    .box14 .mature {
        left: 203px;
    }

    .box14 .adults {
        left: 121px;
    }

    .box15 .location {
        left: 50px;
        width:70px;
    }

    .box15 .gobuy {
        left: 145px;
        width: 95px;
    }

    .box15 .phone {
        left: 240px;
    }

    .box17 a {
        bottom: 129px;
    }
    .box18 .link-box {
        gap: 17px;
        padding-top: 150px;
    }

        .box18 .link-box a {
            height: 125px;
        }
}

@media (max-width: 375px) {

    .parallax-images .img {
        top: 70vh;
    }

    .box07 img {
        width: 90%
    }
    .box05 img, .box08 img {
        width: 100%;
    }

    .box15 .gobuy {
        width: 80px;
    }

    .box15 .phone {
        left: 230px;
    }

    .box17 {
        background-size: contain;
    }
        .box17 a {
            bottom: 150px;
        }
    .box18 .link-box a {
        height: 118px;
    }
}