/* style.css */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
	font-family:'SCDream6';
	src:local(※),
	url('/2026dong100pass/font/SCDream6.woff') format('woff');
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
	font-family: 'notosanskr';
}

ol, ul {
    list-style: none
}

blockquote,
q {
    quotes: '"' '"'
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

address {
    font-style: normal
}

textarea {
    width: 100%;
    resize: none;
}

button, img, input, select {
    vertical-align: middle
}

.ellipsis {
	display:inline-block;
	max-width:100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: normal;
	vertical-align:middle
}

table td a {
    overflow: hidden;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

body, html {
	overflow-x:hidden;
}

body {
	color:#353535;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	-webkit-user-drag: none;
}

::selection {
   background: #122137;
   color: #fff
}

::-moz-selection {
   background: #122137;
   color: #fff
}

::-webkit-selection {
    background: #122137;
   color: #fff
}

area {
    cursor: pointer;
}

.rel {
    position: relative;
}

button {
	background-color: transparent;
	outline: none;
	border: none;
}

.container {
    max-width: 1920px;
    margin: auto;
}

.section .inner {
    max-width: 750px;
    margin: auto;
    text-align: center;
}

.section.main {
	overflow: hidden;
}

.intro {
	position: fixed;
	display: flex;
	display: none;
	justify-content: center;
	align-items: center;
	inset: 0;
	width: 100%;
	height: 100dvh;
	background-color: #fff;
	text-align: center;
	z-index: 9;
}

.section.main .main_bg {
	position: absolute;
	inset: 0;
	height: 100dvh;
	min-height: 900px;
	overflow: hidden;
	width: 100%;
}

.section.main .main_bg li {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100dvh;
	min-height: 900px;
	background-position: center;
	background-size: cover;
}

.section.main .main_bg li.first {
	background-image: url('/2026dong100pass/img/main_bg_01_new.jpg?new');
}

.section.main .main_bg li.second {
	background-image: url('/2026dong100pass/img/main_bg_02.jpg?new');
}

.section.main .inner {
	padding: 0 30px;
	text-align: left;
	height: 100dvh;
	min-height: 900px;
}

.section.main .logo {
	position: relative;
	padding-top: 40px;
	margin-bottom: 40px;
	line-height: 100%;
	z-index: 20;
}

.section.main .white_bg {
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(255, 255, 255, .8);
	width: calc(50% + 55px);
	height: 100dvh;
	min-height: 960px;
}

.section.main .main_bg {
	
}

.section.main .text_wrap {
	position: relative;
	z-index: 8;
}

.section.main .main_text,
.section.main .card_img {
	margin-bottom: 40px;
}

.ai_phara {
	position: absolute;
	bottom: 10px;
	left: calc(50% + 120px);
}

.section02 {
	padding: 150px 0;
	background-color: #122137;
}

.video_wrap {
  position: relative;
  width: 100%;
  padding-bottom: 54.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.section03 {
	padding-top: 176px;
}

.section03 .arm {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 44%;
}

.section03 .arm.left {
	transform: translateX(-125%);
	transform-origin: 100% 50%;
	animation: arm_left_ani 1.5s ease-in-out infinite;
}

.section03 .arm.right {
	transform: translateX(10%);
	transform-origin: 0 100%;
	animation: arm_right_ani 1.5s ease-in-out infinite;
}

@keyframes arm_left_ani {
	0% {
		transform: rotate(0) translateX(-125%);
	}
	
	50% {
		transform: rotate(-5deg) translate(-125%, -10%);
	}
	
	100% {
		transform: rotate(0) translateX(-125%);
	}
}

@keyframes arm_right_ani {
	0% {
		transform: rotate(0) translateX(10%);
	}
	
	50% {
		transform: rotate(5deg) translate(10%, -5%);
	}
	
	100% {
		transform: rotate(0) translateX(10%);
	}
}

.section04 {
	padding-bottom: 150px;
}

.section04 [class*=list] {
	padding-top: 80px;
}

.section.faq {
	padding: 150px 0;
	background-color: #d5f8ff;
}

.section.faq .title {
	text-align: left;
	margin-bottom: 40px;
}

.section.faq .faq_ul {
	border-top: 2px solid #98aeca;
	letter-spacing: -0.08em;
}

.section.faq .faq_ul li {
	border-bottom: 2px solid #98aeca;
}

.section.faq .faq_ul .question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 110px;
	padding: 0 40px;
	text-align: left;
	cursor: pointer;
}

.section.faq .faq_ul li.active .question {
	background-color: #122137;
	color: #fff;
}

.section.faq .faq_ul .question * {
	font-family:'SCDream6';
	word-break: keep-all;
}

.section.faq .faq_ul .question .q_text {
	display: flex;
	align-items: center;
	font-size: 24px;
}

.section.faq .faq_ul .question .q_text p {
	padding-right: 5px;
}

.section.faq .faq_ul .question .q_text .num {
	margin-right: 36px;
}

.section.faq .faq_ul .question button {
	cursor: pointer;
}

.section.faq .faq_ul li.active .question button {
	color: #fff;
}

.section.faq .faq_ul .answer {
	padding: 40px;
	padding-left: 105px;
	text-align: left;
	background-color: #fff;
	font-size: 20px;
	word-break: keep-all;
}

.section.faq .faq_ul .table_flex {
	display: flex;
	justify-content: space-between;
	width: 180px;
	margin: auto;
}

.section.faq .faq_ul .answer th {
	width: 40%;
}

.section.faq .faq_ul .font-sm .answer {
	font-size: 18px;
}

.section.faq .faq_ul .answer .list {
	margin-bottom: 40px;
}

.section.faq .faq_ul .answer table {
	width: 100%;
}

.section.faq .faq_ul .answer .table {
	font-size: 16px;
}

.section.faq .faq_ul .answer table th,
.section.faq .faq_ul .answer table td {
	padding: 10px;
}

.section.faq .faq_ul .answer .table th,
.section.faq .faq_ul .answer .table td {
	padding: 8px;
	border: 1px solid #000;
	text-align: center;
	line-height: 120%;
}

.section.faq .faq_ul .answer .tit {
	text-align: center;
	margin-bottom: 10px;
	font-weight: 600;
}

.section.faq .faq_ul .answer .tit.left {
	text-align: left;
}

.section.faq .faq_ul .answer .table th {
	width: 10%;
	background-color: #d5f8ff;
}

.section.faq .faq_ul .answer .table.w50 th {
	width: 50%;
}

.section.faq .faq_ul .answer .table.w50 td {
	text-align: left;
}

.section.faq .faq_ul .answer .table td span {
	font-size: 13px;
}

.section.faq .faq_ul .answer .table .bold {
	background-color: #f5f5f5;
	font-weight: 600;
}

.section.faq .faq_ul .answer .b {
	color: #ea4082;
}

.section.faq .faq_ul .answer .phara {
	margin-top: 10px;
	font-size: 18px;
}

.section.faq .faq_ul .answer dl {
	display: flex;
}

.section.faq .faq_ul .answer dt {
	padding-right: 4px;
	text-wrap: nowrap;
}

.section.faq .faq_ul .answer dd {
	text-align: left;
}

.section.faq .faq_ul .answer > span {
	font-size: 15px;
}

.section06 {
	padding: 150px 0;
	background-color: #122137;
}

.footer {
	padding: 80px 0;
}

.footer .inner {
	max-width: 750px;
	margin: auto;
	text-align: center;
}

.footer .info {
	margin-top: 30px;
	font-weight: 600;
}

.footer .info .copy {
	color: #757575;
}

.pc_floating {
	position: fixed;
	margin-left: 900px;
	top: 100px;
	z-index: 8;
}

.mo_floating {
	display: none;		
}

/* ===== JS 동작용 추가 CSS (수정본) ===== */

/* 스크롤 잠금 */
html.is-scroll-locked,
body.is-scroll-locked {
  height: 100%;
  overflow: hidden !important;
}

/* Intro 표시/전환 */
.intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  display: flex !important; /* intro가 display:none이어도 무조건 보이게 */
}
.intro.is-show { opacity: 1; pointer-events: auto; }
.intro.is-hide { opacity: 0; pointer-events: none; }

/* intro rolling */
.intro .phara_rolling { position: relative; width: 100%; height: 100%; }
.intro .phara_rolling li {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.2,1);
}
.intro .phara_rolling li.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* === 로딩 애니메이션(메인) : 더 확실하게 === */
.js-load {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
}
.js-load.is-in {
  animation: loadPop .75s cubic-bezier(.2,.95,.2,1) forwards;
}
@keyframes loadPop {
  0%   { opacity: 0; transform: translateY(22px) scale(.98); filter: blur(3px); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}

/* === 스크롤 리빌(섹션02 이하) : 프리셋 3종 === */
.js-reveal { opacity: 0; will-change: opacity, transform; }

.js-reveal.up    { transform: translateY(26px); }
.js-reveal.left  { transform: translateX(-28px); }
.js-reveal.scale { transform: scale(.96); }

.js-reveal.is-in {
  animation: revealIn .85s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes revealIn {
  0%   { opacity: 0; }
  100% { opacity: 1; transform: none; filter: none;}
}


.section.main .main_bg li {
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}

.section.main .main_bg li.is-show {
  opacity: 1;
}

/* (선택) 살짝 줌으로 단조로움 제거 */
.section.main .main_bg li.is-zoom {
  animation: bgZoom 6s ease-in-out infinite;
}
@keyframes bgZoom {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* FAQ answer: JS가 애니메이션 담당 -> transition 없음 */
/* ===== FAQ 슬라이드: max-height 방식(꼬임/잘림 방지) ===== */

/* answer 기본 스타일은 기존거 유지하고, 슬라이드 관련만 덮어씀 */
.section.faq .faq_ul > li .answer{
  /* 기존 레이아웃 유지 */
  padding: 0 40px 0 105px;   /* 닫힘 상태에서는 위아래 0 */
  overflow: hidden;

  /* 슬라이드 핵심 */
  max-height: 0;
  opacity: 0;

  transition: height .25s cubic-bezier(.2,.9,.2,1), opacity .25s ease, padding .25s cubic-bezier(.2,.9,.2,1);
  will-change: max-height, opacity, padding;
}

/* 열림 상태 */
.section.faq .faq_ul > li.active .answer{
  padding: 40px 40px 40px 105px;
  max-height: 2000px; /* ★ 충분히 크게. 내용 길면 더 키워 */
  height: auto;
  opacity: 1;
}

/* 아이콘 토글 */
.section.faq .faq_ul .question button .close{display:none;}
.section.faq .faq_ul > li.active .question button .open{display:none;}
.section.faq .faq_ul > li.active .question button .close{display:inline-block;}

/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .intro,
  .intro .phara_rolling li,
  .js-reveal,
  .js-load {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media(max-width: 1440px) {
	.pc_floating {
		right: 20px;
	}
}

@media(max-width: 991px) {
	.pc_floating {
		display: none;
	}
	
	.mo_floating {
		display: flex;
		position: fixed;
		width: 100%;
		inset: auto 0 0 0;
		z-index: 8;
	}
	
	.mo_floating.is-abs {
	  position: absolute;
	}
	
	.mo_floating li {
		width: 50%;
		height: 76px;
	}
	
	.mo_floating li button {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #000;
		padding: 0 2.4vw;
	}
	
	.mo_floating li:first-child button {
		background-color: #fff;
	}
	
	.mo_floating li:nth-child(2) button {
		background-color: #0F3874;
	}
	
	.section06 {
		padding-bottom: 200px;
	}
}

@media(max-width: 750px) {

	.mo_floating li {
		width: 50%;
		height: 16vw;
	}

	.phara_rolling .first img {
		width: 47.47vw;
	}
	
	.phara_rolling .second img {
		width: 68.8vw;
	}
	
	.phara_rolling .third img {
		width: 49.07vw;
	}
	
	.phara_rolling .forth img {
		width: 53.6vw;
	}

	.section.main .inner {
		min-height: 140vw;
		height: calc(100dvh - 16vw);
		display: flex;
		flex-direction: column;
		justify-content: center;
		
	}

	.section.main .main_bg li {
		min-height: 140vw;
		height: calc(100dvh - 16vw);
		background-position: 64% center;
		inset: 0 0 auto 0;
	}

	.section.main .white_bg {
		width: calc(50%);
	}
	
	.section.main .logo {
		position: absolute;
		top: 0;
		margin-bottom: 10.67vw;
	}
	
	.section.main .logo img{
		width: 28.53vw;
		-webkit-filter: none;
		filter: none;
	  }

	  /* body.open .section.main .logo img{
	  		-webkit-filter: brightness(0) invert(1);
	  		filter: brightness(0) invert(1);
	  } */
	
	/* .section.main .text_wrap {
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: rgba(255, 255, 255, .6);
		padding: 24vw 8vw 24vw;
	} */
	
	.section.main .inner {
		padding: 0 6.4vw;
		padding-top: 20vw;
	}
	
	.section.main .main_bg li.first {
		background-position: 58% center;
	}
	
	.section.main .main_bg li.second {
		background-position: 52% center;
	}
	
	.section.main .main_text {
		margin-bottom: 10.67vw;
	}
	
	.section.main .main_text img {
		width: 35.87vw;
	}
	
	.section.main .card_img {
		margin-bottom: 10.67vw;
	}
	
	.section.main .card_img img {
		width: 36.13vw;
	}
	
	.section.main .guide {
		width: 36.27vw;
	}
	
	.ai_phara {
		bottom: auto;
		left: auto;
		right: 1.33vw;
		top: 1.33vw;
		width: 20.8vw;
	}
	
	.section02 {
		padding: 20vw 3.2vw;
	}
	
	.section03 {
		padding-top: 23.47vw;
	}
	
	.section03 .arm.left img {
		width: 35.2vw;
	}
	
	.section03 .list01 > img {
		width: 89.87vw;
	}
	
	.section03 .arm.right img {
		width: 38.13vw;
	}
	
	.section04 {
		padding-bottom: 20vw;
	}
	
	.section04 img {
		width: 92vw;
	}
	
	.section04 [class*=list] {
		padding-top: 10.67vw;
	}
	
	.section.faq,
	.section06 {
		padding: 20vw 3.2vw;
	}
	
	.section06 {
		padding-bottom: 36.4vw;
	}
	
	.section.faq .title {
		margin-bottom: 5.33vw;
	}
	
	.section.faq .title img {
		width: 56.8vw;
	}
	
	.section.faq .faq_ul .question {
		height: auto;
		padding: 2.8vw;
	}
	
	.section.faq .faq_ul .question .q_text {
		font-size: 3.6vw;
	}
	
	.section.faq .faq_ul > li.active .answer {
		padding: 5.33vw;
		font-size: 3.2vw;
	}
	
	.section.faq .faq_ul .question .q_text .num {
		margin-right: 3.2vw;
	}
	
	.section.faq .faq_ul .answer .list {
		margin-bottom: 5.33vw;
	}
	
	.section.faq .faq_ul .answer .table th, .section.faq .faq_ul .answer .table td,
	.section.faq .faq_ul .answer table th, .section.faq .faq_ul .answer table td {
		padding: 2.4vw;
	}
	
	.section.faq .faq_ul .answer .table,
	.section.faq .faq_ul .font-sm .answer {
		font-size: 3.2vw;
	}
	
	.section.faq .faq_ul .answer .phara {
		margin-top: 2.4vw;
		font-size: 2.8vw;
	}
	
	.section.faq .faq_ul .question br {
		display: none;
	}
	
	.section.faq .overflow_x {
		overflow-x:auto;
	}
	
	.section.faq .faq_ul .table_flex {
		width: 80px;
	}
	
	.section06 img {
		width: 88.53vw;
	}
	
	.footer {
		padding: 10.67vw 3.2vw;
	}
	
	.footer .logo img {
		width: 25.33vw;
	}
	
	.footer .info {
		margin-top: 4vw;
		font-size: 3.2vw;
	}
}