@charset "utf-8";

:root {
    --width:1600px;
    --padding:40px;
    --header_h:90px;
    --navy:#0a2540;
    --navy-deep:#061a2e;
    --blue:#1b5fa8;
    --blue-light:#4a9fe0;
    --gray:#5f5f5f;
    --gray-light:#8b949e;
    --line:#e3e7ec;
    --font_en:"Barlow","Noto Sans KR",sans-serif;
    --font_tag:"Montserrat","Noto Sans KR",sans-serif;
    --tag_num:48px;
    --tag_txt:17px;
    --tag_ls:0.2em;
    --tag_line:38px;
    --tag_gap:18px;
    --bg:#f5f7f9;
}

#wrap{overflow:hidden;}

/* smooth scroll (lenis) */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-stopped{overflow:clip;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}
.cont{width:100%; max-width:var(--width); margin:0 auto; padding:0 var(--padding);}

/* motion : .motion_section gets .section_on (labels), each [data-delay] item gets .on when it enters */
[data-delay]{position:relative; opacity:0; transition:all 1s ease; transition-delay:var(--delay,0s);}
[data-direction="left"]{left:-40px;}
[data-direction="right"]{right:-40px;}
[data-direction="top"]{top:-40px;}
[data-direction="bottom"]{bottom:-40px;}
[data-delay].on{opacity:1;}
[data-direction="left"].on{left:0;}
[data-direction="right"].on{right:0;}
[data-direction="top"].on{top:0;}
[data-direction="bottom"].on{bottom:0;}

/* image reveal : color block wipes in, then slides out */
.reveal{position:relative; opacity:1; clip-path:inset(0 100% 0 0);}
.reveal::before{content:""; position:absolute; left:0; top:0; z-index:5; width:100%; height:100%; background:#fff;}
.reveal.on{animation:reveal_box 1.4s cubic-bezier(.77,0,.18,1) var(--delay,0s) both;}
.reveal.on::before{animation:reveal_cover 1.4s cubic-bezier(.77,0,.18,1) var(--delay,0s) both;}
.reveal.on img{animation:reveal_img 1.4s cubic-bezier(.77,0,.18,1) var(--delay,0s) both;}

/* ============================================================
   header
   ============================================================ */
.header{position:fixed; left:0; top:0; z-index:100; width:100%; height:var(--header_h); transition:background .4s ease, height .4s ease, box-shadow .4s ease;}
.header::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(255,255,255,.18); transition:opacity .4s ease;}
.header .inner{display:flex; align-items:center; width:100%; max-width:var(--width); height:100%; margin:0 auto; padding:0 var(--padding);}
.header .logo{flex:0 0 auto; line-height:0;}
.header .logo img{width:auto; height:61px; filter:brightness(0) invert(1); transition:filter .35s ease, opacity .35s ease;}
.header .gnb{margin-left:auto;}
.header .gnb ul{display:flex; align-items:center; gap:44px;}
.header .gnb a{position:relative; display:block; padding:8px 0; color:#fff; font-size:15px; font-weight:500; letter-spacing:0.02em; transition:color .3s ease;}
.header .gnb a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--blue-light); transition:width .35s ease;}
.header .gnb a:hover::after,
.header .gnb a.on::after{width:100%;}
.header .utils{display:flex; align-items:center; gap:20px; margin-left:56px;}
.header .utils .tel{display:flex; align-items:center; height:40px; padding:0 22px; border:1px solid rgba(255,255,255,.45); border-radius:2em; color:#fff; font-size:14px; font-weight:500; letter-spacing:0.02em; transition:border-color .3s ease, color .3s ease, background .3s ease;}
.header .utils .tel::before{content:""; flex:0 0 16px; width:16px; height:16px; margin-right:8px; background:currentColor; -webkit-mask:no-repeat center; mask:no-repeat center; -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5.2 3.5h3.1l1.6 4.2-2.1 1.3a11 11 0 0 0 5.2 5.2l1.3-2.1 4.2 1.6v3.1a2 2 0 0 1-2.1 2A15.7 15.7 0 0 1 3.2 5.6a2 2 0 0 1 2-2.1z'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5.2 3.5h3.1l1.6 4.2-2.1 1.3a11 11 0 0 0 5.2 5.2l1.3-2.1 4.2 1.6v3.1a2 2 0 0 1-2.1 2A15.7 15.7 0 0 1 3.2 5.6a2 2 0 0 1 2-2.1z'/></svg>");}
.header .utils .tel:hover{background:#fff; border-color:#fff; color:var(--navy);}
.header .utils .menu{display:none; position:relative; width:32px; height:32px;}
.header .utils .menu span{overflow:hidden; position:absolute; width:1px; height:1px; clip:rect(0,0,0,0);}
.header .utils .menu::before,
.header .utils .menu::after{content:""; position:absolute; left:4px; width:24px; height:2px; background:#fff; transition:transform .35s ease, top .35s ease, background .3s ease;}
.header .utils .menu::before{top:10px;}
.header .utils .menu::after{top:20px;}

.header.on{height:74px; background:#fff; box-shadow:0 6px 24px rgba(10,37,64,.08);}
.header.on::after{opacity:0;}
.header.on .logo img{filter:none;}
.header.on .gnb a{color:var(--navy);}
.header.on .utils .tel{border-color:var(--line); color:var(--navy);}
.header.on .utils .tel:hover{background:var(--navy); border-color:var(--navy); color:#fff;}
.header.on .utils .menu::before,
.header.on .utils .menu::after{background:var(--navy);}

.header.open .utils .menu::before{top:15px; transform:rotate(45deg);}
.header.open .utils .menu::after{top:15px; transform:rotate(-45deg);}

@media (max-width:1400px){
    .header .gnb ul{gap:30px;}
    .header .gnb a{font-size:14px;}
    .header .utils{margin-left:32px;}
}
@media (max-width:1180px){
    :root{--padding:24px; --header_h:70px;}
    .header .gnb{visibility:hidden; position:fixed; left:0; right:0; top:var(--header_h); bottom:0; margin:0; overflow-y:auto; opacity:0; background:var(--navy); transition:opacity .35s ease, visibility .35s ease;}
    .header .gnb ul{flex-direction:column; align-items:stretch; gap:0; padding:12px var(--padding) 28px;}
    .header .gnb a{padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; font-size:16px;}
    .header .gnb a::after{display:none;}
    .header .utils{margin-left:auto;}
    .header .utils .tel{display:none;}
    .header .utils .menu{display:block;}
    .header.on .gnb a{color:#fff;}
    .header.open{background:var(--navy); box-shadow:none;}
    .header.open::after{opacity:0;}
    .header.open .gnb{visibility:visible; opacity:1;}
    .header.open .logo img{filter:brightness(0) invert(1);}
    .header.open .utils .tel{display:flex; position:fixed; left:var(--padding); right:var(--padding); bottom:44px; justify-content:center; height:54px; border-color:rgba(255,255,255,.45); color:#fff; font-size:16px;}
    .header.open.on .utils .menu::before,
    .header.open.on .utils .menu::after{background:#fff;}
}

/* ============================================================
   main
   ============================================================ */
main section{scroll-margin-top:var(--header_h);}

/* section label */
.label{display:inline-flex; align-items:center; color:var(--blue);}
.label b{color:transparent; font-family:var(--font_tag); font-size:var(--tag_num); font-weight:800; line-height:1; letter-spacing:-0.03em; background:linear-gradient(135deg,var(--navy) 10%,var(--blue-light) 100%); -webkit-background-clip:text; background-clip:text; opacity:0; transform:translateY(20px); transition:opacity .6s ease .1s, transform .6s ease .1s;}
.label::before{content:""; order:1; width:var(--tag_line); height:2px; margin:0 14px 0 var(--tag_gap); background:currentColor; clip-path:inset(0 100% 0 0); transition:clip-path .6s ease .5s;}
.label span{order:2; font-family:var(--font_tag); font-size:var(--tag_txt); font-weight:700; letter-spacing:var(--tag_ls); white-space:nowrap; clip-path:inset(0 100% 0 0); transition:clip-path .8s ease .95s;}
.section_on .label b{opacity:1; transform:none;}
.section_on .label::before,
.section_on .label span{clip-path:inset(0);}
.main_tech .label, .main_contact .label{color:var(--blue-light);}
.main_tech .label b, .main_contact .label b{background:linear-gradient(135deg,#fff 10%,var(--blue-light) 100%); -webkit-background-clip:text; background-clip:text;}

/* 01 visual */
.main_visual{position:relative; display:flex; align-items:center; height:100vh; min-height:720px; background:var(--navy-deep);}
.main_visual .bg{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease;}
.main_visual .bg.out{z-index:1; opacity:1;}
.main_visual .bg.on{z-index:2; opacity:1;}
.main_visual::after{content:""; position:absolute; left:0; top:0; z-index:3; width:100%; height:100%; background:linear-gradient(180deg,rgba(6,26,46,.76) 0%,rgba(6,26,46,.59) 45%,rgba(6,26,46,.89) 100%);}
.main_visual .cont{position:relative; z-index:4; text-align:center;}
.main_visual .tag{display:block; color:var(--blue-light); font-size:14px; font-weight:500; letter-spacing:0.32em;}
.main_visual .title{display:flex; flex-direction:column; margin-top:28px; color:#fff; font-size:96px; font-weight:900; line-height:1.02; letter-spacing:-0.03em; text-shadow:0 6px 34px rgba(6,26,46,.55);}
.main_visual .title strong{font-weight:900;}
.main_visual .desc{margin-top:32px; color:rgba(255,255,255,.92); font-size:20px; font-weight:300; line-height:1.7; text-shadow:0 2px 14px rgba(6,26,46,.75);}
.main_visual .btn{display:inline-flex; align-items:center; height:58px; margin-top:44px; padding:0 40px; border:1px solid rgba(255,255,255,.6); border-radius:2em; color:#fff; font-size:15px; font-weight:500; letter-spacing:0.02em; transition:background .35s ease, border-color .35s ease, color .35s ease;}
.main_visual .btn::after{content:""; width:7px; height:7px; margin-left:14px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);}
.main_visual .btn:hover{background:#fff; border-color:#fff; color:var(--navy);}
.main_visual .tag,
.main_visual .title,
.main_visual .desc,
.main_visual .btn{opacity:0;}
.main_visual.loaded .tag{animation:visual_up 1s ease .2s both;}
.main_visual.loaded .title{animation:visual_up 1s ease .45s both;}
.main_visual.loaded .desc{animation:visual_up 1s ease .7s both;}
.main_visual.loaded .btn{animation:visual_up 1s ease .95s both;}
.main_visual .scroll{position:absolute; right:var(--padding); top:50%; z-index:4; display:flex; flex-direction:column; align-items:center; gap:16px; padding-bottom:120px; color:rgba(255,255,255,.65); font-size:11px; font-weight:500; letter-spacing:0.4em; writing-mode:vertical-rl; transform:translateY(-50%);}
.main_visual .scroll::after{content:""; position:absolute; left:50%; bottom:66px; width:1px; height:40px; background:rgba(255,255,255,.35); animation:scroll_line 1.6s ease-in-out infinite;}
.main_visual .control{position:absolute; right:var(--padding); bottom:64px; z-index:5; display:flex; align-items:center; gap:10px;}
.main_visual .count{display:flex; align-items:center; margin-right:18px; color:rgba(255,255,255,.45); font-family:var(--font_en); font-size:16px; font-weight:600; letter-spacing:0.04em;}
.main_visual .count .current{color:#fff; font-weight:700;}
.main_visual .count .total::before{content:""; display:inline-block; width:48px; height:1px; margin:0 14px; background:rgba(255,255,255,.35); vertical-align:middle;}
.main_visual .control button{position:relative; width:42px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; transition:background .3s ease, border-color .3s ease;}
.main_visual .control button span{overflow:hidden; position:absolute; width:1px; height:1px; clip:rect(0,0,0,0);}
.main_visual .control button::before{content:""; position:absolute; left:50%; top:50%;}
.main_visual .control .prev::before{width:8px; height:8px; margin:-4px 0 0 -2px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(45deg);}
.main_visual .control .next::before{width:8px; height:8px; margin:-4px 0 0 -6px; border-top:1.5px solid #fff; border-right:1.5px solid #fff; transform:rotate(45deg);}
.main_visual .control .pause::before{width:8px; height:12px; margin:-6px 0 0 -4px; border-left:2px solid #fff; border-right:2px solid #fff;}
.main_visual .control .pause.paused::before{width:0; height:0; margin:-6px 0 0 -3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid #fff; border-right:0;}
.main_visual .control button:hover{border-color:#fff; background:rgba(255,255,255,.12);}

/* 02 intro */
.main_intro{padding:clamp(100px,10vw,170px) 0;}
.main_intro .cont{display:flex; align-items:center; gap:90px;}
.main_intro .text{flex:1 1 50%;}
.main_intro .visual{flex:1 1 50%;}
.main_intro .visual img{width:100%; height:600px; object-fit:cover;}
.main_intro .title{margin-top:20px; color:var(--navy); font-size:46px; font-weight:700; line-height:1.28; letter-spacing:-0.035em;}
.main_intro .lead{margin-top:28px; color:var(--navy); font-size:20px; font-weight:500; line-height:1.6;}
.main_intro .body{margin-top:18px; color:var(--gray); font-size:16px; font-weight:300; line-height:1.85;}
.main_intro .facts{display:flex; gap:14px; margin-top:52px;}
.main_intro .facts div{overflow:hidden; position:relative; flex:1 1 0; padding-top:20px;}
.main_intro .facts div::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--navy); clip-path:inset(0 100% 0 0); transition:clip-path .8s ease var(--delay,0s);}
.main_intro .facts div.on::before{clip-path:inset(0);}
.main_intro .facts dt{color:var(--navy); font-size:24px; font-weight:700; letter-spacing:-0.02em;}
.main_intro .facts dd{margin-top:6px; color:var(--gray-light); font-size:13px; font-weight:400;}

/* 03 business */
.main_business{padding-top:clamp(100px,10vw,170px); background:var(--bg);}
.main_business .head{width:100%; max-width:var(--width); margin:0 auto; padding:0 var(--padding) 70px; text-align:center;}
.main_business .title{margin-top:18px; color:var(--navy); font-size:46px; font-weight:700; letter-spacing:-0.035em;}
.main_business .lead{margin-top:16px; color:var(--gray); font-size:17px; font-weight:300;}
.main_business .panels{display:flex; width:100%; height:660px;}
.main_business .panels li{overflow:hidden; position:relative; flex:1 1 0; transition:flex .8s ease;}
.main_business .panels img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center top;}
.main_business .panels li::after{content:""; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background:rgba(4,20,36,.72); transition:background 1s ease;}
.main_business .panels .box{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; padding:40px 22px; text-align:center;}
.main_business .panels .box::before{content:""; width:64px; height:64px; margin-bottom:24px; background:no-repeat center;}
.main_business .panels li:nth-child(1) .box::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48' fill='none'><path d='M4 43V25l10-6v6l10-6v6l10-6v18z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M28 19V5h9v14' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M10 31h4M20 31h4M30 31h4M10 37h4M20 37h4M30 37h4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M2 43h44' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_business .panels li:nth-child(2) .box::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48' fill='none'><path d='M13 13h22v21a9 9 0 0 1-9 9h-4a9 9 0 0 1-9-9z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M10 13h28' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M20 13V5h8v8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M13 24h22M13 32h22' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M24 5V2' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_business .panels li:nth-child(3) .box::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48' fill='none'><path d='M9 15h11a6 6 0 0 1 6 6v6a6 6 0 0 0 6 6h7' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><rect x='2' y='10' width='7' height='10' rx='1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><rect x='39' y='28' width='7' height='10' rx='1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M20 11v8M26 27h8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><circle cx='26' cy='24' r='3' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_business .panels li:nth-child(4) .box::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48' fill='none'><rect x='8' y='5' width='32' height='38' rx='3' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M14 13h9M14 19h9M14 25h6' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><circle cx='32' cy='16' r='3.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M14 33h20' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M32 30v-4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_business .panels li:nth-child(5) .box::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48' fill='none'><path d='M24 3v42M7.5 13.5l33 19M40.5 13.5l-33 19' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='m17.5 7.5 6.5 4.5 6.5-4.5M17.5 40.5l6.5-4.5 6.5 4.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='m6.5 21 .8 7.6 6.6-3.4M41.5 21l-.8 7.6-6.6-3.4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='m6.5 27-.8-7.6 6.6 3.4M41.5 27l.8-7.6-6.6 3.4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_business .panels li:nth-child(6) .box::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48' fill='none'><circle cx='24' cy='24' r='19' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='m15.5 24.5 6 6 11.5-13' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_business .num{color:var(--blue-light); font-family:var(--font_en); font-size:14px; font-weight:600; letter-spacing:0.16em;}
.main_business .name{display:flex; align-items:center; justify-content:center; height:66px; margin-top:8px; color:#fff; font-family:var(--font_en); font-size:26px; font-weight:600; line-height:1.25; letter-spacing:0;}
.main_business .desc{overflow:hidden; height:76px; margin-top:14px; color:rgba(255,255,255,.8); font-size:15px; font-weight:300; line-height:1.65; opacity:0; transition:opacity .8s ease;}
.main_business .panels .box::after{content:""; width:44px; height:44px; margin-top:26px; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 48 48' fill='none'><path d='M19 12l10 12-10 12' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center; transition:background-color .8s ease, border-color .8s ease;}
.main_business .panels li:hover{flex:2 1 0;}
.main_business .panels li:hover::after{background:rgba(4,20,36,.46);}
.main_business .panels li:hover .desc{opacity:1;}
.main_business .panels li:hover .box::after{border-color:var(--blue); background-color:var(--blue);}

/* 04 engineering */
.main_engineering{padding:clamp(100px,10vw,170px) 0;}
.main_engineering .cont{display:flex; align-items:center; gap:90px;}
.main_engineering .visual{flex:1 1 50%;}
.main_engineering .visual img{width:100%; height:620px; object-fit:cover;}
.main_engineering .text{flex:1 1 50%;}
.main_engineering .title{margin-top:20px; color:var(--navy); font-size:46px; font-weight:700; line-height:1.28; letter-spacing:-0.035em;}
.main_engineering .list{margin-top:40px; border-top:1px solid var(--line);}
.main_engineering .list li{position:relative; padding:20px 0 20px 34px; border-bottom:1px solid var(--line); color:var(--gray); font-size:17px; font-weight:400;}
.main_engineering .list li::before{content:""; position:absolute; left:4px; top:31px; width:8px; height:8px; border-radius:50%; background:var(--blue);}

/* 05 technology */
.main_tech{position:relative; display:flex; align-items:center; min-height:700px; padding:clamp(100px,10vw,160px) 0; background:var(--navy-deep);}
.main_tech .bg{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.4;}
.main_tech::after{content:""; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background:linear-gradient(90deg,rgba(6,26,46,.92) 0%,rgba(6,26,46,.6) 60%,rgba(6,26,46,.3) 100%);}
.main_tech .cont{position:relative; z-index:2;}
.main_tech .mark{position:absolute; right:var(--padding); top:-90px; color:rgba(255,255,255,.07); font-size:220px; font-weight:900; line-height:1; letter-spacing:-0.04em;}
.main_tech .text{max-width:760px;}
.main_tech .title{margin-top:22px; color:#fff; font-size:54px; font-weight:700; line-height:1.24; letter-spacing:-0.035em;}
.main_tech .lead{margin-top:34px; color:rgba(255,255,255,.9); font-size:20px; font-weight:500; line-height:1.65;}
.main_tech .body{margin-top:18px; color:rgba(255,255,255,.6); font-size:16px; font-weight:300; line-height:1.85;}

/* 06 quality */
.main_quality{padding:clamp(100px,10vw,170px) 0; background:var(--bg);}
.main_quality .head{text-align:center;}
.main_quality .title{margin-top:18px; color:var(--navy); font-size:46px; font-weight:700; line-height:1.28; letter-spacing:-0.035em;}

.main_quality .process{display:flex; gap:16px; margin-top:64px;}
.main_quality .process li{overflow:hidden; position:relative; flex:1 1 0; display:flex; flex-direction:column; padding:36px 24px 32px; border:1px solid #e8edf3; border-radius:16px; background:#fff; transition:background .4s ease, transform .4s ease, box-shadow .4s ease, border-color .4s ease, opacity 1s ease var(--delay,0s), bottom 1s ease var(--delay,0s);}
.main_quality .process li::after{content:""; position:absolute; right:-34px; bottom:-34px; width:96px; height:96px; border-radius:50%; background:#f4f8fc; transition:background .4s ease;}
.main_quality .process li::before{content:""; position:relative; z-index:1; width:74px; height:74px; border-radius:50%; background:#eaf2fa no-repeat center; transition:background-color .4s ease;}
.main_quality .process li:nth-child(1)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'><path d='M11 5h17l9 9v29H11z' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M28 5v9h9' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M17 23h13M17 29h9' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='31.5' cy='34.5' r='7.5' fill='%231b5fa8'/><path d='m28 34.5 2.4 2.4 4.6-4.8' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_quality .process li:nth-child(2)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'><rect x='6' y='6' width='26' height='34' rx='3' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M12 15h14M12 21h14M12 27h8' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='31' cy='31' r='9.5' fill='%23bcd8f0' fill-opacity='.9' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='m38 38 5 5' stroke='%230a2540' stroke-width='2.8' stroke-linecap='round'/></svg>");}
.main_quality .process li:nth-child(3)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'><rect x='8' y='9' width='32' height='35' rx='3.5' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><rect x='16' y='4' width='16' height='9' rx='3' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='m15 25 3.2 3.2 5.8-6' stroke='%231b5fa8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/><path d='m15 36 3.2 3.2 5.8-6' stroke='%231b5fa8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M28 25.5h6M28 36.5h6' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/></svg>");}
.main_quality .process li:nth-child(4)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'><path d='M5 35a19 19 0 1 1 38 0' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M5 35h38' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M10.5 22.5l2.8 1.6M24 15.5v3.2M37.5 22.5l-2.8 1.6' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='m24 35 9.5-10.5' stroke='%231b5fa8' stroke-width='3.2' stroke-linecap='round'/><circle cx='24' cy='35' r='3.6' fill='%230a2540'/></svg>");}
.main_quality .process li:nth-child(5)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'><path d='M20 4.5l3 3.4 4.3-1.4 1.1 4.4 4.4 1.1-1.4 4.3 3.4 3-3.4 3 1.4 4.3-4.4 1.1-1.1 4.4L23 30.6l-3 3.4-3-3.4-4.3 1.4-1.1-4.4-4.4-1.1 1.4-4.3-3.4-3 3.4-3-1.4-4.3 4.4-1.1 1.1-4.4L17 7.9z' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='20' cy='19.5' r='5.4' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='35.5' cy='35.5' r='9' fill='%231b5fa8'/><path d='m32.5 31 7 4.5-7 4.5z' fill='%23ffffff'/></svg>");}
.main_quality .process li:nth-child(6)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'><path d='M4 12.5A3.5 3.5 0 0 1 7.5 9h9.6l4.2 5.2H40.5A3.5 3.5 0 0 1 44 17.7v21.8A3.5 3.5 0 0 1 40.5 43h-33A3.5 3.5 0 0 1 4 39.5z' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><rect x='14' y='19' width='20' height='16' rx='2.5' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M19 25h10M19 30h6' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/></svg>");}
.main_quality .process .num{position:absolute; right:20px; top:18px; z-index:1; color:#dce5ee; font-family:var(--font_en); font-size:38px; font-weight:800; line-height:1; letter-spacing:-0.02em; transition:color .4s ease;}
.main_quality .process .name{position:relative; z-index:1; margin-top:24px; color:var(--navy); font-family:var(--font_en); font-size:17px; font-weight:600; line-height:1.35; letter-spacing:0.02em; transition:color .4s ease;}
.main_quality .process li:hover{transform:translateY(-8px); border-color:var(--navy); background:var(--navy); box-shadow:0 18px 38px rgba(10,37,64,.2);}
.main_quality .process li:hover::after{background:rgba(255,255,255,.06);}
.main_quality .process li:hover::before{background-color:#fff;}
.main_quality .process li:hover .num{color:rgba(255,255,255,.22);}
.main_quality .process li:hover .name{color:#fff;}

.main_quality .cards{display:flex; gap:20px; margin-top:20px;}
.main_quality .cards li{overflow:hidden; position:relative; flex:1 1 0; padding:48px 38px 44px; border:1px solid #e8edf3; border-radius:18px; background:#fff; transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease, opacity 1s ease var(--delay,0s), bottom 1s ease var(--delay,0s);}
.main_quality .cards li::after{content:""; position:absolute; right:-52px; top:-52px; width:158px; height:158px; border-radius:50%; background:#f5f9fc;}
.main_quality .cards li::before{content:""; position:relative; z-index:1; display:block; width:92px; height:92px; margin-bottom:26px; border-radius:50%; background:#eaf2fa no-repeat center;}
.main_quality .cards li:nth-child(1)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 48 48' fill='none'><path d='M20 3.5l3.2 3.6 4.6-1.5 1.2 4.7 4.7 1.2-1.5 4.6 3.6 3.2-3.6 3.2 1.5 4.6-4.7 1.2-1.2 4.7-4.6-1.5L20 35.1l-3.2-3.6-4.6 1.5-1.2-4.7-4.7-1.2 1.5-4.6L4.2 19.3l3.6-3.2-1.5-4.6 4.7-1.2 1.2-4.7 4.6 1.5z' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='20' cy='19.3' r='5.8' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='34.5' cy='34' r='8.6' fill='%23ffffff' fill-opacity='.95' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='m40.8 40.3 3.4 3.4' stroke='%230a2540' stroke-width='2.8' stroke-linecap='round'/></svg>");}
.main_quality .cards li:nth-child(2)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 48 48' fill='none'><path d='M24 4 8 10.2v12.2c0 10 6.6 18.7 16 21.6 9.4-2.9 16-11.6 16-21.6V10.2z' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='M24 9.2 12.8 13.5v8.9c0 7.2 4.6 13.5 11.2 15.9 6.6-2.4 11.2-8.7 11.2-15.9v-8.9z' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='m18 23.5 4.4 4.4 8-8.4' stroke='%231b5fa8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_quality .cards li:nth-child(3)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 48 48' fill='none'><path d='m17.5 28-4 16 10.5-5.4L34.5 44l-4-16z' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='24' cy='18.5' r='13.5' fill='%23bcd8f0' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><circle cx='24' cy='18.5' r='8.4' fill='%23ffffff' stroke='%230a2540' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/><path d='m20.6 18.6 2.6 2.6 5-5.2' stroke='%231b5fa8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
.main_quality .cards .name{position:relative; z-index:1; color:var(--navy); font-family:var(--font_en); font-size:24px; font-weight:700; letter-spacing:-0.005em;}
.main_quality .cards .desc{position:relative; z-index:1; margin-top:14px; color:var(--gray); font-size:16px; font-weight:300; line-height:1.75;}
.main_quality .cards li:hover{transform:translateY(-8px); border-color:#c9d9e8; box-shadow:0 20px 44px rgba(10,37,64,.13);}

/* 07 projects */
.main_projects{position:relative; overflow:hidden; padding:clamp(100px,10vw,170px) 0;}
.main_projects .marquee{position:absolute; left:0; top:60px; z-index:0; display:flex; width:max-content; animation:marquee 34s linear infinite;}
.main_projects .marquee span{padding-right:60px; color:transparent; font-size:120px; font-weight:900; line-height:1; letter-spacing:-0.02em; white-space:nowrap; -webkit-text-stroke:1px var(--line);}
.main_projects .cont{position:relative; z-index:1;}
.main_projects .head{padding-top:56px; text-align:center;}
.main_projects .title{margin-top:18px; color:var(--navy); font-size:46px; font-weight:700; line-height:1.28; letter-spacing:-0.035em;}
.main_projects .cards{display:flex; gap:20px; margin-top:64px;}
.main_projects .cards li{flex:1 1 0; padding:56px 34px; border:1px solid var(--line); background:#fff; transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease, opacity 1s ease var(--delay,0s), bottom 1s ease var(--delay,0s);}
.main_projects .cards .name{color:var(--blue); font-size:17px; font-weight:700; letter-spacing:0.06em;}
.main_projects .cards .desc{margin-top:16px; color:var(--navy); font-size:18px; font-weight:500; line-height:1.6; letter-spacing:-0.02em;}
.main_projects .cards li:hover{border-color:var(--navy); transform:translateY(-8px); box-shadow:0 18px 40px rgba(10,37,64,.1);}
.main_projects .clients{position:relative; z-index:1; overflow:hidden; display:flex; width:100%; margin-top:80px;}
.main_projects .clients ul{display:flex; flex:0 0 auto; align-items:center; gap:64px; padding-right:64px; animation:logo_flow 42s linear infinite;}
.main_projects .clients li{flex:0 0 auto; line-height:0;}
.main_projects .clients img{opacity:.55; filter:grayscale(1); transition:filter .35s ease, opacity .35s ease;}
.main_projects .clients li:hover img{opacity:1; filter:none;}
.main_projects .clients:hover ul{animation-play-state:paused;}

/* 08 contact */
.main_contact{padding:clamp(100px,10vw,170px) 0; background:var(--navy);}
.main_contact .cont{display:flex; align-items:center; gap:90px;}
.main_contact .text{flex:1 1 50%;}
.main_contact .visual{flex:1 1 50%;}
.main_contact .visual img{width:100%; height:560px; object-fit:cover;}
.main_contact .title{margin-top:22px; color:#fff; font-size:46px; font-weight:700; line-height:1.28; letter-spacing:-0.035em;}
.main_contact .lead{margin-top:24px; color:rgba(255,255,255,.75); font-size:20px; font-weight:300;}
.main_contact .info{margin-top:44px; border-top:1px solid rgba(255,255,255,.16);}
.main_contact .info div{display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.16);}
.main_contact .info dt{display:flex; align-items:center; gap:14px; flex:0 0 170px; padding:14px 0; color:var(--blue-light); font-size:14px; font-weight:700; letter-spacing:0.02em;}
.main_contact .info dt::before{content:""; flex:0 0 42px; width:42px; height:42px; border:1px solid rgba(74,159,224,.28); border-radius:50%; background:rgba(74,159,224,.1) no-repeat center;}
.main_contact .info div:nth-child(1) dt::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a9fe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.6'/></svg>");}
.main_contact .info div:nth-child(2) dt::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a9fe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20.5V11l6-3.5V11l6-3.5V11l6-3.5v13z'/><path d='M2 20.5h20'/><path d='M7 15.5h2M11.5 15.5h2M16 15.5h2'/></svg>");}
.main_contact .info div:nth-child(3) dt::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a9fe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.2 3.5h3.1l1.6 4.2-2.1 1.3a11 11 0 0 0 5.2 5.2l1.3-2.1 4.2 1.6v3.1a2 2 0 0 1-2.1 2A15.7 15.7 0 0 1 3.2 5.6a2 2 0 0 1 2-2.1z'/></svg>");}
.main_contact .info div:nth-child(4) dt::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a9fe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9V3.5h10V9'/><rect x='3.5' y='9' width='17' height='8' rx='1.8'/><path d='M7 14h10v6.5H7z'/><path d='M17 12h.01'/></svg>");}
.main_contact .info div:nth-child(5) dt::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a9fe0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='m3.6 7 8.4 6 8.4-6'/></svg>");}
.main_contact .info dd{flex:1 1 0; padding:14px 0; color:#fff; font-size:16px; font-weight:300;}
.main_contact .info dd a:hover{text-decoration:underline;}

/* icons — 06 projects cards */
.main_projects .cards li::before{content:""; display:block; width:42px; height:42px; margin-bottom:26px; background:var(--blue); -webkit-mask:no-repeat center; mask:no-repeat center; transition:background .35s ease;}
.main_projects .cards li:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2h6'/><path d='M10 2v6.6L4.9 18.1A2 2 0 0 0 6.7 21h10.6a2 2 0 0 0 1.8-2.9L14 8.6V2'/><path d='M7.6 15.2h8.8'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2h6'/><path d='M10 2v6.6L4.9 18.1A2 2 0 0 0 6.7 21h10.6a2 2 0 0 0 1.8-2.9L14 8.6V2'/><path d='M7.6 15.2h8.8'/></svg>");}
.main_projects .cards li:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2.5c0 5.5 12 6 12 9.5s-12 4-12 9.5'/><path d='M18 2.5c0 5.5-12 6-12 9.5s12 4 12 9.5'/><path d='M8.4 6.4h7.2M8.4 17.6h7.2'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2.5c0 5.5 12 6 12 9.5s-12 4-12 9.5'/><path d='M18 2.5c0 5.5-12 6-12 9.5s12 4 12 9.5'/><path d='M8.4 6.4h7.2M8.4 17.6h7.2'/></svg>");}
.main_projects .cards li:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.6 6.7 9.4a6.9 6.9 0 1 0 10.6 0z'/><path d='M9.4 15.2a3.3 3.3 0 0 0 2.6 2.6'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.6 6.7 9.4a6.9 6.9 0 1 0 10.6 0z'/><path d='M9.4 15.2a3.3 3.3 0 0 0 2.6 2.6'/></svg>");}
.main_projects .cards li:nth-child(4)::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M3.5 7.1l17 9.8M20.5 7.1l-17 9.8'/><path d='m9.2 4.2 2.8 2 2.8-2M9.2 19.8l2.8-2 2.8 2'/><path d='m3.8 10.4.4 3.3 3-1.4M20.2 10.4l-.4 3.3-3-1.4'/><path d='m4.2 13.7 3-1.4M19.8 13.7l-3-1.4'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M3.5 7.1l17 9.8M20.5 7.1l-17 9.8'/><path d='m9.2 4.2 2.8 2 2.8-2M9.2 19.8l2.8-2 2.8 2'/><path d='m3.8 10.4.4 3.3 3-1.4M20.2 10.4l-.4 3.3-3-1.4'/><path d='m4.2 13.7 3-1.4M19.8 13.7l-3-1.4'/></svg>");}
.main_projects .cards li:hover::before{background:var(--navy);}

@keyframes logo_flow{
    from{transform:translateX(0);}
    to{transform:translateX(-100%);}
}
@keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}
@keyframes visual_up{
    from{opacity:0; transform:translateY(40px);}
    to{opacity:1; transform:none;}
}
@keyframes scroll_line{
    from{bottom:106px; height:0;}
    to{bottom:66px; height:40px;}
}
@keyframes reveal_box{
    0%{clip-path:inset(0 100% 0 0);}
    50%,100%{clip-path:inset(0);}
}
@keyframes reveal_cover{
    0%,50%{clip-path:inset(0);}
    100%{clip-path:inset(0 0 0 100%);}
}
@keyframes reveal_img{
    0%,50%{transform:translateX(-30px); filter:grayscale(1);}
    100%{transform:none; filter:none;}
}

@media (prefers-reduced-motion:reduce){
    .main_projects .clients ul{animation:none;}
    [data-delay],
    .label b,
    .label::before,
    .label span,
    .main_intro .facts div::before{opacity:1; top:0; bottom:0; left:0; right:0; clip-path:none; transform:none; transition:none;}
    .reveal,
    .reveal img{clip-path:none; animation:none;}
    .reveal::before{display:none;}
}
@media (max-width:1400px){
    .main_visual .title{font-size:74px;}
    .main_intro .title,
    .main_business .title,
    .main_engineering .title,
    .main_quality .title,
    .main_projects .title,
    .main_contact .title{font-size:40px;}
    .main_tech .title{font-size:44px;}
    .main_tech .mark{font-size:170px;}
    .main_intro .cont,
    .main_engineering .cont,
    .main_contact .cont{gap:56px;}
    .main_intro .visual img{height:520px;}
    .main_engineering .visual img{height:540px;}
    .main_contact .visual img{height:480px;}
    .main_business .panels{height:540px;}
    .main_business .panels .box{padding:38px 24px;}
    .main_business .name{font-size:20px;}
}
@media (max-width:1180px){
    :root{--tag_num:42px; --tag_txt:16px;}
    .main_visual{min-height:620px;}
    .main_visual .title{font-size:58px;}
    .main_visual .desc{font-size:18px;}
    .main_visual .scroll{display:none;}
    .main_visual .control{bottom:40px;}
    .main_intro .cont,
    .main_engineering .cont,
    .main_contact .cont{flex-direction:column; align-items:stretch; gap:44px;}
    .main_engineering .cont{flex-direction:column-reverse;}
    .main_intro .visual img,
    .main_engineering .visual img,
    .main_contact .visual img{height:420px;}
    .main_business .panels{flex-wrap:wrap; height:auto;}
    .main_business .panels li{flex:1 1 33.333%; height:400px;}
    .main_business .panels li:hover{flex:1 1 33.333%;}
    .main_business .panels .box::before{width:54px; height:54px; margin-bottom:18px;}
    .main_business .name{height:auto; margin-top:12px;}
    .main_business .desc{height:auto; margin-top:12px; opacity:1;}
    .main_tech{min-height:0;}
    .main_tech .mark{top:-60px; font-size:120px;}
    .main_tech .title{font-size:38px;}
    .main_quality .process{flex-wrap:wrap;}
    .main_quality .process li{flex:1 1 30%;}
    .main_quality .cards,
    .main_projects .cards{flex-wrap:wrap;}
    .main_quality .cards li{flex:1 1 45%;}
    .main_projects .cards li{flex:1 1 45%; padding:44px 28px;}
    .main_projects .marquee span{font-size:80px;}
}
@media (max-width:760px){
    :root{--tag_num:34px; --tag_txt:13px; --tag_ls:0.12em; --tag_line:22px; --tag_gap:12px;}
    .main_visual{min-height:560px;}
    .main_visual .tag{font-size:11px; letter-spacing:0.22em;}
    .main_visual .title{margin-top:20px; font-size:38px;}
    .main_visual .desc{margin-top:22px; font-size:16px;}
    .main_visual .btn{height:52px; margin-top:32px; padding:0 30px; font-size:14px;}
    .main_visual .control{left:0; right:0; bottom:28px; justify-content:center; gap:8px;}
    .main_visual .count{margin-right:10px; font-size:14px;}
    .main_visual .count .total::before{width:28px; margin:0 10px;}
    .main_visual .control button{width:36px; height:36px;}
    .main_intro .title,
    .main_business .title,
    .main_engineering .title,
    .main_quality .title,
    .main_projects .title,
    .main_contact .title{font-size:28px;}
    .main_intro .lead,
    .main_tech .lead,
    .main_contact .lead{font-size:17px;}
    .main_intro .facts{flex-direction:column; gap:0;}
    .main_intro .facts div{flex:0 0 auto; padding:16px 0;}
    .main_intro .facts div::before{top:auto; bottom:0; height:1px; background:var(--line);}
    .main_intro .facts div:first-child{border-top:2px solid var(--navy);}
    .main_intro .visual img,
    .main_engineering .visual img,
    .main_contact .visual img{height:280px;}
    .main_business .head{padding-bottom:44px;}
    .main_business .panels li{flex:1 1 100%; height:340px;}
    .main_business .panels li:hover{flex:1 1 100%;}
    .main_business .name{font-size:23px;}
    .main_tech .title{font-size:28px;}
    .main_tech .mark{top:-36px; font-size:76px;}
    .main_quality .process{gap:10px; margin-top:44px;}
    .main_quality .process li{flex:1 1 45%; padding:26px 18px 24px; border-radius:14px;}
    .main_quality .process li::before{width:60px; height:60px;}
    .main_quality .process .num{right:14px; top:14px; font-size:26px;}
    .main_quality .process .name{margin-top:18px; font-size:14px;}
    .main_quality .cards li{padding:38px 26px 34px;}
    .main_quality .cards li::before{width:78px; height:78px; margin-bottom:20px;}
    .main_quality .cards .name{font-size:21px;}
    .main_quality .cards li,
    .main_projects .cards li{flex:1 1 100%;}
    .main_projects .cards{margin-top:44px;}
    .main_projects .clients{margin-top:60px;}
    .main_projects .clients ul{gap:44px; padding-right:44px;}
    .main_projects .marquee{top:30px;}
    .main_projects .marquee span{font-size:46px;}
    .main_contact .info div{flex-direction:column; align-items:flex-start;}
    .main_contact .info dt{flex:0 0 auto; padding:14px 0 2px;}
    .main_contact .info dt::before{flex:0 0 36px; width:36px; height:36px;}
    .main_contact .info dd{padding:0 0 14px 50px;}
}

/* ============================================================
   footer
   ============================================================ */
.footer{position:relative; padding:70px 0 60px; background:var(--navy-deep);}
.footer .logo{line-height:0;}
.footer .logo img{width:auto; height:61px; opacity:.85;}
.footer .addr{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:28px; color:rgba(255,255,255,.55); font-size:14px; font-weight:300;}
.footer .copyright{display:block; margin-top:22px; color:rgba(255,255,255,.35); font-size:13px; font-weight:300; letter-spacing:0.01em;}
.footer .top{position:absolute; right:var(--padding); bottom:60px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:rgba(255,255,255,.7); transition:background .35s ease, border-color .35s ease, color .35s ease;}
.footer .top::before{content:""; width:20px; height:20px; background:currentColor; -webkit-mask:no-repeat center; mask:no-repeat center; -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5'/><path d='m5 12 7-7 7 7'/></svg>"); mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5'/><path d='m5 12 7-7 7 7'/></svg>");}
.footer .top span{overflow:hidden; position:absolute; width:1px; height:1px; clip:rect(0,0,0,0);}
.footer .top:hover{border-color:#fff; background:#fff; color:var(--navy);}

@media (max-width:1180px){
    .footer{padding:56px 0 50px;}
    .footer .top{bottom:50px; width:54px; height:54px;}
}
@media (max-width:760px){
    .footer .addr{gap:6px 0; margin-top:22px; font-size:13px;}
    .footer .addr span{flex:1 1 100%;}
    .footer .top{right:var(--padding); bottom:auto; top:-27px; width:54px; height:54px; background:var(--navy); border-color:rgba(255,255,255,.25);}
}