@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
/* a blue color as a generic focus style */
img {
    border: 0 !important;
    outline: none !important;
    background: none;
    display: block;
    font-size: 0;
}
img.lazy_img:not([src]) {
    opacity: 0;
    display: none;
}

img:not([src]) {
    display: none;
}


img.lazy_img[src] {
    opacity: 1;
    transition: opacity 0.3s;
}

button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}
a {
    text-decoration: none;
}


@media (min-width: 1200px) {
    .subpage {
        display: block;
    }
    .mobile_subpage {
        display: none;
    }
}

@media (max-width: 1200px) {
    .subpage {
        display: none;
    }
    .mobile_subpage {
        display: block;
    }
}


@media (min-width: 1200px) {
    /* 서브페이지 비주얼 배경 */
    div.page_visual_wrap.event_wrap {background-color: #fff;background-image: url(/images/event/10th_banner1.png); width: 100%;height: 520px;margin: 0 auto;background-size: cover;background-position: center;background-repeat: no-repeat;display: flex;justify-content: center;}
    div.page_visual_wrap.event_wrap .event_banner_container {width: 100%;max-width: 1200px;padding: 15px 100px;}

    /* 이벤트 배너 부분 */
    .event_banner_container .frame {display: inline-flex;flex-direction: column;align-items: flex-start;gap: 40px;position: relative;}
    .event_banner_container .frame .div {display: flex;flex-direction: column;align-items: flex-start;gap: 16px;position: relative;align-self: stretch;width: 100%;flex: 0 0 auto;}
    .event_banner_container .frame .div-2 {position: relative;align-self: stretch;width: 100%;height: 138px;border-radius: 24px;}
    .event_banner_container .frame .k-MOOC {position: absolute;top: 14px;left: 0;font-family: "Pretendard-ExtraBold", Helvetica;font-weight: 800;color: transparent;font-size: 48px;letter-spacing: -0.96px;line-height: 62.4px;}
    .event_banner_container .frame .text-wrapper {letter-spacing: -0.46px;}
    .event_banner_container .frame .span {color: #000000;letter-spacing: -1.8px;}
    .event_banner_container .frame .text-wrapper-2 {color: #434dfd;letter-spacing: -1.2px;}
    .event_banner_container .frame .div-3 {display: inline-flex;align-items: center;gap: 30px;position: absolute;top: 0;left: 260px;}
    .event_banner_container .frame .element {position: relative;aspect-ratio: 1.08;}
    .event_banner_container .frame .element-2 {position: relative;aspect-ratio: 1.08;}
    .event_banner_container .frame .element-3 {position: relative;aspect-ratio: 1.08;}
    .event_banner_container .frame .logo {position: absolute;top: 25px;left: 0;aspect-ratio: 5.5;}
    .event_banner_container .frame .div-4 {display: inline-flex;align-items: center;gap: 10px;position: relative;flex: 0 0 auto;}
    .event_banner_container .frame .text-wrapper-3 {position: relative;width: fit-content;margin-top: -1.00px;font-family: "Pretendard-Medium", Helvetica;font-weight: 500;color: #2c4cb3;font-size: 15px;letter-spacing: -0.07px;line-height: 21.0px;white-space: nowrap;}
    .event_banner_container .frame .div-5 { display: inline-flex; align-items: center;gap: 8px;padding: 12px 32px 12px 24px; position: absolute; top: 85px;left: 274px;border-radius: 999px;box-shadow: 4px 4px 7px #00000026;background: linear-gradient(90deg,rgba(67, 77, 253, 1) 0%,rgba(7, 232, 114, 1) 100%);}
    .event_banner_container .frame .text-wrapper-4 {margin-top: -2.00px;font-family: "Pretendard-Bold", Helvetica;font-weight: 700;color: #ffffff;font-size: 16px;letter-spacing: -0.50px;line-height: 22.4px;position: relative;width: fit-content;white-space: nowrap;}
    .event_banner_container .frame .image { top: 91px;left: 445px;width: 75px;height: 94px;aspect-ratio: 0.57;position: absolute;object-fit: cover;}
    .event_banner_container .frame .div-6 {display: flex;flex-direction: column;width: 520px;align-items: flex-start;justify-content: center;gap: 4px;padding: 24px;position: relative;flex: 0 0 auto;background-color: #ffffff;border-radius: 24px;box-shadow: 4px 4px 10px #00000012;}
    .event_banner_container .frame .p {margin-top: -1.00px;font-family: "Pretendard-Bold", Helvetica;font-weight: 700;color: transparent;font-size: 16px;letter-spacing: -0.05px;line-height: 24px;position: relative;width: fit-content;white-space: nowrap;}
    .event_banner_container .frame .text-wrapper-5 {color: #434dfd;letter-spacing: -0.5px;}
    .event_banner_container .frame .text-wrapper-6 {color: #000000;letter-spacing: -0.5px;}
    .event_banner_container .frame .text-wrapper-7 {font-family: "Pretendard-Medium", Helvetica;font-weight: 500;color: #808080;font-size: 14px;letter-spacing: -0.5px;line-height: 19.6px;position: relative;width: fit-content;white-space: nowrap;font-size: 14px;}
    .event_banner_container .frame .img { top: -39px;left: 375px;width: 138px;height: 130px;aspect-ratio: 1.06;position: absolute;object-fit: cover;}

    /* 이벤트 서브메인 그래프부분 */
    .graph { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; position: relative;padding-top:40px;padding-bottom:80px;}
    .graph .frame { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; flex: 0 0 auto; }
    .graph .div { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
    .graph .element-k-MOOC { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: transparent; font-size: 48px; letter-spacing: -0.24px; line-height: 67.2px; white-space: nowrap; }
    .graph .text-wrapper { color: #000000; letter-spacing: -0.12px; }
    .graph .span { color: #434dfd; letter-spacing: -0.12px; }
    .graph .frame-2 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; flex: 0 0 auto; }
    .graph .p { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #333333; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .graph .element-k-MOOC-2 { position: relative; align-self: stretch; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #333333; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }

    .graph .frame-3 { display: flex; height: 480px; align-items: center; gap: 24px; position: relative; align-self: stretch; width: 100%; }
    .graph .img { position: relative; flex: 1; align-self: stretch; flex-grow: 1; }
    .graph .text-wrapper-2 { position: absolute; top: 225px; left: 58px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #434dfd; font-size: 28px; letter-spacing: -0.14px; line-height: 39.2px; white-space: nowrap; }
    .graph .frame-4 { position: relative; align-self: stretch; width: 350px; background-color: #edf4ff; border-radius: 16px; }
    .graph .frame-5 { position: relative; align-self: stretch; width: 350px; background-color: #edf4ff; border-radius: 16px; }
    .graph .frame-6 { position: relative; align-self: stretch; width: 350px; background-color: #edf4ff; border-radius: 16px; }
    .graph .image-1 { left: 33px; width: 287px; position: absolute; top: 40px; height: 440px; object-fit: cover; }
    .graph .image-2 { left: 18px; width: 311px; position: absolute; top: 40px; height: 440px; object-fit: cover; }
    .graph .image-3 { left: 33px; width: 287px; position: absolute; top: 40px; height: 440px; object-fit: cover; }
    .graph .frame-7 { display: flex; align-items: center; justify-content: flex-end; gap: 4px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; top: -55px}
    .graph .text-wrapper-4 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }


    /* 이벤트 탭 부분 */
    .tab { display: flex; align-items: center; justify-content: center; gap: 8px; position: sticky; padding-top:10px;padding-bottom:10px;top: 84px;z-index: 5;background: #fff;}
    .tab .rectangle { position: relative; flex: 1; flex-grow: 1; height: 1px; background: linear-gradient( 0deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 1) 100% ), linear-gradient( 0deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 1) 100% ); }
    .tab .menu { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; position: relative; }
    .tab .text-wrapper { margin-left: -2.00px; margin-right: -2.00px; color: #808080; position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; font-size: 18px; letter-spacing: -0.09px; line-height: 27px; white-space: nowrap; }
    .tab .div { cursor:pointer; display: flex; width: 142px; height: 56px; justify-content: space-around; padding: 0px 32px; background-color: #ffffff; border-radius: var(--radiFLg-full, 999px); overflow: hidden; border: 1px solid; border-color: #cccccc; align-items: center; gap: 4px; position: relative; }
    .tab .text-wrapper-2 { color: #808080; position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; font-size: 18px; letter-spacing: -0.09px; line-height: 27px; white-space: nowrap; }
    .tab .text-wrapper-3 { margin-left: -2.00px; margin-right: -2.00px; color: #808080; position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; font-size: 18px; letter-spacing: -0.09px; line-height: 27px; white-space: nowrap; }

    /* active 상태 */
    .tab .active {
        background-color: #434dfd !important;
        color: #ffffff !important;
        border-color: #434dfd !important;
    }

    .tab .active .text-wrapper,
    .tab .active .text-wrapper-2,
    .tab .active .text-wrapper-3 {
        color: #ffffff !important;
    }



    /* 이벤트 학습자 부분 */
    .div-wrapper { display: flex; flex-direction: column; width: 1100px; align-items: flex-start; gap: 60px; position: relative; }
    .div-wrapper .frame { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper .rectangle { top: 80px; left: 364px; width: 210px; position: absolute; height: 16px; background-color: #b7ffdd; }
    .div-wrapper .div { top: 136px; left: 72px; width: 210px; position: absolute; height: 16px; background-color: #b7ffdd; }
    .div-wrapper .frame-2 { align-items: flex-end; justify-content: space-around; gap: 8px; align-self: stretch; width: 100%; flex: 0 0 auto; display: flex; position: relative; }
    .div-wrapper .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .div-wrapper .element { position: relative; align-self: stretch; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: transparent; font-size: 42px; letter-spacing: -0.42px; line-height: 58.8px; }
    .div-wrapper .span { color: #808080; letter-spacing: -0.18px; }
    .div-wrapper .text-wrapper-2 { color: #000000; letter-spacing: -0.18px; }
    .div-wrapper .text-wrapper-3 { color: #808080; font-size: 30px; letter-spacing: -0.09px; line-height: 42.0px; }
    .div-wrapper .frame-3 { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 185px; left: 392px; }
    .div-wrapper .text-wrapper-4 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #007467a6; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper .frame-4 { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper .frame-5 { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; }
    .div-wrapper .frame-6 { display: flex; align-items: center; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .div-wrapper .image { position: relative; width: 300px; height: 240px; object-fit: cover; }
    .div-wrapper .frame-7 { display: flex; flex-direction: column; width: 800px; align-items: flex-start; gap: 12px; position: relative; }
    .div-wrapper .frame-8 { display: flex; align-items: center; gap: 16px; padding: 16px 32px 16px 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #f7f7f7; border-radius: 99px; }
    .div-wrapper .frame-9 { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #10c164; border-radius: 20px; aspect-ratio: 1; }
    .div-wrapper .text-wrapper-6 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.07px; line-height: 19.6px; white-space: nowrap; }
    .div-wrapper .text-wrapper-7 { position: relative; flex: 1; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .div-wrapper .text-wrapper-8 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .div-wrapper .frame-10 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper .frame-11 { display: flex; align-items: flex-start; gap: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper .frame-12 { flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; flex-grow: 1; display: flex; position: relative; }
    .div-wrapper .frame-13 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 32px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; border: 1px solid; border-color: #d7d7d7; }
    .div-wrapper .frame-14 { display: flex; align-items: center; gap: 16px; padding: 8px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .div-wrapper .frame-15 { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .div-wrapper .text-wrapper-9 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper .frame-16 { display: flex; align-items: flex-end; gap: 8px; position: relative; flex: 1; flex-grow: 1; }
    .div-wrapper .vector { width: 158.25%; height: 35.00%; top: 65.41%; position: absolute; left: 0; } .div-wrapper .img { width: 158.25%; height: 35.00%; top: 0; position: absolute; left: 0; }
    .div-wrapper .vector-2 { width: 158.33%; height: 58.33%; top: 20.83%; position: absolute; left: 0; } .div-wrapper .vector-3 { width: 158.33%; height: 25.00%; top: 37.50%; position: absolute; left: 0; }
    .div-wrapper .text-wrapper-10 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper .text-wrapper-11 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper .frame-17 { display: flex; align-items: center; justify-content: flex-end; gap: 4px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }

    /* 이벤트 강좌 부분 */
    .course.event_wrap {background-color:#fff;background-image: url(/images/event/course_bg2.png);width: 100%;max-width: 2560px;height: 2615px;margin: 0 auto;background-size: cover;background-position: center;background-repeat: no-repeat;}
    .course .container1 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;padding-top:80px;}

    .container1 .frame { display: flex; flex-direction: column; width: 1100px; align-items: flex-start; gap: 16px; position: relative; }
    .container1 .frame .div { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container1 .frame .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .container1 .frame .div-2 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; }
    .container1 .frame .element { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container1 .frame .div-3 { display: flex; align-items: flex-start; gap: 12px; padding: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #5099F8; border-radius: 16px; overflow: hidden; }
    .container1 .frame .rectangle { position: absolute; top: 0; left: 0; width: 1100px; height: 494px; mix-blend-mode: overlay; aspect-ratio: 1.5; }
    .container1 .frame .div-4 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px 24px; position: relative; flex: 1; align-self: stretch; flex-grow: 1; background-color: #ffffff; border-radius: 12px; }
    .container1 .frame .div-wrapper { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #4f6af1; border-radius: 20px; aspect-ratio: 1; }
    .container1 .frame .text-wrapper-2 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.28px; line-height: 18.2px; white-space: nowrap; }
    .container1 .frame .img { position: relative; flex: 0 0 auto; }
    .container1 .frame .text-wrapper-3 { position: relative; align-self: stretch; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #000000; font-size: 24px; text-align: center; letter-spacing: -0.07px; line-height: 33.6px; }
    .container1 .frame .text-wrapper-4 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .container1 .frame .div-5 { display: flex; flex-direction: column; width: 760px; align-items: flex-start; gap: 12px; position: relative; }
    .container1 .frame .div-6 { display: flex; align-items: flex-start; gap: 16px; padding: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .container1 .frame .div-7 { display: flex; flex-direction: column; width: 60px; align-items: flex-start; gap: 16px; position: relative; }
    .container1 .frame .img-2 { position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; margin-bottom: -3.95px; margin-left: -2.00px; }
    .container1 .frame .div-8 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; position: relative; flex: 1; flex-grow: 1; }
    .container1 .frame .div-9 { display: flex; height: 36px; align-items: center; gap: 16px; position: relative; align-self: stretch; width: 100%; }
    .container1 .frame .text-wrapper-5 { position: relative; flex: 1; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .container1 .frame .div-10 { position: absolute; top: 0; left: 0; width: 120px; height: 120px; } .frame .rectangle-2 { position: absolute; top: 0; left: 0; width: 147px; height: 147px; aspect-ratio: 1; }
    .container1 .frame .vector { position: absolute; top: calc(50.00% - 47px); left: calc(50.00% - 47px); width: 65px; height: 65px; aspect-ratio: 5.5; }



    .course .container2 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;padding-top:60px;}
    .container2 .frame { display: flex; flex-direction: column; width: 1100px; align-items: flex-start; gap: 16px; position: relative; }
    .container2 .frame .div { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container2 .frame .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .container2 .frame .element-wrapper { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; }
    .container2 .frame .element { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container2 .frame .div-2 { display: flex; align-items: center; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-radius: 16px; }
    .container2 .frame .image { position: relative; width: 300px; height: 258px; object-fit: cover; }
    .container2 .frame .div-3 { display: flex; flex-direction: column; width: 800px; align-items: flex-start; gap: 12px; position: relative; }
    .container2 .frame .div-4 { display: flex; align-items: center; gap: 16px; padding: 16px 32px 16px 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 99px; }
    .container2 .frame .div-wrapper { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #4f6af1; border-radius: 20px; aspect-ratio: 1; }
    .container2 .frame .text-wrapper-2 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.28px; line-height: 18.2px; white-space: nowrap; }
    .container2 .frame .text-wrapper-3 { flex: 1; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; position: relative; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; }
    .container2 .frame .text-wrapper-4 { width: fit-content; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; position: relative; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; }
    .container2 .frame .div-5 { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; border-radius: 99px; }
    .container2 .frame .heart-rounded { position: relative; width: 26px; height: 24px; }
    .container2 .frame .icon { position: absolute; width: 83.33%; height: 75.00%; top: 12.50%; left: 8.33%; }
    .container2 .frame .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4d4d4d; font-size: 18px; letter-spacing: -0.05px; line-height: 25.2px; white-space: nowrap; }
    .container2 .frame .div-6 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; position: relative; flex: 1; flex-grow: 1; }
    .container2 .frame .div-7 { display: flex; align-items: center; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container2 .frame .text-wrapper-6 { flex: 1; margin-top: -1.00px; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; position: relative; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; }

    .course .container3 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;padding-top:60px;}

    .container3 .frame { display: flex; flex-direction: column; width: 1100px; align-items: flex-start; gap: 16px; position: relative; }
    .container3 .frame .div { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container3 .frame .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .container3 .frame .div-2 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; }
    .container3 .frame .element { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container3 .frame .div-3 { display: flex; width: 1100px; align-items: center; position: relative; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .container3 .frame .div-4 { display: flex; flex-direction: column; width: 240px; align-items: center; justify-content: center; gap: 32px; padding: 24px; position: relative; align-self: stretch; background-color: #4f6af1; border-radius: 16px 0px 0px 16px; overflow: hidden; }
    .container3 .frame .rectangle { position: absolute; top: 0; left: 0; width: 240px; height: 999px; mix-blend-mode: overlay; }
    .container3 .frame .list { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; flex: 1; align-self: stretch; width: 100%; flex-grow: 1; }
    .container3 .frame .div-5 { cursor:pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-radius: 4px; opacity: 0.95; }
    .container3 .frame .text-wrapper-2 { position: relative; width: fit-content; font-family: "Noto Sans CJK KR-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 18px; letter-spacing: -0.36px; line-height: 25.2px; white-space: nowrap; }
    .container3 .frame .image { position: relative; width: 28px; height: 28px; object-fit: cover; }
    .container3 .frame .rectangle-2 { position: relative; align-self: stretch; width: 100%; height: 1px; background-color: #fffffffa; opacity: 0.15; }
    .container3 .frame .div-6 { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 32px; position: relative; flex: 1; align-self: stretch; flex-grow: 1; }
    .container3 .frame .div-7 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .container3 .frame .text-wrapper-3 { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .container3 .frame .div-8 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0px 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container3 .frame .div-9 { display: flex; align-items: center; gap: 16px; padding: 4px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-radius: 12px; }
    .container3 .frame .div-wrapper { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .container3 .frame .text-wrapper-4 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.30px; line-height: 19.5px; white-space: nowrap; }
    .container3 .frame .text-wrapper-5 { position: relative; flex: 1; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .container3 .frame .div-10 { display: inline-flex; align-items: center; gap: 12px; position: relative; flex: 0 0 auto; }
    .container3 .frame .text-wrapper-6 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .container3 .frame .rectangle-3 { position: relative; width: 1px; height: 12px; background-color: #cccccc; }
    .container3 .frame .text-wrapper-7 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4a52e1; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .container3 .frame .rectangle-4 { position: relative; align-self: stretch; width: 100%; height: 1px; background-color: #e6e6e6fa; }
    .container3 .frame .div-8.hover {background-color: #E7E7E7FF;transition: background-color 0.2s ease;}
    .course .container4 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;padding-top:60px;}


    .container4 .frame { display: flex; width: 1100px; align-items: flex-start; gap: 24px; position: relative; }
    .container4 .frame .div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; flex: 1; align-self: stretch; flex-grow: 1; }
    .container4 .frame .div-2 { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container4 .frame .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -1.0px; line-height: 28.0px; }
    .container4 .frame .div-3 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; }
    .container4 .frame .element { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -1px; line-height: 21.0px; white-space: nowrap; }
    .container4 .frame .div-4 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container4 .frame .div-5 { display: flex; align-items: center; gap: 16px; padding: 18px 32px 18px 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .container4 .frame .div-wrapper { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .container4 .frame .text-wrapper-2 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container4 .frame .div-6 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; flex: 1; flex-grow: 1; }
    .container4 .frame .div-7 { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .container4 .frame .text-wrapper-3 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .container4 .frame .text-wrapper-4 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4a52e1; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .container4 .frame .div-8 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; position: relative; flex: 1; flex-grow: 1; }
    .container4 .frame .div-9 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container4 .frame .div-10 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; flex: 1; align-self: stretch; width: 100%; flex-grow: 1; }
    .container4 .frame .span { letter-spacing: -0.02px; }
    .container4 .frame .text-wrapper-5 { font-size: 16px; letter-spacing: -0.01px; line-height: 22.4px; }
    .container4 .frame .div-11 { display: flex; align-items: center; gap: 16px; padding: 18px 32px 18px 24px; position: relative; flex: 1; align-self: stretch; width: 100%; flex-grow: 1; background-color: #ffffff; border-radius: 16px; }
    .container4 .frame .div-12 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; flex: 1; align-self: stretch; flex-grow: 1; }


    /* 이벤트 플랫폼 부분 */
    .platform { display: flex; flex-direction: column; align-items: flex-start; position: relative;padding-bottom:80px;}
    .platform .container5 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;}
    .container5 .frame { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; }
    .container5 .frame .rectangle { top: 136px; left: 72px; width: 338px; position: absolute; height: 16px; background-color: #b7ffdd; }
    .container5 .frame .div { top: 191px; left: 70px; width: 270px; position: absolute; height: 16px; background-color: #b7ffdd; }
    .container5 .frame .rectangle-2 { top: 191px; left: 444px; width: 241px; position: absolute; height: 16px; background-color: #b7ffdd; }
    .container5 .frame .div-wrapper2 { display: flex; justify-content: space-around; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container5 .frame .text-wrapper { flex: 1; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 26.0px; position: relative; margin-top: -1.00px; }
    .container5 .frame .desktop-mobile { position: relative; align-self: stretch; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: transparent; font-size: 42px; letter-spacing: -0.42px; line-height: 58.8px; }
    .container5 .frame .span { color: #808080; letter-spacing: -0.18px; }
    .container5 .frame .text-wrapper-2 { color: #000000; letter-spacing: -0.18px; }
    .container5 .frame .div-2 { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 247px; left: 347px; }
    .container5 .frame .p { width: fit-content; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; position: relative; margin-top: -1.00px; }
    .container5 .frame .layer {height: 31px; display:inline-block !important; padding-right:15px;}

    .platform .container6 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;padding-top:60px;}

    .container6 .frame { display: flex; align-items: flex-start; gap: 24px; align-self: stretch; }
    .container6 .frame .div { display: flex;flex-direction: column;align-items: flex-start;gap: 16px;flex: 1 0 0; }
    .container6 .frame .div-2 { display: flex;justify-content: space-between;align-items: flex-end;align-self: stretch; }
    .container6 .frame .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 26.0px; }
    .container6 .frame .div-wrapper2 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; position: relative; flex: 0 0 auto; }
    .container6 .frame .p { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container6 .frame .div-3 { display: flex;padding: 16px 32px;flex-direction: column;align-items: flex-start;gap: 4px;align-self: stretch;border-radius: 16px;border: 1px solid #D8D8D8;background: #FFF;}
    .container6 .frame .div-4 { display: flex;padding: 8px 0;align-items: center;gap: 16px;align-self: stretch; border-radius: 12px;background: #FFF;}
    .container6 .frame .div-wrapper-2 { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .container6 .frame .text-wrapper-2 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.30px; line-height: 19.5px; white-space: nowrap; }
    .container6 .frame .text-wrapper-3 { position: relative; flex: 1; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .container6 .frame .text-wrapper-4 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .container6 .frame .div-5 { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
    .container6 .frame .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .container6 .frame .text-wrapper-6 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container6 .frame .text-wrapper-7 { display: flex; align-items: flex-end; gap: 8px; position: relative; flex: 1; flex-grow: 1; }
    .container6 .frame .text-wrapper-10 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }


    .platform .container7 { padding-right: 10px;padding-left: 10px;margin-right: auto;margin-left: auto; width: 1100px;padding-top:60px;}
    .container7 .frame { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; }
    .container7 .frame .div { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .container7 .frame .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 26.0px; }
    .container7 .frame .div-wrapper3 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; position: relative; flex: 0 0 auto; }
    .container7 .frame .text-wrapper-2 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .container7 .frame .div-2 { display: inline-flex; align-items: flex-start; gap: 8px; position: relative; align-self: stretch; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .container7 .frame .image { position: relative; width: 292px; height: 240px; object-fit: cover; }
    .container7 .frame .div-3 { display: flex; flex-direction: column; width: 800px; align-items: flex-start; gap: 12px; position: relative; }
    .container7 .frame .div-4 { display: flex; align-items: center; gap: 16px; padding: 16px 32px 16px 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #f7f7f7; border-radius: 99px; }
    .container7 .frame .div-wrapper-2 { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #10c164; border-radius: 20px; aspect-ratio: 1; }
    .container7 .frame .text-wrapper-3 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.28px; line-height: 18.2px; white-space: nowrap; }
    .container7 .frame .text-wrapper-4 { flex: 1; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; position: relative; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .container7 .frame .text-wrapper-5 { width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; white-space: nowrap; position: relative; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
}

@media (max-width: 1200px) {
    /* 서브페이지 비주얼 배경 */
    div.event_wrap2 {background-color: #fff;background-image: url(/images/event/moblie_banner2.png);  max-height: 220px; width: 100%;aspect-ratio: 360 / 203;margin: 0 auto;background-size: cover;background-position: center;background-repeat: no-repeat;display: flex;justify-content: center;align-items: center;}
    div.event_wrap2 .event_banner_container2 {width: 100%;max-width: 720px;padding: 5px 5px; }
    /* 이벤트 배너 부분 */
    .event_banner_container2 .frame { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; }
    .event_banner_container2 .frame .div { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; flex: 0 0 auto; }
    .event_banner_container2 .frame .div-2 { position: relative;align-items: center; gap: 18px; width: 100%; height: 82.5px; border-radius: 24px; }
    .event_banner_container2 .frame .k-MOOC { position: absolute; top: 6px; left: 0; font-family: "Pretendard-ExtraBold", Helvetica; font-weight: 800; color: transparent; font-size: 26px; letter-spacing: -1px; line-height: 34.8px; }
    .event_banner_container2 .frame .text-wrapper { letter-spacing: -2px; }
    .event_banner_container2 .frame .span { color: #000000; letter-spacing: -1px; }
    .event_banner_container2 .frame .text-wrapper-2 { color: #434dfd; letter-spacing: -1px; padding-left:120px;}
    .event_banner_container2 .frame .div-3 { display: inline-flex; align-items: center; gap: 17px; position: absolute; top: 1px; left: 135px; }
    .event_banner_container2 .frame .element { position: relative; width: 8px; height: 7px; aspect-ratio: 1.08; }
    .event_banner_container2 .frame .element-2 {position: relative; width: 8px; height: 7px; aspect-ratio: 1.08; background-size: 100% 100%; }
    .event_banner_container2 .frame .element-3 { position: relative; width: 8px; height: 7px; aspect-ratio: 1.08; background-size: 100% 100%; }
    .event_banner_container2 .frame .logo { position: absolute; top: 13px; left: 3px; width: 110px; height: 20px; aspect-ratio: 5.5; }
    .event_banner_container2 .frame .div-4 { display: inline-flex; align-items: center; gap: 130px; position: relative; flex: 0 0 auto; }
    .event_banner_container2 .frame .text-wrapper-3 { position: relative; width: fit-content; margin-top: -15.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #2c4cb3; font-size: 12px; letter-spacing: -0.06px; line-height: 16.8px; white-space: nowrap; }
    .event_banner_container2 .frame .div-5 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 26px 8px 12px; border-radius: 999px; box-shadow: 4px 4px 7px #00000026; background: linear-gradient( 90deg, rgba(67, 77, 253, 1) 0%, rgba(7, 232, 114, 1) 100% ); }
    .event_banner_container2 .frame .text-wrapper-4 { margin-top: 1.00px; color: #ffffff; letter-spacing: -0.50px; line-height: 18.8px; white-space: nowrap; position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; font-size: 12px; }
    .event_banner_container2 .frame .image { top: 98px; left: 129px; width: 34px; height: 44px; aspect-ratio: 0.57; position: absolute; object-fit: cover; }
    .event_banner_container2 .frame .div-6 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px; position: relative; align-self: stretch; width: 80%; flex: 0 0 auto; background-color: #ffffff; border-radius: 8px; box-shadow: 4px 4px 10px #00000012; }
    .event_banner_container2 .frame .p { margin-top: -1.00px; color: transparent; letter-spacing: -0.04px; line-height: 18px; position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; font-size: 12px; }
    .event_banner_container2 .frame .text-wrapper-5 { color: #434dfd; letter-spacing: 0; }
    .event_banner_container2 .frame .text-wrapper-6 { color: #000000; letter-spacing: 0; }
    .event_banner_container2 .frame .img { top: -30px; left: 160px; width: 60px; height: 56px; aspect-ratio: 1.06; position: absolute; object-fit: cover; }

    .graph2 { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; padding-top:40px;padding-bottom:40px;}
    .graph2 .frame { display: flex; flex-direction: column; width: 100%; align-items: flex-start; gap: 16px; padding: 0px 20px; position: relative; flex: 0 0 auto; }
    .graph2 .div { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
    .graph2 .element-k-MOOC { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: transparent; font-size: 24px; letter-spacing: -0.12px; line-height: 33.6px; }
    .graph2 .text-wrapper { color: #000000; letter-spacing: -0.03px; }
    .graph2 .span { color: #434dfd; letter-spacing: -0.03px; }
    .graph2 .frame-2 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .graph2 .p { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #333333; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; }
    .graph2 .element-k-MOOC-2 { position: relative; align-self: stretch; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #333333; font-size: 14px; letter-spacing: -0.07px; line-height: 19.6px; }
    .graph2 .frame-3 { display: flex; flex-direction: column; width: 100%; align-items: center; gap: 16px; position: relative; flex: 0 0 auto; }
    .graph2 .frame-4 { display: flex; flex-direction: column; width: 320px; height: 360px; align-items: flex-start; gap: 24px; padding: 24px; position: relative; background-color: #edf4ff; border-radius: 16px; }
    .graph2 .frame-5 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .graph2 .frame-6 { display: flex; align-items: center; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .graph2 .image { position: relative; width: 28px; height: 28px; object-fit: cover; }
    .graph2 .text-wrapper-2 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .graph2 .element { position: relative; align-self: stretch; font-family: "Pretendard-Medium", Helvetica; font-weight: 400; color: transparent; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; }
    .graph2 .text-wrapper-3 { font-weight: 500; color: #333333; letter-spacing: -0.01px; }
    .graph2 .text-wrapper-4 { font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #434dfd; letter-spacing: -0.01px; }
    .graph2 .frame-7 { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; }
    .graph2 .div-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; position: relative; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; box-shadow: 4px 4px 10px #0000000a; }
    .graph2 .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #434dfd; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; white-space: nowrap; }
    .graph2 .image-wrapper { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
    .graph2 .img { position: relative; width: 32px; height: 32px; object-fit: cover; }
    .graph2 .frame-8 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; position: relative; flex: 0 0 auto; background-color: #e1e5eacc; border-radius: 12px; }
    .graph2 .text-wrapper-6 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #7a7a7a; font-size: 16px; letter-spacing: -0.32px; line-height: 20.8px; white-space: nowrap; }
    .graph2 .image-2 { position: absolute; top: 143px; left: 154px; width: 136px; height: 217px; object-fit: cover; }
    .graph2 .image-3 { position: absolute; top: 26px; left: 0; width: 311px; height: 334px; object-fit: cover; }
    .graph2 .image-4 { position: absolute; top: 52px; left: 166px; width: 124px; height: 308px; object-fit: cover; }
    .graph2 .frame-9 { display: flex; align-items: center; justify-content: flex-end; position: relative; width: 320px; }
    .graph2 .text-wrapper-7 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }



    /* 이벤트 탭 부분 */
    .tab2 { display: flex; align-items: center; justify-content: center; gap: 8px; position: sticky; padding-bottom:10px;top: 84px;z-index: 5;background: #fff;padding-top: 10px;}
    .tab2 .menu { display: inline-flex; align-items: center; gap: 2px; position: relative; }
    .tab2 .menu .div-wrapper { display: flex; width: 90px; height: 40px; align-items: center; justify-content: space-around; gap: 4px; position: relative; background-color: #ffffff; border-radius: var(--radiFLg-full, 999px); overflow: hidden; border: 1px solid; border-color: #cccccc; }
    .tab2 .menu .text-wrapper { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }




    /* active 상태 */
    .tab2 .active {
        background-color: #434dfd !important;
        color: #ffffff !important;
        border-color: #434dfd !important;
    }

    .tab2 .active .text-wrapper,
    .tab2 .active .text-wrapper-2,
    .tab2 .active .text-wrapper-3 {
        color: #ffffff !important;
    }

    .div-wrapper5 { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 0px 20px; position: relative; padding-bottom:40px; padding-top:40px;}
    .div-wrapper5 .frame { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper5 .rectangle { top: 105px; width: 230px; position: absolute; left: 49px; height: 12px; background-color: #b7ffdd; }
    .div-wrapper5 .div { top: 184px; width: 230px; position: absolute; left: 49px; height: 12px; background-color: #b7ffdd; }
    .div-wrapper5 .frame-2 { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper5 .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .div-wrapper5 .frame-3 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper5 .element { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: transparent; font-size: 28px; letter-spacing: -0.28px; line-height: 39.2px; }
    .div-wrapper5 .span { color: #808080; letter-spacing: -0.08px; }
    .div-wrapper5 .text-wrapper-2 { color: #000000; letter-spacing: -0.08px; }
    .div-wrapper5 .text-wrapper-3 { color: #808080; font-size: 20px; letter-spacing: -0.04px; line-height: 28.0px; }
    .div-wrapper5 .frame-4 { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; }
    .div-wrapper5 .text-wrapper-4 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper5 .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #007467a6; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper5 .p { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .div-wrapper5 .frame-5 { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .div-wrapper5 .image { width: 242px; height: 160px; position: relative; object-fit: cover; }
    .div-wrapper5 .frame-6 { display: flex; align-items: center; gap: 16px; padding: 12px 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #f7f7f7; border-radius: 99px; }
    .div-wrapper5 .frame-7 { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #10c164; border-radius: 20px; aspect-ratio: 1; }
    .div-wrapper5 .text-wrapper-6 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.07px; line-height: 19.6px; white-space: nowrap; }
    .div-wrapper5 .text-wrapper-7 { position: relative; flex: 1; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .div-wrapper5 .text-wrapper-8 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 14px; letter-spacing: -0.07px; line-height: 19.6px; white-space: nowrap; }
    .div-wrapper5 .frame-8 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper5 .frame-9 { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper5 .frame-10 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; border: 1px solid; border-color: #d7d7d7; }
    .div-wrapper5 .frame-11 { display: flex; align-items: center; gap: 16px; padding: 8px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .div-wrapper5 .frame-12 { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .div-wrapper5 .text-wrapper-9 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper5 .frame-13 { display: flex; align-items: flex-end; gap: 8px; position: relative; flex: 1; flex-grow: 1; }
    .div-wrapper5 .img { width: 24px; height: 24px; position: relative; object-fit: cover; }
    .div-wrapper5 .text-wrapper-10 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper5 .text-wrapper-11 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper5 .image-2 { width: 161px; height: 25px; position: relative; object-fit: cover; }
    .div-wrapper5 .nation { position: relative; width: 24px; height: 24px; border-radius: 99px; border: 1px solid; border-color: #e0e3e5; aspect-ratio: 1; background-size: cover; background-position: 50% 50%; }
    .div-wrapper5 .frame-14 { display: flex; align-items: center; justify-content: flex-end; gap: 4px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }

    .div-wrapper6 { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px 0px; position: relative; background-color: #f7f7f7; }
    .div-wrapper6 .frame { display: flex; flex-direction: column; width: 320px; align-items: flex-start; gap: 40px; position: relative; flex: 0 0 auto; }
    .div-wrapper6 .div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .frame-2 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .text-wrapper { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 28.0px; }
    .div-wrapper6 .frame-3 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; }
    .div-wrapper6 .element { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper6 .frame-4 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #4f6af1; border-radius: 16px; overflow: hidden; }
    .div-wrapper6 .rectangle { position: absolute; top: 0; left: 0; width: 320px; height: 1050px; mix-blend-mode: overlay; aspect-ratio: 1.5; }
    .div-wrapper6 .frame-5 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .div-wrapper6 .frame-6 { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #4f6af1; border-radius: 20px; aspect-ratio: 1; }
    .div-wrapper6 .text-wrapper-2 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.28px; line-height: 18.2px; white-space: nowrap; }
    .div-wrapper6 .image { position: relative; width: 152px; height: 28px; object-fit: cover; }
    .div-wrapper6 .text-wrapper-3 { position: relative; align-self: stretch; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #000000; font-size: 24px; text-align: center; letter-spacing: -0.07px; line-height: 33.6px; }
    .div-wrapper6 .text-wrapper-4 { position: relative; width: fit-content; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .div-wrapper6 .frame-7 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .frame-8 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .div-wrapper6 .frame-9 { display: flex; align-items: center; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } .div-wrapper .img { position: absolute; top: 6px; left: 54px; width: 186px; height: 28px; object-fit: cover; }
    .div-wrapper6 .frame-10 { gap: 2px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .div-2 { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .div-wrapper6 .frame-11 { display: flex; align-items: center; gap: 10px; padding: 0px 0px 0px 30px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .text-wrapper-5 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .div-wrapper6 .image-2 { position: absolute; top: 0; left: 0; width: 146px; height: 142px; object-fit: cover; }
    .div-wrapper6 .element-wrapper { display: flex; align-items: center; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .p { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; }
    .div-wrapper6 .frame-12 { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-radius: 16px; }
    .div-wrapper6 .image-3 { position: relative; width: 198px; height: 160px; object-fit: cover; }
    .div-wrapper6 .frame-13 { display: flex; align-items: center; gap: 16px; padding: 16px 32px 16px 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 99px; }
    .div-wrapper6 .frame-14 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; position: relative; flex: 1; flex-grow: 1; }
    .div-wrapper6 .frame-15 { display: inline-flex; align-items: center; gap: 16px; position: relative; flex: 0 0 auto; }
    .div-wrapper6 .frame-16 { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; border-radius: 99px; }
    .div-wrapper6 .image-4 { position: relative; width: 26px; height: 24px; object-fit: cover; }
    .div-wrapper6 .text-wrapper-6 { margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4d4d4d; font-size: 18px; letter-spacing: -0.05px; line-height: 25.2px; position: relative; width: fit-content; white-space: nowrap; }
    .div-wrapper6 .frame-17 { justify-content: center; gap: 8px; align-self: stretch; width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; position: relative; }
    .div-wrapper6 .element-2 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper6 .frame-18 { display: flex; flex-direction: column; width: 320px; align-items: flex-start; justify-content: center; position: relative; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .div-wrapper6 .frame-19 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #4f6af1; border-radius: 16px 16px 0px 0px; overflow: hidden; }
    .div-wrapper6 .rectangle-2 { position: absolute; top: 0; left: 0; width: 320px; height: 329px; mix-blend-mode: overlay; }
    .div-wrapper6 .list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .frame-20 { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; border-radius: 4px; opacity: 0.95; }
    .div-wrapper6 .text-wrapper-7 { position: relative; width: fit-content; font-family: "Noto Sans CJK KR-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 18px; letter-spacing: -0.36px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper6 .image-5 { position: relative; width: 28px; height: 28px; object-fit: cover; }
    .div-wrapper6 .rectangle-3 { position: relative; align-self: stretch; width: 100%; height: 1px; background-color: #fffffffa; opacity: 0.15; }
    .div-wrapper6 .frame-21 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .frame-22 { gap: 12px; background-color: #ffffff; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .text-wrapper-8 { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .div-wrapper6 .frame-23 { align-items: center; gap: 16px; padding: 4px 0px; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; display: flex; position: relative; }
    .div-wrapper6 .frame-24 { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .div-wrapper6 .text-wrapper-9 { font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.30px; line-height: 19.5px; position: relative; width: fit-content; white-space: nowrap; }
    .div-wrapper6 .frame-25 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; flex: 1; flex-grow: 1; display: flex; position: relative; }
    .div-wrapper6 .frame-26 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .rectangle-4 { position: relative; width: 1px; height: 12px; background-color: #cccccc; }
    .div-wrapper6 .text-wrapper-10 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4a52e1; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper6 .frame-27 { display: inline-flex; align-items: center; gap: 12px; position: relative; flex: 0 0 auto; }
    .div-wrapper6 .text-wrapper-11 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4a52e1; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper6 .rectangle-5 { position: relative; align-self: stretch; width: 100%; height: 1px; background-color: #e6e6e6fa; }
    .div-wrapper6 .frame-28 { display: flex; flex-direction: column; width: 320px; align-items: flex-start; gap: 24px; position: relative; flex: 0 0 auto; margin-bottom: -4.00px; }
    .div-wrapper6 .frame-29 { display: flex; align-items: center; gap: 16px; padding: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .div-wrapper6 .text-wrapper-12 { font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; position: relative; width: fit-content; white-space: nowrap; }
    .div-wrapper6 .frame-30 { gap: 4px; flex: 1; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; }
    .div-wrapper6 .text-wrapper-13 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #4a52e1; font-size: 16px; letter-spacing: -0.08px; line-height: 22.4px; white-space: nowrap; }
    .div-wrapper6 .frame-31 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; position: relative; flex: 1; flex-grow: 1; }
    .div-wrapper6 .frame-32 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper6 .element-3 { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; }
    .div-wrapper6 .span { letter-spacing: -0.02px; }
    .div-wrapper6 .text-wrapper-14 { font-size: 16px; letter-spacing: -0.01px; line-height: 22.4px; }
    .div-wrapper6 .frame-33 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; flex: 1; align-self: stretch; flex-grow: 1; }

    .div-wrapper7 { display: flex; flex-direction: column; width: 100%; align-items: flex-start; gap: 40px; padding: 0px 20px; position: relative; padding-top:40px;padding-bottom:80px;}
    .div-wrapper7 .frame { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper7 .rectangle { top: 103px; left: 45px; width: 228px; position: absolute; height: 12px; background-color: #b7ffdd; }
    .div-wrapper7 .div { top: 180px; left: 44px; width: 185px; position: absolute; height: 12px; background-color: #b7ffdd; }
    .div-wrapper7 .rectangle-2 { top: 221px; left: 50px; width: 166px; position: absolute; height: 12px; background-color: #b7ffdd; }
    .div-wrapper7 .frame-2 { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper7 .text-wrapper { position: relative; flex: 1; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 26.0px; }
    .div-wrapper7 .frame-3 { flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; width: 100%; flex: 0 0 auto; display: flex; position: relative; }
    .div-wrapper7 .desktop-mobile { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: transparent; font-size: 28px; letter-spacing: -0.28px; line-height: 39.2px; }
    .div-wrapper7 .span { color: #808080; letter-spacing: -1px; }
    .div-wrapper7 .text-wrapper-2 { color: #000000; letter-spacing: -1px; }
    .div-wrapper7 .frame-4 { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; }
    .div-wrapper7 .p { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Regular", Helvetica; font-weight: 400; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper7 .image { position: absolute; top: 202px; left: 0; width: 40px; height: 31px; object-fit: cover; }
    .div-wrapper7 .frame-5 { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper7 .text-wrapper-3 { position: relative; align-self: stretch; margin-top: -1.00px; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 20px; letter-spacing: -0.10px; line-height: 26.0px; }
    .div-wrapper7 .frame-6 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; position: relative; flex: 0 0 auto; }
    .div-wrapper7 .text-wrapper-4 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; text-align: right; letter-spacing: -0.07px; line-height: 21.0px; white-space: nowrap; }
    .div-wrapper7 .frame-7 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; border: 1px solid; border-color: #d7d7d7; }
    .div-wrapper7 .frame-8 { display: flex; align-items: center; gap: 16px; padding: 8px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 12px; }
    .div-wrapper7 .frame-9 { display: flex; flex-direction: column; width: 30px; height: 30px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #f0f0f0; border-radius: 4px; aspect-ratio: 1; opacity: 0.94; }
    .div-wrapper7 .text-wrapper-5 { position: relative; width: fit-content; font-family: "Pretendard-SemiBold", Helvetica; font-weight: 600; color: #000000; font-size: 15px; letter-spacing: -0.30px; line-height: 19.5px; white-space: nowrap; }
    .div-wrapper7 .text-wrapper-6 { position: relative; flex: 1; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; }
    .div-wrapper7 .text-wrapper-7 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper7 .frame-10 { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
    .div-wrapper7 .text-wrapper-8 { margin-top: -1.00px; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #08a452; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; position: relative; width: fit-content; white-space: nowrap; }
    .div-wrapper7 .text-wrapper-9 { font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #808080; font-size: 15px; letter-spacing: -0.07px; line-height: 21.0px; position: relative; width: fit-content; white-space: nowrap; }
    .div-wrapper7 .frame-11 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper7 .frame-12 { align-items: flex-end; gap: 8px; flex: 1; flex-grow: 1; display: flex; position: relative; }
    .div-wrapper7 .img { position: relative; width: 24px; height: 24px; object-fit: cover; }
    .div-wrapper7 .text-wrapper-10 { position: relative; width: fit-content; margin-top: -1.00px; font-family: "Pretendard-Medium", Helvetica; font-weight: 500; color: #000000; font-size: 18px; letter-spacing: -0.09px; line-height: 25.2px; white-space: nowrap; }
    .div-wrapper7 .nation { position: relative; width: 24px; height: 24px; background-color: #ff0000; border-radius: 99px; overflow: hidden; border: 1px solid; border-color: #e6e6e6; aspect-ratio: 1; }
    .div-wrapper7 .image-2 { position: absolute; top: 0; left: 0; width: 24px; height: 24px; object-fit: cover; }
    .div-wrapper7 .frame-13 { display: flex; align-items: flex-end; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; }
    .div-wrapper7 .frame-14 { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; border-radius: 16px; }
    .div-wrapper7 .image-3 { position: relative; width: 242px; height: 160px; object-fit: cover;}
    .div-wrapper7 .frame-15 { display: flex; align-items: center; gap: 16px; padding: 12px 16px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #f7f7f7; border-radius: 99px; }
    .div-wrapper7 .frame-16 { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: #10c164; border-radius: 20px; aspect-ratio: 1; }
    .div-wrapper7 .text-wrapper-11 { position: relative; width: fit-content; font-family: "Pretendard-Bold", Helvetica; font-weight: 700; color: #ffffff; font-size: 14px; letter-spacing: -0.28px; line-height: 18.2px; white-space: nowrap; }
}

.heartimg {
    display: none;
    transform-origin: center center;
}