/* Figma PC_01 / MO_01 — 2026-09-16 */
#body.main-page{padding:0;}
#s-hero{height:850px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(5,22,46,.6),rgba(5,22,46,.25)),url('../img/assets/main-slide-01.jpg') center/cover no-repeat;color:#fff;}
#s-hero h2{font-size:60px;line-height:1.3;font-weight:700;letter-spacing:-1.2px;}
#s-hero .hero-btns{display:flex;gap:16px;margin-top:40px;}
#s-hero .btn-cta{width:250px;height:66px;justify-content:center;font-size:20px;}
#s-service .svc-grid{display:grid;grid-template-columns:repeat(5,160px);justify-content:space-between;gap:24px;}
.svc{text-align:center;}
.svc .ico{width:160px;height:160px;border-radius:50%;background:#f0f7ff;display:grid;place-items:center;margin:0 auto 20px;}
.svc h4{font-size:24px;font-weight:700;white-space:nowrap;line-height:1.2;}
.svc p{margin-top:9px;font-size:18px;line-height:1.4;color:#666;}
.svc .icon-sourcing{width:160px;height:160px;}
#s-banner{display:grid;grid-template-columns:1fr 1fr;}
.bn{min-height:580px;background-size:cover;background-position:center;display:flex;align-items:center;}
.bn.agency{background-image:linear-gradient(#0008,#0008),url('../img/figma/main-imgRectangle5.webp');}
.bn.oem{background-image:linear-gradient(#0008,#0008),url('../img/figma/main-imgRectangle6.webp');}
.bn-body{width:100%;max-width:720px;padding:50px 30px;margin:auto;color:#fff;}
.bn h3{font-size:40px;line-height:1.3;font-weight:700;letter-spacing:-.8px;}
.bn p{font-size:18px;line-height:1.4;color:#cecece;margin-top:15px;min-height:76px;}
.bn .btn-cta{margin-top:100px;}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px;}
.rsn{text-align:center;}
.rsn .photo{width:100%;height:200px;object-fit:cover;border-radius:12px;display:block;}
.rsn h4{font-size:22px;line-height:1.3;font-weight:700;margin-top:20px;letter-spacing:-.44px;}
.rsn p{font-size:18px;line-height:1.4;color:#666;margin-top:16px;}
#s-process{background:linear-gradient(#eff6ffdf,#eff6ffdf),url('../img/figma/main-imgRectangle4.webp') center/cover;}
.process-group + .process-group{margin-top:50px;}
.process-group h4{font-size:20px;font-weight:700;border-left:3px solid #4f9afb;padding-left:10px;line-height:24px;margin-bottom:20px;}
.process-steps{display:flex;gap:50px;list-style:none;}
.process-steps li{flex:1;min-width:0;position:relative;background:#fff;border-radius:8px;padding:24px 8px;text-align:center;min-height:120px;}
.process-steps li:not(:last-child):after{content:'';position:absolute;width:24px;height:24px;top:48px;right:-37px;background:url('../img/figma/main-imgIconArrow.webp') center/contain no-repeat;opacity:.6;}
.process-steps span{display:inline-block;padding:7px 18px;border:1px solid #4f9afb;border-radius:20px;font-size:14px;color:#4f9afb;white-space:nowrap;}
.process-steps strong{display:block;font-size:22px;font-weight:700;margin-top:12px;}
.fac-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:50px 27px;}
.fac .photo{display:block;width:100%;height:260px;object-fit:cover;border-radius:12px;}
.fac h4{text-align:center;font-size:22px;line-height:26px;font-weight:700;margin-top:20px;}
.fac-badge{height:260px;background:linear-gradient(#002f6dd9,#002f6dd9),url('../img/figma/main-imgRectangle18.webp') center/cover;border-radius:12px;display:grid;place-items:center;color:#fff;text-align:center;}
.badge-inner img{width:54px;height:40px;object-fit:contain;margin-bottom:16px;}
.badge-inner strong{display:block;font-size:22px;line-height:1.3;}
@media(max-width:1279px){
    #s-service .svc-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;}
    .svc .ico{width:140px;height:140px;}.svc .icon-sourcing{width:140px;height:140px;}.svc h4{font-size:20px;}
    .bn h3{font-size:30px;}.process-steps{gap:24px;}.process-steps li:not(:last-child):after{right:-22px;width:20px;}.process-steps span{padding:7px 10px;}.process-steps strong{font-size:18px;}
}
@media(max-width:767px){
    #s-hero{height:600px;background-position:center;align-items:flex-start;padding-top:210px;}
    #s-hero h2{text-align:center;font-size:36px;line-height:1.4;letter-spacing:-.72px;}
    #s-hero .hero-btns{justify-content:center;gap:10px;margin-top:36px;}
    #s-hero .btn-cta{width:auto;min-width:125px;height:50px;font-size:16px;padding:0 24px;}
    #s-service .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;}
    .svc .ico{width:160px;height:160px;}.svc .icon-sourcing{width:160px;height:160px;}
    .svc h4{font-size:22px;}.svc p{font-size:18px;}.svc:last-child{grid-column:1/-1;}
    #s-banner{grid-template-columns:1fr;}.bn{min-height:420px;}.bn-body{padding:50px 30px;}
    .bn h3{font-size:30px;line-height:1.3;}.bn p{font-size:16px;line-height:1.5;min-height:0;}.bn .btn-cta{margin-top:50px;}
    #s-why{display:none;} /* MO_01에서는 WHY 카드 없이 진행과정으로 이어짐 */
    .process-group + .process-group{margin-top:40px;}
    .process-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;}
    .process-steps li{min-height:120px;padding:24px 8px;}.process-steps span{padding:7px 18px;}.process-steps strong{font-size:20px;}
    .process-steps li:nth-child(even):after{display:none;}.process-steps li:not(:last-child):after{right:-28px;width:24px;}
    .process-steps li:last-child:nth-child(odd){grid-column:1/-1;width:calc((100% - 32px)/2);justify-self:center;}
    .fac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;}
    .fac .photo,.fac-badge{height:200px;}.fac h4{font-size:16px;line-height:22px;margin-top:12px;}.badge-inner strong{font-size:16px;}
}
@media(max-width:389px){
    #s-hero h2{font-size:30px;}.svc .ico,.svc .icon-sourcing{width:130px;height:130px;}.svc h4{font-size:19px;}.svc p{font-size:16px;}
    .bn h3{font-size:26px;}.fac .photo,.fac-badge{height:165px;}
}