body {font-family:'Nanum Gothic', sans-serif; min-width:1400px; font-size:1.7rem;} * {font-family:'Nanum Gothic', sans-serif;} @media all and (max-width:1024px) { body {min-width:320px; font-size:1.1rem;} } /* -------------------------------------------------------------------------- 1.0 Header -------------------------------------------------------------------------- */ .fix-layout {max-width:1400px; margin-left:auto; margin-right:auto;} #header_side {display:block; position:absolute; top:9rem; right:50%; margin-right:-700px;} #top_search_box {display:inline-block; position:relative; vertical-align:middle; z-index:1;} #top_search_box dt button {display:block; width:2.5rem; height:2.5rem; overflow:hidden; text-indent:-999px; background:url('/resource/images/common/ico_search_white.png') no-repeat 50% 50%; text-align:left;} #top_search_box dd {display:none; position:absolute; background:#1f4bb4; padding:2.5rem 0 2.5rem 9rem; box-sizing:border-box; line-height:5rem;} #top_search_box dd .toggle-search-control {display:block; position:absolute; top:0; left:0; bottom:0; width:9rem; background:url('/resource/images/common/ico_searchbox_close.png') no-repeat 50% 50%; text-align:left; text-indent:-999px; overflow:hidden;} #top_search_box dd fieldset {display:block; position:relative; max-width:495px; box-sizing:border-box; padding-left:10rem; padding-right:6.5rem;} #top_search_box dd fieldset:after {content:""; display:block; position:absolute; top:.9rem; bottom:.9rem; width:1px; background:#cbcbcb; right:6.5rem;} #top_search_box dd fieldset legend {display:block; position:absolute; line-height:5rem; text-align:center; width:10rem; color:#fff; left:0; top:0; opacity:1; font-size:1.8rem;} #top_search_box dd input[type="text"] {display:block; width:100%; height:5rem; font-size:1.4rem; color:#989898; box-sizing:border-box; border:none; background:#fff;} #top_search_box dd input[type="submit"] {display:block; position:absolute; top:0; bottom:0; right:0; width:6.5rem; background:url('/resource/images/common/ico_searchbox_submit.png') no-repeat 50% 50% #fff; overflow:hidden; text-indent:-999px; text-align:left;} #top_search_box.open dd {display:block;} /**************************************************** PC Layout ****************************************************/ @media all and (min-width:1025px) { #header {position:fixed; top:0; left:0; right:0; z-index:1000; padding-top:5rem; transition:all .3s; -webkit-transition:all .3s;} #header + div{padding-top:0; transition:all 0.3s;} #header.scroll + div{padding-top:140px;} #mobile_header {display:none; position:fixed; top:0; left:0; right:0; z-index:10;} #header .logo {display:block; position:absolute; top:8.5rem; left:50%; margin-left:-700px;} #header .logo a {display:block; width:202px; height:29px; background:url('/resource/images/common/logo.png') no-repeat 50% 50%; overflow:hidden; text-indent:-999px; background-size:contain;} #header .logo .gnb-control {display:none;} #tnb {position:absolute; top:0; left:0; right:0; background:rgba(0, 0, 0, .1); text-align:right; border-bottom:1px solid rgba(255,255,255,.2); transition:all .3s; -webkit-transition:all .3s;} #tnb ul {float:right;} #tnb ul:after {content:""; display:block; clear:both;} #tnb a {display:block; padding:0 3rem; color:#f0f0f0; line-height:5rem; transition:all .3s; -webkit-transition:all .3s; font-size:1.6rem;} #tnb a:hover {text-decoration:underline;} #tnb br {display:none !important;} #tnb li {display:block; position:relative; vertical-align:middle; float:left;} #tnb li:before {content:""; display:block; position:absolute; top:50%; margin-top:-.4rem; left:0; height:.8rem; width:1px; background:rgba(255,255,255,.3);} #tnb li + li {margin-left:1px;} #site_control {display:block; position:absolute; top:8.5rem; right:50%; margin-right:-700px; padding-right:9.4rem;} #site_control > a {display:inline-block; position:relative; vertical-align:middle; color:#fff; padding-left:2.5rem; line-height:3.6rem; font-size:1.5rem;} #site_control > a + a {margin-left:3.9rem;} #site_control > a:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-0.95rem; width:1.9rem; height:1.9rem; background:url('/resource/images/common/spr_tnb.png') no-repeat .2rem 50%;} #site_control #top_login:before {} #site_control #top_service:before {background-position:-9.8rem 50%;} #top_langage {display:inline-block; position:relative; vertical-align:middle; margin-left:2.33rem;} #top_langage dt {display:block; position:relative; } #top_langage button {display:block; position:relative; width:8rem; height:3.6rem; border:1px solid #fff; color:#fff;} #top_langage button:before {content:""; display:inline-block; vertical-align:middle; width:1.6rem; height:1.6rem; background:url('/resource/images/common/spr_tnb.png') no-repeat 100% 50%; margin-right:.5rem;} #top_langage dd {position:absolute; top:100%; left:0; right:0; border:1px solid #fff; border-top-width:0;} #top_langage dd ul {display:none;} #top_langage dd a {display:block; text-align:center; line-height:3.5rem; color:#fff; font-size:1.5rem;} #top_langage dd a:hover {background:#fff; color:#333;} #top_site_map {display:inline-block; position:relative; margin-left:2.0rem; width:1.66rem; height:2.4rem; overflow:hidden; text-indent:-999px; vertical-align:middle;} #top_site_map:before, #top_site_map:after, #top_site_map i {content:""; display:block; position:absolute; height:2px; background:#fff; left:0; right:0; transition:.3s all; -webkit-transition:.3s all; top:50%; margin-top:-1px;} #top_site_map:before {margin-top:-9px;} #top_site_map:after {margin-top:7px;} #top_site_map i {right:10px;} #top_site_map:hover:before {left:10px; right:0;} #top_site_map:hover:after {left:10px; right:0;} #top_site_map:hover i {left:0px; right:0;} #top_search_box dd {position:fixed; top:5rem; right:0; width:670px; height:10rem; border-top-left-radius:9em; border-bottom-left-radius:9em;} #gnb_group {} #gnb {margin-left:27rem;} #gnb_group:after {content:""; display:block; clear:both;} #gnb .sub-menu-wrap {display:none;} #gnb li.active > .sub-menu-wrap {display:block;} #gnb li.active > a {text-decoration:underline;} #gnb .dept-2-box a:hover {text-decoration:underline;} #gnb > li {display:block; float:left; padding:0 2.8rem;} #gnb > li > a {display:block; position:relative; line-height:10rem; font-size:2.2rem; color:#fff; font-weight:700;letter-spacing:-0.1rem;} #gnb > li > .sub-menu-wrap {position:absolute; left:0; right:0; background:#fff;} #gnb > li > .sub-menu-wrap > .title {display:block; position:absolute; top:0; left:0; bottom:0; width:26rem; color:#fff; padding:3.4rem 2.125rem 0; background:url('/resource/images/common/bak_gnb_title.png') #1d47ac; box-sizing:border-box;} #gnb > li > .sub-menu-wrap > .title p {font-size:3.4rem; font-weight:800; padding-bottom:1.5rem;} #gnb > li > .sub-menu-wrap > .title span {display:block; position:relative; font-size:1.5rem; word-break:keep-all; padding-bottom:13.3rem;} #gnb > li > .sub-menu-wrap > .title span:after {content:""; display:block; position:absolute; right:0; bottom:0; width:10rem; height:10rem; background:url('/resource/images/common/ico_gnb_title_01.png') no-repeat 50% 50%; background-size:contain;} #gnb > li + li > .sub-menu-wrap > .title span:after {background-image:url('/resource/images/common/ico_gnb_title_02.png');} #gnb > li + li + li > .sub-menu-wrap > .title span:after {background-image:url('/resource/images/common/ico_gnb_title_03.png');} #gnb > li + li + li + li > .sub-menu-wrap > .title span:after {background-image:url('/resource/images/common/ico_gnb_title_04.png');} #gnb .dept-2-box {position:relative; box-sizing:border-box; max-height:65rem; overflow:auto; border-bottom:1px solid #1f4bb4;} #gnb .dept-2-box:before {content:""; display:block; position:absolute; left:0; right:0; height:1px;} #gnb .dept-2-box:before {top:0; background:#d8d8d8;} /*#gnb .dept-2-box:after {bottom:0; background:#1f4bb4;}*/ #gnb .dept-2-box {margin-left:26rem;} #gnb .dept-2-box > li > a {display:block; position:absolute; top:1.4rem; left:1.4rem; width:27.4rem; height:6rem; line-height:6rem; box-sizing:border-box; padding:0 2.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#000;} #gnb .dept-2-box > li.active > a {background:url('/resource/images/common/ico_gnb_arrow_white.png') no-repeat right 1.5rem top 50% #1f4bb4; coloR:#fff; font-weight:600; text-decoration:none;} #gnb .dept-2-box > li > .sub-menu-wrap {position:relative; margin-left:300px; border-left:1px solid #d8d8d8; overflow:hidden;} #gnb .dept-2-box > li + li > a {top:8.8rem;} #gnb .dept-2-box > li + li + li > a {top:15.6rem;} #gnb .dept-2-box > li + li + li + li > a {top:22.5rem;} #gnb .dept-2-box > li + li + li + li + li > a {top:29.2rem;} #gnb .dept-2-box > li + li + li + li + li + li > a {top:36rem;} #gnb .dept-3-box {position:relative; overflow:hidden; max-width:1200px; min-height:50rem; z-index:0; margin-top:-1px; font-size:0;} #gnb .dept-3-box:before {content:""; display:block; position:absolute; top:0; bottom:0; left:25%; right:50%; border:1px solid #d8d8d8; border-top-width:0; border-bottom-width:0; z-index:-1;} #gnb .dept-3-box:after {content:""; display:block; position:absolute; top:0; bottom:0; left:75%; right:0; border:1px solid #d8d8d8; border-top-width:0; border-bottom-width:0; z-index:-1;} #gnb .dept-3-box > li {display:inline-block; position:relative; width:25%; vertical-align:top; margin-top:1px; box-sizing:border-box; padding:3rem 2rem 3rem 3rem;} #gnb .dept-3-box > li:before {content:""; display:block; position:absolute; top:0; left:0; width:1400px; height:1px; background:#d8d8d8;} #gnb .dept-3-box .sub-menu-wrap {display:block;} #gnb .dept-3-box > li > h3 > a {display:block; position:relative; padding-left:1rem; color:#1f4bb4; font-size:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #gnb .dept-3-box > li > h3 > a:before {content:""; display:block; position:absolute; width:4px; height:4px; top:50%; left:0; margin-top:-2px; background:#1f4bb4;} #gnb .dept-4-box {margin-left:.68rem; padding-top:.3rem;} #gnb .dept-4-box > li > a {display:block; padding:.2rem 0; color:#575757; overflow:hidden; font-size:17px; text-overflow:ellipsis; white-space:nowrap;} #gnb .dept-4-box > li.active > a {color:#000;} #gnb .dept-5-box {display:none;} #header.fix {background:#ffffff; border-bottom:1px solid #d8d8d8;} #header.fix .logo a {background-image:url('/resource/images/common/m_logo.png');} .fix #tnb {background:#183064;} .fix #tnb li:before {opacity:0;} .fix #tnb li a:hover {background:#315ecb;} .fix #tnb li + li a:hover {background:#1d47ac;} .fix #tnb li + li + li a:hover {background:#315ecb;} .fix #tnb li + li + li + li a:hover {background:#1d47ac;} .fix #tnb li + li + li + li + li a:hover {background:#315ecb;} .fix #gnb > li > a {color:#000;} .fix #site_control > a, .fix #top_langage button {color:#575757;} .fix #top_langage button, .fix #top_langage dd {border-color:#888888;} .fix #top_langage dd {background:#fff;} .fix #top_langage dd a {color:#575757;} .fix #top_search_box dt button {background-image:url('/resource/images/common/ico_search_gray.png');} .fix #top_site_map:before, .fix #top_site_map:after, .fix #top_site_map i {background:#888;} .fix #site_control > a:before, .fix #top_langage button:before {background-image:url('/resource/images/common/spr_tnb_gray.png');} /* 동영상 자막 레이아웃*/ div.subtitles{padding:20px; background-color:#efefef;} } @media all and (max-width:1440px) and (min-width:1025px) { #header .logo {left:2rem; margin-left:0;} #site_control {right:2rem; margin-right:0;} #header_side {right:2rem; margin-right:0;} #gnb > li > .sub-menu-wrap > .title {width:23rem;} #gnb .dept-2-box {margin-left:23rem;} } @media all and (max-width:1320px) and (min-width:1025px) { #gnb {margin-left:25rem;} #gnb > li {padding:0 1rem;} #gnb .dept-3-box > li {width:33.33%;} #gnb .dept-3-box:before {left:33.33%; right:33.33%;} #gnb .dept-3-box:after {display:none;} } @media all and (max-width:1200px) and (min-width:1025px) { #header .logo a {width:160px;} #top_langage, #site_control > a + a {margin-left:1rem;} #site_control {padding-right:7rem;} #top_site_map {margin-left:1rem;} #gnb {margin-left:20rem;} #gnb > li {padding:0 1rem;} #gnb > li > a {font-size:2rem;} } @media all and (max-width:1170px) and (min-width:1025px) { #gnb .dept-3-box > li {width:50%;} #gnb .dept-3-box:before {left:50%; right:0%; border-right-width:0;} #gnb .dept-3-box:after {display:none;} } /**************************************************** Mobile Layout ****************************************************/ @media all and (max-width:1024px) { #mobile_header {display:block; background:#fff; height:4.5rem;} #mobile_header .logo {position:relative; height:100%;} #mobile_header .logo a {display:block; position:absolute; top:0; bottom:0; height:auto; left:50%; margin-left:-5.05rem; background:url('/resource/images/common/m_logo.png') no-repeat 50% 50%; background-size:contain; width:10.1rem; text-indent:-999px; overflow:hidden;} #control_gnb {display:block; position:absolute; top:0; left:0; width:4.5rem; height:4.5rem; text-align:left; overflow:hidden; text-indent:-999px;} #control_gnb:before, #control_gnb:after, #control_gnb i {content:""; display:block; position:absolute; height:2px; background:#888888; left:1rem; right:1.65rem; transition:.3s all; -webkit-transition:.3s all; top:50%; margin-top:-1px;} #control_gnb:before {margin-top:-.6rem;} #control_gnb:after {margin-top:.55rem;} #control_gnb i {right:2.65rem;} #control_gnb:hover:before {left:1.65rem; right:1.65rem;} #control_gnb:hover:after {left:1.65rem; right:1.65rem;} #control_gnb:hover i {left:1rem; right:1.65rem;} .mo-gnb-open #header_detail {left:0;} #header_detail {display:block; position:fixed; top:0; bottom:0; width:100%; left:-100%; background:#fff; z-index:10000; transition:all .3s; -webkit-transition:all .3s;} #header_detail .logo {position:relative; padding:1.35rem 1rem;} #header_detail .logo:after {content:""; display:block; position:absolute; left:1rem; right:1rem; bottom:0; height:1px; background:rgba(255, 255, 255, .2);} #header_detail .logo a {display:block; width:10.1rem; height:1.45rem; background:url('/resource/images/common/logo.png') no-repeat 50% 50%; overflow:hidden; text-indent:-999px; background-size:contain;} #header_detail .logo .gnb-control {display:block; position:absolute; top:1rem; right:1rem; width:2.1rem; height:2.1rem; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); overflow:hidden; text-indent:-999px;} #header_detail .logo .gnb-control:before, #header_detail .logo .gnb-control:after {content:""; display:block; position:absolute; background:#fff;} #header_detail .logo .gnb-control:before {left:0; right:0; top:50%; margin-top:-1px; height:2px;} #header_detail .logo .gnb-control:after {top:0; bottom:0; left:50%; margin-left:-1px; width:2px;} #header_side {top:0 !important; right:0; z-index:11; margin-right:0;} #top_search_box dt button {width:4.5rem; height:4.5rem; background:none !important;} #top_search_box dt button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin-top:-.825rem; margin-left:-.8rem; width:1.6rem; height:1.65rem; background:url('/resource/images/common/ico_search_gray.svg') no-repeat 50% 50%; background-size:contain;} #top_search_box dd {position:fixed; top:0; left:0; right:0; height:4.5rem; padding:1rem 1rem 1rem 4.5rem; line-height:2.5rem;} #top_search_box dd .toggle-search-control {width:4.5rem;} #top_search_box dd fieldset {padding-left:5rem; padding-right:2.5rem; max-width:100%;} #top_search_box dd fieldset:after {right:2.5rem;} #top_search_box dd fieldset legend {line-height:2.5rem; width:5rem; font-size:1rem;} #top_search_box dd input[type="text"] {height:2.5rem; font-size:1rem;} #top_search_box dd input[type="submit"] {width:2.5rem; min-width:0; padding:0; background-size:1.2rem 1.2rem;} #top_site_map {display:none;} #header_detail .logo, #site_control, #tnb {background:#1f4bb4;} #site_control {display:block; position:relative; padding:1rem; z-index:2; border-bottom:.2rem solid #fff; top:auto !important;} #site_control:after {content:""; display:block; clear:both;} #top_login {display:block; float:right; position:relative;padding:0 1.5rem; font-size:1rem; height:2.25rem; border:1px solid #fff; color:#fff; text-align:center; line-height:2.15rem;} #top_service {display:none;} #top_langage {display:block; position:relative; float:left; vertical-align:middle;} #top_langage dt {display:block; position:relative; } #top_langage button {display:block; position:relative; font-size:1rem; min-width:5rem; padding:0 2rem 0 1rem; height:2.25rem; border:1px solid #fff; color:#fff;} #top_langage button:after {content:""; display:block; position:absolute; top:0; bottom:0; width:.6rem; right:.5rem; background:url('/resource/images/common/ico_lang_select.png') no-repeat 50% 50%; background-size:contain;} #top_langage dd {position:absolute; top:100%; left:0; right:0; border:1px solid #fff; border-top-width:0; background:#1f4bb4;} #top_langage dd ul {display:none;} #top_langage dd a {display:block; text-align:center; line-height:2rem; color:#fff;} #top_langage dd a:hover {background:#fff; color:#333;} #header #tnb {display:block !important; position:relative; text-align:right; border-bottom:1px solid rgba(255,255,255,.3); transition:all .3s; -webkit-transition:all .3s; z-index:1;} #tnb a {display:block; padding:1.3rem 0; color:#fff; transition:all .3s; -webkit-transition:all .3s; font-size:1.1rem; line-height:1.4em;} #tnb a:hover {text-decoration:underline;} #tnb ul {display:table; width:100%; table-layout:fixed;} #tnb li {display:table-cell; position:relative; vertical-align:middle; width:20%; text-align:center; padding:0;} #tnb li {background:#315ecb;} #tnb li + li {background:#1d47ac;} #tnb li + li + li {background:#315ecb;} #tnb li + li + li + li {background:#1d47ac;} #tnb li + li + li + li + li {background:#315ecb;} #gnb_group {position:absolute; top:15.2rem; bottom:0; left:0; right:0; padding:1rem; overflow:auto; z-index:0;} #gnb {border-bottom:2px solid #192846;} #gnb .sub-menu-wrap {display:none;} #gnb a {display:block; position:relative;} #gnb li.open > .sub-menu-wrap {display:block;} #gnb > li + li {border-top:2px solid #192846;} #gnb > li > a {font-weight:600; color:#192846; font-size:1.5rem; padding:1.4rem 0;} #gnb > li.open > a {font-weight:800;} #gnb > li > .sub-menu-wrap > .title {display:none;} #gnb .dept-2-box > li > a {font-size:1.1rem; color:#000000; padding:1rem 1.45rem 1rem 1rem;} #gnb .dept-2-box > li > a:before {content:""; display:block; position:absolute; width:.75rem; height:.75rem; top:50%; margin-top:-.375rem; right:1.45rem; background:url('/resource/images/common/ico_gnb_dep2.svg') no-repeat 50% 50%; background-size:contain;} #gnb .dept-2-box > li.open > a {background-color:#1f4bb4; color:#fff; font-weight:800;} #gnb .dept-2-box > li.open > a:before {background-image:url('/resource/images/common/ico_gnb_dep2_on.svg');} #gnb .dept-2-box > li + li {border-top:1px solid #dadada;} #gnb .dept-2-box > li.open + li {border-top:2px solid #192846;} #gnb .dept-3-box {padding:.5rem 0;} #gnb .dept-3-box > li > h3 > a {padding:.5rem 1.5rem; font-size:1rem; color:#000000;} #gnb .dept-3-box > li > h3 > a:before {content:""; display:block; position:absolute; width:.2rem; height:.2rem; top:50%; margin-top:-.1rem; left:.95rem; background:url('/resource/images/common/ico_gnb_dep3.svg') no-repeat 50% 50%; background-size:contain;} #gnb .dept-3-box > li.open > a {color:#1f4bb4; font-weight:800;} #gnb .dept-3-box > li.open > a:before {background-image:url('/resource/images/common/ico_gnb_dep3_on.svg');} #gnb .dept-3-box .sub-menu-wrap {display:block !important; padding:.5rem 1.5rem;} #gnb .dept-4-box {display:block !important; padding:.5rem 1rem; background:#eaeaea;} #gnb .dept-4-box > li > a {padding:.5rem 1.5rem; font-size:1rem; color:#000000;} #gnb .dept-4-box > li > a:before {content:""; display:block; position:absolute; width:.2rem; height:.2rem; top:50%; margin-top:-.1rem; left:.95rem; background:url('/resource/images/common/ico_gnb_dep3.svg') no-repeat 50% 50%; background-size:contain;} #gnb .dept-4-box > li.open > a {color:#1f4bb4; font-weight:800;} #gnb .dept-4-box > li.open > a:before {background-image:url('/resource/images/common/ico_gnb_dep4_on.svg');} #gnb .dept-5-box {display:none;} #gnb .dept-5-box > a {font-size:.9rem !important; padding:.2rem 1.5rem !important;} #gnb .dept-5-box > a:before {background:none !important;} } /**************************************************** Footer Layout ****************************************************/ #footer {position:relative; background:#192846; color:#a8acb5; padding-bottom:9rem; z-index:10;} #footer .fix-layout {position:relative;} #footer .fnb-box {border-bottom:1px solid rgba(255,255,255,.1); line-height:6.6rem;} #footer .fnb-box:after {content:""; display:block; clear:both;} #footer .fnb-box dl {display:block; position:relative;} #footer .fnb-box dt button {display:block; position:relative; width:100%; height:6.6rem; padding:0 4.2rem; text-align:left; color:#a8acb5; min-width:310px; box-sizing:border-box; background:#101d38; font-size:1.6rem;} #footer .fnb-box dt button:after {content:""; display:block; position:absolute; top:50%; margin-top:-.25rem; right:2.5rem; width:.8125rem; height:.5rem; background:url('/resource/images/common/ico_footer_nav_arrow.svg') no-repeat 50% 50%; background-size:contain;} #footer .fnb-box dd {display:none; position:absolute; left:0; right:0; bottom:100%; background:#101d38; max-height:200px; overflow:auto;} #footer .fnb-box dd a {display:block; position:relative; padding:0 2.6245rem; color:#a8acb5;} #footer .fnb-box dl.open dt button {background:#081123;} #footer .fnb-box dl.open dt button:after {transform:rotate(-180deg); -webkit-transform:rotate(-180deg);} #footer .fnb-box dl.open dd {display:block;} #footer_sns {position:absolute; top:4.4rem; right:50rem;} #footer_sns a {display:inline-block; position:relative; width:4rem; height:4rem; background:no-repeat 50% 50%; background-size:100% auto; overflow:hidden; text-indent:-999px;} #footer_sns a + a {margin-left:.2rem;} #footer_sns a[data-sns="페이스북"] {background-image:url('/resource/images/common/img_sns_facebook.png');} #footer_sns a[data-sns="블로그"] {background-image:url('/resource/images/common/img_sns_blog.png');} #footer_sns a[data-sns="인스타"] {background-image:url('/resource/images/common/img_sns_insta.png');} #footer_sns a[data-sns="유튜브"] {background-image:url('/resource/images/common/img_sns_youtube.png');} #footer_sns a[data-sns="플러스친구"] {background-image:url('/resource/images/common/img_sns_kakao.png');} #footer_work {position:absolute; top:4.4rem; right:15rem; color:#fff;} #footer_work > * {display:block;} #footer_work sup {font-size:1.5rem;} #footer_work div {overflow:hidden;} #footer_work div strong {display:inline-block; vertical-align:middle; font-weight:800; color:#709eed; font-size:3.4rem; letter-spacing:-0.05em;} #footer_work div span {display:inline-block; vertical-align:middle; color:#a7a7a7; font-size:1.4rem; margin-left:1.7rem;} #footer_work p {font-size:1.5rem;} #footer_work p strong {font-size:2.2rem; color:#a9b4c6; font-weight:800; margin-left:.3rem;} #footer_content {padding:4.4rem 0; margin-left:19rem; font-size:1.5rem;} #footer_logo {position:absolute; left:0; top:4.4rem; width:15rem; height:2.2rem; background:url('/resource/images/common/logo.png') no-repeat 50% 50%; background-size:contain;} #footer_wa a {position:absolute;right: 0;top:4.4rem;width: 12rem;height: 8.4rem;background: url('/resource/images/common/wa_mark.gif') no-repeat 50% 50%;background-size: contain;} @media all and (max-width:1230px) { #footer_logo {left:1rem;} #footer_work {right:15rem;} } @media all and (min-width:1025px) { #family_site {float:right; width:auto;} #customer_site {float:left; width:auto;} #footer #customer_site dt {display:none;} #footer #customer_site dd {display:block; position:relative; bottom:auto; left:auto; background:transparent;} #footer #customer_site dd li {display:block; position:relative; float:left;} #footer #customer_site dd li:before {content:""; display:block; position:absolute; top:50%; left:0; margin-top:-14px; height:28px; width:1px; background:rgba(255,255,255,.2);} } @media all and (max-width:1024px) { #footer #customer_site dt button {background:#192846;} #footer .fnb-box #customer_site.open dt button {background:#081123;} #footer .fnb-box {line-height:3.5rem;} #footer .fnb-box dt button {padding:0 1rem; height:3.5rem; font-size:1rem;} #footer .fnb-box dd a {font-size:1rem; padding:0 1.1rem;} #footer > .fix-layout {padding:1.5rem 1rem;} #footer_logo {position:relative; left:auto; top:auto; width:7.5rem; height:1.1rem;} #footer_content {padding:2.5rem 0 0; margin:0; font-size:.95rem;} #footer_sns {right:1rem; top:1.5rem;} #footer_sns a {width:2rem; height:2rem;} #footer_work {display:none;} #footer_wa a {display:none;} } /**************************************************** Sub Layout ****************************************************/ /** Visual **/ #sub_visual {position:relative; height:35rem; background:url('/resource/images/visual/img_visual_05.jpg') no-repeat 50% 0; background-size:cover;} #sub_visual .title {padding-top:19rem; text-align:center; font-size:4.2rem; font-weight:700; color:#fff;letter-spacing:-0.1rem;} #sub_visual[data-type="주요업무"] {background-image:url('/resource/images/visual/img_visual_01.jpg');} #sub_visual[data-type="고객의 소리"] {background-image:url('/resource/images/visual/img_visual_02.jpg');} #sub_visual[data-type="정보공개"] {background-image:url('/resource/images/visual/img_visual_03.jpg');} #sub_visual[data-type="열린경영"] {background-image:url('/resource/images/visual/img_visual_04.jpg');} @media all and (max-width:1024px) { #sub_visual {height:auto; padding:5rem 0; background-attachment:local; background-size:cover;} #sub_visual .title {padding-top:0;font-size:2rem;} } /** Layout **/ #sub_container_box {display:table; position:relative; max-width:1400px; width:100%; margin:0 auto;} #sub_container_box > * {display:table-cell; position:relative; padding-bottom:6.25rem;} /** Left Menu **/ #lnb_box {width:300px;} #lnb_box h2 {font-size:2.8rem; color:#192846; font-weight:800; padding:5.2rem 0 3.4rem; letter-spacing:-0.15rem;} #lnb {} #lnb {border-bottom:1px solid #dadada;} #lnb ul ul {display:none;} #lnb a {display:block; position:relative;} #lnb li.on > ul {display:block;} #lnb > ul > li:first-child > a {border-top:1px soid #dadada;} #lnb > ul > li > a {font-size:1.9rem; color:#000000; padding:2rem 4rem 2rem 2rem;} #lnb > ul > li > a:before {content:""; display:block; position:absolute; width:1.5rem; height:1.5rem; top:50%; margin-top:-.75rem; right:2.2rem; background:url('/resource/images/common/ico_gnb_dep2.svg') no-repeat 50% 50%; background-size:contain;} #lnb > ul > li.on > a {background-color:#1f4bb4; color:#fff; font-weight:800; border-top:none;} #lnb > ul > li.on > a:before {background-image:url('/resource/images/common/ico_gnb_dep2_on.svg');} #lnb > ul > li > h3 {font-size:1.9rem; color:#000000; padding:2rem 4rem 2rem 2rem;} #lnb > ul > li > h3:before {content:""; display:block; position:absolute; width:1.5rem; height:1.5rem; top:50%; margin-top:-.75rem; right:2.2rem; background:url('/resource/images/common/ico_gnb_dep2.svg') no-repeat 50% 50%; background-size:contain;} #lnb > ul > li.on > h3 {background-color:#1f4bb4; color:#fff; font-weight:800; border-top:none;} #lnb > ul > li.on > h3:before {background-image:url('/resource/images/common/ico_gnb_dep2_on.svg');} #lnb > ul > li + li {border-top:1px solid #dadada;} #lnb > ul > li.on + li {border-top:2px solid #192846;} #lnb > ul > li > ul {padding:1.5rem 0;} #lnb > ul > li > ul > li > a {padding:1rem 3rem; color:#000000;} #lnb > ul > li > ul > li > a:before {content:""; display:block; position:absolute; width:4px; height:4px; top:50%; margin-top:-2px; left:1.9rem; background:url('/resource/images/common/ico_gnb_dep3.svg') no-repeat 50% 50%; background-size:contain;} #lnb > ul > li > ul > li.on > a {color:#1f4bb4; font-weight:800; letter-spacing:-0.05rem;} #lnb > ul > li > ul > li.on > a:before {background-image:url('/resource/images/common/ico_gnb_dep3_on.svg');} #lnb > ul > li > ul > li > ul {margin:.5rem 0; background:#f3f7fb; padding:2.5rem 3.3rem;} #lnb > ul > li > ul > li > ul li {position:relative; padding:.6rem 0 .6rem 1.2rem;} #lnb > ul > li > ul > li > ul li:before {content:""; display:block; position:absolute; background:#575757; width:.6rem; height:.2rem; left:0; top:1.7rem;} #lnb > ul > li > ul > li > ul li a {color:#192846; font-size:1.6rem;letter-spacing:-0.05rem;} #lnb > ul > li > ul > li > ul li.on a {font-weight:800;letter-spacing:-0.05rem;} #lnb > ul > li > ul > li > ul > li > ul {display:none !important;} /** Default Layout **/ #container {padding-left:0rem; padding-top:5.2rem;} #lnb_box + #container {padding-left:7rem;} @media all and (max-width:1024px) { #sub_container_box, #sub_container_box > * {display:block;} #lnb_box {display:none;} #container {padding:0 1rem 1rem !important;} } /** Title Area **/ #page_title {position:relative; border-bottom:1px solid #e4e4e4; margin-bottom:3.8rem;} #page_history {font-size:1.5rem;} #page_history li {display:inline-block; vertical-align:middle; position:relative;} #page_history li a {display:block; position:relative; color:#575757;} #page_history li.home a {width:2.9rem; height:2.9rem; border-radius:100%; background:url('/resource/images/sub/ico_title_home.png') no-repeat 50% 50%; background-size:100% 100%; overflow:hidden; text-indent:-999px;} #page_history li + li {padding-left:2rem; margin-left:.6rem;} #page_history li + li:before {content:""; display:block; position:absolute; left:0; top:0; bottom:0; width:.8rem; background:url('/resource/images/sub/ico_title_arrow.png') no-repeat 50% 50%; background-size:100% auto;} #page_title .tit {padding:2.5rem 0; font-size:3.4rem; color:#000000; font-weight:700; letter-spacing:-0.2rem;} #page_control {display:block; position:absolute; right:0; bottom:2.5rem; height:4.25rem;} #page_control > * {display:block; float:left; position:relative; height:100%; box-sizing:border-box;} #page_print {width:7.2rem; background:url('/resource/images/sub/ico_page_control_print.png') no-repeat 50% 50%; overflow:hidden; text-indent:-999px;} #page_print:before {content:""; display:block; position:absolute; left:0; top:.75rem; bottom:.75rem; width:1px; background:#c9c9c9;} #page_share {display:none;} /* 공유하기 버튼 숨김 코드, 차후 공개 시 해당 라인 삭제 */ #page_share, #page_share dt, #page_share dd {height:100%;} #page_share dt {position:relative; z-index:1;} #page_share dt button {display:block; position:relative; height:100%; width:6.5rem; background:url('/resource/images/sub/ico_page_control_share.png') no-repeat 50% 50%; overflow:hidden; text-indent:-999px;} #page_share dd {display:none; position:absolute; background:#fff; border-radius:9em; border:1px solid #dadada; padding:5px 10px; top:-5px; right:0; bottom:0; width:200px; white-space:nowrap; overflow:hidden;} #page_share.open dd {display:block;} #page_share button {display:inline-block; position:relative; width:4rem; height:4rem; vertical-align:middle; background:no-repeat 50% 50%; background-size:100% auto; overflow:hidden; text-indent:-999px;} #page_share button + button {margin-left:.2rem;} #page_share button[data-sns="페이스북"] {background-image:url('/resource/images/common/img_sns_facebook.png');} #page_share button[data-sns="블로그"] {background-image:url('/resource/images/common/img_sns_blog.png');} #page_share button[data-sns="인스타"] {background-image:url('/resource/images/common/img_sns_insta.png');} #page_share button[data-sns="유튜브"] {background-image:url('/resource/images/common/img_sns_youtube.png');} #page_share button[data-sns="플러스친구"] {background-image:url('/resource/images/common/img_sns_kakao.png');} #page_font {border:1px solid #c9c9c9; line-height:4rem;} #now_font_size {display:block; float:left; padding:0 1.4rem; font-size:1.5rem; color:#575757; font-weight:800; letter-spacing:-.05em;} #page_font button {display:block; float:left; width:4rem; height:100%; box-sizing:border-box; border-left:1px solid #c9c9c9; overflow:hidden; text-indent:-999px; background:url('/resource/images/sub/ico_page_font_plus.png') no-repeat 50% 50%;} #page_font button[data-type="minus"] {background-image:url('/resource/images/sub/ico_page_font_minus.png');} @media all and (max-width:1024px) { #page_title {display:none;} } /** Tab Area **/ /*#page_tab_menu {margin-bottom:5rem;}*/ #tab_depth_5 {margin-bottom:5rem;} @media all and (min-width:1025px) { #page_tab_menu dt {display:none;} #tab_depth_5 {margin-bottom:2rem; overflow:hidden;} #tab_depth_5 dd {margin:0 -2px;} #tab_depth_5 ul {display:block; overflow:hidden;} #tab_depth_5 li {display:block; position:relative; width:25%; box-sizing:border-box; float:left; padding:2px;} #tab_depth_5 li a {display:block; position:relative; padding:2rem 1rem; color:#575757; border:1px solid #dadada; border-top:1px solid #192846; background:#fff; color:#575757; text-align:center; word-break:keep-all;} #tab_depth_5 li.on a {border-color:#192846; background:#192846; color:#fff;} #tab_depth_5.cnt-1 li {width:50%;} #tab_depth_5.cnt-2 li {width:50%;} #tab_depth_5.cnt-3 li {width:33.33%;} #tab_depth_5.cnt-4 li {width:25%;} #tab_depth_6 {background:#f8f9fb; border:1px solid #dadada; padding:2.1rem 1.5rem;} #tab_depth_6 ul {overflow:hidden;} #tab_depth_6 li {display:block; position:relative; float:left; padding:0 3rem;} #tab_depth_6 li a {display:block; position:relative; color:#575757; padding-left:3.2rem;} #tab_depth_6 li.on a {color:#000000; font-weight:600;} #tab_depth_6 li a:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-1.15rem; width:2.3rem; height:2.3rem; border-radius:100%; overflow:hidden; background:url('/resource/images/sub/ico_tab6.png') no-repeat 50% 50%;} #tab_depth_6 li.on a:before {background-image:url('/resource/images/sub/ico_tab6_on.png');} #tab_depth_6 li + li:before {content:""; display:block; position:absolute; top:0; bottom:0; width:1px; left:0; background:#dadada;} } @media all and (max-width:1024px) { #now_page_title {font-size:1.7rem; color:#000; font-weight:800; border-bottom:1px solid #e4e4e4; padding:1.5rem 2rem; margin:0 -1rem 2rem;} /*#page_tab_menu {margin:0 -1rem 1rem;} #page_tab_menu dt button {display:block; position:relative; width:100%; box-sizing:border-box; text-align:left; font-size:1.15rem; padding:1.15rem 1rem; color:#fff;} #page_tab_menu dt button:after {content:""; display:block; position:absolute; width:1.3rem; top:0; bottom:0; right:1rem; background:url('/resource/images/sub/ico_mobile_tabmenu_arrow.png') no-repeat 50% 50%; background-size:contain;} #page_tab_menu dd {display:none; background:#09132c;} #page_tab_menu .open dd {display:block;} #page_tab_menu dd a {display:block; padding:1rem; color:#fff;} #page_tab_menu dd li + li {border-top:1px solid rgba(255,255,255,.1);} #tab_depth_4 dt button {background:#1f4bb4;} #tab_depth_5 dt button {background:#192846;} #tab_depth_6 dt button {color:#000000; font-weight:800; background:#f8f9fb; border-bottom:1px solid #dadada; padding-left:3rem} #tab_depth_6 dt button:after {background-image:url('/resource/images/sub/ico_mobile_tabmenu_arrow_b.png')} #tab_depth_6 dt button:before {content:""; display:block; position:absolute; left:1rem; top:50%; margin-top:-.71875rem; width:1.4375rem; height:1.4375rem; border-radius:100%; overflow:hidden; background:url('/resource/images/sub/ico_tab6.png') no-repeat 50% 50%;} #tab_depth_6 dt button:before {background-image:url('/resource/images/sub/ico_tab6_on.png');} #page_tab_menu .open dt button:after {transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}*/ #tab_depth_5 {position:relative; height:4rem; padding-top:4rem; margin:-2rem -1rem 2rem; z-index:100;} #tab_depth_5 li {display:none; background:#09132c;} #tab_depth_5 li.on {display:block; position:absolute; top:0; left:0; right:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; text-align:left; font-size:1.15rem; padding:0; color:#fff; background:#09132c; padding-right:2rem; border-top-width:0 !important;} #tab_depth_5 li.on a:after {content:""; display:block; position:absolute; width:1.3rem; top:0; bottom:0; right:1rem; background:url('/resource/images/sub/ico_mobile_tabmenu_arrow.png') no-repeat 50% 50%; background-size:contain;} #tab_depth_5 dd a {display:block; padding:1rem; color:#fff; height:auto !important;} #tab_depth_5 dd li + li {border-top:1px solid rgba(255,255,255,.1);} #tab_depth_5.open li {display:block;} #tab_depth_5.open li.on a:after {transform:rotate(-180deg); -webkit-transform:rotate(-180deg);} /*#tab_depth_5 dt button {background:#192846;} #tab_depth_5.open dt button:after {transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}*/ } /** Manager Area **/ /** Manager 한명일때 **/ #page_info_box {margin-top:8rem; border:1px solid #e8e9ee; font-size:1.5rem; clear:both;} #page_info_box .manager {position:relative; padding:1.2rem 2.5rem 1.2rem 6rem;} #page_info_box .manager > * {display:inline-block; vertical-align:middle; position:relative;} #page_info_box .manager > i {position:absolute; top:1.2rem; left:2.4rem; width:2.5rem; height:2.5rem; background:url('/resource/images/sub/ico_page_manager.png') no-repeat 50% 50%; border-radius:100%; overflow:hidden; margin-right:.5rem;} #page_info_box .manager dl {overflow:hidden; margin-right:1.28rem;} #page_info_box .manager dt, #page_info_box .manager dd {display:inline-block; color:#575757;} #page_info_box .manager dt {color:#000; font-weight:600;} #page_info_box .manager dt:after {content:":"; } #page_info_box .grade {position:relative; border-top:1px solid #e8e9ee; background:#f8f8fa; padding:1.7rem 2.8rem; overflow:hidden;} #page_info_box .grade strong {display:inline-block; vertical-align:middle; margin-right:6.8rem;} #page_info_box .grade strong + .group {display:inline-block; vertical-align:middle;} #page_info_box .grade input[type="radio"] {opacity:0;} #page_info_box .grade label {display:inline-block; position:relative; vertical-align:middle; padding-left:2.2rem; margin-right:1.5rem;} #page_info_box .grade label:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-.9rem; width:1.8rem; height:1.8rem; border-radius:100%; box-sizing:border-box; border:.4rem solid #fff; background:#fff; -webkit-box-shadow: 0px 0px 1px 1px rgba(224,224,224,1); -moz-box-shadow: 0px 0px 1px 1px rgba(224,224,224,1); box-shadow: 0px 0px 1px 1px rgba(224,224,224,1); } #page_info_box .grade input[type="radio"]:focus + label{border:1px dotted #000;} #page_info_box .grade input[type="radio"]:checked + label:before {background:#183064;} #page_info_box .txt {padding-top:1rem; overflow:hidden;} #page_info_box .txt input[type="text"] {height:3.6rem; width:100%; max-width:70%; background:#ffffff; box-sizing:border-box; border:1px solid #dfdfdf;} #page_info_box .txt button {display:inline-block; vertical-align:middle; margin-left:.8rem; background:#135eba; color:#fff; height:3.6rem; width:20%; max-width:12rem; font-size:1.5rem;} #page_info_box a {float: right; margin-left:.8rem;} .modify{background:#f3f7fb !important;} @media all and (max-width:1024px) { #page_info_box {margin-top:4rem; font-size:1rem;} #page_info_box .manager {padding-left:3rem;} #page_info_box .manager > i {width:1.4rem; height:1.4rem; left:1rem; top:1.3rem;} #page_info_box .manager dl {margin-right:1rem;} #page_info_box .grade {padding:1.2rem 1.2rem;} #page_info_box .grade strong {margin-right:0; display:block; padding-bottom:.5rem;} #page_info_box .grade label {padding-left:1.4rem; margin-right:1rem;} #page_info_box .grade label:before {width:1rem; height:1rem; border-width:.2rem; margin-top:-.6rem;} #page_info_box .txt {position:relative; margin-top:1rem; padding-right:9rem; padding-top:0;} #page_info_box .txt input[type="text"] {display:block; position:relative; max-width:100%; width:100%; box-sizing:border-box; height:3rem; padding:0 1rem;} #page_info_box .txt button {display:block; position:absolute; top:0; right:0; width:8rem; height:3rem; font-size:1rem; max-width:100%; margin:0;} } @media all and (max-width:640px) { #page_info_box .txt {padding-right:0;} #page_info_box .txt button {position:relative; width:100%; margin-top:.5rem;} #page_info_box a {position:relative; width:100%; margin-top:.5rem; margin-left:.0rem;} } /** Manager 여러명일때 **/ #page_info_box .people-Box {display:table; width:100%; table-layout:fixed; } #page_info_box .people-Box .cell {display:table-cell; padding:2rem 5rem; vertical-align:middle;} #page_info_box .people-Box .thumb {padding:0; width:14rem; text-align:center;} #page_info_box .people-Box .thumb img {max-width:90%;} #page_info_box .people-Box .thumb + .cell {padding-left:0;} #page_info_box .people-Box li{font-size:1.5rem; display:inline-block; margin-left:1rem;} #page_info_box .people-Box li + li{margin-top:-.1rem !important;} @media all and (max-width:1024px) { #page_info_box .people-Box .cell {padding:1.5rem 3rem;} #page_info_box .people-Box .thumb {width:6rem; padding:0;} #page_info_box .people-Box li {font-size:1rem;} } @media all and (max-width:640px) { #page_info_box .people-Box {display:block;} #page_info_box .people-Box .cell {display:block; padding:1rem 1.5rem;} #page_info_box .people-Box .thumb {width:auto; padding-bottom:0;} #page_info_box .people-Box .thumb + .cell {padding-left:1.5rem;} #page_info_box .people-Box li {font-size:1rem :} } /** Manager 여러명일때 **/