@charset "utf-8"; body{font-family:'SCDream'; font-size:0.8rem;} /* Skip 메뉴 */ #skipArea, #skipArea ul {height:0; width:100%} #skipArea a {position:absolute; top:-9999px; left:0; z-index:100; width:100%; height:1.5rem; background-color:#000; color:#fff; line-height:1.5rem; opacity:0.6; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60)} #skipArea a:focus, #skipArea a:hover, #skipArea a:active {top:0} .container { position: relative; width:100%; max-width: 70rem; margin:0 auto;} .container:after { content:""; display:block; clear:both; } /* 슬라이드 공용 */ .slick-slider{transition:all ease-in-out .3s; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;} .slick-slide{ display:none; height:100%; min-height:1px; vertical-align:middle;} .slick-list{ overflow:hidden;} .slick-list.dragging{ cursor:pointer;} .slick-initialized .slick-slide{ display:inline-block;} .slick-arrow.slick-hidden { display:none;} .slick-current { opacity:1; display:block;} /* 스크롤 */ #container ::-webkit-scrollbar { width: 5px; height: 5px;} #container ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; } #container ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; } /* 레이아웃 및 헤더 */ #wrap {position:relative; font-family:'SCDream'; overflow: hidden;} /** Header **/ Animation #header #nav #gnb, #header #nav #gnb ul li a span:after, #header #nav #gnb ul li ul {transition :all 0.4s ease; -webkit-transition :all 0.4s ease;} #slide_map {display:none;} #header {position:fixed; left:0; top:0; width:100%; height:4.75rem; z-index:1100; background:rgba(7,22,51,0.6); transition: all 0.15s; -webkit-transition: all 0.15s;} #header.gnbOpen { background:#fff;} #header .headerWrap {position:relative;width:100%;max-width: 96rem;margin: 0 auto;} .sub #header {position:absolute;} /* 로고 */ #header h1.logo {position:absolute;left:2.8rem; top:1.25rem; z-index:1000;} #header h1.logo a {display:block; background:url('/images/web/grad/common/logo.png') no-repeat center /contain; width:12.05rem; height:2.35rem;} #header.gnbOpen h1.logo a { background:url('/images/web/grad/common/logo_b.png') no-repeat center /contain; } #header h1.logo a span {position:absolute; left:-10000px; top:0; line-height:1px; font-size:1px; overflow:hidden; text-indent:-30000px;} #header .mob_btn {display:none;} /* user Service */ #header .userSvice{position:absolute; width:6.5rem; height:6.5rem; left:0; top:0; background:#abab00; z-index:1102 ;} #header .userSvice a{color:#fff; text-align:center; display:block; font-size:0.7rem;} #header .userSvice a::before{content:url('/images/web/grad/common/ico_usersvic.png'); display:block; margin:1rem 0 0.5rem;} /* top util */ #header .toputil{position:absolute;top: 1.5rem;right: 2.6rem;z-index:15;} #header .toputil .toputil_box {max-width:1500px; margin:0 auto; position:relative;} #header .toputil button{cursor: pointer;} /* user */ #header .user_btn {position:absolute; right: 6rem; top: 0;} #header.gnbOpen .user_btn a { color:#2e2e2e;} #header .user_btn a:hover, #header .user_btn a:focus{color:#adefff;} #header .user_btn a {display:block; font-size:1.5rem; color:#fff;} /* 검색 */ #header .search_btn {position:absolute;right: 3rem;top: 0;} #header .search_btn button {display:block; font-size:1.5rem; color:#fff;} #header.gnbOpen .search_btn button { color:#2e2e2e;} #header .search_btn button:hover, #header .search_btn button:focus{color:#adefff;} #header .search {display:none;position:absolute;width:15rem;padding:1rem;right: 2.5rem;top: 3.25rem;z-index:200;background:url('/images/web/grad/common/bg_tmn.png'); border-radius:0 0 1rem 1rem;} #header .search h2 {color:#fff; font-size:1.25rem; margin-bottom:0.5rem; font-family: 'SCDream';} #header .search #header .search_wrap{position: relative; display:block;} #header .search input {height:2rem;line-height:2rem;padding-left:5%;width:80%;font-size:0.7rem;color:#555;border:none;border-radius: 0.3rem;} #header .search input::-webkit-input-placeholder {color:#555;} #header .search a.btn_top_sch {position:absolute; right:1rem; bottom:0.8rem; width:15%; height:2rem; text-indent:-10000em; background:#0460ac url('/images/web/grad/common/btn_search.png') no-repeat center;} #header .search_close {position:absolute;right: 0.5rem;top: -3.1rem;} #header .search_close button {display:block;width: 2rem;height:2rem;border-radius:2rem;text-indent:-10000em;background:#fff url('/images/web/grad/common/btn_sch_close.png') no-repeat center;} #header .search_btn button{transition:all 0.3s ease; -ms-transition:all 0.3s ease; -webkit-transition:all 0.3s ease;} /* 사이트맵 */ /* .sitemap_btn {position:absolute;right: 0;top: 0;} .sitemap_btn a{display:block; font-size:1.5rem; color:#fff;} #header.gnbOpen .sitemap_btn a { color:#2e2e2e;} .sitemap_btn a:hover, .sitemap_btn a:focus{color:#adefff;} .sitemap_btn a span{display:block; float:left; width:70%; margin:3px 0; height:3px; background:#0175b2;} .sitemap_btn a span:first-child{width:90%; margin:0;} .sitemap_btn a span:last-child{width:90%; margin:0;} .sitemap_btn a:hover span{width:100% !important;} .sitemap_btn a, .sitemap_btn a span{transition:all 0.3s ease; -ms-transition:all 0.3s ease; -webkit-transition:all 0.3s ease;} */ #header .sitemap_btn { position: absolute; content: ''; top: 0.6rem; right: 0.7rem; width: 1.2rem; height: 0.9rem; z-index: 100;}/* 풀메뉴 버튼 */ #header .sitemap_btn a { display:block; height:100%; } #header.gnbOpen .sitemap_btn span {background:#000;} #header.gnbOpen .sitemap_btn p {background:#000;} #header .sitemap_btn span{position: absolute; content: ''; width: 100%; height: 2px; top: 0; left: 0; background: #fff;} #header .sitemap_btn span:nth-of-type(1){top: 0;} #header .sitemap_btn span:nth-of-type(2){width: 75%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.15s; -webkit-transition: all 0.15s;} #header .sitemap_btn span:nth-of-type(3){bottom: 0; top: auto;} #header .sitemap_btn p{position: absolute; content: ''; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff;} #header .sitemap_btn:hover span:nth-of-type(2), #header .sitemap_btn:focus span:nth-of-type(2){width: 100%;} #header .sitemap_btn:hover p, #header .sitemap_btn:focus p{display: none;} /* gnbblind */ #gnbblind { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 999;} /* web navigation */ /* gnb common */ #nav {position: relative;} #gnb {position: relative; z-index: 1;} #gnb li a {display: block; position: relative; word-break: break-all;} #gnb li a[target='_blank'] > span:after {content: "\e980"; display: inline-block; padding-left: 0.25rem; font-family: 'xeicon';} #gnb .depth01 {max-width: 100%;height: 4.75rem;padding: 0 13rem 0 17.5rem;} #gnb .depth01 > ul {display: flex; width: 100%;} #gnb .depth01 > ul > li {flex: 1; position: relative;} #gnb .depth01 > ul > li > a {display: flex;justify-content: center;align-items: center;height: 4.75rem;font-size: 1rem;color: #fff;font-weight: 500;text-align: center;} #header.gnbOpen #gnb .depth01 > ul > li > a { color: #0a0a0a; } #gnb .depth01 > ul > li > a > span{display: block;max-height: 4.75rem; } #gnb .depth01 > ul > li > a > .dotBox {display: flex; align-items: center; position: absolute; left: 50%; top: calc(2.8rem + 1px); transform: translateX(-50%); z-index: 2; opacity: 0;} #gnb .depth01 > ul > li > a > .dotBox .dot {width: 0.3rem; height: 0.3rem; border-radius: 50%; margin: 0 0.15rem; background: #1b6dd1;} #gnb .depth01 > ul > li > a > .dotBox .dot.md {width: 0.3rem; height: 0.3rem;} #gnb .depth02 > ul > li > a{position: relative; z-index: 1;} #gnb .depth02 > ul > li.dep > a {padding-right: 1.55rem !important;} #gnb .depth02 > ul > li.dep > a:before {content: '\e941'; font-family: 'xeicon'; font-size: 0.6rem; position: absolute; right: 0.5rem; top: 0.65rem;} #gnb .depth03 { position: relative; background: #efefef; border-radius:1rem;} #gnb .depth04 {display: none;} /* gnb common : active */ #gnb .depth01 > ul > li.on > a{ font-weight: 600; } #gnb .depth01 > ul > li > a, #gnb .depth01 > ul > li > .dotBox {transition: 0.1s;} #gnb .depth01 > ul > li.on > a:before {width: 100%; left: 0;} #gnb .depth01 > ul > li.on > a > .dotBox {opacity: 1;} #gnb .active > .depth03 {display: block;} #gnb .depth03 > ul > li > a:hover > span, #gnb .depth03 > ul > li > a:focus > span {text-decoration: underline;} /* gnb : oneDown */ #nav.oneDown .depth01 > ul > li {z-index: 1;} #nav.oneDown .depth01 > ul > li > a:before {display: none;} #nav.oneDown .depth02 { position: relative; width: 120%;border-radius: 1rem;background: #fff;box-shadow: 3px 3px 1px rgba(0,190,255,0.27);position: absolute;left: -5%;top: calc(4.75rem - 1px); opacity: 0; visibility: hidden; padding:0 1rem;} #nav.oneDown .depth02:before { content: ''; display: block; width: 1.8rem; height: 0.6rem; background: url('/images/web/grad/common/one_down_ico.png') no-repeat center / contain; position: absolute; top: -0.3rem; left: calc(50% - 0.9rem);} #nav.oneDown .depth02 .tit {display: none;} #nav.oneDown .depth02 .inner > ul {padding: 0.75rem 0;} #nav.oneDown .depth02 .inner > ul > li > a { font-size: 0.9rem; font-weight:600; padding: 0.2rem 0;} #nav.oneDown .depth02 .inner > ul > li > a:after {content:'\e942'; font-family:'xeicon'; font-size:1.2rem; color:#333; position:absolute; top: calc(50% - 0.5rem); right:0; } #nav.oneDown .depth02 .inner > ul > li > a > span {z-index: 0;} #nav.oneDown .depth03 {padding: 0.5rem 0.85rem; margin:0.5rem 0;} #nav.oneDown .depth03:before {content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.05;} #nav.oneDown .depth03 > ul > li > a {padding: 0.25rem 0; padding-left: calc(5px + 0.25rem); font-size: 0.7rem;} #nav.oneDown .depth03 > ul > li > a:before {content: ""; display: block; width: 5px; height: 5px; background: #8a929f; border-radius: 50%; position: absolute; left: 0; top: 0.6rem; opacity: 0.75;} /* gnb : oneDown : active */ #nav.oneDown .depth01 > ul > li.on > .depth02 {opacity: 1; visibility: visible;} #nav.oneDown .depth02 .inner > ul > li.dep.active > a:after {content: '\e945'; color:#002270;} #nav.oneDown .depth02 .inner > ul > li > a:hover, #nav.oneDown .depth02 .inner > ul > li > a:focus, #nav.oneDown .depth02 .inner > ul > li.dep.active > a{ color:#002270;} #nav.oneDown .depth03 > ul > li > a:hover:before, #nav.oneDown .depth03 > ul > li > a:focus:before { background:#002270;} #nav.oneDown .depth03 > ul > li > a:hover > span, #nav.oneDown .depth03 > ul > li > a:focus > span {color:#002270; text-decoration:underline;} /* gnb : fullDown */ #nav.fullDown #gnb:after {content: "";width: 100%;height: 0;background: #e2e4ea;box-shadow: 0 0.15rem 0.35rem rgba(165,170,172,0.35);position: absolute;left: 0;top: 4.75rem;z-index: -2;opacity: 0;visibility: hidden;} #nav.fullDown .dotBox{display: none !important;} #nav.fullDown .depth01 {overflow: hidden;} #nav.fullDown .depth01 > ul {display: flex; } #nav.fullDown .depth01 > ul > li:before {content: "";height: calc(100% - 3rem);border-left: 1px solid #c5c9d6;position: absolute;left: -1px;top: 4.75rem;z-index: 99;} #nav.fullDown .depth01 > ul > li + li:before {left: 0px;} #nav.fullDown .depth01 > ul > li:last-child:after {content: ""; height: calc(100% - 3rem); border-left: 1px solid #c5c9d6; position: absolute; right: 0; top: 4.75rem;} #nav.fullDown .depth01 > ul > li > a:before {content:""; position:absolute; left:50%; bottom:0; width:0px; height:3px; } #nav.fullDown .depth01 > ul > li.on > .depth02 {box-shadow: 0 0 0.5rem rgba(0,0,0,0.15); background:#095dc5; color:#fff} #nav.fullDown .depth01 > ul > li.on > .depth02:before {opacity: 1;} #nav.fullDown .depth02 { height: 100%; opacity: 1; visibility: visible;} #nav.fullDown .depth02:before {content: ""; display: block; width: 100%; height: calc(100% - 3rem); position: absolute; left: 0; top: 3rem; z-index: -1; opacity: 0;} #nav.fullDown .depth02 .tit {display: none;} #nav.fullDown .depth02 .inner > ul > li > a {padding: 0.5rem 0.55rem;font-size:0.9rem; } #nav.fullDown .depth02 .inner > ul > li > a::after{content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0; z-index: -1;} #nav.fullDown .depth03 {padding: 0.5rem 0.85rem; background: #fff; border-radius:0;} #nav.fullDown .depth03:before {content: ""; display: block; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0; z-index: -1;} #nav.fullDown .depth03:after {content: ""; display: block; width: calc(100% + 1px); height: 100%; border: 1px solid #e6e6e6; position: absolute; left: -1px; top: 0; z-index: -1;} #nav.fullDown .depth03 > ul > li > a {padding: 0.25rem 0; padding-left: calc(5px + 0.25rem); font-size: 0.7rem; color:#333;} #nav.fullDown .depth03 > ul > li > a:before {content: ""; display: block; width: 5px; height: 5px; background: #8a929f; border-radius: 50%; position: absolute; left: 0; top: 0.6rem; opacity: 0.75;} /* gnb : fullDown : active */ #nav.fullDown #gnb.active:after {height: calc(100% - 4.76rem); opacity: 1; visibility: visible;} #nav.fullDown .active .depth01 {height: auto;} #nav.fullDown .active .depth02 {opacity: 1; visibility: visible;} #nav.fullDown .depth02 .inner > ul > li.dep.active > a:before {content: '\e944';} #nav.fullDown .depth02 .inner > ul > li.active > a::after, #nav.fullDown .depth02 .inner > ul > li > a:hover::after, #nav.fullDown .depth02 .inner > ul > li > a:focus::after{opacity: 0.2;} #nav.fullDown .depth02 .inner > ul > li > a:hover, #nav.fullDown .depth02 .inner > ul > li > a:focus, #nav.fullDown .depth02 .inner > ul > li.active > a { background:#002270; color:#fff;} #nav.fullDown .depth03 > ul > li > a:hover:before, #nav.fullDown .depth03 > ul > li > a:focus:before { background:#002270;} #nav.fullDown .depth03 > ul > li > a:hover > span, #nav.fullDown .depth03 > ul > li > a:focus > span {color:#002270; text-decoration:underline;} /* gnb : oneFull */ #nav.oneFull .depth01 > ul > li {position: static;} #nav.oneFull #gnb .depth01 > ul > li > a span {position:relative;} #nav.oneFull #gnb .depth01 > ul > li > a span:before { content:''; display:block; width:0; height:5px; background:#2c6ab7; position:absolute; bottom:-1.7rem; left:0; transition:all 0.15s; -webkit-transition:all 0.15s;} #nav.oneFull .depth02 {display: none; width: 100%; position: absolute; left:0; top: 4.75rem;} #nav.oneFull .depth02:before {content: ""; width: 100%; height: 100%; background: #f6f6f6; position: absolute; left: 0; top: 0;} #nav.oneFull .depth02 .inner {position: relative;max-width: 70rem;margin: auto;padding-left:7rem;} #nav.oneFull .depth02 .inner:before{content:"";position:absolute;left: -100%;top:0;width: calc(100% + 5rem);height:100%; border-bottom-right-radius: 2.5rem; z-index:1;background:#042e62 url('/images/web/grad/common/fulldown_bg.png') no-repeat bottom 0 right 2.75rem;} #nav.oneFull .depth02:after{content:""; position:absolute; left:50%; top:0; width:100vw; height:100%; transform: translateX(-50%); background:#fff; z-index:0; } #nav.oneFull .depth02 .tit{position:absolute; left:-5.25rem; top:0; width:10.25rem; height:100%; padding:2.7rem 0 0; word-break:keep-all; z-index:1; } #nav.oneFull .depth02 .tit h2{position:relative;color: #fff;font-size:1.5rem;font-weight: 600;} #nav.oneFull .depth02 .tit h2 em {position:relative;} #nav.oneFull .depth02 .tit h2 em:after { content:''; display:block; width:0.55rem; height:0.55rem; border-radius:50%; background:#58d9ee; position:absolute; top:-8px;right:-13px;} #nav.oneFull .depth02 .tit p{font-size:.75rem; } #nav.oneFull .depth02 .inner > ul {display: flex; flex-wrap: wrap; width: 100%; max-width:70rem; padding: 0.8rem 0 1.9rem; margin: 0 auto;} #nav.oneFull .depth02 .inner > ul > li {width: 25%; padding: 0.6rem 0.7rem;} #nav.oneFull .depth02 .inner > ul > li > a {padding: 0.75rem 1rem; border-radius:1.1rem 1.1rem 0 1.1rem; background: #efefef; color:#333; font-weight: 500; position: relative; z-index: 2; overflow: hidden; font-size:0.9rem;} #nav.oneFull .depth02 .inner > ul > li.dep > a {padding-right: 2.4rem !important;} #nav.oneFull .depth02 .inner > ul > li > a:before {content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; right: auto; top: 0; z-index: -1; opacity: 0.05;} #nav.oneFull .depth02 .inner > ul > li.dep > a:after {content: "";display: block;width: 1.4rem;height: 1.4rem;border-radius: 50%;position: absolute;right: 0.5rem;top: 0.65rem;opacity: 0.2;} #nav.oneFull .depth02 .inner > ul > li.dep > a > span:after {content: "\e93f";font-family:'xeicon';display: block;position: absolute;right: 0.7rem;top: calc(50% - 0.6rem);color: #333;font-size: 1.2rem;} #nav.oneFull .depth03 {border-radius: 0 0 0.5rem 0.5rem; border-width: 1px; background: #fff; padding: 1.1rem 1rem 0.6rem; margin-top: -0.5rem; z-index: 1;} #nav.oneFull .depth03:before {content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0.05;} #nav.oneFull .depth03 > ul > li > a {padding: 0.2rem 0; padding-left: calc(5px + 0.5rem); font-size: 0.7rem; position: relative;} #nav.oneFull .depth03 > ul > li > a:before {content: ""; display: block; width: 5px; height: 5px; background: #8a929f; border-radius: 50%; position: absolute; left: 0; top: 0.6rem; opacity: 0.75;} #nav.oneFull .depth03 > ul > li > a > span {position: relative; z-index: 1;} /* gnb : oneFull:active */ #nav.oneFull #gnb .depth01 > ul > li > a:hover span:before, #nav.oneFull #gnb .depth01 > ul > li > a:focus span:before { width:100%;} #nav.oneFull .depth01 > ul > li.on > .depth02 {display: block;} #nav.oneFull .depth02 .inner > ul > li > a:hover, #nav.oneFull .depth02 .inner > ul > li > a:focus, #nav.oneFull .depth02 .inner > ul > li.active > a { background:#0065b1; color:#fff;} #nav.oneFull .depth02 .inner > ul > li.dep > a:hover > span:after, #nav.oneFull .depth02 .inner > ul > li.dep > a:focus > span:after, #nav.oneFull .depth02 .inner > ul > li.dep.active > a > span:after{color: #fff;} #nav.oneFull .depth03 > ul > li > a:hover:before, #nav.oneFull .depth03 > ul > li > a:focus:before { background:#002270;} #nav.oneFull .depth03 > ul > li > a:hover > span, #nav.oneFull .depth03 > ul > li > a:focus > span {color:#002270; text-decoration:underline;} /* moblie navigation */ #mNav {display: none; width: 100%; height: 100vh; background: #fff; padding-bottom: 6.75rem; position: fixed; left: -100%; top: 0; z-index: 99999; overflow: auto; transition: 0.25s ease;} #mNav h4 {line-height: 3.5rem; border-bottom: 1px solid #e0e0e0; padding: 0 1rem; font-size: 1.2rem; color: #222; font-weight: 700;} #mNav #mNavClose {display: block; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #515160; font-size: 1.2rem; color: #fff; line-height: 2.2rem; text-align: center; position: absolute; right: 1rem; top: 0.75rem;} #mNav #mNavClose i {position: relative; right: 0.05rem; top: 0.05rem;} #header .mBtn {display:none;} #header .mBtn.mNav{ background: #002270; color:#fff; border-radius: 50%; } #mNav .snb {border-bottom: 1px solid #e4e4e4; background: #f6f6f6; padding: 0.4rem 1rem; overflow: hidden;} #mNav .snb .util {display: flex; flex-wrap: wrap; margin: 0.25rem calc(-1rem - 5px);} #mNav .snb .util li {padding-left: 5px; position:relative;} #mNav .snb .util li:before {content: ""; width: 5px; height: 5px; border-radius: 50%; background: #e1e1e1; position: absolute; left: 0; top: calc(1.1rem - 5px);} #mNav .snb .util li a {display: block; padding: 0.4rem 1rem; font-size: 0.75rem; color: #222;} /* moblie navigation : active */ #mNav.active {left: 0;} #mNav .snb .util li a:hover, #mNav .snb .util li a:focus {text-decoration: underline;} /* mgnb */ #mgnb .dotBox {display: none;} #mgnb li a {display: block; position: relative;} #mgnb li a[target='_blank']:after {content: '\e980'; display: inline-block; padding-left: 0.25rem; font-family: 'xeicon';} #mgnb .depth01 > ul > li {border-bottom: 1px solid #e5e5e5; overflow: hidden;} #mgnb .depth01 > ul > li > a {padding: 0.6rem 1rem; color: #222; font-weight: 500; z-index: 1; font-size:0.9rem;} #mgnb .depth01 > ul > li.dep > a {padding-right: 2.4rem;} #mgnb .depth01 > ul > li.dep > a:before {content: "\e913"; font-family:'xeicon'; display: block; color: #000; position: absolute; right: 0.8rem; top: 0.8rem;} #mgnb .depth02 { display:none; border-top-width: 2px; border-top-style: solid; padding: 0.35rem 1rem 0.8rem; position: relative; z-index: 1; border-color:#002270;} #mgnb .depth02:before {content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0.05; background: #002270;} #mgnb .depth02 .inner .tit {display:none;} #mgnb .depth02 .inner > ul > li > a {padding: 0.4rem 0; font-size: 0.75rem; color: #222; font-weight: 500;} #mgnb .depth02 .inner > ul > li.dep > a {padding-right: 2.4rem;} #mgnb .depth02 .inner > ul > li.dep > a:before {content: "\e941"; font-family: 'xeicon'; position: absolute; right: 0; top: 0.55rem;} #mgnb .depth03 {display: none; margin: 0 -0.25rem; border-radius: 0.5rem; border-width: 1px; border-color: #c5c9d6; border-style: solid; background: #fff; padding: 0.5rem 0.5rem;} #mgnb .depth03 > ul > li > a {padding: 0.35rem 0; padding-left: calc(5px + 0.3rem); font-size: 0.7rem; color: #3d3d3d; font-weight: 500;} #mgnb .depth03 > ul > li > a:before {content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #999999; position: absolute; left: 0; top: calc(1rem - 5px);} /* mgnb : active */ #mgnb li.dep.active > div {display: block;} #mgnb .depth01 > ul > li.active > a { color: #002270; font-weight: 600; } #mgnb .depth01 > ul > li.dep.active > a:before {content: "\e91a"; } #mgnb .depth02 .inner > ul > li.dep.active > a:before {content: "\e944";} #mgnb .depth02 .inner > ul > li.active > a, #mgnb .depth02 .inner > ul > li > a:hover, #mgnb .depth02 .inner > ul > li > a:focus{font-weight: 600;} #mgnb .depth03 > ul > li > a:hover, #mgnb .depth03 > ul > li > a:focus{font-weight: 600;} #mgnb .depth03 > ul > li > a:hover:before, #mgnb .depth03 > ul > li > a:focus:before{background: #002270;} /* 상단이동 */ .btn_top{ position:fixed; width:3.5rem; height:3.5rem; background:rgba(0,0,0,0.5) url('/images/web/grad/common/btn_topmove.png') no-repeat center; right:1rem; bottom:1rem; z-index:2000; font-size:0;} .btn_top a{display:block; width:100%; height:100%;} .btn_top:hover{background-color:rgba(0,0,0,0.7);} .btn_top{transition:all 0.3s ease; -ms-transition:all 0.3s ease; -webkit-transition:all 0.3s ease;} /** Common **/ .js_mobile_check {display:none; position:absolute; left:0; top:-1000px; width:1px; height:1px; line-height:1px;} /* 사이트링크 */ .ftBtn {position:absolute; top:0px; right:0px; font-size:14px; border-left:1px solid #6a6e79; border-right:1px solid #6a6e79;} .ftBtn.ftBtn01{right:10.6rem;} /* 부속기관 */ .ftBtn.ftBtn02{right:0; border-left: none;} /* 원격지원서비스 */ .ftBtn button{width: 10.6rem;font-size:0.7rem;text-align:left;padding:0 0.8rem;line-height:3rem; color:#fff;cursor:pointer;} .ftBtn button::after{content:url('/images/web/grad/common/btn_arr.png'); position:absolute; right:15px; top:0px;} .ftBtn button.on::after{transform:rotate(180deg);} .ftBtn button:hover{background:#164157;} .ftBtn .ft_site{display:none; width:100%; max-height:300px; position:absolute; bottom:3rem; z-index:1300; background:rgba(0,0,0,0.8); overflow:auto;} .ftBtn .ft_site ul{margin:15px;} .ftBtn .ft_site ul li a{ display:block; line-height:30px; padding-left:10px; color:#fff; font-size:13px; position:relative;} .ftBtn .ft_site ul li a::before{content:""; width:2px; height:2px; position:absolute; left:0; top:15px; background:#fff;} .ftBtn .ft_site ul li a:hover{text-decoration:underline;} .ftBtn button, .ftBtn button::after{transition:all 0.3s ease; -ms-transition:all 0.3s ease; -webkit-transition:all 0.3s ease;} /* footer */ .area_footer {position:relative; background:#031428; border-top:1px solid #6a6e79; } .box_footer {position:relative; max-width:70rem; margin:0 auto; padding:0 0 3rem;} .box_footer .footer_link {line-height:1rem; position:relative;} .box_footer .footer_link:before { content:''; display:block; width:100vw; height:100%; background:#253243; border-bottom:2px solid #3c4a57; position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);} .box_footer .footer_link li {display:inline-block;} .box_footer .footer_link li a{padding-right:1rem; padding: 1rem 1rem 1rem 0; display:inline-block; color:#fff; font-size:0.75rem; position:relative;} .box_footer .footer_link li.point a{color:#00c2fc; } .box_footer .footer_link li a:hover{text-decoration:underline;} .box_footer .footer_link li.point a:hover{color:#0098c6; text-decoration:underline;} .box_footer .box_info { position:relative; margin:2rem 0 0; font-size:0.7rem; color:#fff;} .box_footer .box_info::after { content: ''; display: block; clear: both;} .box_footer .box_info .f_logo { width: 13.6rem; float: left;} .box_footer .box_info ul{margin:0.5rem 0 0.5rem; width: calc(100% - 13.6rem); float: left; padding-left: 3rem;} .box_footer .box_info ul li{line-height:1rem; display: inline-block;} .box_footer .box_info ul li address { margin-right: 1rem;} .box_footer .box_info ul li address span{ color:#8f8f8f;} .box_footer .box_info .copyright { color: #8f8f8f; font-size: 0.6rem; font-family: 'Montserrat'; width: calc(100% - 13.6rem); float: left; padding-left: 3rem;} /************************************** 서브콘텐츠 : 시작 **************************************/ /* 서브비주얼 */ .s_visual{width:100%; height:23.5rem; position: relative; overflow:hidden; text-align:center;} .s_visual p{width:100%; height:100%;} .s_visual p img{width: 100%;height: auto;} .s_visual .slogan{position: absolute;width:100%;top: 36%;z-index:200;color:#fff;overflow:hidden;letter-spacing:-1px;text-align:center;text-shadow:2px 2px 2px rgba(0,0,0,0.5);word-break: keep-all;} .s_visual .slogan span{display:block; font-size:1rem; opacity: 0.5;} .s_visual .slogan p{font-size:2rem; margin: 0 0 0.8rem; font-weight: 600;} /* content */ #sub_container_wrap {position:relative;} .sub_content_wrap {position:relative;width:100%;max-width:70rem;margin: -6.25rem auto 10rem;overflow:hidden;min-height:35rem;background: #fff;border-radius: 1.5rem 1.5rem 0 0; } #sub_content{width:calc(100% - 18.25rem);float:right;padding-right: 3.3rem;} .subCntBody {position:relative; padding:3rem 0 0; color:#333; font-size:0.8rem; line-height:1.4;} .subCntBody p {line-height:1.4;} /* 왼쪽메뉴 */ #menu {position:relative; float:left; width:15rem; height:100%; } #menu h2 { position: relative; width:100%; height: 8.75rem;color:#fff;padding: 3.5rem 0.5rem; font-size: 1.4rem; font-weight: 700; line-height: 1.5rem; text-align:center; overflow: hidden; background:linear-gradient(45deg, #06388a, #1f2b7d); box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 1.5rem 0;} #menu h2::before { content: ''; display: block; width: 8.3rem; height: 6.55rem; background: url("/images/web/grad/common/left_nav_bg.png") no-repeat center / contain; position: absolute; bottom: 0; right:0.9rem;} #menu h2 span{ position: relative; white-space: nowrap;} #menu h2 span::after {content: ""; display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #fff; position: absolute; right: -0.3rem; top: -0.1rem;} #menu .lnb {margin-top: 1.95rem;} #menu .lnb > li {position: relative;} /*#menu .lnb > li.dep::after { content: '\ea40'; font-family: 'xeicon'; display: block; position: absolute; top: 1.2rem; right: 1rem; font-size: 0.9rem; color:#cecece; transition: all 0.15s; -webkit-transition: all 0.15s;} #menu .lnb > li.dep.active::after { content: '\e937'; color:#173183; } */ #menu .lnb > li.dep::after { content: '\e937'; color:#173183; font-family: 'xeicon'; display: block; position: absolute; top: 1.2rem; right: 1rem; font-size: 0.9rem; transition: all 0.15s; -webkit-transition: all 0.15s;} #menu .lnb > li + li { margin-top: 0.3rem; } #menu .lnb > li > a { position: relative; display:block; height: 3.25rem; padding: 0 1.6rem 0 0.8rem; overflow: hidden; font-size: 0.9rem; line-height: 3.25rem; border: 1px solid #cecece; border-radius: 0.3rem;color: #000; } #menu .lnb > li > a::before { content: ''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid #07398b; border-radius: 0.3rem; position: absolute; top: -1px; left: -1px; opacity: 0; transition: all 0.15s; -webkit-transition: all 0.15s;} #menu .lnb > li > a.dep {color:#0063af; } /* #menu .lnb > li.active > a, */ #menu .lnb > li.dep > a, #menu .lnb > li > a:hover, #menu .lnb > li > a:focus {color:#07398b; font-weight: 700;} #menu .lnb > li.active > a::before, #menu .lnb > li.dep > a::before { opacity: 1;} #menu .lnb > li.dep.active .subLnb {display: block;} #menu .subLnb {/*display:none;*/padding:0.5rem 0.8rem; letter-spacing:-1px; background:#f5f8ff;border-radius: 0.3rem;} #menu .subLnb > li {position: relative; border-bottom: 1px solid #e3e3e3;} #menu .subLnb > li:last-child { border-bottom: none;} #menu .subLnb > li.dep::after { content: '\e941'; font-family: 'xeicon'; font-size: 1rem; color: #333; position: absolute; top: 1.2rem;right: 0.5rem; transition: all 0.15s; -webkit-transition: all 0.15s;} #menu .subLnb > li.dep.active::after { content: '\e944'; color: #173183;} #menu .subLnb > li > a {display:block; color:#000; padding:1.1rem 2rem 1.1rem 0.7rem; font-size:0.8rem; position: relative; } #menu .subLnb > li > a::before {content: '';display: block;width: 5px;height: 5px;background: #a6a6a6;border-radius: 50%;position: absolute;top: 1.5rem;left: 0;transition: all 0.15s;-webkit-transition: all 0.15s;} #menu .subLnb > li > a:hover, #menu .subLnb > li > a:focus, #menu .subLnb > li.active > a {color:#173183; font-weight: 600; } #menu .subLnb > li > a:hover::before, #menu .subLnb > li > a:focus::before, #menu .subLnb > li.active > a::before {background-color:#173183; } #menu .subLnb2 { display: none; width: 100%; border: 1px solid #c0c0c0; background: #fff; border-radius: 0.5rem; padding:0.5rem 0.7rem;} #menu .lnb > li.dep.active .subLnb > li.dep.active .subLnb2 {display: block;} #menu .subLnb2 > li > a { position: relative; line-height: 1.75rem; font-size: 0.7rem; color: #333; padding-left: 0.5rem;} #menu .subLnb2 > li > a::before{ content: ''; display: block; width: 5px; height: 2px; background: #a6a6a6; border-radius: 2px; position: absolute; top: 0.5rem; left: 0;transition: all 0.15s; -webkit-transition: all 0.15s;} #menu .subLnb2 > li > a:hover, #menu .subLnb2 > li > a:focus, #menu .subLnb2 > li.active > a {color:#173183; font-weight: 600; text-decoration: underline; } #menu .subLnb2 > li > a:hover::before, #menu .subLnb2 > li > a:focus::before, #menu .subLnb2 > li > a.dep::before, #menu .subLnb2 > li.active > a::before {background-color:#173183; } /* 새창 아이콘 181004 추가 */ #menu nav > .lnb > li > a[target='_blank']:after{display:inline-block; vertical-align:middle; position:relative; content:''; background:url('/images/web/grad/common/icon_new_WG.png') no-repeat; width:0.55rem; height:0.55rem; margin:-3px 0 0 8px;} #menu nav > .lnb > li > a:hover[target='_blank']:after, #menu nav > .lnb > li.on > a[target='_blank']:after, #menu nav > .lnb > li.on > a:hover[target='_blank']:after {display:inline-block; vertical-align:middle; position:relative; content:''; background:url('/images/web/grad/common/icon_new_WW2.png') no-repeat; width:0.55rem; height:0.55rem; margin:-3px 0 0 8px;} #menu nav > .lnb > li > ul > li > a[target='_blank']:after{display:inline-block; vertical-align:middle; position:relative; content:''; background:url('/images/web/grad/common/icon_new_WG.png') no-repeat; width:0.55rem; height:0.55rem; margin:-4px 0 0 8px;} /* sub 타이틀 */ #sub_content .title_area {position:relative; } .title_area .pageTitle {padding-top:3.5rem; line-height:1.4; font-size:1.4rem; letter-spacing:-1px; color:#222; font-weight: 600;} .title_area .location {text-align:left; margin:0.5rem 0 0; border-bottom:1px solid #ddd; padding-bottom: 0.5rem;} .title_area .location span, .title_area .location strong {padding-left:18px; background:url('/images/web/grad/common/bgLocation.png') no-repeat 6px center; font-size:0.7rem; color:#666} .title_area .location strong {color:#082f7b; font-weight:normal; text-decoration: underline;} .title_area .location a.home {display:inline-block; font-size: 0.9rem; color: #43566d;} /* sns */ .snsBox { position:absolute; top:5.8rem; right:0; text-align:right} .snsBox button { display:inline-block; zoom:1; } .snsBox button > span { font-size:0; line-height:0} .snsBox .btnPrint { color: #636363; font-size: 0.9rem;} .snsBox .btnShare{ color: #636363; font-size: 0.9rem;position: relative; padding-right: 0.8rem; } .snsBox .btnShare::after { content: ''; display: block; width: 1px; height: 0.7rem; background: #bcbcbc; position: absolute; right: 0; top: calc(50% - 7px);} .snsBox .btnShare:hover, .snsBox .btnShare:focus{ color: #07398b;} .snsBox .sns_more{display: none; position:absolute; top:2rem; right:0; width:11rem; background:#fff; z-index:30; padding: 0.3rem; border:1px solid #bbb; border-radius:1.5rem;} .snsBox .sns_more button {overflow: hidden;font-size: 1.2rem;color: #a4a4a4;display:inline-block;transition:all 0.2s;-webkit-transition:all 0.2s;} .snsBox .sns_more button:hover, .snsBox .sns_more button:focus{ color: #07398b;} @keyframes hz { from {height: 0px;} to {height: 100%;} } /************************************** 서브콘텐츠 : 끝 **************************************/ /********** Media quary **********/ @media screen and (max-width:1920px) { /* 서브비주얼 */ .s_visual p img{width: auto;height: 100%;} } @media screen and (max-width:1750px) { /* 로고 */ #header h1.logo { left:1rem; } /* top util */ #header .toputil{ right: 1rem; } /* user */ #header .user_btn { right: 4rem; } /* 검색 */ #header .search_btn { right: 2rem; } #header .search { right: 1.5rem; } #gnb .depth01 { padding: 0 7rem 0 12rem;} #gnb .depth01 > ul > li > a { font-size:0.9rem;} #nav.oneFull #gnb .depth02 .tit {left: 1rem;} #nav.oneFull #gnb .depth02 .inner:before{ width: calc(100% + 9rem); } #nav.oneFull .depth02 .inner > ul { padding-left: 3rem;} #nav.oneFull .depth02 .inner > ul > li {width: 25%; padding: 0.6rem 0.5rem;} } @media screen and (max-width:1600px) { /* 로고 */ #header h1.logo { top:1.4rem; } #header h1.logo a { width:10rem; height:1.95rem;} } @media screen and (max-width:1420px) { .container { padding: 0 1rem; } .box_footer{ padding:0 1rem 6.5rem;} /* 사이트링크 */ .ftBtn.ftBtn01{right:11.6rem;} /* 부속기관 */ .ftBtn.ftBtn02{right:1rem; } /* 원격지원서비스 */ /* content */ .sub_content_wrap { max-width:calc(100% - 2rem); } } @media screen and (max-width:1300px) { } @media screen and (max-width:1250px) { #header { height:3.5rem; } /* 로고 */ #header h1.logo { top:0.8rem; } #gnb .depth01 { height: 3.5rem; } #gnb .depth01 > ul > li > a { height: 3.5rem; } #header #nav #gnb > ul{margin-left:0.5rem; margin-right:5rem;} #header #nav #gnb > ul > li{padding:0 1.5%;} #header #nav #gnb > ul > li span{font-size:0.9rem;} /* gnb : oneFull */ #nav.oneFull #gnb .depth01 > ul > li > a span:before { bottom: -1.1rem;} #nav.oneFull .depth02 {top: 3.5rem;} /* gnb : oneDown */ #nav.oneDown .depth02 { top: calc(3.5rem - 1px); } /* gnb : fullDown */ #nav.fullDown #gnb:after { top: 3.5rem; } /* gnb : fullDown : active */ #nav.fullDown #gnb.active:after {height: calc(100% - 3.5rem); } /* 사이트맵 */ #header .sitemap_btn { top: 0rem; } /* 검색 */ #header .search_btn { top: -0.6rem;} /* user */ #header .user_btn { top: -0.6rem;} .ftBtn{border:1px solid #94a0a6;} .ftBtn button{line-height: 2rem;} /* 사이트링크 */ .ftBtn button{box-sizing:border-box;} .ftBtn {top: 10rem;} .ftBtn.ftBtn01{right: auto;left: 1rem;} .ftBtn.ftBtn02{right: auto;left: 11.7rem;} .ftBtn .ft_site { bottom:2.05rem;} .ftSNS{top:11.5rem; } .web_mark{top:11.5rem;} .s_visual p img{margin-left:-20%;} #menu{width:22%;} #sub_content{width:73%;margin-right: 2%;padding-right: 0;} } @media screen and (max-width:1024px) { #wrap, #header, .headerWrap, #container, .area_footer, .box_footer, #gnb > li.others .m_util li, .box_search_2, .box_search_2 .box_search_2_1, .box_search_2 input, .area_footer .ft_site, .area_footer .ft_site .inner, .area_footer .ft_site ul, .area_footer .ft_site h2, .box_footer .box_info, .footBtnWrap, .footBtn button, .footBtn div, .footer_link {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box} #wrap { min-width:14rem; width:100%} /* header */ #header .mBtn {display: block; width: 2rem; height: 2rem; border-radius: 0.5rem; font-size: 1.1rem; line-height: 2rem; text-align: center; position: absolute; top: -0.95rem;} #header .mBtn.mNav {left: 0.8rem;} /* moblie navigation */ #mNav {display: block;} /** Header **/ #header {min-width:14rem; height:auto !important; background:none; top:0 !important;} #header .headerWrap {min-width:100%;height:3rem;background:rgba(7,22,51,0.6)!important; } #header #nav {display:none;} #header #nav #gnb ul li a span {font-size:1.1rem;} #header #nav #gnb ul li ul li a {font-size:0.75rem; line-height:1rem;} #header h1.logo {position:absolute;left:50%;top: 0.55rem;margin:0 0 0 -107px;} #header .mob_btn {display:block;position:absolute;left: 1rem;top: 1rem;width: 2rem;height:2rem;font-size:1.2rem;border-radius:2rem;background:#fff;overflow: hidden;text-align: center;color: #085dc5;}/* 200713*/ #header .mob_btn:hover{background-color:#adefff;} #header .mob_btn span{display:block; float:left; width:70%; margin:3px 0; height:3px; background:#0175b2;} #header .mob_btn span:first-child{width:90%; margin:0;} #header .mob_btn span:last-child{width:90%; margin:0;} #header .mob_btn{transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} /* top util */ #header .toputil{height:1.5rem; margin:0; left:0; } #header .topMenu{border:0; height:1.5rem; width:100%; top:0; text-align:right; background:#121e2d; max-width:50.95rem; right:0; font-size:0; line-height:0; z-index:20;} #header .topMenu > li{width:auto; display:inline-block; min-width:4rem; float:none;} #header .topMenu > li a{border:0; line-height:1.5rem; font-size:0.65rem; padding:0 8px; border-left:1px solid #2b3542;} #header .topMenu > li.popup{display:none;} #header .topMenu > li.lang a{padding:0;} #header .topMenu > li.lang a::after{display:none;} /* 검색 */ #header .search_btn {top: -0.95rem;right: -0.2rem; } #header .search_btn button { width: 2rem; height:2rem; font-size:1.2rem; border-radius:2rem; background:#fff;overflow: hidden;text-align: center;color: #085dc5;} #header .search {width: calc(100% + 1rem);right: -1rem;top: 1.5rem;padding: 1rem 2.5%;background:rgba(0, 0, 0, 0.7);} #header .search h2 {position: absolute; width:1px; height:1px; overflow:hidden; text-indent: -10000%;} #header .search input{width:90%; height:2.5rem; line-height:2.5rem; padding-left:2%;} #header .search a.btn_top_sch{height: 2.6rem;width: 17%;bottom: 0.7rem;right: 0.3rem;} #header .search_close{top: -2.45rem;right: 0.8rem;} /* 사이트맵 */ .sitemap_btn{display:none;} /* user */ #header .user_btn { display:none; } /* 상단 SNS 버튼 */ .top_sns_btn {top:0; right:auto; left:0; overflow:hidden;} .top_sns_btn ul li {width:1.7rem; height:2rem; margin-left:0;} .top_sns_btn ul li a {display:block; height:2.1rem;} .top_sns_btn ul li a span {position:absolute; top:-10000em; left:-10000em;} .top_sns_btn ul li.t_sns_f {background:url('/images/web/grad/common/top_sns_tm_f.png') no-repeat 50%;} .top_sns_btn ul li.t_sns_t {background:url('/images/web/grad/common/top_sns_tm_t.png') no-repeat 50%;} .top_sns_btn ul li.t_sns_b {background:url('/images/web/grad/common/top_sns_tm_b.png') no-repeat 50%;} /* 메뉴 */ #slide_map {display:none; position:absolute; width:100%; height:100%; left:0; top:0; z-index:2000; opacity:0; -webkit-opacity:0; filter:alpha(opacity=0); overflow:hidden;} #slide_map .box {position:absolute; left:-100%; top:0; width:100%; height:100%; background:#fff; z-index:10;} #slide_map .box .title {display:block; position:absolute; width:100%; font-size:1.1rem; line-height:1.4rem; padding:0.6rem 0.75rem; min-height:1.4rem; background:#0083e7; color:#fff; box-sizing:border-box;} #slide_map .box .binds {height:100%; overflow:hidden; background:#fff;} #slide_map .box ul {width:auto; height:auto; margin:0 3%; padding:3rem 0 0 0;} #slide_map .box ul li {position:relative;} #slide_map .box ul li a {display:block; position:relative; border-bottom:1px solid #cecece; color:#1e1e1e; text-decoration:none;} #slide_map .box ul li a span {display:inline-block; font-size:0.9rem; line-height:1.1rem; font-weight:600; padding:0.7rem 0.5rem;} #slide_map .box ul li a:after {content:""; display:block; position:absolute; right:0.5rem; top:50%; width:0.55rem; height:0.35rem; background:url('/images/web/grad/common/mob_depth1_bul_down.gif') no-repeat center 50%; margin-top:-3px;} #slide_map .box ul li a.ov {border-bottom:1px solid #0083e7; color:#0083e7;} #slide_map .box ul li a.ov:after {background:url('/images/web/grad/common/mob_depth1_bul_up.gif') no-repeat center 50%;} #slide_map .box ul li a[target='_blank'] span::after{display:inline-block; width:0.7rem; height:0.7rem; margin-left:0.25rem; content:''; background:url('/images/web/grad/common/icon_nav_blank_bk.png') no-repeat;} #slide_map .box ul li a[target='_blank'] strong::after{display:inline-block; width:0.55rem; height:0.55rem; margin-left:0.25rem; content:''; background:url('/images/web/grad/common/icon_nav_bk.png');} #slide_map .box ul li ul {display:none; margin:0; padding:8px 0; border-bottom:1px solid #cecece;} #slide_map .box ul li ul li a {border:0 !important; color:#444;} #slide_map .box ul li ul li a:hover, #slide_map .box ul li ul li a:active {text-decoration:underline;} #slide_map .box ul li ul li a strong {display:block; font-weight:normal; font-size:0.8rem; line-height:1.1rem; padding:0.4rem 0.5rem 0.4rem 1.35rem;} #slide_map .box ul li ul li a strong:before {content:''; position:absolute; top:0.85rem; left:0.75rem; width:0.25rem; height:0.25rem; background:#b8b8b8; border-radius:3px;} #slide_map .box ul li ul li a.ov {background:#0869b3; color:#fff;} #slide_map .box ul li ul li a.ov strong:before {content:''; position:absolute; top:0.85rem; left:0.75rem; width:0.25rem; height:0.25rem; background:#fff; border-radius:3px;} #slide_map .box ul li ul li a:after {display:none;} #slide_map .box .close {display:block; position:absolute; right:0; top:0; width:2.6rem; height:2.6rem; z-index:51; background:#0869b3; text-indent:-9999px;} #slide_map .box .close:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/images/web/grad/common/btn_close_wh.png') no-repeat center 50%; -webkit-transition:all .8s ease; transition:all .8s ease;} #slide_map .box .close:hover:after, #slide_map .box .close:active:after {-webkit-transform:rotate(270deg); transform:rotate(270deg);} #slide_map .blind {display:block; position:absolute; width:100%; height:100%; left:0; top:0; z-index:1; background:#000; opacity:0.75; -webkit-opacity:0.75; filter:alpha(opacity=75);} .sub #header {position:relative;} .s_visual p img{margin-left:-40%;} .btn_top{display:none !important;} /************************************** 서브콘텐츠 : 시작 **************************************/ #sub_container_wrap, .sub_content_wrap, #sub_content, .subCntBody {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box} /* content */ .sub_content_wrap { max-width:100%; } /* 서브비주얼 */ .s_visual .slogan{top: 47%;} /* content */ #sub_container_wrap, .sub_content_wrap {width:100%; margin: -3rem auto 1.5rem;} #sub_content{margin:0; width:100%; min-height:0; padding:1rem;} /* sub 타이틀 */ #sub_content .title_area {height:auto; padding-bottom:0.75rem;} .title_area .pageTitle {padding:0.75rem 3.5rem 0 0;} /* etc : sns*/ .snsBox {top: 1rem;} .snsBox .btnPrint {width:1.5rem; height:1.5rem; background-size:1.5rem;} .snsBox .btnShare{width:1.5rem; height:1.5rem; background-size:1.5rem;} .subCntBody{width:100%; float:none; padding:1.25rem 0} /* common */ .img_auto { width:100%; height:auto} /* 왼쪽메뉴 */ #menu {position:static; width:auto; float:none;} #menu h2 {position:relative; width:100%; height:3rem; line-height:1.8rem; box-sizing:border-box; padding:0.6rem 0 0.6rem 1rem; margin-bottom:0; color:#fff; cursor:pointer; font-size:0.85rem;} #menu h2:after { content: '\e941'; font-family: 'xeicon'; font-size: 1rem; color: #fff; position: absolute; top: 0.7rem; right: 1.6rem; transition: all 0.15s; -webkit-transition: all 0.15s;} #menu h2.active:after { content: '\e944';} #menu nav{display:none} #menu nav{position:relative; } #menu .lnb {margin-top: 0.5rem; padding:0 1rem;} #menu .lnb > li {margin:0;} #menu .lnb > li.dep::after {top: 0.65rem;right: 0.5rem; font-size: 1.2rem;} #menu .lnb > li > a {padding:0 0.8rem;font-size:0.75rem;height: 2.5rem;line-height: 2.5rem;} #menu .subLnb{background-color:#fff; padding: 0.5rem 0;} #menu .subLnb > li.dep::after {top: 0.6rem; font-size: 0.85rem;} #menu .subLnb > li > a { padding:0.45rem 0 0.45rem 1rem; font-size:0.8rem; position: relative; } #menu .subLnb > li > a::before {top: 0.9rem;left: 0.35rem;} #menu .subLnb2 > li > a { line-height: 1.35rem;} /************************************** 서브콘텐츠 : 끝 **************************************/ } @media screen and (max-width:920px) { .box_footer{ padding:0 1rem 2rem;} /* 사이트링크 */ .ftBtn button {width: 100%;} .ftBtn {position: relative;width: 100%;top:auto;margin-top: 1rem;} .ftBtn.ftBtn01 { left:0;} .ftBtn.ftBtn02 {right:auto;left:0;border-left: 1px solid #94a0a6;margin-top: -1px;} .ftSNS {top:auto; bottom:0.5rem;} .web_mark{top:auto; bottom:0px;} } @media screen and (max-width:768px) { .box_footer .box_info .f_logo{ display:none;} .box_footer .box_info {margin-top:1rem;} .box_footer .box_info ul{padding-left:0;width: 100%;} .box_footer .box_info ul li{line-height:1.5rem; display: inline-block;} .box_footer .box_info .copyright {padding-left:0;width: 100%;} .box_footer .footer_link li a{padding-right:1rem; padding: 0.5rem 1rem 0.5rem 0; display:inline-block; color:#fff; font-size:0.75rem; position:relative;} .box_footer .box_info .copyright { line-height:1.1rem;} /* 서브비주얼 */ .s_visual .slogan{top: 51%;} .s_visual .slogan p{width:80%; margin:0 auto; font-size:1.25rem;} /* 상단팝업 *//* 190927 수정*/ .top_slider .slick-slide a p.img img {max-width:14rem;} } @media screen and (max-width:690px) { /** Header **/ #header {top:20%;} .ftSNS{top:auto;bottom: 0.5rem;} /* 서브비주얼 */ .s_visual { height: 20rem;} } @media screen and (max-width:440px) { /* top_mn 181022 */ #header .toputil .top_mn li {padding-left:1rem;} #header .toputil .top_mn li:before {top:0.75rem; left:0.5rem; width:1px; height:0.5rem; background:#72839c;} /* 190927 수정*/ .top_slider .slick-slide a {padding:1rem 0.5rem 0;} .top_slider .slick-slide a p.img {width:auto;} .top_slider .slick-slide a p.img img {width:100%;} .box_footer .box_info {margin:0.5rem 0 0;}/* 191213 추가 */ } @media screen and (max-width :380px) { #header h1.logo {top:0.5rem; margin:0 0 0 -4.1rem;} #header h1.logo a {width:8.5rem; height:2rem; background-size:100% auto;} }