html{

  scroll-behavior: smooth;

}

/* 全網頁只要滑鼠滑到連結就變手指 */

a:hover {

  cursor: pointer !important;

}

/* 這行是最上面的板頭 */

header>.inner {

  background-color: rgba(255, 255, 255, 0);

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-backdrop-filter: blur(3px);

  backdrop-filter: blur(3px);

}

/* hoho的logo */

header>.inner a.logo {

  background: url(../images/icon_hoho-02.svg) no-repeat center;

  background-size: cover;

  width: 180px;

  height: 140px;

  left: 0px;

}

/* hoho的logo滑鼠移過去後 */

header>.inner a.logo:hover {

  filter: brightness(1.1);

  transition: 0.2s;

}

/* 右上的icon */

header ul.wrap-link li i[class\\\\*="icon-"],

header ul.wrap-link li a[class\\\\*="icon-"] {

  background-color: #444;

  color: #ffffff;

  transition: 0.2s;

}

/* 右上的icon滑鼠移過去後 */

header ul.wrap-link li i[class\\\\*="icon-"]:hover,

header ul.wrap-link li a[class\\\\*="icon-"]:hover {

  background-color: rgb(255, 188, 2);

  color: #ffffff ;

  transition: 0.2s;

}

/* icon旁邊的文字 */

header ul.wrap-link li span {

  color: #444;

  margin-right: 10px;

}

/* 從這邊開始是內容大框架 */

.container {

  background-color: #f9f0df;

}

.container img {

  vertical-align: top;

  max-width: 100%;

  height: auto;

}

.innerbox {

  max-width: 1200px;

  width: 100%;

  margin: 0 auto;

  padding: 0;

}

.showPC{

  display: block;

}

.showMB{

  display: none;

}

/* 活動說明 */

.rule{

  position: relative;

  padding: 40px 16px;

  background-color: #f3ece9;

}

.rule h5{

  font-size: 32px;

  font-weight: 700;

  text-align: center;

  margin-bottom: 24px;

}

.rule p{

  font-size: 18px;

  font-weight: 400;

  line-height: 32px;

}

.rule p span{

  display: block;

  margin-left: 20px;

}

.rule a{

  color: #3895b4;

  text-decoration: underline;

}

/*側邊欄*/

.navButton{

  display: none;

  justify-content: space-between;

  background-color: #fff;

  padding: 0px 16px;

  height: 40px;

  line-height: 40px;

  position: fixed;

  bottom: 0;

  width: 100%;

  box-sizing: border-box;

  transition: top .4s ease-in-out;

  box-shadow: 0 0 8px rgba(0,0,0,.2);

  z-index: 999;

}

.navButton a{

  color: #000;

  text-decoration: none;

  font-size: 16px;

}

.navButton_pc{

  display: block;

  position: fixed;

  right: 0px;

  top: 150px;

  width: 156px;

  height: 260px;

  padding: 100px 16px 0px 52px;

  background-image: url("../images/navbg.png");

  background-position: top center;

  background-repeat: no-repeat;

  transition: right .4s ease-in-out;

  filter:drop-shadow(4px 8px 8px rgb(201, 20, 0));

  z-index: 999;

}

.navButton_pc a{

  display: block;

    text-align: center;

    width: 100%;

    font-size: 16px;

  line-height: 28px;

  font-weight: 700;

    color: #181818;

    text-decoration: none;

}

.navButton_pc a:hover{

  color: #cc3c39;

  font-weight: 900;

}

.navHide .navButton_pc {

  right: -156px;

}

/*swiper*/

.swiper {

    width: 100%;

    max-width: 1100px;

    height: auto;

    margin: 0px auto;

}

#swiper-one {

    margin: 0 auto !important;

}

.swiper-slide {

    width: 350px;

    height: auto !important;

    text-align: center;

    font-size: 18px;

    background: transparent;

    padding: 0px 0 0 0;

    /* Center slide text vertically */

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    flex-direction: column;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: flex-start;

    justify-content: flex-start;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}

/* 回到上方 */

a#backTop {

  background-color: #444;

  bottom: 52px;

}

/* 客製內容從下面開始 */

.all{

  display: flex;

  flex-direction: column;

  align-items: center;

  background-position: top center;

  background-repeat: no-repeat;

}

.kv-bg{

  width: 100%;

  background-image: url(../images/kv-bg.jpg);

  background-position: top center;

  background-repeat: no-repeat;

  background-size: 1920px auto;

  position: relative;

  display: flex;

  justify-content: center;

}

.kv{

  padding: 0;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-content: flex-start;

  flex-wrap: wrap;

  position: relative;

  box-sizing: border-box;

}

.kv-tw{

  margin-top: 60px;

}

@keyframes kv-tt{

  0%{

    transform:translateY(20px);

  }

  50%{

    transform:translateY(0px);

  }

  100%{

    transform:translateY(20px);

  }

}

.kv-tt{

  width: 100%;

  text-align: center;

  animation-name: kv-tt;

  animation-duration: 2s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out;

}

.kv-tt img,

.kv-tt-mb img,

.kv-tw img{

  display: block;

  margin-left: auto;

  margin-right: auto;

}

.kv-tt-mb{

  display: none;

  width: 90%;

  text-align: center;

  animation-name: kv-tt;

  animation-duration: 2s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out;

}

.kv-cp{

  width: 1050px;

  max-width: 100%;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  margin: 30px auto 50px;

  animation-name: kv-cp;

  animation-duration: 2s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out;

}

#kv-cp01{

  width: 33.33%;

  transition: 0.2s;

  text-align: center;

}

#kv-cp01:hover{transform : scale(1.05);}

#kv-cp02{

  width: 33.33%;

  transition: 0.2s;

  text-align: center;

}

#kv-cp02:hover{transform : scale(1.05);}

#kv-cp03{

  width: 33.33%;

  transition: 0.2s;

  text-align: center;

}

#kv-cp03:hover{transform : scale(1.05);}

.ctbg{

  width: 100%;

  background-image: url(../images/bg.jpg);

  background-position: top center;

  background-repeat: repeat-y;

  background-size: 1920px auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  box-sizing: border-box;

}

#ct01{

  width: 1200px;

  padding: 30px 0 40px 0;

  margin-top: 100px;

  background: #fefaf0;

  border-radius: 30px;

  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));

  text-align: center;

}

.ct01-tt-mb{

  display: none;

}

.ct01-ct01-mb,
.ct01-ct02-mb{
  margin: 20px 20px 20px 20px;
  display: none;
}

.ct01-bt{

  width: 100%;

  margin-top: 50px;

  transition: 0.2s;

}

.ct01-bt:hover{transform : scale(0.95);}

#ct02{

  width: 1200px;

  padding: 30px 0 40px 0;

  margin-top: 100px;

  background: #fefaf0;

  border-radius: 30px;

  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));

  text-align: center;

}

.ct02-tt-mb{

  display: none;

}

.ct02-cp{

  width: 1100px;

  max-width: 100%;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  margin: 30px auto 0;

}

#ct02-cp01{

  width: 33.33%;

  text-align: center;

}

#ct02-cp02{

  width: 33.33%;

  text-align: center;

}

#ct02-cp03{

  width: 33.33%;

  text-align: center;

}

.ct02-bt{

  width: 100%;

  text-align: center;

  margin-top: 50px;

  transition: 0.2s;

}

.ct02-bt:hover{transform : scale(0.95);}

#ct03{

  width: 1440px;

  padding: 0px 20px;

}

.ct03-tt{

  text-align: center;

  margin-top: 120px;

  margin-bottom: 30px;

}

.ct03-tt-mb{

  text-align: center;

  display: none;

}

.ct03-ct{

  width: 1290px;

  margin: auto;

  display: flex;

  justify-content: center;

}

.ct03-img01{

  width: 32%;

  filter: drop-shadow(10px 10px 0px rgba(0,0,0,.75));

}

.ct03-img02{

  width: 32%;

  filter: drop-shadow(10px 10px 0px rgba(0,0,0,.75));

}

.ct03-img03{

  width: 32%;

  filter: drop-shadow(10px 10px 0px rgba(0,0,0,.75));

}

#ct04{

  width: 1200px;

  padding: 10px 0 50px 0;

  margin-top: 200px;

  background: #72be74;

  border-radius: 20px;

  border: solid 3px #444444;

  filter: drop-shadow(10px 10px 0px rgba(0,0,0,.75));

}

.ct04-tt{

  text-align: center;

  margin: 30px 0 0 0;

}

.ct04-tt-mb{

  text-align: center;

  display: none;

}

.ct04-ct{

  padding: 80px 0 40px 0;

  width: 1150px;

  background: #f8f6e8;

  margin: auto;

}

.ct04-ct00{

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

.ct04-ct01{

  font-size: 30px;

  background: #72be74;

  border-radius: 100px;

  font-weight: 600;

  width: 600px;

  height: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 30px;

}

#ct05{

  width: 1200px;

  padding: 10px 0 50px 0;

  margin-top: 100px;

  margin-bottom: 200px;

  background: #ec692f;

  border-radius: 20px;

  border: solid 3px #444444;

  filter: drop-shadow(10px 10px 0px rgba(0,0,0,.75));

}

.ct05-tt{

  text-align: center;

  margin: 30px 0 0 0;

}

.ct05-tt-mb{

  text-align: center;

  display: none;

}

.ct05-ct{

  padding: 80px 0 40px 0;

  width: 1150px;

  background: #f8f6e8;

  margin: auto;

}

.ct05-ct00{

  padding: 50px 25px 0px 25px;

}

.ct05-ct01{

  font-size: 26px;

  color: #ec692f;

  font-weight: 600;

  margin: 0;

}

.ct05-ct02{

  font-size: 18px;

  color: #4c4c4c;

  font-weight: 600;

  line-height: 2 ;

  margin:10px 0 10px 0;

}

/* ===== 置中與背景修正版：共用保護 ===== */

.kv-bg,

.ctbg,

.kv,

#ct01,

#ct02,

#ct03,

#ct04,

#ct05 {

  box-sizing: border-box;

}

#ct01,

#ct02,

#ct03,

#ct04,

#ct05 {

  margin-left: auto;

  margin-right: auto;

}

@media (max-width: 1440px) {

  /* 客製內容從下面開始 */

  .kv{

    width: 100%;

  }

  .kv-tt{

    width: 90%;

  }

  .kv-cp{

    width: 95%;

  }

  #kv-cp01{

    text-align: center;

  }

  #kv-cp02{

    text-align: center;

  }

  #kv-cp01>a>img{

    max-width: 90%;

  }

  #kv-cp02>a>img{

    max-width: 90%;

  }

  .ct-bgt-pc{

    text-align: center;

    margin-top: -115px;

  }

  .ct-bgt-pc>img{

    max-width: 95%;

  }

  #ct01{

    width: 85%;

    margin-top: 150px;

    padding: 10px 0 40px 0;

  }

  .ct01-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  #ct02{

    width: 85%;

    padding: 10px 0 40px 0;

  }

  .ct02-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  #ct03{

    width: 100%;

  }

  .ct03-ct{

    width: 90%;

  }

  #ct04{

    width: 85%;

    padding: 10px 0 40px 0;

    margin-top: 175px;

  }

  .ct04-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  #ct05{

    width: 85%;

    padding: 10px 0 40px 0;

  }

  .ct05-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  .ct05-ct00{

    padding: 40px 10px 0px 10px;

  }

  .ct04-ct01{

    font-size: 24px;

    width: 600px;

    height: auto;

    padding: 15px;

    margin-top: 30px;

  }

}

@media (max-width: 1030px) {

  /* 客製內容從下面開始 */

  .ct-bgt-pc{

    text-align: center;

    margin-top: -110px;

  }

  #ct01{

    width: 90%;

    margin-top: 150px;

    padding: 10px 0 30px 0;

  }

  .ct01-tt{

    margin: 40px 0 30px 0;

  }

  .ct01-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  .ct01-bt{

    margin-top: 40px;

  }

  #ct02{

    width: 90%;

    padding: 10px 0 30px 0;

  }

  .ct02-tt{

    margin: 40px 0 30px 0;

  }

  .ct02-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  .ct02-bt{

    margin-top: 40px;

  }

  #ct04{

    width: 90%;

    padding: 10px 0 30px 0;

    margin-top: 150px;

  }

  .ct04-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  #ct05{

    width: 90%;

    padding: 10px 0 30px 0;

  }

  .ct05-ct{

    width: 95%;

    padding: 80px 15px 30px 15px;

  }

  .ct04-ct01{

    font-size: 20px;

    width: 60%;

    padding: 15px;

    margin-top: 30px;

  }

}

@media (max-width: 900px) {

  .lightbox:target img {

    margin-top: 250px;

  }

  /* 客製內容從下面開始 */

  .ct-bgt-pc{

    text-align: center;

    margin-top: -105px;

  }

  #ct01{

    padding: 7.5px 0 30px 0;

  }

  .ct01-tt{

    margin: 30px 0 30px 0;

  }

  .ct01-bt{

    margin-top: 30px;

  }

  #ct02{

    padding: 7.5px 0 30px 0;

  }

  .ct02-tt{

    margin: 30px 0 30px 0;

  }

  .ct02-bt{

    margin-top: 30px;

  }

  #ct04{

    padding: 7.5px 0 30px 0;

    margin-top: 125px;

  }

  #ct05{

    padding: 7.5px 0 30px 0;

  }

}

@media (max-width: 780px) {

  /* hoho的logo */

  header>.inner a.logo {

    background: url(../images/icon_hoho-02.svg) no-repeat center;

    background-size: cover;

    width: 130px;

    height: 100px;

    left: -10px;

  }

  .rule p span {

    margin-left: 25px;

  }

  .showPC{

  display: none;

  }

  .showMB{

    display: block;

  }

  /* 客製內容從下面開始 */

  .kv-tt{

    display: none;

  }

  .kv-tt-mb{

    display: block;

    margin-top: 30px;

  }

  .kv-cp{

    margin-top: 50px;
    margin-bottom: 50px;

    text-align: center;

  }

  #kv-cp01{

    width: 50%;

  }

  #kv-cp02{

    width: 50%;

  }

  #kv-cp03{

    width: 100%;

    margin-top: 5%;

  }

  #kv-cp03>a>img{

    max-width: 48%;

  }

  .ct-bgt-pc{

    display: none;

  }

  .ct-bgt-mb{

    display: block;

    margin-top: -115px;

  }

  #ct01{

    margin-top: 100px;

  }

  .kv{

    padding: 0px;

  }

  #ct01,#ct02,#ct04,#ct05,#ct06{

    padding: 10px 0 30px 0;

  }

  #ct04{

    margin-top: 100px;

  }

  .ct03-ct{

    display: flex;

    flex-wrap: wrap;

  }

  .ct03-img01{

    width: 90%;

    margin-top: 30px;

    transform:rotate(0deg);

    transition: 0.2s;

  }

  .ct03-img01:hover{

    transform:rotate(-5deg);

  }

  .ct03-img02{

    width: 90%;

    margin-top: 30px;

    transform:rotate(0deg);

    transition: 0.2s;

  }

  .ct03-img02:hover{

    transform:rotate(5deg);

  }

  .ct03-img03{

    width: 90%;

    margin-top: 30px;

    transform:rotate(0deg);

    transition: 0.2s;

  }

  .ct03-img03:hover{

    transform:rotate(-5deg);

  }

  .ct04-ct01{

    width: 80%;

  }

  .ct01-bt>a>img{

    max-width: 50%;

  }

  .ct02-bt>a>img{

    max-width: 50%;

  }

  .ct05-ct00{

    padding: 30px 0px 0px 0px;

  }

  .ct05-ct01{

    font-size: 24px;

  }

  .ct05-ct02{

    font-size: 16px;

  }

}

  @media (max-width: 650px) {

  .rule h5{

    font-size: 24px;

  }

  .rule p {

    font-size: 16px;

    line-height: 28px;

  }

  /* 客製內容從下面開始 */

  #ct01,#ct02,#ct04,#ct05,#ct06{

    padding: 7.5px 0 30px 0;

  }

  .ct-bgt-mb{

    margin-top: -110px;

  }

  }

  @media only screen and (max-width: 490px) {

  /* 客製內容從下面開始 */

  .all{

    background: url(../images/kv-bg-mb02.png);

    background-position: top center;

    background-repeat: no-repeat;

  }

  .kv-tt-mb{

    margin-top: 10px;

  }

  .kv-cp{

    width: 100%;

    display: flex;

    margin-top: 30px;

    flex-wrap: wrap;

  }

  #kv-cp01{

    width: 100%;

    text-align: center;

  }

  #kv-cp01>a>img{

  max-width: 65%;

  }

  #kv-cp02{

    width: 100%;

    text-align: center;

    margin-top: 30px;

  }

  #kv-cp02>a>img{

    max-width: 65%;

  }

  .ct01-tt,.ct02-tt,.ct03-tt,.ct04-tt,.ct05-tt{

    display: none;

  }

  .ct01-tt-mb,.ct02-tt-mb,.ct03-tt-mb,.ct04-tt-mb,.ct05-tt-mb{

    display: block;

  }

  .ct01-tt-mb,.ct02-tt-mb,.ct04-tt-mb,.ct05-tt-mb{

    margin-top: 30px;

    margin-bottom: 30px;

  }

  .ct03-tt-mb{

    margin-top: 100px;

    text-align: center;

  }

  .ct03-tt-mb>img{

    max-width: 85%;

  }

  .ct01-tt>img{

  max-width: 120%;

  text-align: center;

  }

  .ct01-ct,.ct02-ct{

    padding: 80px 30px 30px 30px;

  }

  .ct04-ct{

    padding: 80px 30px 30px 30px;

  }

  .ct05-ct{

    padding: 80px 30px 10px 30px;

  }

  #ct01,#ct02,#ct04,#ct05,#ct06{

    padding: 5px 0 30px 0;

  }

  .ct-bgt-mb{

    margin-top: -102.5px;

  }

  .ct04-ct01{

    width: 100%;

  }

  .ct04-ct01{

    font-size: 16px;

    margin-top: 20px;

  }

  #ct05{

    margin-bottom: 150px;

  }

  .ct05-ct00{

    padding: 10px 0px 0px 0px;

  }

  .ct05-ct01{

    font-size: 20px;

  }

  .ct05-ct02{

    font-size: 15px;

  }

  }

  @media only screen and (max-width: 420px) {

  /* 客製內容從下面開始 */

  }

  /*以下自訂*/

  .mySwiper{

    overflow: hidden;

  }

  .swiper-wrapper{

    display: inline-flex;

  }

  .mySwiper .swiper-slide{

    width: 389px;

    height: 453px;

  }

  .plus1Swiper{

  overflow: hidden;

}

/* =========================================================

   CT02 最終修正版

   Desktop：1100px / 3 cards in one row

   Tablet：2 + 1，與 KV 相同邏輯

   Mobile：1 card per row

========================================================= */

#ct02 .ct02-ct{

  width: 100%;

  padding: 0;

  margin: 0 auto;

  box-sizing: border-box;

}

#ct02 .ct02-cp{

  width: 1100px;

  max-width: calc(100% - 40px);

  margin: 30px auto 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-wrap: nowrap;

  box-sizing: border-box;

}

#ct02-cp01,

#ct02-cp02,

#ct02-cp03{

  width: 33.333333%;

  flex: 0 0 33.333333%;

  margin: 0;

  padding: 0;

  text-align: center;

  box-sizing: border-box;

  transition: transform 0.2s;

}

#ct02-cp01 > a,

#ct02-cp02 > a,

#ct02-cp03 > a{

  display: block;

  width: 100%;

}

#ct02-cp01 img,

#ct02-cp02 img,

#ct02-cp03 img{

  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  margin: 0 auto;

}

#ct02-cp01:hover,

#ct02-cp02:hover,

#ct02-cp03:hover{

  transform: scale(1.05);

}

/* 1440 以下仍維持三張橫排，只讓整組依容器縮小 */

@media (max-width: 1440px){

  #ct02 .ct02-ct{

    width: 100%;

    padding: 0;

  }

  #ct02 .ct02-cp{

    width: 1100px;

    max-width: calc(100% - 40px);

  }

}

/* 1030 以下仍維持三張橫排 */

@media (max-width: 1030px){

  #ct02 .ct02-ct{

    width: 100%;

    padding: 0;

  }

  #ct02 .ct02-cp{

    width: 100%;

    max-width: calc(100% - 30px);

  }

}

/* 平板：跟 KV 一樣前兩張 50%，第三張置中下一排 */

@media (max-width: 780px){

  #ct02 .ct02-cp{

    width: 100%;

    max-width: 100%;

    padding: 0 15px;

    flex-wrap: wrap;

  }

  #ct02-cp01,

  #ct02-cp02{

    width: 50%;

    flex: 0 0 50%;

  }

  #ct02-cp03{

    width: 100%;

    flex: 0 0 100%;

    margin-top: 5%;

  }

  #ct02-cp03 > a > img{

    max-width: 48%;

  }

}

/* 手機：三張改為單欄 */

@media only screen and (max-width: 490px){

  #ct02 .ct02-ct{

    width: 100%;

    padding: 0;

  }

  #ct02 .ct02-cp{

    width: 100%;

    max-width: 100%;

    margin-top: 30px;

    padding: 0;

    flex-wrap: wrap;

  }

  #ct02-cp01,

  #ct02-cp02,

  #ct02-cp03{

    width: 100%;

    flex: 0 0 100%;

    text-align: center;

  }

  #ct02-cp02,

  #ct02-cp03{

    margin-top: 30px;

  }

  #ct02-cp01 > a > img,

  #ct02-cp02 > a > img,

  #ct02-cp03 > a > img{

    width: auto;

    max-width: 65%;

    margin: 0 auto;

  }

}

/* =========================================================

   KV + CT01 + CT02 最終排版修正

   1. KV / CT02 三卡加入間距

   2. 780px 以下固定 2 + 1，不再切單欄

   3. CT01 / CT02 平板、手機加入左右安全距離

========================================================= */

/* ---------- KV：桌機三卡 + 間距 ---------- */

.kv-cp{

  gap: 24px;

}

#kv-cp01,

#kv-cp02,

#kv-cp03{

  width: calc((100% - 48px) / 3);

  flex: 0 0 calc((100% - 48px) / 3);

  margin: 0;

  box-sizing: border-box;

}

#kv-cp01 > a,

#kv-cp02 > a,

#kv-cp03 > a{

  display: block;

  width: 100%;

}

#kv-cp01 > a > img,

#kv-cp02 > a > img,

#kv-cp03 > a > img{

  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  margin: 0 auto;

}

/* ---------- CT02：桌機 1100px / 三卡 + 間距 ---------- */

#ct02 .ct02-ct{

  width: 100%;

  margin: 0 auto;

  padding: 0;

  box-sizing: border-box;

}

#ct02 .ct02-cp{

  width: 1100px;

  max-width: 100%;

  margin: 30px auto 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-wrap: nowrap;

  gap: 24px;

  box-sizing: border-box;

}

#ct02-cp01,

#ct02-cp02,

#ct02-cp03{

  width: calc((100% - 48px) / 3);

  flex: 0 0 calc((100% - 48px) / 3);

  margin: 0;

  padding: 0;

  text-align: center;

  box-sizing: border-box;

}

#ct02-cp01 > a,

#ct02-cp02 > a,

#ct02-cp03 > a{

  display: block;

  width: 100%;

}

#ct02-cp01 img,

#ct02-cp02 img,

#ct02-cp03 img{

  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  margin: 0 auto;

}

/* ---------- 平板 / 小桌機：CT01、CT02 不貼邊 ---------- */

@media (max-width: 1440px){

  #ct01,

  #ct02{

    box-sizing: border-box;

    padding-left: 28px !important;

    padding-right: 28px !important;

  }

  #ct01 .swiper,

  #ct01 .plus1Swiper{

    max-width: 100%;

  }

  #ct02 .ct02-ct{

    width: 100%;

    padding-left: 0 !important;

    padding-right: 0 !important;

  }

  #ct02 .ct02-cp{

    width: 1100px;

    max-width: 100%;

  }

}

/* ---------- 780px 以下：KV / CT02 都固定 2 + 1 ---------- */

@media (max-width: 780px){

  #ct01,

  #ct02{

    padding-left: 20px !important;

    padding-right: 20px !important;

  }

  /* KV */

  .kv-cp{

    width: 100%;

    max-width: 100%;

    padding: 0 20px;

    margin-top: 50px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 18px;

    box-sizing: border-box;

  }

  #kv-cp01,

  #kv-cp02{

    width: calc((100% - 18px) / 2);

    flex: 0 0 calc((100% - 18px) / 2);

    margin: 0;

  }

  #kv-cp03{

    width: calc((100% - 18px) / 2);

    flex: 0 0 calc((100% - 18px) / 2);

    margin: 0;

  }

  #kv-cp01 > a > img,

  #kv-cp02 > a > img,

  #kv-cp03 > a > img{

    width: 100%;

    max-width: 100%;

  }

  /* CT02 */

  #ct02 .ct02-cp{

    width: 100%;

    max-width: 100%;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 18px;

    box-sizing: border-box;

  }

  #ct02-cp01,

  #ct02-cp02{

    width: calc((100% - 18px) / 2);

    flex: 0 0 calc((100% - 18px) / 2);

    margin: 0;

  }

  #ct02-cp03{

    width: calc((100% - 18px) / 2);

    flex: 0 0 calc((100% - 18px) / 2);

    margin: 0;

  }

  #ct02-cp03 > a > img{

    width: 100%;

    max-width: 100%;

  }

}

/* ---------- 手機：仍維持 2 + 1，並增加安全距離 ---------- */

@media only screen and (max-width: 490px){

  #ct01,

  #ct02{

    width: 92% !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

    box-sizing: border-box;

  }

  /* CT01 內部避免貼邊 */

  #ct01 .ct01-tt-mb,

  #ct01 .ct01-ct01,

  #ct01 .ct01-ct02,

  #ct01 .ct01-bt,

  #ct01 .swiper,

  #ct01 .plus1Swiper{

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

    box-sizing: border-box;

  }

  /* KV 手機仍然 2 + 1 */

  .kv-cp{

    width: 100%;

    max-width: 100%;

    margin-top: 30px;

    padding: 0 16px;

    gap: 14px;

  }

  #kv-cp01,

  #kv-cp02,

  #kv-cp03{

    width: calc((100% - 14px) / 2);

    flex: 0 0 calc((100% - 14px) / 2);

    margin: 0;

    text-align: center;

  }

  #kv-cp01 > a > img,

  #kv-cp02 > a > img,

  #kv-cp03 > a > img{

    width: 100%;

    max-width: 100%;

  }

  /* CT02 手機仍然 2 + 1 */

  #ct02 .ct02-ct{

    width: 100%;

    padding: 0 !important;

    margin: 0 auto;

  }

  #ct02 .ct02-cp{

    width: 100%;

    max-width: 100%;

    margin-top: 30px;

    padding: 0;

    gap: 14px;

  }

  #ct02-cp01,

  #ct02-cp02,

  #ct02-cp03{

    width: calc((100% - 14px) / 2);

    flex: 0 0 calc((100% - 14px) / 2);

    margin: 0;

    text-align: center;

  }

  #ct02-cp01 > a > img,

  #ct02-cp02 > a > img,

  #ct02-cp03 > a > img{

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

  }

}

/* =========================================================

   FINAL FIX 2026-09-23

   CT01 / CT02 / CT03 responsive layout

========================================================= */

/* ---------- CT03：桌機格式改成與 CT02 相近 ---------- */

#ct03{

  width: 1200px;

  max-width: 100%;

  padding: 30px 0 40px;

  margin: 100px auto 0;

  background: #fefaf0;

  border-radius: 30px;

  filter: drop-shadow(0 0 10px rgba(137, 98, 0, 0.2));

  text-align: center;

  box-sizing: border-box;

}

#ct03 .ct03-ct{

  width: 100%;

  margin: 0 auto;

  padding: 0;

  display: block;

  box-sizing: border-box;

}

#ct03 .ct03-tt{

  margin: 0 0 30px;

  text-align: center;

}

#ct03 .ct03-tt-mb{

  display: none;

}

#ct03 .ct03-cp{

  width: 1100px;

  max-width: 100%;

  margin: 30px auto 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-wrap: nowrap;

  gap: 24px;

  box-sizing: border-box;

}

#ct03-cp01,

#ct03-cp02,

#ct03-cp03{

  width: calc((100% - 48px) / 3);

  flex: 0 0 calc((100% - 48px) / 3);

  margin: 0;

  padding: 0;

  text-align: center;

  box-sizing: border-box;

}

#ct03-cp01 img,

#ct03-cp02 img,

#ct03-cp03 img{

  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  margin: 0 auto;

}

.ct03-bt{

  width: 100%;

  margin-top: 50px;

  text-align: center;

  transition: transform .2s;

}

.ct03-bt:hover{

  transform: scale(.95);

}

/* ---------- 平板：CT01 商品仍固定 2 張 ---------- */

@media (max-width: 1030px){

  #ct01 .plus1Swiper{

    width: 100%;

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

  }

  #ct03{

    width: 90%;

  }

  #ct03 .ct03-ct{

    width: 100%;

    padding: 0;

  }

  #ct03 .ct03-cp{

    width: 100%;

    max-width: 100%;

    padding: 0 20px;

    gap: 20px;

  }

}

/* =========================================================

   手機版 / 小平板

   CT01、CT02、CT03 改成滿版色塊，不再有卡片區塊感

========================================================= */

@media (max-width: 780px){

  /* 三個主區塊滿版 */

  #ct01,

  #ct02,

  #ct03{

    width: 100% !important;

    max-width: none !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    background: #fefaf0 !important;

    border-radius: 0 !important;

    filter: none !important;

    box-shadow: none !important;

    padding-left: 12px !important;

    padding-right: 12px !important;

    box-sizing: border-box;

  }

  #ct01{

    margin-top: 80px !important;

  }

  #ct02,

  #ct03{

    margin-top: 60px !important;

  }

  /* CT01：內部內容可加寬，但保留少量安全距離 */

  #ct01 .ct01-tt,

  #ct01 .ct01-tt-mb,

  #ct01 .ct01-ct01,

  #ct01 .ct01-ct02,

  #ct01 .ct01-bt,

  #ct01 .plus1Swiper{

    width: 100%;

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

    box-sizing: border-box;

  }

  #ct01 .plus1Swiper{

    padding: 0;

    overflow: hidden;

  }

  /* CT02：內容加寬 */

  #ct02 .ct02-ct{

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin: 0 auto;

  }

  #ct02 .ct02-cp{

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    gap: 14px;

  }

  /* CT03：格式跟 CT02 一致 */

  #ct03 .ct03-ct{

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin: 0 auto;

  }

  #ct03 .ct03-tt{

    display: none;

  }

  #ct03 .ct03-tt-mb{

    display: block;

    width: 100%;

    margin: 30px auto;

    text-align: center;

  }

  #ct03 .ct03-tt-mb img{

    max-width: 100%;

    height: auto;

  }

  #ct03 .ct03-cp{

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin: 30px auto 0;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 14px;

    box-sizing: border-box;

  }

  /* CT02 / CT03：2 張一排，第 3 張換行置中 */

  #ct02-cp01,

  #ct02-cp02,

  #ct02-cp03,

  #ct03-cp01,

  #ct03-cp02,

  #ct03-cp03{

    width: calc((100% - 14px) / 2);

    flex: 0 0 calc((100% - 14px) / 2);

    margin: 0;

  }

  #ct02-cp01 img,

  #ct02-cp02 img,

  #ct02-cp03 img,

  #ct03-cp01 img,

  #ct03-cp02 img,

  #ct03-cp03 img{

    width: 100%;

    max-width: 100%;

    height: auto;

  }

  .ct02-bt,

  .ct03-bt{

    width: 100%;

    margin-top: 35px;

  }

}

/* ---------- 小手機仍維持相同邏輯，不縮回卡片框 ---------- */

@media (max-width: 490px){

  #ct01,

  #ct02,

  #ct03{

    width: 100% !important;

    padding-left: 10px !important;

    padding-right: 10px !important;

    border-radius: 0 !important;

    filter: none !important;

  }

  #ct01 .plus1Swiper{

    width: 100% !important;

    max-width: 100% !important;

  }

  #ct02 .ct02-cp,

  #ct03 .ct03-cp{

    gap: 10px;

  }

  #ct02-cp01,

  #ct02-cp02,

  #ct02-cp03,

  #ct03-cp01,

  #ct03-cp02,

  #ct03-cp03{

    width: calc((100% - 10px) / 2);

    flex: 0 0 calc((100% - 10px) / 2);

  }

  #ct02-cp01 > a > img,

  #ct02-cp02 > a > img,

  #ct02-cp03 > a > img,

  #ct03-cp01 img,

  #ct03-cp02 img,

  #ct03-cp03 img{

    width: 100%;

    max-width: 100%;

  }

}

/* =========================================================

   FINAL MOBILE FIX

   1. CT01 / CT02 / CT03 手機版恢復圓角區塊

   2. KV / CT02 / CT03 手機版一張卡片一行

   3. CT01 手機版由 Swiper 顯示一張卡片

========================================================= */

@media (max-width: 780px){

  /* CT01 / CT02 / CT03：恢復卡片區塊感 */

  #ct01,

  #ct02,

  #ct03{

    width: 90% !important;

    max-width: 90% !important;

    margin-left: auto !important;

    margin-right: auto !important;

    background: #fefaf0 !important;

    border-radius: 30px !important;

    filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2)) !important;

    box-shadow: none !important;

    box-sizing: border-box;

    padding-left: 16px !important;

    padding-right: 16px !important;

  }

  #ct01{

    margin-top: 100px !important;

  }

  #ct02,

  #ct03{

    margin-top: 70px !important;

  }

  /* CT01 內容保留安全距離 */

  #ct01 .ct01-tt,

  #ct01 .ct01-tt-mb,

  #ct01 .ct01-ct01,

  #ct01 .ct01-ct02,

  #ct01 .ct01-bt,

  #ct01 .swiper,

  #ct01 .plus1Swiper{

    width: 100% !important;

    max-width: 100% !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box;

  }

  #ct01 .plus1Swiper{

    overflow: hidden;

    padding: 0 !important;

  }

  /* KV：手機改為一張一行 */

  .kv-cp{

    width: 100% !important;

    max-width: 100% !important;

    margin: 40px auto 0 !important;

    padding: 0 22px !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: flex-start !important;

    gap: 18px !important;

    box-sizing: border-box;

  }

  #kv-cp01,

  #kv-cp02,

  #kv-cp03{

    width: 100% !important;

    max-width: 360px !important;

    flex: 0 0 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

  }

  #kv-cp01 > a,

  #kv-cp02 > a,

  #kv-cp03 > a{

    display: block;

    width: 100%;

  }

  #kv-cp01 > a > img,

  #kv-cp02 > a > img,

  #kv-cp03 > a > img{

    display: block;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

  }

  /* CT02：手機改為一張一行 */

  #ct02 .ct02-ct{

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin: 0 auto !important;

  }

  #ct02 .ct02-cp{

    width: 100% !important;

    max-width: 100% !important;

    margin: 30px auto 0 !important;

    padding: 0 !important;

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: flex-start !important;

    gap: 18px !important;

    box-sizing: border-box;

  }

  #ct02-cp01,

  #ct02-cp02,

  #ct02-cp03{

    width: 100% !important;

    max-width: 420px !important;

    flex: 0 0 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

  }

  #ct02-cp01 > a > img,

  #ct02-cp02 > a > img,

  #ct02-cp03 > a > img{

    display: block;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

  }

  /* CT03：格式跟 CT02 一樣，一張一行 */

  #ct03 .ct03-ct{

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin: 0 auto !important;

  }

  #ct03 .ct03-cp{

    width: 100% !important;

    max-width: 100% !important;

    margin: 30px auto 0 !important;

    padding: 0 !important;

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: flex-start !important;

    gap: 18px !important;

    box-sizing: border-box;

  }

  #ct03-cp01,

  #ct03-cp02,

  #ct03-cp03{

    width: 100% !important;

    max-width: 420px !important;

    flex: 0 0 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

  }

  #ct03-cp01 img,

  #ct03-cp02 img,

  #ct03-cp03 img{

    display: block;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

  }

  .ct02-bt,

  .ct03-bt{

    width: 100% !important;

    margin-top: 35px !important;

  }

}

/* 小手機沿用相同：一張卡片一行 */

@media (max-width: 490px){

  #ct01,

  #ct02,

  #ct03{

    width: 92% !important;

    max-width: 92% !important;

    padding-left: 14px !important;

    padding-right: 14px !important;

    border-radius: 24px !important;

  }

  .kv-cp{

    padding-left: 18px !important;

    padding-right: 18px !important;

    gap: 16px !important;

  }

  #kv-cp01,

  #kv-cp02,

  #kv-cp03,

  #ct02-cp01,

  #ct02-cp02,

  #ct02-cp03,

  #ct03-cp01,

  #ct03-cp02,

  #ct03-cp03{

    width: 100% !important;

    flex: 0 0 100% !important;

  }

}

/* =========================================================

   FINAL ADJUSTMENTS

   \- Mobile KV: 2 cards per row

   \- CT mobile inner spacing increased

   \- Section title images: title shadow

   \- Card / content images: image shadow

========================================================= */

/* 區塊主標圖片陰影 */

.ct01-tt img,

.ct01-tt-mb img,

.ct02-tt img,

.ct02-tt-mb img,

.ct03-tt img,

.ct03-tt-mb img,

.ct04-tt img,

.ct04-tt-mb img,

.ct05-tt img,

.ct05-tt-mb img {

  filter: drop-shadow(0px 5px 5px rgba(137, 98, 0, 0.2));

}

/* 卡片圖片 / img 系列圖片陰影 */

#ct01 .swiper-slide img,

#ct01 .ct01-ct01 img,

#ct01 .ct01-ct02 img,

#ct02 .ct02-cp img,

#ct03 .ct03-cp img,

#ct03-cp01 img,

#ct03-cp02 img,

#ct03-cp03 img {

  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));

}

@media (max-width: 780px) {

  /* CT01 / CT02 / CT03：內容與圓角邊框距離加大 */

  #ct01,

  #ct02,

  #ct03 {

    padding-left: 26px !important;

    padding-right: 26px !important;

  }

  /* 主視覺：手機 2 張一排，第 3 張自動換行並置中 */

  .kv-cp {

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 18px !important;

    padding-right: 18px !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: flex-start !important;

    gap: 14px !important;

    box-sizing: border-box;

  }

  #kv-cp01,

  #kv-cp02,

  #kv-cp03 {

    width: calc((100% - 14px) / 2) !important;

    max-width: none !important;

    flex: 0 0 calc((100% - 14px) / 2) !important;

    margin: 0 !important;

    text-align: center !important;

  }

  #kv-cp01 > a,

  #kv-cp02 > a,

  #kv-cp03 > a {

    display: block;

    width: 100%;

  }

  #kv-cp01 > a > img,

  #kv-cp02 > a > img,

  #kv-cp03 > a > img {

    display: block;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

  }

}

@media (max-width: 490px) {

  /* 小手機也維持 2 張一排 */

  #ct01,

  #ct02,

  #ct03 {

    padding-left: 20px !important;

    padding-right: 20px !important;

  }

  .kv-cp {

    padding-left: 14px !important;

    padding-right: 14px !important;

    gap: 10px !important;

  }

  #kv-cp01,

  #kv-cp02,

  #kv-cp03 {

    width: calc((100% - 10px) / 2) !important;

    flex: 0 0 calc((100% - 10px) / 2) !important;

  }

}

/* KV card shadow */
#kv-cp01 img,
#kv-cp02 img,
#kv-cp03 img {
  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));
}

/* CT04 / CT05 / CT06 framework */
#ct04,
#ct05,
#ct06 {
  width: 1200px;
  max-width: 100%;
  padding: 30px 0 40px;
  margin: 100px auto 0;
  background: #fefaf0;
  border: 0;
  border-radius: 30px;
  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));
  text-align: center;
  box-sizing: border-box;
}

#ct06 {
  margin-bottom: 200px;
}

.ct04-ct,
.ct05-ct,
.ct06-ct {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

/* Section title shadows */
.ct01-tt img,
.ct01-tt-mb img,
.ct02-tt img,
.ct02-tt-mb img,
.ct03-tt img,
.ct03-tt-mb img,
.ct04-tt img,
.ct04-tt-mb img,
.ct05-tt img,
.ct05-tt-mb img,
.ct06-tt img,
.ct06-tt-mb img {
  filter: drop-shadow(0px 5px 5px rgba(137, 98, 0, 0.2));
}

/* CT04 cards */
.ct04-cp {
  width: 1100px;
  max-width: calc(100% - 40px);
  margin: 30px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
}

#ct04-cp01,
#ct04-cp02,
#ct04-cp03,
#ct04-cp04 {
  width: calc((100% - 72px) / 4);
  flex: 0 0 calc((100% - 72px) / 4);
  box-sizing: border-box;
}

#ct04-cp01 img,
#ct04-cp02 img,
#ct04-cp03 img,
#ct04-cp04 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));
}

/* CT05 desktop / mobile image */
.ct05-cp {
  width: 1100px;
  max-width: calc(100% - 40px);
  margin: 30px auto 0;
}

#ct05-cp01 {
  display: block;
}

#ct05-cp01-mb {
  display: none;
}

#ct05-cp01 img,
#ct05-cp01-mb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));
}

/* CT06 = old CT05 activity description styles */
.ct06-ct00 {
  padding: 20px 25px 0;
  text-align: left;
}

.ct06-ct0 {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  color: #1c1c1c;
  text-align: center;
}

.ct06-ct01 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  color: #1c1c1c;
  margin-top: 50px;
}

.ct06-ct02 {
  margin: 10px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
  color: #333333;
}

/* Card/image shadows */
#ct01 .swiper-slide img,
#ct01 .ct01-ct01 img,
#ct01 .ct01-ct02 img,
#ct02 .ct02-cp img,
#ct03 .ct03-cp img,
#ct04 .ct04-cp img,
#ct05 .ct05-cp img {
  filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2));
}

/* ---------- Tablet / small desktop: cards are 2 per row ---------- */
@media (min-width: 490px) and (max-width: 1023px) {
  .kv-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    box-sizing: border-box;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03 {
    width: calc((100% - 16px) / 2) !important;
    max-width: none !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
    margin: 0 !important;
  }

  #ct02 .ct02-cp,
  #ct03 .ct03-cp,
  #ct04 .ct04-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
    box-sizing: border-box;
  }

  #ct02-cp01,
  #ct02-cp02,
  #ct02-cp03,
  #ct03-cp01,
  #ct03-cp02,
  #ct03-cp03,
  #ct04-cp01,
  #ct04-cp02,
  #ct04-cp03,
  #ct04-cp04 {
    width: calc((100% - 18px) / 2) !important;
    max-width: none !important;
    flex: 0 0 calc((100% - 18px) / 2) !important;
    margin: 0 !important;
  }

  #ct04,
  #ct05,
  #ct06 {
    width: 90%;
    max-width: 90%;
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* CT05 switches to MB image from 780px */
@media (max-width: 780px) {
  #ct05-cp01 {
    display: none !important;
  }

  #ct05-cp01-mb {
    display: block !important;
  }

  .ct05-cp {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  #ct04,
  #ct05,
  #ct06 {
    width: 90% !important;
    max-width: 90% !important;
    padding: 10px 26px 30px !important;
    border-radius: 30px !important;
    background: #fefaf0 !important;
    filter: drop-shadow(0px 0px 10px rgba(137, 98, 0, 0.2)) !important;
  }

  .ct04-ct,
  .ct05-ct,
  .ct06-ct {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .ct06-ct00 {
    padding: 30px 0 0;
  }

  .ct06-ct01 {
    font-size: 24px;
  }

  .ct06-ct02 {
    font-size: 16px;
  }
}

/* ---------- Real mobile: below 490px = 1 card per row ---------- */
@media (max-width: 489px) {
  .kv-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03,
  #ct02-cp01,
  #ct02-cp02,
  #ct02-cp03,
  #ct03-cp01,
  #ct03-cp02,
  #ct03-cp03,
  #ct04-cp01,
  #ct04-cp02,
  #ct04-cp03,
  #ct04-cp04 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
  }

  #ct02 .ct02-cp,
  #ct03 .ct03-cp,
  #ct04 .ct04-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 16px !important;
  }

  #ct04,
  #ct05,
  #ct06 {
    width: 92% !important;
    max-width: 92% !important;
    padding: 8px 20px 30px !important;
    border-radius: 24px !important;
  }

  .ct06-ct00 {
    padding: 20px 0 0;
  }

  .ct06-ct01 {
    font-size: 20px;
  }

  .ct06-ct02 {
    font-size: 15px;
  }
}

/* =========================================================
   FINAL RESPONSIVE OVERRIDES v2
   - KV: always 2 cards per row below 1024px, including mobile
   - CT04: 4 cards desktop / 2 cards below 490px
   - Section vertical spacing: desktop 100 / tablet 72 / mobile 50
========================================================= */

/* Desktop section rhythm */
#ct01,
#ct02,
#ct03,
#ct04,
#ct05,
#ct06 {
  margin-top: 100px !important;
}

/* Keep CT04 as 4 cards per row on desktop */
@media (min-width: 1024px) {
  .ct04-cp {
    width: 1100px !important;
    max-width: calc(100% - 40px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  #ct04-cp01,
  #ct04-cp02,
  #ct04-cp03,
  #ct04-cp04 {
    width: calc((100% - 72px) / 4) !important;
    flex: 0 0 calc((100% - 72px) / 4) !important;
    margin: 0 !important;
  }
}

/* Tablet / small desktop */
@media (min-width: 490px) and (max-width: 1023px) {
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06 {
    margin-top: 72px !important;
  }

  /* KV = 2 per row */
  .kv-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    box-sizing: border-box;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03 {
    width: calc((100% - 16px) / 2) !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
    margin: 0 !important;
  }
}

/* Mobile: below 490px */
@media (max-width: 489px) {
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06 {
    margin-top: 50px !important;
  }

  /* KV remains 2 per row even on mobile */
  .kv-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    box-sizing: border-box;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03 {
    width: calc((100% - 12px) / 2) !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
    margin: 0 !important;
  }

  /* CT04 = 2 cards per row on mobile */
  #ct04 .ct04-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    box-sizing: border-box;
  }

  #ct04-cp01,
  #ct04-cp02,
  #ct04-cp03,
  #ct04-cp04 {
    width: calc((100% - 12px) / 2) !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
    margin: 0 !important;
  }

  #ct06 {
    margin-bottom: 80px !important;
  }
}

/* Tablet bottom spacing */
@media (min-width: 490px) and (max-width: 1023px) {
  #ct06 {
    margin-bottom: 120px !important;
  }
}

/* =========================================================
   FINAL 1400PX / 90% CONTENT WIDTH RULE
   - KV + CT01~CT06 all use width: 90%
   - Maximum desktop width: 1400px
   - All inner content stays inside its section
   - CT02 cards have no hover scale effect
========================================================= */

/* All main sections: unified 1400px / 90% rule */
.kv,
#ct01,
#ct02,
#ct03,
#ct04,
#ct05,
#ct06 {
  width: 90% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* All major inner content must stay inside the 1400px / 90% section */
.kv-cp,
#ct01 .swiper,
#ct01 .ct01-ct01,
#ct01 .ct01-ct02,
#ct02 .ct02-ct,
#ct02 .ct02-cp,
#ct03 .ct03-ct,
#ct03 .ct03-cp,
#ct04 .ct04-ct,
#ct04 .ct04-cp,
#ct05 .ct05-ct,
#ct05 .ct05-cp,
#ct06 .ct06-ct,
#ct06 .ct06-ct00 {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Keep inner rows centered */
.kv-cp,
#ct01 .swiper,
#ct02 .ct02-cp,
#ct03 .ct03-cp,
#ct04 .ct04-cp,
#ct05 .ct05-cp,
#ct06 .ct06-ct00 {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CT02: remove hover scale effect completely */
#ct02-cp01,
#ct02-cp02,
#ct02-cp03 {
  transition: none !important;
}

#ct02-cp01:hover,
#ct02-cp02:hover,
#ct02-cp03:hover {
  transform: none !important;
}

/* =========================================================
   FINAL LAYOUT OVERRIDES v5
   - KV: 3 cards above 780px, 2 cards at 780px and below
   - CT03~CT06: add inner safe spacing like CT01 / CT02
   - CT01 preserved exactly as previous original card layout
========================================================= */

/* Keep CT03~CT06 content away from section edges */
#ct03 .ct03-ct,
#ct04 .ct04-ct,
#ct05 .ct05-ct,
#ct06 .ct06-ct {
  width: calc(100% - 60px) !important;
  max-width: calc(100% - 60px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Desktop / large tablet: KV stays 3 per row */
@media (min-width: 781px) {
  .kv-cp {
    width: 1050px !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
    box-sizing: border-box;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03 {
    width: calc((100% - 48px) / 3) !important;
    flex: 0 0 calc((100% - 48px) / 3) !important;
    margin: 0 !important;
  }
}

/* Tablet + mobile: only at 780px and below switch KV to 2 per row */
@media (max-width: 780px) {
  .kv-cp {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    box-sizing: border-box;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03 {
    width: calc((100% - 16px) / 2) !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
    margin: 0 !important;
  }

  #ct03 .ct03-ct,
  #ct04 .ct04-ct,
  #ct05 .ct05-ct,
  #ct06 .ct06-ct {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
  }
}

/* Small mobile */
@media (max-width: 489px) {
  .kv-cp {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 12px !important;
  }

  #kv-cp01,
  #kv-cp02,
  #kv-cp03 {
    width: calc((100% - 12px) / 2) !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
  }

  #ct03 .ct03-ct,
  #ct04 .ct04-ct,
  #ct05 .ct05-ct,
  #ct06 .ct06-ct {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
  }
}

/* =========================================================
   CT01 SAFE INNER SPACING FIX
   Keep original card/Swiper sizing; only restore space from rounded frame
========================================================= */
#ct01 .plus1Swiper,
#ct01 .ct01-ct01,
#ct01 .ct01-ct02 {
  width: calc(100% - 60px) !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

@media (max-width: 780px) {
  #ct01 .plus1Swiper,
  #ct01 .ct01-ct01,
  #ct01 .ct01-ct02 {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
  }
}

@media (max-width: 489px) {
  #ct01 .plus1Swiper,
  #ct01 .ct01-ct01,
  #ct01 .ct01-ct02 {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
  }
}

/* =========================================================
   FINAL UNIFIED WIDTH SYSTEM
   Desktop outer frame: 1200px
   Desktop inner content: 1100px
   Responsive ratio kept at 1100 / 1200 = 91.6667%
========================================================= */

/* ----- Outer frames ----- */
.kv,
#ct01,
#ct02,
#ct03,
#ct04,
#ct05,
#ct06 {
  width: 1200px !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ----- Unified inner content width ----- */
.kv > *,
#ct01 > *,
#ct02 .ct02-ct,
#ct03 .ct03-ct,
#ct04 .ct04-ct,
#ct05 .ct05-ct,
#ct06 .ct06-ct {
  box-sizing: border-box !important;
}

/* Keep title/buttons full-width when appropriate */
#ct01 .ct01-tt,
#ct01 .ct01-tt-mb,
#ct01 .ct01-bt,
#ct02 .ct02-tt,
#ct02 .ct02-tt-mb,
#ct02 .ct02-bt,
#ct03 .ct03-tt,
#ct03 .ct03-tt-mb,
#ct03 .ct03-bt,
#ct04 .ct04-tt,
#ct04 .ct04-tt-mb,
#ct05 .ct05-tt,
#ct05 .ct05-tt-mb,
#ct05 .ct05-tw,
#ct06 .ct06-tt,
#ct06 .ct06-tt-mb {
  width: 100% !important;
}

/* Main inner content blocks: 1100 / 1200 = 91.6667% */
.kv-cp,
#ct01 .ct01-ct01,
#ct01 .plus1Swiper,
#ct01 .ct01-ct02,
#ct02 .ct02-cp,
#ct03 .ct03-cp,
#ct04 .ct04-cp,
#ct05 .ct05-cp,
#ct06 .ct06-ct00 {
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Inner wrapper should not add extra side width differences */
#ct02 .ct02-ct,
#ct03 .ct03-ct,
#ct04 .ct04-ct,
#ct05 .ct05-ct,
#ct06 .ct06-ct {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* KV title/text stay inside 1100 visual width as well */
.kv-tw,
.kv-tt,
.kv-tt-mb,
.kv-ct {
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* CT01 title and button align to same visual content width */
#ct01 .ct01-tt,
#ct01 .ct01-tt-mb,
#ct01 .ct01-bt {
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CT02–CT06 title/button alignment */
#ct02 .ct02-tt,
#ct02 .ct02-tt-mb,
#ct02 .ct02-bt,
#ct03 .ct03-tt,
#ct03 .ct03-tt-mb,
#ct03 .ct03-bt,
#ct04 .ct04-tt,
#ct04 .ct04-tt-mb,
#ct05 .ct05-tt,
#ct05 .ct05-tt-mb,
#ct05 .ct05-tw,
#ct06 .ct06-tt,
#ct06 .ct06-tt-mb {
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ct06-ct0 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  color: #1c1c1c;
  text-align: center;
}

@media (max-width: 1200px) {
  .kv,
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06 {
    width: 90% !important;
    max-width: none !important;
  }

  .kv-cp,
  .kv-tw,
  .kv-tt,
  .kv-tt-mb,
  .kv-ct,
  #ct01 .ct01-tt,
  #ct01 .ct01-tt-mb,
  #ct01 .ct01-ct01,
  #ct01 .plus1Swiper,
  #ct01 .ct01-ct02,
  #ct01 .ct01-bt,
  #ct02 .ct02-tt,
  #ct02 .ct02-tt-mb,
  #ct02 .ct02-cp,
  #ct02 .ct02-bt,
  #ct03 .ct03-tt,
  #ct03 .ct03-tt-mb,
  #ct03 .ct03-cp,
  #ct03 .ct03-bt,
  #ct04 .ct04-tt,
  #ct04 .ct04-tt-mb,
  #ct04 .ct04-cp,
  #ct05 .ct05-tw,
  #ct05 .ct05-tt,
  #ct05 .ct05-tt-mb,
  #ct05 .ct05-cp,
  #ct06 .ct06-tt,
  #ct06 .ct06-tt-mb,
  #ct06 .ct06-ct00 {
    width: 91.6667% !important;
    max-width: none !important;
  }
}

/* =========================================================
   V9 STRICT UNIFIED HORIZONTAL SYSTEM
   Outer frame  : 1200px
   Inner content: 1100px
   Responsive   : inner always 91.6667% of outer
   Purpose      : make CT01–CT06 + KV keep identical side spacing
========================================================= */

:root{
  --section-max: 1200px;
  --content-max: 1100px;
  --content-ratio: 91.6666667%;
}

/* 1. Every outer frame uses exactly the same horizontal box model */
.kv,
#ct01,
#ct02,
#ct03,
#ct04,
#ct05,
#ct06{
  width: var(--section-max) !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Intermediate wrappers may not create their own side spacing */
#ct02 .ct02-ct,
#ct03 .ct03-ct,
#ct04 .ct04-ct,
#ct05 .ct05-ct,
#ct06 .ct06-ct{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Every actual content line uses the exact same 1100 / 1200 ratio */
.kv-tw,
.kv-tt,
.kv-tt-mb,
.kv-ct,
.kv-cp,

#ct01 .ct01-tt,
#ct01 .ct01-tt-mb,
#ct01 .ct01-ct01,
#ct01 .plus1Swiper,
#ct01 .ct01-ct02,
#ct01 .ct01-bt,

#ct02 .ct02-tt,
#ct02 .ct02-tt-mb,
#ct02 .ct02-cp,
#ct02 .ct02-bt,

#ct03 .ct03-tt,
#ct03 .ct03-tt-mb,
#ct03 .ct03-cp,
#ct03 .ct03-bt,

#ct04 .ct04-tt,
#ct04 .ct04-tt-mb,
#ct04 .ct04-cp,

#ct05 .ct05-tw,
#ct05 .ct05-tt,
#ct05 .ct05-tt-mb,
#ct05 .ct05-cp,

#ct06 .ct06-tt,
#ct06 .ct06-tt-mb,
#ct06 .ct06-ct00{
  width: var(--content-ratio) !important;
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Do not let direct image wrappers introduce different horizontal widths */
#ct01 .ct01-ct01 > img,
#ct01 .ct01-ct02 > img,
#ct02 .ct02-cp img,
#ct03 .ct03-cp img,
#ct04 .ct04-cp img,
#ct05 .ct05-cp img{
  max-width: 100% !important;
}

/* 5. Below 1200px the entire 1200/1100 system scales together */
@media (max-width: 1200px){
  .kv,
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06{
    width: 90% !important;
    max-width: 90% !important;
  }

  .kv-tw,
  .kv-tt,
  .kv-tt-mb,
  .kv-ct,
  .kv-cp,

  #ct01 .ct01-tt,
  #ct01 .ct01-tt-mb,
  #ct01 .ct01-ct01,
  #ct01 .plus1Swiper,
  #ct01 .ct01-ct02,
  #ct01 .ct01-bt,

  #ct02 .ct02-tt,
  #ct02 .ct02-tt-mb,
  #ct02 .ct02-cp,
  #ct02 .ct02-bt,

  #ct03 .ct03-tt,
  #ct03 .ct03-tt-mb,
  #ct03 .ct03-cp,
  #ct03 .ct03-bt,

  #ct04 .ct04-tt,
  #ct04 .ct04-tt-mb,
  #ct04 .ct04-cp,

  #ct05 .ct05-tw,
  #ct05 .ct05-tt,
  #ct05 .ct05-tt-mb,
  #ct05 .ct05-cp,

  #ct06 .ct06-tt,
  #ct06 .ct06-tt-mb,
  #ct06 .ct06-ct00{
    width: var(--content-ratio) !important;
    max-width: var(--content-ratio) !important;
  }
}

/* =========================================================
   KV-CT CENTER FIX
========================================================= */
.kv-ct{
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.kv-ct img{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   V11 SCALE KV-TW + ALL BUTTONS PROPORTIONALLY
========================================================= */

/* KV top artwork: scale with the unified 1100 / 1200 content ratio */
.kv-tw{
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.kv-tw img{
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* All section buttons use the same proportional content width */
.ct01-bt,
.ct02-bt,
.ct03-bt,
.ct04-bt,
.ct05-bt,
.ct06-bt{
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Button images scale proportionally with their parent */
.ct01-bt img,
.ct02-bt img,
.ct03-bt img,
.ct04-bt img,
.ct05-bt img,
.ct06-bt img{
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* On narrower screens, keep the same ratio but allow smooth shrinking */
@media (max-width: 1200px){
  .kv-tw,
  .ct01-bt,
  .ct02-bt,
  .ct03-bt,
  .ct04-bt,
  .ct05-bt,
  .ct06-bt{
    width: 91.6667% !important;
    max-width: 91.6667% !important;
  }

  .kv-tw img,
  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================================================
   V12 RESPONSIVE VISUAL SCALE
   kv-tw + all buttons shrink more aggressively off desktop
========================================================= */

/* Desktop: keep original visual size */
.kv-tw img{
  max-width: 100% !important;
}

.ct01-bt img,
.ct02-bt img,
.ct03-bt img,
.ct04-bt img,
.ct05-bt img,
.ct06-bt img{
  max-width: 100% !important;
}

/* Large tablet / small desktop */
@media (max-width: 1200px){
  .kv-tw img{
    max-width: 88% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 82% !important;
  }
}

/* Tablet */
@media (max-width: 780px){
  .kv-tw img{
    max-width: 76% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 68% !important;
  }
}

/* Mobile */
@media (max-width: 490px){
  .kv-tw img{
    max-width: 68% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 58% !important;
  }
}

/* =========================================================
   V13 TIGHTER KV-TW + UNIFIED VERTICAL SPACING
========================================================= */

/* ---------- KV-TW: shrink more aggressively ---------- */
.kv-tw img{
  max-width: 82% !important;
}

@media (max-width: 1200px){
  .kv-tw img{
    max-width: 72% !important;
  }
}

@media (max-width: 780px){
  .kv-tw img{
    max-width: 60% !important;
  }
}

@media (max-width: 490px){
  .kv-tw img{
    max-width: 52% !important;
  }
}

/* ---------- Unified vertical spacing system ---------- */
/* Desktop baseline */
#ct01,
#ct02,
#ct03,
#ct04,
#ct05,
#ct06{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Intermediate wrappers should not add their own vertical padding */
#ct02 .ct02-ct,
#ct03 .ct03-ct,
#ct04 .ct04-ct,
#ct05 .ct05-ct,
#ct06 .ct06-ct{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tablet: proportional reduction */
@media (max-width: 1200px){
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06{
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
}

/* Small tablet */
@media (max-width: 780px){
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Mobile */
@media (max-width: 490px){
  #ct01,
  #ct02,
  #ct03,
  #ct04,
  #ct05,
  #ct06{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

.ct06-ct0 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  color: #1c1c1c;
  text-align: center;
}

.ct06-ct01{
  margin-top: 30px;
  font-size: 18px;
}

/* Desktop */
@media (min-width: 1200px){
  .kv-tw img{
    max-width: 82% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 100% !important;
  }
}

/* Tablet / small desktop */
@media (max-width: 1199px){
  .kv-tw img{
    max-width: 68% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 74% !important;
  }
}

/* 780 and below */
@media (max-width: 780px){
  .kv-tw img{
    max-width: 56% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 62% !important;
  }
}

/* 490 and below */
@media (max-width: 490px){
  .kv-tw img{
    max-width: 48% !important;
  }

  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img{
    max-width: 54% !important;
  }
}

/* ---------------------------------------------------------
   2) Force CT04 / CT05 to use same vertical box model
      as CT01 / CT02 / CT03 / CT06
--------------------------------------------------------- */

#ct04,
#ct05{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

#ct04 .ct04-ct,
#ct05 .ct05-ct,
#ct04 .ct04-cp,
#ct05 .ct05-cp{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep title/content spacing controlled consistently */
#ct04 .ct04-tt,
#ct04 .ct04-tt-mb,
#ct05 .ct05-tt,
#ct05 .ct05-tt-mb,
#ct05 .ct05-tw{
  margin-top: 0 !important;
}

#ct04 .ct04-cp,
#ct05 .ct05-cp{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Same responsive vertical padding */
@media (max-width: 1199px){
  #ct04,
  #ct05{
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
}

@media (max-width: 780px){
  #ct04,
  #ct05{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 490px){
  #ct04,
  #ct05{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* =========================================================
   FINAL KV BOTTOM SAFE SPACING
   Keep the same 50px bottom spacing as desktop when <= 780px
========================================================= */
@media (max-width: 780px) {
  .kv-cp {
    margin-bottom: 50px !important;
  }
}

/* =========================================================
   CT05 / CT01 SPACING FIX
========================================================= */

/* CT05: all breakpoints keep zero top spacing */
#ct05{
  margin-top: 0 !important;
}

@media (max-width: 1440px){
  #ct05{
    margin-top: 0 !important;
  }
}

@media (max-width: 1030px){
  #ct05{
    margin-top: 0 !important;
  }
}

@media (max-width: 900px){
  #ct05{
    margin-top: 0 !important;
  }
}

@media (max-width: 780px){
  #ct05{
    margin-top: 0 !important;
  }
}

@media (max-width: 650px){
  #ct05{
    margin-top: 0 !important;
  }
}

@media (max-width: 490px){
  #ct05{
    margin-top: 0 !important;
  }

  #ct01{
    margin-top: 20px !important;
  }
}

/* =========================================================
   FINAL SPACING + BUTTON STYLE + SHADOW FIX
========================================================= */

/* ---------- Content top spacing ---------- */
#ct01 .ct01-ct01,
#ct01 .ct01-ct02,
#ct04 .ct04-cp {
  margin-top: 30px !important;
}

/* CT05 new button follows the same button spacing */
#ct05 .ct05-bt {
  margin-top: 50px !important;
}

/* ---------- Responsive spacing ---------- */
@media (max-width: 1199px) {
  #ct01 .ct01-ct01,
  #ct01 .ct01-ct02,
  #ct04 .ct04-cp {
    margin-top: 25px !important;
  }

  #ct05 .ct05-bt {
    margin-top: 40px !important;
  }
}

@media (max-width: 780px) {
  #ct01 .ct01-ct01,
  #ct01 .ct01-ct02,
  #ct04 .ct04-cp {
    margin-top: 20px !important;
  }

  #ct05 .ct05-bt {
    margin-top: 35px !important;
  }
}

@media (max-width: 490px) {
  #ct01 .ct01-ct01,
  #ct01 .ct01-ct02,
  #ct04 .ct04-cp {
    margin-top: 16px !important;
  }

  #ct05 .ct05-bt {
    margin-top: 30px !important;
  }
}

/* ---------- All buttons use exactly the same visual style ---------- */
.ct01-bt,
.ct02-bt,
.ct03-bt,
.ct04-bt,
.ct05-bt,
.ct06-bt {
  width: 91.6667% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease !important;
}

.ct01-bt > a,
.ct02-bt > a,
.ct03-bt > a,
.ct04-bt > a,
.ct05-bt > a,
.ct06-bt > a {
  display: inline-block !important;
}

.ct01-bt img,
.ct02-bt img,
.ct03-bt img,
.ct04-bt img,
.ct05-bt img,
.ct06-bt img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  filter: drop-shadow(0px 5px 5px rgba(137, 98, 0, 0.2)) !important;
}

/* Same hover behavior for every button */
.ct01-bt:hover,
.ct02-bt:hover,
.ct03-bt:hover,
.ct04-bt:hover,
.ct05-bt:hover,
.ct06-bt:hover {
  transform: scale(0.95) !important;
}

/* Keep current responsive button sizing consistent */
@media (min-width: 1200px) {
  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img {
    max-width: 100% !important;
  }
}

@media (max-width: 1199px) {
  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img {
    width: 70% !important;
    max-width: 70% !important;
  }
}

@media (max-width: 780px) {
  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img {
    width: 60% !important;
    max-width: 60% !important;
  }
}

@media (max-width: 490px) {
  .ct01-bt img,
  .ct02-bt img,
  .ct03-bt img,
  .ct04-bt img,
  .ct05-bt img,
  .ct06-bt img {
    width: 52% !important;
    max-width: 52% !important;
  }
}

/* ---------- KV three-card shadow ---------- */
#kv-cp01 img,
#kv-cp02 img,
#kv-cp03 img {
  filter: drop-shadow(0px 10px 5px rgba(137, 98, 0, 0.4)) !important;
}

/* =========================================================
   CT06 FULL-WIDTH YELLOW SECTION + CT01 SWIPER SPACING
========================================================= */

/* ---------- CT01 swiper top spacing ---------- */
#ct01 .swiper,
#ct01 .plus1Swiper {
  margin-top: 30px !important;
}

/* ---------- CT06 full-width background ---------- */
#ct06 {
  width: 100% !important;
  max-width: none !important;
  margin-top: 100px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-top: 50px !important;
  padding-bottom: 50px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  background: #fddb69 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  box-sizing: border-box !important;
  text-align: center !important;
}

/* Remove card-style inner background/frame */
#ct06 .ct06-ct,
#ct06 .ct06-ct00 {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  box-sizing: border-box !important;
}

/* Keep CT06 text/content inside 1100px */
#ct06 .ct06-tt,
#ct06 .ct06-tt-mb,
#ct06 .ct06-ct01,
#ct06 .ct06-ct02,
#ct06 .ct06-ct00 > * {
  width: 1100px !important;
  max-width: 91.6667% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Responsive spacing */
@media (max-width: 1199px) {
  #ct01 .swiper,
  #ct01 .plus1Swiper {
    margin-top: 25px !important;
  }

  #ct06 {
    margin-top: 80px !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}

@media (max-width: 780px) {
  #ct01 .swiper,
  #ct01 .plus1Swiper {
    margin-top: 20px !important;
  }

  #ct06 {
    margin-top: 60px !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
}

@media (max-width: 490px) {
  #ct01 .swiper,
  #ct01 .plus1Swiper {
    margin-top: 16px !important;
  }

  #ct06 {
    margin-top: 50px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* =========================================================
   FINAL TT / TT-MB SWITCH AT 780PX
   781px↑ : desktop title
   780px↓ : mobile title
========================================================= */

/* 781px 以上：顯示桌機版標題 */
.kv-tt,
.ct01-tt,
.ct02-tt,
.ct03-tt,
.ct04-tt,
.ct05-tt,
.ct05-tt02 {
  display: block !important;
}

.kv-tt-mb,
.ct01-tt-mb,
.ct02-tt-mb,
.ct03-tt-mb,
.ct04-tt-mb,
.ct05-tt-mb {
  display: none !important;
}

/* 780px 以下：切換成手機版標題 */
@media (max-width: 780px) {
  .kv-tt,
  .ct01-tt,
  .ct02-tt,
  .ct03-tt,
  .ct04-tt,
  .ct05-tt,
  .ct05-tt02 {
    display: none !important;
  }

  .kv-tt-mb,
  .ct01-tt-mb,
  .ct02-tt-mb,
  .ct03-tt-mb,
  .ct04-tt-mb,
  .ct05-tt-mb {
    display: block !important;
  }

.ct01-tt-mb,
.ct02-tt-mb,
.ct03-tt-mb {
  margin-top: 0 !important;
}

.ct01-ct01,
.ct01-ct02{
  display: none;
}
.ct01-ct01-mb,
.ct01-ct02-mb{
  display: block;
}

}
/* =========================================================
   CT06 FINAL
   所有尺寸 margin-bottom 固定為 0
========================================================= */
#ct06 {
  margin-bottom: 0 !important;
}