.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;}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc #mainUseStepSvg {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    padding: 20px;
}
.mainContnet .mainUse .mainUseStep .mainUseStepImgEtc #mainUseStepSvg svg {
    width: 100%;
    height: auto;
    max-width: 272px; /* 원본 크기 제한 */
}
.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: 40px;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;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 .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: 40px;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;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 .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 > dd img.mb {display: none;}
.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 32px 92px 32px;flex: 1 0 0;align-self: stretch; background: var(--Primary-50, #F2F1FD);}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb .step {
    opacity: 0;
    transform: translateY(20px);
    animation-duration: 2.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-iteration-count: infinite;
}
/* 한 주기(2.5s) 안에 기존 딜레이(0.2s / 0.6s / 1.0s) + 등장(0.7s) + 유지 후 리셋 — 반복 시에도 순서 유지 */
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb .step-3 { animation-name: mainHandyBoxObStep3; }
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb .step-2 { animation-name: mainHandyBoxObStep2; }
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb .step-1 { animation-name: mainHandyBoxObStep1; }
@keyframes mainHandyBoxObStep3 {
    0%, 8% { opacity: 0; transform: translateY(20px); }
    36%, 98.5% { opacity: 1; transform: translateY(0); }
    98.51%, 100% { opacity: 0; transform: translateY(20px); }
}
@keyframes mainHandyBoxObStep2 {
    0%, 24% { opacity: 0; transform: translateY(20px); }
    52%, 98.5% { opacity: 1; transform: translateY(0); }
    98.51%, 100% { opacity: 0; transform: translateY(20px); }
}
@keyframes mainHandyBoxObStep1 {
    0%, 40% { opacity: 0; transform: translateY(20px); }
    68%, 98.5% { opacity: 1; transform: translateY(0); }
    98.51%, 100% { opacity: 0; transform: translateY(20px); }
}
.mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb > dd {bottom: 92px !important;}
.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;}




/* ***** PAD ***** */
@media screen and (max-width:1200px) {
    .mainContnet .mainIntro::before {
        content: '';
        height: calc(100% - 56px);
    }

    .mainContnet .mainIntroInfo .mainIntroInfoVideo {
        width: 100%;
        height: auto;
    }

    .mainContnet .mainUse {
        padding: 120px 40px;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepImg {
        width: 100%;
        height: auto;
        padding: 84px 0;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepList {
        gap: 0px;
        padding: 0 16px;
    }

    .mainContnet .mainAi .mainAiRow {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .mainContnet .mainAi .mainAiRow .mainAiRowImg {
        width: 100%;
    }

    .mainContnet .mainAi .mainAiRow .mainAiRowImg img {
        width: 100%;
    }

    .mainContnet .mainAi .mainAiRow .mainAiRowImg > label > img {
        width: auto;
    }

    .mainContnet .mainHandy {
        padding: 120px 40px;
    }
    .mainContnet .mainHandy .mainHandyRow {
        width: 100%;
        height: auto;
        flex-direction: column;
    }

    .mainContnet .mainHandy .mainHandyBox > dd {position: relative;}

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxUp {
        width: 100%;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb {
        width: 100%;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb > dd {
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 60px 0;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxDi {
        width: 100%;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe {
        width: 100%;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd {
        bottom: 0px;
    }
}

/* ***** MOBILE ***** */
@media screen and (max-width:720px) {
    .mainContnet .mainIntroInfo {
        padding: 60px 20px 0 20px;
        gap: 32px;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt {
        gap: 8px;
    }
    .mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p:nth-child(1) {
        font-size: 20px;
        letter-spacing: -1.4px;
        line-height: 140%;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p:nth-child(2) {
        font-size: 60px;
        word-break: keep-all;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoTit > dl dt > p:nth-child(2) > label {
        font-size: 60px;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoTit > dl dd {
        display: none;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoBtn {
        width: 100%;
        gap: 8px;
        max-width: 280px;
        height: auto;
        flex-direction: column;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoBtn .mainIntroInfoBtnStart {
        width: 100%;
        height: 48px;
    }

    .mainContnet .mainIntroInfo .mainIntroInfoBtn .mainIntroInfoBtnDemo {
        width: 100%;
        padding: 15px 20px;
    }

    .mainContnet .mainUse {
        padding: 80px 20px;
        gap: 32px;
    }

    .mainContnet .mainUse .mainUseTit > p {
        font-size: 20px;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepImg {
        padding: 46px 0 26px;
    }
    .mainContnet .mainUse .mainUseStep .mainUseStepImg > img {
        display: none;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepImgEtc {
        position: relative;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepImgEtc #mainUseStepSvg {
        padding: 0;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepList {
        padding: 0 0;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepRow {
        width: 100%;
    }
    .mainContnet .mainUse .mainUseStep .mainUseStepRow > dl dt {
        flex-direction: column;
        align-items: flex-start;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepRow > dl dt > p {
        width: 100%;
    }

    .mainContnet .mainUse .mainUseStep .mainUseStepRow > dl {
        width: 100%;
    }

    .mainContnet .mainAi {
        padding: 80px 20px;
    }

    .mainContnet .mainAi .mainAiTit > dl > dt {
        font-size: 24px;
        letter-spacing: -1.2px;
        line-height: 100%;
    }

    .mainContnet .mainAi .mainAiTit > dl > dd {
        font-size: 48px;
        word-break: keep-all;
        letter-spacing: -3.36px;
        line-height: 120%;
    }
    .mainContnet .mainAi .mainAiRow .mainAiRowInfo {
        width: 100%;
    }
    .mainContnet .mainAi .mainAiRow .mainAiRowInfo > dd {
        width: 100%;
    }

    .mainContnet .mainHandy {
        padding: 80px 20px;
        gap: 32px;
    }

    .mainContnet .mainHandy .mainHandyTit > dl > dt {
        font-size: 24px;
        letter-spacing: -1.2px;
        line-height: 100%;
    }

    .mainContnet .mainHandy .mainHandyTit > dl > dd {
        font-size: 48px;
        letter-spacing: -3.36px;
        line-height: 120%;
    }
    

    .mainContnet .mainHandy .mainHandyBox > dt {
        font-size: 20px;
        line-height: 120%;
        letter-spacing: -1px;
    }

    .mainContnet .mainHandy .mainHandyBox > dd img.mb {
        display: block;
    }

    .mainContnet .mainHandy .mainHandyBox > dd img.pc {
        display: none;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb {
        padding: 32px 32px 42px;
    }
    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb > dd {
        width: 100%;
        padding: 0 0;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxOb > dd > svg {
        width: 100%;
    }
    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxDi {
        gap: 42px;
    }
    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxDi > dd > img {
        width: 240px;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe {
        gap: 40px;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd > img {
        width: 100%;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd .mainHandyBoxMeQr {
        padding: 7px;
        gap: 7px;
        right: 10px;
        bottom: 6px;
        left: initial;
        width: 74px;
    }

    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd .mainHandyBoxMeQr::before {
        font-size: 10px;
    }
    .mainContnet .mainHandy .mainHandyBox.mainHandyBoxMe > dd .mainHandyBoxMeQr > img {
        width: 60px;
    }
}