/* index.html */

@charset "UTF-8";
*{
    /* touch-action: pan-x pan-y; /* 禁止觸控設備的手勢(縮放) */
    touch-action: manipulation; /* 只禁止縮放手勢 */
    box-sizing: border-box; /* 盒子模型 */
    margin: 0;
    padding: 0;
    max-width: 100%; /* 限制最大寬度,防止溢出 */
}
html{
    /*width: 100%;*/
    font-size: 10px;
    scroll-behavior: smooth; /* 平滑滾動效果 */
}
img, video{
    height: auto; /* 高度自適應 */
    display: block; /* 讓圖片和視頻元素成為塊級元素 */
}
body{
    background-position: center; /* 背景圖片置中 */
    background-repeat: no-repeat; /* 不重複 */
    background-color: black;
    color: white;
}
li{
    list-style: none;
}
/* 開頭 */
header{
    top: 0;
    left: 0;
    display: flex; /* 彈性盒子 */
    position: fixed; /* 定位 */
    z-index: 100; /* 提升層級, 避免被覆蓋 */
    white-space: nowrap; /* 文字不允許換行 */
    flex-direction: column; /* 垂直排列 */
    align-items: baseline;     /* 靠邊居中 */
    justify-content: center; /* 垂直居中（如果需要） */
    background-size: cover; /* 背景圖片覆蓋整個元素 */
    width: 100%; /* 讓寬度覆蓋整個 viewport */
    height: fit-content; /* 讓高度自適應內容 */
    background-color: black;
    padding: 0;
}
/* LOGO */
header .logo{
    position: relative;
    top: 0.4vw;
    left: 1.2vw;
    display: flex; /* 彈性盒子 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 垂直置中 */
    padding: 0;
    margin: 0;
    /* border: 8px solid black; */
    /* background-color: red; */
    width: fit-content;  /* 限制最大寬度,不占全屏寬 */
    
}
header .logo img{
    cursor: pointer;
    position: relative;
    right: 0.2vw;
    width: 4vw;
}
header .logo h1{
    font-family: sans-serif;
    font-size: 1.8vw;
    letter-spacing: 0.2rem; /* 調整字母間距 */
    /* text-align: center; */
    padding: 0;
    margin: 0;
}
header .logo a{
    cursor: pointer; /* 滑鼠移到上面時變成手指形狀 */
    text-decoration: none;
    color: #FFFF00;
}
header .logo a:hover{
    color: #0000FF;
}
header p{
    position: relative; /* 讓 p 內部元素相對於 p 定位 */
    left: 0.4vw;
    font-size: 1.2vw;
    color: white;
}
.menu{
    display: none;
}
/* 菜單 */
nav{
    position: absolute; /* 讓 nav 內部元素相對於 nav 定位 */
    width: auto;
    right: 5vw;
    top: 3vw;
    border: none;
    line-height: 2.4rem;
}
nav ul{
    /* background-color: red; */
    display: flex; /* 彈性盒子 */
    justify-content: space-evenly; /* 平均分配空間 */
}
/* 1級菜單 */
nav>div>ul>li>a{
    position: relative; /* 讓 a 內部元素相對於 a 定位 */
    text-decoration: none; /* 去除下劃線 */
    color: white;
    display: inline; /* 讓 a 元素成為行內元素 */
    width: auto;
    margin: 0 1.8vw;
    font-size: clamp(1.8rem, 1vw, 3rem); /* 最小1rem，根據螢幕寬度變動，最大3rem */
    padding: 0.1rem 0 0.5rem;
    border-bottom: 1.2px solid #CCCCCC;
}
nav ul li{
    position: relative; /* 讓 li 內部元素相對於 li 定位 */
}
nav ul li:hover ul{
    display: block; /* 滑鼠懸停時顯示下拉菜單 */
}
/* 2級(隱藏)菜單-分類 */
nav ul li ul li a:hover{
    color: #0000FF; 
}
nav ul li ul{
    position: absolute; 
    top: 115%;                     /* 放在 li 下方 */
    left: 50%;                     /* 對齊父級元素中間 */
    transform: translateX(-50%);   /* 往左移動自身元素的一半，達成完美居中 */
    display: none;
    background-color:  white;
    text-align: center;          /* 文字水平置中 */
    z-index: 10;                   /* 提升層級, 避免被覆蓋 */
    width: auto;
    height: auto;
}
nav ul li ul li a{
    /* background-color: red; */
    display: inline-block;              /* 使 <a> 元素成為塊級元素 */
    position: relative;
    text-wrap: nowrap; /* 文字不允許換行 */
    text-decoration: none;
    color: green;
    font-size: clamp(1.4rem, 0.9vw, 2.4rem); /* 最小1rem，根據螢幕寬度變動，最大3rem */
    border: 1px solid #000;
    /*  padding: 1.5rem 0;  /* 上下邊距改成 0.5rem，左右可以保持為 0 */
    margin: 0.4rem 0.6rem;
}

/* 主要內容 */
main{
    margin-top: var(--header-height, 0px); /* 讓主內容區域距離 header 一定的距離 */
    /* margin-top: 1vw; /* 讓主內容區域距離 header 一定的距離 */
    transform: translate(0, -0.2rem);
    background-color: black;
}
section{
    background-color: #222; /* 背景 */
}
section .banner_1{
    display: flex; /* 彈性盒子 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    backdrop-filter: blur(8px) contrast(2); /* 模糊和對比度 */
    -webkit-backdrop-filter: blur(8px)  contrast(2); /* Safari模糊 */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url("../img/pic_new.jpg"); /* 背景圖片，由左至右漸漸變暗的遮罩 */
    background-repeat: no-repeat; /* 背景圖片不重複 */
    background-position: center; /* 背景圖片置中 */
    background-size: cover; /* 背景圖片覆蓋整個元素 */
    width: 100%; /* 讓寬度覆蓋整個 viewport */
    height: 92vh;
}
section .banner_1 h2{
    font-size: 6.8rem;  /* !important */
    font-weight: bold; /* 粗體字 */
    letter-spacing: 0.04em; /* 調整字母間距 */
    color: white;
}
section .banner_1>p:nth-of-type(1){    /* :nth-of-type(1) 針對第1個p元素 */
    font-size: 2.2rem;
    font-weight: bold; /* 粗體字 */
    letter-spacing: 0.02em; /* 調整字母間距 */
    color: #E43327;
}
section .banner_1 button{
    font-size: 1.8rem;
    font-weight: bold; /* 粗體字 */
    padding: 0.5em 2.0em; /* 上下邊距 0.5rem，左右邊距 1.5rem */
    border: 0;
    background-color: #003C9D;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    margin: 0.1em 0.4em;
}
section .banner_1 button:hover,
section .banner_1 button:focus{
    color: #003C9D;
    background-color: #fff;
    border: 2px #003C9D solid;
    transform: scale(1.05, 1.05); /* 調整元素放大倍數(設定0可代替隱藏) */
}
section .banner_1 button:active{   /* banner按鈕的a鏈接元素:點擊 */
    /* transform: translate(0, 0); /* 調整元素位置 */
    transform: scale(0.9, 0.9); /* 調整元素放大倍數(設定0可代替隱藏) */
    transition: 0.1s ease-out; /* 出慢-動畫效果 */
}

section .banner_1>p:nth-of-type(2){ /* 針對第1個a元素 */
    margin: 3em 0 2em; /* 邊距只能用在p元素，a元素無效 */
    
}
section .banner_1>p:nth-of-type(2) a{ /* 針對第1個a元素 */
    display: inline-block; /* ！放大需轉塊元素! 讓a元素成為行內塊元素 */
    transform: scale(1, 1); /* 調整元素放大倍數(設定0可代替隱藏) */
    font-size: 1.4rem;
    font-weight: bold; /* 粗體字 */
    text-decoration: none; /* 去除a元素底線 */
    border-bottom: #999 2px solid; /* 底線顏色 */
    /* padding-bottom: 10px; */
    color: #999;
    opacity: 0.6; /* 透明度0.0~1.0(透明~不透明) */
    transition: 0.3s ease-out; /* 入慢-動畫效果 */
}
section .banner_1>p:nth-of-type(2) a:hover,
section .banner_1>p:nth-of-type(2) a:focus{ /* 針對第1個a元素:懸停,聚焦 */
    /* text-decoration: none; /* 去除a元素底線 */
    /* border-bottom: none; /* 去除邊框底部 */
    transform: scale(1.2, 1.2); /* 調整元素放大倍數(設定0可代替隱藏) */
    color: #0FF;
    opacity: 1.0; /* 透明度0.0~1.0(透明~不透明) */
    border-bottom: transparent; /* 邊框底部透明化 */
}
section .banner_1>p:nth-of-type(2) a:active{   /* banner按鈕的a鏈接元素:點擊 */
    transform: translate(0, 0); /* 調整元素位置 */
    /* transform: scale(1, 1); /* 調整元素放大倍數(設定0可代替隱藏) */
    transition: 0.1s ease-out; /* 出慢-動畫效果 */
}


section .banner_1>p:nth-of-type(3) a{   /* banner按鈕的a鏈接元素 */
    display: inline-block; /* ！放大需轉塊元素! 讓a元素成為行內塊元素 */
    text-decoration: none; /* 去除底線 */
    font-size: 1.8rem;
    font-weight: bold; /* 粗體字 */
    padding: 0.6em 0.8em; /* 上下邊距 0.5rem，左右邊距 1.5rem */
    border-radius: 12px; /* 偏直角 */
    border: 1px solid #FFF; /* 邊框顏色 */
    color: white;
    background-color: transparent; /* 背景顏色透明 */
    opacity: 0.9; /* 透明度0.0~1.0(透明~不透明) */
    /* background-color: #000000; /* 背景顏色 */
    transition: 0.3s ease-in; /* 入慢-動畫效果 */
    margin-bottom: 6em;
}

section .banner_1>p:nth-of-type(3) a:hover, 
section .banner_1>p:nth-of-type(3) a:focus{   /* banner按鈕的a鏈接元素:懸停,聚焦 */
    transform: scale(1.4, 1.4); /* 調整元素放大倍數(設定0可代替隱藏) */
    /* padding: 0.8em 1.6em; /* 上下邊距 0.5rem，左右邊距 1.5rem */
    border-radius: 50px; /* 圓角 */
    color: #444;
    background-color: white;
    opacity: 1.0; /* 透明度0.0~1.0(透明~不透明) */
}
section .banner_1>p:nth-of-type(3) a:active{   /* banner按鈕的a鏈接元素:點擊 */
    /* transform: translate(0, 0); /* 調整元素位置 */
    transform: scale(1.15, 1.15); /* 調整元素放大倍數(設定0可代替隱藏) */
    transition: 0.1s ease-out; /* 出慢-動畫效果 */
}

.pre-product_2{
    display: none;
}
.pre-product_1{
    display: block;
}
._pre-product{
    flex-direction: column;
}
.product{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    white-space: nowrap; /* 文字不允許換行 */

    backdrop-filter:blur(8px); /* 模糊效果 */
    -webkit-backdrop-filter:blur(8px);
    color: white;
    width: 70vw;
    height: fit-content;
    margin:1em 0;
    padding: 0.4em 0;
    border-radius: 20px;
    box-shadow: 5px 5px 8px 0 #000;
    background:rgba(255, 255, 255, 0.37);
}
.product div{
    width: 14em;
    text-align: center;
    margin: 1em 0;
    transition: 0.1s ease-in; /* 入慢-動畫效果 */
    opacity: 0.7; /* 透明度0.0~1.0(透明~不透明) */
}
.product div:hover, 
.product div:focus{   /* :懸停,聚焦 */
    transform: scale(1.4, 1.4); /* 調整元素放大倍數(設定0可代替隱藏) */
    cursor: pointer; /* 滑鼠移到上面時變成手指形狀 */
    text-decoration: none;
    color: #FFFF00;
    opacity: 1.0; /* 透明度0.0~1.0(透明~不透明) */
}
.product div:active{   /* :點擊 */
    /* transform: translate(0, 0); /* 調整元素位置 */
    transform: scale(1.2, 1.2); /* 調整元素放大倍數(設定0可代替隱藏) */
    transition: 0.1s ease-out; /* 出慢-動畫效果 */
}
.product img{
    width: 100%;
    border: 10px solid #FFF; /* 邊框顏色 */
    border-radius: 10px; /* 圓角效果 */
    aspect-ratio: 1/1; /* 1:1等比 */
    object-fit: cover; /* 圖片平鋪 */
    object-position: center; /* 圖片居中 */
}
.product h3{
    font-size: 2rem !important;  /* !important :提升權限 */
}
.product p{
    font-size: 1rem !important;  /* !important :提升權限 */
}

.about{
    width: 80vw;
    margin: 0.1em auto;
}
.about h2{
    display: flex;
    align-items: center;
    color: #00FFFF;
    font-size: 30px;
}
.about h2::before{
    content: " ";
    display: inline-block;
    width: 8px;
    height: 30px;
    margin-right: 10px;
    background: #00FFFF;
}
.about p{
    line-height: 1.8;
    text-indent: 2em;
}
.video{
    width: 100%;
    height: auto;
    margin: 1vw auto;
}
footer .footer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em 0;
    /* margin: 4em 0 0 0; */
    background-color: black;
    color: white;
}


/* 以下為響應式設計(for寬度小的熒幕): */
@media screen and (max-width: 765px){   /* 小於指定像素寬度(iPad Mini:寬768px)時執行 */
    header{
        align-items: center;     /* 靠邊居中 */
        padding-bottom: 0.4rem;
    }
    header .logo{
        left: 50%;
        transform: translateX(-50%);
    }
    header p{
        display: none;
    }
    .menu{
        display: block;
        background-color: transparent;
        color: white;
        font-size: 4.8vw;
        width: 8vw;
        position: absolute;
        top: 0;
        right: 0.1rem;
        border: none;
    }
    nav{
        display: none; /* 隱藏 */
        position: relative;
        top: 0%;                     /* 放在下方 */
        left: 50%;                     /* 對齊父級元素中間 */
        transform: translateX(-50%);   /* 往左移動自身元素的一半，達成完美居中 */
        width: 100%;           /* 讓寬度覆蓋整個 viewport */
        margin-top: 1rem;
        border-top: 1px solid #CCCCCC;
        /* border-bottom: 1px solid #CCCCCC; */
        padding: 0 0 0.6rem;
    }
    section .banner_1{
        height: 88vh;
    }
    section .banner_1 a{
        font-size: 2.8rem;
    }
    .pre-product_1{
        display: none;
    }
    .pre-product_2{
        display: flex;
        justify-content: center;
    }
    .product{
        flex-direction: column;
        width: auto;
        height: auto;
        padding: 4em 6em;
    }
    .product div{
        width: 40vw;
        margin:3.8em 0;
    }
<<<<<<< HEAD
}
=======
}
>>>>>>> 8b834c38d985d0a6d640042ca33ffdbb09332382