@charset "utf-8";
/* ===================================================	共用 =================================================== */
:root {
  --color1: #f5f0ec;
  --color2: #f9f9f9;
  --color3: #e2d6c0;
  --color4: #ffc107;
  --color5: #50240a;
  --color6: #a40035;
  --color7: #282828;
}



html,
body {
  background: url("../images/side_deco.png")top center repeat-y,#f5f0ec;
  background-size: auto, auto;
  font-family: "Noto Serif TC", serif;
}

.blk_head{background: none;}
.blk_body { background-color: var(--color2); outline: 3px solid var(--color1); border-radius: .5em;}
.block0 .blk_body{ outline: none; border:none;}
.blk_pre .blk_body{background: unset;}

    @media screen and (max-width: 991px) {
        .blk_body{padding:0 0;}
}




/* ------------------ 元件調整 ------------------ */
.collect_5x6 .h-row li,.collect_5x6 .s-row li,.hightlight_5p li,.half ul li,.alternate li,.crosswise_3p li {
    border-radius: 1em;
    border: 1px solid #d2d2d2;
    overflow: hidden;
}

.baseline li {
    border-radius: 0 0 1em 1em;
    border: 1px solid #d2d2d2;
}


.crosswise_3p ul.sp {
    justify-content: space-between;
}

.rectangle_3p_370a_img a img{border-radius: 1em;}


.keywordB .keywordA li {
    display: flex;
    align-items: center;
    justify-content: center;
	padding:0 0;
}


/* =================================================== 通用設定 =================================================== */
/* ------------------ COLOR ------------------ */
.baseline .font .price big,.alternate .font h4,.alternate ul:nth-child(odd) li:first-child .font .price big,.alternate ul:nth-child(even) li:last-child .font .price big{
    color: var(--color6);
}

.half ul {
    background: var(--color1);
}

.collect_5x6 .s-row h4,
.collect_5x6 .special,
.hightlight_5p .font h4,
.hightlight .font h4,
.keywordB .keywordA li,
.alternate ul:nth-child(odd) li:first-child,
.alternate ul:nth-child(even) li:last-child {
    color: #222;
    background: var(--color4);
}
.alternate ul:nth-child(odd) li:first-child .font h4,
.alternate .font p,
.alternate ul:nth-child(odd) li:first-child .font .price,
.alternate ul:nth-child(even) li:last-child .font h4,.alternate ul:nth-child(even) li:last-child .font .price,.keywordB .keywordA a {
    color: #222;
}


.keywordA li {
    background: #fff;
    box-shadow: none;
}

.keywordA li:hover {
    background: var(--color3);
}

.keywordA li:hover a {
    color: #fff;
}

/* ------------------ 架構標 ------------------ */
.btt {
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

h2.btt {
    position: relative;
    display: inline-block;
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: clamp(2rem, 4vw + 1rem, 4rem);
    color: var(--color7);
    padding: 0 1em;
}

h2.btt::before,
h2.btt::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family:"Noto Serif TC", serif;
    font-size: 1.4em;
    font-weight: 900;
    line-height: 1;
    color: var(--color4);
}

h2.btt::before {
    content: "(";
    left: 0;
}

h2.btt::after {
    content: ")";
    right: 0;
}

.btt span {
    color: var(--color4);
    padding: 0 1rem;
}




/* =================================================== 版頭設定 =================================================== */
/* ------------------ 版頭動畫 ------------------ */
.kv-bg {width: 100%;}

.kvitem {position: absolute;}

.kv_date {
    top: calc((123 / 1920) * 100%);
    left: calc((677 / 1920) * 100%);
    width: calc((305 / 1920) * 100%);
    animation: flipInX 3s;
    animation-delay: 0s;
    animation-fill-mode: backwards;
}

.kv_title {
    top: calc((264 / 1920) * 100%);
    left: calc((644 / 1920) * 100%);
    width: calc((444 / 1920) * 100%);
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-delay: 0s;
    animation-fill-mode: backwards;
}

.kv_sale {
    top: calc((1548 / 1920) * 100%);
    left: calc((422 / 1920) * 100%);
    width: calc((478 / 1920) * 100%);
    animation: backInLeft 2s;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}

.photo_1 {
    top: calc((65 / 1920) * 100%);
    left: calc((1115 / 1920) * 100%);
    width: calc((585 / 1920) * 100%);
    animation: fadeInDown 2.5s;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}

.photo_2 {
    top: calc((1033 / 1920) * 100%);
    left: calc((930 / 1920) * 100%);
    width: calc((369 / 1920) * 100%);
    animation: fadeInUp 2.5s;
    animation-delay: 1.5s;
    animation-fill-mode: backwards;
}

.photo_3 {
    top: calc((1033 / 1920) * 100%);
    left: calc((1331 / 1920) * 100%);
    width: calc((369 / 1920) * 100%);
    animation: fadeInLeft 2.5s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}







/* ------------------ promotion 攻略 ------------------ */
.block0 {
    background: url("../images/bg_0.jpg")top center no-repeat,var(--color4);
    background-size: 100% auto,auto;
}

.a1 {
    animation-name: bounceInUp;
    animation-duration: 2s;
    animation-delay: 0s;
}

.a2 {
    animation-name: bounceInDown;
    animation-duration: 2s;
    animation-delay: .5s;
}

.a3 {
    animation-name: bounceInUp;
    animation-duration: 2s;
    animation-delay: 1s;
}

.a4 {
    animation-name: bounceInDown;
    animation-duration: 2s;
    animation-delay: 1.5s;
}



/* =================================================== 版身設定 =================================================== */
/* ------------------  menu ------------------ */
.menustyle2 {
    background: var(--color7);
}


.menustyle2 .nav-link.active {
    background: var(--color4);
    color: var(--color7);
    border-radius: 0;
}

.menustyle2 .nav-link:focus, .menustyle2 .nav-link:hover {
    background: var(--color4);
    color: var(--color7);
}

@media screen and (max-width: 991px) {
    border:transform: ; !important;
}



/* ------------------ 前往○○○館 ------------------ */
.go_btn a {
    background-color: var(--color4);
    padding: 0.3em 1em;
    border-radius: 999em;
    font-size: 24px;
    line-height: 1.2;
    color: #222;
}


.go_btn a:hover {
    background: var(--color7);
}





/*---- 日期設定輪播 ----*/
.swiper {
    position: relative;
    background-color: var(--color2);
    outline: 3px solid var(--color1);
    border-radius: .5em;
}

@media screen and (max-width: 991px) {
  .swiper {
    outline: 3px solid var(--color1);
  }
}

.swiper-slide a {
  display: block;
}

.swiper-slide img {
  width: 100%;
  margin: unset;
}

.swiper-button-next,
.swiper-button-prev {
  margin: unset !important;
  height: -webkit-fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

:root {
  --swiper-navigation-size: 60px !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  pointer-events: unset;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
  background-image: url(../images/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30% auto;
  display: block;
  border-radius: 100%;
  width: 30px !important;
  height: 30px !important;
  background-color: var(--color7);
  opacity: 1;
  font-size: 0px !important;
  font-family: serif !important;
}

@media screen and (max-width: 991px) {
  .swiper-button-next:after,
  .swiper-button-prev:after {
    width: 26px;
    height: 26px;
  }
}
.swiper-button-next:after {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 15px;
  top: 49%;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 15px;
  top: 49%;
}

.swiper-brand a {
  position: relative;
  margin: 10px 0;
}

.swiper-brand .font {
  position: absolute;
  top: 20px;
  left: 20px;
  -moz-text-align-last: left;
  text-align-last: left;
}

.swiper-brand ul {
  font-size: 40px;
  text-align: center;
  color: var(--color7);
  font-weight: 600;
  line-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.swiper-brand big {
  color: var(--color5);
  font-size: 45px;
}

.swiper-brand span {
  font-size: 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto 10px;
}

.swiper-brand img {
  width: 90px;
  height: 90px;
  border-radius: 99rem;
  border: 2.5px var(--color4) solid;
}

.swiper-brand h5 {
  color: var(--color7);
  font-size: 1rem;
  margin: auto 10px;
  line-height: 20px;
}

.swiper-brand span.date {
    color: #282828;
    position: relative;
    background: var(--color4);
    border-radius: 100px;
    padding: 5px 20px;
}

@media screen and (max-width: 991px) {
  .swiper-brand p {
    font-size: 16px;
  }
  .swiper-brand span {
    margin: auto 20px;
    display: block;
    font-size: 20px;
  }
  .swiper-brand ul {
    font-size: 20px;
    line-height: 4rem;
  }
  .swiper-brand big {
    font-size: 35px;
    padding: 0 3px 5px;
  }
}
.swiper-brand .swiper-container {
  margin: 10px 30px 15px;
  overflow: hidden;
}

/*---- 日期設定輪播///END ----*/