/************************************************************************ * 파일명 : common.css * 설명 : 공통 CSS ************************************************************************/ /* font */ @font-face { font-family: 'Nanum-regular'; font-style: normal; font-weight: 400; src: url(fonts/NanumGothic-Regular.eot); src: url(fonts/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/NanumGothic-Regular.woff2) format('woff2'), url(fonts/NanumGothic-Regular.woff) format('woff'), url(fonts/NanumGothic-Regular.ttf) format('truetype'); } @font-face { font-family: 'Nanum-bold'; font-style: normal; font-weight: 700; src: url(fonts/NanumGothic-Bold.eot); src: url(fonts/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/NanumGothic-Bold.woff2) format('woff2'), url(fonts/NanumGothic-Bold.woff) format('woff'), url(fonts/NanumGothic-Bold.ttf) format('truetype'); } @font-face { font-family: 'Nanum-ExtraBold'; font-style: normal; font-weight: 800; src: url(fonts/NanumGothic-ExtraBold.eot); src: url(fonts/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'), url(fonts/NanumGothic-ExtraBold.woff2) format('woff2'), url(fonts/NanumGothic-ExtraBold.woff) format('woff'), url(fonts/NanumGothic-ExtraBold.ttf) format('truetype'); } /* common */ * {margin:0; padding:0;} html {height:100%;} body {background:#181818; overflow-y:scroll; *overflow-y:; color:#222; font-size:14px; font-family:'Nanum-regular','맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; /*line-height:24px;*/ -webkit-text-size-adjust:none; word-spacing:0; letter-spacing:0;} a:link {font-family: 'Nanum-regular'; color:#222; text-decoration:none} a:visited {color:#707070; text-decoration:none} a:hover {color:#737373; text-decoration:underline} a:active {color:#008485; text-decoration:underline} img {border:0 none;} ol, ul/*, li*/ {list-style-type:none} h1, h2, h3, h4, h5, h6 {font-weight:normal} hr {border:0; border-top:1px solid #dedede} strong, table th {font-weight:normal} legend{height:0; font-size:0; line-height:0} /* 정렬 */ .fl_left {float:left} .fl_right {float:right} .fl_clear {clear:both; height:0; font-size:0; line-height:0} .al_left {text-align:left !important} .al_center {text-align:center} .al_right {text-align:right} .al_top {vertical-align:top} .al_middle {vertical-align:middle} .al_bottom {vertical-align:bottom} .al_justify {text-align:justify} .hand {cursor:pointer} .overflow {overflow:auto; overflow:hidden} .none {display:none !important} .hide {display:block; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; text-indent:-6669px;} .pos_rel {position:relative} .clfix:after {content: "."; display: block; height:0px; clear:both; visibility:hidden} .clfix {display: inline-block} .clfix {display: block} * html .clfix {height:1%} /* Hides from IE-mac */ .clfix {zoom:1} /*for IE 5.5-7*/ /* form */ fieldset {border:0 none} label {} input[type='text'] {height:26px; margin:0; padding:6px 9px 6px 9px; border:1px solid #a6a6a6; background:#fff; color:#4c4c4c; font-size:13px; line-height:26px; vertical-align:middle; font-family:'Nanum-regular','맑은 고딕','돋움','Dotum', sans-serif;} input[type='text'], input[type='password'] {-webkit-border-radius:0; -webkit-appearance:none} input[type=submit], input[type=button] {cursor:pointer} ::-webkit-input-placeholder {} input.txt {height:24px; margin:0; padding:7px 9px 7px 9px; border:1px solid #999; background:#fff; color:#4c4c4c; font-size:13px; line-height:24px; vertical-align:middle} input.txt:focus {border-color:#000} select {height:30px; margin:0; border:1px solid #999; color:#252525; font-family:'Nanum-regular','맑은 고딕','돋움','Dotum', sans-serif;} textarea {padding:4px; border:1px solid #999; background:#fff; color:#4c4c4c; font-size:13px; overflow-y:scroll; resize:vertical; -webkit-appearance:none} button {display:inline-block; padding:0; border:0; background:transparent; text-align:center; vertical-align:middle; cursor:pointer; white-space:nowrap} /***** Layout *****/ #wrap {position:relative;} #wrap #container {width:100%; /*background-color:#fff;*/} /********** Header **********/ /* GNB */ #wrap #header {/*position:fixed;*/ position:relative; float:left; z-index:1000; top:35px; width:100%; /* height:90px;*/ margin:0; background:url('../img/common/menuBg.png') center 28px no-repeat; /*background-color:#fff; box-shadow:rgba(113, 113, 113, 0.2) 0px 2px 6px;*/} #wrap #header nav {position:relative; width:100%; max-width:1300px; margin:0 auto;} #wrap #header nav h1 {position:relative; background:url('../img/common/h1Bg.png') left top no-repeat; width:460px; height:165px;} #wrap #header nav h1 a {display:block; position:relative;} #wrap #header nav h1 a img {position:absolute; top:30px; left:7%; width:151px; height:50px;} #wrap #header nav .lnb {position:absolute; top:-35px; width:100%; height:35px; background:#181818;} #wrap #header nav .lnb li.h01 {position:absolute; left:30px;} #wrap #header nav .lnb li.h02 {position:absolute; right:73px; padding:0 15px 0 0; background:url('../img/common/lnb_line.gif') right 13px no-repeat;} #wrap #header nav .lnb li.h03 {position:absolute; right:30px;} #wrap #header nav .lnb li a {font-family:"Nanum-bold"; font-size:12px; color:#dedede; float:left; padding:10px 0 0;} #wrap #header nav .util_wrap {position:absolute; top:13px; right:0; left:600px;} #wrap #header nav .util_wrap:after {content:""; display:block; clear:both} #wrap #header nav .util_wrap ul li {float:left; text-align:center; width:19%;} #wrap #header nav .util_wrap ul .menuhide {display:none;} #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:17px; font-family:"Nanum-bold"; text-align:center; line-height:90px; -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:#d52b1e; text-decoration:underline;} #wrap #header nav .util_wrap ul li:hover a:after {content:""; display:block; position:absolute; bottom:0; right:0; left:65px; height:14px; background:url('../img/common/menuArr.png') 0 center no-repeat;} #wrap #header nav .util_wrap ul li ul {overflow:hidden; max-height:0; margin:0 -30px; background:#000; box-shadow:rgba(113, 113, 113, 0.1) 0px 7px 3px -3px inset;border:1px solid #e42124; max-height:300px; padding:0 50px 30px 50px; -webkit-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);} #wrap #header nav .dim {display:none} #wrap #header nav .btn_nav {display:none} /* GNB / sub-menu */ #wrap #header nav .util_wrap ul li.sub-menu ul {position:absolute; top:90px; right:0; left:-600px; margin:0; padding:0 70px 0 70px;} #wrap #header nav .util_wrap ul li.sub-menu ul li {float:left; width:25%; padding:0; background:none;} #wrap #header nav .util_wrap ul li.sub-menu ul li a {position:relative; margin:20px 0 10px; font-size:15px; font-family:Nanum-bold; line-height:36px; text-align:left; text-transform:none; cursor:pointer;} #wrap #header nav .util_wrap ul li.sub-menu ul li a:hover {background:none; color:#fff; text-decoration:underline; box-shadow:none !important} #wrap #header nav .util_wrap ul li.sub-menu ul li a:after {content:""; display:block; position:absolute; left:0; bottom:0; background:none;} #wrap #header nav .util_wrap ul li.sub-menu ul li ul {position:static; padding:0; margin-top:0px; margin-bottom:30px; border:0; background:none; box-shadow:none;} #wrap #header nav .util_wrap ul li.sub-menu ul li ul li {float:none; display:block; width:100%; background:none;} #wrap #header nav .util_wrap ul li.sub-menu ul li ul li a {padding-bottom:0; margin-top:0; margin-bottom:0px; font-size:14px; line-height:24px; font-family:Nanum-regular; font-weight:400; cursor:pointer;} #wrap #header nav .util_wrap ul li.sub-menu ul li ul li a:after {display:none;} #wrap #header nav .util_wrap ul li.sub-menu ul li ul li a:hover {color:#fff; text-decoration:underline; box-shadow:none;} #wrap #header nav .util_wrap ul li.sub-menu.m01 li a {margin-left:80px; margin-bottom:20px;} #wrap #header nav .util_wrap ul li.sub-menu.m02 li a {margin:30px 0 0 70px; line-height:15px;} #wrap #header nav .util_wrap ul li.sub-menu.m02 li:last-child {margin-bottom:30px;} #wrap #header nav .util_wrap ul li.sub-menu.m03 li a {margin-left:70px; margin-bottom:20px;} #wrap #header nav .util_wrap ul li.sub-menu.m04 li a {margin-left:130px; margin-bottom:20px;} #wrap #header nav .util_wrap ul li.sub-menu.m05 li a {margin-left:130px; margin-bottom:20px;/* visibility:hidden; */} #wrap #header nav .util_wrap ul li.sub-menu.m06 {visibility:hidden;} /* Footer */ #wrap #footer {position:relative; width:100%; padding:0; /*background:#ececec;*/ border-top:4px solid #212121; color:#888; line-height:1.4em;} #wrap #footer .foot_info {max-width:1300px; margin:0 auto; padding:30px 0; background:url('../img/common/btm_logo.gif') 0 34px no-repeat; min-height:60px;} #wrap #footer .foot_info .detail {float:left; padding:0 0 0 80px;} #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; width:100%; padding:0 0 0 80px; font-size:13px;} @media screen and (max-width:1028px){ /* Footer */ #wrap #footer .foot_info {width:90%;; background:url('../img/common/btm_logo.gif') 100px 34px no-repeat; !important;} } @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.sub-menu ul {left:-200px; right:-20px;} /* 컨텐츠 공통 */ body {font-size:14px;} /* 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 nav .lnb {display:none;} #wrap #header {top:0;} #wrap #header nav .util_wrap ul li.sub-menu.m05 a:after {background:none;} #wrap #header nav .util_wrap ul li.sub-menu.m06 a:after {background:none;} #wrap #header nav .util_wrap ul li.sub-menu.m05:hover a:after {background:none;} #wrap #header nav .util_wrap ul li.sub-menu.m06:hover a:after {background:none;} #wrap #header 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 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 nav .util_wrap ul li.sub-menu.m05 a:hover {color:#fff !important;} #wrap #header nav .util_wrap ul li.sub-menu.m06 a:hover {color:#fff !important;} #wrap #container{margin-top:50px} /* GNB */ /* #wrap #header.fixed nav h1 a {height:50px} #wrap #header.fixed nav .util_wrap > ul > li > a {line-height:44px} */ #wrap #header nav h1 a img {left:0px; width:115px; height:30px; margin-top:-70px} #wrap #header nav .btn_nav {display:block;} #wrap #header nav .btn_nav.open {position:absolute; top:-50px; 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:100; top:0; right:-240px; bottom:0; left:auto; width:240px; background:#1f1f1f;} #wrap #header nav .util_wrap ul {padding-top:51px} #wrap #header nav .util_wrap ul li {float:none; width:auto !important; margin:0 !important; border-bottom:1px solid #3d3d3d} #wrap #header nav .util_wrap ul li:first-child {border-top:1px 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:20px 0 !important; border:0; background:#3d3d3d !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:20px !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:0 !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;} #wrap #footer .foot_info .copy {padding:0;} #wrap #footer .foot_info .detail2 {float:none; display:block; margin:0 0 10px;} } @media screen and (max-width:979px){ } @media screen and (max-width:752px){ /* 컨텐츠 공통 */ body {font-size:14px;} } @media screen and (max-width:320px){ /* 컨텐츠 공통 */ body {line-height:22px;} #wrap #footer .foot_info .detail br {display:block;} }