/************************************************************************ * 파일명 : layout.css * 설명 : 공통 CSS ************************************************************************/ /***** Layout *****/ #wrap {position:relative; min-width:300px;overflow: hidden; } #wrap #container {width:100%; /*background-color:#fff;*/} #wrap #header .inner {position:relative; width:94%; margin:0 auto; } /* 컨텐츠 공통 */ body {font-size:14px; line-height:1.5em;} /********** Header **********/ /* Header */ #wrap #header { top:0px; width:100%; margin:0; } /* h1 */ #wrap #header {background:none;} #wrap #header nav h1 {background:none; width:190px; margin:0 auto; height:auto; text-align:center; padding-top:5px; } #wrap #header nav h1 img {max-height:45px;} /* GNB 로그인 메뉴 부분 */ #wrap #header .inner nav {position:relative;} /* GNB - search */ #wrap #header nav a.callNumber {position:Absolute; top:10px; left:10px; display:block; width:40px; height:40px; background:url('../../images/common/csCenter.gif') 0 50% no-repeat; background-size:cover;} /* GNB */ #wrap #header nav .btn_nav {display:block; } #wrap #header nav .btn_nav.open {position:absolute; top:10px; right:0; width:40px; height:40px; background:url('../img/common/btn_nav_open.jpg') no-repeat 50% 50%; background-size:90%;} #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 50% 50%;} #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 .util_wrap ul {padding-top:40px} #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 0px 0 10%; width:90%; display:block; font-size:14px; text-align:left; line-height:34px; color:#fff; font-family:"Nanum-bold"; } #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; background-size:85%;} #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; background-size:85%;} #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; border:0; background:#eeeeee !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 { color:#454444; margin:0; margin-top:0px !important; margin-bottom:0 !important; margin-left:0 !important; float:none !important; !important; padding:0 20px; font-size:13px !important; line-height:25px !important; text-transform:none} #wrap #header nav .util_wrap ul li ul li:first-child a {margin-top:0px !important;} #wrap #header nav .util_wrap ul li ul li:first-child a:hover {box-shadow:none; color:#004c6b;} #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 {color:#7d7c7c; margin-top:0 !important; font-size:13px !important; padding-left:32px; background:url('../img/main/news_icon01.png') no-repeat 25px 13px; font-family:"Nanum-regular"; } #wrap #header nav .util_wrap ul li ul li a:hover {color:#004c6b;} #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 {-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 {position:relative; width:94%; background:#333333; text-align:center; border-top:1px solid #e1e1e1; min-height:100px; padding:20px 3% 20px 3%; clear:both;} #wrap #footer .foot_info ul {margin-bottom:10px;} #wrap #footer .foot_info ul li a {float:left;width:calc((100% - 10px) / 3);line-height:14px; text-align:Center; color:#fff; font-size:14px; font-family:"Nanum-regular"; border-left:1px solid #fff;} #wrap #footer .foot_info ul li.first a { margin-left:0px; border-left:0px;} #wrap #footer .foot_info .copy {display:block; border-top:1px solid #606060; margin:20px 3%; padding-top:15px; font-size:13px; color:#8d8d8d; text-align:Center;} @media all and (max-width:480px){ #wrap #header nav .top_nav > ul > li{font-size:0.9em;} #wrap #footer .foot_info ul li a {font-size:0.9em;} #wrap #footer .foot_info ul li a {width:calc((100% - 13px) / 3);margin-left:3px; text-align:Center; } } a.phonev {display:block;border-radius: 3px; padding:8px 25px 8px 8px; background:#bababa url('../../images/phonev.png')no-repeat center right; background-size:20px auto; } a.pcv {display:block; border-radius: 3px; padding:8px 25px 8px 8px;background:#bababa url('../../images/pcv.png')no-repeat center right; background-size:20px auto; }