/* tablets col-xxl */
@media (max-width: 1400px) {
    .rwd:after{
        content: 'mx1400';
    }
}
/* tablets col-xl */
@media (max-width: 1200px) {
    .rwd:after{
        content: 'mx1200';
    }
}
/* desktops col-lg  */ 
@media (max-width: 992px) {
    .rwd:after{
        content: 'mx992';
    }
    /**/
    /* 調整 header 間距 */
    header .top-bar {
        padding: 25px 20px;
        flex-direction: row-reverse;
    }
    header .top-bar .logo {
        width: 220px; /* 縮小 Logo */
    }
    /* 漢堡按鈕樣式 */
    header .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 100;
    }
    header .menu-toggle span {
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: 0.3s;
    }
    /* 導覽列轉向：側邊滑入選單 */
    header .top-bar nav {
        position: fixed;
        top: 0;
        right: -100%; /* 預設隱藏在右側 */
        width: 280px;
        height: 100vh;
        background-color: #544A3E;
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px;
        gap: 15px;
        transition: 0.4s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
        overflow-y: auto;
    }
    /* 當選單開啟時的狀態 */
    header .top-bar nav.active {
        right: 0;
    }
    header .top-bar nav .item {
        width: 100%;
        padding-bottom: 0;
    }
    header .top-bar nav .item > a {
        font-size: 18px;
        display: block;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    header .top-bar nav .item.social > a {
        padding-bottom: 0px;
        border-bottom: 0px solid rgba(255,255,255,0.1);
    }
    /* 手機版子選單：初始狀態改為高度 0 且隱藏內容 */
    header .top-bar nav .item .sub-item {
        position: static;
        transform: none;
        background-color: transparent;
        padding: 0 0 0 15px; /* 預設 padding-top/bottom 設為 0 */
        
        /* 動畫核心屬性 */
        max-height: 0;        /* 初始高度為 0 */
        opacity: 0;           /* 初始透明度 */
        overflow: hidden;      /* 隱藏溢出的內容 */
        transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
    }
    /* 當父層加上 .open 類別時的展開狀態 */
    header .top-bar nav .item.open .sub-item {
        max-height: 300px;    /* 給一個足以容納內容的高度值（如 300px 或更高） */
        opacity: 1;           /* 變回不透明 */
        padding: 15px 0 15px 15px; /* 展開時再補回間距 */
        transform: translateX(0%) scaleY(1);
    }
    header .top-bar nav .item:hover .sub-item {
        transform: translateX(0%) scaleY(1);
    }
    /* 調整子項目連結的間距，確保動畫過程不突兀 */
    header .top-bar nav .item .sub-item a {
        padding: 8px 0;
        display: block;
    }
    header .top-bar nav .item .sub-item a + a{
        margin-top: 0;
    }
    /* 社交圖示調整 */
    header .top-bar nav .item.social {
        margin-top: 20px;
        justify-content: flex-start;
    }
    /* 右側聯繫按鈕調整 (縮小並靠下) */
    header .contact-item {
        right: 13px;
        top: auto;
        padding: 15px 10px;
    }
    /* 漢堡按鈕變成 X 的動畫 */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /*=============================*/
    /*=============頁尾=============*/
    /*=============================*/

    footer{
        padding: 50px 5% 30px 5%;
    }
    footer .flex{
        display: block;
    }
    footer .flex:nth-child(2){
        display: flex;
        align-items: center;
        font-size: 12px;
    }
    footer .flex > .company{
        margin-bottom: 20px;
    }
    footer .flex .company .copyright{
        line-height: 1.5;
    }
    footer .flex .info{
        text-align: left;
    }
    footer .flex .info .address{
        margin-bottom: 10px;
    }

    /*===========================*/
    /*============文字============*/
    /*===========================*/

    .text-size-lg{
        font-size: var(--px40);
        font-size: 30px;
    }
    .text-size-md{
        font-size: var(--px34);
        font-size: 26px;
    }
    .text-size-sm{
        font-size: var(--px28);
        font-size: 24px;
    }
    .text-size-xs{
        font-size: var(--px22);
        font-size: 20px;
    }
    .text-size-xxs{
        font-size: var(--px16);
        font-size: 14px;
    }

    /**/
    /*=============================*/
    /*=============首頁=============*/
    /*=============================*/

    body.index .kv .t1{
        width: 70%;
    }
    body.index .kv .text{
        position: relative;
        margin-top: -10%;
        z-index: 5;
    }
    body.index .kv .text:after{
        transform: translate(-50%,30px);
    }
    body.index .kv .text h1{
        margin-bottom: 20px;
    }
    body.index .kv .text h1 span{
        width: 30px;
    }
    body.index .kv .text p{
        text-align: center;
        padding: 0 5%;
    }
    body.index .kv .text p br{
        display: none;
    }
    /**/
    body.index .s1{
        padding-top: 30px;
        overflow: hidden;
    }
    body.index .s1 .map-video{
        position: relative;
        width: calc(150% + 100%);
        left: calc((150% / 2) * -1);
    }
    /**/
    body.index .carousel-case .title{
        margin-bottom: 30px;
        padding-left: 5%;
    }
    body.index .carousel-case .slider .right-arr{
        width: 50px;
        top: 50%;
        right: 10%;
        transform: translate(0%,-250%);
    }
    body.index .carousel-case .slider .right-arr:hover{
        transform: translate(0%,-250%);
    }
    body.index .carousel-case .slider .desc-card{
        width: 90%;
        margin-top: -7%;
        transform: translateX(0%);
        padding: 25px;
        padding-top: 40px;
    }
    body.index .carousel-case .slider .desc-card h2{
        margin-bottom: 5px;
    }
    body.index .carousel-case .slider .desc-card h3{
        margin-bottom: 15px;
    }
    body.index .carousel-case .slick-centerMode .item {
        padding: 0 10px;  /* 兩張之間的間距 */
    }
    body.index .s3{
        padding-top: 40px;
    }
    /**/

    /*======================================*/
    /*=============共用=============*/
    /*======================================*/

    body.base .title{
        padding: 20px;
    }
    body.base .breadcrumbs{
        padding: 20px;
        text-align: left;
    }

    /*======================================*/
    /*=============熱銷個案=============*/
    /*======================================*/

    body.best-selling .box{
        display: block;
        margin-top: 30px;
    }
    body.best-selling .menu{
        width: 100%;
        margin-bottom: 30px;
    }
    body.best-selling .menu nav{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    body.best-selling .menu nav .item{
        padding: 10px;
        border-left: 0px;
        border-bottom: 1px solid #F0E4D6;
        width: 20%;
        text-align: center;
    }
    body.best-selling .menu nav .item:nth-child(6){
        width: 100%;
        order: -1;;
    }
    body.best-selling .menu nav .item.fake{
        display: none;
    }
    body.best-selling .menu nav .item.active,
    body.best-selling .menu nav .item:hover{
        border-left: 0px;
        border-bottom: 1px solid #E3AD7C;
    }
    body.best-selling .menu nav .item.fake:hover{
        border-left: 1px solid #F0E4D6;
    }
    body.best-selling .case-block{
        width: 100%;
    }
    body.best-selling .case + .case{
        margin-top: 15%;
    }
    body.best-selling .case .info{
        width: 90%;
    }
    body.best-selling .case .info .case-head{
        margin-bottom: 20px;
    }
    body.best-selling .case .info .info-grid {
        display: block;
        margin-top: 20px;
    }
    body.best-selling .case .info .item + .item{
        margin-top: 10px;
    }

    /*======================================*/
    /*=============即將公開=============*/
    /*======================================*/

    body.coming-soon .con > .title{
        display: flex;
    }
    body.coming-soon .con .breadcrumbs{
        margin-top: 0%;
    }
    body.coming-soon .con .box .title{
        display: none;
    }
    body.coming-soon .con .box .menu{
        display: none;
    }
    body.coming-soon .con .box .menu .g-line{
        display: none;
    }
    body.coming-soon .con .box .case-block{
        width: 100%;
    }

    /*======================================*/
    /*=============歷年實績=============*/
    /*======================================*/

    body.past-achievements .box{
        display: block;
        margin-top: 30px;
    }
    body.past-achievements .menu{
        width: 100%;
        margin-bottom: 30px;
    }
    body.past-achievements .menu nav{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    body.past-achievements .menu nav .item{
        padding: 10px;
        border-left: 0px;
        border-bottom: 1px solid #F0E4D6;
        width: 33.333333%;
        text-align: center;
    }
    body.past-achievements .menu nav .item:nth-child(7){
        width: 100%;
        order: -1;;
    }
    body.past-achievements .menu nav .item.fake{
        display: none;
    }
    body.past-achievements .menu nav .item:hover{
        border-left: 0px;
        border-bottom: 1px solid #E3AD7C;
    }
    body.past-achievements .menu nav .item.fake:hover{
        border-left: 1px solid #F0E4D6;
    }
    body.past-achievements .case-block{
        width: 100%;
    }
    body.past-achievements .case .info{
        margin-top: 20px;
    }
    body.past-achievements .case .info .case-head{
        margin-bottom: 12px;
    }
    body.past-achievements .case .info .info-items .item + .item{
        margin-top: 10px;
    }
    body.past-achievements .case .info .label {
        color: #E3AD7C; /* 深金標題色 */
        white-space: nowrap; /* 防止標題換行 */
        margin-right: 10px;
        /* --- 以下是新增的對齊語法 --- */
        
        /* 1. 必須改成 inline-block 才能設定寬度 */
        display: inline-block;
        
        /* 2. 設定固定的寬度 */
        /* 這邊設 4.5em 大約是 4 個中文字加一點間隙的寬度，請依實際字體大小微調 */
        width: 4.5em; 
        
        /* 3. 這是針對多行文字的對齊 */
        text-align: justify;
        
        /* 4. 這是關鍵：強制最後一行（也就是單行）也要分散對齊 */
        text-align-last: justify;
        
        /* 兼容性寫法：針對舊版瀏覽器 (可選) */
        -moz-text-align-last: justify;
    }
    body.past-achievements .case .info .value {
        display: block;
    }

    /*======================================*/
    /*=============品牌精神=============*/
    /*======================================*/

    body.wowpan-story .con > .title{
        display: flex;
    }
    body.wowpan-story .con .box .title{
        display: none;
    }
    body.wowpan-story .con .breadcrumbs{
        margin-top: 0%;
    }
    body.wowpan-story .con .box .en-fontstyle{
        margin-top: 30px;
    }
    body.wowpan-story .con .box .en-fontstyle.en-slogan{
        display: flex;
        flex-direction: column;
        font-size: 14px;
        line-height: 2;
    }
    body.wowpan-story .con .box .en-fontstyle.en-slogan > div.a{
        order: 2;
        width: 100%;
        position: relative;
        margin-top: 10px;
    }
    body.wowpan-story .con .box .en-fontstyle.en-slogan > div.a:after{
        content: '';
        width: 100%;
        height: 1px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 0;
    }
    body.wowpan-story .con .box .en-fontstyle.en-slogan > div.a span{
        background-color: #000;
        position: relative;
        z-index: 3;
        padding: 0 15px;
    }
    body.wowpan-story .carousel-case{
        padding: 40px 0;
        padding-top: 20px;
    }
    body.wowpan-story .carousel-case .slider .right-arr{
        position: absolute;
        z-index: 8;
        width: 50px;
        top: 50%;
        right: 10%;
        transform: translate(50%,-50%);
        transition: all .3s;
        cursor: pointer;
    }
    body.wowpan-story .carousel-case .slider .right-arr:hover{
        transform: translate(55%,-50%);
    }
    body.wowpan-story .carousel-case .slider .left-arr{
        position: absolute;
        z-index: 8;
        width: 50px;
        top: 50%;
        left: -4%;
        transform: translate(50%,-50%);
        transition: all .3s;
        cursor: pointer;
    }
    body.wowpan-story .carousel-case .slider .left-arr:hover{
        transform: translate(45%,-50%);
    }
    body.wowpan-story .carousel-case .slick-centerMode .item {
        padding: 0 10px;  /* 兩張之間的間距 */
    }
    /* 時間軸主容器 */
    body.wowpan-story .timeline-container {
        margin-top: 40px;
    }
    /* 手機版適應 */
    body.wowpan-story .timeline-container::before { left: 30px; }
    body.wowpan-story .period-marker { margin-left: -25px; }
    body.wowpan-story .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 70px; }
    body.wowpan-story .timeline-item::before { left: 30px !important; width: 40px; }
    body.wowpan-story .timeline-item::after { left: 30px !important; }

    body.wowpan-story .story{
        padding: 50px 0;
    }
    body.wowpan-story .story p{
        width: 100%;
    }

    body.wowpan-story .ball {
        margin-top: 50px;
        margin-bottom: 80px;
        padding: 0px; 
    }

    /*======================================*/
    /*=============聯絡我們=============*/
    /*======================================*/


    body.contact-us .form{
        padding: 8%;
    }
    body.contact-us .form .name-block input[name='name']{
        width: 100%;
    }
    body.contact-us textarea{
        height: 200px;
    }
    body.contact-us .form .input-block{
        display: block;
    }
    body.contact-us .form .name-block{
        padding: 10px;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-bottom: 15px;
    }
    body.contact-us .form .name-block .gender-block{
        margin-bottom: 10px;
    }
    body.contact-us .form .phone-block,
    body.contact-us .form .email-block{
        width: calc(100% - 0px);
        padding: 10px;
        margin-bottom: 15px;
    }
    body.contact-us .form .msg-block{
        padding: 10px;
    }

    body.contact-us .reg_btn{
        border: 1px solid #544a3e;
        margin-top: 20px;
        width: 100%;
    }
    body.contact-us .map-block{
        display: block;
    }
    body.contact-us .gmap{
        width: 100%;
    }
    body.contact-us .business-id{
        width: 100%;
        margin-top: 30px;
    }
    body.contact-us .business-id h3{
        text-align: center;
    }
    body.contact-us .business-id .item{
        gap: 10px;
        justify-content: flex-start;
    }
    body.contact-us .business-id .item span{
        font-size: 14px;
        font-weight: 300;
    }

    /*======================================*/
    /*=============資訊分享=============*/
    /*======================================*/


    body.information-sharing .box .items .item{
        display: block;
    }
    body.information-sharing .box .items .item + .item{
        margin-top: 8%;
    }
    body.information-sharing .box .items .item .image{
        width: 100%;
    }
    body.information-sharing .box .items .item .text{
        width: 100%;
        margin-top: 20px;
    }
    body.information-sharing .box .items .item .text .view-more{
        color: #7CD6FF;
        letter-spacing: .1em;
        width: fit-content;
        margin-left: auto;
        margin-top: 10px;
        position: relative;
    }

    /*======================================*/
    /*=============影音專區=============*/
    /*======================================*/

    body.multimedia-zone .box .items{
        gap: 50px 4%;
    }
    body.multimedia-zone .box .items .item{
        width: calc(50% - 2%);
    }
    body.multimedia-zone .box .items .item h2{
        margin-top: 15px;
    }
    body.multimedia-zone .box .items .item .play-btn{
        width: 40px;
        height: 40px;
        transform: translate(-50%,-125%);
    }
    body.multimedia-zone .box .items .item .play-btn i{
        font-size: 30px;
    }
    body.multimedia-zone .box .items .item:hover .play-btn{
        transform: translate(-50%,-125%) scale(1.5);
    }

    /*======================================*/
    /*=============專業服務=============*/
    /*======================================*/

    body.our-services .con > .title{
        display: flex;
    }
    body.our-services .con .box .title{
        display: none;
    }
    body.our-services .con .breadcrumbs{
        margin-top: 0%;
    }
    body.our-services .services-icon{
        width: 100%;
    }
}

/* tablets col-md */
@media (max-width: 768px) {
    .rwd:after{
        content: 'mx768';
    }
}

/* phones col-sm */
@media (max-width: 576px) {
    .rwd:after{
        content: 'mx576';
    }    
}