@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");

:root {
  --gray50: #f9f9f9;
  --gray70: #fdfdfd;
  --gray80: #f2f3f8;
  --gray100: #eee;
  --gray200: #d8dbe6;
  --gray300: #b2b2b2;
  --gray350: #8b8b8b;
  --gray400: #767575;
  --gray500: #595959;
  --gray600: #555;
  --gray700: #333;
  --gray800: #222;
  --gray900: #111;

  --blue100: #e5f2fd;
  --blue500: #005baf;
  --blue600: #0155a2;
  --blue700: #004ebb;
  --blue800: #0045a3;
  --blue900: #004099;
  --blue-80: rgba(197, 219, 238, 0.8);
  --blue-93: rgba(21, 63, 123, 0.93);

  --sky500: #00acd4;
  --sky800: #3a4f6d;

  --red-400: #ff3c00;

  --white: #fff;
  --white-20: rgba(255, 255, 255, 0.2);
  --black: #000;
  --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,
span {
  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;
}*/
button {
  border: none;
  cursor: pointer;
}
.a11y-hidden {
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

.btn_type03{border:1px solid #000; border-radius:10px; padding:2px 5px;}

.width-basic {
  width: 150rem;
  margin-inline: auto;
  @media (width < 1500px) {
    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;
  }
}
/* -------------------------------------------------------------------------- */
/*                                    footer                                   */
.main_foot{font-size:1.6rem;}
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                   Button                                   */
/* -------------------------------------------------------------------------- */
.btn-prev1 {
  width: 3.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_left2.png) no-repeat center var(--white);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.23);
  border-radius: 10rem;
}
.btn-next1 {
  width: 3.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_right2.png) no-repeat center var(--white);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.23);
  border-radius: 10rem;
}
.btn-pause {
  width: 3.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_pause.png) no-repeat center var(--white);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.23);
  border-radius: 10rem;
  &.active {
    background: url(/intro/renewal/ico_play.png) no-repeat center var(--white);
  }
}
.btn-prev2 {
  width: 5.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_left3.png) no-repeat center;
}
.btn-next2 {
  width: 5.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_right3.png) no-repeat center;
}
.btn-prev3 {
  width: 2.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_left4.png) no-repeat center;
}
.btn-next3 {
  width: 2.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_right4.png) no-repeat center;
}
.btn-prev4 {
  width: 6.3rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_left5.png) no-repeat center / contain;
}
.btn-next4 {
  width: 6.3rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_right5.png) no-repeat center / contain;
}
.btn-prev5 {
  width: 7.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_left6.png) no-repeat center / contain;
}
.btn-next5 {
  width: 7.5rem;
  aspect-ratio: 1;
  background: url(/intro/renewal/ico_arrow_right6.png) no-repeat center / contain;
}
.btn-more {
  display: inline-flex;
  height: 2rem;
  color: var(--gray700);
  font-size: 1.6rem;
  line-height: 2.7rem;
  padding-right: 7.2rem;
  background: url(/intro/renewal/ico_more2.png) no-repeat right;
  .news & {
    color: var(--white);
    background-image: url(/intro/renewal/ico_more3.png);
  }
}
.btn-more2 {
  font-size: 1.4rem;
  color: var(--white);
  border: 1px solid var(--gray70);
  width: 8.5rem;
  aspect-ratio: 1;
  border-radius: 10rem;
  box-sizing: border-box;
  text-align: center;
  align-content: center;
  @media (width < 500px) {
    aspect-ratio: inherit;
    padding-block: 1rem;
    margin-top: 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                    Text                                    */
/* -------------------------------------------------------------------------- */

.text-primary {
  color: var(--blue800);
}

.text-type1 {
  text-transform: uppercase;
  font-size: 2.4rem;
  font-weight: 900;
}
.text-type2 {
  text-transform: uppercase;
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--gray800);
  .news & {
    color: var(--white);
  }
}
.text-type3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white-20);
  text-transform: uppercase;
}
.text-type4 {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 700;
  color: var(--white);
}
.text-type5 {
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 300;
  color: var(--white);
}

/* -------------------------------------------------------------------------- */
/*                                    Badge                                   */
/* -------------------------------------------------------------------------- */
.badge {
  &.new {
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 2rem;
    background-color: var(--red-400);
    color: var(--white);
    text-align: center;
    align-content: center;
    font-size: 1.5rem;
    font-weight: 500;
  }
  &.blue {
    display: inline-flex;
    align-items: center;
    padding-inline: 1.5rem;
    height: 3rem;
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 500;
    background-color: var(--blue700);
    border-radius: 10rem;
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------- */
/*                                    Slide                                   */
/* -------------------------------------------------------------------------- */
@media all and (max-width:600px){
    #top-news .swiper-slide{height: 300px !important; width: 100% !important;}
    #top-news .swiper-slide img{height: 100%; width: 100%; object-fit: cover; aspect-ratio: 16/9;}
}
@media all and (max-width:450px){
    #top-news .swiper-slide{height: 180px !important; width: 100% !important;}
    #top-news .swiper-slide:nth-of-type(3) img,
    #top-news .swiper-slide:nth-of-type(4) img,
    #top-news .swiper-slide:nth-of-type(5) img {object-fit:fill; }
}
.slide-wrap {
  display: grid;
  grid-template-columns: 1fr 38rem;
  gap: 6rem;
  @media (width < 1300px) {
    gap: 2rem;
  }
  @media (width < 1024px) {
    grid-template-columns: 1fr;
  }
}
#top-news {
  margin: 0;
  position: relative;
  .swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    height: 49rem;
    @media (width < 600px) {
      height: 185px;
      width: 100% !important;
    }
    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      @media (width < 600px) {
        /*height: 100%;
        object-fit: contain;
        aspect-ratio: 16/9;*/
      }
    }
  }

  .controls {
    position: absolute;
    inset: auto 15.8rem 4.5rem auto;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    @media (width < 600px) {
      inset: 1rem 1rem auto auto;
    }
    button:disabled {
      cursor: not-allowed;
      opacity: 0.2;
    }
    .btn-prev1 {
      order: 1;
    }
    .btn-next1 {
      order: 3;
    }
    .btn-pause {
      order: 2;
    }
  }
}
.slide-info {
  position: absolute;
  inset: 0 0 0 auto;
  padding: 4.2rem;
  width: 32rem;
  background-color: var(--blue-93);
  color: var(--white);
  box-sizing: border-box;
  @media (width < 600px) {
    position: static;
    width: 100%;
  }

  .text-type4 {
    margin-top: 2rem;
  }
  .text-type5 {
    margin-top: 1.5rem;
  }
}
.user-service-slide {
  position: relative;
  > button {
    position: absolute;
    top: 1.2rem;
    z-index: 10;
    &:disabled {
      cursor: not-allowed;
      opacity: 0.2;
    }
  }
  .btn-prev2 {
    left: 0;
  }
  .btn-next2 {
    right: 0;
  }
}

#user-service-slide0, #user-service-slide1, #user-service-slide2 {
  --swiper-pagination-bullet-size: 0.7rem;
  --swiper-pagination-bullet-inactive-color: var(--gray350);
  --swiper-pagination-bullet-horizontal-gap: 0.5rem;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-border-radius: 10rem;

  margin-top: 4rem;
  margin-inline: 7.5rem;
  .swiper-pagination-bullet-active {
    --swiper-pagination-bullet-width: 2rem;
    --swiper-pagination-color: var(--blue500);
  }
  .service-paging {
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
    span {
      transition: 0.4s;
    }
  }
  .swiper-slide {
    width: clamp(8rem, 10vw, 13.5rem);
  }
  [class*="item"] {
    display: grid;
    gap: 2rem;
    font-size: 1.7rem;
    line-height: 2.1rem;
    letter-spacing: -0.02rem;
    color: var(--gray700);
    text-align: center;
    &::before {
      content: "";
      width: 8rem;
      aspect-ratio: 1;
      background: var(--bg) no-repeat center, var(--bgActive, none) no-repeat center / cover var(--gray100);
      border-radius: 2.5rem;
      justify-self: center;
    }
    &:focus,
    &:hover {
      --bgActive: url(/intro/renewal/list_bg_service.png);

      color: var(--blue600);
      font-weight: 700;
    }
    &.item1 {
      --bg: url("/intro/renewal/ico_main1.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main1_active.png");
      }
    }
    &.item2 {
      --bg: url("/intro/renewal/ico_main2.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main2_active.png");
      }
    }
    &.item3 {
      --bg: url("/intro/renewal/ico_main3.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main3_active.png");
      }
    }
    &.item4 {
      --bg: url("/intro/renewal/ico_main4.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main4_active.png");
      }
    }
    &.item5 {
      --bg: url("/intro/renewal/ico_main5.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main5_active.png");
      }
    }
    &.item6 {
      --bg: url("/intro/renewal/ico_main6.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main6_active.png");
      }
    }
    &.item7 {
      --bg: url("/intro/renewal/ico_main7.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main7_active.png");
      }
    }
    &.item8 {
      --bg: url("/intro/renewal/ico_main8.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main8_active.png");
      }
    }
    &.item9 {
      --bg: url("/intro/renewal/ico_main9.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main9_active.png");
      }
    }
    &.item10 {
      --bg: url("/intro/renewal/ico_main10.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main10_active.png");
      }
    }
    &.item11 {
      --bg: url("/intro/renewal/ico_main11.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main11_active.png");
      }
    }
    &.item12 {
      --bg: url("/intro/renewal/ico_main12.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main12_active.png");
      }
    }
    &.item13 {
      --bg: url("/intro/renewal/ico_main13.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main13_active.png");
      }
    }
    &.item14 {
      --bg: url("/intro/renewal/ico_main14.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main14_active.png");
      }
    }
    &.item15 {
      --bg: url("/intro/renewal/ico_main15.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main15_active.png");
      }
    }
    &.item16 {
      --bg: url("/intro/renewal/ico_main16.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main16_active.png");
      }
    }
    &.item17 {
      --bg: url("/intro/renewal/ico_main17.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main17_active.png");
      }
    }
    &.item18 {
      --bg: url("/intro/renewal/ico_main18.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main18_active.png");
      }
    }
    &.item19 {
      --bg: url("/intro/renewal/ico_main19.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main19_active.png");
      }
    }
    &.item20 {
      --bg: url("/intro/renewal/ico_main20.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main20_active.png");
      }
    }
    &.item21 {
      --bg: url("/intro/renewal/ico_main21.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main21_active.png");
      }
    }
    &.item22 {
      --bg: url("/intro/renewal/ico_main22.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main22_active.png");
      }
    }
    &.item23 {
      --bg: url("/intro/renewal/ico_main23.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main23_active.png");
      }
    }
    &.item24 {
      --bg: url("/intro/renewal/ico_main24.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main24_active.png");
      }
    }
    &.item25 {
      --bg: url("/intro/renewal/ico_main25.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main25_active.png");
      }
    }
    &.item26 {
      --bg: url("/intro/renewal/ico_main26.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main26_active.png");
      }
    }
    &.item27 {
      --bg: url("/intro/renewal/ico_main27.png");
      &:hover,
      &:focus {
        --bg: url("/intro/renewal/ico_main27_active.png");
      }
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                    List                                    */
/* -------------------------------------------------------------------------- */
.focus-list {
  --arrow: url(/intro/renewal/ico_more.png) no-repeat right 1.9rem center / 2.2rem auto var(--white);

  margin-top: 2rem;
  a {
    display: flex;
    align-items: center;
    padding-left: 7.7rem;
    height: 11rem;
    border-radius: 1.5rem;
    border: 1px solid var(--gray200);
    font-size: 1.8rem;
    line-height: 2.8rem;
    font-weight: 700;
    color: var(--gray900);
    &::before {
      content: "";
    }
  }
  li {
    margin-top: 1rem;
  }
  li:nth-child(1) a {
    background: url(/intro/renewal/ico_focus1.png) no-repeat 2.5rem center, var(--arrow);
  }
  li:nth-child(2) a {
    background: url(/intro/renewal/ico_focus2.png) no-repeat 2.5rem center, var(--arrow);
  }
  li:nth-child(3) a {
    background: url(/intro/renewal/ico_focus3.png) no-repeat 2.5rem center, var(--arrow);
  }
}
.notice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr));
  gap: 3rem;
  @media (width < 1024px) {
    gap: 1rem;
    margin-top: 1rem;
  }
  a {
    position: relative;
    display: grid;
    background-color: var(--white);
    border: 1px solid var(--blue-80);
    padding: 2rem 2rem 2.5rem 3rem;
    border-radius: 2rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    min-height: 140px;
  }

  .date {
    font-size: 1.6rem;
    color: var(--gray400);
    line-height: 1;
    align-self: center;
    line-height: 3rem;
    margin-bottom: 0.5rem;
  }
  .badge {
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: end;
    align-items: center;
    margin-top: 20px;
  }
  .category {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gray700);
    line-height: 2.7rem;
    letter-spacing: -0.03rem;
    grid-column: 1/-1;
  }
  .title {
    grid-column: 1/-1;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gray700);
    line-height: 2.7rem;
    letter-spacing: -0.03rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

.schedule-list {
  @media (width < 1500px) {
    padding-inline: 10rem;
  }
  @media (width < 800px) {
    padding-inline: 0;
  }
  .swiper-slide {
    width: clamp(28rem, 10vw, 40rem);
	margin-right: 25px !important;
  }
  a {
    display: block;
    border: 1px solid var(--gray200);
    border-radius: 2rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    background-color: var(--white);
    overflow: hidden;
  }
  .date {
    display: flex;
    padding-inline: 2rem;
    align-items: center;
    gap: 1rem;
    height: 7rem;
    background-color: var(--gray50);
    strong {
      color: var(--blue900);
      font-size: 2.2rem;
      line-height: 2.8rem;
      white-space: nowrap;
    }
  }
  .content {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 1rem 2rem;
    text-align: left;
    color: var(--gray700);
    font-size: 1.8rem;
    max-width: calc(100% - 4rem);
  }
}
.news-list {
  margin: 0;
  padding-right: 1rem;
  padding-block: 2rem;
  .swiper-slide {
    width: max(42rem, 15vw);
    @media (width < 1024px) {
      width: 30rem;
    }
  }
  a {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--white);
    border-radius: 2rem;
    padding: 1rem 1rem 2rem;
    box-sizing: border-box;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.11);
    text-align: center;
  }
  .thumbnail {
    overflow: hidden;
    border-radius: 2rem;
    width: 100%;
    aspect-ratio: 1.81 / 1;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .title {
    color: var(--gray800);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    @media (width < 1024px) {
      -webkit-line-clamp: 2;
    }
  }
}
.communication-list {
  display: flex;
  gap: 4rem;
  margin-top: 4rem;
  @media (width < 1024px) {
    flex-direction: column;
    gap: 2rem;
  }
  > * {
    flex: 1;
  }
  a {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: 1fr 1fr;
    padding-inline: 6rem;
    gap: 0.6rem;
    height: 16rem;
    border-radius: 2rem;
    @media (width < 500px) {
      height: auto;
      padding: 3rem;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
  }
  .btn-more2 {
    grid-column: 2/3;
    grid-row: 1/3;
    justify-self: center;
    align-self: center;
    @media (width < 500px) {
      grid-column: auto;
      grid-row: auto;
      justify-self: start;
    }
  }
  .title {
    color: var(--white);
    font-size: 3rem;
    font-weight: 900;
    align-self: end;
    small {
      font-size: 2rem;
      font-weight: 700;
      @media (width < 1200px) {
        display: block;
      }
      @media (width < 1024px) {
        display: inline;
      }
    }
  }
  .subtitle {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
  }
  .bg1 {
    background: url(/intro/renewal/img_communication1.png) no-repeat center / cover;
  }
  .bg2 {
    background: url(/intro/renewal/img_communication2.png) no-repeat center / cover;
  }
}

/* -------------------------------------------------------------------------- */
/*                                     Tab                                    */
/* -------------------------------------------------------------------------- */
.tab-type2 {
  display: flex;
  justify-content: center;
  li {
    display: flex;
    align-items: center;
    + li {
      &::before {
        content: "";
        background: var(--gray300);
        border-radius: 10rem;
        width: 0.5rem;
        aspect-ratio: 1;
      }
    }
  }
  button {
    padding: 1.3rem 1.5rem;
    color: var(--gray600);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1;
    background-color: transparent;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: auto 10rem 0;
      height: 0.3rem;
      border-radius: 1.5rem;
      background: var(--blue500);
      transition: 0.4s;
    }
  }
  [aria-selected="true"] {
    button {
      color: var(--black);
      font-weight: 800;
      &::after {
        inset: auto 1.5rem 0;
      }
    }
  }
}
.tab-type3 {
  display: grid;
  gap: 1rem;
  button {
    width: 15rem;
    height: 5rem;
    color: var(--gray600);
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1;
    background-color: var(--white);
    white-space: nowrap;
    border: 1px solid var(--gray500);
    border-radius: 10rem;
    transition: 0.4s;
    @media (width < 1024px) {
      font-size: 1.8rem;
    }
  }
  [aria-selected="true"] {
    button {
      color: var(--white);
      font-weight: 800;
      background-color: var(--blue500);
      border-color: var(--blue500);
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Layout                                   */
/* -------------------------------------------------------------------------- */
.section1-wrapper {
  padding-top: 7rem;
  background: url(/intro/renewal/img_logo2.png) no-repeat right -2rem bottom 19.2rem;
}
.focus {
  border-radius: 2rem;
  padding: 3.5rem 3.5rem 5rem;
  background-color: var(--gray80);
}

.notice {
  background-color: var(--blue100);
  padding-block: 10rem;
  @media (width < 1024px) {
    padding-block: 5rem;
  }
  .width-basic {
    display: grid;
    grid-template-columns: 24rem 21rem 1fr;
    @media (width < 1300px) {
      grid-template-columns: 24rem 1fr;
      > div {
        &:first-child {
          grid-row: 1/3;
        }
      }
      .tab-type3 {
        display: flex;
        padding-bottom: 1rem;
        > * {
          flex: 1;
          button {
            width: 100%;
          }
        }
      }
    }
    @media (width < 800px) {
      grid-template-columns: 1fr;
      > div {
        margin-bottom: 2rem;
        &:first-child {
          grid-row: auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .btn-more {
    margin-top: 5rem;
    @media (width < 800px) {
      margin-top: 0;
    }
  }
}
.user-service {
  margin-block: 5.5rem 8.4rem;
}
.news {
  padding-block: 8rem;
  position: relative;
  .text-type2 {
    padding-block: 2rem 5rem;
    @media (width < 1024px) {
      padding-block: 0;
    }
  }
  .width-basic {
    display: grid;
    grid-template-columns: 17.8rem 1fr;
    position: relative;
    @media (width < 1024px) {
      grid-template-columns: 1fr;
      > div {
        &:first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: calc(50vw - 3rem);
    inset: 0 auto 0 0;
    background-color: var(--sky500);
    border-radius: 0 10rem 0 0;
    @media (width < 1024px) {
      width: 100%;
      inset: 0 0 20rem 0;
      border-radius: 0 5rem 0 0;
    }
  }
  .btn-prev5 {
    right: 8.7rem;
    @media (width < 1024px) {
      right: inherit;
      left: 0;
      translate: 30% 0;
    }
  }
  .btn-next5 {
    right: 0;
    @media (width < 1024px) {
      right: 0;
      translate: -30% 0;
    }
  }
  .btn-prev5,
  .btn-next5 {
    position: absolute;
    top: -10rem;
    @media (width < 1024px) {
      top: inherit;
      bottom: -7rem;
      scale: 0.7;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }
}

.communication {
  padding-block: 10rem;
  @media (width < 1024px) {
    padding-block: 5rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                     ETC                                    */
/* -------------------------------------------------------------------------- */
.schedule {
  position: relative;
  text-align: center;
  padding-block: 10rem 10.7rem;
  @media (width < 1024px) {
    padding-block: 5rem;
  }
  .btn-prev4 {
    left: -2rem;
    translate: -100% 0;
    @media (width < 1500px) {
      left: 2rem;
      translate: 0 0;
      z-index: 10;
    }
  }
  .btn-next4 {
    right: -2rem;
    translate: 100% 0;
    @media (width < 1500px) {
      right: 2rem;
      translate: 0 0;
      z-index: 10;
    }
  }
  .btn-prev4,
  .btn-next4 {
    position: absolute;
    top: 28.5rem;
    @media (width < 800px) {
      top: 9rem;
      scale: 0.75;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }
}
.schedule-month {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-block: 4.5rem 3rem;
  .month {
    color: var(--sky800);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03rem;
  }
}