@charset "UTF-8";

/* ===================================
   다우오피스HR AI 소개 (ai.jsp)
   =================================== */

/* --- 공통 --- */
/* common_new.css 의 .content {padding-top:80px} 오버라이드 */
.content.function.ai-landing {padding-top: 0;}
/* .ai-landing 에는 overflow 를 걸지 않습니다. (가로 넘침은 body 와 각 섹션에서 처리) */
.ai-landing .inner {width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.ai-landing .title_wrap {display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; text-align: left;}
.ai-landing .title_wrap .sub {font-size: 18px; font-weight: 700; line-height: 140%; letter-spacing: -0.72px; color: #6B3BE9; padding-top: 0;}
.ai-landing .title_wrap h2 {text-align: left; font-size: 48px; font-weight: 600; line-height: 144%; letter-spacing: -1.92px; color: #040713;}
.ai-landing .visual_wrap img {display: block; width: 100%; height: auto;}
.ai-landing .point {color: #6B3BE9;}
.ai-landing br.m {display: none;}

/* --- 버튼 : index.jsp(hr_main_2026_v2.css) 의 CTA 버튼과 동일 규격 --- */
.ai-landing .btn_wrap {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;}
.ai-landing .btn_wrap .btn_general,
.ai-landing .btn_wrap .btn_ghost {display: inline-flex; align-items: center; justify-content: center; min-width: 221px; padding: 16px 32px; border: 1.5px solid transparent; border-radius: 46px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; line-height: 1.5; letter-spacing: -0.04em; text-align: center; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.ai-landing .btn_wrap .btn_general {background: #8248FF; color: #fff; box-shadow: 0 8px 20px rgba(130, 72, 255, 0.22);}
.ai-landing .btn_wrap .btn_general:hover {background: #6F33EE;}
.ai-landing .btn_wrap .btn_ghost {background: #fff; border-color: #C9B5FF; color: #6B3BE9;}
.ai-landing .btn_wrap .btn_ghost:hover {border-color: #6B3BE9;}

/* --- content_head : 메인 비주얼 --- */
.ai-landing .content_head {position: relative; padding: 100px 0 76px; text-align: center; background: linear-gradient(180deg, #FCF9FF 26.75%, #D6B6FF 113.47%); overflow: hidden;}
.ai-landing .content_head .inner {position: relative; z-index: 2;}
.ai-landing .content_head .title_wrap {align-items: center; text-align: center;}
.ai-landing .content_head h1 {font-size: 64px; font-weight: 600; line-height: 140%; letter-spacing: -2.56px; color: #1B1B1B;}
.ai-landing .content_head h1 .point {font-weight: 700;}
.ai-landing .content_head .desc {font-size: 22px; font-weight: 400; line-height: 150%; letter-spacing: -0.88px; color: #777779; padding-top: 12px;}
.ai-landing .content_head .btn_wrap {margin: 40px 0 0 !important;}
.ai-landing .content_head .visual_wrap {margin-top: 80px;}
@media (prefers-reduced-motion: reduce) {
  .ai-landing .content_head .deco_ai,
  .ai-landing .content_head .deco_blob,
  .ai-landing .content_head .deco_blob_sm {animation: none;}
}
/* 배경 장식 : 시안 좌표(1920 기준) 를 화면 중앙 기준으로 환산, 좁은 화면에서는 화면 안쪽으로 붙임 */
.ai-landing .content_head .deco {position: absolute; z-index: 1; pointer-events: none;}
.ai-landing .content_head .deco_wash {left: calc(50% - 1967px); top: -446px; width: 4160px; height: 2898px; z-index: 0; background: url(../images/ai/bg_ai_head_01.svg) no-repeat center / 100% 100%;}
.ai-landing .content_head .deco_ai {left: min(calc(50% + 353px), calc(100% - 400px)); top: 235px; width: 493px; height: 493px; background: url(../images/ai/bg_ai_head_03.png) no-repeat center / contain; opacity: 0.64; transform: rotate(14.68deg); animation: aiFloatAi 4.4s ease-in-out infinite;}
.ai-landing .content_head .deco_blob {left: max(calc(50% - 871px), -60px); top: 634px; width: 194px; height: 211px; background: url(../images/ai/bg_ai_head_02.png) no-repeat center / contain; opacity: 0.3; transform: rotate(153.9deg) scaleY(-1); animation: aiFloatBlob 3.8s ease-in-out infinite;}
.ai-landing .content_head .deco_blob_sm {left: min(calc(50% + 673px), calc(100% - 90px)); top: 334px; width: 118px; height: 124px; background: url(../images/ai/bg_ai_head_02.png) no-repeat center / contain; opacity: 0.3; transform: rotate(-16.29deg); animation: aiFloatBlobSm 5s ease-in-out infinite;}
/* 둥둥 떠 있는 효과 : 회전값을 유지해야 하므로 키프레임에 함께 기술 (translateY 를 먼저 써서 화면 기준 수직 이동) */
@keyframes aiFloatAi {
  0%, 100% {transform: translateY(0) rotate(14.68deg);}
  50% {transform: translateY(-18px) rotate(14.68deg);}
}
@keyframes aiFloatBlob {
  0%, 100% {transform: translateY(0) rotate(153.9deg) scaleY(-1);}
  50% {transform: translateY(-15px) rotate(153.9deg) scaleY(-1);}
}
@keyframes aiFloatBlobSm {
  0%, 100% {transform: translateY(0) rotate(-16.29deg);}
  50% {transform: translateY(-12px) rotate(-16.29deg);}
}

/* --- area_ai : AI 대화 --- */
.ai-landing .area_ai {padding: 100px 0; background: #fff;}
/* 이미지 노출 폭 1200px : .inner 좌우 패딩(20px) 만큼 넓힌 1240px 를 최대폭으로 사용 */
.ai-landing .area_ai .inner {max-width: 1240px;}
.ai-landing .area_ai .visual_wrap {margin-top: 60px;}

/* 자동 롤링 (JS 활성화 시) : 스크롤 고정 없이 일정 시간마다 이미지가 1 → 2 → 3 → 1 로 전환됩니다.
   이미지 영역은 폭 1200px 원본 비율 그대로 노출됩니다. */
.ai-landing .area_ai.is-auto .scroll_track {position: relative;}
.ai-landing .area_ai.is-auto .scroll_stage {display: block;}
.ai-landing .area_ai.is-auto .visual_wrap {margin-top: 60px;}

/* 슬라이더형 인디케이터 : 현재 노출 중인 이미지를 막대로 표시 (클릭으로도 이동) */
.ai-landing .area_ai .slider_nav {display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px;}
.ai-landing .area_ai .slider_nav button {position: relative; overflow: hidden; width: 48px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: #E1E1E6; cursor: pointer; transition: width 0.3s ease, background 0.3s ease;}
.ai-landing .area_ai .slider_nav button.on {width: 96px; background: #6B3BE9;}
/* 자동 롤링 중에는 현재 막대가 남은 시간만큼 채워지며 진행 상태를 보여줍니다. */
.ai-landing .area_ai.is-auto .slider_nav button.on {background: #E1E1E6;}
.ai-landing .area_ai.is-auto .slider_nav button.on::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 2px; background: #6B3BE9; transform-origin: left center; animation: aiRollProgress var(--ai-roll-duration, 4s) linear both;}
.ai-landing .area_ai.is-auto.is-paused .slider_nav button.on::after {animation-play-state: paused;}
@keyframes aiRollProgress {
  from {transform: scaleX(0);}
  to {transform: scaleX(1);}
}
@media (prefers-reduced-motion: reduce) {
  .ai-landing .area_ai.is-auto .slider_nav button.on {background: #6B3BE9;}
  .ai-landing .area_ai.is-auto .slider_nav button.on::after {display: none;}
}

/* 한 번에 한 장만 노출 : JS 미동작 시 폴백.
   content.css 의 img.pc / img.mo 가 !important 라 여기서도 !important 로 맞춰야 합니다. */
.ai-landing .area_ai .visual_wrap img {display: none !important;}
.ai-landing .area_ai .visual_wrap img.pc.on {display: block !important;}

/* 자동 롤링 : 이미지를 같은 자리에 겹쳐 두고 opacity 로 천천히 교차 전환(크로스페이드).
   첫 장만 문서 흐름에 남겨 래퍼 높이를 유지하고, 나머지는 absolute 로 겹칩니다.
   (DOM 순서가 pc, mo, pc, mo, pc, mo 라 pc 는 1·3·5 / mo 는 2·4·6 번째 자식입니다.) */
.ai-landing .area_ai.is-auto .visual_wrap {position: relative;}
.ai-landing .area_ai.is-auto .visual_wrap img.pc {display: block !important; position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--ai-fade-duration, 1s) ease-in-out;}
.ai-landing .area_ai.is-auto .visual_wrap img.pc:nth-child(1) {position: relative;}
.ai-landing .area_ai.is-auto .visual_wrap img.pc.on {opacity: 1; z-index: 1;}
@media (prefers-reduced-motion: reduce) {
  .ai-landing .area_ai.is-auto .visual_wrap img {transition: none !important;}
}

/* --- area_agent : HR 에이전트 --- */
.ai-landing .area_agent {padding: 100px 0; background: #F5F6F8;}
.ai-landing .area_agent .list_agent {margin-top: 60px; padding: 0 20px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
.ai-landing .area_agent .list_agent::-webkit-scrollbar {display: none;}
.ai-landing .area_agent .list_agent .card_marquee_inner {display: flex; gap: 16px; width: max-content;}
/* 무한 롤링(JS 로 is-rolling 클래스 추가) : 롤링 시에는 가로 스크롤 대신 자동 흐름 */
.ai-landing .area_agent .list_agent.is-rolling {padding: 0; overflow: hidden;}
.ai-landing .area_agent .list_agent.is-rolling .card_marquee_inner {gap: 0; padding: 8px 0; animation: aiAgentMarquee 40s linear infinite;}
.ai-landing .area_agent .list_agent.is-rolling .card_agent {margin-right: 16px;}
@keyframes aiAgentMarquee {
  from {transform: translateX(0);}
  to {transform: translateX(calc(-100% / 3));}
}
.ai-landing .area_agent .card_agent {display: flex; flex: 0 0 300px; flex-direction: column; justify-content: space-between; gap: 24px; height: 219px; padding: 24px 16px; background: #fff; border: 1px solid #EAECEF; border-radius: 24px; box-sizing: border-box; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.ai-landing .area_agent .card_agent.on,
.ai-landing .area_agent .card_agent.is-center {border-color: #AA8CFF; box-shadow: 0 0 2px rgba(115, 187, 255, 0.2), 0 0 12px rgba(153, 142, 255, 0.4);}
.ai-landing .area_agent .card_agent .card_content {display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; padding: 0 6px 0 8px;}
.ai-landing .area_agent .card_agent .card_header {display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 0 2px;}
.ai-landing .area_agent .card_agent .information {display: flex; flex-direction: column; gap: 8px; padding: 0 2px;}
.ai-landing .area_agent .card_agent .card_header img {display: block; width: 40px; height: 40px;}
.ai-landing .area_agent .card_agent .card_header .ic_star {flex: 0 0 20px; width: 20px; height: 20px; background: url(../images/ai/ic_ai_star.png) no-repeat center / contain;}
.ai-landing .area_agent .card_agent h3 {font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.32px; color: #1C1C1C; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ai-landing .area_agent .card_agent p {height: 42px; overflow: hidden; font-size: 16px; font-weight: 400; line-height: 21px; letter-spacing: -0.28px; color: #9B9C9E;}
.ai-landing .area_agent .card_agent .card_footer {display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding-right: 8px;}
.ai-landing .area_agent .card_agent .card_footer .btn_talk {display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: #1C1C1C;}
.ai-landing .area_agent .card_agent .card_footer .count {font-size: 14px; font-weight: 400; letter-spacing: -0.28px; color: #9B9C9E;}

/* --- area_connect : 내부 데이터 연결 --- */
.ai-landing .area_connect {padding: 100px 0; background: #fff;}
.ai-landing .area_connect .list_data {display: flex; align-items: center; gap: 84px; margin-top: 78px; padding-bottom: 60px; border-bottom: 1px solid #EEE;}
.ai-landing .area_connect .list_data li {display: flex; align-items: center; gap: 16px;}
.ai-landing .area_connect .list_data img {display: block; flex: 0 0 42px; width: 42px; height: 42px;}
.ai-landing .area_connect .list_data span {font-size: 24px; font-weight: 600; line-height: normal; letter-spacing: -0.96px; color: #333;}
.ai-landing .area_connect .list_data .badge {display: inline-flex; align-items: center; justify-content: center; font-style: normal; margin-left: 8px; padding: 3px 8px; border: 1px solid #8659FB; border-radius: 24px; background: none; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.56px; color: #8659FB; vertical-align: middle;}
.ai-landing .area_connect .visual_wrap {margin-top: 48px;}

/* --- area_management : 관리자 --- */
.ai-landing .area_management {padding: 100px 0; background: #fff;}
.ai-landing .tab_ai {display: flex; align-items: center; gap: 8px; margin-top: 32px;}
.ai-landing .tab_ai button {padding: 12px 16px; border-bottom: 2px solid transparent; font-size: 16px; font-weight: 500; letter-spacing: -0.64px; color: #9B9C9E; cursor: pointer;}
.ai-landing .tab_ai button.active {border-bottom-color: #1B1B1B; font-weight: 600; color: #1B1B1B;}
.ai-landing .area_management .visual_wrap {margin-top: 32px;}

/* --- area_merit : 특장점 --- */
.ai-landing .area_merit {padding: 120px 0; background: #261A38; text-align: center;}
.ai-landing .area_merit .title_wrap {align-items: center; text-align: center;}
.ai-landing .area_merit .title_wrap .sub {color: #fff; font-weight: 500;}
.ai-landing .area_merit .title_wrap h2 {text-align: center; font-size: 52px; letter-spacing: -2.08px; background: linear-gradient(-75.61deg, #5D4BFF 30.96%, #F9CCFF 53.18%, #D1F0FF 70.13%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.ai-landing .area_merit .card_wrap {display: flex; gap: 24px; margin-top: 44px;}
.ai-landing .area_merit .card {flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; padding: 40px; background: #fff; border-radius: 24px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); text-align: left;}
.ai-landing .area_merit .card img {display: block; width: 46px; height: 46px;}
.ai-landing .area_merit .card h3 {text-align: left; font-size: 24px; font-weight: 600; line-height: 130%; letter-spacing: -0.96px; color: #000;}
.ai-landing .area_merit .card p {font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: -0.64px; color: #6B6B6B; padding-top: 8px;}

/* --- area_change : 도입 후기 --- */
.ai-landing .area_change {position: relative; padding: 120px 0; background: linear-gradient(120deg, #FFFFFF 9.69%, #D8CCFF 92.75%); overflow: hidden;}
/* 배경 장식 : 시안 좌표(1920 기준) 를 화면 중앙 기준으로 환산 */
.ai-landing .area_change .deco {position: absolute; pointer-events: none;}
.ai-landing .area_change .deco_glow {left: max(calc(50% - 1059px), -420px); top: -230px; width: 700px; height: 700px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); filter: blur(75px);}
.ai-landing .area_change .deco_ai {left: min(calc(50% + 387px), calc(100% - 300px)); top: -82px; width: 425px; height: 414px; background: url(../images/ai/bg_ai_change_01.png) no-repeat center / contain; opacity: 0.56; transform: rotate(19.55deg);}
.ai-landing .area_change .deco_blob {left: max(calc(50% - 822px), -60px); top: 585px; width: 228px; height: 247px; background: url(../images/ai/bg_ai_change_02.png) no-repeat center / contain; opacity: 0.24; transform: rotate(155.4deg) scaleY(-1);}
.ai-landing .area_change .inner {position: relative; z-index: 1;}
.ai-landing .area_change .title_wrap h2 {font-size: 52px; font-weight: 400; letter-spacing: -2.08px; color: #333;}
.ai-landing .area_change .title_wrap h2 b {font-weight: 700;}
.ai-landing .area_change .list_bubble {display: flex; flex-direction: column; gap: 50px; margin-top: 60px;}
.ai-landing .area_change .bubble {width: 700px; max-width: 100%; padding: 40px; background: linear-gradient(86deg, #934FFF 13.7%, #A485FF 54.22%, #6F39FF 109.77%); border-radius: 0 50px 50px 50px; box-shadow: 0 0 24px rgba(255, 255, 255, 0.4); font-size: 20px; font-weight: 400; line-height: 33px; letter-spacing: -0.96px; color: #fff;}
.ai-landing .area_change .bubble b {font-weight: 700;}
.ai-landing .area_change .bubble.right {width: 650px; margin-left: auto; border-radius: 50px 0 50px 50px;}
/* 최초 노출 시 1회만 : 살짝 아래로 내려갔다 제자리로 (JS 로 is-in 클래스 추가, 순차 딜레이) */
.ai-landing .area_change .list_bubble .bubble.is-in {animation: aiBubbleDip 1.6s ease-in-out both;}
@keyframes aiBubbleDip {
  0% {transform: translateY(0);}
  50% {transform: translateY(10px);}
  100% {transform: translateY(0);}
}

/* --- area_faq : 자주 묻는 질문 --- */
.ai-landing .area_faq {padding: 100px 0; background: #fff;}
.ai-landing .area_faq h2 {font-size: 40px; font-weight: 700; line-height: 140%; letter-spacing: -1.6px; color: #1B1B1B; text-align: left; margin-bottom: 32px;}
/* 구조/동작(.area_box, .box_qna, .question, .ic_detail, .answer)은 content.css 공통 규칙을 그대로 사용하고,
   시안과 다른 타이포·색만 최소한으로 덮습니다. */
.ai-landing .area_faq .box_qna:last-child {border-bottom: 0;}
.ai-landing .area_faq .question p {font-size: 18px; font-weight: 600; line-height: 150%; letter-spacing: -0.72px; color: #1B1B1B; padding-top: 0;}
/* 공통 규칙이 20px(line-height 30px) 기준 top:-28px 이므로 18px(27px) 에 맞춰 보정 */
.ai-landing .area_faq .question .ic_detail {top: -25px;}
.ai-landing .area_faq .answer li {font-size: 15px; font-weight: 400; line-height: 160%; letter-spacing: -0.6px; color: #777779;}

/* --- content_foot : 하단 CTA --- */
.ai-landing .content_foot {position: relative; padding: 100px 0; background: linear-gradient(180.4deg, #CFE7FF 0%, #D1C6FC 68%); text-align: center; overflow: hidden;}
.ai-landing .content_foot .inner {position: relative; z-index: 2;}
/* 배경 장식 : 시안 좌표(1920 기준) 를 화면 중앙 기준으로 환산 */
.ai-landing .content_foot .deco {position: absolute; pointer-events: none;}
.ai-landing .content_foot .deco_wash {left: calc(50% - 1203px); top: -114px; width: 2164px; height: 510px; background: url(../images/ai/bg_ai_foot_01.png) no-repeat center / 100% 100%; filter: blur(78px); transform: rotate(13.72deg);}
.ai-landing .content_foot .deco_glow {left: calc(50% - 563px); top: -6px; width: 871px; height: 871px; border-radius: 50%; background: linear-gradient(180deg, #8F59FF 0%, #D4F2FF 100%); filter: blur(174px);}
.ai-landing .content_foot .deco_ai {left: calc(50% - 616px); top: -35px; width: 222px; height: 217px; background: url(../images/ai/bg_ai_foot_04.png) no-repeat center / contain; opacity: 0.64; transform: rotate(-29.05deg);}
.ai-landing .content_foot .deco_blob {left: calc(50% - 702px); top: 167px; width: 145px; height: 158px; background: url(../images/ai/bg_ai_foot_03.png) no-repeat center / contain; opacity: 0.48; transform: rotate(160.62deg) scaleY(-1);}
.ai-landing .content_foot .deco_object {left: calc(50% + 297px); top: 173px; width: 450px; height: 450px; background: url(../images/ai/bg_ai_foot_02.png) no-repeat center / cover; opacity: 0.8; transform: rotate(26.36deg);}
.ai-landing .content_foot h2 {font-size: 52px; font-weight: 400; line-height: 140%; letter-spacing: -2.08px; color: #fff;}
.ai-landing .content_foot h2 b {display: block; font-weight: 700;}
.ai-landing .content_foot .btn_wrap {margin-top: 48px;}

/* ===================================
   반응형
   =================================== */
/* common_new.css 는 959px 이하에서 .btn_wrap 을 세로 정렬로, .header 를 64px 로 전환 */
@media screen and (max-width: 959px) {
  .ai-landing .btn_wrap {flex-direction: row; margin-bottom: 0; gap: 12px;}
}

@media screen and (max-width: 1024px) {
  .ai-landing .area_change .deco_glow {display: none;}
  .ai-landing .area_change .deco_ai {left: auto; right: -90px; top: -20px; width: 280px; height: 273px;}
  .ai-landing .area_change .deco_blob {left: -50px; top: auto; bottom: 40px; width: 150px; height: 163px;}
  .ai-landing .content_head .deco_ai {top: 180px; width: 320px; height: 320px;}
  .ai-landing .content_head .deco_blob {top: auto; bottom: 40px; width: 130px; height: 141px;}
  .ai-landing .content_head .deco_blob_sm {display: none;}
  .ai-landing .content_foot .deco_ai {left: -40px; top: -20px; width: 160px; height: 156px;}
  .ai-landing .content_foot .deco_blob {left: 24px; top: auto; bottom: 32px; width: 100px; height: 109px;}
  .ai-landing .content_foot .deco_object {left: auto; right: -110px; top: 60px; width: 300px; height: 300px;}
  .ai-landing .content_head {padding: 80px 0 60px;}
  .ai-landing .content_head h1 {font-size: 48px; letter-spacing: -1.92px;}
  .ai-landing .content_head .desc {font-size: 18px; letter-spacing: -0.72px;}
  .ai-landing .content_head .visual_wrap {margin-top: 56px;}
  .ai-landing .area_ai,
  .ai-landing .area_agent,
  .ai-landing .area_connect,
  .ai-landing .area_management,
  .ai-landing .area_merit,
  .ai-landing .area_change,
  .ai-landing .area_faq {padding: 80px 0;}
  .ai-landing .title_wrap h2 {font-size: 36px; letter-spacing: -1.44px;}
  .ai-landing .area_merit .title_wrap h2,
  .ai-landing .area_change .title_wrap h2,
  .ai-landing .content_foot h2 {font-size: 40px; letter-spacing: -1.6px;}
  .ai-landing .area_connect .list_data {flex-wrap: wrap; gap: 20px 40px;}
  .ai-landing .area_merit .card_wrap {flex-wrap: wrap;}
  .ai-landing .area_merit .card {flex: 1 1 280px; padding: 32px;}
  .ai-landing .area_change .bubble {font-size: 20px; line-height: 30px; padding: 32px;}
  .ai-landing .area_faq h2 {font-size: 32px;}
}

@media screen and (max-width: 768px) {
  .ai-landing br.m {display: block;}
  .ai-landing br.p {display: none;}
  .ai-landing .inner {padding: 0 16px;}
  /* 모바일에서는 떠다니는 3D 오브젝트를 숨김 (배경 그라디언트/블러 웨이브는 유지) */
  .ai-landing .content_head .deco_ai,
  .ai-landing .content_head .deco_blob,
  .ai-landing .content_head .deco_blob_sm {display: none;}
  .ai-landing .content_head {padding: 56px 0 48px;}
  .ai-landing .content_head h1 {font-size: 32px; letter-spacing: -1.28px;}
  .ai-landing .content_head .desc {font-size: 16px; letter-spacing: -0.64px;}
  .ai-landing .content_head .btn_wrap {margin: 24px 0 !important;}
  .ai-landing .content_head .visual_wrap {margin-top: 40px;}
  .ai-landing .btn_wrap {align-items: stretch;}
  .ai-landing .btn_wrap .btn_general,
  .ai-landing .btn_wrap .btn_ghost {flex: 1 1 calc(50% - 12px); min-width: 0; padding: 14px 16px; font-size: 15px;}
  .ai-landing .area_ai,
  .ai-landing .area_agent,
  .ai-landing .area_connect,
  .ai-landing .area_management,
  .ai-landing .area_merit,
  .ai-landing .area_change,
  .ai-landing .area_faq,
  .ai-landing .content_foot {padding: 56px 0;}
  .ai-landing .title_wrap .sub {font-size: 16px; letter-spacing: -0.64px;}
  .ai-landing .title_wrap h2 {font-size: 26px; line-height: 140%; letter-spacing: -1.04px;}
  .ai-landing .area_merit .title_wrap h2,
  .ai-landing .area_change .title_wrap h2,
  .ai-landing .content_foot h2 {font-size: 28px; letter-spacing: -1.12px;}
  .ai-landing .area_ai .visual_wrap {margin-top: 32px;}
  /* 모바일에서는 mo 이미지로 크로스페이드 (pc 는 전부 숨김) */
  .ai-landing .area_ai .visual_wrap img.pc.on {display: none !important;}
  .ai-landing .area_ai .visual_wrap img.mo.on {display: block !important;}
  .ai-landing .area_ai.is-auto .visual_wrap {margin-top: 32px;}
  .ai-landing .area_ai.is-auto .visual_wrap img.pc {display: none !important;}
  .ai-landing .area_ai.is-auto .visual_wrap img.mo {display: block !important; position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--ai-fade-duration, 1s) ease-in-out;}
  .ai-landing .area_ai.is-auto .visual_wrap img.mo:nth-child(2) {position: relative;}
  .ai-landing .area_ai.is-auto .visual_wrap img.mo.on {opacity: 1; z-index: 1;}
  .ai-landing .area_ai.is-auto .slider_nav {margin-top: 20px;}
  .ai-landing .area_ai .slider_nav button {width: 32px;}
  .ai-landing .area_ai .slider_nav button.on {width: 64px;}
  .ai-landing .area_agent .list_agent {margin-top: 32px; padding: 0 16px 8px;}
  .ai-landing .area_agent .card_agent {flex: 0 0 260px;}
  .ai-landing .area_agent .card_agent h3 {font-size:16px;}
  .ai-landing .area_agent .card_agent p {font-size:14px;}
  .ai-landing .area_connect .list_data {flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; padding-bottom: 30px;}
  .ai-landing .area_connect .list_data span {font-size: 17px; letter-spacing: -0.68px;}
  .ai-landing .area_connect .visual_wrap {margin-top: 32px;}
  .ai-landing .tab_ai {gap: 0; overflow-x: auto; scrollbar-width: none;}
  .ai-landing .tab_ai::-webkit-scrollbar {display: none;}
  .ai-landing .tab_ai button {flex: 0 0 auto; padding: 10px 12px; font-size: 15px;}
  .ai-landing .area_merit .card_wrap {flex-direction: column; gap: 16px; margin-top: 32px;}
  .ai-landing .area_merit .card {flex: 1 1 240px; padding: 24px; border-radius: 20px;}
  .ai-landing .area_merit .card h3 {font-size: 20px; letter-spacing: -0.8px;}
  .ai-landing .area_merit .card p {font-size: 15px; letter-spacing: -0.6px;}
  .ai-landing .area_change .list_bubble {gap: 20px; margin-top: 32px;}
  .ai-landing .area_change .bubble {padding: 24px; border-radius: 0 28px 28px 28px; font-size: 16px; line-height: 26px; letter-spacing: -0.64px;}
  .ai-landing .area_change .bubble.right {border-radius: 28px 0 28px 28px;}
  .ai-landing .area_faq h2 {font-size: 24px; letter-spacing: -0.96px; margin-bottom: 24px;}
  .ai-landing .area_faq .box_qna {padding: 20px 0;}
  .ai-landing .area_faq .question p {font-size: 16px; letter-spacing: -0.64px;}
  /* 16px(line-height 24px) 기준 보정 — content.css 가 .price 에서 쓰는 방식과 동일 */
  .ai-landing .area_faq .question .ic_detail {top: -22px;}
  .ai-landing .area_faq .answer li {font-size: 14px;}
  .ai-landing .content_foot .btn_wrap {margin-top: 32px;}
}

@media screen and (max-width: 480px) {
  .ai-landing .btn_wrap .btn_general,
  .ai-landing .btn_wrap .btn_ghost {flex: 1 1 100%;}
}

@media screen and (max-width: 425px) {
  .ai-landing .content_head h1 {font-size: 28px; letter-spacing: -1.12px;}
  .ai-landing .title_wrap h2 {font-size: 23px;}
  .ai-landing .area_merit .title_wrap h2,
  .ai-landing .area_change .title_wrap h2,
  .ai-landing .content_foot h2 {font-size: 24px;}
  .ai-landing .area_agent .card_agent {flex: 0 0 240px;}
}