@charset "UTF-8";
/* 在檔案最上方引入共用函數*/
/*筆電平板*/
/* 手機版轉換 (基準 375px) */
/*basic*/
@media screen and (max-width: 992px) {
  .img_title {
    background-position: 15% center;
  }
}
h3.sub_title {
  font-size: 32px;
  font-weight: 500;
  line-height: 100%;
  color: #9D7E63;
  border-left: 4px solid #9D7E63;
  padding: 3px 0 5px 20px;
  margin-bottom: 24px;
}

@media screen and (max-width: 992px) {
  h3.sub_title {
    font-size: 20px;
    border-left: 3px solid #9D7E63;
    padding: 2px 0 2px 8px;
    margin-bottom: 16px;
  }
}
.ay_sn_01_div,
.ay_sn_02_div.food_grid,
.ay_sn_03_div,
.ay_sn_04_div,
.ay_sn_05_div {
  max-width: 59.375vw;
  margin: auto;
}

@media screen and (max-width: 1767px) {
  .ay_sn_01_div,
  .ay_sn_02_div.food_grid,
  .ay_sn_03_div,
  .ay_sn_04_div,
  .ay_sn_05_div {
    max-width: 79.1666666667vw;
  }
}
@media screen and (max-width: 992px) {
  .ay_sn_01_div,
  .ay_sn_02_div.food_grid,
  .ay_sn_03_div,
  .ay_sn_04_div,
  .ay_sn_05_div {
    max-width: 100%;
  }
}
/*ay_sn_01*/
.yt_video {
  padding-bottom: 52.9%;
}

section#ay_sn_01 {
  position: relative;
}

.ay_sn_01_div {
  padding: 3.125vw 1.0416666667vw 0 1.0416666667vw;
}

.ay_sn_01_div .page_title {
  margin: 0 0 24px -50px;
}

.ay_sn_01_div h3 {
  font-size: 32px;
  line-height: 180%;
  color: #000;
  letter-spacing: 4%;
  font-weight: 700;
  margin-bottom: 20px;
}

.ay_sn_01_div .text_box {
  padding: 2.6041666667vw 0;
  position: relative;
}

.ay_sn_01_div .text_box p {
  position: relative;
  z-index: 1;
}

.ay_sn_01_div .text_box:before {
  background: #F9F3E6;
  position: absolute;
  left: -37%;
  width: 281%;
  height: 100%;
  content: "";
  max-width: 63.8541666667vw;
  top: 0;
}

.yt_div {
  position: absolute;
  top: 5.8333333333vw;
  left: 47%;
  width: 100%;
  max-width: 46.875vw;
  z-index: 1;
}

@media screen and (max-width: 1440px) {
  .ay_sn_01_div .page_title {
    margin: 0 0 1.6666666667vw 0;
  }
  .ay_sn_01_div {
    padding: 4.1666666667vw 1.3888888889vw 0 1.3888888889vw;
  }
  .ay_sn_01_div .text_box {
    padding: 3.4722222222vw 0;
  }
  .ay_sn_01_div .text_box:before {
    max-width: 85.1388888889vw;
  }
  .yt_div {
    top: 9.1666666667vw;
    max-width: 41.6666666667vw;
  }
}
@media screen and (max-width: 1200px) {
  .ay_sn_01_div {
    padding: 40px 0px 0 0px;
  }
  .ay_sn_01_div .page_title {
    margin: 0 0 12px 0;
  }
  .yt_div {
    position: relative;
    top: 0;
    left: 0;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
  }
  .ay_sn_01_div .text_box:before {
    display: none;
  }
  .ay_sn_01_div .text {
    background: #F9F3E6;
    padding: 40px 20px 20px 20px;
    margin-top: -20px;
  }
  .ay_sn_01_div h3 {
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .ay_sn_01_div .text_box {
    padding: 0;
  }
}
/*ay_sn_02*/
.ay_sn_02_div.food_grid {
  grid-template-columns: 31fr 21fr;
  gap: 3.125vw;
  padding: 4.1666666667vw 1.0416666667vw;
  align-items: center;
}

.img_cove {
  line-height: 0;
}

.ay_sn_02_div.food_grid h4 {
  font-size: 32px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 16px;
}

@media (max-width: 1440px) {
  .ay_sn_02_div.food_grid {
    gap: 4.1666666667vw;
    padding: 5.5555555556vw 1.3888888889vw;
  }
}
@media (max-width: 992px) {
  .ay_sn_02_div.food_grid {
    grid-template-columns: 1fr;
    gap: 4.2666666667vw;
    padding: 10.6666666667vw 5.3333333333vw 0 5.3333333333vw;
  }
  .ay_sn_02_div.food_grid h4 {
    font-size: 20px;
    margin-bottom: 12px;
  }
}
/*ay_sn_03*/
.ay_sn_03_div {
  padding: 0 1.0416666667vw;
}

.ay_sn_03_div .food_grid {
  gap: 2.1354166667vw;
}

.ay_sn_03_div .item_card {
  background: #FFf;
  position: relative;
  min-height: 20.15625vw;
  display: flex;
  flex-direction: column;
  /* 新增：預設透明度為 0，且往下偏移 40px */
  opacity: 0;
  transform: translateY(40px);
  /* 新增：設定透明度與位移的平滑過場時間 (0.6秒) */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* --- 3. 設定由左至右的「延遲進場」時間 --- */
/* 第一張卡片：不延遲，立刻出現 */
.ay_sn_03_div .item_card:nth-child(1) {
  transition-delay: 0s;
}

/* 第二張卡片：延遲 0.2 秒出現 */
.ay_sn_03_div .item_card:nth-child(2) {
  transition-delay: 0.2s;
}

/* 第三張卡片：延遲 0.4 秒出現 */
.ay_sn_03_div .item_card:nth-child(3) {
  transition-delay: 0.4s;
}

/* --- 2. 滑到區塊時的顯示狀態 --- */
.ay_sn_03_div .fade-in-section.visible .item_card {
  opacity: 1;
  transform: translateY(0);
  /* 回到原始位置 */
}

.ay_sn_03_div .bk_img {
  padding-bottom: 53%;
}

.ay_sn_03_div .text {
  padding: 1.0416666667vw 0.8333333333vw;
  /* 3. 讓文字區塊自動填滿剩下的高度 */
  flex: 1;
}

.ay_sn_03_div .text h4 {
  font-size: 18px;
  font-weight: 700;
  color: #9D7E63;
  line-height: 100%;
  margin-bottom: 10px;
}

.ay_sn_03_div .text p {
  font-size: 16px;
  line-height: 170%;
}

/* 限定在電腦版螢幕 (大於 992px) 才套用階梯效果 */
@media (min-width: 991px) {
  /* 讓卡片靠上對齊，避免 Grid 預設的拉伸變形 */
  .ay_sn_03_div .food_grid.boxthree {
    align-items: start;
    /* 預留底部空間，避免第三張卡片往下掉 100px 後超出父容器或擋到下方的 section */
    padding-bottom: 80px;
  }
  /* 選擇第二個 item_card */
  .ay_sn_03_div .food_grid.boxthree .item_card:nth-child(2) {
    margin-top: 50px;
  }
  /* 選擇第三個 item_card */
  .ay_sn_03_div .food_grid.boxthree .item_card:nth-child(3) {
    margin-top: 100px;
  }
}
@media (max-width: 1440px) {
  .ay_sn_03_div {
    padding: 0 1.3888888889vw;
  }
  .ay_sn_03_div .food_grid {
    gap: 2.8472222222vw;
  }
  .ay_sn_03_div .item_card {
    min-height: 20.15625vw;
  }
  .ay_sn_03_div .text {
    padding: 1.3888888889vw 1.1111111111vw;
  }
}
@media (max-width: 992px) {
  .ay_sn_03_div {
    padding: 10.6666666667vw 5.3333333333vw 0 5.3333333333vw;
  }
  .ay_sn_03_div .food_grid {
    gap: 4.2666666667vw;
    grid-template-columns: 1fr;
  }
  .ay_sn_03_div .item_card {
    min-height: auto;
    display: grid;
    grid-template-columns: 32vw auto;
    align-items: center;
  }
  .ay_sn_03_div .bk_img {
    padding-bottom: 0;
    min-height: 41.3333333333vw;
  }
  .ay_sn_03_div .text {
    padding: 3.2vw;
  }
  .ay_sn_03_div .text h4 {
    margin-bottom: 4px;
  }
  .ay_sn_03_div .text p {
    font-size: 14px;
    line-height: 150%;
  }
}
/*ay_sn_04*/
section#ay_sn_04 {
  position: relative;
  padding: 0 0 4.84375vw 0;
}

.ay_sn_04_div {
  padding: 0 1.0416666667vw;
}

section#ay_sn_04 .text {
  max-width: 28.8020833333vw;
  z-index: 1;
  position: relative;
}

section#ay_sn_04 img.img_bk_01 {
  position: absolute;
  max-width: 19.1145833333vw;
  top: 4.3229166667vw;
  left: 52.5520833333vw;
  z-index: 1;
}

section#ay_sn_04 img.img_bk_02 {
  max-width: 10.6770833333vw;
  animation: pulseScale 3s ease-in-out infinite;
  position: absolute;
  left: 62.3958333333vw;
  top: 3.1770833333vw;
  z-index: 1;
}

section#ay_sn_04 .color_bk {
  position: absolute;
  width: 39.375vw;
  height: 16.09375vw;
  background: #F9F3E6;
  top: 10%;
  z-index: 0;
  right: 0;
}

@keyframes pulseScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 1440px) {
  section#ay_sn_04 {
    padding: 0 0 6.4583333333vw 0;
  }
  .ay_sn_04_div {
    padding: 0 1.3888888889vw;
  }
  section#ay_sn_04 .text {
    max-width: 38.4027777778vw;
  }
  section#ay_sn_04 img.img_bk_01 {
    max-width: 25.4861111111vw;
    top: 5.7638888889vw;
    left: 56.1805555556vw;
  }
  section#ay_sn_04 img.img_bk_02 {
    max-width: 14.2361111111vw;
    left: 69.3055555556vw;
    top: 4.2361111111vw;
  }
  section#ay_sn_04 .color_bk {
    width: 38.6111111111vw;
    height: 21.4583333333vw;
  }
}
@media (max-width: 992px) {
  section#ay_sn_04 {
    padding: 0 0 10.6666666667vw 0;
  }
  .ay_sn_04_div {
    padding: 10.6666666667vw 5.3333333333vw 0 5.3333333333vw;
  }
  section#ay_sn_04 .img_bk_div {
    position: relative;
    margin-top: 4.2666666667vw;
    padding: 5.8666666667vw 0 0 0;
  }
  section#ay_sn_04 img.img_bk_01 {
    position: relative;
    width: 47.73%;
    top: 0;
    left: 21.33%;
    z-index: 1;
  }
  section#ay_sn_04 img.img_bk_02 {
    max-width: 32%;
    left: 43%;
    top: 2.9333333333vw;
  }
  section#ay_sn_04 .color_bk {
    width: 100.5333333333vw;
    height: 40.2666666667vw;
    top: 0;
    right: -25%;
    transform: unset;
  }
  section#ay_sn_04 .text {
    max-width: 100%;
  }
  section#ay_sn_04 img.img_bk_01 {
    max-width: 100%;
  }
}
/*ay_sn_05*/
.ay_sn_05_div {
  padding: 0 20px 100px 20px;
}

.ay_sn_05_div .page_title {
  margin: 0 0 24px -50px;
}

.ay_sn_05_div .page_title_text {
  margin-bottom: 40px;
}

.ay_sn_05_div .page_title_text h3 {
  font-size: 32px;
  line-height: 140%;
  font-weight: 500;
  margin-bottom: 16px;
}

.ay_sn_05_div .food_grid {
  background: #fff;
}

.ay_sn_05_div .text {
  padding: 40px;
}

.ay_sn_05_div .text h3 {
  font-size: 32px;
  color: #9D7E63;
  line-height: 100%;
  font-weight: 500;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(204, 174, 102, 0.5019607843);
}

.ay_sn_05_div .text h4 {
  color: #000;
  font-size: 24px;
  line-height: 100%;
  font-weight: 500;
  margin-bottom: 16px;
}

.xinzhuang_grid.food_grid.boxtwo {
  margin-bottom: 80px;
}

/* --- 按鈕排版 --- */
.mobile_toggle_btn {
  display: none; /* 電腦版預設隱藏 */
  /* 這裡原本的 text-align 可以拿掉，因為我們改用 flex 讓圖片跟文字對齊 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px; /* 文字與箭頭的間距 */
  color: #CCAE66;
  font-size: 16px;
  cursor: pointer;
  margin-top: 0px;
  font-weight: 500;
}

/* --- 箭頭旋轉動畫 --- */
.mobile_toggle_btn .toggle_icon {
  /* 設定旋轉的平滑動畫時間 (0.3秒) */
  transition: transform 0.3s ease;
  /* 預設是「展開介紹」，所以把 up.svg 轉 180 度變成朝下 */
  transform: rotate(180deg);
}

/* --- 展開狀態下的箭頭 --- */
.text.is-expanded .mobile_toggle_btn .toggle_icon {
  /* 恢復成 0 度，也就是原始朝上的樣子 */
  transform: rotate(0deg);
}

@media screen and (max-width: 1227px) {
  .ay_sn_05_div .page_title {
    margin: 0 0 24px 0;
  }
}
@media (max-width: 992px) {
  .ay_sn_05_div {
    padding: 0 20px 40px 20px;
  }
  .ay_sn_05_div .page_title {
    margin: 0 0 12px 0;
  }
  .ay_sn_05_div .page_title_text h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .ay_sn_05_div .page_title_text, .xinzhuang_grid.food_grid.boxtwo {
    margin-bottom: 16px;
  }
  .xinzhuang_grid, .shihlin_grid {
    display: flex;
  }
  .xinzhuang_grid .bk_img, .shihlin_grid .bk_img {
    padding-bottom: 60%;
    background-position: center 26%;
  }
  .xinzhuang_grid {
    flex-direction: column-reverse;
  }
  .shihlin_grid {
    flex-direction: column;
  }
  .ay_sn_05_div .text {
    padding: 10px;
  }
  .ay_sn_05_div .text h3 {
    font-size: 20px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .ay_sn_05_div .text h4 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  /* 顯示按鈕 */
  .mobile_toggle_btn {
    display: flex;
    align-items: center;
    transition: margin-top 0.3s ease;
  }
  .text.is-expanded .mobile_toggle_btn {
    margin-top: 12px;
  }
  /* 內文區塊預設隱藏，並設定高度為 0 */
  .desc_content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* 設定展開與收起時的平滑過場時間 (0.5秒) */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease, margin-top 0.3s ease;
  }
  /* 當外層被 JS 加上 .is-expanded 時的「展開狀態」 */
  .text.is-expanded .desc_content {
    /* 給一個「絕對大於文字實際高度」的數值，例如 800px */
    max-height: 800px;
    opacity: 1;
    margin-top: 0px; /* 展開時與標題拉開一點距離 */
  }
}/*# sourceMappingURL=about.css.map */