/**/
@charset "utf-8";
:host {
  --blue: #535df6;
  --red: #ff6b6c;
  --palegray: #f5f5f5;
  --gray: #e8e8e8;
  --oneblack: #111;
  --indigo: #0f284a;
  --mint: #16bac5;
}

/* common */
.screen {display:none}
.screen.show {display:block;}

.screen {
  width: 100%;
  height: 100%;
}

.screen .cont {
  width: 100%;
  height: 100%;
  max-width: 1920px;
  display: flex;
  justify-content: center;
  align-items:center;
  padding:0 70px;
}
.screen .cont * {
  font-family: KoPubWorldDotum;
  letter-spacing: -0.04em;
}

/* index */
.screen .cont .subject_tit {
  padding-top:40px;
  font-size: 110px;
  line-height:125%;
}
.screen .cont h1 span.blue {
  color: var(--blue);
}

.txt_box {
  position:relative;
  width:730px;
  height:520px;
  margin-right:60px;
  border:10px solid #ededed
}
.txt_box p {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:150px;
  padding-top:20px;
  font-size:38px;
  font-weight:400;
  background-color:#f7f7f7;
}
.map {
  position:relative;
  width:910px;
  height:920px;
  background: url(../img/map.png) no-repeat center center;
}

.map .item {
  position:absolute;
  transition:transform .2s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.map .item:hover {
  transform:scale(1.1)
}
.map .item:before {
  content:attr(title);
  display:none;
}
.map .item span {
  display:block;
  height:47px;
  line-height:50px;
  padding:0 16px;
  background:#fff;
  border:1px solid #c6c6c6;
  border-radius:99px;
  position:absolute;
  white-space:nowrap;
  font-size:25px;
  color:#111;
  font-weight:700;
  letter-spacing: -0.035em;
  box-shadow: 0px 6px 0px -2px rgba(237, 237, 237, 1);
}
.map .item span em  {
  padding:0 3px
}
.map .item.item1 {
  left: 85px;
  top: 100px;
}
.map .item.item1 span {
  left: -6px;
  top: 61px;
}
.map .item.item2 {
  left: 334px;
  top: 88px;
}
.map .item.item2 span {
  left: 51px;
  top: -1px;
}
.map .item.item3 {
  left: 484px;
  top: 46px;
}
.map .item.item3 span {
  left: 56px;
  top: -2px;
}
.map .item.item4 {
  left: 488px;
  top: 134px;
}
.map .item.item4 span {
  left: 0px;
  top: 40px;
}
.map .item.item5 {
  left: 679px;
  top: 119px;
}
.map .item.item5 span {
  left: 2px;
  top: -1px;
}
.map .item.item6 {
  left: 464px;
  top: 243px;
}
.map .item.item6 span {
  left: 0px;
  top: 5px;
}
.map .item.item7 {
  left: 112px;
  top: 460px;
}
.map .item.item7 span {
  left: 1px;
  top: -1px;
}
.map .item.item8 {
  left: 366px;
  top: 419px;
}
.map .item.item8 span {
  left: -6px;
  top: 42px;
}
.map .item.item9 {
  left: 485px;
  top: 372px;
}
.map .item.item9 span {
  left: 0px;
  top: 0px;
}
.map .item.item10 {
  left: 614px;
  top: 397px;
}
.map .item.item10 span {
  left: 44px;
  top: -1px;
}
.map .item.item11 {
  left: 673px;
  top: 350px;
}
.map .item.item11 span {
  left: 56px;
  top: -1px;
}
.map .item.item12 {
  left: 285px;
  top: 529px;
}
.map .item.item12 span {
  left: 50px;
  top: 0px;
}
.map .item.item13 {
  left: 327px;
  top: 587px;
}
.map .item.item13 span {
  left: 48px;
  top: -1px;
}
.map .item.item14 {
  left: 639px;
  top: 593px;
}
.map .item.item14 span {
  left: 63px;
  top: 5px;
}
.map .item.item15 {
  left: 292px;
  top: 843px;
}
.map .item.item15 span {
  left: 34px;
  top: -2px;
}
.map .item.item16 {
  left: 239px;
  top: 225px;
}
.map .item.item16 span {
  left: 1px;
  top: 0px;
}
.map .item img {
  display:block;
}
.map .item1 {

}

.map span {
  position:absolute;
  font-size:23px;
  text-align:left;
}
.map .t1 {
  left: 100px;
  bottom: 4px;
}
.map .t2 {
  right:0;
  bottom:0;
}

/* page */
.btn_page_back {
  position:absolute;
  bottom:15px;
  left:80px;
}
.pg_inner {
  display:flex;
  align-items:center;
  gap:60px;
}
.view_slider {
  position:absolute;
  bottom:10px;
  left:0;
  width:452px;
  height:111px;
  background: url(../img/btn_detail_view.png) no-repeat center center;
}
.pg_inner .thumb img {
  display:block;
  border-radius:45px;
}
.desc {
  position:relative;
  height:702px;
  text-align:left;
}
.desc h1 {
  padding-top:10px;
  text-align:left;
  font-size:75px;
  line-height:100%;
  margin-bottom:25px;
}
.desc p {
  text-align:justify;
  font-size:45px;
  font-weight:400;
  line-height:160%;
}

/* popup */
.ui_pop .pop_ct button.close {
  position:absolute;
  right:50px;
  top:50px;
  width: 96px;
  height: 96px;
  background: url(../img/btn-closed.png) no-repeat center center;
  z-index:2;
}
.ui_pop .inner {
  height:100%;
  border-radius:0
}
.pop_ct.viewSlider {
  width:100%;
  height:100%;
}

/* slider */
.slide-wrap {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:100%;
}
.slide-wrap .slide {
  width: 1063px;
  height:100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: -1px 2px 10px 4px rgba(147, 147, 147, 0.25);
  -moz-box-shadow: -1px 2px 10px 4px rgba(147, 147, 147, 0.25);
  box-shadow: -1px 2px 10px 4px rgba(147, 147, 147, 0.25);
  /* filter: drop-shadow(0px 5px 2.5px rgba(92, 92, 92, 0.1));*/
}
.slide-wrap .slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.slide-wrap .slide-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: #000;
  position: absolute;
  top:0;
  left:0;
}
.slide-wrap .slide-item img {
  width: 100%;
  height: 100%;

  perspective: 1920px;
  position: relative;
}

.slide-wrap .slide .pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
  position: absolute;
  bottom: 0;
  margin-bottom: 65px;
}
.slide-wrap .slide .pagination span {
  background: #eee;
  width: 86px;
  height: 21px;
  border-radius: 20px;
  margin: 0 10px;
  display: block;
  cursor:pointer;
  opacity:0.5;
  box-shadow: 0 5px 5px 0px #000000a1;
}
.slide-wrap .slide .pagination span.on {
  background-color: var(--blue);
  opacity:1;
  width:90px;
  height:26px;
  border:4px solid #fff;
}
.slide-wrap .arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:140px;
  height:140px;
  z-index:2
}
.slide-wrap .arrow.off {
  opacity:0;
}
.slide-wrap .arrow.left {
  left:22px;
  background: url(../img/arrow_prev.png) no-repeat center center;
}
.slide-wrap .arrow.left.off {
  background: url(../img/arrow_prev.png) no-repeat center center;
}
.slide-wrap .arrow.right {
  right:22px;
  background: url(../img/arrow_next.png) no-repeat center center;
}
.isLastSlide .arrow.right {
  width:160px;
  height:171px;
  margin-left:53px;
  background: url(../img/btn_find_hidden.png) no-repeat center center;
}
.slide-wrap .arrow.right.off {
  background: url(../img/arrow-next-white.png) no-repeat center center;
}