@charset "UTF-8";
/*  */
/*  */
/*  */
@font-face {
  font-family: "Miwon";
  src: url("/fonts/docent/미원Miwon.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Arita-buri";
  src: url("/fonts/docent/Arita-buriM.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Arita-buri";
  src: url("/fonts/docent/Arita-buriSB.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Arita-buri";
  src: url("/fonts/docent/Arita-buriB.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/user/Pretendard-Light.woff") format("woff"), url("/fonts/user/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/user/Pretendard-Regular.woff") format("woff"), url("/fonts/user/Pretendard-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/user/Pretendard-Medium.woff") format("woff"), url("/fonts/user/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/user/Pretendard-SemiBold.woff") format("woff"), url("/fonts/user/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/user/Pretendard-Bold.woff") format("woff"), url("/fonts/user/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  unicode-range: U+AC00-D7A3;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  border: 0;
  vertical-align: middle;
}

ul, ol, li {
  list-style: none;
}

input[type=text],
input[type=password],
input[type=tel],
input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  outline-style: none;
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=tel]::placeholder,
input[type=search]::placeholder {
  opacity: 0.8;
}

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-cancel-button {
  display: none;
}

button,
input[type=submit],
input[type=button] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

textarea {
  resize: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
}

select {
  appearance: none;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

@keyframes bubbleDown {
  0% {
    right: 90%;
  }
  100% {
    right: 100%;
  }
}
html {
  /* 영어+숫자+특수문자, 한글, 나머지 */
  font-family: "Miwon", "Arita-buri", sans-serif;
  font-size: 0.9192px;
  font-size: 0.6624px;
}
html.seal {
  overflow: hidden;
  overscroll-behavior: contain;
}

body {
  font-size: 16rem;
  letter-spacing: -0.64rem;
  color: #000000;
}
body.seal {
  overflow: hidden;
  overscroll-behavior: contain;
}

input {
  font-family: "Miwon", "Arita-buri", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
}
input::placeholder {
  font-family: "Miwon", "Arita-buri", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
}

button {
  font-family: "Miwon", "Arita-buri", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  color: #000000;
}

select {
  font-family: "Miwon", "Arita-buri", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  color: #000000;
}

.wrap-sub {
  overflow-x: hidden;
}
.wrap-sub .logo {
  margin: 0;
  margin-bottom: 10px;
  width: auto;
}

.layout {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 1600px) {
  .layout {
    width: 100%;
  }
}
.layout-outer {
  width: 864px;
  min-height: 100svh;
  overflow: hidden;
}
@media only screen and (max-width: 864px) {
  .layout-outer {
    width: 100%;
  }
}
.layout-inner {
  position: relative;
  width: 100%;
  padding: 0 40px;
  padding: 0 40rem;
}

.main {
  position: relative;
  background-color: #fff;
}

.logo {
  position: relative;
  display: block;
  width: 244rem;
  z-index: 99;
  margin-bottom: -4px;
}
.logo > .icon {
  width: 100%;
}
.logo > .icon img {
  width: 100%;
}
.logo > .txt {
  font-size: 0px;
  color: #fff;
}

.link-culture {
  width: 128px;
  height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 22px;
}
.link-culture > .icon {
  width: 100%;
  height: 100%;
  background: url("/images/user/common/link-digitalculture-colorful.svg") no-repeat center;
}

.sect-tit {
  display: none;
  padding-top: 70px;
  padding-bottom: 60px;
}
.sect-tit.active {
  display: block;
}

.tit-bottommenu {
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -2.4px;
}

[data-list-style-type=ko] > li:nth-child(1)::marker {
  content: "가. ";
}

[data-list-style-type=ko] > li:nth-child(2)::marker {
  content: "나. ";
}

[data-list-style-type=ko] > li:nth-child(3)::marker {
  content: "다. ";
}

[data-list-style-type=ko] > li:nth-child(4)::marker {
  content: "라. ";
}

[data-list-style-type=ko] > li:nth-child(5)::marker {
  content: "마. ";
}

[data-list-style-type=ko] > li:nth-child(6)::marker {
  content: "바. ";
}

[data-list-style-type=ko] > li:nth-child(7)::marker {
  content: "사. ";
}

[data-list-style-type=ko] > li:nth-child(8)::marker {
  content: "아. ";
}

[data-list-style-type=ko] > li:nth-child(9)::marker {
  content: "자. ";
}

[data-list-style-type=ko] > li:nth-child(10)::marker {
  content: "차. ";
}

[data-list-style-type=ko] > li:nth-child(11)::marker {
  content: "카. ";
}

[data-list-style-type=ko] > li:nth-child(12)::marker {
  content: "타. ";
}

[data-list-style-type=ko] > li:nth-child(13)::marker {
  content: "파. ";
}

[data-list-style-type=ko] > li:nth-child(14)::marker {
  content: "하. ";
}

/* 헤더 */
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  transition: top 0.3s, background 0.3s;
}
.header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0000004D;
  background-color: rgba(0, 0, 0, 0.152);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  opacity: 0;
  transition: opacity 0.3s;
}
.header .btn-home {
  width: 60rem;
  min-width: 60rem;
  aspect-ratio: 1/1;
}
.header .btn-home .icon {
  width: 100%;
}
.header .btn-home .icon img {
  width: 100%;
}
.header .btn-back {
  width: 60rem;
  min-width: 60rem;
  aspect-ratio: 1/1;
}
.header .btn-back .icon {
  width: 100%;
}
.header .btn-back .icon img {
  width: 100%;
}
.header .btn-menu {
  position: relative;
  width: 60rem;
  min-width: 60rem;
  aspect-ratio: 1/1;
}
.header .btn-menu::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 115.8rem;
  aspect-ratio: 193/66;
  background: url("/images/docent/pages/detail/bubble-cate-black.png") no-repeat center;
  background-size: contain;
  animation: bubbleDown 1.5s 1s infinite alternate;
}
.header .btn-menu .icon {
  width: 100%;
}
.header .btn-menu .icon img {
  width: 100%;
}
.header .btn-close {
  width: 60rem;
  min-width: 60rem;
  aspect-ratio: 1/1;
}
.header .btn-close .icon {
  width: 100%;
}
.header .btn-close .icon img {
  width: 100%;
}
.header-layout {
  width: 864px;
}
@media only screen and (max-width: 864px) {
  .header-layout {
    width: 100%;
  }
}
.header-plate {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* //헤더 */
/* 해더 네비 */
/* //네비 */
/* 전체메뉴 */
.navbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  display: block;
  width: 100%;
  width: 864px;
  height: 75rem;
  background-color: #272727;
  z-index: 5;
}
@media only screen and (max-width: 864px) {
  .navbar {
    width: 100%;
  }
}
.navbar .layout {
  height: 100%;
  padding: 0 22rem;
}
.navbar .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.navbar .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rem;
  font-weight: 700;
  color: #fff;
}
.navbar .nav-link.disabled {
  pointer-events: none;
  filter: brightness(0.5);
}
.navbar .nav-link.prev .icon {
  background: url("/images/docent/common/icon-arrow-right-white.svg") no-repeat center;
  background-size: contain;
}
.navbar .nav-link.next {
  flex-direction: row-reverse;
}
.navbar .nav-link.next .icon {
  background: url("/images/docent/common/icon-arrow-left-white.svg") no-repeat center;
  background-size: contain;
}
.navbar .nav-link .txt {
  font-weight: 700;
  font-size: 22rem;
  letter-spacing: 0;
}
.navbar .nav-link .icon {
  width: 11rem;
  aspect-ratio: 11/17;
}

.bottom-btns {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.bottom-btns .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.bottom-btns .btn img {
  width: 100%;
}
.bottom-btns .btn .icon {
  position: relative;
  width: 100%;
  transition: opacity 0.3s;
}
.bottom-btns .btn .icon.mute {
  opacity: 1;
}
.bottom-btns .btn .icon.play {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.bottom-btns .btn-speaker {
  opacity: 1;
  transition: opacity 0.3s;
}
.bottom-btns .btn-speaker.hide {
  opacity: 0;
  pointer-events: none;
}
.bottom-btns .btn-speaker.play .icon.mute {
  opacity: 0;
}
.bottom-btns .btn-speaker.play .icon.play {
  opacity: 1;
}
.bottom-btns .btn-lang[data-lang=ko] .icon.eng {
  opacity: 1;
}
.bottom-btns .btn-lang[data-lang=ko] .icon.kor {
  opacity: 0;
}
.bottom-btns .btn-lang[data-lang=en] .icon.eng {
  opacity: 0;
}
.bottom-btns .btn-lang[data-lang=en] .icon.kor {
  opacity: 1;
}
.bottom-btns .btn-lang .icon {
  position: relative;
  width: 100%;
  transition: opacity 0.3s;
}
.bottom-btns .btn-lang .icon.eng {
  opacity: 1;
}
.bottom-btns .btn-lang .icon.kor {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.bottom-btns .btn-lang .icon img {
  width: 100%;
}
.bottom-btns-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 105rem;
  display: block;
  width: 100%;
  width: 864px;
  z-index: 5;
}
@media only screen and (max-width: 864px) {
  .bottom-btns-wrap {
    width: 100%;
  }
}
.bottom-btns-wrap .layout {
  padding: 0 30rem;
}

.audio-player {
  position: absolute;
  width: 0%;
  opacity: 0;
  pointer-events: none;
}
.audio-player::-webkit-media-controls-enclosure {
  /* audio 감싸는 container, 기존 배경색은 여기에 */
  background-color: transparent;
}
.audio-player::-webkit-media-controls-panel {
  /* audio 감싸는 container */
}
.audio-player::-webkit-media-controls-mute-button {
  filter: invert(100);
}
.audio-player::-webkit-media-controls-play-button {
  display: none;
}
.audio-player::-webkit-media-controls-current-time-display {
  background-color: transparent;
  box-shadow: unset;
  text-shadow: unset;
  color: #fff;
}
.audio-player::-webkit-media-controls-time-remaining-display {
  background-color: transparent;
  box-shadow: unset;
  text-shadow: unset;
  color: #fff;
}
.audio-player::-webkit-media-controls-timeline {
  filter: invert(100);
}
.audio-player::-webkit-media-controls-volume-slider {
  filter: invert(100);
}
.audio-player::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
.audio-player::-webkit-media-controls-seek-back-button {
  background-color: #fff;
  color: red;
}
.audiobar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100%;
  display: block;
  display: block;
  width: 100%;
  width: 864px;
  height: 75rem;
  background-color: #272727;
  z-index: 6;
  transition: bottom 0.3s;
}
@media only screen and (max-width: 864px) {
  .audiobar {
    width: 100%;
  }
}
.audiobar.active {
  bottom: 0;
}
.audiobar .layout {
  height: 100%;
  padding: 0 30rem;
}
.audiobar .btn-audio-pause {
  position: relative;
  width: 18rem;
  aspect-ratio: 17/21;
}
.audiobar .btn-audio-pause.play .icon.pause {
  opacity: 0;
}
.audiobar .btn-audio-pause.play .icon.play {
  opacity: 1;
}
.audiobar .btn-audio-pause .icon {
  position: relative;
  width: 100%;
  transition: opacity 0.3s;
}
.audiobar .btn-audio-pause .icon.pause {
  opacity: 1;
}
.audiobar .btn-audio-pause .icon.play {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.audiobar .btn-audio-pause .icon img {
  width: 100%;
}
.audiobar .btn-audio-close {
  width: 22rem;
  aspect-ratio: 1/1;
}
.audiobar .btn-audio-close .icon {
  width: 100%;
}
.audiobar .btn-audio-close .icon img {
  width: 100%;
}
.audio-plate {
  display: flex;
  align-items: center;
  gap: 28rem;
  width: 100%;
  height: 100%;
}
.audio-info {
  display: flex;
  align-items: center;
  gap: 14rem;
  width: 100%;
  height: 100%;
}
.audio-status-bar {
  flex: 1;
  position: relative;
  border-radius: 2.5rem;
  height: 5rem;
  background-color: #414141;
}
.audio-status-bar-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 5rem;
  border-radius: 2.5rem;
  background-color: #FFED00;
}
.audio-status-range {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 5rem;
  width: 100%;
  height: 5rem;
  background: transparent;
  accent-color: #FFED00;
}
.audio-status-range:active {
  cursor: grabbing;
}
.audio-status-range:focus {
  outline: none;
}
.audio-status-range::-webkit-slider-runnable-track {
  content: "";
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  width: 61.1111111111vw;
}
.audio-status-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
}
.audio-status-num {
  font-family: "Arita-buri", sans-serif;
  font-size: 17rem;
  color: #FCFBF7;
}

/* //전체메뉴 */
.btn {
  cursor: pointer;
}
.btn-floor {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  box-shadow: 2rem 2rem 5rem #00000033;
  font-size: 24rem;
  letter-spacing: 0.96rem;
  color: rgba(252, 251, 247, 0.6);
  line-height: 29rem;
}
.btn-floor-wrap {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  backdrop-filter: blur(30px) brightness(0.5);
}
.btn-floor-wrap.active {
  width: 118rem;
  background-color: rgba(185, 82, 63, 0.5);
  backdrop-filter: unset;
}
.btn-floor-wrap.active .btn-floor {
  width: 95rem;
  background: linear-gradient(180deg, #C7604D 0%, #B9523F 100%) 0% 0% no-repeat;
  font-size: 34rem;
  letter-spacing: 1.36rem;
  color: #FCFBF7;
  line-height: 41rem;
}

/* modal */
.modal {
  position: relative;
  background: #fff;
}
.modal .btn-close {
  position: absolute;
  right: 5px;
  top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40rem;
  height: 40rem;
  z-index: 99;
}
.modal .btn-close > img {
  width: 100%;
  height: 100%;
}
.modal-wrap {
  position: fixed;
  left: 0;
  top: calc(var(--vh, 1vh) * 100);
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
  z-index: 1010;
  transition: left 0.3s, top 0.3s, opacity 0.3s;
}
.modal-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.modal-wrap.active {
  top: 0;
}
.modal-nav-wrap {
  left: 100%;
  top: 0;
}
.modal-nav-wrap.active {
  left: 0;
}
.modal-nav-wrap .logo {
  width: 244rem;
}
.modal-guide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #0000004D;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.modal-guide-wrap {
  cursor: pointer;
  width: calc(100vw / 540 * 295);
  max-width: calc(864rem / 540 * 295);
  height: calc(100vw / 540 * 178);
  max-height: calc(864rem / 540 * 178);
  aspect-ratio: 295/177;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.modal-guide-wrap.active {
  opacity: 1;
  left: 50%;
  top: calc(864rem / 540 * 435 * 0.5);
  pointer-events: all;
}
@media only screen and (max-width: 864px) {
  .modal-guide-wrap.active {
    top: calc(100vw / 540 * 435 * 0.5);
  }
}
.modal-guide-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 22px 15px 15px;
  padding: 22rem 15rem 15rem;
}
.modal-guide-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100vw / 540 * 52);
  max-width: calc(864rem / 540 * 52);
}
.modal-guide-img img {
  width: 100%;
}
.modal-guide-txt {
  position: relative;
  color: #fff;
  text-align: center;
  font-family: "Arita-buri", sans-serif;
  font-size: 18rem;
  letter-spacing: -0.72rem;
  padding-top: 23rem;
  white-space: nowrap;
}

.wrap-main .modal-guide-wrap {
  top: calc(var(--vh, 1vh) * 80 - $modalguideH / 2 - 80px + 20px);
}
.wrap-main .modal-guide-wrap.active {
  top: calc(var(--vh, 1vh) * 80 - $modalguideH / 2 - 80px + 20px);
  left: 50%;
  opacity: 1;
}
.wrap-sub .modal-guide-wrap {
  top: calc(63px + $modalguideH / 2);
}
.wrap-sub .modal-guide-wrap.active {
  position: absolute;
  left: 50%;
  opacity: 1;
}

/* //modal */
.swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide > video {
  width: 100%;
  height: 100%;
}
.swiper-page-main {
  aspect-ratio: 360/244;
}
.swiper-page-main .swiper-slide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-page-bg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
}
.swiper-page-bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0000004D;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  z-index: 2;
}
.swiper-main-cate .swiper-slide {
  width: auto;
  margin-left: 20px;
}
.swiper-main-cate .swiper-slide:first-child {
  margin-left: 30px;
}
.swiper-main-cate .swiper-slide:last-child {
  margin-right: 30px;
}
.swiper-cate {
  padding-top: 60px;
  width: 100%;
}
.swiper-cate .swiper-slide {
  width: auto;
}
.swiper-cate .swiper-slide:first-child {
  margin-left: 15px;
}
.swiper-cate .swiper-slide:last-child {
  margin-right: 15px;
}
.swiper-subnav {
  height: 100%;
}

.main-tit {
  position: relative;
  font-weight: 700;
  font-size: 45rem;
  letter-spacing: -1.8rem;
  color: #FFED00;
}
.main-tits {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  padding-left: 50rem;
}
.main-tit-sub {
  display: flex;
  justify-content: space-between;
  gap: 80rem;
  font-family: "Arita-buri", sans-serif;
  font-weight: 600;
  font-size: 21rem;
  letter-spacing: -0.84rem;
  color: #fff;
  line-height: 30rem;
  word-break: keep-all;
}
.main-tit-floor img {
  width: 144rem;
}
.main-info {
  min-height: 435rem;
  background-color: #008561;
}
.main-info .layout {
  padding: 0 50rem;
}
.main-info-plate {
  padding: 156rem 0px 65rem;
}
.main-bg-plate {
  width: 100%;
}
.main-bg-plate img {
  width: 100%;
}
.main-floor {
  position: fixed;
  left: 50%;
  bottom: 105rem;
  transform: translate(-50%, 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 864px;
}
@media only screen and (max-width: 864px) and (max-height: 480px) {
  .main-floor {
    position: absolute;
  }
}
.main-floor .layout {
  padding: 0 87rem;
}
.main-list {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
}

.docent-info {
  position: relative;
}
.docent-info-box {
  font-family: "Arita-buri", sans-serif;
  font-weight: 600;
  font-size: 22rem;
  letter-spacing: -0.66rem;
  line-height: 34rem;
  color: #515150;
  word-break: keep-all;
}
.docent-info-box .ko, .docent-info-box .en {
  white-space: pre-line;
}
.docent-info-swiper .docent-info-pagination-fraction {
  left: unset;
  right: 30rem;
  top: unset;
  bottom: 30rem;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  border-radius: 800px;
  backdrop-filter: blur(30px) brightness(0.7);
  font-family: "Arita-buri", sans-serif;
  font-size: 18rem;
  letter-spacing: 0;
  color: #FCFBF7;
  overflow: hidden;
  padding: 9rem 14rem;
}
.docent-info-swiper .swiper-slide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #008561 0%, transparent 50%, transparent 100%);
  z-index: 1;
}
.docent-bg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 864px;
}
.docent-bg img {
  min-width: 100%;
  min-height: 100%;
}
.docent-floor {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 93rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #FCFBF7;
}
.docent-floor .icon {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  display: block;
  width: 15rem;
}
.docent-floor .icon img {
  width: 100%;
}
.docent-floor .txt {
  font-weight: 700;
  font-size: 32rem;
  letter-spacing: 0;
  padding-top: 23.25rem;
}
.docent-tit-plate + .docent-cont-plate {
  padding-top: 46rem;
  padding-top: 20rem;
}
.docent-tit-box {
  font-size: 34rem;
  text-align: center;
}
.docent-subtit-plate + .docent-cont-plate {
  padding-top: 20rem;
}
.docent-subtit-box {
  font-family: "Arita-buri", sans-serif;
  font-weight: 700;
  font-size: 19rem;
  letter-spacing: -0.57rem;
  color: #272727;
}
.docent-subtit-box > p {
  display: inline-flex;
  align-items: baseline;
}
.docent-subtit-box .round {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  min-width: 23rem;
  aspect-ratio: 1/1;
  font-family: "Miwon", sans-serif;
  font-weight: 700;
  font-size: 14rem;
  letter-spacing: 0;
  color: #E9E3D5;
  border-radius: 50%;
  background-color: #272727;
  margin-right: 5rem;
}
.docent-subtit-box .tit {
  font-size: 30rem;
  letter-spacing: -2.4rem;
  padding-top: 12rem;
}
.docent-cont {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 864px / 540 * 435 - 75rem);
  background-color: #FCFBF7;
  padding-top: 65.1rem;
  padding-bottom: 240rem;
  z-index: 2;
}
@media only screen and (max-width: 864px) {
  .docent-cont {
    min-height: calc(100svh - 100vw / 540 * 435 - 75rem);
  }
}
.docent-cont-plate + .docent-cate-list {
  padding-top: 40rem;
}
.docent-cate {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: baseline;
  gap: 15rem;
  padding: 20rem 40rem;
}
.docent-cate .txt {
  font-weight: 700;
  font-size: 28rem;
  letter-spacing: -0.84rem;
  color: #000;
}
.docent-cate .icon {
  width: 36rem;
  min-width: 36rem;
  aspect-ratio: 1/1;
}
.docent-cate .icon img {
  width: 100%;
}
.docent-cate-list > li {
  position: relative;
}
.docent-cate-list > li:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #EFEEEA;
}

.topic-tit-plate {
  font-weight: 700;
  font-size: 30rem;
  letter-spacing: 0;
  color: #FFED00;
}
.topic-tit-box {
  font-size: 34rem;
  text-align: center;
}
.topic-plate {
  width: 100%;
  padding: 30rem 0;
}
.topic-plate.active .topic-icon {
  transform: rotate(0deg);
}
.topic-plate:not(.active) + .topic-sublist-wrap {
  padding: 0 0;
  height: 0;
  border-top: 0px solid rgba(0, 0, 0, 0);
}
.topic-plate .layout-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10rem;
  width: 100%;
}
.topic-num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  min-width: 30rem;
  height: 30rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #FFED00;
  font-family: "Miwon", sans-serif;
  font-size: 21rem;
  letter-spacing: 0;
  color: #008561;
}
.topic-cont {
  font-family: "Arita-buri", sans-serif;
  font-weight: 700;
  font-size: 24rem;
  letter-spacing: -0.72rem;
  color: #FCFBF7;
  margin-right: auto;
  word-break: keep-all;
}
.topic-icon {
  width: 22rem;
  min-width: 22rem;
  margin-left: 90rem;
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.topic-icon img {
  width: 100%;
}
.topic-sublist {
  display: flex;
  flex-direction: column;
  gap: 15rem;
}
.topic-sublist-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #006147;
  padding: 25rem 0;
  overflow: hidden;
  transition: height 0.3s, padding 0.3s, border 0.3s;
}
.topic-sub-plate {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
}
.topic-sub-icon {
  width: 10rem;
  min-width: 10rem;
  aspect-ratio: 1/1;
}
.topic-sub-icon img {
  width: 100%;
}
.topic-sub-cont {
  font-family: "Arita-buri", sans-serif;
  font-weight: 600;
  font-size: 22rem;
  letter-spacing: -1.1rem;
  color: #FCFBF7;
  line-height: 30rem;
}
.topic-list > li {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  transition: border 0.3s;
}
.topic-list > li:has(.topic-plate.active) {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.topic-list > li:has(.topic-plate.active)::before {
  background-color: transparent;
}
.topic-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
}

/* floor */
.wrap-floor {
  background-color: #272727;
}
.wrap-floor .header {
  position: absolute;
  left: 0rem;
  top: 0rem;
}
.wrap-floor .header-layout {
  padding: 30rem;
}
.wrap-detail {
  background-color: #FCFBF7;
}
.wrap-detail .header-plate {
  padding: 8rem;
}
.wrap-detail .layout-outer {
  min-height: calc(100svh - 75rem);
}
.wrap-detail-floor .header .btn-back, .wrap-detail-floor .header .btn-menu, .wrap-detail-floor .header .btn-close {
  display: none;
}
.wrap-detail-cate .header .btn-home, .wrap-detail-cate .header .btn-close {
  display: none;
}
.wrap-detail-cate .navbar .nav-link .txt {
  display: none;
}
.wrap-detail-topic .header .btn-home, .wrap-detail-topic .header .btn-back, .wrap-detail-topic .header .btn-menu {
  display: none;
}
.wrap-detail-topic .header .btn-close {
  margin-left: auto;
}
.wrap-detail-topic .navbar .nav-link .txt {
  display: none;
}
.wrap-list .header .btn-home, .wrap-list .header .btn-back, .wrap-list .header .btn-menu {
  display: none;
}
.wrap-list .header .btn-close {
  margin-left: auto;
}
.wrap-list .header-plate {
  padding: 8rem;
}
.wrap-list .layout-outer {
  background-color: #008561;
}
.wrap-list .main {
  background-color: #008561;
  padding-top: 100rem;
  padding-bottom: 60rem;
}
.wrap-list .main section {
  background-color: #008561;
}

/* floor */
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

body {
  top: 0 !important;
}

#google-gt-tt {
  display: none !important;
}

.VIpgJd-yAWNEb-L7lbkb {
  display: none !important;
}

/* 자체 번역 */
.ko.hidden {
  display: none;
}

.en.hidden {
  display: none;
}

/* 자체 번역 */