@charset "UTF-8";

/*-------------------------------------------------------------------
    적용영역 : 전체영역
    속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    최종변경일 : 2024.07.17
-------------------------------------------------------------------*/
:root {
    /* 색상 > gray */
    --color-gray-5: #F8F8F8;
    --color-gray-10: #F0F0F0;
    --color-gray-20: #E4E4E4;
    --color-gray-30: #D8D8D8;
    --color-gray-40: #C6C6C6;
    --color-gray-50: #8E8E8E;
    --color-gray-60: #717171;
    --color-gray-70: #555555;
    --color-gray-80: #2D2D2D;
    --color-gray-90: #1D1D1D;

	--color-main : #009881;
	--color-main-60 : #0f7c5b;
	--color-main2 : #006498;
}

/*-------------------------------------------------------------------
	분류이름 : blind
	분류그룹 : Accessibility
-------------------------------------------------------------------*/
.blind {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}

/*-------------------------------------------------------------------
	분류이름: 건너뛰기
	분류그룹: 전체영역
-------------------------------------------------------------------*/
#skip_nav {display: block; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; background-color: #1D1D1D; font-size: 16px; text-align: center;}
#skip_nav > a:not(:focus) {overflow: hidden; position: absolute; top: -10000px; left: 0; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
#skip_nav > a:focus {display: block; width: 100%; height: 40px; line-height: 40px; font-weight: 400; color: #ffffff; outline: 2px solid #ffffff; outline-offset: -4px;}

/*-------------------------------------------------------------------
	분류이름: Common
	분류그룹: 전체영역
-------------------------------------------------------------------*/
/* html,body {height:100%;} */
body.open-modal {overflow:hidden; height: 100%;}

#wrap {overflow: hidden; position:relative; min-height:100%; padding-left: var(--sp-header-pc);}
.inner {display: block; width:100%; max-width: 1440px; margin: 0 auto;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#wrap {transition: padding 0.6s;}
#wrap.hide-header {padding-left: 0;}


/*-------------------------------------------------------------------
	분류이름: Header
	분류그룹: 레이아웃
-------------------------------------------------------------------*/
#header {display: block;}
#header * {box-sizing: border-box; font-family: 'Pretendard GOV','Pretendard', 'Noto Sans KR', sans-serif;}
#header ::before, #header ::after {box-sizing: border-box;}
#header::before {content:""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 900;}
#header .header-area {display: block; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 130px; background-color: #ffffff;}
/* blind */
#header #blind {display: none; overflow : hidden; position : absolute; top : 130px; left : 0; width:100%; height: 0; border-bottom:1px solid #eee; background:#fff; box-sizing : border-box;}
#header #blind:after {content:""; display: block; position: absolute; top: 0; left: 60px; width: 395px; height: 268px; background: url(/images/kor/new/common/blind_bg.png) no-repeat right bottom; box-sizing: border-box;}
/* top layout */
#header .header-top {display: block; position: relative; height: 40px; background-color: #003a6f;}
#header .header-top > .wrap {display: flex; height: 100%; padding: 0 110px;}
#header .header-top .utils {display: flex; margin-left: auto; align-items: center;}
#header .header-top .utils > li {display: block; position: relative; margin-left: 21px; padding-left: 21px;}
#header .header-top .utils > li::before {content:""; position: absolute; top: calc(50% - 10px); left: 0; width: 1px; height: 20px; background-color: rgba(255,255,255,0.2);}
/* top layout > login */
#header .header-top .btn-login {display: block; line-height: 1; font-weight: 500; font-size: 16px; color: #fff; text-decoration: none;}
/* top layout > language */
#header .header-top .lang-box {display: block; position: relative;}
#header .header-top .lang-box .btn-toggle {display: flex; position: relative; height: 40px; padding-right: 24px; border: 0; background-color: transparent; font-weight: 500; font-size: 16px; color: #fff; align-items: center; cursor: pointer;}
#header .header-top .lang-box .btn-toggle > span {display: block; position: relative;}
#header .header-top .lang-box .btn-toggle > span::before {content:""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #fff;}
#header .header-top .lang-box .btn-toggle::before {content:""; position: absolute; top: calc(50% - 10px); right: 0; width: 20px; height: 20px; background: url(/images/kor/new/common/i_arr_down_white.svg) no-repeat center / contain;}
#header .header-top .lang-box .list {display: none; overflow-x: hidden; overflow-y: auto; position: absolute; top: 100%; left: calc(50% - 90px); z-index: 999; width: 180px; max-height: 300px; padding: 4px 0; border: 1px solid #000; border-radius: 8px; background-color: #fff;}
#header .header-top .lang-box .list::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#header .header-top .lang-box .list::-webkit-scrollbar-thumb {border-radius: 6px; background: #1E3C48;}
#header .header-top .lang-box .list::-webkit-scrollbar-track {padding: 0 0.6rem; border-radius: 1rem; background: var(--color-gray-20);}
#header .header-top .lang-box .list > li {display: block;}
#header .header-top .lang-box .list > li > a {display: flex; padding: 6px 12px; line-height: 1.3; font-size: 14px; color: var(--color-gray-70); align-items: center;}
#header .header-top .lang-box .list > li > a > img {display: block; width: 19px; height: 18px; margin-right: 4px;}
/* top layout > sns */
#header .header-top .sns-list {display: flex; align-items: center;}
#header .header-top .sns-list > li {display: block; position: relative; height: 24px; margin-right: 24px;}
#header .header-top .sns-list > li:last-child {margin-right: 0;}
#header .header-top .sns-list > li .btn-sns {display: block; position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#header .header-top .sns-list > li[data-s-type="blog"] {width: 13px;}
#header .header-top .sns-list > li[data-s-type="blog"] .btn-sns {background-image: url(/images/kor/new/common/i_global_sns_blog.svg);}
#header .header-top .sns-list > li[data-s-type="facebook"] {width: 10px;}
#header .header-top .sns-list > li[data-s-type="facebook"] .btn-sns {background-image: url(/images/kor/new/common/i_global_sns_facebook.svg);}
#header .header-top .sns-list > li[data-s-type="youtube"] {width: 23px;}
#header .header-top .sns-list > li[data-s-type="youtube"] .btn-sns {background-image: url(/images/kor/new/common/i_global_sns_youtube.svg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* bg */
#header::before {visibility: hidden; background : rgba(0,0,0,0); transition: visibility 0s 0.3s, background 0.3s;}
#header.menuopen::before {visibility: visible; background-color: rgba(0,0,0,0.8); transition: visibility 0s 0s, background 0.3s;}
/* scroll down */
#header .header-area{transition: transform 0.4s;}
#header.down .header-area {transform: translateY(-40px);}
/* sns */
#header .header-top .sns-list > li .btn-sns {opacity: 0.6; transition: opacity 0.3s;}
#header .header-top .sns-list > li .btn-sns:focus-visible,
#header .header-top .sns-list > li .btn-sns:hover {opacity: 1;}
/* language */
#header .header-top .lang-box .btn-toggle::before {transition: transform 0.3s;}
#header .header-top .lang-box .btn-toggle.active::before {transform: rotate(180deg);}
#header .header-top .lang-box .btn-toggle > span::before {transition: width 0.3s;}
#header .header-top .lang-box .btn-toggle.active > span::before {width: 100%;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1800px) {
    #header .header-top > .wrap {max-width: 1600px; margin: 0 auto; padding: 0 20px;}
}
@media screen and (max-width: 1600px) {
    #header #blind:after {transform: translateX(-50%);}
}
@media screen and (max-width: 1200px) {
    #header::before {display: none;}
}
@media screen and (max-width: 1024px) {
	#header {height: 110px;}
    #header .header-area {height: 110px;}
}
@media screen and (max-width: 600px) {
    #header .header-top .utils > li {margin-left: 12px; padding-left: 12px;}
    #header .header-top .utils > li.type-pc {display: none;}
    #header .header-top .lang-box .list {left: auto; right: 0;}
}


/*-------------------------------------------------------------------
	분류이름: GNB
	분류그룹: Header
-------------------------------------------------------------------*/
#header .header-in {display: block; position: relative; height: 90px; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}

#header .header-in > .wrap {display: block; position: relative; height: 100%; margin: 0 110px;}
#header .header-in #logo {display: block; position: absolute; top: 50%; left: 0; z-index: 1; transform: translateY(-50%); flex-shrink: 0;}
#header .header-in #logo > h1 {display: block;}
#header .header-in #logo > h1 > img {display: block; height: 28px;}

#header .header-in #gnb {display: block; position: relative; height: 100%; padding: 0 200px 0 360px;}
#header .header-in #gnb .list {display: flex; max-width: 1600px; height: 100%; margin: 0 auto;}
#header .header-in #gnb .list > li {display: block; overflow: hidden; width: calc(100% / 7);}
#header .header-in #gnb .list > li:nth-child(n+8) {display: none;}
#header .header-in #gnb .list > li > a {display: flex; position: relative; height: 90px; font-weight: 600; font-size: 20px; text-decoration: none; justify-content: center; align-items: center;}
#header .header-in #gnb .list > li > a::before {content:""; position: absolute; bottom: 0; left: 50%; width: 0; height: 4px; border-radius: 4px; background-color: var(--color-main2); transform: translateX(-50%);}

#header .header-in #gnb .list > li .menu-info {display: none; opacity: 0; position: absolute; top: 0; left: 0; width:330px; height: 100%; padding-top: 110px; color: var(--color-gray-50);; text-align:left; font-weight:normal;}
#header .header-in #gnb .list > li .menu-info strong {display: block; position: relative; margin-bottom: 14px; padding-bottom: 15px; line-height: 34px; font-weight: 600; font-size: 28px; letter-spacing: -1px; color: var(--color-gray-80);}
#header .header-in #gnb .list > li .menu-info strong:after {content:""; display: block; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px; background: #dbdbdb;}

#header .header-in #gnb .list li ul {position: relative; z-index: 1; max-width: 100%; padding: 20px 14px; border-right: 1px solid #e0e0e0;}
#header .header-in #gnb .list li ul li {width: auto; height: auto;}
#header .header-in #gnb .list li ul li + li {margin-top: 4px;}
#header .header-in #gnb .list li ul li:nth-child(n+8) {display: block;}
#header .header-in #gnb .list li ul li a {display:inline-block; position: relative; height: auto; padding: 4px 4px 4px 6px; line-height: 17px; font-size: 16px; color:var(--color-gray-60); text-align: left;}
#header .header-in #gnb .list li ul li a span {font-weight: normal;}
#header .header-in #gnb .list li ul li a::after {content:""; display:block; position:absolute; top: 11px; left: 0; width: 3px; height: 3px; background:#909090;}
#header .header-in #gnb .list li ul li a.blank {background: none;}
#header .header-in #gnb .list li ul li a.blank span::after {content:""; display:inline-block; width: 16px; height: 16px; margin-top: -2px; margin-left: 2px; vertical-align:middle; background:url(/images/kor/new/common/i_blank.svg) no-repeat center / 20px;}
#header .header-in #gnb .list li ul li ul {display:none;}

#header .header-in .utils {display: block; position: absolute; top: 50%; right: 0; z-index: 1; transform: translateY(-50%); flex-shrink: 0;}
#header .header-in .utils .list {display: flex; align-items: center;}
#header .header-in .utils .list > li {margin-right: 24px;}
#header .header-in .utils .list > li:last-child {margin-right: 0;}
#header .header-in .utils .list > li .btn-search {display: block; position: relative; width: 32px; height: 32px; background: transparent url(/images/kor/new/common/i_search.svg) no-repeat center / contain;}
#header .header-in .utils .list > li .btn-wrap {display: block; position: relative; width: 22px; height: 22px;}
#header .header-in .utils .list > li .btn-wrap .btn-sitemap {display: block; position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px;}
#header .header-in .utils .list > li .btn-wrap .btn-sitemap::before {content: ""; position: absolute; top: calc(50% - 11px); right: 5px; width: 22px; height: 22px; border-width: 2px 0; border-style: solid; border-color: #000;}
#header .header-in .utils .list > li .btn-wrap .btn-sitemap::after {content: ""; position: absolute; top: calc(50% - 1px); right: 5px; width: 18px; height: 2px; background-color: #000;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .header-in #gnb #blind {display: none; opacity: 0.98;}

#header .header-in #gnb .list > li > a {transition: color 0.3s;}

#header .header-in #gnb .list li a:active,
#header .header-in #gnb .list li a:focus-visible,
#header .header-in #gnb .list li a:hover,
#header .header-in #gnb .list li a.on {color: var(--color-main2);}

#header .header-in #gnb .list > li > a::before {opacity: 0; transition: opacity 0.3s, width 0.3s;}
#header .header-in #gnb .list > li > a:focus-visible::before,
#header .header-in #gnb .list > li > a:hover::before,
#header .header-in #gnb .list > li > a.on::before {opacity: 1; width: 100%;}

#header .header-in #gnb .list ul li a:active,
#header .header-in #gnb .list ul li a:focus-visible,
#header .header-in #gnb .list ul li a:hover,
#header .header-in #gnb .list ul li a.on {color:var(--color-main2); text-decoration:underline;}
#header .header-in #gnb .list ul li a:active:after,
#header .header-in #gnb .list ul li a:focus-visible:after,
#header .header-in #gnb .list ul li a:hover:after,
#header .header-in #gnb .list ul li a.on:after {background:var(--color-main2);}

#header .header-in #gnb .list ul li a.blank span::after {transition: background 0.3s;}
#header .header-in #gnb .list ul li a.blank:focus-visible span::after,
#header .header-in #gnb .list ul li a.blank:hover span::after {background-image: url(/images/kor/new/common/i_blank_active.svg);}

#header .header-in .utils .list > li .btn-wrap .btn-sitemap::after {transition: width 0.3s, background 0.3s;}
#header .header-in .utils .list > li .btn-wrap .btn-sitemap:focus-visible::after,
#header .header-in .utils .list > li .btn-wrap .btn-sitemap:hover::after {width: 22px; background-color: var(--color-main);}

/* accessibility */
#header .header-in #gnb .list > li > a:focus-visible {outline: 2px dashed #000; outline-offset: -6px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1800px) {
    #header .header-in > .wrap {max-width: 1600px; margin: 0 auto; padding: 0 20px;}
    #header .header-in #logo {left: 20px;}
    #header .header-in .utils {right: 20px;}
}
@media screen and (max-width: 1600px) {
    #header .header-in #gnb {padding: 0 100px 0 220px;}
    #header .header-in #logo > h1 > img {height: 22px;}
    #header .header-in #gnb .list > li > a {font-size: 18px;}
    #header .header-in #gnb .list li ul li a {font-size: 15px;}

    #header .header-in #gnb .list > li .menu-info {width: 220px;}
}
@media screen and (max-width: 1200px) {
    #header .header-in #gnb {display: none;}
}
@media screen and (max-width: 1024px) {
    #header .header-in {height: 70px;}
    #header .header-in > .wrap {display: flex; align-items: center;}

    #header .header-in #logo {position: relative; top: auto; left: auto; transform: translateY(0);}
    #header .header-in .utils {position: relative; top: auto; right: auto; margin-left: auto; transform: translateY(0);}
    #header .header-in .utils .list > li {margin-right: 20px;}
}
@media screen and (max-width: 600px) {
    #header .header-in .utils .list > li {margin-right: 16px;}
}
@media screen and (max-width: 375px) {
    #header .header-in #logo > h1 > img {height: 20px;}
    #header .header-in .utils .list > li {margin-right: 8px;}
}


/*-------------------------------------------------------------------
	분류이름: 검색
	분류그룹: Header
-------------------------------------------------------------------*/
#header .search_datail {display: none; position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; height: auto; padding: 50px; border-top: 1px solid #16549b; background:#0d4789;}
#header .search_datail .wrap {position: relative; z-index: 10; max-width: 740px; width: 100%; margin: 0 auto; padding-left: 110px;}
#header .search_datail .wrap .title {position: absolute; top: 10px; left: 0; margin: 0; line-height: 30px; font-size: 24px; color: #fff;}
#header .search_datail .wrap .search_input {position: relative; height: 48px; margin-right: 60px; padding-right: 48px; border: 1px solid #fff; background: #fff;}
#header .search_datail .wrap .search_input input[type="text"] {width: 100%; padding:0 10px; height: 48px; border: 0; background: none; line-height: 48px; font-size: 16px;}
#header .search_datail .wrap .search_input input[type="text"]::placeholder {color:#858585;}
#header .search_datail .wrap .search_input input[type="submit"] {display: block; overflow: hidden; position: absolute; top: 0; right: 0; width: 48px; height: 48px; border: 0; background: url(/images/kor/new/common/search_ico2.png) no-repeat center 50%; text-indent:-9999px;}
#header .search_datail .wrap .close_btn {display: block; overflow: hidden; position: absolute; bottom: 0; right: 0; width: 48px; height: 48px; border: 1px solid #282828; background: #282828; text-indent: -9999px;}
#header .search_datail .wrap .close_btn::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(/images/kor/new/common/search_close.png) no-repeat center 50%;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .search_datail .wrap .close_btn::after {transition: transform 0.3s;}
#header .search_datail .wrap .close_btn:hover::after,
#header .search_datail .wrap .close_btn:active::after {transform: rotate(180deg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    #header .search_datail {padding: 20px}
    #header .search_datail .wrap {padding-left: 0;}
    #header .search_datail .wrap .title {position: relative; top: auto; left: auto; margin-bottom: 8px; font-size: 20px;}
}



/*-------------------------------------------------------------------
	분류이름: sitemap
	분류그룹: 레이아웃
-------------------------------------------------------------------*/
#sitemapMob {display: none; overflow: hidden; position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index:  999;}
#sitemapMob::before {content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;}
#sitemapMob .wrap {position: absolute; top: 0; right: 0; z-index: 10; width: 280px; height:100%;}
#sitemapMob .wrap .close {display: block; overflow: hidden; position: absolute; top: 0; left: 0; width: 44px; height: 44px; background: #1f1f1f url(/images/kor/new/common/mob_close_ico.png) no-repeat center 50%; text-indent: -9999px;}
#sitemapMob .wrap .binds {overflow-x: hidden; overflow-y: auto; position: relative; z-index: 1; height: 100%; background-color: #ffffff;}
#sitemapMob .wrap .binds .toputil {position: relative;}
/* sns */
#sitemapMob .wrap .binds .toputil .sns-list {display: flex; height: 44px; padding: 10px 15px; background:#fff;}
#sitemapMob .wrap .binds .toputil .sns-list > li {display:inline-block; vertical-align:top; margin:0 3px;}
#sitemapMob .wrap .binds .toputil .sns-list > li:first-child {margin-left:0;}
#sitemapMob .wrap .binds .toputil .sns-list > li .btn-sns {display: block; overflow:hidden; width: 24px; height: 24px; border: 0; border-radius: 50%; background-color: #000; text-indent:-9999px;}
/* join */
#sitemapMob .wrap .binds .toputil .join {display: flex; position:relative; background:#f7f7f7;}
#sitemapMob .wrap .binds .toputil .join > li {width: 50%;}
#sitemapMob .wrap .binds .toputil .join > li .btn-login {display: block; height: 38px; border: 0; background: #383d43; line-height: 38px; font-weight: 600; font-size: 14px; color: #fff; text-align: center; text-decoration: none; cursor: pointer;}
/* language */
#sitemapMob .wrap .binds .toputil .join .lang-box {display: block; position: relative;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle {display: flex; position: relative; width: 100%; height: 38px; border: 0; background-color: var(--color-gray-60); font-weight: 600; font-size: 14px; color: #fff; justify-content: center; align-items: center; cursor: pointer;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle > span {display: block; position: relative; margin-right: 20px;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle > span::before {content:""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #fff;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle > span::after {content:""; position: absolute; top: calc(50% - 8px); right: -20px; width: 16px; height: 16px; background: url(/images/kor/new/common/i_arr_down_white.svg) no-repeat center / contain;}
#sitemapMob .wrap .binds .toputil .join .lang-box .list {display: none; overflow-x: hidden; overflow-y: auto; position: absolute; top: 100%; right: 0; z-index: 999; width: 180px; max-height: 300px; padding: 4px 0; border: 1px solid #000; border-radius: 8px; background-color: #fff;}
#sitemapMob .wrap .binds .toputil .join .lang-box .list::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#sitemapMob .wrap .binds .toputil .join .lang-box .list::-webkit-scrollbar-thumb {border-radius: 6px; background: #1E3C48;}
#sitemapMob .wrap .binds .toputil .join .lang-box .list::-webkit-scrollbar-track {padding: 0 0.6rem; border-radius: 1rem; background: var(--color-gray-20);}
#sitemapMob .wrap .binds .toputil .join .lang-box .list > li {display: block;}
#sitemapMob .wrap .binds .toputil .join .lang-box .list > li > a {display: flex; padding: 6px 12px; line-height: 1.3; font-size: 13px; color: var(--color-gray-70); align-items: center;}
#sitemapMob .wrap .binds .toputil .join .lang-box .list > li > a > img {display: block; width: 19px; height: 18px;}
/* youtube */
#sitemapMob .wrap .binds .toputil .broadcast {position: absolute; top: 9px; right: 15px; margin: 0;} 
#sitemapMob .wrap .binds .toputil .broadcast a {display: block; overflow: hidden; position: relative; width: 85px; height: 24px; border: 1px solid #8a8a8a; border-radius:20px; background: url(/images/kor/new/common/libs_ico_mob.png) no-repeat center center; text-indent: -2000px; text-decoration: none; font-size: 13px; color: #63686e;}

/* menu - 1depth ~ */
#sitemapMob .wrap .binds > .list {display: block; width:100%;}
#sitemapMob .wrap .binds > .list li {}
#sitemapMob .wrap .binds > .list li a {display: block; position: relative; background: #fff; text-decoration: none;}
#sitemapMob .wrap .binds > .list li + li a {border-top: 1px solid #d9d9d9; }
#sitemapMob .wrap .binds > .list li a span {display: block; padding: 13px 20px 13px 20px; line-height: 21px; font-weight: 700; font-size: 17px; color: var(--color-gray-80);}
#sitemapMob .wrap .binds > .list li a::before,
#sitemapMob .wrap .binds > .list li a::after {content: ""; display: block; position: absolute; top: 50%; right: 20px; width: 24px; height: 24px; margin-top: -13px;}
#sitemapMob .wrap .binds > .list li a::before {z-index:2; background:url(/images/kor/new/common/mobile_gnb_depth1_bul.png) no-repeat center 50%;}
#sitemapMob .wrap .binds > .list li a::after {z-index:1; border:1px solid #dedede; background:#fff;}
/* menu - 2depth ~ */
#sitemapMob .wrap .binds > .list ul {display:none; width:auto;}
#sitemapMob .wrap .binds > .list ul li {}
#sitemapMob .wrap .binds > .list ul li a {border-top: 1px solid var(--color-gray-30); background: var(--color-gray-5);}
#sitemapMob .wrap .binds > .list ul li a::before {display: none;}
#sitemapMob .wrap .binds > .list ul li a::after {top: 14px; right: auto; left: 20px; width: 16px; height: 16px; margin-top: 0; border: 1px solid var(--color-gray-30); background:#fff url(/images/kor/new/common/mobile_gnb_depth2_bul.png) no-repeat center 50%; border-radius: 50%; opacity: 1; transform: rotate(0deg);}
#sitemapMob .wrap .binds > .list ul li a span {padding: 12px 20px 12px 42px; line-height: 19px; font-weight: 400; font-size: 15px; color: var(--color-gray-80); text-transform: none;}
/* menu - 3depth ~ */
#sitemapMob .wrap .binds > .list ul ul {background: #efefef;}
#sitemapMob .wrap .binds > .list ul ul li {}
#sitemapMob .wrap .binds > .list ul ul li a {border-top: 1px solid #e3e3e3 !important; background: none !important;}
#sitemapMob .wrap .binds > .list ul ul li:first-child a {border-top: 0 !important;}
#sitemapMob .wrap .binds > .list ul ul li a::after {top: 16px; left: 32px; width: 3px; height: 3px; border-color: var(--color-gray-70); border-radius: 0; background: var(--color-gray-70); transform: rotate(0deg);}
#sitemapMob .wrap .binds > .list ul ul li a span {padding: 9px 20px 9px 42px; line-height: 18px; font-size: 14px; color: var(--color-gray-70);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sitemapMob .wrap .binds .toputil .sns-list li[data-s-type="blog"] .btn-sns {background: #39b54a url(/images/kor/new/common/i_global_sns_blog.svg) no-repeat center / 16px;}
#sitemapMob .wrap .binds .toputil .sns-list li[data-s-type="facebook"] .btn-sns {background: #1e75d7 url(/images/kor/new/common/i_global_sns_facebook.svg) no-repeat center / 16px;}
#sitemapMob .wrap .binds .toputil .sns-list li[data-s-type="youtube"] .btn-sns {background: #ff0000 url(/images/kor/new/common/i_global_sns_youtube.svg) no-repeat center / 16px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sitemapMob {visibility: hidden; transition: visibility 0s 0.5s;}
#sitemapMob::before {opacity: 0; transition: opacity 0.5s;}
#sitemapMob .wrap {transform: translateX(100%); transition: transform 0.5s;}
body.fixed #sitemapMob {visibility: visible; transition: visibility 0s 0s;}
body.fixed #sitemapMob::before {opacity: 0.75;}
body.fixed #sitemapMob .wrap {transform: translateX(0);}
/* close */
#sitemapMob .wrap .close {transform: translateX(0); transition: transform 0.3s 0.1s;}
body.fixed #sitemapMob .wrap .close {transform: translateX(-100%);}
/* login */
#sitemapMob .wrap .binds .toputil .join > li .btn-login {transition: background 0.3s;}
#sitemapMob .wrap .binds .toputil .join > li .btn-login:focus-visible,
#sitemapMob .wrap .binds .toputil .join > li .btn-login:hover {background-color: var(--color-main);}
/* language */
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle > span::before {transition: width 0.3s;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle.active > span::before {width: 100%;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle > span::after {transition: transform 0.3s;}
#sitemapMob .wrap .binds .toputil .join .lang-box .btn-toggle.active > span::after {transform: rotate(180deg);}
/* menu */
#sitemapMob .wrap .binds > .list li a {transition: border 0.3s, background 0.3s, color 0.3s;}
#sitemapMob .wrap .binds > .list li a::before {transition: background 0.3s, transform 0.3s;}
#sitemapMob .wrap .binds > .list li a::after {transition: border 0.3s, background 0.3s, transform 0.3s;}

#sitemapMob .wrap .binds > .list > li a.on {background: #009d85; color:#fff;}
#sitemapMob .wrap .binds > .list > li + li a.on {border-color: #009d85;}
#sitemapMob .wrap .binds > .list > li a span {transition: color 0.3s;}
#sitemapMob .wrap .binds > .list > li a.on span {color: #fff;}
#sitemapMob .wrap .binds > .list > li a.on::before {background:url(/images/kor/new/common/mobile_gnb_depth1_bul_on.png) no-repeat center 50%; transform: rotate(90deg);}
#sitemapMob .wrap .binds > .list > li a.on::after {border-color: #80bdb0; background:#007b61;}

#sitemapMob .wrap .binds > .list ul li a.on {border-color: var(--color-gray-80); background: var(--color-gray-80);}
#sitemapMob .wrap .binds > .list ul li a.on::after {border-color: #fff; background:#efefef url(/images/kor/new/common/mobile_gnb_depth2_bul.png) no-repeat center 50%; transform: rotate(90deg);}

#sitemapMob .wrap .binds > .list ul ul li a.on span {text-decoration: underline; color: #2c8d76;}
#sitemapMob .wrap .binds > .list ul ul li a.on::after {border-color: #2c8d76; background: #2c8d76; transform: rotate(0deg);}

#sitemapMob .wrap .binds > .list ul ul li a span:focus-visible,
#sitemapMob .wrap .binds > .list ul ul li a span:hover {color: var(--color-gray-90); text-decoration: underline;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    #sitemapMob {display: block;}
}




/*-------------------------------------------------------------------
	분류이름: Footer
	분류그룹: 레이아웃
-------------------------------------------------------------------*/
#btnTop {position: fixed; bottom: 40px; right: 40px; z-index: 500; width: 64px; height: 64px; border: 0; border-radius: 16px; background-color: #fff; box-shadow: 2px 2px 12px 1px rgb(0, 0, 0, 0.1); cursor: pointer;}
#btnTop > span {display: block; position: relative; padding-top: 24px; font-weight: 600; font-size: 16px; color: var(--color-main);}
#btnTop > span::before {content:""; position: absolute; top: 0; left: calc(50% - 12px); width: 24px; height: 24px; background: url(/images/kor/new/common/i_arr_up_active.svg) no-repeat center / contain;}

#footer {display: block; position: relative; background-color: #314e5a;}
#footer * {box-sizing: border-box; font-family: 'Pretendard GOV','Pretendard', 'Noto Sans KR', sans-serif;}
#footer em {font-style: normal;}
#footer a:hover, #footer a:focus, #footer a:link, #footer a:visited, #footer a:active {text-decoration: none; color: inherit;}
#footer .inner {display: flex; max-width: 1600px; margin: 0 auto;}

#footer .footer-top {display: block; border-bottom: 1px solid rgba(255,255,255,0.15)}
#footer .footer-top .inner {padding-top: 16px; padding-bottom: 16px; align-items: center;}
/* 메뉴 */
#footer .footer-top .inner .menu {display: flex;}
#footer .footer-top .inner .menu > li {display: block; position: relative;}
#footer .footer-top .inner .menu > li + li {margin-left: 16px; padding-left: 16px;}
#footer .footer-top .inner .menu > li + li::before {content:""; position: absolute; top: calc(50% - 7px); left: 0; width: 1px; height: 14px; background-color: #ABBCC3;}
#footer .footer-top .inner .menu > li .tit {display: block; line-height: 1.2; font-weight: 500; font-size: 18px; color: #abbcc3;}
#footer .footer-top .inner .menu > li .tit > em {color: #0ac3a7;}
/* 관련사이트 */
#footer .footer-top .inner .related-site {display: flex; margin-left: auto; align-items: center;}
#footer .footer-top .inner .related-site > li {display: block;}
#footer .footer-top .inner .related-site > li + li {padding-left: 16px;}
#footer .footer-top .inner .related-site > li .site-box {display: block; position: relative;}
#footer .footer-top .inner .related-site > li .site-box .btn-toggle {display: flex; position: relative; width: 230px; height: 48px; padding: 0 40px 0 16px; border: 0; border-radius: 8px; background-color: #1e3c48; font-weight: 400; font-size: 16px; color: #fff; align-items: center; cursor: pointer;}
#footer .footer-top .inner .related-site > li .site-box .btn-toggle::before {content:""; position: absolute; top: calc(50% - 8px); right: 16px; width: 16px; height: 16px; background: url(/images/kor/new/common/i_arr_up_white.svg) no-repeat center / contain;}
#footer .footer-top .inner .related-site > li .site-box .list {display: none; overflow-x: hidden; overflow-y: auto; position: absolute; bottom: 100%; left: 0; z-index: 999; width: 100%; max-height: 300px; border-width: 1px 1px 0; border-style: solid; border-color: #86989F; border-radius: 8px 8px 0 0; background-color: #fff;}
#footer .footer-top .inner .related-site > li .site-box .list::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#footer .footer-top .inner .related-site > li .site-box .list::-webkit-scrollbar-thumb {border-radius: 6px; background: #1E3C48;}
#footer .footer-top .inner .related-site > li .site-box .list::-webkit-scrollbar-track {padding: 0 0.6rem; border-radius: 1rem; background: var(--color-gray-20);}
#footer .footer-top .inner .related-site > li .site-box .list > li {display: block;}
#footer .footer-top .inner .related-site > li .site-box .list > li > a {display: block; padding: 6px 12px; line-height: 1.3; font-size: 14px; color: var(--color-gray-70);}
/* 하단 */
#footer .footer-wrap {display: block;}
#footer .footer-wrap .inner {padding-top: 24px; padding-bottom: 50px;}
#footer .footer-wrap .inner .info {display: block;}
#footer .footer-wrap .inner .info .address {display: flex; flex-wrap: wrap;}
#footer .footer-wrap .inner .info .address > li {position: relative; margin-bottom: 8px; margin-right: 12px; padding-right: 13px; line-height: 1.3; font-size: 16px; color: #abbcc3;}
#footer .footer-wrap .inner .info .address > li > em {font-weight: 600; color: #fff;}
#footer .footer-wrap .inner .info .copyright {display: block; line-height: 1.3; font-size: 14px; color: #abbcc3;}
/* 인증마크 */
#footer .footer-wrap .inner .markers {display: flex; margin-left: auto; gap: 16px;}
#footer .footer-wrap .inner .markers > li {display: block;}
#footer .footer-wrap .inner .markers > li .marker {display: flex; overflow: hidden; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: center; justify-content: center; align-items: center;}
#footer .footer-wrap .inner .markers > li .marker > img {max-width: 40px; max-height: 40px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#btnTop {opacity: 0; transform: translateY(100px); transition: all 0.4s;}
#btnTop.active {opacity: 1; transform: translateY(0);}
#btnTop.stop {opacity: 1; position: absolute; top: -45px; bottom: auto;}

#footer .footer-top .inner .related-site > li .site-box .btn-toggle {transition: background 0.4s, border-radius 0s 0.4s;}
#footer .footer-top .inner .related-site > li .site-box .btn-toggle.active {border-radius: 0 0 8px 8px; background-color: #1b2f36; transition: background 0.4s, border-radius 0s;}
#footer .footer-top .inner .related-site > li .site-box .btn-toggle::before {transition: transform 0.3s;}
#footer .footer-top .inner .related-site > li .site-box .btn-toggle.active::before {transform: rotate(180deg);}
#footer .footer-top .inner .related-site > li .site-box .list > li > a:focus-visible,
#footer .footer-top .inner .related-site > li .site-box .list > li > a:hover {text-decoration: underline;}

/* 메뉴 - 일반 */
#footer .footer-top .inner .menu > li .tit {transition: color 0.3s;}
#footer .footer-top .inner .menu > li .tit:focus-visible,
#footer .footer-top .inner .menu > li .tit:hover {color: #ffffff;}
/* 메뉴 - 개인정보처리방침 */
#footer .footer-top .inner .menu > li .tit > em {transition: color 0.3s;}
#footer .footer-top .inner .menu > li .tit:focus-visible > em,
#footer .footer-top .inner .menu > li .tit:hover > em {color: #ffb724;}
/* 전화번호 */
#footer .footer-wrap .inner .info .tel {transition: color 0.3s;}
#footer .footer-wrap .inner .info .tel:focus-visible,
#footer .footer-wrap .inner .info .tel:hover {color: #ffb724;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
    #footer .inner {padding-left: 20px; padding-right: 20px;}
}
@media screen and (max-width: 1400px) {
    #footer .footer-top .inner {display: block; padding: 0;}
    #footer .footer-top .inner .menu {padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.15);}
    #footer .footer-top .inner .menu > li .tit {font-size: 17px;}
    #footer .footer-top .inner .related-site {margin: 0 -8px; padding: 20px;}
    #footer .footer-top .inner .related-site > li {flex-grow: 1; padding-left: 8px; padding-right: 8px;}
    #footer .footer-top .inner .related-site > li + li {padding-left: 8px;}
    #footer .footer-top .inner .related-site > li .site-box .btn-toggle {width: 100%;}
}
@media screen and (max-width: 1024px) {
    #btnTop {right: 20px;}

    #footer .footer-top .inner .related-site {margin: 0 -6px;}
    #footer .footer-top .inner .related-site > li {padding-left: 6px; padding-right: 6px;}
    #footer .footer-top .inner .related-site > li + li {padding-left: 6px;}

    #footer .footer-wrap .inner {display: block;}
    #footer .footer-wrap .inner .markers {margin-top: 32px;}
}
@media screen and (max-width: 600px) {
    #btnTop {width: 52px; height: 52px;}
    #btnTop > span {padding-top: 20px; font-size: 13px;}
    #btnTop > span::before {left: calc(50% - 10px); width: 20px; height: 20px;}
    #btnTop.stop {top: -36px;}

    #footer .footer-top .inner .menu {display: block;}
    #footer .footer-top .inner .menu > li + li {margin-top: 12px; margin-left: 0; padding-left: 0;}
    #footer .footer-top .inner .menu > li + li::before {display: none;}
    #footer .footer-top .inner .menu > li .tit {text-align: center;}

    #footer .footer-top .inner .related-site {display: block;}
    #footer .footer-top .inner .related-site > li {padding-left: 0; padding-right: 0;}
    #footer .footer-top .inner .related-site > li + li {padding-left: 0; margin-top: 12px;}
    #footer .footer-top .inner .related-site > li .site-box .btn-toggle {height: 44px;}

    #footer .footer-wrap .inner .info .address > li {font-size: 15px;}
    #footer .footer-wrap .inner .info .copyright {font-size: 13px;}

    #footer .footer-wrap .inner .markers {margin-top: 24px;}
}
@media screen and (max-width: 425px) {
    #footer .footer-wrap .inner .markers {gap: 12px;}
    #footer .footer-wrap .inner .markers {justify-content: center;}
}