/* ===================== */ /* === 작성자 : dj2 ======= */ /* ===================== */ /* reset */ *, html, body {margin:0;padding:0; box-sizing:border-box;} html,body {height:100%;} a, img {border:0;} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1,h2,h3,h4,h5,h6,b,strong {font-weight:bold; font-weight:600;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} button {cursor:pointer} #header ol, #header ul, #footer ol, #footer ul, ul.stnone {list-style:none;} a {text-decoration:none;} img {line-height:0; vertical-align:top;} form, fieldset {width:100%; display:block;} table {border-collapse:collapse; border-spacing:0;} img.fx {width:100%;} pre {overflow:hidden; white-space:pre-line; word-break:break-all;} em, address {font-style: normal;} .nonei {display: none !important;} @font-face { font-family: 'NanumSquare'; src: url(../fonts/NanumSquare.eot); src: url(../fonts/NanumSquare.eot?#iefix) format('embedded-opentype'), url(../fonts/NanumSquare.woff) format('woff'), url(../fonts/NanumSquare.ttf) format('truetype'); } /* common */ body, textarea,input, pre {line-height:1; font-size:100%; font-family:'NanumSquare',HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif, dotum; color:#d54255; } .inner {max-width:1200px; margin:0 auto;} .sdonly {position:absolute; top:0 !important; left:0 !important; line-height:0 !important; font-size:0 !important; width:0 !important; height:0 !important; color:transparent !important; overflow:hidden !important;} .sdonly:before, .sdonly:after {display:none !important;} .none {display:none;} ::selection {background:#2cbd62; color:#fff;} .font-none {font-family: dotum !important;} #header, #main-slider, #sub-content > header, .history-area, #mb-gnb, #bs-step h2, #bs-bbs h2, #b-map h2 {word-break: keep-all;} /* loading */ /* icon */ .scroll-btn:before, #latest-area .slider-btn a, #main-gallery .bx-controls .bx-controls-direction a, .icon {background:url(../img/common/icon.png) no-repeat; display:inline-block; overflow: hidden; text-indent: -9999px; color:transparent;} i.mnb01 {background-position: 0 0;} i.mnb02 {background-position: -82px 0;} i.mnb03 {background-position: -164px 0;} i.mnb04 {background-position: -246px 0;} i.mnb05 {background-position: -328px 0;} i.mnb06 {background-position: 0 0;} i.mnb07 {background-position: -82px -82px;} i.mnb08 {background-position: -164px -82px;} i.mnb09 {background-position: -246px -82px;} i.mnb10 {background-position: -328px -82px;} i.mnb11 {background-position: -410px -82px;} i.mnb12 {background-position: -492px -82px;} i.mnb13 {background-position: -574px -82px;} i.mnb14 {background-position: 0px -164px;} i.mnb15 {background-position: -82px -164px;} i.mnb16 {background-position: -164px -164px;} i.mnb17 {background-position: -246px -164px;} i.mnb18 {background-position: -328px -164px;} i.mnb19 {background-position: 0 -246px;} i.mnb20 {background-position: -82px -246px;} i.mnb21 {background-position: -164px -246px;} i.mnb22 {background-position: -246px -246px;} i.lnb01 {background-position:-20px -422px} i.lnb02 {background-position:-141px -422px} i.lnb03 {background-position:-260px -421px} i.lnb04 {background-position:-380px -420px} i.lnb05 {background-position:-500px -424px} i.lnb06 {background-position:-621px -420px} i.lnb07 {background-position:-738px -421px;} i.lnb08 {background-position:-861px -420px;} i.line9 {background-position: -200px -700px; width:38px; height:22px;} i.line5 {background-position: -200px -722px; width:38px; height:22px;} i.bus { background-position: -200px -744px; width:28px; height:34px;} /* color */ .bg-gray {background: #333;} .bg-red {background:#d23145; } a.btn {color:#fff;} .bx-wrapper {position: relative;margin: 0 auto 0px;padding: 0;*zoom: 1;} .bx-wrapper .bx-viewport {-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);} .dis-tb {display: table; height:100%;} .dis-tb-cell {display: table-cell; vertical-align: middle;} .row {} .row:after, .row:before {content:''; display: block; clear:both;} .row > * {float: left;} .u6 {width:50%;} .u12 {width:100%;} .u3 {width:25%;} .u4 {width:33.3%;} .u4:last-child {width:33.4%;} .btn-st01 {background:#d33246; color:#fff; width:162px; height:50px; line-height: 50px; text-align: center; display: inline-block;} .use-a:after, .use-b:before {position: absolute; content:''; display: block;} /* 투명 밑줄 */ u {text-decoration: none; display: inline-block;position: relative;} u:after {position:absolute; content:''; left:0;width:100%; height:1px; background:#fff; opacity: 0.2; bottom:0;} /* ====================== */ /*====== 상단,하단 UI ======= */ /* ====================== */ #header {position: fixed; top:0;left:0;right: 0; background: #fff; z-index:999; border-top:4px solid #d23145; text-align: center; height:92px;} #header .inner {position: relative;} #header #logo {position:absolute; left:0; transition: all 0.2s ease-in-out;z-index:9999;} #header #logo img {width:130;} #header #gnb nav > ul {font-size:0;} #header #gnb nav > ul > li {font-size:20px; display: inline-block; vertical-align: top;} #header #gnb nav > ul > li > a {display:block;padding:1.7em 1.3em; color:#333; font-weight: 600; position:relative; } #header #gnb nav > ul > li > a:focus {color:#d23145} #header #gnb nav > ul > li > a:before {content:''; display: block;width:3px; height:3px; position: absolute;top:48%; left:0; background: #c6c6c6; border-radius: 50%} #header #gnb nav > ul > li:first-child > a:before {display:none;} #header #gnb nav > ul > li > div.subnav {display:none; position: absolute; left:0; right:0; top:auto; background: rgba(68,68,68,0.95); padding:32px 0; font-size:0; } #header #gnb nav > ul > li > div.subnav li { display: inline-block;vertical-align: top;} #header #gnb nav > ul > li > div.subnav li > a {display:block; color:#c6c6c6; font-size:16px; width:148px; border-left:1px solid #5c5c5c; line-height: 1.5; min-height: 142px;} #header #gnb nav > ul > li > div.subnav li:first-child a {border-left:0;} #header #gnb nav > ul > li > div.subnav li > a i {display:block; width:82px; height:82px; background-color: rgba(256,256,256,0.14); border-radius: 50%; border:1px solid #7c7c7c; margin:8px auto 12px;} #header #gnb .bar {position: absolute; bottom:0px; width:72px; margin-left: 1.3em; font-size:20px; height:0px; background: #d23145; display: none; z-index: -1;} #header #fast-nav {position:absolute;right:0;top:19px;} #header #fast-nav li {float: left;} #header #fast-nav li a {display:block; width:130px; height:48px; line-height: 48px;} #footer { z-index: 998; padding-top: 30px;} #footer #fnb {background:#ddd; overflow: hidden;} #footer #fnb ul {float: left;} #footer #fnb ul li {float: left; padding-right:3em; position: relative;} #footer #fnb ul li:after {position: absolute;top:36%; right:1.5em; content:''; display: block; width:1px; background: #bababa; height:0.75em;} #footer #fnb ul li:last-child:after {display: none;} #footer #fnb ul li a { line-height: 54px; color:#666; font-size:14px;} @media screen and (max-width: 420px) { #footer #fnb ul li a {font-size: 12px;} } #footer #fnb .custom-select {float: right; height:54px; width:238px;position: relative;} #footer #fnb .custom-select label, #footer #fnb .custom-select select#familysite {position: absolute; top:0;left:0; width:100%; height:100%;} #footer #fnb .custom-select label {background: #8c8c8c url(../img/common/icon.png) no-repeat 200px -968px; line-height: 54px; color:#fff; font-size:14px; padding:0 30px;} #footer #fnb .custom-select select#familysite {opacity: 0; padding:10px; font-size:17px; line-height: 1.5; } #footer .fin.inner {padding:36px 0; overflow: hidden;} #footer #f_logo9988 {float: left;} #footer #f_logo {float: right; padding-top: 34px;} #footer #f_logo9988 img {width: 101px;} #footer #f_logo img {width: 211px;} #footer #site-info {padding:0 20px; float: left; color:#666; font-size:13px;} #footer #site-info h3 {font-size:15px; font-weight: bold; color:#333; padding: 14px 0; } #footer #site-info span {padding-right:8px;border-right:1px solid #bababa; margin-right:6px;} #footer #site-info span:last-child {border-right:0; margin-right:0; padding-right: 0;} #footer #site-info span a {color:#555;} p.copyright {color: #8e8e8e; padding-top: 14px; } #left-link, #right-link {position:fixed; top:0;bottom:0; background: #fff; width:70px; z-index: 997; height:100%;} #left-link a, #right-link a {display:block; width:27px; height:138px;position: absolute; top:50%;left:50%; overflow: hidden; margin-top: -69px; margin-left: -14px;} #left-link {left:0; } #right-link {right:0;} #mb-nav-btn {display: none; } .bba_category {padding-bottom:30px;} .bba_category ul {overflow: hidden; list-style: none; } .bba_category ul li {float: left; width:20%; display: block; } .bba_category ul li a {display: block; padding:16px 0; text-align: center; font-size:16px; background:#f8f8f8; color:#666; border:1px solid #ddd;margin-left: -1px} .bba_category ul li:first-child a {margin-left: 0} .bba_category ul li a.act {background: #503e3e; color:#fff; border:1px solid #503e3e;} /* ovfer effect 960px 이상에서만 */ @media screen and (min-width:960px) { #footer #fnb ul li a:hover, #footer #fnb ul li a:focus {font-weight: bold;} #header #gnb nav > ul > li > div.subnav li > a:hover, #header #gnb nav > ul > li > div.subnav li > a:focus {color:#fff; text-decoration: underline; transition:color 0.2s ease-in-out;} #header #gnb nav > ul > li > div.subnav li > a:hover i, #header #gnb nav > ul > li > div.subnav li > a:focus i {background-color: #d23145;border:1px solid #d23145; animation: navani 0.3s ease-in-out;} .btn-st01:hover, .btn-st01:focus {background: #aa1f30;} .bg-red:hover, .bg-red:focus {background:#aa1f30;} .bg-gray:hover, .bg-gray:focus {background: #222;} .b_9988_list > li > a {display: block;position: relative;} .b_9988_list > li > a:before, .b_9988_list > li > a:after {position:absolute;top:0;left:0;right:0;bottom:0;content: ''; display: block;transition: all 0.3s ease-in-out;} .b_9988_list > li > a:before { z-index: 99; background:rgba(0,0,0,0.8); opacity: 0; } .b_9988_list > li > a:after {z-index: 100; background: url(../img/common/plus.png) no-repeat 50% 50%; opacity: 0;transform: rotate(180deg);} .b_9988_list > li > a:hover:before, .b_9988_list > li > a:hover:after {opacity: 1;} .b_9988_list > li > a:hover:after {transform: rotate(0deg);} } /* ===================== */ /* PC 공통 */ /* ===================== */ @media screen and (min-width:1260px) { .pd-only, .mb-only {display: none !important;} #mb-gnb, #mb-gnb-copy {display: none;} } @media screen and (max-width:1420px) { #left-link, #right-link {display: none !important;} } /* ===================== */ /* mobile,pad 공통 */ /* ===================== */ @media screen and (max-width:1259px) { .r-none {display: none} .u6-r {width:50%;} .u12-r {width:100%;} .u3-r {width:25%;} .u4-r {width:33.3%;} .u4-r:last-child {width:33.4%;} .inner {max-width:100%;} #gnb, #fast-nav, #fix-nav, .pc-only, #left-link, #right-link {display: none !important;} #mb-nav-btn {display: block;position: absolute; top:9px; right:10px; width:64px; height:64px;background:url(../img/common/nav_icon.png) no-repeat 50% 50%; z-index: 8900; color:transparent;} #mb-nav-close {position:absolute; top:0;left:-86px;width:86px; height:86px; color:transparent;background:#aa2e3f url(../img/common/nav_icon_close.png) no-repeat 50% 50%;} .ov-bg {background:rgba(0,0,0,0.8); top:0;left:0; right:0; height:100%; z-index: 1000; position: fixed; display: none;} #header {height:86px; padding:0 30px;} #header #logo {top:0;} #mb-gnb {background: #fff; position: fixed; top:0px; right:-100%; width:70%;max-width:440px; bottom:0; z-index: 9000; } #mb-gnb-copy {z-index: 8000;position: fixed; top:0px; right:-100%; width:70%;max-width:440px; } #mb-gnb #mb-nav nav ul li {float: none; display: block;} #mb-gnb #mb-nav nav > ul {padding:16px 30px;} #mb-gnb #mb-nav nav > ul > li {} #mb-gnb #mb-nav nav > ul > li > a {padding:1.2em 1em; text-align: left; display:block; color:#333; font-weight: 600; position:relative; font-size: 20px;border-bottom:1px solid #999;} #mb-gnb #mb-nav nav > ul > li > a:before {content:''; display: block;width:4px; height:4px; position: absolute;top:46%; left:0; background: #c6c6c6; border-radius: 50%} #mb-gnb #mb-nav nav > ul > li:first-child > a:before {display:block;} #mb-gnb #mb-nav nav > ul > li > div.subnav {display: none; padding:0 !important;} #mb-gnb #mb-nav nav > ul > li > div.subnav li { margin-bottom: 1px; } #mb-gnb #mb-nav nav > ul > li > div.subnav li a { background: #ebebeb; color:#686868; font-size:20px; display: block; padding:1.2em 1.4em; font-weight: normal;} #mb-gnb #mb-nav nav > ul > li > div.subnav li a i {display: none !important;} #mb-gnb #mb-fast-nav {background: #d54255; height:86px;} #mb-gnb #mb-fast-nav ul {text-align: center;} #mb-gnb #mb-fast-nav li {display:block;width:50%; position: relative; float: left;} #mb-gnb #mb-fast-nav li a {background: none; line-height: 86px; width:auto; font-size:20px; height:100%;} #mb-fast-nav li:first-child a:before {content:''; display: block; width:1px; height:1em; background: #eaa1aa; position: absolute; right:0; top:1.6em; font-size:20px;} } /* pad */ @media screen and (min-width:768px) and (max-width:1259px){ .u6-pd {width:50%;} .u12-pd {width:100%;} .u3-pd {width:25%;} .u4-pd {width:33.3%;} .u4-pd:last-child {width:33.4%;} .ta-c-pd {text-align: center;} .mb-only {display: none !important} #footer {margin-top:30px;} #footer #fnb ul li:first-child {margin-left:2em;} #footer #site-info span {display: block; margin-right:0; margin-bottom: 10px; border:0;} #footer #f_logo9988 img {width: 71px;} #footer #f_logo {padding-top: 8px;} #footer #f_logo img {width: 181px;} } /*mobile */ @media screen and (max-width:767px) { .mb-none {display: none !important;} .u6-mb {width:50%;} .u12-mb {width:100%;} .u3-mb {width:25%;} .u4-mb {width:33.3%;} .u4-mb:last-child {width:33.4%;} #footer #fnb {background:none;} #footer #fnb ul {background:#ddd; width:100%; padding-left: 3em; float: none; overflow: hidden;} #footer #fnb ul li {padding-right: 1em;} #footer #fnb ul li::after {right:0.5em; } #footer #fnb .custom-select {float: none; display: block; margin: 1em auto;} #footer .inner.fin {padding: 0 0 30px;} #footer #f_logo9988 { padding-left: 30px; } #footer #f_logo { padding-top:20px; padding-right: 30px;} #footer #site-info {padding: 0 30px;} #footer #site-info span {padding-bottom: 1em; display: inline-block; border-right:0;} .pd-only {display: none !important;} a,button {outline: none;} #footer #site-info {font-size:12px;} .bba_category ul li:nth-child(1) {width:33.3%;} .bba_category ul li:nth-child(2) {width:33.3%;} .bba_category ul li:nth-child(3) {width:33.4%;} .bba_category ul li:nth-child(4) {width:50%;} .bba_category ul li:nth-child(4) a {margin-left: 0;} .bba_category ul li:nth-child(5) {width:50%;} .bba_category ul li:nth-child(4) a, .bba_category ul li:nth-child(5) a {margin-top: -1px} } @keyframes navani{ 0% {transform: scaleX(1);} 25% {transform: scaleX(0); background-color: rgba(256,256,256,0.14);border:1px solid #7c7c7c;} 50% {transform: scaleX(1);background-color: rgba(256,256,256,0.14);border:1px solid #7c7c7c;} 75% {transform: scaleX(0); background-color: #d23145;border:1px solid #d23145;} 100% {transform: scaleX(1);background-color: #d23145;border:1px solid #d23145;} } /* 높이에 따른 스크롤 */ @media screen and (min-width:800px) and (max-height:860px){ #main-gallery {min-height: 890px;} #main-content {min-height: 890px;} #main-banner {min-height:100px !important;;} #main-content:after {height:80px !important;} } @media screen and (max-height:600px){ #mb-gnb {overflow-y: scroll;} } /* 인쇄 layout */ @media print { @page {size:auto; margin:20px 0;} body {width:1080px; min-width:1080px; max-width:1080px; font-size:12px; zoom:1; -webkit-print-color-adjust:exact; padding:0 20px;} span, *, div, a, button {-webkit-print-color-adjust:exact; -ms-print-color-adjust:exact;} #header, #logo, #gnb, #fast-nav, #sub-visuarl, #snb, .share, .print, #left-link, #right-link, #sub-content > header:before, #footer, body .b-map-list, #mb-gnb-copy, #mb-nav, #mb-gnb {display: none !important;} .aos-animate, .aos-init {opacity: 1 !important; transform:translate(0px) scale(1) !important;} body #sub-content > header {padding-top: 0;} body .values_box {display: inline-block;width: 100%;} body .values_box li {padding: 40px 20px;float: left;width: 33.3%;border-bottom: 0;border-right: 1px solid #cfcfcf;} body .values_box li:last-child {border-bottom: 0;border-right: 0;} body .values_box li figure {display: block;width: 100%;min-height: 103px;} body .v_b_right {display: block;padding-left: 0;margin-top: 20px;min-height: 74px;} body .value_plus {left: auto;margin-left: 0;right: -15px;bottom: 50%;margin-bottom: -15px;} body .v_animation .v_msgol ol li {top: 0 !important;opacity: 1 !important;} body #b-map #b-map-data table {display: table;} body #b-map-data table {border-spacing: 0; border-collapse: collapse; border-top:2px solid #333; width:100%; text-align: center;} body #b-map-data table th, #b-map-data table td {border-bottom:1px solid #ddd; padding:22px;border-right: 1px solid #ddd;line-height: 18px;} body #b-map-data table tr th:last-child, #b-map-data table tr td:last-child {border-right:0;} body #b-map-data table th {font-size:18px; color:#333; background:#f8f8f8; } body #b-map-data table td {font-size:16px;word-break: keep-all;} body #b-map-data table tfoot th, #b-map-data table tfoot td {background:#fbf1f2; color:#d23145; font-weight: normal; font-size:16px;} body .bv_ttl {padding-left: 75px;} body .b_9988 {padding:40px 30px 0;} body .b_9988_list > li {margin-bottom:30px; width:48%; margin-right:3.2%; float:left} body .b_9988_list > li:nth-child(2n) { margin-right:0;} body .b_9988_txt {padding:20px 20px 70px;} body .b_9988_list {position:relative;} body .b_9988_list:after {content:''; display:block;clear:both;} body br.mb-none {display: none;} body h3.tt24 {margin-bottom: 30px;} body .profile-cob:after, .profile-cob:before {animation: none;display: none !important;} body #organization .or-side:before {position: absolute;display: block;content: '';left: 0;margin-left: -30px;top: 50%;height: 1px;background: #c4c4c4;z-index: -1 !important;width: 0;transition: width 0.3s 1s ease-in-out;} body #organization .or-side.aos-animate:before {width: 30px;} body #organization .o-row-bot ul li:nth-child(1):before,body #organization .o-row-bot ul li:nth-child(2):before,body #organization .o-row-bot ul li:nth-child(3):before,body #organization .o-row-bot ul li:nth-child(4):before,body #organization .o-row-bot ul li:nth-child(5):before,body #organization .o-row-bot ul li:nth-child(6):before {content: "";position: absolute;width: 150%;left: 50%;top: -20px;height: 16px;border-left: 1px solid #ccc;border-top: 1px solid #ccc;z-index: -1;} body #organization .o-row-bot ul li:nth-child(7):before {content: "";position: absolute;z-index: -1;width: 1px;top: -34px;height: 30px;background-color: #ccc;left: 50%;margin-left: -.5px;} body #organization .o-row-bot ul li:nth-child(8):before,body #organization .o-row-bot ul li:nth-child(9):before,body #organization .o-row-bot ul li:nth-child(10):before,body #organization .o-row-bot ul li:nth-child(11):before,body #organization .o-row-bot ul li:nth-child(12):before,body #organization .o-row-bot ul li:nth-child(13):before {content: "";position: absolute;width: 150%;right: 50%;top: -20px;height: 16px;border-right: 1px solid #ccc;border-top: 1px solid #ccc;z-index: -1;} }