.sc_04 { position: relative; top: -1px; background: linear-gradient(90deg, #171717 0%, #000 100%);}
.sc_04 .group_point { position: relative; height: 600svh;}
.sc_04 .sticky { position: sticky; top: 0; height: 100svh; padding: 0 18px; overflow: hidden;}
.sc_04 .point_box { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sc_04 .point { display: flex; align-items: center; position: static;/*  opacity: 0; visibility: hidden; */ width: 100%; max-width: 1400px; height: 500px; padding: 50px; background: url('/img/marketing/new/bg_s_4_1.svg') no-repeat center center / 100% 100%; gap: 2.083vw; border-radius: 30px; box-sizing: border-box;}
.sc_04 .point::before { display: block; position: absolute; opacity: 0; z-index: -1; width: 65.4vw; background-repeat: no-repeat; background-position: center center; background-size: contain; content: ''; aspect-ratio: 1256 / 707; object-fit: cover; transition: opacity .4s;}
.sc_04 .point.active::before { opacity: 1;}
.sc_04 .point_box:nth-child(2) { transform: translateY(100%);}
.sc_04 .point_box:nth-child(3) { transform: translateY(100%);}
.sc_04 .point.point_01::before { bottom: -3.4375vw; left: -12.76vw; background-image: url('/img/marketing/new/s_4_1_1.webp');}
.sc_04 .point.point_02::before { right: -11vw; bottom: -7vw; background-image: url('/img/marketing/new/s_4_1_2.webp');}
.sc_04 .point.point_03::before { top: -7.4vw; right: -15.4vw; background-image: url('/img/marketing/new/s_4_1_3.webp');}
.sc_04 .txt_area { color: #FFF; flex: 1;}
.sc_04 .txt_area .ttl { font-weight: 700; font-size: 48px; line-height: 1.3; text-transform: capitalize;}
.sc_04 .txt_area .desc { margin-top: 12px; font-size: 20px; line-height: 1.7; letter-spacing: -0.8px;}
.sc_04 .txt_area .color_blue { color: #586AD9;}
.sc_04 .img_area { display: flex; max-width: 630px; flex: 1; gap: 1.5625vw;}
.sc_04 .img_box { display: flex; flex-direction: column; justify-content: space-between; width: 50%; padding: 20px 30px; background: url('/img/marketing/new/bg_s_4_2.svg') no-repeat center center / 100% 100%; gap: 27px; aspect-ratio: 300 / 290;}
.sc_04 .img_box .txt { position: relative; width: fit-content; font-size: 20px; color: #FFF; line-height: 1.5; letter-spacing: -0.4px; text-transform: capitalize;}
.sc_04 .img_box .txt::after { display: inline-block; width: 5px; height: 5px; background: var(--color-primary); transform: translateX(100%); content: ''; border-radius: 50%;}
.sc_04 .img_box .ico { display: block; width: 60%; max-width: 185px; margin-left: auto; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; aspect-ratio: 185 / 180;}
.sc_04 .point_01 .img_box .ico.ico_01 { background-image: url('/img/marketing/new/ico_m_s_4_1_1.svg');}
.sc_04 .point_01 .img_box .ico.ico_02 { background-image: url('/img/marketing/new/ico_m_s_4_1_2.svg');}
.sc_04 .point_02 .img_box .ico.ico_01 { background-image: url('/img/marketing/new/ico_m_s_4_2_1.svg');}
.sc_04 .point_02 .img_box .ico.ico_02 { background-image: url('/img/marketing/new/ico_m_s_4_2_2.svg');}
.sc_04 .point_03 .img_box .ico.ico_01 { background-image: url('/img/marketing/new/ico_m_s_4_3_1.svg');}
.sc_04 .point_03 .img_box .ico.ico_02 { background-image: url('/img/marketing/new/ico_m_s_4_3_2.svg');}

@media screen and (max-width: 1440px) and (min-width: 1025px) {
    .sc_04 .point { padding: 3.4722vw; border-radius: 2.0833vw;}
    .sc_04 .txt_area .ttl { font-size: 3.3333vw;}
    .sc_04 .txt_area .desc { margin-top: 0.8333vw; font-size: 1.3889vw;}
    .sc_04 .img_box { padding: 1.3889vw 2.0833vw; gap: 1.8750vw;}
    .sc_04 .img_box .txt { font-size: 1.3889vw; letter-spacing: -0.0278vw;}
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .sc_04 .point { padding: 4.8828vw; border-radius: 2.9297vw;}
    .sc_04 .txt_area .ttl { font-size: 4.6875vw;}
    .sc_04 .txt_area .desc { margin-top: 1.1719vw; font-size: 1.9531vw;}
    .sc_04 .img_box { padding: 1.9531vw 2.9297vw; gap: 2.6367vw;}
    .sc_04 .img_box .txt { font-size: 1.9531vw; letter-spacing: -0.0000vw;}
}

@media screen and (max-width: 768px) {
    .sc_04 .group_point { height: 400svh;}
    .sc_04 .point { position: static; justify-content: center; flex-direction: column; width: fit-content; padding: 40px 16px; background-image: url('/img/marketing/new/bg_s_4_1_mo.svg'); gap: 40px; aspect-ratio: 340 / 500;}
    .sc_04 .group_point .point::before { top: unset; right: unset; bottom: 0; left: 50%; width: 150vw; transform: translateX(-50%); aspect-ratio: 560 / 315;}
    .sc_04 .txt_area { flex: unset;}
    .sc_04 .txt_area .ttl { font-size: 24px;}
    .sc_04 .txt_area .desc { margin-top: 12px; font-size: 16px;}
    .sc_04 .img_area { justify-content: center; width: 100%; flex: unset; gap: 10px;}
    .sc_04 .img_box { height: 160px; padding: 10px 15px; background-image: url('/img/marketing/new/bg_s_4_2_mo.svg'); gap: 0; aspect-ratio: 147 / 160;}
    .sc_04 .img_box .txt { font-size: 14px;}
    .sc_04 .img_box .txt::after { width: 3px; height: 3px;}
    .sc_04 .img_box .ico { width: 90px; max-width: unset; margin: 0 auto;}
    .sc_04 .point.point_03::before { background-image: url('/img/marketing/new/s_4_1_3_mo.webp');}
}

@media screen and (max-width: 375px) {
    .sc_04 .point { width: 90%; padding: 10.6667vw 4.2667vw; gap: 10.6667vw;}
    .sc_04 .txt_area .ttl { font-size: 6.4000vw;}
    .sc_04 .txt_area .desc { margin-top: 3.2000vw; font-size: 4.2667vw;}
    .sc_04 .img_area { gap: 2.6667vw;}
    .sc_04 .img_box { height: 42.6667vw; padding: 2.6667vw 4.0000vw;}
    .sc_04 .img_box .txt { font-size: 3.7333vw;}
    .sc_04 .img_box .ico { width: 24.0000vw;}
}