@charset "utf-8";

/* Info
 ========================================================================== */
/**
 * 1. Writer: Hyerin Lim, Sunhyeong Kim (Weaverloft Corp.)
 * 2. Production Date: 2026-02-03
 * 3. Client: 위버로프트
 * 4. Homepage : https://weaverloft.com/
 */

/*========== Common ==========*/
.main-page .container{ background-color: var(--balck-bg-color); overflow: hidden;}
.main-sec{background-color: #f8f8f8; --inline-padding: clamp(20px, calc(20px + (100 - 20) * ((100vw - 375px) / (1920 - 375))), 100px); --custom-timing: cubic-bezier(0.625, 0.05, 0, 1);}
.main-sec:not(.full) .inner{width: 100%; max-width: calc(1800px + calc(var(--inline-padding) * 2)); margin: 0 auto; padding: 0 var(--inline-padding);}
.main-sec .title-wrap{display: flex; flex-flow: column wrap; align-items: center; justify-content: center; gap: 22px; text-align: center;}
.main-sec.full .title-wrap{padding: 0 var(--inline-padding);;}
.main-sec .title-wrap.left{align-items: flex-start; text-align: left;}
.main-sec .sec-badge {display: flex; align-items: center; gap: 8px; font-family: 'Google Sans Flex', 'SUIT', sans-serif; font-size: 18px; font-weight: 500; color: var(--point-color); line-height: 1;}
.main-sec .sec-badge .dot{display: inline-block; width: 8px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--point-color); vertical-align: middle; }
.main-sec .sec-title { font-family: 'Google Sans Flex', 'SUIT', sans-serif; font-size: 54px; font-weight: 500; line-height: 1.26; letter-spacing: -0.032em; word-break: keep-all}
.main-sec .sec-desc {margin-top: 18px; font-size: 20px; word-break: keep-all;}
@media screen and (max-width: 1680px) {
    .main-sec .sec-title { font-size: clamp(38px, calc(54 / 1680 * 100vw), 54px);}
    .main-sec .sec-desc {margin-top: 0.9em; font-size: clamp(18px, calc(20 / 1680 * 100vw), 20px);}
}
@media screen and (max-width: 1024px) {
    .main-sec .title-wrap{gap: clamp(12px, calc(22 / 1024 * 100vw), 22px);}
    .main-sec .sec-badge {gap: clamp(4px, calc(8 / 1024 * 100vw), 8px);font-size: clamp(14px, calc(18 / 1024 * 100vw), 18px);}
    .main-sec .sec-badge .dot{ width: clamp(4px, calc(8 / 1024 * 100vw), 8px);}
}
@media screen and (max-width: 767px) {
    .main-sec .sec-title {font-size: clamp(24px, calc(38 / 767 * 100vw), 38px);}
    .main-sec .sec-desc {margin-top: clamp(2px, calc(16 / 767 * 100vw), 16px); font-size: clamp(14px, calc(18 / 767 * 100vw), 18px);}
}

/*========== Intro ==========*/
.main-sec.intro { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 5; opacity: 1; transition: opacity 2s 1s var(--custom-timing);}
.main-sec.intro .intro-bg { position: relative; width: 100%; height: 100%; background-color: #000; pointer-events: none;}
.main-sec.intro .intro-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2;}
.main-sec.intro .intro-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center;}
/* 2.convert */
.main-sec.intro.convert { opacity: 0;}
.main-sec.intro .scroll-ico { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%,-50%); }

/*========== Hero ==========*/
/* intro-txt */
.main-sec.hero .intro-txt { position: fixed; top: 40vh; left: calc(50vw - (9.3555em / 2)); color: #fff; z-index: 5; font-size: 90px; transition: top 1s ease, left 1s ease, font-size 1s ease, color 2s 1s var(--custom-timing); }
.main-sec.hero .intro-txt h2 { font-size: inherit; line-height: 1.166667; text-align: left;}
.main-sec.hero .intro-txt h2 .txt-wrap {display: block; overflow: hidden;}
.main-sec.hero .intro-txt h2 .txt-wrap:nth-child(2) { position: relative; padding-left: 2.6667em;}
.main-sec.hero .intro-txt h2 .txt-wrap:nth-child(2)::before { content:''; position: absolute; top: 50%; left: 0; transform: translate(0,-50%) scaleX(0); transform-origin: left center; width: 2.444em; height: auto; aspect-ratio: 220 / 8; background-color: #fff; transition: background 2s 1s var(--custom-timing); mix-blend-mode: exclusion; }
.main-sec.hero .intro-txt h2 .txt-wrap .txt { display: inline-block; transform: translateY(100%);}
.main-sec.hero .intro-txt h3 { width: 100%; font-size: 27px; text-align: right; line-height: 1.4; font-weight: 400; overflow: hidden; margin-top: 25px; transform: translateX(5%); transition: transform 1s ease, font-size 1s ease;}
.main-sec.hero .intro-txt h3 span { display: inline-block; transform: translateY(100%);}
.main-sec.hero .intro-txt h3 span br { display: none;}
@media screen and (max-width: 1440px) {
    .main-sec.hero .intro-txt { font-size: clamp(68px,6.25vw,90px);}
    .main-sec.hero .intro-txt h3 { font-size: clamp(21px,1.8750vw,27px); margin-top: clamp(10px,1.7361vw,25px);}
}
@media screen and (max-width: 767px) {
    .main-sec.hero .intro-txt { top: 38vh; left: calc(50vw - (8.7647em / 2)); font-size: clamp(34px,8.8657vw,68px);}
    .main-sec.hero .intro-txt h2 { line-height: 1.411;}
    .main-sec.hero .intro-txt h2 .txt-wrap:nth-child(2) { padding-left: clamp(64px, calc(128 / 767 * 100vw), 128px);}
    .main-sec.hero .intro-txt h2 .txt-wrap:nth-child(2)::before { width: clamp(58px, calc(117 / 767 * 100vw), 117px); height: clamp(2px, calc(4.25 / 767 * 100vw), 4.25px);}
    .main-sec.hero .intro-txt h3 { display: flex; justify-content: flex-start; padding-left: clamp(64px, calc(128 / 767 * 100vw), 128px); transform: translateX(0); font-size: clamp(16px, calc(21 / 767 * 100vw), 21px); text-align: left;}
	/*  */
}
@media screen and (max-width: 560px) {
    .main-sec.hero .intro-txt h3 span br { display: block;}
}
/* intro-txt (1.init) */
.main-sec.hero .intro-txt.init h2 .txt,
.main-sec.hero .intro-txt.init h3 span { transform: translateY(0); transition: transform 1.2s ease-in-out;}
.main-sec.hero .intro-txt.init h3 span { transition-delay: 600ms;}
.main-sec.hero .intro-txt.init h2 .txt-wrap:nth-child(2)::before { animation: titLineFill 1.2s 1.5s var(--custom-timing) forwards;}
/* intro-txt (2.convert) */
.main-sec.hero .intro-txt.convert { top: 104px; left: 5.2vw; font-size: 64px; color: #000; mix-blend-mode: unset;}
.main-sec.hero .intro-txt.convert h3 { font-size: 20px; transform: translateX(25%);}
.main-sec.hero .intro-txt.convert h2 .txt-wrap:nth-child(2)::before { background-color: #000; transform: translate(0,-50%) scaleX(1);}
.main-sec.hero.fin .intro-txt { position: absolute;}
@keyframes titLineFill {
    0% { transform: translate(0,-50%) scaleX(0);}
    100% { transform: translate(0,-50%) scaleX(1); }
}
@media screen and (max-width: 1680px) {
    .main-sec.hero .intro-txt.convert { top: clamp(72px,6.1905vw,104px); left: clamp(40px,5.1786vw,87px);}
}
@media screen and (max-width: 1440px) {
    .main-sec.hero .intro-txt.convert { font-size: clamp(48px,4.4444vw,64px);}
    .main-sec.hero .intro-txt.convert h3 { font-size: clamp(16px,1.3889vw,20px);}
}
@media screen and (max-width: 1024px) {
    .main-sec.hero .intro-txt.convert { top: clamp(40px,7.0313vw,72px); left: clamp(20px,3.9063vw,40px);}
}
@media screen and (max-width: 767px) {
    .main-sec.hero .intro-txt.convert {font-size: clamp(24px,6.2581vw,48px);}
    .main-sec.hero .intro-txt.convert h3 { transform: translateX(0);}
}
/* scroll-ico */
.main-sec .scroll-ico { display: flex; justify-content: center; align-items: center;width: 30px; height: auto; aspect-ratio: 1/2; border-radius: 30px; overflow: hidden; border: 1px solid #fff;}
.main-sec .scroll-ico span { display: block; font-size: 0; width: 100%; height: 100%;background-image: url('../img/ico-arrow-scroll-w.svg'); background-position: center; background-repeat: no-repeat; background-size: 12px auto; transform: translateY(-2%); animation: arrowtopdown 1s infinite linear; }
.main-sec.hero .scroll-ico { position: absolute; top: 104px; right: 5.2vw; border-color: var(--balck-bg-color); }
.main-sec.hero .scroll-ico span { background-image: url('../img/ico-arrow-scroll-b.svg');}
.main-sec.hero.fin .scroll-ico { position: absolute;}
@keyframes arrowtopdown {
    0% { transform: translateY(-2%);}
    20% { transform: translateY(-2%);}
    50% { transform: translateY(8%);}
    80% { transform: translateY(-2%);}
    100% { transform: translateY(-2%);}
}
@media screen and (max-width: 1680px) {
    .main-sec.hero .scroll-ico { top: clamp(72px,6.1905vw,104px); right: clamp(40px,5.1786vw,87px);}
}
@media screen and (max-width: 1024px) {
    .main-sec.hero .scroll-ico { top: clamp(40px,7.0313vw,72px); right: clamp(20px,3.9063vw,40px);}
}
@media screen and (max-width: 767px) {
    .main-sec .scroll-ico { width: clamp(20px,3.9113vw,30px);}
    .main-sec .scroll-ico span { background-size: clamp(7px,1.5645vw,12px) auto;}
}

/* 컨텐츠 */
.main-sec.hero { display: flex; align-items: flex-end; height: 100vh; height: 100dvh; min-height: 900px; overflow: hidden;}
.main-sec.hero .hero-list { display: flex; align-items: flex-end; gap: 20px; padding: 20px; cursor: grab; overflow: hidden; will-change: transform; scroll-behavior: auto;}
.main-sec.hero .hero-list:active { cursor: grabbing;}
.main-sec.hero .hero-list .hero-item { flex-shrink: 0; width: 330px;}
.main-sec.hero .hero-list .hero-item a { display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;}
.main-sec.hero .hero-list .hero-item .item-label { position: relative; margin-bottom: 20px; padding-left: 14px; font-size: 18px; color: #000; font-weight: 400; line-height: 1.278; }
.main-sec.hero .hero-list .hero-item .item-label::before { content:''; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 6px; height: auto; aspect-ratio: 1; background-color: #000; border-radius: 50%;}
.main-sec.hero .hero-list .hero-item .item-img { position: relative; width: 100%; height: 460px; overflow: hidden; border-radius: 10px; pointer-events: none; transition: height 400ms;}
.main-sec.hero .hero-list .hero-item .item-img picture{display: flex; justify-content: center; width: 100%; height: 100%;}
.main-sec.hero .hero-list .hero-item .item-img img { width: 100%; max-width: none; height: 100%; object-fit: cover;}
.main-sec.hero .hero-list .hero-item .item-img .flag { position: absolute; top: 0; right: 6%; width: 39px; height: auto; aspect-ratio: 39 / 60; background-image: url('../img/main/badge-gdweb-winner.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; font-size: 0; transform-origin: center top; will-change: transform; pointer-events: none; --intensity: 0; --direction: 1; animation: flagWave 1.5s infinite ease-in-out;}
@keyframes flagWave {
    0%, 100% { transform: skewX(calc(var(--intensity) * var(--direction) * -18deg)) scaleY(calc(1 - var(--intensity) * 0.05));}
    50% { transform: skewX(calc(var(--intensity) * var(--direction) * -10deg)) scaleY(1) translateY(calc(var(--intensity) * 3px));}
}
@media (hover: hover) and (min-width: 768px) {
    .main-sec.hero .hero-list .hero-item:hover .item-img { height: 500px;}
    .main-sec.hero .hero-list .hero-item:hover .item-img img {width: auto;}
}
/* 텍스트 타이핑 효과 */
.main-sec.hero .item-label span { display: inline-block; transition: opacity 360ms cubic-bezier(0.4,0,0.2,1) calc(var(--i) * 30ms);  opacity: 1;}
.main-sec.hero .hero-list.moving .item-label span {
    --hide-threshold: calc(var(--total) * (1 - var(--hide-ratio))); opacity: clamp(0, (var(--hide-threshold) - var(--i) + 0.1) * 1000, 1); transition: opacity 360ms cubic-bezier(0.4,0,0.2,1) 0ms;
}
@media screen and (max-width: 1440px) {
    .main-sec.hero { min-height: 860px;}
    .main-sec.hero .hero-list { gap: clamp(16px,1.3889vw,20px);}
}
@media screen and (max-width: 1024px) {
    .main-sec.hero { min-height: 800px;}
    .main-sec.hero .hero-list .hero-item { width: clamp(260px,32.2266vw,330px);}
    .main-sec.hero .hero-list .hero-item .item-img { height: clamp(360px,44.9219vw,460px); border-radius: 7px;}
    .main-sec.hero .hero-list .hero-item .item-label { margin-bottom: clamp(12px,1.9531vw,20px);}
    .main-sec.hero .hero-list .hero-item .item-img .flag { width: clamp(30px,3.8086vw,39px);}
}
@media (hover: hover) and (max-width: 1024px) {
    .main-sec.hero .hero-list .hero-item:hover .item-img { height: clamp(400px, calc(500 / 1024 * 100vw), 500px);}
}
@media screen and (max-width: 767px) {
    .main-sec.hero { min-height: 700px;}
    .main-sec.hero .hero-list .hero-item .item-label { font-size: clamp(16px,2.3468vw,18px);}
    .main-sec.hero .item-label span { opacity: 1 !important;}
}
/*========== Service ==========*/
/* nav */
.main-sec.service { padding-top: 140px;}
.main-sec.service .title-wrap .br{display: none;}
.main-sec.service .slider-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 80px auto 0; padding: 0 20px;}
.main-sec.service .btn-nav { position: relative; padding: 10px 16px; overflow: hidden;}
.main-sec.service .btn-nav .btn-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #E5E5E5; transition: 400ms 400ms; -webkit-transition: 400ms 400ms; -moz-transition: 400ms 400ms; -ms-transition: 400ms 400ms; -o-transition: 400ms 400ms; }
.main-sec.service .btn-nav span,
.main-sec.service .btn-nav::before,
.main-sec.service .btn-nav::after { font-family: 'Google Sans Flex', 'SUIT', sans-serif; font-size: 20px; line-height: 1.5; font-weight: 500;}
.main-sec.service .btn-nav span { color: transparent;}
.main-sec.service .btn-nav::before,
.main-sec.service .btn-nav::after { position: absolute; top: 10px; left: 16px; color: #000; transform-origin: 50% 1500%; z-index: 1; transition: transform 0ms, color 400ms 400ms; -webkit-transition: transform 0ms, color 400ms 400ms; -moz-transition: transform 0ms, color 400ms 400ms; -ms-transition: transform 0ms, color 400ms 400ms; -o-transition: transform 0ms, color 400ms 400ms; }
.main-sec.service .btn-nav::after { transform: rotate(-40deg); }
.main-sec.service .btn-nav.on .btn-bg { background: #151314; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; }
.main-sec.service .btn-nav.on::before,
.main-sec.service .btn-nav.on::after { color: #fff; transition: transform 0ms, color 400ms 400ms;}
.main-sec.service .btn-nav[data-label="si"]::before,
.main-sec.service .btn-nav[data-label="si"]::after { content:'SI : System Integration';}
.main-sec.service .btn-nav[data-label="commerce"]::before,
.main-sec.service .btn-nav[data-label="commerce"]::after { content:'Commerce';}
.main-sec.service .btn-nav[data-label="solution"]::before,
.main-sec.service .btn-nav[data-label="solution"]::after { content:'Solution';}
.main-sec.service .btn-nav[data-label="ai"]::before,
.main-sec.service .btn-nav[data-label="ai"]::after { content:'AI : Artificial Intelligence';}
@media (hover: hover) and (min-width: 768px) {
    .main-sec.service .btn-nav:hover::before { transform: rotate(40deg); transition: transform 400ms ease-in-out,color 400ms 400ms; }
    .main-sec.service .btn-nav:hover::after { transform: rotate(0deg); transition: transform 400ms ease-in-out,color 400ms 400ms; }
}
@media screen and (max-width: 1680px) {
    .main-sec.service { padding-top: clamp(110px,8.3333vw,140px);}
}
@media screen and (max-width: 1024px) {
    .main-sec.service { padding-top: clamp(80px,10.7422vw,110px);}
    .main-sec.service .sec-title {font-size: clamp(32px, calc(38 / 1024 * 100vw), 38px);}
    .main-sec.service .slider-nav { margin: clamp(60px,7.8125vw,80px) auto 0;}
    .main-sec.service .btn-nav { padding: clamp(8px, calc(10 / 1024 * 100vw), 10px) 16px;}
    .main-sec.service .btn-nav span,
    .main-sec.service .btn-nav::before,
    .main-sec.service .btn-nav::after { font-size: clamp(14px, calc(20 / 1024 * 100vw), 20px); line-height: 1.2857;}
}
@media screen and (max-width: 767px) {
    .main-sec.service .sec-title {font-size: clamp(24px, calc(32 / 767 * 100vw), 32px);}
    .main-sec.service .btn-nav { padding: clamp(5px, calc(8 / 1024 * 100vw), 8px) 16px;}
}
@media screen and (max-width: 606px) {
    .main-sec.service .slider-nav { max-width: 68%; }
}
@media screen and (max-width: 480px) {
    .main-sec.service .slider-nav { max-width: 85%; }
}
@media screen and (max-width: 440px) {
    .main-sec.service .title-wrap .br{display: block;}
}
@media screen and (max-width: 380px) {
    .main-sec.service .slider-nav { max-width: none; }
}

/* card slider */
.main-sec.service .slider-container { width: 100%; height: calc(var(--slide-width) / 650 * 860 * 1.5); position: relative; --slide-width: 650px; overflow: hidden; background-image: url('../img/main/service-bg.svg'); background-position: top -33% center; background-repeat: no-repeat; background-size: calc(7.6 * var(--slide-width)) auto;}
.main-sec.service .slider-wrapper { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: var(--slide-width); height: calc(var(--slide-width) / 650 * 860);}
.main-sec.service .card { position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; border-radius: 10px; transform-origin: 50% 375%; color: #fff; overflow: hidden;}
.main-sec.service .card .top-wrap { padding: 0 20px;}
.main-sec.service .card .tag-list { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 50px;}
.main-sec.service .card .tag-list li { padding: 6px 16px; border-radius: 2px; backdrop-filter: blur(4px); opacity: 0.8; font-size: 16px;}
.main-sec.service .card .tag-list li span { font-weight: 500; line-height: 1.25; }
.main-sec.service .card .tag-list li span::before { content:'#';}
.main-sec.service .card .tag-list li:nth-child(2n) { border-radius: 30px;}
.main-sec.service .card .txt-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 75px; text-align: center; }
.main-sec.service .card .txt-wrap .title { padding-top: 80px; font-size: 60px; font-weight: 500; line-height: 1.166667; background-image: url('../img/main/service-logo-w.svg'); background-position: top center; background-repeat: no-repeat; background-size: 60px auto; }
.main-sec.service .card .txt-wrap .desc { margin-top: 20px; font-size: 18px; font-weight: 400; line-height: 1.66667; word-break: keep-all;}
.main-sec.service .card .btm-wrap { width: 81.23%; height: auto; aspect-ratio: 528 / 297; margin: 0 auto; transform: translateY(5%);}
.main-sec.service .card .btm-wrap img { border: 4px solid #262224;
border-radius: 10px; }
.main-sec.service .card .btn-discover { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--slide-width) * 0.0923); padding: 12px 24px 13px; border-radius: 60px; background-color: #fff; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2); overflow: hidden;}
.main-sec.service .card .btn-discover span { display: flex; gap: 10px; align-items: center; color: #000; font-weight: 500; font-size: 18px; line-height: 1.3333;}
.main-sec.service .card .btn-discover i { width: 1.3333em; height: auto; aspect-ratio: 1; background-image: url("../img/ico-arrow-diagonal-b.svg"); background-position: center; background-repeat: no-repeat; background-size: contain;}
.main-sec.service .card.si { background: #151314; }
.main-sec.service .card.si .tag-list li { background-color: rgba(255, 255, 255, 0.12); }
.main-sec.service .card.commerce { background: #E5E5E5; color: #000;}
.main-sec.service .card.commerce .txt-wrap .title { background-image: url('../img/main/service-logo-w-black.svg');}
.main-sec.service .card.commerce .tag-list li { background-color: #fff; }
.main-sec.service .card.solution { background: #18483B;}
.main-sec.service .card.solution .tag-list li { background-color: #317f6a; }
.main-sec.service .card.ai { background: #05AC4B; }
.main-sec.service .card.ai .tag-list li { background-color: #4cc980; }
@media (hover: hover) and (min-width: 768px) {
    .main-sec.service .card .btn-discover:hover i { animation: arrowtopright 400ms 200ms ease-in-out; }
}
@keyframes arrowtopright {
    0% { transform: translate(0%,0%);}
    49% { transform: translate(150%,-150%);}
    50% { transform: translate(-150%,150%);}
    100% { transform: translate(0%,0%); }
}
@media screen and (max-width: 1440px) {
    .main-sec.service .card { transform-origin: 50% 350%;}
    .main-sec.service .card .txt-wrap { margin-top: clamp(60px, calc(75 / 1440 * 100vw), 75px);}
}
@media screen and (max-width: 1024px) {
    .main-sec.service .slider-container { --slide-width: clamp(300px, 63.4766vw, 650px); --ratio: clamp(1.3, 1.3 + 0.2 * (100vw - 300px) / 724, 1.5); height: calc(var(--slide-width) * 1.323 * 1.5);}
    .main-sec.service .slider-wrapper { top: clamp(50px,7.8125vw,80px); width: var(--slide-width);  height: calc(var(--slide-width) * 1.323);}
    .main-sec.service .card { transform-origin: 50% 325%;}
    .main-sec.service .card .tag-list { margin-top: clamp(28px,4.8828vw,50px);}
    .main-sec.service .card .tag-list li{padding: 0.375em 1em; font-size: clamp(13px, calc(16 / 1024 * 100vw), 16px);}
    .main-sec.service .card .txt-wrap { margin-top: clamp(40px, calc(60 / 1024 * 100vw), 60px);}
    .main-sec.service .card .txt-wrap .title { padding-top: clamp(42px,7.8125vw,80px); background-size: clamp(30px,5.8594vw,60px) auto; font-size: clamp(45px, 5.8594vw, 60px);}
    .main-sec.service .card .txt-wrap .desc { margin-top: clamp(12px,1.9531vw,20px); font-size: clamp(16px, calc(18 / 1024 * 100vw), 18px);}
}
@media screen and (max-width: 767px) {
    .main-sec.service .slider-container { height: calc(var(--slide-width) * 1.433 * 1.3);}
    .main-sec.service .slider-wrapper { height: calc(var(--slide-width) * 1.433);}
    .main-sec.service .card { transform-origin: 50% 305%;}
    .main-sec.service .card .tag-list li{padding: clamp(4px, calc(5 / 767 * 100vw), 5px) clamp(8px, calc(13 / 767 * 100vw), 13px); font-size: clamp(12px, calc(13 / 767 * 100vw), 13px);}
    .main-sec.service .card .txt-wrap { margin-top: clamp(18px, calc(40 / 767 * 100vw), 40px);}
    .main-sec.service .card .txt-wrap .title { font-size: clamp(28px, calc(45 / 767 * 100vw), 45px);}
    .main-sec.service .card .txt-wrap .desc { font-size: clamp(14px, calc(16 / 767 * 100vw), 16px);}
    .main-sec.service .card .txt-wrap .desc br { display: none;}
    .main-sec.service .card .btm-wrap{width: 80%;}
}
@media screen and (max-width: 374px) {
    .main-sec.service .slider-container { min-height: 560px; }
    .main-sec.service .slider-wrapper { min-height: 430px;}
}
@media screen and (max-width: 340px) {
    .main-sec.service .slider-container { --slide-width: calc(100vw - 40px);}
}
@media screen and (max-width: 300px) {
    .main-sec.service .slider-container { min-height: 580px; }
    .main-sec.service .slider-wrapper { min-height: 450px;}
}

/* mouseover-wrap */
.main-sec.service .mouseover-wrap { position: fixed; top: 0; left: 0; display: none; justify-content: center; align-items: center; width: 100px; height: auto; margin-left: -50px; margin-top: -60px; aspect-ratio: 1; pointer-events: none; transition: transform 0.6s var(--custom-timing); transform: scale(0); transform-origin: center center;}
.main-sec.service .mouseover-wrap.init { display: flex;}
.main-sec.service .mouseover-wrap .mouseover-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border-radius: 50%; background-color: #262224; z-index: -1; transition: all 0.6s var(--custom-timing);}
.main-sec.service .mouseover-wrap span { color: #fff; font-size: 18px; font-weight: 500;}
.main-sec.service .mouseover-wrap::before,
.main-sec.service .mouseover-wrap::after { content:''; position: absolute; top: 50%; width: 26px; height: 18px; background-image: url('../img/main/service-icon-drag-arrow-left.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.6s var(--custom-timing);}
.main-sec.service .mouseover-wrap::before { left: -4px; transform: translate(-100%,-50%);}
.main-sec.service .mouseover-wrap::after { right: -4px; transform: translate(100%,-50%); background-image: url('../img/main/service-icon-drag-arrow-right.svg');}
.main-sec.service .mouseover-wrap.grab .mouseover-bg { width: 80%; height: 80%; }
.main-sec.service .mouseover-wrap.grab::before,
.main-sec.service .mouseover-wrap.grab::after { width: 8px;}
.main-sec.service .mouseover-wrap.grab::before { left: -16px;}
.main-sec.service .mouseover-wrap.grab::after { right: -16px;}
@media (hover: hover) and (min-width: 768px) {
    .main-sec.service:has(.slider-container:hover) .mouseover-wrap { transform: scale(1);}
    .main-sec.service:has(.btn-discover:hover) .mouseover-wrap { transform: scale(0);}
}
@media screen and (max-width: 767px) {
    .main-sec.service .mouseover-wrap { display: none !important;}
}


/*========== Since ==========*/
.since {position: relative; width: 100%; padding: 240px 0 200px; background-image: url('../img/main/since-bg.jpg'); background-image: image-set(url('../img/main/since-bg.webp') 1x, url('../img/main/since-bg.jpg') 1x); background-size: cover; background-position: top center; color: #fff; overflow: hidden;}
.since .bg-obj{position: absolute; z-index: 0; display: inline-block; width: clamp(384px, calc(384px + (1282 - 384) * ((100vw - 375px) / (1920 - 375))), 1282px); height: auto; aspect-ratio: 1/1; border-radius: 50%; background-position: center center; background-size: cover; overflow: hidden; opacity: 0.8;}
.since .bg-obj.obj01{left: 70%; top: 35%; background-image: url('../img/main/since-bg-obj01.png');}
.since .bg-obj.obj02{left: -10%; bottom: -20%; background-image: url('../img/main/since-bg-obj02.png');}
.since .inner{position: relative; z-index: 1;}
.since .since-year{margin: 160px 0 20px; font-size: clamp(280px, calc(340 / 1920 * 100vw), 340px); font-weight: 500; line-height: 1.24;}
.since .since-list li{display: grid; grid-template-columns: clamp(300px, calc(380 / 1920 * 100vw), 380px) clamp(300px, calc(390 / 1920 * 100vw), 390px) auto; grid-template-areas: "client period info"; align-items: center; padding: 50px clamp(16px, calc(40 / 1920 * 100vw), 40px); border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.since .since-list li:nth-child(1){border-top: 1px solid rgba(255, 255, 255, 0.2);}
.since .since-list li .item-client {grid-area: client; width: 100%; height: auto; aspect-ratio: 380/210; border-radius: 5px; overflow: hidden;}
.since .since-list li .item-client img{width: 100%;}
.since .since-list li .item-period{grid-area: period; font-size: clamp(18px, calc(20 / 1920 * 100vw), 20px); text-align: center;}
.since .since-list li .item-info{ grid-area: info; line-height: 1.66;}
.since .since-list li .item-info .tit{margin-bottom: 24px; font-size: clamp(32px, calc(36 / 1920 * 100vw), 36px); font-weight: 700;}
.since .since-list li .item-info .desc{font-size: clamp(16px, calc(18 / 1920 * 100vw), 18px); color: #c6c6c6; word-break: keep-all;}
@media screen and (max-width: 1680px) {
    .since {padding: clamp(200px, calc(240 / 1680 * 100vw), 240px) 0 clamp(170px, calc(200 / 1680 * 100vw), 200px);}
    .since .since-year {margin: clamp(130px, calc(160 / 1680 * 100vw), 160px) 0 20px; }
}
@media screen and (max-width: 1440px) {
    .since .since-year {font-size: clamp(210px, calc(280 / 1440 * 100vw), 280px);}
    .since .since-list li {grid-template-columns: clamp(260px, calc(400 / 1440 * 100vw), 400px) auto; grid-template-rows: auto auto; grid-template-areas: "client info" "period info"; gap: 25px clamp(50px, calc(100 / 1440 * 100vw), 100px);}
    .since .since-list li .item-period {font-size: clamp(18px, calc(20 / 1440 * 100vw), 20px);}
    .since .since-list li .item-info .tit {margin-bottom: 0.6667em; font-size: clamp(32px, calc(36 / 1440 * 100vw), 36px);}
    .since .since-list li .item-info .desc {font-size: clamp(16px, calc(18 / 1440 * 100vw), 18px); }
}
@media screen and (max-width: 1024px) {
    .since { padding: clamp(140px, calc(200 / 1024 * 100vw), 200px) 0 clamp(150px, calc(170 / 1024 * 100vw), 170px);}
    .since .bg-obj{opacity: 0.6;}
    .since .bg-obj.obj01{left: 50%; top: 32%;}
    .since .bg-obj.obj02{left: -10%; bottom: 10%; }
    .since .since-year { margin: clamp(100px, calc(130 / 1024 * 100vw), 130px) 0 20px; font-size: clamp(180px, calc(210 / 1024 * 100vw), 210px); line-height: 1; }
    .since .since-list li .item-period { font-size: clamp(16px, calc(18 / 1024 * 100vw), 18px);}
    .since .since-list li .item-info .tit { font-size: clamp(24px, calc(32 / 1024 * 100vw), 32px);}
    .since .since-list li .item-info .desc { font-size: clamp(14px, calc(16 / 1024 * 100vw), 16px); }
}
@media screen and (max-width: 767px) {
    .since {padding: clamp(80px, calc(140 / 767 * 100vw), 140px) 0 clamp(140px, calc(150 / 767 * 100vw), 150px); background-color: var(--balck-bg-color); background-image: url('../img/main/since-bg-mo.jpg'); background-image: image-set(url('../img/main/since-bg-mo.webp') 1x, url('../img/main/since-bg-mo.jpg') 1x); background-size: 100% auto;}
    .since .since-year { margin: clamp(70px, calc(100 / 767 * 100vw), 100px) 0 20px; font-size: clamp(100px, calc(180 / 767 * 100vw), 180px); }
    .since .since-list li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "client" "period" "info"; gap: 0; padding: 40px 0;}
    .since .since-list li .item-period {margin: 23px 0 18px; font-size: clamp(14px, calc(20 / 767 * 100vw), 20px); text-align: left;}
    .since .since-list li .item-info .tit { margin-bottom: 10px; font-size: clamp(20px, calc(32 / 767 * 100vw), 32px); }
    .since .since-list li .item-info .desc { font-size: clamp(14px, calc(18 / 767 * 100vw), 18px); }
}
@media screen and (max-width: 359px) {
    .since .since-list li .item-client{display: flex; align-items: center; justify-content: center;}
    .since .since-list li .item-client img{ width: 120%; max-width: none; }
}

/*========== Numbers ==========*/
.numbers {width: 100%; height: 100vh; padding: 110px 0 212px; background-image: url('../img/main/numbers-bg.jpg'); background-image: image-set(url('../img/main/numbers-bg.webp') 1x, url('../img/main/numbers-bg.jpg') 1x); background-size: cover; background-position: center center; color: #fff; overflow: hidden;}
.numbers .inner{position: relative; height: 100%; display: flex; justify-content: center; align-items: center;}
.numbers .title-wrap{ width: fit-content; margin-bottom: 28px;}
.numbers .sec-title {font-weight: 800; line-height: 1.5;}
.numbers .sec-desc {font-size: 26px;}
.numbers .sec-desc .br{display: none;}
.numbers .number-item{position: absolute; top: 100vh; display: flex; flex-flow: column nowrap; justify-content: space-between; gap: 68px; width: 360px; height: auto; aspect-ratio: 360/455; padding: 40px 20px 60px 41px; border-radius: 6px; background-size: cover; background-position: center center; overflow: hidden; transform-origin: center center;}
.numbers .number-item:nth-child(2n-1){left: 0;}
.numbers .number-item:nth-child(2n){right: 0;}
.numbers .number-item:nth-child(1){ left: 13.594%; background-image: url('../img/main/numbers01.jpg'); background-image: image-set(url('../img/main/numbers01.webp') 1x, url('../img/main/numbers01.jpg') 1x);}
.numbers .number-item:nth-child(2){right: 18.073%; background-image: url('../img/main/numbers02.jpg'); background-image: image-set(url('../img/main/numbers02.webp') 1x, url('../img/main/numbers02.jpg') 1x);}
.numbers .number-item:nth-child(3){ left: 20.0525%; background-image: url('../img/main/numbers03.jpg'); background-image: image-set(url('../img/main/numbers03.webp') 1x, url('../img/main/numbers03.jpg') 1x);}
.numbers .number-item:nth-child(4){ right: 22.084%; background-image: url('../img/main/numbers04.jpg'); background-image: image-set(url('../img/main/numbers04.webp') 1x, url('../img/main/numbers04.jpg') 1x);}
.numbers .number-item .item-label{font-size: 16px; font-weight: 500; line-height: 1;}
.numbers .number-item .item-number{ font-size: 100px; font-weight: 500; line-height: 1;}
.numbers .number-item .item-number sup{font-size: 60px; font-weight: 600;}
.numbers .number-item .item-content{margin-top: auto;}
.numbers .number-item .item-tit{margin-bottom: 6px; font-size: 28px; font-weight: 400;}
.numbers .number-item .item-desc{font-size: 18px; font-weight: 500; color: rgba(255,255,255,0.8); word-break: keep-all;}
.numbers .number-item .item-desc br{display: none;}
@media screen and (min-width: 1920px) {
    .numbers{background-position: bottom 45% center;}
}
@media screen and (max-width: 1680px) {
    .numbers {padding: 110px 0 clamp(140px, calc(212 / 1680 * 100vw), 212px); }
    .numbers .title-wrap{ margin-bottom: clamp(20px, calc(28 / 1680 * 100vw), 28px);}
    .numbers .sec-desc {font-size: clamp(20px, calc(26 / 1680 * 100vw), 26px);}
    .numbers .number-item{ gap: clamp(50px, calc(68 / 1680 * 100vw), 68px); width: clamp(280px, calc(360 / 1680 * 100vw), 360px); padding: clamp(30px, calc(40 / 1680 * 100vw), 40px) clamp(20px, calc(41 / 1680 * 100vw), 41px) clamp(50px, calc(60 / 1680 * 100vw), 60px) clamp(30px, calc(41 / 1680 * 100vw), 41px);}
    .numbers .number-item .item-label{font-size: clamp(14px, calc(16 / 1680 * 100vw), 16px);}
    .numbers .number-item .item-number{ font-size: clamp(70px, calc(100 / 1680 * 100vw), 100px);}
    .numbers .number-item .item-number sup{font-size: clamp(50px, calc(60 / 1680 * 100vw), 60px);}
    .numbers .number-item .item-tit{ font-size: clamp(23px, calc(28 / 1680 * 100vw), 28px); }
    .numbers .number-item .item-desc{font-size: clamp(16px, calc(18 / 1680 * 100vw), 18px);}
}
@media screen and (max-width: 1440px) {
    .numbers .number-item:nth-child(1){ left: 12.594%;}
    .numbers .number-item:nth-child(2){ right: 15.073%;}
    .numbers .number-item:nth-child(3){ left: 20.0525%;}
    .numbers .number-item:nth-child(4){ right: 20.084%;}
}
@media screen and (max-width: 1024px) {
    .numbers {padding: 110px 0  clamp(110px, calc(140 / 1024 * 100vw), 140px); }
    .numbers .title-wrap{ margin-bottom: clamp(10px, calc(20 / 1024 * 100vw), 20px);}
    .numbers .number-item{ gap: clamp(30px, calc(50 / 1024 * 100vw), 50px); width: clamp(210px, calc(280 / 1024 * 100vw), 280px); aspect-ratio: 210/265; padding: clamp(22px, calc(30 / 1024 * 100vw), 30px) clamp(10px, calc(20 / 1024 * 100vw), 20px) clamp(30px, calc(40 / 1024 * 100vw), 40px) clamp(20px, calc(30 / 1024 * 100vw), 30px);}
    .numbers .number-item:nth-child(1){ left: clamp(40px, calc(130 / 1024 * 100vw), 130px);}
    .numbers .number-item:nth-child(2){ right: clamp(40px, calc(130 / 1024 * 100vw), 154px);}
    .numbers .number-item:nth-child(3){ left: clamp(40px, calc(200 / 1024 * 100vw), 200px);}
    .numbers .number-item:nth-child(4){ right: clamp(40px, calc(205 / 1024 * 100vw), 205px);}
    .numbers .number-item .item-label{font-size: clamp(12px, calc(14 / 1024 * 100vw), 14px);}
    .numbers .number-item .item-number{ font-size: clamp(48px, calc(70 / 1024 * 100vw), 70px);}
    .numbers .number-item .item-number sup{font-size: clamp(30px, calc(50 / 1024 * 100vw), 50px);}
    .numbers .number-item .item-tit{ margin-bottom: clamp(3px, calc(6 / 1024 * 100vw), 6px); font-size: clamp(18px, calc(23 / 1024 * 100vw), 23px); }
    .numbers .number-item .item-desc{font-size: clamp(14px, calc(16 / 1024 * 100vw), 16px);}
}
@media screen and (max-width: 830px) {
    .numbers .number-item .item-desc br{display: block;}
}
@media screen and (max-width: 767px) {
    .numbers {background-image: url('../img/main/numbers-bg-mo.jpg'); background-image: image-set(url('../img/main/numbers-bg-mo.webp') 1x, url('../img/main/numbers-bg-mo.jpg') 1x);}
    .numbers .title-wrap{margin-bottom: 0;}
    .numbers .sec-title {font-size: clamp(28px, calc(38 / 767 * 100vw), 38px); line-height: 1.35;}
    .numbers .sec-desc {font-size: clamp(16px, calc(20 / 767 * 100vw), 20px);}
    .numbers .number-item:nth-child(1){ left: clamp(20px, calc(97 / 767 * 100vw), 97px);}
    .numbers .number-item:nth-child(2){ right: clamp(20px, calc(97 / 767 * 100vw), 97px);}
    .numbers .number-item:nth-child(3){ left: clamp(20px, calc(150 / 767 * 100vw), 150px);}
    .numbers .number-item:nth-child(4){ right: clamp(20px, calc(153 / 767 * 100vw), 153px);}
    .numbers .number-item .item-label{margin-bottom: 5px;}
}
@media screen and (max-width: 430px) {
    .numbers .sec-desc br{display: none;}
    .numbers .sec-desc .br{display: block;}
    .numbers .number-item:nth-child(1){ left: 20px;}
    .numbers .number-item:nth-child(2){ right: 20px;}
    .numbers .number-item:nth-child(3){ left: 20px;}
    .numbers .number-item:nth-child(4){ right: 20px;}
}
@media screen and (max-width: 359px) {
    .numbers .sec-title br{display: none;}
}
@media screen and (max-width: 300px) {
    .numbers .sec-desc .br{display: none;}
}

/*========== Process ==========*/
.process{ padding: 144px 0 154px; background-color: #081209; overflow: hidden;}
.process .sec-desc br{display: none;}
.process .process-list{position: relative; width: 100%; margin-top: 80px;}
.process .process-list .item-img{position: absolute; left: 0; top: -100vh; width: 520px; height: auto; aspect-ratio: 520/340; border-radius: 5px; overflow: hidden; opacity: 0; transition: opacity 0.3s ease;}
.process .process-list .item-content {position: relative; display: grid; grid-template-columns: 36px clamp(190px, calc(218 / 1920 * 100vw), 218px) 1fr; justify-content: flex-end; align-items: center; gap: clamp(70px, calc(80 / 1920 * 100vw), 80px); width: 61.628%; height: 150px; margin-left: auto; padding: 30px 20px 30px clamp(40px, calc(46 / 1920 * 100vw), 46px); border-bottom: 1px solid #c6c6c6; cursor: default;}
.process .process-list .process-item:nth-child(1) .item-content{border-top: 1px solid #c6c6c6;}
.process .process-list .item-content::before, 
.process .process-list .item-content::after{content: ''; position: absolute; display: inline-block; width: 0; height: 2px; background-color: var(--point-color);}
.process .process-list .item-content::before{left: 0; top: -2px;}
.process .process-list .item-content::after{right: 0; bottom: -1px;}
.process .process-list .item-content .item-num{font-size: 20px; font-weight: 500; color: var(--point-color);}
.process .process-list .item-content .item-tit{font-size: 26px; font-weight: 500; letter-spacing: -0.03em; transition: transform 0.4s ease; transform-origin: left;}
.process .process-list .item-content .item-desc{font-size: 20px; color: #666; word-break: keep-all; white-space: nowrap;}
.process .process-list .item-content .item-desc strong{color: #111;}
@media (hover: hover) {
    .process .process-list .process-item:hover .item-img{opacity: 1;}
    .process .process-list .process-item:hover .item-content::before, 
    .process .process-list .process-item:hover .item-content::after{width: 100%; transition: width 0.6s ease;}
    .process .process-list .process-item:hover .item-content .item-tit{transform: scale(1.2); }
}
@media screen and (max-width: 1680px) {
    .process{ padding: clamp(110px, calc(144 / 1680 * 100vw), 144px) 0 clamp(134px, calc(154 / 1680 * 100vw), 154px);}
    .process .process-list .item-img{width: clamp(320px, calc(520 / 1680 * 100vw), 520px);}
    .process .process-list .item-content {grid-template-columns: clamp(30px, calc(36 / 1680 * 100vw), 36px) clamp(160px, calc(190 / 1920 * 100vw), 190px) 1fr; gap: clamp(20px, calc(36 / 1680 * 100vw), 30px); height: clamp(130px, calc(150 / 1680 * 100vw), 150px); padding: 30px clamp(10px, calc(20 / 1680 * 100vw), 20px) 30px clamp(20px, calc(40 / 1680 * 100vw), 40px);}
    .process .process-list .item-content .item-num{font-size: clamp(17px, calc(20 / 1680 * 100vw), 20px);}
    .process .process-list .item-content .item-tit{font-size: clamp(23px, calc(26 / 1680 * 100vw), 26px);}
    .process .process-list .item-content .item-desc{font-size: clamp(17px, calc(20 / 1680 * 100vw), 20px); white-space: inherit;}
}
@media screen and (max-width: 1024px) {
    .process{padding: clamp(80px, calc(110 / 1024 * 100vw), 110px) 0 clamp(120px, calc(134 / 1024 * 100vw), 134px);}
    .process .process-list .item-img{display: none;}
    .process .process-list .item-content { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 10px; width: 100%; height: auto;}
    .process .process-list .item-content .item-num{margin-right: 6px; font-size: clamp(14px, calc(17 / 1024 * 100vw), 17px);}
    .process .process-list .item-content .item-tit{font-size: clamp(20px, calc(23 / 1024 * 100vw), 23px);}
    .process .process-list .item-content .item-desc{width: 100%; font-size: clamp(14px, calc(17 / 1024 * 100vw), 17px);}
}
@media screen and (max-width: 767px) {
    .process .sec-desc br{display: block;}
}

/*========== Clients ==========*/
.clients {padding: 120px 0; background-color: var(--balck-bg-color);}
.clients .sec-title{color: #fff;}
.clients .client-slider-wrap {display: flex; flex-flow: column; gap: 32px; width: 100%; margin-top: 110px; overflow: hidden;}
.clients .clients-row { display: flex; gap: 55px; width: max-content;}
.clients .client-list { display: flex; gap: 55px;}
.clients .client-item { flex-shrink: 0; width: 200px; height: auto; aspect-ratio: 200/60;}
.clients .client-item img {width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten;}
@media screen and (max-width: 1680px) {
    .clients {padding: clamp(100px, calc(120 / 1680 * 100vw), 120px) 0;}
    .clients .client-slider-wrap{margin-top: clamp(80px, calc(110 / 1680 * 100vw), 110px);}
    .clients .clients-row, .clients .client-list { gap: clamp(35px, calc(55 / 1680 * 100vw), 55px);}
    .clients .client-item{width: clamp(160px, calc(200 / 1680 * 100vw), 200px);}
}
@media screen and (max-width: 1024px) {
    .clients {padding: clamp(80px, calc(100 / 1024 * 100vw), 100px) 0;}
    .clients .client-slider-wrap{gap: clamp(20px, calc(32 / 1024 * 100vw), 32px); margin-top: clamp(66px, calc(80 / 1024 * 100vw), 80px);}
    .clients .clients-row, .clients .client-list{ gap: clamp(20px, calc(35 / 1024 * 100vw), 35px);}
}
@media screen and (max-width: 767px) {
    .clients .clients-row, .clients .client-list{gap: clamp(10px, calc(20 / 767 * 100vw), 20px);}
    .clients .client-item{width: clamp(120px, calc(160 / 767 * 100vw), 160px);}
}