:root {
  /* 자주쓰는 색상을 변수에 담기 */
  --mc: #09847f;
  --sc: #b4613d;
  --lc: #dddddd;
  --wc: #ffffff;
  --dc: #444;
  --gc: #f9f9f9;
}

.inner {
  max-width: 1400rem;
  margin: 0 auto;
  padding: 0 15rem;
}

.btn {
  display: inline-block;
  font-size: 20rem;
  padding: 20rem 30rem;
  border-radius: 30rem;
  overflow: hidden;
}

.btn2 {
  display: inline-block;
  font-size: 18rem;
  padding: 10rem 20rem;
  border-radius: 20rem;
  overflow: hidden;
  background: var(--dc);
  color: var(--wc);
}

.btn3 {
  display: inline-block;
  font-size: 14rem;
  padding: 5rem 10rem 4rem 10rem;
  border-radius: 10rem;
  overflow: hidden;
  color: var(--mc);
  border: 2px solid var(--mc);
}

.btn::after {
  content: "\f1be";
  font-family: bootstrap-icons;
  vertical-align: -3px;
  margin: 0 0 0 15rem;
}

.btn.wc {
  position: relative;
  color: var(--wc);
  border: 3px solid var(--wc);
}

.btn.wc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: -1;
  background: var(--mc);
  transition: 0.5s;
}

.btn.wc:hover::before {
  top: auto;
  bottom: 0;
  height: 100%;
}

.btn.mc {
  color: var(--mc);
  border: 3px solid var(--mc);
}

.list_dot > * {
  position: relative;
  padding: 0 0 0 15rem;
}

.list_dot > *::before {
  content: "";
  position: absolute;
  top: 7rem;
  left: 0;
  width: 2rem;
  height: 2rem;
  background: var(--mc);
}

.section {
  padding: 100rem 0;
}

.section.gc {
  background: var(--gc);
}

.wrap {
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

.header.on {
  background: var(--wc);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.header .header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120rem;

  /* 높이만 transition */
  transition: height 0.5s;
}

.header.on .header_wrap {
  height: 80rem;
}

.header h1 {
  font-size: 0;
}

.header h1 img {
  height: 39rem;
}

.header.on h1 img:last-child {
  filter: invert();
}

.header .gnb {
}

.header .gnb .main_menu {
  display: flex;
}

.header .gnb .main_menu > li {
  position: relative;
  padding: 0 30px;
}

.header .gnb .main_menu a {
  display: block;
  color: var(--wc);
  font-size: 18rem;
  line-height: 120rem;
}

.header.on .gnb .main_menu a {
  color: var(--dc);
}

.header .gnb .main_menu .sub_menu {
  position: absolute;
  top: 130rem;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--wc);
  width: 180rem;
  text-align: center;

  padding: 15rem 0;
  border-radius: 20rem;
  border: 2px solid var(--lc);

  opacity: 0;
  visibility: hidden;

  transition: 0.5s;
}

.header .gnb .main_menu > li:hover .sub_menu {
  top: 100rem;
  opacity: 1;
  visibility: visible;
}

.header .gnb .main_menu > li:hover .sub_menu {
  top: 90rem;
}

.header .gnb .sub_menu li ~ li {
  border-top: 1px solid var(--lc);
}

.header .gnb .sub_menu a {
  display: block;
  color: var(--dc);
  font-size: 15rem;
  line-height: 40rem;
}

.login_area .member {
  display: flex;
  gap: 30px;
}

.login_area .member a {
  font-size: 15rem;
  color: var(--wc);
}

.header.on .login_area .member a {
  color: var(--dc);
}

.login_area .member li {
  position: relative;
}

.login_area .member li ~ li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15rem;
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--wc);
}

.header.on .login_area .member li ~ li::before {
  background: var(--dc);
}

.main_visual {
  position: relative;
  height: 100vh;
}

.main_slide {
  border-radius: 0 0 180rem 0;
  overflow: hidden;
}

.main_slide .itm {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.main_slide .itm .slide-image {
  position: absolute;
  inset: 0 0 0 0;
}

.main_slide .itm .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align: center;
}

.main_slide .itm .img_box {
  margin: 0 0 50rem 0;
}

.main_slide .itm p {
  color: var(--wc);
  margin: 0 0 50rem 0;
  text-align: center;
  font-size: 17rem;
  font-weight: 300;
  line-height: 26rem;
  transform: translate(-100rem, 0);
  opacity: 0;
  transition: 0.5s 1s;
}

.main_slide .itm.on p {
  opacity: 1;
  transform: translate(0, 0);
}

.main_slide .itm.on .btn {
  opacity: 0;
  transform: translate(-100rem, 0);
  transition: 0.5s 1.5s;
}

.main_slide .itm.on .btn {
  opacity: 1;
  transform: translate(0, 0);
}

/* .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} */

.main_visual .itm01 .slide-image {
  height: 100vh;
  background: url(../images/img_visual01.jpg) no-repeat center center/cover;
}
.main_visual .itm02 .slide-image {
  height: 100vh;
  background: url(../images/img_visual02.jpg) no-repeat center center/cover;
}

.main_visual .arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 998;
  transform: translate(-50%, -50%);
  max-width: 1600rem;
  width: 100%;
}

.main_visual .arrows i {
  position: absolute;
  top: 0;
  cursor: pointer;
}

.main_visual .arrows .left {
  position: absolute;
  top: 0;
  left: 0;

  transition: 0.3s;
}

.main_visual:hover .arrows .left {
  opacity: 0.9;
  transform: translate(40rem, 0);
}

.main_visual .arrows .right {
  position: absolute;
  top: 0;
  right: 0;

  transition: 0.3s;
}

.main_visual:hover .arrows .right {
  opacity: 0.9;
  transform: translate(-40rem, 0);
}

.main_visual .arrows i::before {
  font-size: 40rem;
  color: var(--wc);
  padding: 30rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.main_visual .scroll {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 999;
}

.main_visual .scroll span {
  position: relative;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}

.main_visual .scroll span::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 1px;
  height: 100px;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, 0);
}

.main_visual .scroll span::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  transform: translate(-50%, 0);
  animation: circle 1.5s infinite cubic-bezier(0.42, 0, 0.18, 0.88);
}

@keyframes circle {
  0% {
    transform: translate(-50%, 0);
    outline: 0 solid rgba(255, 255, 255, 1);
  }

  90% {
    outline: 0px solid rgba(255, 255, 255, 1);
  }

  100% {
    transform: translate(-50%, 90px);
    outline: 20px solid rgba(255, 255, 255, 0);
  }
}

.main_visual .btn_circle {
  position: absolute;
  bottom: -100rem;
  right: 300rem;
  z-index: 998;

  width: 200rem;
  height: 200rem;
}

.main_visual .btn_circle .case {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200rem;
  height: 200rem;
  background: var(--mc);
  color: var(--wc);
  font-size: 20rem;
  border-radius: 50%;
  text-align: center;
  line-height: 26rem;
}

.main_visual .btn_circle:hover .case {
  animation: heartBeat 1s infinite;
}

.main_visual .btn_circle .case::before {
  content: "";
  display: block;
  width: 26rem;
  height: 30rem;
  background: url(../images/icon_apply.svg) no-repeat center center/cover;
  margin: 0 0 20rem 0;
}

.main_content {
}

.main_content .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rem;
}

.main_content .content > * {
  padding: 80rem 60rem;
}

.main_content .content .left {
  position: relative;
  border-radius: 50rem;
  background: var(--gc);
  overflow: hidden;
}

.main_content .content .left::after {
  content: "";
  position: absolute;
  bottom: -20rem;
  right: 0;
  width: 300rem;
  height: 150rem;
  background: url(../images/img_logo2.svg) no-repeat right bottom;
  filter: invert();
}

.main_content .content h3 {
  font-size: 24rem;
  font-weight: 700;
  margin: 0 0 17rem 0;
}

.main_content .content .left {
  opacity: 0;
  transform: translate(0, 100rem);
  transition: 0.8s;
}

.main_content.on .content .left {
  opacity: 1;
  transform: translate(0, 0);
}

.main_content .content .right {
  opacity: 0;
  transform: translate(0, 100rem);
  transition: 0.8s 0.5s;
}

.main_content.on .content .right {
  opacity: 1;
  transform: translate(0, 0);
}

.main_content .content .left p {
  font-size: 15rem;
  font-weight: 300;
  line-height: 20rem;
  margin: 0 0 57rem 0;
}

.main_content .content .right .desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30rem 0;
  padding: 0 0 15rem 0;
  border-bottom: 1px dotted var(--lc);
}

.main_content .content .right .desc i {
  background: var(--lc);
  padding: 15rem 16rem;
  border-radius: 50%;
  font-size: 30rem;
}

.main_content .content .right .tel {
  font-size: 40rem;
  font-weight: 700;
}

.main_content .content .list > * {
  display: grid;
  grid-template-columns: 100rem 1fr;
  margin: 0 0 20rem 0;
  line-height: 1.6;
}

.main_content .content .list .ls2 {
  /* 자간 */
  letter-spacing: 29rem;
}

.main_content .content .list::before {
  top: 10rem;
}

/* .main_notice {
  padding: 0 0 100rem 0;
} */

.main_notice .content {
  opacity: 0;
  transform: translate(0, 100rem);
  transition: 0.8s;
}

.main_notice.on .content {
  opacity: 1;
  transform: translate(0, 0);
}

.main_notice h2 {
  font-size: 50rem;
  font-weight: 700;
  margin: 0 0 27rem 0;
}

.main_notice p {
  font-size: 15rem;
  font-weight: 300;
  line-height: 20rem;
  margin: 0 0 57rem 0;
}

.main_notice .content {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.main_notice .right_slide {
  position: relative;
  /* overflow: hidden; */
  min-width: 0;
}

.main_notice .right_slide::before {
  content: "";
  position: absolute;
  top: -27rem;
  left: -42rem;
  width: 100rem;
  height: 100rem;
  outline: 55rem solid var(--mc);
  border-radius: 50%;
}

.main_notice .arrows i {
  padding: 14rem 17rem;
  font-size: 25rem;
  background: var(--dc);
  color: var(--wc);
  border-radius: 50%;
  margin: 0 10rem 0 0;
  cursor: pointer;
}

.main_notice img {
  width: 100%;
  height: 300rem;
  /* 이미지 스케일 유지 */
  object-fit: cover;
}

.main_notice .card {
  padding: 15rem;
  background: var(--gc);
  border-radius: 10rem;
}

.main_notice .card .img_box {
  border-radius: 5rem;
  overflow: hidden;
  margin: 0 0 15rem 0;
}

.main_notice .card strong {
  display: block;
  margin: 10rem 0;
}

.main_banner .content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rem;
  background: var(--mc);
  color: var(--wc);
  margin: 0 auto -50rem auto;

  border-radius: 50rem;
  box-shadow: 5rem 5rem 20rem rgba(0, 0, 0, 0.2);

  transition: 0.5s;
  transform: translate(0, 100rem);

  z-index: 998;
}

.main_banner.on .content {
  transform: translate(0, 0);
}

.main_banner .content a {
  display: block;
  padding: 60rem 80rem;
}

.main_banner .content h3 {
  font-size: 30rem;
  font-weight: 500;
  margin: 0 0 20rem 0;
}

.main_banner .content p {
  font-size: 15rem;
  line-height: 21rem;
}

.main_banner .content li {
  position: relative;
}

.main_banner .content li a::after {
  content: "";
  position: absolute;
  right: 80rem;
  top: 50%;
  transform: translate(0, -50%);
  width: 100rem;
  height: 100rem;
  background: url(../images/icon_experience.svg) no-repeat center center;
}

.main_banner .content li:last-child a::after {
  background: url(../images/icon_theater.svg) no-repeat center center;
}

.main_banner .content li ~ li::before {
  content: "";
  position: absolute;
  left: -15rem;
  top: 30rem;
  bottom: 30rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.footer {
}

.footer .top {
  position: relative;
  border-radius: 180rem 0 0 0;
  overflow: hidden;
  background: #434250 url(../images/bg_banner.jpg) no-repeat center bottom;
  padding: 200rem 0 300rem 0;
}

.footer .top .content {
  text-align: center;
}

.footer .top .content .img_box {
  width: 250rem;
  margin: 0 auto 30rem auto;
}

.footer .top .content .txt span {
  position: relative;
  font-size: 30rem;
  font-weight: 500;
  font-family: "Noto Serif KR";
  color: #464649;
}

.footer .top .content .txt span::before {
  content: "“ 경상북도 울릉읍 독도리 1-96 ”";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 7px);
  color: #dddcdf;

  width: 0%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid #dddcdf;
  animation: typing 5s steps(20) infinite;
}

@keyframes typing {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.footer .top .dots span {
  position: absolute;

  left: 50%;
  width: 5rem;
  height: 5rem;
  background: var(--gc);
  border-radius: 50%;
  font-family: "Noto Serif KR";
  font-size: 0;
}

.footer .top .dots .east::before {
  content: "동도";
  position: absolute;
  width: 30rem;
  top: -40rem;
  left: -13rem;
  font-size: 14rem;
  color: var(--gc);
}

.footer .top .dots .east::after {
  content: "";
  position: absolute;
  top: -18rem;
  left: -18rem;
  width: 40rem;
  height: 40rem;
  background: rgba(249, 249, 249, 0.3);
  border-radius: 50%;

  animation: motion 4s infinite;
}

.footer .top .dots .west::before {
  content: "서도";
  position: absolute;
  width: 30rem;
  top: -40rem;
  left: -13rem;
  font-size: 14rem;
  color: var(--gc);
}

.footer .top .dots .west::after {
  content: "";
  position: absolute;
  top: -18rem;
  left: -18rem;
  width: 40rem;
  height: 40rem;
  background: rgba(249, 249, 249, 0.3);
  border-radius: 50%;

  animation: motion 4s infinite;
}

@keyframes motion {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.footer .top .dots span:nth-child(1) {
  bottom: 310rem;
  margin: 0 0 0 -310rem;
}

.footer .top .dots span:nth-child(2) {
  bottom: 200rem;
  margin: 0 0 0 160rem;
}

.footer .bottom {
  padding: 50rem 0 100rem 0;
  background: #393846;
  color: var(--gc);
  font-size: 15rem;
  font-weight: 300;
}

.footer .bottom .btm_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer .bottom .customer {
  display: flex;
  gap: 40rem;
  margin: 0 0 10rem 0;
}

.footer .bottom .customer > * {
  position: relative;
}

.footer .bottom .customer li ~ li::before {
  content: "";
  position: absolute;
  left: -20rem;
  top: 50%;
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--lc);
}

.footer .bottom .adress {
  margin: 0 0 30rem 0;
}

.footer .bottom .copyright {
  font-size: 12rem;
  color: var(--lc);
}

.footer .bottom .btn_circle .case {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 145rem;
  height: 145rem;
  background: var(--sc);
  color: var(--wc);
  font-size: 15rem;
  border-radius: 50%;
  text-align: center;
  line-height: 20rem;
}

.footer .bottom .btn_circle:hover .case {
  animation: heartBeat 1s infinite;
}

.footer .bottom .btn_circle .case::before {
  content: "";
  display: block;
  width: 26rem;
  height: 30rem;
  background: url(../images/icon_map.svg) no-repeat center center;
  margin: 0 0 20rem 0;
}

.moblie_btn {
  display: none;
}

/* 반응형 */

@media (max-width: 768px) {
  * {
    outline: 1px solid --tomato;
  }

  html {
    font-size: 1px;
  }
  .section {
    padding: 5% 0;
  }

  .wrap {
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .header.on {
    background: var(--wc);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  }

  .header .header_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rem;

    /* 높이만 transition */
    transition: height 0.5s;
  }

  .header.on .header_wrap {
    height: 120rem;
  }

  .header h1 {
    position: relative;
    z-index: 1000;
    font-size: 0;
  }

  .header h1 img {
    height: 39rem;
  }

  .header.oo h1 img:last-child {
    filter: invert(0);
  }

  .header .gnb {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    width: 100%;
    background: #454351 url(../images/bg_banner.jpg) no-repeat center bottom;
    border-left: 1px solid var(--lc);
    transition: 0.5s;
  }

  .header .gnb.on {
    right: 0;
  }

  .header .gnb .main_menu {
    display: flex;
    flex-direction: column;
    padding: 150rem 0 0 0;
  }

  .header .gnb .main_menu > li {
    position: relative;
    padding: 0 30px;
  }

  .header .gnb .main_menu a {
    display: block;
    color: var(--wc);
    font-size: 18rem;
    line-height: 40rem;
  }

  .header.on .gnb .main_menu a {
    color: var(--wc);
  }

  .header .gnb .main_menu .sub_menu {
    position: static;
    transform: translate(0, 0);
    background: var(--wc);
    width: auto;
    text-align: left;

    padding: 0 0;
    border-radius: 0;
    border: 0 solid var(--lc);

    opacity: 1;
    visibility: visible;

    transition: none;

    display: none;
  }

  .header .gnb .main_menu > li:hover .sub_menu {
    top: 100rem;
    opacity: 1;
    visibility: visible;
  }

  .header .gnb .main_menu > li:hover .sub_menu {
    top: 90rem;
  }

  .header .gnb .sub_menu li ~ li {
    border-top: 1px solid var(--lc);
  }

  .header .gnb .sub_menu a {
    display: block;
    padding: 0 0 0 15rem;
    color: var(--dc);
    font-size: 15rem;
    line-height: 40rem;
  }

  .login_area .member {
    display: flex;
    gap: 30px;
  }

  .login_area .member a {
    font-size: 15rem;
    color: var(--wc);
  }

  .header .login_area {
    display: none;
  }

  .header.on .login_area .member a {
    color: var(--dc);
  }

  .login_area .member li {
    position: relative;
  }

  .login_area .member li ~ li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15rem;
    width: 2px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: var(--wc);
  }

  .header.on .login_area .member li ~ li::before {
    background: var(--dc);
  }

  .main_visual {
    position: relative;
    height: 100vh;
  }

  .main_slide {
    border-radius: 0 0 30rem 30rem;
    overflow: hidden;
  }

  .main_slide .itm {
    position: relative;
    overflow: hidden;
    height: 100vh;
  }

  .main_slide .itm .slide-image {
    position: absolute;
    inset: 0 0 0 0;
  }

  .main_slide .itm .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;

    width: 100%;
    padding: 0 30rem;

    text-align: center;
  }

  .main_slide .itm .img_box {
    margin: 0 0 50rem 0;
  }

  .main_slide .itm p {
    word-break: keep-all;
    color: var(--wc);
    margin: 0 0 50rem 0;
    text-align: center;
    font-size: 3vw;
    font-weight: 300;
    line-height: 1.4;
    transform: translate(-100rem, 0);
    opacity: 0;
    transition: 0.5s 1s;
  }

  .main_slide .itm.on p {
    opacity: 1;
    transform: translate(0, 0);
  }

  .main_slide .itm .btn {
    opacity: 0;
    transform: translate(100rem, 0);
    transition: 0.5s 1.5s;
  }

  .main_slide .itm.on .btn {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  } */

  .main_visual .itm01 .slide-image {
    height: 100vh;
    background: url(../images/img_visual01.jpg) no-repeat center center/cover;
  }
  .main_visual .itm02 .slide-image {
    height: 100vh;
    background: url(../images/img_visual02.jpg) no-repeat center center/cover;
  }

  .main_visual .arrows {
    position: absolute;
    top: calc(50% + 100rem);
    left: 50%;
    z-index: 998;
    transform: translate(-50%, -50%);
    max-width: 1600rem;
    width: 100%;
  }

  .main_visual .arrows i {
    position: absolute;
    top: 0;
    cursor: pointer;
  }

  .main_visual .arrows .left {
    left: 0;
  }

  .main_visual .arrows .right {
    right: 0;
  }

  .main_visual .arrows i::before {
    font-size: 20rem;
    color: var(--wc);
    padding: 10rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0;
  }

  .main_visual .scroll {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 999;
  }

  .main_visual .scroll span {
    position: relative;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
  }

  .main_visual .scroll span::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 1px;
    height: 100px;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, 0);
  }

  .main_visual .scroll span::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    transform: translate(-50%, 0);
    animation: circle 1.5s infinite cubic-bezier(0.42, 0, 0.18, 0.88);
  }

  @keyframes circle {
    0% {
      transform: translate(-50%, 0);
      outline: 0 solid rgba(255, 255, 255, 1);
    }

    90% {
      outline: 0px solid rgba(255, 255, 255, 1);
    }

    100% {
      transform: translate(-50%, 90px);
      outline: 20px solid rgba(255, 255, 255, 0);
    }
  }

  .main_visual .btn_circle {
    position: absolute;
    bottom: -100rem;
    right: 30rem;
    z-index: 999;

    width: 200rem;
    height: 200rem;
  }

  .main_visual .btn_circle .case {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 200rem;
    height: 200rem;
    background: var(--mc);
    color: var(--wc);
    font-size: 20rem;
    border-radius: 50%;
    text-align: center;
    line-height: 26rem;
  }

  .main_visual .btn_circle:hover .case {
    animation: heartBeat 1s infinite;
  }

  .main_visual .btn_circle .case::before {
    content: "";
    display: block;
    width: 26rem;
    height: 30rem;
    background: url(../images/icon_apply.svg) no-repeat center center/cover;
    margin: 0 0 20rem 0;
  }

  .main_content {
  }

  .main_content .content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30rem;
  }

  .main_content .content > * {
    padding: 30rem 15rem 80rem;
  }

  .main_content .content .left {
    position: relative;
    border-radius: 10rem;
    background: var(--gc);
    overflow: hidden;
  }

  .main_content .content .left::after {
    content: "";
    position: absolute;
    bottom: -20rem;
    right: 0;
    width: 300rem;
    height: 150rem;
    background: url(../images/img_logo2.svg) no-repeat right bottom;
    filter: invert();
  }

  .main_content .content h3 {
    font-size: 24rem;
    font-weight: 700;
    margin: 0 0 17rem 0;
  }

  .main_content .content .left {
    opacity: 0;
    transform: translate(0, 100rem);
    transition: 0.8s;
  }

  .main_content.on .content .left {
    opacity: 1;
    transform: translate(0, 0);
  }

  .main_content .content .right {
    order: -1;
    opacity: 0;
    transform: translate(0, 100rem);
    transition: 0.8s 0.5s;
  }

  .main_content.on .content .right {
    opacity: 1;
    transform: translate(0, 0);
  }

  .main_content .content .left p {
    font-size: 15rem;
    font-weight: 300;
    line-height: 20rem;
    margin: 0 0 57rem 0;
  }

  .main_content .content .right .desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 30rem 0;
    padding: 0 0 15rem 0;
    border-bottom: 1px dotted var(--lc);
  }

  .main_content .content .right .desc i {
    background: var(--lc);
    padding: 15rem 16rem;
    border-radius: 50%;
    font-size: 30rem;
  }

  .main_content .content .right .tel {
    font-size: 40rem;
    font-weight: 700;
  }

  .main_content .content .list > * {
    display: grid;
    grid-template-columns: 100rem 1fr;
    margin: 0 0 20rem 0;
    line-height: 1.6;
  }

  .main_content .content .list .ls2 {
    /* 자간 */
    letter-spacing: 29rem;
  }

  .main_content .content .list::before {
    top: 10rem;
  }

  /* .main_notice {
    padding: 0 0 100rem 0;
  } */

  .main_notice .content {
    opacity: 0;
    transform: translate(0, 100rem);
    transition: 0.8s;
  }

  .main_notice.on .content {
    opacity: 1;
    transform: translate(0, 0);
  }

  .main_notice h2 {
    font-size: 50rem;
    font-weight: 700;
    margin: 0 0 27rem 0;
  }

  .main_notice p {
    font-size: 15rem;
    font-weight: 300;
    line-height: 20rem;
    margin: 0 0 57rem 0;
  }

  .main_notice .content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .main_notice .content > * {
    padding: 30rem 15rem 80rem;
  }

  .main_notice .right_slide {
    position: relative;
    /* overflow: hidden; */
    min-width: 0;
  }

  .main_notice .right_slide::before {
    display: none;
  }

  .main_notice .arrows i {
    padding: 14rem 17rem;
    font-size: 25rem;
    background: var(--dc);
    color: var(--wc);
    border-radius: 50%;
    margin: 0 10rem 0 0;
    cursor: pointer;
  }

  .main_notice img {
    width: 100%;
    height: 300rem;
    /* 이미지 스케일 유지 */
    object-fit: cover;
  }

  .main_notice .card {
    padding: 15rem;
    background: var(--gc);
    border-radius: 10rem;
  }

  .main_notice .card .img_box {
    border-radius: 5rem;
    overflow: hidden;
    margin: 0 0 15rem 0;
  }

  .main_notice .card strong {
    display: block;
    margin: 10rem 0;
  }

  .main_banner .content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    background: var(--mc);
    color: var(--wc);
    margin: 0 auto -50rem auto;

    border-radius: 10rem;
    box-shadow: 5rem 5rem 20rem rgba(0, 0, 0, 0.2);

    transition: 0.5s;
    transform: translate(0, 100rem);

    z-index: 998;
  }

  .main_banner.on .content {
    transform: translate(0, 0);
  }

  .main_banner .content a {
    display: block;
    padding: 30rem 30rem;
  }

  .main_banner .content h3 {
    font-size: 30rem;
    font-weight: 500;
    margin: 0 0 20rem 0;
  }

  .main_banner .content p {
    font-size: 15rem;
    line-height: 21rem;
  }

  .main_banner .content li {
    position: relative;
  }

  .main_banner .content li a::after {
    content: "";
    position: absolute;
    right: 30rem;
    top: 30rem;
    transform: translate(0, 0);
    width: 50rem;
    height: 50rem;
    background: url(../images/icon_experience.svg) no-repeat center center;
  }

  .main_banner .content li:last-child a::after {
    background: url(../images/icon_theater.svg) no-repeat center center;
  }

  .main_banner .content li ~ li::before {
    content: "";
    position: absolute;
    left: 15rem;
    right: 15rem;
    top: auto;
    bottom: auto;
    width: auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
  }

  .footer {
  }

  .footer .top {
    position: relative;
    border-radius: 30rem 30rem 0 0;
    overflow: hidden;
    background: #434250 url(../images/bg_banner.jpg) no-repeat center bottom;
    padding: 200rem 0 300rem 0;
  }

  .footer .top .content {
    text-align: center;
  }

  .footer .top .content .img_box {
    width: 250rem;
    margin: 0 auto 30rem auto;
  }

  .footer .top .content .txt span {
    position: relative;
    font-size: 30rem;
    font-weight: 500;
    font-family: "Noto Serif KR";
    color: #464649;
  }

  .footer .top .content .txt span::before {
    content: "“ 경상북도 울릉읍 독도리 1-96 ”";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 7px);
    color: #dddcdf;

    width: 0%;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid #dddcdf;
    animation: typing 5s steps(20) infinite;
  }

  @keyframes typing {
    0% {
      width: 0%;
    }
    50% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
  }

  .footer .top .dots span {
    position: absolute;

    left: 50%;
    width: 5rem;
    height: 5rem;
    background: var(--gc);
    border-radius: 50%;
    font-family: "Noto Serif KR";
    font-size: 0;
  }

  .footer .top .dots .east::before {
    content: "동도";
    position: absolute;
    width: 30rem;
    top: -40rem;
    left: -13rem;
    font-size: 14rem;
    color: var(--gc);
  }

  .footer .top .dots .east::after {
    content: "";
    position: absolute;
    top: -18rem;
    left: -18rem;
    width: 40rem;
    height: 40rem;
    background: rgba(249, 249, 249, 0.3);
    border-radius: 50%;

    animation: motion 4s infinite;
  }

  .footer .top .dots .west::before {
    content: "서도";
    position: absolute;
    width: 30rem;
    top: -40rem;
    left: -13rem;
    font-size: 14rem;
    color: var(--gc);
  }

  .footer .top .dots .west::after {
    content: "";
    position: absolute;
    top: -18rem;
    left: -18rem;
    width: 40rem;
    height: 40rem;
    background: rgba(249, 249, 249, 0.3);
    border-radius: 50%;

    animation: motion 4s infinite;
  }

  @keyframes motion {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }

  .footer .top .dots span:nth-child(1) {
    bottom: 310rem;
    margin: 0 0 0 -310rem;
  }

  .footer .top .dots span:nth-child(2) {
    bottom: 200rem;
    margin: 0 0 0 160rem;
  }

  .footer .bottom {
    padding: 50rem 0 100rem 0;
    background: #393846;
    color: var(--gc);
    font-size: 15rem;
    font-weight: 300;
  }

  .footer .bottom .btm_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .footer .bottom .customer {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    margin: 0 0 20rem 0;
  }

  .footer .bottom .customer > * {
    position: relative;
  }

  .footer .bottom .customer li ~ li::before {
    content: "";
    position: absolute;
    left: -20rem;
    top: 50%;
    width: 2px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: var(--lc);
  }

  .footer .bottom .adress {
    margin: 0 0 30rem 0;
    line-height: 1.4;
    word-break: keep-all;
  }

  .footer .bottom .copyright {
    font-size: 12rem;
    color: var(--lc);
  }

  .footer .bottom .btn_circle .case {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 145rem;
    height: 145rem;
    background: var(--sc);
    color: var(--wc);
    font-size: 15rem;
    border-radius: 50%;
    text-align: center;
    line-height: 20rem;
  }

  .footer .bottom .btn_circle:hover .case {
    animation: heartBeat 1s infinite;
  }

  .footer .bottom .btn_circle .case::before {
    content: "";
    display: block;
    width: 26rem;
    height: 30rem;
    background: url(../images/icon_map.svg) no-repeat center center;
    margin: 0 0 20rem 0;
  }

  .moblie_btn {
    display: block;

    position: fixed;
    top: 30rem;
    right: 30rem;
    z-index: 1000;

    font-size: 30rem;
    color: var(--dc);
    padding: 5px 7px;
    background: var(--gc);
  }
}