@charset "UTF-8";

#container {display: block; position: relative; min-height: 100vh; padding-top: calc(var(--sp-44) + var(--sp-84));}

@media screen and (max-width: 1024px) {
	#container {padding-top: 7rem;}
}
@media screen and (max-width: 600px) {
	#container {padding-top: var(--sp-60);}
}

/*-------------------------------------------------------------------
	분류그룹 : 건너뛰기
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#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 {overflow: hidden; height: 100%;}
#wrap {overflow: hidden; position: relative; min-height: 100%; background: #fff;}
.inner {width:100%; max-width: 1440px; margin:0 auto;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* scroll down */
@media screen and (max-width: 1500px) {
	.inner {padding: 0 var(--sp-20);}
}

/*-------------------------------------------------------------------
	분류이름 : Header
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#header {display: block;}
#header .header-wrap {display: block; position: fixed; top: 0; left: 0; z-index: 500; width: 100%; background-color: #fff;}
#header .header-wrap::after {content:""; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; border-bottom: 1px solid var(--color-gray-30);}

#header .header-top {display: block; background-color: var(--color-main-20);}
#header .header-top .inner {display: flex; height: var(--sp-44); align-items: center; justify-content: space-between;}
#header .header-top .inner .link {display: block; width: 15rem; height: 2.4rem;}
#header .header-top .inner .quick {display: flex; margin-left: auto; align-items: center;}
#header .header-top .inner .quick > li {display: block; position: relative;}
#header .header-top .inner .quick > li + li {margin-left: var(--sp-16); padding-left: var(--sp-16);}
#header .header-top .inner .quick > li + li::before {content:""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; height: 2px; margin: auto 0; border-radius: 50%; background-color: var(--color-gray-30);}
#header .header-top .inner .quick > li .btn-quick {display: block; background-color: transparent; font-weight: 500; font-size: 1.6rem; color: var(--color-gray-70); text-transform: uppercase;}

#header .header-in {display: flex; max-width: 144rem; margin: 0 auto; height: var(--sp-84); align-items: center; justify-content: space-between;}
#header .header-in #logo {display: flex; height: 100%; align-items: center; flex-shrink: 0;}
#header .header-in #logo > a {display: block; height: var(--sp-28);}
#header .header-in #logo > a > img {display: block; width: auto; height: 100%;}

#header .header-in #utils {display: flex; height: 100%; margin-left: auto; align-items: center; flex-shrink: 0;}
#header .header-in #utils > .list {display: flex; align-items: center;}
#header .header-in #utils > .list > li {display: block;}
#header .header-in #utils > .list > li + li {margin-left: var(--sp-16);}
#header .header-in #utils > .list > li .btn-sitemap {display: block; position: relative; width: 4.2rem; height: 4.2rem; border-radius: var(--sp-08); background-color: var(--color-main);}
#header .header-in #utils > .list > li .btn-sitemap::before {content: ""; position: absolute; top: calc(50% - 0.8rem); right: 1rem; width: 2.2rem; height: 1.6rem; border-width: 2px 0; border-style: solid; border-color: #fff;}
#header .header-in #utils > .list > li .btn-sitemap::after {content: ""; position: absolute; top: calc(50% - 0.1rem); right: 1rem; width: 2.2rem; height: 0.2rem; background-color: #fff;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#header .header-top .inner .quick > li .btn-quick.youtube {width: 3rem; height: 2.1rem; background: transparent url(/smst/resource/www/img/renew/common/i_quick_youtube.svg) no-repeat center / contain;}

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

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* scroll down */
@media screen and (min-width: 601px) {
	#header .header-wrap {transition: transform 0.4s;}
}

#header .header-top .inner .btn-txt[data-level="primary"]:focus-visible,
#header .header-top .inner .btn-txt[data-level="primary"]:hover {background-color:transparent; color: var(--color-main);}
#header .header-top .inner .btn-txt[data-level="primary"]:focus-visible:after,
#header .header-top .inner .btn-txt[data-level="primary"]:hover:after {background-image: url(/smst/resource/www/img/renew/common/i_blank_active.svg);}

#header .header-top .inner .quick > li .btn-quick.youtube {transition: background 0.3s;}
#header .header-top .inner .quick > li .btn-quick.youtube:focus-visible,
#header .header-top .inner .quick > li .btn-quick.youtube:hover {background-image: url(/smst/resource/www/img/renew/common/i_quick_youtube_active.svg);}

#header .header-in #utils > .list > li .btn-sitemap::after {transition: width 0.3s, background 0.3s;}
#header .header-in #utils > .list > li .btn-sitemap:focus-visible::after,
#header .header-in #utils > .list > li .btn-sitemap:hover::after {width: 2.2rem;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#header .header-in {padding: 0 var(--sp-20);}
}
@media screen and (max-width: 1024px) {
	#header .header-top {display: none;}
	#header .header-in {height: 7rem;}
	#header .header-in #logo > a {height: var(--sp-24);}
	#header .header-in #utils > .list > li .btn-sitemap.type-pc {display: none;}
	#header .header-in #utils > .list > li .btn-sitemap.type-mobile {display: block;}
}
@media screen and (max-width: 600px) {
	#header .header-top .inner {height: var(--sp-40);}
	#header .header-top .inner .quick > li .btn-quick {font-size: 1.4rem;}
	#header .header-top .inner .quick > li + li {margin-left: var(--sp-12); padding-left: var(--sp-12);}
	#header .header-in {height: var(--sp-60);}
	#header .header-in #logo > a {height: var(--sp-20);}
	#header .header-in #utils > .list > li + li {margin-left: var(--sp-08);}
	#header .header-in #utils > .list > li .btn-lang {height: var(--sp-36); padding: 0 var(--sp-08); font-size: var(--fz-label-sm);}
	#header .header-in #utils > .list > li .btn-sitemap {width: var(--sp-36); height: var(--sp-36);}
	#header .header-in #utils > .list > li .btn-sitemap::before {top: calc(50% - 0.8rem); right: 0.75rem; width: 2.2rem; height: 1.6rem;}
	#header .header-in #utils > .list > li .btn-sitemap::after {top: calc(50% - 0.1rem); right: 0.75rem; width: 2.2rem; height: 0.2rem;}
	#header .header-top .inner .quick {margin-left: 0;}
}
@media screen and (max-width: 425px) {
	#header .header-top .inner {height: var(--sp-48);}
	#header .header-top .inner .quick {flex-wrap: wrap; justify-content: flex-start;}
	#header .header-top .inner .quick > li:last-child { margin-left: 0;}
}


/*-------------------------------------------------------------------
	분류이름 : GNB
	분류그룹 : Header
-------------------------------------------------------------------*/
#header .header-in #gnb {display: block; width: 100%; padding: 0 var(--sp-32); align-items: center;}
#header .header-in #gnb .bg {position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff;}
/* depth01 */
#header .header-in #gnb .depth-01 {display: flex; justify-content: flex-end;}
#header .header-in #gnb .depth-01 > li {display: block;}
#header .header-in #gnb .depth-01 > li .menu-01 {display: block; position: relative; height: var(--sp-80); padding: 0 var(--sp-36); font-weight: 600; font-size: 2rem; color: var(--color-gray-90);}
#header .header-in #gnb .depth-01 > li .menu-01 > span {display: flex; position: relative; height: 100%; align-items: center; justify-content: center;}
#header .header-in #gnb .depth-01 > li .menu-01 > span::before {content:""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--color-main); transform: translateX(-50%);}
/* depth02 */
#header .header-in #gnb .depth-01 > li .sub {display: flex; position: absolute; top: 100%; left: 0; z-index: 99; width: 100%; height: auto; padding: 0 calc((100% - 144rem) / 2); background-color: #fff; box-shadow: 0 10px 10px 0 rgba(0,0,0,0.05);}
#header .header-in #gnb .depth-02 {display: flex; position: relative; width: 100%; padding: var(--sp-16) 0; justify-content: center;}
#header .header-in #gnb .depth-02 > li {display: block; padding: 0 var(--sp-12);}
#header .header-in #gnb .depth-02 > li .menu-02 {display: flex; position: relative; padding: var(--sp-04) var(--sp-04); background-color: #fff; font-weight: 600; font-size: 1.7rem; align-items: center; justify-content: flex-start;}
#header .header-in #gnb .depth-02 > li .menu-02 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#header .header-in #gnb .depth-02 > li .menu-02[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#header .header-in #gnb .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}

#header .header-in #gnb .depth-02 > li.child .menu-02 {padding-right: var(--sp-40);}
#header .header-in #gnb .depth-02 > li.child .menu-02::before {content: ""; position: absolute; top: 0; right: var(--sp-12); width: var(--sp-20); height: 100%; background: url(/smst/resource/www/img/renew/common/i_arr_down_gray.svg) no-repeat center / var(--sp-20);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* 1depth */
#header .header-in #gnb .depth-01 > li .menu-01 {transition: color 0.3s;}
#header .header-in #gnb .depth-01 > li .menu-01:focus-visible,
#header .header-in #gnb .depth-01 > li .menu-01:hover,
#header .header-in #gnb .depth-01 > li.active .menu-01,
#header .header-in #gnb .depth-01 > li[data-open="on"] .menu-01 {color: var(--color-main);}
#header .header-in #gnb .depth-01 > li .menu-01 > span::before {transition: width 0.3s;}
#header .header-in #gnb .depth-01 > li .menu-01:focus-visible > span::before,
#header .header-in #gnb .depth-01 > li .menu-01:hover > span::before,
#header .header-in #gnb .depth-01 > li[data-open="on"] .menu-01 > span::before,
#header .header-in #gnb .depth-01 > li.active .menu-01 > span::before {width: calc(100% + 1.6rem);}

#header .header-in #gnb .depth-01 > li .sub {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s;}
#header .header-in #gnb .depth-01 > li[data-open="on"] .sub {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.3s;}
/* 2depth */
#header .header-in #gnb .depth-02 > li .menu-02 {transition: border 0.3s, background-color 0.3s, color 0.3s}
#header .header-in #gnb .depth-02 > li:focus-within .menu-02,
#header .header-in #gnb .depth-02 > li:hover .menu-02 {color: var(--color-main);}
#header .header-in #gnb .depth-02 > li .menu-02:focus-visible,
#header .header-in #gnb .depth-02 > li .menu-02:hover {color: var(--color-main);}

#header .header-in #gnb .depth-02 > li .menu-02::before {transition: background 0.3s;}
#header .header-in #gnb .depth-02 > li:focus-within .menu-02::before,
#header .header-in #gnb .depth-02 > li:hover .menu-02::before,
#header .header-in #gnb .depth-02 > li .menu-02:focus-visible::before,
#header .header-in #gnb .depth-02 > li .menu-02:hover::before {background-image: url(/smst/resource/www/img/renew/common/i_arr_down_white.svg);}
/* 3depth */
#header .header-in #gnb .depth-03 > li .menu-03 {transition: color 0.3s}
#header .header-in #gnb .depth-03 > li .menu-03:focus-visible,
#header .header-in #gnb .depth-03 > li .menu-03:hover {color: var(--color-main);}
#header .header-in #gnb .depth-03 > li .menu-03::before {transition: color 0.3s;}
#header .header-in #gnb .depth-03 > li .menu-03:focus-visible::before,
#header .header-in #gnb .depth-03 > li .menu-03:hover::before {background-color: var(--color-main);}

/* accesibility */
#header .header-in #gnb .depth-01 > li .menu-01:focus-visible {outline: 2px dashed #000; outline-offset: -0.4rem;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#header .header-in #gnb .depth-01 > li .menu-01 {padding: 0 var(--sp-20);}
	#header .header-in #gnb .depth-01 > li .sub {padding: 0 var(--sp-20);}
	#header .header-in #gnb .depth-01 > li .sub .info {padding: var(--sp-48) var(--sp-20) var(--sp-48) 0;}
	#header .header-in #gnb .depth-01 > li .sub .info .tit {font-size: var(--fz-title-xxl);}
	/* #header .header-in #gnb .depth-02 {padding: var(--sp-48) 0 var(--sp-48) var(--sp-20); gap: var(--sp-16) 0;} */
	#header .header-in #gnb .depth-02 > li {padding: 0 var(--sp-08);}
	#header .header-in #gnb .depth-02 > li .menu-02 {padding: var(--sp-04) var(--sp-16); font-size: var(--fz-title-sm);}
}
@media screen and (max-width: 1200px) {
	#header .header-in #gnb {padding: 0 var(--sp-24);}
	#header .header-in #gnb .depth-01 > li .menu-01 {padding: 0 var(--sp-16); font-size: var(--fz-title-sm);}
	#header .header-in #gnb .depth-01 > li .sub .info {width: 20rem; padding: var(--sp-40) var(--sp-20) var(--sp-40) 0;}
	#header .header-in #gnb .depth-01 > li .sub .info .tit {font-size: var(--fz-title-xl);}
	/* #header .header-in #gnb .depth-02 {padding: var(--sp-40) 0 var(--sp-40) var(--sp-20);} */
	#header .header-in #gnb .depth-02 > li .menu-02 {min-height: var(--sp-48); padding: var(--sp-04) var(--sp-12); font-size: var(--fz-title-xsm);}
}
@media screen and (max-width: 1024px) {
	#header .header-in #gnb {display: none;}
}

/*-------------------------------------------------------------------
	분류이름 : 전체메뉴 영역
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#menuWrap {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menuWrap.active {visibility: visible; transition: visibility 0s 0s;}
#menuWrap::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menuWrap.active::before {background-color: rgba(0,0,0,0.7);}

#menuWrap .btn-menu-close {display: block; position: relative; width: 4.2rem; height: 4.2rem; border-radius: var(--sp-04); background-color: var(--color-main); cursor: pointer;}
#menuWrap .btn-menu-close::before,
#menuWrap .btn-menu-close::after {content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 2px; border-radius: 2px; background-color: #fff;}
#menuWrap .btn-menu-close::before {transform: translateY(-50%) rotate(45deg);}
#menuWrap .btn-menu-close::after {transform: translateY(-50%) rotate(-45deg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sitemap .btn-sitemap-close::before,
#sitemap .btn-sitemap-close::after {transition: transform 0.3s;}
#sitemap .btn-sitemap-close:hover::before {transform: translateY(-50%) rotate(30deg);}
#sitemap .btn-sitemap-close:hover::after {transform: translateY(-50%) rotate(-30deg);}


/*-------------------------------------------------------------------
	분류이름 : 사이트맵
	분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#sitemap {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(/smst/resource/www/img/renew/common/bg_sitemap.png) no-repeat center / cover; background-size: 100% 100%;}

#sitemap .content-wrap {display: flex; position: relative; position: relative; height: 100%; width: 100%; margin: 0 auto; flex-direction: column; align-items: center; justify-content: center;}
#sitemap .content-wrap .con-head {display: block; margin-bottom: var(--sp-32); flex-shrink: 0;}
#sitemap .content-wrap .con-head .logo {display: block; height: 5rem; }
#sitemap .content-wrap .con-head .logo > img {width:33rem;}
#sitemap .content-wrap .con-body {display: flex; overflow-x: hidden; overflow-y: auto; position: relative; width: 100%; max-width: 144rem; padding: var(--sp-24) 0; align-items: center;}

#sitemap .content-wrap .depth-01 {display: flex; align-items: baseline; width: 100%; height: 100%; min-height: 36rem;}
#sitemap .content-wrap .depth-01 > li:first-child {border-left: 1px solid var(--color-gray-30);}
#sitemap .content-wrap .depth-01 > li {display: flex; flex-direction: column; width: calc(100% / 6); height: 100%; padding: var(--sp-76) 0; border-right: 1px solid var(--color-gray-30); background: transparent; transition: background 1s;}
#sitemap .content-wrap .depth-01 > li .menu-01 {display: block; width: 100%; margin-bottom: var(--sp-28); font-weight: 700; font-size: 2.3rem; flex-shrink: 0; text-align: center;}
#sitemap .content-wrap .depth-01 > li .menu-01 > span {display: inline-block; position: relative; overflow-wrap: break-word; word-break: keep-all;}
#sitemap .content-wrap .depth-01 > li .menu-01 > span::before {content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 2px; background-color: var(--color-main); transform: translateX(-50%);}
#sitemap .content-wrap .depth-01 > li .sub {display: block; min-width: 0;}
#sitemap .content-wrap .depth-01 > li .sub .info {display: none;}
/* depth02 */
#sitemap .content-wrap .depth-02 {display: flex; flex-direction: column; gap: var(--sp-08); position: relative; text-align: center;}
#sitemap .content-wrap .depth-02 > li {display: block; width: 100%; }
#sitemap .content-wrap .depth-02 > li .menu-02 {display: block; position: relative; width: 100%;  padding: var(--sp-04) var(--sp-04); border-radius: var(--sp-04);  font-weight: 600; font-size: 1.8rem; color: var(--color-gray-70); text-align: center;}
#sitemap .content-wrap .depth-02 > li .menu-02 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* depth03 */
#sitemap .content-wrap .depth-03 {display: block; margin-top: var(--sp-08); padding-left: var(--sp-08);}
#sitemap .content-wrap .depth-03 > li {width: 100%;}
#sitemap .content-wrap .depth-03 > li .menu-03 {display: flex; position: relative; width: 100%; padding: var(--sp-04) var(--sp-08); font-weight: 500; font-size: 1.7rem; color: var(--color-gray-70); align-items: center;}
#sitemap .content-wrap .depth-03 > li .menu-03::before {content:''; position: absolute; top: calc(0.75em + 1px); left: 0; width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-gray-70);}
#sitemap .content-wrap .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: var(--sp-40); right: var(--sp-40);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* 외부링크 */
#sitemap .content-wrap .depth-01 > li .menu-01[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#sitemap .content-wrap .depth-02 > li .menu-02[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#sitemap .content-wrap .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}

#sitemap .content-wrap .depth-02 > li.child .menu-02 {padding-right: var(--sp-40);}
#sitemap .content-wrap .depth-02 > li.child .menu-02::before {content: ""; position: absolute; top: 0; right: var(--sp-12); width: var(--sp-20); height: 100%; background: url(/smst/resource/www/img/renew/common/i_arr_down_gray.svg) no-repeat center / var(--sp-20);}
#sitemap .content-wrap .depth-03 > li.child .menu-03 {padding-right: var(--sp-40);}
#sitemap .content-wrap .depth-03 > li.child .menu-03::before {content: ""; position: absolute; top: 0; right: var(--sp-12); width: var(--sp-20); height: 100%; background: url(/smst/resource/www/img/renew/common/i_arr_down_gray.svg) no-repeat center / var(--sp-20);}

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

/* 1depth */
#sitemap .content-wrap .depth-01 > li:hover {background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);}
#sitemap .content-wrap .depth-01 > li:hover .menu-01 > span {color: var(--color-main);}
#sitemap .content-wrap .depth-01 > li .menu-01 > span::before {transition: width 0.3s;}
#sitemap .content-wrap .depth-01 > li .menu-01:focus-visible > span::before,
#sitemap .content-wrap .depth-01 > li:hover .menu-01 > span::before,
#sitemap .content-wrap .depth-01 > li[data-open="on"] .menu-01 > span::before {width: 100%;}
/* 2depth */
#sitemap .content-wrap .depth-02 > li .menu-02 {transition: border 0.3s, background-color 0.3s, color 0.3s}
#sitemap .content-wrap .depth-02 > li:focus-within .menu-02,
#sitemap .content-wrap .depth-02 > li:hover .menu-02 {color:  var(--color-main);}
#sitemap .content-wrap .depth-02 > li .menu-02:focus-visible,
#sitemap .content-wrap .depth-02 > li .menu-02:hover {color: var(--color-main);}

#sitemap .content-wrap .depth-02 > li .menu-02::before {transition: background 0.3s;}
#sitemap .content-wrap .depth-02 > li:focus-within .menu-02::before,
#sitemap .content-wrap .depth-02 > li:hover .menu-02::before,
#sitemap .content-wrap .depth-02 > li .menu-02:focus-visible::before,
#sitemap .content-wrap .depth-02 > li .menu-02:hover::before {background-image: url(/smst/resource/www/img/renew/common/i_arr_down_white.svg);}
/* 3depth */
#sitemap .content-wrap .depth-03 > li .menu-03 {transition: color 0.3s}
#sitemap .content-wrap .depth-03 > li .menu-03:focus-visible,
#sitemap .content-wrap .depth-03 > li .menu-03:hover {color: var(--color-main); text-decoration: underline;}
#sitemap .content-wrap .depth-03 > li .menu-03::before {transition: color 0.3s;}
#sitemap .content-wrap .depth-03 > li .menu-03:focus-visible::before,
#sitemap .content-wrap .depth-03 > li .menu-03:hover::before {background-color: var(--color-main);}

/* accessbility */
#sitemap .content-wrap .depth-01 > li .menu-01:focus-visible {outline: 2px dashed var(--color-main); outline-offset: -2px;}
#sitemap .content-wrap .depth-02 > li .menu-02:focus-visible {outline: 2px dashed var(--color-main); outline-offset: -4px;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#sitemap .content-wrap {padding-left: var(--sp-20); padding-right: var(--sp-20);}
	#sitemap .content-wrap .depth-02 {gap: var(--sp-16) 0;}
	#sitemap .content-wrap .depth-02 > li {padding: 0 var(--sp-08);}
	#sitemap .content-wrap .depth-02 > li .menu-02 {padding: var(--sp-04) var(--sp-16); font-size: var(--fz-title-sm);}
	#sitemap .btn-menu-close {right: var(--sp-20);}
}
@media screen and (max-width: 1024px) {
	#sitemap {display: none;}
}


/*-------------------------------------------------------------------
	분류이름 : 모바일 메뉴
	분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#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; z-index: 1; background-color: #ffffff;}
#mobileMenu .con-head .head-top {display: flex; height: var(--sp-80); padding-left: var(--sp-12); padding-right: 7rem; align-items: center; justify-content: space-between; align-items: center;}
#mobileMenu .con-head .head-top .logo {display: flex; align-items: center;}
#mobileMenu .con-head .head-top .logo > img {display: block; width: 18rem;}
#mobileMenu .con-head .head-top .utils {display: flex; align-items: center;}

#mobileMenu .con-head .head-quick {display: block;}
#mobileMenu .con-head .head-quick .btn-related {display: flex; min-height: var(--sp-40); padding: 0 var(--sp-20); background-color: #e1e6ea; font-weight: 600; font-size: var(--fz-label-sm); color: #fff; align-items: center; justify-content: center;}
#mobileMenu .con-head .head-quick .btn-related > img {display: block; width: 15rem;}
#mobileMenu .con-head .head-quick .list {display: flex; background-color: var(--color-main-20);}
#mobileMenu .con-head .head-quick .list > li {display: block; position: relative; flex-grow: 1;}
#mobileMenu .con-head .head-quick .list > li + li::after {content:""; position: absolute; top: 50%; left: 0; z-index: 1; width: 0.4rem; height: 0.4rem; background-color: var(--color-gray-20); transform: translateY(-50%);}
#mobileMenu .con-head .head-quick .list > li .btn-quick {display: flex; width: 100%; height: var(--sp-40); padding: var(--sp-04); font-weight: 600; font-size: var(--fz-label-sm); color: var(--color-gray-70); word-break: keep-all; overflow-wrap: break-word; align-items: center; justify-content: center;}
#mobileMenu .con-head .head-quick .list > li .btn-quick > span {display: block; position: relative;}
#mobileMenu .con-head .head-quick .list > li .btn-quick > span::before {content:""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--color-main); transform: translateX(-50%);}
/* 닫기 */
#mobileMenu .btn-menu-close {position: absolute; top: 1.9rem; right: var(--sp-12); z-index: 10; border-radius: 0.8rem;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#mobileMenu .con-head .head-quick .list > li .btn-quick.login::before {background-image: url(/smst/resource/www/img/renew/common/i_login_gray.svg);}
#mobileMenu .con-head .head-quick .list > li .btn-quick.logout::before {background-image: url(/smst/resource/www/img/renew/common/i_logout_gray.svg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#mobileMenu {opacity: 0; transition: right 0.4s, opacity 0.4s;}
#mobileMenu.on {opacity: 1; right: 0;}

#mobileMenu .con-head .head-quick .list > li .btn-quick {transition: color 0.3s;}
#mobileMenu .con-head .head-quick .list > li .btn-quick:focus-visible,
#mobileMenu .con-head .head-quick .list > li .btn-quick:hover {color: var(--color-main);}
#mobileMenu .con-head .head-quick .list > li .btn-quick > span::before {transition: width 0.3s;}
#mobileMenu .con-head .head-quick .list > li .btn-quick:focus-visible > span::before,
#mobileMenu .con-head .head-quick .list > li .btn-quick:hover > span::before {width: 100%;}

/* accessibility */
#mobileMenu .con-head .head-quick .list > li .btn-quick:focus-visible {outline: 2px solid var(--color-main); outline-color: #fff;}
 
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    #mobileMenu {display: flex;}
}
@media screen and (max-width: 768px) {
	#mobileMenu {width: 100%;}
	#mobileMenu .con-head .head-top {height: var(--sp-60); padding-right: var(--sp-64);}
	#mobileMenu .con-head .head-top .logo {height: 2.8rem;}
	#mobileMenu .con-head .head-top .utils > li .btn-lang {height: var(--sp-36); padding: 0 var(--sp-08); font-size: var(--fz-label-sm);}
	#mobileMenu .btn-menu-close {top: var(--sp-12); width: var(--sp-36); height: var(--sp-36);}
}
@media screen and (max-width: 600px) {
	#mobileMenu .con-head .head-quick .list > li .btn-quick {font-size: 1.4rem;}
}


/*-------------------------------------------------------------------
	분류이름: 메뉴 구조
	분류그룹: 모바일 메뉴
-------------------------------------------------------------------*/
#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: 20rem; height: 100%; background-color: var(--color-gray-blue-5);}
/* 1depth */
#mobileMenu .con-body .depth-01 {display:block; position: relative; padding: var(--sp-04) 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: 100%; min-height: var(--sp-56); padding: var(--sp-08) var(--sp-36) var(--sp-08) var(--sp-16); background-color: transparent; font-weight: 600; font-size: 17px; color:var(--color-gray-90); word-break: break-all; align-items: center;}
#mobileMenu .con-body .depth-01 > li > .menu-01::after {content:''; position: absolute; top: 50%; right: 1rem; width: 2.8rem; height: 1rem; background: url(/smst/resource/www/img/renew/common/i_arr_down_gray.svg) no-repeat center / cover; transform: translateY(-50%);}
#mobileMenu .con-body .depth-01 > li > .menu-01 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* 2depth */
#mobileMenu .con-body .depth-01 > li .sub {width: 100%; background-color: var(--color-gray-blue-5);}
#mobileMenu .con-body .depth-01 > li .sub .info {display: none;}
#mobileMenu .con-body .depth-02 {display: none; height: auto; margin: 0; padding: 2rem 0; padding-left: 2rem; background-color: #f1f5f8;}
#mobileMenu .con-body .depth-02 > li {}
#mobileMenu .con-body .depth-02 > li .menu-02 {display: flex; position: relative; padding: var(--sp-04) var(--sp-08); color: var(--color-gray-70); font-weight: 500; font-size: 1.6rem; align-items: center;}
#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 {display: none; padding: var(--sp-08); border-top: 1px solid var(--color-main); background-color: #f6f6f6;}
#mobileMenu .con-body .depth-03 > li {display: block;}
#mobileMenu .con-body .depth-03 > li .menu-03 {display: flex; position:relative; padding: var(--sp-04) var(--sp-08) var(--sp-04) calc(var(--sp-04) + 0.6em); 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: "\00B7"; display: block; position: absolute; top: var(--sp-04); left: 0; min-width: 0.6em; margin-right: var(--sp-04); 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 {padding-right: var(--sp-32);}
#mobileMenu .con-body .depth-02 > li.child .menu-02::before {content:''; position: absolute; top: calc(50% - 1rem); right: var(--sp-08); width: var(--sp-20); height: var(--sp-20); background: url(/smst/resource/www/img/renew/common/i_arr_down_gray.svg) no-repeat center / cover;}
/* blank */
#mobileMenu .con-body .depth-01 > li > .menu-01[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#mobileMenu .con-body .depth-02 > li > .menu-02[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#mobileMenu .con-body .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background: url(/smst/resource/www/img/renew/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}

/*-------------------------------------------------------------------
	@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, box-shadow 0.3s;}
#mobileMenu .con-body .depth-01 > li > .menu-01::after {transition: transform 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: var(--color-main); color: #fff; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.2);}
#mobileMenu .con-body .depth-01 > li.active > .menu-01::after {background-image: url(/smst/resource/www/img/renew/common/i_arr_down_white.svg); transform: translateY(-50%) rotate(180deg);}

#mobileMenu .con-body .depth-01 > li > .menu-01[target="_blank"]:focus-visible::after,
#mobileMenu .con-body .depth-01 > li > .menu-01[target="_blank"]:hover::after,
#mobileMenu .con-body .depth-01 > li.active > .menu-01[target="_blank"]::after {background-image: url(/smst/resource/www/img/renew/common/i_blank_white.svg);}

/* 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 > li .menu-02:focus-visible,
#mobileMenu .con-body .depth-02 > li .menu-02:hover,
#mobileMenu .con-body .depth-02 > li .menu-02.active,
#mobileMenu .con-body .depth-02 > li.open .menu-02 {font-weight: 700; color: var(--color-main);}

#mobileMenu .con-body .depth-02 > li.child.open .menu-02::before {background-image: url(/smst/resource/www/img/renew/common/i_arr_down_active.svg); transform: rotate(180deg);}
/* 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-main);} */

/* accessibility */
#mobileMenu .con-body .depth-01 > li > .menu-01:focus-visible {outline: 2px dashed #fff; 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;}
 
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#mobileMenu .con-body::before {width: 18rem;}
	#mobileMenu .con-body .depth-01 > li > .menu-01 {font-size: 1.5rem;}
	#mobileMenu .con-body .depth-01 > li > .menu-01 > span {font-size: var(--fz-label-md);}
	#mobileMenu .con-body .depth-02 > li > .menu-02 {font-size: 1.6rem;}
	#mobileMenu .con-body .depth-03 > li > .menu-03 {font-size: 1.4rem;}
}
@media screen and (max-width: 425px) {
	#mobileMenu .con-body::before {width: 14rem;}
	#mobileMenu .con-body .depth-01 > li > .menu-01 {padding: var(--sp-16) var(--sp-12) var(--sp-16) var(--sp-24);}
	#mobileMenu .con-body .depth-02 {padding: var(--sp-12) var(--sp-12);}
}




/*-------------------------------------------------------------------
	분류이름: Footer
	분류그룹: 레이아웃
-------------------------------------------------------------------*/
#footer {display: block; position: relative; background-color: #13192e; color: #fff;}
#footer #btnTop {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-04); visibility: hidden; position: fixed; bottom: 4rem; right: 4rem; z-index: 10; width: var(--sp-60); height: var(--sp-60); border-radius: 50%; background-color: var(--color-main-point); opacity: 0;}
#footer #btnTop::before {content:""; display: flex; width: var(--sp-12); height: var(--sp-16); background: url(/smst/resource/www/img/renew/common/i_top.svg) no-repeat center; background-size: auto 100%;}
#footer #btnTop span {color: var(--color-white);}

#footer .footer-top {display: flex; position: relative; padding-top: var(--sp-20); padding-bottom: var(--sp-20); justify-content: space-between;}
#footer .footer-top .l-con {display: flex; align-items: center;}
#footer .footer-top .l-con .foot-logo {display: flex; width: 23rem; margin-right: 6.4rem;}
#footer .footer-top .menus {display: flex; gap: var(--sp-48); align-items: center;}
#footer .footer-top .menus > li {display: block; position: relative;}
#footer .footer-top .menus > li::before {content:''; position: absolute; top: 50%; right: calc(var(--sp-48) / -2); width: 0.3rem; height: 0.3rem; border-radius: 50%; background-color: #5a5e6d;}
#footer .footer-top .menus > li:last-child::before {display: none;}
#footer .footer-top .menus > li .btn-menu {display: block; padding: var(--sp-12) 0; line-height: 1; font-weight: 500; font-size: 1.8rem;}
#footer .footer-top .menus > li .btn-menu.primary {color: var(--color-main-point);}
#footer .footer-top .related {display: flex; margin-left: auto; align-items: center;}
#footer .footer-top .related > li {display: block;}
#footer .footer-top .related > li .logo {display: block;}
#footer .footer-top .related > li .logo > img {display: block;}
#footer .footer-content {display: block; padding-top: var(--sp-32); padding-bottom: var(--sp-72); border-top: 1px solid rgba(255,255,255,0.2);}
#footer .footer-content .txt {display: block; font-size: 1.7rem;}
#footer .footer-content .txt + .txt {display: flex; margin-top: var(--sp-04);}
#footer .footer-content .txt + .txt .info:first-child {display: flex; align-items: center;}
#footer .footer-content .txt + .txt .info:first-child::after {content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 1rem; border-radius: 50%; background-color: #5a5e6d;} 
#footer .footer-content .txt.copyright {margin-top: var(--sp-20); color: rgba(255,255,255,0.6);}

#footer .footer-top .site-box {display: block; position: relative;}
#footer .footer-top .site-box .btn-toggle {display: flex; position: relative; width: 23rem; height: var(--sp-48); padding: 0 var(--sp-40) 0 var(--sp-20); border-radius: 1.2rem; background-color: #2b3043; font-weight: 400; font-size: 1.6rem; color: #fff; align-items: center; cursor: pointer;}
#footer .footer-top .site-box .btn-toggle::before {content:""; position: absolute; top: calc(50% - 0.4rem); right: 1.6rem; width: 16px; height: 8px; background: url(/smst/resource/www/img/renew/common/i_arr_down_white.svg) no-repeat center / cover; transition: transform .3s;}
#footer .footer-top .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: #73757c; border-radius: 8px 8px 0 0; background-color: #fff;}
#footer .footer-top .site-box > .list::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
#footer .footer-top .site-box > .list::-webkit-scrollbar-thumb {border-radius: 6px; background: var(--color-main);}
#footer .footer-top .site-box > .list::-webkit-scrollbar-track {padding: 0 0.6rem; border-radius: 1rem; background: var(--color-gray-20);}
#footer .footer-top .site-box > .list li a {display: block; line-height: 1.3; font-size: 1.6rem; color: var(--color-gray-70);}
#footer .footer-top .site-box > .list > li {display: block;}
#footer .footer-top .site-box > .list > li > a {padding: var(--sp-08);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#footer #btnTop {transition: visibility 0.3s, opacity 0.3s;}
#footer #btnTop.stop {position: absolute; top: -2rem; transition: bottom 0.3s;}
#footer #btnTop.visible {visibility: visible; opacity: 1;}

#footer .footer-top .site-box .btn-toggle.active::before {transform: rotate(180deg);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#footer .footer-top .site-box > .list > li > a:hover {color: var(--color-main);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#footer .footer-top {padding-right: 1.5rem;}
}
@media screen and (max-width: 1024px) {
	#footer #btnTop {right: 1rem;}
	#footer .footer-top {padding-top: var(--sp-28); align-items: center;}
	#footer .footer-top .l-con {display: block;}
	#footer .footer-top .l-con:first-child {display: flex; flex-direction: column; align-items: flex-start; gap:var(--sp-04);}
	#footer .footer-top .l-con .foot-logo {width: 19rem;}
	#footer .footer-top .menus {gap: var(--sp-32);}
	#footer .footer-top .menus > li::before {right: calc(var(--sp-32) / -2);}
	#footer .footer-top .menus > li .btn-menu {font-size: var(--fz-label-md);}

	#footer .footer-content {padding-bottom: var(--sp-44);}
}
@media screen and (max-width: 768px) {
	#footer .footer-top .site-box {margin-top: var(--sp-20);}

	#footer #btnTop {bottom: var(--sp-20);}
	#footer .footer-content .txt {font-size: var(--fz-body-sm);}
}
@media screen and (max-width: 600px) {
	#footer #btnTop {width: 5rem; height: 5rem;}
	#footer #btnTop::before {height: var(--sp-12);}
	#footer .footer-top {display: block; padding-right: var(--sp-20);}
	#footer .footer-top .menus {gap: var(--sp-24);}
	#footer .footer-top .menus > li::before {right: calc(var(--sp-24) / -2);}
	#footer .footer-top .menus > li .btn-menu {font-size: var(--fz-label-sm);}
	#footer .footer-top .site-box .btn-toggle {width: 100%;}

	#footer .footer-content {padding-top: var(--sp-20);}
	#footer .footer-content .txt + .txt {flex-wrap: wrap;}
	#footer .footer-content .txt + .txt .info:first-child {width: 100%;}
}
@media screen and (max-width: 375px) {
	#footer .footer-top .menus {gap: var(--sp-16);}
}


/*-------------------------------------------------------------------
	분류이름 : btn-link
	분류그룹 : 버튼 > 공통
-------------------------------------------------------------------*/
.btn-link {display: inline-flex; position: relative; height: 5rem; padding: 0 var(--sp-24); padding-right: var(--sp-60); border-radius: var(--radius-24); background-color: var(--color-secondary-5); line-height: 1; font-weight: 500; font-size: var(--fz-label-md); color: var(--color-gray-90); text-align: center; cursor: pointer; align-items: center;}
.btn-link > span {color: var(--color-main);}

.btn-link::before {content:""; display: block; position: absolute; top: 50%; right: 0.8rem; width: 3rem; height: 3rem; margin-right: var(--sp-04); border-radius: 999px; background-color: var(--color-main); background-repeat: no-repeat; background-position: center; background-size: 2rem; background-image: url(/smst/resource/www/img/renew/common/i_arr_right_white.svg); transform: translateY(-50%);}

.btn-link[data-level="blue"] {background-color: var(--color-main-70);}
.btn-link[data-level="blue"] > span {color: var(--color-white);}
.btn-link[data-level="blue"]::before { background-color: var(--color-main-60);}