@charset "UTF-8";

main {
  >section {
    min-height: 100vh;
    background: var(--fff);
    border-radius: 0 0 10rem 10rem;
    position: relative;
    z-index: 1;

    &.bg {
      background: var(--bg);
      margin-top: -10rem;
      padding-top: 10rem;
      z-index: 0;
    }

    .content-wrap {
      padding: 15rem 0;

      .inwrap {
        max-width: 1600px;
        margin: 0 auto;

        h2 {
          font-size: 6rem;
          font-family: "Noto Serif KR", serif;
          color: var(--font_333);
          line-height: 1.2em;
          margin-bottom: 4rem;
          letter-spacing: -0.4rem;
        }

        h3 {
          font-size: 2.2rem;
          font-weight: 600;
          /* margin-bottom: 5rem; */
        }
      }

      h4.sub {
        font-family: "Noto Serif KR", serif;
        text-align: center;
        font-size: 2.8rem;
        font-weight: 500;
        color: var(--font-171921);
        margin-top: 9rem;
        letter-spacing: -.03em;

        b {
          font-size: 4.4rem;
          color: var(--color_1);
        }
      }
    }
  }

}

@media (max-width: 768px) {
  main {
    >section {
      border-radius: 0 0 5rem 5rem;
      min-height: auto;

      &.bg {
        margin-top: -5rem;
        padding-top: 5rem;
      }

      .content-wrap {
        padding: 6rem 0;

      }
    }
  }

}

/* 히어로 섹션 */
.hero-section {
  height: 100vh;
  overflow: hidden;
  border-radius: 0 0 10rem 10rem;
  position: relative;
  z-index: 20;
  max-height: 920px;
  min-height: auto;
  
  
  
  
  
  
  
  
  

  .item {
    .hero-content {
      position: absolute;
      z-index: 1;
      color: var(--fff);
      left: 50%;
      margin-left: -820px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1640px;
      padding: 0 2rem;

      div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        h2 {
          font-family: "Noto Serif KR", serif;
          font-size: 6rem;
          line-height: 1.2em;
          overflow: hidden;
          letter-spacing: -.3rem;
          position: relative;

          em {
            opacity: 0;
          }

          span {
            position: absolute;
            transform: translateY(-160%);
            -webkit-transform: translateY(-160%);
            -moz-transform: translateY(-160%);
            -ms-transform: translateY(-160%);
            -o-transform: translateY(-160%);
          }

          &+h2 {
            margin-bottom: 4rem;
          }
        }

        h3 {
          font-size: 2.2rem;
          font-weight: 600;
          margin-bottom: 5rem;
          overflow: hidden;
          position: relative;

          span {
            position: absolute;
            transform: translateY(-160%);
            -webkit-transform: translateY(-160%);
            -moz-transform: translateY(-160%);
            -ms-transform: translateY(-160%);
            -o-transform: translateY(-160%);
          }

          em {
            opacity: 0;
          }
        }

        &.photoUp {
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 188, 212, 0.4);
            animation: pulse-ring 2s infinite;
          }

          label {
            width: 25.7rem;
            height: 25.7rem;
            background: var(--color_1);
            color: var(--fff);
            font-size: 1.6rem;
            font-weight: 700;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 30rem;
            text-align: center;
            cursor: pointer;

            i {
              font-size: 10.4rem;
              line-height: 1;
              animation: MoveUpDown 1s ease-in-out infinite alternate;
            }
          }

          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 188, 212, 0.4);
            animation: pulse-ring-small 2s infinite;
            z-index: -1;
          }
        }
      }

    }

    .img {
      overflow: hidden;

      img {
        transform: scale(1.2);
        -webkit-transition: all 5s;
        -moz-transition: all 5s;
        -ms-transition: all 5s;
        -o-transition: all 5s;
        transition: all 5s;
      }

    }
  }

  .active {
    .item {
      .hero-content {
        div {

          h2,
          h3 {
            span {
              transform: translateY(0%);
              -webkit-transform: translateY(0%);
              -moz-transform: translateY(0%);
              -ms-transform: translateY(0%);
              -o-transform: translateY(0%);
              transition: all 1s ease-in-out;
            }

            &+h2 {
              span {
                transition-delay: .5s;
              }
            }
          }

          h3 {

            span {
              transition-delay: 1s;
            }
          }
        }
      }

      .img {
        img {
          transform: scale(1);
        }

      }
    }

  }

  .owl-nav {
    position: absolute;
    width: 100%;
    max-width: 1600px;
    left: 50%;
    margin-left: -800px;

    button.owl-prev,
    button.owl-next {
      color: var(--fff);
      opacity: .5;
      transition: all 0.4s ease-in-out;
      right: 0;
      position: absolute;
      bottom: 10rem;
      -webkit-transform: translate(0%, -100%);
      transform: translate(0%, -100%);
      z-index: 1;

      &:hover {
        opacity: 1;
        background: none;
      }

      i {
        font-size: 7rem;
        line-height: 1;
      }
    }

    button.owl-prev {
      -webkit-transform: rotateY(180deg) translate(0%, -100%);
      transform: rotateY(180deg) translate(0%, -100%);
      left: 0;
      right: auto;
    }
  }

  .owl-dots {
    position: absolute;
    bottom: 188px;
    left: 0;
    right: 0;

    .owl-dot {
      span {
        width: 2rem;
        height: 2rem;
        background: var(--fff);
        opacity: .5;
        transition: all 0.4s ease-in-out;
      }

      &:hover,
      &.active {
        span {
          opacity: 1;
          background: var(--fff);
        }
      }

      &.active {
        span {
          width: 68px;
        }
      }
    }

  }
}

@media (max-width: 768px) {
  .hero-section {
    border-radius: 0 0 5rem 5rem;

    .item {
      .hero-content {
        margin: 0;
        left: 20px;
        padding: 0;
        flex-wrap: wrap;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        height: 70vh;
        margin-top: 15vh;

        >div {
          h2 {
            font-size: 3rem;

            &+h2 {
              margin-bottom: 2rem;
            }
          }

          h3 {
            font-size: 1.4rem;
            margin-bottom: 2rem;
          }
        }

        >div.photoUp {
          display: none;

          label {
            width: 13rem;
            height: 13rem;
            font-size: 1.5rem;
            line-height: 1.2em;

            i {
              font-size: 5rem;
            }

            em {
              display: none;
            }
          }
        }
      }

      .img {
        height: 100vh;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;

        img {
          height: 100%;
          width: auto;
          max-width: 1920px;
          margin-left: -80vh;
        }
      }
    }

    .owl-dots {
      bottom: 2rem;
    }
  }
}


/* 의료진 소개 섹션 */
.doctor-section {
  background: var(--fff);
  border-radius: 0 0 10rem 10rem;

  .content-wrap {
    .inwrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      >div {

        a {
          margin-top: 5rem;
        }
      }

      img {
        border-radius: 8rem;
      }
    }
  }
}

@media (max-width: 768px) {
  .doctor-section {
    overflow: hidden;
    border-radius: 0 0 5rem 5rem;

    .content-wrap {
      padding: 6rem 0;

      .inwrap {
        display: flex;
        flex-direction: column;
        margin: 0 2rem;

        >div {
          width: 100%;

          h2 {
            font-size: 2.8rem;
            margin-bottom: 2rem;
          }

          h3 {
            font-size: 1.4rem;
          }

          a {
            margin-top: 2rem;
            margin-bottom: 4rem;
          }
        }

        img {
          border-radius: 3rem;
        }
      }

      h4.sub {
        font-size: 1.8rem;
        margin-top: 4rem;
        
        
        

        b {
          font-size: 2.2rem;
        }
      }
    }

  }
}

/* 교정 진료 과목 섹션 */
.subject-section {
  text-align: center;

  .content-wrap {
    .inwrap {
      h2 {
        font-size: 6rem;
        margin-bottom: 4rem;
      }

      >img {
        position: absolute;
        transform: translate(-50%, -100%);
        z-index: -2;
        border-radius: 8rem;
      }

      h3 {
        font-size: 2.2rem;

        &+a {
          margin-top: 5rem;
          margin-bottom: 8rem;
        }
      }

      >ul {
        display: flex;
        position: relative;
        border-radius: 8rem;
        overflow: hidden;
        height: 550px;
        align-items: flex-end;

        >li {
          width: 25%;
          border-right: 1px solid rgba(255, 255, 255, .3);
          text-align: left;
          color: #ebe5e1;
          height: 100%;
          display: flex;
          align-items: flex-end;
          transition: all 0.4s ease-in-out;
          overflow: hidden;

          >a {
            color: var(--fff);
            width: 100%;
            display: block;

            >div {
              padding: 6rem 5rem;
              position: relative;

              >span {
                font-family: "Poppins", sans-serif;
                font-size: 6rem;
                font-weight: 700;
                display: inline-block;
                z-index: 2;
                position: relative;
              }

              >ul {
                display: flex;
                text-align: center;
                justify-content: center;
                gap: 2rem;
                display: none;
                position: relative;
                z-index: 1;

                li {
                  p {
                    font-size: 1.8rem;
                    font-weight: 600;
                    width: 100%;
                  }
                }
              }

              h5 {
                font-size: 3rem;
                font-weight: 800;
                position: relative;
                z-index: 1;
                margin-top: 2rem;


                +p {
                  font-size: 1.8rem;
                  display: none;
                  width: 200%;
                  position: relative;
                  z-index: 1;
                }
              }

              &:after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 0;
                top: -140px;

              }

            }

            >img {
              position: absolute;
              left: 0;
              top: 0;
              opacity: 0;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
              max-width: 400%;
              left: 0;
              z-index: -1;
            }
          }

          &:hover {
            width: 35%;

            >a {

              >div {
                >span {
                  background: #ebe5e1;
                  color: #927a6e;
                  width: 9.7rem;
                  height: 9.7rem;
                  text-align: center;
                  border-radius: 10rem;
                  line-height: 9.7rem;
                  margin-bottom: -4rem;
                  position: relative;
                  margin-left: -2rem;
                  display: block;
                  z-index: 2;
                }

                >ul {
                  display: flex;
                  margin-bottom: 2rem;
                }

                h5+p {
                  display: block;
                  margin-top: 1rem;
                }

                &:after {
                  background: #D9D9D9;
                  mix-blend-mode: multiply;
                }

              }

              >img {
                opacity: 1;
              }
            }

            a:hover {
              i {
                transform: translate(50%, 0%);
              }

            }
          }

        }
      }

    }

  }
}


@media (max-width: 768px) {
  .subject-section {
    .content-wrap {
      .inwrap {
        margin: 0 2rem;

        >img {
          display: none;
        }

        h2 {
          font-size: 2.8rem;
          margin-bottom: 2rem;
        }

        h3 {
          font-size: 1.4rem;

          &+a {
            margin-top: 2rem;
            margin-bottom: 4rem;
          }
        }

        >ul {
          display: flex;
          height: auto;
          flex-direction: column;
          border-radius: 3rem;

          >li {
            width: 100%;
            position: relative;
            background: #b6998b;
            height: auto;
            border-top: 1px solid var(--bg);

            >a {
              >img {
                opacity: 1;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
                width: 100%;
                z-index: 0;
              }

              >div {
                padding: 3rem 2rem;

                >span {
                  font-size: 4rem;
                }

                h5 {
                  margin-top: 0;
                  font-size: 2.4rem;
                }
              }
            }

            &:nth-child(3),
            &:nth-child(4) {
              >a {
                text-align: right;
              }

            }

            &:hover {
              width: 100%;

              a {
                >img {
                  opacity: 0;
                }

                >div {
                  >span {
                    width: 5rem;
                    height: 5rem;
                    margin-left: 0;
                    line-height: 5rem;
                    letter-spacing: -.2rem;
                    text-align: center;
                    font-size: 2.8rem;
                  }

                  h5 {
                    &+p {
                      font-size: 1.4rem;
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }

      }

      h4.sub {
        font-size: 1.8rem;
        margin-top: 4rem;
        
        
        

        b {
          font-size: 2.2rem;
        }
      }
    }
  }

}

/* 깊이있는 고민 섹션 */
.depth-think {
  .content-wrap {
    .inwrap {
      /* display: flex; */
      flex-direction: row-reverse;

      >div {
        text-align: right;

        h3 {
          color: var(--font-171921);

          &+ {
            margin-top: 5rem;
          }
        }
      }

      .profile-video-container {
        position: relative;
        width: 800px;
        height: 800px;
        border-radius: 8rem;
        overflow: hidden;
        box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.1);
        .profile-video {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
          border-radius: 50px;
        }
      }
    }
  }

}

@media (max-width: 768px) {
  .depth-think {
    .content-wrap {
      .inwrap {
        flex-direction: column;

        .profile-video-container {
          width: 100%;
          border-radius: 3rem;
          height: auto;
          aspect-ratio: 1 / 1;

          .profile-video {
            height: auto;
            aspect-ratio: 1 / 1;
            border-radius: 3rem;
          }
        }
      }
    }
  }





}

/* 키워드 섹션 */
.keyword-section {
  background: var(--bg);
  text-align: center;
  border-radius: 0;
  min-height: auto;
  
  

  .content-wrap {
    .inwrap {
      ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        max-width: 1310px;
        margin: 0 auto;

        li {
          animation: floatComplex 4s ease-in-out infinite, shadowFloat 4s ease-in-out infinite;
          font-size: 3rem;
          background: var(--fff);
          border-radius: 10rem;
          line-height: 1em;
          border: 1px solid var(--gray);
          font-weight: 600;
          transition: all 0.4s ease-in-out;

          a {
            color: var(--font_666);
            display: block;
            padding: 3rem 4rem;
          }

          &:hover {
            background-color: var(--color_1);
            color: var(--fff);
            border-color: transparent;

            a {
              color: var(--fff);
            }
          }

          /* 각 태그마다 다른 애니메이션 지연시간과 속도 */
          &:nth-child(1) {
            animation-duration: 3s;
            animation-delay: 0s;
          }

          &:nth-child(2) {
            animation-duration: 3.5s;
            animation-delay: 0.5s;
          }

          &:nth-child(3) {
            animation-duration: 2.8s;
            animation-delay: 1s;
          }

          &:nth-child(4) {
            animation-duration: 3.2s;
            animation-delay: 1.5s;
          }

          &:nth-child(5) {
            animation-duration: 3.7s;
            animation-delay: 0.2s;
          }

          &:nth-child(6) {
            animation-duration: 2.9s;
            animation-delay: 0.8s;
          }

          &:nth-child(7) {
            animation-duration: 3.4s;
            animation-delay: 1.2s;
          }

          &:nth-child(8) {
            animation-duration: 3.1s;
            animation-delay: 1.8s;
          }

          &:nth-child(9) {
            animation-duration: 3.6s;
            animation-delay: 0.3s;
          }

          &:nth-child(10) {
            animation-duration: 2.7s;
            animation-delay: 0.9s;
          }

          &:nth-child(11) {
            animation-duration: 3.3s;
            animation-delay: 1.4s;
          }

          &:nth-child(12) {
            animation-duration: 3.8s;
            animation-delay: 0.6s;
          }

          &:nth-child(13) {
            animation-duration: 2.6s;
            animation-delay: 1.1s;
          }

          &:nth-child(14) {
            animation-duration: 3.9s;
            animation-delay: 0.4s;
          }

          &:nth-child(15) {
            animation-duration: 3.0s;
            animation-delay: 1.6s;
          }

          &:nth-child(16) {
            animation-duration: 3.5s;
            animation-delay: 0.7s;
          }

          &:nth-child(17) {
            animation-duration: 2.8s;
            animation-delay: 1.3s;
          }

          &:nth-child(18) {
            animation-duration: 3.2s;
            animation-delay: 0.1s;
          }

          &:nth-child(19) {
            animation-duration: 3.7s;
            animation-delay: 1.7s;
          }

          &:nth-child(20) {
            animation-duration: 2.9s;
            animation-delay: 0.5s;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .keyword-section {
    .content-wrap {
      .inwrap {
        ul {
          gap: 1rem;

          li {
            font-size: 2rem;

            a {
              padding: 1rem 1.5rem;
            }
          }
        }
      }
    }
  }
}

/* 환자 후기 섹션 */
.reviews-section {
  >h2 {
    position: absolute;
    z-index: 2;
    width: 24rem;
    height: 24rem;
    background: var(--color_1);
    border-radius: 30rem;
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--fff);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    b {
      font-family: "Poppins", sans-serif;
      font-size: 6.5rem;
      line-height: 1;
    }
  }

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 25%;
      transition: all 0.4s ease-in-out;
      overflow: hidden;



      div {
        position: relative;

        &:after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
          opacity: 0;

        }

        &::before {
          content: '';
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          position: absolute;
          border: 1.5rem solid transparent;
          transition: all 0.4s ease-in-out;
          z-index: 1;
        }

        p {
          font-size: 1.8rem;
          font-weight: bold;
          position: absolute;
          color: var(--fff);
          bottom: 0;
          padding: 5rem;
          z-index: 1;
          opacity: 0;
          transition: all 0.4s ease-in-out;
        }

        img {
          display: block;
          filter: grayscale();
          transition: all 0.4s ease-in-out;

        }
      }

      &:hover {
        div {
          &::before {
            border: 1.5rem solid var(--color_1);
          }

          &:after {
            opacity: 1;
          }

          p {
            opacity: 1;
          }

          img {
            filter: none;
            transform: scale(1.2);
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .reviews-section {
    >h2 {
      width: 12rem;
      height: 12rem;
      font-size: 1.8rem;

      b {
        font-size: 3rem;
      }
    }

    ul {
      li {
        width: 50%;

        >div {
          p {
            font-size: 1.4rem;
            padding: 2rem;

          }
        }

        &:hover {
          >div {
            &:before {
              border-width: .5rem;
            }
          }
        }
      }
    }
  }
}

/* 통계 섹션 */
.statistics-section {
  background-image: url(../main/images/statistics-bg.jpg);
  color: var(--fff);
  border-radius: 0;
  display: flex;
  align-items: center;

  .content-wrap {
    width: 100%;

    .inwrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      >div {
        ul {
          li {
            display: flex;
            align-items: flex-end;

            strong {
              font-size: 20rem;
              font-weight: 700;
              letter-spacing: -1rem;
              line-height: 1.1;
              width: 540px;
              display: inline-block;
            }

            .plus {
              font-size: 20rem;
              font-weight: 700;
              letter-spacing: -1rem;
              line-height: 1.1;
            }

            span {
              font-size: 3rem;
              font-weight: 800;
              margin-bottom: 7rem;
              margin-left: 5rem;
            }
          }
        }

        +div {
          text-align: right;

          h2 {
            font-family: 'NanumSquareNeo';
            font-weight: 800;
            color: var(--fff);
            margin-bottom: .5rem;
          }

          h3 {
            font-size: 3rem;
          }
        }
      }
    }

  }

}

@media (max-width: 768px) {
  .statistics-section {
    .content-wrap {
      padding: 10rem 0;

      .inwrap {
        padding: 0 2rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;

        >div {
          >ul {
            display: flex;
            flex-direction: column;
            gap: 3rem;

            >li {
              display: flex;
              flex-direction: column;
              align-items: center;

              strong {
                font-size: 7rem;
                letter-spacing: 0;
                width: auto;
              }

              .plus {
                font-size: 5rem;
              }

              span {
                font-size: 2rem;
                margin-bottom: 0;
                margin-left: 0;
              }

            }
          }

          &+div {
            text-align: center;

            h2 {
              font-size: 3rem;
              letter-spacing: 0;
            }

            h3 {
              font-size: 2rem;
            }
          }
        }
      }
    }
  }


}

/* 애니메이션 효과 */
.counter.counting {
  animation: pulse 0.1s ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {}



.floating-tags-container {
  position: relative;
  width: 100%;
  height: 600px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
  justify-content: center;
}

.floating-tag {
  background: white;
  color: #333;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 말풍선 꼬리 추가 */
.floating-tag::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}

/* 호버 효과 */
.floating-tag:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.floating-tag:hover::before {
  border-top-color: #667eea;
}

/* 둥실둥실 떠다니는 애니메이션 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-10px) rotate(1deg);
  }

  50% {
    transform: translateY(-5px) rotate(0deg);
  }

  75% {
    transform: translateY(-15px) rotate(-1deg);
  }
}



/* 반응형 디자인 */
@media (max-width: 768px) {
  .floating-tags-container {
    height: auto;
    min-height: 400px;
    padding: 15px;
    gap: 10px;
  }

  .floating-tag {
    font-size: 12px;
    padding: 10px 16px;
  }
}

/* 더 복잡한 둥실둥실 애니메이션 */
@keyframes floatComplex {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  20% {
    transform: translateY(-8px) translateX(3px) rotate(1deg);
  }

  40% {
    transform: translateY(-3px) translateX(-2px) rotate(-0.5deg);
  }

  60% {
    transform: translateY(-12px) translateX(1px) rotate(0.8deg);
  }

  80% {
    transform: translateY(-6px) translateX(-1px) rotate(-0.3deg);
  }

  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}

/* 부드러운 그림자 애니메이션 */
@keyframes shadowFloat {

  0%,
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  50% {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

#popdim {position:fixed;left:0;top:0;right:0;bottom:0;z-index:300;width: 100%;background: rgba(0, 0, 0, .6); display: none; cursor: pointer;}

#pop {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: fixed;
  max-width: 680px;
  z-index: 310;
  .close{
    margin-top:2rem;
    form{
      display:flex;
      justify-content: center;
      align-items: center;
          #check{
       input[type=checkbox]{
       & + label{
         color:var(--fff);
         display: flex;
         align-items: center;
         line-height: 1;
        &:before{
          border-color: var(--fff);
        }
       }
       }
    }
    #close{
      cursor: pointer;
      margin-left: 10px;
      color: var(--fff);
      font-size: 2rem;
      line-height: 1rem;
      
      span{
border: 1px solid #717171;border-radius: 3px;padding: 3px;font-size: .7em;background: #fff;color: #777;cursor: pointer;
      }
    }
    }

  }
  .new_popup{
    background: var(--font_222);
    
  .owl-carousel{
    display: flex;
    justify-content: center;
    width: auto;
    .owl-stage-outer{
      max-width: 500px;
      .owl-item{
      }
      .item{
        img{
          max-width: 500px;
          max-height: 700px;
        }
      }
    }
    .owl-dots{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      color: var(--fff);
      width: 180px;
      gap: .5px;
      background: var(--color_1);
      margin: 0;
      
      
      
      
      
      
      

      .owl-dot{
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--color_1);
        
        
        
        
        
        &.active{
          background: var(--color_2);
        }
      }
    }
  }
}
}

@media (max-width: 767px) {
  #pop{
    top: 40px;
    transform: translate(0%, 0%);
    max-width: 300px;
    /* left: 0; */
    /* right: 0; */
    margin-left: -150px;
    
    .new_popup{
      .owl-carousel {
        display:flex;
        flex-direction: column;
        
        
        .owl-stage-outer{
          .item{
            img{
              max-width: 100%;
              max-height: 10000px;
              height: auto;
            }
          }
        }
        .owl-dots{
          position: relative;
          width: auto;
          display: flex;
          flex-direction: row;
          top: auto;
          .owl-dot{
            line-height:1.2;
            padding:10px 0;
            font-size: 12px;
          }
        }
      }
    }
      
    
  }
}