@charset "utf-8";

html, body{ background-color:#fff; overflow-x:hidden; overflow-y:auto; }

*::selection{ background-color:#ffda50; color:#282828; }

*::-webkit-scrollbar-track{ background-color:#E9E9E9; }
*::-webkit-scrollbar{ width:12px; height:12px; background-color:#E9E9E9; border-radius:0; }
*::-webkit-scrollbar-thumb{ background-color:#C4C4C4; border-radius:0; }
*::-webkit-scrollbar-thumb:active{ background-color:#8F8F8F; }

/* wrap */
#wrap{ position:relative; font-size:14px; color:#282828; }
.logo{ font-size:24px; font-weight:700; }

.modal-on{ width:100%; height:100%; position:fixed; overflow:hidden; }
.modal-on #wrap{ position:relative; top:0; }

/* header */
#header{ width:100%; position:relative; z-index:3; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); background-color: #fff;}
#header #gnb{ display:flex; background-color:#fff; align-items:center; flex-wrap:wrap; position: relative; /* box-shadow:0 2px 4px rgba(0, 0, 0, .1); */ }
#header #gnb > *:not(#nav):not(.btn-menu){ height:80px; display:flex; position:relative; z-index:2; align-items:center; }
#header #gnb .logo{ height:100%; justify-content:flex-start; align-items:center; }
#header #gnb .logo > a{ height:100%; padding:16px 0; display:flex; justify-content:flex-start; align-items:center; }
#header #gnb .logo > a > *{ vertical-align:middle; }
#header #gnb .logo > a > img{ max-width:100%; max-height:100%; }
#header #gnb .gnb-util{ margin-left:auto; }
#header #gnb .gnb-util > li:not(:first-child){ margin-left:24px; }
#header #gnb .gnb-util > li > a{ font-weight:700; }
#header #gnb .gnb-util > li > a.btn-ico{ padding:4px; display:inline-block; }
#header #gnb .gnb-util > li > a.btn-S .ico-setting-s{ position:relative; top:-1px; }
#header #gnb .btn-menu{ width:36px; height:36px; padding:8px; display:flex; position:absolute; top:50%; transform:translate(0, -50%); background-color:#fff; border:1px solid #C4C4C4; border-radius:8px; font-size:0; z-index:10; justify-content:center; align-items:center; flex-direction:column;  left:50%; margin-left:460px; }
#header #gnb .btn-menu:before, #header #gnb .btn-menu > span, #header #gnb .btn-menu:after{ width:100%; height:2px; background-color:#000; transition:all .3s cubic-bezier(.22,.61,.36,1); }
#header #gnb .btn-menu:before, #header #gnb .btn-menu:after{ content:''; }
#header #gnb .btn-menu > span{ margin:4px 0; }

/* nav */
#header #nav{ height:80px; position:absolute; top:0; left:0; right:0; z-index:1; overflow:hidden; }
#header #nav .nav-menu{ height:100%; padding-right:68px; position:relative; }
#header #nav .nav-menu > li:not([class^='nav']){ height:100%; margin-left:32px; display:inline-block; }
#header #nav .nav-menu > li:not([class^='nav']):first-child{ margin-left:0; }
#header #nav .nav-menu > li:not([class^='nav']) > a{ height:100%; display:inline-flex; font-size:16px; font-weight:700; align-items:center; }
#header #nav .nav-menu > li.nav-inclass{ height:100%; }
#header #nav .nav-menu > li.nav-inclass > a{ height:100%; display:inline-flex; font-size:16px; font-weight:700; align-items:center; }
#header #nav .nav-menu > li.nav-inclass > a .strong{ margin-left:4px; }

#wrap.nav-on:after{ content:''; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0, 0, 0, .5); z-index:9; }
#wrap.nav-on #header{ position:relative; z-index:98 !important; } 
#wrap.nav-on #gnb .btn-menu:before{ transform:translate(0, 6px) rotate(-45deg); }
#wrap.nav-on #gnb .btn-menu > span{ opacity:0; transition:all .1s cubic-bezier(.22,.61,.36,1); }
#wrap.nav-on #gnb .btn-menu:after{ transform:translate(-2px, 1px) rotate(45deg); transform-origin:100% 0; }

#wrap.nav-on #nav{ height:auto; top:80px; background-color:#fff; z-index:-1; overflow:hidden; animation:searchOn .3s cubic-bezier(.17,.67,.83,.67) forwards; }
#wrap.nav-on #nav .nav-menu{ height:auto; max-height:100%; padding:40px 16px 16px; overflow-x:hidden; overflow-y:auto; }
#wrap.nav-on #nav .nav-menu > li{ height:auto; }
#wrap.nav-on #nav .nav-menu > li:not([class^='nav']){ margin-left:0; display:block; }
#wrap.nav-on #nav .nav-menu > li:not([class^='nav']):first-child{ margin-top:0; }
#wrap.nav-on #nav .nav-menu > li:not([class^='nav']) > a{ height:40px; font-size:22px; }
#wrap.nav-on #nav .nav-menu > li.nav-button{ top:-98px; transform:translate(0, 0); }
#wrap.nav-on #nav .nav-menu > li.nav-logout{ margin-top:32px; font-size:14px; }
#wrap.nav-on #nav .nav-menu > li.nav-inclass{ margin-top:8px; text-align:right; }
#wrap.nav-on #nav .nav-menu > li.nav-inclass > a{ display:inline-block; font-size:12px; font-weight:300; color:#c4c4c4; }

/* search */
#search{ padding:40px 0; display:none; position:absolute; top:80px; left:0; right:0; background-color:#fff; opacity:0; transform:translate(0, -100%); }
#search .search-header{ position:relative; }
#search .search-header .btn-close{ position:absolute; top:8px; right:-104px; }
#search .search-header .btn-close .ico-close{ width:32px; height:32px; }
#search .list-search > dt{ margin:40px auto 8px; font-weight:700; }
#search .list-search > dd{ padding:8px 0; display:flex; font-weight:500; font-size:16px; }
#search .list-search > dd.no-data{ min-height:auto; background-color:#fff; border:none; align-items:flex-start; }
#search .list-search > dd .btn-del{ margin-left:auto; }

#wrap.search-on:after{ content:''; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0, 0, 0, .5); z-index:9; }
#wrap.search-on #header{ position:relative; z-index:99 !important; }
#wrap.search-on #header #gnb{ position:relative; background-color:#fff; z-index:99; }
#wrap.search-on #search{ display:block; z-index:98; animation:searchOn .3s cubic-bezier(.17,.67,.83,.67) forwards; }

@keyframes searchOn{
    0%{ transform:translate(0, -100%); opacity:0; }
    100%{ transform:translate(0, 0); opacity:1; }
}


/* container */
#container{ padding-bottom:100px; position:relative; z-index:2; }


/* footer */
#footer{ box-shadow:2px -2px 2px 0 rgba(0, 0, 0, .05); }
#footer > .wide-layout{ padding:24px 16px; }
#footer .info-area{ line-height:20px; margin-top:8px; font-size:12px; font-weight:500; color:#828282; }
#footer .footer-link{ display:flex; font-size:0; align-items:center; }
#footer .footer-link .list-sns{ margin:-8px -8px -8px auto; justify-content:flex-start; }
#footer .footer-link .list-sns > a{ width:auto; }
#footer .footer-link .list-sns > a > .icon{ width:40px; height:40px; background-color:#fff; border-color:#D4D0CC; }
#footer .footer-link .list-sns > a > .icon [class^='ico']{ width:18px; height:18px; }
#footer .footer-link .app-link{ margin:0 -6px 0 auto; font-size:0; }
#footer .footer-link .app-link > a{ margin:0 6px; }
#footer .footer-site{ margin-top:4px; }
#footer .footer-site .info-area{ margin-top:0; }
#footer .footer-gsg{ margin-top:24px; }
#footer .footer-gsg .btn-toggle{ font-size:12px; color:#828282; }
#footer .footer-gsg .info-area{ margin-top:5px; display:none; }
#footer .footer-agree{ margin-top:2px; }
#footer .footer-agree .info-area{ margin-top:0; }
#footer .footer-agree .info-area > a:before{ content:''; width:1px; height:8px; margin:0 7px 0 5px; display:inline-block; background-color:#8f8f8f; }
#footer .footer-agree .info-area > a:first-child:before{ display:none; }
#footer .footer-copy{ margin-top:8px; display:flex; align-items:center; }
#footer .footer-copy .logo{ display:flex; font-family:'Pretendard', 'noto sans kr', 'Sans-serif'; font-size:20px; justify-content:flex-start; align-items:center; }
#footer .footer-copy .logo .ico-logo, #footer .footer-copy .logo .ico-logo-wt{ width:86px; height:20px; margin-left:8px; }
#footer .footer-copy p{ margin-top:2px; font-size:10px; color:#828282; }
#footer .footer-copy .btn-area{ margin-left:auto; font-size:0; }
#footer .footer-copy .btn-area .btn{ margin:0 4px; border-color:#D4D0CC; }

/* font 지정 */
/* .site-font-gyeonggi{  } */
.site-font-gyeonggi .logo{ font-family:'GyeonggiBatang', 'Noto Sans KR','Sans-serif'; }
.site-font-gyeonggi .visual-content .swiper .swiper-wrapper .swiper-slide > .cont-area .tit-dep2, .site-font-gyeonggi .middle-content .swiper .swiper-wrapper .swiper-slide .cont-area .tit-dep2{ font-family:'GyeonggiBatang', 'Noto Sans KR','Sans-serif'; }

.hide { display: none !important;}