/******** 제품소개 **********/
.sub-about { position: relative; }
.sub-about .sub-bg { position: absolute; top: 0; left: 0; width: 100%;  z-index: -1; filter: brightness(0.8); }
.sub-about .sub-bg video { width: 100%; }
.sub-about .sub-bg .bg-gra { position: absolute; left: 0; bottom: 0; width: 100%; height: 300px; background: linear-gradient(to bottom, rgba(5,5,5,0) 0,rgba(5,5,5,1) 70%, rgba(5,5,5,1) 100%); }
.sub-about .fee-wrap { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding: 250px 0; text-align: center; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.sub-about .title-area { margin-bottom: 120px; }
.sub-about .sub-title { font-size: 24px; color: #A6ACFF; margin-bottom: 40px; letter-spacing: 0.5px; }
.sub-about .main-title { font-size: 60px; line-height: 1.3; font-weight: 600; color: #fff; }
.sub-about .highlight { background: linear-gradient(90deg, #A6ACFF 49%, #ACCFF9 80%, #B1E8F4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sub-about .card-container { display: flex; gap: 50px; justify-content: center; width: 100%; }
.sub-about .price-card { position: relative; width: 33.3333%; height: 550px; background: rgba(15, 22, 48, 0.4); backdrop-filter: blur(15px); background-color: rgba(15, 22, 48, 0.4); border: none; border-radius: 50px; padding: 120px 60px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; }
.sub-about .price-card:before { content: ''; position: absolute; inset: 0; border-radius: 50px;  padding: 2px; background: linear-gradient(135deg, #96C1FF 2%, #EAF3FF 28%, #444867 51%, #4D5DB9 75%, #5B88D3 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .4; }
.sub-about .card-header h3 { font-size: 24px; color: #B3B3FF; margin-bottom: 10px; }
.sub-about .price-wrap { display: flex; gap: 20px; margin-bottom: 20px; font-family: 'Pretendard'; align-items: center; }
.sub-about .price { font-size: 60px; font-weight: 600; color: #fff; letter-spacing: -1.2px; }
.sub-about .original-price { display: flex; flex-direction: column; font-size: 20px; color: #7F7F88; gap: 5px;}
.sub-about .original-price b { text-decoration: line-through; font-weight: normal; }
.sub-about .discount-badge { display: flex; justify-content: center; align-items: center; font-size: 17px; background: #313143; width: 60px; height: 28px; border-radius: 4px; color: rgba(255,255,255,.4); }
.sub-about .card-desc { font-size: 22px; line-height: 1.6; color: #fff; }
.sub-about .price-card.best { background: linear-gradient(137deg, rgba(92,100,255,.48), rgba(8,15,94,.48)); box-shadow: 0 0 40px rgba(80, 80, 255, 0.2); z-index: 2; }
.sub-about .best .discount-badge { background: #3a3d88; }
.sub-about .best-ribbon { position: absolute; top: 0; left: 0; width: 150px; height: 150px; overflow: hidden; }
.sub-about .best-ribbon span { position: absolute; display: block; width: 240px; padding: 12px 0; background: linear-gradient(90deg, #76E5E8 0%, #4747CE 100%); color: #fff; font-size: 24px; font-weight: 700; text-align: center; right: -26px; top: 26px; transform: rotate(-45deg); }
.sub-about .star-icon { position: absolute; top: 40px; right: 40px; font-size: 48px; color: #8B8BFF; }
.sub-about .go-btn { margin-top: 70px; text-align: center; }
.sub-about .go-btn a { display: flex; align-items: center; justify-content: center; width: 260px; height: 70px; border-radius: 70px; background: linear-gradient(to right, #C2DEFF, #D7CFFF); font-size: 24px; color: #050505; font-weight: 500; }
.sub-about .func-wrap { width: 100%; margin-bottom: 100px; border-radius: 100px; --bg-top: #CEE5FF; --bg-bottom: #DED9F9; background: linear-gradient(to right, var(--bg-top), var(--bg-bottom)); }
.sub-about .arch { display: flex; gap: 60px; justify-content: space-between; max-width: 1600px; margin-inline: auto; }
.sub-about .arch__left { display: flex; flex-direction: column; min-width: 300px; }
.sub-about 	.arch__info { max-width: 600px; height: 100vh; display: grid; place-items: center; }
.sub-about .arch__info	.sTit { position: relative; font-size: 20px; font-weight: 600; letter-spacing: 0; padding: 7px 30px 7px 50px; border-radius: 40px; background: #6094F4; color: #fff; }
.sub-about .arch__info	.sTit:before { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #fff; display: block; content: ''; }
.sub-about .arch__info	.sTit b { font-family: 'Pretendard'; font-weight: 700; padding-left: 8px; }
.sub-about .arch__info	.title { color: #050505; font-size: 32px; letter-spacing: -1.5px; margin: 40px 0 60px; }
.sub-about .arch__info	.title b { display: block; font-size: 50px; font-weight: 700; }
.sub-about .arch__info	.list { display: flex; flex-direction: column; font-size: 24px; gap: 10px; color: #050505; }
#blue-arch .sTit { background: #8d8ffb; }
#blue-arch .title, #blue-arch .list { color: #fff; }
#pink-arch .sTit { background: #222b57; }
#orange-arch .sTit { background: #7370ac; }
#orange-arch .title, #orange-arch .list { color: #e1e0e9; }
.sub-about .arch__right { flex-shrink: 1; height: 100vh; width: 100%; max-width: 760px; position: relative; display: flex; flex-direction: column; }
.sub-about .arch__right .img-wrapper { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 600px; width: 100%; overflow: hidden; }
.sub-about .arch__right .img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 1660px) {
	.sub-about .fee-wrap { padding: 200px 30px; }
	.sub-about .price-card { height: 500px; padding: 100px 60px; }
	.sub-about .arch { padding: 0 80px; }
}
@media (max-width: 1600px) {
	.sub-about .main-title { font-size: 50px; }
	.sub-about .title-area { margin-bottom: 80px; }
	.sub-about .card-container { gap: 20px; }
	.sub-about .arch__info .title { font-size: 26px; }
	.sub-about .arch__info .title b { font-size: 40px; }
	.sub-about .arch__info .list { font-size: 20px; }
	.sub-about .arch__right { max-width: 633px; }
	.sub-about .arch__right .img-wrapper { height: 500px; }
}
@media (max-width: 1400px) {
	.sub-about .fee-wrap { padding: 200px 30px 100px; }
	.sub-about .price-card { height: 400px; padding: 80px 40px; border-radius: 30px; }
	.sub-about .price-card:before { border-radius: 30px; }
	.sub-about .card-header h3 { font-size: 22px; }
	.sub-about .price { font-size: 42px; }
	.sub-about .best-ribbon { width: 120px; height: 120px; }
	.sub-about .best-ribbon span { width: 200px; padding: 8px 0; font-size: 18px; right: -20px; top: 20px; }
	.sub-about .star-icon { top: 20px; font-size: 40px; }
	.sub-about .go-btn { margin-top: 50px; }
	.sub-about .go-btn a { width: 220px; height: 60px; border-radius: 60px; font-size: 22px; }
	.sub-about .func-wrap { border-radius: 60px; }
	.sub-about .arch__right { max-width: 507px; }
	.sub-about .arch__right .img-wrapper { height: 400px; }
}
@media (max-width: 1200px) {
	.sub-about .fee-wrap { padding: 160px 20px 100px; }
	.sub-about .sub-title { font-size: 20px; margin-bottom: 30px; }
	.sub-about .main-title { font-size: 40px; }
	.sub-about .card-container { gap: 10px; }
	.sub-about .func-wrap { margin-bottom: 60px; }
	.sub-about .arch { padding: 0 40px; }
	.sub-about .arch__info .title { font-size: 22px; }
	.sub-about .arch__info .title b { font-size: 36px; margin-top: 7px; }
	.sub-about .arch__info .sTit { font-size: 18px; padding: 7px 20px 7px 40px; }
	.sub-about .arch__info .sTit:before { left: 20px; }
	.sub-about .arch__right { max-width: 440px; }
	.sub-about .arch__right .img-wrapper { height: 347px; }
}
@media (max-width: 991px) {
	.sub-about .fee-wrap { padding: 120px 20px 100px; }
	.sub-about .title-area { margin-bottom: 50px; }
	.sub-about .price-card { height: auto; padding: 30px 20px; }
	.sub-about .card-header h3 { font-size: 16px; }
	.sub-about .price-wrap { margin-bottom: 30px; }
	.sub-about .price { font-size: 26px; }
	.sub-about .original-price { font-size: 16px; }
	.sub-about .discount-badge { font-size: 14px; width: 50px; height: 22px; }
	.sub-about .card-desc { font-size: 18px; }
	.sub-about .best-ribbon { display: none; }
	.sub-about .star-icon { top: 10px; font-size: 24px; right: 20px; }
	.sub-about .arch { padding: 0 20px; }
	.sub-about .arch__right { max-width: 329px; }
	.sub-about .arch__right .img-wrapper { height: 260px; }
	.sub-about .go-btn { margin-top: 30px; }
	.sub-about .go-btn a { height: 50px; border-radius: 50px; width: auto; padding: 0 30px; font-size: 18px; }
}
@media (max-width: 767px) {
	.sub-about .fee-wrap { padding: 100px 20px 60px; }
	.sub-about .title-area { margin-bottom: 40px; }
	.sub-about .sub-title { font-size: 16px; margin-bottom: 20px; }	
	.sub-about .main-title { font-size: 32px; }
	.sub-about .price-card { padding: 25px 15px; }
	.sub-about .price-wrap { gap: 10px; align-items: flex-start; }
	.sub-about .price { font-size: 22px; }
	.sub-about .card-desc { font-size: 15px; }
	.sub-about .arch { padding: 30px 40px; flex-direction: column; gap: 20px; }
	.sub-about .arch__left, .sub-about .arch__right { display: contents; }
	.sub-about .arch__info { place-items: flex-start; height: auto; padding: 20px 0; }
	.sub-about .arch__info .sTit { font-size: 16px; padding: 7px 20px; }
	.sub-about .arch__info .sTit:before { display: none; }
	.sub-about .arch__info .title { margin: 20px 0 30px; font-size: 20px; }
	.sub-about .arch__info .title b { font-size: 28px; margin-top: 3px; }
	.sub-about .arch__info .list { font-size: 18px; gap: 5px; }
	.sub-about .arch__right { height: auto; max-width: 100%; }
	.sub-about .arch__right .img-wrapper { position: static; transform: none; height: auto; width: 100%; margin-bottom: 20px; }
}
@media (max-width: 640px) {
	.sub-about .card-container { flex-direction: column; }
	.sub-about .price-card { width: 100%; padding: 25px; }
	.sub-about .card-top { display: flex; align-items: flex-start; gap: 30px; }	
	.sub-about .card-header h3 { margin-bottom: 0; }
	.sub-about .price-wrap { margin-bottom: 0; }
	.sub-about .price { line-height: 1; }
	.sub-about .original-price { flex-direction: row; gap: 10px; align-items: center; }
	.sub-about .card-top { align-items: center; margin-bottom: 20px; }
	.sub-about .card-desc br { display: none; }
}
@media (max-width: 480px) {
	.sub-about .sub-bg { display: none; }
	.sub-about .main-title { font-size: 26px; }
	.sub-about .card-top { gap: 20px; }
	.sub-about .price { font-size: 18px; }
	.sub-about .star-icon { display: none; }
	.sub-about .func-wrap { border-radius: 0; }
	.sub-about .arch { padding: 30px 20px; gap: 10px; }
	.sub-about .arch__info .sTit { font-size: 14px; }
	.sub-about .arch__info .title { font-size: 16px; }
	.sub-about .arch__info .title b { font-size: 24px; margin-top: 0; }
	.sub-about .arch__info .list { font-size: 16px; }
	.sub-about .go-btn a { height: 40px; border-radius: 40px; font-size: 16px; }
}
@media (max-width: 360px) {
	.sub-about .fee-wrap { padding: 100px 15px 40px; }
	.sub-about .main-title { font-size: 24px; }
	.sub-about .title-area { margin-bottom: 30px; }
	.sub-about .card-desc br { display: block; }
	.sub-about .card-top { flex-direction: column; align-items: flex-start; gap: 5px; }
	.sub-about .arch { padding: 20px 15px; }
	.sub-about .arch__right .img-wrapper { padding: 0 20px; }
}