@charset "UTF-8";
/* =======================================================================================
  css>default.css 재정의
  ======================================================================================= */
  html { overflow: visible; scroll-behavior: smooth;}
/* =======================================================================================
변수
======================================================================================= */
:root {
  --letterSpace: -.025em;
  --fontColor: var(--gray-70);
  --black: #000;
  --gray-0: #fff;
  --gray-5: #F8F8F8;
  --gray-10: #F0F0F0;
  --gray-20: #E4E4E4;
  --gray-30: #D8D8D8;
  --gray-40: #C6C6C6;
  --gray-50: #8E8E8E;
  --gray-60: #717171;
  --gray-70: #555555;
  --gray-80: #2D2D2D;
  --gray-90: #1D1D1D;
  --white: #fff;
  --bg-5: #EDF1F5;
  --bg-10: #CDD7E4;
  --primary: var(--primary-50);
  --gray: var(--gray-5);
  --border: var(--gray-30);
  --bg: var(--bg-5);
  --point: var(--point-60);
  --danger: #EB003B;
  --warning: #FFB724;
  --success: #008A1E;
  --information: #2768FF;
  --primary-5: #eff5ff;
  --primary-10: #d3e1fb;
  --primary-20: #a7c4f7;
  --primary-30: #7ca6f3;
  --primary-40: #5089ef;
  --primary-50: #2466ba;
  --primary-60: #1D56BC;
  --primary-70: #16408d;
  --primary-80: #0e2b5e;
  --secondary-5: #eef2f7;
  --secondary-10: #d6e0eb;
  --secondary-20: #bacbde;
  --secondary-30: #90b0d5;
  --secondary-40: #6b96c7;
  --secondary-50: #346fb2;
  --secondary-60: #1c589c;
  --secondary-70: #063a74;
  --secondary-80: #052b57;
  --secondary-90: #031f3f;
  --secondary-95: #02162c;
  --primary-90: #07152f;
  --point-5: #FDF2F3;
  --point-10: #FAD1D3;
  --point-20: #F5A3A8;
  --point-30: #F1747C;
  --point-40: #EC4651;
  --point-50: #E71825;
  --point-60: #B9131E;
  --point-70: #8B0E16;
  --point-80: #5C0A0F;
  --point-90: #2E0507;
  --facebook: #1648AD;
  --twitter: #1DA1F2;
  --blog: #179911;
  --kakaotalk: #FAE301;
  --instagram: #E5266D;
  --youtube: #E52C26;
  --headerHeight: 19.5rem;
  --inner: 1280px;
}
/*-------------------------------------------------
공통
-------------------------------------------------*/
[class*=ico-]::before, [class*=ico-]::after { content: ""; display: none; width: 1.6rem; height: 1.6rem; background-repeat: no-repeat; background-size: contain; background-position: center; }
[class*=ico-]::after { display: inline-flex; }
.ico-before::before { display: inline-flex; }
.ico-before::after { display: none; }
.ico-like::before, .ico-like::after { background-image: url("../img/common/ico_like.svg"); }
.ico-share::before, .ico-share::after { background-image: url("../img/common/ico_share.svg"); }
.ico-arr::before, .ico-arr::after { background-image: url("../img/common/ico_arr.svg"); }
.ico-arr-right::before, .ico-arr-right::after { background-image: url("../img/common/ico_arr-right.svg"); }
.ico-arr-right1::before, .ico-arr-right1::after { background-image: url("../img/common/ico_arr-right1.svg"); }
.ico-arr-down::before, .ico-arr-down::after { background-image: url("../img/common/ico_arr-down.svg"); }
.ico-more::before, .ico-more::after { background-image: url("../img/common/ico_more.svg"); }
.ico-sch::before, .ico-sch::after { background-image: url("../img/common/ico_sch.svg"); }
.ico-sch1::before, .ico-sch1::after { background-image: url("../img/common/ico_sch1.svg"); }
.ico-go::before, .ico-go::after { background-image: url("../img/common/ico_go.svg"); }
.ico-down::before, .ico-down::after { background-image: url("../img/common/ico_down.svg"); }
.ico-filter::before, .ico-filter::after { background-image: url("../img/common/ico_filter.svg"); }
.ico-reset::before, .ico-reset::after { background-image: url("../img/common/ico_reset.svg"); }
.ico-log::before, .ico-log::after { background-image: url("../img/common/ico_log.svg"); }
.ico-func::before, .ico-func::after { background-image: url("../img/common/ico_func.svg"); }
.ico-logout::before, .ico-logout::after { background-image: url("../img/common/ico_logout.svg"); }
.ico-email::before, .ico-email::after { background-image: url("../img/common/ico_email.svg"); }
.ico-print::before, .ico-print::after { background-image: url("../img/common/ico_print.svg"); }
.ico-scrap::before, .ico-scrap::after { background-image: url("../img/common/ico_scrap.svg"); }
.ico-del::before, .ico-del::after { background-image: url("../img/common/ico_del.svg"); }
.ico-plus::before, .ico-plus::after { background-image: url("../img/common/ico_plus.svg"); }
.ico-setting::before, .ico-setting::after { background-image: url("../img/common/ico_setting.svg"); }
.ico-link::before, .ico-link::after { background-image: url("../img/common/ico_link.svg"); }
.ico-comment::before, .ico-comment::after { background-image: url("../img/common/ico_comment.svg"); }
.ico-prev::before, .ico-prev::after { background-image: url("../img/common/ico_prev.svg"); }
.ico-close::before, .ico-close::after { background-image: url("../img/common/ico_close.svg"); }
.ico-time::before, .ico-time::after { background-image: url("../img/common/ico_time.svg"); }

.container { width: 128rem; max-width: calc(100% - 2rem); margin: 0 auto; position: relative;}
.container::after { display: table; clear: both; content: "";}
.of_h{position: relative;overflow: hidden;height: 100%;}
.linkWindow::after {content: '\e980';display: inline-block; margin-left: .5rem; font-family: 'xeicon', sans-serif;line-height:1; transform: translateY(1px);}

/* =======================================================================================
  header-top
  ======================================================================================= */
#header-top { position: relative; z-index: 2; background: var(--bg-5); }
#header-top .inner { display: flex; gap: 0.4rem 1.6rem; align-items: center; flex-wrap: wrap; padding: 0.8rem 0.8rem 0.8rem 3.2rem; position: relative; }
#header-top .nuri-txt { font-size: 1.5rem; line-height: 1; display: flex; align-items: center; }
#header-top .nuri-txt::before { display: inline-flex; content: ""; width: 2.4rem; height: 1.6rem; background: url(../img/common/top_ban_ico_flag.svg) no-repeat center/contain; position: absolute; left: 0; top: auto; }

/* =======================================================================================
  layout 공통
  ======================================================================================= */
html.active::after { content: ""; display: block; width: 200%; height: 100vh; background: rgba(0, 0, 0, 0.5); position: fixed; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; }
html.scroll-no { overflow: hidden; }
#wrap { position: relative; display: block; }
.popup, .inner { width: var(--inner); max-width: calc(100% - 2rem); margin: 0 auto; }
.drop-wrap { position: relative; }
.drop-wrap .drop-menu { display: none; position: absolute; left: 50%; top: auto; transform:translate(-50%, 0); min-width: 13rem; z-index: 1; background: var(--white); border-radius: 1rem; padding: 0.8rem; border: 1px solid var(--gray-30); box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12); margin-top: 1.6rem; }
.drop-wrap .drop-menu::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.3rem; height: 1.3rem; background: #fff; border: solid var(--gray-30); border-width: 1px 0 0 1px; transform: translate(-50%, -0.7rem) rotate(45deg); }
.drop-wrap .drop-menu .drop-in { display: flex; flex-direction: column; gap: 0.8rem; }
.drop-wrap .drop-menu .drop-top-info { border-bottom: 1px solid var(--gray-30); padding: 1.6rem 1.6rem 0.6rem; }
.drop-wrap .drop-menu .item-link { display: flex; gap: 0.8rem; align-items: center; height: 4.8rem; padding: 0.8rem; border-radius: 0.6rem; width: 100%; }
.drop-wrap .drop-menu .item-link:hover,
.drop-wrap .drop-menu .drop-btm-btn .btn:hover { transition: 0.2s; background-color: var(--bg-5); }
.drop-wrap .drop-menu .drop-btm-btn { border-top: 1px solid var(--gray-30); padding-top: 0.8rem; display: flex; justify-content: center; }
.drop-wrap .drop-menu .drop-btm-btn .btn { flex: 1; justify-content: center; padding: 0.8rem; border-radius: 0.6rem; }
.drop-wrap.active .btn-txt::after { transform: rotate(180deg); }
.drop-wrap.active .drop-menu { display: block; }
.lang-drop .item-link {justify-content: center;}
.container { width: var(--inner); max-width: calc(100% - 2rem); margin: 0 auto; }

/* =======================================================================================
  header
  ======================================================================================= */
.header { position: sticky; top: 0; border-bottom: 1px solid var(--gray-30); z-index: 9; width: 100%; background-color: var(--white); transition: 0.5s; }
.header.fixed { top: calc(var(--headerHeight) * -1); }
.header .etc-ul { display: flex; gap: 0.8rem; }
.header .etc-ul > li ~ li { position: relative; padding-left: 1.1rem; }
.header .etc-ul > li ~ li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.1rem; height: 1.6rem; background-color: var(--gray-30); transform: translateY(-50%); }
.header .etc-ul .btn-txt { display: flex; align-items: center; padding-left:.2rem; padding-right: .2rem; gap:.4rem; border-radius: 0.4rem; transition: 0.2s; }
.header .etc-ul .btn-txt :hover { background: #edf1f5;}

.header .etc-ul .zoom-drop .drop-menu { width: 15rem; }
.header .etc-ul .zoom-drop .drop-list > li.active .item-link { color: var(--primary-70); background: var(--bg-5); font-weight: 700; }
.header .etc-ul .zoom-drop .drop-list > li.active .item-link::before { color: #fff; background: var(--primary-70); }
.header .etc-ul .zoom-drop .item-link::before { content: "가"; font-size: inherit; border-radius: 0.4rem; background: var(--white); border: 1px solid var(--gray-30); display: flex; align-items: center; justify-content: center; padding: 0.3rem 0.5rem; line-height: 1; }
.header .etc-ul .zoom-drop .item-link.xsm::before { font-size: 1.5rem; }
.header .etc-ul .zoom-drop .item-link.sm::before { font-size: 1.7rem; }
.header .etc-ul .zoom-drop .item-link.md::before { font-size: 1.9rem; }
.header .etc-ul .zoom-drop .item-link.lg::before { font-size: 2.1rem; }
.header .etc-ul .zoom-drop .item-link.xlg::before { font-size: 2.5rem; }
.header .header-in .head-body > .inner { display: flex; align-items: center; padding: 3.6rem 0 1.4rem; position: relative; }
.header .header-in .head-body .head-etc { position: absolute; right: 0; top: 0.4rem; }

.header .header-in .head-body .logo { display: flex; gap: 1rem; align-items: center; }
.header .header-in .head-body .logo .logo-im { width: 18.8rem; }
.header .header-in .head-body .right { margin-left: auto; display: flex; flex-direction: column; gap: 2.4rem; align-items: flex-end; }
.header .header-in .head-body .btn-navi-wrap { display: flex; gap: 1.2rem; align-items: center; }  
.btn-navi{ display: inline-flex; align-items: center; gap:.8rem; color: var(--gray-90); transition: 0.2s; border-radius: 0.6rem; padding:.8rem .4rem; font-weight: 700;}
.btn-navi:hover { background: #edf1f5;}
.all::before { background-image: url(../img/common/head_ico_navi_all.svg); }   
.btn-navi::before { display: inline-flex; content: ""; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-size: contain; }



.header .srch_wrap .btn { display: none; }
.form_inner { background: #f8f8fa; border-radius: 2.3rem; color: #636363; width: 29rem; padding-left: 2rem; overflow: hidden; display: flex; align-items: center;}
.form_inner input { width: calc(100% - 4.4rem); background: transparent; border: 0; }
.form_inner  button { font-size: 2.2rem;}



.header .header-in .head-gnb { border-top: 1px solid var(--gray-30); background: var(--white); }
.header .header-in .head-gnb .gnb { display: flex; gap: 1.6rem; }
.header .btn_sitemap { display: none; }
.header .m-gnb-wrap { display: none; background: var(--white); position: fixed; top: 0; right: -100%; width: 100%; height: 100%; transition: right ease 0.3s 0.15s; }
.header .m-gnb-wrap .m-gnb-in { display: flex; flex-direction: column; height: 100%; }

.header .m-gnb-wrap .m-gnb-in .m-gnb-head { display: flex; flex-direction: column; gap: 1.6rem; padding: 1.6rem 1rem; background: var(--white); border-bottom: 0.3rem solid var(--gray-20); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login { display: flex; gap: 1.6rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .btn-navi { display: flex; gap: 0.8rem; align-items: center; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .btn-navi::before { display: inline-flex; content: ""; width: 2rem; height: 2rem; background: 0 0/contain no-repeat; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .btn-navi.login { font-weight: 700; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .btn-navi.login::before { background-image: url(../img/common/head_ico_navi_login.svg); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .btn-navi.logout { background: var(--primary); color: var(--white); font-size: 1.5rem; padding: 1rem; font-weight: 400; border-radius: 0.6rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .btn-navi.logout::before { display: inline-block; font-family: var(--icon); content: "\eede"; background: none; width: auto; height: auto; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .name { font-weight: 700; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .m-gnb-login .ico-logout { display: flex; gap: 0.2rem; align-items: center; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .sch-input { display: flex; gap: 0.8rem; position: relative; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .sch-input .form-control { padding: 0 4.8rem 0 1.6rem; width: 100%; border-radius: 0.8rem;}
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .sch-input .ico-sch { position: absolute; right: 0; top: 50%; transform:translate(0, -50%); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-head .sch-input .ico-sch::after { width: 2.4rem; height: 2.4rem; }
.header .m-gnb-wrap .m-gnb-in .m-sch-result { display: none; background: var(--white); position: absolute; left: 0; top: 13rem; width: 100%; height: calc(100% - 13rem); z-index: 1; }
.header .m-gnb-wrap .m-gnb-in .m-sch-result-wrap { height: 100%; padding: 2.4rem; overflow-y: auto; }
.header .m-gnb-wrap .m-gnb-in .m-sch-result-head { margin-bottom: 3rem; font-weight: 500; text-align: center; font-size: 2rem; }
.header .m-gnb-wrap .m-gnb-in .m-sch-result-list li ~ li { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--gray-10); }
.header .m-gnb-wrap .m-gnb-in .m-sch-result-close { border-radius: 50%; width: 2.4rem; height: 2.4rem; min-width: 2.4rem; background-color: var(--gray-50); display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 1.6rem; top: 1.6rem; color: var(--white); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body { flex: 1; background: var(--bg-5); position: relative; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li > a { display: flex; align-items: center; font-size: 1.9rem; font-weight: 700; width: 14rem; height: 6rem; border-bottom: 1px solid var(--gray-20); padding: 0 2.4rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu { position: absolute; right: 0; top: 0; width: calc(100% - 14rem); height: 100%; min-height: 100%; background: var(--white); display: none; padding: 0 1.6rem; overflow-y: scroll; scroll-behavior: smooth; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu::-webkit-scrollbar-track { background-color: #d5d7dc; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu::-webkit-scrollbar { width: 0.6rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu::-webkit-scrollbar-thumb { background-color: var(--gray-90); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu > ul > li { padding: 1rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu > ul > li ~ li { border-top: 1px solid var(--gray-20); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu > ul > li > a { display: flex; gap: 0.2rem; align-items: center; height: 3.8rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu > ul > li > div .lnb-detail { padding-left: 0.8rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu > ul > li > div .lnb-detail > li > a { position: relative; padding-left: 1.3rem; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li .submenu > ul > li > div .lnb-detail > li > a::before { content: ""; position: absolute; left: 0; top: 1rem; width: 0.3rem; height: 0.3rem; background-color: var(--gray-90); border-radius: 50%; }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li.active > a { background: var(--white); color: var(--primary-70); }
.header .m-gnb-wrap .m-gnb-in .m-gnb-body .m-gnb-menu .topmenu_all > li.active .submenu { display: block; }
.header .m-gnb-wrap .m-gnb-in .btn-ico { padding: 1rem;line-height: 1;}
.header .m-gnb-wrap .m-gnb-in .ico-close { position: absolute; right: 0; top: 1rem; }
.header .m-gnb-wrap::after { content: ""; display: block; background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0; visibility: hidden; transition: 0.2s; }

.header .topmenu { display: flex; }
.header .topmenu a { transition: 0.2s; }
.header .topmenu > li > a { display: flex; gap: 0.8rem; align-items: center; justify-content: center; white-space: nowrap; position: relative; padding: 0 2rem; font-size: 1.8rem; font-weight: 700; color: var(--gray-70); height: 5.6rem; }
.header .topmenu > li > a::after { display: inline-flex; content: ""; width: 2rem; height: 2rem; background: url(../img/common/head_gnb_ico_arr.svg) no-repeat center/contain; }
.header .topmenu > li > a:hover,
.header .topmenu > li > a:focus { background: var(--secondary-5); }
.header .topmenu > li > a:hover::after,
.header .topmenu > li > a:focus::after { background-image: url(../img/common/head_gnb_ico_arr_on.svg); }
.header .topmenu > li > a::before { content: ""; display: block; position: absolute; left: 50%; bottom: 0; transform:translate(-50%, 1px); height: 4px; width: 0; background-color: var(--secondary-70); transition: 0.2s; }
.header .topmenu > li > a.active::before { width: 100%; }
.header .topmenu > li.active > a { background: var(--secondary-5); color: var(--gray-90); }
.header .topmenu > li.active > a:active { background: var(--secondary-10);}
.header .topmenu > li.active > a::after { transform: rotate(180deg); }
.header .topmenu > li.active .submenu { opacity: 1; visibility: visible; height: auto; overflow: visible; }
.header .topmenu .submenu { opacity: 0; visibility: hidden; height: 0; overflow: hidden; transition: ease; width: 100%; max-width: var(--inner); display: flex; position: absolute; left: 50%; top: auto; transform:translate(-50%, 0); margin-top: 1px; }
.header .topmenu .submenu>.tit{ color:#fff; font-size: 3.2rem; font-weight:bold; padding: 4rem 2.4rem; flex: 1 1 18%; overflow:hidden; position: relative; }
.header .topmenu .submenu>.tit::before { content: ""; display: block; width: 1000%; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; background: url(../img/common/head_gnb_sub_bg.png) no-repeat right -12% bottom, linear-gradient(180deg, var(--secondary-50), var(--secondary-60)); } 
.header .topmenu .submenu>.tit a { display: flex; align-items: center;}
.header .topmenu .submenu>.tit a::after {content: "\e940"; font-family: "xeicon"; font-size: 2rem; display: inline-block; /* width: 2.4rem; height: 2.4rem; mask: url(../img/common/head_gnb_ico_arr_20_right.svg) 50% 50%/cover no-repeat;  background: #fff;*/ margin-left: 1.2rem; transition: 0.2s;} 
.header .topmenu .submenu>.tit a:hover::after { transform:translateX(0.8rem);}
.header .topmenu .submenu::before { content: ""; display: block; width: 220%; height: 100%; position: absolute; left: 50%; top: 0; transform:translate(-50%, 0); z-index: -1; background-color: var(--gray-0); box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.12); }
.header .topmenu .submenu > ul { flex: 1 1 82%; overflow:auto; max-height: calc(100vh - var(--headerHeight)); }
.header .topmenu .submenu > ul::-webkit-scrollbar { width: 0.4rem; }
.header .topmenu .submenu > ul::-webkit-scrollbar-thumb { background-color: var(--secondary-70); }
.header .topmenu .submenu > ul::-webkit-scrollbar-track { background-color: var(--secondary-5); }

.header .topmenu .submenu > ul > li { display: flex; border-bottom:1px solid #e6e8ea;}
.header .topmenu .submenu > ul > li:hover > a,
.header .topmenu .submenu > ul > li:focus > a {color: var(--secondary-80); font-weight: bold; }    
.header .topmenu .submenu > ul > li:hover > a::after,
.header .topmenu .submenu > ul > li:focus > a::after {opacity: 1;}

.header .topmenu .submenu > ul > li > a { width: 20rem; padding: 1.2rem 2rem; display: flex; background: var(--secondary-5); position: relative;} 
.header .topmenu .submenu > ul > li > a::after { content: ""; display: block; width: 2rem; height: 2rem; background: url(../img/common/head_gnb_ico_arr_20_right.svg); position: absolute; right: 1rem; top: 1.4rem; opacity: 0; transition: 0.2s; }
.header .topmenu .submenu > ul > li > a:hover,
.header .topmenu .submenu > ul > li > a:focus { color: var(--secondary-80); font-weight: bold; }
   
.header .topmenu .submenu > ul > li > a:hover,
.header .topmenu .submenu > ul > li > a:focus::after {opacity: 1;}

.header .topmenu .submenu > ul > li > a::after { width: 2rem; height: 2rem; }
.header .topmenu .submenu > ul > li > div { flex:1; min-width:1px; position: static; left: 26rem; top: 0; background: var(--gray-0); padding: 0.4rem 2rem; flex-direction: column; gap: 2.4rem; }
.header .topmenu .submenu > ul > li > div > a { font-weight: 700; font-size: 2.5rem; color: var(--gray-90); display: flex; gap: 0.8rem; align-items: center; }
.header .topmenu .submenu > ul > li > div > a::after { content: ""; width: 2rem; height: 2rem; background: url(../img/common/head_gnb_ico_arr_20_right.svg); display: block; }
.header .topmenu .submenu > ul > li .lnb-detail { display: grid; gap: 0.8rem 1.6rem; grid-template-columns: repeat(4, 1fr); }
.header .topmenu .submenu > ul > li .lnb-detail-item a { display: block; position: relative; padding: 0.8rem 0.8rem 0.8rem 2rem; border-radius:0.8rem;}
.header .topmenu .submenu > ul > li .lnb-detail-item a:hover,
.header .topmenu .submenu > ul > li .lnb-detail-item a:focus {background: var(--secondary-5);}
.header .topmenu .submenu > ul > li .lnb-detail-item a::before { content: ""; position: absolute; left: 0.8rem; top: 1.8rem; width: 0.3rem; height: 0.3rem; background-color: var(--gray-90); border-radius: 50%; }



#quick { position: fixed; right: -25rem; top: 0; z-index: 500; height: 100%;}
#quick::before { position: absolute; top: 0; z-index: -1; height: 100%; margin-left: -500%; content: ""; left: auto; right: 0; width: 0; transform: translateX(0); background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s;}
#quick .open { position: absolute; top: 50%; transform: translateY(-50%); left: -4.5rem; width: 4.5rem; padding: 2rem 0 0; background-color: #9b8873; font-weight: 600; color: #fff; line-height: 4.5rem; writing-mode: vertical-rl; text-orientation: mixed;}
#quick .open::after { display: inline-block; position: relative; top: 1px; font-family: "xeicon", sans-serif; vertical-align: top; margin-top: 1.5rem; padding: 1.5rem 0; background-color: rgba(0, 0, 0, 0.2); content: "\e90b";}
#quick .group { width: 25rem; height: 100%; background-color: #f8f8f8;}
#quick .group .title { padding: 3rem 1rem; background-color: #484c58; color: #fff; text-align: center;}
#quick .group .title strong { font-size: 3rem; display: block; line-height: 1.2;}
#quick .group .title span { font-size: 1.4rem; font-weight: 300; opacity: 0.5;}
#quick .list a { display: block; padding: 1.5rem; border-bottom: 1px solid #ddd; font-weight: 400;}
#quick.active { right: 0; }
#quick.active::before { width: 1000%; opacity: 1;}

#footer { color: #fff; background: #393B44;}
#footer .footer_top { margin-bottom:1.5rem}
#footer .footer_info{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2.5rem}

#footer .related { background: #2C3039; position: relative; }
#footer .related::after { display: block; clear: both; content: "";}
#footer .related .group { float: left; position: relative; width: 25%; color: #fff; border-left: 1px solid rgba(255, 255, 255, 0.2);}
#footer .related .group4{border-right: 1px solid rgba(255, 255, 255, 0.2);}
#footer .related .group.active .label::after { transform: rotate(180deg); }
#footer .related .group.active .list { visibility: visible; width: auto; height:30rem; opacity: 1; transition: all 0.2s; overflow:auto;}
#footer .related .group.active .list::-webkit-scrollbar-track {background-color: #f5f5f5; }
#footer .related .group.active .list::-webkit-scrollbar { width: 0.8rem; }
#footer .related .group.active .list::-webkit-scrollbar-thumb { background-color: #999; }
#footer .related .label { display: block; position: relative; padding: 2.3rem; font-size: 1.4rem;}
#footer .related .label:hover{background: #222;transition: .2s;}
#footer .related .label::after { position: absolute; top: auto; left: auto; font-family: "xeicon", sans-serif; right: 1.8rem; color: #bcc3c9; content: "\e945"; transition: 0.2s;}
#footer .related .list { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: absolute; left: 0; bottom: 100%; z-index: 1; width: 100% !important; background-color: #fff; color: #333; border: 1px solid #ddd; border-bottom: 0;}
#footer .related .list a { display: block; font-size: 1.4rem; line-height: 1.5;padding: .3rem 1rem;transition: .2s;}
#footer .related .list a:hover{background: #e5e5e5;text-decoration: underline;}
#footer>.container{padding: 3.8rem 0;}
#footer #fnb a {display: inline-block;}
#footer #fnb a span{display: block;}
#footer .util {text-align: right;}
#footer .util .list::after { display: block; clear: both; content: "";}
#footer .util .list li { float: left; margin-left: 1rem;}
#footer .util .list li a { display: block; font-size: 2rem; text-align: center; width: 4rem; height: 4rem; line-height: 4rem; border-radius: 50%; background: #42444d; position: relative;}
#footer .util .list li a i { color: #fff; opacity: 0.5; transition: 0.2s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#footer .util .list li a:hover i,
#footer .util .list li a:focus i{ opacity: 1;}
#footer .util .list li .sns_x { color: #fff; opacity: 0.5; transition: 0.2s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);display: inline-block; width: 2rem; height: 2rem;background-image: url("/kor/img/layout/footer/icon_sns_twitter.png");}

#footer .util .mark { overflow: hidden; margin-top: 1.5rem;}
#footer .util .mark li { display: inline-block; background-position: center; background-repeat: no-repeat; background-size: contain; height: 4rem;}
#footer .util .mark li a { display: block;height: 100%; }
#footer .util .mark .clean_logo { width: 115px; background-image: url(/kor/img/common/slogan.png); margin-right: 10px;}
#footer .util .mark .open { width: 65px; background-image: url(/kor/img/common/footer/mark_open_w.png); margin-right: 10px;}
#footer .util .mark .wa { width: 52px; background-image: url(/kor/img/common/footer/mark_wa.png); margin-left: 7px;}
@keyframes updown {
    0% { margin-bottom: 0; }
    100% { margin-bottom: 0.5rem; }
}
#fnb { margin-bottom: 1.5rem; }
#fnb li { display: inline; }
#fnb li + li::before { content: ""; display: inline-block; width: 1px; height: 1rem; background: #A3A3A3; opacity: 0.2; margin: 0 2rem; font-weight: 700; vertical-align: middle;}
#fnb .point a{color: #FFD1E8;font-weight: 600;text-decoration: underline;}
#siteinfo { position: relative; font-size: 1.4rem; }
#siteinfo span { margin-right: 1rem; }


/*전자정부 인증*/
.top_line_bnr { background-color:#edf1f5; position:relative;}
.top_line_bnr.bnr_hide:after { background:#cdd7e4; content:""; height:1px; left:0; position:absolute; top:32px; width:100%; }
.top_link_wrap .inner, .chk_nuri_addr_bnr .inner{max-width:1500px;margin:0 auto; width:100%; box-sizing: border-box; }

.top_flag_wrap { align-items:center; color:#1d1d1d; display:flex; font-size:15px; line-height:16px; max-width:1280px;margin:0 auto; }
.top_flag_in { font-size:15px; display: flex; align-items: center; }
.top_flag_in img { margin-right:9px; width:24px; }
.top_link_wrap { padding:8px 0; }