@charset "UTF-8";

nav {position:relative; /*width: 100%; top:-40px*/} 
nav.active .navText { opacity: 1; padding-left: 20px; transition: all .15s } 
nav .navIcon { width: 40px; height: 40px; border-radius:12px}
#gnb {width:100%; position: relative; /* box-shadow:1px 1px 5px  rgba(0, 0, 0, 0.06) */} 
#gnb>ul{display:flex; flex-wrap:wrap}
#gnb>ul>li.nav-item{/* width:20%; height:80px; border-right: 1px solid #EFF2EE; background: #ffffff;*/ }
#gnb>ul>li.nav-item:last-child{border-right:0; border-radius:0 5px 5px 0;}
#gnb>ul>li.nav-item:nth-child(2){ border-radius:5px 0 0 5px;}
#gnb>ul>li.nav-item>a{/* display:flex; align-items:center; flex-direction:column */ padding:0 25px; height:60px; }
#gnb>ul>li.nav-item>a .navText{font-size:1rem; line-height:58px}
nav .navIcon1 {background:url('../../../../images/ygpa/com/cmm/nav1.png') center no-repeat #ffffff; background-size:25px 25px}
nav .navIcon2 {background:url('../../../../images/ygpa/com/cmm/nav2.png') center no-repeat #ffffff; background-size:25px 25px}
nav .navIcon3 {background:url('../../../../images/ygpa/com/cmm/nav3.png') center no-repeat #ffffff; background-size:25px 25px}
nav .navIcon4 {background:url('../../../../images/ygpa/com/cmm/nav4.png') center no-repeat #ffffff; background-size:25px 25px}
nav .navIcon5 {background:url('../../../../images/ygpa/com/cmm/nav5.png') center no-repeat #ffffff; background-size:25px 25px}
nav .member-icon {background:#2F66FE; width:40px; height:40px; border-radius:50%; text-align:center; line-height: 40px; color: #ffffff;;}

#gnb>ul>li>a:hover .navIcon1, #gnb>ul>li.active>a .navIcon1 {background:url('../../../../images/ygpa/com/cmm/nav1_on.png') center no-repeat #ffffff; background-size:25px 25px}
#gnb>ul>li>a:hover .navIcon2, #gnb>ul>li.active>a .navIcon2 {background:url('../../../../images/ygpa/com/cmm/nav2_on.png') center no-repeat #ffffff; background-size:25px 25px}
#gnb>ul>li>a:hover .navIcon3, #gnb>ul>li.active>a .navIcon3 {background:url('../../../../images/ygpa/com/cmm/nav3_on.png') center no-repeat #ffffff; background-size:25px 25px}
#gnb>ul>li>a:hover .navIcon4, #gnb>ul>li.active>a .navIcon4 {background:url('../../../../images/ygpa/com/cmm/nav4_on.png') center no-repeat #ffffff; background-size:25px 25px}
#gnb>ul>li>a:hover .navIcon5, #gnb>ul>li.active>a .navIcon5 {background:url('../../../../images/ygpa/com/cmm/nav5_on.png') center no-repeat #ffffff; background-size:25px 25px}

/* Main CSS */
.navbar-nav .nav-link { padding: 5px; text-decoration: none; font-size: 0.9em; font-weight: 400; display: block; transition: .15s ease; } 
.navbar-nav .nav-item { margin: 0; position: relative; } 
.navbar-nav>.nav-item:after { content: ""; position: absolute; width: 100%; height: 2px; background: #1D7759; bottom: 0px; transition: 400ms ease; transform: scaleX(.5); opacity: 0; } 
#gnb>ul>li.nav-item:hover, #gnb>ul>li.nav-item.active {/* background:#FBFFFA; */ background:transparent; color:#1D7759}
#gnb>ul>li.nav-item:hover>.nav-link, #gnb>ul>li.nav-item.active>.nav-link{color:#188752}
#gnb>ul>li.nav-item:hover:after, #gnb>ul>li.nav-item:focus:after, #gnb>ul>li.nav-item.active:after { transform: scaleX(1); opacity: 1; } 

.navbar-toggler {position:absolute; right:10px; top:15px; padding: 0.1rem 0.45rem; cursor: pointer; font-size: 1.5rem; background: none; outline: none; border: 1px solid #636363; border: none; border-radius: 3px; transition: 0.15s linear; display: none; /* margin-left: auto; margin-right: 20px; */ } 
.navbar-toggler:active{top:15px}
.navbar-toggler {
  flex-direction: column;
  justify-content: space-between;
  height: 25px;
  width: 40px;
}
.navbar-toggler .line {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: #1a1a1a;
}
/* Navbar options (bg options) */
.bg-primary { background: #188752} 
.bg-primary .navbar-toggler,
.bg-primary .nav-link,
.bg-primary .utils-search { color: #fff; } 
.bg-primary .nav-item:after { background: #fff; } 
.bg-dark { background: #363636; } 
.bg-dark .navbar-toggler,
.bg-dark .nav-link,
.bg-dark .utils-search { color: #fff; } 
.bg-light { background: #fff } 
.bg-light .navbar-toggler,
.bg-light .nav-link,
.bg-light .utils-search { color: #363636; } 

.bg-transparent { background-color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url(https://images.pexels.com/photos/4492129/pexels-photo-4492129.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1920); background-repeat: no-repeat; background-position: center top; background-size: cover; } 
.bg-transparent .navbar-toggler,
.bg-transparent .nav-link,
.bg-transparent .utils-search { color: #fff; } 
.bg-transparent .nav-item:after { background: #fff; } 

@media (min-width: 992px){
 .bg-blur { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background: rgba(255, 255, 255, 0.6); z-index: 999; } 
 .bg-blur .navbar-toggler,
 .bg-blur .nav-link,
 .bg-blur .utils-search { color: #363636; } 
 .bg-blur .nav-item:hover>.nav-link { color: #188752; } 
 .bg-blur .nav-item:after { background: #188752; } 
 }

/* Common Hover */
.bg-blur .nav-item:hover>.nav-link { color: #188752; } 
.bg-blur .nav-item:after { background: #188752; } 
.bg-light .nav-item:hover>.nav-link,
.bg-light-2 .nav-item:hover>.nav-link,
.bg-dark .nav-item:hover>.nav-link { color: #188752; } 
.bg-light .nav-item:after,
.bg-light-2 .nav-item:after,
.bg-dark .nav-item:after { background: #188752; } 
.bg-light-2 { background: #fff; } 
.bg-light-2 .navbar-toggler,
.bg-light-2 .nav-link,
.bg-light-2 .utils-search { color: #636363; } 
.bg-light-2 .nav-item:after { display: none; } 

/* Dropdown CSS */
.nav-item .dropdown { width: 190px; display: block; position: absolute; top: 60px; min-width:180px; transition: .15s; padding: 10px; opacity: 0; visibility: hidden; left:50%; transform: translateX(-50%); border: 1px solid #e7e7e7; background: #fff; border-radius: 5px; z-index: 999; box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.06); } 
.nav-item .dropdown .nav-link { color: #636363; } 
.nav-item .dropdown .dropdown { top: 0; transform: translateX(30%);}
/* .navbar-nav > .nav-item:last-child .dropdown .dropdown { top: 0; left:100px;} */
.nav-item .dropdown .dropdown:before { top: 10px; left: -10px; border: 5px solid transparent; border-right-color: #000; } 
.nav-item .dropdown:before { content: ""; position: absolute; top: -10px; left: 10px; border: 5px solid transparent; border-bottom-color: #000; display: none; } 
.nav-item .dropdown .nav-item:not(:last-child) { padding-bottom: 5px; } 
.nav-item .dropdown>.nav-item:hover>.nav-link { color: #188752; } 
.nav-item:hover>.dropdown, .nav-item:focus-within>.dropdown{ opacity: 1; visibility: visible; /* transform: translateY(0px); */} 
.nav-item:focus { background:#ffffff; color:#aaa } 
.nav-item:hover>a::before { transform: rotate(90deg); } 
.nav-close { margin-left: auto; margin-top: 10px; display: none; } 
.nav-close .btn-nav-close { border: 0; outline: 0; background: transparent; font-size: 2.5rem; cursor: pointer; width: 30px; height: 30px; border: 1px solid #363636; border-radius: 50%; display: flex; align-items: center; justify-content: center; } 
.nav-close .btn-nav-close .close-btn { display:inline-block;*display:inline; } 
.nav-close .btn-nav-close .close-btn:after { display: inline-block;content: "\00d7"; font-size: 1.5rem; font-weight: 500; line-height: 45px }
.nav-close .btn-nav-close:hover,
.nav-close .btn-nav-close:focus { background: #363636; color: #fff; } 


#sitemapModal .x-mark { padding: 0px 10px; background-color: #EFEFEF; border-radius: 2px }
#sitemapModal .modal-content { width: 50%; }
#sitemapModal .navWrap { align-items: flex-start }
#sitemapModal .dep1 { width: 100%; font-size: 1.125rem; font-weight: 600; }
#sitemapModal .dep2 { margin-top: 10px; padding-top: 10px; border-top: 2px solid #636363; font-size: 1rem; display: flex; }
#sitemapModal .dep2 > li { width: 30% }
#sitemapModal .dep3 { font-weight: 400 }
#sitemapModal .dep3 > li:not(li:first-child) { margin-top: 10px }
#sitemapModal a:hover { color: #92D050 }

.mobileWrap { display: none }

/* Responsive (navbar alignments options) */
@media (min-width: 992px) {
 .navbar-brand,
 .navbar-utils { flex: auto; } 
 .navbar-nav { flex: 2; justify-content: center; } 
 .navbar-utils { text-align: right; } 
 .navbar-right .navbar-brand,
 .navbar-right .navbar-utils { flex: initial; } 
 .navbar-right .navbar-nav { justify-content: flex-end; margin-right: 20px; } 
.navbar-nav { order: 1; justify-content: flex-start; } 
.navbar-brand { order: 2; } 
.navbar-utils { order: 3; } 
 .navbar-right .dropdown .dropdown { left: unset; right: calc(100% + 20px); border-right: 1px solid rgba(0, 0, 0, 0.15); } 
 }

/* Nav Option (Logo Center) */
@media (min-width: 992px){
 .navbar-left .navbar-brand { text-align: right; } 
 .navbar-left .navbar-toggler { display: block; margin-right: 0; } 
 .navbar-left .navbar-nav { background: #ffffff; flex-direction: column; z-index: 99999; padding: 0 20px; opacity: 0; transition: 400ms ease; /* Sidebar */
 position: fixed; left: 0; top: 0; width: 300px; height: 100%; overflow-y: auto; box-shadow: 0px 0px 0 2000px rgba(0, 0, 0, 0.5); transform: translateX(-300px); } 
 .navbar-left .navbar-nav .nav-link { margin: 10px 0; color: #636363; display: flex; align-items: center; } 
 .navbar-left .navbar-nav>.nav-item:first-child { margin-top: 20px; } 
 .navbar-left .navbar-nav>.nav-item:last-child { margin-bottom: 20px; } 
 .navbar-left .navbar-nav .nav-item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 
 .navbar-left .navbar-nav .nav-item:hover>.nav-link { color: #188752; } 
 .navbar-left .navbar-nav>.nav-item:after { display: none; } 
 .navbar-left .navbar-nav .nav-close { display: block; } 
 .navbar-left .navbar-nav.active { max-height: initial; opacity: 1; transform: translateX(0); left: 0; box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5); } 
 .navbar-left .nav-item .dropdown { padding: 0; position: initial; max-height: 0; width: initial; border: none; box-shadow: none; } 
 .navbar-left .nav-item .dropdown .dropdown { border: none; } 
 .navbar-left .nav-item .dropdown:before { display: none; } 
 .navbar-left .nav-item:hover>.dropdown, .navbar-left .nav-item:focus>.dropdown { opacity: 1; visibility: visible; transform: translateY(0px); max-height: initial; } 
 .navbar-left .nav-item.icon a:before { top: unset; right: 0; } 
 }

/* Responsive navbar */
@media (max-width: 991px){
 .navbar-toggler { display: flex; } 
 .navbar-nav { background: #ffffff; flex-direction: column; z-index: 0; padding: 0 20px; opacity: 0; transition: 400ms ease; /* Sidebar */
 position: fixed; left: -300px; top: 0; width: 100%; height: 100%; overflow-y: auto; transform: translateX(-300px); display:none;  } 
 .navbar-nav .nav-link { padding: 10px 0; color: #636363; display: flex; align-items: center; }
 .navbar-nav>.nav-item:first-child { margin-top: 20px; } 
 .navbar-nav>.nav-item:last-child { margin-bottom: 20px; } 
 .navbar-nav .nav-item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 
 .navbar-nav .nav-item:hover>.nav-link { color: #188752; } 
 .navbar-nav>.nav-item:after { display: none; } 
 .navbar-nav .nav-close { display: block; } 
 .navbar-nav.active { max-height: initial; opacity: 1; transform: translateX(0); left: 0; box-shadow: 0px 0px 0 10000px rgba(0, 0, 0, 0.5); overflow-x: hidden; z-index:9999 } 
 .nav-item .dropdown { padding: 0; position:relative; max-height: 0; width: auto; top:auto; transform:translateY(0); border: none; box-shadow: none; left: 0px } 
 .nav-item .dropdown .dropdown { border: none; } 
 .nav-item .dropdown:before { display: none; } 
 .nav-item:hover>.dropdown, .nav-item:focus>.dropdown { opacity: 1; visibility: visible; transform: translateY(0px); max-height: initial; padding:10px; background:#f7f9fa; } 
 .nav-item.icon a:before { top: unset; right: 0; transform: translateY(0px); } 
 .header-top .r-top{display:none}
 
 #gnb>ul>li.nav-item{width:100%; height:auto; border-right:0; background: #ffffff;}
 #gnb>ul>li.nav-item>a{flex-direction:row}
 
 .nav-item.icon>a:before { content: ""; position: absolute; right: 15px; top: calc(50% + 0px); transform: translateY(-50%); border: 4px solid transparent; border-left-color: inherit; transition: 0.15s linear; } 
 .nav-item.icon:hover>a::before { transform: rotate(90deg); }
 .nav-item .dropdown .dropdown{left:0; padding:0 10px; background-color:#eaeaea}
 
 .mobileWrap { display: flex; padding: 20px; align-items: center; justify-content: space-between; margin-top: auto; }
 .mobileWrap > button { font-size: .8rem; width: 30%; height: 28px; border: 1px solid #1D7759; color: #1D7759; border-radius: 15px;  }
 }