/* responsive.css */
@charset "utf-8";
/***********************************************************/
@media all and (max-width: 1919px) {

    /* style.css */
    :root {
        /* 1-6. 반응형마다 px 다르게 설정할 값들 */
        /* 컨텐츠 너비 설정 */
        --con-width: 1200px;
        --con-width-max: 1200px;

        /* section.container margin 값 */
        --container-margin: 100px 0;

        /* section.container article.lang-area 자식 article 사이 간격 */
        --lang-area-row-gap: 250px;

        /* .title-box margin-bottom 값 */
        --title-box-mb-base: 64px;
        --title-box-mb-lg: 64px;
        --title-box-mb-xl: 80px;
        --title-box-mb-about: 19px;

        /* .title-box h2 margin-bottom 값 */
        --title-h-mb-sm: 24px;
        --title-h-mb-base: 28px;

        /* .structure .content-wrap의 col-gap 값 담을 변수 */
        --col-gap: 13.33px;

    }

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

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

    .about .mySwiper {
        height: 450px;
        max-height: 450px;
    }

    .about .mySwiper .swiper-wrapper {
        height: 100%;
    }



    .about .mySwiper .swiper-slide .txt-wrap {
        width: 816px;
        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;
        padding-bottom: calc(48px + 24px);
        /* 이전,다음버튼 높이 + gap */
    }

    .about .mySwiper .swiper-slide .txt-wrap .title-box {
        margin-bottom: 0;
    }

    .about .mySwiper .swiper-slide .txt-wrap .title-box h2 {
        margin-bottom: 0;
    }

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

    .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~li {
        margin-top: 16px;
    }

    .about .mySwiper .swiper-slide .img-wrap {
        /* 이미지 영역의 스타일을 설정합니다. */
        width: 340px;
        height: 450px;
    }


    /*******************************************************************/
    /* article.structure */
    section .lang-area article.structure {
        margin-left: 0;
    }

    .structure .content-wrap {
        width: 100%;
        display: -ms-grid;
        display: grid;

        gap: 24px;
    }

    .structure .content-wrap .wrapper {
        max-width: 1200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;


        -webkit-transition: none;


        -o-transition: none;


        transition: none;
    }

    .structure .content-wrap .wrapper .title-box {
        width: 323px;
        height: 300px;
        padding: 30px 24px;
    }

    .structure .content-wrap .wrapper .des-box {
        width: calc(100% - 323px);
        margin-left: 0;
        border: 0.85px solid var(--nexa-200);
        padding: 30px 28px;
    }



}

/***********************************************************/
/* 태블릿 pc */
@media all and (max-width: 1559px) {

    /* style.css */
    :root {
        /* 1-6. 반응형마다 px 다르게 설정할 값들 */
        /* 컨텐츠 너비 설정 */
        --con-width: 1200px;
        --con-width-max: 1200px;

        /* section.container margin 값 */
        --container-margin: 100px 0;

        /* section.container article.lang-area 자식 article 사이 간격 */
        --lang-area-row-gap: 250px;

        /* .title-box margin-bottom 값 */
        --title-box-mb-base: 64px;
        --title-box-mb-lg: 64px;
        --title-box-mb-xl: 80px;
        --title-box-mb-about: 19px;

        /* .title-box h2 margin-bottom 값 */
        --title-h-mb-sm: 24px;
        --title-h-mb-base: 28px;

        /* .structure .content-wrap의 col-gap 값 담을 변수 */
        --col-gap: 13.33px;

    }

    /* 2-2. 제목 폰트 설정 및 margin-bottom */
    html,
    body {
        /* 기본 폰트 사이즈 및 색상 설정 */
        font-size: var(--font-size-2xl);
        color: var(--nexa-800);
    }

    h2 {
        font-size: var(--font-size-5xl);
        margin-bottom: var(--title-h-mb-base);
    }

    h3 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--title-h-mb-sm);
    }

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



    /*******************************************************************/
    /* main */


    /*******************************************************************/
    /* 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;
    }


    /*******************************************************************/
    /* article.vision */


    /*******************************************************************/
    /* article.about */



    /*******************************************************************/
    /* article.legal */
    .legal .title-box {
        text-align: center;
    }

    .legal .content-wrap ul .box {
        height: 532px;
        padding: 36px 10px;
    }

    .legal .content-wrap ul .box .txt h3 {
        height: 84px;
    }


    /*******************************************************************/
    /* article.structure */
    .structure .content-wrap .wrapper .des-box p {
        font-size: 24px;
    }


    /*******************************************************************/
    /* article.token */

    .token .content-wrap ul {
        height: 486px;
    }

    .token .content-wrap ul .box {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

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

    .token .content-wrap ul .box .txt h3 {
        height: 84px;
    }


    /*******************************************************************/
    /* article.road-map */
    .road-map .content-wrap ul .box h3 {
        font-size: 32px;
    }

    /*******************************************************************/
    /* footer */
    footer {}

    footer .lang-area {}

    footer .footer-top {}

    footer .footer-top .info {}

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

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

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

    footer .footer-top .info .logo-info h1 a img {}

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

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

    footer .footer-top .info .profile-info ul .profile-item {
        -webkit-column-gap: 20px;
           -moz-column-gap: 20px;
                column-gap: 20px;
        margin-bottom: 13px;
    }


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

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

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

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

    footer .footer-top .info .profile-info ul .profile-item p {
        font-size: 20px;
        -webkit-column-gap: 26px;
           -moz-column-gap: 26px;
                column-gap: 26px;
    }

    footer .footer-top .info .profile-info ul .profile-item p strong {}

    footer .footer-top .menu {
        row-gap: 45px;
    }

    footer .footer-top .menu h2 {
        font-size: 20px;
    }

    footer .footer-top .menu ul {
        row-gap: 8px;
    }

    footer .footer-top .menu ul li {
        font-size: 20px;
    }

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

    footer .footer-bottom p {
        font-size: 20px;
        line-height: 18px;
    }

}


/***********************************************************/
/* 탭 */
@media all and (max-width: 1439px) {

    /* aosRoadmap 애니메이션 완료 후 최종 상태 고정 */
    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete h3 {
        left: 0 !important;
        -webkit-transform: translateX(0) !important;
            -ms-transform: translateX(0) !important;
                transform: translateX(0) !important;
        text-align: start !important;
        opacity: 1 !important;
    }

    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete p {
        opacity: 1 !important;
    }

    /* aosRoadmapMobile 클래스는 JavaScript에서 제거하므로 CSS 무력화 불필요 */

    /* style.css */
    :root {
        /* 컨텐츠 너비 설정 */
        --con-width: 760px;
        --con-width-max: 760px;

        /* section.container margin 값 */
        --container-margin: 80px 0;

        /* section.container article.lang-area 자식 article 사이 간격 */
        --lang-area-row-gap: 180px;

        /* .title-box margin-bottom 값 */
        --title-box-mb-base: 60px;
        --title-box-mb-lg: 60px;
        --title-box-mb-xl: 60px;
        --title-box-mb-about: 20px;

        /* .title-box h2~h4 margin-bottom 값 */
        --title-h-mb-sm: 12px;
        --title-h-mb-base: 8px;

        /* .structure .content-wrap의 col-gap 값 담을 변수 */
        --col-gap: 13.33px;


    }

    /* 2-2. 폰트 설정 및 margin-bottom */
    html,
    body {
        /* 기본 폰트 사이즈 및 색상 설정 */
        font-size: var(--font-size-base);
        color: var(--nexa-800);
    }

    h2 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--title-h-mb-base);
    }

    h3 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--title-h-mb-sm);
    }

    /* header */
    header {
        height: 80px;
    }

    header .header-wrapper {}

    header .logo-wrapper {}

    header .logo-wrapper h1 {}

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

    header .logo-wrapper h1 a img {}

    header .btn-wrapper {}

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

    header .btn-wrapper .lang-btn-wrap .lang-btn {
        font-size: 16px;
        width: 125px;
        padding: 12px 0;
    }

    header .btn-wrapper .lang-btn-wrap .lang-btn span {}

    header .btn-wrapper .lang-btn-wrap .lang-list {}

    header .btn-wrapper .lang-btn-wrap .lang-list li {
        padding: 12px 16px;
    }

    header .btn-wrapper .lang-btn-wrap .lang-list li button {
        font-size: 14px;
    }

    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 .menu-btn-wrap {}

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

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

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

    header.scroll-header {}

    header.scroll-header .btn-wrapper .lang-btn-wrap .lang-btn,
    header.scroll-header .btn-wrapper .lang-btn-wrap .lang-btn #current-lang {}

    /* main */
    main {}

    main article {
        padding-bottom: 0px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    main article .text-wrap {
        width: 500px;
    }

    main article .text-wrap .title {
        font-size: 96px;
        margin-bottom: 48px;
    }


    main article .text-wrap .des {
        font-size: 20px;
    }

    /* section.container */
    section.container {}

    section.container article.lang-area {}

    section.container>article.lang-area>article {}

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

    .vision .title-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        -webkit-column-gap: 268px;
           -moz-column-gap: 268px;
                column-gap: 268px;
    }

    .vision .title-box h2 {}

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

    .vision .content-wrap {
        height: 270px;
    }

    .vision .content-wrap .img-box {
        padding: 32px;
    }

    .vision .content-wrap .img-box p {
        font-size: 24px;
    }

    .vision .content-wrap .des-box {
        height: 100%;
        padding: 32px;
    }

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

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

    .about .mySwiper {
        margin: 0 auto;
        width: var(--con-width);
        height: auto;
        max-height: none;
        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: center;
            -ms-flex-pack: center;
                justify-content: center;

    }

    .about .mySwiper .swiper-wrapper {}

    .about .mySwiper .swiper-slide {
        display: block;
    }

    .about .mySwiper .swiper-slide .wrapper {
        height: auto;
    }

    .about .mySwiper .swiper-slide-active {}

    .about .mySwiper .swiper-slide-next {}

    .about .mySwiper .swiper-slide .txt-wrap {
        padding-bottom: 0;
        row-gap: 24px;
    }

    .about .mySwiper .swiper-slide .txt-wrap .title-box {
        max-width: 600px;
    }

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

    .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 h3.title {
        font-size: 20px;
    }

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

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

    .about .mySwiper .swiper-slide .txt-wrap .des-box ul li .modal-wrapper .more-btn {}

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

    .about .mySwiper .swiper-slide .img-wrap {
        display: none;
    }

    .about .mySwiper .swiper-slide .img-wrap img {}

    .about .mySwiper .btn-wrapper {
        top: 0;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: end;
        height: 40px;
    }

    .about .mySwiper .btn-wrapper .btn {}


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

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

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

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

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

    .legal .title-box {
        text-align: start;
    }

    .legal .title-box h2 {}

    .legal .title-box p {}

    .legal .content-wrap {}

    .legal .content-wrap ul {
        -webkit-column-gap: 20px;
           -moz-column-gap: 20px;
                column-gap: 20px;
    }

    .legal .content-wrap ul .box {
        height: 380px;
        padding: 28px 16px;
    }

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

    .legal .content-wrap ul .box .txt h3 {
        height: 52px;
        margin-bottom: 12px;
    }

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

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

    .legal .content-wrap ul .box i svg {
        width: 48px;
        height: 48px;
    }

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

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

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

    .structure .title-box {}

    .structure .title-box h2 {}

    .structure .content-wrap {}

    .structure .content-wrap .wrapper {}

    .structure .content-wrap .wrapper .title-box {
        width: 200px;
        height: 186px;
        padding: 18px 16px;
        background-size: cover;
    }

    .structure .content-wrap .wrapper .title-box.box1 {}

    .structure .content-wrap .wrapper .title-box.box2 {}

    .structure .content-wrap .wrapper .title-box.box3 {}

    .structure .content-wrap .wrapper .title-box.box4 {}

    .structure .content-wrap .wrapper .title-box h3 {
        font-size: 20px;
    }

    .structure .content-wrap .wrapper .des-box {
        width: 560px;
        padding: 20px 18px;
    }

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

    .structure .content-wrap .wrapper .des-box .close-btn {}

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

    .token .title-box {}

    .token .title-box h2 {}

    .token .title-box p {}

    .token .content-wrap {}

    .token .content-wrap ul {
        height: 386px;
        -webkit-column-gap: 12px;
           -moz-column-gap: 12px;
                column-gap: 12px;
    }

    .token .content-wrap ul .box {
        padding: 50px 30px;
    }

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

    .token .content-wrap ul .box .txt h3 {
        height: auto;
    }

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

    .token .content-wrap ul .box i {
        width: 48px;
        height: 48px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: 0 auto;
    }

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

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

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

    .road-map .title-box {
        text-align: center;
    }

    .road-map .title-box h2 {}

    .road-map .title-box p {}

    .road-map .content-wrap {}

    .road-map .content-wrap ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        height: auto;
        row-gap: 8px;
    }

    .road-map .content-wrap ul .box {
        padding: 20px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        height: 100px;

        /* 태블릿 크기부터 7. GSAP 초기상태 사용 안함 - 기본값 복원 */
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;

    }

    .road-map .content-wrap ul .box:nth-child(1) {}

    .road-map .content-wrap ul .box:nth-child(2) {}

    .road-map .content-wrap ul .box:nth-child(3) {}

    .road-map .content-wrap ul .box h3 {
        font-size: 20px;
        margin-bottom: 0;
        text-align: center;

        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }

    .road-map .content-wrap ul .box p {
        font-size: 16px;
        opacity: 0;
        width: 330px;
    }

    /*******************************************************************/
    /* footer */
    footer {}

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

    footer .footer-top {}

    footer .footer-top .info {}

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

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

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

    footer .footer-top .info .logo-info h1 a img {}

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

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

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

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

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

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

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

    footer .footer-top .info .profile-info ul .profile-item p {
        font-size: 12px;
    }

    footer .footer-top .info .profile-info ul .profile-item p strong {}

    footer .footer-top .menu {
        row-gap: 24px;
    }

    footer .footer-top .menu h2 {
        font-size: 16px;
        line-height: normal;
    }

    footer .footer-top .menu ul {}

    footer .footer-top .menu ul li {
        font-size: 12px;
        line-height: normal;
    }

    footer .footer-bottom {
        margin-top: 50px;

    }

    footer .footer-bottom p {
        font-size: 12px;
    }

}


/***********************************************************/
/* 모바일 */
@media all and (max-width: 839px) {

    /* 모바일에서 Swiper fade 효과 전용 CSS */
    .swiper[data-swiper-effect="fade"] .swiper-slide {
        opacity: 0 !important;
        -webkit-transition: opacity 500ms ease-in-out !important;
        -o-transition: opacity 500ms ease-in-out !important;
        transition: opacity 500ms ease-in-out !important;
        -webkit-transform: none !important;
            -ms-transform: none !important;
                transform: none !important;
        position: relative !important;
    }
    
    .swiper[data-swiper-effect="fade"] .swiper-slide-active {
        opacity: 1 !important;
    }
    
    .swiper[data-swiper-effect="fade"] .swiper-slide:not(.swiper-slide-active) {
        display: none !important;
    }
    
    /* 모바일에서 slide 애니메이션 완전 차단 */
    .swiper[data-swiper-effect="fade"] .swiper-wrapper {
        -webkit-transform: none !important;
            -ms-transform: none !important;
                transform: none !important;
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
    
    /* 모바일 Swiper 높이 보장 */
    .swiper[data-swiper-effect="fade"] {
        min-height: 400px !important;
        height: auto !important;
    }
    
    /* 모바일에서 Swiper 버튼 강제 활성화 */
    article.about .btn-wrapper .swiper-button-prev,
    article.about .btn-wrapper .swiper-button-next {
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }
    
    /* disabled 상태여도 버튼 작동하도록 강제 설정 */
    article.about .btn-wrapper .swiper-button-prev.swiper-button-disabled,
    article.about .btn-wrapper .swiper-button-next.swiper-button-disabled {
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }
    
    /* lock 상태여도 버튼 작동하도록 강제 설정 */
    article.about .btn-wrapper .swiper-button-prev.swiper-button-lock,
    article.about .btn-wrapper .swiper-button-next.swiper-button-lock {
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }

    /* style.css */
    /* 2-1. :root */
    :root {
        /* 컨텐츠 너비 설정 */
        --con-width: 100%;
        --con-width-max: 100%;

        /* section.container margin 값 */
        --container-margin: 80px 0;

        /* section.container article.lang-area 자식 article 사이 간격 */
        --lang-area-row-gap: 160px;

        /* .title-box margin-bottom 값 */
        --title-box-mb-base: 28px;
        --title-box-mb-lg: 28px;
        /* article.road-map .title-box */
        --title-box-mb-xl: 28px;
        /* article.vision .title-box */
        --title-box-mb-about: 20px;
        /* article.about .title-box */

        /* .title-box h2~h4 margin-bottom 값 */
        --title-h-mb-sm: 8px;
        --title-h-mb-base: 8px;

        /* .structure .content-wrap의 col-gap 값 담을 변수 */
        --col-gap: 13.33px;


    }

    /* 2-2. 폰트 설정 및 margin-bottom */
    html,
    body {
        /* 기본 폰트 사이즈 및 색상 설정 */
        font-size: var(--font-size-xs);
        color: var(--nexa-800);
    }

    h2 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--title-h-mb-base);
    }

    h3 {
        font-size: var(--font-size-xs);
        margin-bottom: var(--title-h-mb-sm);
    }

    /* 3. 기본 스타일 */
    /******************************************
    3-1.유틸리티 클래스 적용
    - inner
    ******************************************/
    .inner {
        /* 컨텐츠 너비 */
        width: 100%;
        max-width: var(--con-width);
        padding: 0 20px;
    }

    /* aosRoadmap() 관련 코드 시작 ***********************************************/
    /* aosRoadmap 애니메이션 완료 클래스 무력화 (모바일에서는 aosRoadmap 사용 안함) */
    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete h3,
    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete p,
    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete {
        all: revert !important;
        /* 모든 aosRoadmap 스타일 무력화 */
    }

    /* aosRoadmapMobile 애니메이션 완료 후 최종 상태 고정 */
    body.aosRoadmapMobile-animation-complete .road-map .content-wrap ul {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        /* 세로 배치로 복원 */
        row-gap: 8px !important;
    }

    body.aosRoadmapMobile-animation-complete .road-map .content-wrap ul .box.mobile-animation-complete h3 {
        left: 12px !important;
        top: 8px !important;
        opacity: 1 !important;
        -webkit-transform: translate(0) !important;
            -ms-transform: translate(0) !important;
                transform: translate(0) !important;
        text-align: left !important;
        /* 왼쪽 정렬 */
    }

    body.aosRoadmapMobile-animation-complete .road-map .content-wrap ul .box.mobile-animation-complete p {
        opacity: 1 !important;
    }

    /* aosRoadmap() 관련 코드 끝 ***********************************************/





    /* header */
    header {
        height: 40px;
    }

    header .header-wrapper {}

    header .logo-wrapper {}

    header .logo-wrapper h1 {}

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

    header .logo-wrapper h1 a img {}

    header .btn-wrapper {}

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

    header .btn-wrapper .lang-btn-wrap .lang-btn {
        font-size: 10px;
        padding: 8px 0;
        width: auto;
    }

    header .btn-wrapper .lang-btn-wrap .lang-btn span {
        margin-left: 8px;
    }

    header .btn-wrapper .lang-btn-wrap .lang-list {}

    header .btn-wrapper .lang-btn-wrap .lang-list li {
        padding: 8px 6px;
    }

    header .btn-wrapper .lang-btn-wrap .lang-list li button {
        font-size: 8px;
    }

    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 .menu-btn-wrap {}

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

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

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

    header.scroll-header {}

    header.scroll-header .btn-wrapper .lang-btn-wrap .lang-btn,
    header.scroll-header .btn-wrapper .lang-btn-wrap .lang-btn #current-lang,
    header.scroll-header .btn-wrapper .menu-btn-wrap .menu-btn svg path {}

    /* main */
    main {
        height: 360px;
    }

    main article {}

    main article .text-wrap {
        width: 260px;
    }

    main article .text-wrap .title {
        font-size: 48px;
        margin-bottom: 20px;
    }

    main article .text-wrap .des {
        font-size: 10px;
    }

    /* section.container */
    section.container {}

    section.container article.lang-area {}

    section.container>article.lang-area>article {}

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

    .vision .title-box {}

    .vision .title-box h2 {}

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

    .vision .content-wrap {
        height: 160px;
    }

    .vision .content-wrap .img-box {
        padding: 18px 16px;
        background-size: cover;
    }

    .vision .content-wrap .img-box p {
        font-size: 12px;
    }

    .vision .content-wrap .des-box {
        padding: 18px 14px;
    }

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

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

    .about .mySwiper {}

    .about .mySwiper .swiper-wrapper {}

    .about .mySwiper .swiper-slide {}

    .about .mySwiper .swiper-slide .wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        row-gap: 63px;
    }

    .about .mySwiper .swiper-slide-active {}

    .about .mySwiper .swiper-slide-next {}

    .about .mySwiper .swiper-slide .txt-wrap {
        width: 100%;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }

    .about .mySwiper .swiper-slide .txt-wrap .title-box {
        max-width: 100%;
    }

    .about .mySwiper .swiper-slide .txt-wrap .title-box p.sub-title {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .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 h3.title {
        font-size: 12px;
    }

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

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

    .about .mySwiper .swiper-slide .txt-wrap .des-box ul li .modal-wrapper .more-btn {}

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

    .about .mySwiper .swiper-slide .img-wrap {
        display: block;
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
                order: 0;
        width: 100%;
        height: 265px;
    }

    .about .mySwiper .swiper-slide .img-wrap img {}

    .about .mySwiper .btn-wrapper {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        top: calc(265px + 16px);
        height: 18px;
    }

    .about .mySwiper .btn-wrapper .btn {}

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

    .about .mySwiper .btn-wrapper .btn i img {}

    .about .mySwiper .btn-wrapper .swiper-button-next {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
    }

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

    .about .mySwiper .btn-wrapper .swiper-pagination-fraction {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: var(--nexa-600);
    }

    .about .mySwiper .btn-wrapper .swiper-pagination-fraction .swiper-pagination-current {}

    .about .mySwiper .btn-wrapper .swiper-pagination-fraction .swiper-pagination-total {}

    /* 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 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        row-gap: 8px;
    }

    .legal .content-wrap ul .box {
        padding: 16px 12px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-column-gap: 20px;
           -moz-column-gap: 20px;
                column-gap: 20px;
    }

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

    .legal .content-wrap ul .box .txt h3 {
        height: auto;
        margin-bottom: 20px;
        font-size: 16px;
    }

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

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

    .legal .content-wrap ul .box i svg {
        width: 32px;
        height: 32px;
    }

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

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

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

    .structure .title-box {}

    .structure .title-box h2 {}

    .structure .content-wrap {}

    .structure .content-wrap .wrapper {}

    .structure .content-wrap .wrapper .title-box {
        width: 120px;
        height: 110px;
        padding: 10px 8px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    .structure .content-wrap .wrapper .title-box.box1 {}

    .structure .content-wrap .wrapper .title-box.box2 {}

    .structure .content-wrap .wrapper .title-box.box3 {}

    .structure .content-wrap .wrapper .title-box.box4 {}

    .structure .content-wrap .wrapper .title-box h3 {
        font-size: 12px;
    }

    .structure .content-wrap .wrapper .des-box {
        width: auto;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        padding: 10px 8px;
    }

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

    .structure .content-wrap .wrapper .title-box.box4 .dex-box p {}


    .structure .content-wrap .wrapper .des-box .close-btn {}

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

    .token .title-box {}

    .token .title-box h2 {}

    .token .title-box p {}

    .token .content-wrap {}

    .token .content-wrap ul {
        height: auto;
    }

    .token .content-wrap ul .box {
        padding: 14px 8px;
        row-gap: 14px;
    }

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

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

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

    .token .content-wrap ul .box i {
        width: 24px;
        height: 24px;
    }

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

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

    /* 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: calc(100px * 3 + 8px * 2);
    }

    .road-map .content-wrap ul .box {
        padding: 8px 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-align: start;
            -ms-flex-align: start;
                align-items: start;

        position: relative;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: end;
    }

    .road-map .content-wrap ul .box:nth-child(1) {}

    .road-map .content-wrap ul .box:nth-child(2) {}

    .road-map .content-wrap ul .box:nth-child(3) {}

    .road-map .content-wrap ul .box h3 {
        font-size: 12px;
        position: absolute;

        left: 12px;
        top: 8px;
        -webkit-transform: translate(0);
            -ms-transform: translate(0);
                transform: translate(0);
        opacity: 0;

    }

    .road-map .content-wrap ul .box p {
        font-size: 12px;
        opacity: 0;
    }

    /*******************************************************************/
    /* footer */
    footer {}

    footer .lang-area {
        padding: 50px 20px;
    }

    footer .footer-top {}

    footer .footer-top .info {}

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

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

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

    footer .footer-top .info .logo-info h1 a img {}

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

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

    footer .footer-top .info .profile-info ul .profile-item {
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px;
        margin-bottom: 4px;
    }

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

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

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

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

    footer .footer-top .info .profile-info ul .profile-item p {
        font-size: 8px;
        -webkit-column-gap: 12px;
           -moz-column-gap: 12px;
                column-gap: 12px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    footer .footer-top .info .profile-info ul .profile-item p strong {
        font-size: 10px;
    }

    footer .footer-top .info .profile-info ul .profile-item p span {
        width: 100%;
        text-align: right;
    }


    footer .footer-top .menu {
        row-gap: 16px;
    }

    footer .footer-top .menu h2 {
        font-size: 10px;
        margin-bottom: 0;
    }

    footer .footer-top .menu ul {
        row-gap: 4px;
    }

    footer .footer-top .menu ul li {
        font-size: 8px;
    }

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

    footer .footer-bottom p {
        font-size: 8px;
    }
}

/* 데스크톱/PC 환경에서 aosRoadmap, aosRoadmapMobile 클래스 무력화 (1440px 이상에서는 GSAP 사용) */
@media (min-width: 1440px) {

    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete h3,
    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete p,
    body.aosRoadmap-animation-complete .road-map .content-wrap ul .box.animation-complete {
        all: revert !important;
        /* aosRoadmap 스타일 무력화 (aosRoadmapMobile은 JS에서 클래스 제거) */
    }
}