/* ============================================================
   두리시스템(디알원탑) 서브 페이지 CSS
   피그마 시안 기준: 2026-04-16
   차은주 이사 검수 피드백 반영
   ============================================================ */
/* ── Sub Visual Banner (피그마: 1920x400, 타이틀 중앙정렬) ── */
.sub-visual {
    height: 400px !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.sub-visual.visual-01 {
    background-image: url('/images/sub/company/subvisual.png') !important;
}
.sub-visual.visual-02 {
    background-image: url('/images/sub/product/subvisual.png') !important;
}
.sub-visual.visual-03 {
    background-position: center 30% !important;
    background-image: url('/images/sub/pr/subvisual.png') !important;
}
.sub-visual.visual-04 {
    background-position: center 40% !important;
    background-image: url('/images/sub/support/subvisual.png') !important;
}
.sub-visual.visual-05 {
    background-image: url('/images/sub/company/subvisual.png') !important;
}
.sub-visual.visual-00 {
    background-image: url('/images/sub/company/subvisual.png') !important;
}
.sub-visual .container {
    text-align: center !important;
    margin-top: 0 !important;
}
.sub-visual h1 {
    font-family: 'SUIT', sans-serif !important;
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}
@media screen and (min-width: 1200px){
	.sub-visual h1 {
		font-size: 60px !important;
	}
}
.sub-visual p.mb-0 {
    display: none !important;
}
/* 브레드크럼 표시 */
.sub-visual .location {
    display: block !important;
    margin-top: 16px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
.sub-visual .location ul { opacity: 0.9; }
.sub-visual .location ul li::after { display: none !important; }
.sub-visual .location ul li { margin-right: 4px !important; }
.sub-visual .location ul li:not(:last-child)::after {
    content: ">" !important;
    font-family: 'SUIT', sans-serif !important;
    margin-left: 4px !important;
    display: inline !important;
}
/* ── SNB 스타일 (피그마 기준 간결하게) ── */
#snb { border-bottom: 1px solid #e5e5e5; }
#snb .snb-list { justify-content: flex-start; }
#snb .snb-list li a {
    padding: 16px 28px !important;
    font-family: 'SUIT', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666 !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.3s !important;
    white-space: nowrap !important;
}
#snb .snb-list li a:hover,
#snb .snb-list li.active a {
    color: #159dd4 !important;
    font-weight: 700 !important;
    border-bottom-color: #159dd4 !important;
}
/* ── Content 공통 ── */
.sub-content {
    max-width: 1360px;
    margin: 0 auto;
    padding-left:4%;
    padding-right:4%;
	word-break:keep-all;
}
@media screen and (min-width: 1200px){
	.sub-content {
		padding-left:20px;
		padding-right:20px;
	}
}
.sub-content .page-title {
    font-family: 'SUIT', sans-serif;
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 800;
    color: #000;
    margin-bottom: 24px;
    text-align: center;
}
@media screen and (min-width: 1200px){
	.sub-content .page-title {
		font-size: 48px;
	}
}
.sub-content .page-desc {
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-bottom: 60px;
    text-align: center;
}
@media screen and (min-width: 1200px){
	.sub-content .page-desc {
		font-size: 18px;
	}
}
/* ── 이미지 영역 ── */
.sub-content .img-area {
    width: 100%;
    height: 500px;
    margin-bottom: 40px;
    overflow: hidden;
    background: #d9d9d9;
}
.sub-content .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ── 섹션 제목 ── */
.sub-content .section-title {
    font-family: 'SUIT', sans-serif;
    font-size: calc(1.325rem + .9vw);
    font-weight: 800;
    color: #000;
    margin-top: 60px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #000;
}
@media screen and (min-width: 1200px){
	.sub-content .section-title {
		font-size: 32px;
	}
}
/* ── 정보 테이블 ── */
.info-table {
    width: 100%;
}
/* 2단 레이아웃 */
.info-table--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 60px;
}
.info-table--two-col .info-col {
    min-width: 0;
}
.info-row {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 0;
}
.info-label {
    flex: 0 0 145px;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
@media screen and (min-width: 1200px){
	.info-label {
		font-size: 18px;
	}
}
.info-value {
    flex: 1;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
}
@media screen and (min-width: 1200px){
	.info-value {
		font-size: 18px;
	}
}
.info-value.dot > div {
	position:relative;
	padding-left:28px;
}
.info-value.dot > div::before {
	position:absolute;
	content:"";
	width:4px;
	height:4px;
	border-radius:50%;
	background:#000000;
	top:12px;
	left:11px;
}
.info-value a {
    color: #159dd4;
    text-decoration: none;
}
.info-value a:hover {
    text-decoration: underline;
}
.info-row-btn {
    border-bottom: none;
    padding-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.btn-quickmap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #159dd4;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 4px;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-quickmap:hover {
    background: #1280b0;
    color: #fff;
}
/* ── 지도 영역 ── */
.map-area {
    width: 100%;
    height: 500px;
    margin-bottom: 40px;
    background: #d9d9d9;
    overflow: hidden;
}
.map-area iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
/* ── 연혁 타임라인 ── */
.timeline-section .page-title {
    text-align: center;
    margin-bottom: 60px;
}
.timeline-wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e5e5;
    transform: translateX(-50%);
}
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.timeline-item {
    position: relative;
    display: flex;
    margin-bottom: 50px;
}
.timeline-item.left .timeline-body {
    width: 45%;
    text-align: right;
    padding-right: 40px;
}
.timeline-item.right .timeline-body {
    width: 45%;
    margin-left: 55%;
    text-align: left;
    padding-left: 40px;
}
/* 연혁 마커: 피그마 기준 흰색 fill + 파란 border (#159dd4) */
.timeline-marker {
    position: absolute;
    left: 50%;
    top: 5px;
    width: 11px;
    height: 11px;
    background: #fff;
    border: 2px solid #159dd4;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.timeline-year {
    font-family: 'SUIT', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin-bottom: 8px;
}
.timeline-desc {
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    line-height: 1.8;
}
/* ── 조직도 ── */
.orgchart-section {
    text-align: center;
    padding: 80px 20px;
}
.orgchart {
    max-width: 1000px;
    margin: 0 auto;
}
/* 대표이사 */
.org-ceo { margin-bottom: 30px; }
.org-box.ceo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background: #1f2c6d;
    color: #fff;
    font-family: 'SUIT', sans-serif;
    font-size: 22px;
    font-weight: 700;
    border-radius: 0;
}
/* 사이드 (해외기술영업팀 + 관리부) */
.org-side {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}
.org-box.side, .org-box.side-mgmt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: #2c2c2c;
    color: #fff;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}
.org-box.side-mgmt { background: #7e839b; }
.side-sub {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
/* 사업부 */
.org-connector {
    width: 2px;
    height: 30px;
    background: #ccc;
    margin: 0 auto 20px;
}
.org-departments {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.org-dept-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.org-box.dept {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: #7e839b;
    color: #fff;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}
.org-teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.org-team {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    background: #dbdce4;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #666;
}
/* ── 제품 상세 ── */
.product-detail .page-title {
    margin-bottom: 24px;
}
.product-detail .page-title .accent {
    color: #159dd4;
}
.product-detail .page-desc {
    margin-bottom: 60px;
}
.product-gallery {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.product-gallery .gallery-item {
    flex: 1;
    height: 500px;
    overflow: hidden;
    background: #d9d9d9;
}
.product-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ── 게시판 공통 ── */
/* 게시판 영역 배경 흰색 */
#Board { background: #fff; }
#Board .board-list { background: #fff; }
/* 게시판 상단 중복 제목+로케이션 숨김 */
.board-form .board-title-area,
.bbs-header,
#content > .container > h3:first-child,
    display: none !important;
}
/* ── 반응형 ── */
@media (max-width: 992px) {
    .sub-content .img-area { height: 300px; }
    .map-area { height: 350px; }
    .info-row { flex-direction: column; gap: 8px; }
    .info-label { flex: none; }
    .info-table--two-col { grid-template-columns: 1fr; gap: 0; }
    /* 타임라인 단일 컬럼 */
    .timeline-line { left: 20px; }
    .timeline-item.left .timeline-body,
    .timeline-item.right .timeline-body {
        width: auto;
        margin-left: 50px;
        text-align: left;
        padding: 0;
    }
    .timeline-marker { left: 20px; }
    /* 조직도 */
    .org-departments { flex-direction: column; align-items: center; }
    .org-side { flex-direction: column; align-items: center; }
    /* 제품 갤러리 */
    .product-gallery { flex-direction: column; }
    .product-gallery .gallery-item { height: 250px; }
}
@media (max-width: 576px) {
    .sub-content .img-area { height: 200px; }
    .map-area { height: 250px; }
}
/* ── 파트너 로고 바 숨김 (서브 페이지에서) ── */
.banner-section { display: none !important; }
/* ── AOS 초기 상태 강제 표시 (스크린샷/인쇄 대응) ── */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition-property: none !important;
}
/* ── 브레드크럼 표시 강화 ── */
.sub-visual .location {
    display: flex !important;
    justify-content: center !important;
}
.sub-visual .location ul {
    opacity: 1 !important;
    gap: 0 !important;
}
.sub-visual .location ul li {
    color: rgba(255,255,255,0.85) !important;
    font-size: 16px !important;
}
.sub-visual .location ul li:not(:last-child)::after {
    content: '>' !important;
    font-family: 'SUIT', sans-serif !important;
    font-size: 14px !important;
    margin: 0 6px !important;
    display: inline !important;
    position: static !important;
}
.sub-visual .location .loc_home {
    display: inline !important;
}
.sub-visual .location .icon_home {
    display: none !important;
}
/* ── SNB 탭 바 숨김 ── */
#snb, #mSnb { display: none !important; }
/* ── 문의하기 버튼 숨김 ── */
.btn-header, .header .btn[href*='contact'] { display: none !important; }
.header .nav-list + .btn, .header .d-flex > a.btn { display: none !important; }
/* ── 스크롤탑 버튼 표시 ── */
.btn-scroll-top {
    display: flex !important;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 74px;
    height: 74px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    z-index: 999;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
/* ── 주요사업분야 불릿 ── */
.info-value br + br { display: none; }

/* ── 제품 이미지 갤러리 (피그마: 상단1장 + 하단2장) ── */
.drot-product-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    max-width: 1320px;
}
@media (max-width: 768px) {
	.drot-product-gallery {
		grid-template-columns: 1fr;
	}
}
.drot-product-gallery .gallery-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* 게시판 section-header 숨김 (서브비주얼과 중복) */
.board-section .section-header { display: none !important; }


/* 게시판 본문 여백 - 서브페이지와 동일하게 */
.board-section { padding-top: 150px !important; padding-bottom: 180px !important;}
@media (max-width: 1200px) {
	.board-section { padding-top: 100px !important; padding-bottom: 120px !important;}
}


/* ══════════════════════════════════════════════════════
   모바일 수정 (2026-04-19)
   ══════════════════════════════════════════════════════ */

/* 1. 헤더 배경: mega-menu-fix.css의 transparent 오버라이드
      #header (ID 선택자) 명시도 0,1,0,0 → .header:not(.isFixed)(0,0,2,0) 이김 */
@media (max-width: 992px) {
  #header.header {
    background: rgba(31,44,109,0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: none !important;
  }
  #header.header .btn-trigger {
    display: block !important;
    color: #fff !important;
    font-size: 24px !important;
  }
  #header.header .btn-trigger .bi {
    color: #fff !important;
  }
  #header.header .navbar-brand .logo-wh {
    display: inline-block !important;
  }
  #header.header .navbar-brand .logo-dark {
    display: none !important;
  }
}





/* 4. 서브비주얼 전체 너비 + 애니메이션 즉시 표시 */
@media (max-width: 992px) {
  .sub-visual {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .sub-visual .container {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    margin-top: 0 !important;
  }
  .sub-visual .location {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* 5. 서브비주얼 높이 조정 */
@media (max-width: 576px) {
  
}

/* 6. 로고 max-width 보장 */
@media (max-width: 992px) {
  .navbar-brand img {
    max-width: 180px !important;
    height: auto !important;
    max-height: 40px !important;
  }
}

/* ══════════════════════════════════════════════
   수평 오버플로 수정 (2026-04-19)
   원인: page-title white-space:nowrap + 48px
   ══════════════════════════════════════════════ */

/* 전역: 수평 오버플로 차단 */


/* page-title: nowrap 강제 해제 (sub-pages.css가 basic.css보다 나중 로드 -> !important 우선) */
.sub-content .page-title {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
}

/* 모바일: page-title 폰트 추가 안전장치 */
@media (max-width: 992px) {
  
  /* 헤더 컨테이너 오버플로 차단 */
  .header .gnb .container,
  .header .d-flex {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* nav-list 완전 차단 */
  .gnb .nav-list {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}
@media (max-width: 576px) {
  
}