@charset "UTF-8";

:root {
	--color-primary: #002F7B;
	--color-primary-40: #0036A7;
	--color-secondary: #6341CF;
	--color-secondary-70: #5239a1;
	--color-sub : #1C98DA;
	--color-point : #EC6608;
}

/*-------------------------------------------------------------------
	분류그룹 : Common
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* html,body {height:100%;} */
body {height:100%;}
html.open-modal,
html.open-modal body,
html.open-sitemap,
html.open-sitemap body,
html.open-mobile,
html.open-mobile body,
html[data-prevent-scroll="on"],
html[data-prevent-scroll="on"] body {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;}


/*-------------------------------------------------------------------
	분류이름: 공용 닫기 버튼
	분류그룹: Expression > Buttons
-------------------------------------------------------------------*/
.btn-close {display:block; position: relative; width: 24px; height: 24px; font-size: 0; background-color: transparent;}
.btn-close::before,
.btn-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 70%; height: 2px; background-color: #000000;}
.btn-close::before {transform: translate(-50%, -50%) rotate(45deg); transform-origin: center;}
.btn-close::after {transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* size */
.btn-close[data-size="xs"] {width: 16px; height: 16px;}
.btn-close[data-size="sm"] {width: 20px; height: 20px;}
.btn-close[data-size="lg"] {width: 32px; height: 32px;}
.btn-close[data-size="xl"] {width: 40px; height: 40px;}

/* fill */
.btn-close[data-s*="fill"]::before,
.btn-close[data-s*="fill"]::after {width: 100%;}

/* color */
.btn-close[data-s*="white"]::before,
.btn-close[data-s*="white"]::after {background-color: #fff;}

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


/*-------------------------------------------------------------------
	분류이름 : Header
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#header {display: block;}
#header * {box-sizing: border-box;}
#header .header-wrap {display: block; position: absolute; top: 0; left: 0; z-index: 500; width: 100%; background-color: #fff; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);}
#header .header-wrap::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #D0DAE4;}

/* 헤더 영역 */
#header .header-in {display: flex; position: relative; height: 100px; 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: 50px; transform: translateY(-50%); gap: 20px; align-items: center;}
#header .header-in .logo-box #logo {display: block;}
#header .header-in .logo-box #logo > a {display: block; width: 1em; height: 0.285714em; font-size: 173.5px; background: url(../images/common/logo.svg) no-repeat top center / 1em;}

#header .header-in #utils {position: absolute; top: 50%; right: 50px; 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; animation: headerFollow 0.6s;}

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

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#header .header-in .logo-box {left: 20px;}
	#header .header-in #utils {right: 20px;}
}
@media screen and (max-width: 1024px) {
	#header .header-in {height: 80px;}
	#header .header-in .logo-box #logo > a {font-size: 140px;}
}
@media screen and (max-width: 768px) {
	#header .header-in {height: 68px;}
}

/*-------------------------------------------------------------------
	분류이름 : Utils list
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#header #utils {display: flex; gap: 30px; align-items: center;}
#header #utils .item {display: block;}
#header #utils .user-menu {display: flex; padding: 0 30px; background-color: var(--color-primary-40); border-radius: 999px; gap: 20px;}
#header #utils .user-menu .link {display: flex; height: 40px; font-weight: 700; font-size: 14px; color: #fff; align-items: center;}
#header #utils .user-menu .link::before {content: ""; display: block; width: 18px; height: 18px; margin-right: 5px; background-repeat: no-repeat; background-position: center; background-size: 18px;}

#header #utils .btn-search {display: block; position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--color-point) url(../images/common/ico_search.svg) no-repeat center / 20px;}
#header #utils .btn-sitemap {display: block; position: relative; width: 26px; height: 26px; background: transparent url(../images/common/sitemap.svg) no-repeat center;}
#header #utils .btn-sitemap::before {content:""; position: absolute; top: -40%; left: -40%; width: 180%; height: 180%; border-radius: 50%; box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, 0.1); }

#header .g-search-pannel {display: none; position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; height: auto; padding: 40px 20px; background: linear-gradient(90deg, #F1FCFD 0%, #E4E8FB 100%); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);}
#header .g-search-pannel > .inner {display: block; position: relative; z-index: 10; max-width: 900px; width: 100%; margin: 0 auto;}
#header .g-search-pannel > .inner .title {display: block; margin-bottom: 20px; font-weight: 700; font-size: 28px; line-height: 1.2; color: #000; text-align: center;}
#header .g-search-pannel > .inner .search-wrap {display: flex; gap: 12px; align-items: center;}
#header .g-search-pannel > .inner .search-bar {position: relative; height: 68px; padding: 10px 58px 10px 20px; border-radius: 999px; background: #fff; flex-grow: 1;}
#header .g-search-pannel > .inner .search-bar input[type="text"] {width: 100%; padding: 0 10px; height: 48px; border: 0; background: none; line-height: 48px; font-size: 16px; outline: 0;}
#header .g-search-pannel > .inner .search-bar input[type="text"]::placeholder {color:#858585;}
#header .g-search-pannel > .inner .search-bar .btn-submit {display: block; overflow: hidden; position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--color-primary-40) url(../images/common/ico_search.svg) no-repeat center;}
#header .g-search-pannel > .inner .btn-close {display: block; overflow: hidden; width: 48px; height: 48px;}
#header .g-search-pannel > .inner .btn-close::before,
#header .g-search-pannel > .inner .btn-close::after {background-color: #000;}

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

#header #utils .user-menu .link.login::before {background-image: url(../images/common/ico_login.svg);}
#header #utils .user-menu .link.signup::before {background-image: url(../images/common/ico_signup.svg);}
#header #utils .user-menu .link.user::before {background-image: url(../images/common/ico_signup.svg);}
#header #utils .user-menu .link.logout::before {background-image: url(../images/common/ico_logout.svg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header #utils .btn-search.active {background-image: url(../images/common/ico_close.svg);}

#header #utils .btn-sitemap::before {opacity: 0; transition: opacity 0.5s;}
#header #utils .btn-sitemap:focus-visible::before,
#header #utils .btn-sitemap:hover::before {opacity: 1;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#header #utils {gap: 20px;}
	#header #utils .user-menu {padding: 0 20px; gap: 10px;}
}
@media screen and (max-width: 1200px) {
	#header #utils .type-pc {display: none;}
	#header #utils .type-mobile {display: block;}
	#header #utils .btn-sitemap.type-pc {display: none;}
	#header #utils .btn-sitemap.type-mobile {display: block;}
}
@media screen and (max-width: 1024px) {
	#header .g-search-pannel {padding: 20px;}
	#header .g-search-pannel > .inner .title {font-size: 20px;}
}
@media screen and (max-width: 600px) {
	#header .g-search-pannel > .inner .title {margin-bottom: 15px;}
	#header .g-search-pannel > .inner .search-bar {height: 56px; padding: 8px 48px 8px 16px;}
	#header .g-search-pannel > .inner .search-bar input[type="text"] {height: 40px; line-height: 40px;}
	#header .g-search-pannel > .inner .search-bar .btn-submit {top: 8px; width: 40px; height: 40px;}
	#header .g-search-pannel > .inner .btn-close {width: 32px; height: 32px;}
}


/*-------------------------------------------------------------------
	분류이름 : 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; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);}

#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; position: relative; height: 100%;}
#gnb .depth-01 > li .menu-01 {display: flex; position: relative; height: 100%; margin: 0 40px; padding: 0 10px; font-weight: 600; font-size: 22px; color: #000; align-items: center;}
#gnb .depth-01 > li .menu-01 > span::before {content:""; display: block; width: 24px; height: 24px; margin: 0 auto 2px; background-repeat: no-repeat; background-position: center;}
#gnb .depth-01 > li .menu-01 > span::after {content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: var(--color-primary);}
/* depth02 */
#gnb .depth-01 > li .sub {display: block; position: absolute; top: 100%; left: 0; z-index: 10; width: 100%; height: auto; padding: 15px 0 30px;}

#gnb .depth-02 {display: block; position: relative;}
#gnb .depth-02 > li {display: block;}
#gnb .depth-02 > li .menu-02 {display: flex; padding: 15px; border-radius: 8px; font-weight: 600; font-size: 16px; line-height: 1.2; color: #7E8790; justify-content: center; align-items: center;}

#gnb .depth-03 {display: none;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#gnb .depth-01 > li:nth-child(1) .menu-01 > span::before {background-image: url(../images/common/gnb_ico_01.svg);}
#gnb .depth-01 > li:nth-child(2) .menu-01 > span::before {background-image: url(../images/common/gnb_ico_02.svg);}
#gnb .depth-01 > li:nth-child(3) .menu-01 > span::before {background-image: url(../images/common/gnb_ico_03.svg);}
#gnb .depth-01 > li:nth-child(4) .menu-01 > span::before {background-image: url(../images/common/gnb_ico_04.svg);}

/*-------------------------------------------------------------------
	@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 */
#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);}

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

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

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

/* 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);}
/* 2depth - normal */
#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);}

/* accesibility */
#gnb [class*="menu-"]:focus-visible {outline: 2px dashed #000; outline-offset: -4px;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#gnb .depth-01 > li .menu-01 {margin: 0 20px; font-size: 17px;}
}
@media screen and (max-width: 1200px) {
	#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.9);}

#menuWrap .btn-menu-close {display: block; position: relative; width: 32px; height: 32px; background-color: transparent; cursor: pointer;}
#menuWrap .btn-menu-close::before,
#menuWrap .btn-menu-close::after {content: ""; position: absolute; top: 50%; left: 50%; width: 70%; height: 2px; border-radius: 2px; background-color: #fff; transform-origin: center;}
#menuWrap .btn-menu-close::before {transform: translate(-50%, -50%) rotate(45deg);}
#menuWrap .btn-menu-close::after {transform: translate(-50%, -50%) rotate(-45deg);}

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


/*-------------------------------------------------------------------
	분류이름 : 사이트맵
	분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#sitemap {display: block; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%;}
#sitemap::before {content: ""; opacity: 0.1; position: absolute; bottom: 50px; right: 50px; width: 407px; height: 436px; background: url(../images/common/sitemap_bg.png) no-repeat center / contain;}
#sitemap .content-wrap {display: flex; position: relative; height: 100%; flex-direction: column;}
#sitemap .content-wrap .con-head {display: flex; position: relative; height: 100px; padding: 0 50px; align-items: center;}
#sitemap .content-wrap .con-head .logo {display: block; width: 1em; padding-top: 0.285714em; font-size: 173.5px; background: url(../images/common/logo_white.svg) no-repeat top center / 1em;}
#sitemap .content-wrap .con-body {display: flex; max-width: 1540px; width: 100%; margin: 0 auto; padding: 20px 20px 100px; flex-grow: 1; align-items: center;}

/* depth01 */
#sitemap .depth-01 {display: flex; width: 100%; justify-content: center;}
#sitemap .depth-01 > li {display: block;}
#sitemap .depth-01 > li .menu-01 {display: block; padding: 0 100px 20px; line-height: 1.4; font-weight: 700; font-size: 24px; color: #fff;}
#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; position: relative; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.2);}
#sitemap .depth-01 > li .sub::before {content: ""; position: absolute; top: -1px; left: 50%; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2);}

/* depth02 */
#sitemap .depth-02 {display: block; position: relative;}
#sitemap .depth-02 > li {display: block;}
#sitemap .depth-02 > li .menu-02 {display: flex; padding: 10px; font-weight: 600; font-size: 18px; line-height: 1.2; color: rgba(255,255,255,0.5); justify-content: center; align-items: center;}
#sitemap .depth-02 > li .menu-02 > span {display: block; overflow: hidden; position: relative; padding: 5px 0; overflow-wrap: break-word; word-break: keep-all;}
#sitemap .depth-02 > li .menu-02 > span::before {content: ""; position: absolute; bottom: 0; left: 50%; width: 100%; height: 1px; background: rgba(255,255,255,0.5);}

/* depth03 */
#sitemap .depth-03 {display: none;}
#sitemap .btn-menu-close {position: absolute; top: 25px; right: 50px; width: 50px; height: 50px;}

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

#sitemap .depth-01 [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-point);}

/* 2depth */
#sitemap .depth-01 > li .sub::before {transform: translateX(-50%) scaleX(0); transition: all 0.3s;}
#sitemap .depth-01 > li:focus-within .sub::before,
#sitemap .depth-01 > li:hover .sub::before {background-color: var(--color-point); transform: translateX(-50%) scaleX(1);}

#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 {color: #fff;}

#sitemap .depth-02 > li .menu-02 > span::before {transform: translateX(-50%) scaleX(0); transition: all 0.3s;}
#sitemap .depth-02 > li .menu-02:focus-visible > span::before,
#sitemap .depth-02 > li .menu-02:hover > span::before {transform: translateX(-50%) scaleX(1);}

/* 2depth - normal */
#sitemap .depth-02 > li .menu-02::after {transition: background 0.3s;}

/* accessbility */
#sitemap .depth-01 > li .menu-01:focus-visible {outline: 2px dashed #fff; outline-offset: -2px;}
#sitemap .depth-02 > li .menu-02:focus-visible {outline: 2px dashed #fff; outline-offset: -4px;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	#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; border-bottom: 1px solid #D0DAE4; z-index: 1; background-color: #ffffff; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);}
#mobileMenu .con-head .head-top {display: flex; position: relative; height: 80px; padding: 0 60px 0 20px; align-items: center;}
#mobileMenu .con-head .head-top .logo {display: block; width: 1em; padding-top: 0.285714em; font-size: 136.53px; background: url(../images/common/logo.svg) no-repeat top center / 1em;}
#mobileMenu .con-head .head-top .btns {display: flex; margin-left: auto; gap: 12px;}
#mobileMenu .con-head .head-top .btns .btn-user {display: block; width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-primary-40); background-repeat: no-repeat; background-position: center; background-size: 18px;}
/* 닫기 */
#mobileMenu .btn-menu-close {position: absolute; top: 24px; right: 20px; z-index: 10;}
#mobileMenu .btn-menu-close::before,
#mobileMenu .btn-menu-close::after {background-color: #000;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#mobileMenu .con-head .head-top .btns .btn-user.login {background-image: url(../images/common/ico_login.svg);}
#mobileMenu .con-head .head-top .btns .btn-user.signup {background-image: url(../images/common/ico_signup.svg);}
#mobileMenu .con-head .head-top .btns .btn-user.user {background-image: url(../images/common/ico_signup.svg);}
#mobileMenu .con-head .head-top .btns .btn-user.logout {background-image: url(../images/common/ico_logout.svg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#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);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    #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 [class*="menu-"] > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* 1depth */
#mobileMenu .con-body .depth-01 {display: block; padding: 20px;}
#mobileMenu .con-body .depth-01 > li {display: block;}
#mobileMenu .con-body .depth-01 > li + li {margin-top: 15px;}
#mobileMenu .con-body .depth-01 > li > .menu-01 {display: flex; position: relative; padding: 20px 44px 20px 20px; border: 1px solid #727272; border-radius: 10px; line-height: 1.2; font-weight: 500; font-size: 16px; color: #000; align-items: center;}
/* 2depth */
#mobileMenu .con-body .depth-01 > li .sub {display: block;}

#mobileMenu .con-body .depth-02 {display: none; padding-left: 10px;}
#mobileMenu .con-body .depth-02 > li {margin-top: 5px;}
#mobileMenu .con-body .depth-02 > li .menu-02 {display: flex; position: relative; padding: 16px 44px 16px 20px; border: 1px solid #D0DAE4; border-radius: 10px; line-height: 1.2; font-weight: 500; font-size: 16px; color: #7E8790; align-items: center;}
#mobileMenu .con-body .depth-02 > li .menu-02::before {content:""; display: block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background-color: #7E8790;}
/* 3depth */
#mobileMenu .con-body .depth-03 {display: none; padding-left: 10px;}
#mobileMenu .con-body .depth-03 > li {margin-top: 5px;}
#mobileMenu .con-body .depth-03 > li .menu-03 {display: flex; position: relative; padding: 16px 44px 16px 20px; border: 1px solid #D0DAE4; border-radius: 10px; line-height: 1.2; font-weight: 500; font-size: 16px; color: #7E8790; align-items: center;}
#mobileMenu .con-body .depth-03 > li .menu-03::before {content:""; display: block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background-color: #7E8790;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#mobileMenu .con-body .depth-01 > li.child > .menu-01::after,
#mobileMenu .con-body .depth-01 > li.child > .menu-02::after,
#mobileMenu .con-body .depth-03 > li.child > .menu-03::after {content: ""; display: block; position: absolute; top: calc(50% - 12px); right: 20px; width: 24px; height: 24px; background: url(../images/common/menu_plus.svg) no-repeat center / 24px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#mobileMenu .con-body [class*="menu-"] {transition: border 0.3s, background 0.3s, color 0.3s;}
/* 1차메뉴 */
#mobileMenu .con-body .depth-01 > li .menu-01:focus,
#mobileMenu .con-body .depth-01 > li .menu-01:hover {background-color: #F0F2F6;}
#mobileMenu .con-body .depth-01 > li.active .menu-01 {background-color: var(--color-primary-40); color: #fff;}
#mobileMenu .con-body .depth-01 > li .menu-01::after {transition: background 0.3s;}

/* 2차메뉴 */
#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 {background-color: #F0F2F6; color: var(--color-primary-40);}
#mobileMenu .con-body .depth-02 > li .menu-02::before,
#mobileMenu .con-body .depth-02 > li .menu-02::after {transition: background 0.3s;}
#mobileMenu .con-body .depth-02 > li .menu-02:focus-visible::before,
#mobileMenu .con-body .depth-02 > li .menu-02:hover::before {background-color: var(--color-primary-40);}

/* child */
#mobileMenu .con-body .depth-01 > li.child.active .menu-01::after,
#mobileMenu .con-body .depth-02 > li.child.active .menu-02::after,
#mobileMenu .con-body .depth-03 > li.child.active .menu-03::after {background-image: url(../images/common/menu_minus.svg);}

/* 3차메뉴 */
#mobileMenu .con-body .depth-03 > li .menu-03:focus,
#mobileMenu .con-body .depth-03 > li .menu-03:hover,
#mobileMenu .con-body .depth-03 > li.active .menu-03 {background-color: #F0F2F6; color: var(--color-primary-40);}
#mobileMenu .con-body .depth-03 > li .menu-03::after {transition: background 0.3s;}

/* 스크롤바 커스텀 */
@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: #8E8E8E;}
	#mobileMenu .con-body::-webkit-scrollbar-track {padding: 0 6px; border-radius: 10px; background: #E4E4E4;}
}
/* 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-primary-40); outline-offset: -2px;}
#mobileMenu .con-body .depth-03 > li > .menu-03:focus-visible {outline: 2px dashed var(--color-primary-40); outline-offset: -2px;}



/*-------------------------------------------------------------------
	분류이름: 공통
	분류그룹: footer
-------------------------------------------------------------------*/
#footer {position: relative;}
#footer * {box-sizing: border-box;}
#footer .btn-top {display: flex; position: fixed; bottom: 50px; right: 50px; z-index: 10; width: 70px; height: 70px; border-radius: 50%; background: #0E2B5E; box-shadow: 5px 10px 10px 0 rgba(0, 0, 0, 0.10); align-items: center; justify-content: center;}
#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: #0E2B5E;}
#footer .btn-top span {display: block; font-weight: 700; font-size: 14px; color: #fff; text-align: center;}
#footer .btn-top span::before {content: ""; display: block; width: 24px; height: 24px; margin: 0 auto; background: url(../images/common/btn_top.svg) no-repeat center / contain;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#footer .btn-top {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s;}
#footer .btn-top.visible {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.3s;}
#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;}

#footer .btn-top span::before {transition: all 0.3s;}
#footer .btn-top:focus-visible span::before,
#footer .btn-top:hover span::before {transform: translateY(-5px);}

@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: 1540px) {
	#footer .btn-top {right: 20px; bottom: 50px; width: 55px; height: 55px;}
	#footer .btn-top span {font-size: 14px;}
	#footer .btn-top span::before {width: 16px; height: 16px;}
}


/*-------------------------------------------------------------------
	분류이름: 배너
	분류그룹: footer
-------------------------------------------------------------------*/
.footer-content {display: block; padding: 55px 0; background: #fff;}
.footer-content .inner {display: flex; position: relative; max-width: 1540px; margin: 0 auto; padding: 0 20px; flex-wrap: wrap; justify-content: space-between;}
.footer-content .inner .lc {display: flex;}
.footer-content .inner .lc .hd {display: block; overflow: hidden; flex-shrink: 0;}
.footer-content .inner .lc .hd .logo {display: block; width: 1em; height: 0.285714em; font-size: 175px; background: url(../images/common/logo.svg) no-repeat bottom center / 1em;}
.footer-content .inner .lc .bd {display: block; padding-left: 64px;}
.footer-content .inner .lc .bd .menu {display: flex; margin-bottom: 24px; flex-wrap: wrap;}
.footer-content .inner .lc .bd .menu > li {display: block; position: relative; margin-right: 14px; padding-right: 20px;}
.footer-content .inner .lc .bd .menu > li:not(:last-child)::after {content: ""; position: absolute; top: calc(50% - 3px); right: 0; width: 6px; height: 6px; background-color: #D0DAE4; border-radius: 50%;}
.footer-content .inner .lc .bd .menu > li:last-child {margin-right: 0; padding-right: 0;}
.footer-content .inner .lc .bd .menu > li .link {display: block; line-height: 30px; font-weight: 600; font-size: 18px; color: #000000;}
.footer-content .inner .lc .bd .menu > li .link.em {color: var(--color-primary-40);}
.footer-content .inner .lc .bd .info {display: flex; gap: 5px 15px; flex-wrap: wrap;}
.footer-content .inner .lc .bd .info > li {display: flex; gap: 5px 10px; font-size: 15px; color: #7E8790;}
.footer-content .inner .lc .bd .info .dt {display: block; font-weight: 400;}
.footer-content .inner .lc .bd .info .dd {display: block; font-weight: 600;}
.footer-content .inner .lc .bd .copyright {display: block; margin-top: 16px; font-weight: 400; color: #7E8790;}

.footer-content .inner .rc {display: block; margin-left: auto;}
.footer-content .inner .rc .sns-list {display: flex; margin-bottom: 24px; gap: 5px; justify-content: flex-end;}
.footer-content .inner .rc .sns-list > li {display: block;}
.footer-content .inner .rc .sns-list > li .btn-sns {display: block; width: 30px; height: 30px; border-radius: 50%; background-repeat: no-repeat; background-position: center;}
.footer-content .inner .rc .sns-list > li .btn-sns.facebook {background-image: url(../images/main/sns_facebook.svg);}
.footer-content .inner .rc .sns-list > li .btn-sns.instagram {background-image: url(../images/main/sns_instagram.svg);}
.footer-content .inner .rc .sns-list > li .btn-sns.youtube {background-image: url(../images/main/sns_youtube.svg);}
.footer-content .inner .rc .sites {display: flex; gap: 10px; flex-direction: column; align-items: flex-end;}
.footer-content .inner .rc .sites > a {display: block;}
.footer-content .inner .rc .sites > a img {display: block;}

/*-------------------------------------------------------------------
	@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-primary-40);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	.footer-content .inner {display: block;}
	.footer-content .inner .lc {display: block;}
	.footer-content .inner .lc .hd {margin-bottom: 20px;}
	.footer-content .inner .lc .bd {padding-left: 0;}
	
	.footer-content .inner .rc .sns-list {position: absolute; top: 0; right: 20px; margin-bottom: 0; padding-top: 5px;}
	.footer-content .inner .rc .sites {flex-direction: row; justify-content: flex-end; align-items: center;}
}
@media screen and (max-width: 768px) {
	.footer-content {padding: 30px 0;}
	.footer-content .inner .lc {display: block;}
	.footer-content .inner .lc .hd .logo {font-size: 140px;}
	.footer-content .inner .lc .bd .menu {margin-bottom: 10px;}
	.footer-content .inner .lc .bd .menu > li {margin-right: 8px; padding-right: 14px;}
	.footer-content .inner .lc .bd .menu > li .link {font-size: 15px;}
	.footer-content .inner .lc .bd .info > li {font-size: 13px;}
	.footer-content .inner .lc .bd .copyright {margin-top: 10px; font-size: 13px;}

	.footer-content .inner .rc {padding-top: 20px;}
	.footer-content .inner .rc .sites {justify-content: center;}
}



/*-------------------------------------------------------------------
	분류이름 : header
	분류그룹 : 재능공모
-------------------------------------------------------------------*/
header.talent-collusion{position: static; width: 100%; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background: #fff;}
header.talent-collusion > .inner{display: flex; align-items: center; justify-content: center; height:100px; margin:0 auto;}
header.talent-collusion > .inner h1 a{display: block;}
header.talent-collusion h2{text-align: center; border-bottom:1px solid #e5e5e5; border-top: 1px solid #e5e5e5;}
header.talent-collusion h2 a{font-family: 'SCDream'; font-size:22px; font-weight: 500; padding: 35px 20px; display: block;}
header.talent-collusion .inner .btnCtg{display:none;}
header.talent-collusion .menu{background-color:#fff;}
header.talent-collusion .menu .inner{width:1100px; margin:0 auto;}


header.talent-collusion .menu .inner ul{margin-top:28px; margin-bottom: 30px; display: flex; justify-content: end;}
header.talent-collusion .menu .inner ul li{position:relative; font-size:18px;}
header.talent-collusion .menu .inner ul li:before{content:""; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:12px; background-color:#ddd;}
header.talent-collusion .menu .inner ul li:first-child:before{display:none;}
header.talent-collusion .menu .inner ul li a{padding:0 32px;}
header.talent-collusion .menu .inner ul li:last-child a{padding:0 0 0 32px;}

@media only screen and (max-width:1100px) {
	#skipNavi{display:none;}

	/* header */
	header.talent-collusion > .inner{width:auto; height: auto; padding: 10px 0;}
    header.talent-collusion h2 a {padding: 20px;}
	header.talent-collusion .menu .inner{width:auto; height:auto; padding:0; text-align:center;}
	header.talent-collusion .menu .inner ul{overflow:hidden; float:none; margin-top:0;}
	header.talent-collusion .menu .inner ul li{width:calc(100% / 4); box-sizing:border-box;}
	header.talent-collusion .menu .inner ul li a{display:block; padding:15px 0 !important;}
	header.talent-collusion .inner .btnCtg {display: block; position:absolute; top:23px; right:24px; left:inherit; width: 20px; height:16px;}
	header.talent-collusion .inner .btnCtg span { display: block; text-indent: -9999px; }
	header.talent-collusion .inner .btnCtg span:before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 11px; height: 2px; background-color: #fff;}
	header.talent-collusion .inner .btnCtg:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 2px; background-color: #fff;}
	header.talent-collusion .inner .btnCtg:after { content: ""; display: block; position: absolute; top: 7px; left: 0; width: 20px; height: 2px; background-color: #fff;}
}
@media only screen and (max-width:768px) {
	header.talent-collusion > .inner > a{right:12px;}
	header.talent-collusion h2 a{font-size:18px; line-height:1.5;}
	header.talent-collusion .menu .inner ul li{font-size:15px;}
	header.talent-collusion .inner .btnCtg{right:12px;}
}