:root{--red:#e60012; --red-dark:#a9000d; --red-soft:#fff3f4; --ink:#0d1118; --ink-2:#172033; --text:#202938; --gray:#667085; --line:#e8edf3; --soft:#f6f8fb; --white:#fff; --shadow:0 22px 58px rgba(15,23,42,.08); --shadow-sm:0 12px 32px rgba(15,23,42,.055); --radius:24px; --bt-red:var(--red); --bt-red-soft:var(--red-soft); --bt-red-grad:linear-gradient(135deg,#ef3340 0%,#e60012 54%,#b9000d 100%); --shadow-flat:0 4px 16px rgba(15,23,42,.025);}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{color:var(--text); background:#fff; line-height:1.65; letter-spacing:-.035em; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
ul,li{list-style:none;}
button,input{font:inherit; border:0; background:none; outline:none;}
.inner{width:min(1320px,calc(100% - 64px)); margin:0 auto;}

.label{display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;}
.label img{width:16px;  flex-shrink:0;}
.label span{font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#999;}

.visual{position:relative; overflow:hidden; min-height:100vh; padding:calc(var(--visual-header-space, 90px) + 28px) 0 54px; isolation:isolate; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;}
.visual:before{content:""; position:absolute; inset:auto auto 0 -8%; width:42%; height:160%; background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 100%); transform:rotate(-22deg); transform-origin:left bottom; pointer-events:none; z-index:0;}
.visual:after{content:""; position:absolute; right:-8%; top:-12%; width:54%; height:150%; background:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 100%); transform:rotate(24deg); transform-origin:right top; pointer-events:none; z-index:0;}
.visual .wrap1{position:relative; z-index:2; display:grid; grid-template-columns:2fr 1.2fr; gap:60px; align-items:center;}
.visual .box1{max-width:820px;}

.visual .label img{filter:brightness(0) invert(1); opacity:.9;}
.visual .label span{color:#fff; }
.visual h2{color:#fff; font-size:60px; line-height:1.14; font-weight:400; letter-spacing:-.03em; word-break:keep-all;}
.visual h2 b{font-weight:700; letter-spacing:-.03em;}
.visual p{margin:24px 0 0; color:rgba(255,255,255,.82); font-size:clamp(15px,1.25vw,18px); line-height:1.78; font-weight:300; letter-spacing:-.03em; word-break:keep-all;}
.visual .box2{display:flex; justify-content:flex-end;}
.visual article{position:relative; width:100%; padding:50px; background:rgba(255,255,255,.11); backdrop-filter:blur(60px); -webkit-backdrop-filter:blur(24px); border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 25px 55px rgba(0,0,0,.12); display:flex; flex-direction:column; overflow:hidden; isolation:isolate; transition:transform .25s ease, background .25s ease, box-shadow .25s ease; align-items:start;}
.visual article:after{content:"\f1d8"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:20px; top:20px; font-size:110px; line-height:1; color:rgba(255,255,255,.09); pointer-events:none; z-index:0;}
.visual article > *{position:relative; z-index:2;}
.visual article h3{display:block; color:#fff; font-size:34px; line-height:1.25; font-weight:400; letter-spacing:-.045em; word-break:keep-all; margin-bottom:7px;}
.visual article h3 b{font-weight:700;}
.visual article p{margin:0; color:rgba(255,255,255,.88); font-size:1em; line-height:1.72; font-weight:300; letter-spacing:-.025em; word-break:keep-all;}
.visual article a{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; padding:15px 50px; background:#fff; color:#c40d1a; font-size:1.1em; font-weight:600; border-radius:50px; box-shadow:0 12px 30px rgba(0,0,0,.14); transition:background .25s ease, color .25s ease, transform .25s ease;}
.visual .wrap2{position:relative; z-index:2; margin:50px auto 0; padding:0; background:none; border-radius:0; box-shadow:none;}
.visual .wrap2 h3{text-align:center; margin:0 0 15px; color:#fff; font-size:28px; line-height:1.25; font-weight:600; letter-spacing:-.05em; word-break:keep-all;}
.visual .grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
.visual .grid a{position:relative; display:flex; align-items:center; justify-content:center; min-height:84px; padding:16px 18px; background:#fff; border-radius:5px; overflow:hidden; box-shadow:0 10px 24px rgba(70,0,10,.12); text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.visual .grid a:after{content:""; position:absolute; right:20px; top:15px; width:7px; height:7px; border-top:2px solid rgba(0,0,0,.34); border-right:2px solid rgba(0,0,0,.34); transform:rotate(45deg); opacity:0; transition:opacity .25s ease, transform .25s ease;}
.visual .grid a:hover{transform:translateY(-4px); background:#fff; box-shadow:0 16px 34px rgba(0,0,0,.18);}
.visual .grid a:hover:after{opacity:1; transform:rotate(45deg) translate(3px,-3px);}
.visual .grid img{display:block; width:auto; height:auto; max-width:124px; max-height:34px; object-fit:contain; filter:none; opacity:1;}


.client .label{margin-bottom:0;}
.client .tit{text-align:center; margin-bottom:40px;}
.client .tit h2{font-size:3em;}
.client .logo-area{overflow:hidden; white-space:nowrap; mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);}

.client{--gap:120px; --gap-half:60px; margin:80px 0;}
.client ul{display:flex; align-items:center; gap:var(--gap); width:max-content;  margin:0; list-style:none; animation:clientLoop 22s linear infinite;}
.client li{flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.client li img{display:block; width:165px;  object-fit:contain; filter:grayscale(1) opacity(.45); transition:.3s ease;}
.client li:hover img { 
  filter: grayscale(0) opacity(1); 
  transform: scale(1.05);    
}

@keyframes clientLoop{
  0%{transform:translateX(0);}
  100%{transform:translateX(calc(-50% - var(--gap-half)));}
}
.why{position:relative; overflow:hidden; padding:110px 0 95px; background:url('../img/bg3.png') center center / cover no-repeat fixed;}
.why .bg{position:absolute; inset:0; background:rgba(7,15,26,.5); backdrop-filter:blur(1px);}
.why .inner{position:relative; z-index:1;}
.why .head{text-align:center; margin-bottom:44px;}
.why .label{justify-content:center; margin-bottom:12px;}
.why .label span{color:rgba(255,255,255,.72);}
.why h2{color:#fff; font-size:2.9em; line-height:1.2; letter-spacing:-.055em; margin-bottom:14px;}
.why .head p{color:rgba(255,255,255,.72); font-size:1.05em; line-height:1.65; font-weight:300;}
.why .list{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.why article{padding:50px; border-radius:12px;  box-shadow:0 20px 46px rgba(0,0,0,.16);  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}
.why .icon{width:54px; height:54px; display:grid; place-items:center; margin-bottom:10px; color:#fff; font-size:25px; border:1px solid rgba(255,255,255,.3); border-radius:50%;}
.why article > strong{display:block; color:#fff; font-size:1.5em; font-weight:600; letter-spacing:-.04em; margin-bottom:5px;}
.why article > p{color:rgba(255,255,255,.72); font-size:.98em; line-height:1.65; font-weight:300; word-break:keep-all;}

.why .stat > div{width:100%; display:flex; flex-direction:column; justify-content:center; gap:13px;}
.why .stat p{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.13);}
.why .stat p:last-child{padding-bottom:0; border-bottom:0;}
.why .stat strong{flex-shrink:0; color:#fff; font-size:1.82em; line-height:1; font-weight:600; letter-spacing:-1px;}
.why .stat span{color:rgba(255,255,255,.78); line-height:1.35; font-weight:400; text-align:right; word-break:keep-all;}
.why .link{margin-top:42px; text-align:center;}
.why .link a{position:relative; display:inline-flex; align-items:center; gap:9px; color:#fff;  padding-bottom:9px;}
.why .link a:after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(255,255,255,.85);}
.why .link i{font-size:13px; transition:.25s ease;}
.why .link a:hover i{transform:translateX(4px);}

.about{position:relative; padding:120px 0; overflow:hidden; background:#fff;}
.about .wrap1{display:grid; grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center;}
.about .label,.service .head .label{color:var(--red);}
.about h2,.service h2{font-size:clamp(34px,4vw,54px); line-height:1.14; font-weight:700; color:var(--ink); letter-spacing:-1px;}
.about .copy p,.service .head > p{color:var(--gray); font-size:17px; line-height:1.85; word-break:keep-all;}
.about .copy p{margin-top:22px;}
.about .copy > a,.service .copy a{position:relative; display:inline-flex; width:max-content; align-items:center; gap:9px; color:#1b2535; font-size:.98em; font-weight:500; padding-bottom:9px;}
.about .copy > a{margin-top:32px;}
.service .copy a{margin-top:28px;}
.about .copy > a:after,.service .copy a:after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(13,17,24,.82);}
.about .copy > a i,.service .copy a i{font-size:13px;  transition:.25s ease;}
.about .copy > a:hover i,.service .copy a:hover i{transform:translateX(4px);}
.about .pic{position:relative; min-height:530px;}
.about .pic img{width:100%; height:100%; object-fit:cover;}
.about .main{height:440px; border-radius:.8vw; overflow:hidden;}

.about .sub{position:absolute; right:-5%; bottom:0; width:55%; height:250px; border-radius:.8vw; overflow:hidden;}
.about .sub:after{content:""; width:calc(100% + 20px); height:calc(100% + 20px); position:absolute; left:-10px; top:-10px; background-color:#fff;}
.about .sub img{position:relative; z-index:99; width:calc(100% - 20px); height:calc(100% - 20px); margin:10px; border-radius:.8vw;}

.service{position:relative; padding:120px 0; overflow:hidden; background:#f7f9fc;}
.service .head{display:grid; grid-template-columns:1.5fr 1fr; gap:70px; align-items:end; margin-bottom:30px;}
.service .list{display:grid; gap:28px;}
.service article{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:400px; min-height:400px; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.04); transition:.3s;}
.service article:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm);}
.service figure{position:relative; height:100%; min-height:0; overflow:hidden; background:#dde3ec;}
.service figure img{width:100%; height:100%; object-fit:cover; transition:.55s ease;}
.service article:hover figure img{transform:scale(1.035);}
.service figure:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,17,24,0) 58%, rgba(13,17,24,.22) 100%);}
.service .copy{position:relative; min-width:0; height:100%; padding:44px 52px; display:flex; flex-direction:column; justify-content:center;}
.service .copy > span{display:inline-flex; width:max-content; align-items:center; gap:14px; margin-bottom:5px; color:var(--red); font-size:1.2em; font-weight:700; letter-spacing:.5px; font-style:italic;}
/* .service .copy > span:after{content:""; width:52px; height:1px; background:rgba(230,0,18,.42);} */
.service h3{color:var(--ink); font-size:2.2em; line-height:1.24; font-weight:600; letter-spacing:-.03em; word-break:keep-all;}
.service .copy p{margin-top:16px; color:var(--gray); font-size:1.1em; line-height:1.78; word-break:keep-all;}
.shop{position:relative; background:#090d14; color:#fff; padding:94px 0; overflow:hidden;}
.shop:before{content:""; position:absolute; right:-12%; top:-30%; width:560px; height:560px; background:radial-gradient(circle, rgba(230,0,18,.45) 0%, rgba(230,0,18,.12) 36%, rgba(230,0,18,0) 70%); filter:blur(18px); pointer-events:none;}
.shop:after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);}
.shop .wrap1{position:relative; z-index:2; display:grid; grid-template-columns:1fr 200px; gap:60px; align-items:center;}
.shop .label{margin-bottom:0;}
.shop .label img{filter:brightness(0) invert(1); opacity:.58;}
.shop .label span{color:rgba(255,255,255,.58);}
.shop h2{margin-top:10px; color:#fff; font-size:clamp(31px,3.2vw,46px); font-weight:700; line-height:1.18; letter-spacing:-1px;}
.shop p{margin-top:16px; color:rgba(255,255,255,.66); line-height:1.8; word-break:keep-all; font-size:1.1em;}
.shop .badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}
.shop .badges span{padding:9px 20px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.76); font-size:.9em; font-weight:600;}
.shop .wrap1 > a{height:58px; border-radius:999px; background:#fff; color:#111827; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:600; transition:.25s; font-size:1.1em;}
.shop .wrap1 > a:hover{background:var(--red); color:#fff; transform:translateY(-3px);}

.channel{position:relative; padding:120px 0; overflow:hidden; background:linear-gradient(135deg, #fff8f8 0%, #fff1f2 42%, #f8f4f4 100%);}
.channel:before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(214,8,24,.035) 1px, transparent 1px), linear-gradient(0deg, rgba(214,8,24,.025) 1px, transparent 1px); background-size:72px 72px; opacity:.55; pointer-events:none;}
.channel:after{content:""; position:absolute; right:-10%; top:-22%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(214,8,24,.11) 0%, rgba(214,8,24,.045) 42%, rgba(214,8,24,0) 72%); pointer-events:none;}
.channel .inner{position:relative; z-index:2;}
.channel .bg{position:absolute; left:-14%; bottom:-38%; right:auto; top:auto; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle, rgba(214,8,24,.08) 0%, rgba(214,8,24,.035) 38%, rgba(214,8,24,0) 68%); opacity:1; pointer-events:none;}
.channel .wrap1{position:relative; display:grid; grid-template-columns:360px 1fr; gap:80px; align-items:center; width:100%; max-width:1320px; margin:0 auto; z-index:2;}
.channel .head{position:relative;}
.channel h3{color:var(--ink); font-size:3.2em; line-height:1.15; letter-spacing:-.06em; margin-bottom:22px;}
.channel .head p{color:#5b6678; font-size:1.12em; line-height:1.75; font-weight:300; word-break:keep-all;}
.channel .list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.channel .list > a{min-height:126px; padding:28px 30px; border-radius:16px; background:rgba(255,255,255,1);  box-shadow:0 14px 32px rgba(23,34,55,.055); display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; transition:all .3s cubic-bezier(0.16,1,0.3,1); backdrop-filter:blur(8px);}
.channel .list > a:hover{transform:none; background:rgba(255,255,255,.88); border-color:rgba(255,255,255,1); box-shadow:0 14px 32px rgba(23,34,55,.055);}
.channel .left{display:flex; align-items:center; gap:20px; min-width:0;}
.channel .icon{width:62px; height:62px; border:1px solid #e6e6e6; border-radius:50%; display:grid; place-items:center; flex-shrink:0; font-size:1.45em; font-weight:900; color:#555;}
.channel .icon i{font-size:1.25em;}
.channel .tistory{color:#f54;}
.channel .naver{color:#10b45b;}
.channel .youtube{color:#ee1d24;}
.channel .text{min-width:0;}
.channel .text strong{display:block; color:var(--text); font-size:1.28em; font-weight:600; letter-spacing:-.04em;}
.channel .text span{display:block; color:#6b7b90; font-size:.98em; line-height:1.45; font-weight:300; word-break:keep-all;}
.channel .arrow{color:#333; display:grid; place-items:center; font-size:15px; transition:all .25s cubic-bezier(0.16,1,0.3,1);}
.channel .list > a:hover .arrow{background:transparent; color:#d81920; transform:none;}

footer{background:#fff; padding:80px 0; border-top:none;}
footer .logo img{height:36px; width:auto;}
.f-bottom{display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid rgba(0,0,0,.5); padding-top:20px; margin-top:20px;}
.f-info{color:#888; line-height:1.8; list-style:none; padding:0; font-weight:400;}
.f-info a{color:#888;}
.f-links a{color:#999; text-decoration:none; font-weight:600; margin-left:25px; transition:.3s;}
.floating-inquiry-btn{position:fixed; right:40px; bottom:40px; z-index:999; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; background:linear-gradient(135deg,#ef3340 0%,#e60012 54%,#b9000d 100%); color:#fff; border-radius:999px; font-size:1.1em; font-weight:700; letter-spacing:-.02em; box-shadow:0 12px 32px rgba(230,0,18,.3); transition:all .3s cubic-bezier(0.16,1,0.3,1);}
.floating-inquiry-btn i{font-size:17px;}
.floating-inquiry-btn:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(230,0,18,.45); color:#fff;}

@media(max-width:1200px){
  .visual .wrap1{grid-template-columns:minmax(0,1fr) 350px; gap:38px;}
  .visual .grid{grid-template-columns:repeat(4,1fr);}
  .channel .wrap1{grid-template-columns:1fr; gap:44px;}
  .channel .head{text-align:center;}
  .channel .label{justify-content:center;}
  .channel h3{font-size:2.8em;}
  .channel .head p{max-width:680px; margin:0 auto;}
}
@media(max-width:1000px){
  .why .list{grid-template-columns:1fr; max-width:560px;}
  .why article{min-height:auto;}
}
@media(max-width:960px){
  .visual{min-height:auto; padding:96px 0 72px; display:block;}
  .visual .wrap1{grid-template-columns:1fr; gap:32px; align-items:start;}
  .visual .box2{justify-content:flex-start;}
  .visual article{max-width:520px; min-height:340px;}
  .about .wrap1{grid-template-columns:1fr; gap:44px;}
  .service .head{grid-template-columns:1fr; gap:26px; align-items:start;}
  .service article{height:auto; min-height:auto; grid-template-columns:1fr;}
  .service article:nth-child(even) figure{order:2;}
  .service article:nth-child(even) .copy{order:1;}
  .service figure{height:300px;}
  .shop .wrap1{grid-template-columns:1fr; gap:34px;}
  .shop .wrap1 > a{width:max-content; min-width:200px;}
}
@media(max-width:768px){
  .inner{width:min(100% - 36px,1320px);}
  .visual h2{font-size:36px;}
  .visual p br{display:none;}
  .visual .wrap2{margin-top:42px;}
  .visual .wrap2 h3{font-size:23px;}
  .visual .grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .visual .grid a{min-height:76px; padding:14px;}
  .visual .grid img{max-width:112px; max-height:30px;}
  .why .stat{padding:28px 24px;}
  .why .stat strong{font-size:1.55em;}
  .why .stat span{font-size:.88em;}
  .about,.service,.channel{padding:84px 0;}
  .about .pic{min-height:auto;}
  .about .main{height:320px;}
  .about .sub{position:relative; right:auto; bottom:auto; width:82%; height:190px; margin:-70px 0 0 auto;}
  .service .copy{padding:34px 26px;}
  .service h3{font-size:1.65em;}
  .service .copy p{font-size:1em;}
  .channel .list{grid-template-columns:1fr; gap:14px;}
  .channel h3{font-size:2.2em;}
  .channel .head p{font-size:1em;}
  .channel .list > a{min-height:auto; padding:22px; border-radius:14px;}
  .channel .icon{width:54px; height:54px; font-size:1.25em;}
  .channel .text strong{font-size:1.15em;}
  .channel .text span{font-size:.9em;}
  .floating-inquiry-btn{right:20px; bottom:20px; padding:12px 20px; font-size:14px;}
  .floating-inquiry-btn i{font-size:15px;}
}
@media(max-width:480px){
  .visual{padding:84px 0 64px;}
  .visual h2{font-size:31px;}
  .visual article{min-height:300px; padding:34px 24px 24px;}
  .visual article strong{font-size:26px;}
  .visual article a{min-height:56px; padding:0 20px; font-size:15px; border-radius:10px;}
  .visual .grid{grid-template-columns:1fr;}
  .why{padding:80px 0 70px;}
  .why h2{font-size:2.1em;}
  .why article{padding:32px 24px;}
  .why .stat p{display:block; text-align:center;}
  .why .stat strong{display:block; margin-bottom:7px;}
  .why .stat span{display:block; text-align:center;}
  .channel .list > a{grid-template-columns:1fr 34px; padding:20px 18px;}
  .channel .left{gap:14px;}
  .channel .icon{width:48px; height:48px;}
  .channel .arrow{width:34px; height:34px; font-size:13px;}
}