/*---------------- 動畫 ----------------*/

/* 1. 往下捲動按鈕：持續上下晃動動畫 */
.scroll-down-btn {
    animation: bounceUpDown 1s infinite ease-in-out;
}

@keyframes bounceUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
        /* 晃動的垂直位移距離 */
    }
}

/* 2. b05.png 光線動畫：持續隱現(呼吸)動畫 */
.blurhere {
    animation: breathOpacity 2s infinite ease-in-out;
}

@keyframes breathOpacity {

    0%,
    100% {
        opacity: 0;
        /* 最隱形時的透明度，可依需求調整 */
    }

    50% {
        opacity: 1;
        /* 最顯現時的透明度 */
    }
}


/*---------------- 表單寬度 ----------------*/

.formw {
    width: 70% !important;
}

@media only screen and (max-width: 576px) {
    .formw {
        width: 90% !important;
    }
}

/*---------------- i ----------------*/

.ibg {
    width: 100%;
}

.i03 {
    position: absolute;
    left: 9.46%;
    top: 16.76%;
    width: 6.62%;
    z-index: 2;
}

.i04 {
    position: absolute;
    left: 9.38%;
    top: 72.02%;
    width: 19.80%;
    z-index: 2;
}

.i05 {
    position: absolute;
    left: 49.78%;
    top: 16.52%;
    width: 41.11%;
    z-index: 2;
}

.i03m {
    position: absolute;
    left: 20.66%;
    top: 7.08%;
    width: 13.79%;
    z-index: 2;
}

.i05m {
    position: absolute;
    left: 20.80%;
    top: 12.57%;
    width: 57.52%;
    z-index: 2;
}

.i04m {
    position: absolute;
    left: 22.20%;
    top: 86.98%;
    width: 55.46%;
    z-index: 2;
}

/*---------------- h ----------------*/

.hbg {
    width: 100%;
}

.h01 {
    position: absolute;
    left: 16.91%;
    top: 16.16%;
    width: 29.92%;
    z-index: 2;
}

.h02 {
    position: absolute;
    left: 71.21%;
    top: 23.18%;
    width: 12.05%;
    z-index: 2;
}

.h03 {
    position: absolute;
    left: 16.63%;
    top: 57.67%;
    width: 10.37%;
    z-index: 2;
}

.h04 {
    position: absolute;
    left: 34.67%;
    top: 57.67%;
    width: 10.08%;
    z-index: 2;
}

.h05 {
    position: absolute;
    left: 53.47%;
    top: 57.67%;
    width: 8.41%;
    z-index: 2;
}

.h06 {
    position: absolute;
    left: 67.86%;
    top: 57.67%;
    width: 15.17%;
    z-index: 2;
}

.i01 {
    position: absolute;
    left: 16.74%;
    top: 88.71%;
    width: 17.77%;
    z-index: 2;
}

.i02 {
    position: absolute;
    left: 62.30%;
    top: 90.57%;
    width: 21.18%;
    z-index: 2;
}

.h01m {
    position: absolute;
    left: 13.71%;
    top: 10.27%;
    width: 72.36%;
    z-index: 2;
}

.h02m {
    position: absolute;
    left: 13.08%;
    top: 32.59%;
    width: 40.80%;
    z-index: 2;
}

.h03m {
    position: absolute;
    left: 12.39%;
    top: 57.92%;
    width: 29.76%;
    z-index: 2;
}

.h04m {
    position: absolute;
    left: 48.72%;
    top: 57.94%;
    width: 29.07%;
    z-index: 2;
}

.h05m {
    position: absolute;
    left: 12.50%;
    top: 66.84%;
    width: 24.08%;
    z-index: 2;
}

.h06m {
    position: absolute;
    left: 48.81%;
    top: 66.81%;
    width: 43.29%;
    z-index: 2;
}

.i01m {
    position: absolute;
    left: 13.52%;
    top: 81.89%;
    width: 59.07%;
    z-index: 2;
}

.i02m {
    position: absolute;
    left: 13.13%;
    top: 93.05%;
    width: 73.90%;
    z-index: 2;
}

/*---------------- g2 ----------------*/

.g2bg {
    width: 100%;
}

.g05 {
    position: absolute;
    left: 45.63%;
    top: 6.06%;
    width: 8.74%;
    z-index: 2;
}

.g06 {
    position: absolute;
    left: 11.9%;
    top: 12.08%;
    width: 77.01%;
    z-index: 2;
}

.g07 {
    position: absolute;
    left: 12.24%;
    top: 22.47%;
    width: 25.07%;
    z-index: 2;
}

.g08 {
    position: absolute;
    left: 37.93%;
    top: 22.47%;
    width: 25.07%;
    z-index: 2;
}

.g09 {
    position: absolute;
    left: 63.66%;
    top: 22.47%;
    width: 25.07%;
    z-index: 2;
}

.g10 {
    position: absolute;
    left: 12.24%;
    top: 80.48%;
    width: 19.2%;
    transform: scaleY(0.99);
    z-index: 2;
}

.g11 {
    position: absolute;
    left: 12.24%;
    top: 87.2%;
    width: 16%;
    z-index: 2;
}

.g12 {
    position: absolute;
    left: 37.93%;
    top: 80.48%;
    width: 23.5%;
    transform: scaleY(0.99);
    z-index: 2;
}

.g13 {
    position: absolute;
    left: 37.93%;
    top: 87.2%;
    width: 15.8%;
    z-index: 2;
}

.g14 {
    position: absolute;
    left: 63.72%;
    top: 80.48%;
    width: 17%;
    transform: scaleY(0.99);
    z-index: 2;
}

.g15 {
    position: absolute;
    left: 63.72%;
    top: 87.2%;
    width: 18.7%;
    z-index: 2;
}

.g05m {
    position: absolute;
    left: 41.30%;
    top: 1.71%;
    width: 17.33%;
    z-index: 2;
}

.g06m {
    position: absolute;
    left: 4.48%;
    top: 3.32%;
    width: 91.22%;
    z-index: 2;
}

.g07m {
    position: absolute;
    left: 9.60%;
    top: 6.09%;
    width: 81.34%;
    z-index: 2;
}

.g08m {
    position: absolute;
    left: 9.60%;
    top: 37.49%;
    width: 81.34%;
    z-index: 2;
}

.g09m {
    position: absolute;
    left: 9.60%;
    top: 68.8%;
    width: 81.34%;
    z-index: 2;
}

.g10m {
    position: absolute;
    left: 9.98%;
    top: 30.70%;
    width: 61.2%;
    transform: scaleY(0.95);
    z-index: 2;
}

.g11m {
    position: absolute;
    left: 9.98%;
    top: 33.5%;
    width: 51%;
    z-index: 2;
}

.g12m {
    position: absolute;
    left: 9.98%;
    top: 62.00%;
    width: 76%;
    transform: scaleY(0.95);
    z-index: 2;
}

.g13m {
    position: absolute;
    left: 9.98%;
    top: 65%;
    width: 51%;
    z-index: 2;
}

.g14m {
    position: absolute;
    left: 9.98%;
    top: 93.5%;
    width: 54.4%;
    transform: scaleY(0.95);
    z-index: 2;
}

.g15m {
    position: absolute;
    left: 9.98%;
    top: 96.5%;
    width: 59.4%;
    z-index: 2;
}

/*---------------- g ----------------*/

.gbg {
    width: 100%;
}

.g01 {
    position: absolute;
    left: 12.23%;
    top: 7.79%;
    width: 76.53%;
    z-index: 2;
}

.g02 {
    position: absolute;
    left: 44.48%;
    top: 72.26%;
    width: 11.02%;
    z-index: 2;
}

.g03 {
    position: absolute;
    left: 11.66%;
    top: 77.97%;
    width: 76.67%;
    z-index: 2;
}

.g04 {
    position: absolute;
    left: 18.57%;
    top: 89.27%;
    width: 62.83%;
    z-index: 2;
}

.g01m {
    position: absolute;
    left: 9.47%;
    top: 10.19%;
    width: 81.12%;
    z-index: 2;
}

.g02m {
    position: absolute;
    left: 38.90%;
    top: 54.47%;
    width: 22.21%;
    z-index: 2;
}

.g03m {
    position: absolute;
    left: 7.21%;
    top: 61.09%;
    width: 85.79%;
    z-index: 2;
}

.g04m {
    position: absolute;
    left: 8.09%;
    top: 71.73%;
    width: 83.80%;
    z-index: 2;
}

/*---------------- f ----------------*/

.fbg {
    width: 100%;
}

.f01 {
    position: absolute;
    left: 44.62%;
    top: 8.54%;
    width: 10.74%;
    z-index: 2;
}

.f02 {
    position: absolute;
    left: 19.23%;
    top: 18.19%;
    width: 61.54%;
    z-index: 2;
}

.f03 {
    position: absolute;
    left: 22.94%;
    top: 30.86%;
    width: 54.16%;
    z-index: 2;
}

.f04 {
    position: absolute;
    left: 2.44%;
    top: 73.28%;
    width: 34.64%;
    z-index: 2;
}

.f01m {
    position: absolute;
    left: 39.19%;
    top: 13.99%;
    width: 21.62%;
    z-index: 2;
}

.f02m {
    position: absolute;
    left: 15.62%;
    top: 19.29%;
    width: 68.87%;
    z-index: 2;
}

.f03m {
    position: absolute;
    left: 11.26%;
    top: 24.80%;
    width: 77.36%;
    z-index: 2;
}

.f04m {
    position: absolute;
    left: 10.78%;
    top: 85.71%;
    width: 73.93%;
    z-index: 2;
}

/*---------------- e ----------------*/

.ebg {
    width: 100%;
}

.e01 {
    position: absolute;
    left: 27.03%;
    top: 16.22%;
    width: 8.80%;
    z-index: 2;
}

.e02 {
    position: absolute;
    left: 14.11%;
    top: 27.34%;
    width: 34.60%;
    z-index: 2;
}

.e03 {
    position: absolute;
    left: 13.11%;
    top: 42.01%;
    width: 36.66%;
    z-index: 2;
}

.e04 {
    position: absolute;
    left: 54.44%;
    top: 11.13%;
    width: 35.79%;
    z-index: 2;
}

.e01m {
    position: absolute;
    left: 41.22%;
    top: 4.16%;
    width: 17.65%;
    z-index: 2;
}

.e02m {
    position: absolute;
    left: 12.80%;
    top: 9.77%;
    width: 74.41%;
    z-index: 2;
}

.e03m {
    position: absolute;
    left: 4.88%;
    top: 18.01%;
    width: 90.27%;
    z-index: 2;
}

.e04m {
    position: absolute;
    left: 0%;
    top: 44.18%;
    width: 100%;
    z-index: 2;
}

/*---------------- d ----------------*/

.dbg {
    width: 100%;
}

.d01 {
    position: absolute;
    left: 46.02%;
    top: 44.38%;
    width: 8.83%;
    z-index: 2;
}

.d02 {
    position: absolute;
    left: 9.13%;
    top: 48.13%;
    width: 81.75%;
    z-index: 2;
}

.d03 {
    position: absolute;
    left: 18.55%;
    top: 54.10%;
    width: 62.88%;
    z-index: 2;
}

.d04 {
    position: absolute;
    left: 12.22%;
    top: 6.85%;
    width: 76.53%;
    z-index: 2;
}

.d05 {
    position: absolute;
    left: 12.45%;
    top: 61.98%;
    width: 24.71%;
    z-index: 2;
}

.d06 {
    position: absolute;
    left: 38.25%;
    top: 61.98%;
    width: 24.71%;
    z-index: 2;
}

.d07 {
    position: absolute;
    left: 64.05%;
    top: 61.98%;
    width: 24.71%;
    z-index: 2;
}

.d01m {
    position: absolute;
    left: 41.19%;
    top: 14.84%;
    width: 17.68%;
    z-index: 2;
}

.d02m {
    position: absolute;
    left: 4.26%;
    top: 16.54%;
    width: 91.64%;
    z-index: 2;
}

.d03m {
    position: absolute;
    left: 4.84%;
    top: 19.06%;
    width: 90.33%;
    z-index: 2;
}

.d04m {
    position: absolute;
    left: 4.32%;
    top: 2.98%;
    width: 91.51%;
    z-index: 2;
}

.d05m {
    position: absolute;
    left: 16.76%;
    top: 26.35%;
    width: 66.31%;
    z-index: 2;
}

.d06m {
    position: absolute;
    left: 16.76%;
    top: 50.18%;
    width: 66.31%;
    z-index: 2;
}

.d07m {
    position: absolute;
    left: 16.76%;
    top: 74%;
    width: 66.31%;
    z-index: 2;
}

/*---------------- c ----------------*/

.cbg {
    width: 100%;
}

.c01 {
    position: absolute;
    left: 69.86%;
    top: 36.23%;
    width: 10.16%;
    z-index: 2;
}

.c02 {
    position: absolute;
    left: 58.38%;
    top: 44.31%;
    width: 33.13%;
    z-index: 2;
}

.c03 {
    position: absolute;
    left: 58.26%;
    top: 54.56%;
    width: 33.40%;
    z-index: 2;
}

.c04 {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    z-index: 2;
}

.c01m {
    position: absolute;
    left: 38.90%;
    top: 63.38%;
    width: 22.46%;
    z-index: 2;
}

.c02m {
    position: absolute;
    left: 7.16%;
    top: 68.60%;
    width: 85.65%;
    z-index: 2;
}

.c03m {
    position: absolute;
    left: 7.77%;
    top: 73.94%;
    width: 84.44%;
    z-index: 2;
}

.c04m {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

/*---------------- b ----------------*/

.bbg {
    width: 100%;
}

.b01 {
    position: absolute;
    left: 44.69%;
    top: 10.92%;
    width: 10.58%;
    z-index: 2;
}

.b02 {
    position: absolute;
    left: 14.15%;
    top: 19.01%;
    width: 71.70%;
    z-index: 2;
}

.b03 {
    position: absolute;
    left: 14.91%;
    top: 31.69%;
    width: 70.16%;
    z-index: 2;
}

.b04 {
    position: absolute;
    left: 3.67%;
    top: 77.86%;
    width: 34.67%;
    z-index: 2;
}

.b05 {
    position: absolute;
    left: 88.1%;
    top: 44.7%;
    width: 6.2%;
    z-index: 2;
}

.b01m {
    position: absolute;
    left: 41.41%;
    top: 14.02%;
    width: 21.49%;
    z-index: 2;
}

.b02m {
    position: absolute;
    left: 9.90%;
    top: 19.30%;
    width: 80.17%;
    z-index: 2;
}

.b03m {
    position: absolute;
    left: 8.03%;
    top: 24.78%;
    width: 83.82%;
    z-index: 2;
}

.b04m {
    position: absolute;
    left: 10.75%;
    top: 85.68%;
    width: 73.80%;
    z-index: 2;
}

.b05m {
    position: absolute;
    left: 36%;
    top: 38.3%;
    width: 28%;
    z-index: 2;
}

/*---------------- a ----------------*/

.abg {
    width: 100%;
}

.a01 {
    position: absolute;
    left: 5.64%;
    top: 32.31%;
    width: 44.51%;
    z-index: 2;
}

.a02 {
    position: absolute;
    left: 76.23%;
    top: 63.16%;
    width: 15.13%;
    z-index: 2;
}

.a03 {
    position: absolute;
    left: 76.20%;
    top: 68.09%;
    width: 15.23%;
    z-index: 2;
}

.a04 {
    position: absolute;
    left: 66.82%;
    top: 74.70%;
    width: 24.57%;
    z-index: 2;
}

.a05 {
    position: absolute;
    left: 79.43%;
    top: 79.58%;
    width: 11.96%;
    z-index: 2;
}

.a06 {
    position: absolute;
    left: 79.43%;
    top: 83%;
    width: 11.96%;
    z-index: 2;
}

.a01m {
    position: absolute;
    left: 10.79%;
    top: 17%;
    width: 73.91%;
    z-index: 2;
}

.a02m {
    position: absolute;
    left: 42.43%;
    top: 67.80%;
    width: 50.84%;
    z-index: 2;
}

.a03m {
    position: absolute;
    left: 42.43%;
    top: 72.06%;
    width: 50.90%;
    z-index: 2;
}

.a04m {
    position: absolute;
    left: 10.96%;
    top: 77.79%;
    width: 82.34%;
    z-index: 2;
}

.a05m {
    position: absolute;
    left: 53.20%;
    top: 82.04%;
    width: 40.14%;
    z-index: 2;
}

.a06m {
    position: absolute;
    left: 53.20%;
    top: 86%;
    width: 40.14%;
    z-index: 2;
}

@media screen and (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape) {
  .a01 {
    position: absolute;
    left: 5.64%;
    top: 32.31%;
    width: 44.51%;
    z-index: 2;
}

.a02 {
    position: absolute;
    left: 76.23%;
    top: 63.16%;
    width: 15.13%;
    z-index: 2;
}

.a03 {
    position: absolute;
    left: 76.20%;
    top: 67.09%;
    width: 15.23%;
    z-index: 2;
}

.a04 {
    position: absolute;
    left: 66.82%;
    top: 71.70%;
    width: 24.57%;
    z-index: 2;
}

.a05 {
    position: absolute;
    left: 79.43%;
    top: 75.5%;
    width: 11.96%;
    z-index: 2;
}

.a06 {
    position: absolute;
    left: 79.43%;
    top: 78.5%;
    width: 11.96%;
    z-index: 2;
}
}

@media screen and (min-width: 744px) and (max-width: 991px) {
  .a01m {
    position: absolute;
    left: 10.79%;
    top: 15%;
    width: 73.91%;
    z-index: 2;
}

.a02m {
    position: absolute;
    left: 42.43%;
    top: 58.80%;
    width: 50.84%;
    z-index: 2;
}

.a03m {
    position: absolute;
    left: 42.43%;
    top: 65.06%;
    width: 50.90%;
    z-index: 2;
}

.a04m {
    position: absolute;
    left: 10.96%;
    top: 73.79%;
    width: 82.34%;
    z-index: 2;
}

.a05m {
    position: absolute;
    left: 53.20%;
    top: 80.04%;
    width: 40.14%;
    z-index: 2;
}

.a06m {
    position: absolute;
    left: 53.20%;
    top: 85%;
    width: 40.14%;
    z-index: 2;
}
}

/* 核心滿版定位區塊 */
.img-layer-container {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow-y: hidden;
}

/* 網頁寬度 */

.PageWidth {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    overflow: hidden;
}

/*平板橫式*/
@media (orientation: landscape) and (min-width: 576px) and (max-width: 1366px) {
    .PageWidth {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        overflow: hidden;
    }
}

/*平板直式*/
@media (orientation: portrait) and (min-width: 576px) and (max-width: 1366px) {
    .PageWidth {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        overflow: hidden;
    }
}

/*手機直式*/
@media only screen and (max-width: 576px) {
    .PageWidth {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        overflow: hidden;
    }
}

/*---------------- 網頁字型 ----------------*/

body,
button,
input,
select,
textarea,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "メイリオ", "맑은 고딕", sans-serif !important;
}

.Min {
    font-family: "Noto Serif TC", serif !important;
}

a:link.one {
    color: #aaa !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.one {
    color: #aaa !important;
    text-decoration: none !important;
}

a:hover.one {
    color: #ffe282 !important;
    text-decoration: none !important;
}

.TextBlock {
    white-space: nowrap;
    display: inline-block;
}

/*---------------- 回到上方按鈕 ----------------*/

@media only screen and (max-width: 992px) {
    #toTop {
        right: 10px;
        top: 10px !important;
    }
}

/*---------- 社群選單（手機） ----------*/

.MobileCall {
    position: fixed;
    z-index: 2000;
    bottom: 0;
    width: 100%;
    left: 0;
    background-image: linear-gradient(to top, #5a5a5a, #5a5a5a);
    padding: 4px 0 4px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}

/*---------- 表單 ----------*/

.form-control {
    color: #000 !important;
    font-size: 18px !important;
    background-color: rgba(255, 255, 255, 1) !important;
}


.formtext {
    color: #000 !important;
    font-family: "Noto Serif TC", serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

.submitBTN {
    background-color: #2f9304;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    font-size: 1.2em !important;
    letter-spacing: 6px;
    padding: 13px 40px 10px 45px !important;
}

.formboard {
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/*手機直式*/
@media only screen and (max-width: 576px) {
    .submitBTN {
        background-color: #2f9304;
        color: #fff;
        font-weight: bold;
        border-radius: 10px;
        font-size: 1.2em !important;
        letter-spacing: 6px;
        padding: 13px 40px 10px 45px !important;
        width: 100%;
    }
}


/*---------------- owl-carousel-2 ----------------*/

.owl-carousel-2.controlls-over .owl-dots {
    position: absolute;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0) !important;
    border-radius: 4px !important;
    text-align: center !important;
    left: 50%;
    margin: 0 auto !important;
    bottom: 0;
    transform: translate(-50%, 0);
}

.owl-carousel-2 .owl-dots .owl-dot.active span {
    background-color: #fff !important;
}

.owl-carousel-2 .owl-dots .owl-dot span {
    background: rgba(255, 255, 255, 0.6) !important;
    margin: 0 2px 0 2px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 4px !important;
}

/*---------------- Photoswipe ----------------*/

.pswp__counter {
    height: 30px;
    margin: 15px 0 0 20px;
    font-size: 16px !important;
    line-height: 30px;
    color: #000 !important;
    text-shadow: 0 0 0 rgb(255, 255, 255) !important;
    padding: 2px 6px !important;
    background-color: #fff !important;
    opacity: 1;
}

/*---------------- swiperslide ----------------*/
/* --- Swiper 自訂箭頭樣式與定位（完全蓋掉預設藍色箭頭） --- */

/* 1. 徹底隱藏與清除 Swiper 預設的藍色字型箭頭 */
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "" !important;       /* 清空預設的字型編碼 */
    display: none !important;     /* 隱藏偽元素 */
}

.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev,
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
    top: auto !important;         /* 取消原本的垂直置中 */
    margin-top: 0 !important;
    width: 50px !important;        /* 依據你的 SVG 大小調整寬高 */
    height: 50px !important;
    color: transparent !important; /* 確保預設的藍色完全透明不顯示 */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 10 !important;
}

/* 2. 定位右側按鈕（下一張）到右下角 2% */
.swiper-container .swiper-button-next,
.swiper .swiper-button-next {
    right: 20px !important;
    bottom: 30px !important;
    left: auto !important;
}

/* 3. 定位左側按鈕（上一張）到右下角（放在右側按鈕的左邊） */
.swiper-container .swiper-button-prev,
.swiper .swiper-button-prev {
    right: calc(2% + 45px) !important; /* 右側 2% + 按鈕寬度與間距 */
    left: auto !important;             /* 覆蓋原本的 left: 10px */
    bottom: 2% !important;
}

/* 4. 載入你自己的圖示（這裡請確認檔名與副檔名，您先前提到 csv，如果是網頁圖示應為 svg） */
.swiper-container .swiper-button-next,
.swiper .swiper-button-next {
    background-image: url('../images/your-next-icon.svg') !important; 
}

.swiper-container .swiper-button-prev,
.swiper .swiper-button-prev {
    background-image: url('../images/your-prev-icon.svg') !important; 
}

/*---------- modal ----------*/

.modal-content {
    border-top-color: #9e9e9e !important;
    border: 0 !important;
    border-top: #333 0 solid !important;
    -webkit-border-radius: 0 !important;
}

.modal-header {
    padding: 1rem !important;
    border-bottom: 0 solid #e9ecef !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/*---------------- AOS animation ----------------*/

.blurhere {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(0);
    overflow: hidden;
}

.blurLtoR {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(-100px);
    overflow: hidden;
}

.blurRtoL {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(100px);
    overflow: hidden;
}

.blurUtoD {
    filter: blur(20px);
    opacity: 0;
    transform: translatey(-100px);
    overflow: hidden;
}

.blurDtoU {
    filter: blur(20px);
    opacity: 0;
    transform: translate(0, 100px);
    overflow: hidden;
}

.blurIn {
    filter: blur(20px);
    opacity: 0;
    transform: scale(0.6);
    overflow: hidden;
}

.blurOut {
    filter: blur(20px);
    opacity: 0;
    transform: scale(1.5);
    overflow: hidden;
}

/* 當 AOS 啟動 (進入畫面) 時，自動加上 .aos-animate */
[data-aos="blur"].aos-animate {
    filter: blur(0);
    opacity: 1;
    transform: translate(0);
    overflow: hidden;
}

.zoomOut {
    opacity: 0;
    transform: scale(2.5);
    overflow: hidden;
}

.zoomIn {
    opacity: 0;
    transform: scale(0.3);
    overflow: hidden;
}

/* 當 AOS 啟動 (進入畫面) 時，自動加上 .aos-animate */
[data-aos="zoom"].aos-animate {
    opacity: 1;
    transform: translate(0);
    overflow: hidden;
}

/*---------- 語法樣板 ----------*/

/*平板橫式
@media (orientation: landscape) and (min-width: 576px) and (max-width: 1366px) {
}

平板直式
@media (orientation: portrait) and (min-width: 576px) and (max-width: 1366px) {
}

手機直式
@media only screen and (max-width: 576px) {
}

.sample code01 {
    width: 100%;
}

.sample code02 {
    position: absolute;
    z-index: 5;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.sample code03 {
    margin-top: 14.5%;
    width: 70%;
}*/

/*---------- 舊的 ----------*/
:root {
    --primary-red: #ae1f25;
    --dark-gray: #222222;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    color: #333;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 80% !important;
}

@media (max-width: 767.98px) {
    .container {
        max-width: 90% !important;
    }
}

/* 影片區塊 */
.video-container {
    position: relative;
    width: 100%;
    background-color: #000;
    line-height: 0;
    height: 100vh;
    /* 滿版高度 */
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 確保影片滿版填滿 */
    display: block;
}

/* 往下箭頭按鈕 與 重播按鈕 的通用基礎樣式 */
.scroll-down-btn,
.video-replay-btn {
    position: absolute;
    bottom: 40px;
    /* 確保兩者在同一水平線上 */
    z-index: 10;
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important;
    border: 0 !important;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
    padding: 0;
}

.scroll-down-btn:hover,
.video-replay-btn:hover {
    background: var(--primary-red);
}

/* 往下箭頭按鈕個別定位與圖示 */
.scroll-down-btn {
    left: 45%;
    transform: translateX(-50%);
}

.scroll-down-btn:hover {
    transform: translateX(-50%) scale(1.2);
}

.scroll-down-btn::after {
    content: '';
    width: 12px;
    height: 12px;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin-top: -4px;
    display: block;
}

/* 右下側播放按鈕個別定位與圖示 */
.video-replay-btn {
    right: 40px;
}

.video-replay-btn:hover {
    transform: scale(1.2);
}

/* 純 CSS 繪製播放三角形圖示 */
.video-replay-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 14px solid #ffffff;
    margin-left: 4px;
    /* 微調三角形居中視覺感 */
}

@media (max-width: 767.98px) {

    .scroll-down-btn,
    .video-replay-btn {
        bottom: 20px;
        /* 手機版也保持水平線 */
        width: 40px;
        height: 40px;
    }

    .video-replay-btn {
        right: 5%;
        /* 手機版靠右間距調整 */
    }

    .scroll-down-btn::after {
        width: 10px;
        height: 10px;
        border-bottom: 2.5px solid #ffffff;
        border-right: 2.5px solid #ffffff;
    }

    .video-replay-btn::after {
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 12px solid #ffffff;
        margin-left: 3px;
    }
}

/* 導覽列 1 (從 section1 開始出現) */
.custom-navbar {
    background-color: var(--primary-red);
    padding: 12px 0;
    z-index: 1040;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 啟動顯現選單 */
.custom-navbar.navbar-show {
    transform: translateY(0);
}

.nav-link-custom {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 5px 0px 5px 20px;
    display: inline-block;
}

/* 行動版底部固定選單樣式 */
@media (max-width: 767.98px) {
    .custom-navbar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        /* 預設隱藏在螢幕下方 */
        transform: translateY(100%) !important;
        padding: 0 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    /* 行動版進入 section1 後滑出 */
    .custom-navbar.navbar-show {
        transform: translateY(0) !important;
    }

    .mobile-nav-row {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .mobile-nav-col {
        padding: 12px 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mobile-nav-col:last-child {
        border-right: none;
    }

    .mobile-nav-col .nav-link-custom {
        padding: 0 !important;
        font-size: 13px;
        line-height: 1.3;
        display: block;
        width: 100%;
    }

    body {
        padding-bottom: 60px;
    }
}

/* 右側滑入選單系統 */
.menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    z-index: 1060;
    background-color: var(--primary-red);
    padding: 40px 0 40px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(120%);
    transition: transform 0.5s cubic-bezier(0.3, 1, 0.3, 1);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
}

.menu-overlay.active {
    transform: translateX(0);
}

.menu-close {
    position: absolute;
    top: 46px;
    right: 46px;
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}

.menu-close:hover {
    color: #fff;
    transform: scale(1.5);
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li {
    margin-bottom: 20px;
    white-space: nowrap;
}

.menu-list a {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 1.5px;
    display: inline-block;
    transition: transform 0.2s, opacity 0.2s;
}

.menu-list a:hover {
    opacity: 0.85;
    transform: translateX(5px);
}

@media (max-width: 767.98px) {
    .menu-overlay {
        width: 100%;
        padding: 20vw 0 20vw 25vw;
    }

    .menu-list li {
        margin-bottom: 5.5vw;
    }

    .menu-list a {
        font-size: 4.5vw;
    }

    .menu-close {
        top: 5%;
        right: 8%;
        font-size: 2.5rem;
    }
}



.abs-layer {
    position: absolute;
    z-index: 2;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.abs-p-layer {
    position: absolute;
    z-index: 2;
    line-height: 2;
    margin: 0;
    padding: 0;
}

.text-red {
    color: var(--primary-red) !important;
}

/* 電腦版絕對定位樣式 (1920px) */
@media (min-width: 768px) {
    .pc-s1-main-title {
        top: 29.7%;
        left: 5.3%;
        font-size: 6.5vw;
        line-height: 1.18;
        color: #000;
        font-family: 'Inter', 'Noto Sans TC', sans-serif;
        font-weight: 500;
        letter-spacing: -0.016em;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .pc-s1-sub-title1 {
        bottom: 33.2%;
        right: 8.1%;
        font-size: 1.8vw;
        font-weight: 600;
        letter-spacing: 0.19em;
        color: #000;
    }

    .pc-s1-sub-title2 {
        bottom: 28.6%;
        right: 8.2%;
        font-size: 1.6vw;
        font-weight: 600;
        letter-spacing: 0.17em;
        color: #000;
    }

    .pc-s1-desc {
        bottom: 22.4%;
        right: 8.2%;
        font-size: 1.4vw;
        font-weight: 600;
        letter-spacing: 0.18em;
        color: #000;
    }

    .pc-s1-coming {
        bottom: 17.2%;
        right: 8.4%;
        font-size: 1.6vw;
        font-700: 700;
        letter-spacing: 0.02em;
        color: #000;
        font-family: 'Inter', sans-serif;
    }

    .pc-s2-tag {
        top: 11.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.2vw;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: red;
    }

    .pc-s2-h2 {
        top: 16.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 4.97vw;
        font-weight: 700;
        letter-spacing: 0.013em;
        color: red;
    }

    .pc-s2-p {
        top: 31%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2vw;
        font-weight: 600;
        width: 100%;
        line-height: 1.5;
        letter-spacing: -0.01em;
        color: red;
        text-align: center;
    }

    .pc-s2-bg-title {
        bottom: 2.9%;
        left: 3.5%;
        font-size: 5.0vw;
        line-height: 1.2;
        color: red;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        letter-spacing: -0.018em;
        -webkit-font-smoothing: antialiased;
    }

    .pc-s3-tag {
        top: 37%;
        left: 75%;
        transform: translateX(-50%);
        font-size: 1.9vw;
        font-weight: 700;
        letter-spacing: 6px;
        color: #000;
    }

    .pc-s3-h2 {
        top: 43%;
        left: 75%;
        transform: translateX(-50%);
        font-size: 2.3vw;
        font-weight: 600;
        letter-spacing: -0.05em;
        color: #000;
    }

    .pc-s3-p {
        bottom: 32.8%;
        right: 8.2%;
        font-size: 1.15vw;
        color: #000;
        font-weight: 600;
        line-height: 1.62;
        text-align: center;
        letter-spacing: -0.005em;
    }

    .pc-s6-tag {
        top: 9.2%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.2vw;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: red;
    }

    .pc-s6-h2 {
        top: 15.8%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 4.97vw;
        font-weight: 700;
        letter-spacing: 0.013em;
        color: red;
    }

    .pc-s6-p {
        top: 30.2%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2vw;
        font-weight: 600;
        width: 54%;
        line-height: 1.55;
        letter-spacing: -0.145em;
        color: red;
        text-align: center;
    }

    .pc-s6-bg-title {
        bottom: 7.3%;
        left: 2%;
        font-size: 5.0vw;
        line-height: 1.2;
        color: red;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        letter-spacing: -0.018em;
        -webkit-font-smoothing: antialiased;
    }
}

/* 手機版絕對定位樣式 (750px) */
@media (max-width: 767.98px) {
    .phone-s1-main-title {
        top: 42.4%;
        left: 47.2%;
        transform: translateX(-50%);
        font-size: 11.2vw;
        line-height: 1.13;
        color: #000;
        text-align: left;
        font-family: 'Inter', 'Noto Sans TC', sans-serif;
        font-weight: 500;
        letter-spacing: -0.05em;
        -webkit-font-smoothing: antialiased;
    }

    .phone-s1-sub-title1 {
        bottom: 29%;
        left: 68.5%;
        transform: translateX(-50%);
        font-size: 6vw;
        font-weight: 600;
        letter-spacing: 0.17em;
        color: #000;
    }

    .phone-s1-sub-title2 {
        bottom: 25%;
        left: 68.5%;
        transform: translateX(-50%);
        font-size: 5.2vw;
        font-weight: 600;
        letter-spacing: 0.19em;
        color: #000;
    }

    .phone-s1-desc {
        bottom: 19.6%;
        left: 52.5%;
        transform: translateX(-50%);
        font-size: 4.6vw;
        font-weight: 600;
        letter-spacing: 0.21em;
        color: #000;
    }

    .phone-s1-coming {
        bottom: 15.2%;
        left: 73.2%;
        transform: translateX(-50%);
        font-size: 5.2vw;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: #000;
        font-family: 'Inter', sans-serif;
    }

    .phone-s2-tag {
        top: 14.4%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 4.5vw;
        font-weight: 700;
        letter-spacing: 0.009em;
        color: #000;
    }

    .phone-s2-h2 {
        top: 18.6%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 5.5vw;
        font-weight: 700;
        letter-spacing: 0.009em;
        color: #000;
        text-align: center;
    }

    .phone-s2-p {
        top: 24.3%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 3.25vw;
        font-weight: 600;
        width: 82vw;
        color: #000;
        text-align-last: center;
        text-align: justify;
        line-height: 1.55em;
    }

    .phone-s2-bg-title {
        bottom: 3.8%;
        left: 10%;
        font-size: 11vw;
        line-height: 1.13;
        color: #000;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        letter-spacing: -0.045em;
        -webkit-font-smoothing: antialiased;
    }

    .phone-s3-tag {
        top: 63.8%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 4.5vw;
        font-weight: 700;
        color: #000;
    }

    .phone-s3-h2 {
        top: 68%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 5.5vw;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #000;
        text-align: center;
        width: 88vw;
    }

    .phone-s3-p {
        top: 73.5%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 3.25vw;
        font-weight: 600;
        width: 83vw;
        color: #000;
        letter-spacing: -0.6px;
        line-height: 1.55em;
    }

    .phone-s6-tag {
        top: 14.3%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 4.5vw;
        font-weight: 700;
        letter-spacing: 0.009em;
        color: #000;
    }

    .phone-s6-h2 {
        top: 18.6%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 5.5vw;
        font-weight: 700;
        letter-spacing: 0.009em;
        color: #000;
        text-align: center;
    }

    .phone-s6-p {
        top: 24.3%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 3.25vw;
        font-weight: 600;
        width: 76vw;
        color: #000;
        text-align-last: center;
        text-align: justify;
        line-height: 1.55em;
        letter-spacing: -0.06em;
    }

    .phone-s6-bg-title {
        bottom: 3.8%;
        left: 10%;
        font-size: 11vw;
        line-height: 1.13;
        color: #000;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        letter-spacing: -0.045em;
        -webkit-font-smoothing: antialiased;
    }
}

.section-padding {
    padding: 5.5vw 0;
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 12vw 0;
    }
}

.section-tag {
    font-size: 1.9vw;
    letter-spacing: 4px;
}

.section-title {
    font-size: 2.3vw;
    font-weight: 700;
}

.section-title2 {
    font-size: 4.8vw;
    font-weight: 700;
    color: #000;
}

.section-title3 {
    font-size: 4.17vw;
    font-weight: 700;
}

.section-desc {
    font-size: 1.0vw;
    font-weight: 600;
    line-height: 1.62;
    text-align: justify;
}

.pictdesc {
    position: absolute;
    left: 40px;
    bottom: 0px;
    font-size: 1vw;
    color: #fff;
    text-shadow: 0 0 10px #000;
}

.pictdesc2 {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 1vw;
    color: #fff;
    text-shadow: 0 0 10px #000;
}

@media (max-width: 767.98px) {
    .section-tag {
        font-size: 3.8vw;
    }

    .section-title {
        font-size: 5.6vw;
        line-height: 1.3;
    }

    .section-desc {
        font-size: 3.5vw;
        text-align: justify;
    }

    .pictdesc {
        position: absolute;
        left: 50px;
        bottom: 0px;
        font-size: 2.5vw;
        text-shadow: 0 0 10px #000;
        color: #fff;
        left: 50%;
        transform: translateX(-50%);
    }

    .pictdesc2 {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 2.5vw;
        color: #fff;
        text-shadow: 0 0 10px #000;
    }
}

.intro-lead-title {
    font-size: 4.2vw;
    line-height: 1.2;
    letter-spacing: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: var(--primary-red);
    text-align: left;
}

.intro-lead-title2 {
    font-size: 3.2vw;
    line-height: 1.2;
    letter-spacing: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: var(--primary-red);
    text-align: left;
}

.intro-lead-p {
    font-size: 1.1vw;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 2px;
    text-align: right;
}

@media (max-width: 767.98px) {
    .intro-lead-title {
        font-size: 11vw;
        margin-bottom: 6vw !important;
    }

    .intro-lead-p {
        font-size: 3.6vw;
        line-height: 1.8;
    }
}

.form-control,
.form-select {
    border-radius: 0;
    border: 1px solid #ccc;
    padding: 12px;
    font-size: 15px;
}

.btn-submit {
    color: var(--primary-red);
    border: 1px solid var(--primary-red);
    border-radius: 10px;
    padding: 10px 30px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 3px;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: #961e22;
    color: #fff;
}

.info-title {
    font-size: 16px;
    color: #9f2927;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.info-content {
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.contact-title {
    font-size: 2.5vw;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--primary-red);
    text-align: left;
}

@media (max-width: 767.98px) {
    .info-title {
        font-size: 3vw;
    }

    .info-content {
        font-size: 3.8vw;
    }
}

.map-container {
    width: 100%;
    height: 450px;
    background-color: #eee;
    border: none;
}

@media (max-width: 767.98px) {
    .map-container {
        height: 75vw;
    }
}

.footer-team-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-red);
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.footer-team-item {
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .footer-team-title {
        font-size: 4vw;
        padding-bottom: 2vw;
        margin-bottom: 4vw;
    }

    .footer-team-item {
        font-size: 3.5vw;
        margin-bottom: 3vw;
    }
}

.back-to-top {
    position: fixed !important;
    bottom: 40px !important;
    right: 40px !important;
    width: 45px !important;
    height: 45px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 999 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important;
    transition: background-color 0.2s;
    transition: background 0.3s, transform 0.3s;
}

.back-to-top::after {
    content: '' !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 3px solid #ffffff !important;
    border-left: 3px solid #ffffff !important;
    transform: rotate(45deg) !important;
    margin-top: 4px !important;
    display: block !important;
}

.back-to-top:hover {
    transform: scale(1.2);
}

@media (max-width: 767.98px) {
    .back-to-top {
        bottom: 60px !important;
        right: 20px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .back-to-top::after {
        width: 10px !important;
        height: 10px !important;
        border-top: 2.5px solid #ffffff !important;
        border-left: 2.5px solid #ffffff !important;
    }
}