@charset "utf-8";


/* ===================================================== */
/* 어바웃 */
.about {overflow: hidden;}
.about-sec-tit {font-size: 15rem; font-family: var(--font-montserrat); font-weight: 800; letter-spacing: 0.4em; color: var(--color-lightgray); margin-bottom: 10rem; display: grid; text-align: right; grid-template-columns: 1fr auto; gap: 0.4em;}
.about-sec-tit::before {content: ''; background-color: var(--color-lightgray); height: 6px; width: calc(100% + var(--inner-padding)); align-self: center; justify-self: end; animation: clip-right .5s ease-out both paused;}
.about-sec-tit b {margin-right: -0.4em;}
.about-sec-tit .char {animation: fade-left .55s ease-in-out calc(.3s + .06s * var(--char-index)) both paused;}
.about-sec-tit.aos-animate .char {animation-play-state: running;}
.about-sec-tit.aos-animate::before {animation-play-state: running;}
.about-sec-tit.left { grid-auto-flow: column; grid-template-columns: auto 1fr;}
.about-sec-tit.left::before { grid-column: 2 / 3; justify-self: start; animation-name: clip-left;}
.about-sec-tit.left .char {animation-name: fade-right; animation-delay: calc(.3s + (var(--char-total) * .06s) - (var(--char-index) * .06s));}

.about .swiper-nav {display: flex; font-size: 10px; column-gap: 2em;}
.about .swiper-arrow {cursor: pointer;}
.about .swiper-arrow-prev {scale: -1 1;}
.about .swiper-arrow::before {content: ''; background: url(../images/sub/about_swiper_arrow.svg) no-repeat center/contain; width: 5.4em; height: 2.8em; display: block; transition: .3s;}

/* ----- 소개 ----- */
.about-core {background: url(../images/sub/about_core_bg.jpg) no-repeat center/cover; padding-bottom: calc(12svh + 12rem);}
.about-core-intro {color: #222; padding-top: calc(6svh + 6rem); text-align: center; height: 100svh; place-content: center; justify-items: center; display: grid;}
.about-core-intro h3 {font-size: 80px; font-weight: 800; margin-bottom: 0.7em; letter-spacing: -0.025em; line-height: 1.15;}
.about-core-intro h3 em {display: block; color: var(--color-lightblue);}
.about-core-intro h3 .word {animation: fade-up calc(1.1s - var(--line-index) * .15s) ease-in-out calc(0.15s * var(--line-index)) both;}
.about-core-intro p {font-family: var(--font-montserrat); font-size: 18px; font-weight: 700; border: solid var(--color-black-a2); border-width: 1px 0; padding: 0.65em 0 0.55em; text-transform: uppercase; letter-spacing: 0.3em; animation: clip-center .8s ease-out .9s both;}

.about-core-desc {position: relative;}
.about-core-desc .circle {position: absolute; height: 100%; top: 0; right: 93.5%; aspect-ratio: 1 / 1; animation: fade-left .8s both paused;}
.about-core-desc .circle.aos-animate {animation-play-state: running;}
.about-core-desc .circle span {position: absolute; inset: 15%; background: url(../images/sub/about_core_txt.svg) no-repeat center/contain; z-index: 10; animation: spin 12s linear infinite;}
.about-core-desc .circle span::before {content: ''; inset: 19%; border: 1px solid var(--color-white-a4); position: absolute; border-radius: 50%;}
.about-core-desc .circle::before {padding-top: 100%; content: ''; display: block; border-radius: 50%; background-color: var(--color-lightblue); opacity: 0.2; mix-blend-mode: multiply;}
.about-core-desc .circle::after {content: ''; inset: 38%; border-radius: 50%; position: absolute; background: url(../images/sub/about_core_dot.png) no-repeat center/150%; rotate: 45deg; opacity: 0.4;}

.about-core-desc .list {display: flex; padding: 6.5%; position: relative;}
.about-core-desc .list::before {border-radius: 600px 0 0 600px; position: absolute; inset: 0; content: ''; background-image: linear-gradient(90deg, rgba(0, 143, 210, 0.5) 0%, rgba(0, 143, 210, 0) 55%); opacity: 0.9;}
.about-core-desc .item {color: #fff; position: relative; width: 360px; border-radius: 50%; overflow: hidden; background-color: #fff; font-size: 10px; letter-spacing: -0.02em; animation: fade-right .8s calc(.4s + .2s * var(--item-index)) both paused;}
.about-core-desc .item.aos-animate {animation-play-state: running;}
.about-core-desc .item::before {content: ''; display: block; padding-top: 100%;}
.about-core-desc .item dl { height: 100%; top: 0; position: absolute; display: grid; grid-template-rows: 1fr 1fr; }
.about-core-desc .item dt {font-family: var(--font-montserrat); font-weight: 700; align-self: end; line-height: 1;}
.about-core-desc .item dd {font-size: 18px; font-weight: 700; line-height: 1.5;}
.about-core-desc .item:where(:nth-child(1)) {color: var(--color-lightblue); text-align: right;}
.about-core-desc .item:where(:nth-child(2)) {background-color: rgba(0, 143, 210, 0.5); text-align: center; margin: 0 -2%; z-index: 5;}
.about-core-desc .item:where(:nth-child(3)) {background-color: var(--color-main); }
.about-core-desc .item:where(:nth-child(1)) dl {padding-right: 15%; right: 0;}
.about-core-desc .item:where(:nth-child(2)) dl {width: 100%;}
.about-core-desc .item:where(:nth-child(3)) dl {padding-left: 23%;}
.about-core-desc .item:where(:nth-child(1)) dt {font-size: 12em; translate: 0.07em 0;}
.about-core-desc .item:where(:nth-child(2)) dt {font-size: 3.5em; margin-bottom: 0.8em;}
.about-core-desc .item:where(:nth-child(3)) dt {font-size: 7em; margin-bottom: 0.25em; translate: -0.07em 0;}

/* ----- 연혁 ----- */
.about-history {padding: 20rem 0 10rem; position: relative;}
.about-history::before {content: ''; position: absolute; bottom: 0; right: calc(-1 * var(--inner-padding)); width: 70%; aspect-ratio: 1.4 / 1; background: radial-gradient(ellipse farthest-side at center center, var(--color-white-a4), #fff),repeating-radial-gradient(ellipse farthest-side at center center, var(--color-lightgray) 0% 2%, transparent 2% 4%, var(--color-lightgray) 4%); border-radius: 50%; transform: translateY(50%); opacity: 0.5;}
.about-history .swiper-nav {padding-bottom: 8em; position: relative;}
.about-history .swiper-nav::before {width: var(--inner-width); content: ''; height: 1px; background-color: var(--color-lightgray); position: absolute; left: calc(-1 * var(--inner-padding)); bottom: 0;}
.about-history .swiper-slide { padding-top: 7rem; padding-right: 2em; font-size: 2rem; opacity: 0.5; transition: opacity .4s;}
.about-history .swiper-slide-active,
.about-history .swiper-slide-next {opacity: 1;}
.about-history .swiper-slide::before {content: ''; width: 13px; aspect-ratio: 1 / 1; outline: 13px solid rgba(0, 143, 210, 0.3);  position: absolute; left: 0; top: 0; background-color: var(--color-main); border-radius: 50%; translate: 0 -50%;}
.about-history .swiper-slide .year {color: var(--color-main); font-family: var(--font-montserrat); font-weight: 700; margin-bottom: 1em; font-size: 3.6rem;}
.about-history .swiper-slide .list {line-height: 1.4; font-weight: 500; letter-spacing: -0.01em;}
.about-history .swiper-slide .item {padding-left: 0.8em; text-indent: -0.8em; margin-top: 1em;}
.about-history .swiper-slide .item::before {content: ''; width: 4px; aspect-ratio: 1 / 1; display: inline-block; vertical-align: middle; background-color: #ddd; margin-right: calc(0.8em - 4px); transform: translateY(-30%);}

/* ----- 팀 ----- */
.about-team {background: linear-gradient(to bottom, #f9f9ff, #f9f9ff00 ); position: relative;  padding: 20rem var(--inner-padding);}
.about-team .diagram { position: relative; display: flex;}
.about-team .diagram .list { max-width: 1024px; margin: auto; width: 100%; position: relative; grid-template-rows: auto 1fr auto; grid-template-columns: auto 1fr auto; container-type: inline-size; aspect-ratio: 1.2 / 1; display: grid; grid-template-areas: 
  "desc1 .... desc2"
  "..... term ....."
  "desc3 .... desc4";}
.about-team .diagram .list::before {position: absolute; grid-area: term; aspect-ratio: 1 / 1; width: 89cqw; background-image: radial-gradient(circle farthest-side at center center, rgba(0, 143, 210, 0.2) 50% 60%, rgba(0, 143, 210, 0.1) calc(60% + 1px) 80%, rgba(0, 143, 210, 0.05) calc(80% + 1px) 100%); content: ''; border-radius: 50%; place-self: center; animation: fade-zoom-out 1s both paused;}
.about-team .diagram.aos-animate .list::before {animation-play-state: running;}
.about-team .diagram .term {grid-area: term; aspect-ratio: 1 / 1; background: url(../images/common/symbol.svg) no-repeat 103% 65%/53%, linear-gradient(315deg, var(--color-lightblue), var(--color-ice)); border-radius: 50%; width: 35cqw; position: absolute; place-self: center; display: flex; box-shadow: 0 0 2cqw var(--color-black-a1);}
.about-team .diagram .term img {width: 60%; margin: auto;}
.about-team .diagram .desc {width: 35cqw; position: relative; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--color-lightblue); background-color: #fff; text-align: center; display: grid; justify-items: center; align-content: center; row-gap: 2.5em; font-size: 10px; animation: .8s calc(.2s + .1s * var(--item-index)) both paused;}
.about-team .diagram.aos-animate .desc {animation-play-state: running;}
.about-team .diagram .desc::after {content: ''; width: 8em; aspect-ratio: 1 / 1; background: var(--ico, url(../images/sub/about_team_ico01.svg)) no-repeat center/contain;}
.about-team .diagram .desc-tit { border-bottom: 1px solid var(--color-lightgray); display: grid;}
.about-team .diagram .desc-tit b {color: var(--color-lightblue); font-family: var(--font-montserrat); font-size: 1.8em; font-weight: 500; white-space: nowrap; }
.about-team .diagram .desc-tit span {color: #222; font-weight: 700; font-size: 2.8em; padding: 0.4em 0 2.5cqw; line-height: 1;}
.about-team .diagram .desc:where(:nth-of-type(1)) {grid-area: desc1; --ico: url(../images/sub/about_team_ico01.svg); animation-name: fade-up-right;}
.about-team .diagram .desc:where(:nth-of-type(2)) {grid-area: desc2; --ico: url(../images/sub/about_team_ico02.svg); animation-name: fade-up-left;}
.about-team .diagram .desc:where(:nth-of-type(3)) {grid-area: desc3; --ico: url(../images/sub/about_team_ico03.svg); animation-name: fade-down-right;}
.about-team .diagram .desc:where(:nth-of-type(4)) {grid-area: desc4; --ico: url(../images/sub/about_team_ico04.svg); animation-name: fade-down-left;}

/* ----- 사업분야 ----- */
.about-work {background-image: linear-gradient(to top, #bfd0f5, #bfd0f500 calc(100% - 40rem)); padding: 10rem 0 25rem; position: relative; font-size: 1rem;}
.about-work::before {content: ''; width: 30%; aspect-ratio: 7 / 9; mask: url(../images/common/symbol.svg) no-repeat center/contain; -webkit-mask: url(../images/common/symbol.svg) no-repeat center/contain; background-color: #e8f7ff; position: absolute; left: 0; bottom: 0; translate: -10% 15%; rotate: 180deg;}
.about-work .desc {letter-spacing: -0.02em; font-size: 2.8em; color: #222; font-weight: 600; margin-bottom: calc(3em + 8rem);}
.about-work .desc em {display: block; font-size: 3.2em; color: var(--color-main); font-weight: 700; margin-bottom: 0.2em; padding-left: 0.5em; background: url(../images/common/symbol_twin.svg) no-repeat left center;}
.about-work .desc mark {padding: 0.1em; background: linear-gradient(var(--color-ice), var(--color-ice)) no-repeat left bottom/0 50%; transition: background-size .8s ease-in .6s;}
.about-work .desc.aos-animate mark {background-size: 100% 50%;}
.about-work .desc.aos-animate mark:nth-of-type(2) {transition-delay: 1.2s; transition-timing-function: ease-out;}

.about-work .swiper-frame {height: 36em; position: relative; font-size: 1rem;}
.about-work .swiper-nav {position: absolute; bottom: 0; z-index: 5; width: 100%; justify-content: center;}
.about-work .swiper-slide .item-wrap {position: relative; transition: .5s; height: 100%; translate: 0 -8em;}
.about-work .swiper-slide:is(.swiper-slide-prev, .swiper-slide-next) .item-wrap {translate: 0 0;}
.about-work .swiper-slide .item-wrap::before {content: ''; position: absolute; inset: 0; border-radius: 2rem; background-image: linear-gradient(to bottom, var(--color-black-a6), var(--color-black-a2)); z-index: 5;}
.about-work .swiper-slide .item-tit {color: #fff; left: 50%; translate: -50% -50%; position: absolute; z-index: 10; top: 50%; transition: opacity .5s; opacity: 0.6;}
.about-work .swiper-slide .item-tit span { font-size: 3em; font-weight: 700; letter-spacing: 0.02em; transition: font-size .5s; white-space: nowrap;}
.about-work .swiper-slide:where([class*="swiper-slide-"]) .item-tit { opacity: 1;}
.about-work .swiper-slide:where([class*="swiper-slide-"]) .item-tit span {font-size: 4.5em;}
.about-work .swiper-slide .item-wrap img {border-radius: 2rem; box-shadow: 0 0 3em var(--color-black-a2); width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
  .about .swiper-arrow:hover::before {transform: translateX(0.5em);}
}
@media (max-width: 1536px) {
  .about-sec-tit {font-size: calc(8.5vw + 5px);}
}
@media (max-width: 1280px) {
  /* ----- 소개 ----- */
  .about-core-intro h3 {font-size: 70px;}
  .about-core-intro p {font-size: 17px; letter-spacing: 0.23em;}
  .about-core-desc .item {font-size: 0.785vw;}
  .about-core-desc .item dd {font-size: calc(0.9em + 9px);}
  /* ----- 사업분야 ----- */
  .about-work .desc em {background-size: auto 60%;}
  .about-work .swiper-frame {font-size: 0.7vw;}
}
@media (max-width: 1024px) {
  .about .swiper-nav {font-size: 9px;}
  /* ----- 소개 ----- */
  .about-core-intro h3 {font-size: calc(5.5vw + 12px); line-height: 1.25; margin-bottom: calc(0.5em + 15px);}
  .about-core-intro p {font-size: calc(1.6vw + 3.2px); letter-spacing: 0.1em;}
  /* ----- 연혁 ----- */
  .about-history .swiper-slide { font-size: 17px; }
  .about-history .swiper-slide::before { width: 11px; outline-width: 11px;}
  .about-history .swiper-slide .item::before {width: 3px; margin-right: calc(0.8em - 3px); }
  /* ----- 팀 ----- */
  .about-team .diagram .desc {font-size: 1.05cqw;}
  .about-team .diagram .desc-tit b {font-size: calc(9px + 0.9em);}
  .about-team .diagram .desc-tit span {font-size: calc(10px + 1.8em);}
  /* ----- 사업분야 ----- */
  .about-work {font-size: 0.85vw;}
  .about-work .swiper-frame {font-size: inherit;}
  .about-work .swiper-slide .item-tit span {font-size: 3.5em;}
}
@media (max-width: 768px) {
  /* ----- 소개 ----- */
  .about-core-intro {padding-top: 5rem;}
  .about-core-desc .circle {height: 90%; right: auto; left: 0; top: 48%; translate: -50% -50%;   }
  .about-core-desc .circle::before {opacity: 0.1;}
  .about-core-desc .list {flex-direction: column; padding: 7% 0;}
  .about-core-desc .list::before { inset: 0 16% auto; aspect-ratio: 1 / 1; background-image: linear-gradient(to bottom, rgba(0, 143, 210, 0.5) 0%, rgba(0, 143, 210, 0) 55%); border-radius: 500px;}
  .about-core-desc .item:not(:first-child) {margin-top: -10%;}
  .about-core-desc .item {margin: auto; animation-delay: 0s;}
  .about-core-desc .item:where(:nth-child(2)) { margin-left: auto; margin-right: 0;}
  .about-core-desc .item {font-size: 1.1vw; width: 55%;}
  .about-core-desc .item dl {padding: 0; width: 100%; text-align: center;}
  .about-core-desc .item dt {translate: 0;}
  .about-core-desc .item:where(:nth-child(2)) dt {font-size: 4.2em;}
  .about-core-desc .item dd {font-size: calc(1.2em + 9px);}
  /* ----- 연혁 ----- */
  .about-history .swiper-slide { font-size: 16px; }
  /* ----- 사업분야 ----- */
  .about-work .desc {font-size: 17px;}
  .about-work .desc br {display: none;}
  .about-work::before {width: 40%; opacity: 0.6;}
  .about-work .swiper-slide .item-wrap {translate: 0 -9em;}
}
@media (max-width: 640px) {
  /* ----- 연혁 ----- */
  .about-history .swiper-slide .year {font-size: calc(20px + 2vw);}
  .about-history .swiper-slide { font-size: calc(1.2vw + 11px); }
  .about-history .swiper-slide-next {opacity: 0.5;}
  /* ----- 팀 ----- */
  .about-team .diagram .list {aspect-ratio: 1 / 1;}
  .about-team .diagram .list::before {width: 93cqw; background-image: radial-gradient(circle farthest-side at center center, rgba(0, 143, 210, 0.2) 50% 56%, rgba(0, 143, 210, 0.1) calc(56% + 1px) 78%, rgba(0, 143, 210, 0.05) calc(78% + 1px) 100%);}
  .about-team .diagram .term { width: 33cqw;}
  .about-team .diagram .term img {width: 70%;}
  .about-team .diagram .desc {width: 39cqw; row-gap: 2em; font-size: 1.2cqw;}
  .about-team .diagram .desc-tit span {padding-bottom: 2cqw;}
}
@media (max-width: 576px) {
  .about .swiper-nav {font-size: 8px;}
  /* ----- 소개 ----- */
  .about-core-intro p {font-size: calc(2.7vw + 5px); letter-spacing: 0.49em; white-space: nowrap; line-height: 1.3; padding: 0.75em 0 0.65em;}
  .about-core-intro p::first-line {letter-spacing: 0.15em; }
  /* ----- 사업분야 ----- */
  .about-work {font-size: 1vw;}
  .about-work .desc em {font-size: calc(1.8em + 3.6vw);}
  .about-work .desc {font-size: 16px;}
  .about-work .swiper-frame {height: 42em;}
  .about-work .swiper-slide {width: 50em;}
  .about-work .swiper-slide .item-wrap {translate: 0 -10em;}
  .about-work .swiper-slide .item-tit span { font-size: 5.2em; }
}
@media (max-width: 480px) {
  /* ----- 소개 ----- */
  .about-core-desc .circle {height: 75%; left: 50%; top: 50%; animation-name: fade-in; }
  .about-core-desc .circle span {inset: 22%;}
  .about-core-desc .circle span::before {inset: -17%; border-color: var(--color-white-a8);}
  .about-core-desc .circle::after {display: none;}
  .about-core-desc .list {padding: 10%;}
  .about-core-desc .list::before {inset: 0; aspect-ratio: 2 / 3; opacity: 0.3;}
  .about-core-desc .item {width: 100%; margin: auto; font-size: 1.4vw; animation-name: fade-up;}
  .about-core-desc .item:not(:first-child) {margin-top: -8%;}
  /* ----- 팀 ----- */
  .about-team .diagram .list {aspect-ratio: auto; grid-template-areas: none; grid-template-columns: auto; row-gap: 10cqw; justify-items: center;}
  .about-team .diagram .list::before {width: 100cqw; background-image: radial-gradient(circle farthest-side at center center, rgba(0, 143, 210, 0.1) 50% 82%, rgba(0, 143, 210, 0.05) calc(82% + 1px) 100%); grid-area: auto; grid-row: 1 / 2; opacity: 0.8;}
  .about-team .diagram .list::after {inset: 15cqw calc(50% - 4px); background-color: var(--color-lightgray); content: ''; position: absolute; z-index: -1; border-radius: 480px;}
  .about-team .diagram .term { width: 65cqw; grid-area: auto; position: relative; margin: 10%;}
  .about-team .diagram .desc { width: 60cqw; grid-area: auto; row-gap: 2.5em; font-size: 1.45cqw; animation-name: fade-up;}
  .about-team .diagram.aos-animate .desc {animation-play-state: paused;}
  .about-team .diagram .desc.aos-animate {animation-play-state: running;}
  .about-team .diagram .desc-tit b {font-size: calc(6px + 1.8em);}
  .about-team .diagram .desc-tit span {font-size: calc(11px + 2.2em); padding-bottom: 2.5cqw;}
  .about-team .diagram .desc::after {width: 10em;}
  /* ----- 사업분야 ----- */
  .about-work .desc {font-size: 15px;}
  .about-work .swiper-slide .item-wrap {translate: 0 -11em;}
}
/* 어바웃 */
/* ===================================================== */


/* ===================================================== */
/* 포트폴리오 */
.portfolio {color: #fff; padding: 0 var(--outer-padding); position: relative; padding-bottom: calc(10rem + 10svh);}
.portfolio-wrap {display: flex; position: relative; z-index: 5;}
.portfolio::before {height: 110lvh; width: 100%; position: fixed; left: 0; top: 0; content: '';background: var(--color-black-a6) url(../images/sub/portfolio_bg.jpg) no-repeat bottom/cover; background-blend-mode: overlay;  pointer-events: none;}
.is-open .portfolio::before {width: calc(100% - var(--scroll-width));}
.portfolio::after {content: ''; inset: 0 var(--outer-padding); background: repeating-linear-gradient(to right, #364055b3 0% 1px, transparent 1px 25%) no-repeat right/50%, linear-gradient(#364055b3, #364055b3) no-repeat right/1px 100%; position: absolute; pointer-events: none;}

/* 소개 */
.portfolio-intro { font-weight: 700; position: sticky; top: 0; align-self: start; height: 100svh; display: grid; align-content: center; width: 50%; margin-top: 5svh; font-size: 10px; z-index: 10;}
.portfolio-desc { margin-bottom: 7em;}
.portfolio-desc h3 {font-weight: 600; margin-bottom: 5em;} 
.portfolio-desc h3 b {display: flex; column-gap: 0.4em; font-size: 4em; overflow: hidden;} 
.portfolio-desc h3 b::before {content: ''; height: 1.125em; aspect-ratio: 7 / 9; mask: url(../images/common/symbol.svg) no-repeat center/contain; -webkit-mask: url(../images/common/symbol.svg) no-repeat center/contain; background-color: var(--color-sub); animation: fade-down .4s .9s both;}
.portfolio-desc h3 b:nth-child(1)::before {rotate: 180deg;}
.portfolio-desc h3 b:nth-child(2)::before {background-color: var(--color-main); align-self: end;}
.portfolio-desc h3 .char {animation: fade-in .5s ease-in-out calc(var(--char-index) * 0.04s + 1.3s) both;}
.portfolio-desc h3 b:nth-child(2) .char {animation-delay: calc(var(--char-index) * 0.05s + 1.7s);  }
.portfolio-desc p {font-family: var(--font-montserrat); font-size: 7.2em; letter-spacing: -0.02em; line-height: 1.2;}
.portfolio-desc p span {overflow: hidden; display: block;}
.portfolio-desc p b {animation: text-up .8s ease-in-out .3s both; display: inline-block;}
.portfolio-desc p span:last-child b {animation-delay: .6s; animation-duration: 0.6s;}

/* 소개 - 카테고리 탭 */
.portfolio-nav {font-weight: 600; font-size: 2.2em;}
.portfolio-nav ul {display: flex; border: solid var(--color-white-a4); border-width: 1px 0; width: fit-content; padding: 0.5em 0; flex-wrap: wrap; column-gap: 1.8em; justify-content: center; }
.portfolio-nav li a {width: max-content; padding: 0.5em 0; overflow: hidden;}
.portfolio-nav li a span {text-shadow: 0 1.7em #fff; transition: transform .3s;}
.portfolio-nav li a span::before {content: '#';}

/* 포트폴리오 리스트 */
.portfolio-cont {width: 50%; container-type: inline-size; position: relative; z-index: 5; }
.portfolio-cont .list {padding: 25svh 0 calc(5rem + 5svh);}
.portfolio-cont .item {width: 50%; position: relative; letter-spacing: -0.02em; margin-top: 5%;}
.portfolio-cont .item:nth-child(even) {margin-left: auto;}
.portfolio-cont .item::before {content: ''; padding-top: 100%; display: block;}
.portfolio-cont .item > a { position: absolute; inset: 0 0;}
.portfolio-cont .item > a::before {content: ''; background-color: #000; inset: 0; position: absolute; transition: .3s; opacity: 0; border-radius: 50%; z-index: 10;}
.portfolio-cont .item > a::after {content: ''; background: url(../images/sub/portfolio_arrow.svg) no-repeat center; inset: 0; z-index: 14; position: absolute; pointer-events: none; translate: -5% 5%; opacity: 0; transition: .3s .1s; top: 40%;}
.portfolio-cont .item-admin {position: absolute; left: 0; top: 0;z-index: 1000;}
.portfolio-cont .item-admin {display: flex; align-items: center; column-gap: 4px;}
.portfolio-cont .item-admin .admin-check {position: relative; }

/* 포트폴리오 리스트 - 텍스트 */
.portfolio-cont .item-txt {position: absolute; top: 80%; font-size: calc(1.5cqw + 8px); z-index: 15;}
.portfolio-cont .item-date { line-height: 1; opacity: 0.7; font-size: 1.2em; font-weight: 600; font-family: var(--font-montserrat);}
.portfolio-cont .item-tit {font-size: 5cqw; line-height: 1.1; padding: calc(0.15em + 5px) 0; font-weight: 700;}
.portfolio-cont .item-cate { font-weight: 700; }
.portfolio-cont .item-cate::before {content: ''; width: 4px; height: 0.9em; background-color: #fff; display: inline-block; vertical-align: middle; margin-right: 0.6em;}
.portfolio-cont .item-cate::after,
.portfolio-cont .item-desc::after {content: ' ·'; font-weight: 400;}
.portfolio-cont .item-type {font-family: var(--font-montserrat); font-weight: 500;}

/* 포트폴리오 리스트 - 로고, 썸네일 */
.portfolio-cont .item-logo {position: absolute; inset: 10%; z-index: 11; opacity: 0; transition: .3s; display: grid; place-content: center;}
.portfolio-cont .item-thumb { inset: 0; position: absolute; overflow: hidden; border-radius: 50%;}
.portfolio-cont .item-thumb::before {content: ''; inset: 0; position: absolute; background-image: linear-gradient(to top, #222, transparent 20%); opacity: 0.6; transition: opacity .3s;}
.portfolio-cont .item-thumb img { height: 100%; width: 100%; object-fit: cover;  }

/* 버튼 */
.portfolio .btn:where(.type1) {background-color: var(--color-sub);}

@media (hover: hover) and (pointer: fine) {
  .portfolio-nav li a:hover span {transform: translateY(-1.7em); display: inline-block;}
  .portfolio-cont .item > a:hover .item-logo { opacity: 1;}
  .portfolio-cont .item > a:hover::before {opacity: 0.25;}
  .portfolio-cont .item > a:hover::after {opacity: 1; translate: 0;}
  .portfolio-cont .item > a:hover .item-thumb::before {opacity: 0;}
}
@media (max-width: 1536px) {
  .portfolio-intro {font-size: 0.65vw;}
}
@media (max-width: 1280px) and (min-width: 1025px) {
  .portfolio-desc { margin-bottom: 5.5em;}
  .portfolio-desc h3 {margin-bottom: 4em;}
}
@media (max-width: 1024px){
  .portfolio-wrap {flex-direction: column;}
  .portfolio::after {opacity: 0.5; background-size: 100% 100%, 1px 100%;}
  .portfolio-intro { width: 100%; justify-items: center; text-align: center; position: relative; font-size: calc(4px + 0.4vw);}
  .portfolio-desc h3 {width: fit-content; margin-left: auto; margin-right: auto; } 
  .portfolio-desc h3 b {font-size: 5em;}
  .portfolio-nav {width: 100%; transition: .3s, inset 0s; display: flex; justify-content: center; font-size: 2.6em;}
  .portfolio-nav.on {position: fixed; inset: 0 var(--inner-padding) auto; width: auto; z-index: 100; backdrop-filter: blur(1rem); background-color: var(--color-black-a1);}
  .is-open .portfolio-nav.on {inset: 0 calc(var(--inner-padding) + var(--scroll-width)) auto var(--inner-padding);}
  .portfolio-nav ul {width: 100%;}

  .portfolio-cont {width: 100%; background: none; }
  .portfolio-cont .list {padding-top: 0;}
  .portfolio-cont .item-tit {font-size: calc(2cqw + 15px);}
}
@media (max-width: 576px){
  .portfolio-intro {height: 95svh; font-size: 1.2vw;}
  .portfolio::after {background: repeating-linear-gradient(to right, #364055b3 0% 1px, transparent 1px calc(100% / 3)) no-repeat center/100% 100%, linear-gradient(#364055b3, #364055b3) no-repeat right/1px 100%;}
  .portfolio-nav {font-size: calc(1.1em + 9px);}
  .portfolio-nav ul { column-gap: 0; padding: 0.7em 0;}
  .portfolio-nav li {width: 30%; flex-grow: 1;}
  .portfolio-nav li a {width: 100%; text-align: center; margin: 0.2em 0;}
  .portfolio-cont .item {width: calc(100% * (2 / 3)); margin-top: 15svh;}
  .portfolio-cont .item-txt {font-size: calc(1.8cqw + 9px);}
  .portfolio-cont .item:nth-child(odd) .item-txt {width: 100cqw;}
}
@media (max-width: 360px){
  .portfolio::after {background: repeating-linear-gradient(to right, #364055b3 0% 1px, transparent 1px 50%), linear-gradient(#364055b3, #364055b3) no-repeat right/1px 100%;}
  .portfolio-cont .item {width: 100%;}
  .portfolio-cont .item-txt {font-size: calc(2cqw + 10px);}
  .portfolio-cont .item-tit {font-size: calc(2.2cqw + 18px);}
}
/* 포트폴리오 */
/* ===================================================== */



/* ======================= Contact : S ============================== */
.contact { display: flex; flex-direction: column; color:#221e1f; font-size:1em; line-height: 1.2;}
.contact * {line-height:inherit; font:inherit;}

@media (max-width: 1280px) {
	.contact {font-size:0.875em;}
}
@media (max-width: 768px) {
	.contact {font-size:0.75em;}
}

@media (max-width: 480px) {
	.contact {font-size:0.70em;}
}

.contact__intro {display: flex; align-items: flex-start; width:100%; height:100%; position: relative; padding: 0 var(--outer-padding) 80px;}

.contact__desc {width:40%; position: sticky; top:0%; left:0; height:100%; padding-top:22rem;}

.contact__desc h3 em {font-size: 4.5em; display: block; font-weight: 700; }
.contact__desc h3 i {color:var(--color-main);}
.contact__desc h3 .char {animation: fade-in .5s ease-in-out calc(var(--char-index) * 0.1s) both;}
.contact__desc h3 em:nth-child(2) .char {animation-delay: calc(var(--char-index) * 0.1s + 0.5s);}
.contact__desc h3 em:nth-child(3) .char {animation-delay: calc(var(--char-index) * 0.1s + 1s);}

.contact__desc .text {font-size:1.5em; font-weight:600; color:var(--color-black-a6); margin-top:40px;}
.contact__desc .text span {animation: text-up .5s ease-in-out 1.5s both; display: inline-block;} 
.contact__desc .text span:last-child {animation-delay: 2s;}



@media (max-width: 1024px) {
	.contact__intro { padding: 0 var(--outer-padding) 80px; flex-wrap:wrap; justify-content: center;}
	.contact__desc {width:100%; text-align: center; position: static; padding-top:22rem; }
}

@media (max-width: 768px) {
	.contact__desc h3 em {font-size: 4em;}
	.contact__desc .text {margin-top:30px;}
}

@media (max-width: 480px) {
	.contact__desc h3 em {letter-spacing: -0.025em;}
	.contact__desc .text {margin-top:30px;}
}


/***** contact_Form *****/
.contact__form {width:60%; min-height:1000px; padding:22rem 0 0 0;}

@media (max-width: 1024px) {
	.contact__form {width:100%; padding:10rem 0 0 0;}
}
/* placeholder */
input::placeholder,
textarea::placeholder {font-size:1em; font-weight: 400;}

.contact__form input::-moz-placeholder,
.contact__form textarea::-moz-placeholder {color: #a7a7a7; transition: all 0.3s ease-in-out; }
.contact__form input:-ms-input-placeholder,
.contact__form textarea:-ms-input-placeholder {color:  #a7a7a7; transition: all 0.3s ease-in-out;}
.contact__form input::-webkit-input-placeholder,
.contact__form textarea::-webkit-input-placeholder {color:  #a7a7a7;  transition: all 0.3s ease-in-out;}

.contact__form  input:focus::-webkit-input-placeholder,
.contact__form  textarea:focus::-webkit-input-placeholder { color:transparent;}

.contact__form  input:focus:-moz-placeholder,
.contact__form  textarea:focus:-moz-placeholder { color:transparent;}

.contact__form  input:focus:-ms-input-placeholder,
.contact__form  textarea:focus:-ms-input-placeholder {color:transparent;}

.contact__form input{-webkit-appearance:none;-moz-appearance:none;appearance:none; outline:none;}

.contact__form .form_box {display: flex;}
.contact__form .form_item {display: inline-block; width:100%; border-bottom:1px solid #ccc; position:relative; overflow: hidden;}
.contact__form .form_item.is-over {border-color:#000;}

.contact__form .form_box.select .form_item{border:0;}
.contact__form .form_box.textarea .form_item{ border:1px solid #ccc; border-radius: 5px; padding:20px;}
.contact__form .form_box.textarea textarea {height:150px; width:100%; }


.contact__form .js-label {display:none;}
.contact__form .form_input { transition: all 0.3s ease-in-out; width: 100%; height: 50px; line-height:50px; font-weight:500; background-color:transparent; padding:0 10px; font-size:1.25em;}



/*radio*/
.form_radio {display: flex; gap:40px; row-gap:10px; align-items: center; flex-wrap: wrap;}
.form_radio .form_radio_item {flex:0 1 calc(33% - 30px); display: flex; gap:10px;}
.form_radio .form_radio_item:last-child{flex-basis:65%;}

.radio-label {position:relative; display:block; cursor:pointer;}
.radio-obj {position:absolute; top:0; left:0;opacity: 0; filter: alpha(opacity=0);}


.form_radio .radio-label {padding:0 0 0 0px; display: flex; align-items: center; gap:5px;}
.form_radio .radio-label::before {content:''; display:inline-block; width:20px; height:20px; background-color:#fff; transition:all 0.3s ease-in-out; border-radius: 20px; border:1px solid #ccc; background-repeat: no-repeat; background-position: 40% 50%; background-size:12px auto; flex-shrink: 0;}
.form_radio .radio-label.radio-on::before {background-color:var(--color-main); background-image:url(../images/sub/ico_check.svg); border-color:var(--color-main);}

.form_radio .radio-label .text {font-size:1.125em; color:#666; font-weight: 600; white-space: nowrap;}
.form_radio .radio-label.radio-on .text {color:#000}



/*checkbox*/
.contact__form .form_check_item {display: flex; gap:50px; row-gap:10px; align-items: center;}
.contact__form .checkbox-obj {position:absolute; top:0; left:0;opacity: 0; filter: alpha(opacity=0);}

.contact__form .checkbox-label {padding:0 0 0 0px; display: flex; align-items: center; gap:5px;  cursor:pointer;position:relative;}

.contact__form .checkbox-label:before {content:''; display:inline-block; width:20px; height:20px; background-color:#fff; transition:all 0.3s ease-in-out; border-radius: 20px; border:1px solid #ccc; background-repeat: no-repeat; background-position: 40% 50%; background-size:12px auto; flex-shrink: 0;}
.contact__form .checkbox-label.checkbox-on:before {background-color:var(--color-main); background-image:url(../images/sub/ico_check.svg); border-color:var(--color-main);}
.contact__form .checkbox-text {font-size:1.125em; color:#666; font-weight: 600;}




.contact__form .select-label{display: block; overflow: hidden; position: relative; z-index: 1; width: 100%; padding: 0 50px 0 20px; border: 0px solid #e3e3e3; border-radius: 5px; background: #f3f7fa; font-size: 0.875em; line-height: 48px; text-align: left; color: #221e1f; white-space: nowrap; text-overflow: ellipsis; transition: all 0.3s ease-in-out;}



.contact__form .select-label.is-selected{font-size:1.25em;}





@media all and (max-width:1280px){
	.contact__form .form_input { height: 40px; line-height:40px;}
}

@media all and (max-width:1180px){
	.form_radio {row-gap: 5px;}
	.form_radio .form_radio_item {flex:0 1 calc(50% - 20px); height:35px; }
	.form_radio .form_radio_item .form_input { height: 35px; line-height:35px;}
	.form_radio .form_radio_item:last-child{flex-basis:100%;}
}
@media all and (max-width:1024px){
	.contact__form .select-label{font-size: 1em; line-height: 40px;}
}

@media all and (max-width:768px){
	.contact__form .form_box.textarea textarea {height:120px;font-size:1.25em; }
}

@media all and (max-width:480px){
	.form_radio .form_radio_item {flex:0 1 100% }
}



.contact__form-wrap + .contact__form-wrap {margin-top:6.25%;}
.contact__form-wrap .title {border-bottom:2px solid #221e1f; padding-bottom:30px;}
.contact__form-wrap .title h4 {font-size:2.25em; font-weight: 700;}
.contact__form-wrap .title h4 span {color:var(--color-main);}

.cell_row {display: flex; padding:20px 0; align-items: center;}
.cell_th {width:120px; flex-shrink: 0; font-size:1.25em; font-weight: 600;}
.cell_th .req::after {content:'*'; color:var(--color-main);}
.cell_cols {flex-grow: 1; width: 100%;}
.cell_cols + .cell_th {margin-left:50px;}

.cell_row.agree .form_box {align-items: center; gap:20px;}


@media all and (max-width:1024px){
	.contact__form-wrap .title {padding-bottom:15px;}
}

@media all and (max-width:768px){
	.contact__form-wrap + .contact__form-wrap {margin-top:10%;}
	.contact__form-wrap .title h4{font-size:2em}

	.cell_row {display: flex; padding:0 10px; flex-direction: column; align-items:flex-start;}
	.cell_row.agree {margin: 20px 0;}
	.cell_th {width:auto; margin-bottom:10px; margin-top:30px;}
	.cell_cols + .cell_th {margin-left:0px;}
}

@media all and (max-width:480px){
	.contact__form-wrap + .contact__form-wrap {margin-top:50px;}
	.contact__form-wrap .title h4{font-size:1.8em}
	.cell_row {padding:0px;}

	.cell_row.agree .form_box { gap:10px;}
}


.contact__form .priv-view {display: inline-block; position: relative; padding:3px 0; font-size: 1.125em; color:var(--color-black-a6); transition:all 0.3s ease-in-out;}
.contact__form .priv-view::before,
.contact__form .priv-view::after {content:''; height:1px; display: block; position: absolute; bottom:0; background-color:#000; transition:all 0.3s ease-in;}
.contact__form .priv-view::before {width: 100%; background-color:#ccc; right:0;}
.contact__form .priv-view::after {width:0%; left:0;}

.contact__form .priv-view:hover {color:#000;}
.contact__form .priv-view:hover::before {width:0;}
.contact__form .priv-view:hover::after {width:100%;}

.contact__form .btn-area {display: flex; justify-content: center; margin-top:5%;}
.contact__btn {display: flex; height:50px; align-items: center; justify-content: center; background-color: var(--color-main); transition:all 0.3s ease-in-out; border-radius: 5px; padding:0 30px; color:#fff; font-size:1.125em; font-weight: 700;}
.contact__btn span { display: flex; align-items: center; gap:10px}
.contact__btn span::after {content:''; display: block; background-color: transparent; background-image:url('../images/sub/ico_link.svg'); background-repeat: no-repeat; background-position: 50% 50%; border-radius: 50%; width:20px; height:20px;}

.contact__btn:hover {background-color:#000;}



@media all and (max-width:768px){
	.contact__form .btn-area {margin-top:12%;}
	.contact__btn {font-size:1.4em;}
}

@media all and (max-width:480px){
	.contact__btn {width:100%;}
}






/*contact_FAQ*/
.contact__faq {padding:6.7% 0; background-color: #f7f8fc; }
.contact__faq .title { text-align:center;}
.contact__faq .title h3 {font-size:2.5em; font-weight:600;}
.contact__faq .title span {font-size:1.6em; font-weight:700; color:var(--color-main);}

@media all and (max-width:768px){
	.contact__faq {padding:12% 0;}
	.contact__faq .title h3 {font-size:2em;}
}

@media all and (max-width:480px){
	.contact__faq {padding:20% 0;}
	.contact__faq .title h3 {font-size:2em;}
}


.contact__faq .list {margin-top:60px;font-size:1.5em; border-top:1px solid var(--color-lightblue);}

.contact__faq .item {border-bottom:1px solid #e1e1e1;}
.contact__faq .item .faq-Q{ display: flex; font-weight: 500; align-items: center; background-color:transparent; height:90px; position: relative; cursor: pointer;  transition:all 0.3s ease-in-out; padding-right:100px; gap:50px; }
.contact__faq .item .faq-Q::before {content:'Q'; display: block; font-weight: 700; width:100px; text-align: center; border-right:1px solid #e1e1e1; line-height:30px; transition:all 0.3s ease-in-out;}

.contact__faq .item .faq-Q .tit::before,
.contact__faq .item .faq-Q .tit::after {content:''; display: block; width:20px; height:2px; background-color:#000; position: absolute; right:50px; top:50%; transform:translate(0, -50%); transition:all 0.3s ease-in-out;}
.contact__faq .item .faq-Q .tit::before {transform:translate(0, -50%) rotate(90deg);}

.contact__faq .item.is-active .faq-Q {background-color: var(--color-lightblue); color:#fff; font-weight: 600;}
.contact__faq .item.is-active .faq-Q::before {border-color:#fff;}
.contact__faq .item.is-active .faq-Q .tit::before,
.contact__faq .item.is-active .faq-Q .tit::after {transform:translate(0, -50%) rotate(180deg);background-color: #fff;}


.contact__faq .item .faq-A {padding:50px 50px 50px 150px; display: none; background-color: #fff; line-height: 1.3;}
.contact__faq .item .faq-A p {margin-top:5px;}


@media all and (max-width:1280px){
	.contact__faq .list {margin-top:50px;}
	.contact__faq .item .faq-Q{ height:80px;}
	.contact__faq .item .faq-A {padding:40px 40px 40px 150px;}
}


@media all and (max-width:1024px){
	.contact__faq .list {margin-top:50px;}
	.contact__faq .item .faq-Q{ height:60px; padding-right:60px; gap:30px; }
	.contact__faq .item .faq-Q::before {width:70px; line-height:20px;}

	.contact__faq .item .faq-Q .tit::before,
	.contact__faq .item .faq-Q .tit::after {width:18px; height:2px; right:20px;}

	.contact__faq .item .faq-A {padding:30px 30px 30px 100px;}

}

@media all and (max-width:768px){
	.contact__faq .list {margin-top:40px; font-size:1.25em;}
	.contact__faq .item .faq-Q{height:50px; padding-right:50px; gap:20px; }
	.contact__faq .item .faq-Q::before {width:50px; line-height:16px;}

	.contact__faq .item .faq-Q .tit::before,
	.contact__faq .item .faq-Q .tit::after {width:16px; height:2px; right:20px;}

	.contact__faq .item .faq-A {padding:20px 30px;}

}

@media all and (max-width:480px){
	.contact__faq .item .faq-Q{height:50px; padding-right:40px; gap:15px; }
	.contact__faq .item .faq-Q::before {width:40px; line-height:14px;}

	.contact__faq .item .faq-Q .tit::before,
	.contact__faq .item .faq-Q .tit::after {width:10px; height:2px; right:15px;}

	.contact__faq .item .faq-A {padding:15px 20px;}
	

}



/*contact_지도*/
.contact__map {height:550px;}
@media all and (max-width:768px){
	.contact__map {height:400px;}
}

/* ======================= Contact : E ============================== */