@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@font-face {
    font-family: "Nelphim";
    src: url("../fonts/Nelphim-Italic.otf") format("opentype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

.page-intro-veil {
	position: fixed;
	inset: 0;
	z-index: 9999;          /* 헤더, jumpVeil(50)보다 위 */
	background: #fff;       /* 첫 섹션 배경색에 맞춰 조절 */
	pointer-events: none;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

.ai_ad_tech_page #header .mobile-menu-open {color:#191919;}
.ai_ad_tech_page #header.is-company-dark .mobile-menu-open {color:#fff;}

#footer {
    /* .layer 클래스가 position:absolute; inset:0; 등을 이미 줌 */
    background: transparent;
    z-index: -1;
    padding: 0;
    display: block;
	height:auto;
	position:absolute;
	inset:0;
}

.footer-inner-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 540px;
    background: #f4f4f4;
    color: #111;
    overflow: hidden;
	text-align:left;
}

  #app {
    position: fixed; inset: 0; overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; text-align: center; padding: 6vh 8vw;
    will-change: transform;
  }

  h2.big { font-size: clamp(50px, 5.21vw, 100px); margin: 0 0 30px; font-weight: bold;}
  h2.big2 { font-size: clamp(24px, 2.5vw, 48px); margin: 0 0 90px; font-weight: bold;}
  p.content-eng{font-size: clamp(15px, 1.05vw, 20px);  line-height: 1.35; margin:0 0 75px;}
  p.desc { font-size: clamp(24px, 2.5vw, 48px); line-height: 1.35; margin: 0; font-weight: 400; word-break: keep-all;}
  p.desc2 { font-size: clamp(18px, 1.88vw, 36px); line-height: 1; margin: 0 0 47px; font-weight: 400;}
  p.desc3 {  font-size: clamp(24px, 2.5vw, 48px); line-height: 1; margin: 0; font-weight: bold;}
  .content-btn a{
    width: 500px;
    min-height: 80px;
    border: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    gap: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    transition: all 0.3s ease;
  }
  .content-btn a span{
    text-indent: -9999px;
    display: inline-block;
    width: 16px;
    height: 17px;
    background: url('../images/down_arrow.png') no-repeat center / 100% auto;
  }

  /* ---- Section1 Hero 인트로 애니메이션 ---- */
  .hero-text-mobile{display:none;}
  .hero-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
  .hero-bg-video { width:100%; height:100%; object-fit:cover; }
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0,0,0,0.1);
    pointer-events: none;
  }
  .hero-stage { position:absolute; inset:0; overflow:hidden; z-index: 2;}
  .hero-text {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:0 48px; white-space:nowrap;
    --hero-scale: 1;
    font-size: calc(clamp(68px, 8.85vw, 170px) * var(--hero-scale));
    font-weight:bold; color:#fff;
  }
  .hero-text.first-text{
	font-size: calc(clamp(30px, 5.21vw, 100px));
	}
  .hero-final {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:50px; text-align:center; padding:0 48px;
  }
  .hero-final-kr { font-size: clamp(46px, 6.1vw, 117px); font-weight:bold; color:#fff; line-height:1.2; }
  .hero-final-en { font-size: clamp(16px, 2.1vw, 40px); color: #fff;}
  .hero-text .ital, .hero-final-en .ital {
    font-family: "Nelphim", serif; font-style: italic; font-weight: 400;
  }
  .hero-text .bold, .hero-final-en .bold { font-weight: bold; }

  /* ---- 색상 팔레트 ---- */
  #section1   { background: radial-gradient(circle at 30% 20%, #1e293b, #020617); }
  #section3   { background: url('../images/sec_bg5.png') no-repeat center / cover; text-align: center; width: 100%; }
  #footer     { background: #050505; }

  /* Part1은 배경이 없고(하위 child-bg가 담당), Part3는 반투명 스크림만 얹어 배경이 비쳐 보이게 함 */
  #c0-p1, #c1-p1, #c2-p1, #c3-p1 { background: #05070c; }
  /* #c0-p3, #c1-p3, #c2-p3, #c3-p3 { background: rgba(0,0,0,.28); } */

  /* ---- Child 배경 (이미지→영상 크로스페이드, 화면에 완전히 고정 / 절대 움직이지 않음) ---- */
  .child-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
  .bg-media { position:absolute; inset:0; background-size:cover; background-position:center; }
  .bg-image { opacity:1; }
  .bg-video { opacity:0; }
  .child-bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;              /* bg-image/bg-video(z-index 없음=0) 위, content-fg(z-index:1)보다 먼저 오도록 마크업 순서상 위에 위치 */
    background: #000;
    opacity: 0.1;            /* 평소 유지되는 베이스 어둡기 */
    pointer-events: none;
  }
  video.bg-video {
    width: 100%; height: 100%;
    object-fit: cover;         /* 화면을 꽉 채우면서 비율 유지 */
    background: none;
    animation: none;
  }
  /* content-fg: Part1/Part3의 전경(텍스트) 레이어. child-bg와 달리 이 레이어만 스크롤에 따라 움직임(일반 스크롤처럼) */
  .layer .content-fg {
    position:relative; z-index:1; width:100%; height:100%; padding: 6vh 8vw;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    will-change: transform;
  }
  #c0-p1, #c1-p1, #c2-p1, #c3-p1, #c0-p3, #c1-p3, #c2-p3, #c3-p3 { padding:0; }

  #c0-bg .bg-image { background: url('../images/sec_bg1.png') no-repeat center / cover; }
  #c1-bg .bg-image { background: url('../images/sec_bg2.png') no-repeat center / cover; }
  #c2-bg .bg-image { background: url('../images/sec_bg3.png') no-repeat center / cover; }
  #c3-bg .bg-image { background: url('../images/sec_bg4.png') no-repeat center / cover; }

  /* ---- scroll(콘텐츠형) 레이어 ---- */
  .layer.scroll-layer { padding: 0; overflow: hidden; justify-content: flex-start; }
  #app .inner-scroll {
    position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12vh 11.77vw 14vh;
    scrollbar-width: none;
  }
  #app .inner-scroll::-webkit-scrollbar {
    display: none;
  }
  .tall-content{
    display: flex; flex-direction: column; align-items: flex-end;
  }
  .inner-scroll h2 { width: 100%; font-size: clamp(90px, 7.81vw, 150px); font-weight: bold; margin: 0 0 190px; text-align: left; word-break: keep-all;}
  .inner-scroll .hint{width: 47%; text-align: left;}
  .inner-scroll .hint p:nth-child(1) { font-size: 24px; font-weight: bold; line-height: 1.5; padding: 0 0 50px; position: relative;}
  .inner-scroll .hint p:nth-child(1)::after{
    content: '';
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    bottom: -15px;
    left: 0;
  }
  .inner-scroll .hint p:nth-child(2) { font-size: 30px; font-weight: bold; line-height: 1.5;padding: 50px 0 0;}
  .inner-scroll .end-hint {
    margin-top: 60px;
  }

  .second-text-block{
    width: 100%;
    margin: 26vw 0 0;
  }
  .second-text-block h3{
    font-size: clamp(40px, 4.17vw, 80px); font-weight: bold; line-height: 1; margin:0 0 125px; text-align: left;
  }

  .second-text-block ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 100px;
    text-align: left;
  }

  .second-text-block li{
    width: 100%;
    padding: 0 0 40px;
    border-bottom: 1px solid #fff;
  }

  .second-text-block li .table-num{
    font-size: 36px; font-weight: bold; line-height: 1; margin: 0 0 40px;
  }

  .table-text-row{
    display: flex;
    width: 100%;
  }

  .second-text-block li strong{
    font-size: 48px; font-weight: bold; line-height: 1.35; width: 55%;
  }

  .second-text-block li span{
    font-size: 24px; font-weight: bold; line-height: 1.35; width: 45%;
  }

  .last-title{width: 40.5%; max-width:653px; text-align: left;font-size: clamp(50px, 5.21vw, 100px); font-weight: bold; margin: 0 0 80px;}
  .last-title div{line-height: 1;}
  .last-title div span{font-style: italic; font-weight: 400; font-family: "Nelphim", serif;}
  .last-title div:nth-child(2){text-align: right;}
  .last-title div:last-child{padding-left: 60px;}


  /* .tall-content { 
    min-height: 200vh;
  }  */


  /* Part2도 배경은 비워 두고(같은 child의 Part1 배경이 그대로 비쳐 보임) 가독성용 스크림만 추가 */
/*   #c0-p2 .inner-scroll,
	#c1-p2 .inner-scroll,
	#c2-p2 .inner-scroll,
	#c3-p2 .inner-scroll {
		background: linear-gradient(
			180deg,
			rgba(0,0,0,0) 0,
			rgba(0,0,0,.5) 160px,
			rgba(0,0,0,.25) 40%,
			rgba(0,0,0,.6)
		);
	} */
  #c0-p2, #c1-p2, #c2-p2, #c3-p2 { color:#fff; }

  .badge {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 999; background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
    color: #fff; font-size: 12.5px; padding: 9px 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15); letter-spacing: .02em; pointer-events: none;
  }

  /* ---- 하단 4분할 진행 상태바 (Section2 전용) ---- */
  .progress-bar-wrap {
    position: fixed; left:0; right:0; bottom:0; z-index: 400;
    display:flex;
    /* padding: 0 0 calc(4vh + env(safe-area-inset-bottom, 0px)); */
    opacity:0; transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
    background: rgba(0,0,0, 0.05); backdrop-filter:blur(30px);
  }
  .progress-bar-mobile-track {
	  display: none; /* 기본은 숨김 (데스크톱) */
	  position: absolute;
	  left: 0; top: 0;
	  width: 100%; height: 2px;
	  background: rgba(255,255,255,.2);
	  overflow: hidden;
  }
  .progress-bar-mobile-fill {
	  position: absolute; left: 0; top: 0; bottom: 0;
	  width: 0%;
	  background: #fff;
  }
  .progress-bar-wrap.visible { opacity:1; transform: translateY(0); }
  .progress-seg { flex:1; display:flex; flex-direction:column; justify-content: center; padding: 0; height: 90px;}
  .progress-track {
    position:relative; height:1px; width:100%; background: rgba(255,255,255,.3); overflow:hidden;
    opacity: 0; transition: opacity .3s ease;
  }
  .progress-seg.active .progress-track { opacity: 1; }
  .progress-fill {
    position:absolute; left:0; top:0; bottom:0; width:0%; background:#fff;
  }
  .progress-label {
    font-size: 20px; font-weight:bold; color: #fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 
    flex: 1; display: flex; justify-content: center; align-items: center;
  }
  
  /* 스크롤 다운 애니메이션 */
  .ai_ad_tech_page .scroll-guide{
	position:static!important;
	transform:translateX(0)!important;
	margin-top:95px;
	text-align: center;
  }
	.ai_ad_tech_page .scroll-guide-text {
		display: block;
		margin-bottom: 15px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
	}
	.ai_ad_tech_page .scroll-guide-arrow {
		display: block;
		width: 25px;
		height: 15px;
		margin: 0 auto;
		background:url('../images/learnmore_arrow.png') no-repeat center / 100% auto;
		animation: bounce 1.5s ease-in-out infinite;
	}

	@keyframes bounce {
	  0%, 100% {
		transform: translateY(0);
	  }
	  50% {
		transform: translateY(8px);
	  }
	}
  
  @media (hover : hover) {
    .content-btn a:hover{
      border: 1px solid #002fa7;
      background-color: #002fa7;
    }
  }
  
  
  @media (max-width:1280px){
	p.content-eng{
		margin:0 0 45px;
	}
	h2.big{
		margin:0 0 15px;
	}
	.inner-scroll h2{
		margin:0 0 110px;
	}
	.inner-scroll .hint{width:60%;}
	.inner-scroll .hint p:nth-child(1){font-size:20px; padding:0 0 30px;}
	.inner-scroll .hint p:nth-child(2){font-size:26px; padding:30px 0 0;}
	.inner-scroll .hint p:nth-child(1)::after{width:15px; bottom:-10px;}
	.second-text-block h3{margin:0 0 75px;}
	.second-text-block ul{gap:50px;}
	.second-text-block li .table-num{font-size:28px; margin:0 0 20px;}
	.second-text-block li strong{font-size:34px;}
	.second-text-block li span{font-size:20px;}
	.second-text-block li{padding:0 0 20px;}
	h2.big2{margin:0 0 45px;}
	p.desc2{margin:0 0 30px;}
	.content-btn a{
		width:350px;
		min-height:70px;
		padding:10px 25px;
		font-size:16px;
	}
	.last-title{margin:0 0 40px;}
	.hero-final{gap:25px;}
	.progress-label{font-size:16px;}
	.progress-seg{height:70px;}
  }
  
  @media (max-width:1024px) {
	.inner-scroll{padding:12vh 80px 14vh;}
	.inner-scroll h2{font-size:70px;}
	.second-text-block li .table-num{font-size:26px;}
	.second-text-block li strong{font-size:30px;}
	.second-text-block li span{font-size:18px;}
	.second-text-block li span br{display:none;}
  }
  @media (max-width:830px){
    .last-title{width: 42%;}
  }
  
  @media (hover: hover) and (pointer: fine) {
	html.use-scrollbar,
	html.use-scrollbar body {
		height:auto;
		overflow-x:hidden;
		overflow-y:auto;
		scroll-behavior:auto;
	}

	html.use-scrollbar #app {
		position:fixed;
		inset:0;
		overflow:hidden;
	}

	html.use-scrollbar .inner-scroll {
		overscroll-behavior:contain;
	}

	#scroll-proxy {
		position:absolute;
		top:0;
		left:0;
		width:1px;
		pointer-events:none;
		visibility:hidden;
	}
  }
  
  @media (max-width:768px) {
	html {scrollbar-gutter:auto;}
	
	
	.mobile-br {display:block;}
	.pc-br {display:none;}

    #header {height:48px;padding:0 16px;}
    #header .logo img {width:72px;}
    #header .gnb {display:none;}
    #header .mobile-menu-open {display:block;margin-right:-10px;}
    .mobile-menu-open span:first-child {top:16px;}
    .mobile-menu-open span:last-child {top:27px;}
	
	.hero-text{display:none;}
	.hero-final{display:none;}
	.hero-text-mobile{
		position:absolute; inset:0; display:flex; flex-direction:column;
		align-items:center; justify-content:center; gap:40px; text-align:center; padding:0 20px;
	}
	
	.hero-text.first-text{display:none;}
	
	/* #c0-p1, #c1-p1, #c2-p1, #c3-p1{background:transparent;} */
	.layer .content-fg{
	  padding:150px 20px;
	  position: relative;
	}
	#section1{justify-content:flex-start;}
	
	.ai_ad_tech_page .scroll-guide{
		margin-top:45px;
	}
    .ai_ad_tech_page .scroll-guide-text {margin-bottom:10px;font-size:11px;}
    .ai_ad_tech_page .scroll-guide-arrow {width:12px;height:8px;}
	
	@keyframes bounce {
	  0%, 100% {
		transform: translateY(0);
	  }
	  50% {
		transform: translateY(5px);
	  }
	}
	
	h2.big{font-size:40px;}
	
  #app .inner-scroll{
    padding: 0 20px;
  }
  .inner-scroll h2{
    font-size: 40px;
    margin: 0 0 45px;
    text-align: center;
  }
  .inner-scroll .tall-content h2{
    font-size: 50px;
    text-align: left;
  }

  p.content-eng{
    font-size: 14px;
    margin: 0 0 45px;
  }
  p.desc{
    font-size: 24px;
    font-weight: 700;
  }
  .inner-scroll .hint p:nth-child(1){
    font-size: 14px;
    padding: 0 0 22px;
  }

  .inner-scroll .hint{
    width: 70%;
  }
  .inner-scroll .hint p:nth-child(2){
    font-size: 17px;
    padding: 22px 0 0;
  }
  .inner-scroll .hint p:nth-child(1)::after{
    width: 10px;
    bottom: -5px;
  }
  .second-text-block{
    margin: 150px 0 0;
  }

  .second-text-block h3{
    font-size: 40px;
    margin: 0 0 40px;
  }
  .second-text-block li .table-num{
    font-size: 18px;
    margin: 0 0 25px;
  }
  .table-text-row{
    flex-direction: column;
    gap: 20px;
  }
  .second-text-block li strong{
    width: 100%;
  }
  .second-text-block li span{
    width: 100%;
  }
  .second-text-block li strong{
    font-size: 24px;
  }
  .second-text-block li span{
    font-size: 14px;
  }
  .inner-scroll .end-hint{
    margin-top: 0;
  }
  .mobile-part-text.mobile-part3 h2{
    font-size: 24px;
  }
  p.desc2{
    font-size: 18px;
    margin: 0 0 25px;
  }
  .content-btn a{
    font-size: 14px;
    height: 50px;
    border: none;
    background-color: #002fa7;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

  .content-btn a span{
    width: 12px;
    height: 14px;
  }
  .mobile-part-text h2{
    margin: 0 0 20px;
  }

	.mobile-bg-trigger { height: 1px; }
  
	.inner-scroll {
		padding: 0 20px;
	}
	.mobile-part-text {
		padding: 150px 0; /* 기존 .content-fg의 padding:150px 20px 이 사라졌으니 유사하게 보정 */
	}

    .progress-seg{height: 50px;padding: 0 10px;}
    .progress-label{
      font-size: 14px;
    }
    .progress-seg:nth-child(2){padding-left: 20px;}
    .progress-seg:nth-child(5){padding-right: 20px;}
    p.desc3{
      font-size: 30px;
      line-height: 1.2;
    }
	
    .last-title{margin: 0 0 45px;max-width: 325px;width: 100%;}
    .last-title div:last-child{padding-left: 30px;}

    .hero-kr-mobile { font-size: 30px; font-weight:bold; color:#fff; line-height:1.2; }
    .hero-eng-mobile { font-size: 50px; font-weight:bold; color: #fff; line-height:1;width: 90%; max-width:305px;text-align: left;}
    .hero-eng-mobile .ital{font-family: "Nelphim", serif; font-style: italic; font-weight: 400;}
	.hero-eng-mobile div:nth-child(2){text-align: right;}
	.hero-eng-mobile div:nth-child(3){padding-left: 30px;}
	
	.progress-bar-wrap { position: fixed; /* 필요시 조정 */ }
    .progress-bar-mobile-track { display: block; }
    .progress-seg .progress-track { display: none; }
    .progress-label { opacity: 0.2; }
    .progress-seg.active .progress-label { opacity: 1; }
	
	#section3 {
		display:block;
		padding:0;
		overflow:hidden;
	}
	#section3-inner {
		position:absolute;
		inset:0;
		overflow-x:hidden;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior:contain;
	}

	/* 원래 #section3에 있던 레이아웃을 여기로 */
	.mobile-section3-body {
		position:relative;
		min-height:100%;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		padding:0 20px;
	}

	/* Footer */
	#footer {position:absolute;width:100%;height:auto;min-height:0;padding:0;background:#f4f4f4;color:#242424;overflow:hidden;}
	#footer.layer {
		position:relative;
		inset:auto;
		width:100vw;
		height:auto;
		min-height:0;
		z-index:auto;
		transform:none;
		margin-left:-20px;
	}
	#footer .footer-inner-wrap {
		position:relative;
		inset:auto;
		height:auto;
		transform:none;
		min-height:0;
		padding:44px 0 20px;
	}
	#footer .footer-inner {display:block;width:auto;max-width:none;margin:0 24px;padding:0;position:relative;inset:auto; transform:none;}
	#footer .footer-logo img {width:72px;height:auto;}
	#footer .footer-links {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:40px;}
	#footer .footer-links a {font-size:13px;line-height:1.4;}
	#footer .footer-info {margin-top:38px;font-size:13px;line-height:1.65;letter-spacing:-.3px;word-break:keep-all;}
	#footer .copyright {margin-top:36px;font-size:13px;letter-spacing:0;}
	#footer .footer-marquee {position:relative;inset:auto; left:auto; bottom:auto;width:100%;margin-top:34px;overflow:hidden;white-space:nowrap;}
	#footer .footer-marquee-track span {padding-right:15px;font-size:48px;font-weight:700;line-height:1.1;letter-spacing:0;}

	.policy-dialog {width:calc(100% - 32px);max-height:85svh;}
	.policy-dialog .policy-dialog-header {padding:18px 20px;}
	.policy-dialog .policy-dialog-header h2 {font-size:20px;}
	.policy-dialog .policy-dialog-body {padding:24px 20px 30px;font-size:14px;}
	.policy-dialog .policy-dialog-body h3 {font-size:16px;}

  }