@charset "utf-8";
/* ==========================================================================
   DJ LOGIS KOREA - 사업소개 / 사업현황 / 입점업체소개
   ========================================================================== */

/* --------------------------------------------------------------------------
   사업소개 - 서비스 09
   -------------------------------------------------------------------------- */
.bs-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bs-svc .item{position:relative;background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);padding:36px 32px 34px;overflow:hidden;transition:transform .42s var(--dj-ease),box-shadow .42s var(--dj-ease),border-color .42s}
.bs-svc .item:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--dj-blue),var(--dj-blue-2));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--dj-ease)}
.bs-svc .item:hover{transform:translateY(-9px);box-shadow:var(--dj-shadow-h);border-color:transparent}
.bs-svc .item:hover:before{transform:scaleX(1)}
.bs-svc .ico{width:58px;height:58px;border-radius:16px;background:var(--dj-sky);color:var(--dj-blue);display:flex;align-items:center;justify-content:center;font-size:27px;transition:all .42s var(--dj-ease)}
.bs-svc .item:hover .ico{background:var(--dj-blue);color:#fff;transform:rotate(-8deg)}
.bs-svc .num{position:absolute;right:26px;top:26px;font-family:Montserrat,Pretendard,sans-serif;font-size:34px;font-weight:800;color:var(--dj-sky);line-height:1;transition:color .42s}
.bs-svc .item:hover .num{color:#DCE8F7}
.bs-svc h4{margin-top:22px;font-size:20px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.035em}
.bs-svc p{margin-top:12px;font-size:15px;line-height:1.78;color:var(--dj-txt-2)}

/* 3PL / 4PL / 풀필먼트 비교 */
.bs-compare{width:100%;border-top:2px solid var(--dj-navy)}
.bs-compare th,.bs-compare td{padding:22px 24px;border-bottom:1px solid var(--dj-line);font-size:16px;line-height:1.75;vertical-align:middle;text-align:left}
.bs-compare thead th{background:var(--dj-navy);color:#fff;font-weight:700;font-size:16.5px;border-bottom:0}
.bs-compare tbody th{width:180px;background:var(--dj-sky-2);color:var(--dj-blue);font-weight:800;font-size:18px;font-family:Montserrat,Pretendard,sans-serif;letter-spacing:-0.01em}
.bs-compare tbody td{color:var(--dj-txt-2)}
.bs-compare tbody td.role{width:280px;color:var(--dj-navy);font-weight:600}
.bs-compare tbody tr{transition:background .3s}
.bs-compare tbody tr:hover{background:var(--dj-sky-2)}

/* 서비스 진행 절차 */
.bs-process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bs-process .step{position:relative;background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);padding:30px 24px;transition:all .4s var(--dj-ease)}
.bs-process .step:hover{background:var(--dj-blue);border-color:var(--dj-blue);transform:translateY(-7px);box-shadow:var(--dj-shadow-h)}
.bs-process .step .no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--dj-sky);color:var(--dj-blue);font-family:Montserrat,Pretendard,sans-serif;font-size:16px;font-weight:700;transition:all .4s var(--dj-ease)}
.bs-process .step:hover .no{background:#fff}
.bs-process .step b{display:block;margin-top:16px;font-size:17px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.035em;line-height:1.5;transition:color .4s}
.bs-process .step:hover b{color:#fff}
.bs-process .step:after{content:"\203A";position:absolute;right:-13px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--dj-line-2);line-height:1;z-index:2}
.bs-process .step:nth-child(4n):after,.bs-process .step:last-child:after{display:none}

/* --------------------------------------------------------------------------
   사업현황
   -------------------------------------------------------------------------- */
.st-num{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.st-num .item{text-align:center;padding:38px 20px;border-radius:var(--dj-radius);background:linear-gradient(150deg,var(--dj-navy),var(--dj-blue));color:#fff;box-shadow:0 12px 30px rgba(14,44,87,.18);transition:transform .4s var(--dj-ease)}
.st-num .item:hover{transform:translateY(-7px)}
.st-num .item i{font-size:30px;color:#8FC1FF}
.st-num .item .val{margin-top:14px;font-family:Montserrat,Pretendard,sans-serif;font-size:42px;font-weight:800;line-height:1}
.st-num .item .val em{font-size:18px;font-weight:600;margin-left:3px;font-family:Pretendard,sans-serif}
.st-num .item .lab{margin-top:12px;font-size:15.5px;color:rgba(255,255,255,.78)}

.st-comp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.st-comp .item{position:relative;padding:32px 28px;background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);transition:all .4s var(--dj-ease)}
.st-comp .item:hover{transform:translateY(-8px);box-shadow:var(--dj-shadow-h);border-color:transparent}
.st-comp .item .ico{width:52px;height:52px;border-radius:14px;background:var(--dj-sky);color:var(--dj-blue);display:flex;align-items:center;justify-content:center;font-size:24px;transition:all .4s var(--dj-ease)}
.st-comp .item:hover .ico{background:var(--dj-blue);color:#fff;transform:rotate(-8deg)}
.st-comp .item b{display:block;margin-top:20px;font-size:18.5px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.035em}
.st-comp .item p{margin-top:11px;font-size:15px;line-height:1.78;color:var(--dj-txt-2)}

/* --------------------------------------------------------------------------
   입점업체소개
   -------------------------------------------------------------------------- */
.pt-field{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pt-field .item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:158px;border-radius:var(--dj-radius);background:var(--dj-sky-2);border:1px solid var(--dj-line);text-align:center;padding:12px;transition:all .4s var(--dj-ease)}
.pt-field .item i{font-size:32px;color:var(--dj-blue);transition:all .4s var(--dj-ease)}
.pt-field .item span{font-size:15.5px;font-weight:600;color:var(--dj-navy);letter-spacing:-0.035em}
.pt-field .item:hover{background:var(--dj-blue);border-color:var(--dj-blue);transform:translateY(-6px);box-shadow:var(--dj-shadow-h)}
.pt-field .item:hover i{color:#fff;transform:scale(1.12)}
.pt-field .item:hover span{color:#fff}

.pt-msg{margin-top:60px;padding:48px 54px;background:linear-gradient(120deg,var(--dj-navy),var(--dj-blue));border-radius:var(--dj-radius);color:#fff;text-align:center}
.pt-msg h4{font-size:26px;font-weight:800;letter-spacing:-0.04em;line-height:1.45}
.pt-msg p{margin-top:18px;font-size:16.5px;line-height:1.85;color:rgba(255,255,255,.82)}

.pt-logo{margin-top:60px}
.pt-logo .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pt-logo .grid li{display:flex;align-items:center;justify-content:center;height:104px;border:1px solid var(--dj-line);border-radius:var(--dj-radius-s);background:#fff;padding:14px;transition:all .35s var(--dj-ease)}
.pt-logo .grid li:hover{border-color:var(--dj-blue);box-shadow:var(--dj-shadow);transform:translateY(-4px)}
.pt-logo .grid li img{max-width:100%;max-height:64px;width:auto;height:auto;filter:grayscale(100%);opacity:.72;transition:all .35s}
.pt-logo .grid li:hover img{filter:none;opacity:1}
.pt-logo .grid li.ready{color:var(--dj-line-2);font-size:13px;background:var(--dj-sky-2);border-style:dashed}
.pt-logo .note{margin-top:22px;padding:18px 22px;background:var(--dj-sky-2);border-radius:var(--dj-radius-s);font-size:14.5px;color:var(--dj-txt-2);line-height:1.75;text-align:center}

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .bs-svc{gap:16px}
  .pt-logo .grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1024px){
  .bs-svc{grid-template-columns:repeat(2,1fr)}
  .bs-process{grid-template-columns:repeat(2,1fr)}
  .bs-process .step:nth-child(2n):after{display:none}
  .bs-process .step:nth-child(4n):after{display:block}
  .st-num{grid-template-columns:repeat(2,1fr)}
  .st-num .item .val{font-size:34px}
  .st-comp{grid-template-columns:repeat(2,1fr)}
  .pt-field{grid-template-columns:repeat(4,1fr)}
  .pt-logo .grid{grid-template-columns:repeat(4,1fr)}
  .pt-msg{padding:38px 30px}
  .pt-msg h4{font-size:21px}
  .bs-compare th,.bs-compare td{padding:16px 14px;font-size:15px}
  .bs-compare tbody th{width:110px;font-size:16px}
  .bs-compare tbody td.role{width:auto}
}
@media (max-width:768px){
  .bs-svc{grid-template-columns:1fr;gap:14px}
  .bs-svc .item{padding:28px 24px}
  .bs-process{grid-template-columns:1fr;gap:12px}
  .bs-process .step:after{display:none !important}
  .st-num{grid-template-columns:1fr;gap:12px}
  .st-num .item{padding:28px 18px}
  .st-comp{grid-template-columns:1fr;gap:12px}
  .pt-field{grid-template-columns:repeat(2,1fr);gap:10px}
  .pt-field .item{height:124px}
  .pt-field .item i{font-size:26px}
  .pt-field .item span{font-size:14px}
  .pt-logo .grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .pt-logo .grid li{height:80px}
  .pt-msg{margin-top:40px;padding:30px 22px}
  .pt-msg h4{font-size:18.5px}
  .pt-msg p{font-size:15px}
}


/* ==========================================================================
   사업영역 4개 페이지 (farming / processing / trade / distribution)
   ========================================================================== */
.bz-intro{display:flex;gap:60px;align-items:center}
.bz-intro .img{flex:0 0 46%;border-radius:var(--dj-radius);overflow:hidden;box-shadow:var(--dj-shadow-h);background:var(--dj-sky-2)}
.bz-intro .img img{display:block;width:100%;height:auto}
.bz-intro .img .noimg{min-height:340px}
.bz-intro .txt{flex:1 1 auto;min-width:0}
.bz-intro .txt .dj-sec-tit{margin-bottom:22px}
.bz-intro .txt .dj-txt + .dj-txt{margin-top:14px}
.bz-intro .txt .dj-checklist{margin-top:26px}

.bz-card{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.bz-card .item{background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);padding:38px 28px;text-align:center;transition:transform .45s var(--dj-ease),box-shadow .45s var(--dj-ease),border-color .45s}
.bz-card .item:hover{transform:translateY(-8px);box-shadow:var(--dj-shadow-h);border-color:transparent}
.bz-card .item .ico{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:var(--dj-sky);color:var(--dj-blue);font-size:30px;transition:background .4s,color .4s}
.bz-card .item:hover .ico{background:var(--dj-blue);color:#fff}
.bz-card .item h4{margin-top:20px;font-size:20px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.035em}
.bz-card .item p{margin-top:12px;font-size:15.5px;line-height:1.75;color:var(--dj-txt-2);word-break:keep-all}

.bz-step{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.bz-step li{position:relative;background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);padding:30px 24px;transition:transform .45s var(--dj-ease),box-shadow .45s var(--dj-ease)}
.bz-step li:hover{transform:translateY(-6px);box-shadow:var(--dj-shadow-h)}
.bz-step li .n{display:inline-block;font-family:Montserrat,Pretendard,sans-serif;font-size:14px;font-weight:700;color:#fff;background:var(--dj-blue);padding:4px 12px;border-radius:100px;letter-spacing:.06em}
.bz-step li b{display:block;margin-top:16px;font-size:18px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.035em}
.bz-step li p{margin-top:8px;font-size:15px;line-height:1.7;color:var(--dj-txt-2);word-break:keep-all}

.bz-two{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.bz-two .col{background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);overflow:hidden;box-shadow:var(--dj-shadow)}
.bz-two .col .ph{background:var(--dj-sky-2)}
.bz-two .col .ph img{display:block;width:100%;height:300px;object-fit:cover}
.bz-two .col .ph .noimg{min-height:300px}
.bz-two .col .tx{padding:34px 32px 36px}
.bz-two .col .tx h4{font-size:23px;font-weight:800;color:var(--dj-navy);letter-spacing:-0.035em}
.bz-two .col .tx h4 i{color:var(--dj-blue);margin-right:8px}
.bz-two .col .tx p{margin-top:16px;font-size:16px;line-height:1.9;color:var(--dj-txt-2)}
.bz-two .col .tx .dj-btn{margin-top:24px}

.bz-nav .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bz-nav .grid .it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:150px;background:#fff;border:1px solid var(--dj-line);border-radius:var(--dj-radius);transition:all .4s var(--dj-ease)}
.bz-nav .grid .it i{font-size:34px;color:var(--dj-blue-2);transition:color .4s}
.bz-nav .grid .it span{font-size:17px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.035em}
.bz-nav .grid .it:hover{transform:translateY(-6px);box-shadow:var(--dj-shadow-h);border-color:transparent}
.bz-nav .grid .it.on{background:var(--dj-blue);border-color:var(--dj-blue)}
.bz-nav .grid .it.on i,.bz-nav .grid .it.on span{color:#fff}

@media (max-width:1024px){
  .bz-intro{flex-direction:column;gap:32px}
  .bz-intro .img{flex:none;width:100%}
  .bz-card{grid-template-columns:repeat(2,1fr);gap:18px}
  .bz-step{grid-template-columns:repeat(2,1fr);gap:16px}
  .bz-two{grid-template-columns:1fr;gap:24px}
  .bz-nav .grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media (max-width:600px){
  .bz-card{grid-template-columns:1fr}
  .bz-step{grid-template-columns:1fr}
  .bz-two .col .ph img{height:220px}
  .bz-two .col .tx{padding:26px 22px 28px}
  .bz-nav .grid .it{height:120px}
}