/* 포커스 라인 */
:focus {
  outline: 2px solid var(--black-60) !important;  /* 웹접근성심사 CSS */
  /*outline: 2px solid var(--red) !important;*/
}

.m_sys_003 .contents-right table tr td.depth2 {
  padding-left: 30px;
}

.m_sys_003 .contents-right table tr td.depth3 {
  padding-left: 47px;
}

.m_sys_002 table tr td.depth2 {
  padding-left: 50px!important;
}
.m_sys_002 table tr td.depth3 {
  padding-left: 65px!important;
}

.m_sys_002 table tbody {
  text-align: center;
}

.m_sys_002 table tbody td:nth-child(2) {
  text-align: left;
}

/* Custom Select */
.custom-select2 {
  position: relative;
}
.custom-select2 select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  background: url('/image/select-arrow-b.svg') no-repeat right 15px center;
  width: 48%;
}
/*
.custom-select2 {
  position: relative;
  min-width: 110px;
}
.custom-select2::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 12px;
  height: 12px;
  background: url(/image/bootstrap-icons/caret-down-fill.svg) no-repeat right top;
  background-size: 12px;
  pointer-events: none;
}
.custom-select2 select {
  border: 1px solid transparent;
  background: var(--color-basic40);
  padding: 3px 15px;
  padding-right: 30px;
  border-radius: 15px;
  -webkit-appearance : none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 48%;
}
.custom-select2 select option {
  background: var(--color-white);
}
*/
/* Loading */
.loading-layer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}
.loading span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  animation: loading 0.5s linear infinite;
}
.loading span:nth-child(1) {
  background: var(--color-primary20);
  animation-delay: 0.1s;
}
.loading span:nth-child(2) {
  background: var(--color-primary30);
  animation-delay: 0.2s;
}
.loading span:nth-child(3) {
  background: var(--color-primary40);
  animation-delay: 0.3s;
  margin-right: 0;
}

@keyframes loading {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}

.sortable {
    cursor: pointer;
}

.float-right {
  float: right;
}

.btn-sidebar button img.active {
  transform: translateY(-1px) rotate(-90deg) scale(1.7);
  filter: invert(85%) sepia(71%) saturate(2214%) hue-rotate(175deg) brightness(83%) contrast(91%);
}

.btns-prev-next button {
  font-size: 1.25rem;
  padding: 20px 120px;
  border-radius: 10px;
}

.btn-delete.step3 {
  left: 420px;
}

.input-field-box textarea{
  font-size: 1.125rem;
}

.reserve-info .addDiv div:not(:first-child) {
  margin: 10px 0;
}

/* 사용자 FAQ 페이징 처리 CSS -> style.css 파일에 있는 소스 추가 */
.faq .page-view{
  display: block;
}

/* 241104 추가 */
.center-map .welcome-inner {
  background: url(/image/guide-welcome-img-01.jpg) no-repeat center center / cover;;
}
.reserve-guide .welcome-inner{
  background: url(/image/welcome-img-01.jpg) no-repeat center center / cover;
}
.faq .welcome-inner{
  background: url(/image/notice-welcome-img-01.jpg) no-repeat center center / cover;
}
.inquiry-02 .welcome-inner{
  background: url(/image/notice-welcome-img-01.jpg) no-repeat center center / cover;
}

/* 헤리티지투어, 교통안내 타이틀 이미지 CSS */
.traffic .welcome-inner {
  background: url(/image/traffic.png) no-repeat center center / cover;;
}

/* 주변관광지 타이틀 이미지 CSS */
.leisure .welcome-inner {
  background: url(/image/leisure.png) no-repeat center center / cover;;
}
.nature .welcome-inner {
  background: url(/image/nature.png) no-repeat center center / cover;;
}
.culture .welcome-inner {
  background: url(/image/culture.png) no-repeat center center / cover;;
}
.education .welcome-inner {
  background: url(/image/education.png) no-repeat center center / cover;;
}
.foods .welcome-inner {
  background: url(/image/food.png) no-repeat center center / cover;;
}

/* 헤리티지 투어 간격조정(241106 추가) */
.ott li::before{
  margin-right: 10px !important;
}

/* 예약조회 - [예약취소] 상태 : 주황 */
.look-up-item-box .title .state.cancel {
  background: #FFFAF8;
  color: #FF0000;
  border: 1px solid #FF0000;
}

/* 메인비주얼 asan-visual.css 추가(241101 추가)
- 동상 마우스 오버 시 기념관 팝업 노출
- 비주얼 하단 아이콘 변경 */
@media (min-width: 751px) {
  /* PC - 예약 신청 버튼 */
  .btn-calender {
    width: 70px;
    height: 70px;
    line-height: 65px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 60px;
    bottom: 15px;
    z-index: 60;
    background: var(--secondary);
    border: 1px solid transparent;
  }
  .btn-calender img {
    filter: invert(0);
    width: 40px;
    height: 40px;
  }

  /*:root {
    --vh: 100%;
  }
  body,
  html {
    margin: 0;
    padding: 0;
    font-family: "Pretendard", sans-serif;
  }
  body * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*font-weight: 300;
  }
  ul,
  dl,
  dt,
  dd {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ol {
    margin: 0;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  a:hover {
    text-decoration: none;
  }
  input,
  select,
  textarea,
  fieldset,
  button {
    outline: none;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: auto;
    border: 0;
    cursor: pointer;
  }

  input::placeholder, textarea::placeholder {
    color: $gray-two;
  }

  table {
    border-collapse: collapse;
  }
  em {
    font-style: italic;
  }
  strong {
    font-weight: bold;
  }
  strong > * {
    font-weight: bold;
  }
  b {
    font-weight: bold;
  }
  b > * {
    font-weight: bold;
  }
  strong em {
    font-weight: bold;
  }
  textarea {
    resize: none;
  }
  .hidden {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    display: inline-block;
    margin: 0;
  }
  img {
    max-width: 100%;
  }
  p {
    margin: 0;
  }
  label {
    font-weight: 400;
  }
  input {
    font-size: 1.625rem;
    font-weight: 400;

    color: $gray-two;

    line-height: 2.25rem;
  }*/
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Thin.woff") format("woff");
    font-weight: 100;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-SemiBold.woff") format("woff");
    font-weight: 600;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Black.woff") format("woff");
    font-weight: 900;
    font-display: swap;
  }
  @font-face {
    font-family: "ONE-MOBILE-TITLE";
    src: url("../css/font/ONE-MOBILE-TITLE-OTF.woff") format("woff");
    font-display: swap;
  }
  .main-visual {
    min-width: 93.75rem;
    max-width: 120rem;
    width: 100%;
    height: 56.875rem;
    margin: 0 auto;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(/image/main/main-visual/main-visual-bg.png);
    overflow: hidden;
  }
  .main-visual .tour-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    min-width: 93.75rem;
    max-width: 93.75rem;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3;
  }
  .main-visual .tour-wrap .tours {
    position: relative;
    width: 100%;
    height: 100%;
    /*
    .cows {
      display: none;
      display: block;
      position: absolute;
      z-index: 6;
      opacity: 1;
      top: ppr(286);
      left: ppr(47);
      .cow {
        position: absolute;
        transition: all .5s ease;
        animation-duration: 5s;
        animation-direction: normal;
        animation-iteration-count: infinite;
        //animation-play-state: paused;
        animation-timing-function: 1s;
        animation-fill-mode: both;
        animation-delay: 1s;
        &.cow1 {
          animation-name: cow1;
        }
        &.cow2 {
          animation-name: cow2;
        }
      }
    }
    */
  }
  .main-visual .cow-obj-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    min-width: 93.75rem;
    max-width: 93.75rem;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
  }
  .main-visual .cow-obj-wrap .cow-obj {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .main-visual .cow-obj-wrap .cow-obj .cow {
    position: absolute;
    z-index: 0;
    opacity: 1;
    top: 18.5rem;
    left: 2.9375rem;
    position: absolute;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-animation-duration: 7.5s;
    animation-duration: 7.5s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: 1s;
    animation-timing-function: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .main-visual .cow-obj-wrap .cow-obj .cow.cow1 {
    -webkit-animation-name: cow1;
    animation-name: cow1;
  }
  .main-visual .cow-obj-wrap .cow-obj .cow.cow2 {
    -webkit-animation-name: cow2;
    animation-name: cow2;
  }
  .main-visual .obj-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
    min-width: 93.75rem;
    max-width: 93.75rem;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
  }
  .main-visual .obj-wrap .objs {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .main-visual .obj-wrap .objs .car {
    position: absolute;
    z-index: 6;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: 1s;
    animation-timing-function: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .main-visual .obj-wrap .objs .car.car01 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-name: car1;
    animation-name: car1;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    top: 36.8125rem;
    left: 24.375rem;
  }
  .main-visual .obj-wrap .objs .car.car02 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-name: car2;
    animation-name: car2;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    top: 42.5rem;
    left: 36.5rem;
  }
  .main-visual .obj-wrap .objs .car.car03 {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-name: car3;
    animation-name: car3;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    top: 46.125rem;
    left: 45.5rem;
  }
  .main-visual .obj-wrap .objs .tractor {
    position: absolute;
    top: 10.75rem;
    left: 84.625rem;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 2;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: 1s;
    animation-timing-function: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: tractor;
    animation-name: tractor;
  }
  .main-visual::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    z-index: -1;
    opacity: 0;
  }
  .main-visual.active::after {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    opacity: 1;
  }
  .main-visual .bird1 {
    position: absolute;
    top: 0;
    left: 6.25rem;
    opacity: 0;
    -webkit-animation-name: bird1;
    animation-name: bird1;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: 1s;
    animation-timing-function: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .main-visual .bird2 {
    position: absolute;
    top: 0;
    left: 75rem;
    opacity: 0;
    -webkit-animation-name: bird2;
    animation-name: bird2;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: 1s;
    animation-timing-function: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .main-visual .building {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    cursor: pointer;
    z-index: 2;
  }
  .main-visual .building.active {
    opacity: 1;
    z-index: 4;
  }
  .main-visual #building1 {
    top: 23rem;
    left: 64.625rem;
  }
  .main-visual #building2 {
    top: 21.9375rem;
    left: 6.25rem;
  }
  .main-visual #building3 {
    top: 14.125rem;
    left: 2.9375rem;
  }
  .main-visual #building4 {
    top: 9.6875rem;
    left: 5.375rem;
  }
  .main-visual #building5 {
    top: 18.375rem;
    left: 37.0625rem;
  }
  .main-visual #building6 {
    top: 27.375rem;
    left: 26.125rem;
  }
  .main-visual #building7 {
    top: 17.625rem;
    left: 69.8125rem;
  }
  .main-visual #building8 {
    top: 34.875rem;
    left: 36.875rem;
  }
  .main-visual .building-desc {
    opacity: 0;
    max-width: 26.875rem;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 1rem;
    position: absolute;
    z-index: -1;
  }
  .main-visual .building-desc.active {
    opacity: 1;
    z-index: 10;
  }
  .main-visual .building-desc[data-building=building1] {
    top: 30.625rem;
    left: 47.375rem;
    left: 665px;  /* 아산 정주영 기념관 마우스 hover시 나무 가리는 현상 수정하기 위한 코드 */
  }
  .main-visual .building-desc[data-building=building2] {
    left: 26.75rem;
    bottom: 12.8125rem;
  }
  .main-visual .building-desc[data-building=building3] {
    top: 11.125rem;
    left: 34.875rem;
  }
  .main-visual .building-desc[data-building=building4] {
    top: 9.875rem;
    left: 40.5rem;
  }
  .main-visual .building-desc[data-building=building5] {
    top: 19.5625rem;
    left: 10.625rem;
  }
  .main-visual .building-desc[data-building=building6] {
    top: 27.9375rem;
    left: 39.875rem;
  }
  .main-visual .building-desc[data-building=building7] {
    top: 23.75rem;
    left: 62.5rem;
  }
  .main-visual .building-desc[data-building=building8] {
    top: 32.0625rem;
    left: 51.5rem;
  }
  .main-visual .building-desc .image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .main-visual .building-desc .image img {
    max-width: 100%;
  }
  .main-visual .building-desc .title {
    padding: 1.25rem 0 0.75rem;
    color: #004193;
    font-family: "Pretendard Variable";
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
  }
  .main-visual .building-desc .content {
    color: #565656;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
  }
  .main-visual .building-nav-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 3;
  }
  .main-visual .building-nav-wrap .nav-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .main-visual .building-nav-wrap .nav-wrap.nav-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background-color: #034ea2;
  }
  .main-visual .building-nav-wrap .nav-wrap.nav-left img {
    margin: 0 1.25rem 0 0;
  }
  .main-visual .building-nav-wrap .nav-wrap.nav-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    background-color: #00428b;
  }
  .main-visual .building-nav-wrap .nav-wrap.nav-right img {
    margin: 0 1.25rem 0 3.75rem;
  }
  .main-visual .building-nav-wrap .nav-wrap .building-nav {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    color: #5996da;
    position: relative;
  }
  .main-visual .building-nav-wrap .nav-wrap .building-nav.active {
    color: #ffffff;
  }
  .main-visual .building-nav-wrap .nav-wrap .building-nav.active::before {
    content: "";
    position: absolute;
    top: -0.125rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-top: 0;
    border-bottom: 0.5rem solid #ffbd2e;
    border-left: 0.375rem solid transparent;
    border-right: 0.375rem solid transparent;
  }
  .mobile {
    display: none;
  }
  @-webkit-keyframes bird1 {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(0, 0);
      transform: scale(0.5) translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: scale(1) translate(19.3125rem, -1.75rem);
      transform: scale(1) translate(19.3125rem, -1.75rem);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(56.25rem, -6.25rem);
      transform: scale(0.5) translate(56.25rem, -6.25rem);
    }
  }
  @keyframes bird1 {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(0, 0);
      transform: scale(0.5) translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: scale(1) translate(19.3125rem, -1.75rem);
      transform: scale(1) translate(19.3125rem, -1.75rem);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(56.25rem, -6.25rem);
      transform: scale(0.5) translate(56.25rem, -6.25rem);
    }
  }
  @-webkit-keyframes bird2 {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(0, 0);
      transform: scale(0.5) translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: scale(1) translate(16.75rem, -0.625rem);
      transform: scale(1) translate(16.75rem, -0.625rem);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(43.75rem, -3.75rem);
      transform: scale(0.5) translate(43.75rem, -3.75rem);
    }
  }
  @keyframes bird2 {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(0, 0);
      transform: scale(0.5) translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: scale(1) translate(16.75rem, -0.625rem);
      transform: scale(1) translate(16.75rem, -0.625rem);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.5) translate(43.75rem, -3.75rem);
      transform: scale(0.5) translate(43.75rem, -3.75rem);
    }
  }
  @-webkit-keyframes car1 {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: translate(-3.375rem, -2.375rem);
      transform: translate(-3.375rem, -2.375rem);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @keyframes car1 {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: translate(-3.375rem, -2.375rem);
      transform: translate(-3.375rem, -2.375rem);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @-webkit-keyframes car2 {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: translate(-3.625rem, -2.5rem);
      transform: translate(-3.625rem, -2.5rem);
    }
    1000% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @keyframes car2 {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: translate(-3.625rem, -2.5rem);
      transform: translate(-3.625rem, -2.5rem);
    }
    1000% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @-webkit-keyframes car3 {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: translate(-3.25rem, -2.1875rem);
      transform: translate(-3.25rem, -2.1875rem);
    }
    1000% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @keyframes car3 {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
      -webkit-transform: translate(-3.25rem, -2.1875rem);
      transform: translate(-3.25rem, -2.1875rem);
    }
    1000% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @-webkit-keyframes tractor {
    0% {
      -webkit-transform: scale(0.75) translate(0, 0);
      transform: scale(0.75) translate(0, 0);
      opacity: 1;
    }
    50% {
      -webkit-transform: scale(1) translate(-19.5625rem, 0.5625rem);
      transform: scale(1) translate(-19.5625rem, 0.5625rem);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(0.75) translate(0, 0);
      transform: scale(0.75) translate(0, 0);
      opacity: 1;
    }
    /*
    75% {
      top: ppr(176);
      left: ppr(1180);
      transform: scale(1);
      opacity: 1;
    }
    100% {
      top: ppr(176);
      left: ppr(1180);
      transform: scale(1);
      opacity: 0;
    }
    */
  }
  @keyframes tractor {
    0% {
      -webkit-transform: scale(0.75) translate(0, 0);
      transform: scale(0.75) translate(0, 0);
      opacity: 1;
    }
    50% {
      -webkit-transform: scale(1) translate(-19.5625rem, 0.5625rem);
      transform: scale(1) translate(-19.5625rem, 0.5625rem);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(0.75) translate(0, 0);
      transform: scale(0.75) translate(0, 0);
      opacity: 1;
    }
    /*
    75% {
      top: ppr(176);
      left: ppr(1180);
      transform: scale(1);
      opacity: 1;
    }
    100% {
      top: ppr(176);
      left: ppr(1180);
      transform: scale(1);
      opacity: 0;
    }
    */
  }
  @-webkit-keyframes cow1 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes cow1 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes cow2 {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes cow2 {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
@media (max-width: 750px) {
  /*:root {
    --vh: 100%;
  }
  body,
  html {
    margin: 0;
    padding: 0;
    font-family: "Pretendard", sans-serif;
  }
  body * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 300;
  }
  ul,
  dl,
  dt,
  dd {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ol {
    margin: 0;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  a:hover {
    text-decoration: none;
  }
  input,
  select,
  textarea,
  fieldset,
  button {
    outline: none;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: auto;
    border: 0;
    cursor: pointer;
  }

  input::placeholder, textarea::placeholder {
    color: $gray-two;
  }

  table {
    border-collapse: collapse;
  }
  em {
    font-style: italic;
  }
  strong {
    font-weight: bold;
  }
  strong > * {
    font-weight: bold;
  }
  b {
    font-weight: bold;
  }
  b > * {
    font-weight: bold;
  }
  strong em {
    font-weight: bold;
  }
  textarea {
    resize: none;
  }
  .hidden {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    display: inline-block;
    margin: 0;
  }
  img {
    max-width: 100%;
  }
  p {
    margin: 0;
  }
  label {
    font-weight: 400;
  }
  input {
    font-size: 0.8125rem;
    font-weight: 400;

    color: $gray-two;

    line-height: 1.125rem;
  }*/
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Thin.woff") format("woff");
    font-weight: 100;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-SemiBold.woff") format("woff");
    font-weight: 600;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-display: swap;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("../css/font/Pretendard-Black.woff") format("woff");
    font-weight: 900;
    font-display: swap;
  }
  @font-face {
    font-family: "ONE-MOBILE-TITLE";
    src: url("../css/font/ONE-MOBILE-TITLE-OTF.woff") format("woff");
    font-display: swap;
  }
  .visual-bifurcation::before {
    min-width: auto;
  }
  .main-visual-wrap {
    width: 100vw;
    height: calc(100vh - 4.25rem);
    height: calc(var(--vh, 1vh) * 100 - 4.25rem);
    overflow: hidden;
    position: relative;
  }
  .main-visual-wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -4;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .main-visual-wrap.intro::after {
    z-index: 4;
  }
  .main-visual-wrap.intro .main-visual .intro-desc {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
  }
  .main-visual-wrap .main-visual-tours {
    position: absolute;
    min-width: 111.5rem;
    max-width: 111.5rem;
    height: 86.875rem;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
  }
  .main-visual-wrap .main-visual-tours .tours {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .main-visual-wrap .main-visual-tours.main-visual-1 {
    min-width: 111.5rem;
    max-width: 111.5rem;
    height: 86.875rem;
    top: -34.1875rem;
    left: -77.9375rem;
    top: -34.1875rem;
    left: -77.03125rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-2 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -28.625rem;
    left: -17.4375rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-3 {
    min-width: 71.875rem;
    max-width: 71.875rem;
    height: 80.3125rem;
    top: -21.3125rem;
    left: -0.75rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-4 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -16.875rem;
    left: -23.4375rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-5 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -24.25rem;
    left: -42.25rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-6 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -32.125rem;
    left: -30.25rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-7 {
    min-width: 137.46875rem;
    max-width: 137.46875rem;
    height: 106.8125rem;
    top: -33.75rem;
    left: -90.375rem;
  }
  .main-visual-wrap .main-visual-tours.main-visual-8 {
    min-width: 137.46875rem;
    max-width: 137.46875rem;
    height: 106.8125rem;
    top: -54.8125rem;
    left: -55.9375rem;
  }
  .main-visual-wrap .main-visual {
    height: 86.875rem;
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(/image/main/main-visual/main-visual-bg-m.png);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .main-visual-wrap .main-visual.foreground {
    min-width: 100%;
    max-width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  .main-visual-wrap .main-visual.tour-view::after {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .main-visual-wrap .main-visual.main-visual-1 {
    min-width: 111.5rem;
    max-width: 111.5rem;
    height: 86.875rem;
    top: -34.125rem;
    left: -71.1875rem;
  }
  .main-visual-wrap .main-visual.main-visual-2 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -28.625rem;
    left: -17.4375rem;
  }
  .main-visual-wrap .main-visual.main-visual-3 {
    min-width: 71.875rem;
    max-width: 71.875rem;
    height: 80.3125rem;
    top: -21.3125rem;
    left: -0.75rem;
  }
  .main-visual-wrap .main-visual.main-visual-4 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -16.875rem;
    left: -23.4375rem;
  }
  .main-visual-wrap .main-visual.main-visual-5 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -24.25rem;
    left: -42.25rem;
  }
  .main-visual-wrap .main-visual.main-visual-6 {
    min-width: 103.125rem;
    max-width: 103.125rem;
    height: 80.3125rem;
    top: -32.125rem;
    left: -30.25rem;
  }
  .main-visual-wrap .main-visual.main-visual-7 {
    min-width: 137.46875rem;
    max-width: 137.46875rem;
    height: 106.8125rem;
    top: -33.75rem;
    left: -90.375rem;
  }
  .main-visual-wrap .main-visual.main-visual-8 {
    min-width: 137.46875rem;
    max-width: 137.46875rem;
    height: 106.8125rem;
    top: -54.8125rem;
    left: -55.9375rem;
  }
  .main-visual-wrap .main-visual::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .main-visual-wrap .building {
    position: absolute;
    opacity: 0;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    cursor: pointer;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    z-index: -1;
  }
  .main-visual-wrap .building.active {
    opacity: 1;
    z-index: 2;
  }
  .main-visual-wrap #mBuilding1 {
    max-width: 21.125rem;
    top: 39.8125rem;
    left: 78.1875rem;
  }
  .main-visual-wrap #mBuilding2 {
    max-width: 15.9375rem;
    top: 35.875rem;
    left: 20.6875rem;
  }
  .main-visual-wrap #mBuilding3 {
    max-width: 31.1875rem;
    top: 29.8125rem;
    left: 2.3125rem;
  }
  .main-visual-wrap #mBuilding4 {
    max-width: 33.125rem;
    top: 26.25rem;
    left: 19.75rem;
  }
  .main-visual-wrap #mBuilding5 {
    max-width: 27.5625rem;
    top: 33.1875rem;
    left: 44.875rem;
  }
  .main-visual-wrap #mBuilding6 {
    max-width: 11.75rem;
    top: 40.375rem;
    left: 36.375rem;
  }
  .main-visual-wrap #mBuilding7 {
    max-width: 20.1875rem;
    width: 20.1875rem;
    top: 43.4375rem;
    left: 94.8125rem;
  }
  .main-visual-wrap #mBuilding8 {
    max-width: 15.9375rem;
    width: 15.9375rem;
    top: 61.4375rem;
    left: 60.0625rem;
  }
  .main-visual-wrap .building-desc {
    opacity: 0;
    max-width: calc(100% - 2.5rem);
    width: 100%;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 1rem;
    position: absolute;
    z-index: -4;
    bottom: 5.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    /*
    // 아산 정주영 기념관
    &[data-building="building1"] {
    }
    // 미곡처리장
    &[data-building="building2"] {
    }
    // 축사
    &[data-building="building3"] {
    }
    // 서산 태양광
    &[data-building="building4"] {
    }
    // 연수원
    &[data-building="building5"] {
    }
    // 본관동
    &[data-building="building6"] {
    }
    // 생활동
    &[data-building="building7"] {
    }
    // 세미나실
    &[data-building="building8"] {
    }
    */
  }
  .main-visual-wrap .building-desc.active {
    opacity: 1;
    z-index: 4;
  }
  .main-visual-wrap .building-desc .image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .main-visual-wrap .building-desc .image .half {
    width: 50%;
  }
  .main-visual-wrap .building-desc .title {
    padding: 1.25rem 0 0.75rem;
    color: #004193;
    font-family: "Pretendard Variable";
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
  }
  .main-visual-wrap .building-desc .content {
    color: #565656;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
  }
  .main-visual-wrap .intro-desc {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
    background-color: transparent;
  }
  .main-visual-wrap .intro-desc .desc-top-img {
    position: absolute;
    top:0.7625rem;  /*top: 0.5625rem;*/
    right:1.305rem; /*right: 0.875rem;*/
    max-width: 10.25rem;
  }
  .main-visual-wrap .intro-desc .desc-text1 {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #ffffff;
    top: 13.125rem;
  }
  .main-visual-wrap .intro-desc .desc-text2 {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #ffffff;
    bottom: calc((100vw - 5.375rem) / 2 + 3rem + 1.375rem + 4.25rem);
  }
  .main-visual-wrap .intro-desc .arc {
    position: absolute;
    width: calc(100vw - 5.375rem);
    height: calc((100vw - 5.375rem) / 2);
    border-radius: calc((100vw - 5.375rem) / 2) calc((100vw - 5.375rem) / 2) 0 0;
    bottom: 7.6875rem;
    left: 2.6875rem;
    border-top: 0.125rem dotted #ffbd2e;
  }
  .main-visual-wrap .intro-desc .arc::before, .main-visual-wrap .intro-desc .arc::after {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: #ffbd2e;
    position: absolute;
    bottom: 0;
  }
  .main-visual-wrap .intro-desc .arc::before {
    left: 0;
  }
  .main-visual-wrap .intro-desc .arc::after {
    right: 0;
  }
  .main-visual-wrap .intro-desc > .prev, .main-visual-wrap .intro-desc > .next {
    position: absolute;
    bottom: 4.875rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0.0625rem dotted #ffbd2e;
  }
  .main-visual-wrap .intro-desc > .prev::after, .main-visual-wrap .intro-desc > .next::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1.75rem;
    bottom: 0.625rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .main-visual-wrap .intro-desc > .prev {
    left: 1.25rem;
  }
  .main-visual-wrap .intro-desc > .prev::after {
    left: 0.9375rem;
    background-image: url(/image/main/main-visual/prev.png);
  }
  .main-visual-wrap .intro-desc > .next {
    right: 1.25rem;
  }
  .main-visual-wrap .intro-desc > .next::after {
    right: 0.9375rem;
    background-image: url(/image/main/main-visual/next.png);
  }
  .main-visual-wrap .tour-navigation {
    width: 100%;
    height: 4.25rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    background-color: #034ea2;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .main-visual-wrap .tour-navigation .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #5996da;
  }
  .main-visual-wrap .tour-navigation .swiper-slide .tour-img {
    margin-right: 0.375rem;
    max-width: 1.25rem;
    display: none;
  }
  .main-visual-wrap .tour-navigation .swiper-button-prev,
  .main-visual-wrap .tour-navigation .swiper-button-next {
    color: transparent;
    top: unset;
    bottom: 0;
    -webkit-transform: translateY(-0.625rem);
    transform: translateY(-0.625rem);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
  }
  .main-visual-wrap .tour-navigation .swiper-button-prev::after,
  .main-visual-wrap .tour-navigation .swiper-button-next::after {
    content: "";
    width: 1rem;
    height: 1.75rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .main-visual-wrap .tour-navigation .swiper-button-prev.swiper-button-disabled,
  .main-visual-wrap .tour-navigation .swiper-button-next.swiper-button-disabled {
    opacity: 1;
  }
  .main-visual-wrap .tour-navigation .swiper-button-prev {
    left: 1.25rem;
  }
  .main-visual-wrap .tour-navigation .swiper-button-prev::after {
    background-image: url(/image/main/main-visual/prev.png);
  }
  .main-visual-wrap .tour-navigation .swiper-button-next {
    right: 1.25rem;
  }
  .main-visual-wrap .tour-navigation .swiper-button-next::after {
    background-image: url(/image/main/main-visual/next.png);
  }
  .scroll-down {
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 4.25rem;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .scroll-down::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4.25rem;
    left: 0;
    bottom: 0;
    background-color: transparent;
  }
  .scroll-down.show {
    opacity: 1;
  }
  .scroll-down.dim::after, .scroll-down.intro::after {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .scroll-down .scroll-down-tag {
    display: inline-block;
    font-size: 0.625rem;
    line-height: 1;
    padding: 0.75rem 1.5rem;
    background-color: #ececec;
    color: #696969;
    border-radius: 2.125rem;
  }
  .close-button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    display: none;
    width: 100%;
    height: 4.25rem;
    padding: 0 1.25rem;
    bottom: 0;
    z-index: 2000;
  }
  .close-button-group.btns-show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .close-button-group .btn_today_close {
    background-color: transparent;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
  }
  .close-button-group .btn_close {
    padding-left: 1.5625rem;
    background-color: transparent;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-image: url(/image/main/main-visual/X.png);
    font-weight: bold;
  }
  .pc {
    display: none;
  }
}

  .gift-items {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 54px;
  }
  .gift-item {
    width: 38%;
    height: 38%;
  }

  .gift-list .heritage-item::after {
    content: '';
  }
  .gift-list .heritage-title .price {
    display: block;
  }