:root{
  --anim-duration: 22s; /* ← 전체 길이 여기서만 조절 */
}

/* 공통 */
.aone_video_wrap {
  width: 100%;
  position: relative;
  height: 941px;
  overflow: hidden;
  background: black;
  margin-top: 100px;
}
.aone_video {
  width: calc(100% + 300px);
  height: 906px;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 42px;
  transform: translate(-50%, 0);
}
.main_text_1_1,
.main_text_1_2,
.main_bg_1,
.main_human_1,
.main_human_2,
.main_human_3,
.main_text_2,
.main_bg_2,
.main_2_human,
.main_2_logo,
.main_text_3,
.main_bg_3,
.main_3_logo,
.main_text_4,
.main_bg_4,
.main_4_logo,
.main_4_human_1,
.main_4_human_2,
#new-year,
#box-stroke,
#professional-stroke,
#a1-stroke{
  animation-duration: var(--anim-duration);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-delay: 0s;
}

/* --- Main 1 --- */
.main_text_1_1 {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 400;
  position: absolute;
  font-size: 23px;
  transform: translate(-50%, 0);
  left: 50%;
  color: white;
  top: 104px;
  animation-name: main_text_1_1_animaition;
}
.main_text_1_2 {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 700;
  position: absolute;
  font-size: 46px;
  transform: translate(-50%, 0);
  left: 50%;
  color: white;
  top: 140px;
  animation-name: main_text_1_2_animaition;
}
.main_bg_1 {
  width: 2120px;
  height: 941px;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  animation-name: main_bg_1_ani;
}
.main_human_1,
.main_human_2,
.main_human_3{
  position: absolute;
  width: 100%;
  transform: translate(-50%, 0);
  left: 50%;
}
.main_human_1{ animation-name: main_human_1_ani; }
.main_human_2{ animation-name: main_human_2_ani; }
.main_human_3{ animation-name: main_human_3_ani; }

@keyframes main_text_1_1_animaition {
  0% { top: 124px; opacity: 0; }
  3% { top: 124px; opacity: 0; }
  10% { top: 104px; opacity: 1; }
  25% { top: 104px; opacity: 1; }
  25.01% { top: 104px; opacity: 0; }
  100% { top: 104px; opacity: 0; }
}
@keyframes main_text_1_2_animaition {
  0% { top: 170px; opacity: 0; }
  7% { top: 170px; opacity: 0; }
  17% { top: 140px; opacity: 1; }
  25% { top: 140px; opacity: 1; }
  25.01% { top: 140px; opacity: 0; }
  100% { top: 140px; opacity: 0; }
}
@keyframes main_human_1_ani {
  0% { opacity: 0; }
  5% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 1; }
  25.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_human_2_ani {
  0% { opacity: 0; }
  5% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 1; }
  25.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_human_3_ani {
  0% { opacity: 0; }
  10% { opacity: 0; }
  15% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 1; }
  25.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_bg_1_ani {
  0% { opacity: 1; }
  25% { opacity: 1; }
  25.01% { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Main 2 (25%~52%) --- */
.main_text_2 { 
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 400;
  position: absolute;
  font-size: 23px;
  transform: translate(-50%, 0);
  left: 50%;
  color: white;
  top: 360px;
  opacity: 1;
  animation-name: main_text_2_ani;
}
.main_bg_2 {
  width: 2120px;
  height: 1310px;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  top: -170px;
  animation-name: main_bg_2_ani;
}
.main_2_human {
  position: absolute;
  width: 2120px;
  height: 941px;
  transform: translate(-50%, 0);
  left: 50%;
  animation-name: main_2_human_ani;
}
.main_2_logo {
  position: absolute;
  width: 820px;
  transform: translate(-50%, 0);
  left: 50%;
  top: 32px;
  animation-name: main_2_logo_ani;
}

@keyframes main_bg_2_ani {
  0% { opacity: 0; }
  25% { opacity: 0; }
  25.01% { opacity: 1; }
  52% { opacity: 1; }
  52.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_2_human_ani {
  0% { opacity: 0; }
  30% { opacity: 0; }
  40% { opacity: 1; }
  52% { opacity: 1; }
  52.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_2_logo_ani {
  0% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; top: 90px; width: 1360px; }
  40% { opacity: 1; top: 32px; width: 820px; }
  52% { opacity: 1; }
  52.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_text_2_ani {
  0% { opacity: 0; }
  30% { opacity: 0; }
  40% { opacity: 0; }
  45% { opacity: 1; }
  52% { opacity: 1; }
  53% { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Main 3 (52%~82%) --- */
.main_text_3 {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 400;
  font-size: 23px;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  color: white;
  top: 310px;
  opacity: 1;
  animation-name: main_text_3_ani;
}
.main_bg_3 {
  width: 2120px;
  height: 1300px;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  animation-name: main_bg_3_ani;
}
.main_3_logo {
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  top: 32px;
  width: 820px;
  animation-name: main_3_logo_ani;
}

@keyframes main_bg_3_ani {
  0% { opacity: 0; }
  52% { opacity: 0; }
  52.01% { opacity: 1; top: -200px; }
  82% { opacity: 1; top: 0; }
  82.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_text_3_ani {
  0% { opacity: 0; }
  52% { opacity: 0; }
  62% { opacity: 1; }
  82% { opacity: 1; }
  82.01% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes main_3_logo_ani {
  0% { opacity: 0; }
  52% { opacity: 0; }
  58% { opacity: 1; }
  82% { opacity: 1; }
  82.01% { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Main 4 (82%~100%) --- */
.main_text_4 {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 400;
  font-size: 23px;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  color: white;
  top: 160px;
  opacity: 1;
  animation-name: main_text_4_ani;
}
.main_bg_4 {
  width: 2120px;
  height: 1300px;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  top: -130px;
  animation-name: main_bg_4_ani;
}
.main_4_logo {
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  width: 880px;
  top: 120px;
  animation-name: main_4_logo_ani;
}
.main_4_human_1,
.main_4_human_2{
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  width:1800px;
  top: 120px;
}
.main_4_human_1{ animation-name: main_4_human_1_ani; }
.main_4_human_2{ animation-name: main_4_human_2_ani; }

@keyframes main_bg_4_ani {
  0%   { opacity: 0; }
  82%  { opacity: 0; }
  82.01% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes main_text_4_ani {
  0%   { opacity: 0; }
  82%  { opacity: 0; }
  82.01% { opacity: 0; top: 182px; }
  88%  { opacity: 1; top: 160px; }
  100% { opacity: 1; }
}
@keyframes main_4_logo_ani {
  0%   { opacity: 0; }
  82%  { opacity: 0; }
  82.01% { opacity: 0; }
  88%  { opacity: 0; }
  92%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes main_4_human_1_ani {
  0%   { opacity: 0; }
  82%  { opacity: 0; }
  82.01% { opacity: 0; }
  88%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes main_4_human_2_ani {
  0%   { opacity: 0; }
  82%  { opacity: 0; }
  82.01% { opacity: 0; }
  88%  { opacity: 0; }
  94%  { opacity: 1; }
  100% { opacity: 1; }
}

/* --- 로고 효과 (#new-year) --- */
#new-year {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 880px;
  top: 138px;
  animation-name: smaller;
}
#new-year svg { width: 100%; height: 100%; }

.stroke-fill {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke: #efefef;
}
#box-stroke{ animation-name: dash1; animation-timing-function: linear; }
#professional-stroke{ animation-name: dash2; animation-timing-function: linear; }
#a1-stroke{ animation-name: dash3; animation-timing-function: linear; }

@keyframes dash1 {
  28% { stroke-dashoffset: 1000; }
  34% { stroke-dashoffset: 0; }
}
@keyframes dash2 {
  30% { stroke-dashoffset: 1000; }
  36% { stroke-dashoffset: 0; }
}
@keyframes dash3 {
  33% { stroke-dashoffset: 1000; }
  37% { stroke-dashoffset: 0; }
}

/* 로고 크기/출현 타이밍 - Main2 단축 반영 */
@keyframes smaller {
  0% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; width:1470px; top:200px; }
  38% { opacity: 1; width:1470px; top:200px; }
  44% { opacity: 1; width:880px;  top:138px; }
  52% { opacity: 1; }
  52.5% { opacity: 0; }
  100% { opacity: 0; }
}

/* SVG 색상 */
.st0{fill:#E84D07;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:10;}
.st2{fill:none;stroke:#E84D07;stroke-width:6;stroke-miterlimit:10;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:48;stroke-miterlimit:10;}
.st4{fill:none;stroke:#E84D07;stroke-width:62;stroke-miterlimit:10;}