* {
    padding:0;
    margin:0;}
body {
    font-family: "yahei", "Noto Sans TC";
    background-color: #fffcf9;}
header {
    height: 70px;
    background-color:var(--bg-color);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;}
.導覽列 {
    height: 70px;
    width: 100%;
    z-index: 10;

    position: absolute; /* 讓導覽列浮起來，不佔據實際高度 */
    background-color:var(--box-color);
    backdrop-filter: blur(10px); /* 後方圖片模糊化 */
    -webkit-backdrop-filter: blur(10px); /* 為了 iPhone/Safari 相容 */

    display: flex;
    align-items: center;
    justify-content: space-between;}
.導覽列裝飾{
    background-color: var(--bg-color);
    width: 50vw;
    height: 2px;
    position: relative;
    top: 73px;
    left: 25vw;}
header ul {
    display: flex;
    list-style: none;}
header img{
    padding-left: 10vw;
    height: 70px;}    
header a:hover { /*動畫*/
    transform: scale(1.1); 
    color: #b95b5b;}
.標題 {
    font-style: normal;
    font-size: 20px;
    font-weight: 50px;
    text-decoration: none;
    color: var(--text-color);
    display: inline-block; 
    cursor: pointer; 
    transition: transform 0.3s ease;
    margin-right:4vw;}
.底線{border-bottom:3px solid rgb(184, 91, 91)}
.dropdown {
    display: none; /* 隱藏下拉選單 */
    position: absolute;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 80px;
    z-index: 10;/* 顯示層往前 */}
.dropdown li {
    /* 讓連結變成區塊，這樣整行都可以點擊 */
    display: flex;  
    justify-content: center;      
    padding: 8px 0;     /*增加點擊範圍的舒適度*/}
.dropdown a {
    font-style: normal;
    font-size: 20px;
    font-weight: 50px;
    text-decoration: none;
    color: #000;}
.menu-item:hover .dropdown {display: block;}/* 滑鼠移入文字時，顯示選單 *//* 展示區基本樣式 */
footer{
    height: 50px;
    margin-top:500px ;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}
footer p{
    font-size:12px  ;
    color: #ffffff;}
.名片{
    background-image:url(圖片/背景.jpg) ;
    background-repeat:no-repeat ;
    background-size:cover;
    background-position: center center;
    min-height: 100vh;
    background-attachment: fixed;

    padding-top: 100px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;}
.名片十1{
    background-color: var(--bg-color);
    padding: 50px 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    bottom: 80px;}
.頭貼{
    height: 180px;
    border-radius: 50%;
    margin-right: 5vw;
    box-shadow: 5px 5px 1px #a3666e;}
.名字{
    border-left: 7px solid var(--text-color);
    transition: 0.3s; /* 讓切換顏色時有平滑感 */
    padding-left: 5px ;
    font-weight: 700;
    list-style: none;}
.名字 .中{font-size: 30px;}
.名字 li{
    position: relative;
    top: -4px;}
.標籤{margin: 20px 0;display: flex; flex-wrap: wrap;}
.標籤 p{
    margin: 5px;
    background-color: #fffcf9;
    color: #4d4d4d;
    padding: 2px 15px;
    /* border: 2px #4d4d4d solid; */
    box-shadow: 1px 2px 2px #00000046;
    border-radius: 20px ;
    margin-right: 7px;
    font-weight: 700;}
.社群{
    display: flex;
    list-style: none;}
.社群 img{
    height: 30px;
    margin-right: 1.1vw;}
.簡介{
    margin-top: 100px;
    text-align: center;
    line-height: 40px;}
.經歷{
    display: block;
    width: 430px;
    margin: auto;
    margin-top:200px ;
    padding: 10px;}
.經歷 p{
    letter-spacing: 4px;
    font-size: 25px;
    font-weight: 600;}
.經歷年分{
    display: flex;
    margin-top: 30px;}
.經歷年分 li{
    list-style: none;
    line-height: 35px;
    margin-left: 50px;}

.item {transition: all 0.3s ease; /* 消失/出現的平滑動畫 */}
.swiper{
    width: 100%;
    max-width: 800px; /* 或者你想要的寬度 */
    height: auto;
    overflow: hidden; /* 防止圖片往右溢出 */}
.swiper-slide {
    width: 100%;      /* 讓寬度固定等於 Swiper 容器寬 */
    flex-shrink: 0;   /* 防止被擠壓 */
    overflow: hidden; /* 雙重保險 */}
.swiper-slide img {
    /* 3. 圖片本身：這才是放 object-fit 的地方 */
    width: 100%;      /* 寬度撐滿 */
    height: 100%;     /* 高度撐滿 */
    object-fit: cover; /* 關鍵：裁切圖片以填滿空間，不變形 */
    display: block;   /* 移除圖片下方的微小空隙 */}
.swiper-slide iframe{
    width: 100%;      /* 寬度撐滿 */
    height: 100%;     /* 高度撐滿 */
    object-fit: cover; /* 關鍵：裁切圖片以填滿空間，不變形 */
    display: block;   /* 移除圖片下方的微小空隙 */}

.分層標題{
    margin-top: 100px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    justify-content: center;}

.VT內容{
    display: flex;
    flex-wrap: wrap;
    margin: auto;}
.立繪容器 {/* 1. 外框容器 */
    margin: 10px;
    position: relative;
    max-width:300px; /* 你可以根據需求調整尺寸 */
    height: auto;
    overflow: hidden;
    background-color: #000; /* 圖片暗掉後的底色 */
    border-radius: 8px; /* 圓角（選配） */
    cursor: zoom-in;}
.立繪容器 img {/* 2. 圖片樣式 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片填滿正方形不變形 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 增加平滑感 */}
.立繪說明 {/* 3. 文字遮罩樣式 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完美置中關鍵 */
    
    color: white;
    font-size: 24px;
    font-weight: bold;
    list-style: none;
    text-align: center;
    letter-spacing: 2px;
    
    opacity: 0; /* 預設完全透明（看不見） */
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none; /* 確保滑鼠不會因為點到文字而閃爍 */
    border: 2px solid white;
    padding: 10px 20px;}
.立繪容器:hover img {/* 圖片變暗且縮放 */
    opacity: 0.5; /* 讓圖片變半透明，露出背景的黑色 */
    transform: scale(1.1); /* 稍微放大，增加動感 */
    filter: brightness(0.6); /* 另一種方法：直接降低亮度 */}
.立繪容器:hover .立繪說明 {/* 文字顯現 */opacity: 1; /* 變回不透明 */}

#waterfall-container {
    /* background-color: #4d4d4d; */
    position: relative; /* 必要：讓子元素相對定位 */
    width: 95%;
    margin: 0 auto;
    transition: height 0.3s; /* 容器高度變動時平滑一點 */}
.waterfall-item {
    position: absolute; /* 必要：由 JS 計算 top, left */
    width: 300px;      /* 設定每一欄的寬度 */
    padding: 10px;     /* 圖片之間的間隔 */
    box-sizing: border-box;
    transition: all 0.5s ease-in-out; /* 讓移動時有動畫感 */}
.waterfall-item img {
    width: 100%;       /* 圖片寬度撐滿欄位 */
    display: block;
    border-radius: 8px; /* 加上一點圓角更有質感 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: filter 0.4s ease, transform 0.4s ease; }
.waterfall-item img:hover {
    /* 濾鏡效果：變亮 10% 且提高飽和度 20% */
    filter: brightness(0.8) saturate(1.2); 
    /* 輕微放大，增加互動感 */
    transform: scale(1.02); }

.價格外框{
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    height: 200px;}
.價格外框 ul{
    background-color: #ffffff00;
    width: 30vw;
    border-top: 2px rgb(121, 29, 29) solid ;
    max-width: 400px;
    padding: 15px;
    line-height: 30px;}
.價格外框 li{list-style: none;}
.價格外框 img {
    height: 200px;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-right: 3vw;}
.委託粗體{
    font-size: 20px; 
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    left: -10px;}
.委託警示{margin: 20px 0;}
.委託警示 li{
    text-align: center;
    color: #ec0000;}
.委託說明{
    margin-top: 100px; 
    display: block;
    width: 750px;
    padding: 20px ;
    border-radius: 30px;
    margin: auto;}
.委託說明 ul{
    /* position: relative;
    left: 40px; */
    font-size: 17px;
    font-weight: 700;
    line-height: 60px;
    list-style: none;}
.委託說明 a{color: #c43f3f;}
.流程標題{
    display:inline;
    text-align: center;
    margin: 200px;}

h3{
    border-bottom:3px #000 solid ;
    margin-bottom: 10px;
    font-size: 30px;}

.流程項目{
    height: 150px;
    width: 700px;
    background-color: var(--bg-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block;
    margin: auto;
    margin-bottom: 30px;
    padding: 30px;
    border-radius:20px ;
    font-size: 20px;
    line-height: 40px;}
.流程項目 a{
    font-size: 35px;
    margin-right: 10px;
    color: #b80606;}

.floating-btn {
    position: fixed;   /* 關鍵：固定定位 */
    bottom: 30px;      /* 距離底部 30px */
    right: 30px;       /* 距離右邊 30px */
    
    background-color: #b95b5b; /* 你的主色調 */
    color: white;
    padding: 15px 25px;
    border-radius: 50px;       /* 圓角藥丸狀 */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* 增加陰影讓它真的像「浮」起來 */
    z-index: 9999;             /* 確保它在所有圖層最上面 */
    
    transition: transform 0.3s;
}
.floating-btn:hover {
    transform: scale(1.1);     /* 滑鼠移上去稍微變大 */
}
/* 修改檢視器的背景顏色與模糊度 */
.viewer-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px); /* 讓背景變模糊，更有質感 */
}
/* 修改工具列的顏色，配合你的紅褐色主題 */
.viewer-toolbar > ul > li {
    background-color: rgba(185, 91, 91, 0.5) !important;
}
.viewer-toolbar > ul > li:hover {
    background-color: #b95b5b !important;
}
@media (max-width: 768px){
    header img{padding-left: 5vw;}
    .標籤{display: none;}
    .社群 img{height: 30px; margin-top: 20px; margin-right: 2vw;}
    .floating-btn{display: none;}
    .標題{
        /* display: none;  */
        font-size: 15px;}
    .menu-item{display: flex;}
    .dropdown li{display: none;}
    .經歷年分 li{margin-left: 20px;}
    .分層標題{margin-top: 50px;margin-bottom: 5px;}
    .立繪容器{max-width:170px; height: auto;}
    .立繪說明{display: none;}
    .價格外框{display: block;margin-bottom: 180px;}
    .價格外框 img{width: 100%;height: auto;margin-right: 0vw;}
    .價格外框 ul{width: 300px;padding-left: 50px;}
    .委託說明{width: 100%;padding: 3px ;}
    .委託說明 ul{line-height: 30px;}
    .委託說明 li{margin-bottom: 20px;}
    .流程項目{height: 130px;width: 95%;padding: 5px;}
    .流程項目 p{font-size: 17px;line-height: 30px;}
    .流程項目 a{font-size: 25px;}
    h3{font-size: 20px;}
}
/* 1. 定義顏色變數 */
:root {
    --bg-color: #ffffff;      /* 白天背景 */
    --text-color: #000000;    /* 白天文字 */
    --box-color: rgba(255, 255, 255, 0.7); /* 白天區塊半透明度 */
}

/* 2. 當 body 有 .dark-mode 類別時的顏色 */
body.dark-mode {
    --bg-color: #1a1a1a;      /* 黑夜背景 */
    --text-color: #ffffff;    /* 黑夜文字 */
    --box-color: rgba(0, 0, 0, 0.7); /* 黑夜區塊半透明度 */
}

/* 3. 套用變數到你的網頁 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: 0.3s; /* 讓切換顏色時有平滑感 */
}

/* 4. 讓按鈕浮起來 (模仿聯絡按鍵) */
#theme-toggle {
    position: fixed;
    bottom: 30px;
    left: 40px;
    right: auto;

    z-index: 1000;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background: #b95b5b;
    font-size: 20px;
}