@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
:root {
    --acc-color: #2041dc;
    --sky-color: #0486FF;
    --orange-color: #EF8200;
    --yellow-color: #fddb00;
    --bas-color: #000;
    --font-pretendard: 'Pretendard Variable', sans-serif;
    --font-noto: 'Noto Sans KR', sans-serif;
}

html{ scroll-behavior: smooth; }

/* scroll Bar */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background-color: var(--acc-color); }
body::-webkit-scrollbar-track { background-color: #f9f9f9; }

div.mbnav { display: none; }
div.inner_wrap { width: 100%; max-width: 1520px; margin: 0 auto; }

header.headBox { position: fixed; top: 0; width: 100%; height: 100px; background-color: transparent; z-index: 50; transition: background-color 0.3s; }

header.headBox > div { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; }

header.headBox ul.main-nav { display: flex; justify-content: center; align-items: center; column-gap: 30px; }


header.headBox ul.main-nav li { padding: 5px 10px; background-color: rgba(194, 194, 194, 0.33); border-radius: 8px; }
header.headBox ul.main-nav li a { font-family: var(--font-pretendard); font-weight: 500; font-size: 24px; line-height: 1.3; color: #fff; }

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

footer.ft_wrap { padding-top: 50px; padding-bottom: 130px; background-color: #161616; }
footer.ft_wrap div.ft_top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #fff; }
footer.ft_wrap div.ft_top div.ft_info_wrap > div.ft_company > p { font-family: var(--font-pretendard); font-weight: 600; font-size: 12px; line-height: 1.3; color: #fff; text-align: right; }
footer.ft_wrap div.ft_top div.ft_info_wrap > div.ft_info_box { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
footer.ft_wrap div.ft_top div.ft_info_wrap > div.ft_info_box > p { font-family: var(--font-pretendard); font-weight: 500; font-size: 12px; line-height: 1.3; color: #fff; }
footer.ft_wrap div.ft_top div.ft_info_wrap > div.ft_info_box > p.line { width: 1px; height: 10px; background-color: #fff; margin: 0 10px; }

footer.ft_wrap div.ft_bot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
footer.ft_wrap 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: #fff; }
footer.ft_wrap div.ft_bot > div.ft_link { display: flex; justify-content: flex-end; align-items: center; }
footer.ft_wrap div.ft_bot > div.ft_link > a { display: inline-block; font-family: var(--font-pretendard); font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; color: #fff; }
footer.ft_wrap div.ft_bot > div.ft_link > a.diff { font-weight: 700; letter-spacing: -0.01em; }

footer.ft_wrap 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; letter-spacing: -0.02em; color: #fff; }





@media screen and (max-width: 1670px){
    section.sec02 div.swiper_slide_wrap { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1640px){
    section.sec02 > div.promise_wrap { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1530px){
    div.inner_wrap { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1280px){
    header.headBox ul.main-nav li a { font-size: 20px; }
    header.headBox ul.main-nav { column-gap: 15px; }
}


@media screen and (max-width: 1024px){
    header.headBox { height: auto; padding-top: 15px; padding-bottom: 15px; }
    header.headBox > div { flex-direction: column; row-gap: 15px; }

    header.headBox {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; }
    div.mbnav.scrolled { background-color: rgba(0, 0, 0, 0.9); }
    .mbnav .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; }
    .mbnav .top-bar .headlogo { display: block; width: fit-content; height: fit-content; padding-left: 0; }
    .mbnav .top-bar .headlogo img{width: 100%;}

    /* 토글 사이드바 버튼 아이콘 */
    .hambtn.menu_wrap { 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.menu_wrap > span { position: relative; display: block; width: 80%; height: 2px; background-color: #fff; transition: all 0.3s; margin: 0 auto; }

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

    div.mbnav.scrolled .hambtn.menu_wrap { border: 1px solid #fff; }
    div.mbnav.scrolled .hambtn.menu_wrap > span { background-color: #fff; }

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

    .hambtn.menu_wrap.active { border: 1px solid #fff !important; }
    .hambtn.menu_wrap.active > span { 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{ cursor: pointer;}

    .rightside > .menuBox ul > li > a { display: block; color: #fff; padding:15px; 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;}
}

@media screen and (max-width: 860px){
    header.headBox ul.main-nav { justify-content: space-between; column-gap: 15px; }

    header.headBox ul.main-nav li a { font-size: 16px; }
}

@media screen and (max-width: 740px){
    header.headBox ul.main-nav li { padding: 5px; }

    footer.ft_wrap { padding-bottom: 230px; }
}

@media screen and (max-width: 670px){

    footer.ft_wrap div.ft_top div.ft_info_wrap > div.ft_info_box { flex-wrap: wrap; row-gap: 10px; }
}

@media screen and (max-width: 630px){
    header.headBox ul.main-nav { overflow-x: scroll; flex-wrap: nowrap; column-gap: 15px; width: 100%; padding-bottom: 5px; }
    header.headBox ul.main-nav li { white-space: nowrap; }
    header.headBox ul.main-nav::-webkit-scrollbar { height: 3px; padding-top: 5px; }
    header.headBox ul.main-nav::-webkit-scrollbar-thumb { background-color: var(--acc-color); }
    header.headBox ul.main-nav::-webkit-scrollbar-track { background-color: #f9f9f9; }

    .mbnav .top-bar .headlogo img { width: 70%; }
    .hambtn.menu_wrap { width: 30px; height: 30px; }
    .hambtn.menu_wrap > span:nth-of-type(1) { top: 0; }
    .hambtn.menu_wrap > span:nth-of-type(3) { top: 0; }

    .hambtn.menu_wrap.active > span:nth-of-type(1) { top: 5px; }
    .hambtn.menu_wrap.menu_wrap.active > span:nth-of-type(3) { top: -5px; }
}