@charset "utf-8";

/* ------------------------------------------------------ 


                sub-hero (서브페이지 상단)


------------------------------------------------------ */

.sub-hero {
	position: relative;
	padding: 160px 0 64px; /* 고정 헤더 80px + 디자인 여백 80px */
	background: #edf5fe url('/Form/_guest/app/images/sub/sub_hero_bg.jpg') no-repeat center / cover;
	text-align: center;
}

.sub-hero .inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 45px;
}

.sub-hero-badge {
	display: inline-block;
	padding: 2px 12px;
	border-radius: var(--radius-pill);
	background-color: #d7edff;
	color: #0062b0;
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.14px;
}

.sub-hero-title {
	margin-top: 16px;
	color: #323232;
	font-family: var(--font-title);
	font-size: 48px;
	font-weight: normal;
	line-height: 1.3;
	letter-spacing: -0.3px;
	word-break: keep-all;
}
.sub-hero-title .point { color: var(--color-primary); }

.sub-hero-desc {
	margin-top: 12px;
	color: var(--text_body);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.3px;
	word-break: keep-all;
}

/* 반응형 */
@media (max-width: 1024px) {
	.sub-hero { padding: 120px 0 48px; } /* 모바일 헤더 60px + 60px */
	.sub-hero .inner { padding-bottom: 32px; }
	.sub-hero-title { font-size: 40px; }
	.sub-hero-desc { font-size: 19px; }
}

@media (max-width: 760px) {
	.sub-hero { padding: 100px 0 36px; }
	.sub-hero .inner { padding-bottom: 24px; }
	.sub-hero-title { margin-top: 12px; font-size: 32px; }
	.sub-hero-desc { margin-top: 10px; font-size: 16px; line-height: 1.5; }
}

@media (max-width: 560px) {
	.sub-hero { padding: 92px 0 28px; }
	.sub-hero-badge { font-size: 13px; line-height: 22px; }
	.sub-hero-title { font-size: 26px; }
	.sub-hero-desc { font-size: 15px; }
	.sub-hero-desc br { display: none; }
}

/* ------------------------------------------------------ 


                    sub 공통


------------------------------------------------------ */

.sub-con {
	padding: 80px 0 120px;
	background-color: var(--color-white);
}

.sub-con .inner {
	width: 100%;
	max-width: 1064px;
	margin: 0 auto;
	padding: 0 20px;
}

.sub-con .td_100 {
    width: 100px
}

.sub-con .td_150 {
    width: 150px
}

.sub-con .td_200 {
    width: 200px
}

.sub-con .td_250 {
    width: 250px
}

.sub-con .td_center {
    text-align: center
}

.sub-con .inputArea {
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #E0E0E0;
    font-family: 'noto sans';
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -.3px;
color: #111
}

.sub-con .inputArea::placeholder {
    color: #9E9E9E
}

.sub-con select.inputArea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 12px 30px 12px 12px;
    background: url(/Form/_guest/app/images/sub/selectIco.png) no-repeat calc(100% - 15px) center;
}

@media (max-width: 760px) {
	.sub-con { padding: 56px 0 80px; }
}

@media (max-width: 560px) {
	.sub-con { padding: 40px 0 64px; }
}

/* ---------- 탭 메뉴 (.sub-hero 바로 아래 : manual · pricing · cases) ----------
   .sub-tab        : 자리 유지용 (고정될 때 높이는 sub.js 에서 min-height 로 유지)
   .sub-tab-bar    : 스크롤 시 헤더 아래 고정 (.onFixed 는 sub.js 에서 붙임)
   .sub-tab-list   : 버튼 목록 (모바일은 한 줄 가로 스크롤)
   .sub-tab-btn    : 버튼 / .on 활성 / .is-link 외부 링크
   ※ 고정이 깨지지 않도록 data-aos 는 .sub-tab-list 에만 둔다 (부모에 transform 이 남으면 fixed 가 안 됨) */
.sub-tab { position: relative; }
.sub-tab-bar { width: 100%; background-color: var(--color-white); }
.sub-tab-bar.onFixed { position: fixed; left: 0; top: 80px; z-index: 990; border-bottom: 1px solid var(--out_line); box-shadow: 0 2px 10px rgba(0,0,0,.08); }

.sub-tab-list { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 1064px; margin: 0 auto; padding: 60px 20px; }
.sub-tab-bar.onFixed .sub-tab-list { padding-top: 12px; padding-bottom: 12px; }
.sub-tab-list li { flex: 0 0 auto; }

.sub-tab-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 16px;
	border-radius: var(--radius-pill);
	background-color: var(--color-gray-bg);
	color: #9e9e9e;
	font-size: 20px;
	line-height: 1.2;
	word-break: keep-all;
	transition: background-color .2s, color .2s;
}
.sub-tab-btn:hover { color: var(--color-primary-dark); }
.sub-tab-btn.on { background-color: var(--color-primary-light); color: var(--color-primary); font-weight: 500; }
.sub-tab-btn.is-link { background-color: var(--color-primary-light); color: var(--color-primary-dark); }
.sub-tab-btn.is-link::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.sub-tab-bar.onFixed .sub-tab-btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 17px; }

@media (max-width: 1024px) {
	.sub-tab-bar.onFixed { top: 60px; } /* 헤더 60px */
	.sub-tab-list { padding-top: 48px; padding-bottom: 48px; }
	.sub-tab-btn { font-size: 17px; }
	.sub-tab-bar.onFixed .sub-tab-btn { font-size: 15px; }
}

@media (max-width: 760px) {
	/* 한 줄 가로 스크롤 */
	.sub-tab-list { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; padding: 24px 20px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.sub-tab-list::-webkit-scrollbar { display: none; }
	.sub-tab-bar.onFixed .sub-tab-list { padding-top: 10px; padding-bottom: 10px; }
	.sub-tab-btn,
	.sub-tab-bar.onFixed .sub-tab-btn { min-height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
}

@media (max-width: 560px) {
	.sub-tab-list { padding-left: 16px; padding-right: 16px; }
}

@media (hover: none) {
	.sub-tab-btn:hover { color: #9e9e9e; }
	.sub-tab-btn.on:hover { color: var(--color-primary); }
	.sub-tab-btn.is-link:hover { color: var(--color-primary-dark); }
}

@media (prefers-reduced-motion: reduce) {
	.sub-tab-btn { transition: none; }
}


/* ------------------------------------------------------ 


                    sub : service (서비스 소개)


------------------------------------------------------ */

.service-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 500px));
	justify-content: center;
	gap: 24px;
}

.service-item {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px 28px 32px;
	border: 1px solid #d4d4d8;
	border-radius: 24px;
	background-color: var(--color-white);
	box-shadow: 0 2px 3px rgba(191, 191, 191, .25);
}

.service-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

.service-sub {
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	word-break: keep-all;
}

.service-tit {
	margin-top: 4px;
	color: #09090b;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	word-break: keep-all;
}

.service-desc {
	margin-top: 16px;
	color: #71717b;
	font-size: 18px;
	line-height: 1.4;
	word-break: keep-all;
}

/* 버튼 : 카드 맨 아래에 붙게 */
.service-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: auto;
}

.service-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 24px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.16px;
	white-space: nowrap;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.service-btn img { display: block; flex: 0 0 auto; width: 16px; height: 16px; }
.service-btn img.ico-md { width: 20px; height: 20px; }
.service-btn img.ico-lg { width: 24px; height: 24px; }

.service-btn.is-fill { background-color: var(--color-primary); color: #fafafa; transition: 0.3s ease; }
.service-btn.is-fill:hover { background-color: #1f95f0; box-shadow: 0 6px 14px rgba(49, 165, 255, .3); }

.service-btn.is-line { background-color: var(--color-white); color: var(--color-primary); transition: 0.3s ease; }
.service-btn.is-line:hover { background-color: var(--color-primary-light); }

@media (max-width: 1064px) {
	.service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.service-item { padding: 24px 24px 28px; gap: 20px; }
	.service-img { border-radius: 24px; }
	.service-sub { font-size: 17px; }
	.service-tit { font-size: 28px; }
	.service-desc { font-size: 16px; }
}

@media (max-width: 760px) {
	.service-list { grid-template-columns: minmax(0, 500px); gap: 16px; }
}

@media (max-width: 560px) {
	.service-item { padding: 20px 20px 24px; border-radius: 20px; gap: 18px; }
	.service-img { border-radius: 18px; }
	.service-sub { font-size: 15px; }
	.service-tit { font-size: 24px; }
	.service-desc { margin-top: 12px; font-size: 15px; }
	.service-btns { gap: 8px; }
	.service-btn { height: 42px; padding: 0 18px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.service-btn { transition: none; }
}

/* ------------------------------------------------------ 


        sub : service-CB (서비스 소개 - 콜백서비스)


------------------------------------------------------ */

.service-CB .inner { display: flex; flex-direction: column; align-items: center;}
.service-CB .service-img {border-radius: 0;}
.service-CB-text {background-color: var(--color-primary); padding: 50px; text-align: center; width: 100%;}
.service-CB-text .tit {font-size: 40px; font-family: var(--font-title-medium); color: #fafafa;}
.service-CB-text .lnkLst {display: flex; flex-direction: column; gap: 20px; margin-top: 20px; align-items: center;}
.service-CB-text .lnkLst li {display: flex; flex-direction: column; background-color: #FFF; border-radius: 20px; padding: 30px; max-width: 400px; width: 100%; gap: 15px; align-items: center;}
.service-CB-text .lnkLst li .txt {font-size: 20px}
.service-CB-text .lnkLst li a {display: flex; gap: 3px; justify-content: center; width: fit-content; padding: 10px 20px; border-radius: 10px;     align-items: center; transition: 0.3s ease;}
.service-CB-text .lnkLst li:first-of-type a {background-color: #ff4081;}
.service-CB-text .lnkLst li:last-of-type a {background-color: #ffe812;}
.service-CB-text .lnkLst li a .lnkTxt {font-size: 18px;}
.service-CB-text .lnkLst li:first-of-type a .lnkTxt {color: #FFF;}
.service-CB-text .lnkLst li:last-of-type a .lnkTxt {color: #3a1d1d;}
.service-CB-text .lnkLst li:first-of-type a:hover {background-color: #e93873;}
.service-CB-text .lnkLst li:last-of-type a:hover {background-color: #e2cd11;}

@media (max-width: 560px) {
	.service-CB-text .tit {font-size: 30px; }
}

@media (max-width: 450px) {
	.service-CB-text {padding: 50px 30px;}
	.service-CB-text .tit {font-size: 22px; }
	.service-CB-text .lnkLst li .txt {font-size: 16px}
	.service-CB-text .lnkLst li a .lnkTxt {font-size: 14px;}
}

/* ------------------------------------------------------ 


        sub : service-BZ (서비스 소개 - 비즈링 서비스)


------------------------------------------------------ */

.service-BZ .inner { display: flex; flex-direction: column; align-items: center;}
.service-BZ .service-img {border-radius: 0;}
.service-BZ .bizExample {padding: 50px; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 700px;}
.service-BZ .bizExample .tit {text-align: center; font-family: var(--font-title); font-size: 28px;}
.service-BZ .bizExample ul {display: flex; flex-direction: column; gap: 12px;}
.service-BZ .bizExample ul li {display: flex; gap: 20px; border: 1px solid #eee; border-radius: 20px; padding: 20px; justify-content: space-between; align-items: center;}
.service-BZ .bizExample ul li p {font-size: 18px; font-weight: 500; flex: 1; }
.service-BZ .bizExample ul li audio { flex: 4;}
.service-BZ .bizLnkBox {width: 100%; background: url(/Form/_guest//app/images/sub/bizLnkBoxBg.png) no-repeat center center / cover; padding: 50px;}
.service-BZ .bizLnkBox p { font-family: var(--font-title); color: #FFF;  font-size: 32px; text-align: center;}
.service-BZ .bizLnkBox a {
    display: flex;
    border: 1px solid #FFFF;
    border-radius: 10px;
    color: #FFF;
    gap: 10px;
    padding: 10px 40px;
    width: fit-content;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 30px auto 0;
    transition: 0.3s ease;
}

.service-BZ .bizLnkBox a:hover {
	background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
	.service-BZ .bizExample {padding: 20px 0;}
	.service-BZ .bizExample ul li {flex-direction: column; justify-content: center;}
	.service-BZ .bizExample ul li p {font-size: 16px; flex:  none; width: 100%; text-align: center;}
	.service-BZ .bizExample ul li audio {flex:  none; width: 100%;}
}

@media (max-width: 460px) {
	.service-BZ .bizLnkBox {padding: 50px 20px;}
	.service-BZ .bizLnkBox p {font-size: 22px;}
	.service-BZ .bizLnkBox a {font-size: 16px;}
}

/* ------------------------------------------------------


        sub : service-BN (알림톡 콜백 서비스 소개)


------------------------------------------------------ */

.service-BN {
	/* 페이지 전용 값 */
	--bn-blue: var(--color-primary);
	--bn-blue-dark: var(--color-primary-dark);
	--bn-ans-bg: #f0f7ff;
	--bn-card-shadow: 0 4px 16px rgba(25, 31, 40, .08);

	padding: 0; /* 섹션마다 위아래 여백을 따로 줌 */
}

.service-BN > div { padding: 100px 0; }
.service-BN > div:last-child { padding-bottom: 120px; }

/* 공통 : 섹션 타이틀 (가운데 + 짧은 파란 바) */
.service-BN .landTit01 { position: relative; padding-bottom: 28px; color: var(--text_main); font-family: var(--font-title); font-size: 36px; line-height: 1.3; text-align: center; word-break: keep-all; }
.service-BN .landTit01::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 32px; height: 4px; border-radius: 2px; background-color: var(--bn-blue); transform: translateX(-50%); }
.service-BN .landTit01.stLeft { text-align: left; }
.service-BN .landTit01.stLeft::after { left: 0; transform: none; }
.service-BN .txt01 { margin-top: 20px; color: var(--text_sub); font-size: 16px; line-height: 1.6; text-align: center; word-break: keep-all; }

/* 공통 : 파란 버튼 + 꺾쇠 */
.service-BN .lstLnk { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 40px 10px 16px; border-radius: 6px; background-color: var(--bn-blue); color: var(--color-white); font-size: 14px; font-weight: 700; line-height: 1.4; transition: background-color .2s; }
.service-BN .lstLnk::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.service-BN .lstLnk:hover { background-color: var(--bn-blue-dark); }
.service-BN .lstLnk:focus-visible { outline: 3px solid var(--color-focus, #ffb020); outline-offset: 2px; }
.service-BN .lstLnk + .lstLnk { margin-top: 10px; }

/* 공통 : 카드 아이콘 */
.service-BN .lstIco { display: block; }
.service-BN .lstIco img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-BN .lstIco span {display: none;}


/* ---------- 1. 알림톡 콜백 장점 (benefitBox) ---------- */
.service-BN .benefitBox .inner { display: flex; align-items: flex-start; gap: 24px; }
.service-BN .benefitBox .txtBox { flex: 0 0 300px; padding-top: 4px; }
.service-BN .benefitBox .txtBox .txt01 { margin-top: 24px; text-align: left; font-size: 15px; }
.service-BN .benefitBox .txtBox .txt01 span { color: var(--text_main); font-weight: 700; }
.service-BN .benefitBox .txtBox .imgBox {
    width: 100%;
    max-width: 300px;
    margin-top: 30px;
}

.service-BN .benefitBox .txtBox .imgBox img {
	display: block;
    width: 100%;
}

.service-BN .benefitBox .lst01 { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.service-BN .benefitBox .lst01 li { display: flex; flex-direction: column; min-height: 260px; padding: 28px 28px 30px; border: 1px solid var(--out_line, #e5e8eb); border-radius: 16px; background-color: var(--color-white); box-shadow: var(--bn-card-shadow); }
.service-BN .benefitBox .lstIco { width: 48px; height: 48px; margin-bottom: 18px; }
.service-BN .benefitBox .lstTit01 { color: var(--text_main); font-size: 20px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.service-BN .benefitBox .lstTxt01 { margin-top: 12px; color: var(--text_sub); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.service-BN .benefitBox .lstTxt01 span { color: var(--text_main); font-weight: 700; }
.service-BN .benefitBox .lstLnk { margin-top: auto; }
.service-BN .benefitBox .lstTxt01 + .lstLnk { margin-top: 20px; }


/* ---------- 2. 신청 전 체크사항 (beforeChkBox) ---------- */
.service-BN .beforeChkBox { background-color: var(--color-gray-bg, #f3f6f9); }
.service-BN .beforeChkBox .lst01 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.service-BN .beforeChkBox .lst01 li { position: relative; min-height: 300px; padding: 64px 24px 28px; border-radius: 12px; background-color: var(--color-white); box-shadow: var(--bn-card-shadow); }
.service-BN .beforeChkBox .lstIco { position: absolute; right: 20px; top: 24px; width: 64px; height: 64px; }
.service-BN .beforeChkBox .lstNum { color: var(--text_main); font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.service-BN .beforeChkBox .lstTxt01 { margin: 20px 0 24px; color: var(--text_sub); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.service-BN .beforeChkBox .lstTxt01 span { color: var(--bn-blue); }


/* ---------- 3. 자주 묻는 내용 (howtoBox) ---------- */
.service-BN .howtoBox .inner { counter-reset: faq; }
.service-BN .howtoBox .landTit01 .ico { display: block; width: 72px; height: 72px; margin: 0 auto 12px; }
.service-BN .howtoBox .landTit01 .ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-BN .howtoBox .txt01 { margin-bottom: 48px; }

.service-BN .howtoBox .queTxt01 { position: relative; display: flex; align-items: center; min-height: 36px; padding-left: 50px; color: var(--text_main); font-size: 18px; font-weight: 700; line-height: 1.5; word-break: keep-all; counter-increment: faq; }
.service-BN .howtoBox .queTxt01::before { content: "Q" counter(faq) "."; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--bn-blue); color: var(--color-white); font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.service-BN .howtoBox .ansTxt01 { margin-top: 12px; padding: 18px 20px; border-radius: 10px; background-color: var(--bn-ans-bg); box-shadow: 0 2px 8px rgba(25, 31, 40, .08); color: var(--text_sub); font-size: 16px; line-height: 1.6; word-break: keep-all; }
.service-BN .howtoBox .ansTxt01 + .queTxt01 { margin-top: 40px; }


/* ---------- 반응형 ---------- */
@media (max-width: 1064px) {
	.service-BN .benefitBox .txtBox { flex-basis: 260px;}
}

@media (max-width: 1024px) {
	.service-BN > div { padding: 80px 0; }
	.service-BN .landTit01 { font-size: 32px; }

	/* 장점 : 텍스트 위, 카드 아래 */
	.service-BN .benefitBox .inner { flex-direction: column; gap: 40px; }
	.service-BN .benefitBox .txtBox { flex-basis: auto; width: 100%;  display: flex; gap: 20px; justify-content: space-between;}
	.service-BN .benefitBox .txtBox .imgBox {margin-top: 0;}
	.service-BN .benefitBox .lst01 { width: 100%; }
	.service-BN .benefitBox .lst01 li { min-height: 0; }

	.service-BN .beforeChkBox .lst01 li { padding-left: 20px; padding-right: 20px; }
	.service-BN .beforeChkBox .lstIco { width: 56px; height: 56px; }
}

@media (max-width: 760px) {
	.service-BN > div { padding: 64px 0; }
	.service-BN > div:last-child { padding-bottom: 80px; }
	.service-BN .landTit01 { padding-bottom: 22px; font-size: 26px; }
	.service-BN .txt01 { margin-top: 16px; font-size: 15px; }

	/* 체크사항 : 1열 */
	.service-BN .beforeChkBox .lst01 { grid-template-columns: 1fr; margin-top: 40px; }
	.service-BN .beforeChkBox .lst01 li { min-height: 0; padding-top: 56px; }
	.service-BN .beforeChkBox .lstNum { font-size: 30px; }

	.service-BN .howtoBox .landTit01 .ico { width: 60px; height: 60px; }
	.service-BN .howtoBox .txt01 { margin-bottom: 36px; }
	.service-BN .howtoBox .queTxt01 { font-size: 16px; }
	.service-BN .howtoBox .ansTxt01 { padding: 16px; font-size: 15px; }
	.service-BN .howtoBox .ansTxt01 + .queTxt01 { margin-top: 32px; }
}

@media (max-width: 560px) {
	.service-BN > div { padding: 48px 0; }
	.service-BN > div:last-child { padding-bottom: 64px; }
	.service-BN .landTit01 { font-size: 22px; }
	.service-BN .txt01 br { display: none; }

	/* 장점 : 1열 */
	.service-BN .benefitBox .lst01 { grid-template-columns: 1fr; gap: 12px; }
	.service-BN .benefitBox .lst01 li { padding: 24px 20px; }
	.service-BN .benefitBox .lstIco { width: 40px; height: 40px; margin-bottom: 14px; }
	.service-BN .benefitBox .lstTit01 { font-size: 18px; }

	.service-BN .beforeChkBox .lstIco { right: 16px; top: 20px; width: 48px; height: 48px; }
	.service-BN .beforeChkBox .lstTxt01 br { display: none; }

	.service-BN .howtoBox .queTxt01 { padding-left: 44px; font-size: 15px; }
	.service-BN .howtoBox .queTxt01::before { width: 32px; height: 32px; font-size: 12px; }
}

@media (max-width: 500px) {
	.service-BN .benefitBox .txtBox .imgBox {display: none;}
}

@media (prefers-reduced-motion: reduce) {
	.service-BN .lstLnk { transition: none; }
}

/* ------------------------------------------------------ 


        sub : cases (활용사례)


------------------------------------------------------ */

.cases {padding: 0 0 120px;}

/* ---------- 목록 ---------- */
.cases #resultTable { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 24px; }
.cases #resultTable li { min-width:0; }
.cases #resultTable button { display:flex; flex-direction:column; width:100%; height:100%; padding:0; border:1px solid var(--out_line); border-radius:16px; background-color:var(--color-white); overflow:hidden; text-align:left; cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s; }
.cases #resultTable button:hover { border-color:var(--color-primary); box-shadow:0 12px 32px rgba(0,0,0,.08); transform:translateY(-4px); }
.cases #resultTable img { order:1; display:block; width:100%; aspect-ratio:4 / 6; object-fit:cover; object-position:top; background-color:var(--color-gray-bg); }
.cases #resultTable .tit { order:2; display:-webkit-box; padding:18px 20px; color:var(--text_main); font-size:18px; font-weight:600; line-height:1.4; word-break:keep-all; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- 팝업 ----------
   fadeIn 이 display:block 으로 열기 때문에 기본은 display:none, 가운데 정렬은 absolute 로 처리 */
.expPopWr { display:none; position:fixed; inset:0; z-index:1000; background-color:rgba(0,0,0,.7); }
.expPopWr .topArea,
.expPopWr .imgBox { position:absolute; left:50%; width:calc(100% - 40px); max-width:420px; transform:translateX(-50%); background-color:var(--color-white); }
.expPopWr .topArea { top:5vh; display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; padding:0 12px 0 24px; border-bottom:1px solid var(--out_line); border-radius:16px 16px 0 0; }
.expPopWr .topArea .tit { color:var(--text_main); font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.expPopWr .popClose { position:relative; flex-shrink:0; width:44px; height:44px; border:0; border-radius:50%; background-color:transparent; cursor:pointer; transition:background-color .2s; }
.expPopWr .popClose:hover { background-color:var(--color-gray-bg); }
.expPopWr .popClose::before,
.expPopWr .popClose::after { content:""; position:absolute; top:50%; left:50%; width:20px; height:2px; background-color:var(--text_main); }
.expPopWr .popClose::before { transform:translate(-50%, -50%) rotate(45deg); }
.expPopWr .popClose::after { transform:translate(-50%, -50%) rotate(-45deg); }
.expPopWr .imgBox { top:calc(5vh + 64px); bottom:5vh; border-radius:0 0 16px 16px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.expPopWr .imgBox img { display:block; width:100%; height:auto; }


/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
	.cases #resultTable { grid-template-columns:repeat(2, 1fr); gap:24px 20px; }
}
@media (max-width: 760px) {
	.cases { padding-bottom:80px; }
	.cases #resultTable .tit { padding:14px 16px; font-size:16px; }
	.expPopWr .topArea { top:3vh; height:56px; padding-left:16px; }
	.expPopWr .topArea .tit { font-size:16px; }
	.expPopWr .imgBox { top:calc(3vh + 56px); bottom:3vh; }
}
@media (max-width: 560px) {
	.cases #resultTable { grid-template-columns:1fr; }
}
@media (hover: none) {
	.cases #resultTable button:hover { border-color:var(--out_line); box-shadow:none; transform:none; }
}


/* ------------------------------------------------------


        sub : manual (사용방법)


------------------------------------------------------ */

.manual {
	/* 단계 번호 색 (st_01 ~ st_06) */
	--mn-st01: var(--color-primary);
	--mn-st02: #13b89a;
	--mn-st03: #ff7a45;
	--mn-st04: #8b5cf6;
	--mn-st05: #ffb020;
	--mn-st06: #ff4081;

	padding: 0 0 120px;
	background-color: var(--color-white);
}

/* 매뉴얼 영역 */
.manual .manualBox { width: 100%; max-width: 1064px; margin: 0 auto; padding: 0 20px; }
.manual .conBox + .conBox { margin-top: 100px; }
.manual .conBox .tit {
    display: flex;
    margin: 0 auto 30px;
    padding: 7px 18px;
    width: fit-content;
    background: #31a5ff;
    border-radius: 15px 15px 0 15px;
    font-family: S-CoreDream-7ExtraBold;
    font-size: 20px;
    color: #fff;
    justify-content: center;
}

/* 단계 목록 : 기본 3열 */
.manual .conBox .lst {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.manual .conBox .imgBox {
    position: relative;
    margin: 0 0 23px;
    font-size: 0;
}

.manual .conBox .txt {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #373737;
    text-align: left;
}


/* fullWid : 한 줄 전체 (이미지 여러 장 + 설명 목록) */
/* .manual .lst > li.fullWid { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px; padding: 40px; border-radius: 24px; background-color: var(--color-gray-bg); }
.manual .lst > li.fullWid .sLst { flex: 1 1 320px; max-width: 480px; align-self: center; }
.manual .lst > li.fullWid.nowrap { flex-wrap: nowrap; } 이미지 1장 + 목록 좌우 배치 */

/* 설명 텍스트 */
/* .manual .txt { color: var(--text_body); font-size: 17px; line-height: 1.5; word-break: keep-all; }
.manual .lst > li > .txt { text-align: center; }
.manual .sLst { display: flex; flex-direction: column; gap: 14px; width: 100%; } */

/* 번호 */
/* .manual .hasNum { position: relative; padding-left: 38px; text-align: left; }
.manual .lst > li > .txt.hasNum { align-self: stretch; }
.manual .hasNum .num { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: var(--mn-st01); color: var(--color-white); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.manual .st_01 .num { background-color: var(--mn-st01); }
.manual .st_02 .num { background-color: var(--mn-st02); }
.manual .st_03 .num { background-color: var(--mn-st03); }
.manual .st_04 .num { background-color: var(--mn-st04); }
.manual .st_05 .num { background-color: var(--mn-st05); }
.manual .st_06 .num { background-color: var(--mn-st06); } */

/* 보조 설명 */
/* .manual .grayTxt { color: #8a8a8a; font-size: 15px; }
.manual p.grayTxt { margin-top: 4px; }
.manual .extraBox { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--out_line); border-radius: 10px; background-color: var(--color-white); font-size: 15px; }
.manual .clrTxt02 { color: var(--color-primary-dark); font-weight: 700; }
.manual .clrTxt03 { color: var(--mn-st06); font-weight: 700; } */

/* 이미지 */
/* .manual .imgBox { position: relative; flex: 0 0 auto; width: 100%; max-width: 280px; }
.manual .imgBox img { display: block; width: 100%; height: auto; border-radius: 40px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.manual .fullWid .imgBox { width: 260px; } */

/* 폰 화면 안 세로 스크롤 캡처 (위치는 manualImg28 화면 영역에 맞춰 조정) */
/* .manual .imgScrollBox { position: absolute; left: 5%; right: 5%; top: 12%; bottom: 4%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.manual .imgScrollBox img { border-radius: 0; box-shadow: none; } */

/* 상담 배너 */
.manual .useLnkBox { position: relative; overflow: hidden; margin-top: 120px; padding: 36px 340px 36px 60px; border-radius: 24px; background: linear-gradient(270deg, #2A61E1 -29.65%, #309BFA 100%); color: var(--color-white); }
.manual .useLnkBox .lnkTit { font-size: 20px; font-weight: 500; opacity: .85; }
.manual .useLnkBox .lnkTxt { margin-top: 8px; font-family: var(--font-title); font-size: 26px; line-height: 1.3; word-break: keep-all; }
.manual .useLnkBox .lnkTxt span { color: #ffe812; }
.manual .useLnkBox .lnk { 
	position: relative;
    display: inline-block;
    padding: 8px 34px 4px 15px;
    background: rgba(255, 255, 255, .2);
    border-radius: 20px;
    border: 1px solid #fff;
    font-family: GmarketSansMedium;
    font-size: 16px;
    color: #fff;
	margin-top: 15px;
}
.manual .useLnkBox .lnk:after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 17px;
    margin: -5px 0 0;
    transform: rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: all .3s ease;
}

.manual .useLnkBox .lnk:hover:after { right: 13px; }
.manual .useLnkBox .lnk:focus-visible { outline: 3px solid var(--color-white); }
/* .manual .useLnkBox .lnkImgBox { position: absolute; right: 60px; bottom: 50%; transform: translateY(50%); pointer-events: none; } */
.manual .useLnkBox .lnkImgBox img { display: block; width: 100%; height: auto; }

/* 반응형 */
/* @media (max-width: 1064px) {
	.manual .lst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
	.manual .lst > li.fullWid { padding: 32px 24px; gap: 24px; }
	.manual .lst > li.fullWid .sLst { flex-basis: 100%; max-width: none; }
	.manual .lst > li.fullWid.nowrap .sLst { flex-basis: 320px; }
	.manual .fullWid .imgBox { width: 220px; }
	.manual .useLnkBox { padding: 48px 260px 48px 40px; }
	.manual .useLnkBox .lnkImgBox { right: 32px;}
}

@media (max-width: 1024px) {
	.manual .conBox + .conBox { margin-top: 80px; }
	.manual .conBox .tit { font-size: 28px; }
	.manual .useLnkBox .lnkTxt { font-size: 30px; }
}

@media (max-width: 760px) {
	.manual { padding-bottom: 80px; }

	.manual .conBox + .conBox { margin-top: 64px; }
	.manual .conBox .tit { margin-bottom: 28px; padding-bottom: 12px; font-size: 24px; }

	.manual .lst { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.manual .lst > li.fullWid,
	.manual .lst > li.fullWid.nowrap { flex-wrap: wrap; gap: 16px; padding: 24px 16px; border-radius: 20px; }
	.manual .lst > li.fullWid .sLst,
	.manual .lst > li.fullWid.nowrap .sLst { flex-basis: 100%; margin-top: 8px; }
	.manual .fullWid .imgBox { width: calc(50% - 8px); max-width: 200px; }
	.manual .fullWid.nowrap .imgBox { width: 70%; max-width: 240px; }
	.manual .imgBox { max-width: 240px; }

	.manual .useLnkBox { margin-top: 80px; padding: 36px 180px 36px 20px; border-radius: 20px; }
}

@media (max-width: 560px) {
	.manual .manualBox { padding: 0 16px; }
	.manual .conBox .tit { font-size: 22px; }
	.manual .txt { font-size: 15px; }
	.manual .grayTxt { font-size: 14px; }
	.manual .hasNum { padding-left: 32px; }
	.manual .hasNum .num { width: 22px; height: 22px; font-size: 11px; }
	.manual .useLnkBox .lnkTit { font-size: 16px; }
	.manual .useLnkBox .lnkTxt { font-size: 22px; word-break: break-all; }
	.manual .useLnkBox .lnk { text-align: center; }
}

@media (max-width: 400px) {
	.manual .useLnkBox {
		text-align: center;
    	padding: 20px;
	}
	.manual .useLnkBox .lnkImgBox {
		display: none;
    }
} */


.manual .clrTxt01 {
    color: #FF2626!important
}

.manual .clrTxt02 {
    color: #31A5FF
}

.manual .clrTxt03 {
    color: #EF5350
}

.manual .font_w5 {
    font-weight: 500
}

.manual .font_w6 {
    font-weight: 600
}

.manual .font_w7 {
    font-weight: 700
}

.manual .pc_img {
    display: block
}

.manual .m_img {
    display: none
}


.manual .manualBox {
    text-align: center
}

.manual .manualBox .conBox+.conBox {
    margin-top: 100px
}

.manual .manualBox .tit {
    display: inline-block;
    margin: 0 0 30px;
    padding: 7px 18px;
    background: #31a5ff;
    border-radius: 15px 15px 0 15px;
    font-family: S-CoreDream-7ExtraBold;
    font-size: 20px;
    color: #fff
}

.manual .manualBox .lst {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px
}

.manual .manualBox .lst>li {
    width: calc((100% - 50px)/ 2)
}

.manual .manualBox .lst>li.oneThirdWid {
    width: calc((100% - 100px)/ 3)
}

.manual .manualBox .lst>li.fullWid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.manual .manualBox .lst>li.fullWid>* {
    width: 50%
}

.manual .manualBox .lst>li.nowrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 40px;
    width: auto
}

.manual .manualBox .lst>li.stColumn {
    display: flex;
    align-items: center;
    flex-direction: column
}

.manual .manualBox .lst .gTxt01 {
    color: #9e9e9e
}

.manual .manualBox .conBox .imgBox {
    position: relative;
    margin: 0 0 23px;
    font-size: 0
}

.manual .manualBox .conBox .imgBox img {
    max-width: 100%
}

.manual .manualBox .conBox .imgBox>img {
    position: relative;
    z-index: 1
}

.manual .manualBox .conBox .imgBox .imgScrollBox {
    position: absolute;
    width: 87.48%;
    height: 90%;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    overflow-y: auto
}

.manual .manualBox .conBox .imgBox.hasScroll01 {
    display: flex;
    justify-content: center
}

.manual .manualBox .conBox .imgBox.hasScroll01 .scrollBox {
    position: relative
}

.manual .manualBox .conBox .arrowBox {
    width: 100%;
    font-size: 0
}

.manual .manualBox .conBox .arrowBox.stRight {
    text-align: right
}

.manual .manualBox .conBox .arrowBox.stLeft {
    text-align: left
}

.manual .manualBox .txt {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #373737;
    text-align: left
}

.manual .manualBox .txt .extraBox {
    padding: 13px 17px;
    background: #f8f8f8
}

.manual .manualBox .txt .extraBox p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.5px;
    color: #212121
}

.manual .manualBox .txt .grayTxt {
    color: #999
}

.manual .manualBox .txt.hasNum {
    padding: 1px 0 0 33px
}

.manual .manualBox .txt.hasNum .num {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    top: 0;
    left: 0;
    padding: 3px 0 0;
    border-radius: 50%;
    font-family: Cafe24Ssurround;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-align: center
}

.manual .manualBox .txt.hasNum.st_01 .num {
    background: #26c6da
}

.manual .manualBox .txt.hasNum.st_02 .num {
    background: #ff4081
}

.manual .manualBox .txt.hasNum.st_03 .num {
    background: #66bb6a
}

.manual .manualBox .txt.hasNum.st_04 .num {
    background: #29b6f6
}

.manual .manualBox .txt.hasNum.st_05 .num {
    background: #ff9800
}

.manual .manualBox .txt.hasNum.st_06 .num {
    background: #ab47bc
}

.manual .manualBox .txt+.txt {
    margin-top: 12px
}

.manual .manualBox li.txt {
    display: block
}

.manual .manualBox .useLnkBox {
    position: relative;
    margin: 50px 0 0;
    padding: 30px 205px 30px 45px;
    background: #31a5ff;
    border-radius: 15px;
    text-align: left
}

.manual .manualBox .useLnkBox .lnkTit {
    margin: 0 0 1px;
    font-family: WavvePADO-Regular;
    font-size: 18px;
    color: #fff;
    letter-spacing: -.7px
}

.manual .manualBox .useLnkBox .lnkTxt {
    margin: 0 0 13px;
    font-family: WavvePADO-Regular;
    font-size: 24px;
    color: #fff;
    letter-spacing: -.7px;
    word-break: keep-all
}

.manual .manualBox .useLnkBox .lnkTxt span {
    color: #ffd600
}

.manual .manualBox .useLnkBox .lnk {
    position: relative;
    display: inline-block;
    padding: 8px 34px 4px 15px;
    background: rgba(255,255,255,.2);
    border-radius: 20px;
    border: 1px solid #fff;
    font-family: GmarketSansMedium;
    font-size: 16px;
    color: #fff
}

.manual .manualBox .useLnkBox .lnk:after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 17px;
    margin: -5px 0 0;
    transform: rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: all .3s ease
}

.manual .manualBox .useLnkBox .lnk:focus:after,.manual .manualBox .useLnkBox .lnk:hover:after {
    right: 13px
}

.manual .manualBox .useLnkBox .lnkImgBox {
    position: absolute;
    top: 50%;
    right: 77px;
    transform: translateY(-50%);
    font-size: 0
}

.manual .manualBox .useLnkBox .lnkImgBox img {
    width: 100%
}

@media all and (max-width: 1064px) {

    .manual .manualBox .conBox+.conBox {
        margin-top: 80px
    }
}

@media all and (max-width: 991px) {

    .manual .menuBox {
        margin: 0 0 24px
    }

    .manual .menuBox .tit01 {
        margin: 0 0 16px;
        font-size: 35px
    }

    .manual .menuBox .txt01 {
        margin: 0 0 20px;
        font-size: 18px
    }

    .manual .menuBox .menuCon {
        padding: 0 0 24px
    }

    .manual .menuBox .menuCon:after {
        width: 50px;
        margin: 0 0 0 -25px
    }

    .manual .menuBox .menuLstCon.onFixed {
        top: 97px
    }

    .manual .menuBox .menuLst {
        gap: 8px
    }

    .manual .menuBox .menuLst .lstLnk {
        padding: 9px 14px 7px;
        font-size: 15px
    }

    .manual .manualBox .conBox+.conBox {
        margin-top: 60px
    }

    .manual .manualBox .tit {
        font-size: 16px
    }

    .manual .manualBox .txt,.manual .manualBox .txt .extraBox p {
        font-size: 14px
    }

    .manual .manualBox .txt .extraBox {
        padding: 10px 15px
    }

    .manual .manualBox .txt.hasNum {
        padding: 2px 0 0 24px
    }

    .manual .manualBox .txt.hasNum .num {
        width: 20px;
        height: 20px;
        padding: 2px 0 0;
        font-size: 16px
    }

    .manual .manualBox .conBox .imgBox {
        width: 193px!important;
        margin: 0 auto 15px
    }

    .manual .manualBox .conBox .imgBox .imgScrollBox {
        width: 80%
    }

    .manual .manualBox .conBox .arrowBox {
        display: none
    }

    .manual .manualBox .lst {
        gap: 20px
    }

    .manual .manualBox .lst>li {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%
    }

    .manual .manualBox .lst>li.oneThirdWid {
        width: 100%
    }

    .manual .manualBox .lst>li.fullWid>* {
        width: 100%
    }

    .manual .manualBox .lst>li.fullWid .sLst {
        width: auto
    }

    .manual .manualBox .lst>li.fullWid.nowrap {
        flex-wrap: wrap
    }

    .manual .manualBox .lst>li.nowrap {
        display: block;
        width: 100%
    }

    .manual .manualBox .useLnkBox {
        margin: 30px 0 0;
        padding: 20px 160px 20px 30px
    }

    .manual .manualBox .useLnkBox .lnkTit {
        margin: 0;
        font-size: 15px
    }

    .manual .manualBox .useLnkBox .lnkTxt {
        margin: 0 0 10px;
        font-size: 19px
    }

    .manual .manualBox .useLnkBox .lnk {
        font-size: 14px
    }

    .manual .manualBox .useLnkBox .lnk:after {
        width: 8px;
        height: 8px;
        margin: -4px 0 0
    }

    .manual .manualBox .useLnkBox .lnkImgBox {
        width: 90px;
        right: 60px
    }
}

@media all and (max-width: 767px) {
    .manual .menuBox .menuLstCon.onFixed {
        top:91px
    }
}

@media all and (max-width: 599px) {
    .manual .manualBox .useLnkBox {
        padding:20px 120px 20px 20px
    }

    .manual .manualBox .useLnkBox .lnkImgBox {
        right: 20px
    }
}

@media all and (max-width: 500px) {
    .manual .menuBox {
        margin: 0 0 20px
    }

    .manual .menuBox .tit01 {
        margin: 0 0 8px;
        font-size: 24px
    }

    .manual .menuBox .txt01 {
        margin: 0 0 16px;
        font-size: 16px
    }

    .manual .menuBox .menuCon {
        padding: 0 0 20px
    }

    .manual .menuBox .menuLst .lstLnk {
        padding: 7px 10px 6px;
        font-size: 14px
    }

    .manual .manualBox .conBox+.conBox {
        margin-top: 20px
    }

    .manual .manualBox .tit {
        font-size: 15px
    }

    .manual .manualBox .txt,.manual .manualBox .txt .extraBox p {
        font-size: 13px
    }

    .manual .manualBox .txt .extraBox {
        padding: 10px
    }

    .manual .manualBox .txt.hasNum .num {
        padding: 4px 0 0;
        font-size: 13px
    }

    .manual .manualBox .conBox .imgBox {
        width: 144px!important
    }

    .manual .manualBox .useLnkBox {
        padding: 20px 100px 20px 20px
    }

    .manual .manualBox .useLnkBox .lnkTit {
        font-size: 14px
    }

    .manual .manualBox .useLnkBox .lnkTxt {
        margin: 0 0 8px;
        font-size: 18px
    }

    .manual .manualBox .useLnkBox .lnk {
        padding: 6px 25px 2px 10px;
        font-size: 13px
    }

    .manual .manualBox .useLnkBox .lnk:after {
        width: 6px;
        height: 6px;
        right: 12px;
        margin: -3px 0 0
    }

    .manual .manualBox .useLnkBox .lnk:focus:after,.manual .manualBox .useLnkBox .lnk:hover:after {
        right: 8px
    }

    .manual .manualBox .useLnkBox .lnkImgBox {
        width: 67px
    }
}


/* ------------------------------------------------------


        sub : reviews (사용후기)


------------------------------------------------------ */

/* ---------- 목록 ---------- */
.reviews { overflow-x: hidden; overflow-x: clip; }
.reviews .reviewLst > ul { display:flex; flex-direction:column; gap:40px; max-width:920px; margin:0 auto; }
.reviews .reviewLst > ul > li { display:flex; align-items:flex-start; gap:32px; }
.reviews .reviewLst > ul > li:nth-child(even) { flex-direction:row-reverse; }

/* ---------- 프로필 ---------- */
.reviews .picBox { flex-shrink:0; width:92px; text-align:center;}
.reviews .picBox .imgBox { width:92px; height:92px; border-radius:50%; overflow:hidden; background-color:var(--color-gray-bg); }
.reviews .picBox .imgBox img { display:block; width:100%; height:100%; object-fit:cover; }
.reviews .picBox .name { margin-top:12px; color:var(--text_sub); font-size:18px; line-height:1.4; }

/* ---------- 말풍선 ---------- */
.reviews .txtBox { position:relative; min-width:0; padding:24px 24px 26px; border:1px solid var(--out_line); border-radius:12px; background-color:#f2f4f6; }
.reviews .txtBox::before { content:""; position:absolute; top: -14px; left: -36px; width: 37px; height: 60px; background:url(/Form/_guest/app/images/reviewBubble01.png) no-repeat 0 0 / contain; }
.reviews li:nth-child(even) .txtBox { border-color:var(--color-primary); background-color:var(--color-primary); color:var(--color-white); text-align:right; }
.reviews li:nth-child(even) .txtBox::before { left:auto; right:-36px; background-image:url(/Form/_guest/app/images/reviewBubble02.png); }

/* 상단 : 업종·별점 / 해시태그 */
.reviews .topBox { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin-bottom:14px; }
.reviews .starBox { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:6px; background-color:var(--color-white); }
.reviews .starBox .cate { position:relative; padding-right:10px; color:var(--text_main); font-size:17px; font-weight:600; white-space:nowrap; }
.reviews .starBox .cate::after { content:""; position:absolute; top:50%; right:0; width:1px; height:14px; background-color:var(--out_line); transform:translateY(-50%); }
.reviews .starBox .star { display:flex; gap:1px; }
.reviews .starBox .star img { display:block; width:16px; height:16px; }
.reviews .tagBox { display:flex; flex-wrap:wrap; gap:8px; }
.reviews .tagBox .tagCon { height:38px; padding:0 16px; border-radius:19px; background-color:#444; color:var(--color-white); font-size:17px; font-weight:600; line-height:38px; white-space:nowrap; }

/* 본문 */
.reviews .conBox p { color:var(--text_main); font-size:17px; line-height:1.65; word-break:keep-all; }
.reviews .conBox span { color:var(--color-primary); font-style:italic; font-weight:700; }
.reviews li:nth-child(even) .conBox p,
.reviews li:nth-child(even) .conBox span { color:var(--color-white); }

/* ---------- 전체보기 ---------- */
.reviews .reviewBoardLnk { display:flex; align-items:center; justify-content:center; gap:10px; width:234px; height:66px; margin:56px auto 0; border:2px solid var(--color-primary); border-radius:6px; background-color:var(--color-white); color:var(--color-primary); font-size:26px; font-weight:800; transition:background-color .2s, color .2s; }
.reviews .reviewBoardLnk::after { content:""; width:11px; height:11px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.reviews .reviewBoardLnk:hover { background-color:var(--color-primary); color:var(--color-white); }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
	.reviews .reviewLst > ul > li { gap:24px; }
	.reviews .conBox br { display:none; }
}
@media (max-width: 760px) {
	.reviews .reviewLst > ul { gap:32px; }
	.reviews .reviewLst > ul > li { gap:16px; }
	.reviews .picBox { width:64px; }
	.reviews .picBox .imgBox { width:64px; height:64px; }
	.reviews .picBox .name { margin-top:8px; font-size:14px; }
	.reviews .txtBox { padding:16px 16px 18px; }
	.reviews .txtBox::before { left:-13px; width:14px; height:12px; }
	.reviews li:nth-child(even) .txtBox::before { right:-13px; }
	.reviews .topBox { gap:8px; margin-bottom:10px; }
	.reviews .starBox,
	.reviews .tagBox .tagCon { height:32px; font-size:14px; }
	.reviews .starBox .cate { font-size:14px; }
	.reviews .tagBox .tagCon { padding:0 12px; border-radius:16px; line-height:32px; }
	.reviews .starBox .star img { width:13px; height:13px; }
	.reviews .conBox p { font-size:15px; }
	.reviews .reviewBoardLnk { width:180px; height:54px; margin-top:40px; font-size:20px; }
}
@media (max-width: 560px) {
	/* 프로필을 말풍선 위로 올리고, 말풍선 꼬리는 위쪽으로 */
	.reviews .reviewLst > ul > li,
	.reviews .reviewLst > ul > li:nth-child(even) { flex-direction:column; align-items:flex-start; gap:14px; }
	.reviews .reviewLst > ul > li:nth-child(even) { align-items:flex-end; }
	.reviews .picBox { display:flex; align-items:center; gap:10px; width:auto; }
	.reviews li:nth-child(even) .picBox { flex-direction:row-reverse; }
	.reviews .picBox .imgBox { width:52px; height:52px; }
	.reviews .picBox .name { margin-top:0; }
	.reviews .txtBox { width:100%; }
	.reviews .txtBox::before { display:none; } /* 프로필이 위로 올라가므로 옆꼬리 숨김 */
	.reviews li:nth-child(even) .topBox { justify-content:flex-end; }
}
@media (hover: none) {
	.reviews .reviewBoardLnk:hover { background-color:var(--color-white); color:var(--color-primary); }
}


/* ------------------------------------------------------


        sub : reviewBoard (실제 활용후기)


------------------------------------------------------ */

.reviewBoard select.inputArea::-ms-expand {
    display: none
}

.brdTopBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 724px;
    margin: 0 auto 24px;
    font-size: 0
}

.brdTopBox .inputArea {
    flex-grow: 1
}

.brdTopBox select.inputArea {
    flex-grow: 0;
    min-width: 120px
}

.brdTopBox .brdSchBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    padding: 0 8px;
    background: #31a5ff;
    border-radius: 10px;
    font-family: 'noto sans';
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: #fff
}

.brdTblBox table {
    border-top: 2px solid #424242
}

.brdTblBox table thead tr {
    border-bottom: 1px solid #e0e0e0
}

.brdTblBox table thead tr th {
    padding: 20px 10px;
    background: #f5f5f5;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #424242;
    text-align: center
}

.brdTblBox table tbody tr {
    position: relative;
    border-bottom: 1px solid #e0e0e0
}

.brdTblBox table tbody tr td {
    padding: 22px 10px 19px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #424242
}

.brdTblBox table tbody tr td a {
    display: block;
    color: #424242;
    transition: all .3s ease;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.brdTblBox table tbody tr td a:focus,.brdTblBox table tbody tr td a:hover {
    color: #31a5ff
}

.brdTblBox table tbody tr td .brdConTit {
    display: none;
    margin: 0 4px 0 0;
    font-weight: 500
}

.brdBtmBox {
    position: relative;
    padding: 0 125px;
    margin: 23px 0 40px;
    overflow: hidden
}

.brdBtmBox .pagingBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.brdBtmBox .pagingBox>* {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-right-width: 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -.3px;
    color: #111
}
.brdBtmBox .pagingBox>.on,
.brdBtmBox .pagingBox>.active {
    background: #31a5ff;
    border-color: #31a5ff;
    color: #fff
}

.brdBtmBox .pagingBox>:last-child {
    border-right-width: 1px
}

.brdBtmBox .pagingBox .first:before,
.brdBtmBox .pagingBox .prev:before,
.brdBtmBox .pagingBox .next:before,
.brdBtmBox .pagingBox .last:before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    display: block;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    background-repeat: no-repeat;
    background-size: cover
}

.brdBtmBox .pagingBox .prev span,
.brdBtmBox .pagingBox .next span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.brdBtmBox .pagingBox .first {
    border-radius: 10px 0 0 10px
}

.brdBtmBox .pagingBox .first:before {
    background-image: url(/Form/_guest/app/images/sub/brdPageFirst.png)
}

.brdBtmBox .pagingBox .prev:before {
    background-image: url(/Form/_guest/app/images/sub/brdPagePrev.png)
}

.brdBtmBox .pagingBox .next:before {
    background-image: url(/Form/_guest/app/images/sub/brdPageNext.png)
}

.brdBtmBox .pagingBox .last {
    border-radius: 0 10px 10px 0
}

.brdBtmBox .pagingBox .last:before {
    background-image: url(/Form/_guest/app/images/sub/brdPageLast.png)
}

.brdBtmBox .brdWrite {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 100%;
    right: 0;
    top: 0;
    background: #31a5ff;
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #fff
}
/* 반응형 : reviewBoard — sub.css reviewBoard 영역의 기존 @media all and (max-width: 999px) 블록을 지우고 이걸로 교체 */
@media (max-width: 1024px) {
	.brdTopBox { max-width:600px; }
	/* 표 : 카드형 대신 가로 스크롤 */
	.brdTblBox { overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.brdTblBox table { width:100%; min-width:760px; }
	.brdTblBox table th,
	.brdTblBox table td { white-space:nowrap; }
	.brdTblBox table .brdTdTit a { max-width:320px; }
	/* 페이징 가운데, 작성하기는 아래 오른쪽 */
	.brdBtmBox { display:flex; flex-direction:column; align-items:center; gap:16px; margin:24px 0 0; padding:0; overflow:visible; }
	.brdBtmBox .brdWrite { position:static; align-self:flex-end; width:100px; height:40px; font-size:15px; }
}
@media (max-width: 760px) {
	.brdTopBox { gap:8px; margin-bottom:20px; }
	.brdTopBox select.inputArea { min-width:96px; }
	.brdTopBox input.inputArea { flex:1 1 0; min-width:0; }
	.brdTopBox .brdSchBtn { min-width:64px; font-size:15px; }
	.brdTblBox table thead tr th { padding:16px 10px; font-size:15px; }
	.brdTblBox table tbody tr td { padding:16px 10px 14px; font-size:13px; }
	.brdBtmBox .pagingBox > * { width:34px; height:34px; font-size:13px; }
	/* 페이지 번호 : 현재 페이지 앞뒤 2개씩(최대 5개)만 */
	.brdBtmBox .pagingBox .page { display:none; }
	.brdBtmBox .pagingBox .page.active,
	.brdBtmBox .pagingBox .active + .page,
	.brdBtmBox .pagingBox .active + .page + .page,
	.brdBtmBox .pagingBox .page:has(+ .active),
	.brdBtmBox .pagingBox .page:has(+ .page + .active) { display:flex; }
}
@media (max-width: 560px) {
	.brdTopBox select.inputArea { min-width:84px; padding-left:10px; }
	.brdTopBox .brdSchBtn { min-width:56px; font-size:14px; }
	.brdBtmBox .pagingBox > * { width:32px; height:32px; }
	/* 페이지 번호 : 현재 페이지 앞뒤 1개씩(최대 3개)만 */
	.brdBtmBox .pagingBox .active + .page + .page,
	.brdBtmBox .pagingBox .page:has(+ .page + .active) { display:none; }
	.brdBtmBox .brdWrite { align-self:stretch; width:auto; height:44px; }
}


/* ------------------------------------------------------


        sub : reviewBoardView (실제 활용후기 게시물)


------------------------------------------------------ */

/* 상단 : 제목 · 작성자 · 날짜 */
.brdViewTop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 24px 20px; border-top: 2px solid var(--text_main); border-bottom: 1px solid var(--out_line); background-color: #f5f5f5; }
.brdViewTop .tit { flex: 1 0 100%; margin-bottom: 4px; color: var(--text_main); font-size: 22px; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.brdViewTop .writer,
.brdViewTop .date { position: relative; color: var(--text_sub); font-size: 15px; line-height: 1.2; }
.brdViewTop .date { margin-left: 12px; padding-left: 13px; }
.brdViewTop .date::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background-color: #bdbdbd; }

/* 본문 */
.brdViewMid { min-height: 240px; padding: 40px 20px; border-bottom: 1px solid var(--out_line); }
.brdViewMid p { color: var(--text_body); font-size: 17px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.brdViewMid img { max-width: 100%; height: auto; }

/* 하단 : 목록 버튼 (reviewBoard 의 brdWrite 와 같은 모양) */
.brdViewBtm { display: flex; justify-content: center; margin-top: 40px; }
.brdViewBtm a { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 44px; padding: 0 24px; border-radius: 10px; background-color: var(--color-primary); color: var(--color-white); font-size: 16px; font-weight: 500; transition: background-color .2s; }
.brdViewBtm a:hover { background-color: var(--color-primary-dark); }

@media (max-width: 760px) {
	.brdViewTop { padding: 18px 16px; }
	.brdViewTop .tit { font-size: 18px; }
	.brdViewTop .writer,
	.brdViewTop .date { font-size: 13px; }
	.brdViewMid { min-height: 180px; padding: 28px 16px; }
	.brdViewMid p { font-size: 15px; }
	.brdViewBtm { margin-top: 28px; }
	.brdViewBtm a { min-width: 100px; height: 40px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.brdViewBtm a { transition: none; }
}


/* ------------------------------------------------------


        sub : reviewBoardWrite (실제 활용후기 게시물 작성)


------------------------------------------------------ */

.brdWriteTblBox table {
    border-top: 1px solid #e0e0e0;
}

.brdWriteTblBox table tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

.brdWriteTblBox table tbody tr th {
    width: 160px;
    padding: 8px;
    background: #f5f5f5;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #424242;
}

.brdWriteTblBox table tbody tr th .clrTxt01 {color: #b00000;}

.brdWriteTblBox table tbody tr td {
    padding: 11px;
}

.brdWriteTblBox table tbody tr td .inputArea {
    width: 100%;
    max-width: 300px;
    padding: 8px;
}

.brdWriteTblBox table tbody tr td .inputArea.fullWid {
    max-width: 100%;
}

.brdWriteBtmBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 15px;
    margin: 23px 0 40px;
}

.brdWriteBtmBox>* {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #fff;
}

.brdWriteBtmBox>:nth-child(odd) {
    background: #616161
}

.brdWriteBtmBox>:nth-child(even) {
    background: #31a5ff
}

@media all and (max-width: 999px) {
    .brdWriteTblBox table tbody tr th {
        width:130px;
        font-size: 15px
    }

    .brdWriteTblBox table tbody tr td {
        padding: 8px
    }

    .brdWriteBtmBox {
        justify-content: center;
        gap: 10px;
        margin: 20px 0
    }

    .brdWriteBtmBox>* {
        min-width: 100px;
        height: 32px;
        font-size: 15px
    }
}

@media all and (max-width: 599px) {
    .brdWriteTblBox table tbody tr td,.brdWriteTblBox table tbody tr th {
        display:block;
        width: 100%
    }

    .brdWriteTblBox table tbody tr th {
        font-size: 14px;
        border-bottom: 1px solid #e0e0e0
    }

    .brdWriteTblBox table tbody tr td .inputArea {
        max-width: 100%
    }

    .brdWriteBtmBox {
        gap: 8px
    }

    .brdWriteBtmBox>* {
        min-width: 80px;
        height: 28px;
        font-size: 14px
    }
}



/* ------------------------------------------------------


        sub : pricing (요금안내)


------------------------------------------------------ */

.pricing {
	/* 페이지 전용 값 */
	--pr-black: #212121;
	--pr-tertiary: #71717b;
	--pr-line: #e4e4e7;
	--pr-blue-bg: #edf7ff;
	--pr-blue-deep: #1674bd;
	--pr-purple: #816bff;
	--pr-purple-deep: #5748ad;
	--pr-gray: #d3d3d3;
	--pr-gray-deep: #b3b3b3;
	--pr-tbl-bg: #f5f7f9;
	--pr-card-shadow: 0 2px 3px rgba(191, 191, 191, .25);

	padding: 0; /* 섹션마다 위아래 여백을 따로 줌 */
}

.pricing-panel[hidden] { display: none; }
.pricing-panel:focus { outline: none; }
.pricing-panel:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }

/* 공통 : 섹션 타이틀 */
.pricing-tit { color: var(--pr-black); font-family: var(--font-title); font-size: 40px; line-height: 1.3; letter-spacing: -2px; text-align: center; word-break: keep-all; }
.pricing-tit .point { color: var(--color-primary); }

/* ---------- 2. 주요 기능 ---------- */
.pricing-feature { padding-bottom: 80px; }

/* 안내 바 (확성기 아이콘) */
.pricing-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 16px 24px; border: 1px solid var(--color-primary); border-radius: 8px; background-color: var(--pr-blue-bg); color: var(--pr-tertiary); font-size: 16px; line-height: 1.6; letter-spacing: -0.3px; word-break: keep-all; }
.pricing-notice img { flex: 0 0 auto; width: 32px; height: 32px; }
.pricing-notice strong { color: var(--pr-black); font-weight: 500; }
.pricing-notice em { color: var(--color-primary); font-style: normal; font-weight: 700; }
.pricing-notice em.normal { font-weight: 500; }

/* 기능 카드 3개 */
.feature-lst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-lst li { padding: 32px 24px; border: 1px solid var(--pr-line); border-radius: 16px; background-color: var(--color-white); }
.feature-lst img { display: block; width: 88px; height: 88px; }
.feature-tit { margin-top: 12px; color: #09090b; font-size: 24px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.feature-txt { margin-top: 12px; color: var(--pr-tertiary); font-size: 18px; font-weight: 500; line-height: 1.6; word-break: keep-all; }

/* ---------- 3. 요금제 비교 ---------- */
.pricing-plan { padding: 80px 0; background-color: var(--pr-blue-bg); }
.plan-lst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px;  }

/* 카드 색상 : st_gray / st_blue / st_purple / st_disabled */
.plan-item {
	--plan-clr: var(--pr-tertiary);   /* 할인가 */
	--plan-bg: var(--color-primary-light); /* 무료 제공 박스 */
	--plan-ico: var(--color-primary); /* 아이콘 배경 */
	--plan-label: var(--color-primary); /* '무료 제공 서비스' 글자 */
	--plan-txt: #000;                 /* 무료 서비스 글자 */
	--plan-ribbon: var(--pr-gray);    /* 띠 */

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px 16px 20px;
	border: 1px solid var(--pr-line);
	border-radius: 16px;
	background-color: var(--color-white);
	box-shadow: var(--pr-card-shadow);
}
.plan-item.st_blue { --plan-clr: var(--color-primary); --plan-bg: var(--color-primary); --plan-ico: var(--pr-blue-deep); --plan-txt: #fafafa; --plan-ribbon: var(--color-primary); border: 3px solid var(--color-primary); }
.plan-item.st_purple { --plan-clr: var(--pr-purple); --plan-bg: var(--pr-purple); --plan-ico: var(--pr-purple-deep); --plan-label: var(--pr-purple); --plan-txt: #fafafa; --plan-ribbon: var(--pr-purple); }
.plan-item.st_disabled { --plan-clr: var(--pr-gray); --plan-bg: var(--pr-gray); --plan-ico: var(--pr-gray-deep); --plan-label: var(--pr-gray-deep); --plan-txt: var(--pr-tertiary); --plan-ribbon: var(--pr-gray); }

/* 오른쪽 위 띠 */
.plan-ribbon { position: absolute; top: -6px; right: -6px; width: 130px; height: 130px; overflow: hidden; pointer-events: none; }
.plan-ribbon span { position: absolute; top: 34px; right: -42px; display: block; width: 190px; padding: 8px 0; background-color: var(--plan-ribbon); color: var(--color-white); font-family: var(--font-title); font-size: 20px; line-height: 1; text-align: center; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.plan-ribbon::before,
.plan-ribbon::after { content: ""; position: absolute; border: 3px solid var(--plan-ribbon); border-top-color: transparent; border-right-color: transparent; filter: brightness(.8); }
.plan-ribbon::before { top: 0; left: 0; }
.plan-ribbon::after { right: 0; bottom: 0; }

/* 가격 */
.plan-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.plan-name { color: var(--text_main); font-size: 26px; font-weight: 700; line-height: 1; word-break: keep-all; }
.plan-sub { margin-top: 16px; color: #bdbdbd; font-family: var(--font-title-medium); font-size: 23px; line-height: 1; letter-spacing: -0.16px; }
.plan-sub del { text-decoration: line-through; }
.plan-price { margin-top: 29px; color: var(--plan-clr); font-size: 30px; line-height: 1; letter-spacing: -1px; }
.plan-price strong { font-size: 45px; font-weight: 700; }
.plan-month { margin-top: 19px; color: var(--pr-black); font-family: var(--font-title-medium); font-size: 22px; line-height: 1; letter-spacing: -0.16px; word-break: keep-all; }
.plan-item.st_disabled .plan-month { color: var(--pr-gray); }

/* 무료 제공 서비스 */
.plan-free { padding: 20px 24px; border-radius: 12px; background-color: var(--plan-bg); }
.plan-free-tit { padding: 8px 0; border-radius: 8px; background-color: var(--color-white); color: var(--plan-label); font-size: 20px; font-weight: 700; line-height: 1.2; text-align: center; }
.plan-free-lst { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.plan-free-lst li { display: flex; align-items: center; gap: 12px; color: var(--plan-txt); font-size: 20px; font-weight: 500; line-height: 30px; letter-spacing: -0.2px; }
.plan-free-lst .ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background-color: var(--plan-ico); }
.plan-free-lst .ico img { display: block; width: 30px; height: 30px; }

/* ---------- 4. 이용권 혜택 배너 ---------- */
.pricing-benefit { padding: 48px 0; background: linear-gradient(96deg, #89d7dd 1.3%, #4fb2ff 49.3%, #816bff 100%); color: #fafafa; }
.pricing-benefit .inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.benefit-txt { display: flex; flex-direction: column; align-items: flex-start; }
.benefit-badge { padding: 2px 12px; border-radius: var(--radius-pill); background-color: var(--color-white); color: var(--color-primary); font-size: 14px; font-weight: 700; line-height: 26px; letter-spacing: -0.14px; }
.benefit-sub { margin-top: 14px; font-size: 22px; line-height: 1.3; }
.benefit-tit { margin-top: 8px; color: var(--color-white); font-family: var(--font-title); font-size: 48px; line-height: 1; letter-spacing: -1px; word-break: keep-all; }
.benefit-tit span { color: #fff19e; }
.benefit-desc { margin-top: 8px; font-size: 22px; font-weight: 500; line-height: 1.3; word-break: keep-all; }
.benefit-lnk { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 28px; border-radius: 8px; background-color: #0081e5; color: var(--color-white); font-size: 20px; font-weight: 500; line-height: 26px; transition: background-color .2s; }
.benefit-lnk::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.benefit-lnk:hover { background-color: var(--color-primary-dark); }
.benefit-lnk:focus-visible { outline-color: var(--color-white); }
.benefit-img { display: block; flex: 0 0 auto; width: 273px; height: auto; }

/* ---------- 5. 안내 박스 · 표 ---------- */
.pricing-info { padding: 80px 0; }
.pricing-info .inner { display: flex; flex-direction: column; gap: 24px; }

/* 연동 신청 버튼 */
.pricing-apply { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -40px 0 16px; padding: 24px; border-radius: 16px; background-color: var(--color-primary); color: var(--color-white); font-size: 24px; font-weight: 500; line-height: 26px; text-align: center; word-break: keep-all; transition: background-color .2s, box-shadow .2s; }
.pricing-apply::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.pricing-apply:hover { background-color: #1f95f0; box-shadow: 0 6px 14px rgba(49, 165, 255, .3); }

.info-box { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; border-radius: 8px; background-color: var(--pr-tbl-bg); }
.info-tit { display: flex; align-items: center; gap: 8px; color: var(--pr-black); font-size: 20px; font-weight: 700; line-height: 1.6; word-break: keep-all; }
.info-tit img { flex: 0 0 auto; width: 32px; height: 32px; }
.info-txt { margin-bottom: 8px; color: var(--pr-tertiary); font-size: 16px; line-height: 1.6; word-break: keep-all; }
.info-card { padding: 16px 24px 20px; border: 1px solid var(--pr-line); border-radius: 12px; background-color: var(--color-white); }
.info-box .info-card + .info-card { margin-top: 8px; }
.info-card dt,
.info-card-tit { color: var(--color-primary); font-size: 24px; font-weight: 500; line-height: 1.6; }
.info-card dd { margin-top: 4px; color: var(--pr-tertiary); font-size: 16px; line-height: 1.6; word-break: keep-all; }
.info-card-tit { margin-bottom: 16px; }

/* 표 : 작은 화면에서는 가로 스크롤 */
.info-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.info-tbl table { min-width: 560px; border-bottom: 1px solid var(--out_line); }
.info-tbl th,
.info-tbl td { height: 48px; padding: 12px 10px; border-bottom: 1px solid var(--out_line); color: var(--text_main); font-size: 16px; font-weight: 400; line-height: 1.4; text-align: center; word-break: keep-all; }
.info-tbl thead th { border-top: 1px solid var(--out_line); background-color: var(--pr-tbl-bg); color: #777; }
.info-tbl tbody th { border-right: 1px solid var(--out_line); background-color: var(--color-white); }
.info-tbl tbody td:not(:last-child) { border-right: 1px solid var(--out_line); }
.info-tbl td.sm { font-size: 14px; }

/* ---------- 6. 비즈링 · 알림톡 소개 박스 ---------- */
.pricing-showcase { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 24px; padding: 40px 80px 0; border: 1px solid var(--pr-line); border-radius: 12px; background: linear-gradient(90deg, #fafafa, #d1eaf9); overflow: hidden; }
.showcase-txt { flex: 0 1 auto; padding-bottom: 40px; }
.showcase-img { flex: 0 1 auto; }
.showcase-img img { display: block; width: 100%; height: auto; }

/* 비즈링 */
.st_biz .showcase-ico { display: block; width: 32px; height: 32px; margin-bottom: 12px; }
.st_biz .showcase-sub { color: var(--pr-tertiary); font-size: 16px; line-height: 1; }
.st_biz .showcase-tit { margin-top: 8px; color: var(--color-primary); font-size: 24px; font-weight: 700; line-height: 1; }
.st_biz .showcase-price { margin-top: 15px; color: var(--color-primary); font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.3px; }
.st_biz .showcase-price strong { font-size: 36px; }
.st_biz .showcase-month { margin-top: 4px; color: var(--pr-tertiary); font-size: 16px; font-weight: 500; line-height: 1.6; }
.st_biz .showcase-note { margin-top: 11px; color: #9e9e9e; font-size: 12px; font-weight: 500; line-height: 1.4; }
.st_biz .showcase-img { width: 377px; }
.st_biz .showcase-txt { align-self: flex-start; }

/* 알림톡 */
.pricing-showcase.st_alim { gap: 80px; margin-top: 20px; }
.st_alim .showcase-txt { padding-bottom: 0; }
.st_alim .showcase-tit { color: #09090b; font-size: 36px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.st_alim .showcase-desc { margin-top: 12px; color: var(--pr-tertiary); font-size: 18px; font-weight: 500; line-height: 1.6; word-break: keep-all; }
.showcase-fee { display: flex; align-items: center; margin-top: 32px; padding: 16px 24px; border: 1px solid var(--out_line); border-radius: 12px; background-color: var(--color-white); }
.showcase-fee > div { flex: 1 1 0; padding-right: 16px; }
.showcase-fee > div + div { padding-left: 24px; border-left: 1px solid var(--out_line); }
.showcase-fee dt { color: var(--text_main); font-size: 16px; font-weight: 700; line-height: 32px; letter-spacing: -1px; white-space: nowrap; }
.showcase-fee dd { margin-top: 8px; }
.showcase-fee .point-badge { display: inline-block; padding: 4px 24px; border-radius: var(--radius-pill); background-color: var(--color-primary); color: var(--color-white); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -1px; white-space: nowrap; }
.showcase-fee .fee-price { margin-top: 0; color: var(--color-primary); font-size: 24px; line-height: 32px; letter-spacing: -1px; white-space: nowrap; }
.showcase-fee .fee-price strong { font-size: 32px; font-weight: 700; }
.st_alim .showcase-img { width: 325px; align-self: flex-end; margin-bottom: -40px; } /* 폰 아래쪽은 박스에 잘림 */

/* ---------- 7. 다수 기기 할인 배너 (공통) ---------- */
.pricing-multi { position: relative; overflow: hidden; padding: 40px 0 38px; background-color: #003a67; text-align: center; }
.pricing-multi .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.multi-sub { color: #b9e0ff; font-family: var(--font-title-medium); font-size: 24px; line-height: 1; letter-spacing: -0.16px; word-break: keep-all; }
.multi-tit { margin-top: 10px; color: var(--color-white); font-family: var(--font-title); font-size: 48px; line-height: 1; letter-spacing: -2px; word-break: keep-all; }
.multi-tit span { color: #ffd600; }
.multi-lnk { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; padding: 12px 28px; border-radius: var(--radius-pill); background-color: var(--color-white); color: #0962a8; font-size: 20px; font-weight: 500; line-height: 26px; transition: background-color .2s; }
.multi-lnk::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.multi-lnk:hover { background-color: var(--color-primary-light); }
.multi-lnk:focus-visible { outline-color: #ffd600; }
.multi-phone { position: absolute; display: block; height: auto; pointer-events: none; }
.multi-phone.phone01 { left: calc(50% - 489px); top: -28px; width: 179px; }
.multi-phone.phone02 { left: calc(50% + 350px); top: 60px; width: 172px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1064px) {
	.plan-lst { gap: 16px; }
	.plan-item { padding-left: 12px; padding-right: 12px; }
	.plan-free { padding: 16px; }
	.plan-free-lst li { font-size: 17px; }
	.plan-price strong { font-size: 38px; }
	.plan-price { font-size: 26px; }
	.plan-sub { font-size: 19px; }
	.plan-month { font-size: 18px; }
	.pricing-showcase { padding-left: 40px; padding-right: 40px; }
	.pricing-showcase.st_alim { gap: 40px; }
}

@media (max-width: 1024px) {
	.pricing-tit { font-size: 34px; }
	.feature-tit { font-size: 21px; }
	.feature-txt { font-size: 16px; }
	.feature-txt br { display: none; }
	.benefit-tit { font-size: 40px; }
	.benefit-sub,
	.benefit-desc { font-size: 19px; }
	.benefit-img { width: 220px; }
	.multi-tit { font-size: 40px; }
	.multi-phone.phone01 { left: 2%; }
	.multi-phone.phone02 { left: auto; right: 2%; }

	/* 요금제 : 2열 → 가운데 정렬 */
	.plan-lst { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
	.plan-lst > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }

	/* 소개 박스 : 세로 배치 */
	.pricing-showcase,
	.pricing-showcase.st_alim { flex-direction: column; gap: 32px; padding: 40px 32px 0; }
	.st_biz .showcase-txt { align-self: center; padding-bottom: 0; }
	.pricing-showcase .showcase-txt { text-align: center; }
	.st_biz .showcase-ico { margin-left: auto; margin-right: auto; }
	.showcase-fee { text-align: left; }
	.st_alim .showcase-img { align-self: center; }
	.st_biz .showcase-img { max-width: 100%; }
}

@media (max-width: 760px) {
	.pricing-tit { font-size: 26px; letter-spacing: -1px; }
	.pricing-feature { padding-bottom: 20px; }
	.pricing-notice { margin-top: 16px; justify-content: flex-start; padding: 14px 16px; font-size: 15px; text-align: left; }
	.pricing-notice img { width: 26px; height: 26px; }

	.feature-lst { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.feature-lst li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; padding: 20px; }
	.feature-lst img { grid-row: 1 / 3; width: 64px; height: 64px; }
	.feature-tit { margin-top: 0; font-size: 18px; }
	.feature-txt { margin-top: 4px; font-size: 15px; }

	.pricing-plan { padding: 56px 0; }
	.plan-lst { grid-template-columns: minmax(0, 400px); justify-content: center; }
	.plan-lst > li:last-child:nth-child(odd) { width: auto; justify-self: stretch; }

	.pricing-benefit { padding: 40px 0; }
	.pricing-benefit .inner { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
	.benefit-img { width: 180px; align-self: center; }
	.benefit-sub,
	.benefit-desc { font-size: 16px; }
	.benefit-tit { font-size: 30px; }
	.benefit-lnk { margin-top: 20px; padding: 10px 22px; font-size: 16px; }

	.pricing-info { padding: 56px 0; }
	.pricing-apply { margin: -16px 0 8px; padding: 18px 16px; font-size: 18px; }
	.info-box { padding: 20px 16px; }
	.info-tit { font-size: 17px; }
	.info-tit img { width: 26px; height: 26px; }
	.info-txt { font-size: 14px; }
	.info-txt br,
	.info-card dd br { display: none; }
	.info-card { padding: 14px 16px 16px; }
	.info-card dt,
	.info-card-tit { font-size: 19px; }
	.info-card dd { font-size: 14px; }
	.info-tbl th,
	.info-tbl td { font-size: 14px; }
	.info-tbl td.sm { font-size: 13px; }

	.pricing-showcase,
	.pricing-showcase.st_alim { padding: 32px 20px 0; }
	.st_alim .showcase-tit { font-size: 26px; }
	.st_alim .showcase-desc { font-size: 15px; }
	.showcase-fee { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; padding: 16px; }
	.showcase-fee > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 0; }
	.showcase-fee > div + div { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--out_line); }
	.showcase-fee dd { margin-top: 0; }
	.showcase-fee .point-badge { padding: 4px 14px; font-size: 14px; }
	.st_alim .showcase-img { width: 260px; }

	.pricing-multi { padding: 40px 0; }
	.multi-phone { display: none; }
	.multi-sub { font-size: 18px; }
	.multi-tit { font-size: 32px; }
	.multi-lnk { padding: 10px 22px; font-size: 16px; }
}

@media (max-width: 560px) {
	.plan-name { font-size: 22px; }
	.plan-free-lst li { font-size: 16px; }
	.plan-ribbon span { font-size: 17px; }
	.benefit-tit { font-size: 26px; }
	.benefit-tit span { display: block; margin-top: 6px; }
	.multi-tit { font-size: 28px; }
	.st_biz .showcase-price strong { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.benefit-lnk,
	.pricing-apply,
	.multi-lnk { transition: none; }
}