@charset "utf-8";

:root {
    --width:1440px;
    --padding:40px;
    --header_h:84px;
    --point:#0ea29a;
    --point-light:#3fd1c6;
    --bg:#0b0d10;
    --bg-2:#12151a;
    --bg-3:#1a1e25;
    --line:#262b33;
    --gray:#9aa3ad;
    --font_en:"Montserrat","Pretendard",sans-serif;
}

html{scroll-behavior:smooth; scroll-padding-top:var(--header_h);}
#wrap{overflow:hidden;}
.cont{width:100%; max-width:var(--width); margin:0 auto; padding:0 var(--padding);}

/* ============================================================
   header
   ============================================================ */
.header{position:fixed; left:0; top:0; z-index:100; width:100%; height:var(--header_h); transition:background .4s ease, box-shadow .4s ease;}
.header.on{background:rgba(11,13,16,.92); box-shadow:0 1px 0 #262b33; backdrop-filter:blur(8px);}
.header .inner{display:flex; align-items:center; width:100%; max-width:var(--width); height:100%; margin:0 auto; padding:0 var(--padding);}
.header .logo a{display:flex; align-items:center; gap:10px; color:#fff;}
.header .logo strong{font-family:var(--font_en); font-size:34px; font-weight:800; line-height:1; letter-spacing:-0.04em;}
.header .logo_txt{display:flex; flex-direction:column; gap:3px;}
.header .logo_txt em{font-family:var(--font_en); font-size:12px; font-weight:700; line-height:1; letter-spacing:0.12em; color:var(--point-light);}
.header .logo_txt span{font-size:12px; line-height:1; letter-spacing:0.04em; color:#c8ced5;}
.header .gnb{margin-left:auto;}
.header .gnb ul{display:flex; align-items:center; gap:36px;}
.header .gnb a{position:relative; display:block; padding:8px 0; font-size:16px; font-weight:500; color:#e6e9ed; transition:color .3s ease;}
.header .gnb a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--point); transition:width .3s ease;}
.header .gnb a:hover,
.header .gnb a.on{color:#fff;}
.header .gnb a:hover::after,
.header .gnb a.on::after{width:100%;}
.header .call{margin-left:40px; padding:10px 20px; border-radius:2em; background:var(--point); font-family:var(--font_en); font-size:15px; font-weight:700; color:#fff; transition:background .3s ease;}
.header .call:hover{background:#0b8a83;}
.header .menu{display:none; position:relative; width:40px; height:40px; margin-left:auto;}
.header .menu span{overflow:hidden; position:absolute; left:8px; top:19px; width:24px; height:2px; background:#fff; font-size:0; transition:background .3s ease;}
.header .menu::before,
.header .menu::after{content:""; position:absolute; left:8px; width:24px; height:2px; background:#fff; transition:transform .3s ease, top .3s ease;}
.header .menu::before{top:11px;}
.header .menu::after{top:27px;}
.header.open .menu span{background:transparent;}
.header.open .menu::before{top:19px; transform:rotate(45deg);}
.header.open .menu::after{top:19px; transform:rotate(-45deg);}

@media (max-width:1100px) {
    .header .gnb ul{gap:24px;}
    .header .gnb a{font-size:15px;}
    .header .call{display:none;}
}

@media (max-width:860px) {
    :root{--header_h:64px; --padding:20px;}
    .header .logo strong{font-size:28px;}
    .header .menu{display:block;}
    .header .gnb{position:fixed; left:0; top:var(--header_h); width:100%; height:0; overflow:hidden; background:#0b0d10; transition:height .4s ease;}
    .header.open{background:#0b0d10;}
    .header.open .gnb{height:100vh;}
    .header .gnb ul{flex-direction:column; align-items:stretch; gap:0; padding:20px;}
    .header .gnb a{padding:18px 0; border-bottom:1px solid #262b33; font-size:18px;}
    .header .gnb a::after{display:none;}
}

/* ============================================================
   main
   ============================================================ */
main section{position:relative;}
.tag{display:block; margin-bottom:14px; font-family:var(--font_en); font-size:14px; font-weight:700; letter-spacing:0.2em; color:var(--point-light);}
.sec_head{margin-bottom:56px; text-align:center;}
.sec_head h2{font-size:44px; font-weight:700; line-height:1.25; letter-spacing:-0.02em;}
.sec_head p{margin-top:14px; font-size:18px; color:var(--gray);}

/* lightbox trigger */
.lb{display:block; overflow:hidden; position:relative; cursor:zoom-in;}
.lb img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.lb::after{content:""; position:absolute; inset:0; background:rgba(14,162,154,0); transition:background .4s ease;}
.lb:hover img{transform:scale(1.05);}
.lb:hover::after{background:rgba(14,162,154,.18);}

.main_visual{display:flex; overflow:hidden; align-items:center; height:100vh; min-height:640px; max-height:1000px;}
.main_visual .slide li{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease;}
.main_visual .slide li.on{opacity:1;}
.main_visual .slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 7s linear;}
.main_visual .slide li.on img{transform:scale(1);}
.main_visual::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,13,16,.88) 0%, rgba(11,13,16,.55) 55%, rgba(11,13,16,.2) 100%), linear-gradient(0deg, #0b0d10 0%, rgba(11,13,16,0) 30%);}
.main_visual .cont{position:relative; z-index:2;}
.main_visual h2{display:flex; flex-direction:column; font-size:64px; font-weight:800; line-height:1.2; letter-spacing:-0.03em;}
.main_visual h2 strong{color:var(--point-light);}
.main_visual p{margin-top:28px; font-size:20px; line-height:1.7; color:#d3d8de;}
.main_visual .btns{display:flex; gap:12px; margin-top:44px;}
.main_visual .btns a{display:inline-flex; align-items:center; height:56px; padding:0 32px; border-radius:2em; font-size:17px; font-weight:600; transition:background .3s ease, color .3s ease;}
.main_visual .btn_line{border:1px solid rgba(255,255,255,.6);}
.main_visual .btn_line:hover{background:#fff; color:#0b0d10;}
.main_visual .btn_fill{background:var(--point);}
.main_visual .btn_fill:hover{background:#0b8a83;}

.main_about{padding:clamp(100px, 9vw, 140px) 0;}
.main_about .cont{display:flex; flex-direction:column; gap:56px;}
.main_about .intro{display:flex; align-items:center; gap:64px;}
.main_about .txt{flex:1 1 0;}
.main_about .info{display:flex; border-top:1px solid #262b33; border-bottom:1px solid #262b33;}
.main_about .info li{display:flex; flex-direction:column; align-items:center; position:relative; flex:1 1 0; padding:64px 32px 56px; text-align:center;}
.main_about .info li + li{border-left:1px solid #262b33;}
.main_about .info li::after{content:""; position:absolute; left:50%; top:-1px; width:0; height:2px; background:var(--point); transform:translateX(-50%); transition:width .5s ease;}
.main_about .info li:hover::after{width:100%;}
.main_about .info .num{position:absolute; left:28px; top:20px; font-family:var(--font_en); font-size:72px; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(63,209,198,.35);}
.main_about .info svg{width:84px; height:84px; margin-bottom:28px; fill:none; stroke:var(--point-light); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s ease;}
.main_about .info li:hover svg{transform:translateY(-6px);}
.main_about .info svg .f{fill:rgba(14,162,154,.28);}
.main_about .info svg .bg{fill:#0b0d10;}
.main_about .info svg .p{fill:var(--point-light); stroke:none;}
.main_about .info svg .t{stroke:#fff; stroke-width:1.4;}
.main_about .info svg .dash{stroke-dasharray:2.5 3;}
.main_about .info h3{font-size:24px; font-weight:700; letter-spacing:-0.02em;}
.main_about .info p{margin-top:14px; font-size:16px; line-height:1.7; color:var(--gray);}
.main_about .intro img{flex:none; width:46%; height:auto; aspect-ratio:3/2; border-radius:12px; object-fit:cover;}
.main_about h2{display:flex; flex-direction:column; gap:8px; margin-bottom:28px;}
.main_about h2 span{font-family:var(--font_en); font-size:22px; font-weight:700; color:var(--point-light);}
.main_about h2 strong{font-size:40px; font-weight:700; line-height:1.3; letter-spacing:-0.02em;}
.main_about p{font-size:18px; line-height:1.8; color:#c8ced5;}
.main_about p + p{margin-top:14px;}

.main_business{padding:clamp(100px, 9vw, 140px) 0; background:var(--bg-2);}
.main_business .list{display:flex; gap:20px;}
.main_business .list li{display:flex; flex-direction:column; flex:1 1 0; overflow:hidden; border-radius:12px; background:var(--bg-3);}
.main_business .list img{width:100%; height:240px; object-fit:cover;}
.main_business .txt{padding:28px 26px 32px;}
.main_business .txt em{font-family:var(--font_en); font-size:14px; font-weight:700; color:var(--point-light);}
.main_business .txt h3{margin:8px 0 12px; font-size:22px; font-weight:700; line-height:1.35;}
.main_business .txt p{font-size:16px; line-height:1.7; color:var(--gray);}

.main_banner{overflow:hidden; padding:clamp(100px, 10vw, 160px) 0; text-align:center;}
.main_banner::before{content:""; position:absolute; top:-15%; bottom:-15%; left:0; right:0; background:url("../img/stock_lights.webp") center/cover no-repeat; transform:translate3d(0,var(--py,0),0);}
.main_banner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,16,.75) 0%, rgba(11,13,16,.55) 50%, rgba(11,13,16,.85) 100%);}
.main_banner .cont{position:relative; z-index:2;}
.main_banner h2{display:flex; flex-direction:column; gap:6px; font-size:46px; font-weight:800; line-height:1.3; letter-spacing:-0.02em;}
.main_banner h2 strong{color:var(--point-light);}
.main_banner .btn_fill{display:inline-flex; align-items:center; height:56px; margin-top:40px; padding:0 32px; border-radius:2em; background:var(--point); font-size:17px; font-weight:600; transition:background .3s ease;}
.main_banner .btn_fill:hover{background:#0b8a83;}

.main_history{padding:clamp(100px, 9vw, 140px) 0;}
.main_history .gallery,
.main_setup .gallery{display:flex; flex-wrap:wrap; margin:-8px;}
.main_history .gallery li,
.main_setup .gallery li{width:25%; padding:8px;}
.main_history .gallery .lb{aspect-ratio:4/3; border-radius:10px;}

.main_setup{padding:clamp(100px, 9vw, 140px) 0; background:var(--bg-2);}
.main_setup .gallery .wide{width:50%;}
.main_setup .gallery .lb{height:320px; border-radius:10px;}

.main_license{padding:clamp(100px, 9vw, 140px) 0;}
.main_license .list{display:flex; flex-wrap:wrap; margin:-12px;}
.main_license .list li{width:33.333%; padding:12px;}
.main_license .lb{aspect-ratio:3/4; border-radius:10px; background:#e9ecef;}
.main_license .lb img{object-fit:contain;}
.main_license .txt{padding:18px 4px 0;}
.main_license .txt h3{font-size:20px; font-weight:700;}
.main_license .txt span{display:block; margin-top:6px; font-size:15px; color:var(--gray);}

.main_contact{overflow:hidden; padding:clamp(100px, 8vw, 120px) 0;}
.main_contact::before{content:""; position:absolute; top:-15%; bottom:-15%; left:0; right:0; background:url("../img/stock_crowd.webp") center/cover no-repeat; transform:translate3d(0,var(--py,0),0);}
.main_contact::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(11,95,90,.92) 0%, rgba(11,13,16,.9) 60%, rgba(11,13,16,.75) 100%);}
.main_contact .cont{position:relative; z-index:2;}
.main_contact .cont{display:flex; align-items:center; justify-content:space-between; gap:60px;}
.main_contact h2{font-size:40px; font-weight:700; line-height:1.3; letter-spacing:-0.02em;}
.main_contact p{margin-top:14px; font-size:18px; color:#c8ced5;}
.main_contact .info{display:flex; flex-direction:column; flex:0 0 auto; gap:18px;}
.main_contact .info li{display:flex; align-items:center; gap:18px;}
.main_contact .info svg{flex:none; width:52px; height:52px; padding:13px; border:1px solid rgba(63,209,198,.4); border-radius:50%; background:rgba(14,162,154,.18); fill:none; stroke:var(--point-light); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.main_contact .info svg .t{stroke:#fff;}
.main_contact .info .desc{display:flex; align-items:baseline; gap:20px;}
.main_contact .info em{flex:0 0 60px; font-size:15px; color:var(--point-light);}
.main_contact .info a{font-size:20px; font-weight:600; word-break:keep-all;}
.main_contact .info li:first-child a{font-family:var(--font_en); font-size:36px; font-weight:800;}

@media (max-width:1100px) {
    .main_visual h2{font-size:52px;}
    .main_about .cont{gap:48px;}
    .main_about .info li{padding:56px 20px 44px;}
    .main_about .info .num{left:18px; font-size:56px;}
    .main_about .info p br{display:none;}
    .main_about .intro{flex-direction:column; align-items:stretch; gap:40px;}
    .main_about .intro img{width:100%;}
    .main_banner h2{font-size:38px;}
    .main_business .list{flex-wrap:wrap;}
    .main_business .list li{flex:1 1 40%;}
    .main_history .gallery li{width:33.333%;}
    .main_setup .gallery li,
    .main_setup .gallery .wide{width:50%;}
    .main_setup .gallery li:first-child{width:100%;}
    .main_contact .cont{flex-direction:column; align-items:flex-start;}
}

@media (max-width:860px) {
    .sec_head{margin-bottom:36px;}
    .sec_head h2{font-size:30px;}
    .sec_head p{font-size:16px;}
    .tag{font-size:12px;}
    .main_visual{min-height:560px;}
    .main_visual::after{background:linear-gradient(90deg, rgba(11,13,16,.85) 0%, rgba(11,13,16,.6) 100%), linear-gradient(0deg, #0b0d10 0%, rgba(11,13,16,0) 30%);}
    .main_visual h2{font-size:36px;}
    .main_visual p{margin-top:20px; font-size:16px;}
    .main_visual .btns{margin-top:32px;}
    .main_visual .btns a{height:48px; padding:0 22px; font-size:15px;}
    .main_about h2 span{font-size:18px;}
    .main_about h2 strong{font-size:26px;}
    .main_about p{font-size:16px;}
    .main_about .cont{gap:36px;}
    .main_about .intro{gap:28px;}
    .main_about .info{flex-direction:column;}
    .main_about .info li{padding:40px 8px 36px;}
    .main_about .info li + li{border-left:0; border-top:1px solid #262b33;}
    .main_about .info .num{left:4px; top:16px; font-size:48px;}
    .main_about .info svg{width:68px; height:68px; margin-bottom:20px;}
    .main_about .info h3{font-size:20px;}
    .main_about .info p{margin-top:10px; font-size:15px; word-break:keep-all;}
    .main_banner h2{font-size:26px;}
    .main_banner .btn_fill{height:48px; margin-top:28px; padding:0 22px; font-size:15px;}
    .main_business .list li{flex-basis:100%;}
    .main_business .list img{height:200px;}
    .main_business .txt{padding:22px 20px 26px;}
    .main_business .txt h3{font-size:20px;}
    .main_business .txt p{font-size:15px;}
    .main_history .gallery,
    .main_setup .gallery{margin:-5px;}
    .main_history .gallery li,
    .main_setup .gallery li,
    .main_setup .gallery .wide{width:50%; padding:5px;}
    .main_setup .gallery li:first-child{width:100%;}
    .main_setup .gallery .lb{height:160px;}
    .main_license .list{margin:-6px;}
    .main_license .list li{width:50%; padding:6px;}
    .main_license .txt{padding-top:12px;}
    .main_license .txt h3{font-size:15px;}
    .main_license .txt span{font-size:12px;}
    .main_contact h2{font-size:28px;}
    .main_contact p{font-size:16px;}
    .main_contact .info li{gap:14px;}
    .main_contact .info svg{width:44px; height:44px; padding:11px;}
    .main_contact .info .desc{flex-direction:column; gap:2px;}
    .main_contact .info em{flex-basis:auto;}
    .main_contact .info a{font-size:16px;}
    .main_contact .info li:first-child a{font-size:30px;}
}

/* ============================================================
   footer
   ============================================================ */
.footer{padding:56px 0 64px; border-top:1px solid #262b33; background:#07080a;}
.footer .logo{display:flex; align-items:baseline; gap:8px; margin-bottom:22px;}
.footer .logo strong{font-family:var(--font_en); font-size:26px; font-weight:800; line-height:1;}
.footer .logo span{font-family:var(--font_en); font-size:12px; font-weight:700; letter-spacing:0.12em; color:var(--point-light);}
.footer address{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; line-height:1.6; color:#8b939c;}
.footer .copyright{display:block; margin-top:22px; font-family:var(--font_en); font-size:12px; color:#5d646c;}
.quick_call{display:none;}

@media (max-width:860px) {
    .footer{padding:40px 0 100px;}
    .footer address{flex-direction:column; gap:4px; font-size:13px;}
    .quick_call{display:flex; align-items:center; justify-content:center; position:fixed; left:12px; right:12px; bottom:12px; z-index:90; height:52px; border-radius:2em; background:var(--point); box-shadow:0 6px 20px rgba(0,0,0,.4); font-size:16px; font-weight:700;}
}

/* ============================================================
   lightbox
   ============================================================ */
.lightbox{display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; inset:0; z-index:200; padding:60px 80px; background:rgba(0,0,0,.92); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.lightbox.on{opacity:1; visibility:visible;}
.lightbox img{max-height:84vh; object-fit:contain;}
.lightbox .caption{margin-top:14px; font-size:15px; color:#c8ced5;}
.lightbox button{position:absolute; width:52px; height:52px;}
.lightbox .close{right:20px; top:20px;}
.lightbox .close::before,
.lightbox .close::after{content:""; position:absolute; left:14px; top:25px; width:24px; height:2px; background:#fff;}
.lightbox .close::before{transform:rotate(45deg);}
.lightbox .close::after{transform:rotate(-45deg);}
.lightbox .prev{left:16px; top:50%; margin-top:-26px;}
.lightbox .next{right:16px; top:50%; margin-top:-26px;}
.lightbox .prev::before,
.lightbox .next::before{content:""; position:absolute; left:18px; top:18px; width:16px; height:16px; border-top:2px solid #fff; border-left:2px solid #fff;}
.lightbox .prev::before{transform:rotate(-45deg); left:22px;}
.lightbox .next::before{transform:rotate(135deg); left:14px;}

@media (max-width:860px) {
    .lightbox{padding:60px 12px;}
    .lightbox .prev,
    .lightbox .next{top:auto; bottom:12px; margin-top:0;}
}

/* ============================================================
   motion helpers (gsap)
   ============================================================ */
.main_visual .slide{position:absolute; inset:0; will-change:transform;}
.main_about .intro img,
.main_business .list img{will-change:transform, clip-path;}
.motion_line{display:block; overflow:hidden;}