@charset "utf-8";

#wrap .inner03 {
  width: 77.75rem;
  margin: 0 auto;
}
.guideArea {
  width: 100%;
  margin: 14.37rem auto 10rem;
  text-align: center;
}
.guideArea h2 {
  font-size: 3.25rem;
  margin-bottom: 5rem;
}
.guideArea .mainImg_m {
  display: none;
}
.scrollArea {
  margin-bottom: 15rem;
}
.scrollArea .inner03 {
  display: flex;
  align-items: flex-start;
  gap: 6.25rem;
  height: 237.5rem;
}

.fixedLeft {
  position: sticky;
  top: 6.25rem;
  width: 25.75rem;
  overflow: hidden;
}
.fixedLeft li {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 1.25rem;
}
.fixedLeft li.active {
  position: relative;
  display: inline-block;
  color: var(--black);
}
.fixedLeft li.active::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -0.25rem;
  width: 100%;
  height: 2px;
  background-color: var(--black);
}
.scrollBox {
  width: 45.75rem;
  margin-bottom: 15rem;
}
#dayTime {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--light-gray);
}
.scrollBox h3 {
  font-size: 1.68rem;
  color: var(--black);
  margin-bottom: 2.5rem;
}
.scrollBox h4 {
  position: relative;
  font-size: 1.31rem;
  margin: 2.5rem 0.93rem 0.93rem;
}
.scrollBox h4::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.93rem;
  transform: translateY(-50%);
  display: block;
  width: 0.37rem;
  height: 0.37rem;
  background: var(--light-gray);
  border-radius: 50%;
}
#dayTime > ul li {
  position: relative;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--deep-gray);
  padding-left: 1.87rem;
  margin-bottom: 0.93rem;
}
#dayTime > ul li::after {
  content: "-";
  position: absolute;
  top: 0;
  left: 0.93rem;
  display: block;
  width: 0.37rem;
  height: 0.37rem;
}
#reser {
  display: block;
  width: 100%;
  margin-top: 5rem;
}
#reser th {
  width: 13.93rem;
  height: 7.5rem;
  font-size: 1.12rem;
  color: var(--deep-gray);
  background: var(--bg-gray);
  border: 1px solid var(--light-gray);
  border-right: 1px;
  border-top: 1px solid var(--black);
}
#reser th:first-child {
  width: 16.87rem;
  border-left: 0;
}
#reser td {
  height: 4.81rem;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--deep-gray);
  text-align: center;
  border: 1px solid var(--light-gray);
  border-right: 1px;
  padding: 1.5rem 0;
}
#reser td:first-child {
  border-left: 0;
}
#reser .noticeText {
  margin: 0.93rem 0 3.75rem;
  color: var(--deep-gray);
}

.price {
  position: relative;
  width: 100%;
  padding-bottom: 5rem;
  margin-top: 5rem;
  border-bottom: 1px solid var(--light-gray);
}
.price > ul li {
  position: relative;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--deep-gray);
  padding-left: 1.87rem;
  margin-bottom: 0.62rem;
}
.price > ul {
  margin-bottom: 2.5rem;
}
.price > ul li::after {
  content: "-";
  position: absolute;
  top: 0;
  left: 0.93rem;
  display: block;
  width: 0.37rem;
  height: 0.37rem;
}

#notice {
  position: relative;
  width: 100%;
  padding-bottom: 5rem;
  margin-top: 5rem;
  border-bottom: 1px solid var(--light-gray);
}
#notice ul:first-child {
  padding-top: 2.5rem;
}
#notice > ul li {
  position: relative;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--deep-gray);
  padding-left: 1.87rem;
  margin-bottom: 0.93rem;
}
#notice > ul li::after {
  content: "-";
  position: absolute;
  top: 0;
  left: 0.93rem;
  display: block;
  width: 0.37rem;
  height: 0.37rem;
}

#etc {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 5rem;
}
#etc > ul li {
  position: relative;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--deep-gray);
  padding-left: 1.87rem;
  margin-bottom: 0.93rem;
}
#etc > ul li::after {
  content: "-";
  position: absolute;
  top: 0;
  left: 0.93rem;
  display: block;
  width: 0.37rem;
  height: 0.37rem;
}

/* ==========노트북 반응형============= */
@media screen and (max-width: 1023px) {
  #wrap .inner03 {
    width: 58.93rem;
  }
  .guideArea {
    margin: 11.87rem auto 7.5rem;
  }
  .guideArea h2 {
    font-size: 2.75rem;
    margin-bottom: 3.75rem;
  }
  .guideArea figure {
    width: 58.93rem;
    height: 47.5rem;
  }
  .guideArea figure img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .scrollArea {
    margin-bottom: 7.5rem;
  }
  .scrollArea .inner03 {
    gap: 3.75rem;
    height: 247rem;
  }

  .fixedLeft {
    position: sticky;
    top: 6.25rem;
    width: 20.56rem;
    overflow: hidden;
  }
  .fixedLeft li {
    font-size: 1.06rem;
  }

  .scrollBox {
    width: 34.68rem;
  }
  .scrollBox h3 {
    font-size: 1.5rem;
  }
  .scrollBox h4 {
    font-size: 1.25rem;
  }
  #dayTime > ul li {
    font-size: 1.06rem;
  }
  #reser {
    margin-top: 7.5rem;
  }
  #reser th {
    width: 10.56rem;
    font-size: 1.06rem;
  }
  #reser th:first-child {
    width: 12.75rem;
  }
  #reser td {
    height: 4.68rem;
    font-size: 1.06rem;
  }
  
  .price {
    position: relative;
    width: 100%;
    padding-bottom: 5rem;
    margin-top: 5rem;
    border-bottom: 1px solid var(--light-gray);
  }
  .price > ul li {
    font-size: 1.06rem;
    line-height: 1.6;
  }
  .price > ul {
    margin-bottom: 2rem;
  }
  #notice > ul li {
    font-size: 1.06rem;
  }

  #etc > ul li {
    font-size: 1.06rem;
  }
}
/* ==========태블릿 반응형============= */
@media screen and (max-width: 860px) {
  #wrap .inner03 {
    width: 49.56rem;
  }
  .guideArea {
    margin: 11.87rem auto 5.62rem;
  }
  .guideArea h2 {
    font-size: 3.12rem;
    margin-bottom: 1.87rem;
  }
  .guideArea figure {
    width: 49.56rem;
    height: 53.25rem;
  }
  .scrollArea {
    margin-bottom: 7rem;
  }
  .scrollArea .inner03 {
    gap: 0;
    height: 256.25rem;
  }
  .fixedLeft {
    display: none;
  }
  .scrollBox {
    width: 49.56rem;
  }
  .scrollBox h3 {
    font-size: 1.68rem;
  }
  .scrollBox h4 {
    font-size: 1.43rem;
  }
  #dayTime > ul li {
    font-size: 1.25rem;
  }
  #reser {
    margin-top: 7rem;
  }
  #reser th {
    width: 15.12rem;
    font-size: 1.25rem;
  }
  #reser th:first-child {
    width: 18.31rem;
  }
  #reser td {
    font-size: 1.25rem;
  }
  .price > ul li {
    font-size: 1.25rem;
  }
  .price > ul {
    margin-bottom: 0;
  }
  #notice > ul li {
    font-size: 1.25rem;
  }
  #etc > ul li {
    font-size: 1.25rem;
  }
}
/* ==========모바일 반응형============= */
@media screen and (max-width: 540px) {
  #wrap .inner03 {
    width: 30.31rem;
  }
  .guideArea {
    margin: 13.12rem auto 3.75rem;
  }
  .guideArea h2 {
    font-size: 3.5rem;
    margin-bottom: 3.75rem;
  }
  .guideArea .mainImg {
  display: none;
  }
  .guideArea .mainImg_m {
  display: block;
  }
  .guideArea figure {
    width: 30.31rem;
    height: 53.68rem;
    object-fit: cover;
  }
  .guideArea figure img {
    width: 100%;
    height: 100%;
  }
  .scrollArea {
    margin-bottom: 5rem;
  }
  .scrollArea .inner03 {
    height: 312.5rem;
  }
  .scrollBox {
    width: 30.31rem;
  }
  .scrollBox h3 {
    font-size: 2.12rem;
  }
  .scrollBox h4 {
    font-size: 1.56rem;
  }
  #dayTime > ul li {
    font-size: 1.43rem;
  }
  #reser {
    margin-top: 5rem;
  }
  #reser th {
    width: 9.12rem;
    font-size: 1.43rem;
  }
  #reser th:first-child {
    width: 11.06rem;
  }
  #reser td {
    font-size: 1.43rem;
  }
  .price > ul li {
    font-size: 1.43rem;
  }
  #notice > ul li {
    font-size: 1.43rem;
  }
  #etc > ul li {
    font-size: 1.43rem;
  }
}