.wrapp {position:relative; float:left;width:100%; padding:0; margin:0; overflow:hidden; border-top:0px solid #f00;} #headerWrap { position:relative;width:100%;float:left; min-width:1200px; height:180px; background:url(/images/common/header_bg.png) repeat-x left top; z-index:300; box-shadow:0px 1px 5px rgba(0, 0, 0, 0.4);} .headerInner { position:relative;width:1200px; margin:0 auto;height:180px; } .container {position:relative; width:1200px; margin:0 auto; } /*Header*/ .logo {position:absolute;left:50%; top:15px; margin-left:-175px; z-index:333;} .util { position:absolute; right:130px;top:46px; overflow:hidden;z-index:333; font-family:'NotoSanskr-Medium'} .util li {display:inline-block; float:left; line-height:22px; margin-left:12px; padding-left:12px; background:url(../images/common/divide1.png) no-repeat left ;} .util li:first-child { background:none;} .util li a { display:block; color:#555; font-size:16px;} .util li a img {margin-right:5px;} .util li a br {display:none;} .header {position:absolute; left:0px; top:110px; border:0px solid #f00;} /* Targeting the first level menu */ #nav { position: absolute;display: block; width:1200px; height: 70px; padding: 0px 0 32px 0; z-index:100;font-family:'NotoSanskr-Medium'; text-align:center;} #nav > li > a {color: #444; } /* Targeting both first and second level menus */ #nav li { position: relative; display:inline-block; background:url(/images/common/divide_gnb.png) no-repeat left ;} #nav li:first-child { background:none; margin-left:0;} #nav li a { display: block; color: #444; font-size:20px; letter-spacing:-.05em; text-align:center; padding:25px 50px 27px; } #nav li a:hover { text-decoration: none; color:#0065b2; -webkit-transition:300ms ease-out 0ms; -moz-transition:300ms ease-out 0ms; -ms-transition:300ms ease-out 0ms; transition:300ms ease-out 0ms; } /* Targeting the second level menu */ #nav li ul { color: #333; display: none; width: 180px; position: absolute; opacity:0.95; box-shadow:2px 2px 1px rgba(0, 0, 0, 0.1); } #nav li ul li {display:block; width: 100%; border-top:1px solid #1474bd; } #nav li ul li:first-child {border:0} #nav li ul li a { background:#0065b2; color:#fff; text-align:center !important; border: none; font-weight:normal; font-size:14px !important;line-height: 35px; margin: 0;padding: 5px 0 5px 0px; } #nav li ul li a:hover { background:#8bbb07; color:#fff;} /* A class of current will be added via jQuery */ #nav li.current > a {color:#0065b2; } #nav li.current > a:hover {color:#0065b2;} #nav li:hover > a {color:#0065b2;} /* CSS fallback */ #nav li:hover > ul.child { display: block; } .call-number {position:absolute; width:270px; top:25px; left:30px;} .call-number img {float:left; margin-right:7px;} .call-number dt {float:left; width:200px; font-size:15px; color:#777;font-family: 'NotoSanskr-Medium';} .call-number dd {float:left; width:200px;margin:5px 0 0; font-size:34px; line-height:34px; color:#555;font-family: 'lucida_grande-webfont'; letter-spacing:-.07em; } .open-nav {display: block; width:110px; height: 110px;right:0px; top:0px; background:#0065b2; position:absolute; z-index: 9999;} .open-nav .hamburger {display: inline-block; width: 38px; height: 3px; background-color: #fff; position: relative; top: 42px; left:38px; z-index: 9999; transition: background 0.4s ease; } .open-nav .hamburger:before, .open-nav .hamburger:after { content: ''; width:100%; height: 100%; position: absolute; background-color: #fff; right: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.2s, background 0.2s ease, right .2s ease; -webkit-transition: -webkit-transform 0.2s ease, background 0.2s, right .2s ease; -moz-transition: -moz-transform 0.2s, background 0.2s ease, right .2s ease; -o-transition: -o-transform 0.2s, background 0.2s ease, right .2s ease; -ms-transition: -ms-transform 0.2s, background 0.2s ease, right .2s ease; } .open-nav .hamburger:before { right: 5px; -webkit-transform: translateY(-12px) rotate(0deg); -moz-transform: translateY(-12px) rotate(0deg); -ms-transform: translateY(-12px) rotate(0deg); -o-transform: translateY(-12px) rotate(0deg); transform: translateY(-12px) rotate(0deg); } .open-nav .hamburger:after { right: 5px; -webkit-transform: translateY(12px) rotate(0deg); -moz-transform: translateY(12px) rotate(0deg); -ms-transform: translateY(12px) rotate(0deg); -o-transform: translateY(12px) rotate(0deg); transform: translateY(12px) rotate(0deg); } .open-nav:hover .hamburger:before, .open-nav:hover .hamburger:after { right: 0px; } /* ----------------- All Menu ----------------------- */ #all_menu{width:100%; display:none; background:#607aa4; position:absolute; padding-top:60px; top:0px; height:100%; width:100%; z-index:3333;} #all_menu .spt_bg{display:block;text-indent:-5000px;background-repeat:no-repeat;background-position:0 0;} #all_menu .top{width:1200px;height:20px;} #all_menu .btm{width:1200px;height:20px;} #all_menu .wrapper{ position:relative; margin: 0 auto;width:1200px; padding:0 0px 30px;font-family: 'NotoSanskr-Medium';} #all_menu .wrapper .tit{padding:30px 0 30px; overflow:hidden; border-bottom:1px solid #53678d; margin-bottom:25px;} #all_menu .wrapper .tit h3{width:1200px;float:left; text-align:center;color:#fff; font-size:32px; line-height:32px;} #all_menu .close a {position:absolute; width:110px; height:110px; top:0px; right:0px; background:transparent url(../images/common/ico_close_on.png) no-repeat center ; z-index:9999} #all_menu .wrapper .sec{border-top:0px solid #b4b4b4;} #all_menu .wrapper .dl{ position:relative;float:left; width:200px; padding:13px 0;border-bottom:0px solid #696969;} #all_menu .wrapper .dl dl{overflow:hidden;} #all_menu .wrapper .dl dt{width:100%;float:left; padding-left:0px; text-align:center; color:#fff;font-size:20px; font-weight:600; letter-spacing:-.5px; padding-bottom:30px; border-bottom:1px solid #53678d} #all_menu .wrapper .sec2 dt{color:#e2b16c;} #all_menu .wrapper .sec2 .hl dt{color:#dc7b96;} #all_menu .wrapper .dl dl.ln2 dt{padding-top:9px;} #all_menu .wrapper .dl dl.ln3 dt{padding-top:21px;} #all_menu .wrapper .dl dd{float:left; clear:both; border:0px solid #f00; width:100%; margin:0px 0;} #all_menu .wrapper .dl dd ul{ width:100%;float:left; } #all_menu .wrapper .dl dd li { position:relative; display:block; width:100%; float:left;line-height:50px; height:50px;font-size:15px; border-bottom:1px solid #53678d} #all_menu .wrapper .dl dd li a:before {content:""; position:absolute; top:21px; left:7px; width:4px; height:4px; border:1px solid #fff; border-radius:5px;} #all_menu .wrapper .dl dd li a:hover:before { background:#fff} #all_menu .wrapper .dl dd li a {display:block; float:left;color:#fff;width:180px; height:100%; letter-spacing:-.04em; line-height:50px; padding-left:18px;} #all_menu .wrapper .bar { position:absolute;left:0; top:0; height:50px; width:0px; word-break:keep-all; -webkit-transition:300ms ease-out 0ms; -moz-transition:300ms ease-out 0ms; -ms-transition:300ms ease-out 0ms; transition:300ms ease-out 0ms;} #all_menu .wrapper .bar:hover { background:#8bbb07; width:100%;opacity:1; } #all_menu .wrapper .sec2 .dl dd li a{color:#c3b399;} #all_menu .wrapper .sec2 .dl.hl dd li a{color:#b6939d;} /* ---------------- // All Menu ----------------------- */ /* -- Footer-- */ #footer {position:relative; float:left; width:100%; background:#343434 url(../images/common/footer_line.png) repeat-x left 50px; margin:0px 0 0;padding:0px 0 30px;} #footer .f_gnb {position:relative; width:600px; margin:0px auto; padding-top:17px; text-align:center;font-family:'NotoSanskr-Medium'} #footer .f_gnb li {display:inline-block; width:auto;padding-left:12px; margin-left:12px; background:url(../images/common/divide2.png) no-repeat left;} #footer .f_gnb li:first-child { background:none; padding-left:0; margin-left:0;} #footer .f_gnb li a {display:block; font-size:13px; color:#fff; opacity:0.6; } #footer .f_gnb li a:hover { opacity:1;} #footer .copyright {position:relative; float:left; width:100%; margin:30px 0 0; text-align:center; font-size:13px; color:#8c8c8c; line-height:25px;} #footer .copyright em { font-style:normal; font-weight:bold; color:#fff; margin-left:5px;} #footer .copyright span {padding:0 15px;} #footer .copyright img {margin:20px 0 0} #footer .copyright i { text-transform:uppercase;font-style:normal;} /* page top */ .page-top-box {position:fixed; z-index:100; opacity:0; filter:alpha(opacity=0); transition:0.4s; -webkit-transition:0.4s;} .page-top-box.show {opacity:1; filter:alpha(opacity=100);} .page-top-box .page-top-btn {position:fixed; width:68px; height:68px;right:0px; bottom:30px; background:#94c314 url(/images/common/page-top.png) center 18px no-repeat ; color:#fff; cursor:pointer; transition:0.4s; -webkit-transition:0.4s; -webkit-transition:200ms ease-out 0ms; -moz-transition:200ms ease-out 0ms; -ms-transition:200ms ease-out 0ms; transition:200ms ease-out 0ms;} .page-top-box .page-top-btn:hover { background:#006bbd url(/images/common/page-top.png) center 18px no-repeat ; color:#fff;} .page-top-box.show .page-top-btn {right:20px;} .page-top-box .page-top-btn p {text-align:center; margin-top:35px; font-size:14px;} #toTop { display: none; text-decoration: none; position: fixed; bottom: 247px; left:50%; margin-left:600px; overflow: hidden; width: 55px; height: 55px; border: none; text-indent: 100%; background:#eb8808 url("/images/common/btn_top.png") no-repeat center ; } #toTopHover { width: 55px; background:#444 url("/images/common/btn_top.png") no-repeat center ;height: 55px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } @media screen and (max-width: 1320px) { .util { top:36px; text-align:center; } .util li a img {margin-bottom:0px;} .util li a br{ display:block;} }