@charset "utf-8";

dl, dt, dd, ul, ol, li, 
h1 {
    all: unset;
    display: revert;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input,
textarea {-webkit-user-select: auto;}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {white-space: revert;}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {-webkit-user-drag: element;}

/* Revert Modal native behavior */
/* :where(dialog:modal) {all: revert;} */


*,
*::before,
*::after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a,
button {cursor: pointer;}
ol,
ul,
menu {list-style: none;}
table {border-collapse: collapse;}
meter {-webkit-appearance: revert; appearance: revert;}
pre {all: revert;}
::placeholder {color: unset;}

html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}

article,
aside,
footer,
header,
nav,
section{display:block;}
figcaption,
figure,
main{display:block;}
audio,
video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
pre{font-family:inherit;font-size:inherit;}

abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}

b,
strong{font-weight:inherit;}
code,
kbd, /* Define some text as keyboard input in a document */
samp{font-size:inherit;} /* Define some text as sample output from a computer program in a document */
dfn{} /* Mark up a term with <dfn> */
mark{} /* Highlight parts of a text */
small{font-size:smaller;}
sub{font-size:smaller; vertical-align:sub;}
sup{font-size:smaller; vertical-align:super;}

img{border-style:none;}

legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}



progress{display:inline-block;vertical-align:baseline;}
textarea{overflow:auto;}
details,
menu{display:block;}
summary{display:list-item;}
canvas{display:inline-block;}
template{display:none;} /* Use <template> to hold some content that will be hidden when the page loads. Use JavaScript to display it */
[hidden]{display:none;}

button,
input,
optgroup,
select,
textarea{font-family:inherit;font-size:inherit;line-height:inherit;}

button,
input{overflow:visible;}
button,
select{text-transform:none;}

button,
html [type="button"],
[type="reset"],
[type="submit"]{-webkit-appearance:button;}


html, body,
div, h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd,
form, fieldset, input, select, label, textarea,
table, caption, thead, tfoot, tbody, tr, th, td,
article, aside, dialog, footer, header, section, footer, nav, figure, hgroup, pre {
    margin:0;padding:0;
}


/** add style **/
html {font-size:16px} /* font-size:62.5%, = font-size:10px(em,rem), body에 font-size:1.6rem : 요즘 브라우저 기본값 16px */
body {font-family: 'PretendardGOV', /*'Poppins', 'Noto Sans KR',*/ 'Malgun Gothic', '맑은 고딕', 'Dotum', 'Apple SD Gothic Neo', Arial, sans-serif; font-weight:normal; line-height:1.3; letter-spacing:normal; color:#333; word-wrap:break-word; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch; background: #fff;
    /* transition: opacity .2s ease-in; */
} /* 영문 : Poppins, 한글 : Noto Sans KR */
/* body.transition {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out
} */

h1, h2, h3, h4, h5, h6 {}

a {color: inherit; text-decoration: inherit;}
/* a:active,
a:hover{outline-width:0;}  */
/* a:focus,
button:focus {outline: none;} */
button:focus,
:focus {outline: none;}
img {max-width:100%;}

em {font-style: inherit;}

button {background:transparent; border:none; padding:0;}

table > caption {position:absolute; margin:-1px; padding:0; width:1px; height:1px; overflow:hidden; border:0; clip:rect(0 0 0 0); white-space: nowrap;}
fieldset{border: none;}

::-webkit-input-placeholder {color:#D3D3D3;opacity:1;}

address {
    font-style:normal;
}


body {
    /* Variables */
    /* color */
    --color-primary: #000;

    /* header */
    --header-padding: 0 40px;
    --header-height: 78px;

	--content-side-padding: 40px;
    --modals-side-padding: 40px;
    word-break: keep-all;

}
.nf-header {display: none;}

.sr-only {position:absolute; margin:-1px; padding:0; width:1px; height:1px; overflow:hidden; border:0; clip:rect(0 0 0 0); white-space: nowrap;}

hr {display: block; margin: 25px auto; border: none; height: 1px; background: #eff1f3;} 

/* FONT HELPERS */
.ta-c {text-align: center !important;}
.ta-l {text-align: left !important;}
.ta-r {text-align: right !important;}

.fs-13 {font-size: 13px !important;}
.fs-14 {font-size: 14px !important;}
.fs-15 {font-size: 15px !important;}
.fs-16 {font-size: 16px !important;}
.fs-18 {font-size: 18px !important;}
.fs-20 {font-size: 20px !important;}
.fw-300 {font-weight: 300 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}

/* PADDING */
.p-0 {margin: 0 !important;}
.p10 {margin:10px}
.p20 {margin:20px}
.p30 {margin:30px}
.p40 {margin:40px}
.p50 {margin:50px}
.p60 {margin:60px}
.p70 {margin:70px}
.p80 {margin:80px}
.p90 {margin:90px}
.p100 {margin:100px}
.p150 {margin:150px}

.pt0 {margin-top: 0 !important;}
.pt10 {margin-top: 10px}
.pt20 {margin-top: 20px}
.pt30 {margin-top: 30px}
.pt40 {margin-top: 40px}
.pt50 {margin-top: 50px}
.pt60 {margin-top: 60px}
.pt70 {margin-top: 70px}
.pt80 {margin-top: 80px}

.pr0 {margin-right: 0 !important;}
.pr5 {margin-right: 5px}
.pr10 {margin-right: 10px}
.pr20 {margin-right: 20px}
.pr30 {margin-right: 30px}
.pr40 {margin-right: 40px}
.pr50 {margin-right: 50px}
.pr60 {margin-right: 60px}
.pr70 {margin-right: 70px}
.pr80 {margin-right: 80px}

.pb0 {margin-bottom: 0 !important;}
.pb5 {margin-bottom: 5px}
.pb10 {margin-bottom: 10px}
.pb20 {margin-bottom: 20px}
.pb30 {margin-bottom: 30px}
.pb40 {margin-bottom: 40px}
.pb50 {margin-bottom: 50px}
.pb60 {margin-bottom: 60px}
.pb70 {margin-bottom: 70px}
.pb80 {margin-bottom: 80px}

.pl0 {margin-left: 0 !important;}
.pl10 {margin-left: 10px}
.pl20 {margin-left: 20px}
.pl30 {margin-left: 30px}
.pl40 {margin-left: 40px}
.pl50 {margin-left: 50px}
.pl60 {margin-left: 60px}
.pl70 {margin-left: 70px}
.pl80 {margin-left: 80px}



/* MARGIN */
.m-0 {margin: 0 !important;}
.m10 {margin:10px}
.m20 {margin:20px}
.m30 {margin:30px}
.m40 {margin:40px}
.m50 {margin:50px}
.m60 {margin:60px}
.m70 {margin:70px}
.m80 {margin:80px}
.m90 {margin:90px}
.m100 {margin:100px}
.m150 {margin:150px}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px}
.mt20 {margin-top: 20px}
.mt30 {margin-top: 30px}
.mt40 {margin-top: 40px}
.mt50 {margin-top: 50px}
.mt60 {margin-top: 60px}
.mt70 {margin-top: 70px}
.mt80 {margin-top: 80px}

.mr0 {margin-right: 0 !important;}
.mr5 {margin-right: 5px}
.mr10 {margin-right: 10px}
.mr20 {margin-right: 20px}
.mr30 {margin-right: 30px}
.mr40 {margin-right: 40px}
.mr50 {margin-right: 50px}
.mr60 {margin-right: 60px}
.mr70 {margin-right: 70px}
.mr80 {margin-right: 80px}

.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px}
.mb10 {margin-bottom: 10px}
.mb20 {margin-bottom: 20px}
.mb30 {margin-bottom: 30px}
.mb40 {margin-bottom: 40px}
.mb50 {margin-bottom: 50px}
.mb60 {margin-bottom: 60px}
.mb70 {margin-bottom: 70px}
.mb80 {margin-bottom: 80px}

.ml0 {margin-left: 0 !important;}
.ml10 {margin-left: 10px}
.ml15 {margin-left: 15px}
.ml20 {margin-left: 20px}
.ml30 {margin-left: 30px}
.ml40 {margin-left: 40px}
.ml50 {margin-left: 50px}
.ml60 {margin-left: 60px}
.ml70 {margin-left: 70px}
.ml80 {margin-left: 80px}


/* DISPLAY */
.d-none {display: none;}
.d-block {display: block;}
.d-inline-block {display: inline-block;}

/* width */
.w5p {width:15%}
.w10p {width:10%}
.w15p {width:15%}
.w20p {width:20%}
.w25p {width:25%}
.w30p {width:30%}
.w35p {width:35%}
.w40p {width:40%}
.w45p {width:45%}
.w50p {width:50%}
.w55p {width:55%}
.w60p {width:60%}
.w65p {width:65%}
.w70p {width:70%}
.w75p {width:75%}
.w80p {width:80%}
.w85p {width:85%}
.w90p {width:90%}
.w95p {width:95%}
.w100p {width:100%}



/* font-color */
.blue-txt {color:#1764c4}
.red-txt {color:#d63b2f}
.green-txt {color:#1764c4}
.blue-txt {color:#1764c4}
.gray-txt {color:#666}
.text-bold {font-weight: 600;}
.fsize16 {
    font-size: 16px;
}
.fsize14 {
    font-size: 14px;
}
.fsize13 {
    font-size: 13px;
}
.fsize12 {
    font-size: 12px;
}


/* Skip navigation */
.skipnavi a {display:block; position:absolute; top:-10000px; left:0; z-index:100; width:100%; text-align: center}
.skipnavi a:focus {position:absolute; top:0; z-index:100; padding:10px 0; background:#50B587 ; font-weight:500; color:#fff}


/* header pc */
.header-pcarea {
    width:100%;
}
.gnb-inner {
    width:100%;
    box-sizing: border-box;
    padding:0 5%;
    height:60px;
    line-height:60px;
    border-bottom:1px rgba(255, 255, 255, 0.15) solid;
}
.gnb-list {text-align: right;}
.gnb-list li {
    display: inline-block;
    padding-left:25px;
    font-size: 26px;
    font-weight: 600;
    color:#fff;
}
.gnb-list li a {color:#fff}
.header-mobilearea {display: none ;}
.header-pcarea {
    border-bottom:1px rgba(255, 255, 255, 0.20) solid;
    position: relative;
}
nav {
    width:100%;
    padding:0 5%;
    box-sizing: border-box;
    height:107px;
    display: flex;
    align-items: center;
    justify-content:space-between;
}
.sub-menu {
    display: none;
    position: absolute;
    border-top:1px #e5e5e5 solid;
    background-color:#fff;
    width: 100%;    
    box-shadow: 0 5px 6px rgba(0,0,0,0.2);
    left: 0;
    top: 100%;
    z-index:9999;
    text-align: right;
    }
.nav-item {
    width: 100%;
    padding-top:30px;
    margin:0px auto;
}
.logo-area {
    font-size:40px;
    font-weight:600;
    color:#fff;   
}
.nav-listarea {
    padding-top:2px;
    font-size: 0;
}

.nav-listarea li {
    display: inline-block;
    font-size: 32px;
    color:#fff;
    font-weight: 700;
    padding-left:85px;
    margin:0;    
}
.nav-bg {
    width: 300px;
    text-align: center;
    vertical-align: top;
}
.nav-listarea li .nav-linkbg {
    box-sizing: border-box;
    padding:0;
    margin:0;
    width:60%;
}
.nav-slist {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding:0;   
}
.nav-slist li {
    box-sizing: border-box;
    padding-right:5%;
    border-bottom:0px #ccc dashed;
    margin-bottom:30px;
    padding-left:0;
    text-align: left;
}
.nav-listarea li:nth-child(2) .nav-linkbg  {
    padding-left:6%
}
.nav-listarea li:nth-child(3) .nav-linkbg  {
    padding-left:17%
}
.nav-listarea li:nth-child(4) .nav-linkbg  {
    padding-left:32%
}
.nav-listarea li:nth-child(5) .nav-linkbg  {
    padding-left:47%
}
.nav-slist li a {
    color:#222;
    font-size: 24px;
}
.nav-slist li a:hover {
    color:#1764c4;
}
.nav-slist li .smenu-pres {
    background: url('/images/npps/common/smenu-listarr.png')no-repeat 100% 10px;
    padding-right:20px;
}
.nav-slist li:hover .smenu-pres {
    background: url('/images/npps/common/smenu-listarr1.png')no-repeat 100% 10px;
    padding-right:20px;
}
.nav-slist li:nth-child(3),
.nav-slist li:nth-child(6),
.nav-slist li:nth-child(9),
.nav-slist li:nth-child(12),
.nav-slist li:nth-child(12) {
    margin-right:0;
}

.nav-comment {
    display: block;
    font-size: 14px;
    color:#666;
    padding:5px 0 10px 0;
    font-weight: 500;
    line-height: 1.3;
    word-break: keep-all;
}
.smenu-listarea {
    display: block;
    flex-wrap: wrap;
    background-color: #f0f7ff;
    padding:5px 10px 10px 15px; 
    border-radius: 10px;
    margin-bottom:20px;
    font-size: 18px;
}
.nav-slist li .smenu-listarea a {
    border-bottom:0px;
    font-size: 18px;
    color:#555;
    padding:0 10px 0px 7px;
    text-align: left;
    font-weight: 500;
    background: url('/images/npps/common/smenu-listdot.png') no-repeat 0 10px;
    transition: 0.3s;
}
.nav-slist li .smenu-listarea a:hover {
    color:#1764c4;
    background: url('/images/npps/common/smenu-listdot1.png') no-repeat 0 10px;
}
.smenu-listarea a.act{
    color:#1764c4
}
.smenu-listarea a.link {
    background: url('/images/npps/sub/instit-link.png') no-repeat 100% 3px;
    padding-right:20px;
    margin-right:10px;
}
.l-link {
    background: url('/images/npps/sub/l-link.png') no-repeat 100% 6px;
    padding-right:25px;
    margin-right:0px;
}
.nav-smenuarea {display: none;}

/* contents */
/* .nf-content {
    display: flex;
    max-width: 100%; 
    min-height:500px;
    margin: auto; 
    transition: margin-left 0.3s;}
.nf-container {padding-top: 42px;}
.content-right{
    flex-grow: 1;
    margin-left:40px;
    padding:30px 0 60px 0;
    width:calc(100% - 290px);
} */


footer {
    background-color: #e1e2e7;
    border-top:1px #d3d4db solid;
}
.footer-contain {
    width: 100%;
    padding:20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 16px;
    color:#595d74;
    line-height: 1.8;   
    border-bottom:1px #d3d4db solid; 
}
address span {font-weight: 600;}
.footer-rightarea {
    vertical-align: bottom;
    text-align: right;
}
.copyright {
    font-size: 14px;
    text-align: right;
}
.privacy {
    width: 100%;
    padding:20px 5% 40px 5%;
    background-color: #f7f8fc;
    color:#3a70c2;
    font-weight: 600;
}
.privacy a:hover {
    text-decoration: underline;
}

/* 모달팝업, 사이트맵 */
 .dialog {
  display:none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.dialog>.tb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dialog>.tb .inner {
  width: 100%;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
}

.dialog .top {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #222;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.dialog .title {
  font-weight: bold;
  font-size: 20px;
  color:#222
}

.dialog .ct {
  max-height: 60vh;
  height: 60vh;
  overflow-y: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
}
.dialog .ct::-webkit-scrollbar {
    width: 7px; 
  }
.dialog .ct::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 50px;
}
.dialog .ct::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    border:1px #dedede solid;
    border-radius: 50px;
} 

.accordion {
  width: 100%;  
  margin: 0 auto;
  padding-right:3%;
  box-sizing: border-box;
}
.accordion div:last-child {
    border-bottom:0px;
    padding-bottom:0;
    margin-bottom:0
}
.accordion-btn {
  display: block;
  width: 100%;
  text-align: left;
  background-color: inherit;
  outline: none;
  border: none;
  /* padding: 15px 20px 15px 45px; */
  color:#222;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;  
  transition: background-color 0.3s;
}

.accordion-active, .accordion-btn:hover {
 color:#1764c4
}

.panel-content .sub_menu_list {
  padding: 15px 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  
}
.panel-content .sub_menu_list li {
    width: 24%;
    padding:0;
    margin:0;
    box-sizing: border-box;    
}
.panel-content .sub_menu_list li a {
    display: block;
    background-color: #f1f1f1;
    border-radius: 10px;
    font-size: 18px;
    color:#222;
    font-weight: 500;
    text-align: left;
    padding:0px 20px; 
}
.panel-content .sub_menu_list li a:hover {
    background-color: #f3f5f9;
    color:#1764c4;
}
.panel-content li .sub-smenuList {
    padding:0;
}
.panel-content li .sub-smenuList li{
    width: 100%;
    padding:0;
    margin:0;
    vertical-align: top;
}
.panel-content li .sub-smenuList li a {
    padding:0px 0 0 7px;
    background: url('/images/npps/sub/sitemap-dot.png') no-repeat 0 6px;
    border-radius: 0;    
    text-align: left;
    background-color: #fff;
    margin:0;
    padding:0;
    min-height:30px;
    word-break: keep-all;
    transition: 0.3s;
}
.panel-content .sub_menu_list li.has-menu a{
    background: #f1f1f1 url('/images/npps/sub/sitemap-arrow.png') no-repeat 95% 20px;
}
.panel-content .sub_menu_list li.has-menu a:hover{
    background: #f3f5f9 url('/images/npps/sub/sitemap-arrow1.png') no-repeat 95% 20px;
}
.panel-content .sub_menu_list li.has-menu .sub-smenuList li a {
    background: #fff url('/images/npps/sub/sitemap-dot.png') no-repeat 0 6px;
    font-size: 16px;
    color:#666;
    transition: 0.3s;
}
.panel-content .sub_menu_list li.has-menu .sub-smenuList li a:hover {
    background: #fff url('/images/npps/sub/sitemap-dot.png') no-repeat 0 6px;
    font-size: 16px;
    color:#222;
}
.panel-content {
  overflow: hidden;
  transition: max-height 0.3s;
  padding: 0px 0px 20px 0;
  margin-bottom:20px;
  border-bottom:1px #ddd dashed;
}



/* 모달팝업, 사이트맵 */

@media all and (max-width:1500px) { 
    .gnb-inner {
        width:100%;
    }
    .logo-area {
        font-size:36px;
        font-weight:600;
        color:#fff;   
    }
    nav {
        width:100%;
        display: flex;
        box-sizing: border-box;
        justify-content:space-between;
    }
    .nav-listarea li {
        display: inline-block;
        font-size: 28px;
        color:#fff;
        font-weight: 700;
        padding-left:85px;
        margin:0;    
    }
    

    .nav-listarea li {
        display: inline-block;
        font-size: 30px;
        color:#fff;
        font-weight: 700;
        padding-left:65px;
        margin:0;    
    }
    .nav-bg {
        width: 300px;
        text-align: center;
        vertical-align: top;
    }
    .nav-listarea li .nav-linkbg {
        box-sizing: border-box;
        padding:0;
        margin:0;
        width:76%;
    }
    .nav-slist {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding:0;   
    }
    .nav-slist li {
        box-sizing: border-box;
        padding-right:5%;
        border-bottom:0px #ccc dashed;
        margin-bottom:30px;
        padding-left:0;
        text-align: left;
    }
    .nav-listarea li:nth-child(2) .nav-linkbg  {
        padding-left:8%
    }
    .nav-listarea li:nth-child(3) .nav-linkbg  {
        padding-left:22%
    }
    .nav-listarea li:nth-child(4) .nav-linkbg  {
        padding-left:42%
    }
    .nav-listarea li:nth-child(5) .nav-linkbg  {
        padding-left:58%
    }
    .nav-slist li a {
        color:#222;
        font-size: 24px;
    }
    .nav-slist li a:hover {
        color:#1764c4;
    }
    .nav-slist li .smenu-pres {
        background: url('/images/npps/common/smenu-listarr.png')no-repeat 100% 10px;
        padding-right:20px;
    }
    .nav-slist li:hover .smenu-pres {
        background: url('/images/npps/common/smenu-listarr1.png')no-repeat 100% 10px;
        padding-right:20px;
    }
    .nav-slist li:nth-child(3),
    .nav-slist li:nth-child(6),
    .nav-slist li:nth-child(9),
    .nav-slist li:nth-child(12),
    .nav-slist li:nth-child(12) {
        margin-right:0;
    }

    .nav-comment {
        display: block;
        font-size: 14px;
        color:#666;
        padding:5px 0 10px 0;
        font-weight: 500;
        line-height: 1.3;
        word-break: keep-all;
    }
    .smenu-listarea {
        display: block;
        flex-wrap: wrap;
        background-color: #f0f7ff;
        padding:5px 10px 10px 15px; 
        border-radius: 10px;
        margin-bottom:20px;
        font-size: 18px;
    }
    .nav-slist li .smenu-listarea a {
        border-bottom:0px;
        font-size: 18px;
        color:#555;
        padding:0 10px 0px 7px;
        text-align: left;
        font-weight: 500;
        background: url('/images/npps/common/smenu-listdot.png') no-repeat 0 10px;
        transition: 0.3s;
    }
    .nav-slist li .smenu-listarea a:hover {
        color:#1764c4;
        background: url('/images/npps/common/smenu-listdot1.png') no-repeat 0 10px;
    }
    .smenu-listarea a.act{
        color:#1764c4
    }
    .smenu-listarea a.link {
        background: url('/images/npps/sub/instit-link.png') no-repeat 100% 3px;
        padding-right:20px;
        margin-right:10px;
    }

    footer {
        width:100%;
    }
    .footer-menu  ul {
        width:100%;
        margin:0 auto;
        padding:0 2%;
        box-sizing: border-box;
    }
    .footer-contain {
        width: 100%;
        padding-bottom:40px;
        padding:0 5%;
        margin:40px 0 0 0;
    }
}

@media all and (max-width:1300px) { 
    .gnb-inner {
        width:100%;
    }
    nav {
        width:100%;
        display: flex;
        box-sizing: border-box;
        justify-content:space-between;
    }
    .logo-area {
        font-size:32px;
        font-weight:600;
        color:#fff;   
    }
    .nav-list li {
        font-size: 26px;
        color:#fff; 
        padding-left:60px;
    }
    .nav-listarea li a {
        color:#fff
    }

    .nav-listarea li .nav-linkbg {
        box-sizing: border-box;
        padding:0;
        margin:0;
        width:74%;
    }
    .nav-slist {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding:0;   
    }
    .nav-slist li {
        box-sizing: border-box;
        padding-right:5%;
        border-bottom:0px #ccc dashed;
        margin-bottom:30px;
        padding-left:0;
        text-align: left;
    }
    .nav-listarea li:nth-child(2) .nav-linkbg  {
        padding-left:12%
    }
    .nav-listarea li:nth-child(3) .nav-linkbg  {
        padding-left:23%
    }
    .nav-listarea li:nth-child(4) .nav-linkbg  {
        padding-left:40%
    }
    .nav-listarea li:nth-child(5) .nav-linkbg  {
        padding-left:58%
    }
    .nav-slist li a {
        color:#222;
        font-size: 24px;
    }




    footer {
        width:100%;
    }
    .footer-menu  ul {
        width:100%;
        margin:0 auto;
        padding:0 5%;
        box-sizing: border-box;
    }

}

/* pad area */
@media all and (max-width:1280px) { 
    .gnb-inner {
        width:100%;
        box-sizing: border-box;
        padding:0 5%;
        height:60px;
        line-height:60px;
        border-bottom:1px rgba(255, 255, 255, 0.15) solid;
    }
    .gnb-list {text-align: right;}
    .gnb-list li {
        display: inline-block;
        padding-left:25px;
        font-size: 26px;
        font-weight: 600;
        color:#fff;
    }
    .gnb-list li a {color:#fff}
    .header-mobilearea {display: none ;}
    .header-pcarea {
        border-bottom:1px rgba(255, 255, 255, 0.20) solid;
        position: relative;
    }
    nav {
        width:100%;
        padding:0 5%;
        box-sizing: border-box;
        height:95px;
        display: flex;
        align-items: center;
        justify-content:space-between;
    }
    .sub-menu {
        display: none;
        position: absolute;
        border-top:1px #e5e5e5 solid;
        background-color:#fff;
        width: 100%;    
        box-shadow: 0 5px 6px rgba(0,0,0,0.2);
        left: 0;
        top: 100%;
        z-index:9999;
        text-align: center;
        }
    .nav-item {
        width: 100%;
        padding-top:30px;
        margin:0px auto;
    }
    .logo-area {
        font-size:40px;
        font-weight:600;
        color:#fff;   
    }
    .nav-listarea {
        padding-top:2px;
        font-size: 0;
    }

    .nav-listarea li {
        display: inline-block;
        font-size: 32px;
        color:#fff;
        font-weight: 700;
        padding-left:85px;
        margin:0;    
    }
    
    
    .nav-list li {
        font-size: 26px;
        color:#fff; 
        padding-left:40px;
    }
}

@media all and (max-width:1150px) { 
    .nav-list li {
        font-size: 24px;
        color:#fff; 
        padding-left:30px;
    }

}
@media all and (max-width:1024px) { 
    /* header mobile*/
    .header-pcarea {display: none;}
    .nf-header {
        display: block;  
        position: relative; 
        z-index: 90; top: 0; left: 0; right: 0; 
        width: 100%; 
        height: 110px;
        line-height: 110px;
        min-height: var(--header-height); 
        border-bottom:1px rgba(255, 255, 255, 0.20) solid;
    }
    .nf-toolbar {
        display:flex; 
        padding: 0 3%;
    }
    .nf-toolbar .logo {
        display:flex; 
        margin-right: auto;       
        transition: margin 0.3s ease-in-out;
        
    }
    .nf-toolbar .logo a {
        display:block; 
        color:#fff;
        font-size: 30px;
        font-weight: 600;
    }

    html.mobilemenu-open {
        overflow: hidden;
    }
    
    .mobilemenu-open {
        width: 29px;
        height: 25px;
        position: absolute;
        right: 3%;
        top: 40px;
        z-index: 1;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        text-align: right;
    }
    .mobilemenu-area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .mobilemenu-open span {
        display: block;
        width: 29px;
        height: 4px;
        background-color: #fff;
        border-radius: 50px;
    }
    .mobilemenu-open span:nth-child(2) {
        width: 19px;
        margin:5px 0
    }

    .mobilemenu-close {
        width: 40px;
        height: 40px;
        position: absolute;
        right:20px;
        top: 20px;
        background: url('/images/npps/common/side-close.png') no-repeat 50% 50%;
        cursor: pointer;
        z-index: 999;
    }
    
    #menu {
        width: 480px;
        height: 100%;
        max-height:100%;
        position: fixed;
        top: 0px;
        right: -482px;
        z-index: 10;
        background-color: white;
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
        overflow: auto;
    }
    
    #menu.open {
        right: 0px;
    }
    
    .page_cover.open {
        display: block;
    }
    
    .page_cover {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 4;
        display: none;
    }


    .btn-menu-burger {
        position: absolute; 
        bottom:30px;
        right:3%;
        cursor: pointer; 
        background-color: transparent; 
        width: 29px; 
        height: 22px;
    }
    .btn-menu-burger .menu-icon-burger {
        position: relative;   
        display: flex;
        flex-direction: column;
    }
    .btn-menu-burger .menu-icon-burger span {
        display: block;
        height: 4px; 
        border-radius:50px;
        background-color: #222; 
        transition: transform 250ms cubic-bezier(.2,.6,.3,1),width 250ms cubic-bezier(.2,.6,.3,1); 
        will-change: transform,width;
    }
    .btn-menu-burger .menu-icon-burger .top-bun, 
    .btn-menu-burger .menu-icon-burger .bottom-bun {
        width: 29px;                
        }
    .btn-menu-burger .menu-icon-burger .patty {
        width: 20px;  
    }
    .btn-menu-burger .menu-icon-burger .top-bun {
        transform: translateY(-6px);
    }
    .btn-menu-burger .menu-icon-burger .bottom-bun {
        transform: translateY(6px);
    }

    .btn-menu-burger.active .menu-icon-burger .top-bun, 
    .btn-menu-burger.active .menu-icon-burger .patty, 
    .btn-menu-burger.active .menu-icon-burger .bottom-bun { 
        background-color: #222;
    }
    .btn-menu-burger.active .menu-icon-burger .patty {
        opacity: 0;
    }
    .btn-menu-burger.active .menu-icon-burger .top-bun { 
        transform: translateX(3.5px) rotate(-135deg); 
        width: 28px;
    }
    .btn-menu-burger.active .menu-icon-burger .bottom-bun { 
        transform: translateX(3.5px) rotate(135deg); 
        width: 28px;
    }

    .nf-header-btns {
        display:flex;
        align-items: center; 
        margin: 24px 0 0 auto; 
        transition: margin 0.3s ease-in-out
    }
    .nf-header-btns .btn-header-profile {
        position: relative; 
        margin-right: 20px; 
        line-height: 1; 
        color: #2B2A29;
    }
    .nf-header-btns .btn-header-profile .user-name {
        font-size: 18px; 
        font-weight: 600; 
        margin-right: 5px;
    }

    .nf-header-btns .btn-header-logout {
        position: relative; 
        padding: 9px 0 8px; 
        line-height: 1; 
        color: #50B587; 
        font-weight: 600
    }
    .nf-header-btns .btn-header-logout::after {
        display: block; 
        content: ''; 
        position: absolute; 
        left: 0; 
        right: 24px; 
        bottom: 7px;
        height: 1px; 
        background: #50B587; 
        line-height: 0; 
        font-size: 0; 
        transition: background-color 150ms;
    }
    .nf-header-btns .btn-header-logout .svg-icon {
        width: 17px; 
        height: 16px; 
        margin-left: 4px; 
        vertical-align: -2px;
    }

    .nf-header-close {
        display: flex; 
        align-items: center;
        position:absolute; 
        z-index:10; 
        top:15px; 
        right:30px; 
        width:42px; 
        height:42px;
        transition: all 0.3;
    }
    .nf-header-close::before,
    .nf-header-close::after {
        content:""; 
        display:block; 
        position:absolute; 
        top:auto; 
        left:13px; 
        height:3px; 
        width: 18px; 
        background-color:#242424; 
        font-size:0; 
        line-height:0; 
        transform: rotate(0); 
        transition: all 0.5s;
    }
    .nf-header-close::before {
        transform: rotate(45deg);
    }
    .nf-header-close::after {
        transform: rotate(-45deg);
    }
    .nf-header .nf-header-close:hover::before,
    .nf-header .nf-header-close:hover::after {
        background-color:#1a1a1a;
    }

    /* mobile-side menu */
    .side-toparea {
        width:100%;
        padding:0 30px;
        height: 80px;
        line-height: 80px;
        background-color: #083b85;
        margin:0;
        border:0px;
    }
    .side-toplist {
        display: flex;
        width:100%;
    }
    .side-toplist span {
        display: inline-block;
        font-size: 18px;
        font-weight: 600;
        color:#fff;    
        padding-right:20px;
        text-transform: uppercase;
    }
    #sidemenu,
    #sidemenu ul,
    #sidemenu ul li,
    #sidemenu ul li a {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #sidemenu {
        width: 100%;
        font-family: 'PretendardGOV', sans-serif;
        padding:30px;
    }
    #sidemenu ul ul {
        display: none;
    }
    .align-right {
        float: right;
    }
    
    #sidemenu > ul > li > a {
        border:1px solid #c5c5c5; 
        margin-bottom:3px;
        border-radius:10px;
        font-size:24px;
        font-weight:600px;
        color:#666;
        background: #fff url('/images/npps/sub/lnb-on.png') no-repeat 90% 50%;
        transition: 0.2s;
        display: block;
        padding: 18px 20px ; 
    }
    #sidemenu > ul > li > a:hover,
    #sidemenu > ul > li.active > a,
    #sidemenu > ul > li.open > a {
        color: #fff; 
        background: #1764c4 url('/images/npps/sub/lnb-off.png') no-repeat 90% 50%;
        border-radius:10px;    
        border:1px solid #1764c4; 
    }
    #sidemenu > ul > li.open > a {
        color:#fff;
        box-shadow: none;
        border-radius: 10px;
        font-weight:600px;
    }
    #sidemenu > ul > li:last-child > a,
    #sidemenu > ul > li.last > a {
        border-bottom:1px solid #c5c5c5; 
        font-weight:600px;
    }
    #sidemenu ul ul li a {
        display: block;
        padding: 18px 20px ; 
        font-size: 20px;
        font-weight: 500;
        background: #f3f5f9;
        margin-bottom:3px;
        border-radius: 10px;
        color:#666;
    }
    #sidemenu ul ul li.open > a,
    #sidemenu ul ul li.active > a {
        background: #f3f5f9;
        color: #1764c4;  
        margin-bottom:0;  
    }
    #sidemenu ul ul li:first-child > a {
        box-shadow: none;
    }
    #sidemenu ul ul ul li:first-child > a {
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); */
        border-radius:0px;
    }

    #sidemenu ul ul ul {
        padding:0 0 10px 0;
        border-radius:0 0 10px 10px;
        margin-bottom:3px;
    }
    #sidemenu ul ul ul li a {
        padding: 0 0 10px 20px;
        font-size:16px;
        font-weight: 500;
        color:#666;
    }
    #sidemenu ul ul ul li a:hover {
        color:#000
    }
    #sidemenu > ul > li > ul > li:last-child > a,
    #sidemenu > ul > li > ul > li.last > a {
        border-bottom: 0;
    }
    #sidemenu > ul > li > ul > li.open:last-child > a,
    #sidemenu > ul > li > ul > li.last.open > a {
        border-bottom: 0px solid #32373e;
    }
    #sidemenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
        border-bottom: 0;
    }
    #sidemenu ul ul li.has-sub {
        border-radius: 10px;
        background: #f3f5f9 url('/images/npps/sub/lnb-on.png') no-repeat 90% 10%;
        margin-bottom:3px;

    }
    .link-site {
        width: 14px;
        height: 14px;
        padding-right:20px;
        background: url('/images/npps/common/link-site.png') no-repeat 100% 50%;
    }
    /* mobile-side menu */

    /* sidebar */
    .sidebar-wrap {
        position: fixed; 
        right: 0; 
        top: 150px; 
        bottom: 0; 
        z-index: 95; 
        display:none; 
        width: 0;
    }
    .sidebar-wrap.active {
        display: block; 
        width: 100%; 
        animation:sidebar-wrap-open 0.3s ease;
    } 
    .sidebar-wrap.active.inactive {
        width: 0; 
        animation:sidebar-wrap-close 0.3s;
    }
    @keyframes sidebar-wrap-open {
        from {width: 0;}
        to {width: 380px;}
    }
    @keyframes sidebar-wrap-close {
        from {width: 380px;}
        to {width: 0;}
    }
    .dimmed{ 
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        z-index: 2; 
        background: rgba(0,0,0,.5); 
    }
    .dimmed.on{ 
        display: block; 
    }

    .sidebar-wrap .sidebar {
        position: absolute; 
        top: 0px; right: 0px; 
        bottom: 0px; 
        width: 380px;
        transition: width 0.3s; 
        font-size:14px; 
        box-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 2px 6px 13px 0 rgb(0 0 0 / 7%); 
        background-color: #fff; 
        transform:translateX(100%);
    }
    .sidebar-wrap.active .sidebar {
        transform:translateX(0); 
        animation:sidebar-open 0.3s ease;
    }
    .sidebar-wrap.active.inactive .sidebar {
        animation:sidebar-close 0.3s ease-in-out;
    }
    @keyframes sidebar-open {
        from {transform:translateX(100%);}
        to {transform:translateX(0);}
    }
    @keyframes sidebar-close {
        from {transform:translateX(0);}
        to {transform:translateX(100%);}
    }
    .sidebar .sidebar-toolbar {
        min-height: 48px; 
        margin: 25px 0; 
        display: flex; 
        align-items: center;
    }
    .sidebar .sidebar-toolbar .title {
        margin-top: 13px; 
        font-size: 22px; 
        letter-spacing:0; 
        font-weight: 500; 
        color: #0d0c22; 
        font-family: 'PretendardGOV',sans-serif; 
        text-transform: capitalize;
    }
    .sidebar .sidebar-toolbar .btns {margin-left: auto;}

    .sidebar .sidebar-body { 
        position: absolute; 
        top:0; left:0; right:0; 
        bottom:0; padding: 30px; 
        overflow-x:hidden; 
        overflow-y:auto; 
        will-change:scroll-position; 
        -webkit-overflow-scrolling:auto; 
        -ms-overflow-style: none; 
    }
    .sidebar .sidebar-body::-webkit-scrollbar{-webkit-appearance:none;width:10px}
    .sidebar .sidebar-body::-webkit-scrollbar-thumb{
        border-radius:5px;
        background-color:rgba(116, 113, 117, 0.6);
        -webkit-box-shadow: 0 0 1px rgba(116, 113, 117, 0.6)
    }
    .sidebar-action {
        min-height: 30px; 
        padding: 0 25px; 
        margin: 0 0 0; 
        display: flex; 
        align-items: center;
    }
    .sidebar-body .title {
        margin-top: 13px; 
        padding-bottom: 20px; 
        font-size: 22px; 
        letter-spacing:0; 
        font-weight: 500; 
        color: #0d0c22; 
        text-transform: capitalize;
    }
    .sidebar-body .title > svg:first-child {
        margin-right: 6px; 
        width: 24px; 
        height: 24px; 
        vertical-align: -3px; 
        transform: scale(1.6);
    }
    .sidebar-close {
        position:absolute; 
        z-index:10; 
        top:35px; 
        right:30px; 
        width:40px; 
        height:40px; 
        transition: all 300ms ease;
    }

    .sidebar-close::before,
    .sidebar-close::after {
        display:inline-block; 
        content:""; 
        display:block; 
        position:absolute; 
        top:19px; 
        left:12px; 
        height:2px; 
        width: 60%; 
        background-color:#222227; 
        font-size:0; 
        line-height:0; 
        transform: rotate(0); 
        transition:all 0.2s ease-out;
    }
    .sidebar-close::before {
        transform: rotate(45deg);
    }
    .sidebar-close::after {
        transform: rotate(-45deg);
    }
    .sidebar .sidebar-close:hover::before,
    .sidebar .sidebar-close:hover::after {
        background-color:#111;
    }

    .sidebar-nav {
        display:block; 
        position:relative; 
        color:#0e0e19; 
        font-size:16px; 
        line-height:18px; 
        font-weight: 400; 
        letter-spacing:-0.48px;
    }

    .sidebar-nav .nav {
        position:relative; 
        height:100%; 
        padding-top:20px;
    }
    .sidebar-nav .nav>li ~ li {
        margin-top: 10px
    }
    .sidebar-nav .nav>li a {
        transition:all 0.3s; 
        -webkit-transition:all 0.3s;
    }
    .sidebar-nav .nav>li>:first-child,
    .sidebar-nav .nav>li>a {
        position:relative; 
        z-index:1; 
        display:block; 
        width:auto; 
        padding:10px 20px 10px 9px; 
        color:inherit; 
        margin-left: -8px; 
        margin-right: -8px; 
        border-radius: 8px; 
        transition: background .2s ease, width .2s ease;
    }
    .sidebar-wrap.active-2-level .sidebar-nav .nav>li>a {
        width:200px;
    }
    .sidebar-nav .nav>li>a:hover {
        background-color: #f6f6f6;
    }

    .sidebar-nav .nav>li.on>a {
        background:#e8fcf3; 
        color:#177340; 
        font-weight:400;
    }
    .sidebar-nav .nav>li>a .svg-arrow-right {
        position:absolute; 
        top:50%; 
        right:9px; 
        transform: translateY(-50%); 
        width: 10px; 
        height: 12px;
    }

    .sidebar-nav .nav>li>ul {
        display:none; 
        position:absolute; 
        top:20px; 
        left:auto; 
        right:0;
    }
    .sidebar-nav .nav>li.on>ul {
        display:block; 
        animation:builder-menu-ul-ani 0.7s ease;
    }
    @keyframes builder-menu-ul-ani {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .sidebar-nav .nav>li>ul {
        width: 200px;
    }
    .sidebar-nav .nav>li>ul>li ~ li {
        margin-top: 20px;
    }
    .sidebar-nav .nav>li>ul>li>a {
        position:relative; 
        display:block; 
        font-size: 18px; 
        font-weight:500; 
        padding: 20px; 
        border: 1px solid #f2f3f6; 
        border-radius: 12px; 
        box-shadow: 0 6px 14px rgb(0 0 0 / 0.06);
    }
    .sidebar-nav .nav>li>ul>li>a.on,
    .sidebar-nav .nav>li>ul>li>a.on:focus {
        color:#000;
    }
    .sidebar-nav .nav>li>ul>li.toggle>a.on,
    .sidebar-nav .nav>li>ul>li.toggle>a.on:focus {
        color:#0e0e19; 
        font-weight:normal;
    }
    .sidebar-nav .nav>li>ul>li.toggle>a::before {
        display:block; 
        content:""; 
        position:absolute; 
        left:0; 
        right:0; 
        top:auto; 
        bottom:-1px;
        width:100%; 
        height:1px; 
        background:#ebebeb;
    }
    .sidebar-nav .nav>li>ul>li.toggle>a::after {
        display:inline-block; 
        content:""; 
        position:absolute; 
        top:50%; 
        right:18px; 
        width:16px; 
        height:16px; 
        margin:-8px 0 0 -8px; 
        background-size:26px auto; 
        transition:all 0.2s ease-in-out; opacity:.6;
    }
    .sidebar-nav .nav>li>ul>li.toggle>a.on::before {
        background:#bcbccc;
    }
    .sidebar-nav .nav>li>ul>li.toggle>a.on::after {
        -webkit-transform:rotate(180deg); 
        transform:rotate(180deg); 
        opacity:1;
    }

    .sidebar-nav .nav>li>ul>li>ul {
        display:none; 
        padding:15px 0 15px 0;
    }
    .sidebar-nav .nav>li>ul>li>ul li>a {
        position:relative; 
        display:block; 
        padding:10px 10px; 
        font-size:14px;
    }
    .sidebar-nav .nav>li>ul>li>ul li>a::before {
        display:inline-block; 
        content:""; 
        position:absolute; 
        left:0; 
        top:19px; 
        width:2px; 
        height:2px; 
        background:#0e0e19; 
        opacity:.4;
    }
    .sidebar-nav .nav>li>ul>li>ul li>a.on, .sidebar-nav .nav>li>ul>li>ul li>a:focus {
        color:#1f7af7;
    }
    .sidebar-nav .nav>li>ul>li>ul li>a.on::before, .sidebar-nav .nav>li>ul>li>ul li>a:focus::before {
        background:#1f7af7;
    }
    .sidebar-nav .nav>li>ul>li>ul ul {
        padding:5px 0 5px 10px;
    }
    #lnbmenu {display: none;}
    .gnb-inner {
        width:100%;
        margin:0 auto;
        padding:0 3%;
        display: flex;
        justify-content:space-between;
        height:45px;
        line-height:45px;
    }
    .gnb-list {text-align: right;}

    nav {
        width:100%;
        margin:0 auto;
        height:130px;
        padding:55px 3% 0 3%;
        display: flex;
        justify-content:space-between;
        box-sizing: border-box;
    }
    .gallery-list ul {
        width:100%;
        border-bottom:1px #eee solid;
        padding:20px 0; 
        display: flex;
        flex-wrap: wrap;
        justify-content : space-between;
        gap: 15px 0
    }
    .gallery-list ul:last-child {
        border-bottom:1px #d5d5d5 solid;
    }
    .gallery-list ul li{
        box-sizing: border-box;   
        width: calc(25% - 15px); 
    }
    .gallery-info {
        padding-top:8px;
    }
    .gallery-info a {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .gal-infolist {
        padding-top:0px
    }
    .gal-infolist span {
        display: inline-block;
        font-size: 14px;
        color:#666;
        background: url('/images/npps/sub/gallery-bar.png') no-repeat 10px 45%;
        padding-left:20px;
    }
    .gal-infolist span:first-child {
        padding-left:0;
        background-image: none;
    }

    /* location */
    .location-area {
        display: flex;
        border-bottom:0px #e0e0e0 solid;
        padding-bottom:0px;
        margin-bottom:3%;
        justify-content:flex-start;
        flex-wrap: wrap;
    }
    .location-area h3 {
        font-size: 28px;
        width: 100%;
    }
    .loca-listarea span {
        display: inline-block;
        background: url('/images/npps/sub/loca-bar.png') no-repeat 0% 45%;
        color:#666;
        font-size:16px;padding-left:15px;
        margin-left:7px;
    }
    .loca-listarea span:last-child {
        color:#222
    }
    .loca-listarea span:nth-child(2) {
        background: none;
        padding-left:0px
    }
    .loca-listarea span:first-child {
        background: none;
        padding-left:0px;
        margin-left:0px;
    }
    .loca-listarea span.home {
        width: 15px;
        height: 15px;
        overflow: hidden;
        font-size: 0;
        background: url('/images/npps/sub/icon-home.png') no-repeat 0 55%;
        background-size: 13px;  
    
    }
    .location-area .loca-listarea {
        font-size: 15px;
        text-align: left;
        height: 100%;
    }

    footer {
        width:100%;
        padding:0  
    }
    .footer-contain {
        margin:20px 0 0px 0;
        padding-bottom:20px
    }
    .footer-menu  ul {
        width:100%;
        margin:0 auto;
        padding:0 5%;
        box-sizing: border-box;
    }
    .privacy{
        font-size: 14px;
        padding:15px 5% 25px 5%;
    }

}

/* mobile area */
@media all and (max-width:780px) {
    /* header mobile*/
    .header-pcarea {display: none;}
    .nf-header {
        display: block;  
        position: relative; 
        z-index: 90; top: 0; left: 0; right: 0; 
        width: 100%; 
        height: 66px;
        line-height: 65px;
        min-height: 66px; 
        border-bottom:1px rgba(255, 255, 255, 0.20) solid;
    }
    .nf-toolbar {
        display:flex; 
        padding: 0 5%;
    }
    .nf-toolbar .logo {
        display:flex; 
        margin-right: auto;       
        transition: margin 0.3s ease-in-out;
        
    }
    .nf-toolbar .logo a {
        display:block; 
        color:#fff;
        font-size: 26px;
        font-weight: 600;
    }

    html.mobilemenu-open {
        overflow: hidden;
    }
    
    .mobilemenu-open {
        width: 29px;
        height: 25px;
        position: absolute;
        right: 3%;
        top: 22px;
        z-index: 1;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        text-align: right;
    }
    .mobilemenu-area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .mobilemenu-open span {
        display: block;
        width: 29px;
        height: 4px;
        background-color: #fff;
        border-radius: 50px;
    }
    .mobilemenu-open span:nth-child(2) {
        width: 19px;
        margin:5px 0
    }

    .mobilemenu-close {
        width: 18px;
        height: 18px;
        position: absolute;
        right:20px;
        top: 30px;
        background: url('/images/npps/common/side-close.png') no-repeat 50% 50%;
        background-size: 18px auto;
        cursor: pointer;
        z-index: 999;
    }
    .side-toparea {
        padding:0px 0 0 20px;
    }
    .side-toplist {
        padding-right:30px;
    }

    .side-toplist span {
        display: inline-block;
        font-size: 18px;
        font-weight: 600;
        color:#fff;    
        padding-right:10px;
        text-transform: uppercase;
    }
    #sidemenu {
        height: 100%;
    }
    #sidemenu,
    #sidemenu ul,
    #sidemenu ul li,
    #sidemenu ul li a {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #sidemenu {
        width: 100%;
        font-family: 'PretendardGOV', sans-serif;
        padding:5%;
    }
    #sidemenu ul ul {
        display: none;
    }
    .align-right {
        float: right;
    }
    #sidemenu > ul > li > a {
        border:1px solid #c5c5c5; 
        margin-bottom:3px;
        border-radius:10px;
        font-size:22px;
        font-weight:600px;
        color:#666;
        background: #fff url('/images/npps/sub/lnb-on.png') no-repeat 90% 50%;
        transition: 0.2s;
        display: block;
        padding: 15px 20px ; 
    }
    #sidemenu > ul > li > a:hover,
    #sidemenu > ul > li.active > a,
    #sidemenu > ul > li.open > a {
        color: #fff; 
        background: #1764c4 url('/images/npps/sub/lnb-off.png') no-repeat 90% 50%;
        border-radius:10px;    
        border:1px solid #1764c4; 
    }
    #sidemenu > ul > li.open > a {
        color:#fff;
        box-shadow: none;
        border-radius: 10px;
        font-weight:600px;
    }
    #sidemenu > ul > li:last-child > a,
    #sidemenu > ul > li.last > a {
        border-bottom:1px solid #c5c5c5; 
        font-weight:600px;
    }
    #sidemenu ul ul li a {
        display: block;
        padding: 15px 20px ; 
        font-size: 18px;
        font-weight: 500;
        background: #f3f5f9;
        margin-bottom:3px;
        border-radius: 10px;
        color:#666;
    }
    #sidemenu ul ul li.open > a,
    #sidemenu ul ul li.active > a {
        background: #f3f5f9;
        color: #1764c4;  
        margin-bottom:0;  
    }
    #sidemenu ul ul li:first-child > a {
        box-shadow: none;
    }
    #sidemenu ul ul ul li:first-child > a {
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); */
        border-radius:0px;
    }

    #sidemenu ul ul ul {
        padding:0 0 10px 0;
        border-radius:0 0 10px 10px;
        margin-bottom:3px;
    }
    #sidemenu ul ul ul li a {
        padding: 0 0 10px 20px;
        font-size:15px;
        font-weight: 500;
        color:#666;
    }
    #sidemenu ul ul ul li a:hover {
        color:#000
    }
    #sidemenu > ul > li > ul > li:last-child > a,
    #sidemenu > ul > li > ul > li.last > a {
        border-bottom: 0;
    }
    #sidemenu > ul > li > ul > li.open:last-child > a,
    #sidemenu > ul > li > ul > li.last.open > a {
        border-bottom: 0px solid #32373e;
    }
    #sidemenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
        border-bottom: 0;
    }
    #sidemenu ul ul li.has-sub {
        border-radius: 10px;
        background: #f3f5f9 url('/images/npps/sub/lnb-on.png') no-repeat 90% 10%;
        margin-bottom:3px;

    }
    
    .location-area {
        display: flex;
        border-bottom:0px #e0e0e0 solid;
        padding-bottom:0px;
        margin-bottom:3%;
        justify-content:flex-start;
        flex-wrap: wrap;
    }
    #lnbmenu {display: none;}
    .nf-content {
        max-width: 100%;
        padding:0 3%;
        margin: auto; transition: margin-left 0.3s;
    }
    .content-right{
        flex-grow: 1;
        margin-left:0px;
        padding:20px 0 60px 0;
    }
    
    /* footer */
    footer {
        width:100%;
    }
    .footer-menu {
        width:100%;
        padding:15px 3%;
        text-align: center;
    }
    .footer-menu  ul {padding: 7px 10px}
    .footer-menu  ul li {
        display: inline-block;
        padding: 3px 10px;
        margin-left:0px;
        font-size: 14px;
        background-image: none;
        font-weight: 500;
    }

    .footer-contain {
        width: 100%;
        margin-top:3%;
        padding:0 3%;
        font-size: 14px;
        flex-wrap: wrap;
    }

    .f-logo {
        width: 160px;
        height: 32px;
        background: url('/images/npps/common/f-logo.png') no-repeat 0 50%;
        font-size: 20px;
        color:#666;
        font-weight: 500;
        font-family: 'ROKG_R',sans-serif;
        padding-left:40px;
        margin-bottom:10px
    }
    .footer-rightarea {
        vertical-align: bottom;
        text-align: left;
    }
    .side-logoarea {
        padding-top:30px;
        display: flex;
        padding-bottom:0px;
    }
    .wa-icon {
        display: inline-block;
        width: 28px;
        height: 23px;
        background: url('/images/npps/common/wa-logo.png') no-repeat 50% 50%;
        font-size: 0;
    }
    .copyright {
        font-size: 13px;
        text-align: left;
    }

    .footer-leftarea {
        width:100%
    }
    .footer-rightarea {
        width:100%;
        padding-bottom:3%
    }

}

@media all and (max-width:640px) {
    /* 기상정보 */
    .pollen-list li {
        padding: 30px 15px 10px 15px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    .pollen-list li span{
        display: block;
        width: 75px;
        height: 75px;
        margin-bottom:5px;
        border-radius: 50%;
        overflow: hidden;
    }
    .bsTable table {
        width: 800px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .web-linklist li {
        display: inline-block;
        background-color: #fff;
        border:1px #c8c8c8 solid;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
        border-radius: 50px;
        height: 100%;
        line-height: 1.4;
        padding:5px 20px;
        font-size: 16px;
        font-weight: 600;
        color:#222;
        text-align: center;
        margin-right:5px;
        margin-bottom:10px
    }

    /* 민방위 */
    .civil-listarea {
        width: 100%;
        padding-top:40px;
    }
    .civil-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .civil-list li {
        width: 80%;
        margin-right:0%;
        margin-bottom:3%;
        padding-right:0%;
        text-align: center;
        border-bottom:2px #d9d9d9 dashed;
        background: none;
    }
    .civil-list li:last-child {
        margin-right:0;
        padding-right:0;
        background: none;
        border-bottom:0
    }
    .civil-list li h4 {
        display: inline-block;
        background-color: #1764c4;
        color:#fff;
        font-size: 16px;
        font-weight: 600;
        padding:10px 25px;
        border-radius: 50px;
        text-align: center;
        margin-bottom:20px
    }
    .civil-list li p {
        font-size: 15px;
        color:#555;
        line-height: 1.3;
        padding-bottom:10px
    }

    .civil-list1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .civil-list1 li {
        width: 80%;
        margin-right:0%;
        padding-right:0%;
        margin-bottom:3%;
        text-align: center;
        border-bottom:2px #d9d9d9 dashed;
        background: none;
    }
    .civil-list1 li:last-child {
        margin-right:0;
        margin-bottom:0;
        padding-right:0;
        background: none;
        border-bottom:0
    }
    .civil-list1 li h4 {
        display: inline-block;
        background-color: #1764c4;
        color:#fff;
        font-size: 18px;
        font-weight: 600;
        padding:10px 25px;
        border-radius: 50px;
        text-align: center;
        margin-bottom:20px
    }
    .civil-list1 li p {
        font-size: 16px;
        color:#555;
        line-height: 1.3;
        padding-bottom:10px
    }

    .downloard-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
    }
    .downloard-list li {
        width: 48%;
        box-sizing: border-box;
        padding:15px 30px 15px 15px;
        border:1px #dfdfdf solid;
        margin-right:2%;
        margin-bottom:2%;
        font-size: 16px;
        font-weight: 600;
        border-radius: 10px;
        color:#666;
        background: #fff url('/images/npps/temp/btn-down2.png') no-repeat 93% 18px;
        transition: 0.3s;
    }
    .downloard-list li a {
        color:#666
    }
    .downloard-list li:hover {
        border:1px #222 solid;
        background: #222 url('/images/npps/temp/btn-down02.png') no-repeat 93% 20px;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
    }
    .downloard-list li:hover a {
        color:#fff
    }
    .downloard-list li:last-child {
        margin-right:0
    }
    .downloard-list li:nth-child(2) {
        margin-right:0
    }

    /* 입력폼 TABLE */
    .bbs-view {
        width: 100%;
        border-top:2px #222 solid;
        border-bottom:0px #ddd solid;
        padding:0px 0
    }
    .bbs-view li {
        display: flex;
        flex-wrap: wrap;
        padding:15px 0;
        border-bottom:1px #ddd solid
        /* border-bottom:1px #ccc solid */
    }

    .info-titarea {
        font-size: 16px;
        font-weight: 600;
        color:#222;
        width: 100%;
    }
    .info-titarea1 {
        font-size: 16px;
        font-weight: 600;
        color:#222;
        width: 100%;
    }
    .info-titarea1.lh {
        font-size: 16px;
        font-weight: 600;
        color:#222;
        padding-top:4px
    }
    .info-formarea {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-top:5px;        
    }
    .info-formarea1 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .info-formarea input, .info-formarea select .info-formarea button{
        height:40px;
        border-radius: 5px;
        margin-bottom:5px;
    }
    .form-radioarea {
        padding-top:10px;
    }
    .form-radioarea1 {
        padding-top:10px;
    }
    .info-formarea.ta-c {
        justify-content: center;
    }
    .info-address .info-formarea input {
        width:77%;
        margin-bottom:5px;
        font-size: 14px;
        color:#666
    }
    .info-address .info-formarea input:last-of-type {
        width:77%;
        margin-bottom:0px
    }
    .info-address .info-formarea .btn-address {
        height: 40px;
        width:20%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
    }
    .info-address .info-formarea .btn-address:hover {
        background-color: #054788;
        border: 1px #054788 solid;
    }



    .robot-area .robot-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
    }
    .robot-area .robot-list li{
        margin:0 15px 0 0 !important;
        display: inline-block;
        height:18px !important;
        line-height:18px !important;
        vertical-align: middle !important;
        padding:0 0 5px 0;
        font-weight: 600; border-bottom:0px
    }
}
@media all and (max-width:480px) {
    .nf-toolbar .logo a {
        display:block; 
        color:#fff;
        font-size: 22px;
        font-weight: 600;
    }
    .mobilemenu-open span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #fff;
        border-radius: 50px;
    }
    .mobilemenu-open span:nth-child(2) {
        width: 16px;
        margin:4px 0
    }
    #menu {
        width: 80%;
        height: 100%;
        position: fixed;
        top: 0px;
        right: -81%;
        z-index: 10;
        background-color: white;
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }
    .mobilemenu-close {
        width: 18px;
        height: 18px;
        position: absolute;
        right:20px;
        top: 20px;
        background: url('/images/npps/common/side-close.png') no-repeat 50% 50%;
        background-size: 18px auto;
        cursor: pointer;
        z-index: 999;
    }
    .side-toparea {
        padding:20px;
    }
    .side-toplist {
        padding-right:30px;
        display: flex;
        flex-wrap: wrap;
    }

    .side-toplist span {
        display: inline-block;
        font-size: 15px;
        font-weight: 500;
        color:#fff;    
        padding-right:20px;
        text-transform: uppercase;
    }
    
    #sidemenu > ul > li > a {
        border:1px solid #c5c5c5; 
        margin-bottom:3px;
        border-radius:10px;
        font-size:20px;
        font-weight:600px;
        color:#666;
        background: #fff url('/images/npps/sub/lnb-on.png') no-repeat 90% 50%;
        transition: 0.2s;
        display: block;
        padding: 15px 20px ; 
    }
    
    /* footer */
    footer {
        width:100%;
    }
    .footer-menu {
        width:100%;
        padding:15px 3%;
        text-align: center;
    }
    .footer-menu  ul {padding: 5px 7px}
    .footer-menu  ul li {
        display: inline-block;
        padding: 3px 10px;
        margin-left:0px;
        font-size: 13px;
        background-image: none;
        font-weight: 600;
    }

    .footer-contain {
        width: 100%;
        margin-top:3%;
        padding:0 3%;
        font-size: 13px;
        flex-wrap: wrap;
    }

    .f-logo {
        width: 160px;
        height: 32px;
        background: url('/images/npps/common/f-logo.png') no-repeat 0 50%;
        font-size: 18px;
        background-size: 28px;
        color:#666;
        font-weight: 500;
        font-family: 'ROKG_R',sans-serif;
        padding-left:33px;
        margin-bottom:5px
    }
    .footer-rightarea {
        vertical-align: bottom;
        text-align: left;
    }
    .side-logoarea {
        padding-top:30px;
        display: flex;
        padding-bottom:0px;
    }
    .wa-icon {
        display: inline-block;
        width: 28px;
        height: 23px;
        background: url('/images/npps/common/wa-logo.png') no-repeat 50% 50%;
        font-size: 0;
    }
    .copyright {
        font-size: 13px;
        text-align: left;
    }

    .footer-leftarea {
        width:100%
    }
    .footer-rightarea {
        width:100%;
        padding-bottom:3%
    }
    .radio svg {
        position: absolute; 
        top: 50%; left: 4px;
         width: 10px; 
         height: 10px; 
         margin-top: -5px; 
         pointer-events: none;
    }
}