:root{
  --primary-color: #B800FF;
  --secondary-color: #FF9900;
  --seconary-word: #D6D6D6;
  --Neutral-color: #F4F4F4;
  --Neutral-opacity-color: #f4f4f420;
  --Neutral-hover-bg: #f4f4f440;
  --hero-background: #1C1C1C;
  --nav-bg-color: #1c1c1c20;
  --hero-bg-color: #2D013C;
  --glass-effect: saturate(180%) blur(10px);
  --nav-shadow: inset -2px 1px 1px #f4f4f460;
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --noto-sans-tc: "Noto Sans TC", sans-serif;
  --roboto-sans: "Roboto", sans-serif;    
  --border-radius: 10px;
  --letter-space: 2px;
  --txt-center: center;
  /* === Font Sizes === */
  --fs-xs: 13px;  /* Extra Small - 註解、標籤 */
  --fs-sm: 14px;  /* Small - 說明文字 */
  --fs-md: 16px;  /* Medium - 一般內文 */
  --fs-lg: 24px;  /* Large - 小標題 */
  --fs-xl: 32px;  /* Extra Large - 主標題 */
  --fs-xxl: 48px; /* 2XL - Hero Banner / 超大標題 */

  /* === Font Weights === */
  --fw-light: 300;
  --fw-regular: 400;

  /* === btn === */
  --btn-bg: linear-gradient(to right, #B800FF, #FF9900);
  --btn-padding: 8px 38px;
  --btn-sm-padding: 0 8px;
  --btn-border-radius: 10px 0 0 10px;

  /* === btn hover === */
  --btn-bg-hover: linear-gradient(to right, rgba(184, 0, 255, 0.9), rgba(255, 153, 0, 0.8));
  --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, .25);
}
.hero{
  position: relative;
  background: url(/image/series2.jpg) center/cover no-repeat;
  min-height:400px;
}
.hero h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bagel Fat One", system-ui;
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
}

/* breadcrumb */
.breadcrumb{
  display: flex;
  padding: 16px 12px;
}
.breadcrumb li{
  list-style: none;
}
.breadcrumb li + li:before{
  content: "/";
  color: var(--Neutral-hover-bg);
  margin: 0 8px;
}
.breadcrumb-item a{
  color: var(--Neutral-hover-bg);
  text-decoration: none;
}
.breadcrumb .active{
  color: var(--Neutral-color);
}

/* special */
.special .item{
  background-color: var(--Neutral-opacity-color);
  padding: 16px 8px;
  border-radius: var(--border-radius);
}
.special .pic img{
  border-radius: var(--border-radius);
}
.special .items .txt{
  text-align: center;
  margin: 8px;
}
.special h2{
  font-family: var(--roboto-sans);
}
.special .items p{
  margin: 8px;
}
.special .menu-body{
  display: flex;
  align-items: center;
  flex-direction: column;;
}
.special .menu-lists{
  width: 100%;
  max-width: 410px;
}
.special .lists{
  margin-top: 24px;
  display: flex;
}
.special .lists .pic{
  width: 92px;
  height: 92px;
}
.special .lists h3{
  font-family: var(--roboto-sans);
  font-weight: var(--fw-regular)
}
.special .lists .txt{
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.special .lists .title{
  display: flex;
  flex-direction: row;
}
.special .title span{
  background: linear-gradient(to bottom,#FF9900, #FF990020);
  padding: 4px 8px;
  margin-left: auto;
}
.special .dec{
  font-size: var(--fs-md);
}

@media screen and (min-width: 539px) {
  .special{
    display: flex;
  }
  .items-body{
    display: flex;
    gap: 8px;
  }
  .special .items{
    width: 50%;
  }  
}