@charset "UTF-8";

.header .container { display: -webkit-box; display: -ms-flexbox; margin:0 auto; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 1300px; }
.header.active .gnb_area { -webkit-transition: .2s; transition: .2s; }
.gnb_area .nav { display: -webkit-box; display: -ms-flexbox; display: flex; }
.gnb_area .logo { display: block; background: transparent; height: 80px; line-height: 80px; padding: 0; color: #f1f1f1; font-size: 20px; letter-spacing: -0.065em; font-weight: 400}
.gnb_area .logo strong{ font-size: 40px; color: #00ddc4; font-family: 'Fredoka One', cursive; font-weight: 200; margin:0 0 0 8px; letter-spacing: 0; vertical-align: top;}
.gnb_area .gnb_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; }
.gnb_area .pop_title, 
.gnb_area .pop_close { display: none; }
.gnb_area .headerRgt{ margin-top: 30px}
.gnb_area .headerRgt a, .gnb_area .headerRgt button{ display: inline-block; width: 32px; height: 30px; font-size: 0; background: transparent; vertical-align: top;}
.gnb_area .headerRgt a:before, .gnb_area .headerRgt button:before{ content: ''; display: block; background: url(../images/common/icon2020.png) no-repeat 0 -19px; width: 20px; height: 21px; margin: 5px auto 0}
.gnb_area .headerRgt button:before{ background-position: -23px -19px; margin-top: 0}

.topmenu { display: -webkit-box; display: -ms-flexbox; display: flex; }
.topmenu .depth1 { display: -webkit-box; display: -ms-flexbox; display: flex; }
.topmenu .depth1 > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; }
.topmenu .depth1 > a span { display: block; white-space: nowrap; font-size:22px; padding:9px 28px 0; font-weight: 500; position: relative; letter-spacing: -.03em; }
.topmenu .depth1.active > a { color:#d8ff00}
.topmenu .depth1.active .submenu { opacity: 1; visibility: visible; max-height: 1030px; -webkit-transition-delay: .2s; transition-delay: .2s; }
.topmenu .submenu { -webkit-transition: 0.35s, max-height 1s cubic-bezier(0.13, 0.67, 0.59, 0.98); transition: 0.35s, max-height 1s cubic-bezier(0.13, 0.67, 0.59, 0.98); opacity: 0; visibility: hidden; overflow: hidden; max-height: 0; position: absolute; left: 0; top: 80px; z-index: 20; width: 100%; background-color: #fff; text-align: left; border-bottom:1px solid #c3c3c3}
.topmenu .title_area { width:184px; padding:28px 20px 90px 0; position: absolute; text-align: right; -webkit-transform: translateX(-650px); transform: translateX(-650px); left: 50%; top: 0; color: #fff; }
.topmenu .title_area .title {  font-family:'NanumSquareRound'; font-size: 26px; font-weight: 800; }
.topmenu .title_area span { display: block; margin-top:7px; color:#707070; font-weight:300; }
.topmenu .title_area:after { content:'NCPMS'; display: block; font-family: 'Fredoka One', cursive; font-weight: 200; font-size: 74px; color:#ebebeb; position: absolute; bottom:0; right:20px }
.topmenu .depth2:before { content: ''; width: 1px; height: 100%; background: #dcdcdc; position: absolute; left: 204px; top: 0; }
.topmenu .depth2 { max-width: 1096px; min-height: 21rem; margin: 0 auto; position: relative; overflow-y: auto; padding:20px 0 20px 204px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.topmenu .depth2 > li { -webkit-box-flex: 0; margin:0 10px 25px; position: relative; width:calc(16.66% - 20px) }
.topmenu .depth2 > li > a { position: relative; display: block; border: 1px solid #ddd; padding: 0 10px; color: #3b3b3e; letter-spacing: -.5px; font-weight: 400; line-height: 43px;}
.topmenu .depth2 > li > a:hover { background-color: #0079c0; border-color: #0079c0; color: #fff; -webkit-transition: .25s; transition: .25s; font-weight: 500; }
.topmenu .depth2 > li > a:after { display: inline-block; font-family: 'xeicon'; content: '\e93f'; color: #323232; position: absolute; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); right: 5px; top: 50%;}
.topmenu .depth2 > li > a:hover:after { color:#fff}
.topmenu .depth3 { margin-top:13px; }
.topmenu .depth3 > li > a { color: #747474; display: block; padding-left:10px; line-height: 25px; font-weight: 300; letter-spacing: -.5px; position: relative; }
.topmenu .depth3 > li > a::before { content: ''; display: block; width:3px; height:3px; position: absolute; left: 0; top:11px; background-color: #a2a2a2; }
.topmenu .depth3 > li > a:hover { color: #0079c0; font-weight: 700; }

#wrap.allmenu { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
.allmenu .pop_title { display: block; color: #cff2fc; font-size: 20px; font-weight: 500; padding: 14px 30px; background: #0079c0;}
.allmenu .pop_title span { font-family: 'Fredoka One', cursive; font-weight: 200; font-size:38px; color:#fff}
.allmenu .pop_close { display: block; position: absolute; right: 20px; top: 20px; font-size:0; color: #242427; }
.allmenu .pop_close:before { content:'\e9af'; font-family: 'xeicon'; color:#fff; font-size:35px;}
.allmenu .header { position: static; }
.allmenu .header .gnb_area .gnb_wrap { display: block; background:rgba(0,0,0,.5); position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 11; }
.allmenu .header .gnb_area .gnb_wrap .nav { display: block; width: 100%; position: relative; height: 100%; background: #fff; }
.allmenu .topmenu { display: block; height: calc(100% - 74px); overflow: auto; margin: 0 auto; }
.allmenu .topmenu .submenu { opacity: 1; visibility: visible; max-height: inherit; width: calc(100% - 180px); position: static; border-bottom:0; background: none; }
.allmenu .topmenu .depth1 { position: relative; }
.allmenu .topmenu .depth1 > a { display: block; width:180px; color: #323232; transition: .2s; background: #cff2fc;}
.allmenu .topmenu .depth1 > a span { font-weight: 700; text-align: right; font-size:25px; font-family:'NanumSquareRound'; padding: 20px 15px 0 0; }
.allmenu .topmenu .depth2 { padding: 0; margin: 0; max-width: none; min-height: auto; }
.allmenu .topmenu .title_area, 
.allmenu .topmenu .depth2:before { display: none; }
.allmenu .topmenu .depth2 > li { margin:20px 10px 5px }
.allmenu .topmenu .depth3 > li > a { font-size:14px}

.topmenu .depth2 > li > a:after { content: ''; background: url(../images/common/icon2023.png) no-repeat -135px 0; width: 6px; height: 10px; -webkit-transform: none; transform: none; top: 18px}
.topmenu .depth2 > li > a:hover:after { background-position: -135px -10px;}

/* 2023.08.11 jbh */
.topmenu * {box-sizing: unset}
.topmenu .depth1.active .submenu { opacity: 1; visibility: visible; max-height: 1200px; -webkit-transition-delay: .2s; transition-delay: .2s; }

/* 2025 01 08 */
.topmenu .depth2 > li > a{ line-height: 1.3; height: 45px; display: flex; align-items: center;}