:root{
  --bt-blue:#2d67c8;
  --bt-blue-2:#5b8fe8;
  --bt-blue-deep:#121722;
  --bt-blue-soft:#eef5ff;
  --bt-red:#e60012;
  --deep:#0b0f19;
  --text:#0f172a; 
  --muted:#475569; 
  --soft:#edf2f7;
  --line:rgba(203, 213, 225, 0.6);
  --white:#fff;
  --shadow:0 12px 30px rgba(15, 23, 42, 0.04);
  --shadow-strong:0 24px 50px rgba(45,103,200,0.12);
  --hero-img:url("./img/main_visual_distribution.jpg");
  --band-img:url("./img/bg_parts_distribution.jpg");
  
  
  --dark-tech-bg:#0b0f19;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard","Noto Sans KR",Arial,sans-serif;
  color:var(--text);
  background:#f1f5f9; 
  line-height:1.7;
  letter-spacing:-0.035em;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul,li{list-style:none}
button,input{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.inner{width:min(1320px,calc(100% - 56px));margin:0 auto}

.section{position:relative;padding:130px 0;overflow:hidden}
.section.gray{
  background: linear-gradient(180deg,#edf2f7 0%,#e2e8f0 100%);
}
.section .inner{position:relative;z-index:2}
.sec-head{
    display: grid;
    grid-template-columns: 3fr 3fr;
  justify-content:space-between;
  align-items:end;
  margin-bottom:60px;
  gap:30px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:5px;
  color:var(--bt-blue);
  font-size:15px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sec-title{
  color:var(--deep);
  font-size:clamp(34px,4vw,48px);
  line-height:1.2;
  letter-spacing:-.05em;
    font-weight: 600;
}
.sec-desc{
  color:var(--muted);
  font-size:16.5px;
  line-height:1.8;
  word-break:keep-all;
}
.btn-wrap{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{
  min-height:54px;
  padding:0 26px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:15px;
  transition:.25s;
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{
  background:linear-gradient(135deg,var(--bt-blue),var(--bt-blue-2));
  color:#fff;
  box-shadow: 0 10px 25px rgba(45,103,200,0.2);
}
.btn.line{
  background:rgba(255,255,255,0.8);
  color:var(--text);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.btn.line:hover{color:var(--bt-blue)}

.tech-bg-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.tech-shape-circle {
  width: 580px;
  height: 580px;
  border: 1.5px dashed rgba(45, 103, 200, 0.4);
  border-radius: 50%;
  top: -10%;
  right: -5%;
}
.tech-shape-diamond {
  width: 260px;
  height: 240px;
  border: 1.5px solid rgba(45, 103, 200, 0.2);
  transform: rotate(45deg);
  bottom: 8%;
  left: -4%;
}

.hero{
  position:relative;
  padding-top:84px;
  overflow:hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}
.hero::before{
  content:"";
  position:absolute;
  top: -10%; right: -10%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(79,143,232,0.12) 0%, rgba(45,103,200,0.03) 50%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
}
.hero::after{
  content:"";
  position:absolute;
  bottom: -5%; left: -5%;
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(45,103,200,0.05) 0%, transparent 60%);
  filter: blur(60px);
  z-index: 0;
}
.hero .inner{position:relative;z-index:2;padding:140px 0}
.hero-grid{display:grid;grid-template-columns:6fr 4fr;gap:64px;align-items:center}
.hero-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(45,103,200,0.08);
  color:var(--bt-blue);
  font-size:13px;
  font-weight:600;
}
.hero-title{
  margin-top:26px;
  color:var(--deep);
  font-size:3.5em;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
}
.hero-title em{
  display:inline-block;
  background: linear-gradient(135deg, #2d67c8 0%, #4f83fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style:normal;
  letter-spacing:-.02em;
}
.hero-desc{
  max-width: 720px;
  margin-top:26px;
  color:#334155;
  font-size:18px;
  line-height:1.85;
  word-break:keep-all;
}
.hero-search-panel{
  position:relative;
  padding:44px;
  border-radius:14px;
  background:rgba(255,255,255,0.85);
  box-shadow: 0 30px 60px rgba(15,23,42,0.06);
  backdrop-filter:blur(24px);
}
.hero-search-panel h3{color:var(--deep);font-size:24px; letter-spacing:-.05em}
.hero-search-panel p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.7}
.hero-search{
  height:60px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 30px rgba(45,103,200,0.1);
  margin-top:15px;
}
.hero-search input{flex:1;min-width:0;height:100%;padding:0 22px;border:0;outline:0;background:transparent;color:#273346; font-weight: 300;}
.hero-search input::placeholder{color:#94a3b8}
.hero-search button{width:68px;height:100%;border:0;background:linear-gradient(135deg,var(--bt-blue),var(--bt-blue-2));color:#fff;font-size:18px}
.hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.hero-tags span{
  padding:7px 14px;
  border-radius: 999px;
  background:rgba(255,255,255,0.9);
  color:#2d67c8;
  font-size:.8em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.blue-band{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  color:#fff;
  background: var(--dark-tech-bg);
}
.blue-band::before{
  content:"";
  position:absolute;
  inset:0;
  background: 
    radial-gradient(circle at 15% 25%, rgba(45,103,200,0.25) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(91,143,232,0.18) 0%, transparent 50%);
  z-index:1;
}
.blue-band .inner{position:relative;z-index:3}
.supply-focus{
  display:grid;
  grid-template-columns:2fr 3fr;
  gap:64px;
  align-items:center;
}
.blue-layout h2{
  margin-top:10px;
  color:#fff;
  font-size:clamp(38px,4.5vw,56px);
  line-height:1.15;
  font-weight:600;
  letter-spacing:-.05em;
}
.blue-layout h2 em{
  display:inline-block;
  font-style:normal;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:-.05em;
}
.blue-layout p{color:#94a3b8;font-size:17.5px;line-height:1.8;word-break:keep-all}
.blue-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.blue-metric{
  min-height:140px;
  padding:26px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.3s;
}
.blue-metric:hover{background:rgba(255,255,255,.08); transform:translateY(-4px)}
.blue-metric i{
  width:42px;
  height:42px;
  margin-bottom:18px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#60a5fa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.blue-metric b{display:block;color:#fff;font-size:24px;font-weight:600}
.blue-metric span{display:block; color:#94a3b8;}

.vendor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vendor-card{
  position:relative;
  min-height:152px;
  padding:28px 22px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.02);
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vendor-card:hover{
  transform:translateY(-5px);
  background:#fff;
  box-shadow:var(--shadow-strong);
}
.vendor-logo{
  width:100%;
  height:56px;
  padding:9px 16px;
  margin-bottom:15px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,0.01);
  display:flex;
  align-items:center;
  justify-content:center;
}
.vendor-logo img{max-width:142px;max-height:36px;object-fit:contain}
.vendor-card strong{display:block;color:var(--deep);font-size:1.1em; font-weight:500;}
.vendor-card:hover strong{color:var(--bt-blue)}
.vendor-card span:not(.vendor-logo){display:block; color:#64748b; font-weight:300;}

.service-section{
  position:relative;
  padding:140px 0;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 
  color: #fff;
}
.service-section .sec-title { color: #fff; }
.service-section .sec-desc { color: #94a3b8; }
.service-section::before {
  content: "";
  position: absolute;
  bottom: 0; right: 10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(91, 143, 232, 0.12) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.service-card{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:44px 36px;
  border-radius:14px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  position:relative;
  overflow:hidden;
  transition:.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover{
  background: rgba(255, 255, 255, 0.06); 
  box-shadow: 0 30px 60px rgba(45, 103, 200, 0.18); 
  transform: translateY(-6px);
}
.service-card .num{
  position:absolute;
  right:24px;
  top:24px;
  color: rgba(255, 255, 255, 0.08);
  font-size:52px;
  font-weight:900;
  line-height:1;
  letter-spacing:-2px;
}
.service-icon{
  flex-shrink: 0;
  width:56px;
  height:56px;
  border-radius:12px;
  background:rgba(255, 255, 255, 0.07);
  color:#60a5fa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  transition: .3s;
}
.service-card:hover .service-icon {
  background: var(--bt-blue);
  color: #fff;
}
.service-card-text {
  flex: 1;
}
.service-card h3{color:#fff;font-size:22px; margin-bottom:10px}
.service-card p{color:#94a3b8;font-size:15px;line-height:1.75;word-break:keep-all}

.news-channel{display:grid;grid-template-columns:1fr 1fr;gap:100px;}
.notice-box,.channel-box{
  position:relative;
  border-radius:14px;
}
.notice-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.notice-title-row h3,.channel-box h3{color:var(--deep); letter-spacing:-.04em; font-size:2.2em; }

.notice-plus{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(45,103,200,.06);
  color:var(--bt-blue);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.4em;
  line-height:1;
  padding-bottom:2px; 
  transition:.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.notice-plus:hover{background:var(--bt-blue);color:#fff;transform: rotate(90deg);}
.notice-desc,.channel-desc{color:#55657d; margin-bottom:30px; font-size:1.1em; font-weight:300;}

.notice-list{display:flex;flex-direction:column;margin-top:8px; font-size:1.05em;}
.notice-list a{
  position:relative;
  padding:18px 4px;
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06); 
  display:flex;
  flex-direction:row; 
  justify-content:space-between;
  align-items:center;
  transition: all 0.25s ease;
}
.notice-list a:last-child {
  border-bottom: 0; 
}
.notice-list a:hover{
  transform: translateX(6px);
}
.notice-list strong{
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; 
  padding-right:24px;
  flex:1;
}
.notice-list a:hover strong{color:var(--bt-blue)}
.notice-list span{
  color:#8a99ad;
  flex-shrink:0; 
  font-weight:300;
}

.channel-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.channel-btn{
  padding:20px;
  border-radius:5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); 
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.channel-btn:hover{
  transform: translateY(-4px); 
  box-shadow: 0 16px 36px rgba(45, 103, 200, 0.08);
}
.channel-left{display:flex;gap:14px;align-items:center}
.channel-ico{
  width:47px;
  height:47px;
  border-radius:50%;
  background:rgba(45,103,200,0.06);
  color:var(--bt-blue);
  display:grid;
  place-items:center;
  font-size:1.2em;
  font-weight:800;
}
.channel-ico i{font-size:1.2em;}
.channel-text strong{color:var(--text);font-size:1.1em;}
.channel-text span{display:block; color:var(--muted);}
.channel-arrow{
  width:auto;
  height:auto;
  background: transparent; 
  color:#94a3b8;
  display:grid;
  place-items:center;
  font-size:14px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.channel-btn:hover .channel-arrow{color:var(--bt-blue); transform: translateX(5px);}

.culture-section{
  background:linear-gradient(180deg,#ffffff 0%,#e6ecf5 100%);
}
.culture-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:32px;align-items:stretch;}

.shopping-copy{
  position:relative;
  padding:60px 50px; 
  border-radius:5px;
  color:#fff;
  background: var(--dark-tech-bg); 
  overflow:hidden;
  box-shadow:0 16px 40px rgba(11,24,39,0.15);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.shopping-copy::before{
  content:"";
  position:absolute;
  top: -10%; right: -10%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(45,103,200,0.35) 0%, transparent 65%);
  filter: blur(20px);
  z-index: 1;
}
.shopping-copy::after{
  content:"";
  position:absolute;
  bottom: -20%; left: -10%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.18) 0%, transparent 65%);
  filter: blur(25px);
  z-index: 1;
}
.shopping-copy>*{position:relative;z-index:2}
.shopping-copy .kicker{margin-bottom:5px; color:rgba(255,255,255,.65); }
.shopping-copy h2{color:#fff;font-size:2.3em;line-height:1.2; letter-spacing:-.02em}
.shopping-copy p{color:#94a3b8;font-size:15.5px;margin-top:10px}
.shopping-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.shopping-points span{
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,.9);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.shopping-cta{margin-top:26px}

@keyframes ctaPulse {
  0% { box-shadow: 0 0 0 0 rgba(91, 143, 232, 0.4); transform: translateY(0); }
  50% { box-shadow: 0 0 16px 6px rgba(91, 143, 232, 0.25); transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 0 rgba(91, 143, 232, 0); transform: translateY(0); }
}
.shop-main-btn{
  min-height:52px;
  padding:0 24px;
  border-radius:8px;
  background:#fff;
  color:var(--deep);
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-weight:700;
  animation: ctaPulse 2.5s infinite ease-in-out;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.shop-main-btn b{font-size:15px;}
.shop-main-btn>i{
  width:28px;
  height:28px;
  border-radius:50%;
  color:var(--bt-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 0.3s ease;
}
.shop-main-btn:hover{
  animation: none;
  box-shadow: 0 15px 30px rgba(91, 143, 232, 0.35);
}
.shop-main-btn:hover>i { transform: translateX(4px);  }

.culture-cards{
  display:grid;
  grid-template-columns: 1fr 1fr; 
  gap:20px;
  align-items: stretch;
}
.culture-card{
  position: relative;
  padding:44px 32px;
  border-radius:8px;
  background:#fff; 
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04); 
  display:flex; 
  flex-direction: column; 
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.culture-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(45,103,200,0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.culture-card:hover{
  transform: translateY(-6px); 
  box-shadow: 0 20px 45px rgba(45, 103, 200, 0.1);
}
.culture-card:hover::before { opacity: 1; }
.culture-card i.main-ico{
  width:56px;
  height:56px;
  border-radius:12px;
  background: rgba(45,103,200,.05);
  color:var(--bt-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom: 15px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.culture-card:hover i.main-ico {
  background: linear-gradient(135deg, var(--bt-blue), var(--bt-blue-2));
  color: #fff;
}
.culture-card-text {
  flex: 1;
}
.culture-card h3{color:var(--deep);font-size:1.6em; margin-bottom:10px}
.culture-card p{color:var(--muted);font-size:1em; line-height:1.68;word-break:keep-all; font-weight:300;}
.culture-card-arrow {
  margin-top: auto;
  padding-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  transition: all 0.3s ease;
  font-weight:600;
}
.culture-card:hover .culture-card-arrow {
  color: var(--bt-blue-2);
  transform: translateX(6px);
}

.reveal{opacity:0;transform:translateY(32px);transition:.7s cubic-bezier(0.16, 1, 0.3, 1)}
.reveal.on{opacity:1;transform:translateY(0)}