/* NO CSS*/
/* componenet*/
[class^=section] {
  padding: 0;
}

:root {
  --fz-h2: 7rem;
  --fz-h3: 6.5rem;
  --fz-h4: 5.5rem;
  --fz-strong-title: 4.4rem;
  --fz-section-sub-p: 3rem;
  --fz-section-desc-p: 1.8rem;
  --fz-p-lg: 2.4rem;
  --fz-check: 2rem;
  --fz-check-type2: 1.862rem;
  --check-ico: 2.2rem;
  --check-ico-type2: 2.327rem;
  --check-pl: 2.8rem;
  --check-top: 0.5rem;
  --check-top-type2: 0.3rem;
  --check-gap: 1rem;
}

@media (max-width: 1279px) {
  :root {
    --fz-h2: clamp(3.6rem, 2.6vw + 3.2rem, 7rem);
    --fz-h3: clamp(2.8rem, 2.2vw + 2.4rem, 6.5rem);
    --fz-h4: clamp(3.2rem, 1.6vw + 2.2rem, 5.5rem);
    --fz-strong-title: clamp(2.8rem, 1.4vw + 2.2rem, 4.4rem);
    --fz-section-sub-p: clamp(2rem, 1.1vw + 1.6rem, 3rem);
    --fz-section-desc-p: clamp(1.6rem, 0.5vw + 1.2rem, 1.8rem);
    --fz-p-lg: clamp(1.7rem, 0.8vw + 1.3rem, 2.4rem);
    --fz-check: clamp(1.6rem, 0.5vw + 1.4rem, 2rem);
    --fz-check-type2: clamp(1.5rem, 0.45vw + 1.3rem, 1.862rem);
    --check-ico: clamp(1.8rem, 0.6vw + 1.4rem, 2.2rem);
    --check-ico-type2: clamp(1.9rem, 0.65vw + 1.4rem, 2.327rem);
    --check-top: clamp(0.3rem, 0.35vw + 0.1rem, 0.5rem);
    --check-top-type2: clamp(0.2rem, 0.3vw + 0.05rem, 0.3rem);
    --check-gap: clamp(0.6rem, 0.4vw + 0.4rem, 1rem);
  }
}
.h2 {
  color: #111827;
  font-size: var(--fz-h2);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0;
  text-align: center;
}

.h3 {
  color: #111827;
  font-size: var(--fz-h3);
  font-weight: 800;
  line-height: 140%;
  text-align: center;
}
.h3.gradient {
  background: linear-gradient(to right, #3362ff, #050064);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h4 {
  color: #1f2937;
  font-size: var(--fz-h4);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.03em;
  text-align: center;
}
.h4 span {
  font-weight: 400;
}

strong.title {
  color: #101840;
  font-size: var(--fz-strong-title);
  font-weight: 800;
  line-height: 130%;
}
strong.title span {
  font-weight: 400;
}

em.orange {
  color: #f58220;
}
em.blue {
  color: #3362ff;
}

.check-list.type2 > li {
  color: #474d66;
  font-size: var(--fz-check-type2);
}
.check-list.type2 > li:before {
  top: var(--check-top-type2);
  width: var(--check-ico-type2);
  height: var(--check-ico-type2);
  background: url(/next_2026_html/img/2026/main/ico_checkbox.png) no-repeat center/contain;
}
.check-list > li {
  position: relative;
  color: #1f2937;
  font-size: var(--fz-check);
  font-weight: 400;
  line-height: 150%;
  padding-left: 2.8rem;
}
.check-list > li:before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--check-top);
  width: var(--check-ico);
  height: var(--check-ico);
  background: url(/next_2026_html/img/2026/icon/ico_check-circle.png) no-repeat center/contain;
}
.check-list > li + li {
  margin-top: var(--check-gap);
}

br {
  display: block;
}
br.pc {
  display: block;
}
br.mobile {
  display: none;
}

@media (max-width: 459px) {
  br.pc {
    display: none;
  }
  br.mobile {
    display: block;
  }
}
body {
  background: #fff;
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-title {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.section-title.center {
  align-items: center;
  justify-content: center;
  height: -moz-fit-content;
  height: fit-content;
}
.section-title-sub {
  display: flex;
  justify-content: center;
}
.section-title-sub > strong {
  color: #1f2937;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 3.7rem;
}
.section-title-sub > p {
  color: #6b7280;
  font-size: var(--fz-section-sub-p);
  font-weight: 500;
  line-height: 3.7rem;
  letter-spacing: -0.03em;
  text-align: center;
}
.section-title > p {
  color: #474d66;
  font-size: var(--fz-section-desc-p);
  font-weight: 500;
  line-height: 2.7rem;
  text-align: center;
}
.section-container strong {
  color: #fff;
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 5.72rem;
}
.section-container strong em {
  font-weight: 900;
}
@media (max-width: 1279px) {
  .section-title {
    gap: 1.6rem;
  }
}
@media (max-width: 1023px) {
  .section:not(#section01) {
    min-height: auto;
  }
}

.main {
  min-height: auto;
  --main-pad-top: 12.8rem;
  --main-pad-bottom: 10.3rem;
  --main-contents-mt: 7.6rem;
  padding: var(--main-pad-top) 0 var(--main-pad-bottom);
  align-items: baseline;
}
.main:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  background: url(/next_2026_html/img/2026/main/visual_bg.jpg) no-repeat center/cover;
  z-index: -1;
}
.main .btn-group {
  display: flex;
  gap: 1.2rem 4rem;
}
.main .section-contents {
  margin-top: var(--main-contents-mt);
}
.main .visual {
  width: 27.135rem;
  margin: auto;
}
.main .visual img {
  display: block;
  width: 100%;
}
@media (max-width: 1279px) {
  .main .btn-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
  }
}
@media (max-width: 1023px) {
  .main {
    --main-pad-top: clamp(6rem, 6vw, 10rem);
    --main-pad-bottom: clamp(2rem, 5vw, 8rem);
    --main-contents-mt: clamp(3.2rem, 3.5vw, 7.6rem);
  }
}
@media (max-width: 767px) {
  .main .visual {
    width: 24rem;
  }
}

#section01 {
  --sec01-pad-y: 10.8rem;
  height: -moz-fit-content;
  height: fit-content;
  background: #fff;
  padding: var(--sec01-pad-y) 0;
}
@media (max-width: 1279px) {
  #section01 {
    --sec01-pad-y: clamp(6rem, 6vw, 10.8rem);
  }
}

#section02 {
  --sec02-pad-y: 12.8rem;
  --tool-gap: 6.4rem;
  --tool-image-r: 0.63;
  --tool-content-r: 0.37;
  --sec02-content-mt: 4.5rem;
  --sec02-content-gap: 7.45rem;
  position: relative;
  display: flex;
  background: linear-gradient(to bottom, #eef3ff 20%, #fff 100%);
  padding: var(--sec02-pad-y) 0;
}
#section02 .center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 128rem;
  height: 100%;
}
#section02 .section-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sec02-content-gap);
  width: 100%;
  margin-top: var(--sec02-content-mt);
}
#section02 .tool-tabs {
  display: flex;
  border: 1px solid #d1d5db;
  background: #fdfdfd;
  border-radius: 1.2rem;
  padding: 1rem;
}
#section02 .tool-tab {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 4.4rem;
  color: #1f2937;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 130%;
  padding: 0.8rem 1rem;
  border-radius: 1.2rem;
  background: #fdfdfd;
}
#section02 .tool-tab.active {
  color: #fff;
  background: #ff7f00;
}
#section02 .tool-item {
  display: flex;
  gap: var(--tool-gap);
  display: none;
}
#section02 .tool-contents {
  max-width: 117rem;
  margin: 0 auto;
}
#section02 .tool-image {
  flex: 0 0 calc((100% - var(--tool-gap)) * var(--tool-image-r));
  max-width: none;
}
#section02 .tool-image img {
  display: block;
  width: 100%;
}
#section02 .tool-title {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
#section02 .tool-title > img {
  display: block;
  width: rem;
}
#section02 .tool-title > strong {
  color: #111827;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 3.64rem;
}
#section02 .tool-content {
  flex: 1 1 calc((100% - var(--tool-gap)) * var(--tool-content-r));
  min-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 3rem;
  padding-top: 5rem;
}
@media (max-width: 1279px) {
  #section02 {
    --sec02-pad-y: clamp(6rem, 6vw, 12.8rem);
    --sec02-content-mt: clamp(3rem, 2vw, 4.5rem);
    --sec02-content-gap: clamp(5rem, 3vw, 7.45rem);
  }
}
@media (max-width: 1023px) {
  #section02 {
    --sec02-content-gap: clamp(4rem, 3.5vw, 6rem);
    --tool-gap: 3rem;
    --tool-image-r: 1;
    --tool-content-r: 1;
  }
  #section02 .tool-item {
    flex-wrap: wrap;
  }
  #section02 .tool-image {
    flex: auto;
    max-width: none;
  }
  #section02 .tool-tab {
    font-size: 1.4rem;
  }
  #section02 .tool-content {
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  #section02 .tool-tabs {
    justify-content: center;
    border: none;
    padding: 0;
    gap: 0.8rem;
    background: none;
  }
  #section02 .tool-tab {
    flex: none;
    width: -moz-fit-content;
    width: fit-content;
    height: 3.6rem;
  }
}
@media (max-width: 579px) {
  #section02 .service-image img {
    width: 100%;
  }
}

#section03 {
  --sec03-pad-y: 12.8rem;
  --ax-title-size: 4rem;
  --ax-item-pad: 4rem 3rem 4rem 4rem;
  --ax-item-w: 100%;
  --sec03-content-mt: 6rem;
  position: relative;
  background: #ecf2fc;
  padding: var(--sec03-pad-y) 0;
}
#section03 .section-content {
  margin-top: var(--sec03-content-mt);
}
#section03 .ax-item {
  flex: 1;
  width: var(--ax-item-w);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  padding: var(--ax-item-pad);
  border-radius: 1.2rem;
  background: #fff;
  min-height: 43.6rem;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
#section03 .ax-item:before {
  content: "";
  display: block;
  position: absolute;
  right: -2rem;
  bottom: 2rem;
}
#section03 .ax-title {
  color: #000;
  font-size: var(--ax-title-size, 4rem);
  font-weight: 800;
  word-break: break-word;
  letter-spacing: -0.03em;
  line-height: 3.8rem;
}
#section03 .ax-list {
  max-width: 107rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  --ax-gap: 3.6rem;
  --ax-r: 0.3217; /* 32.3 / 100.4 */
  --ax-r-best: 0.3566; /* 35.8 / 100.4 */
  gap: var(--ax-gap);
}
#section03 .ax-list > li {
  flex: 0 0 calc((100% - var(--ax-gap) * 2) * var(--ax-r));
  max-width: calc((100% - var(--ax-gap) * 2) * var(--ax-r));
  transition: transform 0.3s, box-shadow 0.3s;
}
#section03 .ax-list > li:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 50px 0 rgba(51, 98, 255, 0.2);
}
#section03 .ax-list > li > a {
  display: flex;
  flex-direction: column;
  border-radius: 1.2rem;
}
#section03 .ax-list > li.best {
  flex-basis: calc((100% - var(--ax-gap) * 2) * var(--ax-r-best));
  max-width: calc((100% - var(--ax-gap) * 2) * var(--ax-r-best));
}
#section03 .ax-list > li.best > a {
  gap: 1.6rem;
  align-items: center;
  padding: 1.6rem 1.75rem 2rem;
  background-color: #3362ff;
  background-image: linear-gradient(180deg, #3362ff 0%, #7796ff 100%);
  box-shadow: 0 2.4rem 4.8rem rgba(51, 98, 255, 0.25);
}
#section03 .ax-list > li.best .best-txt {
  display: block;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
}
#section03 .ax-list > li.best .ax-item {
  width: 100%;
}
#section03 .ax-list > li.best .ax-item:before {
  width: 10.1rem;
  height: 9.8rem;
  background: url(/next_2026_html/img/2026/main/ico_chat.svg) no-repeat center/contain;
}
#section03 .ax-list > li.mail .ax-item:before {
  width: 10.1rem;
  height: 9.9rem;
  background: url(/next_2026_html/img/2026/main/ico_mail.svg) no-repeat center/contain;
}
#section03 .ax-list > li.password .ax-item:before {
  width: 10.6rem;
  height: 10.6rem;
  background: url(/next_2026_html/img/2026/main/ico_password.svg) no-repeat center/contain;
}
@media (max-width: 1279px) {
  #section03 {
    --ax-title-size: clamp(3rem, 0.6vw + 3.2rem, 4rem);
    --ax-item-pad: clamp(2.4rem, 3.2vw, 4rem) clamp(1.6rem, 2.4vw, 3rem) clamp(2.4rem, 3.2vw, 4rem)
        clamp(1.6rem, 2.4vw, 3rem);
    --sec03-pad-y: clamp(6rem, 6vw, 12.8rem);
    --sec03-content-mt: clamp(3.2rem, 2vw, 6rem);
  }
  #section03 .ax-list {
    --ax-gap: 2.4rem;
  }
}
@media (max-width: 879px) {
  #section03 .ax-list > li {
    max-width: none !important;
    flex-basis: 100% !important;
  }
  #section03 .ax-item {
    min-height: auto;
  }
}

#section04 {
  --sec04-pad-y: 12.8rem;
  --sec04-content-mt: 10.2rem;
  --sec04-service-title-fz: 3.5rem;
  --sec04-service-desc-fz: 1.7rem;
  position: relative;
  background: #f9fafb;
  padding: var(--sec04-pad-y) 0;
}
#section04 .section-content {
  margin-top: var(--sec04-content-mt);
}
#section04 .service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3.6rem;
}
#section04 .service-item {
  width: calc(33.3333333333% - 2.4rem);
  min-height: 30rem;
}
#section04 .service-item.messenger .service-link {
  background: #152ca3;
}
#section04 .service-item.messenger .service-link:before {
  width: 30.4rem;
  height: 28.9rem;
  background: url(/next_2026_html/img/2026/main/ico_messenger.png) no-repeat center/contain;
}
#section04 .service-item.messenger .service-link .btn-more {
  background: #0e1f7c;
}
#section04 .service-item.dictionary .service-link {
  background: #3362ff;
}
#section04 .service-item.dictionary .service-link:before {
  width: 31.6rem;
  height: 21.8rem;
  background: url(/next_2026_html/img/2026/main/ico_dictionary.png) no-repeat center/contain;
}
#section04 .service-item.dictionary .service-link .btn-more {
  background: #2341e2;
}
#section04 .service-item.nextcrew .service-link {
  background: #e8efff;
}
#section04 .service-item.nextcrew .service-link:before {
  width: 34.5rem;
  height: 27.2rem;
  background: url(/next_2026_html/img/2026/main/ico_nextcrew.png) no-repeat center/contain;
}
#section04 .service-item.nextcrew .service-link .btn-more {
  background: #608ffa;
}
#section04 .service-item.nextcrew .service-title {
  color: #1f2937;
}
#section04 .service-item.nextcrew .service-title-box > p {
  color: #6b7280;
}
#section04 .service-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: 1.6rem;
  height: 100%;
  padding: 6rem 2.8rem;
  border-radius: 1.8rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
#section04 .service-link:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
#section04 .service-link:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 50px 0 rgba(51, 98, 255, 0.2);
}
#section04 .service-link .btn-more {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 3.4rem;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.8rem 1.6rem;
  font-weight: 700;
  border-radius: 2.4rem;
}
#section04 .service-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: var(--sec04-service-title-fz);
  font-weight: 800;
}
#section04 .service-title-box > p {
  position: relative;
  color: #fff;
  font-size: var(--sec04-service-desc-fz);
  font-weight: 400;
}
@media (max-width: 1279px) {
  #section04 {
    --sec04-pad-y: clamp(6rem, 6vw, 12.8rem);
    --sec04-content-mt: clamp(4rem, 3vw, 10.2rem);
    --sec04-service-title-fz: clamp(2.6rem, 1.2vw + 2rem, 3.5rem);
    --sec04-service-desc-fz: clamp(1.6rem, 0.6vw + 1.1rem, 1.7rem);
  }
  #section04 .service-list {
    gap: 2.4rem;
  }
  #section04 .service-item {
    width: calc(33.3333333333% - 1.6rem);
    min-height: auto;
  }
}
@media (max-width: 1023px) {
  #section04 .service-item {
    width: 100%;
  }
  #section04 .service-item.messenger .service-link:before {
    width: 22rem;
    height: 21rem;
  }
  #section04 .service-item.dictionary .service-link:before {
    width: 23rem;
    height: 16rem;
  }
  #section04 .service-item.nextcrew .service-link:before {
    width: 24rem;
    height: 19rem;
  }
  #section04 .service-link {
    padding: 3rem 2.4rem;
    overflow: hidden;
  }
}

#section05,
#section06 {
  --sec56-pad-y: 18rem;
  --sec56-content-mt: 7rem;
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--sec56-pad-y) 0;
  background: #fff;
}
#section05 .section-content,
#section06 .section-content {
  margin-top: var(--sec56-content-mt);
}
#section05 .tips-list li,
#section06 .tips-list li {
  border-radius: 2rem;
}
#section05 .tips-list li > a,
#section06 .tips-list li > a {
  display: flex;
  flex-direction: column;
}
#section05 .tips-list .slick-arrow,
#section06 .tips-list .slick-arrow {
  display: none !important;
}
#section05 .tips-list .slick-list,
#section06 .tips-list .slick-list {
  min-height: 46rem;
  margin: 0 -1.5rem;
  overflow-x: hidden;
  overflow-y: visible;
}
#section05 .tips-list .slick-track,
#section06 .tips-list .slick-track {
  display: flex;
}
#section05 .tips-list .slick-slide,
#section06 .tips-list .slick-slide {
  float: none;
  margin: 0 1.5rem;
}
#section05 .tips-list .slick-slide > a,
#section06 .tips-list .slick-slide > a {
  border-radius: 2rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
#section05 .tips-list .slick-slide > a:hover,
#section06 .tips-list .slick-slide > a:hover {
  background: #fff;
  box-shadow: 0 1.2rem 4rem rgba(17, 24, 39, 0.1);
}
#section05 .tips-image,
#section06 .tips-image {
  overflow: hidden;
  border-radius: 2rem;
}
#section05 .tips-image img,
#section06 .tips-image img {
  width: 100%;
  aspect-ratio: 370/226;
}
#section05 .tips-category,
#section06 .tips-category {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  height: 2.4rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 4px;
}
#section05 .tips-category.type1,
#section06 .tips-category.type1 {
  color: #2952cc;
  background: #ebf4ff;
}
#section05 .tips-category.type2,
#section06 .tips-category.type2 {
  color: #6e62b6;
  background: #e7e4f9;
}
#section05 .tips-category.type3,
#section06 .tips-category.type3 {
  color: #996a13;
  background: #ffefd2;
}
#section05 .tips-category.type4,
#section06 .tips-category.type4 {
  color: #ff7f00;
  background: #fff8e6;
}
#section05 .tips-category.type5,
#section06 .tips-category.type5 {
  color: #4338ca;
  background: #eef2ff;
}
#section05 .tips-date,
#section06 .tips-date {
  font-size: 12px;
  font-weight: 400;
  color: #617798;
  line-height: 1.8rem;
}
#section05 .tips-info,
#section06 .tips-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.4rem 2rem;
}
#section05 .tips-info-top,
#section06 .tips-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#section05 .tips-info-subject,
#section06 .tips-info-subject {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
#section05 .tips-info-subject .p,
#section06 .tips-info-subject .p {
  color: #00234b;
  font-weight: 700;
  line-height: 3rem;
}
#section05 .tips-info-content,
#section06 .tips-info-content {
  margin-top: -0.4rem;
}
#section05 .tips-info-content > p,
#section06 .tips-info-content > p {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  color: #696f8c;
  font-size: 14px;
  line-height: 2.1rem;
}
@media (max-width: 1279px) {
  #section05,
  #section06 {
    min-height: -moz-fit-content;
    min-height: fit-content;
    --sec56-pad-y: clamp(6rem, 7vw, 18rem);
    --sec56-content-mt: clamp(3.6rem, 2.4vw, 7rem);
  }
  #section05 .tips-list .slick-list,
  #section06 .tips-list .slick-list {
    min-height: 55rem;
  }
  #section05 .tips-image img,
  #section06 .tips-image img {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  #section05 .tips-list .slick-list,
  #section06 .tips-list .slick-list {
    min-height: auto;
  }
  #section05 .tips-list .slick-slide > a:hover,
  #section06 .tips-list .slick-slide > a:hover {
    box-shadow: none;
  }
}
#section06 {
  border-top: 1px solid #e6e8f0;
}