#wrap {min-width:1400px;position:relative;padding:0;margin:0;background:#fff;} /* #wrap:not(.sbg) {overflow-x:hidden;} */ #header {position:absolute;left:0;top:0;width:100%;z-index:999;transition:all 0.2s ease-out;} #wrap.sub #header {position:relative;} #header.fix {position:fixed !important;left:0;top:0;width:100%;} #header.active {background:#fff;} #logo {position:absolute;left:70px;top:1.7rem;padding:0;margin:0;z-index:999;font-size:1.5rem;font-weight:700;color:#555;line-height:1;} #logo img{width:225px;} #header #logo .logo-b {display:none;} #header.fix #logo .logo-w, #header.active #logo .logo-w{display:none;} #header.fix #logo .logo-b, #header.active #logo .logo-b {display:inline-block;} #gnb .topmn > a{line-height:80px;height:80px;} #gnb a.ico-sitemap {width:100px;text-align:center;background:#0004 url(../img/ico-sitemap.png) no-repeat 50% 50%;} #gnb a.ico-sitemap:hover {background-color:var(--sub-color);} #gnb a.ico-sch:not(#mobile-search) {width:80px;background:var(--point-color1);text-align:center;} #gnb a.ico-sch:hover {background:var(--main-color) !important;} #gnb a.ico-sch:before {content:"\f002";color:#fff;font-family:FontAwesome;transition:all ease-out 0.2s;font-size:1.25rem;} #gnbmn {position:relative;width:100%;padding:0;margin:0;z-index:99;} #gnbmn a {position:relative;} #gnbmn a[target=_blank] > span:after {content:"\f08e";display:inline-block;margin-left:5px;font-family:fontAwesome;font-weight:200;font-size:.9rem;vertical-align:middle;opacity:.5;} #gnbmn ul {display:flex;justify-content:center;} #gnbmn ul > li > a {display:block;padding:0 6rem;line-height:80px;font-size:1.25rem;letter-spacing:-0.0125rem;text-align:center;font-weight:400;color:#fff;position:relative;} #gnbmn ul > li > a:after {content:"";display:block;position:absolute;bottom:0px;left:50%;transform:translateX(-50%);width:0%;height:3px;background-color:var(--main-color);transition:all 0.3s;} #gnbmn ul > li > a:hover:after, #gnbmn ul > li.on > a:after, #gnbmn ul > li.active > a:after {width:100%;background:var(--grd);} #gnbmn ul > li > a:hover, #gnbmn ul > li.on > a, #gnbmn ul > li.active > a {color:var(--main-color) !important;} #gnbmn .title {float:left;width:250px;padding:10px 0;word-break:keep-all;;} #gnbmn .tit {display:inline-block;font-size:2.2rem;font-weight:var(--font-exbold);line-height:1;color:#fff;margin:15px 0;} #gnbmn .txt {font-size:1.1rem;font-weight:400;line-height:1.4;color:#fff;} #gnbmn .txt em {color:#ffc;font-weight:100;font-style:italic;} #gnbmn .tit:after{content:"";width:100%;height:5px;display:block;background:var(--grd);margin-top:5px;} #gnbmn .depth2 {width:1600px;min-height:260px;position:absolute;top:80px;left:50%;transform:translateX(-50%);padding:20px 0;text-align:left;visibility:hidden;opacity: 0;} #gnbmn .depth2.on {opacity: 1; visibility: visible; transition:all .6s;} #gnbmn .depth2 > ul {float:left;width:calc(100% - 250px);height:380px;overflow-y:auto;padding-right:20px;margin-bottom:30px;} #gnbmn .depth2 > ul::-webkit-scrollbar{width: 5px;background-color: var(--main-color);} #gnbmn .depth2 > ul::-webkit-scrollbar-track{width:5px; background-color:#ccc;} #gnbmn .depth2 > ul::-webkit-scrollbar-thumb{width:5px; -webkit-box-shadow: none; background-color:var(--main-color);} #gnbmn .depth2 > ul:after {content:"";float:none;clear:both;} /*[s] 2차메뉴 너비 조정*/ #gnbmn .depth2 > ul > li {float:left;width:20%;padding:10px 0 20px 10px;} #gnbmn .depth2 > ul > li:nth-child(5n+1) {clear:both;} #gnbmn ul.depth1 > li:nth-child(1) .depth2 > ul > li{width:25%;} #gnbmn ul.depth1 > li:nth-child(1) .depth2 > ul > li:nth-child(5n+1) {clear:unset;} #gnbmn ul.depth1 > li:nth-child(1) .depth2 > ul > li:nth-child(4n+1) {clear:both;} /*[e] 2차메뉴 너비 조정*/ #gnbmn .depth2 > ul > li > a {display:block;border:1px solid #9aaab5;color:#222;font-weight:700;background:#fff;line-height:50px;font-size:1.1rem;text-align:center;border-radius:5px;transition:all .2s;} #gnbmn .depth2 > ul > li > a > span {position:relative;z-index:2;} #gnbmn .depth2 > ul > li:hover > a, #gnbmn .depth2 > ul > li > a:hover, #gnbmn .depth2 > ul > li > a:focus, #gnbmn .depth2 > ul > li > a.on {background:url(../img/mv-bg01.png) no-repeat 0% 20% / cover;font-weight:900;color:#fff !important;} #gnbmn .depth2 > ul > li:hover > a:before, #gnbmn .depth2 > ul > li > a:before{content:"";width:100%;height:100%;background:linear-gradient(-90deg, #09246399, #01BAF899);position:absolute;top:0;left:0;transition:all .2s;opacity:0;} #gnbmn .depth2 > ul > li:hover > a:before, #gnbmn .depth2 > ul > li > a:hover:before, #gnbmn .depth2 > ul > li > a:focus:before, #gnbmn .depth2 > ul > li > a.on:before {opacity:1;} /*메뉴 커스텀*/ #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li {width:50%;display:flex;align-items:center;position:relative;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a{border:0;background:0;color:var(--sub-color) !important;font-size:1.7rem;font-weight:900;text-align:left;line-height:1.2;position:static;padding-left:20px;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:before, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:before{background:0;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a span, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a span{background:linear-gradient(to bottom, transparent 94%, #39A6F4 0) left center no-repeat;background-size:0;transition:all .3s;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:hover span, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:hover span{background-size:100%;color:var(--main-color);} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:before, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li:before{content:"";flex-shrink:0;width:270px;height:180px;position:relative;border-radius:5px;background:#ccc;display:block;background-position:50% 50%;background-size:cover;filter:brightness(.9);} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:before, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:before{content:"GKNU";width:270px;height:180px;position:absolute;top:20px;left:0;border-radius:5px;background:#39A6F4cc;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:3rem;color:#fff;opacity:0;transition:all .3s;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:hover:before, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:hover:before{opacity:1;top:0;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:nth-child(1):before{background-image:url(../img/gnb-img02-1.png);} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:nth-child(2):before{background-image:url(../img/gnb-img02-2.png);} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:nth-child(3):before{background-image:url(../img/gnb-img02-3.png);} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:nth-child(4):before{background-image:url(../img/gnb-img02-4.png);} #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li:nth-child(1):before{background-image:url(../img/gnb-img03-1.png);} #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li:nth-child(2):before{background-image:url(../img/gnb-img03-2.png);} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:after, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:after{font-size:1.25rem;color:#333;font-weight:400;display:block;line-height:1.5;white-space:pre;margin-top:15px;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:nth-child(1) > a:after{content:"국립경국대학교 입학준비생들을 위한 \A 입학안내 홈페이지로 이동합니다!";} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:nth-child(2) > a:after{content:"국립경국대학교 학생들을 위한 \A 취업안내 홈페이지로 이동합니다!";} #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li:nth-child(1) > a:after{content:"지역발전과 인재양성의 요람, \A 국립경국대학교의 학과정보를 확인해보세요!";} #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li:nth-child(2) > a:after{content:"지역발전과 인재양성의 요람, \A 국립경국대학교의 대학원정보를 확인해보세요!";} #gnbmn ul.depth1 > li:nth-child(2) ul.depth3, #gnbmn ul.depth1 > li:nth-child(3) ul.depth3{display:none;} /*메뉴 커스텀2 - 학사정보:융합전공/마이크로디그리/나노디그리*/ /* #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(1) ul.depth3, #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(2) ul.depth3, #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(3) ul.depth3{display:none;} #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(1) > a, #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(2) > a, #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(3) > a{background-color:rgb(0 0 0 / 3%);} */ #gnbmn ul.depth3 {margin:5px 0 0 0;font-size:1rem;/* display:none; */} #gnbmn ul.depth3 li a:before {content:"";display:inline-block;width:3px;height:3px;background:#555;margin:12px 10px 0 0;vertical-align:top;border-radius:50%} #gnbmn ul.depth3 li a.on, #gnbmn ul.depth3 li a:hover {color:var(--main-color) !important;text-decoration:underline} #id_gnb_bg {position:absolute;width:100%;left:0;top:120px;z-index:1;background:#ecf0f3;visibility:hidden;opacity: 0;} #id_gnb_bg.on {opacity: 1; visibility: visible; transition:opacity .6s, visibility .6s;} .gnb_bg {width:100%;padding:0;margin:0;background:var(--sky-bg);box-shadow:0px 2px 20px rgba(0,0,0,0.3);} .gnb_bg:before, .gnb_bg:after {content:"";position:absolute;left:0;top:0;display:block;width:calc(50% - 570px);height:100%;background:#162663cc;} .gnb_bg:before {background:url(../img/sv-bg.png) no-repeat 0 0/cover;} #wrap.topbnr-on #id_gnb_bg {top:250px;} #mobile-navicon, #mobile-search {display:none;width:60px;height:60px;line-height:60px;font-size:1.2rem;position:absolute;left:0;text-align:center;background:var(--sub-color);z-index:999;color:#fff;} #mobile-search {background:var(--point-color1);left:unset;right:0;} #mobile-search.ico-sch:before {font-size:1.2rem !important;} .mm-menu{max-width:300px;} .mm-menu.mm-current{z-index:999;overflow-y:scroll;} .mm-menu.mm-current::-webkit-scrollbar{width: 5px;background-color: var(--sub-color);} .mm-menu.mm-current::-webkit-scrollbar-track{width:5px; background-color:#000c;} .mm-menu.mm-current::-webkit-scrollbar-thumb{width:5px; -webkit-box-shadow: none; background-color:var(--sub-color);} #mm-blocker{background:rgba(3, 2, 1, 0.8);z-index:99;} .mm-menu.mm-current .depth2 > .title{display:none;} .mm-menu.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu .mm-listview li.mm-opened.mm-vertical > .mm-panel{background:rgba(0, 0, 0, 0.3);} .mm-listview > li > a, .mm-listview > li > span{line-height:25px;padding:10px;} .mm-menu .depth2 .mm-listview > li > a, .mm-menu .depth2 .mm-listview > li > span{padding-left:20px;} .mm-menu .depth3.mm-listview > li > a, .mm-menu .depth3.mm-listview > li > span{padding-left:25px;} .mm-menu .depth3.mm-listview > li > a:before, .mm-menu .depth3.mm-listview > li > span:before{content:"-";margin-right:5px;} .mm-vertical .mm-listview > li > .mm-next, .mm-listview > li.mm-vertical > .mm-next{height:45px;} @media only screen and (max-width:1900px){ #gnbmn ul.depth1 > li > a{font-size:1.2rem;padding:0 1.7rem;} .top-btn-wrap a:not(.btn-d){padding-right:8px;margin-right:8px;} .top-btn-wrap .lang-convert > a:after{margin-left:8px;} } @media only screen and (max-width:1620px){ #gnbmn .title{width:300px;} #gnbmn .depth2 > ul{width:calc(100% - 300px);} .gnb_bg:before, .gnb_bg:after {width:calc(50% - 520px);} #gnbmn .depth2{width:1560px;} } @media only screen and (max-width:1600px){ .d_width, .c_width {width:1200px;} #wrap {min-width:1200px;} #gnb {width:auto;} #gnbmn .title{width:220px;} #gnbmn .tit{font-size:2rem;} #gnbmn .txt{font-size:1rem;} .gnb_bg:before, .gnb_bg:after {width:calc(50% - 395px);} #logo{top:1.7rem;left:20px;} #logo img{width:180px;} #header.fix #logo{top:1.4rem;} #header .topwrap{padding:0 20px;} #gnb a.ico-sch:not(#mobile-search), #header.fix #gnb a.ico-sch:not(#mobile-search){width:40px;height:40px;line-height:40px;border-radius:5px;margin-right:10px;} #gnb a.ico-sch:not(#mobile-search):before, #header.fix #gnb a.ico-sch:not(#mobile-search):before{font-size:1rem;} .top-btn-wrap{font-size:.9rem;} #gnbmn ul.depth1{margin-right:315px;justify-content:flex-end;} #gnbmn ul.depth1 > li > a{font-size:1.1rem;padding:0 1.57rem;font-weight:500;} #header.fix #gnbmn ul.depth1 > li > a{font-size:1rem;} #gnbmn .depth2{width:1200px;min-height:220px;} #gnbmn .depth2 > ul{width:calc(100% - 250px);height:300px;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul{margin-top:-20px;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li{padding:20px 0 0 10px;} #gnbmn .depth2 > ul > li{padding:5px 0 0 10px;} #gnbmn .depth2 > ul > li > a{line-height:45px;font-size:1.1rem;} /*[s] 2차메뉴 너비 조정*/ #gnbmn .depth2 > ul > li {width:25%;} #gnbmn .depth2 > ul > li:nth-child(5n+1) {clear:unset;} #gnbmn .depth2 > ul > li:nth-child(4n+1) {clear:both;} /*메뉴커스텀2 #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(3){clear:both;} #gnbmn ul.depth1 > li:nth-child(4) .depth2 > ul > li:nth-last-child(2){clear:unset;}*/ /*[e] 2차메뉴 너비 조정*/ #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li:before, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li:before, #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:before, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:before{width:180px;height:140px;font-size:2rem;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a{font-size:1.4rem;} #gnbmn ul.depth1 > li:nth-child(2) .depth2 > ul > li > a:after, #gnbmn ul.depth1 > li:nth-child(3) .depth2 > ul > li > a:after{font-size:.9rem;line-height:1.3;} #gnbmn ul.depth3{font-size:.9rem;} #wrap.topbnr-on .main-container{padding-top:129px;} } @media only screen and (max-width:1490px){ #gnb a.ico-sitemap{width:90px;} #gnbmn ul.depth1 > li > a{padding:0 1.1rem;} } @media only screen and (max-width:1240px){ .d_width, .c_width {width:960px;} #wrap {min-width:960px;} #gnb, #header .topwrap {animation:none;} #gnbmn #menu-pc {display:none;} #logo {position:static;line-height:60px;} #gnbmn{height:auto !important;} #gnb .topmn{width:250px;top:0;right:0;justify-content:right;} .top-btn-wrap > a{line-height:40px;} #header .topwrap{width:calc(100% - 250px);justify-content:left;padding:0;} #header .topwrap a{margin:0 10px 0 0;} #header .topwrap .snswrap a{margin:0;} #header .snswrap ul{right:auto;left:50%;transform:translateX(-50%);} #gnb .topmn a.ico-sitemap, #gnb .topmn a.ico-sch{display:none;} #logo{text-align:center;} #header > .d_width, #gnb, #gnbmn{position:static;} #mobile-navicon, #mobile-search {display:block !important;} .lang-list{left:unset;right:5px;} #header.fix #gnb{background:#fff;} #header.fix #gnb .topmn{display:none;} #header.fix #mobile-navicon, #header.fix #mobile-search {top:0 !important;} #wrap.topbnr-on #gnb .topmn{top:130px;} #wrap.topbnr-on #mobile-navicon, #wrap.topbnr-on #mobile-search{top:170px;} .pager a{height:4px;} } @media only screen and (max-width:1023px){ .d_width, .c_width {width:740px;} #wrap {min-width:740px;} } @media only screen and (max-width:767px){ .va_mo {display:block;} .va_pc {display:none;} .d_width, .c_width {width:auto;margin:0 20px;} #wrap {min-width:320px;} #header .topwrap{display:none;} #header.fix #gnb{margin:0;} .top-btn-wrap{font-size:.825rem;} .top-btn-wrap > a{line-height:30px;} #gnb .topmn, .top-btn-wrap{width:100%;justify-content:right;} #wrap.sub #gnb .topmn{top:-30px;} #wrap.sub #mobile-navicon, #wrap.sub #mobile-search{top:0;} #wrap.topbnr-on #gnb .topmn{top:100px;} #wrap.topbnr-on #mobile-navicon, #wrap.topbnr-on #mobile-search{top:130px;} #wrap.topbnr-on .main-container{padding-top:100px;} } @media only screen and (max-width:576px){ #mobile-navicon, #header.fix #mobile-navicon, #mobile-search, #header.fix #mobile-search{width:50px;height:50px;line-height:50px;} #logo{line-height:50px;} #logo img{width:150px;} } @media only screen and (max-width:415px){ .d_width, .c_width {margin:0 10px;} } #header.fix .topwrap{display:none !important;} #header.fix #topbnr{position:absolute;top:-999px;} #header.active .topwrap{background:var(--sub-color);} #header.fix #logo {top:1rem} #header.fix #gnb, #header.active #gnb{background: rgb(255 255 255 / 90%);backdrop-filter: blur(5px);box-shadow: 0 0 15px #0002;transition:all .4s;} #header.fix #gnbmn ul > li > a, #header.active #gnbmn ul > li > a{color:#111} #header.fix #gnbmn ul > li > a {line-height:70px;font-size:1.1rem;} #header.fix #gnbmn .depth2, #header.fix #id_gnb_bg {top:70px !important;} #header.fix #gnb a.ico-sch:not(#mobile-search){width:70px;color:#121314;} #header.active #gnb a.ico-sch{color:#121314;} #header.fix #gnb .topmn > a{line-height:70px;height:70px;} #header.fix #gnb .topmn, #header.active #gnb .topmn{color:#333;} #header.active #gnb .topmn .top-btn-wrap > a:after, #header.fix #gnb .topmn .top-btn-wrap > a:after{background:#0004;} #header.fix #gnb .topmn .top-btn-wrap .lang-convert a:after, #header.active #gnb .topmn .top-btn-wrap .lang-convert a:after{color:#0004;}