.gnb-list > li:nth-child(1) { font-weight: 900; }

.about-page { padding-top: 98px; }

.about-visual { position: relative; height: 630px; }
.about-visual-bg  {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('../images/about/about-visual-bg.jpg') no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.about-visual-inner { width: 500px; }
.about-visual-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: left; }
.about-visual-text h1 { font-size: 30px; line-height: 1.4; margin-bottom: 20px; color: #fff; }
.about-visual-text p { font-size: 18px; line-height: 1.6; color: #eee; margin-bottom: 40px; }
 
.section-subtitle { margin-bottom: 90px; font-size: 16px; text-align: center; }

.col-4 { position: relative; }
.col-4 > img {margin: 0 auto; }
.col-4 > h3 { font-size: 20px; margin-top: 15px; }
.col-4 > p { font-size: 16px; margin-top: 15px; }
.col-4:not(:last-child)::after { content: ""; position: absolute; top: calc(50% - 30px); right: 0; width: 1px; height: 60px; background-color: #d5d5d5; }

.about-intro-text { width: 45%; }
.about-intro-text > h2 > span { font-size: 16px; }
.about-intro-text > h2 > font { font-weight: 900; line-height: 150%; }
.about-intro-text p { margin-top: 20px; line-height: 1.7; }
.about-intro-text p > span { font-weight: bold; color: #000; }
.about-intro-img { width: 100%; max-width: 654px; height: 420px; overflow: hidden; }
.about-intro-img > img { width: 100%; height: 100%; object-fit: cover; }
 .about-intro-img > video { width: 100%; height: 100%; object-fit: cover; }
 .visual-bg { position: absolute; width: 100%; max-width: 654px; height: 100%; max-height: 420px; background-color: rgba(0,0,0,0.3); }
.makesection { display: flex; justify-content: space-between; }
.makegroup { width: 260px; height: auto; } 
.makegroup > .makeimg { width: 100%; height: 252px; background-color: #d7d7d7; border-radius: 15px; overflow: hidden; }
.makegroup > .makeimg > video { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.makegroup > h3 { margin-top: 15px; font-size: 16px; }
.makegroup > p { margin-top: 5px; font-size: 16px; }

.about-path { position:relative; }

.text-center { position: relative; }
.text-center { position: relative; width: 100%; }
.path-line { position: absolute; top: 158px; left: 0; width: 100%; height: 2px; background: #ddd; z-index: 0; }
.path-timeline { display: flex; justify-content: space-between; align-items: flex-start; position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; }
.path-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; }
.path-circle { width: 14px; height: 14px; border-radius: 50%; background: #704E2A; position: relative; z-index: 1; }
.path-year { margin-top: 10px; font-weight: bold; font-size: 16px; color: #333; }
.path-content { margin-top: 6px; font-size: 14px; color: #666; max-width: 120px; }

.partner-logos {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:30px;}
.partner-logos img {max-width:120px;height:auto;object-fit:contain;filter:grayscale(100%);opacity:0.8;transition:all 0.3s;}
.partner-logos img:hover {filter:none;opacity:1;}

.location-map { width: 100%; height: 700px; margin-top: 50px; }

@media (max-width: 480px){
.about-page { padding-top: 85px; }
.about-intro-text { width: 100%; }
.about-intro-img { height: 210px; }
.makesection { flex-direction: column; align-items: center; row-gap: 40px; }
.visual-bg { opacity: 0; }

.pathsect { width: 100%; overflow-x: auto; }
.path-year { width: max-content; }
.path-timeline { width: 1440px; }

.col-4:not(:last-child)::after { content: ""; position: absolute; top: calc(50% - 30px); right: 0; width: 0; height: 0; }

.about-intro-text > h2 > font > .mbr {display: none;}
}

.pathsect.blur-active {
  filter: blur(3px);
  transition: filter 0.5s ease;
}
.pathsect {
  transition: filter 0.5s ease;
  opacity: 0.96;
}

/* 드래그 힌트 fixed 중앙 표시 */
#dragHint {
  display: block;
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  pointer-events: none;
  animation: fade-in-out 2s ease-in-out forwards;
}

#dragHint img {
  width: 80px;
  height: auto;
  animation: dragMove 1.5s ease-in-out forwards;
}

@keyframes dragMove {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { transform: translateX(0); opacity: 1; }
  30%  { transform: translateX(-40px); }
  60%  { transform: translateX(40px); }
  90%  { transform: translateX(0px); opacity: 1; }
  100% { transform: translateX(0px); opacity: 0; }
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}