/* ooh11 현수막 광고 진행 절차 (1~3 → / 곡선 / 4~6 ← / 곡선 / 7~9 →, 3초마다 순서대로 강조: js/sub.js) */
.ooh11_process_sec{width: 100%; background: #fff;}
.ooh11_process_inner{max-width: 1400px; width: 92%; margin: 0 auto; padding: 40px 0 120px;}
.ooh11_process_title{text-align: center; margin-bottom: 70px;}
.ooh11_process_title h3{font-size: 2.75rem; font-weight: 800; padding-bottom: 14px; letter-spacing: -1px;}
.ooh11_process_title h3 span{color: #1a8cff;}
.ooh11_process_title p{display: inline-block; padding: 7px calc(28px - 0.45em) 7px 28px; border-radius: 30px; background: #222; color: #fff; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.45em;}
.ooh11_process{--icon: 90px; --gap-x: 40px; --gap-y: 70px; --edge: 70px; --line: #e8e8e8; --arrow: #d9d9d9; --point: #1a8cff; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap-x); row-gap: var(--gap-y);}
.ooh11_process li{position: relative; padding-right: 20px;}
.ooh11_process li:nth-child(4){grid-column: 3; grid-row: 2;}
.ooh11_process li:nth-child(5){grid-column: 2; grid-row: 2;}
.ooh11_process li:nth-child(6){grid-column: 1; grid-row: 2;}
/* 연결선·화살표 (js/sub.js 가 SVG 로 그림): 회색 바탕 위에 파란 복제본이 진행 방향으로 채워짐 */
.ooh11_process{position: relative;}
.ooh11_process .process_svg{position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none;}
.ooh11_process .process_line{fill: none; stroke-width: 4; stroke-linecap: round;}
.ooh11_process .process_base .process_line{stroke: var(--line);}
.ooh11_process .process_base .process_arrows{fill: var(--arrow);}
.ooh11_process .process_fill .process_line{stroke: var(--point);}
.ooh11_process .process_fill .process_arrows{fill: var(--point);}

.ooh11_process .step_icon{position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--icon); height: var(--icon); border: 3px solid #e3e3e3; border-radius: 50%; background: #fff; transition: 0.3s;}
.ooh11_process .step_icon img{width: 62%; height: 62%; object-fit: contain; transition: 0.3s;}
.ooh11_process h4{display: inline-block; margin: 26px 0 18px; padding: 5px 12px; border-radius: 3px; background: #222; color: #fff; font-size: 20px; font-weight: 700; transition: 0.3s;}
.ooh11_process p{font-size: 18px; line-height: 1.7; color: #444; word-break: keep-all;}
/* 강조 (자동 순환): 파란 테두리 + 파란 아이콘 + 파란 제목 */
.ooh11_process li.is-active .step_icon{border-color: var(--point);}
.ooh11_process li.is-active .step_icon img{filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1900%) hue-rotate(195deg) brightness(101%) contrast(101%);}
.ooh11_process li.is-active h4{background: var(--point);}

@media (max-width:1279px){
  .ooh11_process p br{display: none;}
}
@media (max-width:1024px){
  .ooh11_process_title h3{font-size: 2rem;}
  .ooh11_process_title p{font-size: 0.8rem; letter-spacing: 0.3em;}
  .ooh11_process{--icon: 70px; --gap-x: 24px; --gap-y: 50px; --edge: 30px;}
  .ooh11_process li{padding-right: 0;}
  .ooh11_process h4{font-size: 16px; margin: 20px 0 12px;}
  .ooh11_process p{font-size: 15px;}
}
/* 모바일: 세로 1열 타임라인 (1 → 9 순서) */
@media (max-width:767px){
  .ooh11_process_inner{padding: 20px 0 70px;}
  .ooh11_process_title{margin-bottom: 40px;}
  .ooh11_process_title h3{font-size: 1.6rem; padding-bottom: 10px;}
  .ooh11_process_title p{font-size: 0.7rem; padding: 5px 18px; letter-spacing: 0.25em;}
  .ooh11_process{--icon: 56px; --gap-y: 30px; grid-template-columns: 1fr;}
  .ooh11_process li, .ooh11_process li:nth-child(n){grid-column: auto; grid-row: auto; padding-left: calc(var(--icon) + 18px); min-height: var(--icon);}
  .ooh11_process .step_icon{position: absolute; left: 0; top: 0; border-width: 2px;}
  .ooh11_process h4{margin: 6px 0 8px; font-size: 16px;}
  .ooh11_process p{font-size: 14px;}
}