/* index.css */
@charset "utf-8";
/* pc : 1560px~ */

/*******************************************************************/
/* header */

header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;

  width: 100%;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;
}

header .header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header .logo-wrapper {}

header .logo-wrapper h1 {
  padding: 10px;
}

header .logo-wrapper h1 a {
  width: 178px;
}

header .logo-wrapper h1 a img {
  width: 100%;
}

header .btn-wrapper {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}

header .btn-wrapper .lang-btn-wrap {
  position: relative;
  /* .lang-list의 기준 */
}

header .btn-wrapper .lang-btn-wrap .lang-btn {
  width: 200px;
  padding: 16px 0;
  color: var(--nexa-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px;
}

header .btn-wrapper .lang-btn-wrap .lang-btn span#current-lang {
  color: var(--nexa-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}


header .btn-wrapper .lang-btn-wrap .lang-list {
  position: absolute;
  left: 0;
  top: calc(100%);
  width: calc(100%);
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;

  display: none;
}

header .btn-wrapper .lang-btn-wrap .lang-list li {
  padding: 16px 20px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

header .btn-wrapper .lang-btn-wrap .lang-list li:hover {
  background-color: var(--nexa-white);
}

header .btn-wrapper .lang-btn-wrap .lang-list li button {
  color: var(--nexa-white);
  font-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header .btn-wrapper .lang-btn-wrap .lang-list li:hover button {
  color: var(--nexa-800);
}

header .btn-wrapper .lang-btn-wrap .lang-list li button.es-btn {}

header .btn-wrapper .lang-btn-wrap .lang-list li button.en-btn {}

header .btn-wrapper .lang-btn-wrap .lang-list li button.ja-btn {}

header .btn-wrapper .lang-btn-wrap .lang-list li button span {
  display: block;
}

header .btn-wrapper .menu-btn-wrap {}

header .btn-wrapper .menu-btn-wrap .menu-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}



/* index.js 1-4. 헤더 배경색 변경 이벤트 처리 */
header.scroll-header {
  background-color: var(--nexa-white);
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

header.scroll-header .btn-wrapper .lang-btn-wrap .lang-btn,
header.scroll-header .btn-wrapper .lang-btn-wrap .lang-btn #current-lang {
  color: var(--nexa-800);
}



/*******************************************************************/
/* main */
main {
  height: 810px;
  text-align: center;

  background: url(../images/NC_header.jpg) no-repeat center center / cover;
}

main article {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding-bottom: 218px;
}

main article .text-wrap {
  color: var(--nexa-white);
  width: 792px;
}

main article .text-wrap .title {
  font-size: 120px;
  font-weight: 600;
  margin-bottom: 56px;
}

main article .text-wrap .des {
  font-size: 24px;
  font-weight: 700;
}

/* section.container */
section.container {
  margin: var(--container-margin);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

section.container article.lang-area {
  width: 100%;
  max-width: 1920px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  row-gap: var(--lang-area-row-gap);
  /* 자식 article 사이 간격 */
}



/* 일본어 h2 세로 나열 문제 해결 */
article.lang-area[data-lang="jp"] h2 {
  -webkit-writing-mode: horizontal-tb !important;
      -ms-writing-mode: lr-tb !important;
          writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  white-space: nowrap !important;
  -webkit-font-feature-settings: "vert" 0 !important;
          font-feature-settings: "vert" 0 !important;
  text-combine-upright: none !important;
}

/* article.vision */
section .lang-area article.vision {}

.vision .title-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 268px;
     -moz-column-gap: 268px;
          column-gap: 268px;
}

.vision .title-box h2 {}



.vision .title-box p {
  font-size: 24px;
}

.vision .content-wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  height: 385px;
}

.vision .content-wrap .img-box {
  background: url(../images/NC_vision.jpg) no-repeat center center / 100% auto;
  background-size: auto 100%;
  padding: 43px 37px;
}

.vision .content-wrap .img-box p {
  font-size: 32px;
  color: var(--nexa-white);
}

.vision .content-wrap .des-box {
  padding: 31px 49px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  background-color: var(--nexa-100);
}

.vision .content-wrap .des-box p {
  font-size: 32px;
}

/* article.about */
section .lang-area article.about {
  width: 100%;
  max-width: 1920px;
}

/* Swiper 전체 컨테이너 */
.about .mySwiper {
  width: 100%;
  position: relative; /* .about .mySwiper .btn-wrapper 의 기준 */
  overflow-x: hidden;
  height: 454px;
  max-height: 454px;
}

/* 슬라이드들이 들어가는 wrapper */
.about .mySwiper .swiper-wrapper {
  width: calc(100% * var(--silde-count));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

/* 개별 슬라이드 */
.about .mySwiper .swiper-slide {
  max-width: 1920px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.about .mySwiper .swiper-slide .wrapper {
  width: 100%;
  height: 100%;
  max-width: var(--con-width-max);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}


/* 현재 활성화된 슬라이드 */
.about .mySwiper .swiper-slide-active {
  /* 활성화된 슬라이드에만 특별한 효과(예: 그림자, 테두리 등)를 줄 수 있습니다. */
}

/* 다음 슬라이드 */
.about .mySwiper .swiper-slide-next {
  /* 다음 슬라이드에 적용할 스타일을 지정합니다. */
}

/* 슬라이드 내부 텍스트 래퍼 */
.about .mySwiper .swiper-slide .txt-wrap {
  max-width: 1130px;
}

.about .mySwiper .swiper-slide .txt-wrap .title-box {}

.about .mySwiper .swiper-slide .txt-wrap .title-box p.sub-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.about .mySwiper .swiper-slide .txt-wrap .title-box h2.title {}

.about .mySwiper .swiper-slide .txt-wrap .des-box {}

.about .mySwiper .swiper-slide .txt-wrap .des-box ul {}

.about .mySwiper .swiper-slide .txt-wrap .des-box ul li {}

.about .mySwiper .swiper-slide .txt-wrap .des-box ul li~li {
  margin-top: 25px;
}

.about .mySwiper .swiper-slide .txt-wrap .des-box ul li h3.title {
  margin-bottom: 0;
  font-size: 24px;
}

.about .mySwiper .swiper-slide .txt-wrap .des-box ul li p.des {
  font-size: 24px;
}

/* 슬라이드 내부 이미지 래퍼 */
.about .mySwiper .swiper-slide .img-wrap {
  /* 이미지 영역의 스타일을 설정합니다. */
  width: 400px;
  height: 100%;
  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;
  overflow: hidden;
}

.about .mySwiper .swiper-slide .img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 다음/이전 버튼 */
.about .mySwiper .btn-wrapper {
  width: var(--con-width-max); 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;

  position: absolute; /* 기준 : .about .mySwiper */
  right: 0;
  bottom: 0;
}

.about .mySwiper .btn-wrapper .btn {
  cursor: pointer;
}

.about .mySwiper .btn-wrapper .btn i {
  width: 48px;
  height: 48px;
}

.about .mySwiper .btn-wrapper .btn i img {
  width: 100%;
}


/* 다음 버튼 (개별 선택) */
.about .mySwiper .btn-wrapper .swiper-button-next {
  /* 다음 버튼에만 적용할 스타일을 지정합니다. */
}

.about .mySwiper .btn-wrapper .swiper-button-next i {}

.about .mySwiper .btn-wrapper .swiper-button-next i img {}

/* 이전 버튼 (개별 선택) */
.about .mySwiper .btn-wrapper .swiper-button-prev {
  /* 이전 버튼에만 적용할 스타일을 지정합니다. */
}

.about .mySwiper .btn-wrapper .swiper-button-prev i {}

.about .mySwiper .btn-wrapper .swiper-button-prev i img {}

/* 비활성화된 버튼 */
.about .mySwiper .btn-wrapper.swiper-button-disabled {
  /* 비활성화 상태의 버튼 스타일(투명도, 커서 등)을 설정합니다. */
}

/* article.legal */
section .lang-area article.legal {}

.legal .title-box {}

.legal .title-box h2 {}

.legal .title-box p {}

.legal .content-wrap {}

.legal .content-wrap ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}

.legal .content-wrap ul .box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 424px;
  padding: 36px 16px;
  border: 1px solid var(--nexa-200);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  -webkit-transition: all 0.5s ease;

  -o-transition: all 0.5s ease;

  transition: all 0.5s ease;
}

.legal .content-wrap ul .box:hover {
  background-color: var(--nexa-100);
}

.legal .content-wrap ul .box:hover .txt h3 {
  color: var(--nexa-blue);
}

.legal .content-wrap ul .box .txt {}

.legal .content-wrap ul .box .txt h3 {
  margin-bottom: 24px;

  -webkit-transition: all 0.5s ease;

  -o-transition: all 0.5s ease;

  transition: all 0.5s ease;
}

.legal .content-wrap ul .box .txt p {}

.legal .content-wrap ul .box i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.legal .content-wrap ul .box i svg {}

.legal .content-wrap ul .box i svg rect {
  stroke: var(--nexa-blue);
}

.legal .content-wrap ul .box i svg g {}

.legal .content-wrap ul .box i svg path {
  stroke: var(--nexa-blue);
}


/* article.structure */
section .lang-area article.structure {
  width: 100%;
  max-width: var(--con-width-max);
  margin-left: auto;
  overflow-x: hidden;
}

.structure .title-box {}

.structure .title-box h2 {}

.structure .content-wrap {
  width: calc(1080px * 4 + var(--col-gap) * 3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: var(--col-gap);
     -moz-column-gap: var(--col-gap);
          column-gap: var(--col-gap);
}

.structure .content-wrap .wrapper {
  max-width: 1080px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: hidden;

  -webkit-transition: all 0.5s ease;

  -o-transition: all 0.5s ease;

  transition: all 0.5s ease;
}

.structure .content-wrap .wrapper .title-box {
  background: no-repeat center 100%;
  padding: 36px 30px;
  width: 380px;
  height: 354px;
  position: relative;
  z-index: 1;
}

/* .wrapper .title-box.box1~4 : 각 박스 별 이미지 설정 */
.structure .content-wrap .wrapper .title-box.box1 {
  background-image: url(../images/structure1.jpg);
}

.structure .content-wrap .wrapper .title-box.box2 {
  background-image: url(../images/structure2.jpg);
}

.structure .content-wrap .wrapper .title-box.box3 {
  background-image: url(../images/structure3.jpg);
}

.structure .content-wrap .wrapper .title-box.box4 {
  background-image: url(../images/structure4.jpg);
}

.structure .content-wrap .wrapper .title-box h3 {
  font-size: 32px;
  color: var(--nexa-white);
}

.structure .content-wrap .wrapper .title-box h3 br {}

.structure .content-wrap .wrapper .des-box {
  width: 700px;
  padding: 36px 32px;
  background-color: var(--nexa-white);
  border: 1px solid var(--nexa-200);
  border-left: none;
  margin-left: -700px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  position: relative;
  z-index: 0;
}

.structure .content-wrap .wrapper .des-box p {
  font-size: 28px;
}

.structure .content-wrap .wrapper .des-box .close-btn {
  width: 48px;
  height: 48px;
  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;
  cursor: pointer;
  font-size: 30px;
}

/* article.token */
section .lang-area article.token {}

.token .title-box {
  text-align: center;
  margin-bottom: 60px;
}

.token .title-box h2 {}

.token .title-box p {}

.token .content-wrap {}

.token .content-wrap ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 18px;
     -moz-column-gap: 18px;
          column-gap: 18px;
}

.token .content-wrap ul .box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 48px 40px;
  text-align: center;
  border: 1px solid var(--nexa-200);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.token .content-wrap ul .box .txt {
  margin-bottom: 40px;
}

.token .content-wrap ul .box .txt h3 {
  margin-bottom: 24px;
}

.token .content-wrap ul .box .txt p {
  font-size: 24px;
}

.token .content-wrap ul .box i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.token .content-wrap ul .box i svg {}

.token .content-wrap ul .box i svg path {
  fill: var(--nexa-blue);
}

/* article.road-map */
section .lang-area article.road-map {}

.road-map .title-box {}

.road-map .title-box h2 {}

.road-map .title-box p {}

.road-map .content-wrap {}

.road-map .content-wrap ul {
  height: 650px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow-y: hidden;

    
}

.road-map .content-wrap ul .box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 28px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  /* index.js의 7. GSAP 초기상태 */
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);

}

/* GSAP 애니메이션 완료 후 최종 상태 고정 */
body.roadmap-animation-complete .road-map .content-wrap ul .box {
  -webkit-transform: translateY(0) !important;
      -ms-transform: translateY(0) !important;
          transform: translateY(0) !important;
}


.road-map .content-wrap ul .box:nth-child(1) {
  background: url(../images/roadmap1.png) no-repeat center center / cover;
  height: calc(100% / 3);
}

.road-map .content-wrap ul .box:nth-child(2) {
  background: url(../images/roadmap2.png) no-repeat center center / cover;
  height: calc((100% / 3) * 2);
}

.road-map .content-wrap ul .box:nth-child(3) {
  background: url(../images/roadmap3.png) no-repeat center center / cover;
  height: 100%;
}

.road-map .content-wrap ul .box h3 {
  color: var(--nexa-white);
  font-size: 32px;
  margin-bottom: 0;
}

.road-map .content-wrap ul .box p {
  color: var(--nexa-white);
  font-size: 18px;
}






/*******************************************************************/
/* footer */
footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--nexa-100);
}

footer .lang-area {
  padding: 150px 0;
}

footer .footer-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

footer .footer-top .info {}

footer .footer-top .info .logo-info {}

footer .footer-top .info .logo-info h1 {
  margin-bottom: 36px;
}

footer .footer-top .info .logo-info h1 a {
  width: 238px;
}

footer .footer-top .info .logo-info h1 a img {
  width: 100%;
}

footer .footer-top .info .profile-info {}

footer .footer-top .info .profile-info ul {}

footer .footer-top .info .profile-info ul .profile-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 35px;
     -moz-column-gap: 35px;
          column-gap: 35px;
  margin-bottom: 17px;
}

footer .footer-top .info .profile-info ul .profile-item i {}

footer .footer-top .info .profile-info ul .profile-item i svg {
  width: 48px;
  height: 48px;
}

footer .footer-top .info .profile-info ul .profile-item i svg rect {
  fill: var(--nexa-600);
}

footer .footer-top .info .profile-info ul .profile-item i svg path {
  fill: var(--nexa-100);
}

footer .footer-top .info .profile-info ul .profile-item p {
  font-size: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 25px;
     -moz-column-gap: 25px;
          column-gap: 25px;
  color: var(--nexa-400);
}

footer .footer-top .info .profile-info ul .profile-item p strong {
  color: var(--nexa-600);
}

footer .footer-top .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 56px;
}

footer .footer-top .menu h2 {
  font-size: 28px;
  line-height: 28px;
  color: var(--nexa-600);
}

footer .footer-top .menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 24px;
}

footer .footer-top .menu ul li {
  font-size: 24px;
  line-height: 25.2px;
  color: var(--nexa-400);
}

footer .footer-bottom {
  margin-top: 172px;
}

footer .footer-bottom p {
  padding-top: 30px;
  border-top: 1px solid var(--nexa-200);
  text-align: center;
  color: var(--nexa-600);
}