/* include 공통 CSS */

/************************* 공통 시작*************************/
.pnt {color: var(--main-color);}
.bg-pnt {background-color: var(--main-color);}

.main-tit {font-size: 2.5em; font-weight: 700; letter-spacing: -0.03em;}
.main-tit__light {font-weight: 300;}

.cate-tit {font-size: 1.4913em; font-weight: 700;}
.cate-tit__light {font-weight: 300;}

.desc-text {font-size: 1.25em; letter-spacing: -0.02em; line-height: 1.65;}
.desc-text__light {font-weight: 300;}

.inner {width: 100%; max-width:1220px; margin: 0 auto; }
.inner--fill {max-width:none; padding-right: calc((100% - 1220px) / 2); padding-left: calc((100% - 1220px) / 2);}
@media(max-width:1260px){
	.inner {padding: 0 4%;}
}

.scr-aside {position: fixed; top: 50%; left: 5.5%; transform:translateY(-50%); z-index: 10; transition:.3s ease all;}
.scr-aside--hide {opacity: 0; visibility: hidden;}
.scr-aside__list {position: relative;}
.scr-aside__list:after {position: absolute; z-index: -1; content:''; display: block; top: 50%; transform:translateY(-50%); right: 0; width: 2px; height: 90%; background-color: #fff;}
.scr-aside__item {margin-bottom: 1em; text-align:right;}
.scr-aside__item:last-child {margin-bottom: 0;}
.scr-aside__btn {position: relative; z-index: 0; display: inline-block; padding-right: 1.35em; text-align:right; color: #fff; opacity: 0.5; letter-spacing: -0.05em; transition:.3s ease all;}
.scr-aside__btn:before {content:''; position: absolute; z-index: 1; top: 50%; right: 0; transform:translate(25%, -50%); width: 5px; height: 5px; border-radius:50%; background-color: #fff;}
.scr-aside__btn:after {content:''; position: absolute; z-index: 1; top: 50%; right: 0; transform:translate(45%, -50%); width: 1.25em; height: 1.25em; border-radius:50%; background-color: #fff; opacity: 0; transition:.3s ease all;}
.scr-aside__btn[data-focus="true"] {opacity: 1; font-weight: 700;}
.scr-aside__btn[data-focus="true"]:after {opacity: 0.33;}

.scr-aside[data-reversal="true"] .scr-aside__list:after {background-color: var(--main-black); opacity: 0.75;}
.scr-aside[data-reversal="true"] .scr-aside__btn {color: var(--main-black);}
.scr-aside[data-reversal="true"] .scr-aside__btn:before {background-color: var(--main-black);}
.scr-aside[data-reversal="true"] .scr-aside__btn[data-focus="true"]:after {background-color: var(--main-black);}

@media(hover:hover){
	.scr-aside__btn:hover {color: #fff;}
}
@media(max-width:1536px){
	.scr-aside {inset: var(--hd-gap) 0 auto; transform:none; backdrop-filter: blur(3px);}
	.scr-aside__list {display: flex;}
	.scr-aside__list:after {display: none;}
	.scr-aside__item {text-align:left; flex:1; text-align: center; margin-bottom: 0;}
	.scr-aside__btn {display: flex; justify-content: center; align-items: center; padding:1em; height: 100%; text-align: center; background-color: rgba(255,255,255,.35); color: #333;}
	.scr-aside__btn:before,
	.scr-aside__btn:after {display: none;}
	.scr-aside__btn[data-focus="true"] {background-color: #fff; color: var(--dark);}
}




.float-top {position: fixed; font-size: var(--fz); bottom: 12%; right: 5.5%; z-index: 10; width: 4.875em; height: 4.875em; box-shadow:0 4px 12px rgba(0,0,0,0.15); border-radius:50%; overflow: hidden; transition: .3s ease all;}
.float-top--hide {opacity: 0; visibility: hidden;}
.float-top__btn {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; flex-direction:column; gap:0.25em; padding-bottom: 0.5em; background-color: #fff; transition: .3s}
.float-top__btn:before {display: block; content:''; width: 1.5em; height: 1.5em; background: url('./img/top_arr.png') no-repeat center / cover; transition: .3s}
@media(hover:hover){
	.float-top__btn:hover {background-color: var(--main-color); color: #fff;}
	.float-top__btn:hover:before {filter:invert(1)}
}
@media(max-width:1536px){
	.float-top {right: 4%;}
}
@media(max-width:768px){
	.float-top {width: 3.75em; height: 3.75em;}
}

.intro {position: relative;}
.intro__container {z-index: 0; min-height: 100svh; display: flex; flex-direction:column; justify-content: center; align-items: center; gap:2em; padding: 0 12%; color: #fff; text-align: center;}
.intro__container--bg {position: relative;}
.intro__container--bg:after {content:''; position: absolute; inset:0; top:auto; z-index: 1; width: 3.25em; height: 3.25em; margin: 0 auto 6em; background: url('./img/scr_icon.png') no-repeat center / cover; opacity: 0; transform:translateY(-50%); animation:scrAni 3s linear infinite}
.intro__container--img {position: absolute; z-index: -1; inset:0; background-repeat: no-repeat; background-size: cover; background-position: center;}
.intro__tit {font-size: 5em; font-weight: 700;}
.intro__desc {opacity: 0; visibility: hidden;}
.intro__exp {font-size: 3em; font-weight: 800; line-height: 1.389; opacity: 0; visibility:hidden; filter:blur(10px); transform:translateY(0.5em)}
.intro__exp span {display: block; font-size: 0.5em; font-weight: 500;}
.intro--s11 .intro__container--bg {background-color: #455132;}
.intro--s11 .intro__container--img {background-image: url('./img/s11_int.jpg');}

.intro--s21 .intro__container--bg {background-color: #1d507c}
.intro--s21 .intro__container--img {background-image: url('./img/s21_int.jpg');}

@keyframes scrAni {
	50% {opacity: 1; transform:translateY(0);}
	100% {opacity: 0; transform:translateY(50%);}
}
@media(max-width:1536px){
	.intro__container {padding: 0 8%}
	.intro__exp {font-size: 3.125vw;}
	.intro__exp br {display: none;}
	.intro__tit {font-size: 5.2084vw;}
}
@media(max-width:1080px){
	.intro__tit {font-size: 6vw;}
	.intro__exp {font-size: 4vw;}
}
@media(max-width:768px){
	.intro__exp {font-size: 5vw;}
}
@media(max-width:500px){
	.intro__container {padding: 0 4%}
	.intro__tit {font-size: 7.75vw;}
	.intro__exp {font-size: 6vw;}
}

.desolve {position: relative; background-color: #000;}
.desolve:after {position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%); content:''; display: block;}
.desolve__bg {position: relative; height: 100svh;}
.desolve__img {display: block; width: 100%; height: 100%; object-fit: cover; transition:.5s ease all;}
.desolve__img:not(:first-child) {position: absolute; top: 0; left: 0;}
.desolve__img[aria-hidden="false"] {opacity: 1;}
.desolve__img[aria-hidden="true"] {opacity: 0;}
.desolve__ctrl {position: absolute; z-index: 1; bottom: 0; right: 0; left: 0; color: #fff;}
.desolve__text {position: relative; margin-bottom: 1.85em;}
.desolve__desc {font-size: 1.5em; letter-spacing: -0.02em; line-height: 1.65; transition:.3s ease-in-out opacity;}
.desolve__desc[aria-hidden="false"] {opacity: 1; visibility: visible;}
.desolve__desc[aria-hidden="true"] {opacity: 0; visibility: hidden;}
.desolve__desc:not(:first-child) {position: absolute; inset:0; top:auto;}
.desolve__tab {display: flex; gap:1.25em;}
.desolve__btn {text-align:left; padding:0 0 3.1662em; flex:1; line-height: 1.4285; height: 100%; opacity: 0.6; transition:.3s ease-in-out opacity;}
.desolve__bar {position: relative; height: 3px; background-color: rgba(255,255,255,0.6)}
.desolve__bar div {width: var(--progress); height: 100%; background-color: #fff;}
.desolve__num {padding-top: 0.45em; display: block; font-size: 1.1669em; font-weight: 900;}
.desolve__tit {font-size: 1.1669em; font-weight: 700; color: #fff;}

.desolve__btn--active {opacity: 1;}

.defense .desolve__num {color: var(--defense);}
.public .desolve__num {color: var(--public);}


@media(hover:hover){
	.desolve__btn:hover {opacity: 1;}
}

@media(max-width:500px){
	.desolve {min-height: 100dvh;}
	.desolve__bg {height: 40dvh;}
	.desolve:after {display: none;}
	.desolve__ctrl {margin-top: 6.25em; position:static;}
	.desolve__tab {display: grid; grid-template-columns: repeat(2, 1fr);}
	.desolve__btn {padding:0.5em 0;}
}

.service {padding:10.625em 0 15.3125em; color: #fff; background-color: #010101; text-align: center;}
.service--21 {color: #1b1b1b; background-color: #f7f7f7}
.service__int {display: flex; flex-direction: column; gap:0.6em; justify-content: center; align-items: center;}
.service__field {margin-top: 3.75em;}

.diff {color: #fff; padding:13.75em 0 11.875em; background-color: #141414;}
.diff__container {display: flex; align-items: flex-start;}
.diff__pin {width: 19.0625em;}
.diff__int {display: flex; flex-direction: column; gap:.75em; padding-right: 5em;}
.diff__nav {margin-top: 2em; padding-right: 5em;}
.diff__btn {width: 100%; height: 100%; padding:0.719em 0.334em; display: flex; justify-content: space-between; align-items: center; gap:0.25em; color: #fff; border-bottom:1px solid #fff; text-align:left; opacity:0.4; transition:.3s ease opacity}
.diff__btn:after  {content:''; display: block; width: 1.5em; height: 1.5em; background: url('./img/arr_icon.png') no-repeat center / cover;}
.diff__btn span {font-size: 0.875em; letter-spacing: -0.03em;}
.diff__wrap {flex:1;}
.diff__panel {padding-top: 5.3125em;}
.diff__panel:first-child {padding-top: 0;}
.diff__content {position: relative; display: flex; align-items: flex-start; gap:5.625em; transform: translateY(5em); opacity: 0.2; transition:.5s ease all;}
.diff__frame img {width: 100%; height: 100%; object-fit: cover;}
.diff__info {flex:1; opacity: 0; visibility: hidden; transition:.5s ease all;}
/* .diff__info:after {content:''; z-index: -1; position: absolute; right: 0; bottom: 0; left: 0; display: block; height: 200%; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition:.3s} */
.diff__tit { font-size: 1.333125em; font-weight: 800; line-height: 1.3751; letter-spacing: -0.03em;}
.diff__tit span {display: block; color: var(--defense);}
.diff__text {margin-top: 1em;}
.diff__desc {display: flex; gap:0.25em; font-size: 1em; font-weight: 300; line-height: 1.6;}
.diff__desc span b {font-weight: 700;}
.diff__desc img {vertical-align: middle;}
.diff__desc:before {content:'-'}

.diff__btn--active {opacity: 1;}

.diff__panel--active .diff__content {transform:translateY(0); opacity: 1;}
.diff__panel--active .diff__info {opacity: 1; visibility: visible;}
/* .diff__panel--active .diff__info:after {opacity: 1;} */

.diff__list:last-child .diff__btn {border-bottom:none;}

@media(max-width:1536px){
	.diff__scr {top: calc((var(--hd-gap) + 6em));}
}
@media(max-width:1080px){
	.diff__int {padding-right: 2em;}
	.diff__nav {padding-right: 2em;}

	.diff__content {flex-direction:column; opacity: 1; transform:none; gap:2em; align-items: flex-start;}
	.diff__frame {width: 100%;}
}
@media(max-width:768px){
	.diff__pin {width: 100%; padding-right: 0;}	
	.diff__container {flex-direction: column;}
	.diff__scr {position: static; width: 100%; flex:none;}
	.diff__nav {position: relative; display: grid; grid-template-columns: repeat(2, 1fr); padding-right: 0; gap:0 1em; display: none;}
	.diff__wrap {width: 100%; margin-top: 3em;}
	.diff__frame {width: 100%;}
	.diff__info {opacity: 1; visibility:visible; width: 100%;}
	.diff__desc {line-height: 1.5;}
	.diff__panel {padding-top: 3em;}
}


.diff--21 {color: #1b1b1b; background-color: #fff;}
.diff--21 .diff__btn {color: #1b1b1b; border-color:#1b1b1b}
.diff--21 .diff__btn:after {background-image: url('./img/arr_icon_gray.png');}
.diff--21 .diff__desc img {filter:invert(1)}

.diff--21 .diff__tit span {color: var(--public);}

@media(max-width:768px){
	.diff__list:last-child .diff__btn {border-bottom:1px solid #fff;}
}

@media(hover:hover){
	.diff__btn:hover {opacity: 1;}
}

.field {padding: 8.75em 0 12.5em; text-align: center; color: #fff; background: url('./img/field_bg.png') no-repeat center / cover;}
.field__int {display: flex; flex-direction:column; justify-content: center; align-items: center; text-align: center; padding:0 4%; gap:.75em;}
.field__slide {position: relative; z-index: 0; overflow: hidden;}
.field__slide:before {position: absolute; z-index: 10; left: 0; content: ''; width: calc((100% - 1220px) / 2); height: 100%; display: block; filter: blur(8px); background-color: rgba(0, 0, 0, 0.35);}
.field__btn {position: absolute; content:''; z-index: 10; width: 4.375em; height: 4.375em; display: flex; justify-content: center; align-items: center; content:''; top: 50%; transform:translateY(-50%); border-radius:50%; background-repeat: no-repeat; background-size: cover; background-position: center; border:1px solid #fff; transition: .3s ease all;}
.field__btn--prev {background-image: url('./img/slide_prev.png'); left: 10%;}
.field__btn--next {background-image: url('./img/slide_next.png'); right: 10%;}
.field__tit {position: absolute; inset:0; top:auto; padding-bottom: 1em; font-size: 1.6668em; font-weight: 800; letter-spacing: -0.03em; text-align: center;}
.field .swiper-pagination {position:static; display: flex; justify-content: center; align-items: center; padding:1em 0 4.375em; gap:0.625em}
.field .swiper-pagination .swiper-pagination-bullet {background-color: transparent; border:1px solid #fff; opacity: 1; width: 0.625em; height: 0.625em; margin: 0 !important; transition: .3s ease all;}
.field .swiper-pagination .swiper-pagination-bullet-active {background-color: #fff;}

.field--public {background-image: url('./img/field_bg02.png');}

@media(hover:hover){
	.field__btn:hover {background-color: var(--main-color); border-color:var(--main-color)}
}
@media(max-width:1536px){
	.field__btn--prev {left: 4%;}
	.field__btn--next {right: 4%;}
	.field__slide:before {display: none;}
}
@media(max-width:768px){
	.field {padding: 7.5em 0;}
	.field__btn {width: 3em; height: 3em;}
}



.saas {padding: 12.5em 0 13.125em calc((100% - 1220px) / 2); background-color: #f5fbff;}
.saas__int {margin-bottom: 3.75em; }
.saas__slide {position: relative; overflow: hidden;}
.saas__tit {font-size: 1.75em; font-weight: 700; letter-spacing: -0.03em;}
.saas__desc {margin-top: 1.25em; font-weight: 300; letter-spacing: -0.03em; line-height: 1.6432;}
.saas__icon {display: block; width: 8.9375em; padding-top: 4.18em; margin: auto 0 0 auto; opacity: 0.15; filter: brightness(0.5); pointer-events: none; transition:.3s;}
.saas .swiper-slide {display: flex; flex-direction:column; background-color: #dff2fd; padding:2em 2.5em 2em 2em; border-radius:1em; height: auto; transition:.3s background-color;}
@media(max-width:1260px){
	.saas {padding-left: 4%;}
}
@media(hover:hover){
	.saas .swiper-slide:hover {background-color: var(--public); color: #fff;}
	.saas .swiper-slide:hover .saas__icon {opacity: 1; filter: brightness(1);}
}

.accordion {background-color: #1b1b1b; padding:12.5em 0 18.75em; color: #fff;}
.accordion__int {display: flex; flex-direction: column; gap:0.75em}
.accordion__list {margin-top: 3em; border-top:1px solid #fff;}
.accordion__item {border-bottom:1px solid #fff;}
.accordion__btn {width: 100%; padding: 1.375em 2em 1.375em 1em; display: flex; align-items: center; justify-content: space-between;}
.accordion__btn:after {content:''; display: block; width: 1.125em; height: 1.125em; background: url('./img/show_icon.png') no-repeat center / cover;}
.accordion__btn--active:after {height: 1px; background-color: #fff;}
.accordion__tit {font-size: 1.334em; font-weight: 800; letter-spacing: -0.03em; color: #fff;}
.accordion__container {display: none; padding: 0 1em 1.75em;}
.accordion__wrap {display: flex; justify-content: space-between; gap:2em;}
.accordion__text {line-height: 1.5; color: #707070; flex:1;}
.accordion__frame {width: 44.445%}
.accordion__hash {margin-top: 1.25em;}
.accordion__tag {display: inline-block; margin:0 0.5em 0.5em 0; font-size: 1.125em; font-weight: 700; color: #fff; padding:0.25em 1em; background-color: #02294a; border-radius:1em;}

.accordion--21 {background-color: #135690;}
.accordion--21 .accordion__text {color: #fff;}
@media(max-width:768px){
	.accordion {padding: 7.5em 0;}
	.accordion__wrap {flex-direction:column;}
	.accordion__frame {width: 100%;}
}

.example {padding:17em 0; background-color: var(--main-black); color: #fff;}
.example__int {text-align: center;}
.example__cate {font-size: 1.666875em; font-weight: 800;}
.example__icon--01 {width: 7.875em;}
.example__icon--02 {width: 4.3125em;}
.example__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap:2em 8.75em;}
.example__container {padding:0 1.5em;}
.example__wrapper {position: relative; z-index: 0; margin-top: 7.5em; padding:0 5em 8em;}
.example__wrapper:before {position: absolute; z-index: -2; top: 50%; left: 50%; transform:translate(-50%, -50%); content:''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); background: linear-gradient(90deg,rgba(0, 134, 66, 1) 0%, rgba(15, 115, 233, 1) 100%); border-radius:2em;}
.example__wrapper:after {position: absolute; z-index: 0; content:''; display: block; inset:0; background-color: #000; border-radius:2em;}
.example__content {position: relative; z-index: 1; margin-bottom: 5em;}
.example__content:first-child {transform:translateY(-50%); margin-bottom: 0;}
.example__content:last-child {margin-bottom: 0;}
.example__cell {display: flex; justify-content: space-between; align-items: center; min-height: 6em; padding:1em 2.5em; border-radius:0.5em;}
.example__cell:first-child {background-color: var(--defense);}
.example__cell:last-child {background-color: var(--public);}
.example__year {padding:0.367em; grid-column:1 / -1; text-align: center; font-size: 1.166875em; font-weight: 700; color: #fff; background-color: #1b1b1b; border:1px solid #626262; border-radius:0.5em;}
.example__list {min-width: 0;}
.example__item {display: flex; gap:0.25em; font-size: 1.325em; color: #aaa; line-height: 1.6982;}

.example__list:first-of-type .example__check {color: var(--defense);}
.example__list:last-of-type .example__check {color: var(--public);}


@media(max-width:768px){
	.example__wrapper {padding:0 2em 2em;}
	.example__grid {gap:1.5em 3em;}
}

@media(max-width:500px){
	.example__cate {font-size: 1.25em; text-align: center;}
	.example__icon {display: none;}
	.example__grid {gap:1em;}
	.example__list {grid-column: 1 / -1;}
	.example__item {font-size: 1.125em; max-width:100%;}
}

.case {padding:9.375em 0 8.375em; background-color: #f2f1f1; text-align: center;}
.case__int {display: flex; flex-direction:column; gap:0.5em;}
.case__list {margin-top: 3em; display: grid; grid-template-columns: repeat(2, 1fr); gap:1.875em; padding:0 3.438em;}
.case__item {border-radius:1em; overflow: hidden;}
.case__btn {position: relative; z-index: 0; display: block; cursor:auto;}
.case__num {position: absolute; z-index: -1; inset:0; border-radius:8px; display: flex; justify-content: center; align-items: center; background-color: #e5e5e5; font-size: 6.6668em; color: #d2d2d2;}
.case__tit {position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding:0.5em; font-size:1.25em; font-weight: 600; color: #fff; background-color: rgba(0,0,0,0.75);  transition:.15s}
.case__img {transition:.3s}

@media(hover:hover){
	.case__btn:hover .case__img {transform:scale(1.075)}
}
@media screen and (hover: none) and (pointer: coarse) {
	.case__img {opacity: 1; transition:none;}
	.case__num {display: none;}
	.case__tit {position:static; margin-bottom: 0.25em; transform:none;}
}
@media(max-width:1080px){
	.case__list {padding: 0;}
}
@media(max-width:768px){
	.case__list {gap:1.25em;}
}

.demo {position: relative; z-index: 0; text-align: center; background-color: #000;}
.demo__container {position: absolute; top: 50%; transform:translateY(-50%); width: 100%; padding:0 4%;}
.demo__tit {font-size: 4.1669em; font-weight: 700; color: #fff;}
.demo__desc {margin: 0.5em 0 3.5em; color: #fff;}
.demo__bg {width: 100%; opacity: 0.7;}
@media(max-width:768px){
	.demo__tit {font-size: 6.5vw;}
}
@media(max-width:500px){
	.demo__tit {font-size: 7vw;}
}

.more-btn {margin: 0 auto; display: flex; justify-content: center; align-items: center; gap:0.75em; width: 10em; height: 3.2858em; font-size: 0.875em; font-weight: 700; border-radius:2em; background-color: #fff; letter-spacing: -0.025em; transition: 0.3s}
.more-btn:after {content:''; display: block; width: 1em; height: 1em; background: url('./img/more_arrow.png') no-repeat center / cover; transition: 0.3s}

@media(hover:hover){
	.more-btn:hover {background-color: var(--main-color); color: #fff;}
	.more-btn:hover:after {filter:brightness(0) invert(1)}
	.defense .more-btn:hover {background-color: var(--public);}
	.public .more-btn:hover {background-color: var(--public);}
}

.cursor {position: fixed; z-index: 10; top: 0; left: 0; width: 7.5625em; height: 7.5625em; transform:translate(-50%,-50%); background: url('./img/drag_icon.png') no-repeat center / cover; opacity: 0; pointer-events:none; transition:.3s opacity}
.cursor--active {opacity: 1;}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header__fix {position: fixed; left:0; top:0; z-index: 100;width:100%;  height: var(--hd-gap); font-size: var(--fz); background-color: #000; --menu-height : 0; transition:.15s;}
.header__fix:after {position: absolute; content:''; top: 100%; left: 0; z-index: -1; width: 100%; height: var(--menu-height); background-color: rgba(0,0,0,0.8); transition: 0.15s ease-in-out all;}
.header__inner {display: flex; justify-content: space-between; align-items: center; height: inherit}
.header__ctrl {display: flex; align-items: center; height: inherit; gap:2em;}
@media(max-width:500px){
	.header__ctrl {gap:1em;}
}

.header-home {display: flex; align-items: center; gap:0.5em; color: var(--main-color);}
.header-home__logo {width: 10.4375em;}
.header-home__text {font-weight: 700;}
@media(max-width:768px){
	.header-home__logo {width: 8em;}
}

.header-navi {position: absolute; top: 0; left: 50%; transform:translateX(-50%); height: inherit;}
.header-navi__m-list {display: flex; height: inherit;}
.header-navi__m-item {height: inherit;}
.header-navi__m-item:last-child {margin-right: 0;}
.header-navi__m-btn {display: flex; align-items: center; height: inherit;}
.header-navi__m-item {position: relative;}
.header-navi__s-wrap {position: absolute; top: 100%; left: 50%; min-width: 150%; transform:translateX(-50%);}
.header-navi__s-list {transition: .15s ease-in-out all;}
.header-navi__s-btn {display: block;}
@media(max-width:1080px){
	.header-navi {display: none;}
}

.header-external {display: flex; justify-content: center; align-items: center; padding:0 1.23em; height: 1.5507em; border-radius:2em; font-size: 0.9169em; font-weight: 100; background-color: #222222; color: #fff; border:1px solid #7d7d7d; transition:.15s ease all;}
@media(hover:hover){
	.header-external:hover {background-color: var(--scd); border-color:var(--scd); color: #fff;}
}

.header-lang {position: relative; display: flex; align-items: center; text-align:center; height: inherit; transition: .15s ease-in-out all;}
.header-lang__btn{display: flex; align-items:center; gap:0.5em; transition:.3s ease all;}
.header-lang__btn,
.header-lang__btn:link,
.header-lang__btn:visited {color: #fff;}
.header-lang__navi{display: none; position:absolute; top: 100%; left: 50%; transform:translateX(-50%); min-width:100%;}
.header-lang__list {padding:0.5em 0; background-color: rgba(0,0,0,0.8); transition: .15s ease-in-out all;}
.header-lang__item {padding:0.5em 0;}
.header-lang__link{display: inline-block; white-space: nowrap; transition:.3s ease all;}
.header-lang__link,
.header-lang__link:visited,
.header-lang__link:link {color: #fff;}
.header-lang__link--active,
.header-lang__link--active:link,
.header-lang__link--active:visited {color: var(--scd); border-bottom:1px solid var(--scd)}
.header-lang__icon {width: 1.125em; filter:brightness(0) invert(1); transition:.3s ease all;}

.header-lang__btn.on {color: var(--scd);}
.header-lang__btn.on .header-lang__icon {filter:brightness(1) invert(0)}
@media(hover:hover){
	.header-lang__btn:hover {color: var(--scd);}
	.header-lang__btn:hover .header-lang__icon {filter:brightness(1) invert(0)}
	.header-lang__link:hover {color: var(--scd);}	
}

.header-drawer {position: relative;}
.header-drawer__btn {position: relative; width: 20px; height: 14px; z-index: 0; transition:.3s ease-in-out all;}
.header-drawer__line {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; transition:.3s ease-in-out all;}
.header-drawer__line--top {top: 0;}
.header-drawer__line--middle {top: 50%; transform:translateY(-50%)}
.header-drawer__line--bottom {bottom: 0;}
@media(hover:hover){
	.header-drawer__btn:hover .header-drawer__line--top{left: -0.25em;}
	.header-drawer__btn:hover .header-drawer__line--middle{left: 0.25em;}
	.header-drawer__btn:hover .header-drawer__line--bottom{left: -0.125em;}
}

body:has(.drawer.on) .header-external,
body:has(.drawer.on) .header-lang {opacity: 0; visibility: hidden;}

/************************* header_inc 끝*************************/

/************************* sub-dropdown 시작 *************************/
.drop-menu {border-bottom:1px solid var(--main-gray);}
.drop-menu__inner {display: flex; border-right:1px solid var(--main-gray); border-left:1px solid var(--main-gray);}
.drop-menu__home {display: inline-flex; min-width: 3em; min-height: 3em; height: inherit; justify-content: center; align-items: center;}
.drop-menu__icon {width: 1.75em;}
.drop-menu__wrap {position: relative; z-index: 0; border-left:1px solid var(--main-gray);}
.drop-menu__wrap:last-child {border-right:1px solid var(--main-gray); }
.drop-menu__btn {display: flex; justify-content: space-between; align-items: center; min-width:15em; height: 100%; padding:0 0.15rem; font-weight: 500; transition:.15s ease-in-out all;}
.drop-menu__tit {display: block; font-size: 1.125em;}
.drop-menu__arr {margin-left: 1.5em; width: 0.75em; transition:.15s ease-in-out all;}
.drop-menu__navi {position: absolute; top: 100%; left: -1px; z-index: 10; width:calc(100% + 2px);  height: 0; overflow: hidden;}
.drop-menu__list {background-color: #fff; border:1px solid var(--main-gray);}
.drop-menu__link {display: block; padding:0.5em 0.15rem; transition:.15s ease-in-out all;}
@media(hover:hover){
	.drop-menu__link:hover {background-color: var(--main-color); color: #fff;}
}

.drop-menu__btn.on {background-color: var(--main-color); color: #fff;}
.drop-menu__btn.on .drop-menu__arr {filter:brightness(0) invert(1); transform:rotate(180deg);}

/************************* dropdown 끝 *************************/
/************************* tabmenu 시작 *************************/
.tab-menu {border-bottom:1px solid var(--main-gray)}
.tab-menu__list {display: flex;}
.tab-menu__item {flex:1;}
.tab-menu__btn {padding:1.5em 0.75em; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; transition: .15s ease-in-out all;}
.tab-menu__btn--crt {background-color: var(--main-color);}
.tab-menu__btn--crt,
.tab-menu__btn--crt:link,
.tab-menu__btn--crt:visited {color: #fff;}
@media(hover:hover){
	.tab-menu__btn:hover {background-color: var(--main-color); color: #fff;}
}
/************************* sub-tabmenu 끝 *************************/

/************************* depth3 시작 *************************/
.depth3__list {display: flex; flex-flow: row wrap;}
.depth3__item {flex:1;}
.depth3__item:last-child {border:0;}
.depth3__btn {padding:1.5em 0.75em; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; border-bottom:2px solid var(--main-gray); transition:.15s ease all;}
.depth3__btn--crt {border-color:var(--main-color);}
@media(hover:hover){
	.depth3__btn:hover {border-color:var(--main-color);}
}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/
.footer {padding:3.9em 0 3.034em; font-size: var(--fz); background-color: #1B1B1B;}

.footer-home__link {display: block;}
.footer-home__logo {width: 10.4375em;}
@media(max-width:1080px){
	.footer-home {width: 100%; margin-bottom: 1.5em;}
}

.footer-content {display: flex; flex-wrap:wrap; align-items: center;}
@media(max-width:500px){
	.footer-content {align-items: flex-start;}
}

.footer-info {margin:0 1.4em;}
.footer-info__item {display: flex; align-items: center; flex-wrap:wrap; font-weight: 200; color: #ddd; margin-bottom: 0.4em;}
.footer-info__item:last-child {margin-bottom: 0;}
.footer-info__desc:before {content:'|'; vertical-align: middle; margin:0 0.2em 0 0.5em;}
.footer-info__desc:first-child:before {display: none;}
.footer-info__cate {font-weight: 800; color: #fff;}
@media(max-width:1080px){
	.footer-info {margin: 0; padding-right: 2em; flex:1;}
}
@media(max-width:500px){
	.footer-info__item {flex-direction: column; align-items: flex-start; margin-bottom: 0;}
	.footer-info__desc {line-height: 1.75;}
	.footer-info__desc:before {display: none;}
}

.footer-logo {margin-left: auto; width: 7.125em;}

.footer-nav {margin-top: 2.1em; padding-top: 1.6em; display: flex; justify-content: space-between; border-top:1px solid #626262;}
.footer-nav__list {display: flex; align-items: center;;}
.footer-nav__item:before {content:''; display: inline-block; width: 1px; height: 0.625em; background-color: #626262; margin:0 0.5em;}
.footer-nav__item:first-child:before {display: none;}
.footer-nav__link {font-size: 0.875em; color: #626262; letter-spacing: -0.045em;}
.footer-nav__cprt {font-size: 0.875em; color: #626262; letter-spacing: -0.045em;}
/************************* footer_inc 끝 *************************/


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}