@charset "UTF-8";
/* 상단 타이틀 기존 코드 */
#container {
  width: 100%;
  height: auto;
}

#main-page {
  width: 100%;
  height: auto;
  padding: 50px 30px 100px 30px;
  position: relative;
  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;
}

#main-page .wrap {
  width: 100%;
  height: auto;
  max-width: 1520px;
}

#main-page .wrap > .title {
  width: 100%;
  height: auto;
  padding-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}

#main-page .wrap > .title .logo {
  width: 100%;
  height: auto;
  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;
}
#main-page .wrap > .title .logo > img {
  width: 250px;
}

#main-page .wrap > .title .text {
  width: 100%;
  height: auto;
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

#main-page .wrap > .title .text h2 {
  color: #969BA3;
  font-size: 3rem;
  font-weight: 800;
}

#main-page .wrap > .title .text p {
  font-size: 1.375rem;
  font-weight: 400;
  text-align: center;
  line-height: 32px;
}

/* 공통 */
:root {
  --main-100: #E83C7A;
  --main-90: #EA4F87;
  --main-80: #EC6394;
  --main-50: #F39DBC;
  --main-10: #FDEBF1;
  --point-100: #655BA2;
}

.wrap {
  width: 100%;
  max-width: 95rem;
  margin: 0 auto;
}

/* //공통 */
.main-v2 {
  position: relative;
}
.main-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background: url("../img/img_bg_main-v2.png") no-repeat top/contain;
}
.main-v2 .slider {
  margin-top: 5.125rem;
  margin-bottom: 3.75rem;
}
.main-v2 .slider__item {
  padding-top: 1rem;
  margin-bottom: 50px;
}
.main-v2 .slider__item.api .slider-h2::before {
  background: url("../img/ic_api_main.png") no-repeat center/contain;
}
.main-v2 .slider__item.data .slider-h2::before {
  background: url("../img/ic_data_main.png") no-repeat center/contain;
}
.main-v2 .slider__item.data .slider__item-title {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 2.625rem;
}
.main-v2 .slider__item.data .slider-move {
  margin-left: 0;
}
.main-v2 .slider__item.vdi .slider-h2::before {
  background: url("../img/ic_vdi_main.png") no-repeat center/contain;
}
.main-v2 .slider__item.vdi .slider-img > img {
  width: calc(100% - 4px);
  left: 3px;
  border-radius: 0.75rem;
  overflow: hidden;
}
.main-v2 .slider__item-top {
  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;
}
.main-v2 .slider__item-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 24rem;
  padding: 1.875rem 4.3125rem 2.5rem;
  margin-top: 2.5rem;
  background: #F8F9FC 0% 0% no-repeat padding-box;
  border-radius: 12px;
}
.main-v2 .slider__item-bottom > div {
  width: 53.9375rem;
  margin-right: 5.5rem;
}
.main-v2 .slider__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 2.625rem;
}
/* .main-v2 .slider__item-title .slider-h3 {
  display: inline-block;
} */

.main-v2 .slider-h2 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3.375rem;
}
.main-v2 .slider-h2::before {
  content: "";
  display: inline-block;
  width: 3.75rem;
  height: 3.75rem;
  margin-right: 1.25rem;
}
.main-v2 .slider-h2::after {
 /*  content: "FEATURE"; */
  position: absolute;
  bottom: 100%;
  left: 5rem;
  display: block;
  font-size: 0.8125rem;
  color: var(--main-100);
}
.main-v2 .slider-h2 + p {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  line-height: 2.125rem;
}
.main-v2 .slider-h2 + p > strong {
  position: relative;
  color: var(--main-100);
}
.main-v2 .slider-h2 + p > strong::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 27px;
  background: rgba(232, 60, 122, 0.1);
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
/* .main-v2 .slider-h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 1.875rem;
  line-height: 1.3;
  word-break: keep-all;
  color:#444
}
 */

.main-v2 .slider-h3 {
    display: flex;         /* 요소들을 가로로 배치 */
    align-items: center;    /* 세로 중앙 정렬 */
    flex-wrap: wrap;       /* 화면이 좁아지면 자연스럽게 줄바꿈 */
    gap: 12px;             /* 배지-제목-버튼 사이의 간격 */
    font-size: 1.875rem;
    line-height: 1;
    color: #444;
    width: 100%;
}


/*
.main-v2 .slider-h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 2rem;
  aspect-ratio: 6.375/2;
  margin-bottom: 0.875rem;
  background: url("../img/img_badge_new.png") no-repeat left/contain;
}
*/

.main-v2 .slider-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: bold;
}
.main-v2 .slider-tit::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  background-color: #3A3890;
}
.main-v2 .slider-txt {
  font-size: 1rem;
  line-height: 1.875rem;
}
/* .main-v2 .slider-move {
  padding: 0.5rem 1rem;
  margin-left: 2.625rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#222), color-stop(50%, #222), color-stop(50%, #5661A7), color-stop(75%, #E83C7A), to(#A3A1FF));
  background-image: linear-gradient(to right, #222 0%, #222 50%, #5661A7 50%, #E83C7A 75%, #A3A1FF 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  border-radius: 1.5rem;
  font-size: 1rem;
  color: #fff;
} */
.main-v2 .slider-move {
    margin-left: auto; /* flex-grow와 함께 확실하게 오른쪽 끝으로 밀어냄 */
    flex-shrink: 0; /* 버튼 모양이 찌그러지지 않게 고정 */
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    height: 38px; /* 제목 높이와 밸런스를 맞춘 높이 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-image: -webkit-gradient(linear, left top, right top, from(#222),
        color-stop(50%, #222), color-stop(50%, #5661A7),
        color-stop(75%, #E83C7A), to(#A3A1FF));
    background-image: linear-gradient(to right, #222 0%, #222 50%, #5661A7 50%, #E83C7A 75%,
        #A3A1FF 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    border-radius: 1.5rem;
    font-size: 1rem;
    color: #fff;
}

.main-v2 .slider-move::after {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.5rem;
  background: url("../img/img_arrow_w_main.png") no-repeat center/contain;
}
.main-v2 .slider-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.125rem;
}
.main-v2 .slider-arrow > button {
  width: 2.875rem;
  aspect-ratio: 1/1;
  color: transparent;
}
.main-v2 .slider-arrow .prev {
  background: url("../img/ic_arrow_r_main.png") no-repeat center/contain;
}
.main-v2 .slider-arrow .next {
  background: url("../img/ic_arrow_l_main.png") no-repeat center/contain;
}
.main-v2 .slider-img {
  position: relative;
  width: 28.9375rem;
  aspect-ratio: 463/331;
  background-color: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
}
.main-v2 .slider-img .slider-frame, .main-v2 .slider-img img {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
}
.main-v2 .slider-img .slider-frame {
  background: url("../img/img_browser_main.png") no-repeat center/contain;
}
.main-v2 .slider-img img {
  z-index: 8;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom;
     object-position: bottom;
}
.main-v2 .rank h3 {
  /* margin-bottom: 3.125rem; */
  margin-bottom: 1.125rem;
  font-size: 2rem;
  text-align:center;
  color: #444;
}
.main-v2 .rank h3 > span {
  font-size: 1rem;
  color: #A4A4A4;
}
.main-v2 .rank__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1.5rem;
}
.main-v2 .rank__container > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.main-v2 .rank__container > div h4 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
.main-v2 .rank__container-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
.main-v2 .rank__container-vertical > div h4 {
  text-align: left;
}
.main-v2 .rank__container-vertical .rank__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.main-v2 .rank__container-vertical .rank__item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.main-v2 .rank__container-vertical .rank-cont > p {
  height: 3.625rem;
}
/* .main-v2 .rank__group {
  height: calc(100% - 1.8125rem - 0.75rem);
  padding: 1rem 0 1.25rem;
  border: 1px solid #EEEEEE;
  border-radius: 0.75rem;
  background-color: #F8F9FC;
} */

.main-v2 .rank__group {
    margin-top: 0px;      /* 위쪽 여백을 줄여 제목 섹션과 밀착 */
    background-color: #FAFAFB; /* 기존보다 더 연한 그레이/화이트 톤 */
    border: 1px solid #F0F0F0; /* 경계선도 더 흐리게 변경 */
    box-shadow: none;        /* 혹시 있을 그림자 제거로 평면감 부여 */
}
.main-v2 .rank__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
  padding: 1.0rem 0.5rem;
  cursor: pointer;
}
.main-v2 .rank-num {
  white-space: nowrap;
}
.main-v2 .rank-num.rank-top {
  color: #FF6EA2;
}
.main-v2 .rank-num > strong {
  margin-right: 0.375rem;
  font-size: 2.0rem;
  font-weight: bold;
}
.main-v2 .rank-num > span {
  font-size: 1rem;
  color: #333333;
}
.main-v2 .rank-cont > p {
  /* margin-bottom: 0.75rem; */
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.6;
  word-break: keep-all;
}
.main-v2 .rank-cont span {
  font-size: 0.875rem;
}
.main-v2 .rank-cont > div > .tit {
  margin-right: 0.5rem;
}
.main-v2 .rank-cont > div > .txt {
  margin-right: 1.25rem;
}
.main-v2 .rank-cont > div >  .txt.strong {
  font-size: 1.4rem;
  font-weight: bold;
  color: #3A3890;
}

/* --- 애니메이션 설정 --- */
/* 슬라이더 전체 컨테이너 초기 상태 */
/* --- 슬라이더 애니메이션 구조 재정비 --- */
.slider {
  opacity: 1;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  /* 기본적으로 트랜지션은 정의해두되, 초기 상태는 opacity 0입니다. */
  -webkit-transition: opacity 1s ease, -webkit-transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 1s ease, -webkit-transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease, -webkit-transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.slider.is-ready {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.slider__item {
  /* 초기 상태: 모든 요소가 아래에 투명하게 대기 */
}
.slider__item .slider-h2, .slider__item .slider-h2::after, .slider__item .slider-h2 + p,
.slider__item .slider-h3, .slider__item .slider-move, .slider__item .slider-tit, .slider__item .slider-txt, .slider__item .slider-img img {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  /* 여기서 transition을 미리 선언해두어야 클래스가 붙을 때 즉시 작동합니다. */
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.8s ease, -webkit-transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease, -webkit-transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.slider__item .slider-img img {
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

/* 핵심: .is-ready(스크롤 도달)와 .slick-active(현재 슬라이드)가 모두 만족될 때만 등장 */
.slider.is-ready .slider__item.slick-active .slider-h2::after {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.slider.is-ready .slider__item.slick-active .slider-h2 {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.slider.is-ready .slider__item.slick-active .slider-h2 + p {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.slider.is-ready .slider__item.slick-active .slider-img img {
  opacity: 1;
  -webkit-transform: translateY(0) !important;
          transform: translateY(0) !important;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.8s ease, -webkit-transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, -webkit-transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.slider.is-ready .slider__item.slick-active .slider-h3, .slider.is-ready .slider__item.slick-active .slider-move {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.slider.is-ready .slider__item.slick-active .slider-tit {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.slider.is-ready .slider__item.slick-active .slider-txt {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}

/* --- 랭킹 섹션 애니메이션  --- */
.rank__item {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  -webkit-transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rank__item.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.rank__item:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

/* 랭킹 아이템 개선 (SCSS) */
.rank__item {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* background-color: #fff; 기본 배경 */
  -webkit-transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.rank__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* 왼쪽 밖에 대기 */
  width: 100%;
  height: 100%;
  /* 배경색을 브랜드 컬러의 아주 연한 버전(Alpha값 조절)으로 설정 */
  background: -webkit-gradient(linear, left top, right top, from(rgba(58, 56, 144, 0.03)), to(rgba(58, 56, 144, 0.08)));
  background: linear-gradient(90deg, rgba(58, 56, 144, 0.03) 0%, rgba(58, 56, 144, 0.08) 100%);
  -webkit-transition: left 0.4s ease-out;
  transition: left 0.4s ease-out; /* 위아래가 아닌 좌우 이동 */
  z-index: -1;
}
.rank__item:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  border-color: rgba(58, 56, 144, 0.3);
}
.rank__item:hover::before {
  left: 0; /* 왼쪽에서 스윽 차오름 */
}
.rank__item:hover .rank-num {
  position: relative;
}
.rank__item:hover .rank-num::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: -1;
  display: block;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background: #3A3890;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.rank__item:hover .rank-num > strong {
  color: #fff;
  -webkit-filter: contrast(1.3), brightness(1.2);
          filter: contrast(1.3), brightness(1.2);
}
.rank__item:hover .rank-num > span {
  color: #fff;
}
.rank__item:hover:not(.is-visible) .rank-num > strong {
  color: var(--main-100);
}

/* 반응형 */
@media screen and (max-width: 1520px) {
  .main-v2 .slider__item-bottom {
    padding: 1.875rem 3.2895vw 1.875rem;
  }
  .main-v2 .slider__item-bottom > div {
    margin-right: 12.1053vw;
  }
}

.slider-h3.no-badge::before {
  display: none; /* 요소를 아예 렌더링하지 않음 */
}

.update-btn {
        /* 버튼의 기본 스타일 초기화 */
        display: inline-block;
        padding: 10px 25px; /* 위아래, 좌우 여백 */
        background-color: #E63B7F; /* 이미지에서 추출한 핑크색 */
        color: white;
        text-decoration: none;
        border: none;
        cursor: pointer;

        /* 폰트 스타일 설정 ( Montserrat, Bold) */
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase; /* 대문자로 변환 */
        letter-spacing: 0.5px; /* 글자 간격 살짝 넓힘 */

        /* 🌟 핵심: border-radius 설정 (왼쪽상단 우측하단만 둥글게) */
        border-radius: 12px 0 12px 0; /* 시계 방향 순서: top-left, top-right, bottom-right, bottom-left */
    }


/*
	강희성 수정
*/


.badge-new {
    /* 레이아웃 제어 */
    display: flex;           /* 내부 텍스트 중앙 정렬을 위해 flex 사용 */
    justify-content: center;
    align-items: center;
    width: 102px;            /* 요청하신 102px로 고정 */
    height: 32px;            /* 102px 너비에 적절한 높이 부여 */
    margin-right: 100%;      /* [핵심] 다음 요소(제목)를 강제로 다음 줄로 밀어냄 */


    /* 디자인 스타일 */
    background-color: #E83C7A;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.0rem;      /* 텍스트 크기 미세 조정 */
    text-transform: uppercase;
    border-radius: 12px 0 12px 0; /* 요청하신 특유의 굴림 스타일 */
    line-height: 1;
    flex-shrink: 0;          /* 사이즈가 줄어들지 않도록 고정 */
}

.slider-h3-text {
    flex: 1;               /* 남는 공간을 다 채움 -> 버튼을 오른쪽 끝으로 밀어냄 */
    font-size: 1.875rem;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    word-break: keep-all;  /* 단어 단위 줄바꿈으로 깔끔하게 */
    overflow: hidden;
    text-overflow: ellipsis; /* 제목이 너무 길면 ... 처리 (선택 사항) */
    white-space: nowrap;    /* 제목이 한 줄로 길어지게 하고 싶을 때 사용 */
}