@charset "utf-8";
.note-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.note-list>li {
  position: relative;
  padding: 2rem 3rem 2rem 6.4rem;
  border-radius: 1rem;
  background: #F5F5F5;
}

.note-list>li::before {
  content: '';
  position: absolute;
  left: 3rem;
  top: calc(50% - 1.2rem);
  width: 2.4rem;
  height: 2.4rem;
  background: #3DADED;
  mask-image: url(../img/contents/note-ic.svg);
  mask-repeat: no-repeat;
  mask-size: 100%;
}

.note-list>li:nth-child(even)::before {
  background: #72C826;
}

.ic-list {
  display: flex;
  gap: 0.8rem;
}

.ic-list>li {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: 5rem 3rem;
  font-weight: 600;
  border-radius: 1rem;
  border: 1px solid #DDD;
}

.ic-list>li::before {
  content: '';
  width: var(--w);
  height: var(--w);
  --w-: calc(var(--w) * -1);
  background: var(--bg) no-repeat 0 0 / var(--size);
}

.ic-list>li:nth-child(2)::before {
  background-position: var(--w-) 0;
}

.ic-list>li:nth-child(3)::before {
  background-position: calc(var(--w-) * 2) 0;
}

.ic-list>li:nth-child(4)::before {
  background-position: calc(var(--w-) * 3) 0;
}

.ic-list>li:nth-child(5)::before {
  background-position: calc(var(--w-) * 4) 0;
}

@media (max-width: 767px) {
  .ic-list {
    flex-wrap: wrap;
  }
}

@media (max-width: 440px) {
  .ic-list {
    flex-direction: column;
  }
}

.greeting {
  padding-top: 3.8rem;
  background: url(../img/contents/greeting-bg.png) no-repeat right top / 42.4rem;
}

.greeting .top-con {
  position: relative;
}

.greeting .top-con .con {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42rem;
  height: 32rem;
  z-index: 1;
}

.greeting .top-con .con01 {
  left: 0;
  top: 6.7rem;
  border-radius: 50rem 3rem 50rem 50rem;
  background: linear-gradient(101deg, rgba(127, 199, 66, 0.9) 10.01%, rgba(1, 154, 210, 0.9) 93.43%);
}

.greeting .top-con .con02 {
  right: 0;
  bottom: -9.7rem;
  border-radius: 3rem 50rem 50rem 50rem;
  background: linear-gradient(101deg, rgba(1, 154, 210, 0.9) 10.01%, rgba(104, 93, 204, 0.9) 93.43%);
}

.greeting .top-con .con dl {
  position: relative;
  text-align: center;
  width: 27rem;
  color: #fff;
  font-weight: 500;
  z-index: 1;
}

.greeting .top-con .con dl dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.greeting .top-con .con dl dt::before {
  content: '';
  width: 9.6rem;
  height: 9.6rem;
  background: url(../img/contents/greeting-ic.svg) no-repeat 0 0 / 19.2rem;
}

.greeting .top-con .con02 dl dt::before {
  background-position: -9.6rem 0;
}

.greeting .top-con .photo-box {
  position: relative;
  margin: 0 auto;
  width: 60rem;
  margin-bottom: 6.8rem;
}

.greeting .top-con .photo-box .txt {
  position: absolute;
  left: calc(-25% - 3.3rem);
  bottom: 0;
  display: inline-flex;
  flex-direction: column;
  text-align: right;
  font-family: var(--ft-family-paper);
  font-size: 2.3rem;
  font-weight: 300;
  text-transform: uppercase;
}

.greeting .top-con .photo-box .txt span:nth-child(2) {
  font-weight: 500;
}

.greeting .top-con .photo-box .txt span:nth-child(3) {
  font-weight: 700;
}

.greeting .top-con .photo-box .photo {
  position: relative;
  width: 100%;
  height: 59.9rem;
  border-radius: 60rem 60rem 2.5rem 2.5rem;
  border: 1rem solid #FFF;
  box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.greeting .btm-con {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding-top: 3.5rem;
  padding-left: 2.4rem;
}

.greeting .btm-con::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 40rem;
  height: 0.2rem;
  background: var(--ft-c-basic);
}

.greeting .btm-con .tit {
  font-family: var(--ft-family-gana);
  font-size: 3.5rem;
}

.greeting .btm-con .con {
  font-size: 1.8rem;
  font-weight: 500;
}

.greeting .btm-con .name {
  font-size: 1.8rem;
  font-weight: 500;
}

.greeting .btm-con .name span {
  padding-left: 1rem;
  font-size: 2.3rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .greeting .top-con {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .greeting .top-con .con {
    position: static;
    width: auto;
    height: auto;
    padding: 2rem 1rem;
    margin-bottom: 4rem;
  }

  .greeting .top-con .con01 {
    grid-row: 2;
    grid-column: 1;
    border-radius: 2rem;
  }

  .greeting .top-con .con02 {
    grid-row: 2;
    grid-column: 2;
    border-radius: 2rem;
  }

  .greeting .top-con .con dl {
    width: auto;
  }

  .greeting .top-con .photo-box {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 10rem;
    width: 100%;
    grid-row: 1;
    grid-column: span 2;
  }

  .greeting .top-con .photo-box .photo {
    height: auto;
  }

  .greeting .top-con .photo-box .txt {
    left: 0;
    right: 0;
    bottom: -6rem;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: center;
  }

  .greeting .btm-con::before {
    right: 0;
    margin: 0 auto;
    width: 50%;
  }
}

.location .map-box {
  margin-bottom: 2.2rem;
  width: 100%;
  height: 44.8rem;
  border-radius: 2rem;
  background: #FAF7EF;
  overflow: hidden;
}

.location .traffic {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
}

.location .traffic dl {
  display: flex;
  gap: 4rem;
  padding: 0.5rem 0;
  border-top: 1px dashed #DDD;
}

.location .traffic dl:nth-child(1) {
  border-top: none;
}

.location .traffic dl dt {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  padding-top: 2.9rem;
  padding-bottom: 2rem;
  width: 25rem;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 1rem;
  background: #F5F5F5;
}

.location .traffic dl dt::before {
  content: '';
  width: 6.4rem;
  height: 6.4rem;
  background: url(../img/contents/location-ic.svg) no-repeat 0 0 / 32rem;
}

.location .traffic dl dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.9rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.location .traffic dl dd .bl03 {
  margin-left: 0;
  margin-top: 0;
}

.location .traffic dl dd a {
  --krds-icon--size-large: 2rem;
  --krds-button--gap-large: 0.5rem;
  --krds-button--size-height-large: auto;
  --krds-button--padding-x-large: 2rem;
  --krds-button--padding-y-large: 0.4rem;
  --krds-button--radius-large: 10rem;
  --krds-button--pc-font-size-large: 1.6rem;
  --krds-button--font-weight-large: 500;
}

.location .bus dl:nth-child(1) dd a {
  --krds-light-color-button-primary-fill:#DB3D40;
  --krds-button--color-primary-fill-hover: #DB3D40;
  --krds-button--color-primary-fill-pressed: #DB3D40;
}

.location .bus dl:nth-child(2) dt::before {
  background-position: -6.4rem 0;
}

.location .bus dl:nth-child(2) dd a {
  --krds-light-color-button-primary-fill: #51A10C;
  --krds-button--color-primary-fill-hover: #51A10C;
  --krds-button--color-primary-fill-pressed: #51A10C;
}

.location .bus dl:nth-child(3) dt::before {
  background-position: calc(-6.4rem * 2) 0;
}

.location .bus dl:nth-child(3) dd a {
  --krds-light-color-button-primary-fill: #019AD2;
  --krds-button--color-primary-fill-hover: #019AD2;
  --krds-button--color-primary-fill-pressed: #019AD2;
}

.location .car dl:nth-child(1) dt::before {
  background-position: calc(-6.4rem * 3) 0;
}

.location .car dl:nth-child(2) dt::before {
  background-position: calc(-6.4rem * 4) 0;
}

@media (max-width: 767px) {
  .location .traffic dl {
    flex-direction: column;
    gap: 0.5rem;
  }

  .location .traffic dl dt {
    width: 100%;
  }
}

.tourinfo.fee {
  display: flex;
  gap: 0.8rem;
}

.tourinfo.fee>li {
  position: relative;
  flex: 1 1 25%;
  text-align: center;
  padding: 2.5rem 3rem;
  border-radius: 50rem;
  background: #F5F5F5;
}

.tourinfo.fee>li::before {
  content: '';
  position: absolute;
  right: 0;
  top: -2.1rem;
  width: 4.5rem;
  height: 4.5rem;
  background: url(../img/contents/tourinfo-fee.svg) no-repeat 0 0 / 100%;
}

@media (max-width: 1023px) {
  .tourinfo.fee {
    flex-wrap: wrap;
  }

  .tourinfo.fee>li {
    flex-basis: calc(50% - 0.8rem);
  }
}

@media (max-width: 440px) {
  .tourinfo.fee {
    flex-direction: column;
  }
}

.ic-list.tourinfo {
  --w: 6.4rem;
  --bg: url(../img/contents/tourinfo-ic.svg);
  --size: 19.2rem;
}

.tourguide .map {
  padding: 2.4rem 1.9rem 3rem 1.7rem;
  border-radius: 2rem;
  background: linear-gradient(0deg, #29362F 1.96%, #41554A 97.29%);
}

.tourguide h4 span {
  color: #8A8A8A;
}

.tourguide .course {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5.4rem 6rem 10.5rem 6rem;
  margin-top: 1rem;
  border-radius: 2rem;
  overflow: hidden;
}

.tourguide .course .tit {
  font-family: var(--ft-family-gana);
  font-size: 3.9rem;
  line-height: 125%;
}

.tourguide .course .stit {
  margin-top: 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.tourguide .course .txt {
  margin-top: 2rem;
  margin-bottom: 6.2rem;
  max-width: 63rem;
  font-weight: 500;
}

.tourguide .course i {
  position: absolute;
  right: 0;
  bottom: -8rem;
  color: #FFF;
  font-family: var(--ft-family-gana);
  font-size: 5.5rem;
  line-height: 125%;
  text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.08);
}

.tourguide .course i span {
  font-size: 16.2rem;
}

.tourguide .course-map {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 0;
  overflow: hidden;
}

.tourguide .course-map li {
  position: relative;
  padding-top: 4rem;
  min-width: 10.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  z-index: 2;
}

.tourguide .course-map li::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 0.6rem solid transparent;
  background: #fff;
}

.tourguide .course-map li:nth-child(1):before,
.tourguide .course-map li:nth-last-child(1):before {
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  background: url(../img/contents/tourguide-str.svg) no-repeat 0 0 / 100%;
}

.tourguide .course-map li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  right: calc(-50% + 1.45rem);
  top: 1.5rem;
  background: url(../img/contents/tourguide-line.svg) no-repeat center 0 / 70rem;
  z-index: -1;
}

.tourguide .course-map li:nth-last-child(1)::after {
  display: none;
}

.tourguide .courseA {
  background: #ECF8F7;
}

.tourguide .courseA .course-map li::before {
  border-color: #019AD2;
}
.tourguide .courseB {
  background: #F2FBF0;
}

.tourguide .courseB .course-map li::before {
  border-color: #51A10C;
}

@media (max-width: 767px) {
  .tourguide .course {
    padding: 2rem 4rem;
  }

  .tourguide .course .txt {
    margin-bottom: 2rem;
  }

  .tourguide .course i {
    display: none;
  }
}

.guidmap {
  position: relative;
}

.guidmap .map {
  padding: 3.5rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 2rem;
  background: #505E47;
}

.guidmap .map ol {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 auto 4rem auto;
  max-width: 97rem;
  width: 100%;
}

.guidmap .map ol li {
  flex-basis: calc(16.6% - 5rem / 6);
}

.guidmap .map ol li a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.guidmap .map ol li span {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2rem;
  height: 2.2rem;
  line-height: normal;
  border-radius: 50%;
  background: #BB0B05;
}

.guidmap .map .text-right {
  margin-right: 1rem;
}

.guidmap .map .text-right span,
.ref-blet::before {
  display: inline;
  line-height: normal;
}

.guidmap .map-con {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 10rem;
  margin: 0 auto;
  padding: 4.5rem;
  max-width: 80rem;
  width: 100%;
  border-radius: 2rem;
  background: #F5F5F5;
  z-index: 11;
}

.guidmap .map-con.active {
  display: block;
}

.guidmap .map-con .control {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 69rem;
}

.guidmap .map-con .control button {
  position: relative;
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #fff url(../img/contents/guidmap-arr.svg) no-repeat center / 1.7rem;
  z-index: 2;
}

.guidmap .map-con .control .next {
  transform: rotate(180deg);
}

.guidmap .map-con .swiper {
  margin: 0 auto;
  max-width: 50.7rem;
  width: 100%;
  overflow: hidden;
}

.guidmap .map-con .swiper-wrapper {
  counter-reset: num;
}

.guidmap .map-con dl {
  counter-increment: num;
}

.guidmap .map-con dt {
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--ft-family-gana);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 125%;
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.10);
}

.guidmap .map-con dt::before {
  content: counter(num) ". ";
}

.guidmap .map-con dd {
  margin: 0 auto;
  max-width: 50.7rem;
  width: 100%;
  font-weight: 500;
}

.guidmap .map-con dd .img {
  margin-bottom: 2rem;
  width: 100%;
  height: 32.3rem;
  border-radius: 1rem;
  overflow: hidden;
}

.guidmap .map-con dd .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guidmap .map-con .close {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  width: 5rem;
  height: 5rem;
  background: url(../img/contents/guidemap-close.svg) no-repeat 0 0 / 100%;
}

.guidmap #photo .tit-box {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 6rem;
}

.guidmap #photo .tit-box .control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.guidmap #photo .tit-box .control button {
  flex: 0 0 auto;
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  background: url(../img/contents/guidmap-arr.svg) no-repeat center / 100%;
}

.guidmap #photo .tit-box .control .prev {
  margin-top: -0.1rem;
}

.guidmap #photo .tit-box .control .next {
  transform: rotate(180deg);
}

.guidmap #photo .tit-box .swiper-pagination {
  position: static;
  margin-top: 0.1rem;
}

.guidmap #photo .tit-box .swiper-pagination .swiper-pagination-current {
  font-weight: 600;
}

.guidmap #photo .swiper {
  height: 26.5rem;
}

.guidmap #photo .swiper-slide a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  overflow: hidden;
}

.guidmap #photo .swiper-slide a:hover::before {
  content: '크게보기';
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: -3rem;
  padding-top: 6rem;
  width: 100%;
  height: calc(100% + 3rem);
  color: #fff;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6) url(../img/contents/guidmap-more.svg) no-repeat center / 2.56rem;
}

.guidmap #photo .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-qr {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.guide-qr p:has(.link) {
  padding-right: 11rem;
}

.guide-qr .qr {
  position: absolute;
  right: 0;
  bottom: 70%;
  max-width: 10.3rem;
}

@media (max-width: 767px) {
  .guide-qr {
    display: flex;
  }

  .guide-qr p:has(.link) {
    padding-right: 0;
  }

  .guide-qr .qr {
    bottom: 100%;
  }
}

@media (max-width: 440px) {
  .guide-qr .qr {
    display: none;
  }
}

.woodcraft-qr {
  flex: 0 0 auto;
  padding: 3.4rem 3.2rem 3.9rem 3.5rem;
  border-radius: 1rem;
  background: #F5F5F5;
}

.woodcraft-qr img {
  max-width: 11.1rem;
}

@media (max-width: 767px) {
  .flex-con:has(.woodcraft-qr) {
    align-items: flex-start;
  }

  .flex-con .bl03 {
    width: calc(100% - 2.4rem);
  }
}

@media (max-width: 440px) {
  .woodcraft-qr {
    display: none;
  }
}

.tourism .top-box {
  padding-top: 4rem;
}

.tourism .top-box .img-box {
  position: relative;
  padding-top: 3.2rem;
  margin-bottom: 2.8rem;
}

.tourism .top-box .img-box .tit {
  position: absolute;
  right: 5rem;
  top: 0;
  display: flex;
  align-items: center;
  padding-left: 9.1rem;
  padding-right: 9.2rem;
  height: 11.1rem;
  color: #FFF;
  font-family: var(--ft-family-gana);
  font-size: 3.6rem;
  line-height: 125%;
  border-radius: 20rem 8rem 30rem 20rem;
  background: linear-gradient(101deg, rgba(1, 154, 210, 0.80) 10.01%, rgba(81, 161, 12, 0.80) 93.43%);
  box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.tourism .top-box .img-box .img {
  border-radius: 2rem 15rem 2rem 2rem;
  box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.tourism .top-box dl {
  margin-left: 1.2rem;
    margin-right: 1.2rem;
}

.tourism .top-box dl dt {
  margin-bottom: 2.2rem;
  font-weight: 600;
}

@media (max-width: 440px) {
  .tourism .top-box .img-box .tit {
    padding: 2rem 5rem;
    height: auto;
    font-size: 3rem;
  }

  .tourism .top-box .img-box .img {
    border-radius: 2rem 8rem 2rem 2rem;
  }
}

.tourism .map-box {
  height: 44.8rem;
  border-radius: 2rem;
  background: #FAF7EF;
}

.tourism .ic-list {
  --w: 8rem;
  --size: 40rem;
}

.tourism .ic-list.hwagae {
  --bg: url(../img/contents/hwagae-ic.svg);
}

.tourism .ic-list.spa {
  --bg: url(../img/contents/spa-ic.svg);
}

.tourism .ic-list.spa {
  flex-wrap: wrap;
}

.tourism .ic-list.spa>li {
  flex-basis: calc(33.3% - 3rem / 3);
  gap: 0;
  padding: 2rem 3rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.tourism .ic-list.spa>li .tit {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.7rem;
  font-weight: 600;
}

.forest_gallery{display: flex; flex-wrap: wrap; gap:min(1rem, 1.5vw) min(1%, 1rem)}
.forest_gallery>*{flex:1 1 24%; max-width: 259px; min-width: 220px;}
.forest_gallery>* img{width: 100%; height: 100%; object-fit:cover; border-radius: 1rem}
.forest_gallery .here img{border:3px solid #000; box-shadow:0px 1px 5px rgba(0,0,0,.2)}

#forest_modal {position: fixed; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 9999;}
#forest_modal .overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: -1;}
#forest_modal .modal_btn {display: flex; align-items: center; justify-content: center; padding-left: 20px; padding-right: 20px; height: 100%; width: 100%; max-width: 1640px;}
#forest_modal .modal_btn .prev,
#forest_modal .modal_btn .next {position: absolute; top: calc(50% - 2rem / 2); width: 5rem; height: 5rem; font-size: 0; text-indent: -5000px}
#forest_modal .modal_btn .prev {left: 3%}
#forest_modal .modal_btn .next {right: 3%}
#forest_modal .modal_btn .prev:before,
#forest_modal .modal_btn .next:before{display: block; position: absolute; top: 30%; left: 27%; content: ''; width: 2rem; height:2rem; border:0px solid #fff; border-width:3px 3px 0px 0px}
#forest_modal .modal_btn .prev:before {transform: rotate(-135deg);}
#forest_modal .modal_btn .next:before {transform: rotate(45deg);}
#forest_modal .modal_btn .close {position: absolute; top: 2rem; right: 2rem; width: 5rem; height: 5rem; text-indent: -5000px; background:#000; overflow:hidden; border-radius:100%}
#forest_modal .modal_btn .close:before,
#forest_modal .modal_btn .close:after{display: block; content: 'X'; position: absolute;  left: 30%; top: 50%; width:40%; height:2.5px; border-radius:1px; transform: rotate(45deg); background: #fff;}
#forest_modal .modal_btn .close:after{transform: rotate(135deg);}