.pc-box {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

html {
  scroll-behavior: smooth;
  scroll-padding: 20px;
}

body {
  background: #fff;
  background-size: 1200px;
  background-position: top center;
  background-repeat: no-repeat;
}

.Area {
  max-width: 2000px;
}


.WRAPPER {
  background-position: 50% 0px;
  background-repeat: repeat-y;
  max-width: 2000px;
  background: none;
  height: 50px;
}

.WRAPPER05 {
  background: #ffd712;
  position: relative;
  z-index: 5;
}

/* 黏人精+totop */
.sidepanel {
  width: 0;
  position: fixed;
  z-index: 50;
  /*   height        : 250px; */
  top: 0;
  right: 0;
  /* background-color: rgba(0,0,0,0.9); */
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidepanel a {
  padding: 14px 10px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  display: block;
  transition: 0.3s;
  text-wrap: nowrap;
  margin-bottom: 1px;
  background: rgba(0, 0, 0, 0.6);
  font-weight: normal;
  min-height: 48px;
  text-align: center;
}

.sidepanel a.gd-btn:hover {
  color: #fff;
  background: #c6593c;
}

.sidepanel a.gd-btn:hover .toptri {
  border-color: transparent transparent #fff transparent;
}

.sidepanel .closebtn {
  top: 0;
  background: transparent;
  padding: 0;
  position: relative;
}

.openbtn {
  position: fixed;
  top: 70px;
  right: 0;
  font-size: 16px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 6px;
  border: none;
  writing-mode: vertical-lr;
  transition: 0.5s;
  z-index: 50;
  border-radius: 10px 0 0 10px;
}

.openbtn:hover {
  background-color: #444;
}

#myBtn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 50;
  right: 20px;
  bottom: 30px;
  padding: 10px 10px 3px 10px;
  border-radius: 50px;
  font: 12px/30px Verdana;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#myBtn:hover {
  padding-top: 40px;
  background-color: #000;
}

#myBtn::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 18px;
  width: 0;
  height: 0;
  border: 4px solid #000;
  border-color: transparent transparent #fff;
}

.gd-btn.totop-pc {
  border-radius: 0 0 20px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.toptri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
  #myBtn {
    right: 20px;
    bottom: 20px;
  }
}

@media (min-width: 576px) {
  .container-sm {
    max-width: 100%;
  }
}

/* 黏人精+totop */

.swiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
  /* padding-bottom: 45px; */
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -1%;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  /* top: auto; */
  bottom: -5%;
  /* left: -30%; */
}


.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next,
.swiper-button-next,
.swiper-rtl .swiper-button-prev {

  border-radius: 100px;
  width: 30px;
  height: 30px;

}



.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px;
  color: #e171e0;
  font-weight: bold;
}

.hvr-fade:hover,
.hvr-fade:focus,
.hvr-fade:active {
  background: #e85044;
}


.swiper.mySwiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
  padding-bottom: 130px;
}

.mySwiper .swiper-pagination-bullet,
.mySwiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 140px;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background: none;
  border-radius: 0;
}

.mySwiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: none;
}


.swiper.cookPswiper5 {
  overflow: unset;
}


.WRAPPER a {
  display: flex;
  justify-content: center;
}


/* pc版從這邊開始寫code=================== */
.box01-bg{
  background-image: url(kv-bg.jpg?t=1775008629332);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding-top: 11.2%;
}

.box02 .container .box02-bg{
  background-color: #ebced2;
  background-image: url(0_BG.jpg?t=1775008629332);
  padding-inline: 10%;
  padding-block: 5%;
}

.kv-ppbox{
  padding-bottom: 7%;
}
.leaf2 {
    margin-top: -4%;
    margin-bottom: -5%;
    pointer-events: none;
}
.leaf {
    margin-top: -3%;
    margin-bottom: -4%;
    pointer-events: none;
}


/* pc版從這邊結束寫code=================== */


@media screen and (min-width: 2000px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    max-width: 1200px;
  }
}

@media screen and (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    max-width: 1200px;
  }
}

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

  body{
    background-size: 100%;
    background: #fff;
    background-size: contain;
    background-repeat: no-repeat;
  }

}


@media screen and (max-width: 767px) {
  .box01-bg{
    background-image: url(kv-bg-m.jpg?t=1775008629332);
    background-size: cover;
    padding-top: 17.2%;
  }

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

  .WRAPPER {
    background-size: 107%;
    background-position: center;
    height: auto;
  }

  .swiper-pagination:after {
    width: 68%;
  }

  .Area_header_momologo {
    z-index: 45;
    min-width: 390px;
  }

  .swiper.mySwiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    padding-bottom: 30%;
  }

  .box02 .container .box02-bg{
    padding-inline: 5%;
  }


}


.cookPswiper5 .swiper-button-next {
  right: 6%;
}

.cookPswiper5 .swiper-button-prev {
  left: 6%;
}