@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/Nyannnnnng/NEXON-Lv.2-Gothic/stylesheet.css");
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");

/* ul, ol�� 湲곕낯 �ㅽ��� �쒓굅 */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none; /* 湲곕낯 紐⑸줉 �ㅽ���(��, �レ옄 ��) �쒓굅 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

input, textarea {
    border: none;
    outline: none;
    font: inherit;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:root {
  --gray50: #f1f5fd;
  --gray100: #6d6d6d;
  --gray200: #555;
  --gray300: #4a4a4a;
  --gray400: #444;
  --gray500: #333;
  --gray600: #222;

  --blue200: #6d7ca2;
  --blue400: #146acf;
  --blue700: #123fb2;

  --white: #fff;
  --nexon: "NEXON Lv2 Gothic";
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
code,
address,
ul,
ol,
li,
nav,
section,
article,
header,
footer,
main,
aside,
dl,
dt,
dd,
table,
thead,
tbody,
tfoot,
label,
caption,
th,
td,
form,
fieldset,
legend,
hr,
input,
button,
textarea,
object,
figure,
figcaption {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html {
  font-size: 62.5%;
  @media (width < 1024px) {
    font-size: 50%;
  }
}
body {
  font-size: 1rem;
  background: url(/intro/renewal/bg_body.png) no-repeat center / cover;
  background-attachment: fixed;
}
button {
  border: none;
  cursor: pointer;
}
.a11y-hidden {
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

.width-basic {
  width: 153rem;
  margin-inline: auto;
  @media (width < 1530px) {
    width: 100%;
    padding-inline: 2rem;
    box-sizing: border-box;
    margin: 0;
  }
  @media (width < 1300px) {
    width: 100%;
    padding-inline: 2rem;
    box-sizing: border-box;
    margin: 0;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Button                                   */
/* -------------------------------------------------------------------------- */
.sns_youtube {
  display: inline-flex;
  width: 3.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_youtube.png) no-repeat center / contain;
}
.sns_instagram {
  display: inline-flex;
  width: 3.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_insta.png) no-repeat center / contain;
}

.btn-type1 {
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  padding-inline: 1.4rem;
  font-size: 1.5rem;
  line-height: 2.8rem;
  color: var(--gray400);
  border: 1px solid var(--gray100);
  border-radius: 10rem;
  &.active {
    background-color: var(--gray600);
    border-color: var(--gray600);
    color: var(--white);
  }
}
.btn-prev {
  width: 2.7rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_left.png) no-repeat center / contain;
}
.btn-next {
  width: 2.7rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_right.png) no-repeat center / contain;
}

/* -------------------------------------------------------------------------- */
/*                                    Text                                    */
/* -------------------------------------------------------------------------- */
.text-type1 {
  color: var(--blue200);
  font-size: 2.5rem;
  font-weight: 100;
}
.text-type2 {
  color: var(--blue700);
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: -0.05rem;
  font-family: var(--nexon);
}
.text-type3 {
  color: var(--gray400);
  font-size: 2rem;
  font-weight: 300;
  line-height: 2.5rem;
}

/* -------------------------------------------------------------------------- */
/*                                     Tab                                    */
/* -------------------------------------------------------------------------- */
.tab-type1 {
  display: flex;
  gap: 0.5rem;
  @media (width < 1024px) {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
  }
  button {
    color: var(--gray500);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: -0.05rem;
    background-color: var(--gray50);
    border: 1px solid var(--gray300);
    border-radius: 10rem;
    height: 4rem;
    padding-inline: 2rem;
    white-space: nowrap;
  }
  [aria-selected="true"] {
    button {
      background-color: var(--blue400);
      font-weight: 700;
      color: var(--white);
      border-color: var(--blue400);
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                    List                                    */
/* -------------------------------------------------------------------------- */
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
  gap: 2rem;
  margin-top: 5rem;
  a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 1.5rem; */
    text-align: center;
    height: 15rem;
    box-shadow: 3px 3px 1.5rem rgba(0, 0, 0, 0.07);
    background-color: var(--white);
    border-radius: 2rem;
    color: var(--gray500);
    font-size: 1.8rem;
    letter-spacing: -0.03rem;
    font-weight: 500;
    transition: 0.4s;
    &:focus,
    &:hover {
      background: url(/intro/renewal/list_bg_service.png) no-repeat center / cover;
      color: var(--white);
      &::before {
        filter: brightness(100%) invert(100%);
      }
    }
    &::before {
      content: var(--bg);
      transition: 0.4s;
      margin-bottom: 15px;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                               Header, Footer                               */
/* -------------------------------------------------------------------------- */
.header {
  position: relative;
  text-align: center;
  padding-top: 5rem;
  aside {
    position: absolute;
    display: flex;
    right: 0;
    top: 7rem;
    gap: 1.8rem;
    @media (width < 1024px) {
      position: static;
      justify-content: center;
      margin-top: 2rem;
    }
  }
  .sns-list {
    display: flex;
    gap: 0.5rem;
  }
}
.footer {
  color: var(--gray200);
  font-size: 1.6rem;
  line-height: 2.5rem;
  text-align: center;
  padding-block: 5rem;
}
@media all and (min-width:500px){
    .text_db{display: block;}
}
/* -------------------------------------------------------------------------- */
/*                                   Content                                  */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-left: 70.5rem;
  margin-top: 5.8rem;
  @media (width < 1530px) {
    padding-left: 50rem;
  }
  @media (width < 1300px) {
    padding: 0;
  }
  .big-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 65rem;
    @media (width < 1530px) {
      width: 45rem;
    }
    @media (width < 1300px) {
      position: static;
      width: 100%;
      margin-top: 5rem;
    }
  }
  .text {
    line-height: 1;
    .text-type2 {
      margin-top: 1.2rem;
    }
    .text-type3 {
      margin-block: 2.2rem 6.5rem;
      @media (width < 1300px) {
        margin-block: 2.2rem 2rem;
      }
    }
  }
}

.big-video {
  border-radius: 2rem;
  overflow: hidden;
  height: 36.5rem;
  background-color: var(--gray100);
  @media (width < 1300px) {
    height: auto;
  }
  iframe {
    width: 100%;
    height: 100%;
    @media (width < 1300px) {
      height: auto;
      aspect-ratio: 16/9;
    }
  }
}

.ad-list {
  position: relative;
  margin-top: 2rem;
  padding-inline: 4.5rem;
  .swiper {
    button {
      width: 13.5rem;
      border-radius: 1rem;
      overflow: hidden;
      @media (width < 1300px) {
        width: 100%;
      }

      img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 16/9;
      }
    }
  }
  [aria-selected="true"] {
    button {
      img {
        box-sizing: border-box;
        border: 5px solid rgba(0, 0, 0, 0.07);
        border-radius: 1rem;
      }
    }
  }

  .btn-prev {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
  }
  .btn-next {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
  }
}