/* include 공통 CSS */

/************************* 공통 시작*************************/
a, button, input, textarea, label, select, [role="button"], .clickable { cursor: none !important;}
html, body {scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar {display: none;}

.inner {width: 100%; margin: 0 auto; padding-right: var(--row); padding-left: var(--row);}

.sub-container {min-height: 100svh; font-size: 1vw;}
@media(max-width:1480px){
	.sub-container {font-size: 1.25vw;}	
}
@media(max-width:1024px){
	.sub-container {font-size: 1.5vw;}	
}
@media(max-width:768px){
	.sub-container {font-size: 1.75vw;}	
}
@media(max-width:600px){
	.sub-container {font-size: 2vw;}	
}
@media(max-width:500px){
	.sub-container {font-size: 16px; padding-bottom: 5em;}	
}

.sub-int {font-size: 1em;}
.sub-int__tit {font-size: 3.9584em; font-weight: 900;}
.sub-int__tit span {color: var(--main-color);}
.sub-int__ment {margin-top: 0.67em; font-size: 1.4584em; font-weight: 600;}
@media(max-width:500px){
  .sub-int__tit {font-size: 1.75em;}
  .sub-int__ment {font-size: 1em;}
}

.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: rgba(252, 94, 32, 1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
    mix-blend-mode: difference;
}

.cursor-follower {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(252, 94, 32, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}


.cursor.hover {
    width: 50px;
    height: 50px;
    background: rgba(252, 94, 32, 0.8);
    transform: translate(-50%, -50%) scale(1);
}


.cursor.click {
    width: 15px;
    height: 15px;
    background: rgba(252, 94, 32, 1);
    transform: translate(-50%, -50%) scale(1);
}


.cursor-follower.hover {
    width: 80px;
    height: 80px;
    border-color: rgba(252, 94, 32, 0.5);
    border-width: 3px;
}

@media (hover: none) and (pointer: coarse) {
  .cursor,
  .cursor-follower {display: none !important; }
}


.what-acco {border-top:1px solid #fff; padding-bottom: 9.375em;}
.what-acco__item {display: flex; justify-content: center; flex-direction:column; border-bottom:1px solid #fff; color: #fff; transition: .15s ease-in-out all;}
.what-acco__btn {width: 100%; min-height: 2.5384em; padding: 0.334em var(--row); font-size: 2.7084em; font-weight: 600; text-transform: uppercase; color:#b4b4b4; text-align:left; transition: .15s ease-in-out all;}
.what-acco__btn[aria-expanded="true"] {background-color: rgba(0,0,0,0.7); font-weight: 900; color: #fff;}
.what-acco__content {overflow: hidden; background-color: rgba(0,0,0,0.7); transition:.3s ease-in-out max-height;}
.what-acco__ment {padding-bottom:1em; font-size: 1.3542em; font-weight: 600; color: inherit; line-height: 1.3; letter-spacing: -0.032em;}
.what-acco__logo--seed {width: 4.0577em;}
.what-acco__logo--ters {width: 2.2693em;}
.what-acco__logo--tallo {width: 3.1539em;}
.what-acco__frame {margin-top: 4em; text-align: center;}
.what-acco__works {display: flex; flex-wrap:wrap; gap:0.325em; padding-bottom: 2.75em;}
.what-acco__work {padding:0.195em 0.5em;  font-size: 0.9375em; font-weight: 600; color: #fff; background-color: var(--main-color); border:1px solid #fff; border-radius:0.4445em;}

@media(hover:hover){
	.what-acco__btn:hover {background-color: rgba(0,0,0,0.7); font-weight: 900; color: #fff;}
}

@media(max-width:1024px){
	.what-info__hidden {font-size: 1.125em;}
  .what-acco__ment {font-size: 1em;}
}
@media(max-width:600px){
  .what-acco__ment {font-size: 1.0625em;}
}
@media(max-width:500px){
  .what-acco {padding-bottom: 0em}
	.what-acco__btn {font-size: 1.5em;}
  .what-acco__ment {font-size: 0.875em; line-height: 1.5;}
}


.int-sec {padding-top: 5.05em;}
.int-sec__tit {font-size: 4.5em; font-weight: 800; letter-spacing: -0.03em;}
.int-sec__desc {margin-top: 0.6em; font-size: 1.125em; font-weight: 600; letter-spacing: -0.03em}
@media(max-width:500px){
  .int-sec__tit {font-size: 2em;}
  .int-sec__desc {font-size: 1em;}
}

.life {padding: 9.5em 0 6.1459em; background-color: #000; color: #fff;}
.life__inner {padding-right: 12.5em; padding-left: 12.5em;}
.life__tit {font-size: 1.875em; font-weight: 800; letter-spacing: -0.03em;}
.life__frame {margin-top: 4.2em; display: flex; justify-content: center; align-items: center; color: #fff; position: relative; aspect-ratio:1/0.5625; background-color: #666; text-align: center;}
.life__movie {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); aspect-ratio:16/9; width: 100%;}
.life__grid {display: grid; grid-template-columns: repeat(5, 1fr); gap:1.0417em; margin-top: 2.0834em;}
.life__item {display: flex; justify-content:  space-between; align-items: center; gap:0.8em; padding:0.5em 1.65em 0.5em 1.5em; border:1px solid rgba(255,255,255,0.3); min-height: 5.2084em;}
.life__icon {width: 1.875em;}
.life__desc {font-size: 0.9375em; letter-spacing: -0.04em; text-align:right; line-height: 1.4;}

@media(max-width:1280px){
  .life__grid {grid-template-columns: repeat(4, 1fr);}
}
@media(max-width:768px){
  .life__grid {grid-template-columns: repeat(3, 1fr);}
}
@media(max-width:500px){
  .life {padding:5em 0 8em;}
  .life__frame {margin-top: 2em;}
  .life__grid {margin-top: 1.5em; gap:0.5em; grid-template-columns: repeat(2, 1fr);}
  .life__item {padding:1.25em 0.75em; display: block;}
  .life__desc {font-size: 0.875em; margin-top: 1em; text-align:left;}
}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header__fix {position: fixed; left:0; top:0; z-index: 100; width:100%; height: 5em; --menu-height : 0; transform:translateY(0); opacity: 1; visibility:visible; transition:.5s ease-in-out all;}
.header__fix:after {position: absolute; content:''; top: 100%; left: 0; z-index: -1; width: 100%; height: var(--menu-height); background-color: #fff; 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;}

.header-home {position: relative; display: flex; gap:0.8438em; align-items: center; z-index: 2000; }
.header-home__frame {position: relative;}
.header-home__logo {transition: 0.3s ease-in-out all;}
.header-home__logo--white {position: absolute; top: 0; left: 0; opacity: 0; visibility:hidden;}

.header-home__frame--udm .header-home__logo {width: 6.125em;}
.header-home__frame--hancom .header-home__logo {width: 12.375em;}

@media(max-width:500px){
  .header-home__frame--udm .header-home__logo {width: 5em;}
  .header-home__frame--hancom .header-home__logo {width: 8em;}
}

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

.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; transition: 0.15s ease-in-out all;}
.header-lang__btn,
.header-lang__btn:link,
.header-lang__btn:visited {color: #fff;}
.header-lang__navi{position:absolute; top: 100%; left: 50%; transform:translateX(-50%); min-width:100%; height: 0; overflow: hidden;}
.header-lang__list {margin: 1em; background-color: rgba(0,0,0,0.5); border-radius: 0.5em; box-shadow:var(--shadow-1); transition: .15s ease-in-out all;}
.header-lang__link{padding:0.5em 1.5em; display: block; white-space: nowrap; transition: 0.15s ease-in-out all;}
.header-lang__link,
.header-lang__link:visited,
.header-lang__link:link {color: #fff;}
.header-lang__icon {width: 1.25em; filter:brightness(0) invert(1)}
@media(hover:hover){
	.header-lang__btn:hover {color: var(--main-color);}
	.header-lang__link:hover {color: var(--main-color);}
}
@media(max-width:1024px){
	.header-lang {display: none;}	
}

.header-login {margin-left: 1.5em;}
.header-login__list {display: flex; align-items: center;}
.header-login__item {margin-right: 1em;}
.header-login__item:last-child {margin-right: 0;}
.header-login__link {display: block; transition:.15s ease-in-out all;}
.header-login__link,
.header-login__link:visited,
.header-login__link:link {color: #fff;}
@media(hover:hover){
	.header-login__link:hover {color: var(--main-color);}
}
@media(max-width:1024px){
	.header-login{display: none;}	
}

.header-drawer {display: none; position: relative; margin-left: 1.5em;}
.header-drawer__btn {position: relative; width: 20px; height: 14px; z-index: 1000; transition:.15s ease-in-out all;}
.header-drawer__line {position: absolute; left: 0; width: 100%; height: 2px; background-color: #000; transition:.15s 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;}
}
@media(max-width:1024px){	
	.header-drawer {display:block;}
}


.header__fix.enter {backdrop-filter: blur(8px);}
.header__fix.enter .header-home__logo--normal {opacity: 1; visibility:visible;}
.header__fix.enter .header-home__logo--white {opacity: 0; visibility:hidden;}
.header__fix.enter .header-navi__m-btn {color: var(--main-black);}
.header__fix.enter .header-navi__m-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__s-list {background-color: #fff;}
.header__fix.enter .header-navi__s-btn {color: var(--main-black);}
.header__fix.enter .header-navi__s-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__c-btn {color: var(--main-gray);}
.header__fix.enter .header-navi__c-btn--crt {color: var(--main-color);}
.header__fix.enter .header-lang__btn {color: var(--main-black);}
.header__fix.enter .header-lang__btn.on {color: var(--main-color);}
.header__fix.enter .header-lang__list {background-color: #fff;}
.header__fix.enter .header-lang__link {color: var(--main-black);}
.header__fix.enter .header-login__link {color: var(--main-black);}
@media(hover:hover){
	
}

/************************* 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 {position: relative;  font-size: var(--fz); background-color: #000;}
.footer__inner {position: relative; display: flex; flex-wrap:wrap; align-items: center; padding-top: 1.5em; padding-bottom: 1.477em;}
.footer__int {margin-right: 1.6em;}
.footer__home {display: inline-block; margin-bottom: 0.5em; font-weight: 500; letter-spacing: -0.03em;}
.footer__home,
.footer__home:link,
.footer__home:visited {color: #fff;}
.footer__mail {font-weight: 300; letter-spacing: -0.02em;}
.footer__mail,
.footer__mail:link,
.footer__mail:visited {color: #fff; text-decoration:underline; text-underline-offset: 0.2em;}
.footer__info {margin-right: 1.25em; align-self: center; line-height: 1.7;}
.footer__detail {display: inline; color: #c2c2c2; font-weight: 300; letter-spacing: -0.03em; line-height: 1.3;}
.footer__detail:after {content:''; width: 1px; height: 0.7em; display: inline-block; margin:0 0.45em 0 0.7em; background-color: #c2c2c2;}
.footer__detail:nth-of-type(2n):after {display: none;}
.footer__link,
.footer__link:link,
.footer__link:visited {color: inherit;}
.footer__cprt {margin-left: auto; font-size: 0.8334em; font-weight: 300; color: #C2C2C2; letter-spacing: -0.05em;}

@media(max-width:768px){
	.footer__cprt {margin-top: 1em; margin-left: 0;}
}
@media(max-width:500px){
	.footer__int {margin-right: 0; margin-bottom: 1em;}
  .footer__home {font-size: 0.875em;}
  .footer__mail {font-size: 0.875em;}
  .footer__detail {font-size: 0.875em;}
  .footer__cprt {font-size: 0.75em;}
}

.footer-lang {position: absolute; top: 0; right: 0; transform:translateY(-100%); z-index: 0;}
.footer-lang__list {position: absolute; left: 0; bottom: 0; transition: .15s ease-in-out all; z-index: -1;}
.footer-lang__btn {display: flex; align-items: center; padding:0 1.7143em; font-size: 0.875em; width: 14.2858em; height: 4.1429em; background-color: #1e1e1e; border-radius:0.5715em 0.5715em 0 0; transition: .15s ease-in-out all;}
.footer-lang__btn,
.footer-lang__btn:link,
.footer-lang__btn:visited {color: #bdbdbd;}
.footer-lang__btn img {margin-right: 0.5em; width: 1.2858em;}

.footer-lang__btn--main.on {border-radius:0; background-color: var(--main-color);}
.footer-lang__btn--main.on,
.footer-lang__btn--main.on:link,
.footer-lang__btn--main.on:visited {color: #fff;}
.footer-lang__btn--main.on + .footer-lang__list {bottom: 100%;}
@media(hover:hover){
	.footer-lang__btn:hover {background-color: var(--main-color); color: #fff;}
}
@media(max-width:1480px){
	.footer-lang {right: var(--row);}
}
@media(max-width:500px){
  .footer-lang__btn {width: 10em; height: 3em; padding-right: 1em; padding-left: 1em;}
}
/************************* footer_inc 끝 *************************/
.works {margin-top: 8.45em; padding-bottom: 6.25em; color: #fff;}
.works__tit {font-size: 3.75em; font-weight: 900; color: inherit; letter-spacing: -0.03em;}
.works__navi {margin-top: 1.75em; display: flex; flex-wrap: wrap; gap:0.75em 1em; }
.works__cate {padding:0.125em 1.1em;}
.works__btn {display: block; font-size: 1.4584em; font-weight: 300; letter-spacing: normal; letter-spacing: -0.03em;}
.works__btn,
.works__btn:link,
.works__btn:visited {color: #fff;}
.works__btn.on {font-weight: 700; text-decoration:underline; text-decoration-color: var(--main-color); text-underline-offset: 0.3em;}
@media(max-width:500px){
  .works__tit {font-size: 2em;}
  .works__navi {column-gap:1.25em;}
  .works__cate {padding-right: 0; padding-left: 0;}
  .works__btn {font-size: 1em;}
}

.works__gall {margin-top: 4.2em; text-align: center;}
.works__list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em;}
.works__link {display: block; position: relative; overflow: hidden;}
.works__item {position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease;transform: scale(1.0001); /* 미세하게 초기 스케일 설정 */
    transition: transform 0.5s ease;}
.works__item img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;transform: scale(1.0001); /* 미세하게 초기 스케일 설정 */
    }
.works__overlay {position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: black; opacity: 0; pointer-events: none; z-index: 1;transition: transform 0.5s ease;}
.works__item-info {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 0 2em; text-align: center; color: #fff; opacity: 0; transition: opacity 0.3s ease 0.1s; pointer-events: none; width: 100%;}
.works__item-title {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-height: 1.5; font-size: 1.1em; font-weight: 500;}
.works__more {margin-top: 1.25em; color: inherit;}
.works__plus {position: relative; margin-right: .5em; width: 1em; height: 1em; display: inline-block; vertical-align: -10%;}
.works__plus:before, .works__plus:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; display: block; background-color: #fff;}
.works__plus:before {width: 1px; height: 100%;}
.works__plus:after {width: 100%; height: 1px;}
.works__list:has(.works__item--empty) {display: block;}

@media(hover:hover) {
    .works__item:hover {box-shadow: 0 8px 25px rgba(0,0,0,0.15);}
    /* .works__link:hover img { transform: scale(1.1); } */
    .works__link:hover .works__overlay {opacity: 0.7;}
    .works__link:hover .works__item-info {opacity: 1;}
}
@media(max-width:1080px) {
    .works__list {grid-template-columns: repeat(2, 1fr); gap: 0.75em; row-gap: 4em;}
    .works__overlay {display: none;}
    .works__item-info {position: static; transform: none; display: block; margin-top: 1em; opacity: 1; text-align: left; padding: 0 0.5em; color: #fff;}
    .works__item-title {font-size: 1em;}
    .works__item img {transition: none;}
}
@media(max-width:640px) {
    .works__list {grid-template-columns: 1fr; gap: 2em;}
}

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