*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans KR",sans-serif;color:#1d1d1d;background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.03em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
:root{--g:#337f59;--g2:#2e7d55;--grey:#e1e1e1}

/* HEADER */
.hd{position:fixed;inset:0 0 auto;z-index:100;height:118px;transition:background .35s,height .35s}
.hd-in{max-width:1440px;height:100%;margin:0 auto;padding:0 93px;display:flex;align-items:center;justify-content:space-between}
.hd .logo img{height:46px;width:auto;transition:height .35s}
.hd.on{height:94px;background:rgba(51,127,89,.92)}
.gnb>ul{display:flex;gap:0}
.gnb>ul>li{position:relative}
.gnb>ul>li>a{display:block;padding:10px 15px;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em}
.hd.on .gnb>ul>li>a{font-weight:400}
.gnb .sub{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);min-width:120px;background:#fff;padding:10px 0;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.12);opacity:0;visibility:hidden;transition:.25s}
.gnb li:hover .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnb .sub a{display:block;padding:10px 20px;font-size:13px;color:#212121;white-space:nowrap}
.gnb .sub a:hover{color:var(--g)}
.mbtn{display:none;background:none;border:0;width:30px;height:24px;flex-direction:column;justify-content:space-between;cursor:pointer}
.mbtn span{display:block;height:2px;background:#fff}

/* HERO */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;background:#222}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-dim{position:absolute;inset:0;background:rgba(0,0,0,.18)}
.hero-t{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:60px;font-weight:700;letter-spacing:-.05em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.typing::after{content:"";display:inline-block;width:3px;height:.9em;background:#fff;margin-left:6px;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.scroll-ic{position:absolute;left:50%;bottom:27px;transform:translateX(-50%);opacity:.85}
.scroll-ic .wheel{animation:wheel 1.6s infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* INTRO */
.intro{position:relative;max-width:1440px;margin:0 auto;height:1043px;padding:0 93px}
.intro-txt{position:absolute;left:93px;top:318px;width:720px}
.intro-txt h2{font-size:62px;font-weight:900;letter-spacing:-.06em;line-height:1.15;color:#161616}
.intro-txt p{margin-top:62px;font-size:20.5px;line-height:35px;color:#222;letter-spacing:-.05em}
.feat{display:flex;gap:0;margin-top:99px}
.feat li{display:flex;flex-direction:column;align-items:center;margin-right:52px}
.feat svg{width:74px;height:74px;fill:none;stroke:var(--g2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.feat b{margin-top:14px;font-size:19px;font-weight:700;color:var(--g2);letter-spacing:-.05em}
.intro-img img{position:absolute;width:455px;height:244px;object-fit:cover;border-radius:7px}
.intro-img .r1{left:911px;top:151px}
.intro-img .r2{left:952px;top:422px}
.intro-img .r3{left:912px;top:694px}

/* SOLUTION */
.sol{position:relative;height:2114px;overflow:hidden}
.sol-bg{position:absolute;inset:0;background:var(--grey);clip-path:polygon(100% 40%,100% 100%,0 100%,0 77%)}
.sol-bg::before{content:"";position:absolute;right:-120px;top:560px;width:1150px;height:1150px;background:url(img/M07.jpg) center/cover no-repeat;opacity:.38;-webkit-mask-image:radial-gradient(circle at 55% 50%,#000 38%,transparent 70%);mask-image:radial-gradient(circle at 55% 50%,#000 38%,transparent 70%)}
.sol-grid{position:relative;max-width:1440px;margin:0 auto;height:1380px}
.col{position:absolute;width:360px}
.c1{left:120px;top:86px}
.c2{left:480px;top:219px}
.card{position:relative;display:block;width:360px;height:545px;margin-bottom:65px;overflow:hidden;border-radius:7px}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover img{transform:scale(1.05)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.55))}
.cap{position:absolute;left:57px;bottom:50px;z-index:1;color:#fff}
.cap em{display:block;font-style:normal;font-size:18px;letter-spacing:-.04em;opacity:.95}
.cap strong{display:block;margin-top:6px;font-size:38px;font-weight:700;letter-spacing:-.06em;line-height:1.2}
.sol-txt{position:absolute;left:858px;top:230px;width:470px}
.sol-txt h2{font-size:62px;font-weight:900;letter-spacing:-.06em;color:#161616}
.sol-txt p{margin-top:60px;font-size:21px;line-height:38.6px;color:#222;letter-spacing:-.05em}
.more{display:inline-flex;align-items:center;gap:20px;margin-top:48px}
.more i{position:relative;width:60px;height:60px;border-radius:50%;background:var(--g2);transition:transform .3s}
.more i::after{content:"";position:absolute;left:22px;top:22px;width:12px;height:12px;border:solid #fff;border-width:3px 3px 0 0;transform:rotate(45deg)}
.more:hover i{transform:translateX(6px)}
.more span{font-size:16px;letter-spacing:-.06em;color:#222}
.haccp{position:relative;max-width:1440px;margin:0 auto;height:734px}
.haccp-txt{position:absolute;left:248px;top:397px}
.haccp-txt h3{font-size:34px;font-weight:400;letter-spacing:-.05em;color:#111}
.haccp-txt h2{margin-top:0;font-size:50px;font-weight:900;letter-spacing:-.07em;color:#111}
.haccp-txt p{margin-top:26px;font-size:17.5px;line-height:29px;color:#222;letter-spacing:-.06em}
.haccp-img{position:absolute;left:657px;top:267px;width:783px;height:330px}
.haccp-img img{width:100%;height:100%;object-fit:cover;border-radius:10px 0 0 10px;box-shadow:0 18px 30px rgba(0,0,0,.18)}
.badge{position:absolute;left:140px;top:60px;width:156px;height:156px;border-radius:50%;background:#fff;border:9px solid #27b5a6;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--g2);font-weight:900;font-size:22px;line-height:1.05;letter-spacing:-.02em;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.badge b{font-size:27px}
.badge small{margin-top:6px;font-size:13px;font-weight:700;color:#fff;background:#27b5a6;padding:2px 10px;border-radius:10px}

/* PRODUCTS */
.prd{position:relative;background:var(--grey);height:2043px;overflow:hidden}
.prd-grid{position:relative;max-width:1440px;margin:0 auto;height:1000px}
.p figcaption{text-align:right;font-size:22px;letter-spacing:-.05em;color:#222;margin-top:16px;padding-right:12px}
.p img{object-fit:cover;border-radius:7px}
.p1{position:absolute;left:120px;top:293px;width:360px}
.p1 img{width:360px;height:701px}
.pc2{position:absolute;left:487px;top:102px;width:346px}
.p2 img{width:346px;height:346px}
.p3{margin-top:39px}
.p3 img{width:344px;height:344px}
.prd-txt{position:absolute;left:862px;top:290px;width:480px}
.prd-txt h2{font-size:62px;font-weight:900;letter-spacing:-.06em;color:#161616}
.prd-txt .more{margin-top:22px}
.prd-txt p{margin-top:44px;font-size:21px;line-height:38px;color:#222;letter-spacing:-.05em}

/* Q&A + FOOTER */
.qna{position:absolute;left:0;right:0;bottom:0;height:1407px}
.qna-bg{position:absolute;inset:0;background:linear-gradient(rgba(37,113,74,.86),rgba(37,113,74,.86)),url(img/hands.jpg) center/cover no-repeat;clip-path:polygon(100% 0,100% 100%,0 100%,0 56.5%)}
.qna-in{position:absolute;right:calc(50% - 600px);top:479px;text-align:right;color:#fff}
.qna-in em{display:block;font-style:normal;font-size:27px;letter-spacing:-.02em;font-weight:300}
.qna-in h2{margin-top:24px;font-size:62px;font-weight:900;line-height:1.38;letter-spacing:-.06em}
.qbtn{display:flex;align-items:center;justify-content:center;gap:18px;width:493px;height:57px;margin-top:72px;margin-left:auto;background:#000;border-radius:6px;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.04em;transition:background .3s}
.qbtn:hover{background:#163d29}
.qbtn i{position:relative;width:34px;height:34px;border-radius:50%;background:#fff}
.qbtn i::after{content:"";position:absolute;left:10px;top:11px;width:9px;height:9px;border:solid #000;border-width:3px 3px 0 0;transform:rotate(45deg)}
.ft{position:absolute;left:calc(50% - 436px);top:1197px;display:flex;gap:96px;color:#fff;align-items:flex-start}
.ft-logo{width:215px;height:auto;margin-top:4px}
.ft-info p{font-size:15px;line-height:27px;letter-spacing:-.04em}
.ft-info span{opacity:.75;margin-right:18px}
.ft-info b{font-weight:700}
.ft-info a{margin-left:26px;font-weight:700}
.ft-info .copy{margin-top:16px;opacity:.6;font-size:13px}

/* SUBPAGE */
.sub-vis{display:flex;height:678px;padding-top:94px;background:#111}
.sv{position:relative;flex:1;overflow:hidden}
.sv img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sv:hover img{transform:scale(1.05)}
.sv::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.sv span{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:18px}
.sv strong{font-size:48px;font-weight:700;letter-spacing:-.05em;margin-bottom:40px}
.plist{max-width:952px;margin:0 auto;padding:65px 0 60px}
.plist h2{font-size:38px;font-weight:700;color:#242c26}
.plist .note{margin-top:20px;font-size:14px;color:#656565}
.plist ul{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.plist li img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.plist h3{margin-top:18px;font-size:18px;font-weight:700;color:#242c26}
.ft-sub{position:static;background:var(--g);padding:70px calc(50% - 436px) 80px;margin-top:60px;display:flex}

/* FLOATING */
.flo{position:fixed;right:18px;bottom:82px;z-index:90;width:100px;height:100px;border-radius:50%;background:var(--g2);color:#fff;font-size:30px;font-weight:700;line-height:1.15;text-align:center;display:flex;align-items:center;justify-content:center;letter-spacing:-.04em;box-shadow:3px 4px 4px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25);transition:transform .3s}
.flo:hover{transform:scale(1.06)}

/* REVEAL */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

/* RESPONSIVE */
@media (max-width:1439px){
  .intro,.sol-grid,.haccp,.prd-grid{zoom:calc(100vw / 1440px)}
}
@media (max-width:1100px){
  .intro,.sol-grid,.haccp,.prd-grid{zoom:1}
  .hd-in{padding:0 24px}
  .gnb{display:none}
  .gnb.open{display:block;position:fixed;top:70px;left:0;right:0;background:rgba(51,127,89,.97);padding:12px 0}
  .gnb.open>ul{flex-direction:column}
  .gnb.open .sub{display:none}
  .mbtn{display:flex}
  .hd,.hd.on{height:70px}
  .hd .logo img{height:34px}
  .hero-t{font-size:34px;padding:0 20px}
  .intro,.sol,.haccp,.prd,.sol-grid,.prd-grid,.qna{height:auto}
  .intro{padding:70px 24px}
  .intro-txt,.intro-img img,.col,.sol-txt,.haccp-txt,.haccp-img,.p1,.pc2,.prd-txt,.qna-in,.ft{position:static;width:auto;transform:none}
  .intro-txt h2,.sol-txt h2,.prd-txt h2{font-size:36px}
  .intro-txt p,.sol-txt p,.prd-txt p{margin-top:24px;font-size:16px;line-height:28px}
  .feat{margin-top:40px;flex-wrap:wrap;gap:20px}
  .feat li{margin:0;width:calc(50% - 10px)}
  .feat svg{width:56px;height:56px}
  .intro-img{display:grid;gap:14px;margin-top:40px}
  .intro-img img{width:100%;height:220px}
  .sol{padding:40px 24px 80px}
  .sol-bg{clip-path:none}
  .sol-grid{display:flex;flex-direction:column;gap:0}
  .sol-txt{order:-1;margin-bottom:36px}
  .col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .card{width:auto;height:260px;margin:0}
  .cap{left:18px;bottom:18px}.cap em{font-size:13px}.cap strong{font-size:22px}
  .haccp{margin-top:60px;display:flex;flex-direction:column-reverse;gap:30px}
  .haccp-txt h3{font-size:22px}.haccp-txt h2{font-size:32px}.haccp-txt p{margin-top:18px;font-size:15px}
  .haccp-img{height:240px;position:relative}
  .haccp-img img{border-radius:10px}
  .badge{left:auto;right:14px;top:-30px;width:100px;height:100px;font-size:14px;border-width:6px}.badge b{font-size:17px}.badge small{font-size:10px}
  .prd{padding:70px 24px 0}
  .prd-grid{display:flex;flex-direction:column}
  .prd-txt{order:-1;margin-bottom:36px}
  .p1 img,.p2 img,.p3 img{width:100%;height:auto;aspect-ratio:1}
  .pc2{margin-top:24px}
  .qna{position:relative;margin:60px -24px 0;padding:140px 24px 50px}
  .qna-bg{clip-path:polygon(100% 0,100% 100%,0 100%,0 18%)}
  .qna-in{position:relative}
  .qna-in em{font-size:18px}.qna-in h2{font-size:34px}
  .qbtn{width:100%;margin-top:30px;font-size:18px}
  .ft{position:relative;flex-direction:column;gap:24px;margin-top:80px}
  .ft-logo{width:160px}
  .ft-info a{display:block;margin:4px 0 0}
  .sub-vis{height:auto;padding-top:70px;flex-direction:column}
  .sv{height:200px}
  .sv strong{font-size:30px;margin-bottom:10px}
  .plist{padding:50px 24px 20px}
  .plist h2{font-size:28px}
  .plist ul{grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
  .plist h3{font-size:15px;margin-top:10px}
  .ft-sub{padding:50px 24px;margin-top:40px}
  .flo{width:72px;height:72px;font-size:20px;right:12px;bottom:20px}
}