/* fontstyle */
    .font_64 { font-size: 6.4rem; }
    .font_40 { font-size: 4rem; }
    .font_38 { font-size: 3.8rem; }
    .font_36 { font-size: 3.6rem; }
    .font_34 { font-size: 3.4rem; }
    .font_32 { font-size: 3.2rem; }
    .font_30 { font-size: 3rem; }
    .font_28 { font-size: 2.8rem; }
    .font_26 { font-size: 2.6rem; }
    .font_24 { font-size: 2.4rem; }
    .font_22 { font-size: 2.2rem; }
    .font_20 { font-size: 2rem; }
    .font_18 { font-size: 1.8rem; }
    .font_16 { font-size: 1.6rem; }
    .font_14 { font-size: 1.4rem; }
    .font_12 { font-size: 1.2rem; }

    .light { font-weight: 100; }
    .regular { font-weight: 400; }
    .medium { font-weight: 500; }
    .semibold { font-weight: 600; }
    .bold { font-weight: 700; }
    .extrabold { font-weight: 800; }
    .black { font-weight: 900; }
    /* fontstyle */

    /* 기본 Flexbox 설정 */
    .flex { display: flex; }
    .inline_flex { display: inline-flex; }

    /* Align-items */
    .al_ce { align-items: center; }
    .al_fs { align-items: flex-start; }
    .al_fe { align-items: flex-end; }
    .al_st { align-items: stretch; }
    .al_bl { align-items: baseline; }

    /* Justify-content */
    .ju_fe { justify-content: flex-end; }
    .ju_fs { justify-content: flex-start; }
    .ju_ce { justify-content: center; }
    .ju_sb { justify-content: space-between; }
    .ju_sa { justify-content: space-around; }
    .ju_se { justify-content: space-evenly; }

    /* Flex-direction */
    .fd_ro { flex-direction: row; }
    .fd_co { flex-direction: column; }
    .fd_ro_r { flex-direction: row-reverse; }
    .fd_co_r { flex-direction: column-reverse; }

    /* Flex-wrap */
    .fw_no { flex-wrap: nowrap; }
    .fw_wr { flex-wrap: wrap; }
    .fw_wr_r { flex-wrap: wrap-reverse; }

    /* Align-content */
    .ac_ce { align-content: center; }
    .ac_fs { align-content: flex-start; }
    .ac_fe { align-content: flex-end; }
    .ac_sb { align-content: space-between; }
    .ac_sa { align-content: space-around; }
    .ac_st { align-content: stretch; }

    /* Gap */
    .gap_04 { gap: 0.4rem; } /* 4px */
    .gap_08 { gap: 0.8rem; } /* 8px */
    .gap_16 { gap: 1.6rem; } /* 16px */
    .gap_20 { gap: 2rem; } /* 16px */
    .gap_30 { gap: 3rem; } /* 32px */
    .gap_32 { gap: 3.2rem; } /* 32px */
    .gap_50 { gap: 5rem; } /* 50px */
    .gap_100 { gap: 10rem; } /* 50px */

    /* Order */
    .order_1 { order: 1; }
    .order_2 { order: 2; }
    .order_3 { order: 3; }
    .order_-1 { order: -1; }

    /* Flex-grow, shrink, basis */
    .fg_1 { flex-grow: 1; }
    .fg_0 { flex-grow: 0; }
    .fs_1 { flex-shrink: 1; }
    .fs_0 { flex-shrink: 0; }
    .fb_auto { flex-basis: auto; }
    .fb_5 { flex-basis: 5rem; } /* 50px */
    .fb_10 { flex-basis: 10rem; } /* 100px */

    /* etc */
    body{
        max-width: 1920px;
        margin: 0 auto; 
    }
    .section_wrap{
        margin-bottom: 15rem;
    }
    :root {
        font-family: 'Pretendard Variable';
        font-size: 62.5%;
    
        --grayscale-900: #212121;
        --grayscale-700: #343434;
        --grayscale-600: #666666;
        --grayscale-500: #A5A5A5;
        --grayscale-400: #C4C4C4;
        --grayscale-300: #EEEEEE;
        --grayscale-200: #F1F1F1;
        --grayscale-100: #F7F7F7;
    
        --primary-700: #6B5FFF;
        --primary-200: #EAE9FF;
        --primary-100: #F8F7FF;
    
        --gradient_01: linear-gradient(92.11deg, #C950FF -2.46%, #3F66FF 103.07%);
        --gradient_02: linear-gradient(224.86deg, rgba(255, 133, 192, 0.6) 15.06%, rgba(212, 136, 247, 0.6) 41.07%, rgba(118, 247, 255, 0.6) 88.33%);
    }
    .color_p700{
        color: var(--primary-700);
    }
    .color_g600{
        color: var(--grayscale-600);
    }
    .con{
        max-width: 1440px;
        min-width: 360px;
        margin: 0 auto;
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .img-box > img{
        width: 100%;
        display: block;
    }
    .underline_white{
        position: relative;
        display: inline-block;
        padding-bottom: 2rem;
    }
    .underline_white::after{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: white;
        bottom: 0;
        left: 0;
    }
    .underline_black{
        position: relative;
        display: inline-block;
        padding-bottom: 2rem;
    }
    .underline_black::after{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: black;
        bottom: 0;
        left: 0;
    }
    .section_num{
        color: #767171;
        margin-bottom: 2rem;
    }
    /* etc */
    /* top_nav_wrap */
    .top_nav_wrap{
        position: fixed;
        background: white;
        width: 100%;
        top: 0;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        z-index: 999;
    }
    .logo > .img-box{
        width: 20rem;
    }
    .top_nav_wrap .nav a{
        position: relative;
    }
    .top_nav_wrap .nav a + a::after{
        display: block;
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: #003D7E;
        top: 0;
        left: -1.5rem;
        user-select: none;
    }
    /* top_nav_wrap */
    .main_visual_wrap{
        width: 100%;
        aspect-ratio: 1920 / 815 ;
        background-image: url(../img/main_visual.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        min-height: 500;
        color: white;
        padding-bottom: 5rem;
        margin-bottom: 5rem;
    }
    .main_visual_wrap .con{
        position: relative;
        height: 100%;
    }
    .main_visual_wrap .mid_text {
        margin-top: 1.5rem;
        margin-bottom: 5rem ;
    }
    .main_visual_wrap .btm_text{
        line-height: 160%;
    }
    .sub_title{
        margin-top: 10rem;
        margin-bottom: 10rem;
    }
    .sub_title > span{
        background-color: #003D7E ;
        color: white;
        padding-right: 1rem;
        padding-left: 1rem;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
    .graph_wrap {
        text-align: center;
    }
    .graph_title{
        margin-bottom: 5rem;
    }
    .graph_box{
        margin-bottom: 5rem;
    }
    .graph_source{
        color :#9C9C9C;
    }
    .purpose{
        text-align: center;
        margin-top: 10rem;
    }
    .purpose .section_title{
        line-height: 160%;
        text-align: center;
    }
    .purpose .section_title b{
        font-weight: 900;
    }
    .type_box{
        margin-top: 4rem;
    }
    .type_box .img-box{
        width: 12.8rem;
    }
    .type_box > .type{
        border: 1px solid black;
        padding: 2rem;
        border-radius: 2rem;
    }
    .type_box > .type .txt-box{
        text-align: left;
    }
    .btm_txt p{
        line-height: 160%;
        padding-left: 2rem;
        position: relative;
    }
    .btm_txt p::after{
        content: "";
        position: absolute;
        width: 0.5rem;
        height: 0.5rem;
        background-color: black;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
    }
    .need{
        line-height: 160%;
    }
    .need > .img-box{
        width: 12.8rem;
        margin: 0 auto; 
        margin-bottom: 2rem;
    }
    .homepage_sample{
        text-align: center;
        margin-top: 15rem;
    }
    .homepage_sample > .img-box{
        max-width: 128rem;
        margin: 0 auto;
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .section-02{
        line-height: 160%;
    }

    .section-02 .title_box{
        margin-bottom: 5rem;
    }
    .section-02 .content_box .left{
        position: relative;
    }
    .section-02 .content_box .left::after{
        position: absolute;
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        background-color: #D9D9D9 ;
        right: -5rem;
    }
    .section-02 .content_box .left .regular {
        white-space: nowrap;
    }
    .section-02 .content_box .left .regular span{
        background-color: #003D7E ;
        color: white;
        padding-right: 1rem;
        padding-left: 1rem;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
    .section-02 .left > .img-box{
        width: 19rem;
    }
    .section-02 .right{
        width: 100%;
    }
    .section-02 .top_txt{
        margin-bottom: 6rem;
    }
    .section-02 .icon_wrap .icon_box {
        width: 100%;
        text-align: center;
    }
    .section-02 .icon_wrap .icon_box .img-box{
        width: 12.8rem;
        margin: 0 auto;
        margin-bottom: 4rem;
    }
    .section-03 .content_box{
        margin-top: 5rem;
        height: 45rem;
    }
    .section-03 .content{
        border: 1px solid black;
        width: 100%;
    }
    .section-03 .content .content_title{
        text-align: center;
        border-bottom: 1px solid black;
        padding-top: 2rem;
        padding-bottom: 2rem;
        line-height: 160%;
    }
    .section-03 .content .content_txt{
        text-align: center;
        padding-right: 1.75rem;
        padding-left: 1.75rem;
    }
    .section-03 .content .img-box > img{
        height: 21rem;
        object-fit: cover;
    }

    .section-04{
        margin-top: 15rem;
        text-align: center;
    }
    .section-04 .txt_box{
        margin-top: 5rem ;
    }
    .click_email{
        cursor: pointer;
    }
    .copy_box{
        position: relative;
    }
    .tooltip {
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%);
        background-color: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 1.2rem;
        white-space: nowrap;
        z-index: 10;
        transition: opacity 0.5s;
    }
    .tooltip.show {
        opacity: 1;
    }
    .naver_map_area{
        width: 100%;
        aspect-ratio: 1360 / 540;
        background-color: red;
    }
    footer{
        border-top: 1px solid black;
        padding: 8rem 0;
        gap: 2rem;
    }
    footer .img-box{
        width: 31.4rem;
    }
    .mo_ver{
        display: none;
    }
    @media screen and (max-width:1440px) {
        :root{
            font-size: 0.6944vw;
        }
    }
    @media screen and (max-width:768px) {
    :root{
        /* 일반적인 모바일 기기 스타일 */
        font-size: 1.0417vw;
    }
    .pc_ver {
        display: none;
    }
    .mo_ver{
        display: inherit;
    }
    .graph_box{
        flex-direction: column;
        padding:0 4rem ;
    }
    .purpose .content_box {
        flex-direction: column;
    }
    .purpose .content_box >.img-box{
        position: relative;
        transform: rotate(90deg);

    }
    .section-02 .content_box {
        flex-direction: column;
    }
    .section-02 .icon_wrap  {
        flex-wrap: wrap;
    }
    .section-02 .icon_wrap > .icon_box{
        width: calc(50% - 3rem);
    }
    .section-03 .content_box{
        flex-wrap: wrap;
        height: auto;
        padding-left: 2rem;
    }
    .section-03 .content_box .content{
        width: calc(50% - 2rem);
    }
    .section-03 .content .content_txt{
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
    }
    @media screen and (max-width:360px) {
    :root{
        /* font-size: 10px; */
    }
    }