@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Swei';
  src: url(../css/font/SweiGothicCJKtc-Medium.woff2) format("woff2");
}

* {margin:0px; padding:0px;}

body, html {font-family:'Swei','微軟正黑體','Microsoft Jhenghei',sans-serif; font-size:16px; line-height:24px; font-weight:300; position:relative; overflow-x:hidden; background:#cd3930; scroll-behavior: smooth;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.cleardiv {display:block; clear:both;}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing:border-box;
  z-index: 1000; /* 確保在最上層 */
}
.logo img {
  height: 34px; /* Logo 高度 */
  width: auto;
  display: block;
}
.hamburger {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: relative;
  z-index: 1001;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #c62800;
  position: absolute;
  transition: all 0.3s ease-in-out; /* 動畫過渡效果 */
  border-radius: 2px;
}
/* 三條線的初始位置 */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { top: 22px; }

/* --- 當選單打開時 (.active) 的漢堡變形動畫 --- */
.hamburger.active span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg); /* 第一條線旋轉 */
}

.hamburger.active span:nth-child(2) {
  opacity: 0; /* 中間那條線消失 */
}

.hamburger.active span:nth-child(3) {
  top: 11px;
  transform: rotate(-45deg); /* 第三條線反向旋轉 */
}

/* --- 下拉選單列表 --- */
.nav-menu {
  position: fixed;
  top: 40px; /* 接在 Navbar 下方 */
  left: 0;
  width: 100%;
  z-index:1000;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  max-height: 0; /* 預設高度為 0 (隱藏) */
  overflow: hidden;
  transition: max-height 0.4s ease-out; /* 下拉動畫 */
}

/* 當選單打開時 */
.nav-menu.active {
  max-height: 350px; /* 設定一個足夠展開內容的高度 */
}

.nav-menu li {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid whitesmoke;
}

.nav-menu li a {
  display: block;
  font-size:18px;
  padding: 20px;
  color: black;
  text-decoration: none;
  transition: background 0.3s;
}

.nav-menu li a:hover {
  background-color: #555;
}

#layout {width:100%; max-width:800px; position:relative; margin:auto; background:url(../images/bg.jpg) center repeat; padding-bottom:50px;}

section {position:relative; padding:20px 0px 5px 0px;}

#kv {position:relative; width:100%; padding-top:0px; padding-bottom:0px; overflow: hidden; will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;}
#kv img.main {width:100%; height:auto;}
#kv img.slogan {width:55%; position:absolute; top:22%; left:50%; transform:translateX(-50%);}
#kv img.scroldwn {position:absolute; width:22%; bottom:130px; left:50%; transform:translateX(-50%); animation: bounce 2s infinite;}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateX(-50%) translateY(-15px);
  }
  60% {
    transform: translateX(-50%) translateY(-7px);
    opacity: 0.8;
  }
}

#kv .overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 使用 opacity 配合 GSAP 控制 */
  opacity: 0; 
  visibility: hidden;
}
#kv .overlay p {font-size:22px; line-height:34px; margin:5px auto; text-align:center;}

img.title {display:block; width:80%; margin:auto;}

#sec1 img.title {margin-bottom:-40px;}
#sec1 img.book {display:block; width:100%;}
#sec1 img.food_1 {position: absolute; width: 45%; top: 26%; left: 9%;}
#sec1 img.food_2 {position: absolute; width: 42%; top: 30%; right: 12%;}
#sec1 img.food_3 {position: absolute; width: 40%; top: 43%; left: 8%;}
#sec1 img.food_4 {position: absolute; width: 28%; top: 41%; right: 7%;}
#sec1 img.food_5 {position: absolute; width: 43%; left: 7%; bottom: 16%;}
#sec1 img.food_6 {position: absolute; width: 36%; right: 15%; bottom: 13%;}

#sec2 {position:relative; width:96%; margin:auto;}
#sec2 .bag {position:relative; display:flex; justify-content: flex-end; align-items: center;}
#sec2 .bag .lt {display:block; position:absolute; width:65%; left:5%;}
#sec2 .bag .lt span {display: inline-block; height:30px; padding:5px 8px; border-top-left-radius:10px; border-top-right-radius:10px;}
#sec2 .bag .lt .a {height:40px; border-bottom:2px solid #b2ca24; margin-bottom:5px;}
#sec2 .bag .lt .a span {background:#b2ca24; margin-right:10px;}
#sec2 .bag .lt .b {height:40px; border-bottom:2px solid #65c4d2; margin-bottom:5px;}
#sec2 .bag .lt .b span {background:#65c4d2; margin-right:10px;}
#sec2 .bag .lt .c {height:40px; border-bottom:2px solid #fabe00; margin-bottom:5px;}
#sec2 .bag .lt .c span {background:#fabe00; margin-right:10px;}
#sec2 .bag .lt img.date {height:30px; width:auto;}
#sec2 .bag .lt img.text {height:26px; width:auto;}
#sec2 .bag .lt p {font-size:15px; box-sizing:border-box; padding-right:50px; color:white;}
#sec2 .bag .lt p:nth-child(2) {padding-right:65px;}
#sec2 .bag .rt {width:53%; z-index:1;}

#sec3 {padding-bottom:20px; position:relative;}

#sec3 .refr {width:100%; height:auto;}

#sec3 .refr .tag_1 {
    position: absolute;
    top: 21%;
    left: 33%;
    width: 38%;
}
#sec3 .refr .tag_2 {
    position: absolute;
    top: 42%;
    left: 33%;
    width: 38%;
}
#sec3 .refr .tag_3 {
    position: absolute;
    top: 56%;
    left: 33%;
    width: 38%;
}
#sec3 .refr .tag_4 {
    position: absolute;
    top: 76%;
    left: 33%;
    width: 38%;
}

#sec3 .info {box-sizing:border-box; padding:3px 0px 5px 5px;}
#sec3 .info p {font-size:15px; line-height:18px; padding-left:3px;}
#sec3 .info img {width:135px; margin-top:-25px; margin-left:-5px; margin-bottom:-10px;}

#sec3 .refr .info_1 {
    position: absolute;
    width: 30%;
    top: 11%;
    left: 5px;
    background: url(../images/sec_3_11.png) no-repeat;
    background-size: 100% 100%;
}
#sec3 .refr .info_2 {
    position: absolute;
    width: 33%;
    top: 27%;
    left: 5px;
    background: url(../images/sec_3_12.png) no-repeat;
    background-size: 100% 100%;
}
#sec3 .refr .info_3 {
    position: absolute;
    width: 33%;
    top: 46%;
    left: 5px;
    background: url(../images/sec_3_13.png) no-repeat;
    background-size: 100% 100%;
}
#sec3 .refr .info_4 {
    position: absolute;
    width: 34%;
    top: 62%;
    left: 5px;
    background: url(../images/sec_3_14.png) no-repeat;
    background-size: 100% 100%;
}
#sec3 .refr .info_5 {
    position: absolute;
    width: 33%;
    top: 81%;
    left: 5px;
    background: url(../images/sec_3_15.png) no-repeat;
    background-size: 100% 100%;
}

#sec3 .lne_1 {
    width: 25%;
    position: absolute;
    top: 28%;
    left: 25%;
}
#sec3 .lne_2 {
    width: 23%;
    position: absolute;
    top: 46%;
    left: 29%;
}
#sec3 .lne_3 {
    width: 25%;
    position: absolute;
    top: 60.5%;
    left: 25%;
}
#sec3 .lne_4 {
    width: 23%;
    position: absolute;
    top: 80%;
    left: 26%;
}

.yt {position:relative; width:90%; margin:30px auto;}
.yt img {width:100%; height:auto;}



        /* --- 輪播容器 --- */
        .carousel-container {
            position: relative;
            width:90%; /* 這裡設定輪播顯示的寬度 */
            margin:auto;
            overflow: hidden; /* 關鍵：隱藏超出的部分 */
        }

        /* --- 輪播軌道 (放置所有連結的長條) --- */
        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out; /* 滑動動畫 */
            height: 100%;
        }

        /* --- 單個連結區塊 --- */
        .carousel-item {
            min-width: 100%; /* 關鍵：讓每個區塊剛好佔滿容器寬度 */
            text-decoration: none;
            color: #333;
            display: flex;
            flex-direction: column; /* 垂直排列內容 */
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 20px;
        }

        /* --- 內容樣式設定 --- */
        .text-line-1 {
            font-size:16px;
            margin-bottom: 10px;
            color: white;
        }

        .text-line-2 {
            font-size:22px;;
            color: white;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .slide-image {
            width: 30%;
            height:auto;
            object-fit: cover;
            margin-bottom: 20px;
        }

        .text-line-last {
            font-size: 16px;
            color: #c62800;
            background:white;
            font-weight: bold;
            padding:5px 12px; border-radius:30px;
        }

        /* --- 左右切換按鈕 --- */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            font-size: 1.2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.3s;
        }

        .carousel-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .prev-btn { left: 10px; }
        .next-btn { right: 10px; }


.lastlnk {display:block; width:50%; margin:30px auto; background:white; color:#c62800; font-size:20px; padding:12px; border-radius:30px; font-weight:bold; text-align:center;}



@media (min-width:800px) {
  #kv .overlay {height:100vh;}
  #sec2 .bag .lt .a, #sec2 .bag .lt .b, #sec2 .bag .lt .c {height:50px;}
  #sec2 .bag .lt img.date {height:50px;}
  #sec2 .bag .lt span {height:40px;}
  #sec2 .bag .lt img.text {height:46px;}
  #sec2 .bag .lt p {font-size:20px; line-height:30px;}
  #sec2 .bag .lt p:nth-child(2) {padding-right:130px;}
  #sec3 .info img {width:200px;}
  #sec3 .info p {font-size:17px; line-height:24px; padding:10px;}
}