.mainContnet {width: 100%;}

.mainContnet .mainIntro {display: flex;flex-direction: column;align-items: flex-start;align-self: stretch; position: relative;}
.mainContnet .mainIntro::before {content: ''; display: block; width: 100%; height: 968px; position: absolute; left: 0; top: 0; background: linear-gradient(180deg, var(--Semantic-White, #FFF) 0%, var(--Primary-100, #E2DFFC) 66.69%, var(--Primary-50, #F2F1FD) 100%);}
.mainContnet .mainIntroInfo {display: flex; padding: 140px 20px 0 20px;flex-direction: column;align-items: center;gap: 56px;align-self: stretch; position: relative; z-index: 1;}
.mainContnet .mainIntroInfo .mainIntroInfoTit {display: flex;max-width: 1030px;flex-direction: column;align-items: center;gap: 32px;align-self: center;}
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl {width: 100%; display: flex;flex-direction: column;align-items: center;gap: 24px;align-self: stretch; }
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt {width: 100%; display: flex;flex-direction: column;align-items: center;gap: 16px;align-self: stretch;}
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p {}
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p:nth-child(1) {color: var(--Primary-800, #2B2560);text-align: center;font-size: 80px;font-weight: 400;line-height: 100%; /* 80px */letter-spacing: -5.6px;}
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p:nth-child(2) {text-align: center;font-size: 80px;font-style: normal;font-weight: 500;line-height: 100%; /* 80px */letter-spacing: -4px; background: linear-gradient(90deg, var(--Primary-500, #6C5CE7) 20.36%, var(--Primary-600, #5649C0) 49.69%, var(--Primary-300, #A89FF5) 79.99%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p:nth-child(2) > label {background: linear-gradient(90deg, var(--Primary-500, #6C5CE7) 20.36%, var(--Primary-600, #5649C0) 49.69%, var(--Primary-300, #A89FF5) 79.99%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 80px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: -4px; vertical-align: top;}
.mainContnet .mainIntroInfo .mainIntroInfoTit > dl dd {color: var(--Neutral-700, #495057);text-align: center;font-size: 18px;font-style: normal;font-weight: 400;line-height: 160%; /* 28.8px */letter-spacing: -0.9px;}

.mainContnet .mainIntroInfo .mainIntroInfoBtn {display: flex;height: 48px;justify-content: center;align-items: flex-start;gap: var(--Spacing-MD, 16px);}

.mainContnet .mainIntroInfo .mainIntroInfoBtn .mainIntroInfoBtnStart {display: flex;align-items: center;align-self: stretch; display: flex;width: 164px;justify-content: center;align-items: center;gap: 16px;align-self: stretch; border-radius: var(--Radius-SM, 4px);background: var(--Primary-500, #6C5CE7); cursor: pointer;}
.mainContnet .mainIntroInfo .mainIntroInfoBtn .mainIntroInfoBtnStart > p {display: flex;justify-content: center;align-items: center;flex: 1 0 0; color: #FFF;font-size: 16px;font-style: normal;font-weight: 600;letter-spacing: -0.32px;}
.mainContnet .mainIntroInfo .mainIntroInfoBtn .mainIntroInfoBtnDemo {display: flex;width: 164px;padding: 9px 20px;justify-content: center;align-items: center;gap: 10px;align-self: stretch; border-radius: var(--Radius-SM, 4px);border: 1px solid var(--Primary-50, #F2F1FD);background: #FFF; cursor: pointer;}
.mainContnet .mainIntroInfo .mainIntroInfoBtn .mainIntroInfoBtnDemo > p {color: var(--Primary-900, #161230);font-size: 16px;font-style: normal;font-weight: 600;letter-spacing: -0.32px;}

.mainContnet .mainIntroInfo .mainIntroInfoVideo {display: flex;width: 960px;height: 540px;justify-content: center;align-items: center;aspect-ratio: 16/9; border-radius: var(--Radius-LG, 16px);border: 2px solid #FFF; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); overflow: hidden;}
.mainContnet .mainIntroInfo .mainIntroInfoVideo video {width: 100%; height: 100%;}


.mainContnet .mainUse {width: 100%; display: flex;padding: 120px 20px;flex-direction: column;align-items: center;gap: 60px;align-self: stretch; }
.mainContnet .mainUse .mainUseTit {display: flex;max-width: 1030px;flex-direction: column;align-items: center;gap: 16px;align-self: center;}
.mainContnet .mainUse .mainUseTit > p {text-align: center;font-size: 32px;font-weight: 500;line-height: 140%;letter-spacing: -2.24px; background: linear-gradient(90deg, #000 24.69%, var(--Neutral-600, #868E96) 72.61%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.mainContnet .mainUse .mainUseStep {display: flex;max-width: 1152px;align-items: center;align-content: center;gap: 40px;align-self: center; flex-wrap: wrap;}
.mainContnet .mainUse .mainUseStep .mainUseStepImg {position: relative; width: 693px; height: 502px; display: flex; align-items: center; justify-content: center; border-radius: var(--Radius-MD, 8px);background: radial-gradient(105.41% 145.52% at 50.07% -11.35%, #F5F6F9 0%, #FFF 48.56%, #C2D0F5 100%);}
.mainContnet .mainUse .mainUseStep .mainUseStepImg > img {display: inline-flex;align-items: center;}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex;width: 248px;padding: 20px;flex-direction: column;align-items: flex-start;gap: 10px; border-radius: 10px;border: 1px solid var(--Neutral-200, #E9ECEF);background: #FFF;box-shadow: 0 10px 15px -3px rgba(108, 92, 231, 0.10);}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc > li {display: flex;height: 20px;align-items: center;gap: 10px;align-self: stretch;}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc > li > label {display: block; width: 16px;height: 16px; border-radius: 9999px;border: 2px solid #D1D5DB;}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc > li > p {display: flex;align-items: center;gap: 10px; color: #9CA3AF;text-align: center;font-size: 14px;font-style: normal;font-weight: 400;line-height: 20px; letter-spacing: -0.7px;}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc > li.active {}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc > li.active > label {background: #111827; border: 0; display: flex;padding: 0 3px;justify-content: center;align-items: center;}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc > li.active > p {color: #1F2937;}


.mainContnet .mainUse .mainUseStep .mainUseStepList {display: flex;flex-direction: column;align-items: flex-start;gap: var(--Spacing-MD, 16px);flex: 1 0 0;}
.mainContnet .mainUse .mainUseStep .mainUseStepRow {display: flex;padding: 24px 0;flex-direction: column;align-items: flex-start;flex: 1 0 0;}
.mainContnet .mainUse .mainUseStep .mainUseStepRow > dl {display: flex;flex-direction: column;align-items: flex-start;gap: 16px;flex: 1 0 0;}
.mainContnet .mainUse .mainUseStep .mainUseStepRow > dl dt {display: flex;align-items: center;gap: 16px;align-self: stretch;}
.mainContnet .mainUse .mainUseStep .mainUseStepRow > dl dt > label {display: flex;width: 40px;height: 40px;padding: 6px 16px;flex-direction: column;justify-content: center;align-items: center;gap: 5px;aspect-ratio: 1/1; border-radius: var(--Radius-MD, 8px);background: var(--Primary-50, #F2F1FD);}
.mainContnet .mainUse .mainUseStep .mainUseStepRow > dl dt > p {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 6px;flex: 1 0 0; color: #000;font-size: 20px;font-style: normal;font-weight: 500;line-height: 100%;letter-spacing: -0.4px;}
.mainContnet .mainUse .mainUseStep .mainUseStepRow > dl dd {color: var(--Neutral-700, #495057);font-size: 18px;font-weight: 400;line-height: 120%;letter-spacing: -0.72px;}


.mainContnet .mainUse .mainUseStep .mainUseStepLink {display: flex;align-items: center;gap: 4px; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 100%;letter-spacing: -0.28px; cursor: pointer;}



.mainContnet .mainAi {display: flex;padding: 120px 47px;flex-direction: column;align-items: center;gap: 42px;align-self: center;}
.mainContnet .mainAi .mainAiTit {display: flex;max-width: 1500px;flex-direction: column;align-items: center;gap: 24px;align-self: center;}
.mainContnet .mainAi .mainAiTit > dl {display: flex;flex-direction: column;align-items: center;gap: 16px;align-self: stretch;}
.mainContnet .mainAi .mainAiTit > dl > dt {text-align: center;font-size: 30px;font-weight: 500;line-height: 100%;letter-spacing: -1.5px;}
.mainContnet .mainAi .mainAiTit > dl > dd {color: var(--Primary-800, #2B2560);text-align: center;font-size: 64px;font-weight: 400;line-height: 100%;letter-spacing: -4.48px;}
.mainContnet .mainAi .mainAiTit > p {color: var(--Neutral-700, #495057);text-align: center;font-size: 18px;font-weight: 400;line-height: 160%;letter-spacing: -0.9px;}

.mainContnet .mainAi .mainAiList {display: flex;flex-direction: column;align-items: center;gap: 42px;align-self: stretch;}
.mainContnet .mainAi .mainAiRow {display: flex;height: 382px;justify-content: center;align-items: center;gap: 32px;align-self: stretch;}
.mainContnet .mainAi .mainAiRow .mainAiRowImg {display: flex;width: 678px;justify-content: center;align-items: center; border-radius: 14px; overflow: hidden; position: relative;}
.mainContnet .mainAi .mainAiRow .mainAiRowImg > video {width: 100%;}
.mainContnet .mainAi .mainAiRow .mainAiRowImg > label {display: flex;width: 88px;height: 88px;justify-content: center;align-items: center;aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 107.772px;background: rgba(0, 0, 0, 0.20);backdrop-filter: blur(4.898724555969238px); padding: 0 0 0 5px;}
.mainContnet .mainAi .mainAiRow .mainAiRowInfo {display: flex;width: 360px;flex-direction: column;align-items: flex-start;gap: 16px;}
.mainContnet .mainAi .mainAiRow .mainAiRowInfo::before {content: 'AI 편집'; display: flex;padding: 4px 9px;justify-content: center;align-items: center;gap: 10px; border-radius: var(--Radius-SM, 4px);background: var(--Neutral-50, #F8F9FA); color: var(--Primary-500, #6C5CE7);font-size: 11px;font-style: normal;font-weight: 500;line-height: 140%;}
.mainContnet .mainAi .mainAiRow .mainAiRowInfo > dt {display: flex;justify-content: center;align-items: center;gap: 10px; color: #0C0C0B;font-size: 24px;font-weight: 600;line-height: 120%;letter-spacing: -1.2px;}
.mainContnet .mainAi .mainAiRow .mainAiRowInfo > dd {width: 352px; display: flex;align-items: center;gap: 10px;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 14px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: -0.7px;}


.mainContnet .mainHandy {display: flex;padding: 120px 20px;flex-direction: column;align-items: center;gap: 60px;align-self: stretch;}
.mainContnet .mainHandy .mainHandyTit {display: flex;max-width: 1500px;flex-direction: column;align-items: center;gap: 24px;align-self: center;}
.mainContnet .mainHandy .mainHandyTit > dl {display: flex;flex-direction: column;align-items: center;gap: 16px;align-self: stretch;}
.mainContnet .mainHandy .mainHandyTit > dl > dt {text-align: center;font-size: 30px;font-weight: 500;line-height: 100%;letter-spacing: -1.5px;}
.mainContnet .mainHandy .mainHandyTit > dl > dd {color: var(--Primary-800, #2B2560);text-align: center;font-size: 64px;font-weight: 400;line-height: 100%;letter-spacing: -4.48px;}
.mainContnet .mainHandy .mainHandyTit > p {color: var(--Neutral-700, #495057);text-align: center;font-size: 18px;font-weight: 400;line-height: 160%;letter-spacing: -0.9px;}

.mainContnet .mainHandy .mainHandyList {display: flex;flex-direction: column;align-items: center;gap: 24px;align-self: stretch;}
.mainContnet .mainHandy .mainHandyRow {display: flex;height: 434px;max-width: 1030px;justify-content: center;align-items: center;gap: 24px;align-self: center;}
.mainContnet .mainHandy .mainHandyBox {border-radius: var(--Radius-MD, 8px); display: flex; align-items: flex-start; gap: 10px; flex-direction: column; position: relative;}
.mainContnet .mainHandy .mainHandyBox > dt {color: #000;font-size: 24px;font-style: normal;font-weight: 500;line-height: 140%;letter-spacing: -1.68px;}
.mainContnet .mainHandy .mainHandyBox > dd {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxUp {width: 540px;padding: 32px 32px 0 32px;align-self: stretch; background: radial-gradient(105.41% 145.52% at 50.07% -11.35%, #F5F6F9 0%, #FFF 48.56%, #C2D0F5 100%);}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb {width: 466px; padding: 32px;flex: 1 0 0;align-self: stretch; background: var(--Primary-50, #F2F1FD);}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb > dd {bottom: 32px;}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxDi {width: 400px;padding: 32px 32px 0 32px;;align-self: stretch; background: linear-gradient(0deg, var(--Neutral-50, #F8F9FA) 0%, var(--Neutral-50, #F8F9FA) 100%), radial-gradient(105.41% 145.52% at 50.07% -11.35%, #F5F6F9 0%, #FFF 48.56%, #C2D0F5 100%);}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe {width: 606px;padding: 32px;flex: 1 0 0;align-self: stretch; background: linear-gradient(180deg, var(--Primary-300, #A89FF5) 0%, var(--Primary-50, #F2F1FD) 100%);}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dt {color: #FFF;}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd {bottom: 32px;}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd .mainHandyBoxMeQr {position: absolute; left: -30px;bottom: 20px; display: flex;padding: 10px;flex-direction: column;justify-content: center;align-items: center;gap: 10px; border-radius: var(--Radius-MD, 8px);background: #FFF;box-shadow: 0 10px 15px -3px rgba(108, 92, 231, 0.10);}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd .mainHandyBoxMeQr::before {content: '모바일 추모관'; color: var(--Neutral-900, #212529);font-size: 14px;font-style: normal;font-weight: 700;line-height: 100%; /* 14px */}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd .mainHandyBoxMeQr > img {width: 86px;}