@charset "utf-8";


/* 메인 폰트: NanumSquareNeo CDN 사용 */
@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/woff2/NanumSquareNeoTTF-bRg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable-700';
    src: url('https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/woff2/NanumSquareNeoTTF-cBd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable-800';
    src: url('https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/woff2/NanumSquareNeoTTF-dEb.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable-900';
    src: url('https://cdn.jsdelivr.net/gh/eunchurn/NanumSquareNeo@0.0.6/woff2/NanumSquareNeoTTF-eHv.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

/*------ 공통 스타일 ------*/
body { font-family: 'NanumSquareNeo-Variable', sans-serif; font-size: 16px; color: #000000; background-color: #000000; }
.center_inner { width: 90%; max-width: 1480px; margin: 0 auto; }
section { padding-top: 176px; color: #ffffff; }

.pc_view { display: block; }
.moblie_view { display: none; }

/* z-index */
header { z-index:999;}
header nav { z-index:999;}
header.on nav { z-index: 201; }
.modal { z-index: 301; }
.modal_bg { z-index: 300;}
.page_top_btn { z-index: 100; }


/* text style */
h3 { margin-bottom: 25px; font-size: 24px; font-family: 'NanumSquareNeo-Variable-800'; text-align: center; }
b { font-family: 'NanumSquareNeo-Variable-800'; }
.blue_color { color: #0047ff; }
.green_color { color: #00FF99; }
.orange_color { color: #FF6B00; }


/* input style */
input { padding: 2px 10px; border: 1px solid #000000; box-sizing: border-box; font-size: inherit; font-family: inherit; }
input::placeholder { color: #acacac;}

select { padding: 10px 15px; border: 1px solid #dadada; background-color: #f8f8f8; border-radius: 6px; color: #444444; box-sizing: border-box; font-size: 14px; font-family: inherit; }
.select_wrap { margin: 30px 0; display: flex; justify-content: center; }


/* button style */
.btn_stlye_A { width: fit-content; padding: 16px 32px; border-radius: 16px; font-size: 15px; font-family: 'NanumSquareNeo-Variable-700'; background-color: #ffffff; display: flex; align-items: center; justify-content: center; }
.btn_stlye_A .icon_wrap { margin-left: 16px; }
.btn_stlye_A .icon_wrap > img { width: 15px; }
.btn_stlye_A .icon_wrap > img:nth-child(1) { display: block; }
.btn_stlye_A .icon_wrap > img:nth-child(2) { display: none; }
.btn_stlye_A:hover { color: #0047ff; transform: scale(0.95); transition: 0.3s; }
.btn_stlye_A:hover .icon_wrap > img:nth-child(1) { display: none; }
.btn_stlye_A:hover .icon_wrap > img:nth-child(2) { display: block; }

.btn_stlye_B { width: fit-content; padding: 16px 32px; border-radius: 16px; font-size: 15px; font-family: 'NanumSquareNeo-Variable-700'; background-color: #DDE6FF; display: flex; align-items: center; justify-content: center; }
.btn_stlye_B .icon_wrap { margin-left: 16px; }
.btn_stlye_B .icon_wrap > img { width: 15px; }
.btn_stlye_B .icon_wrap > img:nth-child(1) { display: block; }
.btn_stlye_B .icon_wrap > img:nth-child(2) { display: none; }
.btn_stlye_B:hover { color: #0047ff; transform: scale(0.95); transition: 0.3s; }
.btn_stlye_B:hover .icon_wrap > img:nth-child(1) { display: none; }
.btn_stlye_B:hover .icon_wrap > img:nth-child(2) { display: block; }

.btn_stlye_C { width: fit-content; padding: 24px 32px; font-size: 18px; border-radius: 15px; background-color: #f9f9f9; display: block; }
.btn_stlye_C:hover { color: #ffffff; background-color: #0047ff; transition: 0.3s; }
.btn_stlye_C.off { color: #c0c0c0!important; background-color: #f9f9f9!important; cursor: default; }

.btn_stlye_D { width: fit-content; padding: 16px 32px; border-radius: 5px; font-size: 15px; font-family: 'NanumSquareNeo-Variable-700'; color: #0047ff; background-color: #00FF99; display: flex; align-items: center; justify-content: center; }
.btn_stlye_D:hover { color: #00FF99; background-color: #0047ff; transition: 0.3s; }

.btn_stlye_E { width: fit-content; padding: 16px 50px; border-radius: 5px; font-size: 15px; font-family: 'NanumSquareNeo-Variable-700'; color: #00FF99; background-color: #0047ff; display: flex; align-items: center; justify-content: center; }
.btn_stlye_E:hover { color: #0047ff; background-color: #00FF99; transition: 0.3s; }

.btn_stlye_F { width: fit-content; padding: 16px 32px; border-radius: 5px; font-size: 15px; color: #0047ff; font-family: 'NanumSquareNeo-Variable-700'; background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%); display: block; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn_stlye_F img { width: 15px; margin-left: 16px; }
.btn_stlye_F:hover { transform: scale(0.95); transition: 0.3s; }

.btn_style_G { width: fit-content; height: 50px; padding: 5px 32px; border-radius: 25px; font-size: 15px; background-color: #0047ff; color: #ffffff; font-family: 'NanumSquareNeo-Variable-700'; display: flex; align-items: center; }
.btn_style_G .icon_wrap { width: 16px; height: 16px; margin-left: 10px; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; }
.btn_style_G .icon_wrap > img { width: 10px; }
.btn_style_G:hover { color: #ffffff; transform: scale(0.95); transition: 0.3s; }


/* content box style */
.content_box_A { border-radius: 20px; color: #ffffff; background-color: #212121; overflow: hidden; }
.content_box_A > div { width: 100%; height: 100%; padding: 30px 30px; }
.content_box_A.blue { background-color: #0047ff; }

.content_box_A .l_title { font-size: 26px; line-height: 1.4; font-family: 'NanumSquareNeo-Variable-900'; font-weight: bold;} 
.content_box_A .m_title { font-size: 24px; line-height: 1.4; font-family: 'NanumSquareNeo-Variable-800'; }
.content_box_A .s_title { margin-bottom: 5px; font-size: 12px; }


/* video_box */
.video_box { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; }
.video_box > iframe { z-index: 1; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.video_box > img { z-index: 1; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }


/* modal style */
.modal { max-width: 95%; max-height: 95%; overflow: scroll; opacity: 0; visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-overflow-style: none; scrollbar-width: none; }
.modal.on { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.modal::-webkit-scrollbar { display: none; }
.modal_bg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; }
.modal_bg.on { opacity: 1; visibility: visible; transition: opacity 0.3s; }


/* page_top_btn */
.page_top_btn { position: fixed; }



/*############ header ############*/
header { width: 100%; position: fixed; top: 0; left: 0; }

/* header_top_wrap */
.header_top_wrap {
    /* background: linear-gradient(to right, #000000 0%, #000000 60%, #00FFA2 80%, #0BF3EB 90%, #F11BF9 100%); */
    background: linear-gradient(90deg, #000 52.88%, #00FFA2 82.21%, #0BF3EB 88.46%, #F11BF9 100%);
    position: relative;
    overflow: hidden;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_top_wrap .header_top_wrap_background_img {
    position: absolute;
    width: 100%;
    top: 0;
}

.header_top_wrap .header_top_wrap_background_img img:nth-child(1) {
 
    max-width: 474px;
    height: 88px;
    flex-shrink: 0;
    aspect-ratio: 237/148;
    width: 28%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.header_top_wrap .header_top_wrap_background_img img:nth-child(2) {
    max-width: 470px;
    height: 88px;
    flex-shrink: 0;
    aspect-ratio: 470.75/294.00;
    width: 30%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
} 

.header_top_wrap .text_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
   /* width: 400px; */
}

.header_top_wrap .text_wrap > p > span:nth-child(1) {
    color: #fff;
    padding-right: 10px;
    font-size: 15px;
}

.header_top_wrap .text_wrap > p > span:nth-child(2) {
    border-left: 1px solid #fff;
    padding-left: 10px;
    color: #fff;
    font-size: 15px;
} 


.header_top_wrap .text_wrap > a {
    margin-left: 20px;
    background-color: #ffffff;
    padding: 6px 15px;

    border-radius: 22px;

    color: #D333FD;

    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 1000;
    position: relative;
    z-index: 2;
    text-decoration: none;
}
@media all and (max-width: 1380px) {
  .header_top_wrap {
    height: 52px;
  }
  .header_top_wrap .header_top_wrap_background_img img:nth-child(1) {
    height: 52px;
  }
  .header_top_wrap .header_top_wrap_background_img img:nth-child(2) {
    height: 52px;
  }
}
@media all and (max-width:600px) {
    .header_top_wrap .text_wrap > img {
        width:70%;
}

    .header_top_wrap .text_wrap a {
        background-color: #ffffff;
        padding: 2px 8px;
        font-size: 11px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }
    .header_top_wrap .text_wrap > p > span:nth-child(1) {
        font-size: 12px;
        padding-right: 5px;
    }
    .header_top_wrap .text_wrap > p > span:nth-child(2) {
        font-size: 12px;
        padding-left: 5px;
    }
}

@media all and (max-width:450px) {
    .header_top_wrap .text_wrap {
        text-align: center;
        line-height: 1.3;
    }
    .header_top_wrap .text_wrap > p > span:nth-child(1) {
        padding-right: 0px;
        display: block;
    }
    .header_top_wrap .text_wrap > p > span:nth-child(2) {
        padding-left: 0px;
        display: block;
        border: none;
    }
}

.header_top_wrap .text_wrap a img {
    width: 15px;
    margin-left: 5px;
}

/* header_wrap */
header .header_wrap { width: 100%; height: 88px; padding: 0 4%; color: #ffffff; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: space-between; }

header .header_wrap .logo_wrap { width: 400px; }
header .header_wrap .logo_wrap > a { width: 100%; }
header .header_wrap .logo_wrap > a > img { width: 100%; }
header .header_wrap .logo_wrap > a > img.white_logo { display: block; }
header .header_wrap .logo_wrap > a > img.black_logo { display: none; }

header .header_wrap .menu_btn_wrap { display: flex; align-items: center; }
header .header_wrap .menu_btn_wrap .language_btn > a { font-size: 14px; color: #ffffff; font-family: 'NanumSquareNeo-Variable-800'; }
header .header_wrap .menu_btn_wrap .menu_btn { width: 36px; margin-left: 25px; cursor: pointer; }
header .header_wrap .menu_btn_wrap .menu_btn > img { width: 100%; }
header .header_wrap .menu_btn_wrap .menu_btn > img.menu_on { display: block; }
header .header_wrap .menu_btn_wrap .menu_btn > img.menu_on.pc_view { display: block; }
header .header_wrap .menu_btn_wrap .menu_btn > img.menu_on.moblie_view { display: none; }
header .header_wrap .menu_btn_wrap .menu_btn > img.menu_off { display: none; }


/* nav */
header nav { width: 100%; height: auto; max-height: 100vh; padding: 50px 4%; color: #444444; overflow: scroll; position: fixed; top: -110%; left: 0; background-color: #ffffff; -ms-overflow-style: none; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
header nav { opacity: 0; display: none; }
header.on nav { opacity: 1; display:block; }



header nav .nav_wrap ul > li > a { color: #444444; }
header nav .nav_wrap ul > li > a::before { content: '-'; margin-right: 10px; }
header nav .nav_wrap ul > li > a.page_on { background-color: #f8f8f8; color: #0047ff; }

header nav .nav_wrap { margin-bottom: 50px; }
header nav .nav_wrap .main_menu { display:flex; justify-content: space-between; }
header nav .nav_wrap .main_menu > li { width: 24%; }
header nav .nav_wrap .main_menu > li > .nav_tit { width: 100%; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid #c0c0c0; font-size: 20px; font-family: 'NanumSquareNeo-Variable-800'; display: block; }

header nav .nav_wrap .sub_menu > li > a { padding: 16px 5px; font-size: 18px; display: block; font-family: 'NanumSquareNeo-Variable-700';list-style: none; }
header nav .nav_wrap .sub_menu > li > a:hover { color: #ffffff; background-color: #0047ff; transition: 0.5s; }

header nav .nav_wrap .s_menu > li > a { padding: 16px 30px; font-size: 18px; display: block; font-family: 'NanumSquareNeo-Variable-700'; }
header nav .nav_wrap .s_menu > li > a:hover { color: #ffffff; background-color: #0047ff; transition: 0.5s; }

header nav .link_wrap { width: 100%; }
header nav .link_wrap > ul { display: flex; justify-content: space-between; }
header nav .link_wrap > ul > li { width: 24%; }
header nav .link_wrap > ul > li > a { width: 100%; font-family: 'NanumSquareNeo-Variable-700'; }
header nav .link_wrap > ul > li > a > img { display: none; }


/* nav open */
header.on .header_wrap { color: #000000; background-color: rgba(255, 255, 255, 1); transition: 0.5s; }

header.on .header_wrap .logo_wrap > a > img.white_logo { display: none; }
header.on .header_wrap .logo_wrap > a > img.black_logo { display: block; }

header.on .header_wrap .menu_btn_wrap .language_btn > a { color: #000000; }
header.on .header_wrap .menu_btn_wrap .menu_btn > img.menu_on { display: none!important; }
header.on .header_wrap .menu_btn_wrap .menu_btn > img.menu_off { display: block; }

header.on nav { top: 85px; transition: top 0.5s; }



/*############ footer ############*/
footer { padding: 80px 0; background-color: #333333; font-size: 12px; color: #c0c0c0; line-height: 1.6;}
footer .center_inner { display: flex; justify-content: space-between; }
footer .center_inner > div { display: flex; flex-direction: column; justify-content: space-between; }

footer .info_wrap .logo > img { width: 200px; }
footer .info_wrap .text1 { margin: 20px 0; }
footer .info_wrap .text2 > a { color: #c0c0c0; }

footer .sns_link_wrap .sns_list { display: flex; justify-content: flex-end; }
footer .sns_link_wrap .sns_list > li > a { margin-left: 15px; display: block; }
footer .sns_link_wrap .sns_list > li > a > img { width: 30px; }
footer .sns_link_wrap .link_list { display: flex; }
footer .sns_link_wrap .link_list a { padding: 12px 20px; color: #c0c0c0; }



@media all and (max-width:1380px) {
    body { font-size: 15px; }
    section { padding-top: 104px; color: #ffffff; }
    .center_inner { padding: 0 1%; }

    .pc_view { display: none; }
    .moblie_view { display: block; }

    /* content box style */
    .content_box_A .l_title { font-size: 26px; }
    .content_box_A .m_title { font-size: 18px; }


    /*############ header ############*/
    /* header_wrap */
    header .header_wrap { height: 52px; }
    header .header_wrap .logo_wrap { width: 140px; }
    header .header_wrap .menu_btn_wrap .menu_btn { width: 24px; }
    header .header_wrap .menu_btn_wrap .menu_btn > img.menu_on.pc_view { display: none; }
    header .header_wrap .menu_btn_wrap .menu_btn > img.menu_on.moblie_view { display: block; }

    /* nav */
    header nav {
        
        display: flex; flex-direction: column-reverse; 
         -ms-overflow-style: none; /* IE, Edge에서 스크롤 숨김 */
         scrollbar-width: none;    /* Firefox에서 스크롤 숨김 */
    }
    header nav > div { width: 100%; }

    header nav .nav_wrap .main_menu { flex-direction: column; justify-content: flex-start; }
    header nav .nav_wrap .main_menu > li { width: 100%; margin-bottom: 35px; }
    header nav .nav_wrap .main_menu > li > .nav_tit { margin-bottom: 0px; border-bottom: none; font-size: 14px; }

    header nav .nav_wrap .sub_menu > li > a { padding: 12px 5px; font-size: 14px; }

    header nav .nav_wrap .s_menu > li > a { padding: 12px 30px; font-size: 14px; }

    header nav .link_wrap { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #efefef; }
    header nav .link_wrap > ul > li { width: 32%; }
    header nav .link_wrap > ul > li:nth-child(1) { display: none; }
    header nav .link_wrap > ul > li > a { height: 100%; font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
    header nav .link_wrap > ul > li > a > img { width: 20px; margin-bottom: 10px; display: block; }
    header nav .link_wrap > ul > li > .btn_stlye_C.off > img { opacity: 0.4; }
    
    /* nav open */
    header.on nav { top: 50px; }


    /*############ footer ############*/
    footer { padding: 50px 0; }

    footer .center_inner { flex-direction: column; justify-content: center; }
    footer .center_inner > div { align-items: center; justify-content: center; text-align: center; }

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

    footer .sns_link_wrap .sns_list { padding-bottom: 10px; }
    footer .sns_link_wrap .link_list { width: 100%; padding-top: 10px; justify-content: center; border-top: 1px solid #6b6b6b; }
}

@media all and (max-width:820px) { 
    /* text style */
    h3 { font-size: 20px; }

    /* button style */
    .btn_stlye_A { padding: 12px 25px; border-radius: 10px; font-size: 14px; }
    .btn_stlye_A .icon_wrap { margin-left: 12px; }
    .btn_stlye_A .icon_wrap > img { width: 13px; }

    .btn_stlye_B { padding: 12px 25px; border-radius: 10px; font-size: 14px; }
    .btn_stlye_B .icon_wrap { margin-left: 12px; }
    .btn_stlye_B .icon_wrap > img { width: 13px; }

    .btn_stlye_D { padding: 12px 25px; border-radius: 10px; font-size: 14px; }

    .btn_stlye_E { padding: 12px 30px; border-radius: 10px; font-size: 14px; }

    .btn_style_G { height: 40px; border-radius: 20px; padding: 5px 24px; font-size: 14px; }

    /* content box style */
    .content_box_A > div { padding: 25px 25px; }
}

@media all and (max-width:480px) { 
    body { font-size: 14px; }
    
    /* content box style */
    .content_box_A > div { padding: 20px 20px; border-radius: 15px; }

    .content_box_A .l_title { font-size: 22px; }
    .content_box_A .m_title { font-size: 17px; }


    /*############ footer ############*/
    footer .info_wrap .logo > img { width: 160px; }

    footer .sns_link_wrap .link_list a { padding: 12px 8px; }
}