@charset "utf-8";



/* =====================================================
   PRINT CONTENT — content2.css 통합
===================================================== */
Exit code: 0
Wall time: 0.3 seconds
Output:

.gk-content-batch-print{
    --green-900:#0f2d4a;
    --green-700:#1c5788;
    --green-100:#e6f1f9;
    --ink:#20241f;
    --ink-muted:#6b7268;
    --ink-faint:#85919c;
    --line:#e4e1d4;
  }
  .gk-content-batch-print * {box-sizing:border-box;} .gk-content-batch-print a {color:inherit;text-decoration:none;}
  .gk-content-batch-print button{font-family:inherit;cursor:pointer;}

  /* ===== Intro box ===== */
  .biz-intro{max-width:1400px;margin:0 auto;background:var(--green-100);border-radius:10px;padding:34px 40px;}
  .biz-intro .lead{margin:0 0 12px;font-size:22px;line-height:1.6;font-weight:800;color:var(--green-900);text-align:center;letter-spacing:-.01em;}
  .biz-intro .sub{margin:0;font-size:16px;line-height:1.85;font-weight:400;color:#3f5b73;text-align:center;}
  .biz-intro .sub b{color:var(--green-700);font-weight:700;}

  /* ===== Circle + detail ===== */
  .biz-main{max-width:1400px;margin:0 auto;display:flex;gap:60px;padding:64px 0 10px;align-items:flex-start;}
  .biz-circle-col{flex:0 0 460px;}
  .biz-circle{position:relative;width:460px;height:460px;max-width:100%;}
  .biz-circle svg.ring{position:absolute;inset:0;width:100%;height:100%;}
  .biz-node{
    position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;text-align:center;cursor:pointer;border:none;
    box-shadow:0 10px 24px rgba(20,50,80,.16);transition:transform .25s ease,box-shadow .25s ease;
    font-family:inherit;line-height:1.3;
  }
  .biz-node:hover{transform:scale(1.06);box-shadow:0 14px 30px rgba(20,50,80,.24);}
  .biz-node.center{width:150px;height:150px;left:155px;top:155px;background:#7b6fd1;font-size:20px;z-index:2;cursor:default;}
  .biz-node.center:hover{transform:none;}
  .biz-node.sat{width:120px;height:120px;font-size:16.5px;z-index:1;}
  .biz-node.sat.n1{left:170px;top:0;background:#ef7fa8;}
  .biz-node.sat.n2{left:331.7px;top:117.5px;background:#f4a259;}
  .biz-node.sat.n3{left:270px;top:307.5px;background:#b0d148;}
  .biz-node.sat.n4{left:70px;top:307.5px;background:#3fc2a0;}
  .biz-node.sat.n5{left:8.3px;top:117.5px;background:#4fa3dc;}

  .biz-detail{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;}
  .biz-detail-item{border-radius:10px;padding:20px 26px;}
  .biz-detail-item h3{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--green-900);display:flex;align-items:center;gap:10px;}
  .biz-detail-item h3 a{color:inherit;}
  .biz-detail-item h3 a:hover{color:var(--green-700);}
  .biz-detail-item h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-700);flex:none;}
  .biz-detail-item p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-muted);padding-left:18px;}
  .biz-detail-item.box-pink{background:#fdecf2;}
  .biz-detail-item.box-pink h3::before{background:#ef7fa8;}
  .biz-detail-item.box-orange{background:#fdf1e2;}
  .biz-detail-item.box-orange h3::before{background:#f4a259;}
  .biz-detail-item.box-lime{background:#f4f8e2;}
  .biz-detail-item.box-lime h3::before{background:#b0d148;}
  .biz-detail-item.box-teal{background:#e8f8f2;}
  .biz-detail-item.box-teal h3::before{background:#3fc2a0;}
  .biz-detail-item.box-blue{background:#eaf4fb;}
  .biz-detail-item.box-blue h3::before{background:#4fa3dc;}

  /* ===== Contact box ===== */
  .biz-contact{max-width:1400px;margin:50px auto 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px 40px;}
  .biz-contact h3{margin:0 0 22px;font-size:20px;font-weight:700;color:var(--green-900);}
  .contact-grid{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 32px;}
  .contact-grid li{display:flex;align-items:center;gap:14px;}
  .c-ic{
    width:44px;height:44px;border-radius:50%;background:var(--green-100);color:var(--green-700);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .c-ic svg{width:21px;height:21px;}
  .c-text{display:flex;flex-direction:column;gap:2px;}
  .c-text b{font-size:14px;color:var(--ink-faint);font-weight:600;}
  .c-text span, .c-text a{font-size:17px;color:var(--ink);font-weight:600;}
  .c-text a{color:var(--green-700);text-decoration:none;}
  .c-text a:hover{text-decoration:underline;text-underline-offset:2px;}
  .biz-contact .note{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-faint);line-height:1.6;}
  @media (max-width:900px){
    .contact-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    .contact-grid{grid-template-columns:repeat(2,1fr);gap:16px 20px;}
  }

  /* ===== Responsive ===== */
  @media (max-width:1100px){
    .biz-intro, .biz-main, .biz-contact{margin-left:24px;margin-right:24px;width:auto;}
    .biz-intro{padding:26px 28px;}
    .biz-main{gap:40px;padding:48px 0 10px;}
    .biz-contact{padding:28px 30px;}
  }
  @media (max-width:900px){
    .biz-main{flex-direction:column;align-items:center;padding-top:40px;}
    .biz-circle-col{flex:none;}
    .biz-detail{width:100%;max-width:640px;margin-top:44px;}
  }
  @media (max-width:600px){
    .biz-intro, .biz-main, .biz-contact{margin-left:16px;margin-right:16px;}
    .biz-intro{padding:22px 20px;}
    .biz-intro .lead{font-size:18px;}
    .biz-intro .sub{font-size:14.5px;line-height:1.75;}
    .biz-intro .sub br{display:none;}
    .biz-circle{width:300px;height:300px;transform:scale(1);}
    .biz-node.center{width:100px;height:100px;left:100px;top:100px;font-size:15px;}
    .biz-node.sat{width:82px;height:82px;font-size:12.5px;}
    .biz-node.sat.n1{left:109px;top:0;}
    .biz-node.sat.n2{left:216px;top:76.6px;}
    .biz-node.sat.n3{left:176px;top:200.6px;}
    .biz-node.sat.n4{left:45px;top:200.6px;}
    .biz-node.sat.n5{left:5.4px;top:76.6px;}
    .biz-detail{margin-top:24px;}
    .biz-detail-item h3{font-size:17px;}
    .biz-detail-item p{font-size:14.5px;padding-left:18px;}
    .biz-contact{padding:22px 20px;}
  }

  ::selection{background:var(--green-100);}


/* =====================================================
   PRINT CONTENT REFINEMENT
   단일 블루 톤 · 좌우 높이 균형 · 읽기 쉬운 서비스 카드
===================================================== */
.gk-content-batch-print .biz-intro{
  position:relative;
  overflow:hidden;
  padding:42px 52px;
  border:1px solid #dceaf5;
  border-radius:16px;
  background:linear-gradient(135deg,#f6faff 0%,#eaf4fc 100%);
}
.gk-content-batch-print .biz-intro::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background:#1672bd;
}
.gk-content-batch-print .biz-intro .lead{
  margin-bottom:10px;
  color:#133b5f;
  font-size:24px;
}
.gk-content-batch-print .biz-intro .sub{color:#536b7f;}

.gk-content-batch-print .biz-main{
  gap:72px;
  padding:72px 0 16px;
  align-items:center;
}
.gk-content-batch-print .biz-circle-col{
  display:flex;
  justify-content:center;
}
.gk-content-batch-print .biz-circle{
  width:430px;
  height:430px;
}
.gk-content-batch-print .biz-circle svg.ring{filter:drop-shadow(0 10px 18px rgba(23,82,128,.08));}
.gk-content-batch-print .biz-node{
  border:5px solid #fff;
  box-shadow:0 9px 22px rgba(22,75,118,.16);
}
.gk-content-batch-print .biz-node.center{
  left:140px; top:140px;
  width:150px; height:150px;
  background:#123e67;
}
.gk-content-batch-print .biz-node.sat{
  width:112px; height:112px;
  background:#3985bf;
}
.gk-content-batch-print .biz-node.sat.n1{left:159px;top:0;background:#1f73b6;}
.gk-content-batch-print .biz-node.sat.n2{left:309px;top:110px;background:#4d98cf;}
.gk-content-batch-print .biz-node.sat.n3{left:251px;top:288px;background:#2e7fba;}
.gk-content-batch-print .biz-node.sat.n4{left:67px;top:288px;background:#5ba0d1;}
.gk-content-batch-print .biz-node.sat.n5{left:0;top:110px;background:#367fb6;}

.gk-content-batch-print .biz-detail{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-self:stretch;
}
.gk-content-batch-print .biz-detail-item,
.gk-content-batch-print .biz-detail-item.box-pink,
.gk-content-batch-print .biz-detail-item.box-orange,
.gk-content-batch-print .biz-detail-item.box-lime,
.gk-content-batch-print .biz-detail-item.box-teal,
.gk-content-batch-print .biz-detail-item.box-blue{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:136px;
  padding:24px 26px;
  border:1px solid #e0e9f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(23,67,101,.06);
}
.gk-content-batch-print .biz-detail-item h3{
  margin-bottom:10px;
  color:#173f63;
  font-size:18px;
}
.gk-content-batch-print .biz-detail-item h3::before,
.gk-content-batch-print .biz-detail-item.box-pink h3::before,
.gk-content-batch-print .biz-detail-item.box-orange h3::before,
.gk-content-batch-print .biz-detail-item.box-lime h3::before,
.gk-content-batch-print .biz-detail-item.box-teal h3::before,
.gk-content-batch-print .biz-detail-item.box-blue h3::before{background:#2e80bd;}
.gk-content-batch-print .biz-detail-item p{padding-left:18px;color:#607386;font-size:15px;}

.gk-content-batch-print .biz-contact{
  margin-top:56px;
  padding:34px 40px;
  border:0;
  border-top:3px solid #1f73b6;
  border-radius:0;
  background:#f7fafc;
}
.gk-content-batch-print .biz-contact h3{color:#173f63;}
.gk-content-batch-print .c-ic{background:#e6f1f9;color:#1f73b6;}
.gk-content-batch-print .c-text a{color:#1f73b6;}

@media(max-width:1100px){
  .gk-content-batch-print .biz-main{gap:40px;}
  .gk-content-batch-print .biz-circle{width:400px;height:400px;}
  .gk-content-batch-print .biz-node.center{left:125px;top:125px;}
  .gk-content-batch-print .biz-node.sat.n1{left:144px;}
  .gk-content-batch-print .biz-node.sat.n2{left:288px;top:102px;}
  .gk-content-batch-print .biz-node.sat.n3{left:233px;top:268px;}
  .gk-content-batch-print .biz-node.sat.n4{left:55px;top:268px;}
  .gk-content-batch-print .biz-node.sat.n5{top:102px;}
}
@media(max-width:900px){
  .gk-content-batch-print .biz-detail{width:100%;max-width:760px;}
  .gk-content-batch-print .biz-detail-item{min-height:116px;}
}
@media(max-width:600px){
  .gk-content-batch-print .biz-intro{padding:28px 24px 28px 28px;border-radius:12px;}
  .gk-content-batch-print .biz-intro .lead{font-size:19px;line-height:1.45;}
  .gk-content-batch-print .biz-main{padding-top:48px;}
  .gk-content-batch-print .biz-circle{width:300px;height:300px;}
  .gk-content-batch-print .biz-detail{grid-template-columns:1fr;gap:10px;}
  .gk-content-batch-print .biz-detail-item{min-height:0;padding:20px 22px;}
  .gk-content-batch-print .biz-contact{margin-top:36px;padding:26px 22px;}
}


/* 인쇄상세_블루2.html 전용 — 모든 선택자는 .gkpd01-wrap으로 범위를 제한함 (기존 인쇄상세_블루.html 레이아웃은 폐기, 원본 인쇄상세.html 구조 + 파란톤 색상으로 교체) */

/* =====================================================
   GAKKUM 0815
   영카트 상품상세 전용
   모든 클래스 gkpd01- 접두사 적용
===================================================== */

.gkpd01-wrap,
.gkpd01-wrap *{
  box-sizing:border-box;
}

.gkpd01-wrap{
  width:1200px;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#fff;

  --gk-orange:#176eb5;
  --gk-orange-dark:#0d3d67;
  --gk-dark:#222;
  --gk-gray:#777;
  --gk-light:#f7f7f7;
  --gk-cream:#fff8e9;
}

.gkpd01-wrap img{
  display:block;
  max-width:100%;
}

.gkpd01-wrap a{
  text-decoration:none;
  color:inherit;
}

.gkpd01-wrap{
  font-family:'Paperlogy','Noto Sans KR',sans-serif;
  color:var(--gk-dark);
  -webkit-font-smoothing:antialiased;
}


/* =====================================================
   01 HERO
===================================================== */

.gkpd01-hero{
  position:relative;
  min-height:700px;
  padding:70px 50px 0;
  background:#f2f2f2;
  overflow:hidden;
}

.gkpd01-hero-copy{
  position:relative;
  z-index:3;
  padding-top:30px;
  text-align:center;
}

.gkpd01-hero-eyebrow{
  display:inline-block;
  padding:8px 22px;
  margin-bottom:20px;
  border-radius:50px;
  background:#fff;
  color:var(--gk-orange);
  font-size:17px;
  font-weight:700;
  letter-spacing:.4px;
}

.gkpd01-hero-title{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:25px 52px 30px;

  background:var(--gk-orange);
  color:#fff;

  font-family:'Paperlogy',sans-serif;
  font-size:70px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-3px;
  text-align:center;
}

.gkpd01-hero-photo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:390px;
  overflow:hidden;
}

.gkpd01-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.85);
}

.gkpd01-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(242,242,242,.98) 0%,
    rgba(242,242,242,.35) 42%,
    rgba(242,242,242,0) 100%
  );
}


/* =====================================================
   02 INTRO
===================================================== */

.gkpd01-intro{
  padding:105px 65px 110px;
  background:#f7f7f7;
}

.gkpd01-intro-grid{
  display:grid;
  /* 고정폭(540px) 대신 비율로 — 이 디자인은 상품정보 탭(~900px) 안에 들어가서
     실제 폭이 브라우저 창 크기와 무관하게 항상 좁다(@media는 뷰포트 기준이라
     탭 안쪽 좁은 폭엔 안 먹힘). 고정폭이면 글자칸이 100px대로 짜부러져서
     "원하는 대로" 같은 문구가 음절 단위로 쪼개져 줄바꿈되는 문제가 있었음. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  max-width:1080px;
  margin:0 auto;
  align-items:center;
}

.gkpd01-intro-copy{
  padding-left:5px;
}

.gkpd01-intro-heading{
  margin-bottom:35px;
}

.gkpd01-intro-heading small{
  display:block;
  margin-bottom:12px;
  color:var(--gk-orange);
  font-size:17px;
  font-weight:700;
  letter-spacing:.5px;
}

.gkpd01-intro-heading strong{
  display:block;
  font-family:'Paperlogy',sans-serif;
  font-size:43px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-2.5px;
}

.gkpd01-check-list{
  margin:0;
  padding:0;
  list-style:none;
}

.gkpd01-check-list li{
  position:relative;
  padding-left:40px;
  margin:19px 0;
  font-size:24px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:-1px;
}

.gkpd01-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-2px;
  color:var(--gk-orange);
  font-size:28px;
  font-weight:900;
}

.gkpd01-check-list em{
  color:var(--gk-orange);
  font-style:normal;
  font-weight:900;
}

.gkpd01-intro-note{
  margin:38px 0 0;
  color:#777;
  font-size:16px;
  line-height:1.8;
}

.gkpd01-certificate{
  position:relative;
  padding:18px;
  background:#fff;
  box-shadow:0 14px 38px rgba(0,0,0,.08);
}

.gkpd01-certificate img{
  width:100%;
  aspect-ratio:1.55 / 1;
  object-fit:cover;
}

.gkpd01-stamp{
  position:absolute;
  left:28px;
  top:50%;
  transform:rotate(-7deg);

  padding:10px 17px;

  border:3px solid #df3a2e;
  color:#df3a2e;
  background:rgba(255,255,255,.92);

  font-weight:900;
  line-height:1.25;
}


/* =====================================================
   COMMON PILL
===================================================== */

.gkpd01-pill{
  display:inline-block;
  padding:8px 28px;
  border-radius:50px;
  background:var(--gk-orange);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.5px;
}


/* =====================================================
   03 PROCESS
===================================================== */

.gkpd01-checkpoint{
  padding:105px 55px 115px;
  background:#fff;
  text-align:center;
}

.gkpd01-section-title{
  margin:25px 0 70px;

  color:var(--gk-orange);

  font-family:'Paperlogy',sans-serif;
  font-size:72px;
  line-height:1;
  font-weight:900;
  letter-spacing:-3px;
}

.gkpd01-process{
  max-width:1050px;
  margin:0 auto;
}

.gkpd01-process-row{
  display:grid;

  grid-template-columns:
    1fr 90px 1fr 90px 1fr;

  align-items:center;

  min-height:285px;
}

.gkpd01-process-row + .gkpd01-process-row{
  margin-top:55px;
}

.gkpd01-step{
  text-align:center;
}

.gkpd01-step-img{
  position:relative;
  width:205px;
  height:205px;

  margin:0 auto 18px;

  overflow:hidden;

  border-radius:50%;

  background:#fff;

  border:10px solid #fff;

  box-shadow:
    0 0 0 2px #ededed,
    0 10px 25px rgba(0,0,0,.07);
}

/* position:absolute + inset:0으로 부모(패딩박스) 전체를 강제로 채운다.
   width/height:100%만 쓰면 다른 곳(예: 전역 img reset)의 box-sizing/레이아웃
   상황에 따라 사진이 원 안에 작게 들어가는 문제가 생길 수 있어서(디자인 시안과
   다르게 보이던 원인) 절대위치로 확실하게 꽉 채운다. */
.gkpd01-step-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.gkpd01-step strong{
  display:block;

  color:var(--gk-orange);

  font-size:23px;
  font-weight:900;
  line-height:1.25;
}

.gkpd01-process-arrow{
  color:#aaa;

  font-family:Arial,sans-serif;
  font-size:38px;
  font-weight:300;
  text-align:center;
}


/* =====================================================
   04 PORTFOLIO
===================================================== */

.gkpd01-portfolio{
  padding:105px 65px;
  background:#f7f7f7;
}

.gkpd01-portfolio-head{
  margin-bottom:55px;
  text-align:center;
}

.gkpd01-portfolio-head h2{
  margin:20px 0 13px;

  color:var(--gk-orange);

  font-family:'Paperlogy',sans-serif;

  font-size:58px;
  line-height:1.2;
  font-weight:900;

  letter-spacing:-2.5px;
}

.gkpd01-portfolio-head p{
  margin:0;
  color:#777;
  font-size:18px;
}

.gkpd01-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch; /* start였을 때는 캡션 줄바꿈 차이로 같은 행 카드 높이가 들쑥날쑥했음 */

  max-width:1080px;
  margin:0 auto;
}

.gkpd01-card{
  overflow:hidden;
  background:#fff;

  box-shadow:
    0 8px 25px rgba(0,0,0,.07);
}

.gkpd01-card-img{
  height:330px;
  overflow:hidden;
}

.gkpd01-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gkpd01-card-caption{
  padding:20px 22px 23px;
}

.gkpd01-card-caption b{
  display:block;
  margin-bottom:6px;
  font-size:20px;
  font-weight:800;
}

.gkpd01-card-caption span{
  color:#888;
  font-size:14px;
}


/* =====================================================
   05 COATING
===================================================== */

.gkpd01-coating{
  padding:105px 65px 115px;
  background:#fff;
  text-align:center;
}

.gkpd01-coating h2{
  margin:20px 0 12px;

  color:var(--gk-orange);

  font-family:'Paperlogy',sans-serif;

  font-size:50px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-2px;
}

.gkpd01-coating p{
  margin:0 0 45px;
  color:#777;
  font-size:17px;
}

.gkpd01-coating-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;

  max-width:900px;
  margin:0 auto;
}

.gkpd01-coat{
  overflow:hidden;
  background:#fafafa;
}

.gkpd01-coat img{
  width:100%;
  height:280px;
  object-fit:cover;
}

.gkpd01-coat b{
  display:block;
  padding:18px;

  color:var(--gk-orange);

  font-size:22px;
  font-weight:800;
}


/* =====================================================
   06 CTA
===================================================== */

.gkpd01-cta{
  padding:90px 50px;

  background:var(--gk-orange);
  color:#fff;

  text-align:center;
}

.gkpd01-cta-label{
  display:inline-block;

  margin-bottom:18px;
  padding:7px 20px;

  border:1px solid rgba(255,255,255,.55);
  border-radius:50px;

  font-size:15px;
  font-weight:600;
}

.gkpd01-cta h2{
  margin:0 0 18px;

  font-family:'Paperlogy',sans-serif;

  font-size:60px;
  line-height:1.1;
  font-weight:900;

  letter-spacing:-2px;
}

.gkpd01-cta p{
  margin:0 auto 30px;

  font-size:20px;
  line-height:1.7;
}

.gkpd01-cta-sub{
  margin-bottom:38px;

  font-size:16px;
  opacity:.9;
}

.gkpd01-contact{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.gkpd01-contact .gkpd01-contact-item{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  padding:17px 28px;

  border-radius:5px;

  background:#fff;
  color:var(--gk-orange);

  font-size:19px;
  font-weight:800;

  box-shadow:
    0 7px 20px rgba(0,0,0,.08);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

  .gkpd01-hero{
    min-height:650px;
    padding:50px 30px 0;
  }

  .gkpd01-hero-title{
    font-size:58px;
  }

  .gkpd01-intro-grid{
    grid-template-columns:1fr 440px;
    gap:35px;
  }

  .gkpd01-process-row{
    grid-template-columns:
      1fr 55px 1fr 55px 1fr;
  }

  .gkpd01-step-img{
    width:175px;
    height:175px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:800px){

  .gkpd01-hero{
    min-height:600px;
    padding:40px 20px 0;
  }

  .gkpd01-hero-copy{
    padding-top:20px;
  }

  .gkpd01-hero-eyebrow{
    font-size:14px;
    padding:7px 15px;
  }

  .gkpd01-hero-title{
    width:auto;

    font-size:clamp(36px,8vw,58px);

    padding:20px 25px 24px;

    letter-spacing:-2px;
  }


  /* INTRO */

  .gkpd01-intro{
    padding:70px 25px;
  }

  .gkpd01-intro-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .gkpd01-intro-copy{
    padding:0;
  }

  .gkpd01-intro-heading strong{
    font-size:34px;
  }

  .gkpd01-check-list li{
    font-size:20px;
  }

  .gkpd01-intro-note{
    font-size:15px;
  }


  /* PROCESS */

  .gkpd01-checkpoint{
    padding:75px 20px 90px;
  }

  .gkpd01-section-title{
    font-size:clamp(46px,9vw,70px);
    margin-bottom:55px;
  }

  .gkpd01-process-row{
    grid-template-columns:
      1fr 40px 1fr 40px 1fr;

    min-height:auto;
  }

  .gkpd01-process-row + .gkpd01-process-row{
    margin-top:55px;
  }

  .gkpd01-step-img{
    width:145px;
    height:145px;
    border-width:7px;
  }

  .gkpd01-step strong{
    font-size:18px;
  }

  .gkpd01-process-arrow{
    font-size:27px;
  }


  /* PORTFOLIO */

  .gkpd01-portfolio,
  .gkpd01-coating{
    padding:70px 25px;
  }

  .gkpd01-portfolio-head h2{
    font-size:clamp(38px,8vw,58px);
  }

  .gkpd01-gallery{
    grid-template-columns:1fr 1fr;
  }

  .gkpd01-card-img{
    height:250px;
  }


  /* COATING */

  .gkpd01-coating-grid{
    grid-template-columns:1fr;
  }


  /* CTA */

  .gkpd01-cta{
    padding:65px 25px;
  }

  .gkpd01-cta h2{
    font-size:46px;
  }

  .gkpd01-cta p{
    font-size:17px;
  }

  .gkpd01-contact-item{
    width:100%;
    min-width:0;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:500px){

  .gkpd01-hero-title{
    font-size:36px;
    padding:18px 16px 21px;
  }

  .gkpd01-gallery{
    grid-template-columns:1fr;
  }

  .gkpd01-card-img{
    height:300px;
  }

  .gkpd01-check-list li{
    padding-left:34px;
    font-size:19px;
  }

  .gkpd01-process-row{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
  }

  .gkpd01-process-row + .gkpd01-process-row{
    margin-top:20px;
  }

  .gkpd01-process-arrow{
    display:none;
  }

  .gkpd01-step-img{
    width:145px;
    height:145px;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:360px){

  .gkpd01-hero-title{
    font-size:33px;
  }

  .gkpd01-step-img{
    width:125px;
    height:125px;
  }

}



/* =====================================================
   gkpd01 상품(print01 등)이 상품정보 탭 안에 들어갈 때
   #sit_info(스킨 기본 박스 테두리) 보정 — 테두리 제거 + 가운데정렬.
   :has()로 gkpd01-wrap이 있을 때만 걸리게 해서 다른 상품엔 영향 없음.
===================================================== */
#sit_info:has(.gkpd01-wrap){
  border:none;
}
/* #sit_buy는 장바구니/옵션 선택용 사이드바인데 이 사이트는 장바구니를 안 씀
   (제작문의로 대체) — gkpd01 상품에선 완전히 안 쓰는 빈 270px 영역이라
   숨기고, 비게 되는 폭만큼 #sit_tab을 꽉 채워서 원래 디자인(1200px) 그대로
   나오게 한다. 지금까지 898px로 짜부러져 있던 게 "사이즈가 작다"는 원인이었음. */
#sit_info:has(.gkpd01-wrap) #sit_buy{
  display:none;
}
/* #sit_tab이 스킨 원본에서 display:table-cell인데 부모 #sit_info는 flex라서
   브라우저가 "고아 table-cell"을 익명 테이블로 감싸버린다 — 이 상태에선
   width:100%를 줘도 일반 블록처럼 안 먹히고 테이블 자동배치 계산을 따로 타서
   예전 928px(패딩 제외 898px) 그대로 남아있던 게 진짜 원인이었음.
   display:block으로 테이블 레이아웃 자체를 없애야 100%가 정상 적용된다. */
#sit_info:has(.gkpd01-wrap) #sit_tab{
  display:block;
  width:100%;
}
/* ul.tab_con(#sit_tab 안의 리스트)에 list-style:none이 없어서 li#sit_inf 왼쪽에
   브라우저 기본 불릿(•)이 남아있던 것도 같이 제거 */
#sit_info:has(.gkpd01-wrap) ul.tab_con{
  list-style:none;
}

/* 상품 스킨(style.css)의 "#sit_inf h2/h3 접근성용 숨김" 규칙이 gkpd01 디자인 안의
   진짜 제목(h2)까지 같이 지워버려서("100% 맞춤 제작" 등 안 보임) 원상복구 */
/* #sit_inf h2{font-size:0}는 ID선택자라 클래스 선택자(.gkpd01-section-title 등)로는
   절대 못 이긴다(명시도상 ID가 클래스보다 항상 위) — 그래서 앞서 position만 풀었을 때도
   글자크기는 계속 0으로 남았음. 여기서도 ID 조합으로 각 제목 클래스별 실제 값을
   그대로 다시 선언해서 확실히 이기게 한다. */
#sit_inf .gkpd01-wrap .gkpd01-section-title{
  position:static;margin:25px 0 70px;color:var(--gk-orange);
  font-family:'Paperlogy',sans-serif;font-size:72px;line-height:1;font-weight:900;letter-spacing:-3px;
}
#sit_inf .gkpd01-wrap .gkpd01-portfolio-head h2{
  position:static;margin:20px 0 13px;color:var(--gk-orange);
  font-family:'Paperlogy',sans-serif;font-size:58px;line-height:1.2;font-weight:900;letter-spacing:-2.5px;
}
#sit_inf .gkpd01-wrap .gkpd01-coating h2{
  position:static;margin:20px 0 12px;color:var(--gk-orange);
  font-family:'Paperlogy',sans-serif;font-size:50px;line-height:1.2;font-weight:900;letter-spacing:-2px;
}
#sit_inf .gkpd01-wrap .gkpd01-cta h2{
  position:static;margin:0 0 18px;
  font-family:'Paperlogy',sans-serif;font-size:60px;line-height:1.1;font-weight:900;letter-spacing:-2px;
}
#sit_inf .gkpd01-wrap h3{
  position:static;
}

/* #sit_inf_explan img{height:auto}(스킨 기본)도 ID선택자라 .gkpd01-*-img img로는
   못 이겨서 카드/원형아이콘/히어로 사진이 정사각형(자기 원본 비율)으로 찌그러졌었음.
   h2 때와 같은 원인 — ID 명시도로 다시 이긴다. */
#sit_inf_explan .gkpd01-hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
#sit_inf_explan .gkpd01-step-img img{
  width:100%;height:100%;object-fit:cover;
}
#sit_inf_explan .gkpd01-card-img img{
  width:100%;height:100%;object-fit:cover;
}
#sit_inf_explan .gkpd01-coat img{
  width:100%;height:280px;object-fit:cover;
}
#sit_inf_explan .gkpd01-certificate img{
  width:100%;aspect-ratio:1.55 / 1;object-fit:cover;height:auto;
}

/* shop.css의 #sit_inf_explan img{border-radius:12px}가 갤러리 사진 모서리까지
   둥글게 만들어서 제거 (원본 디자인은 각진 카드) */
#sit_inf_explan .gkpd01-wrap img{
  /* shop.css의 .shop-wrap #sit_inf_explan img{border-radius:12px}랑 명시도가 똑같은데
     shop.css가 이 파일보다 나중에 로드돼서 순서상 걔가 이김 — !important로 확실히 이김 */
  border-radius:0 !important;
}


/* 현수막+배너.html 전용 — 모든 선택자는 .gkpd02-wrap으로 범위를 제한함 */


/* =====================================================
   GAKKUM 0817 — 현수막·배너 상품상세 전용
   클래스 충돌 방지: 상품별 고유 접두사 gkpd02- 사용
   (인쇄상세_블루2.html의 gkpd01-* 와 겹치지 않음)
   폰트/크기/간격은 인쇄블루(gkpd01)와 완전히 동일하게 맞춤.
===================================================== */

.gkpd02-wrap,
.gkpd02-wrap *{
  box-sizing:border-box;
}

.gkpd02-wrap{
  width:1200px;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#fff;

  --gk-blue:#176eb5;
  --gk-blue-dark:#0d3d67;
  --gk-dark:#222;
  --gk-gray:#777;
  --gk-light:#f7f7f7;
  --gk-cream:#fff8e9;
}

.gkpd02-wrap img{
  display:block;
  max-width:100%;
}

.gkpd02-wrap a{
  text-decoration:none;
  color:inherit;
}

.gkpd02-wrap{
  font-family:'Paperlogy','Noto Sans KR',sans-serif;
  color:var(--gk-dark);
  -webkit-font-smoothing:antialiased;
}


/* =====================================================
   01 HERO
===================================================== */

.gkpd02-hero{
  position:relative;
  min-height:700px;
  padding:70px 50px 0;
  background:#f2f2f2;
  overflow:hidden;
}

.gkpd02-hero-copy{
  position:relative;
  z-index:3;
  padding-top:30px;
  text-align:center;
}

.gkpd02-hero-eyebrow{
  display:inline-block;
  padding:8px 22px;
  margin-bottom:20px;
  border-radius:50px;
  background:#fff;
  color:var(--gk-blue);
  font-size:17px;
  font-weight:700;
  letter-spacing:.4px;
}

.gkpd02-hero-title{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:25px 52px 30px;

  background:var(--gk-blue);
  color:#fff;

  font-family:'Paperlogy',sans-serif;
  font-size:70px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-3px;
  text-align:center;
}

.gkpd02-hero-photo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:390px;
  overflow:hidden;
}

.gkpd02-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.85);
}

.gkpd02-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(242,242,242,.98) 0%,
    rgba(242,242,242,.35) 42%,
    rgba(242,242,242,0) 100%
  );
}


/* =====================================================
   02 INTRO (WHY CHOOSE US)
===================================================== */

.gkpd02-intro{
  padding:105px 65px 110px;
  background:#f7f7f7;
}

.gkpd02-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  max-width:1080px;
  margin:0 auto;
  align-items:center;
}

.gkpd02-intro-copy{
  padding-left:5px;
}

.gkpd02-intro-heading{
  margin-bottom:35px;
}

.gkpd02-intro-heading small{
  display:block;
  margin-bottom:12px;
  color:var(--gk-blue);
  font-size:17px;
  font-weight:700;
  letter-spacing:.5px;
}

.gkpd02-intro-heading strong{
  display:block;
  font-family:'Paperlogy',sans-serif;
  font-size:43px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-2.5px;
}

.gkpd02-check-list{
  margin:0;
  padding:0;
  list-style:none;
}

.gkpd02-check-list li{
  position:relative;
  padding-left:40px;
  margin:19px 0;
  font-size:24px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:-1px;
}

.gkpd02-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-2px;
  color:var(--gk-blue);
  font-size:28px;
  font-weight:900;
}

.gkpd02-check-list em{
  color:var(--gk-blue);
  font-style:normal;
  font-weight:900;
}

.gkpd02-intro-note{
  margin:38px 0 0;
  color:#777;
  font-size:16px;
  line-height:1.8;
}

.gkpd02-certificate{
  position:relative;
  padding:18px;
  background:#fff;
  box-shadow:0 14px 38px rgba(0,0,0,.08);
}

.gkpd02-certificate img{
  width:100%;
  aspect-ratio:1.55 / 1;
  object-fit:cover;
}

.gkpd02-stamp{
  position:absolute;
  left:28px;
  top:50%;
  transform:rotate(-7deg);

  padding:10px 17px;

  border:3px solid var(--gk-blue);
  color:var(--gk-blue);
  background:rgba(255,255,255,.92);

  font-weight:900;
  line-height:1.25;
}


/* =====================================================
   COMMON PILL
===================================================== */

.gkpd02-pill{
  display:inline-block;
  padding:8px 28px;
  border-radius:50px;
  background:var(--gk-blue);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.5px;
}


/* =====================================================
   03 PROCESS (지그재그 6단계)
===================================================== */

.gkpd02-checkpoint{
  padding:105px 55px 115px;
  background:#fff;
  text-align:center;
}

.gkpd02-section-title{
  margin:25px 0 70px;

  color:var(--gk-blue);

  font-family:'Paperlogy',sans-serif;
  font-size:72px;
  line-height:1;
  font-weight:900;
  letter-spacing:-3px;
}

.gkpd02-process{
  max-width:640px;
  margin:0 auto;
}

.gkpd02-zrow{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  align-items:center;
  min-height:230px;
}

.gkpd02-zrow + .gkpd02-zrow{
  margin-top:0;
}

/* 가운데 줄(후가공/출력)도 다른 줄이랑 똑같은 3단 그리드(1fr 90px 1fr)를 그대로 써야
   원 위치가 위/아래 줄이랑 정확히 맞는다. 근데 자식이 2개뿐이면 그리드가 자동으로
   1번째 칸(1fr)/2번째 칸(90px)에 채워버려서 오른쪽 원이 가운데 90px 칸에 눌려
   안쪽으로 쏠리는 문제가 있었음 — 2번째 step을 3번째 칸으로 명시적으로 밀어준다. */
.gkpd02-zrow-noarrow .gkpd02-step:last-child{
  grid-column:3;
}

.gkpd02-zarrow{
  color:#aaa;
  font-family:Arial,sans-serif;
  font-size:34px;
  font-weight:300;
  text-align:center;
}
/* ↓ 글자 자체가 이미 아래쪽을 가리켜서 회전이 필요없었는데
   rotate(90deg)를 걸어놔서 왼쪽 화살표(←)처럼 보이던 버그 — 제거.
   그리고 참고 디자인은 아래 화살표가 가운데가 아니라, 바로 위/아래로
   이어지는 원(디자인→출력은 오른쪽, 후가공→상품배송은 왼쪽) 바로
   밑에 붙어있어서 — 화살표줄도 zrow랑 같은 3단 그리드로 만들어서
   해당 칸에만 표시한다. */
.gkpd02-zarrow-row{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  padding:6px 0;
}
.gkpd02-zarrow-row .gkpd02-zarrow.down{
  font-size:30px;
}
.gkpd02-zarrow-row.right .gkpd02-zarrow.down{
  grid-column:3;
}
.gkpd02-zarrow-row.left .gkpd02-zarrow.down{
  grid-column:1;
}
.gkpd02-zrow .gkpd02-step:only-child{
  grid-column:1 / -1;
}

.gkpd02-step{
  text-align:center;
}

.gkpd02-step-img{
  width:180px;
  height:180px;

  margin:0 auto 18px;

  overflow:hidden;

  border-radius:50%;

  background:#fff;

  border:10px solid #fff;

  box-shadow:
    0 0 0 2px #ededed,
    0 10px 25px rgba(0,0,0,.07);

  display:flex;
  align-items:center;
  justify-content:center;
}

.gkpd02-step-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gkpd02-step-img.logo{
  background:#f4f8fc;
}
.gkpd02-step-img.logo img{
  width:62%;
  height:62%;
  object-fit:contain;
}

.gkpd02-step strong{
  display:block;

  color:var(--gk-blue);

  font-size:23px;
  font-weight:900;
  line-height:1.25;
}


/* =====================================================
   04 PORTFOLIO (제품 카테고리)
===================================================== */

.gkpd02-portfolio{
  padding:105px 65px;
  background:#f7f7f7;
}

.gkpd02-portfolio-head{
  margin-bottom:20px;
  text-align:center;
}

.gkpd02-portfolio-num{
  display:block;
  margin-bottom:6px;
  color:var(--gk-blue);
  font-family:'Paperlogy',sans-serif;
  font-size:30px;
  font-weight:900;
  letter-spacing:1px;
}

.gkpd02-portfolio-head h2{
  margin:6px 0 13px;

  color:var(--gk-blue);

  font-family:'Paperlogy',sans-serif;

  font-size:58px;
  line-height:1.2;
  font-weight:900;

  letter-spacing:-2.5px;
}

.gkpd02-portfolio-head p{
  margin:0 0 22px;
  color:#777;
  font-size:18px;
  line-height:1.7;
}

.gkpd02-tags{
  margin:0 0 55px;
  text-align:center;
  color:#9aa2ab;
  font-size:15px;
  font-weight:600;
  letter-spacing:.2px;
}

.gkpd02-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;

  max-width:1080px;
  margin:0 auto;
}

/* 카드 6개 대신 큰 사진 1장 (요청대로 단순화) */
.gkpd02-gallery-full{
  max-width:1080px;
  margin:0 auto;
}
.gkpd02-gallery-full img{
  width:100%;
  height:auto;
}

.gkpd02-card{
  overflow:hidden;
  background:#fff;

  box-shadow:
    0 8px 25px rgba(0,0,0,.07);
}

.gkpd02-card-img{
  height:330px;
  overflow:hidden;
}

.gkpd02-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gkpd02-card-caption{
  padding:20px 22px 23px;
}

.gkpd02-card-caption b{
  display:block;
  margin-bottom:6px;
  font-size:20px;
  font-weight:800;
}

.gkpd02-card-caption span{
  color:#888;
  font-size:14px;
}


/* =====================================================
   05 INSTALL NOTE (인쇄의 COATING 자리에 해당)
===================================================== */

.gkpd02-install{
  padding:105px 65px 115px;
  background:#fff;
}

.gkpd02-install-inner{
  max-width:1080px;
  margin:0 auto;
}

/* 큰 사진 한 장만 꽉 차게 (원래 요청대로 단순화) */
.gkpd02-install-shots{
  margin-bottom:20px;
}

.gkpd02-install-shots img{
  /* 높이 고정 + object-fit:cover로 강제로 자르지 않음 —
     나중에 사진 바꾸면 원본 비율 그대로 자동으로 리사이즈되게 */
  width:100%;
  height:auto;
}

/* 설명글은 사진 그룹과 분리해서 아래에 별도로 */
.gkpd02-install-copy{
  max-width:720px;
  margin:36px auto 0;
  text-align:center;
}

.gkpd02-install-copy strong{
  display:block;
  margin-bottom:22px;
  color:var(--gk-dark);
  font-family:'Paperlogy',sans-serif;
  font-size:32px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:-1.5px;
}

.gkpd02-install-copy strong b{
  color:var(--gk-blue);
  font-weight:900;
}

.gkpd02-install-copy p{
  margin:0;
  color:#777;
  font-size:16.5px;
  line-height:1.85;
}


/* =====================================================
   06 CTA
===================================================== */

.gkpd02-cta{
  padding:90px 50px;

  background:var(--gk-blue);
  color:#fff;

  text-align:center;
}

.gkpd02-cta-label{
  display:inline-block;

  margin-bottom:18px;
  padding:7px 20px;

  border:1px solid rgba(255,255,255,.55);
  border-radius:50px;

  font-size:15px;
  font-weight:600;
}

.gkpd02-cta h2{
  margin:0 0 18px;

  font-family:'Paperlogy',sans-serif;

  font-size:60px;
  line-height:1.1;
  font-weight:900;

  letter-spacing:-2px;
}

.gkpd02-cta p{
  margin:0 auto 30px;

  font-size:20px;
  line-height:1.7;
}

.gkpd02-cta-sub{
  margin-bottom:38px;

  font-size:16px;
  opacity:.9;
}

.gkpd02-contact{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* .gkpd02-wrap a{color:inherit}가 .gkpd02-contact-item{color:...}보다 명시도가
   높아서(class+type > class) 흰 배경에 흰 글자로 묻히던 버그 — .gkpd02-contact를
   더해서 이긴다 (인쇄상세_블루2 때 찾은 것과 같은 원인) */
.gkpd02-contact .gkpd02-contact-item{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  padding:17px 28px;

  border-radius:5px;

  background:#fff;
  color:var(--gk-blue);

  font-size:19px;
  font-weight:800;

  box-shadow:
    0 7px 20px rgba(0,0,0,.08);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

  .gkpd02-hero{
    min-height:650px;
    padding:50px 30px 0;
  }

  .gkpd02-hero-title{
    font-size:58px;
  }

  .gkpd02-intro-grid{
    grid-template-columns:1fr 1fr;
    gap:35px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:800px){

  .gkpd02-hero{
    min-height:600px;
    padding:40px 20px 0;
  }

  .gkpd02-hero-copy{
    padding-top:20px;
  }

  .gkpd02-hero-eyebrow{
    font-size:14px;
    padding:7px 15px;
  }

  .gkpd02-hero-title{
    width:auto;

    font-size:clamp(36px,8vw,58px);

    padding:20px 25px 24px;

    letter-spacing:-2px;
  }


  /* INTRO */

  .gkpd02-intro{
    padding:70px 25px;
  }

  .gkpd02-intro-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .gkpd02-intro-copy{
    padding:0;
  }

  .gkpd02-intro-heading strong{
    font-size:34px;
  }

  .gkpd02-check-list li{
    font-size:20px;
  }

  .gkpd02-intro-note{
    font-size:15px;
  }


  /* PROCESS */

  .gkpd02-checkpoint{
    padding:75px 20px 90px;
  }

  .gkpd02-section-title{
    font-size:clamp(46px,9vw,70px);
    margin-bottom:55px;
  }

  .gkpd02-step-img{
    width:145px;
    height:145px;
    border-width:7px;
  }

  .gkpd02-step strong{
    font-size:18px;
  }


  /* PORTFOLIO */

  .gkpd02-portfolio{
    padding:70px 25px;
  }

  .gkpd02-portfolio-head h2{
    font-size:clamp(38px,8vw,58px);
  }

  .gkpd02-gallery{
    grid-template-columns:1fr 1fr;
  }

  .gkpd02-card-img{
    height:250px;
  }


  /* INSTALL */

  .gkpd02-install{
    padding:70px 25px;
  }

  .gkpd02-install-copy strong{
    font-size:26px;
  }


  /* CTA */

  .gkpd02-cta{
    padding:65px 25px;
  }

  .gkpd02-cta h2{
    font-size:46px;
  }

  .gkpd02-cta p{
    font-size:17px;
  }

  .gkpd02-contact-item{
    width:100%;
    min-width:0;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:500px){

  .gkpd02-hero-title{
    font-size:36px;
    padding:18px 16px 21px;
  }

  .gkpd02-gallery{
    grid-template-columns:1fr;
  }

  .gkpd02-card-img{
    height:300px;
  }

  .gkpd02-check-list li{
    padding-left:34px;
    font-size:19px;
  }

  .gkpd02-install-shots img{
    height:220px;
  }

}

::selection{background:#eaf4fb;}


/* =====================================================
   gkpd02 상품(banner01 등)이 상품정보 탭 안에 들어갈 때
   gkpd01 때와 똑같은 스킨 충돌들을 동일하게 방어 (원인은 content2.css의
   gkpd01 방어블록 주석 참고 — #sit_info 테두리/사이드바/table-cell 폭,
   #sit_inf h2/h3 강제숨김, #sit_inf_explan img{height:auto}, border-radius:12px)
===================================================== */
#sit_info:has(.gkpd02-wrap){
  border:none;
}
#sit_info:has(.gkpd02-wrap) #sit_buy{
  display:none;
}
#sit_info:has(.gkpd02-wrap) #sit_tab{
  display:block;
  width:100%;
}
#sit_info:has(.gkpd02-wrap) ul.tab_con{
  list-style:none;
}

#sit_inf .gkpd02-wrap .gkpd02-section-title{
  position:static;margin:25px 0 70px;color:var(--gk-blue);
  font-family:'Paperlogy',sans-serif;font-size:72px;line-height:1;font-weight:900;letter-spacing:-3px;
}
#sit_inf .gkpd02-wrap .gkpd02-portfolio-head h2{
  position:static;margin:6px 0 13px;color:var(--gk-blue);
  font-family:'Paperlogy',sans-serif;font-size:58px;line-height:1.2;font-weight:900;letter-spacing:-2.5px;
}
#sit_inf .gkpd02-wrap .gkpd02-cta h2{
  position:static;margin:0 0 18px;
  font-family:'Paperlogy',sans-serif;font-size:60px;line-height:1.1;font-weight:900;letter-spacing:-2px;
}
#sit_inf .gkpd02-wrap h3{
  position:static;
}

#sit_inf_explan .gkpd02-hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
#sit_inf_explan .gkpd02-step-img img{
  width:100%;height:100%;object-fit:cover;
}
/* 마지막 단계(로고)는 사진이 아니라 로고라서 꽉 채워 자르면(cover) 로고가
   찌그러져 이상하게 보임 — 62% 크기로 안 잘리게(contain) 보여주는 원래
   스타일을 명시도 맞춰서 다시 이기게 한다. */
#sit_inf_explan .gkpd02-step-img.logo img{
  width:62%;height:62%;object-fit:contain;
}
#sit_inf_explan .gkpd02-gallery-full img{
  width:100%;height:auto;
}
#sit_inf_explan .gkpd02-install-shots img{
  width:100%;height:auto;
}
#sit_inf_explan .gkpd02-certificate img{
  width:100%;aspect-ratio:1.55 / 1;object-fit:cover;height:auto;
}

#sit_inf_explan .gkpd02-wrap img{
  border-radius:0 !important;
}