/* 사업영역 > 자동차전장분야 & 부품검사 Overview */
* { margin: 0; padding: 0; box-sizing: border-box;}
html { scroll-behavior: smooth;}
body { font-family: "Pretendard", "Noto Sans KR", "sans-serif"; color: #111;}*/

/* 공통 */
.busi5-overview { position: relative;}
.busi5-overview .busi5-2 { width: 100%;}
.busi5-overview .busi5-2:after { content: ""; display: block; clear: both;}
.busi5-overview .fullsection { position: relative; display: flex; min-height: 100vh;}
.busi5-overview .fullsection .fullsection-con { width: 38%; padding: 70px 40px 70px 50px; background: #f9f9f9;}
.busi5-overview .fullsection .fullsection-view { position: relative; display: flex; align-items: center; justify-content: center; width: 62%; background: #f9f9f9; overflow: hidden;}

/* 왼쪽 타이틀 */
.busi5-overview .fullsection .fullsection-con .overview-title-wrap h2 { margin-bottom: 25px; font-size: 54px; font-weight: 800; color: #243f8f; line-height: 1; }
.busi5-overview .fullsection .fullsection-con .overview-title-wrap .line {width: 100%; max-width: 520px; height: 1px; margin-bottom: 40px; background: #222;}

/* 메뉴 */
.busi5-overview .fullsection .fullsection-con .overview-menu { max-width: 500px; list-style: none;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item { margin-bottom: 8px; border: 1px solid #d6d6d6; border-radius: 6px; background: #f0f0f0; overflow: hidden; cursor: pointer; transition: background 0.35s ease, border-color 0.35s ease;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-basic { display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 0 34px;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-basic strong { font-size: 20px; font-weight: 700; color: #666;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-basic .arrow { font-size: 34px; line-height: 1; color: #9b9b9b;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-detail { max-height: 0; padding: 0 34px; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-detail p { margin-bottom: 20px; font-size: 16px; line-height: 1.7; color: #fff;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-detail .more-view-btn { display: inline-block; padding-bottom: 4px; border: 0; border-bottom: 2px solid #fff; background: transparent; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item.active { border-color: #243f8f; background: #243f8f;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item.active .menu-basic strong,
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item.active .menu-basic .arrow { color: #fff;}
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item.active .menu-detail { max-height: 180px; padding: 0 34px 28px; opacity: 1;}

/* 오른쪽 차량 영역 */
.busi5-overview .fullsection .fullsection-view .car-stage { position: relative; display: flex; align-items: center; justify-content: center;}
.busi5-overview .fullsection .fullsection-view .car-stage .car-image { display: block; width: 86%; max-width: 900px; height: auto;}

/* highlight */
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight { position: absolute; width: 52px; height: 52px; border: 3px solid #00e7ff; border-radius: 50%; background: rgba(0, 231, 255, 0.08);
  box-shadow: 0 0 18px rgba(0, 231, 255, 0.45); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.7);
  animation: busi5OverviewPartFadeIn 0.45s ease forwards;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.active { opacity: 1; transform: translate(-50%, -50%) scale(1);}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight::after { content: ""; position: absolute; inset: -8px; border: 2px solid rgba(0, 231, 255, 0.4); border-radius: 50%; animation: busi5OverviewPulse 1.6s infinite;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-xs { width: 24px; height: 24px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-sm { width: 36px; height: 36px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-md { width: 52px; height: 52px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-lg { width: 72px; height: 72px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight .label { position: absolute; left: 50%; top: -50px; transform: translateX(-50%); padding: 6px 12px;
  background: #111; color: #fff; border-radius: 20px; font-size: 12px; white-space: nowrap;}

@keyframes busi5OverviewPartFadeIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes busi5OverviewPulse {
  0% { opacity: 0.8; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; }
}

/* 상세 섹션 */
.busi5-overview .detail-section { min-height: 100vh; padding: 110px 60px; background: #fff; border-bottom: 1px solid #dddddd;}
.busi5-overview .detail-section .detail-inner { max-width: 1320px; margin: 0 auto;}
.busi5-overview .detail-section .detail-inner .detail-head .detail-kicker { display: inline-block; margin-bottom: 14px; color: #243f8f; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;}
.busi5-overview .detail-section .detail-inner .detail-head h2 { margin-bottom: 24px; font-size: 56px; font-weight: 800; color: #243f8f;}
.busi5-overview .detail-section .detail-inner .detail-head p { color: #444; font-size: 19px; line-height: 1.8;}
.busi5-overview .detail-section .detail-inner .detail-content { display: flex; gap: 30px; margin-top: 55px;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box { flex: 1; padding: 35px; border: 1px solid #ddd; border-radius: 20px; background: #f8f8f8;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box > h3 { margin-bottom: 18px; font-size: 26px;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box > ul { list-style: none;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box > ul > li { position: relative; padding-left: 18px; color: #444; font-size: 16px; line-height: 1.9;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box > ul > li::before { content: ""; position: absolute; top: 15px; left: 0; width: 6px; height: 6px; background: #243f8f; border-radius: 50%;}
.busi5-overview .detail-section .detail-inner .detail-img { display: block; margin-top: 55px; }
.busi5-overview .detail-section .detail-inner .detail-img .lview { display: block; margin: 0 auto; box-shadow: 0 0 18px rgba(94, 94, 94, 0.45);}
.busi5-overview .detail-section .detail-inner .detail-img .sview { display: none; margin: 0 auto; box-shadow: 0 0 18px rgba(94, 94, 94, 0.45);}
.busi5-overview .detail-section .detail-inner .con_arrow{font-size:1.6em; font-weight:700; line-height:30px;  color: #000; margin:50px 0 20px 0;}
.busi5-overview .detail-section .detail-inner .con_arrow:before{content: ""; width:16px; height:16px; display:inline-block; border:5px #243f8f solid; box-sizing:border-box; border-radius:14px; background:#fff; margin-right:10px;}
.busi5-overview .detail-section .detail-inner .con_arrow:first-child{margin:0 0 20px 0;}
.busi5-overview .detail-section .detail-inner .con_arrow a:hover{color: #243f8f;}
.busi5-overview .detail-section .detail-inner > .line_grid {display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: center; justify-items: center; margin: 40px 0;}
.busi5-overview .detail-section .detail-inner > .line_grid > .line_item{width: 100%; max-width: 200px; opacity: 0.85; transition: all 0.5s ease; }
.busi5-overview .detail-section .detail-inner > .line_grid > .line_item:hover{opacity: 1; transform: translateY(-10px);}
.busi5-overview .detail-section .detail-inner > .line_grid > .line_item img { max-width: 200px; }


/* dot navigation */
.busi5-overview .section-dots { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 4px;
              /* 처음 숨김 */ opacity: 0; visibility: hidden;pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; }
.busi5-overview .section-dots.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.busi5-overview .section-dots .dot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: transparent; cursor: pointer;}
/* span 기본 상태 — 숨김 */
.busi5-overview .section-dots .dot span { font-size: 13px; font-weight: 700; color: #b3b3b3; white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;  pointer-events: none;}
/* dot 원형 버튼 — ::after 로 구현 */
.busi5-overview .section-dots .dot::after { content: ""; display: block; flex-shrink: 0; width: 8px; height: 8px; background: #bfbfbf; border-radius: 50%; transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease;}
/* 활성 dot — 크기와 색상 변경 */
.busi5-overview .section-dots .dot.focus::after { width: 12px; height: 12px; background: #243f8f;}
/* 활성(focus) dot — dot 크기/색상 + 라벨 표시 */
.busi5-overview .section-dots .dot.focus span { color: #243f8f; opacity: 1; transform: translateX(0);}
/* hover 시 라벨 표시 — .dot:hover span에 명시 */
.busi5-overview .section-dots .dot:hover span { opacity: 1; transform: translateX(0); color: #555;}
/* hover 시 dot 원 색상 살짝 강조 */
.busi5-overview .section-dots .dot:hover::after { background: #888;}

@media all and (max-width:1200px){
.busi5-overview .detail-section .detail-inner > .line_grid {grid-template-columns: repeat(4, 1fr);}  
}

/* 태블릿 */
@media (max-width: 1024px) {
.busi5-overview .fullsection { flex-direction: column; }
.busi5-overview .fullsection .fullsection-con, .busi5-overview .fullsection .fullsection-view { width: 100%; }
.busi5-overview .fullsection .fullsection-view { width: 100%; min-height: 420px; padding: 40px 20px 70px; }
.busi5-overview .detail-section .detail-inner .detail-content { flex-direction: column; }
.busi5-overview .section-dots { right: 12px; }
.busi5-overview .detail-section .detail-inner > .line_grid {grid-template-columns: repeat(3, 1fr);}  
}

/* 모바일 */
@media (max-width: 786px) {
  html, body { overflow-x: hidden; }
.busi5-overview .overview-section { display: block; min-height: auto; padding: 0 0 1%; }
.busi5-overview .fullsection .fullsection-con, .busi5-overview .fullsection .fullsection-view { display: block; }
.busi5-overview .fullsection .fullsection-con { padding: 18px 10px 0; }
.busi5-overview .fullsection .fullsection-view { width: 100%; min-height: auto; padding: 10px 0 0; }
.busi5-overview .fullsection .fullsection-con .overview-title-wrap h2 { margin-bottom: 12px; font-size: 28px; font-weight: 800; line-height: 1.1; }
.busi5-overview .fullsection .fullsection-con .overview-title-wrap .line { max-width: none; margin-bottom: 16px; background: #333; }
.busi5-overview .fullsection .fullsection-con .overview-menu { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: none; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item { margin-bottom: 0; border: 1px solid #d3d3d3; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-basic { min-height: 46px; padding: 0 14px; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-basic strong { color: #666; font-size: 16px; font-weight: 700; line-height: 1.6; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-basic .arrow { color: #9c9c9c; font-size: 24px; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-detail { padding: 0 3%; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-detail p{ display: none !important; }
.busi5-overview .fullsection .fullsection-con .overview-menu .menu-item .menu-detail .more-view-btn { padding:0; margin-left: -15px; border-bottom: 1px solid #fff;font-size: 14px; font-weight: 400;}
.busi5-overview .fullsection .fullsection-view .car-stage { width: 100%; max-width: none; min-height: auto; padding-top: 10px;  }
.busi5-overview .fullsection .fullsection-view .car-stage .car-image { display: block; width: 92%; max-width: none; margin: 0 auto; }
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-xs { width: 18px; height: 18px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-sm { width: 24px; height: 24px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-md { width: 34px; height: 34px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight.is-lg { width: 46px; height: 46px;}
.busi5-overview .fullsection .fullsection-view .car-stage .part-highlight .label { display:none; }
.busi5-overview .section-dots { top: 52%; right: 8px; gap: 10px; z-index: 9999; }
.busi5-overview .section-dots .dot span { display: inline-block; font-size: 11px; }
.busi5-overview .section-dots .dot.active span { opacity: 1;}
.busi5-overview .section-dots .dot::after { width: 8px; height: 8px;}
.busi5-overview .detail-section { padding: 10% 1%; }
.busi5-overview .detail-section .detail-inner { position: relative; z-index: 2; padding: 0 1%;}
.busi5-overview .detail-section .detail-inner .detail-head { margin-bottom: 18px;}
.busi5-overview .detail-section .detail-inner .detail-head .detail-kicker, .detail-head p { display: none;}
.busi5-overview .detail-section .detail-inner .detail-head h2 { margin-bottom: 12px; font-size: 2.2em; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.busi5-overview .detail-section .detail-inner .detail-content { display: block; margin-top: 0; }
.busi5-overview .detail-section .detail-inner .detail-content .detail-box { margin-bottom: 20px; padding: 10px; border-radius: 5px; }
.busi5-overview .detail-section .detail-inner .detail-content .detail-box h3 { margin-bottom: 8px; color: #777; font-size: 18px; font-weight: 600;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box ul { margin: 0; padding: 0; }
.busi5-overview .detail-section .detail-inner .detail-content .detail-box > ul > li { padding-left: 5px; font-size: 15px; line-height: 1.8;}
.busi5-overview .detail-section .detail-inner .detail-content .detail-box li::before { display: none; }
.busi5-overview .detail-section .detail-inner .detail-img .lview { display: none;}
.busi5-overview .detail-section .detail-inner .detail-img .sview { display: block;}
.busi5-overview .detail-section .detail-inner .con_arrow{font-size:1.4em;}
.busi5-overview .detail-section .detail-inner > .line_grid {grid-template-columns: repeat(2, 1fr);}
.busi5-overview .detail-section .detail-inner > .line_grid > .line_item img { max-width: 150px; }
}

@media (max-width: 480px) {
  .busi5-overview .fullsection .fullsection-view { width: 100%; }
  .busi5-overview .fullsection .fullsection-view .car-stage .car-image { width: 100%; max-width: 100%;}
}