@charset 'utf-8';

/* ====================== */
/* UI Reset */
/* ====================== */
* {margin:0;padding:0;font:inherit;font-family: 'Pretendard', Pretendard, sans-serif;letter-spacing:-0.1px;}
*, *::before, *::after {box-sizing:border-box;}
html {font-size: 62.5%;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
img, video, svg, picture {display:block;height:auto;max-width:100%;}
body {font-size:16px;color:#222;line-height:1.4;overflow-x:hidden;}
a {text-decoration:none;cursor:pointer;color:#222;}
button {border:none;cursor:pointer;background-color:transparent;}
sup {line-height:1;vertical-align:0px;}
ul, ol, li {list-style:none;}
input,textarea,button,select,a {-webkit-tap-highlight-color: transparent;}

input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input::-ms-clear {display: none;}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type='number'] {-moz-appearance: textfield;}

select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none;}


/* ====================== */
/* Common */
/* ====================== */
:root {
    --primary-color: #2D70FF;
}
.ta-center {text-align:center;}
.ta-right {text-align:right;}
.ta-left {text-align:left;}

.w-full {width:100%;}
.w-half {width:50%;}

.blind {position: absolute;width: 1px;height: 1px;clip: rect(0 0 0 0);overflow: hidden;}

.mo-only {display:none;}

.header {position:fixed;top:0;left:0;right:0;width:100%;z-index:100;border-bottom: 1px solid #F0F0F0;background: #FFF;box-shadow: 1px 1px 12px 0 rgba(140, 194, 215, 0.10);}
.header .inner {max-width: 1240px;margin:0 auto;display:flex;align-items:center;height:80px;}
.header .header-logo {margin-right:80px;height:19px;}
.header .gnb-wrap {margin-right:auto;}
.header .gnb {display:flex;align-items:center;gap:80px;}
.header .gnb-item {position:relative;}
.header .gnb-title {}
.header .btn-start {color:#fff;background-color:var(--primary-color);text-align:center;padding:10px 26px;font-weight:500;border-radius:100px;display:inline-block;font-size:12px;}
.header .btn-menu {display:none;}

.header .btn-login {margin-right: 15px; font-size: 14px; font-weight: 600;}

.inner {max-width: 1240px;margin-left:auto;margin-right:auto;}

.section-title {font-size:36px;font-weight:700;}
.section-title strong {color:var(--primary-color);}
.section-text {font-size:20px;color:#7F8894;}
.dot {display:inline-block;width:8px;height:8px;border-radius:100px;background-color:var(--primary-color);margin-left:4px;}


/* ====================== */
/* Page */
/* ====================== */
.top-space-img {
  margin-top: 80px;
}

.intro {height:100vh;position:relative;display:flex;align-items:center;justify-content:center;background-color:#000116;overflow:hidden;}
.intro .intro-bg {position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;object-fit:cover;}
.intro .inner {position:relative;z-index: 1;width:100%;}  
.intro .intro-title {margin:0 auto 20px;font-size:46px;font-weight:800;}
.intro .intro-title span {color:var(--primary-color);}
.intro .intro-text {font-size:20px;font-weight:400;line-height:1.5;margin-bottom:48px;color:#7F8894;}
.intro .platform {display:flex;gap:10px;}

.section {padding:140px 0;}

.sec1 {background:#fff url(../images/sec1_bg.png) no-repeat center/cover;text-align:center;}
.sec1 .pos-swiper {position:relative;}
.sec1 .pos-swiper img {margin:0 auto;height:650px;}
.sec1 .pos-swiper .description {position:absolute;width:810px;top:43%;left:50%;transform:translateX(-50%);border-radius: 20px;border: 1px solid #F0F0F0;background: rgba(255, 255, 255, 0.40);box-shadow: 1px 1px 12px 0 rgba(140, 194, 215, 0.10);backdrop-filter: blur(6px);display:flex;align-items:center;gap:24px;padding:24px;}
.sec1 .pos-swiper .description .no {font-size:32px;color:var(--primary-color);font-weight:700;}
.sec1 .pos-swiper .description .txt {font-size:18px;color:var(--primary-color);}
.sec1 .pos-swiper .swiper-slide {opacity:0;transition:opacity .5s ease;}
.sec1 .pos-swiper .swiper-slide-active {opacity:1;}
.sec1 .swiper-button-prev {width:50px;height:50px;background-color:#fff;border:1px solid #f0f0f0;border-radius:100px;}
.sec1 .swiper-button-prev svg {height:36%;color:#222;}
.sec1 .swiper-button-next {width:50px;height:50px;background-color:#fff;border:1px solid #f0f0f0;border-radius:100px;}
.sec1 .swiper-button-next svg {height:36%;color:#222;}
.sec1 .btn-download {border-radius: 20px;background: #2D70FF;text-align:center;width:450px;color:#fff;padding:18px 10px;display:inline-flex;align-items:center;font-weight:500;justify-content:center;}
.sec1 .btn-download:before {content:'';display:inline-block;width:23px;height:23px;background:url(../images/btn_download.svg) no-repeat center/contain;margin-right:6px;}
.sec1 .download-txt {margin-top:20px;color:var(--primary-color);font-weight:500;}
.sec1 .download-area {margin-top:-70px;position:relative;z-index:1;}

.sec2 {background:#fff url(../images/sec2_bg.png) no-repeat center/cover;}
.sec2 .grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;}
.sec2 .section-title {margin-top:80px;}
.sec2 .section-title .dot {vertical-align:17px;}
.sec2 .card {position:relative;}
.sec2 .card .bg-area {position: relative;border-radius:20px;overflow:hidden;}
.sec2 .card .bg-area img {position:relative;z-index:1;}
.sec2 .card .bg-area:after {height:100%;width:100%;left:0;position:absolute;top:0;z-index:2;background: rgba(12, 18, 49, 0.60);display:block;content: '';}
.sec2 .card .txt-area {position:absolute;left:0;bottom:0;padding:35px 32px;z-index:2;color:#fff;}
.sec2 .card .txt-area .title {font-size:24px;font-weight:600;display:block;margin-bottom:8px;}
.sec2 .card .txt-area .txt {font-size:16px;font-weight:300;}
.sec2 .card .unit {position: absolute;top:20px;right:30px;color:#fff;z-index:3;font-size:64px;opacity:.8;font-weight:600;}

.sec3 {background:#fff url(../images/sec3_bg.png) no-repeat center/cover;}
.sec3 .core-wrap {display:flex;align-items:start;gap:150px;}
.sec3 .core-list {flex:1;}
.sec3 .core-item {position:relative;padding:30px 0 36px;border-top:1px solid #F0F0F0;}
.sec3 .core-item:last-child {padding-bottom:0;}
.sec3 .core-item .subtitle {color:#7F8894;font-size:14px;font-weight:500;margin-bottom:10px;}
.sec3 .core-item .title {color:#222;font-size:24px;font-weight:600;}
.sec3 .core-item .icon {position:absolute;right:0;top:50%;transform:translateY(-50%);height:34px;}

.sec4 {background:#F9FAFB url(../images/sec4_bg.png) no-repeat center/cover;}
.sec4 .section-head {margin-bottom:60px;}
.sec4 .reply-list {display:flex;gap:58px;}
.sec4 .reply {width:100%;min-width:0;border-radius:20px;overflow:hidden;background-color:#fff;}
.sec4 .msg-box {position: relative;overflow:hidden;}
.sec4 .msg-box .txt:before {content:'';display:block;position:absolute;width:22px;height:22px;background:urL(../images/quotes01.png) no-repeat center/contain;left:24px;top:24px;}
.sec4 .msg-box .txt:after {content:'';display:block;position:absolute;width:22px;height:22px;background:urL(../images/quotes02.png) no-repeat center/contain;right:24px;bottom:24px;}
.sec4 .msg-box .txt {position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(12, 18, 49, 0.7);color:#fff;padding:47px 44px;font-size:13px;line-height:1.55;}
.sec4 .info-box {padding:22px 24px;}
.sec4 .info-box strong {display:block;font-size:18px;font-weight:600;margin-bottom:6px;}
.sec4 .info-box p {display:block;color:#7F8894;}

.sec5 .section-head {margin-bottom:60px;text-align:center;}
.sec5 .setup-list {display:flex;flex-wrap:wrap;gap:54px 40px;}
.sec5 .setup-item {flex:1 1 40%;display:flex;align-items:center;gap:20px;border-radius: 20px;border: 1px solid #F0F0F0;background: #FFF;box-shadow: 1px 1px 12px 0 rgba(140, 194, 215, 0.10);padding:36px 32px;}
.sec5 .setup-item .title {display:block;font-size:18px;font-weight:600;}
.sec5 .setup-item p {color:#7F8894;margin-top:6px;}

.sec6 {background:#F9FAFB url(../images/sec6_bg.png) no-repeat center/cover;}
.sec6 .section-head {margin-bottom:40px;}
.sec6 .section-title {margin-bottom:14px;}
.sec6 img {max-width:105%;margin-left:-2%;}

.sec7 {background:#fff url(../images/sec7_bg.png) no-repeat center/cover;}
.sec7 .section-head {margin-bottom:60px;text-align:center;}
.sec7 .section-title {margin-bottom:14px;}
.sec7 .plan-area {display:flex;align-items:center;justify-content:center;}
.sec7 .plan {border-radius: 30px;border: 1px solid #F0F0F0;background: #FFF;box-shadow: 1px 1px 6px 0 rgba(140, 194, 215, 0.10);padding:30px;overflow:hidden;position:relative;}
.sec7 .plan:before {content:'';display:block;border-radius: 288px;background: rgba(45, 112, 255, 0.40);filter: blur(90px);width:288px;height:288px;position:absolute;right:-20%;top:-40%;}
.sec7 .plan .title {color:var(--primary-color);font-size:20px;font-weight:600;margin-bottom:25px;}
.sec7 .plan .price {display:flex;gap:10px;align-items: end;margin-bottom:36px;}
.sec7 .plan .price strong {font-size:32px;color:#142c60;font-weight:600;}
.sec7 .plan .price span {color:var(--primary-color);font-weight:500;margin-bottom:3px;}
.sec7 .plan .btn-detail {border-radius: 16px;border: 1px solid #F0F0F0;background: #FFF;text-align:center;width:100%;display:block;font-weight:500;padding:16px 0;}
.sec7 .plan .btn-detail span {color:var(--primary-color);}
.sec7 .plan .benefit {margin-top:30px;}
.sec7 .plan .benefit .item {display:flex;align-items:center;margin-bottom:16px;}
.sec7 .plan .benefit .item:last-child {margin-bottom:0;}
.sec7 .plan .benefit .icon {margin-right:12px;}
.sec7 .plan .benefit .txt {font-weight:500;}

.sec8 .section-head {text-align:center;margin-bottom:60px;}
.sec8 .section-title {margin-bottom:18px;}
.sec8 .swiper-button-prev {width:34px;height:34px;background: #fff url(../images/swiper_arrow_left.png) no-repeat center;border:1px solid #f0f0f0;border-radius:100px;top:40% !important;left:-17px !important;}
.sec8 .swiper-button-prev svg {display:none;}
.sec8 .swiper-button-next {width:34px;height:34px;background:#fff url(../images/swiper_arrow.png) no-repeat center;border:1px solid #f0f0f0;border-radius:100px;top:40% !important;right:-17px !important;}
.sec8 .swiper-button-next svg {display:none;}
.sec8 .review-wrap {position: relative;}
.sec8 .review-swiper .swiper-slide {height:auto;}
.sec8 .review-swiper .card {border-radius: 20px;border: 1px solid #F0F0F0;background: #FFF;box-shadow: 1px 1px 12px 0 rgba(140, 194, 215, 0.10);width:100%;height:100%;padding:24px;position:relative;overflow:hidden;}
.sec8 .review-swiper .card:before {content:'';display:block;position:absolute;width:200px;height:200px;border-radius:200px;background-color:var(--primary-color);right:-20%;top:-30%;opacity:0.2;filter: blur(200px);}
.sec8 .review-swiper .profile {display:flex;align-items:center;gap:22px;margin-bottom:20px;}
.sec8 .review-swiper .store {font-size:20px;font-weight:600;margin-bottom:5px;}
.sec8 .review-swiper .name {}
.sec8 .review-swiper .txt {line-height:1.5;width:92%;word-break:keep-all;}
.sec8 .review-swiper .swiper-pagination {position: unset;margin-top:40px;}
.sec8 .review-swiper .swiper-pagination-bullet-active {background-color:#2D70FF;}


/* 상하 여백 클래스 */
.btn-custom-spacing {
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* 남색 버튼 전용 클래스 (!important로 기존 스타일 강제 덮어쓰기) */
.btn-navy {
	background-color: #1a237e !important; /* 남색 배경 강제 적용 */
	color: #ffffff !important;           /* 흰색 텍스트 강제 적용 */
	padding: 10px 20px;
	border-radius: 4px;
	text-decoration: none;
}


/* =========================================================
   Q&A 아코디언 스타일 (다크 테마 적용 및 배경색 추가)
   ========================================================= */
.sec-qna {
	padding: 80px 0; /* 상하 여백 조절 */
	background-color: #f9f9f9; /* 다크 테마에 어울리는 흐린 회색 배경 */
	/* 만약 더 밝은 회색을 원하시면 background-color: #1e222e; 등으로 변경 가능합니다. */
}

.faq-list {
	max-width: 900px;
	margin: 40px auto 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.faq-item {
	background-color: #0f172a; /* #212533 첨부 이미지의 어두운 배경색 */
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	overflow: hidden;
	transition: background-color 0.3s ease;
}

.faq-item.active {
	background-color: #2a2e3d; /* 열렸을 때 조금 더 밝은 배경색 */
}

.faq-question {
	padding: 20px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

.faq-question .icon {
	font-size: 20px;
	font-weight: normal;
	color: #cbd5e1;
}

.faq-answer {
	max-height: 0;
	padding: 0 25px;
	overflow: hidden;
	transition: all 0.3s ease;
	color: #94a3b8; /* 답변 텍스트 회색 */
	font-size: 15px;
	line-height: 1.6;
	opacity: 0;
}

.faq-item.active .faq-answer {
	max-height: 500px; 
	padding: 0 25px 25px 25px;
	opacity: 1;
	border-top: 1px solid rgba(255, 255, 255, 0.05); /* 질문과 답변 사이 구분선 */
	margin-top: 5px;
	padding-top: 20px;
}

/* =========================================================
   Q&A 섹션 타이틀 가운데 정렬
   ========================================================= */
.sec-qna .section-head {
	text-align: center !important;
}

.sec-qna .section-head .section-title,
.sec-qna .section-head .section-text {
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}



/* =========================================================
   Footer (다크 테마 적용)
   ========================================================= */
.footer {
	padding: 60px 20px 100px; /* 모바일 하단 GNB 공간을 고려하여 하단 여백 여유 있게 설정 */
	background-color: #0f172a; /* #535353 */
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer .inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* 로고 텍스트 */
.footer-logo {
	font-size: 32px;
	font-weight: 900;
	color: #ffffff;
	margin-bottom: 40px;
	letter-spacing: -1px;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.2); /* 이미지처럼 약간의 빛번짐 효과 */
}

/* 상단 메뉴 링크 */
.footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px 40px;
	margin-bottom: 30px;
}

.footer-nav a {
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.footer-nav a:hover {
	color: #ffffff;
}

/* 약관 링크 영역 (아래 실선 포함) */
.footer-legal {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 정보영역과의 구분선 */
}

.footer-legal a {
	color: #f8f9fa;
	font-size: 14px;
	text-decoration: none;
}

.footer-legal a:hover {
	color: #ffffff;
}

.footer .divider {
	color: #c6cdd9;
	font-size: 12px;
	margin: 0 5px;
}

/* 사업자 정보 텍스트 */
.footer-info {
	color: #eff1f3;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 25px;
}

.footer-info p {
	margin: 5px 0;
}

.footer-info a {
	color: #94a3b8;
	text-decoration: none;
	font-weight: bold;
}

.footer-copy {
	color: #edeff3;
	font-size: 14px;
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
	.footer-nav {
		gap: 15px;
	}
	.footer-nav a {
		font-size: 14px;
	}
	.footer-info .divider {
		display: none; /* 모바일에서는 구분선 숨김 */
	}
	.footer-info p {
		display: flex;
		flex-direction: column; /* 모바일에서는 한 줄씩 떨어지도록 배치 */
		gap: 5px;
		margin-bottom: 15px;
	}
}

/* =========================================================
   플로팅 버튼 (카카오톡, 앱 다운로드)
   ========================================================= */
/* 카카오톡 상담 버튼 */
.kakao-float {
	position: fixed;
	bottom: 30px; 
	right: 30px;
	width: 55px;
	height: 55px;
	background-color: #FEE500; /* 카카오톡 공식 노란색 */
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	z-index: 9990;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kakao-float:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.kakao-icon {
	width: 30px;
	height: 30px;
	fill: #391B1B; /* 카카오톡 공식 갈색 */
}

/* 앱 다운로드 버튼 (로그인 시 노출) */
.download-float {
	position: fixed;
	bottom: 100px; /* 카카오 버튼 바로 위에 배치 */
	right: 30px;
	width: 55px;
	height: 55px;
	background-color: #22d3ee; /* 신규 테마 포인트 컬러 */
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	z-index: 9990;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.download-float:hover {
	transform: translateY(-5px);
	background-color: #06b6d4;
}

.download-float svg {
	width: 28px;
	height: 28px;
	fill: #0f172a;
}

/* 모바일 반응형 처리 (하단 GNB 높이 회피) */
@media (max-width: 768px) {
	.kakao-float {
		bottom: 85px; /* 모바일 GNB(65px) 위로 올라가도록 여백 확보 */
		right: 20px;
		width: 50px;
		height: 50px;
	}
	
	.download-float {
		bottom: 150px;
		right: 20px;
		width: 50px;
		height: 50px;
	}
	
	.kakao-icon,
	.download-float svg {
		width: 24px;
		height: 24px;
	}
	
	.header .btn-login {margin-right: 10px; font-size: 11px; font-weight: 600;}
	.header .btn-start {font-size: 11px;}
}