*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#eaf1f7;font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;color:#0b3157}
.site{width:min(100%,1440px);margin:0 auto;background:#fff;box-shadow:0 0 60px rgba(2,26,48,.12)}
.slice{position:relative;width:100%;line-height:0}
.slice>img{display:block;width:100%;height:auto}
.hotspots{position:absolute;inset:0;pointer-events:none}
.hs{position:absolute;display:block;pointer-events:auto;border-radius:5px}
.hs:focus-visible{outline:3px solid #00a8ff;outline-offset:2px}
.hs:hover{background:rgba(0,151,255,.08);box-shadow:inset 0 0 0 1px rgba(0,151,255,.32)}

/* Header hotspot positions, relative to 1024x110 */
.h-company{left:28.1%;top:45%;width:6.4%;height:38%}
.h-services{left:35.0%;top:45%;width:6.4%;height:38%}
.h-projects{left:42.0%;top:45%;width:6.4%;height:38%}
.h-support{left:49.0%;top:45%;width:6.4%;height:38%}
.h-customer{left:55.9%;top:45%;width:6.4%;height:38%}
.h-estimate{left:62.7%;top:45%;width:6.5%;height:38%}
.h-phone{left:72.1%;top:36%;width:12.8%;height:54%}
.h-mobile{left:86.0%;top:36%;width:12.5%;height:54%}

/* Service hotspot positions, relative to slice */
.service-links .s1{left:3.2%;top:8%;width:15.5%;height:84%}
.service-links .s2{left:19.2%;top:8%;width:15.5%;height:84%}
.service-links .s3{left:35.1%;top:8%;width:15.5%;height:84%}
.service-links .s4{left:51.2%;top:8%;width:15.5%;height:84%}
.service-links .s5{left:67.2%;top:8%;width:15.5%;height:84%}
.service-links .s6{left:83.1%;top:8%;width:14.0%;height:84%}

.oparking-badge{position:absolute;left:53.5%;top:8%;z-index:5;background:#f59e0b;color:#fff;line-height:1.2;border-radius:999px;padding:.42em .75em;box-shadow:0 5px 16px rgba(122,72,0,.22);transform:translateY(-10%);font-size:clamp(8px,1vw,13px);text-align:center}
.oparking-badge strong{display:block;font-weight:900;letter-spacing:.08em}
.oparking-badge span{font-size:.75em}

.quote-hotspot{left:5.2%;top:69%;width:17.5%;height:16%}
.about-hotspot{left:37.7%;top:70%;width:13.4%;height:14%}

.project-oparking{position:absolute;left:52%;top:72%;background:#f59e0b;color:#fff;line-height:1;padding:.45em .75em;border-radius:4px;font-size:clamp(7px,.85vw,11px);font-weight:900;letter-spacing:.06em}

/* Contact row */
.c-phone{left:34.9%;top:47%;width:19.1%;height:31%}
.c-message{left:55.3%;top:47%;width:18.6%;height:31%}
.c-location{left:75.3%;top:47%;width:11.2%;height:31%}
.c-estimate{left:87.1%;top:47%;width:10.6%;height:31%}

.fax-overlay{position:absolute;left:51.5%;top:50%;font-size:clamp(7px,.95vw,12px);line-height:1;color:#71869a;background:rgba(255,255,255,.9);padding:.2em .5em;border-radius:3px}
.to-top{position:absolute;right:2.2%;top:24%;width:28px;height:28px;border-radius:50%;background:#0c66a6;color:#fff;text-decoration:none;display:grid;place-items:center;font-size:16px;line-height:1;box-shadow:0 4px 12px rgba(0,50,90,.25)}

/* O PARKING supplemental block */
.oparking-panel{background:linear-gradient(90deg,#101820,#1c2630);color:#fff;padding:34px 20px;border-top:4px solid #f59e0b}
.op-wrap{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.op-small{font-size:12px;letter-spacing:.18em;color:#ffbd4a;font-weight:800}
.op-wrap h2{font-size:28px;margin:7px 0 8px}
.op-wrap h2 b{color:#ffac19}
.op-wrap p{margin:0;color:#c9d3dc;line-height:1.6}
.op-wrap>a{white-space:nowrap;background:#f59e0b;color:#111;padding:14px 22px;border-radius:7px;text-decoration:none;font-weight:900}

@media(max-width:760px){
  body{background:#fff}
  .site{box-shadow:none}
  .oparking-badge{font-size:7px;padding:.35em .55em}
  .fax-overlay{font-size:6px;left:49%;top:53%}
  .to-top{width:22px;height:22px;font-size:12px}
  .op-wrap{flex-direction:column;align-items:flex-start}
  .op-wrap h2{font-size:22px}
  .op-wrap>a{width:100%;text-align:center}
}


.company-story{background:#fff;padding:64px 24px;border-top:1px solid #e4edf4}
.story-wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:.72fr 1.55fr;gap:70px}
.story-title span{font-size:12px;letter-spacing:.2em;color:#168bd0;font-weight:900}
.story-title h2{font-size:36px;line-height:1.22;margin:12px 0;color:#123b5d}
.story-title h2 b{color:#078fe4}
.story-line{width:48px;height:3px;background:#0b93e8;margin-top:20px}
.story-text{color:#5f7485;font-size:15px;line-height:1.9}
.story-text p{margin:0 0 16px}
.story-text strong{color:#173f5f}
.story-values{display:flex;gap:8px;flex-wrap:wrap;margin:23px 0}
.story-values span{background:#eef8ff;color:#087fc4;border:1px solid #cbe8fa;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:800}
.story-text blockquote{margin:24px 0 0;padding:19px 22px;background:#f3f9fd;border-left:4px solid #0b93e8;color:#294f6c;font-size:17px;line-height:1.65}
.story-text blockquote strong{color:#087fc4}
@media(max-width:760px){
 .company-story{padding:42px 20px}
 .story-wrap{grid-template-columns:1fr;gap:22px}
 .story-title h2{font-size:29px}
 .story-text{font-size:14px}
}


.real-portfolio{background:#f6f9fc;padding:70px 22px}
.portfolio-wrap{max-width:1120px;margin:0 auto}
.portfolio-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}
.portfolio-heading span{font-size:12px;letter-spacing:.2em;color:#078fe4;font-weight:900}
.portfolio-heading h2{font-size:36px;color:#123b5d;margin:7px 0 0}
.portfolio-heading p{color:#758797;margin:0}
.portfolio-part{margin-top:42px}
.part-title{display:grid;grid-template-columns:1fr 1.25fr;gap:34px;align-items:end;margin-bottom:18px}
.part-title>div{display:flex;align-items:center;gap:12px}
.part-title h3{font-size:23px;color:#153e5f;margin:0}
.part-title p{margin:0;color:#718596;font-size:14px;line-height:1.7}
.part-no{width:38px;height:38px;display:grid;place-items:center;background:#078fe4;color:#fff;border-radius:50%;font-size:12px;font-weight:900}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.photo-grid figure{margin:0;background:#fff;border:1px solid #dce7ef;border-radius:9px;overflow:hidden;box-shadow:0 8px 24px rgba(20,65,100,.06)}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.photo-grid figcaption{padding:14px 15px 16px}
.photo-grid figcaption b{display:block;color:#153e5f;font-size:15px;margin-bottom:5px}
.photo-grid figcaption span{display:block;color:#7a8c9b;font-size:12px;line-height:1.55}
.portfolio-coming{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.portfolio-coming div{border:1px dashed #b9cbd9;background:#fff;border-radius:8px;padding:18px;text-align:center}
.portfolio-coming b{display:block;color:#315a78}
.portfolio-coming span{font-size:12px;color:#91a0ad}
@media(max-width:760px){
 .real-portfolio{padding:48px 16px}
 .portfolio-heading{display:block}
 .portfolio-heading h2{font-size:29px}
 .portfolio-heading p{margin-top:10px}
 .part-title{grid-template-columns:1fr;gap:10px}
 .photo-grid{grid-template-columns:1fr 1fr}
 .portfolio-coming{grid-template-columns:1fr}
}
@media(max-width:480px){.photo-grid{grid-template-columns:1fr}}


.photo-grid figcaption small{display:block;margin-top:8px;color:#a0adb7;font-size:10px}
.portfolio-admin-note{text-align:right;margin-top:24px}
.portfolio-admin-note a{font-size:11px;color:#9aabba;text-decoration:none}
.admin-footer-link{display:block;text-align:center;background:#06192b;color:#71899d;font-size:10px;padding:5px;text-decoration:none}
.empty-projects{background:#fff;border:1px dashed #cbd9e3;padding:30px;text-align:center;color:#8193a1}