* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  color: #111111;
  word-break: keep-all;
  max-width: 100%;
  /* overflow-x: hidden; */
  line-height: 154%;
  /* 35px */
  letter-spacing: -1.25px;
}

:root {
  --font-size--small: 13px;
  --font-size--medium: 20px;
  --font-size--large: 36px;
  --font-size--x-large: 42px;

}

@font-face {
  font-family: 'Kakao-Regular';
  src: url('./fonts/KakaoBigSans-Regular.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Kakao-Bold';
  src: url('./fonts/KakaoBigSans-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Kakao-EBold';
  src: url('./fonts/KakaoBigSans-ExtraBold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@media all and (max-width: 1480px) {
  html {
    font-size: 0.06756756756756757vw;
  }
}

@media all and (max-width: 1023px) {
  html {
    font-size: 0.09775171065493645vw;
  }
}

@media all and (max-width: 860px) {
  html {
    font-size: 0.13020833333333335vw;
  }
}

@media all and (max-width: 540px) {
  html {
    font-size: 0.26666666666666665vw;
  }
}

html,
body {
  overflow-x: hidden;
  /* 가로 스크롤 방지 */
  max-width: 100%;
  /* 가로 크기 제한 */
  font-size: 6.25%
}

body {
  font-family: 'Kakao-Regular';
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

li,
ul {
  list-style: none;
  display: block;
}

a {
  text-decoration: none;
}

button {
  display: block;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

section {
  width: 100%;
  margin: 0 auto;
}

article {
  width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 44px;
  font-family: 'Kakao-Bold';
  text-align: center;
}

h5 {
  color: #555;
}

h5,
p {
  font-size: 18px;
}

article {
  padding: 120px 0;
}

.mo {
  display: none;
}

.pc {
  display: block;
}

/* 탑버튼 */
.btn_gotop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 999;
  outline: none;
  color: #333;
  cursor: pointer;
  text-align: center;
}

.btn_gotop .glyphicon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 70px;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.25);
}

.btn_gotop p {
  margin-top: 4px;
  font-size: 14px;
}

.btn_gotop .glyphicon:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.contents {
  margin-top: 98px;
}

/* ============== header ============== */
#header {
  width: 100%;
  margin: 0 auto;
  position: relative;
  /* 초기 상태는 일반 흐름으로 설정 */
  background-color: #fff;
  z-index: 1000;
  border-bottom: 1px solid #f5f5f5;
}

#header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header ul {
  width: 1200px;
  padding: 16px 0 0;
  display: flex;
  margin: 0 auto;
  align-items: center;
}

header ul .logo {
  width: 180px;
  overflow: hidden;
  padding-bottom: 16px;
  cursor: pointer;
}

header ul .menuList {
  width: 100%;
  display: flex;
  justify-content: center;


}

header ul .menuList a {
  width: 123px;
  padding: 6px 20px 10px;
  cursor: pointer;
  text-align: center;
}

header ul .menuList a:hover {
  font-weight: 600;
  color: #002F7B;
}

.menuList .menu-item.active {
  color: #002F7B;
  /* 활성화된 항목 색상 */
  font-weight: 600;
  border-bottom: 2px solid #002F7B;
}

/* ============== main ============== */
.main h1 {
  margin: 0 auto 30px;
  text-align: center;
}

.main h5 {
  text-align: center;
  margin: 0 auto;
}

.main article {
  padding-bottom: 0;
}

.slider {
  position: relative;
  width: 100%;
  height: clamp(180px, 30vw, 440px);
  /* 반응형 높이 */
  overflow: hidden;
  margin-bottom: 120px;
}

.slider-track:nth-child(2) {
  display: none;
}

.slider-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: var(--gap, 30px);
  will-change: transform;
  /* animation: marquee var(--duration, 10s) linear infinite; */

}

.slider-track:nth-child(2) {
  /* 두 번째 트랙은 오른쪽으로 한 트랙만큼 밀어두기 */
  left: 100%;
  animation-delay: calc(var(--duration, 10s) / -2);
}

.slider-track li {
  flex: 0 0 calc((100% - (var(--gap, 30px) * 2)) / 3);
  /* 3개가 가로폭에 딱 들어가도록 계산 */
  aspect-ratio: 476 / 340;
}

.slider-track img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3) 애니메이션 */
/* @keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
} */

/* ============== service ============== */
.service {
  background-color: #fafafa;
}

.service .service-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
  justify-content: space-between;
}

/* ============== history ============== */
.history-wrap {
  display: flex;
  width: 100%;
  height: 600px;
}

/* 좌측 텍스트 영역 (테스트용) */
.left-image {
  position: sticky;
  top: 100px;
  width: 49%;
}

.left-image h4 {
  font-family: 'Kakao-Bold';
  font-size: 34px;
  margin: 80px 0 30px;
}

.left-image p {
  color: #555;
}

.left-image .year-text {
  width: 80%;
}

.left-image .h25,
.left-image .h19 {
  display: none;
}

.left-image .h25.visible,
.left-image .h19.visible {
  /* ‘visible’ 클래스가 붙으면 보이도록 */
  display: block;
}

/* 우측 타임라인 영역 */
.right-timeline {
  flex: 2;
  overflow-y: auto;
  padding-right: 30px;
  transform: scaleX(-1);
}

.right-timeline ul {
  transform: scaleX(-1);
}

.right-timeline li {
  margin-bottom: 80px;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.year {
  font-size: 24px;
  font-family: 'Kakao-Bold';
  color: #3366ff;
}

.events p {
  margin: 0 0 20px;
  font-size: 14px;
  color: #555;
}

.events p b {
  font-family: 'Kakao-Bold';
  color: #111;
  font-size: 24px;
  margin-right: 6px;
}

/* 스크롤바 커스터마이징 (옵션) */
.right-timeline::-webkit-scrollbar {
  width: 4px;
}

.right-timeline::-webkit-scrollbar-thumb {
  background: #3366ff;
  border-radius: 4px;
}

.right-timeline::-webkit-scrollbar-track {
  background: #ccc;
}

/* ============== message ============== */
.message>article {
  padding-bottom: 0;
}

.message .message-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.message .message-wrap li {
  width: 49%;
}

.message .message-wrap .bg_img {
  height: 70%;
}

.message .message-wrap .text {
  padding-bottom: 130px;
}

.message .message-wrap .text h4 {
  text-align: right;
  font-size: 24px;
  font-family: 'Kakao-Bold';
}

.message .message-wrap .text p:first-child {
  margin-top: 38px;
}

.message .message-wrap .text p {
  text-align: right;
  margin-top: 30px;
}

.message .blueLine {
  padding: 15px 0 0;
  background-color: #103FCD;
}

.message .blueLine article {
  margin-bottom: 0 0 120px;
  padding: 0;
  position: relative;
}

.message .blueLine ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 15px;
}

.message .blueLine li:first-child {
  display: flex;
  gap: 12px;
}

.message .blueLine li p {
  color: #fff;
  font-size: 16px;
}

.message .blueLine li:last-child {
  width: 70px;
}

.message .ceoimg {
  position: absolute;
  left: 30px;
  bottom: 0;
}

/* ============== client ============== */
.client .container {
  width: 100%;
}

.client ul.tabs {
  margin: 0px 0 50px;
  padding: 0px;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.client ul.tabs li {
  background: #F1EFEF;
  color: #868282;
  display: inline-block;
  padding: 8px 45px;
  cursor: pointer;
  font-size: 20px;
  min-width: 150px;
  text-align: center;
  border-radius: 50px;
}

.client ul.tabs li:last-child {
  margin-right: 0;
}

.client ul.tabs li.current {
  background: #3366ff;
  color: #fff;
}

.client .tab-content {
  display: none;
  padding: 15px;
}

.client .tab-content.current {
  display: inherit;
}

/* ============== person ============== */
.person h1 {
  margin-bottom: 30px;
}

.person h5 {
  text-align: center;
}

.person .pc {
  display: flex;
  justify-content: space-between;
}

.person .pc li {
  width: calc(100% / 3);
}

/* ============== downlode ============== */
.downlode {
  position: relative;
  z-index: 0;
  background-color: #001E79;
  padding: 50px 0;
}

.downlode::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url(./img/com_downBg2.png) center/cover no-repeat,
    #001E79;
  background-blend-mode: hard-light;
  z-index: -1;
  opacity: 0.5;
}

.downlode h1 {
  margin-bottom: 30px;
  color: #fff;
}

.downlode h5 {
  text-align: center;
  color: #fff;
}

.downlode button {
  padding: 12px 24px;
  background-color: #fff;
  margin: 50px auto 0;
  border-radius: 50px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
  transition:
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.downlode button:hover {
  /* 그림자 낮추고 */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  /* 아래로 2px 이동 */
  transform: translateY(2px);
}

.downlode button:active {
  /* 클릭(press) 상태에서는 더 깊이 눌린 느낌 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(4px);
}

.downlode button a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.downlode button p {
  font-size: 18px;
  color: #111;
  font-family: 'Kakao-Bold';
}

.downlode button span {
  width: 22px;
}

/* ============== load ============== */
.load {
  background-color: #fafafa;
}

.load h1 {
  margin-bottom: 30px;
  text-align: center;
}

.load h5 {
  text-align: center;
}

.load {
  width: 100%;
  cursor: pointer;
}

.load .contents {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.load .loadWrap {
  width: 100%;
}

.load .loadWrap ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.load .loadWrap ul li div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.load .loadWrap ul:first-child {
  margin-bottom: 38px;
}

.load .loadWrap ul li:first-child {
  font-size: 18px;
  padding: 0 0 4px 6px;
  border-bottom: 1px solid #E6E6E6;
  font-family: 'Kakao-Bold';
  margin-top: 0;
}

.load .loadWrap li span {
  word-wrap: 16px;
}

.load .loadWrap li p {
  font-size: 17px;
  color: #555;
}

.load .loadWrap li b {
  font-size: 17px;
  font-family: 'Kakao-Bold';
}


.load .loadWrap .left li ul b,
.load .loadWrap .left li ul p {
  color: #555;
}

.load .loadWrap ul li p br {
  display: none;
}

.load .section_address,
.root_daum_roughmap .wrap_controllers {
  display: none;
}

.load .root_daum_roughmap {
  margin: 0 auto;
}


footer {
  background-color: #fff;
}

footer section {
  padding: 15px 0;
}

footer section.top1 {
  border-top: 1px solid #DFDFDF;
  border-bottom: 1px solid #DFDFDF;
}

footer article {
  padding: 0;
}

footer .top1 article {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer .top1 article .logowrap {
  display: flex;
  align-items: center;
}

footer .top1 article .logowrap .logo {
  width: 116px;
  height: auto;
  margin: 0px 34px 0px 0px;
}

footer .top1 article .logotext {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer .top1 .pc {
  display: block;
  display: flex;
  justify-content: space-between;
}

footer .top1 .mo {
  display: none;
}

footer .top1 article .logotext p {
  font-size: 16px;
  color: #111;
  font-weight: 500;
}

footer .top1 article .logotext span {
  font-size: 12px;
  margin: 0 20px;
  color: #111;
  font-weight: 500;
}

footer .top1 article .sns {
  display: flex;
  align-items: center;
}

footer .top1 article .sns span {
  width: 22px;
  height: 22px;
  margin: 0px 22px 0px 0px;
  cursor: pointer;
}

footer .top1 article .sns .youtube {
  background-image: url(./img/new_img/youtube.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

footer .top1 article .sns .youtube:hover {
  background-image: url(./img/new_img/youtube_h.png);
}

footer .top1 article .sns .face-book {
  background-image: url(./img/new_img/face-book.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

footer .top1 article .sns .face-book:hover {
  background-image: url(./img/new_img/face-book_h.png);
}

footer .top1 article .sns .insta {
  background-image: url(./img/new_img/insta.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

footer .top1 article .sns .insta:hover {
  background-image: url(./img/new_img/insta_h.png);
}

footer .top1 article .sns .blog {
  background-image: url(./img/new_img/blog.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

footer .top1 article .sns .blog:hover {
  background-image: url(./img/new_img/blog_h.png);
}

@media all and (max-width: 1200px) {
  article {
    width: 90%;
    margin: 0 auto;
  }

  header ul {
    width: 90%;
  }

  header ul {
    flex-direction: column;
  }

  header ul .menuList {
    /* 가운데 정렬 대신 왼쪽 정렬 */
    justify-content: flex-start;
  }
.downlode h5 {width: 90%;margin: 0 auto;}
  .load .loadWrap ul li p br {
    display: block;
  }

  .btn_gotop {
    right: 20px;
  }
}

@media all and (max-width: 1023px) {
  article {
    padding: 90px 0;
  }

  .slider {
    margin: 0 0 90px;
  }

  .message .blueLine article {
    margin-bottom: 90px;
  }
}

@media all and (max-width: 860px) {
  h1 {
    font-size: 36px;
  }

  .mo {
    display: block;
  }

  .pc {
    display: none;
  }

  .contents {
    margin-top: 44px;
  }

  .slider {
    --duration: 8s;
    --gap: 20px;
    height: clamp(150px, 25vw, 300px);

  }

  .slider-track:nth-child(2) {
    display: none;
  }


  .service .service-wrap {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 24px;
  }

  .load .contents {
    flex-direction: column;
  }

  .load .loadWrap {
    gap: 00%;
    flex-direction: column;
    margin-top: 40px;
  }

  .load .loadWrap ul li:first-child {
    font-size: 20px;
  }

  .person .pc {
    display: none;
  }

  .person .mo {
    display: block;
  }

  .person .mo li {
    margin-bottom: 24px;
  }

  .person .mo li img {
    border-radius: 10px;
  }

  .downlode h1 {
    margin-bottom: 24px;
  }

  .downlode button {
    margin: 44px auto 0;
  }

  footer .top1 .pc {
    display: none;
  }

  footer .top1 .mo {
    display: block;
  }

  footer .top1 .mo .logowrap {
    display: flex;
    justify-content: space-between;
  }

  footer .top1 .mo .logowrap .logo {
    width: 100px;
  }

  footer .top1 .mo .logotext p {
    font-size: 12px;
  }

  footer .top1 .mo .logotext {
    margin-top: 12px;
  }

  footer .top1 article .logotext span {
    font-size: 10px;
    margin: 0 10px;
    font-weight: 400;
  }

}

@media all and (max-width: 540px) {
  h1 {
    font-size: 24px;
  }

  h5,
  p {
    font-size: 17px;
  }

  header {
    width: 100%;
  }

  header ul {
    width: 100%;
  }

  header ul .menuList {
    flex: 1 1 auto;
    /* 남은 공간 차지 */
    width: auto;
    /* width:100% 제거 */
    overflow-x: auto;
    /* 가로 스크롤만 */
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* iOS 부드러운 스크롤 */
  }

  header ul .menuList::-webkit-scrollbar {
    display: none;
  }

  /* 3) 아이템들은 고정 크기가 아니라 최소 크기로 */
  header ul .menuList a {
    /* 늘어나거나 줄어들지 않도록 */
    display: inline-block;
    padding: 6px 20px 10px;
  }

  .slider {
    --duration: 6s;
    --gap: 12px;
    height: clamp(150px, 50vw, 240px);
  }

  .slider-track li {
    /* 기존: calc((100% - gap*2) / 3) */
    /* 수정: 절반(2장) 보여주되 간격 유지 */
    flex: 0 0 clamp(160px, 70vw, 360px);
  }


  .history-wrap {
    flex-direction: column;
  }

  .right-timeline li {
    gap: 12px;
  }

  .message .message-wrap li {
    width: 100%;
  }

  .events p b {
    font-size: 20px;
  }

  .message .message-wrap {
    flex-direction: column-reverse;
  }

  .message .message-wrap .text h4 {
    text-align: center;
    font-size: 20px;
  }

  .message .message-wrap .text p {
    text-align: center;
  }

  .message .blueLine ul {
    gap: 8px;
  }

  .message .blueLine li:first-child {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .message .ceoimg {
    left: 0;
    width: 64%;
  }

  .message .message-wrap .text p br {
    display: none;
  }

  .left-image {
    width: 100%;
  }

  .left-image h4 {
    font-size: 24px;
    margin: 30px 0 24px;
    text-align: center;
  }

  .left-image p {
    text-align: center;
  }

  .left-image .year-text {
    width: 80%;
    margin: 0 auto;
  }

  .client ul.tabs li {
    padding: 8px 0px;
    min-width: 100px;
    font-size: 18px;
  }

  .right-timeline {
    margin-top: 40px;
    height: 600px;
  }

  .right-timeline li {
    margin-bottom: 50px;
  }
.downlode::before {
    /* 이미지 레이어의 위치 변경: 가로 중앙, 세로 60% */
    background-image: url(./img/com_downBg.png);
  }
  /* .load .loadWrap ul li {flex-direction: column;align-items: flex-start;} */
  .load .loadWrap ul li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* 자식 요소들이 줄 바꿈 가능하도록 */
    gap: 8px;
    /* 요소 간 간격 조절 */
    margin-top: 20px;
  }

  /* <p>만 한 줄 전체 너비로 띄워 다음 줄에 배치 */
  .load .loadWrap ul li p {
    flex-basis: 100%;
    margin: 4px 0 0;
    /* 위쪽 여백만 살짝 추가 */
  }

}