body {
  background-color: #FCF8F4;
}


/* banner-start */
#index-banner {
  position: relative;
  z-index: 9;
}

.bannercontainer {
  max-width: 1598px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

.bannercontainer .t-btn {
  display: flex;
  position: absolute;
  bottom: 7%;
  left: 9%;
  width: 40%;
  column-gap: 1em;
}

.bannercontainer div button {
  width: 100%;
}

.bannercontainer div a:last-child button {
  width: 100%;
}

.bannercontainer div a:last-child button .button__bg {
  background-color: #ffffff;
}

.bannercontainer div a:last-child button .button__bg::before,
.bannercontainer div a:last-child button .button__bg::after {
  background: #C54C44;
}
.bannercontainer div a button span {
  padding: 1rem 2rem;
}
.bannercontainer div a:last-child button span {
  color: #C54C44;
}

.bannercontainer div a:last-child:hover button span{
  color: #ffffff;
}

.bannercontainer div button a {
  text-transform: none;
}

.bannercontainer .title {
  position: absolute;
  top: 5%;
  left: 5%;
}

.bannercontainer .title h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 40px;
}

.bannercontainer .title h1 span {
  color: #C54C44;
}

.bannercontainer .title::after {
  width: 10%;
  height: 3px;
  background-color: #C54C44;
  content: '';
  position: absolute;
  top: 10%;
  left: 3%;
}

.bannercontainer .title ul {
  display: flex;
  column-gap: 1em;
}

.bannercontainer .title ul li {
  border-radius: 50px;
}

.bannercontainer .title ul li a {
  font-size: 26px;
  line-height: 30px;
  color: #333333;
}


/* banner-end */

#index-video iframe{
    width: 100% !important; height: 560px;
}

/* 關於我們-start */
#aboutus {
  padding: 90px 0 50px 0;
}

.aboutcontainer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.about-left h2 {
  font-size: 32px;
  color: #7B2B26;
  line-height: 45px;
  text-transform: uppercase;
}

.about-left h3 {
  font-size: 32px;
  color: #333333;
  line-height: 45px;
  font-weight: bold;
}

.about-left p {
  font-size: 17px;
  color: #333333;
  line-height: 36px;
  margin-top: 70px;
  margin-bottom: 20px;
}

/* 關於我們-end */

/* video-start */
#index-video {
  padding: 50px 0;
}

.videocontainer {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.videocontainer video {
  border-radius: 50px;
  height: auto;
  width: 100%;
}

.videocontainer .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: url('../pics/play-btn.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

/* video-end */


/* 美容療程-start */
#index-beauty {
  padding: 50px 0;
  background-color: #ffffff;
  border-radius: 50px 50px 0 0;
}

.beautycontainer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.beautycontainer h2 {
  font-size: 32px;
  color: #7B2B26;
  line-height: 45px;
  text-transform: uppercase;
  text-align: center;
}

.beautycontainer h3 {
  font-size: 32px;
  color: #333333;
  line-height: 45px;
  text-align: center;
  font-weight: bold;
}
.beautycontainer .beauty-row{
  margin-top: 30px;
}
.beautycontainer .beautyswiper .swiper-slide{
  width: 31%;
}

.beautycontainer .beautyswiper .swiper-slide a {
  display: block;
  overflow: hidden;
  border-radius: 25px;
}

.beautycontainer .beautyswiper .swiper-slide a img {
  transition: transform 0.3s ease-in-out;
  object-fit: cover;
}

.beautycontainer .beautyswiper .swiper-slide a img:hover {
  transform: scale(1.1);
}

.beautycontainer .beautyswiper .swiper-slide div {
  position: absolute;
  bottom: 3%;
  left: 37%;
  font-size: 24px;
  color: #333333;
  line-height: 33px;
  font-weight: bold;
}

/* 美容療程-end */

/* 聯絡我們 */
#index-contact {
  background-color: #ffffff !important;
}


/* 首頁彈窗-start */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#myModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  /* padding: 20px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
  border-radius: 25px;
}

#closeModal {
  width: 55px;
  position: absolute;
  top: 13px;
  right: 11px;
  border: none;
  background: none;
}

.modalcontainer .m-btn {
  position: absolute;
  bottom: 10%;
  left: 6%;
  width: 40%;
  height: 20%;
  display: flex;
  align-items: center;
  column-gap: 1em;
  background-color: #fcf8f4;
}

.modalcontainer .m-btn button {
  width: 100%;
}
.modalcontainer .m-btn a button span{
  padding: 8px 16px;
}
.modalcontainer .m-btn a:first-child button span {
  font-size: 16px;
  padding: 5px 16px;
  letter-spacing: 3px;
}

.modalcontainer .m-btn a:last-child button span {
  font-size: 13px;
}

.modalcontainer .m-btn a:last-child button span{
  color: #C54C44;
}

.modalcontainer .m-btn a:last-child button .button__bg {
  background: #ffffff;
}

.modalcontainer .m-btn a:last-child button .button__bg::before,
.modalcontainer .m-btn a:last-child button .button__bg::after {
  background: #C54C44;
}

.modalcontainer .m-btn a:last-child:hover button span {
  color: #ffffff;
}

.modalcontainer .tit {
  position: absolute;
  bottom: 22%;
  left: 7%;
  color: #C54C44;
  font-size: 14px;
  font-weight: bold;
  z-index: 1;
}

/* 首頁彈窗-end */


/* 手機端 */
@media screen and (max-width:768px) {

  #index-video iframe{
    height: 450px;
    }  

  /* banner */
  .bannercontainer {
    padding: 0;
  }

  .bannercontainer .t-btn {
    display: none;
  }

  /* 彈框 */
  #myModal {
    width: 90%;
  }

  .modalcontainer .m-btn {
    bottom: 11%;
    left: 5%;
    width: 85%;
    background-color: transparent;
  }
  .modalcontainer .m-btn a:first-child button span {
    padding: 5px 22px;
    letter-spacing: 3px;
  }

  .modalcontainer .m-btn a:first-child button span{
    line-height: 23px;
  }

  .modalcontainer .m-btn a:last-child button span{
    line-height: 19px;
  }

  .modalcontainer .tit {
    bottom: 24%;
    left: 10%;
    font-size: 11px;
  }
  
  #closeModal{
    width: 45px;
    top: 5px;
    right: 0;
  }

  /* 關於我們 */
  #aboutus {
    padding: 20px 0 20px 0;
  }

  .about-left h2 {
    text-align: center;
    font-size: 23px;
    line-height: 30px;
  }

  .about-left h3 {
    text-align: center;
    font-size: 25px;
    line-height: 30px;
    margin-top: 0;
  }

  .about-left p {
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px;
    margin-bottom: 0;
  }

  .about-left>div {
    text-align: center;
  }

  .about-left>div>button>span {
    font-size: 14px;
  }

  .about-left {
    margin-bottom: 40px;
  }

  .about-right {
    width: 85%;
    margin: 0 auto;
  }

  /* 視頻 */
  #index-video {
    padding: 30px 0 40xp 0;
  }

  .videocontainer {
    padding: 0;
  }

  .videocontainer video {
    border-radius: 0;
  }

  .videocontainer .play-button {
    width: 60px;
    height: 60px;
  }

  /* 美容療程 */
  #index-beauty {
    padding: 20px 0;
    border-radius: 20px 20px 0 0;
  }
  .beautycontainer .beautyswiper .swiper-slide a {
    border-radius: 10px;
  }

  .beautycontainer h2 {
    font-size: 23px;
    line-height: 30px;
  }

  .beautycontainer h3 {
    font-size: 25px;
    line-height: 30px;
    margin-top: 10px;
  }


  .beautycontainer .beautyswiper .swiper-slide a {
    border-radius: 10px;
  }

  .beautycontainer .beautyswiper .swiper-slide div {
    bottom: 1%;
    left: 32%;
    font-size: 12px;
    line-height: 26px;
  }

}


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

  #index-video iframe{
    height: 300px;
    }  
    
}