/*optimize*/
/* ==========================================================================
   1. 基礎設定與字體系統 (Relative Units)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap');

:root {
    font-size: 16px; /* 1rem = 16px */
    --primary-color: #513ef5;
    --text-grey: #777777;
    --bg-light: #f5f5f5;
    --gap-desktop: 8px;
    --gap-mobile: 4px; /* 使用者要求的 4px */
}

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    font-family: "Poppins", "微軟正黑體", sans-serif;
}

body {
    font-size: 1em; /* 16px */
    line-height: 1.6;
}

/* 標題與文字統一使用 em */
h2 { font-size: 2.5em; font-weight: 600; }
h3 { font-size: 1.375em; font-weight: 444; padding-right: 2.18em; }
h4 { 
    font-size: 1em;
    color: var(--text-grey);
    font-weight: 600;
    height: 1.875em;
    background-color: var(--bg-light);
    transform: skew(0, 2deg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1em 0;
}
p { font-size: 0.8125em; color: var(--text-grey); }
small { font-size: 0.75em; }

/* ==========================================================================
   2. 作品集網格 (Graphic Portfolio Grid)
   ========================================================================== */
.recent, .oldtime {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100%;
    max-width: 1200px;
    margin: 1.5em auto !important;
    padding: 0 var(--gap-desktop);
    gap: var(--gap-desktop) !important;
}

.recent .box, .oldtime .box {
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.recent .box img, .oldtime .box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ==========================================================================
   3. RWD 響應式佈局 (Gap: 4px)
   ========================================================================== */

/* --- 桌機 (1024px 以上): 一排 4 個，Gap 8px --- */
@media (min-width: 1024px) {
    .recent .box, .oldtime .box {
        flex: 0 0 calc((100% - (var(--gap-desktop) * 3)) / 4) !important;
        height: 15.625em; /* 250px */
    }
}

/* --- 平板 (768px ~ 1023px): Gap 4px, 一排 3 個 --- */
@media (max-width: 1023px) {
    .recent, .oldtime {
        gap: var(--gap-mobile) !important;
        padding: 0 var(--gap-mobile); 
    }
    .recent .box, .oldtime .box {
        flex: 0 0 calc((100% - (var(--gap-mobile) * 2)) / 3) !important;
        height: 12.5em; /* 200px */
    }
}

/* --- 手機 (767px 以下): Gap 4px, 一排 2 個 --- */
@media (max-width: 767px) {
    :root { font-size: 14px; } /* 手機縮小全域字體比例 */
    
    .recent, .oldtime {
        gap: var(--gap-mobile) !important;
    }
    .recent .box, .oldtime .box {
        flex: 0 0 calc((100% - var(--gap-mobile)) / 2) !important;
        height: 11.25em; /* 180px */
    }
}

/* 隱藏超過數量的項目 */
.box.is-hidden { display: none !important; }

/* 按鈕樣式 (em) */
.btn-plus-style {
    display: inline-flex !important;
    align-items: center;
    gap: 0.75em;
    padding: 0.75em 2.5em !important;
    font-size: 0.9375em;
    font-weight: 600;
    color: var(--primary-color);
    background-color: #fff;
    border: 0.1em solid var(--primary-color);
    border-radius: 2em;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 2em 0;
}
.btn-plus-style:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.btn-icon { transition: transform 0.5s ease; }
.rotate-180 { transform: rotate(180deg); }

/* 修復 Logo 對齊 */
/* 核心修正：防止 Logo 因為 Bootstrap col 類別而在特定寬度縮小或消失 */
nav .logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 1002; /* 確保在選單之上 */
}

nav .logo img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}
#about .box {
    /* width: 332px; */
    margin: 24px;
}  

/* 確保 text 容器在寬螢幕有足夠空間 */
#about .text {
    margin: 0 auto;
    width: 90%; /* 或者給予一個最大寬度如 1200px */
}

/* 這裡決定了一排能放幾個 */
#about .box {
    width: 280px;  /* 調整這個數值，例如 280px * 4 = 1120px，適合大螢幕 */
    margin: 10px;  /* 方塊間的間距 */
    float: left;
}

/* 針對小螢幕的微調，確保不會破版 */
@media (max-width: 768px) {
    #about .box {
        width: 90%; /* 手機版佔滿全寬 */
        margin: 10px 10px;
    }
}

.text{
    display: grid;
    padding: 16px;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: 1rem;
}
.text p {
    line-height: 1.5rem;
    text-align: left;
    font-weight: 300;
    font-size: 13px;
    color: #777777;
}
.a{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
/* nav */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;  
    z-index: 1000;
    display: flex;
    align-items: center;
    /* Glassmorphism 效果 */
    background-color: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    justify-content: center;
    padding: 10px 0; /* 移除左右 Padding，交給 container 處理 */
}
nav .container {
    width: 100%;
    max-width: 1200px; /* 關鍵：與內容區塊一致 */
    margin: 0 auto;
    padding: 0 15px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
nav> .row{
    align-items: initial;
    justify-content: space-between;
    flex-direction: column;
}

nav ul{
    list-style: none;
}
nav li{
    margin: 16 16px;
    padding: 8px 8px;
}

/* 漢堡按鈕容器 */
.toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 1002; /* 確保在選單之上 */
    margin-left: auto;
}

/* 手機與平板：全螢幕/延展選單樣式 */
@media (max-width: 768px) {
    .toggle { display: flex !important; }

    nav .menu {
        display: none; /* 由 JS 控制 slideToggle */
        position: absolute;
        top: 60px; /* 緊貼導覽列下方 */
        left: 0;
        width: 100%;
        height: auto;
        min-height: 250px; /* 設定一個延展的最小高度 */
        background: rgba(237, 237, 237, 0.8); /* 半透明白 */
        backdrop-filter: blur(15px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 1001;
        border-radius: 12px; /* 底部圓角增加延展感 */
    }

    nav .menu ul {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 0 !important;
        width: 100% !important;
        list-style: none;
    }

    nav li {
        margin: 15px 0 !important;
        padding: 0 !important;
        width: 100%;
        text-align: center;
    }

    nav a {
        font-size: 16px !important; /* 讓手機選單文字大一點好點擊 */
        display: block;
        width: 100%;
    }
}

/* 桌面版 (769px 以上) */
@media (min-width: 769px) {
    .toggle { display: none !important; }
    
    nav .menu {
        display: block !important;
        position: static;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        height: auto;
    }

    nav .menu ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    nav li {
        margin: 0 15px !important;
        padding: 0 !important;
    }
}

nav .menu{
    display:block;
    color: black;
}
.menu> .row{
    flex-direction: column;
}
nav a{
    color: rgb(0, 0, 0);
    text-decoration:none !important; 
    font-size: 14px;
    position:relative; 
}
nav a:hover {
    color:#513ef5; 
    text-decoration:none; 
    cursor:pointer;  
}
nav .menu a:hover::after{
    transform:scaleX(1);
}
nav .menu a.active::after{
    transform:scaleX(1);
}
nav .menu a::after {
    content: "";
    display: inline-block;
    position:absolute;
    width:100%;
    border-bottom:2px solid #513ef5;
    left: 0;
    bottom: -5px;
    width: 100%;
    transition: .3s;
    transform:scaleX(0);
    transform-origin: left;
}
/* Hover 與 Active 時底線伸長 */
nav .menu a:hover::after,
nav .menu a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}
nav .toggle{
    position: absolute;
    right: 24px;
    top: 24px;
    color:  #000000;
}
/* nav .time{
    position: absolute;
    right: 210px;
    top: 5px;
    /* background-color: rgb(217, 225, 250); */
/* } */
/* nav .weather{
    display: none;
} */
.landing-page{
    margin: auto;
}
#middle img{
    padding-top: 40px;
}
.ish{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
.ish .box{
    flex: 0 0 calc(100%/4);
    height: 200px;
    overflow: hidden;
}
.ish img{
    width: 100%;
    object-fit: cover;
    height:100%;
}
.link{
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto;
}
.facial{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
.facial .box{
    flex: 0 0 calc(100%/4);
    height: 200px;
    overflow: hidden;
    padding: 2px;
}
.facial img{
    width: 100%;
    object-fit: cover;
    height:100%;
}
.animatedlogo{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.animatedlogo .box{
    flex: 0 0 calc(100%/4);
    height: 120px;
    overflow: hidden;
    padding: 2px;
}
.animatedlogo img{
    width: 100%;
    object-fit: cover;
    height:100%;
}
.video {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top:0;
}
.mini_animation {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.mini_animation .box{
    flex: 0 0 calc(100%/3);
    height: 220px;
    overflow: hidden;
    padding: 2px;
}
.mini_animation img{
    width:100%;
    object-fit: cover;
    height: 100%;
}
.video h2{
    color: #fff;
    font-weight: 600;
}
.video p{
    color: #fff;
    }
.cover img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    overflow: hidden;
    margin: auto;
}
.video small{
    color: rgb(173, 173, 173);
    font-weight: 200;
}
.play{
    padding: 0;
    margin: auto;
    color: #ffffff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play i:hover {
    color: rgb(117, 119, 250);
}
.free {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}

.free .box{
    flex: 0 0 calc(100%/6);
    height: 222px;
    overflow: hidden;
    padding: 2px;
}
.free img{
    width: 100%;
    object-fit: cover;
    height:100%;
}

.banner {
    width: 100%;
    height: 320px;
    margin-top: 0;
    margin-bottom: 0;
}
/* 確保 oldtime 區塊圖片寬度一致 */
.oldtime {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px 0;
}

.oldtime .box{
    flex: 0 0 calc(100%/5);
    height: 200px;
    overflow: hidden;
}
.oldtime img{
    width: 100%;
    object-fit:cover;
    height: 200px;
    transition: transform 0.3s ease;
}
/* 確保 Behance 區塊維持彈性佈局，不被 Masonry 影響 */
.recent iframe {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top;
    margin: 10px;
    z-index: 1;
}
/* 讓 Masonry 容器在頁面水平居中 */
.recent {
    margin: 0 auto !important;
    display: block !important;
    min-height: 100px;
}

/* 移除原本可能干擾 Masonry 的高度限制 */
.recent .box {
    width: 280px !important; /* 增加寬度讓排列更美觀 */
    height: 200px;
    margin-bottom: 10px;
    float: none !important; /* Masonry 會自動計算位置，不需要 float */
    padding: 5px;
}

/* 靜態 iframe 網格優化 (手機版自動堆疊) */
.behance-static-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.behance-static-grid iframe {
    flex: 0 0 calc(20% - 20px);
    min-width: 200px; /* 手機版會自動換行 */
}
/* (3) 移除 Behance 外框，更乾淨的呈現 */
.behance-embed {
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 輕微投影代替邊框 */
    /*border-radius: 12px;*/
    transition: transform 0.3s ease;
}
.behance-embed:hover {
    transform: translateY(-5px);
}
/* --- 按鈕樣式統一：外觀 + 您喜歡的縮放效果 --- */
#load-more-graphic, 
#load-more-oldtime {
    display: inline-block !important;
    padding: 12px 40px !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    color: #513ef5 !important;
    background-color: #ffffff !important;
    border: 1px solid #513ef5 !important;
    border-radius: 25px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    text-decoration: none;
    outline: none;
}

#load-more-graphic:hover, 
#load-more-oldtime:hover {
    background-color: #513ef5 !important;
    color: #ffffff !important;
    transform: scale(1.05); /* 縮放效果 */
    box-shadow: 0 5px 15px rgba(81, 62, 245, 0.3);
}
/* 讓 Masonry 的圖片容器有清楚的定位 */
.recent img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
}
.recent img:hover {
    box-shadow: rgba(128, 128, 128, 0.733);
}
#and h2 {
    padding: 0 15px;
    height: 40px;
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
    background-color: rgb(0, 0, 0);
}
.realtime {
    margin: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.realtime small{
    margin: 0;
    padding: 16px;
    color: #fff;
    background-color: rgb(0, 0, 0);
    text-align: justify;
}
.realtime iframe{
    padding: 15px;
    margin: auto;
    padding-top: 0;
    height: 500px;
}
.slider {
    width: 900px;
    margin: auto;
}
.embedded-site {
    width: 100%;
    max-width: 600px; /* 最大寬度限制 */
    height: 600px;    /* 固定高度 */
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 增加陰影讓介面更有層次感 */
    overflow: hidden;
}
/* (2) 統一呈現方式：讓 .recent 跟 .oldtime 擁有一致的 Grid 樣式 */
.oldtime-style-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 20px 0;
}

.oldtime-style-grid .box {
    flex: 0 0 calc(20% - 10px); /* 桌面版一排 5 個 */
    min-width: 180px;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}

.oldtime-style-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.oldtime-style-grid img:hover {
    transform: scale(1.1);
}

.container {
    display: flex;
    justify-content: center; /* 讓嵌入視窗在頁面居中 */
    padding: 20px;
}

/* 讓每個 iframe 項目有獨立的容器 */
.iframe-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
}
.btn-interactive {
    display: inline-block;
    padding: 8px 20px;
    color: #513ef5 !important;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    gap: 12px;
    transition: 0.3s;
}
/* 針對您 interactive 區塊的按鈕 */
#interactive .btn {
    display: inline-flex;    /* 讓按鈕變為彈性容器 */
    align-items: center;     /* 讓文字與 Icon 垂直居中 */
    justify-content: center;
    gap: 12px;               /* 關鍵：這會直接設定文字與 Icon 的間距 */
    padding: 10px 25px;
}

.btn-interactive:hover {
    background-color: #513ef5;
    color: #fff;
    transform: translateY(-2px);
}

@media(min-width:768px){
    /* nav .time{
        position: absolute;
        right: 30px;
        top: 10px;
    }
    nav .weather{
        display: block;
        margin-right: 150px;
        padding-right: 5px;
        padding-top: 20px;
        background-color: #f5d9f5;
        font-size: 12px;
        font-weight: 333;
        text-align: center;
        border-radius: 40px;
    } */
    nav .toggle{
        display: none;
    }
    nav{
        padding-top:12px;
        padding-bottom: 12px; 
    }
    nav>.row{
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }
    nav li{
        margin: 0 15px;
        padding-left: 15px;
    }
    nav .menu{
        display: block;
    }
    .menu> .row{
        flex-direction: row;
    }
}

.blank{
    width: 100%;
    height: 300px;

}
header h2{
    font-weight: 666;
    /* font-size: 50px; */ 
    padding-right: 30px; 
}

header p{
    padding-top: 180px;
    padding-left: 50px;
    font-size: 14px;
    width: 322px;
    color: rgb(255, 255, 255);
    text-decoration:color;
    text-align: left;
    line-height: 28px;
}


.typewriter h2 {
    color: rgb(0, 0, 0);
    border-right: .2em solid rgba(255, 255, 255, 0.733);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .08em;
    /* 保持在這裡 */
    animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
    overflow: hidden; /* 確保未打字前字體隱藏 */
}
  /* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 90% }
}

  /* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color:#ffffff98}
}

@media(min-width:1200px){
    #front {
        margin: auto;
        width: 100%;
        height: auto;
        background: url(images/home\ img.png) no-repeat fixed center / cover;
    }
    #middle {
        margin: auto;
        width: 100%;
        height: auto;
        background: no-repeat fixed center / cover;
    }
    #about{
        margin: auto;
        width:100%;
    }
    #another {
        margin: auto;
        width: 100%;
        height: auto;
        background: #000  no-repeat fixed center / cover;
    }
    #back {
        margin: auto;
        width: 100%;
        height: auto;
        background: linear-gradient(90deg,#fff 3px, transparent 1%) center,
            linear-gradient(#fff 3px,transparent 1%) center, rgb(224, 224, 224);
            background-size: 4px 4px;
    }
    #old-timey {
        margin: auto;
        width: 100%;
        height: auto;
        background:  linear-gradient(45deg, #b9d0fc 0%, rgba(201, 173, 177, 0) 70%), linear-gradient(135deg, #000000 10%, rgba(122, 88, 241, 0) 80%), linear-gradient(225deg, #9892b4 10%, rgba(234, 252, 252, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%)  no-repeat fixed center / cover;
        position: relative;
    }
    #about .box {
        width: 420px;
    }  
    .banner{
        width: 100%;
    }
    .recent{
        width: 100%;
    }
    header h2{
        font-weight: 666;
        font-size: 50px;
    }

    header p{
        font-size: 14px;
        width: 322px;
        text-align: left;
        line-height: 20px;
    }
    .realtime iframe{
        height: 500px;
    }
    .sliderSV {
        width: 100%;
        margin: 10px 10px;
    }
}

@media(max-width:1024px) and (min-width:768px){
    #front {
        margin: auto;
        width: 100%;
        height: auto;
        background: url(images/home\ img.png) no-repeat fixed center / cover;
    }
    #middle {
        margin: auto;
        width: 100%;
        height: auto;
        background:no-repeat fixed center / cover;
    }
    #another {
        margin: auto;
        width: 100%;
        height: auto;
        background: #000  no-repeat fixed center / cover;
    }
    #back {
        margin: auto;
        width: 100%;
        height: auto;
        background: linear-gradient(90deg,#fff 3px, transparent 1%) center,
            linear-gradient(#fff 3px,transparent 1%) center, rgb(224, 224, 224);
            background-size: 4px 4px;
    }
    #old-timey {
        margin: auto;
        width: 100%;
        height: auto;
        background:  linear-gradient(45deg, #bdc8dd 0%, rgba(201, 173, 177, 0) 70%), linear-gradient(135deg, #000000 10%, rgba(122, 88, 241, 0) 80%), linear-gradient(225deg, #6343f3 10%, rgba(234, 252, 252, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%)  no-repeat fixed center / cover;

    }
    header h2{
        font-weight: 611;
        font-size: 45px;
    }
    header p{
        font-size: 13px;
        width: 300px;
        text-align: left;
        line-height: 20px;
    }
    h3{
        font-size: 20px;
        font-weight: 422;
        padding-right: 35px;
    }
    .realtime iframe{
        height: 400px;
    }
    .sliderSV {
        width: 100%;
        margin: 10px 10px;
    }
    #about .box {
        width: 360px;
    }  
}
@media(max-width:768px) and (min-width:480px){
    #front {
        margin: auto;
        width: 100%;
        height: auto;
        background: url(images/home\ img.png) no-repeat fixed center / cover;
    }
    #middle {
        margin: auto;
        width: 100%;
        height: auto;
        background:no-repeat fixed center / cover;
    }
    #another {
        margin: auto;
        width: 100%;
        height: auto;
        background: #000  no-repeat fixed center / cover;
    }
    #back {
        margin: auto;
        width: 600px;
        height: auto;
        background: linear-gradient(90deg,#fff 3px, transparent 1%) center,
            linear-gradient(#fff 3px,transparent 1%) center, rgb(224, 224, 224);
        background-size: 4px 4px;
    }
    #old-timey {
        margin: auto;
        width: 100%;
        height: auto;
        background:  linear-gradient(45deg, #b9d0fc 0%, rgba(201, 173, 177, 0) 70%), linear-gradient(135deg, #000000 10%, rgba(122, 88, 241, 0) 80%), linear-gradient(225deg, #6343f3 10%, rgba(234, 252, 252, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%)  no-repeat fixed center / cover;
    }

    #about .box {
        width: 320px;
    }  
    header h2{
        font-weight: 577;
        font-size: 42px;
    }
    header p{
        font-size: 13px;
        width: 300px;
        text-align: left;
        line-height: 20px;
    }
    h3{
        font-size: 18px;
        font-weight: 417;
        padding-right: 35px;
    }
    .recent.box{
        width: 100px;
        height: 100px;
        object-fit: cover;
        overflow: hidden;
        margin: 3px;
    }
    .realtime iframe{
        height: 300px;
    }
    .sliderSV {
        width: 100%;
        margin: 10px 10px;
    }
}
@media(max-width:480px){
    #front {
        margin: auto;
        width: 100%;
        height: auto;
        background: url(images/home\ img.png) no-repeat fixed center / cover;
    }
    #middle {
        margin: auto;
        width: 100%;
        height: auto;
        background:no-repeat fixed center / cover;
    }
    #another {
        margin: auto;
        width: 100%;
        height: auto;
        background: #000  no-repeat fixed center / cover;
    }
    #back {
        margin: auto;
        width: 100%;
        height: auto;
        background: linear-gradient(90deg,#fff 3px, transparent 1%) center,
            linear-gradient(#fff 3px,transparent 1%) center, rgb(224, 224, 224);
            background-size: 4px 4px;
    }
    #old-timey {
        margin: auto;
        width: 100%;
        height: auto;
        background:  linear-gradient(45deg, #b9d0fc 0%, rgba(201, 173, 177, 0) 70%), linear-gradient(135deg, #000000 10%, rgba(122, 88, 241, 0) 80%), linear-gradient(225deg, #6343f3 10%, rgba(234, 252, 252, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%)  no-repeat fixed center / cover;
    }
    /* body{
        background-color: #fcf3fbd5;
    } */
    #about .box {
        width: 320px;
    }  
    header h2{
        font-weight: 577;
        font-size: 42px;
    }
    header p{
        font-size: 13px;
        width: 300px;
        text-align: left;
        line-height: 20px;
    }
    h3{
        font-size: 18px;
        font-weight: 417;
        padding-right: 35px;
    }
    .recent .box{
        width: 100px;
        height: 100px;
        object-fit: cover;
        overflow: hidden;
        margin: 3px;
    }
    .realtime iframe{
        height: 300px;
    }
    .sliderSV {
        width: 100%;
        margin: 10px 10px;
    }

    /* #old-timey {
        height: 7000px;
        background: repeating-linear-gradient(to top, black 0px,black 1px, transparent 1px, transparent 2px),url(https://picsum.photos/id/88/1400/900) repeat fixed center / cover;
    } */
}

/* @media(max-width: 1200px){ */

    .slider {
        width: 100%;
    }
    .slider-for img{
        width: 100%;
        height: 600px;
        object-fit: cover;
        overflow: hidden;
        margin: 15px 5px ;
    }
    .slider-nav img{
        width: 200px;
        height: 150px;
        object-fit: cover;
        overflow: hidden;
        margin: 0 5px ;
    }
    .solovibes {
        margin: auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center;
        align-items: center; */
    }
    .solovibes h2{
        padding: 0 15px;
        height: 40px;
        margin-top: 0;
        margin-bottom: 0;
        color: #fff;
        background-color: rgb(0, 0, 0);
    }
    .solovibes iframe{
        padding: 0 15px;
        margin: auto;
    }
    .caption{
        width: 600px;
        margin:auto;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 16px 16px;
        color: #fff;
        background-color: rgb(0, 0, 0);
        text-align: justify;
    }

    .sliderSV img{
        width: 400px;
        height: 600px;
        margin: auto;
    }
    footer{
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #000000;
    color: #eee;
    }
    footer a{
        display: inline-block;
        color: #ffffff;
        width: 28px;
        height: 28px;
        clip-path: circle();
        /* background-color: #eee; */
        text-align: center;
        line-height: 32px;
        vertical-align: middle;
        margin: 0 4px;
    }
    .privacy{
        font-size: 12px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    #gotop{
        display: block;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        /* background-color: rgb(100, 103, 248); */
        color:rgb(100, 103, 248);
        text-decoration: none;
        position: fixed;
        right: 25px;
        bottom: 25px;
        z-index: 999;
        display: none;
    }
    /* RWD 修正：嵌入的 iframe 容器 */
.iframe-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
}

.iframe-container iframe {
    width: 100%;
    max-width: 600px;        /* 桌面最大不超過 600px */
    height: 600px;           /* 桌面保持原高度 */
    aspect-ratio: 1 / 1;      /* 手機強制保持正方比例 */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
}

/* 手機版（<768px）強制垂直堆疊並調整高度避免過高 */
@media (max-width: 767px) {
    .iframe-container {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }
    
    .iframe-container iframe {
        height: calc(100vw - 30px);  /* 高度 ≈ 寬度，減去 padding */
        min-height: 400px;
    }
}

/* 平板（768~1024px）可並排但縮小 */
@media (min-width: 768px) and (max-width: 1024px) {
    .iframe-container iframe {
        height: 500px;
    }
}

.open .hamburger-top {
    transform: rotate(45deg) translateY(6px);
}

.open .hamburger-mid {
    opacity: 0;
}

.open .hamburger-bot {
    transform: rotate(-45deg) translateY(-6px);
}

/* 讓三條線都有平滑過渡 */
.hamburger-top,
.hamburger-mid,
.hamburger-bot {
    transition: all 0.4s ease-in-out;
}

/* === 漢堡選單最終優化版：絕對不會被切到 + 完美置中 + 尺寸適中 === */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.39);
    z-index: 999;
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px; /* 左右留點空間，避免太靠邊 */
}

nav .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* 讓 toggle 的 absolute 相對於 container */
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo 左、漢堡右 */
}

nav .row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row !important; /* 強制橫向，避免 column 造成問題 */
}

/* 漢堡按鈕容器 */
.toggle {
    display: block;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
}

/* 漢堡圖示本體 */
.hamburger {
    width: 24px;
    height: 20px;
    position: relative;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 0;
    transition: all 0.4s ease;
    border-radius: 1px;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

/* 開啟狀態：變叉叉 */
.hamburger.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
}

/* 手機版時才顯示漢堡，桌面隱藏 */
@media (min-width: 769px) {
    .toggle {
        display: none;
    }
}


/* 手機版 RWD 修正 (例如一排 2 個) */
@media (max-width: 768px) {
    .recent .box, .oldtime .box {
        /* 手機版計算：(100% - 1格間距) / 2 */
        flex: 0 0 calc((100% - 8px) / 2) !important;
        height: 180px; /* 手機版高度稍微縮小比較美觀 */
    }
}

.recent img, .oldtime img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* --- (1) 按鈕 hover 時 Icon 旋轉設定 --- */
.btn-plus-style {
    display: inline-flex !important;
    align-items: center;
    gap: 12px !important;
    padding: 12px 35px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 30px !important;
    background: transparent !important;
    border: 1px solid #513ef5 !important;
    color: #513ef5 !important;
    cursor: pointer;
}

/* 懸停時按鈕背景變色 */
.btn-plus-style:hover {
    background-color: #513ef5 !important;
    color: #ffffff !important;
}

/* Icon 基礎樣式：定義過渡時間 */
.btn-icon {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 當按鈕被 Hover 時，內部的 Icon 旋轉 360 度 */
.btn-plus-style:hover .btn-icon {
    transform: rotate(360deg);
}
.btn-plus-style .btn-icon {
    margin-right: 10px; /* 增加與文字之間的距離 */
    transition: transform 0.6s ease; /* 維持原本的旋轉動畫 */
}
/* --- (2) 網格間距 8px 修正 --- */
.recent, .oldtime {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important; /* 上下左右間距一致 8px */
    width: 100%;
    max-width: 1200px;
    margin: 30px auto !important;
    padding: 0 8px;
}

.recent .box, .oldtime .box {
    /* 扣除 8px 間距後的寬度計算 (4格 3間距) */
    flex: 0 0 calc((100% - (8px * 3)) / 4) !important;
    height: 220px;
    overflow: hidden;
    border-radius: 0px;
}
/* 確保圓點顯示在斜線之上 */
.slick-dots {
    z-index: 10;           /* 提升層級 */
    bottom: 25px !important; /* 調整與底部的距離，避開斜線 */
}

/* 調整圓點的顏色使其更明顯 */
.slick-dots li button:before {
    color: #bfb7ff !important; /* 使用您專案的主色調 */
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: #a49ef5 !important;
    opacity: 1;
}
/* 圖片在收合時必須強制消失 */
.box.is-hidden {
    display: none !important;
}
/* 允許圓點超出容器邊界顯示 */
.banner, .slider-for {
    overflow: visible !important;
}

/* 如果 banner 底部有斜線裁切(clip-path)，確保它不影響點點 */
.banner {
    position: relative;
    padding-bottom: 50px; /* 增加底部內距給圓點空間 */
}

/* --- 3. 修正全域溢出留白 --- */
html, body {
    overflow-x: hidden; /* 徹底解決右側不明留白 */
    width: 100%;
}

.container.row.mw-100 {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}