@charset "UTF-8";

/*-------------------------------------------------------------------
	분류그룹 : 건너뛰기
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#skip {display: block; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; background-color: #1D1D1D; font-size: 1.6rem; text-align: center;}
#skip > a:not(:focus) {overflow: hidden; position: absolute; top: -10000px; left: 0; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
#skip > a:focus {display: block; width: 100%; height: 4rem; line-height: 4rem; font-weight: 400; color: #ffffff; outline: 2px solid #ffffff; outline-offset: -0.3em;}

/*-------------------------------------------------------------------
	분류그룹 : Common
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
html,body {height:100%;}
body.open-modal,
body.open-sitemap,
body.open-mobile,
body[data-prevent-scroll="on"] {overflow: hidden; height: 100%;}
#wrap {overflow: hidden; position: relative; min-height: 100%; background: #fff;}
/* .inner {width:100%; max-width: 1440px; margin:0 auto;} */

.swiper-pagination-lock,
.swiper-button-lock {display: none !important;}

#container {min-height: 100vh;}


/*-------------------------------------------------------------------
	분류이름 : Header
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#header {display: block;}
#header .header-wrap {display: block; position: absolute; top: 0; left: 0; z-index: 500; width: 100%; background-color: transparent;}
body.open-sitemap #header .header-wrap{z-index: 601;}

/* 헤더 영역 */
#header .header-in {display: flex; position: relative; height: 10rem; align-items: center; justify-content: space-between;}
#header .header-in::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.10);}
#header .header-in .logo-box {display: flex; position: absolute; top: 50%; left: 5rem; transform: translateY(-50%); gap: 2rem; align-items: center;}
#header .header-in .logo-box #logo {display: block;}
#header .header-in .logo-box #logo > a {display: block; width: 1em; padding-top: 44.0677%; font-size: 17.7rem; background: url(../../../images/site/kor/common/logo.png) no-repeat top center / 1em;}
#header .header-in .logo-box .mascot {display: block; width: 8.3rem; height: 8.5rem; background: url(../../../images/site/kor/common/img_mascot.png) no-repeat center / contain;}

#header .header-in #utils {display: block; position: absolute; top: 50%; right: 5rem; z-index: 20; transform: translateY(-50%);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .header-wrap {transition: box-shadow 0.4s;}
#header .header-in {transition: height 0.4s, background 0.3s;}
#header .header-in::before {transition: background-color 0.3s;}

body[data-scrolled="start"] #header .header-wrap {position: fixed; box-shadow: var(--shadow-md); animation: headerFollow 0.6s;}

/* 마우스 on & util */
[data-gnb="on"] #header .header-in,
body[data-scrolled="start"] #header .header-in,
#header.open-util .header-in,
body.open-sitemap #header .header-in {background-color: #fff;}

[data-gnb="on"] #header .header-in::before,
body[data-scrolled="start"] #header .header-in::before,
#header.open-util .header-in::before,
body.open-sitemap #header .header-in::before {background-color: #eee;}

#header .header-in #logo > a {transition: background 0.3s;}
body[data-gnb="on"] #header .header-in #logo > a,
body[data-scrolled="start"] #header .header-in #logo > a,
#header.open-util .header-in #logo > a,
body.open-sitemap #header .header-in #logo > a {background-position: 33.333% center;}

/* accessibility */
#header .header-top :focus-visible {outline: 2px dashed #fff; outline-offset: -0.2rem;}

@keyframes headerFollow {
	0% {transform: translateY(-100%);}
	100% {transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
	#header .header-in .logo-box {left: 2rem;}
	#header .header-in #utils {right: 2rem;}
	#header .header-in .logo-box #logo > a {font-size: 13.615rem;}
	#header .header-in .logo-box .mascot {width: 6rem; height: 6.14rem;}
}
@media screen and (max-width: 1024px) {
	#header .header-in {height: 8.6rem;}
	#header .header-in .logo-box #logo > a {font-size: 11.573rem;}
	#header .header-in .logo-box .mascot {width: 5rem; height: 5.1rem;}
}


/*-------------------------------------------------------------------
	분류이름 : Utils list
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#header #utils > .list {display: flex; gap: 4rem; align-items: center;}
#header #utils > .list > li {display: block; position: relative;}
#header #utils > .list > li:last-child {padding-left: 0rem;}
#header #utils > .list > li .btn-util {display: block; width: 3.2rem; height: 3.2rem; background-color: transparent; line-height: 1; font-size: 3.2rem; color: #fff;}
#header #utils > .list > li .btn-link {display: flex; height: 5.4rem; padding: 0.5rem 0; border: 1px solid #fff; border-radius: 1rem; font-weight: 600; font-size: 1.6rem; color: #fff; align-items: center;}
#header #utils > .list > li .btn-link > span {display: flex; position: relative; height: 100%; padding-left: 1.4rem; padding-right: 1.2rem; white-space: nowrap; align-items: center;}
#header #utils > .list > li .btn-link > span::before {content: ""; display: block; width: 1em; height: 1.12em; margin-right: 0.6rem; font-size: 2.5rem; background: url(../../../images/site/kor/common/mark.png) no-repeat left center / 2em;}
#header #utils > .list > li .btn-link > span::after {content: ""; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.10);}
#header #utils > .list > li .btn-link::after {content: ""; display: block; width: 4.4rem; height: 4.4rem; background: url(../../../images/site/kor/common/layout.svg#i-blank2-white) no-repeat center / 2.4rem;}
#header #utils > .list > li .btn-sitemap {display: block; position: relative; width: 3.2rem; height: 3.2rem; border-radius: var(--r-04); background-color: transparent;}
#header #utils > .list > li .btn-sitemap::before,
#header #utils > .list > li .btn-sitemap::after {content: ""; position: absolute;}
#header #utils > .list > li .btn-sitemap:not(.active)::before {top: calc(50% - 1.4rem); right: 0; width: 3.2rem; height: 2.8rem; border-width: 0.3rem 0; border-style: solid; border-color: #fff;}
#header #utils > .list > li .btn-sitemap:not(.active)::after {top: calc(50% - 0.15rem); right: 0; width: 3.2rem; height: 0.3rem; background-color: #fff;}
#header #utils > .list > li .btn-sitemap.active::before {top: 50%; left: 50%; width: 3.2rem; height: 0.3rem; background-color: #fff; transform: translate(-50%, -50%) rotate(45deg);}
#header #utils > .list > li .btn-sitemap.active::after {top: 50%; left: 50%; width: 3.2rem; height: 0.3rem; background-color: #fff; transform: translate(-50%, -50%) rotate(-45deg);}

#header .header-in #utils .user-menu {display: none; position: absolute; top: calc(100% + 1rem); left: calc(50% - 5.5rem); width: 11rem; padding: 0.6rem; border-radius: var(--r-20); background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2);}
#header .header-in #utils .user-menu > li:not(:first-child) {margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid #eee;}
#header .header-in #utils .user-menu > li .link {display: block; height: 3.3rem; border-radius: 999px; background-color: #fff; line-height: 3.3rem; font-weight: 600; font-size: 1.6rem; text-align: center; color: var(--color-gray-90);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#header #utils > .list > li.type-pc {display: block;}
#header #utils > .list > li.type-mobile {display: none;}
#header #utils > .list > li .btn-sitemap.type-pc {display: block;}
#header #utils > .list > li .btn-sitemap.type-mobile {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header #utils > .list > li .btn-util {transition: color 0.3s;}
#header #utils > .list > li .btn-link {transition: border 0.3s, background 0.3s, color 0.3s;}
#header #utils > .list > li .btn-link > span::after {transition: background 0.3s;}
#header #utils > .list > li .btn-link::after {transition: background 0.3s;}

/* user */
#header .header-in #utils .user-menu.active {display: block;}
#header .header-in #utils .user-menu > li .link {transition: color 0.3s, background 0.3s;}
#header .header-in #utils .user-menu > li .link:focus-visible,
#header .header-in #utils .user-menu > li .link:hover {color: #fff; background-color: var(--color-primary-50);}

/* header 마우스 온 */
body[data-scrolled="start"] #header #utils > .list > li .btn-util,
body[data-gnb="on"] #header #utils > .list > li .btn-util,
#header.open-util #utils > .list > li .btn-util,
body.open-sitemap #header .header-in #utils > .list > li .btn-util {color: #000;}

/* header 마우스 온 - link */
body[data-scrolled="start"] #header #utils > .list > li .btn-link,
body[data-gnb="on"] #header #utils > .list > li .btn-link,
#header.open-util #utils > .list > li .btn-link,
body.open-sitemap #header .header-in #utils > .list > li .btn-link {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
body[data-scrolled="start"] #header #utils > .list > li .btn-link::after,
body[data-gnb="on"] #header #utils > .list > li .btn-link::after,
#header.open-util #utils > .list > li .btn-link::after,
body.open-sitemap #header .header-in #utils > .list > li .btn-link::after {
	background-image: url(../../../images/site/kor/common/layout.svg#i-blank2-primary);
}
body[data-scrolled="start"] #header #utils > .list > li .btn-link > span::before,
body[data-gnb="on"] #header #utils > .list > li .btn-link > span::before,
#header.open-util #utils > .list > li .btn-link > span::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-link > span::before {
	background-position: right center;
}
body[data-scrolled="start"] #header #utils > .list > li .btn-link > span::after,
body[data-gnb="on"] #header #utils > .list > li .btn-link > span::after,
#header.open-util #utils > .list > li .btn-link > span::after,
body.open-sitemap #header .header-in #utils > .list > li .btn-link > span::after,
#header .header-in #utils > .list > li .btn-link:hover > span::after {
	background-color: rgb(0, 47, 123, 0.2);
}

/* header 마우스 온 - sitemap */
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap::before,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap::before,
#header.open-util #utils > .list > li .btn-sitemap::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap::before {
	border-color: #000;
}
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap.active::before,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap.active::before,
#header.open-util #utils > .list > li .btn-sitemap.active::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap.active::before,
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap::after,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap::after,
#header.open-util #utils > .list > li .btn-sitemap::after,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap::after {
	background-color: #000;
}

/* hover */
#header #utils > .list > li .btn-util:hover,
#header #utils > .list > li .btn-util.active,
body[data-scrolled="start"] #header #utils > .list > li .btn-util:hover,
body[data-scrolled="start"] #header #utils > .list > li .btn-util.active,
body[data-gnb="on"] #header #utils > .list > li .btn-util:hover,
body[data-gnb="on"] #header #utils > .list > li .btn-util.active,
#header.open-util .header-in #utils > .list > li .btn-util:hover,
#header.open-util .header-in #utils > .list > li .btn-util.active,
body.open-sitemap #header .header-in #utils > .list > li .btn-util:hover,
body.open-sitemap #header .header-in #utils > .list > li .btn-util.active {
	color: var(--color-primary);
}
#header #utils > .list > li .btn-link:focus-visible,
#header #utils > .list > li .btn-link:hover {
	background-color: var(--color-primary-5);
}

/* sitemap */
#header #utils > .list > li .btn-sitemap::before {transition: border-color 0.3s;}
#header #utils > .list > li .btn-sitemap::after {transition: background 0.3s, transform 0.3s;}
#header #utils > .list > li .btn-sitemap:not(.active)::after {transform: scaleX(0.7); transform-origin: center right;}
#header #utils > .list > li .btn-sitemap:not(.active):focus-visible::after,
#header #utils > .list > li .btn-sitemap:not(.active):hover::after {transform: scaleX(1);}
/* sitemap - close */
#header #utils > .list > li .btn-sitemap.active::before,
#header #utils > .list > li .btn-sitemap.active::after {transition: border 0.3s, background 0.3s;}

body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap:focus-visible::before,
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap:hover::before,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap:focus-visible::before,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap:hover::before,
#header.open-util #utils > .list > li .btn-sitemap:focus-visible::before,
#header.open-util #utils > .list > li .btn-sitemap:hover::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap:focus-visible::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap:hover::before {
	border-color: var(--color-primary);
}

body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap.active:focus-visible::before,
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap.active:hover::before,
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap:focus-visible::after,
body[data-scrolled="start"] #header #utils > .list > li .btn-sitemap:hover::after,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap.active:focus-visible::before,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap.active:hover::before,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap:focus-visible::after,
body[data-gnb="on"] #header #utils > .list > li .btn-sitemap:hover::after,
#header.open-util #utils > .list > li .btn-sitemap.active:focus-visible::before,
#header.open-util #utils > .list > li .btn-sitemap.active:hover::before,
#header.open-util #utils > .list > li .btn-sitemap:focus-visible::after,
#header.open-util #utils > .list > li .btn-sitemap:hover::after,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap.active:focus-visible::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap.active:hover::before,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap:focus-visible::after,
body.open-sitemap #header .header-in #utils > .list > li .btn-sitemap:hover::after {
	background-color: var(--color-primary);
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
	#header #utils > .list {gap: 1.6rem;}
	#header #utils > .list > li {padding-left: 0;}
	#header #utils > .list > li .btn-link {height: 4.4rem; font-size: 1.4rem;}
	#header #utils > .list > li .btn-link::after {width: 3.4rem; height: 3.4rem; background-size: 2rem;}
	#header #utils > .list > li .btn-link > span {padding: 0 0.8rem;}
	#header #utils > .list > li .btn-link > span::before {font-size: 2rem;}
}
@media screen and (max-width: 1024px) {
	#header #utils > .list {gap: 3.6rem;}
	#header #utils > .list > li.type-pc {display: none;}
	#header #utils > .list > li.type-mobile {display: block;}
	#header #utils > .list > li .btn-sitemap.type-pc {display: none;}
	#header #utils > .list > li .btn-sitemap.type-mobile {display: block;}
}
@media screen and (max-width: 768px) {
	#header #utils > .list > li.type-pc {display: none;}
}
@media screen and (max-width: 600px) {
	#header #utils > .list {gap: 2.6rem;}
}


/*-------------------------------------------------------------------
	분류이름 : GNB
	분류그룹 : Header
-------------------------------------------------------------------*/
#header .header-in #gnb {display: block; width: 100%; height: 100%;}
#header .header-in #gnb .bg {position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff;}

#gnb [class*="menu-"] > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all; letter-spacing: -0.02em;}
/* depth01 */
#gnb .depth-01 {display: flex; max-width: 1440px; height: 100%; margin: 0 auto; justify-content: center;}
#gnb .depth-01 > li {display: block; height: 100%;}
#gnb .depth-01 > li .menu-01 {display: flex; position: relative; height: 100%; padding: 0 var(--r-24); font-weight: 600; font-size: 2.1rem; color: #fff; align-items: center;}
#gnb .depth-01 > li .menu-01 > span::before {content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--color-primary);}
/* depth02 */
#gnb .depth-01 > li .sub {display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; position: absolute; top: 100%; left: 0; z-index: 10; width: 100%; height: auto; padding: 0 calc((100% - 1440px) / 2); background-color: #fff; box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);}
#gnb .depth-01 > li .sub .info {display: block; position: relative; z-index: 2; width: 29rem; min-height: 28rem; padding: 6rem 2rem 0 0; border-right: 1px solid #EEE; background-color: #fff; flex-shrink: 0;}
#gnb .depth-01 > li .sub .info > .tit {display: block; margin-bottom: 1.6rem; line-height: 1.2; font-weight: 700; font-size: 3.2rem; color: var(--color-gray-90);}
#gnb .depth-01 > li .sub .info > .txt {display: block; font-size: 1.6rem; color: var(--color-gray-70); line-height: 1.625;}

#gnb .depth-02 {display: flex; position: relative; padding: 6rem 0 3rem 3rem; flex-grow: 1; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
#gnb .depth-02 > li {display: block; width: calc((100% - (1.2rem * 4)) / 5); margin-bottom: auto;}
#gnb .depth-02 > li .menu-02 {display: flex; padding: 1.2rem 1.6rem; border-radius: 0.8rem; background-color: var(--color-gray-5); font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: var(--color-gray-90); justify-content: space-between; align-items: center;}
#gnb .depth-02 > li .menu-02:not([target="_blank"])::after {content:""; display: block; width: 2rem; height: 2rem; margin-left: auto; background: url(../../../images/site/kor/common/layout.svg#i-arr-right) no-repeat center / contain; flex-shrink: 0;}
/* #gnb .depth-02 > li.open >.menu-02 {color: var(--color-primary);} */
/* depth03 */
#gnb .depth-03 {display: block; width: 100%; padding: 2rem 1.6rem;}
#gnb .depth-03 > li {display: flex; position: relative;}
#gnb .depth-03 > li:not(:first-child) {margin-top: 0.5rem;}
#gnb .depth-03 > li .menu-03 {display: flex; overflow: hidden; font-weight: 400; font-size: 1.5rem; color: var(--color-gray-70); align-items: center;}
#gnb .depth-03 > li .menu-03::before {content: "·\00a0"; display: inline-block;}
#gnb .depth-03 > li.open .menu-03 {color: var(--color-primary); text-decoration: underline; text-underline-position: under;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#gnb [class*="menu-"][target="_blank"]::after {content:""; display: block; width: var(--r-20); height: var(--r-20); margin-left: var(--r-04); background: url(../../../images/site/kor/common/layout.svg#i-blank) no-repeat right center / 1.6rem; flex-shrink: 0;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
body.open-sitemap #header .header-in #gnb {display: none;}
#gnb [class*="menu-"] {transition: border 0.3s, background-color 0.3s, color 0.3s}

/* 1depth */
body[data-gnb="on"] #gnb .depth-01 > li .menu-01:not(:focus-visible, :hover),
#header.open-util #gnb .depth-01 > li .menu-01:not(:focus-visible, :hover),
body[data-scrolled="start"] #gnb .depth-01 > li .menu-01:not(:focus-visible, :hover) {color: #111;}

#gnb .depth-01 > li .menu-01:focus-visible,
#gnb .depth-01 > li .menu-01:hover,
#gnb .depth-01 > li[data-open="on"] .menu-01 {color: var(--color-primary);}
body[data-gnb="on"] #gnb .depth-01 > li.active .menu-01,
#header.open-util #gnb .depth-01 > li.active .menu-01,
body[data-scrolled="start"] #gnb .depth-01 > li.active .menu-01 {color: var(--color-primary);}

#gnb .depth-01 > li .menu-01 > span::before {background-color: #fff; transform: scaleX(0); transition: transform 0.4s;}
#gnb .depth-01 > li .menu-01:focus-visible > span::before,
#gnb .depth-01 > li .menu-01:hover > span::before,
#gnb .depth-01 > li[data-open="on"] .menu-01 > span::before{background-color: var(--color-primary); transform: scaleX(1);}

#gnb .depth-01 > li.active .menu-01 > span::before {transform: scaleX(0.2);}
body[data-gnb="on"] #gnb .depth-01 > li.active .menu-01 > span::before,
#header.open-util #gnb .depth-01 > li.active .menu-01 > span::before,
body[data-scrolled="start"] #gnb .depth-01 > li.active .menu-01 > span::before {background-color: var(--color-primary); transform: scaleX(1);}

#gnb .depth-01 > li .sub {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s;}
#gnb .depth-01 > li[data-open="on"] .sub {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.3s;}

/* 2depth */
#gnb .depth-02 > li:focus-within .menu-02,
#gnb .depth-02 > li .menu-02:focus-visible,
#gnb .depth-02 > li .menu-02:hover,
#gnb .depth-02 > li.active .menu-02 {background-color: var(--color-primary-5); color: var(--color-primary);}
#gnb .depth-02 > li.open .menu-02 {color: var(--color-secondary);}
#gnb .depth-02 > li .menu-02::after {transition: background 0.3s;}
#gnb .depth-02 > li:focus-within .menu-02:not([target="_blank"])::after,
#gnb .depth-02 > li:hover .menu-02:not([target="_blank"])::after,
#gnb .depth-02 > li .menu-02:not([target="_blank"]):focus-visible::after,
#gnb .depth-02 > li .menu-02:not([target="_blank"]):hover::after,
#gnb .depth-02 > li.active .menu-02:not([target="_blank"])::after {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-right-primary);}
/* 2depth - blank */
#gnb .depth-02 > li:focus-within .menu-02[target="_blank"]::after,
#gnb .depth-02 > li:hover .menu-02[target="_blank"]::after,
#gnb .depth-02 > li .menu-02[target="_blank"]:focus-visible::after,
#gnb .depth-02 > li .menu-02[target="_blank"]:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-blank-primary);}

/* 3depth */
#gnb .depth-03 > li .menu-03:focus-visible,
#gnb .depth-03 > li .menu-03:hover,
#gnb .depth-03 > li.active .menu-03 {color: var(--color-primary); text-decoration: underline; text-underline-position: under;}
#gnb .depth-03 > li .menu-03::before {transition: color 0.3s;}
#gnb .depth-03 > li .menu-03:focus-visible::before,
#gnb .depth-03 > li .menu-03:hover::before,
#gnb .depth-03 > li.active .menu-03::before {color: var(--color-primary);}
/* blank */
#gnb .depth-03 > li .menu-03::after {transition: background 0.3s;}
#gnb .depth-03 > li .menu-03[target="_blank"]:focus-visible::after,
#gnb .depth-03 > li .menu-03[target="_blank"]:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-blank-primary);}


#header .header-in.open-util #gnb .bg {display: none;}

/* accesibility */
#gnb [class*="menu-"]:focus-visible {outline: 0.2rem dashed #000; outline-offset: -0.4rem;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
	#header .header-in #gnb {padding: 0 20rem;}

	#gnb .depth-01 > li .menu-01 {padding: 0 var(--r-16); font-size: 1.8rem;}
	#gnb .depth-01 > li .sub {padding-left: 2rem; padding-right: 2rem;}

	#gnb .depth-01 > li .menu-01 {font-size: var(--fz-tit-sm);}
	#gnb .depth-01 > li .sub .info {width: 20rem; min-height: 20rem; padding-top: 3rem;}
	#gnb .depth-01 > li .sub .info > .tit {font-size: 2.4rem;}
	#gnb .depth-01 > li .sub .info > .txt {font-size: 1.5rem;}
	#gnb .depth-02 {padding-top: 3rem; padding-left: 2rem;}
}
@media screen and (max-width: 1200px) {
	#gnb .depth-01 > li .sub .info {display: none;}

	#gnb .depth-02 {padding-top: 3rem; padding-left: 0;}
}
@media screen and (max-width: 1024px) {
	#header .header-in #gnb {display: none;}
}

/*-------------------------------------------------------------------
	분류이름 : 사이트맵 (미정)
	분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#sitemap {display: block; position: fixed; top: 10rem; left: 0; z-index: 600; width: 100%; height: calc(100% - 10rem); background: #F8F9FC;}
#sitemap::before {content: ""; position: absolute; bottom: 0; right: 0; width: 32rem; height: 75.572rem; background: url(../../../images/site/kor/common/bg_sitemap.svg) no-repeat center / contain;}
#sitemap .content-wrap {display: flex; overflow-x: hidden; overflow-y: auto; position: relative; height: 100%; margin: 0 auto; padding: 0 2rem 0 2.8rem; flex-direction: column;}
#sitemap .content-wrap .con-body {display: block; max-width: 146rem; width: 100%; margin: 0 auto; padding: 4rem 0; flex-grow: 1;}

#sitemap [class*="menu-"] {color: #161616;}

/* depth01 */
#sitemap .depth-01 {display: block;}
#sitemap .depth-01 > li {display: flex; padding: 4rem 0; border-top: 1px solid #DEE1E9;}
#sitemap .depth-01 > li:first-child {padding-top: 0; border-top: 0;}
#sitemap .depth-01 > li:last-child {padding-bottom: 0;}
#sitemap .depth-01 > li .menu-01 {display: block; width: 32.5rem; margin-bottom: auto; padding-right: 1.6rem; line-height: 1.4; font-weight: 700; font-size: 3.2rem; color: var(--color-gray-90); flex-shrink: 0;}
#sitemap .depth-01 > li .menu-01 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
#sitemap .depth-01 > li .sub {display: block; min-width: 0; flex-grow: 1;}
#sitemap .depth-01 > li .sub .info {display: none;}

/* depth02 */
#sitemap .depth-02 {display: flex; position: relative; min-height: 100%; flex-wrap: wrap; gap: 3rem;}
#sitemap .depth-02 > li {display: block; width: calc((100% - 6rem) / 3);}
#sitemap .depth-02 > li .menu-02 {display: flex; padding: 1.2rem 1.6rem; border-radius: 0.8rem; background-color: #fff; font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: var(--color-gray-90); justify-content: space-between; align-items: center;}
#sitemap .depth-02 > li .menu-02:not([target="_blank"])::after {content:""; display: block; width: 2rem; height: 2rem; margin-left: auto; background: url(../../../images/site/kor/common/layout.svg#i-arr-right) no-repeat center / contain; flex-shrink: 0;}
#sitemap .depth-02 > li .menu-02 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

/* depth03 */
#sitemap .depth-03 {display: block; padding: 1.6rem 1.6rem 0;}
#sitemap .depth-03 > li {width: 100%;}
#sitemap .depth-03 > li .menu-03 {display: flex; overflow: hidden; font-weight: 400; font-size: 1.5rem; color: var(--color-gray-70);}
#sitemap .depth-03 > li .menu-03::before {content: "·\00a0"; display: inline-block;}
#sitemap .depth-03 > li .menu-03 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

#sitemap .btn-menu-close {position: absolute; top: 4.9rem; right: 1.6rem;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* 외부링크 */
#sitemap [class*="menu-"][target="_blank"]::after {content:""; display: block; width: var(--r-20); height: var(--r-20); margin-left: var(--r-04); background: url(../../../images/site/kor/common/layout.svg#i-blank) no-repeat right center / 1.6rem; flex-shrink: 0;}
/* #sitemap .depth-03 > li .menu-03[target="_blank"]::after {width: var(--r-16); height: var(--r-16);} */

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sitemap {visibility: hidden; opacity: 0; transition: opacity 0.4s, visibility 0s 0.4s;}
#sitemap.on {opacity: 1; visibility: visible; transition: opacity 0.4s, visibility 0s 0s;}

#sitemap [class*="menu-"] {transition: background-color 0.3s, color 0.3s;}

/* 1depth */
#sitemap .depth-01 > li:focus-within .menu-01,
#sitemap .depth-01 > li:hover .menu-01,
#sitemap .depth-01 > li .menu-01:focus-visible,
#sitemap .depth-01 > li .menu-01:hover,
#sitemap .depth-01 > li.active .menu-01 {color: var(--color-primary);}

/* 2depth */
#sitemap .depth-02 > li:focus-within .menu-02,
#sitemap .depth-02 > li:hover .menu-02,
#sitemap .depth-02 > li .menu-02:focus-visible,
#sitemap .depth-02 > li .menu-02:hover,
#sitemap .depth-02 > li.active .menu-02 {background-color: var(--color-primary-5); color: var(--color-primary);}
/* 2depth - normal */
#sitemap .depth-02 > li .menu-02::after {transition: background 0.3s;}
#sitemap .depth-02 > li:focus-within .menu-02:not([target="_blank"])::after,
#sitemap .depth-02 > li:hover .menu-02:not([target="_blank"])::after,
#sitemap .depth-02 > li .menu-02:not([target="_blank"]):focus-visible::after,
#sitemap .depth-02 > li .menu-02:not([target="_blank"]):hover::after,
#sitemap .depth-02 > li.active .menu-02:not([target="_blank"])::after {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-right-primary);}
/* 2depth - blank */
#sitemap .depth-02 > li:focus-within .menu-02[target="_blank"]::after,
#sitemap .depth-02 > li:hover .menu-02[target="_blank"]::after,
#sitemap .depth-02 > li .menu-02[target="_blank"]:focus-visible::after,
#sitemap .depth-02 > li .menu-02[target="_blank"]:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-blank-primary);}

/* 3depth */
#sitemap .depth-03 > li .menu-03:focus-visible,
#sitemap .depth-03 > li .menu-03:hover,
#sitemap .depth-03 > li.active .menu-03 {color: var(--color-primary); text-decoration: underline; text-underline-position: under;}

#sitemap .depth-03 > li .menu-03::before {transition: color 0.3s;}
#sitemap .depth-03 > li .menu-03:focus-visible::before,
#sitemap .depth-03 > li .menu-03:hover::before,
#sitemap .depth-03 > li.active .menu-03::before {color: var(--color-primary);}
/* 3depth - blank */
#sitemap .con-body .depth-03 > li .menu-03::after {transition: background 0.3s;}
#sitemap .con-body .depth-03 > li .menu-03[target="_blank"]:focus::after,
#sitemap .con-body .depth-03 > li .menu-03[target="_blank"]:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-blank-primary);}

/* accessbility */
#sitemap .depth-01 > li .menu-01:focus-visible {outline: 2px dashed var(--color-primary); outline-offset: -2px;}
#sitemap .depth-02 > li .menu-02:focus-visible {outline: 2px dashed var(--color-primary); outline-offset: -4px;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
	#sitemap .depth-01 > li .menu-01 {width: 24rem; font-size: 2.8rem;}
	#sitemap .depth-02 {gap: 2rem;}
	#sitemap .depth-02 > li {display: block; width: calc((100% - 4rem) / 3);}
}
@media screen and (max-width: 1024px) {
	#sitemap {display: none;}
}


/*-------------------------------------------------------------------
	분류이름 : 모바일 메뉴
	분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#mobileMap {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#mobileMap::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}

#mobileMenu {display: none; position: absolute; top:0; right: -80%; z-index: 100; width: 60%; height: 100%; background-color: #ffffff; flex-direction: column;}
#mobileMenu .con-head {display: block; position: relative; border-bottom: 1px solid var(--color-gray-30); z-index: 1; background-color: #ffffff;}

#mobileMenu .con-head .head-top {display: flex; position: relative; height: 6.4rem; padding: 0 6rem 0 2rem; align-items: center;}
#mobileMenu .con-head .head-top::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--color-gray-30);}
#mobileMenu .con-head .head-top .logo {display: block; font-size: 11.573rem; background: url(../../../images/site/kor/common/logo.png) no-repeat 33.333% center / 1em;}
#mobileMenu .con-head .head-top .logo::before {content: ""; display: block; width: 1em; padding-top: 44.0677%;}
#mobileMenu .con-head .head-top .btns {display: flex; margin-left: auto; gap: 1.2rem;}
#mobileMenu .con-head .head-top .btns .btn-util {display: block; width: 3.2rem; height: 3.2rem; background-color: transparent; line-height: 1; font-size: 3.2rem; color: var(--color-gray-90);}

#mobileMenu .con-head .head-user {display: block; padding: 2rem;}
#mobileMenu .con-head .head-user .user-card {display: flex; min-height: 6rem; position: relative; padding-left: 6rem; padding-right: 8rem; flex-direction: column; justify-content: center;}
#mobileMenu .con-head .head-user .user-card .profile {display: block; position: absolute; top: 0; left: 0; width: 6rem; height: 6rem; border: 1px solid var(--color-gray-30); border-radius: 50%; background: var(--color-primary-50) url(../../../images/site/kor/common/img_mascot.png) no-repeat top -100% right 100% / 7rem;}
#mobileMenu .con-head .head-user .user-card .profile > span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
#mobileMenu .con-head .head-user .user-card .tit {display: block; padding-left: 1.2rem; line-height: 1.2; font-weight: 600; font-size: 1.7rem; color: var(--color-gray-80);}
#mobileMenu .con-head .head-user .user-card .txt {display: block; margin-top: 1rem; padding-left: 1.2rem; line-height: 1.2; font-weight: 400; font-size: 1.5rem; color: var(--color-gray-70);}
#mobileMenu .con-head .head-user .user-card .btn-util {display: flex; position: absolute; top: calc(50% - 1.7rem); right: 0; width: 8rem; height: 3.4rem; padding: 0; border-radius: 999px; background-color: var(--color-primary); font-weight: 500; font-size: 14px; color: #fff; align-items: center; justify-content: center;}

#mobileMenu .con-head .head-user .user-info {display: flex; position: relative; margin-top: 1.6rem; padding: 1.6rem; border-radius: 0.8rem; background-color: var(--color-primary-10);}
#mobileMenu .con-head .head-user .user-info::before {content:""; position: absolute; top: calc(50% - 20px); left: 50%; width: 1px; height: 4rem; background-color: rgba(90, 108, 129, 0.5);}
#mobileMenu .con-head .head-user .user-info .item {display: block; width: 50%; text-align: center;}
#mobileMenu .con-head .head-user .user-info .item > .tit {display: block; margin-bottom: 0.8rem; line-height: 1; font-weight: 500; font-size: 1.5rem; color: var(--color-gray-80);}
#mobileMenu .con-head .head-user .user-info .item > .data {display: block; line-height: 1; font-weight: 600; font-size: 1.7rem; color: var(--color-primary);}
/* 닫기 */
#mobileMenu .btn-menu-close {position: absolute; top: 1.6rem; right: 2rem; z-index: 10;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#mobileMenu .con-head .head-user .user-card .profile[data-s-type="setting"]::before {content: ""; position: absolute; bottom: 0; right: -2px; width: 2.4rem; height: 2.4rem; border: 1px solid var(--color-gray-30); border-radius: 50%; background: #fff url(../../../images/site/kor/common/layout.svg#i-settings-fill-gray) no-repeat center / 1.6rem;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#mobileMap.active {visibility: visible; transition: visibility 0s 0s;}
#mobileMap.active::before {background-color: rgba(0,0,0,0.7);}

#mobileMenu {opacity: 0; transition: right 0.4s, opacity 0.4s;}
#mobileMenu.on {opacity: 1; right: 0;}

#mobileMenu .con-head .head-top .btns .btn-util {transition: color 0.3s;}
#mobileMenu .con-head .head-top .btns .btn-util:focus-visible,
#mobileMenu .con-head .head-top .btns .btn-util:hover {color: var(--color-primary);}

#mobileMenu .con-head .head-user .user-card .profile {transition: border 0.3s;}
#mobileMenu .con-head .head-user .user-card .profile:focus-visible,
#mobileMenu .con-head .head-user .user-card .profile:hover {border-color: var(--color-primary);}
#mobileMenu .con-head .head-user .user-card .profile[data-s-type="setting"]::before {transition: border 0.3s, background 0.3s;}
#mobileMenu .con-head .head-user .user-card .profile[data-s-type="setting"]:focus-visible::before,
#mobileMenu .con-head .head-user .user-card .profile[data-s-type="setting"]:hover::before {border-color: var(--color-primary); background-image: url(../../../images/site/kor/common/layout.svg#i-settings-fill-primary);}

#mobileMenu .con-head .head-user .user-card .btn-util {transition: background 0.3s, color 0.3s;}
#mobileMenu .con-head .head-user .user-card .btn-util:focus-visible,
#mobileMenu .con-head .head-user .user-card .btn-util:hover {background-color: var(--color-primary-50);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    #mobileMenu {display: flex;}
}
@media screen and (max-width: 768px) {
	#mobileMenu {width: 80%;}
}
@media screen and (max-width: 600px) {
	#mobileMenu {width: 100%;}
}

/*-------------------------------------------------------------------
	분류이름: 메뉴 구조
	분류그룹: 모바일 메뉴
-------------------------------------------------------------------*/
#mobileMenu .con-body {display: block; overflow-x: hidden; overflow-y: auto; position: relative; flex-grow: 1;}
#mobileMenu .con-body::before {content:''; position: absolute; top: 0; left: 0; width: 14rem; height: 100%; background-color: var(--color-primary-50);}
/* 1depth */
#mobileMenu .con-body .depth-01 {display:block; padding: 0.8rem 0;}
#mobileMenu .con-body .depth-01 > li {display: block;}
#mobileMenu .con-body .depth-01 > li > .menu-01 {display: flex; position: relative; z-index: 9; width: 14rem; padding: 1.6rem 0.8rem 1.6rem 2.4rem; background-color: transparent; font-weight: 600; font-size: 1.7rem; color: #ffffff; word-break: break-all; align-items: center;}
#mobileMenu .con-body .depth-01 > li > .menu-01 > span {display: block; overflow: hidden; line-height: 1.2; overflow-wrap: break-word; word-break: keep-all;}
/* 2depth */
#mobileMenu .con-body .depth-01 > li .sub {position: absolute; top: 0; left: 0; width: 100%; padding-left: 14rem; background-color: var(--color-primary-50);}
#mobileMenu .con-body .depth-01 > li .sub .info {display: none;}
#mobileMenu .con-body .depth-02 {display: block; padding: 0.8rem 2.4rem 0.8rem 2.4rem; background-color: #ffffff;}
#mobileMenu .con-body .depth-02 > li {border-bottom: 1px solid var(--color-gray-40);}
#mobileMenu .con-body .depth-02 > li .menu-02 {display: flex; position: relative; padding: 1.6rem 3.2rem 1.6rem 0; line-height: 1.2; font-weight: 500; font-size: 1.6rem; color: var(--color-gray-80); align-items: center;}
#mobileMenu .con-body .depth-02 > li .menu-02::after {content: ""; display: block; position: absolute; top: calc(50% - 0.9rem); right: 0; width: 1.8rem; height: 1.8rem; background: url(../../../images/site/kor/common/layout.svg#i-arr-right) no-repeat center / 1.8rem;}
#mobileMenu .con-body .depth-02 > li .menu-02 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* 3depth */
#mobileMenu .con-body .depth-03 {margin-bottom: 1.2rem; padding: 1.2rem; border-radius: 0.6rem; background-color: #F8F9FC;}
#mobileMenu .con-body .depth-03 > li {display: block;}
#mobileMenu .con-body .depth-03 > li .menu-03 {display: flex; position:relative; padding: 0.4rem 8px 0.4rem calc(0.4rem + 0.6em); line-height: 1.2; font-weight: 500; font-size: 1.5rem; color: var(--color-gray-70); align-items: center;}
#mobileMenu .con-body .depth-03 > li .menu-03::before {content: "•"; display: block; position: absolute; top: 0.4rem; left: 0; min-width: 0.6em; margin-right: 0.4rem; color: inherit; text-align: center; white-space: nowrap;}
#mobileMenu .con-body .depth-03 > li .menu-03 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#mobileMenu .con-body .depth-02 > li.child .menu-02::after {opacity: 1; opacity: 1; transform: translateX(0); background-image: url(../../../images/site/kor/common/layout.svg#i-arr-down);}

/* blank */
#mobileMenu .con-body .depth-02 > li .menu-02[target="_blank"]::after {opacity: 1; transform: translateX(0); background-image: url(../../../images/site/kor/common/layout.svg#i-blank);}
#mobileMenu .con-body .depth-03 > li .menu-03[target="_blank"] {padding-right: 2.4rem;}
#mobileMenu .con-body .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; position: absolute; top: calc(50% - 0.8rem); right: 0; width: 1.6rem; height: 1.6rem; background: url(../../../images/site/kor/common/layout.svg#i-blank-gray) no-repeat center / contain;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* 1차메뉴 */
#mobileMenu .con-body .depth-01 > li > .menu-01 {box-shadow: 0 0 10px 0 rgba(0,0,0,0); transition: background 0.3s, color 0.3s;}
#mobileMenu .con-body .depth-01 > li > .menu-01:focus-visible,
#mobileMenu .con-body .depth-01 > li > .menu-01:hover,
#mobileMenu .con-body .depth-01 > li.active > .menu-01 {background-color: #fff; color: var(--color-primary);}

/* 2차메뉴 */
#mobileMenu .con-body .depth-01 > li .sub {visibility: hidden; opacity: 0; transition: all 0.3s;}
#mobileMenu.on .con-body .depth-01 > li.active .sub {visibility: visible; opacity: 1;}
#mobileMenu .con-body .depth-02 {overflow: hidden; height: 0;}
#mobileMenu.on .con-body .depth-01 > li.active .depth-02 {overflow: visible; height: auto;}

#mobileMenu .con-body .depth-02 > li .menu-02:focus,
#mobileMenu .con-body .depth-02 > li .menu-02:hover,
#mobileMenu .con-body .depth-02 > li.active .menu-02 {color: var(--color-primary);}
#mobileMenu .con-body .depth-02 > li .menu-02::after {transition: background 0.3s, opacity 0.3s, transform 0.3s;}
#mobileMenu .con-body .depth-02 > li:not(.child) .menu-02:not([target="_blank"])::after {opacity: 0; transform: translateX(-6px); transition: background 0.3s, opacity 0.3s, transform 0.3s;}
#mobileMenu .con-body .depth-02 > li:not(.child) .menu-02:not([target="_blank"]):focus::after,
#mobileMenu .con-body .depth-02 > li:not(.child) .menu-02:not([target="_blank"]):hover::after {opacity: 1; transform: translateX(0); background-image: url(../../../images/site/kor/common/layout.svg#i-arr-right-primary);}
/* child */
#mobileMenu .con-body .depth-02 > li.child .menu-02:focus::after,
#mobileMenu .con-body .depth-02 > li.child .menu-02:hover::after,
#mobileMenu .con-body .depth-03 > li.child .menu-03:focus::after,
#mobileMenu .con-body .depth-03 > li.child .menu-03:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-down-primary);}
#mobileMenu .con-body .depth-02 > li.child.active .menu-02::after,
#mobileMenu .con-body .depth-03 > li.child.active .menu-03::after {transform: translateX(0) rotate(180deg);}
/* blank */
#mobileMenu .con-body .depth-02 > li .menu-02[target="_blank"]:focus::after,
#mobileMenu .con-body .depth-02 > li .menu-02[target="_blank"]:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-blank-primary);}

/* 3차메뉴 */
#mobileMenu .con-body .depth-03 > li > .menu-03 {transition: color 0.3s;}
#mobileMenu .con-body .depth-03 > li > .menu-03:focus-visible,
#mobileMenu .con-body .depth-03 > li > .menu-03:hover,
#mobileMenu .con-body .depth-03 > li > .menu-03.active {font-weight: 500; color: var(--color-primary);}
/* blank */
#mobileMenu .con-body .depth-03 > li .menu-03[target="_blank"]:focus::after,
#mobileMenu .con-body .depth-03 > li .menu-03[target="_blank"]:hover::after {background-image: url(../../../images/site/kor/common/layout.svg#i-blank-primary);}

/* 스크롤바 커스텀 */
@media (hover: hover) and (pointer: fine) {
	#mobileMenu .con-body::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
	#mobileMenu .con-body::-webkit-scrollbar-thumb {border-radius: 6px; background: var(--color-gray-50);}
	#mobileMenu .con-body::-webkit-scrollbar-track {padding: 0 0.6rem; border-radius: 1rem; background: var(--color-gray-20);}
}
/* accessibility */
#mobileMenu .con-body .depth-01 > li > .menu-01:focus-visible {outline: 2px dashed #111; outline-offset: -4px;}
#mobileMenu .con-body .depth-02 > li > .menu-02:focus-visible {outline: 2px dashed var(--color-gray-90); outline-offset: -2px;}
#mobileMenu .con-body .depth-03 > li > .menu-03:focus-visible {outline: 2px dashed var(--color-gray-90); outline-offset: -2px;}



/*-------------------------------------------------------------------
	분류이름: 공통
	분류그룹: footer
-------------------------------------------------------------------*/
#footer {position: relative;}
#footer .btn-top {display: flex; position: fixed; bottom: 3rem; right: 12rem; z-index: 10; width: 6rem; height: 6rem; border-radius: 50%; background: var(--color-primary); align-items: center; justify-content: center;}
#footer .btn-top > i {display: block; position: relative; font-size: 4rem; color: #fff;}
#footer .btn-top::before,
#footer .btn-top::after {content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-primary);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#footer .btn-top.stop {position: absolute; top: 0; bottom: auto; transform: translateY(-50%);}
#footer .btn-top::before {animation: ani-btn-top 1.6s infinite;}
#footer .btn-top::after {animation: ani-btn-top 1.6s 0.4s infinite;}
@keyframes ani-btn-top {
	0% {opacity: 0.6; transform: scale(1);}
	80% {opacity: 0; transform: scale(1.3);}
	100% {opacity: 0; transform: scale(1);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1919px) {
	#footer .btn-top {right: 5rem;}
}
@media screen and (max-width: 1480px) {
	#footer .btn-top {right: 2rem;}
}
@media screen and (max-width: 768px) {
	#footer .btn-top {width: 4.8rem; height: 4.8rem;}
	#footer .btn-top > i {font-size: 3.2rem;}
}


/*-------------------------------------------------------------------
	분류이름: 배너
	분류그룹: footer
-------------------------------------------------------------------*/
.footer-banner {display: block; position: relative; border-top: 1px solid #EEE; background: #fff;}
.footer-banner .inner {display: flex; position: relative; max-width: 1480px; margin: 0 auto; padding-left: 26rem; padding-right: 2rem; align-items: center;}
.footer-banner .inner > .hd {display: flex; position: absolute; top: 0; left: 0; height: 100%; color: var(--color-gray-90); align-items: center;}
.footer-banner .inner > .hd > h2 {display: block; margin-right: 3rem; font-weight: 700; font-size: 2.1rem;}
.footer-banner .inner > .hd > .slide-control {display: flex; gap: 0.8rem;}
.footer-banner .inner > .hd > .slide-control .btn-ctrl {display: block; width: 3rem; height: 3rem; border: 1px solid #eee; border-radius: 999px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: 2.4rem;}
.footer-banner .inner > .slide-container {display: block; overflow: hidden; height: 8rem; flex-grow: 1;}

.footer-banner .swiper-container {z-index: 1; padding: 2em 0 0 0;}
.footer-banner .swiper-slide {display: flex; align-items: center;}
.footer-banner .swiper-slide .item {display: block;}
.footer-banner .swiper-slide .item > img {display: block; height: auto; padding: 0 0.2rem;}

/*-------------------------------------------------------------------
	@variaion
-------------------------------------------------------------------*/
.footer-banner .inner > .hd > .slide-control .btn-ctrl {outline-offset: 0.3rem;}
.footer-banner .inner > .hd > .slide-control .btn-ctrl.btn-prev {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-left);}
.footer-banner .inner > .hd > .slide-control .btn-ctrl.btn-next {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-right);}
.footer-banner .inner > .hd > .slide-control .btn-ctrl.btn-pause {background-image: url(../../../images/site/kor/common/layout.svg#i-slide-pause);}
.footer-banner .inner > .hd > .slide-control .btn-ctrl.btn-pause.stop {background-image: url(../../../images/site/kor/common/layout.svg#i-slide-play);}

.footer-banner .inner > .hd > .slide-control .btn-next.swiper-button-lock + .btn-pause {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.footer-banner .inner > .hd > .slide-control .btn-ctrl {transition: background 0.3s, box-shadow 0.3s; box-shadow: 0 0 0 0.3rem rgba(0, 91, 172, 0);}
.footer-banner .inner > .hd > .slide-control .btn-ctrl:focus-visible,
.footer-banner .inner > .hd > .slide-control .btn-ctrl:hover {background-color: var(--color-primary); box-shadow: 0 0 0 0.3rem rgba(0, 91, 172, 0.2);}

.footer-banner .inner > .hd > .slide-control .btn-prev:focus-visible,
.footer-banner .inner > .hd > .slide-control .btn-prev:hover {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-left-white);}
.footer-banner .inner > .hd > .slide-control .btn-next:focus-visible,
.footer-banner .inner > .hd > .slide-control .btn-next:hover {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-right-white);}
.footer-banner .inner > .hd > .slide-control .btn-pause:focus-visible,
.footer-banner .inner > .hd > .slide-control .btn-pause:hover {background-image: url(../../../images/site/kor/common/layout.svg#i-slide-pause-white);}
.footer-banner .inner > .hd > .slide-control .btn-pause.stop:focus-visible,
.footer-banner .inner > .hd > .slide-control .btn-pause.stop:hover {background-image: url(../../../images/site/kor/common/layout.svg#i-slide-play-white);}

.footer-banner .swiper-slide .item:focus-visible {outline: 2px dashed #000; outline-offset: -0.2rem;}


/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px){
	.footer-banner {padding: 0 2rem;}
	.footer-banner .inner {max-width: none; padding-left: 24rem;}
}
@media screen and (max-width: 1024px){
	.footer-banner .inner > .slide-container {margin-right: -10rem;}
}
@media screen and (max-width: 600px){
	.footer-banner .inner {padding-left: 11rem;}
	.footer-banner .inner > .hd > h2 {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
	.footer-banner .inner > .hd > .slide-control {gap: 0.6rem;}
	.footer-banner .inner > .hd > .slide-control .btn-ctrl {width: 2.6rem; height: 2.6rem; background-size: 2rem;}
}
@media screen and (max-width: 480px){
    .footer-banner .inner {padding-left: 0;}
    .footer-banner .inner > .hd{display: none;}
}
@media screen and (max-width: 425px){
	.footer-banner .inner > .slide-container {margin-right: -14rem;}
}


/*-------------------------------------------------------------------
	분류이름: 배너
	분류그룹: footer
-------------------------------------------------------------------*/
.footer-content {display: block; padding: 6rem 0 8.4rem; background: #222;}
.footer-content .inner {display: flex; position: relative; max-width: 1480px; margin: 0 auto; padding: 0 2rem; align-items: center;}
.footer-content .inner .logo {display: block; overflow: hidden; flex-shrink: 0; width: 1em; font-size: 17.7rem;}
.footer-content .inner .logo::before {content: ""; display: block; padding-top: 44.0677%; font-size: inherit; background: url(../../../images/site/kor/common/logo.png) no-repeat bottom center / 1em;}
.footer-content .inner .contact{display:inline-flex; align-items: flex-start; justify-content: center; gap:0.8rem 1.2rem; margin-bottom:1.4rem; padding:0.6rem 1.8rem; border-radius: 0.4rem; background:rgba(255, 255, 255, 0.08); color:#fff;}
.footer-content .inner .contact span{opacity: 0.6;font-size:1.6rem;font-weight:600;}
.footer-content .inner .contact strong{font-size:1.8rem;font-weight:600;}
.footer-content .inner .contact strong small{font-size:1.6rem;}
.footer-content .inner > .bd {display: block; padding-left: 6.4rem;}
.footer-content .inner > .bd .menu {display: flex; margin-bottom: 2.4rem; flex-wrap: wrap;}
.footer-content .inner > .bd .menu > li {display: block; position: relative; padding-right: 41px;}
.footer-content .inner > .bd .menu > li:not(:last-child)::after {content: ""; position: absolute; top: calc(50% - 10px); right: 20px; width: 1px; height: 20px; background-color: #656565;}
.footer-content .inner > .bd .menu > li:last-child {padding-right: 0;}
.footer-content .inner > .bd .menu > li .link {display: block; font-weight: 600; font-size: 1.8rem; color: #CBCBCB;}
.footer-content .inner > .bd .copyright {display: block; font-size: 1.6rem; font-weight: 400; line-height: 1.875; color: #878787;}
.footer-content .inner .sns {display: flex; position: absolute; top: 0; right: 0; padding-right: 2rem; gap: 1rem;}
.footer-content .inner .sns [class*="btn-sns"] {display: block; width: 3.2rem; height: 3.2rem; font-size: 3.2rem; background-size: 3em; background-repeat: no-repeat;}

/*-------------------------------------------------------------------
	@variaion
-------------------------------------------------------------------*/
.footer-content .inner .sns .btn-sns-instagram {background-image: url(../../../images/site/kor/common/i_sns.png); background-position: left top;}
.footer-content .inner .sns .btn-sns-facebook {background-image: url(../../../images/site/kor/common/i_sns.png); background-position: -1em top;}
.footer-content .inner .sns .btn-sns-youtube {background-image: url(../../../images/site/kor/common/i_sns.png); background-position: -2em top;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.footer-content .inner > .bd .menu > li .link {transition: color 0.3s;}
.footer-content .inner > .bd .menu > li .link:focus,
.footer-content .inner > .bd .menu > li .link:hover {color: var(--color-point);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px){
	.footer-content .inner > .bd {padding-left: 4rem;}
	.footer-content .inner > .bd .menu {margin-bottom: 2rem;}
}
@media screen and (max-width: 1024px){
	.footer-content .inner > .bd {padding-left: 2rem;}
}
@media screen and (max-width: 768px){
	.footer-content .inner {display: block;}
	.footer-content .inner .logo {margin-bottom: 2.4rem;}
	.footer-content .inner > .bd {padding-left: 0;}
}
@media screen and (max-width: 600px){
	.footer-content {padding: 4.8rem 0 6.4rem;}
	.footer-content .inner .logo {margin: 0 auto 4rem;}
	.footer-content .inner .contact{margin:0 auto 1.2rem;}
	.footer-content .inner .contact strong{font-size:1.6rem;text-align: left;}
	.footer-content .inner .contact strong small{display:inline-block;font-size:1.4rem;}
	.footer-content .inner > .bd {padding-left: 0; text-align: center;}
	.footer-content .inner > .bd .menu {margin: 0 auto 2.4rem; justify-content: center;}
	.footer-content .inner > .bd .copyright {text-align: center;}
	.footer-content .inner > .bd .copyright p + p {margin-top: 1em;}
	.footer-content .inner .sns {position: static; margin-top: 4rem; padding-right: 0; justify-content: center;}
}
@media screen and (max-width: 367px){
	.footer-content .inner .contact{flex-direction: column; align-items: center;}
	.footer-content .inner .contact strong{font-size:1.6rem;text-align: center;}
}