/************************************************************************ * 파일명 : layout.css * 설명 : 공통 CSS ************************************************************************/ /***** Layout *****/ #wrap {position:relative;} #wrap #container {width:100%; /*background-color:#fff;*/} #wrap #header .inner {position:relative; width:1050px; margin:0 auto; } /********** Header **********/ /* GNB */ #wrap #header {position:relative; z-index:1000; top:0px; width:100%; height:135px; margin:0; background:#FFF url('../img/common/menuBg.gif') center 75px no-repeat; box-shadow:rgba(113, 113, 113, 0.2) 0px 2px 6px;} #wrap #header nav {position:relative; width:100%; margin:0 auto;} #wrap #header nav h1 {position:relative; width:111px; height:60px; top:75px;} #wrap #header nav h1 a {display:block; position:relative;} #wrap #header nav h1 a img {position:absolute; left:7%; width:111px; height:60px;} /* Util - name 고정 */ #wrap #header nav .lnb {position::relative; float:right; margin-top:-35px;} #wrap #header nav .lnb li {float:left; background:url('../img/common/top_util_line.png') no-repeat right 6px; padding:0 10px; line-height:22px;} #wrap #header nav .lnb li a {color:#a2a2a2;font-size:13px;} #wrap #header nav .lnb li a:hover {text-decoration:underline;} #wrap #header nav .lnb li.h04 {background:none; padding-right:0;} #wrap #header nav .util_wrap {position:absolute; top:75px; right:0; left:200px;} #wrap #header nav .util_wrap:after {content:""; display:block; clear:both} #wrap #header nav .util_wrap ul li {float:left; text-align:center; width:20%; } #wrap #header nav .util_wrap ul li:first-child {background:none} #wrap #header nav .util_wrap ul li a {display:block; position:relative; color:#fff; font-size:18px; font-family:"Nanum-bold"; text-align:center; line-height:60px; -webkit-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: line-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)} #wrap #header nav .util_wrap ul li a:hover {color:#bdfcff; text-decoration:underline; background:url('../img/common/m_menu_icon.png') no-repeat 50% 100%;} #wrap #header nav .util_wrap ul li:hover a:after {content:""; display:block; position:absolute; bottom:0; right:0; left:85px; height:14px; ;} #wrap #header nav .util_wrap ul li ul {overflow:hidden; max-height:0; background:#fff;} #wrap #header nav .util_wrap ul li:hover ul {border:1px solid #0eacbc; border-top:0px; max-height:300px; padding:0 20px 30px 0px;} #wrap #header nav .dim {display:none} #wrap #header nav .btn_nav {display:none} #wrap #header nav .mobile_lnb {display:none} #wrap #header nav .util_wrap ul li ul li {float:left; text-align:center; width:100%;} #wrap #header nav .util_wrap ul li ul li:first-child {float:left; text-align:center; width:100%; padding-top:20px;} #wrap #header nav .util_wrap ul li.sub-menu ul li a {dis width:100%; color:#000; font-size:13px; line-height:24px; width:100%; font-family:"Nanum-regular"; text-align:left; padding-left:20px;} #wrap #header nav .util_wrap ul li.sub-menu ul li a:hover {background:none; color:#0ba4bb; text-decoration:underline; box-shadow:none !important} /* search 고정 */ .search_area{position:absolute;top:18px; left:30%;width:380px;min-height:32px;} .search_area:after{display:block;clear:both;content:''} .search_area input[type='text']{width:330px;height:26px; padding:4px 5px; border:1px solid #0287b8; color:#233237; font-size:13px; background-color:#fff;} .search_area button{background-color:transparent} .search_area .btn_search{position:absolute;top:-1px;right:0;overflow:hidden;background:#0287b8 url('../img/common/btn_search.png') no-repeat left top;line-height:999px;width:42px;height:36px;margin:1px 0 0 0;cursor:pointer} /* Footer */ #wrap #footer {float:left; position:relative; width:100%; padding:0; background:#323131; border-top:1px solid #2a2929; color:#bcbcbc; line-height:1.4em;} #wrap #footer .foot_info {position:relative; max-width:1050px; margin:0 auto; padding:30px 0; background:url('../img/common/copy_logo.png') 0 20px no-repeat; min-height:80px;} #wrap #footer .foot_info .detail {float:left; padding:0 0 0 130px;} #wrap #footer .foot_info .detail2 {float:right;} #wrap #footer .foot_info .detail br {display:none;} #wrap #footer .foot_info .detail span {float:left; display:inline-block; font-size:13px;} #wrap #footer .foot_info .copy {float:left; padding:0 0 0 130px; font-size:13px; color:#999999;} #wrap #footer .foot_info .school_logo {position:absolute; right:0px; top:10px;} #wrap #footer .foot_info .copy_btn a {display:inline-block; color:#e4e4e4; padding:0 5px; height:25px;} #wrap #footer .foot_info .copy_btn a:hover {display:inline-block; color:#fff; padding:0 5px; height:25px;} @media screen and (max-width:1070px){ #wrap #header .inner {position:relative; width:1010px; margin:0 auto; } } @media screen and (max-width:1024px){ #wrap #container{margin-top:80px} /* GNB */ #wrap #header {background:none;} #wrap #header nav h1 {background:none;width:auto;height:auto} #wrap #header nav h1 a img {width:144px; height:36px; padding-left:15px;} #wrap #header nav .util_wrap {left:200px; right:20px;} #wrap #header nav .util_wrap ul li a {font-size:14px; font-weight: 400;} #wrap #header nav .util_wrap ul li a:hover {background:none; } /* 컨텐츠 공통 */ body {font-size:13px;} /* Footer */ #wrap #footer .foot_info {max-width:1024px; background:url('../img/common/btm_logo.gif') 100px 34px no-repeat; !important;} } @media all and (max-width:1023px){ #wrap #header .inner {width:100%;} /* search .search_area{position:absolute;top:10px; left:25%;width:50%;min-height:32px; min-width:320px;} .search_area:after{display:block;clear:both;content:''} .search_area input[type='text']{width:85%;height:26px; padding:4px 5px; border:1px solid #fff; color:#233237; font-size:13px; background-color:#fff;} .search_area button{background-color:transparent} .search_area .btn_search{position:absolute;top:-1px;right:0;overflow:hidden;background:url('../img/common/btn_search.png') no-repeat left top;line-height:999px;width:42px;height:36px;margin:1px 0 0 0;cursor:pointer} */ .search_area {display:none;} #wrap #header { top:0px; width:100%; height:50px; margin:0; background:#0ca5bb url('../img/common/menuBg.gif') center 0 no-repeat; box-shadow:rgba(113, 113, 113, 0.2) 0px 2px 6px;} #wrap #header .inner nav {position:relative;} #wrap #header .inner nav .lnb {display:none;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m05 a:after {background:none;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m06 a:after {background:none;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m05:hover a:after {background:none;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m06:hover a:after {background:none;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m05 {visibility:visible; background:url('../img/common/lnb_bg.png') 15px 15px no-repeat; padding-left:18px;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m06 {visibility:visible; background:url('../img/common/lnb_bg.png') 15px 15px no-repeat; padding-left:18px;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m05 a:hover {color:#fff !important;} #wrap #header .inner nav .util_wrap ul li.sub-menu.m06 a:hover {color:#fff !important;} #wrap #container{margin-top:0px} /* GNB */ #wrap #header nav h1 a img {left:5px; width:86px; height:45px; margin-top:-73px; } #wrap #header nav .btn_nav {display:block; } #wrap #header nav .btn_nav.open {position:absolute; top:0px; right:0; width:62px; height:50px; background:url('../img/common/btn_nav_open.png') no-repeat 0 0} #wrap #header nav .btn_nav.closed {position:absolute; top:0; right:0; width:58px; height:51px; background:url('../img/common/btn_nav_closed.png') no-repeat 0 0} #wrap #header nav .util_wrap {overflow-y:scroll; position:fixed; z-index:10000; top:0; right:-240px; bottom:0; left:auto; width:240px; background:#1f1f1f;} #wrap #header nav .mobile_lnb{display:block; width:100%; margin-top:55px; height:66px; background-color:#484848;} #wrap #header nav .util_wrap ol.mobile_lnb li a {float:left; width:33% !important; margin:0 !important; border-right:1px solid #6c6c6c; font-size:13px; color:#c9c9c9; padding-top:40px; line-height:20px; text-align:Center; padding-bottom:5px; } #wrap #header nav .util_wrap ol.mobile_lnb li:last-child a {border-right:0px solid #6c6c6c;} #wrap #header nav .util_wrap ol.mobile_lnb li a:hover {color:#f7f7f7; background:none;} #wrap #header nav .util_wrap ol.mobile_lnb li.h01 a { background:url('../img/common/lnb_01.png') no-repeat 50% 10px} #wrap #header nav .util_wrap ol.mobile_lnb li.h02 a { background:url('../img/common/lnb_02.png') no-repeat 50% 10px} #wrap #header nav .util_wrap ol.mobile_lnb li.h04 a { background:url('../img/common/lnb_04.png') no-repeat 50% 10px} #wrap #header nav .util_wrap ul {padding-top:11px} #wrap #header nav .util_wrap ul li {float:none; width:auto !important; margin:0 !important;} #wrap #header nav .util_wrap ul li:first-child {border-top:0px solid #3d3d3d} #wrap #header nav .util_wrap ul li a {padding:5px 40px 0 20px; font-size:16px; text-align:left; line-height:44px} #wrap #header nav .util_wrap ul li a:after {content:""; display:block !important; position:absolute; top:20px; right:20px; width:17px; height:9px; background:url('../img/common/bg_gnb_arr.png') no-repeat 0 -9px} #wrap #header nav .util_wrap ul li:hover a:after {content:""; display:block !important; position:absolute; top:20px; right:20px; left:auto; width:17px; height:9px; background:url('../img/common/bg_gnb_arr.png') no-repeat 0 -9px} #wrap #header nav .util_wrap ul li.on a:after {top:19px; background-position:0 0} #wrap #header nav .util_wrap ul li.on:hover a:after {top:19px; left:auto; background-position:0 0} #wrap #header nav .util_wrap ul li.on ul li a:after {display:none !important;} #wrap #header nav .util_wrap ul li.on:hover a:after ul li a:after {display:none} #wrap #header nav .util_wrap ul li ul li a:after {display:none !important} #wrap #header nav .util_wrap ul li:hover ul li a:after {display:none !important} #wrap #header nav .util_wrap ul li ul {position:static !important; display:block; margin:0 !important; padding:10px 0 !important; border:0; background:#fff !important; border:none !important; box-shadow:none} #wrap #header nav .util_wrap ul li ul li {float:none !important; border:0;} #wrap #header nav .util_wrap ul li ul li a { margin:0; margin-top:0px !important; margin-bottom:0 !important; margin-left:0 !important; float:none !important; !important; padding:0 30px; font-size:14px !important; line-height:30px !important; text-transform:none} #wrap #header nav .util_wrap ul li ul li:first-child a {margin-top:-20px !important;} #wrap #header nav .util_wrap ul li ul li:first-child a:hover {box-shadow:none} #wrap #header nav .util_wrap ul li ul li ul {padding:0 !important;} #wrap #header nav .util_wrap ul li ul li ul li a {margin-top:0 !important; font-size:13px !important} #wrap #header nav .util_wrap ul li.sub-menu ul li.m01_1 {float:none !important; width:100% !important; border-top:0} #wrap #header nav .util_wrap ul li.sub-menu ul li.m01_1 ul{float:none !important; width:100% !important; border-top:0; padding:0 !important;} #wrap #header nav .util_wrap ul li.sub-menu ul li.m01_2 {float:none !important; width:100% !important; border-top:0} #wrap #header nav .util_wrap ul li.sub-menu ul li.m01_2 ul{float:none !important; width:100% !important; border-top:0; padding:0 !important;} #wrap #header nav .dim {display:block; position:fixed; z-index:99; top:0; right:-100%; bottom:0; left:100%; background:#fff; opacity:0.0; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: all 0.3s ease-out;} #wrap #header nav .util_wrap {-webkit-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000)} #wrap #header nav.on .util_wrap {right:0} #wrap #header nav .util_wrap ul li ul {overflow:hidden; max-height:0; padding:0 0 !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} #wrap #header nav .util_wrap ul li.on ul {max-height:1000px !important; padding:20px 0 !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease;} #wrap #header nav .util_wrap ul li.on ul li ul {padding:0 !important} #wrap #header nav .util_wrap ul li.on ul {max-height:1000px !important} #wrap #header nav .util_wrap ul li:hover ul {max-height:0; border-bottom:0} #wrap #header nav .util_wrap ul li.m01:hover ul, #wrap #header nav .util_wrap ul li.m02:hover ul, #wrap #header nav .util_wrap ul li.m03:hover ul, #wrap #header nav .util_wrap ul li.m04:hover ul, #wrap #header nav .util_wrap ul li.m05:hover ul, #wrap #header nav .util_wrap ul li.m06:hover ul {max-height:0;} #wrap #header nav .util_wrap ul li.m01 {transition-delay: 0.035s;} #wrap #header nav .util_wrap ul li.m02 {transition-delay: 0.035s;} #wrap #header nav .util_wrap ul li.m03 {transition-delay: 0.035s;} #wrap #header nav .util_wrap ul li.m04 {transition-delay: 0.035s;} #wrap #header nav .util_wrap ul li.m05 {transition-delay: 0.035s;} #wrap #header nav .util_wrap ul li.m06 {transition-delay: 0.035s;} #wrap #header nav .util_wrap >ul > li {-webkit-transform: translate3d(250px, 0, 0); -moz-transform: translate3d(250px, 0, 0); -o-transform: translate3d(250px, 0, 0); transform: translate3d(250px, 0, 0); -webkit-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); } #wrap #header nav.on .util_wrap >ul > li {-webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} #wrap #header nav.on .dim {display:block; right:0; left:-2000%; opacity:0.2; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;} #wrap #header nav .util_wrap ul li span.arrow {display:none;} /* Footer */ #wrap #footer .foot_info {max-width:979px; margin:0 auto; background:none; text-align:center; } #wrap #footer .foot_info .detail {padding:0; text-align:Center; width:100%;} #wrap #footer .foot_info .copy {padding:0;width:100%;} #wrap #footer .foot_info .detail2 {float:none; display:block; margin:0 0 10px;} #wrap #footer .foot_info .school_logo {display:none;} } @media screen and (max-width:979px){ #wrap #footer .foot_info { width:90%;} } @media screen and (max-width:752px){ /* 컨텐츠 공통 */ body {font-size:13px;} } @media screen and (max-width:480px){ /* search .search_area{position:absolute;top:10px; left:33%;width:50%;min-height:32px; min-width:160px;} .search_area:after{display:block;clear:both;content:''} .search_area input[type='text']{width:75%;height:26px; padding:4px 5px; border:1px solid #fff; color:#233237; font-size:13px; background-color:#fff;} .search_area button{background-color:transparent} .search_area .btn_search{position:absolute;top:-1px;right:0;overflow:hidden;background:url('../img/common/btn_search.png') no-repeat left top;line-height:999px;width:42px;height:36px;margin:1px 0 0 0;cursor:pointer} */ } @media screen and (max-width:320px){ /* 컨텐츠 공통 */ body {line-height:22px;} #wrap #footer .foot_info .detail br {display:block;} }