@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
    --font-pretendard: 'Pretendard Variable', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-jamsil: 'TheJamsil4Medium', sans-serif;
    --acc-color: #E76339;
    --bas-color: #0C0C0C;
    --sub-color: #787878;
    --white-color: #ffffff;
    --black-color: #000000;
}

div.inner_wrap { width: 100%; max-width: 1320px; margin-inline: auto; }

div.mbnav { display: none; }

header.dtnav { width: 100%; height: 111px; position: fixed; left: 0; top: 0; z-index: 50; transition: background-color 0.2s; }

header.dtnav > div { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
header.dtnav > div a.logo { display: block; width: fit-content; height: fit-content; }
header.dtnav > div ul.main-nav { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
header.dtnav > div ul.main-nav li a { font-family: var(--font-pretendard); font-weight: 500; font-size: 24px; line-height: 1.2; color: #fff; }
header.dtnav > div ul.main-nav li.active a { font-weight: 700; color: var(--acc-color); }

header.headBox.scrolled { background-color: rgba(0, 0, 0, 0.7); }

footer { background-color: #000; padding-top: 50px; padding-bottom: 50px; }

footer div.ft_acc_info { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; }
footer div.ft_acc_info > p { font-family: var(--font-pretendard); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--acc-color); word-break: keep-all; }
footer div.ft_acc_info > p > span { display: inline-block; margin-right: 10px; }
footer div.ft_acc_info > p.line { width: 2px; height: 10px; background-color: var(--acc-color); margin: 0 10px; }

footer div.ft_top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #787878; }
footer div.ft_top div.ft_company > p { font-family: var(--font-pretendard); font-weight: 600; font-size: 12px; line-height: 1.2; color: #c5c5c5; text-align: right; word-break: keep-all; }

footer div.ft_top div.ft_info_box { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
footer div.ft_top div.ft_info_box > p { font-family: var(--font-pretendard); font-weight: 500; font-size: 12px; line-height: 1.2; color: #c5c5c5; word-break: keep-all; }
footer div.ft_top div.ft_info_box > p.line { width: 1px; height: 10px; background-color: #c5c5c5; margin: 0 10px; }

footer div.ft_bot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
footer div.ft_bot div.ft_copy > p { font-family: var(--font-pretendard); font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; color: #c5c5c5; word-break: keep-all; }

footer div.ft_bot div.ft_link { display: flex; justify-content: flex-end; align-items: center; }
footer div.ft_bot div.ft_link > a { font-family: var(--font-pretendard); font-weight: 400; font-size: 14px; line-height: 1.4; color: #787878; letter-spacing: -0.02em; word-break: keep-all; }
footer div.ft_bot div.ft_link > a.diff { letter-spacing: -0.01em; color: #fff; }
footer div.ft_bot div.ft_link > p { margin: 0 4px; font-family: var(--font-pretendard); font-weight: 400; font-size: 14px; line-height: 1.4; color: #787878; letter-spacing: -0.02em; word-break: keep-all; }

@media screen and (max-width: 1350px){
    div.inner_wrap { width: 90%; }
    header.headBox > div { width: 90%; }
}

@media screen and (max-width: 1280px){
    header.headBox > div ul.main-nav { gap: 40px; }
    header.headBox > div ul.main-nav li a { font-size: 22px; }
}

@media screen and (max-width: 1024px){
    header.dtnav { display: none; }
    
    div.mbnav{ display: block; position:fixed; top:0; left:0; width:100%; z-index:100; overflow: hidden; padding: 20px 0; background-color: transparent; margin-inline: auto; }
    div.mbnav.scrolled { background-color: rgba(0, 0, 0, 0.9); }
    .mbnav .top-bar { display: flex; justify-content: space-between; align-items: center; }
    .mbnav .top-bar .headlogo { display: block; width: fit-content; height: fit-content; padding-left: 0; }
    .mbnav .top-bar .headlogo img{width: 100%;}

    /* 토글 사이드바 버튼 아이콘 */
    .hambtn { display: flex; flex-direction: column; justify-content: space-between; width: 40px; height: 40px; padding: 8px 4px; border-radius: 9999px; border: 1px solid #fff; cursor: pointer; transition: all 0.3s; z-index: 150; }
    .hambtn > div { position: relative; display: block; width: 80%; height: 2px; background-color: #fff; transition: all 0.3s; margin: 0 auto; }

    .hambtn > div:nth-of-type(1) { top: 3px; }
    .hambtn > div:nth-of-type(3) { top: -3px; }

    /*div.mbnav.scrolled .hambtn { border: 1px solid var(--acc-color); }
    div.mbnav.scrolled .hambtn > div { background-color: var(--acc-color); }*/

    .hambtn.active > div:nth-of-type(1) { top: 10px; transform: rotate(45deg); }
    .hambtn.active > div:nth-of-type(2) { opacity: 0; visibility: hidden; }
    .hambtn.active > div:nth-of-type(3) { top: -10px; transform: rotate(-45deg); }

    .hambtn.active { border: 1px solid #fff !important; }
    .hambtn.active > div { background-color: #fff !important; }

    .sidebar { display: none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0); visibility:hidden; transition:visibility .5s, background-color .5s; }
    .sidebar.active { background-color:rgba(0, 0, 0, 0.5); visibility:visible; display: block; }

    /* 좌측 사이드바 */
    .rightside { position:fixed; top:0; right:-250px; width:250px; height:100%; background-color:rgba(0, 0, 0, 0.9); padding-top:100px; transition:left .5s; }
    .sidebar.active > .rightside {right:0;}

    .rightside > ul.hd_login { position: relative; padding-left: 15px; margin-top: 50px; }
    .rightside > ul.hd_login li a { font-size: 16px; color: #000 !important; transition: all 0.3s; }
    .rightside > ul.hd_login li:first-child { padding-right: 15px; border: none;}
    .rightside > ul.hd_login li:nth-of-type(2) { padding: 0 15px; }
    .rightside > ul.hd_login li.tnb_admin { padding-left: 15px; margin-top: 20px; border: none; }
    .rightside > ul.hd_login li:hover a { font-weight: 800; }

    .rightside > .menuBox ul > li{padding:15px; cursor: pointer;}

    .rightside > .menuBox ul > li > a { color: #fff; padding: 0; font-size: 16px; font-weight: 500; transition: all 0.3s; }
    .rightside > .menuBox ul > li:hover > a{color: #fff; font-weight: 800;}
    .rightside > .menuBox ul > li > a:not(:only-child)::after { content:"+"; width: 10px; float:right; }
    .rightside > .menuBox ul > li.active > a:not(:only-child)::after { content:"-"; }
    .rightside > .menuBox > ul ul { display:none; background-color:transparent; margin-top: 15px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
    .rightside > .menuBox > ul > li > ul > a{ font-size: 14px; font-weight: 500; color: #fff; border-bottom: 0; font-family: 'Noto Sans KR' !important; display: block; padding: 5px 0; }
    .rightside > .menuBox > ul > li > ul > a:hover{color: var(--acc-color); background: transparent;}
    .rightside > .menuBox > ul ul ul {background-color:#dfdfdf;}
    .rightside > .menuBox ul > li.active > ul {display:block; padding:5px;}

    .rightside > .menuBox ul > li > a.active { color: var(--acc-color); font-weight: 800; }


    footer div.ft_acc_info { justify-content: center; }
    footer div.ft_top { flex-direction: column; row-gap: 30px; }

    footer div.ft_top div.ft_info_wrap { width: 100%; }
    footer div.ft_top div.ft_company > p { text-align: center; }

    footer div.ft_top div.ft_info_box { justify-content: center; flex-wrap: wrap; row-gap: 10px; }

    footer div.ft_bot { flex-direction: column; row-gap: 20px; }
}

@media screen and (max-width: 560px){
    footer div.ft_acc_info { flex-direction: column; row-gap: 15px; }
    footer div.ft_acc_info > p.line { display: none; }
}