/* BASIC css start */
.history {
  width: 100%;
  display: block;
  text-align: center;
}

.visual {
  position: relative;
  width: 100%;
  height: 490px;
  overflow: hidden;
  background: none !important;
  text-align: center;
  font-size: 0;
}

.visual > img {
  display: block;
  width: 2048px !important;
  max-width: none !important;
  height: 535px !important;
  margin-left: 50%;
  transform: translateX(-50%);
}

.sec_company_type {
  padding: 103px 0;
  background: #ffffff;
}

/* 상단 배너 아래 빈 구간만 줄이기 */
.visual + .sec_company_type {
  padding: 90px 0 !important;
}

.sec_company_type p {
  font-weight: 300;
  font-size: 13px;
  line-height: 40px;
  color: #000;
}

.mid_sec {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: url('/design/dint/newbird/company/brand_under-banner.jpg') 50% 0 repeat fixed;
  min-height: 730px;
}

/* 공통 */
.Lg {
  display: block;
}

.Md {
  display: none !important;
}

.full_col2 {
  width: 100%;
  font-size: 0;
}

.full_col2:after {
  display: block;
  content: '';
  clear: both;
}

/* 첫번째 회사소개 영역 */
#com1 {
  display: flex;
  align-items: center;
}

#com1 .left_col {
  width: 58%;
}

#com1 .right_col {
  width: 42%;
}

#com1 .company_text_wrap {
  padding-right: 30px;
  box-sizing: border-box;
}

.full_col2 .company_text_wrap {
  width: 100%;
  display: table;
}

.full_col2 .col_text_company {
  width: auto;
  display: table-cell;
  vertical-align: middle;
}

.full_col2 .col_text_company h3 {
  font-size: 16px;
  line-height: 24px;
  color: #282828;
  margin-bottom: 8px;
  font-weight: 400;
}

.full_col2 .col_text_company .ceo_title {
  margin-bottom: 52px;
}

.full_col2 .col_text_company p {
  font-size: 13px;
  line-height: 24px;
  font-weight: 300;
  color: #898989;
  margin-bottom: 40px;
}

.full_col2 .col_text_company p:last-child {
  margin-bottom: 0;
}

.full_col2 .col_text_company > img {
  display: block;
  margin: 0 auto 80px;
}

/* 첫 번째 회사소개 영역 - 중복 이미지 방지 + 글씨/사진 간격 조정 */
.history .full_col2#com1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 35px !important;
  font-size: 0;
  margin-bottom: 100px !important;
}

.history .full_col2#com1 > .left_col.Md {
  display: none !important;
}

.history .full_col2#com1 > .left_col:not(.Md),
.history .full_col2#com1 > .right_col.Lg {
  display: block !important;
  width: auto !important;
  float: none !important;
  font-size: 13px !important;
  vertical-align: top !important;
}

.history .full_col2#com1 > .left_col:not(.Md) {
  flex: 0 0 560px !important;
  max-width: 560px !important;
}

.history .full_col2#com1 > .right_col.Lg {
  flex: 0 0 420px !important;
  max-width: 420px !important;
}

.history .full_col2#com1 .company_text_wrap,
.history .full_col2#com1 .col_text_company {
  display: block !important;
  width: 100% !important;
}

.history .full_col2#com1 .right_col.Lg img {
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  margin: 0 !important;
}








/* DINT HISTORY - HORIZONTAL YEAR TIMELINE / SLIDE VERSION */






.dint_history_section {
  position: relative;
  padding: 10px 0 0px;
  background: #fff;
  overflow: hidden;
  text-align: left;
}




/* 슬라이드 영역 */
.dint_history_scroller {
  position: relative;
  width: 1320px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 70px 0 44px;
  box-sizing: border-box;
  cursor: grab;

  /* 양옆이 딱 잘린 느낌 말고, 자연스럽게 이어지는 느낌 */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 5%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 5%,
    #000 93%,
    transparent 100%
  );
}

.dint_history_scroller:active {
  cursor: grabbing;
}

/* 하단 슬라이드 힌트 */
.dint_history_scroller:after {
  content: "SCROLL  /  DRAG";
  position: sticky;
  left: calc(50% - 55px);
  bottom: 0;
  display: block;
  width: 120px;
  margin: 28px auto 0;
  padding-top: 18px;
  font-family: 'GeosansLight', 'Noto Sans KR', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #999;
  text-align: center;
  background: linear-gradient(to right, transparent, #b8b8b8, transparent) 50% 0 / 120px 1px no-repeat;
  animation: historyGuide 1.8s ease-in-out infinite;
}

@keyframes historyGuide {
  0% { opacity: .35; transform: translateX(-6px); }
  50% { opacity: 1; transform: translateX(6px); }
  100% { opacity: .35; transform: translateX(-6px); }
}

/* 스크롤바를 얇고 고급스럽게 */
.dint_history_scroller::-webkit-scrollbar {
  height: 3px;
}

.dint_history_scroller::-webkit-scrollbar-track {
  background: #eeeeee;
}

.dint_history_scroller::-webkit-scrollbar-thumb {
  background: #aaa;
}

/* 타임라인 실제 넓이 - 겹침 방지 위해 크게 */
.dint_history_stage {
  position: relative;
  width: 3300px;
  height: 820px;
  margin: 0;
}

/* 중앙 가로선 */
.dint_history_stage:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 410px;
  height: 1px;
  background: #d8d8d8;
}

/* 연도 아이템 */
.dh_event {
  position: absolute;
  left: var(--x);
  top: 0;
  width: var(--w, 210px);
  height: 820px;
  box-sizing: border-box;
}

/* 중앙 점 */
.dh_event:before {
  content: "";
  position: absolute;
  left: 0;
  top: 406px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8b8b63;
  border: 1px solid #8b8b63;
  z-index: 3;
}

/* 세로 연결선 */
.dh_event:after {
  content: "";
  position: absolute;
  left: 4px;
  width: 1px;
  background: #d8d8d8;
  z-index: 1;
}

.dh_event.is-up:after {
  top: calc(410px - var(--line));
  height: var(--line);
}

.dh_event.is-down:after {
  top: 410px;
  height: var(--line);
}

.dh_event.is-empty:after {
  display: none;
}

/* 텍스트 박스 */
.dh_box {
  position: absolute;
  left: 0;
  width: 100%;
}

.dh_event.is-up .dh_box {
  bottom: calc(410px + var(--line) + 18px);
}

.dh_event.is-down .dh_box {
  top: calc(410px + var(--line) + 18px);
}

.dh_event.is-empty .dh_box {
  display: none;
}

/* 연도 */
.dh_box h4 {
  margin: 0 0 8px;
  padding: 0;
  font-family: 'GeosansLight', 'Noto Sans KR', sans-serif;
  font-size: 29px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .8px;
  color: #111;
}

/* 내용 */
.dh_box p {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.58;
  letter-spacing: -0.04em;
  color: #555;
  word-break: keep-all;
}

/* 기존 inline 위치값을 CSS에서 강제로 재배치 - 겹침 방지 */
.dh_event:nth-child(1)  { --x: 40px !important;   --line: 105px !important; --w: 210px !important; }
.dh_event:nth-child(2)  { --x: 220px !important;  --line: 115px !important; --w: 210px !important; }
.dh_event:nth-child(3)  { --x: 400px !important;  --line: 150px !important; --w: 255px !important; }
.dh_event:nth-child(4)  { --x: 610px !important;  --line: 140px !important; --w: 240px !important; }
.dh_event:nth-child(5)  { --x: 820px !important;  --line: 105px !important; --w: 215px !important; }
.dh_event:nth-child(6)  { --x: 1000px !important; }
.dh_event:nth-child(7)  { --x: 1130px !important; --line: 135px !important; --w: 250px !important; }
.dh_event:nth-child(8)  { --x: 1370px !important; --line: 145px !important; --w: 280px !important; }
.dh_event:nth-child(9)  { --x: 1620px !important; --line: 135px !important; --w: 260px !important; }
.dh_event:nth-child(10) { --x: 1840px !important; --line: 125px !important; --w: 245px !important; }
.dh_event:nth-child(11) { --x: 2060px !important; --line: 140px !important; --w: 245px !important; }
.dh_event:nth-child(12) { --x: 2290px !important; --line: 120px !important; --w: 250px !important; }
.dh_event:nth-child(13) { --x: 2500px !important; --line: 150px !important; --w: 210px !important; }
.dh_event:nth-child(14) { --x: 2690px !important; --line: 115px !important; --w: 230px !important; }
.dh_event:nth-child(15) { --x: 2900px !important; --line: 150px !important; --w: 255px !important; }
.dh_event:nth-child(16) { --x: 3150px !important; --line: 120px !important; --w: 260px !important; }
.dh_event:nth-child(17) { --x: 3400px !important; --line: 155px !important; --w: 270px !important; }
.dh_event:nth-child(18) { --x: 3680px !important; --line: 135px !important; --w: 330px !important; }
.dh_event:nth-child(19) { --x: 4000px !important; --line: 120px !important; --w: 245px !important; }
.dh_event:nth-child(20) { --x: 4240px !important; --line: 115px !important; --w: 240px !important; }

/* stage 넓이도 마지막 연도까지 맞춤 */
.dint_history_stage {
  width: 4540px;
}

/* 모바일 */
@media screen and (max-width: 768px) {
  .dint_history_section {
    padding: 80px 24px 90px;
  }

  .dint_history_title {
    width: auto;
    max-width: none;
    margin: 0 0 55px;
    text-align: center;
  }

  .dint_history_title strong {
    font-size: 19px;
    letter-spacing: 5px;
  }

  .dint_history_title span {
    font-size: 10px;
    letter-spacing: 4px;
  }

  .dint_history_scroller {
    width: auto;
    max-width: none;
    overflow: visible;
    padding: 0;
    cursor: default;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .dint_history_scroller:after {
    display: none;
  }

  .dint_history_stage {
    width: auto;
    height: auto;
    padding-left: 24px;
  }

  .dint_history_stage:before {
    left: 4px;
    top: 0;
    bottom: 0;
    right: auto;
    width: 1px;
    height: auto;
  }

  .dh_event {
    position: relative;
    left: auto !important;
    top: auto;
    width: auto !important;
    height: auto;
    margin-bottom: 38px;
    padding-left: 22px;
  }

  .dh_event.is-empty {
    display: none;
  }

  .dh_event:last-child {
    margin-bottom: 0;
  }

  .dh_event:before {
    left: -24px;
    top: 7px;
    width: 9px;
    height: 9px;
  }

  .dh_event:after {
    display: none;
  }

  .dh_box,
  .dh_event.is-up .dh_box,
  .dh_event.is-down .dh_box {
    position: static;
    width: auto;
  }

  .dh_box h4 {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .dh_box p {
    font-size: 12px;
    line-height: 1.75;
  }
}








/* ================================
   DINT HISTORY DRAG / AUTO SAFE
   그래프 구조 건드리지 않는 추가 코드
================================ */

.dint_history_section {
  position: relative !important;
}

/* 마우스로 잡고 끄는 느낌 */
.dint_history_scroller {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  scroll-behavior: auto !important;
}

.dint_history_scroller.is-dragging {
  cursor: grabbing !important;
}

/* 드래그 중 글자 선택 방지 */
.dint_history_scroller.is-dragging,
.dint_history_scroller.is-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* 기존 SCROLL / DRAG 문구는 숨김 */
.dint_history_scroller:after {
  display: none !important;
  content: none !important;
}

/* 좌우 화살표 */
.history_drag_arrow {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 38px;
  height: 58px;
  margin-top: -29px;
  border: 0;
  background: transparent;
  font-family: 'GeosansLight', 'Noto Sans KR', sans-serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 58px;
  color: rgba(0, 0, 0, 0.24);
  cursor: pointer;
  animation: dintHistoryArrowBlink 1.8s ease-in-out infinite;
}

.history_drag_prev {
  left: 35px;
}

.history_drag_next {
  right: 35px;
}

.history_drag_arrow:hover {
  color: rgba(0, 0, 0, 0.45);
}

/* 은은한 깜빡임 */
@keyframes dintHistoryArrowBlink {
  0% {
    opacity: 0.18;
    transform: translateX(0);
  }
  50% {
    opacity: 0.62;
    transform: translateX(0);
  }
  100% {
    opacity: 0.18;
    transform: translateX(0);
  }
}

/* 오른쪽으로 더 있다는 느낌 */
.dint_history_section:after {
  content: "";
  position: absolute;
  right: 0;
  top: 80px;
  bottom: 80px;
  width: 120px;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
  z-index: 10;
  pointer-events: none;
}

/* 화살표는 페이드보다 위 */
.history_drag_arrow {
  z-index: 40;
}

/* 모바일에서는 자동/화살표 숨김 */
@media screen and (max-width: 768px) {
  .history_drag_arrow {
    display: none !important;
  }

  .dint_history_section:after {
    display: none !important;
  }
}


/* 히스토리 영역 위 공백 강제 축소 */
.history .full_col2#com1 {
  margin-bottom: 0 !important;
}

/* 대표 소개 영역 바로 다음 히스토리 섹션을 위로 당김 */
.history .full_col2#com1 + .dint_history_section {
  margin-top: -40px !important;
}

/* 히스토리 내부 위쪽 여백도 줄임 */
.dint_history_section {
  padding-top: 0 !important;
}

.dint_history_scroller {
  padding-top: 20px !important;
}
/* BASIC css end */