:root {
  --banner-ratio-default: calc(100vw * (624 / 1024)); /* 預設比例 */
  --banner-ratio-1280: calc(100vw * (576 / 1280));
  --banner-ratio-1920: calc(100vw * (576 / 1920));

  --intro-ratio-1920: calc(100vw * (216 / 1920));
  --intro-ratio-1280: calc(100vw * (216 / 1280));
  --intro-ratio-default: calc(100vw * (216 / 1024));

  --st1-bg01-ratio-768: calc(100vw * (576 / 768));
  --st1-bg01-ratio-1920: calc(100vw * (576 / 1920));
  --st1-bg01-ratio-1280: calc(100vw * (576 / 1280));
  --st1-bg01-ratio-1024: calc(100vw * (576 / 1024));

  --st1-bg01-1-ratio-768: calc(100vw * (368 / 768));
  --st1-bg01-1-ratio-1920: calc(100vw * (368 / 1920));
  --st1-bg01-1-ratio-1280: calc(100vw * (368 / 1280));
  --st1-bg01-1-ratio-1024: calc(100vw * (368 / 1024));

  --st1-bg02-ratio-768: calc(100vw * (272 / 768));
  --st1-bg02-ratio-1920: calc(100vw * (272 / 1920));
  --st1-bg02-ratio-1280: calc(100vw * (272 / 1280));
  --st1-bg02-ratio-1024: calc(100vw * (272 / 1024));

  --st2-bg03-ratio-768: calc(100vw * (352 / 768));
  --st2-bg03-ratio-1920: calc(100vw * (352 / 1920));
  --st2-bg03-ratio-1280: calc(100vw * (352 / 1280));
  --st2-bg03-ratio-1024: calc(100vw * (352 / 1024));

  --st3-bg04-ratio-768: calc(100vw * (256 / 768));
  --st3-bg04-ratio-1920: calc(100vw * (256 / 1920));
  --st3-bg04-ratio-1280: calc(100vw * (256 / 1280));
  --st3-bg04-ratio-1024: calc(100vw * (256 / 1024));

  --st4-bg05-ratio-768: calc(100vw * (368 / 768));
  --st4-bg05-ratio-1920: calc(100vw * (368 / 1920));
  --st4-bg05-ratio-1280: calc(100vw * (368 / 1280));
  --st4-bg05-ratio-1024: calc(100vw * (368 / 1024));

  --st4-bg06-ratio-768: calc(100vw * (288 / 768));
  --st4-bg06-ratio-1920: calc(100vw * (288 / 1920));
  --st4-bg06-ratio-1280: calc(100vw * (288 / 1280));
  --st4-bg06-ratio-1024: calc(100vw * (288 / 1024));

  --qaimg-ratio-768: calc(100vw * (456 / 768));
  --qaimg-ratio-1920: calc(100vw * (456 / 1920));
  --qaimg-ratio-1280: calc(100vw * (456 / 1280));
  --qaimg-ratio-1024: calc(100vw * (456 / 1024));

  --cwave-ratio-1920: calc(100vw * (144 / 1920));
  --cwave-ratio-1280: calc(100vw * (96 / 1280));
  --cwave-ratio-default: calc(100vw * (80 / 1024));
  --cwave-ratio-768: calc(100vw * (48 / 624));

  --qawave-ratio-1920: calc(100vw * (104 / 1920));
  --qawave-ratio-1280: calc(100vw * (72 / 1280));
  --qawave-ratio-default: calc(100vw * (56 / 1024));
  --qawave-ratio-768: calc(100vw * (40 / 624));

  --nailnote-ratio-1920: calc(100vw * ((352 * 0.7) / 1200));
  --nailnote-ratio-1280: calc(100vw * ((352 * 0.7) / 1024));
  --nailnote-ratio-default: calc(100vw * ((352 * 0.7) / 720));
  --nailnote-ratio-768: calc(100vw * ((352 * 0.7) / 512));

  --faqnotice-ratio-1920: calc(100vw * ((200 * 0.7) / 1920));
  --faqnotice-ratio-1280: calc(100vw * ((200 * 0.7) / 1280));
  --faqnotice-ratio-default: calc(100vw * ((200 * 0.7) / 1024));
  --faqnotice-ratio-768: calc(100vw * ((200 * 0.7) / 768));
}

body {
  background-color: #f1f0ede0;
}

/*----------------------------------------------
# Header Section
----------------------------------------------*/

#header {
  height: 100px;
  transition: all 0.5s;
}

#header.header-scrolled {
  height: 80px;
  background: transparent;
}

/* @media (min-width: 768px) { */
  .header-content {
    background-color: #fff;
    height: 100%;
    border-top: 2px solid #dcb067;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    box-shadow: #2a2c392e 0px 0px 10px 1px;
  }
/* } */

.mobile-nav-toggle {
  font-size: 36px;
  color: #debd6c;
}

.navbar a {
  color: #2a2c39;
}
.navbar a:focus,
.navbar .active,
.navbar a:hover {
  color: #dcb067;
}
#header.header-scrolled {
  background: transparent;
}

.navbar li a {
  width: max-content;
}

.h-social-links i {
  font-size: 18px !important;
}

/*----------------------------------------------
# Hero Section
----------------------------------------------*/

#hero .item1,
#hero .item2,
#hero .item3 {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
}

#hero .item1 {
  background-image: url(../img/hero/banner01_624.png);
}
#hero .item2 {
  background-image: url(../img/hero/banner02_624.png);
}
#hero .item3 {
  background-image: url(../img/hero/banner03_624.png);
}

@media (max-width: 768px) {
  #hero .item1,
  #hero .item2,
  #hero .item3 {
    height: 100vw; /* 以正方形顯示 */
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #hero .item1,
  #hero .item2,
  #hero .item3 {
    height: var(--banner-ratio-default);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #hero .item1,
  #hero .item2,
  #hero .item3 {
    height: var(--banner-ratio-1280);
  }
}

@media (min-width: 1440px) {
  #hero .item1,
  #hero .item2,
  #hero .item3 {
    height: var(--banner-ratio-1920);
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #hero .item1 {
    background-image: url(../img/hero/banner01_1024.png);
  }
  #hero .item2 {
    background-image: url(../img/hero/banner02_1024.png);
  }
  #hero .item3 {
    background-image: url(../img/hero/banner03_1024.png);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #hero .item1 {
    background-image: url(../img/hero/banner01_1280.png);
  }
  #hero .item2 {
    background-image: url(../img/hero/banner02_1280.png);
  }
  #hero .item3 {
    background-image: url(../img/hero/banner03_1280.png);
  }
}

@media (min-width: 1440px) {
  #hero .item1 {
    background-image: url(../img/hero/banner01_1920.png);
  }
  #hero .item2 {
    background-image: url(../img/hero/banner02_1920.png);
  }
  #hero .item3 {
    background-image: url(../img/hero/banner03_1920.png);
  }
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
  color: #c00015;
  -webkit-animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
}

/*----------------------------------------------
# Intro & About Section
----------------------------------------------*/

.section-t1 {
  position: relative;
}

.section-t2 {
  position: relative;
}

.section-t3 {
  position: relative;
  background-color: #f7eaca;
}

.section-t4 {
  position: relative;
  background-color: #f7eaca;
}

.st1-bg01 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: var(--st1-bg01-ratio-default);
}

.st1-bg01-1 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: var(--st1-bg01-ratio-default);
}

.st1-bg02 {
  position: absolute;
  bottom: 0;
  left: 3%;
  z-index: 1;
  height: var(--st1-bg02-ratio-default);
}

.st1-bg02-1 {
  position: absolute;
  top: 40%;
  left: -5%;
  z-index: 1;
  height: var(--st1-bg02-ratio-default);
  transform: translateY(-40%);
  -webkit-transform: translateY(-40%);
  -moz-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  -o-transform: translateY(-40%);
}

.st2-bg03 {
  position: absolute;
  bottom: 30px;
  right: 0;
  z-index: 1;
  height: var(--st2-bg03-ratio-default);
}

.st2-bg03-1 {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 1;
  height: var(--st2-bg03-ratio-default);
  /* opacity: 0.5 !important; */
}

.st2-bg03-3 {
  position: absolute;
  bottom: -30px;
  right: 0;
  z-index: 2;
  height: var(--st2-bg03-ratio-default);
  /* opacity: 0.5 !important; */
}

.st3-bg04 {
  position: absolute;
  top: -5rem;
  left: 0;
  z-index: 1;
  height: var(--st3-bg04-ratio-default);
}

.st3-bg04-1 {
  position: absolute;
  top: 40%;
  left: 0;
  z-index: 1;
  height: var(--st3-bg04-ratio-default);
}

.st4-bg05 {
  position: absolute;
  top: 10%;
  right: 0;
  z-index: 1;
  height: var(--st4-bg05-ratio-default);
}

.st4-bg06 {
  position: absolute;
  bottom: 12%;
  left: 0;
  z-index: 1;
  height: var(--st4-bg06-ratio-default);
}

@media (max-width: 768px) {
  .st1-bg01 {
    height: var(--st1-bg01-ratio-768); /* 以正方形顯示 */
    opacity: 0.8;
  }
  .st1-bg01-1 {
    height: var(--st1-bg01-1-ratio-768); /* 以正方形顯示 */
    opacity: 0.8 !important;
    /* z-index: 0; */
  }
  #intro > div {
    position: relative;
    z-index: 2;
  }
  #intro .intro-bg {
    z-index: 0;
  }

  .st1-bg02 {
    height: var(--st1-bg02-ratio-768); /* 以正方形顯示 */
    bottom: 15%;
    opacity: 0.8;
  }

  .st1-bg02-1 {
    height: var(--st1-bg02-ratio-768); /* 以正方形顯示 */
    top: 15%;
    opacity: 1;
    /* z-index: 0; */
  }

  .st2-bg03 {
    height: var(--st2-bg03-ratio-768); /* 以正方形顯示 */
    opacity: 0.8;
    z-index: 2;
  }

  .st2-bg03-1 {
    height: var(--st2-bg03-ratio-768); /* 以正方形顯示 */
    opacity: 1;
    /* z-index: 0; */
  }

  .st2-bg03-3 {
    height: var(--st2-bg03-ratio-768); /* 以正方形顯示 */
    opacity: 1;
    /* z-index: 0; */
  }

  .st3-bg04 {
    height: var(--st3-bg04-ratio-768); /* 以正方形顯示 */
    opacity: 0.8;
    z-index: 2;
  }

  .st3-bg04-1 {
    height: var(--st3-bg04-ratio-768); /* 以正方形顯示 */
    top: 45%;
    opacity: 0.8 !important;
    /* z-index: 0; */
  }

  .st4-bg05 {
    height: var(--st4-bg05-ratio-768); /* 以正方形顯示 */
    opacity: 0.8;
    z-index: 2;
  }

  .st4-bg06 {
    height: var(--st4-bg06-ratio-768); /* 以正方形顯示 */
    opacity: 0.5;
    z-index: 2;
  }

  #course2 > div {
    position: relative;
    z-index: 2;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .st1-bg01 {
    height: var(--st1-bg01-ratio-1280);
  }
  .st1-bg01-1 {
    height: var(--st1-bg01-1-ratio-1280);
    opacity: 0.8 !important;
  }
  #intro > div {
    position: relative;
    z-index: 2;
  }
  #intro .intro-bg {
    z-index: 0;
  }

  .st1-bg02 {
    bottom: 20%;
    height: var(--st1-bg02-ratio-1280);
  }

  .st1-bg02-1 {
    top: 35%;
    height: var(--st1-bg02-ratio-1280);
    /* opacity: 0.5 !important; */
  }

  .st2-bg03 {
    height: var(--st2-bg03-ratio-1280);
  }

  .st2-bg03-1 {
    height: var(--st2-bg03-ratio-1280);
    /* opacity: 0.5 !important; */
  }

  .st2-bg03-3 {
    height: var(--st2-bg03-ratio-1280);
    /* opacity: 0.5 !important; */
  }

  .st3-bg04 {
    height: var(--st3-bg04-ratio-1280);
  }

  .st3-bg04-1 {
    height: var(--st3-bg04-ratio-1280);
    opacity: 0.8 !important;
  }

  .st4-bg05 {
    height: var(--st4-bg05-ratio-1280);
  }

  .st4-bg06 {
    height: var(--st4-bg06-ratio-1280);
  }

  #course2 > div {
    position: relative;
    z-index: 2;
  }
}

/*----------------------------------------------
# Intro Section
----------------------------------------------*/

#intro {
  position: relative;
}

#intro .intro-bg {
  position: absolute;
  bottom: 0;
  background-image: url(../img/intro/intro_bg624.jpg);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 100vw;
}

@media (max-width: 768px) {
  #intro .txt-content,
  #intro .txt-content p {
    width: max-content;
  }
  #intro .intro-bg {
    background-size: cover;
    height: 100vw; /* 以正方形顯示 */
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #intro .txt-content,
  #intro .txt-content p {
    width: max-content;
  }
  #intro .intro-bg {
    height: var(--intro-ratio-default);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #intro .intro-bg {
    height: var(--intro-ratio-1280);
  }
}

@media (min-width: 1440px) {
  #intro .intro-bg {
    height: var(--intro-ratio-1920);
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #intro .intro-bg {
    background-image: url(../img/intro/intro_bg1024.jpg);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #intro .intro-bg {
    background-image: url(../img/intro/intro_bg1280.jpg);
  }
}

@media (min-width: 1440px) {
  #intro .intro-bg {
    background-image: url(../img/intro/intro_bg1920.jpg);
  }
}

/*----------------------------------------------
  # About Section
  ----------------------------------------------*/

#about {
  position: relative;
  background-color: #f7eaca;
}

#about2 {
  position: relative;
  background-color: #f7eaca;
}

.about-title {
  font-size: 2.7rem !important;
  color: #dcb067;
}

.redound-box {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  background-color: #f1f0ede0;
}

.redound-title {
  color: #e47e3f;
  font-size: 18px;
  margin-bottom: 0;
}

.redound-txt {
  color: #666666;
}

.btn-infos {
  min-width: 200px;
  background-color: #c00015;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 30px;
}
.btn-infos:hover,
.btn-infos:focus {
  background-color: transparent;
  color: #c00015;
  border: 2px solid #c00015;
  font-weight: 600;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 30px;
}

/*----------------------------------------------
  #  wave
  ----------------------------------------------*/

#course,
#course2 {
  position: relative;
  background-color: #f1f0ede0;
}

.course-section {
  /* padding-top: 100px; */
  margin-top: calc(100vw * (48 / 624));
  background-color: #cc9857;
}

.course-section2 {
  /* background: linear-gradient(to bottom, #cc9857 0%, #f1f0ede0 100%); */
  background: linear-gradient(#cc9857 0%, #b57f3d 50%, #f1f0ede0 50%);
  /* height: 500px; */
}

.course-txt {
  color: #f1f0ede0;
}

.course-txt2 {
  color: #2e2e2ee0;
  font-weight: bold;
}

#course .c_wave {
  position: absolute;
  top: 0;
  background-image: url(../img/course/c_wave624.jpg);
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100vw;
}

.course-title {
  font-size: 3rem !important;
  color: #f7eaca;
}
.course-subtitle {
  font-size: 1.7rem;
  color: #f1f0ed;
}

.course-img {
  border: 1.5px solid #debd6c;
  border-radius: 30px;
  box-shadow: #debd6c 0px 0px 10px 1px;
}

@media (max-width: 768px) {
  #course .c_wave {
    position: relative;
    height: calc(100vw * (48 / 624)); /* 以正方形顯示 */
  }
  #course {
    padding-top: 0;
    margin-top: 0;
  }
  .course-section {
    padding-top: var(--cwave-ratio-768);
    margin-top: 0;
  }
  .course-subtitle {
    font-size: 1.5rem;
    color: #f1f0ed;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #course .c_wave {
    position: relative;
    height: var(--cwave-ratio-default);
  }
  #course {
    padding-top: 0;
    margin-top: 0;
  }
  .course-section {
    padding-top: var(--cwave-ratio-default);
    margin-top: 0;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #course .c_wave {
    height: var(--cwave-ratio-1280);
  }
  .course-section {
    padding-top: calc(100vw * (96 / 1280) / 2.5);
    margin-top: calc(100vw * (96 / 1280) / 2.5);
  }
}

@media (min-width: 1440px) {
  #course .c_wave {
    height: var(--cwave-ratio-1920);
  }
  .course-section {
    padding-top: calc(100vw * (144 / 1920) / 2);
    margin-top: calc(100vw * (144 / 1920) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #course .c_wave {
    background-image: url(../img/course/c_wave1024.jpg);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #course .c_wave {
    background-image: url(../img/course/c_wave1280.jpg);
  }
}

@media (min-width: 1440px) {
  #course .c_wave {
    background-image: url(../img/course/c_wave1920.jpg);
  }
}

.btn-infos2 {
  min-width: 180px;
  width: max-content;
  background-color: transparent;
  color: #f7eaca;
  border: 2px solid #f7eaca;
  font-weight: 600;
  font-size: 18px;
  padding: 12px 15px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
/* .btn-infos2:hover,
  .btn-infos2:focus {
    background-color: transparent;
    color: #f7eaca;
    border: 2px solid #f7eaca;
    font-weight: 600;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 30px;
  } */

.course-item-01 {
  position: relative;
  background-image: url(../img/course/face_pic792.jpg);
  background-position: -50% center;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 256px;
  border: 1px solid #debd6c;
  box-shadow: #debd6c 0px 0px 5px 1px;
}

.item-bg-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #cc9857 40%, #f7eaca00 75%);
}

.course-item-01 .item-title h3 {
  font-size: 3rem;
  color: #f7eacae0;
}

.course-item-01 .item-title p {
  font-size: 1.2rem;
  /* color: #f7eaca; */
  color: #eee;
}

.course-item-02 {
  position: relative;
  background-image: url(../img/course/body_pic792.jpg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 256px;
  border: 1px solid #debd6c;
  box-shadow: #debd6c 0px 0px 5px 1px;
}

.item-bg-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #cc9857 35%, #f7eaca00 75%);
}

.course-item-02 .item-title h3 {
  font-size: 3rem;
  color: #f7eacae0;
}

.course-item-02 .item-title p {
  font-size: 1.2rem;
  /* color: #f7eaca; */
  color: #eee;
}

.course-item-03 {
  position: relative;
  background-image: url(../img/course/nail_pic792.jpg);
  background-position: -50% center;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 256px;
  border: 1px solid #debd6c;
  box-shadow: #debd6c 0px 0px 5px 1px;
}

.item-bg-3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #cc9857 40%, #f7eaca00 75%);
}

.course-item-03 .item-title h3 {
  font-size: 3rem;
  color: #f7eacae0;
}

.course-item-03 .item-title p {
  font-size: 1.2rem;
  /* color: #f7eaca; */
  color: #eee;
}

@media (max-width: 992px) {
  .course-item-01 {
    position: relative;
    background-image: url(../img/course/face_pic624.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 256px;
    border: 1px solid #debd6c;
    box-shadow: #debd6c 0px 0px 5px 1px;
  }
  .item-bg-1 {
    background: linear-gradient(to top, #cc9857 20%, #f7eaca00 65%);
  }

  .course-item-02 {
    position: relative;
    background-image: url(../img/course/body_pic624.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 256px;
    border: 1px solid #debd6c;
    box-shadow: #debd6c 0px 0px 5px 1px;
  }
  .item-bg-2 {
    background: linear-gradient(to top, #cc9857 20%, #f7eaca00 65%);
  }

  .course-item-03 {
    position: relative;
    background-image: url(../img/course/nail_pic624.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 256px;
    border: 1px solid #debd6c;
    box-shadow: #debd6c 0px 0px 5px 1px;
  }
  .item-bg-3 {
    background: linear-gradient(to top, #cc9857 20%, #f7eaca00 65%);
  }
}

/*----------------------------------------------
#  qa_wave
----------------------------------------------*/

#qa {
  position: relative;
  background-color: #ce3b39;
  overflow-x: hidden;
}

#qa .qa_wave {
  background-image: url(../img/qa/qa_wave624.jpg);
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100vw;
  height: var(--qawave-ratio-default);
}

.qa-img-content {
  position: relative;
}

/* .qa-img-content img {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: auto;
  height: 180%;
} */

.qa-img-absolute {
  position: absolute;
  top: 2rem;
  right: 20rem;
  z-index: 3;
  width: auto;
  height: calc(100vw * (512 / 1920));
}

.qa-img-sub {
  position: absolute;
  top: -5rem;
  left: 10rem;
  z-index: 3;
  width: auto;
  height: calc(100vw * (512 / 1920));
}

@media (max-width: 767px) {
  #qa .qa_wave {
    position: relative;
    height: calc(100vw * (48 / 624)); /* 以正方形顯示 */
  }
  .qa-img-absolute {
    display: none;
  }
  .qa-img-sub {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #qa .qa_wave {
    position: relative;
    height: var(--qawave-ratio-default);
  }
  .qa-img-absolute {
    height: calc(100vw * (428 / 1440));
    /* top: 10%; */
    right: 6rem;
  }
  .qa-img-sub {
    height: calc(100vw * (428 / 1440));
    top: -1.7rem;
    left: 2rem;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #qa .qa_wave {
    height: var(--qawave-ratio-1280);
  }
  .qa-img-absolute {
    height: calc(100vw * (428 / 1920));
    right: 15rem;
  }
  .qa-img-sub {
    height: calc(100vw * (512 / 1920));
    left: 7rem;
  }
}

@media (min-width: 1440px) {
  #qa .qa_wave {
    height: var(--qawave-ratio-1920);
  }
  .qa-img-absolute {
    height: calc(100vw * (428 / 2056));
    right: 20rem;
  }
  .qa-img-sub {
    height: calc(100vw * (512 / 2056));
    left: 10rem;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #qa .qa_wave {
    background-image: url(../img/qa/qa_wave1024.jpg);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  #qa .qa_wave {
    background-image: url(../img/qa/qa_wave1280.jpg);
  }
}

@media (min-width: 1440px) {
  #qa .qa_wave {
    background-image: url(../img/qa/qa_wave1920.jpg);
  }
}

/*----------------------------------------------
#  footer
----------------------------------------------*/

#footer {
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(to bottom, #c68d48e2 0%, #b07936 100%);
}

#footer .footer_wave {
  background: linear-gradient(to left, #be8c4f 50%, #e2cd8ee0 100%);
  width: 100vw;
  height: 10px;
}

.footer-contact p {
  color: #fff !important;
  font-size: 15.5px !important;
  font-style: normal !important;
  margin-bottom: 0 !important;
  line-height: 1.8em !important;
  text-decoration: none !important;
}

.footer-contact p a {
  color: #fff !important;
  text-decoration: none !important;
}

.footer-line {
  width: 1px;
  min-height: 90px;
  border-right: 1px dashed #f7eaca;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.footer-text {
  font-size: 14px !important;
  background: linear-gradient(to right, #9d6c30 20%, #9d6c30 50%);
}

.footer-text a {
  color: #444444 !important;
}

.footer-content {
  padding-top: 50px !important;
  padding-bottom: 30px !important;
}

@media (max-width: 768px) {
  .footer-line {
    width: 60%;
    min-height: 1px;
    border-right: unset;
    border-top: 1px dashed #f7eaca;
  }
  .footer-content {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer-text {
    margin-bottom: 50px;
  }
}

.left-line-img {
  position: fixed;
  z-index: 9;
  width: 4rem;
  top: 50%;
  left: 2%;
  transform: translate(-5%, -50%);
  -webkit-transform: translate(-5%, -50%);
  -moz-transform: translate(-5%, -50%);
  -ms-transform: translate(-5%, -50%);
  -o-transform: translate(-5%, -50%);
}

.content-title {
  width: max-content;
}

#effect {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

#effect2 {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

.effect-content-title {
  border-left: 5px solid #c00015;
  color: #c00015;
  padding-left: 20px;
}

.courses-content-title {
  border-left: 5px solid #c00015;
  color: #c00015;
  padding-left: 20px;
}

.rounded_30 {
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.rounded_20 {
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

.effect-content-2 {
  margin-top: 50px;
}

.effect-content-2 h5 {
  display: flex;
  align-items: center;
  text-align: center;
  color: #c00015;
}

.effect-content-2 h5::before,
.effect-content-2 h5::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #c00015;
  margin: 0 10px;
}

.effect-box {
  background-color: #fff6e063;
  width: 100%;
}

.courses-box {
  background-color: #fff6e063;
  width: 100%;
}

.text-red {
  color: #c00015;
}

.pcst {
  width: max-content;
  background-color: #ce3b39;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}

#courses {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

#courses2 {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

.border-box-1_5 {
  border: 1.5px solid #dcb067;
}

.border-box-1 {
  border: 1px solid #dcb067;
}

.courses-notice-box {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.line-red {
  width: 100%;
  height: 1px;
  background-color: #c00015;
  margin-top: 20px;
  margin-bottom: 20px;
}

#face {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

#face2 {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

.face-notice-box {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.face-content-title {
  border-left: 5px solid #c00015;
  color: #c00015;
  padding-left: 20px;
}

#body {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

#body2 {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

.body-notice-box {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.body-content-title {
  border-left: 5px solid #c00015;
  color: #c00015;
  padding-left: 20px;
}

.number-box-25 {
  display: inline;
  background-color: #c00015;
  color: #fff;
  width: 25px !important;
  height: 25px !important;
  text-align: center;
  border-radius: 50%;
  line-height: 25px !important;
}

#nail {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

#nail2 {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

.nail-notice-box {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.nail-content-title {
  border-left: 5px solid #c00015;
  color: #c00015;
  padding-left: 20px;
}

.sub-title-line {
  display: flex;
  align-items: center;
  text-align: center;
  color: #c00015;
}

.sub-title-line::before,
.sub-title-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #c00015;
  margin: 0 10px;
}

.nail-note-box {
  background-image: linear-gradient(
      to top,
      #dcb067 10%,
      #f1f0eda6 35%,
      transparent 75%
    ),
    url(../img/inner-page/05/05pic5_512.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: var(--nailnote-ratio-default);
}

.nail-note-box p {
  color: #f1f0ed;
  font-size: 1.2rem;
}

@media (max-width: 767px) {
  .nail-note-box {
    position: relative;
    height: 100vw;
  }
  .nail-note-box p {
    color: #f1f0ed;
    font-size: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .nail-note-box {
    position: relative;
    height: var(--nailnote-ratio-default);
  }

  .nail-note-box p {
    color: #f1f0ed;
    font-size: 1.1rem;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .nail-note-box {
    height: var(--nailnote-ratio-1280);
  }
}

@media (min-width: 1440px) {
  .nail-note-box {
    height: var(--nailnote-ratio-1920);
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .nail-note-box {
    background-image: linear-gradient(
        to top,
        #dcb067 10%,
        #f1f0eda6 35%,
        transparent 75%
      ),
      url(../img/inner-page/05/05pic5_720.jpg);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .nail-note-box {
    background-image: linear-gradient(
        to top,
        #dcb067 10%,
        #f1f0eda6 35%,
        transparent 75%
      ),
      url(../img/inner-page/05/05pic5_1024.jpg);
  }
}

@media (min-width: 1440px) {
  .nail-note-box {
    background-image: linear-gradient(
        to top,
        #dcb067 10%,
        #f1f0eda6 35%,
        transparent 75%
      ),
      url(../img/inner-page/05/05pic5_1200.jpg);
  }
}

#faq {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

#faq2 {
  position: relative;
  background-color: #f1f0ede0;
  color: #666666;
}

.faq-notice-box {
  background-image: url(../img/inner-page/06/06banner_1200.jpg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 200px;
}

.faq-notice-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to left, #cc9857 30%, #f7eaca00 65%);
}

@media (max-width: 768px) {
  .faq-notice-box {
    background-image: url(../img/inner-page/06/06banner_512.jpg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  }
  .faq-notice-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 200px;
    z-index: 1;
    background: linear-gradient(to top, #cc9857 20%, #f7eaca00 65%);
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .faq-notice-box {
    position: relative;
    height: var(--faqnotice-ratio-default);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .faq-notice-box {
    height: var(--faqnotice-ratio-1280);
  }
}

@media (min-width: 1440px) {
  .faq-notice-box {
    height: var(--faqnotice-ratio-1920);
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .faq-notice-box {
    background-image: url(../img/inner-page/06/06banner_720.jpg);
    background-size: cover;
    background-position: left center;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .faq-notice-box {
    background-image: url(../img/inner-page/06/06banner_1024.jpg);
    background-size: cover;
  }
}

@media (min-width: 1440px) {
  .faq-notice-box {
    background-image: url(../img/inner-page/06/06banner_1200.jpg);
    background-size: cover;
  }
}

.faq-item-box {
  padding: 30px 3rem;
  border: 1px solid #cc9857;
}

.faq-item-q {
  cursor: pointer;
}

.faq-item-q h5 {
  font-size: 1.2rem;
  color: #cc9857;
}
.faq-item-q span {
  font-size: 1.2rem;
  color: #cc9857;
  font-weight: 700;
}

.faq-item-a {
  display: none;
}

@media (max-width: 768px) {
  .faq-item-box {
    padding: 20px 1rem;
  }
}

.social-links-btn-mobile {
  width: 100vw;
  height: 50px;
  z-index: 9;
}

.s-line-btn {
  background-color: #25c700;
  height: 100%;
  border-right: 0.5px solid #fff;
  /* border-left: 0.5px solid #fff; */
}

.s-phone-btn {
  background-color: #b57f3d;
  height: 100%;
  /* border-right: 0.5px solid #fff; */
  border-left: 0.5px solid #fff;
}

.social-links-btn-mobile a {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 65px;
  }
}