@charset "UTF-8";
/* 0705이전 */
/* 0705 이후 */
.section_visual {
  background-image: url(https://www.xi.co.kr/content/static/images/apt/visual_bg.png);
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-size: cover;
  overflow: hidden;
  position: relative;
  height: 1080px;
  padding-bottom: 145px;
  transition: all 1s; }
  .section_visual .swiper-pagination {
    width: 1400px;
    height: 40px;
    margin: 0 auto;
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .section_visual .swiper-pagination span {
      width: 100%;
      height: 40px;
      background: none;
      font-size: 16px;
      display: flex !important;
      align-items: flex-end;
      justify-content: center;
      position: relative;
      opacity: 0.7; }
      .section_visual .swiper-pagination span + span {
        margin-left: 10px; }
@keyframes ani1 {
  to {
    width: 100%; } }
      .section_visual .swiper-pagination span::before, .section_visual .swiper-pagination span::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 2px; }
      .section_visual .swiper-pagination span::before {
        width: 100%;
        background: rgba(51, 51, 51, 0.2); }
      .section_visual .swiper-pagination span::after {
        width: 0;
        background: #333; }
      .section_visual .swiper-pagination span.swiper-pagination-bullet::after {
        display: none; }
      .section_visual .swiper-pagination span.swiper-pagination-bullet-active {
        opacity: 1; }
        .section_visual .swiper-pagination span.swiper-pagination-bullet-active::after {
          display: block;
          animation: ani1 4s linear forwards; }
  .section_visual .visual {
    position: relative;
    top: 90px;
    max-width: 1920px;
    margin: 0 auto; }
    .section_visual .visual .wrap_visual {
      width: 1550px;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: center; }
      .section_visual .visual .wrap_visual::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 54.3%;
        height: 640px;
        box-shadow: 21px 21px 20px 0px rgba(0, 0, 0, 0.12);
        margin: 0 auto; }
      .section_visual .visual .wrap_visual .wrapper {
        overflow: hidden;
        height: 782px;
        width: 100%; }
        .section_visual .visual .wrap_visual .wrapper .swiper-container {
          width: 100%;
          height: 800px; }
          .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-wrapper {
            margin: 0 0 0 24px; }
          .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-slide {
            width: 1502px !important;
            height: 640px !important;
            text-align: center;
            display: flex;
            /* 내용을 중앙정렬 하기위해 flex 사용 */
            align-items: center;
            /* 위아래 기준 중앙정렬 */
            justify-content: center;
            box-sizing: border-box;
            user-select: none;
            cursor: none; }
            .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-slide :hover::after {
              width: calc(100% - 125px);
              height: 3px;
              background-size: contain; }
            .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-slide a {
              cursor: none !important;
              position: relative; }
            .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-slide-active {
              box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.75); }
              .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-slide-active a .txt img {
                opacity: 1;
                left: 0; }
              .section_visual .visual .wrap_visual .wrapper .swiper-container .swiper-slide-active a .txt .apt_name {
                opacity: 1;
                transition-delay: 0.2s;
                right: 0; }
.section_guide {
  padding: 150px 0;
  background: url(https://www.xi.co.kr/content/static/images/apt/section_02_bg.png) no-repeat center center/cover; }
  .section_guide .tit {
    font-size: 42px;
    font-weight: 500;
    color: #fff;
    text-align: center; }
  .section_guide .inner .cont_search {
    margin-bottom: 195px; }
    .section_guide .inner .cont_search .tit {
      margin-bottom: 20px; }
    .section_guide .inner .cont_search .wrap_search .wrap_input {
      width: 100%;
      height: 80px;
      border-bottom: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 30px; }
      .section_guide .inner .cont_search .wrap_search .wrap_input input {
        display: block;
        width: 1070px;
        text-align: center;
        font-size: 21px;
        color: #fff;
        border: none; }
        .section_guide .inner .cont_search .wrap_search .wrap_input input::placeholder {
          color: #aeaeae;
          font-weight: 100; }
      .section_guide .inner .cont_search .wrap_search .wrap_input button {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%); }
        .section_guide .inner .cont_search .wrap_search .wrap_input button .icon {
          width: 24px;
          height: 24px;
          background-image: url(../../../../content/static/images/apt/icon_search.png); }
    .section_guide .inner .cont_search .wrap_search .wrap_hashtag ul {
      display: flex;
      align-items: center;
      justify-content: center; }
      .section_guide .inner .cont_search .wrap_search .wrap_hashtag ul li {
        margin: 0 7px;
        border-radius: 35px;
        background-color: rgba(255, 255, 255, 0.1); }
        .section_guide .inner .cont_search .wrap_search .wrap_hashtag ul li a {
          padding: 0 20px;
          font-size: 16px;
          color: rgba(136, 136, 136, 0.8);
          line-height: 43px; }
  .section_guide .inner .cont_calendar .tit {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px; }
    .section_guide .inner .cont_calendar .tit li {
      width: 590px; }
  .section_guide .inner .cont_calendar .wrap_calendar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px; }
    .section_guide .inner .cont_calendar .wrap_calendar .box {
      width: 590px;
      background-color: #fff;
      border-radius: 15px;
      padding: 40px 45px 50px; }
      .section_guide .inner .cont_calendar .wrap_calendar .box .month {
        text-align: center;
        font-weight: 800;
        font-size: 42px;
        margin-bottom: 8px; }
      .section_guide .inner .cont_calendar .wrap_calendar .box .year {
        font-family: "Montserrat";
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #dbdbdb;
        margin-bottom: 30px; }
      .section_guide .inner .cont_calendar .wrap_calendar .box .schedule {
        border-top: 1px solid #ddd; }
        .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list {
          border-bottom: 1px solid #dddddd;
          display: flex;
          align-items: center;
          height: 90px;
          transition: all 0.5s; }
          .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list:hover {
            background-color: rgba(247, 247, 247, 0.8); }
          .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .region {
            width: 110px;
            text-align: center; }
          .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .state {
            width: 70px;
            height: 30px;
            border-radius: 5px;
            color: #fff;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center; }
            .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .state_active {
              background-color: #946f7a; }
            .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .state_complete {
              background-color: rgba(136, 136, 136, 0.85); }
            .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .state_expected {
              background-color: #7e8f94; }
          .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .apt {
            width: calc(100% - 195px);
            padding-left: 15px; }
            .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .apt .name {
              font-size: 21px;
              font-weight: 500;
              margin-bottom: 10px; }
            .section_guide .inner .cont_calendar .wrap_calendar .box .schedule .list .apt .address {
              display: -webkit-box;
              word-wrap: break-word;
              -webkit-line-clamp: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 20px;
              height: 20px;
              /* autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
              font-size: 16px;
              color: #888; }
  .section_guide .inner .cont_calendar .more_group {
    display: flex;
    justify-content: space-between; }
    .section_guide .inner .cont_calendar .more_group a {
      display: flex;
      justify-content: center;
      width: 590px;
      color: #fff; }
      .section_guide .inner .cont_calendar .more_group a span {
        padding: 0 5px;
        color: #fff; }
  .section_guide .inner .cont_calendar .more {
    margin: 0 auto;
    width: 180px;
    height: 50px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    position: relative;
    z-index: 2; }
    .section_guide .inner .cont_calendar .more::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: rgba(60, 60, 60, 0.65);
      width: 100%;
      height: 0;
      transition: all 0.5s;
      z-index: -1; }
    .section_guide .inner .cont_calendar .more:hover::before {
      height: 100%; }

#cursor_custom {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  transform-origin: 100% 100%;
  background-size: cover;
  position: fixed;
  width: 23px;
  height: 39px;
  background: none; }
  #cursor_custom p {
    margin-top: 5px;
    color: #151515;
    font-size: 11px;
    animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite; }
  #cursor_custom .mouse {
    background: #dadfe4 linear-gradient(transparent 0%, transparent 50%, #151515 50%, #151515 100%);
    position: relative;
    width: 23px;
    height: 39px;
    border-radius: 100px;
    background-size: 100% 200%;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; }
    #cursor_custom .mouse:before, #cursor_custom .mouse:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto; }
    #cursor_custom .mouse:before {
      width: 20px;
      height: 36px;
      background-color: #fff;
      border-radius: 100px; }
    #cursor_custom .mouse:after {
      background-color: #151515;
      width: 5px;
      height: 5px;
      border-radius: 100%;
      animation: trackBallSlide 5s linear infinite; }
@keyframes colorSlide {
  0% {
    background-position: 0% 100%; }
  20% {
    background-position: 0% 0%; }
  21% {
    background-color: #dadfe4; }
  29.99% {
    background-color: #151515;
    background-position: 0% 0%; }
  30% {
    background-color: #dadfe4;
    background-position: 0% 100%; }
  50% {
    background-position: 0% 0%; }
  51% {
    background-color: #dadfe4; }
  59% {
    background-color: #151515;
    background-position: 0% 0%; }
  60% {
    background-color: #dadfe4;
    background-position: 0% 100%; }
  80% {
    background-position: 0% 0%; }
  81% {
    background-color: #dadfe4; }
  90%,
        100% {
    background-color: #151515; } }
@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-10px); }
  6% {
    opacity: 1;
    transform: scale(0.9) translateY(2.5px); }
  14% {
    opacity: 0;
    transform: scale(0.4) translateY(20px); }
  15%,
        19% {
    opacity: 0;
    transform: scale(0.4) translateY(-10px); }
  28%,
        29.99% {
    opacity: 1;
    transform: scale(1) translateY(-10px); }
  30% {
    opacity: 1;
    transform: scale(1) translateY(-10px); }
  36% {
    opacity: 1;
    transform: scale(0.9) translateY(2.5px); }
  44% {
    opacity: 0;
    transform: scale(0.4) translateY(20px); }
  45%,
        49% {
    opacity: 0;
    transform: scale(0.4) translateY(-10px); }
  58%,
        59.99% {
    opacity: 1;
    transform: scale(1) translateY(-10px); }
  60% {
    opacity: 1;
    transform: scale(1) translateY(-10px); }
  66% {
    opacity: 1;
    transform: scale(0.9) translateY(2.5px); }
  74% {
    opacity: 0;
    transform: scale(0.4) translateY(20px); }
  75%,
        79% {
    opacity: 0;
    transform: scale(0.4) translateY(-10px); }
  88%,
        100% {
    opacity: 1;
    transform: scale(1) translateY(-10px); } }
@keyframes nudgeMouse {
  0% {
    transform: translateY(0); }
  20% {
    transform: translateY(8px); }
  30% {
    transform: translateY(0); }
  50% {
    transform: translateY(8px); }
  60% {
    transform: translateY(0); }
  80% {
    transform: translateY(8px); }
  90% {
    transform: translateY(0); } }
@keyframes nudgeText {
  0% {
    transform: translateY(0); }
  20% {
    transform: translateY(2px); }
  30% {
    transform: translateY(0); }
  50% {
    transform: translateY(2px); }
  60% {
    transform: translateY(0); }
  80% {
    transform: translateY(2px); }
  90% {
    transform: translateY(0); } }
@keyframes colorText {
  21% {
    color: #dadfe4; }
  30% {
    color: #151515; }
  51% {
    color: #dadfe4; }
  60% {
    color: #151515; }
  81% {
    color: #dadfe4; }
  90% {
    color: #151515; } }