@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');

:root {
  --main-color: #f76d8f;
  --brown: #875c44;
  --yellow: #ebac06;
}

body,
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  padding-top: 50px;
  background: linear-gradient(60deg, #c8fddc 0%, #f9fff6 25%, #ffe9f2 50%);
}

body::before {
  content: '';
  background: url(../images/bgi0.png);
  background-repeat: repeat;
  background-position: top -160px left;
  position: fixed;
  z-index: -1;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
}

.br {
  display: none;
}


p,
table tr td {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
}

@media screen and (min-width: 576px) {
  body {
    font-size: 16px;
    background: linear-gradient(130deg, #c8fddc 0%, #fff3f8 25%, #ffe9f2 50%);
  }

  p,
  table tr td {
    font-size: 16px;
    letter-spacing: 0.6px;
    line-height: 1.5em;
  }

  .br-sp{
    display: none;
  }
}

@media screen and (min-width: 768px) {
  body {
    padding-top: 0;
  }
}

@media screen and (min-width: 992px) {
  .br {
    display: block;
  }
}

/* Key Vision
======================================= */

.wrap img {
  display: block;
  margin: 40px auto 20px auto;
}

.wrap h1 {
  color: var(--main-color);
  text-align: center;
  text-shadow: rgb(255, 255, 255) 5px 0px 15px, rgb(255, 255, 255)-5px 0px 15px,
    rgb(255, 255, 255) 5px 0px 15px, rgb(255, 255, 255)-5px 0px 15px,
    rgb(255, 255, 255) 5px 0px 15px, rgb(255, 255, 255)-5px 0px 15px;
  font-size: 2em;
  margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
  .wrap img {
    margin: 90px auto 20px auto;
  }
}

@media screen and (min-width: 992px) {
  .wrap img {
    margin: 30px auto;
  }

  .wrap h1 {
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 992px) {
  .wrap h1 {
    display: none;
  }
}

/* 活動概要、關於庫洛魔法使特展
======================================= */
.intro,
.about {
  background-color: #fff;
  padding: 30px 20px;
  margin-bottom: 50px;
  border-radius: 10px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.085);
  position: relative;
}

.intro h2,
.about h2 {
  margin-bottom: 30px;
}

.about h2 + p {
  color: var(--brown);
  font-weight: bold;
  text-align: center;
  font-size: 18px;
}

.about .row {
  font-size: 0;
  margin: 20px 0;
}

.about .row .col-6 img {
  width: 474px;
  margin: auto;
  vertical-align: top;
}

.about .row .col-6 p {
  font-size: 16px;
  text-align: center;
  color: var(--brown);
}

.about .row + p {
  color: var(--brown);
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.sakura,
.syaora,
.tomoyo {
  display: none;
}

.sakura img {
  float: right;
  width: 30%;
}

.syaora img,
.tomoyo img {
  width: 30%;
}

@media screen and (min-width: 576px) {
  .intro,
  .about {
    padding: 60px 30px;
    margin-bottom: 100px;
  }
}

@media screen and (min-width: 1200px) {
  .intro,
  .about {
    position: relative;
  }

  .sakura {
    display: inline-block;
    position: absolute;
    width: 20%;
    height: calc(100% - 100px);
    top: 0;
    right: 0;
  }

  .sakura img {
    position: sticky;
    width: 180px;
    float: left;
    top: 180px;
  }

  .syaora,
  .tomoyo {
    display: block;
    position: absolute;
    width: 20%;
    height: calc(100% - 100px);
    top: 0;
    left: 0;
  }

  .tomoyo {
    top: 180px;
  }

  .syaora img,
  .tomoyo img {
    position: sticky;
    width: 180px;
    float: right;
    top: 200px;
  }
}

.intro table tbody tr td {
  padding: 15px;
}

.intro table tbody tr td:nth-child(odd) {
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid #e9e9ea;
  border-left: 0px;
  width: 100px;
  text-align: center;
}

.intro table tbody tr td:nth-child(even) {
  border: 1px solid #e9e9ea;
  border-right: 0px;
}

@media screen and (min-width: 576px) {
  .intro table tbody tr td:nth-child(odd) {
    width: 180px;
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .intro table tbody tr td {
    padding: 23px;
  }
}

@media screen and (min-width: 992px) {
  .intro table {
    width: 90%;
    margin: auto;
  }
}

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

.btn_ClickHere {
  background-color: #ffbf17;
  box-sizing: border-box;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 3px 0px 0px #e0a302;
  margin-left: 10px;
  padding: 3px 8px;
}

.during sup {
  padding-left: 3px;
}

.during span:after,
.table_ticket02 tbody ul li:before {
  content: url(../images/icon_cherry.svg);
  margin: 0px 5px;
}

.table_yellow.table_ticket02 tbody ul li:before {
  content: url(../images/icon_cherry_yellow.svg);
}

.during span:nth-of-type(1):after {
  margin-left: 10px;
}

.table_ticket02 tbody ul li:before{
  margin-right: 10px;
}

h2 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--main-color);
  text-align: center;
  font-size: 1.8em;
  width: 100%;
  margin-top: 56px;
  margin-bottom: 56px;
}

#index h2 {
  margin-top: 0;
}

/* #goods h2, */
#ticket h2 {
  margin-bottom: 0;
}

h2::before {
  content: url(../images/title.svg);
  display: block;
  max-width: 147px;
  letter-spacing: 0.1em;
  margin: auto;
}

.section-bg {
  background-color: #fff;
  padding: 60px 0;
  position: relative;
  margin-bottom: 50px;
}

/* .section-bg h3,
.highlight-act .title {
  width: 100%;
  color: #ff84a2;
  font-size: 22px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #e1e1e2;
} */

.section-bg h3{
  width: 100%;
  color: #ff84a2;
  font-size: 22px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #e1e1e2;
}

@media screen and (min-width: 768px) {
  h2 {
    margin-top: 80px;
  }
}

/* 最新消息
======================================= */

.news-item {
  margin-bottom: 45px;
  padding-bottom: 45px;
  border-bottom: 1px solid #e1e1e2;
}

.news-item::after {
  content: '';
  display: block;
  clear: both;
}

.news-item:nth-last-child(1) {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: 0px;
}

.news-item .pic {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #84cdbc;
  box-sizing: border-box;
  margin: auto;
}

.news-item .pic img {
  height: 100%;
}

.news-item .txt {
  padding: 0 20px;
}

.news-item .date {
  margin: 10px 0;
  font-size: 1rem;
  position: relative;
  display: inline-block;
}

.news-item .title {
  font-size: 1rem;
  line-height: 1.5em;
  color: #3d3d3d;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 0px;
  margin-bottom: 0px;
}

.news-item:nth-child(1) .date::after {
  content: 'NEW';
  display: block;
  width: 40px;
  height: 20px;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  font-weight: normal;
  font-family: Arial;
  font-size: 0.8rem;
  background-color: #fec017;
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 100%;
  margin: auto;
  margin-left: 5px;
}

.btn_More {
  background-color: #83cdbc;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  float: right;
  margin-top: 10px;
}

@media screen and (min-width: 768px) {
  .news-item {
    display: flex;
    flex-direction: row;
  }

  .news-item .txt {
    padding: 0 0 0 15px;
    width: calc(100% - 300px);
    position: relative;
  }

  .btn_More {
    position: absolute;
    right: 10px;
    bottom: 0px;
  }
}

h3.news-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #61af9d;
  line-height: 1.5em;
  position: relative;
  margin-bottom: 40px;
}

.news-date {
  color: #cfcfcf;
  font-size: 0.9rem;
  font-weight: normal;
  position: absolute;
  right: 0;
  bottom: -30px;
}

.news-content strong {
  text-align: center;
  display: block;
  line-height: 1.5em;
  font-size: 1rem;
}

.news-content p {
  text-indent: 2em;
  margin: 20px 0;
}

.td-green {
  background: #61af9d;
  color: #fff;
}

.td-green2 {
  background: #83cdbc;
  color: #fff;
}

.news-content table {
  margin: auto;
}

.news-content table caption {
  caption-side: top;
  color: #61af9d;
  font-size: 1rem;
}

.news-content table tbody tr td {
  padding: 10px;
  border: 1px solid #d3d3d3;
  text-align: center;
}

@media screen and (min-width: 768px) {
  h3.news-title {
    font-size: 1.4rem;
  }
  .news-content strong {
    font-size: 1.2rem;
  }
  .news-content table caption {
    font-size: 1.2rem;
  }
}

/* 售票資訊
======================================= */

.section-goods h3,
.section-ticket h3 {
  border-bottom: 0px;
}

.section_ticket .title {
  width: 100%;
  color: #ff84a2;
  font-size: 22px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  text-align: center;
  border-bottom: 1px solid #e1e1e2;
}

.section_ticket table h3 {
  text-align: left;
  font-size: 20px;
  margin-bottom: 10px;
}

.section_ticket table img {
  vertical-align: top;
  margin: 20px 0;
  width: 100%;
}

/* .section_ticket table:nth-child(1),
#ticket01.section_ticket table:nth-child(2),
#ticket02.tab-pane table:nth-child(2) {
  margin-bottom: 50px;
  background-color: #3d3d3d;
} */

.section_ticket table {
  margin-bottom: 50px;
}

/* .section-ticket .notice {
  margin: 20px 0 50px 0;
} */

/* .section_ticket .col-12.col-lg-10.col-xl-7 {
  margin: auto;
  background-color: #3d3d3d;
} */


.section_ticket table tbody tr td {
  width: auto;
  font-size: 14px;
  padding: 15px;
}

.section_ticket table h3::before {
  margin-right: 10px;
}

table.table_pink h3 {
  color: var(--main-color);
}

table.table_pink h3::before {
  content: url(../images/icon_cherry.svg);
}

table.table_yellow h3 {
  color: var(--yellow);
}

table.table_yellow h3::before {
  content: url(../images/icon_cherry_yellow.svg);
}

table.table_brown h3 {
  color: var(--brown);
}

table.table_brown h3::before {
  content: url(../images/icon_cherry_brown.svg);
}



table.table_brown tbody tr td.td_brown,
table.table_pink tbody tr td.td_pink,
table.table_yellow tbody tr td.td_yellow {
  color: #fff;
  border-left: 1px solid #e9e9ea;
  border-bottom: 1px solid #e9e9ea;
  text-align: center;
}

table.table_pink tbody tr td.td_pink {
  background-color: var(--main-color);
}

table.table_yellow tbody tr td.td_yellow {
  background-color: var(--yellow);
}

table.table_brown tbody tr td.td_brown {
  background-color: var(--brown);
}

/*適用對象*/
table.table_brown tbody tr td.td_brown.sp {
  width: 50%;
}

@media screen and (max-width: 576px) {
  /* table.table_pink tbody tr td.td_pink.width-100,
  table.table_yellow tbody tr td.td_yellow.width-100,
  table.table_brown tbody tr td.td_brown.width-100 {
    width: 100px;
  } */

  .section_ticket table tbody tr td.width-100 {
    width: 100px;
  }
}

@media screen and (min-width: 576px) {
  .section_ticket table img {
    max-width: 350px;
  }

  /* table.table_pink tbody tr td,
  table.table_yellow tbody tr td,
  table.table_brown tbody tr td {
    padding: 15px;
    font-size: 16px;
  } */

  .section_ticket table tbody tr td{
    padding: 15px;
    font-size: 16px;
  }

  /* table.table_pink tbody tr td:nth-child(odd),
  table.table_yellow tbody tr td:nth-child(odd),
  table.table_brown1 tbody tr td:nth-child(odd) {
    width: 180px;
  } */

  .section_ticket table tbody tr td:nth-child(odd){
    width: 180px;
  }

  table.table_brown2 tbody tr td:nth-child(odd) {
    width: 120px;
  }

  
}

@media screen and (min-width: 768px) {
  /* table.table_pink tbody tr td,
  table.table_yellow tbody tr td,
  table.table_brown tbody tr td {
    padding: 23px;
  } */

  .section_ticket table tbody tr td{
    padding: 23px;
  }

  /*適用對象*/
  table.table_brown tbody tr td.td_brown.sp {
    width: auto;
  }

  /* .section-ticket .notice {
    text-align: center;
  } */
}

@media screen and (min-width: 992px) {
  /* table.table_pink,
  table.table_yellow,
  table.table_brown {
    width: 90%;
    margin: auto;
  } */

  .section_ticket table{
    width: 90%;
    margin: auto;
    margin-bottom: 50px;
  }
}

/* 展區特色
======================================= */

.highlight-item {
  margin-bottom: 85px;
}

.highlight-item:nth-last-child(1) {
  margin-bottom: 0;
}

.highlight-item .pic img {
  border-radius: 5px;
}

.highlight-item .pic figcaption {
  margin-bottom: 10px;
}

.highlight-item p {
  text-align: left;
}

.highlight-Big .pic,
.highlight-Shop .pic {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.highlight-KV .pic {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* .highlight-KV .pic img {
  text-align: center;
} */

.highlight-Big .pic img {
  width: 50%;
  margin-top: 20px;
}

.highlight-Big .pic img[src='images/highlight02.jpg'] {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.highlight-Big .pic img[src='images/highlight03.jpg'] {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* 合照體驗 */
.highlight-act {
  display: flex;
  flex-direction: column;
}

.highlight-act .pic {
  order: -1;
}

.highlight-act .pic img {
  width: 80%;
  margin-top: -20px;
  border-radius: 0px;
}

.highlight-act .pic figcaption {
  width: 100%;
}

.highlight-act .content {
  background-color: #fff3dd;
  padding: 15px;
  border-radius: 5px;
}

img[src='images/camera.svg'] {
  width: 30px;
  margin-top: -6px;
}

.highlight-act .content .title {
  color: #ebac06;
  width: 100%;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid #e1e1e2;
}


.highlight-act .content .notes {
  margin: 10px 0px;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

.highlight-act .content .notes ul li:before {
  content: url(../images/icon_cherry.svg);
  margin-right: 10px;
}


/*創造回憶的房間(商售區)*/
.highlight-Shop .pic img {
  width: 33.333333%;
}

.highlight-Shop .pic img:nth-child(3) {
  order: 1;
}

.highlight-Shop p {
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .highlight-KV::after,
  .highlight-act::after {
    content: '';
    display: block;
    clear: both;
  }

  /*台灣用庫洛魔法使特展視覺圖*/
  .highlight-KV .pic {
    float: left;
    width: 50%;
  }

  .highlight-KV h3,
  .highlight-KV p {
    width: 48%;
    float: right;
    text-align: left;
  }

  .highlight-KV .pic {
    margin-bottom: 0;
  }

  /*合照體驗*/
  .highlight-act .title {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .highlight-act {
    display: block;
  }

  .highlight-act .content {
    background-color: #fff;
    padding: 0px;
    border-radius: 0px;
    float: left;
    width: 50%;
  }

  .highlight-act .content .notes {
    margin: 20px 0px;
    background-color: #ffebc7;
  }

  .highlight-act .pic {
    display: inline-block;
    width: 50%;
  }

  .highlight-act .pic img {
    width: auto;
    margin-top: 0px;
  }

  /*創造回憶的房間(商售區)*/
  .highlight-Shop .pic img {
    width: 20%;
  }

  .highlight-Shop .pic img:nth-child(3) {
    order: 0;
  }
}

/* 展區導覽
======================================= */

.exhibit-item {
  margin-bottom: 85px;
  display: flex;
  flex-direction: column;
}

.exhibit-item h3 {
  order: -1;
}

.exhibit-item:nth-child(2) h3,
.exhibit-item:nth-child(2) p,
.exhibit-item:nth-last-child(1) h3,
.exhibit-item:nth-last-child(1) p {
  width: 100%;
}

.exhibit-item::after {
  content: '';
  display: block;
  clear: both;
}

.pic {
  width: 100%;
  color: rgb(143, 143, 143);
  text-align: center;
}

.pic figcaption {
  padding-top: 5px;
  font-size: 0.9rem;
}

.exhibit-item .pic img {
  margin: auto;
  display: block;
  border-radius: 5px;
}

.exhibit-item h3,
.exhibit-item p {
  width: 100%;
}

.exhibit-item .during {
  background-color: rgb(233, 233, 233, 0.8);
  padding: 10px;
  border-radius: 5px;
}

@media screen and (min-width: 768px) {
  .exhibit-item {
    display: block;
  }

  .exhibit-item .pic {
    float: left;
    width: 50%;
  }

  .exhibit-item h3 {
    text-align: left;
  }

  .exhibit-item h3,
  .exhibit-item p {
    width: 48%;
    float: right;
  }
}

/* 常見問題
======================================= */

.section-faq h3 {
  background-color: #83cdbc;
  color: #fff;
  font-size: 1.1rem;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 0;
  line-height: 1.5em;
  text-align: left;
  font-weight: normal;
}

.faq_q::before {
  content: 'Ｑ．';
}

.faq_a {
  padding: 10px 10px 50px 10px;
}

.faq_a::before {
  content: 'Ａ．';
}

.faq_a a,
a[href*='mailto'] {
  padding: 0 5px;
  font-weight: bold;
  color: var(--main-color);
}

a[href*='mailto'] {
  color: var(--yellow);
}

.section-faq .notice {
  text-align: left;
  border-top: 1px solid #e1e1e2;
  padding-top: 50px;
  margin-bottom: 0;
}

.section-faq .notice ul li {
  line-height: 1.8em;
}

@media screen and (min-width: 768px) {
  .faq_q {
    font-size: 1.2rem;
    padding: 10px;
  }
}

/* 退票資訊
======================================= */

.refund p {
  text-indent: 0px;
}

.refund ul li {
  line-height: 1.5em;
}

.refund .notice {
  background: #ffe7e8;
  color: #c0392b;
  border-radius: 10px;
  display: block;
  width: 100%;
  margin: 30px 0px;
  padding: 20px;
  text-align: center;
}

.refund-guide {
  margin-top: 60px;
}

.refund-guide img {
  display: block;
  margin: 20px auto;
  border-radius: 10px;
}

.grayscale {
  filter: grayscale(100%);
  /* font-style: italic; */
  opacity: 0.7;
}

/* Footer
======================================= */

footer {
  margin-bottom: 50px;
}

footer .row {
  text-shadow: rgb(255, 255, 255) 0px 0px 5px, rgb(255, 255, 255) 0px 0px 5px,
    rgb(255, 255, 255) 0px 0px 5px, rgb(255, 255, 255) 0px 0px 5px,
    rgb(255, 255, 255) 0px 0px 5px, rgb(255, 255, 255) 0px 0px 5px;
}

.copyright {
  color: #bd8b56;
  font-weight: 400;
  padding: 0 15px;
}

.copyright p {
  font-size: 12px;
  margin-bottom: 0;
  text-align: center;
}

.mighty-logo img {
  max-width: 100%;
  width: 125px;
  margin-bottom: 10px;
}

@media screen and (min-width: 576px) {
  .copyright {
    padding: 0;
    margin: 10px 0;
    margin-bottom: 0;
  }

  .mighty-logo {
    display: flex;
    align-items: center;
  }

  .mighty-logo img {
    width: 140px;
    margin: 10px;
  }

  .copyright p {
    margin-bottom: 0;
    text-align: left;
  }
}

.chara {
  display: none;
}

@media screen and (min-width: 1200px) {
  .chara {
    display: block;
    position: absolute;
    bottom: 0;
    width: 10vw;
  }
  .chara-r {
    left: 105%;
  }

  .chara-l {
    right: 105%;
  }
}

/* 展覽販售商品
======================================= */

.section-goods p.title {
  width: 100%;
  color: #6fbcaa;
  font-size: 22px;
  text-align: center;
}

/*分頁btn*/
.tab-goods,
.tab-title {
  font-size: 0;
  display: block;
  width: 100%;
  margin-bottom: 50px;
  padding: 20px 0;
  border-bottom: 1px solid #e1e1e2;
}

.tab-goods ul,
.tab-title ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.tab-goods ul li,
.tab-title ul li a {
  display: inline-block;
  margin: 10px 10px;
  background-color: rgb(224, 224, 224, 0.5);
  border-radius: 3px;
  transition: background-color 0.3s;
}

.tab-goods ul li:hover,
.tab-title ul li a:hover {
  transition: background-color 0.3s;
}

.tab-goods ul li a,
.tab-title ul li a {
  font-size: 1rem;
  position: relative;
  padding: 0 8px;
  color: #3d3d3d;
  display: inline-block;
  padding: 5px 10px;
}

.tab-goods ul li.active,
.tab-title .nav-link.active {
  /* border: 1.5px solid #6fbcaa; */
  background-color: #6fbcaa;
}

.tab-goods ul li.active a:hover,
.tab-title .nav-link.active:hover {
  cursor: text;
  opacity: 1;
}

.tab-goods ul li.active a,
.tab-title .nav-link.active {
  color: #fff;
}

/*商品列表*/

.goods-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.goods-item {
  width: 45%;
  margin-bottom: 20px;
}

.goods-item .pic {
  border-radius: 10px;
  border: 1px solid #ababab;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  background-color: #fff;
}

.goods-item .pic img {
  transition: transform 0.3s;
}

.goods-item .pic:hover img {
  transform: scale(1.1);
  transition: transform 0.3s;
}

.goods-item .title {
  position: relative;
  margin-top: 10px;
  padding-left: 12px;
}

.goods-item .title::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background-color: #ffbf17;
}

.goods-item .modal-pic {
  padding: 20px;
  overflow: hidden;
}

.pic-sample {
  position: relative;
}

.pic-sample::after {
  content: '監修中';
  color: red;
  padding: 2px 8px;
  background-color: #fff;
  font-size: 1.1rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

.goods-item .modal-pic img {
  margin: auto;
  width: 80%;
  display: block;
  box-sizing: border-box;
}

.goods-item .modal-title {
  margin: auto;
  font-size: 1.5rem;
}

.goods-item .modal-body {
  padding: 20px;
}

.goods-item .modal-body ul li:nth-child(1)::before {
  content: '價格：';
}

.goods-item .modal-body ul li:nth-last-child(2)::before {
  content: '尺寸：';
}

.goods-item .modal-body ul li:nth-child(3)::before {
  content: '材質：';
}

.goods-item .modal-footer {
  padding: 20px 10px;
}

.goods-item .modal-footer button {
  background-color: #ffbf17;
  border: 0px;
  color: #fff;
  padding: 6px 15px;
  border-radius: 10px;
  transition: color 0.3s;
  margin: auto;
}

.goods-item .modal-footer button:hover {
  background-color: #f5b512;
  transition: color 0.3s;
}

@media screen and (min-width: 768px) {
  .goods-item {
    width: 30%;
  }
}

@media screen and (min-width: 992px) {
  .goods-item {
    width: 23%;
    margin-bottom: 40px;
  }
}

.pagination {
  margin-top: 20px;
}

.page-item.active .page-link {
  background-color: #6fbcaa;
  border-color: #6fbcaa;
  color: #fff;
  z-index: 0;
}

.page-link {
  color: #3d3d3d;
}

.page-pre,
.page-nex {
  color: #6fbcaa;
}

.page-link:hover {
  color: #6fbcaa;
}

.page-link:focus {
  box-shadow: none;
}

.goods-notice {
  background: #ffe7e8;
  color: #c0392b;
  padding: 5px 10px;
  border-radius: 10px;
  display: inline-block;
  margin-top: 40px;
}

/* Logo
======================================= */

h1.logo {
  padding: 6.5935px;
}

h1.logo a img {
  width: 75px;
  display: block;
  fill: #fff;
  margin: auto;
}

.main-nav ul h1.logo {
  display: none;
}

@media screen and (min-width: 992px) {
  h1.logo {
    display: none;
  }

  .main-nav ul h1.logo {
    display: block;
    padding: 0;
    padding: 11.595px 20px 0px 20px;
  }

  .main-nav ul h1.logo a img {
    width: 75px;
    display: block;
    fill: #fff;
    margin: auto;
  }
}

/* HB
======================================= */
.hb {
  width: 50px;
  height: 50px;
  transform: rotate(0deg);
  transition: rotate 0.5s ease-in-out;
  cursor: pointer;
  position: absolute;
  z-index: 9999;
  right: 0;
  top: 0;
}

.hb span {
  display: block;
  position: absolute;
  z-index: 3;
  height: 2px;
  width: 26px;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  margin-top: 12px;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  transform-origin: left center;
}

.hb span:nth-child(1) {
  top: 0px;
}

.hb span:nth-child(2) {
  top: 12px;
}

.hb span:nth-child(3) {
  top: 24px;
}

.hb.active span:nth-child(1) {
  transform: rotate(45deg);
  top: -1px;
  left: 9px;
  width: 36.769552px;
}

.hb.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 25px;
  left: 0px;
  left: 9px;
  width: 36.769552px;
}

.hb.active span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

@media screen and (min-width: 992px) {
  .hb {
    display: none;
  }
}

/* HB
======================================= */
header {
  position: fixed;
  z-index: 99;
  top: 0;
  width: 100%;
  background-color: var(--main-color);
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3);
}

/* hb >> click */
.main-nav {
  position: fixed;
  background-color: var(--main-color);
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
  overflow: auto;
}

.main-nav > ul {
  background-color: var(--main-color);
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-nav > ul > li {
  list-style: none;
  padding: 18px 27px;
  border-bottom: 1px solid #f89ab1;
}

.main-nav > ul > li:nth-last-child(1) {
  border-bottom: 0px;
}

.main-nav > ul > li:before {
  content: url(../images/icon_cherry.svg);
  margin-right: 10px;
}

.main-nav > ul > li a {
  color: #fff;
}

.main-nav.active {
  visibility: visible;
  opacity: 1;
  transition: all 0.5s;
}

.main-nav.active > ul > li:before {
  content: url(../images/icon_cherry.svg);
  margin-right: 10px;
  position: absolute;
}

.main-nav.active > ul > li a {
  display: block;
  padding-left: 20px;
}

@media screen and (min-width: 992px) {
  img[alt='LOGO'] {
    display: none;
  }

  header {
    position: sticky;
    margin-bottom: 100px;
    z-index: 1;
    background-color: transparent;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
  }

  .main-header {
    position: relative;
  }

  #index .main-nav {
    width: 95%;
  }

  .main-nav {
    position: relative;
    display: block;
    visibility: visible;
    opacity: 1;
    width: 100%;
    overflow: visible;
  }

  .main-nav > ul {
    display: flex;
    flex-direction: row;
    margin: auto;
    font-size: 1rem;
  }

  .main-nav > ul > li {
    padding: 18px 10px;
    border-bottom: 0px;
  }

  /*緞帶*/

  .main-nav:before,
  .main-nav:after,
  .nav-ribbon-end:before,
  .nav-ribbon-end:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    display: block;
    background-color: #fff;
  }

  .nav-ribbon-end:before,
  .nav-ribbon-end:after {
    background-color: #ccc;
  }

  .main-nav:before,
  .nav-ribbon-end:before {
    top: 3px;
  }

  .main-nav:after,
  .nav-ribbon-end:after {
    bottom: 3px;
  }

  .nav-ribbon-end {
    position: absolute;
    z-index: -1;
    top: -10px;
    display: block;
    width: calc(2.5% + 18px);
    height: 60px;
    background-color: #be536e;
  }

  .nav-ribbon-end div {
    display: inline-block;
    width: 18px;
    position: absolute;
    top: 0;
    right: 0;
    border-top: 10px solid transparent;
    border-right: 18px solid #a73f59;
    box-sizing: border-box;
  }

  .nav-ribbon-end:nth-of-type(2) {
    right: 0;
    transform: scaleX(-1);
  }
}

@media screen and (min-width: 1200px) {
  #index .main-nav > ul > li {
    padding: 18px 27px;
  }

  .main-nav > ul > li {
    padding: 18px 20px;
  }
}

/*下拉選單區*/

.nav_goods {
  position: relative;
}

/* .nav_goods .nav_link:after {
  content: '';
  display: inline-block;
  margin-left: 10px;
  width: 1px;
  height: 1px;
  border-top: 6px solid #fff;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 4px solid transparent;
} */

.sub-menu {
  position: relative;
  margin-top: 18px;
  display: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.sub-menu li a {
  text-align: left;
  display: block;
  padding: 15px;
  color: #fff;
}

.sub-menu li:nth-child(even) {
  border-top: 1px solid #f89ab1;
  border-bottom: 1px solid #f89ab1;
}

.sub-menu.active {
  display: block;
}

@media screen and (min-width: 992px) {
  .nav_goods:hover .sub-menu {
    display: block;
  }

  .sub-menu {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: #ccc;
    margin-top: 0px;
  }

  .sub-menu li a {
    text-align: center;
    background-color: var(--main-color);
  }
}

.reserve-btn {
  background-color: #6fbcaa;
  border-radius: 200px;
  position: fixed;
  color: #fff;
  display: block;
  border: 1px solid #fff;
  right: 0;
  bottom: 0;
  margin: 20px;
  text-align: center;
  z-index: 2;
  transition: 0.5s;
}

.reserve-btn a {
  color: #fff;
  display: block;
  letter-spacing: 3px;
  font-size: 1rem;
  line-height: 1.2em;
  padding: 10px;
  transition: 0.5s;
}

.big {
  animation: big 1.5s infinite alternate;
}

.reserve-btn:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

.reserve-btn a:hover {
  opacity: 1;
}

@keyframes big {
  0% {
    box-shadow: 0px 0px 0px 3px #6fbcaa,
      0px 0px 8px 6px rgba(111, 188, 170, 0.5);
  }

  100% {
    box-shadow: 0px 0px 0px 3px #6fbcaa,
      0px 0px 8px 3px rgba(111, 188, 170, 0.5);
  }
}

@media screen and (min-width: 576px) {
  .reserve-btn {
    margin: 30px;
  }

  .reserve-btn a {
    padding: 16px;
    letter-spacing: 4.4px;
    font-size: 1.1rem;
    line-height: 1.25em;
  }
}

#intro,#about {
  height: 0;
  width: 0;
  position: relative;
  top: -120px;
}