@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

body {
    margin: 0;
    padding: 0;

}

#sub04_11 {
    * {
        font-family: "Pretendard Variable";
        box-sizing: border-box;
    }


    .div-1 {
        background: url(/include/images/sub04_11_1.png) lightgray 50% / cover no-repeat;
        padding: 120px 60px;
        height: calc(100vh - 140px);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;

        > div:nth-child(1) {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-24, 24px);

            > div:nth-child(1) {
                color: var(--Tgreen-300, #00ACA3);
                text-align: center;

                /* pc/Body1 */
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 30px; /* 166.667% */
            }

            > div:nth-child(2) {
                color: var(--Black, #101010);
                text-align: center;

                /* pc/H1 */
                font-size: 48px;
                font-style: normal;
                font-weight: 700;
                line-height: 72px; /* 150% */
            }
        }

        > div:nth-child(2) {
            display: flex;
            width: 420px;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-12, 12px);

            > button {
                display: flex;
                height: 56px;
                min-height: 56px;
                max-height: 56px;
                padding: 0 var(--space-16, 16px);
                justify-content: center;
                align-items: center;
                gap: var(--space-8, 8px);
                align-self: stretch;

                border-radius: 50px;

                /* pc/Body1 */
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 30px; /* 166.667% */

                border: 0;

                &:nth-child(1) {
                    background: var(--Tgreen-300, #00ACA3);
                    color: var(--white, #FFF);
                }

                &:nth-child(2) {
                    border: 1px solid var(--Tgreen-300, #00ACA3);
                    background: var(--Tgreen-100, #E0F6F5);
                    color: var(--Tgreen-300, #00ACA3);
                }
            }
        }
    }

    .div-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;

        > div:nth-child(1) {
            display: flex;
            max-width: 1320px;
            padding: var(--space-20, 20px) 60px var(--space-16, 16px) 60px;
            align-items: center;
            gap: var(--space-8, 8px);
            width: 100%;
            align-self: center;

            > div {
                cursor: pointer;
                color: var(--Gray-400, #9D9D9D);

                /* pc/Body1 */
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 30px; /* 166.667% */
            }
            >svg {

                cursor: pointer;
            }
        }

        > div:nth-child(2) {

            display: flex;
            max-width: 1320px;
            padding: 0 60px var(--space-32, 32px) 60px;
            align-items: flex-start;
            gap: var(--space-40, 40px);
            align-self: center;
            width: 100%;

            > img {
                width: 460px;
                border-radius: var(--space-8, 8px);
            }

            > div {
                display: flex;
                flex-direction: column;

                > div:nth-child(1) {
                    display: flex;
                    padding-bottom: var(--space-40, 40px);
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--space-70, 70px);
                    align-self: stretch;

                    flex: 1;

                    > div:nth-child(1) {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--space-20, 20px);
                        align-self: stretch;

                        > div:nth-child(1) {
                            color: var(--Black, #101010);

                            /* pc/H3 */
                            font-size: 28px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 42px; /* 150% */

                            > span {
                                color: var(--Tgreen-300, #00ACA3);

                                /* pc/H3 */
                                font-size: 28px;
                                font-style: normal;
                                font-weight: 700;
                                line-height: 42px;
                            }
                        }

                        > div:nth-child(2) {
                            cursor:pointer;
                            display: flex;
                            height: 56px;
                            min-height: 56px;
                            max-height: 56px;
                            padding-left: var(--Space-20, 20px);
                            padding-right: 8px;
                            align-items: center;
                            gap: var(--Space-8, 8px);
                            align-self: stretch;
                            justify-content: space-between;

                            border-radius: 50px;
                            border: 1px solid var(--Gray-200, #D9D9D9);
                            background: var(--white, #FFF);

                            > div:nth-child(1) {
                                color: var(--Gray-400, #9D9D9D);

                                /* pc/Body1 */
                                font-size: 18px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 30px; /* 166.667% */
                            }

                            &.active > div:nth-child(1) {
                                color: var(--Gray-500, #454545);

                                /* pc/Body1 */
                                font-family: "Pretendard Variable";
                                font-size: 18px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 30px; /* 166.667% */
                            }

                            > svg {
                                cursor: pointer;

                                &.active {
                                    rotate: 180deg;

                                    > rect {
                                        fill: var(--Gray-500, #454545);
                                    }

                                    > g > path {
                                        fill: #fff;
                                    }
                                }
                            }

                            position: relative;

                            > div:nth-child(3) {
                                z-index: 1000;
                                display: none;
                                flex-direction: column;

                                overflow: scroll;

                                max-height: 268px;
                                padding: 8px;
                                align-items: flex-start;

                                position: absolute;
                                right: 0;
                                top: 64px;
                                left: 0;

                                border-radius: var(--Space-8, 8px);
                                border: 1px solid var(--Gray-200, #D9D9D9);
                                background: var(--white, #FFF);


                                > div {
                                    cursor: pointer;
                                    display: flex;

                                    height: 52px;
                                    padding: 0 var(--Space-12, 12px);
                                    align-items: center;
                                    gap: 10px;
                                    align-self: stretch;

                                    color: var(--Gray-500, #454545);

                                    /* pc/Body2 */
                                    font-family: "Pretendard Variable";
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 24px; /* 150% */

                                    &.active {
                                        border-radius: var(--Space-4, 4px);
                                        background: var(--Gray-100, #F5F5F6);
                                    }
                                }
                            }

                            @keyframes fadeIn {
                                from {
                                    opacity: 0;
                                    transform: translateY(-10px);
                                }
                                to {
                                    opacity: 1;
                                    transform: translateY(0);
                                }
                            }
                        }
                    }

                    > div:nth-child(2) {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--space-20, 20px);
                        align-self: stretch;

                        > div:nth-child(1) {
                            display: flex;
                            width: 406px;
                            flex-direction: column;
                            align-items: flex-start;
                            gap: var(--space-8, 8px);

                            > div:nth-child(1) {
                                color: var(--Black, #101010);

                                /* pc/H3 */
                                font-size: 28px;
                                font-style: normal;
                                font-weight: 700;
                                line-height: 42px; /* 150% */

                                > span {
                                    color: var(--Tgreen-300, #00ACA3);

                                    /* pc/H3 */
                                    font-size: 28px;
                                    font-style: normal;
                                    font-weight: 700;
                                    line-height: 42px;
                                }
                            }

                            > div:nth-child(2) {
                                color: var(--Gray-500, #454545);

                                /* pc/Body2 */
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 24px; /* 150% */
                            }
                        }

                        > div:nth-child(2) {
                            position: relative;

                            display: flex;
                            padding: var(--space-12, 12px) var(--space-16, 16px);
                            justify-content: center;
                            align-items: center;
                            gap: 10px;
                            align-self: stretch;

                            border-radius: 50px;
                            background: var(--Tgreen-100, #E0F6F5);

                            color: var(--Tgreen-300, #00ACA3);

                            /* pc/Body2 */
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: normal;

                            > svg {
                                position: absolute;
                                left: calc(50% - 9px);
                                bottom: -12px;
                            }
                        }

                        > textarea {
                            display: flex;
                            height: 200px;
                            min-height: 120px;
                            padding: var(--space-20, 20px);
                            align-items: flex-start;
                            gap: 10px;
                            align-self: stretch;

                            border-radius: var(--space-12, 12px);
                            border: 1px solid var(--Gray-200, #D9D9D9);
                            background: var(--white, #FFF);

                            resize: none;

                            color: var(--Gray-500, #454545);

                            /* pc/Body2 */
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 24px; /* 150% */

                            &::placeholder {
                                color: var(--Gray-400, #9D9D9D);

                                /* pc/Body2 */
                                font-size: 18px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: normal;
                            }
                        }
                    }

                    > div:nth-child(3) {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--space-20, 20px);
                        align-self: stretch;

                        > div:nth-child(1) {
                            color: var(--Black, #101010);

                            /* pc/H3 */
                            font-size: 28px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 42px; /* 150% */
                        }

                        > div:nth-child(2) {
                            display: flex;
                            align-items: center;
                            align-content: center;
                            gap: 28px var(--space-28, 28px);
                            align-self: stretch;
                            flex-wrap: wrap;

                            > div {
                                display: flex;
                                min-width: 336px;
                                align-items: center;
                                gap: var(--space-20, 20px);
                                flex: 1 0 0;

                                > img {
                                    display: flex;
                                    width: 109px;
                                    height: 109px;
                                    padding: 4.739px 0 3.554px 0;
                                    justify-content: center;
                                    align-items: center;
                                    aspect-ratio: 1/1;

                                    border-radius: 9.478px;
                                    background: var(--Gray-100, #F5F5F6);
                                }

                                > div:nth-child(2) {
                                    display: flex;
                                    flex-direction: column;

                                    > div:nth-child(1) {
                                        color: var(--Gray-500, #454545);

                                        /* pc/Body3 */
                                        font-size: 15px;
                                        font-style: normal;
                                        font-weight: 700;
                                        line-height: 22px; /* 146.667% */

                                        > span {
                                            color: var(--Tgreen-300, #00ACA3);

                                            /* pc/Body3 */
                                            font-size: 15px;
                                            font-style: normal;
                                            font-weight: 700;
                                            line-height: 22px;
                                        }
                                    }

                                    > div:nth-child(2) {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: flex-start;
                                        gap: var(--space-4, 4px);
                                        align-self: stretch;

                                        > div:nth-child(1) {
                                            color: var(--Black, #101010);

                                            /* pc/Body1 */
                                            font-size: 18px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 30px; /* 166.667% */

                                            > span {
                                                color: var(--Black, #101010);

                                                /* pc/Body1 */
                                                font-size: 18px;
                                                font-style: normal;
                                                font-weight: 700;
                                                line-height: 30px;
                                            }
                                        }

                                        > div:nth-child(2) {
                                            color: var(--Gray-400, #9D9D9D);
                                            font-size: 15px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 22px; /* 146.667% */
                                            letter-spacing: -0.75px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    > div:nth-child(4) {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--space-16, 16px);
                        align-self: stretch;

                        > div:nth-child(1) {


                            display: flex;
                            height: 48px;
                            padding: 0 var(--space-12, 12px);
                            justify-content: start;
                            align-items: center;
                            align-self: stretch;
                            gap: var(--Space-12, 12px);

                            border-bottom: 1px solid var(--Gray-200, #D9D9D9);
                            background: var(--Gray-100, #F5F5F6);

                            > svg > path {
                                display: none;
                            }

                            > div, > svg {
                                cursor: pointer;
                            }

                            > div {
                                color: var(--Gray-400, #9D9D9D);

                                /* m/Body2 */
                                font-size: 15px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 20px; /* 133.333% */
                            }

                            &.active {
                                > svg > path {
                                    display: block;
                                }

                                > div {
                                    color: var(--Gray-500, #454545);
                                }
                            }
                        }

                        > div:nth-child(2) {
                            display: flex;
                            padding: 0 var(--space-12, 12px);
                            flex-direction: column;
                            align-items: flex-start;
                            gap: var(--space-12, 12px);
                            align-self: stretch;

                            > div {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                justify-content: center;
                                gap: var(--space-12, 12px);
                                align-self: stretch;

                                > div:nth-child(1) {

                                    display: flex;
                                    align-items: center;
                                    gap: var(--Space-12, 12px);
                                    flex: 1 0 0;
                                    width: 100%;

                                    > div {
                                        color: var(--Gray-500, #9D9D9D);

                                        /* pc/Body2 */

                                        font-size: 16px;
                                        font-style: normal;
                                        font-weight: 500;
                                        line-height: 22px; /* 137.5% */

                                        > b {
                                            color: var(--Gray-500, #9D9D9D);

                                            /* pc/Body2 */

                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 700;
                                            line-height: 22px;
                                        }

                                        > span {
                                            color: var(--Tgreen-300, #9d9d9d);

                                            /* pc/Body2 */

                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 22px;
                                        }
                                    }

                                    > div, > svg {
                                        cursor: pointer;
                                    }

                                    > svg:nth-child(1) > path {
                                        display: none;
                                    }

                                    &.active {
                                        > svg:nth-child(1) > path {
                                            display: block;
                                        }

                                        > div, > div > b {
                                            color: var(--Gray-500, #454545);
                                        }

                                        > div > span {
                                            color: var(--Tgreen-300, #00ACA3);
                                        }

                                    }

                                    > svg:last-child {
                                        rotate: 180deg;

                                        &.active {
                                            rotate: 0deg;
                                        }
                                    }

                                }

                                > div:nth-child(2) {
                                    display: flex;
                                    padding: var(--space-20, 20px);
                                    flex-direction: column;
                                    align-items: center;
                                    gap: var(--space-12, 12px);
                                    align-self: stretch;

                                    border-radius: var(--space-8, 8px);
                                    background: var(--Gray-100, #F5F5F6);

                                    > ul {
                                        padding-left: 20px;
                                        margin: 0;

                                        > li {

                                            list-style: disc;
                                            color: var(--Gray-500, #454545);

                                            /* pc/Body3 */

                                            font-size: 15px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 22px; /* 146.667% */
                                        }
                                    }

                                    > div:nth-child(1) {
                                        color: var(--Gray-500, #454545);

                                        /* pc/Body3 */
                                        font-size: 15px;
                                        font-style: normal;
                                        font-weight: 500;
                                        line-height: 20px; /* 133.333% */
                                    }

                                    > div:nth-child(2) {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: flex-start;
                                        gap: var(--space-8, 8px);
                                        align-self: stretch;

                                        > div {
                                            display: flex;
                                            align-items: center;
                                            gap: var(--space-20, 20px);
                                            align-self: stretch;

                                            > div:nth-child(1) {
                                                min-width: 56px;
                                                color: #000;

                                                /* pc/Body3 */
                                                font-size: 15px;
                                                font-style: normal;
                                                font-weight: 700;
                                                line-height: 20px; /* 133.333% */
                                            }

                                            > div:nth-child(2) {
                                                color: var(--Gray-500, #454545);

                                                /* pc/Body3 */
                                                font-size: 15px;
                                                font-style: normal;
                                                font-weight: 500;
                                                line-height: 20px; /* 133.333% */
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                > div:nth-child(2) {
                    z-index: 1001;
                    display: flex;
                    padding-top: var(--space-36, 36px);
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 10px;
                    align-self: stretch;

                    border-top: 1px solid var(--Gray-100, #F5F5F6);
                    background: rgba(255, 255, 255, 0.80);
                    backdrop-filter: blur(2px);

                    > button {
                        border: 0;

                        display: flex;
                        height: 56px;
                        padding: 0 var(--Space-12, 12px);
                        justify-content: center;
                        align-items: center;
                        gap: var(--Space-8, 8px);
                        align-self: stretch;

                        border-radius: 50px;


                        background: var(--Gray-100, #F5F5F6);
                        color: var(--Gray-300, #C1C1C1);
                        text-align: center;

                        /* pc/Body1 */
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: normal;


                        &.active {
                            background: var(--gradient1, linear-gradient(90deg, var(--Tgreen-300, #00ACA3) 25.5%, #0786BC 100.83%));

                            color: var(--White, #FFF);

                            /* pc/Body1 */
                            font-size: 20px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: normal;
                        }
                    }
                }


            }
        }
    }

    .div-3 {
        display: flex;
        width: 800px;
        height: 770px;
        max-width: 800px;
        padding: var(--space-20, 20px) 0 var(--space-120, 120px) 0;
        flex-direction: column;
        align-items: flex-start;
        justify-self: center;

        > div:nth-child(1) {
            display: flex;
            max-width: 1320px;
            padding-bottom: 16px;
            align-items: center;
            gap: var(--space-8, 8px);
            width: 100%;
            align-self: center;

            > div {
                color: var(--Gray-400, #9D9D9D);

                /* pc/Body1 */
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 30px; /* 166.667% */
                cursor: pointer;
            }
            >svg {

                cursor: pointer;
            }
        }

        > div:nth-child(2) {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--space-20, 20px);
            align-self: stretch;
            >div {
                width: 100%;
            }
            >div >textarea {
                flex: 1;
                display: flex;
                height: 376px;
                min-height: 120px;
                padding: var(--space-20, 20px);
                align-items: flex-start;
                gap: 10px;
                align-self: stretch;

                border-radius: var(--space-12, 12px);
                border: 1px solid var(--Gray-500, #454545);
                background: var(--Gray-100, #F5F5F6);

                resize: none;

                &:read-only,
                &:disabled {
                    color: var(--Gray-500, #454545);
                    -webkit-text-fill-color: var(--Gray-500, #454545);
                    opacity: 1;

                    /* pc/Body2 */
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 24px; /* 150% */

                    border-radius: var(--space-12, 12px);
                    border: 1px solid var(--Gray-200, #D9D9D9);
                    background: var(--white, #FFF);
                }


                &::placeholder {
                    color: var(--Gray-400, #9D9D9D);
                }
            }

            >button {
                border: 0;
                display: flex;
                width: 200px;
                height: 56px;
                min-height: 56px;
                max-height: 56px;
                padding: 0 var(--space-16, 16px);
                justify-content: center;
                align-items: center;
                gap: var(--space-8, 8px);
                border-radius: 50px;
                background: var(--Gray-500, #454545);

                color: var(--white, #FFF);

                /* pc/Body1 */
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 30px; /* 166.667% */
            }
            >div:first-child {
                position: relative;

                display: flex;
                padding: var(--space-12, 12px) var(--space-16, 16px);
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;

                border-radius: 50px;
                background: var(--Tgreen-100, #E0F6F5);

                color: var(--Tgreen-300, #00ACA3);

                /* pc/Body2 */
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;

                > svg {
                    position: absolute;
                    left: calc(50% - 9px);
                    bottom: -12px;
                }
            }
            >div:last-child {
                display: flex;
                align-items: flex-start;
                gap: var(--space-12, 12px);
                justify-content: center;
                >button {
                    border:0;

                    display: flex;
                    width: 200px;
                    height: 56px;
                    min-height: 56px;
                    max-height: 56px;
                    padding: 0 var(--space-16, 16px);
                    justify-content: center;
                    align-items: center;
                    gap: var(--space-8, 8px);

                    border-radius: 50px;
                    background: var(--Gray-100, #F5F5F6);
                    color: var(--Gray-500, #454545);

                    /* pc/Body1 */
                    font-family: "Pretendard Variable";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 30px; /* 166.667% */
                    &:disabled {
                        color: var(--Gray-300, #C1C1C1);

                        /* pc/Body1 */
                        font-family: "Pretendard Variable";
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 30px; /* 166.667% */
                    }
                    &.active {
                        border-radius: 50px;
                        background: var(--Tgreen-300, #00ACA3);
                        color: var(--white, #FFF);

                    }
                }
            }
        }
        >div:nth-child(3) {
            display: flex;
            padding: 10px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;

            position: fixed;
            z-index: 1;
            inset: 0;

            background: rgba(0, 0, 0, 0.50);

            >div {
                display: flex;
                min-width: 576px;
                max-width: 576px;
                padding: var(--Space-32, 32px);
                flex-direction: column;
                align-items: center;
                gap: var(--Space-16, 16px);
                align-self: center;

                border-radius: var(--Space-12, 12px);
                background: var(--White, #FFF);

                >div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: var(--Space-12, 12px);
                    align-self: stretch;

                    >div:nth-child(1) {
                        color: var(--Black, #101010);
                        text-align: center;

                        /* pc/Body1 */
                        font-family: "Pretendard Variable";
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 25px; /* 138.889% */
                    }
                    .div:nth-child(2) {
                        color: var(--Gray-500, #454545);
                        text-align: center;

                        /* pc/Body2 */
                        font-family: "Pretendard Variable";
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 22px; /* 137.5% */
                    }
                }
            }
        }

    }

    .div-4 {
        background: url(/include/images/sub04_11_1.png) lightgray 50% / cover no-repeat;
        padding: 120px 60px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;

        > div:nth-child(1) {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-24, 24px);

            > div:nth-child(1) {
                color: var(--Black, #101010);
                text-align: center;

                /* pc/H1 */
                font-family: "Pretendard Variable";
                font-size: 48px;
                font-style: normal;
                font-weight: 700;
                line-height: 72px; /* 150% */
            }

            >div:nth-child(2) {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--space-8, 8px);

                >div:nth-child(1) {
                    color: var(--Gray-500, #454545);
                    text-align: center;

                    /* pc/Body1 */
                    font-family: "Pretendard Variable";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 30px; /* 166.667% */
                }
                ol {
                    padding-left: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    margin: 0;

                    li {
                        color: var(--Gray-500, #454545);

                        /* m/Body2 */
                        font-family: "Pretendard Variable";
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 30px; /* 150% */
                    }

                }
            }
        }

        > div:nth-child(2) {
            display: flex;
            width: 420px;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-12, 12px);

            > button {
                display: flex;
                height: 56px;
                min-height: 56px;
                max-height: 56px;
                padding: 0 var(--space-16, 16px);
                justify-content: center;
                align-items: center;
                gap: var(--space-8, 8px);
                align-self: stretch;

                border-radius: 50px;

                /* pc/Body1 */
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 30px; /* 166.667% */

                border: 0;

                &:nth-child(1) {
                    background: var(--Tgreen-300, #00ACA3);
                    color: var(--white, #FFF);
                }

                &:nth-child(2) {
                    border: 1px solid var(--Tgreen-300, #00ACA3);
                    background: var(--Tgreen-100, #E0F6F5);
                    color: var(--Tgreen-300, #00ACA3);
                }
            }
        }


    }
    .pc-only {
        display: block;
    }
    .mobile-only {
        display: none;
    }

    .alert-1.blink,
    .alert-2.blink,
    .blink {
        animation: blinkEffect 1s ease-in-out 3 !important;
        transition: none !important;
    }

    @keyframes blinkEffect {
        0% {
            opacity: 1 !important;
        }
        50% {
            opacity: 0 !important;
        }
        100% {
            opacity: 1 !important;
        }
    }


    @media only screen and (max-width: 1024px) {
        .div-1 {
            background: url(/include/images/sub04_11_2.png) lightgray 50% / cover no-repeat;

            padding: 0 var(--space-16, 16px);
            height: calc(100vh - 98px);

            gap: 58px;

            > div:nth-child(1) {
                gap: 8px;

                > div:nth-child(1) {
                    font-size: 12px;
                    line-height: 20px; /* 166.667% */
                }

                > div:nth-child(2) {
                    font-size: 28px;
                    line-height: 42px; /* 150% */
                }
            }

            > div:nth-child(2) {
                width: 280px;
                gap: 8px;

                > button {
                    height: 45px;
                    min-height: 45px;
                    max-height: 45px;
                    padding: 0 var(--Space-12, 12px);
                    border-radius: 50px;

                    font-size: 16px;
                    line-height: 24px; /* 150% */
                }
            }
        }

        .div-2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: stretch;

            > div:nth-child(1) {
                display: flex;
                padding: var(--space-12, 12px) var(--space-20, 20px) 0 var(--space-16, 16px);
                align-items: center;
                gap: var(--space-8, 8px);
                align-self: stretch;
            }

            > div:nth-child(2) {
                display: flex;
                padding: var(--space-12, 12px) 16px 0;
                flex-direction: column;
                align-items: center;
                gap: var(--space-20, 20px);
                align-self: stretch;

                > img {
                    width: 100%;
                }

                > div {
                    display: flex;
                    flex-direction: column;

                    > div:nth-child(1) {
                        padding-bottom: 0;
                        gap: var(--space-58, 58px);

                        > div:nth-child(1) {
                            gap: var(--space-12, 12px);


                            > div:nth-child(1) {
                                font-size: 20px;
                                line-height: 30px;

                                > span {
                                    font-size: 20px;
                                    line-height: 30px;
                                }
                            }

                            > div:nth-child(2) {
                                height: 45px;
                                min-height: 45px;
                                max-height: 45px;
                                padding-left: 16px;
                                padding-right: 8px;
                                align-items: center;
                                cursor: pointer;

                                > div:nth-child(1) {
                                    font-size: 16px;
                                    line-height: 24px; /* 166.667% */
                                }

                                &.active > div:nth-child(1) {
                                    font-size: 16px;
                                    line-height: 24px; /* 166.667% */
                                }

                                > svg {
                                    width: 32px;
                                    height: 32px;
                                }


                                > div:nth-child(3) {
                                    max-height: 233px;
                                    top: 53px;
                                    border-radius: var(--Space-8, 8px);
                                    border: 1px solid var(--Gray-200, #D9D9D9);
                                    background: var(--white, #FFF);

                                    > div {
                                        height: 45px;
                                        font-size: 14px;
                                        line-height: 22px; /* 150% */
                                    }
                                }
                            }
                        }

                        > div:nth-child(2) {
                            gap: 12px;

                            > div:nth-child(1) {
                                width: 100%;

                                > div:nth-child(1) {
                                    font-size: 20px;
                                    line-height: 30px; /* 150% */

                                    > span {
                                        font-size: 20px;
                                        line-height: 30px;
                                    }
                                }

                                > div:nth-child(2) {
                                    font-size: 14px;
                                    line-height: 22px; /* 150% */
                                }
                            }

                            > div:nth-child(2) {
                                padding: var(--space-12, 12px) var(--space-20, 20px);

                                font-size: 14px;
                                line-height: 18px;
                                margin-bottom: 8px;

                            }

                            > textarea {

                                padding: var(--space-20, 16px);

                                /* pc/Body2 */
                                font-size: 15px;
                                line-height: 20px;

                                &::placeholder {
                                    font-size: 15px;
                                    line-height: 20px;
                                }
                            }
                        }

                        > div:nth-child(3) {
                            gap: var(--space-20, 12px);

                            > div:nth-child(1) {
                                font-size: 20px;
                                line-height: 30px; /* 150% */
                            }

                            > div:nth-child(2) {
                                gap: 12px;

                                > div {
                                    gap: 12px;

                                    > img {
                                        width: 92px;
                                        height: 92px;
                                    }

                                    > div:nth-child(2) {
                                        > div:nth-child(1) {
                                            /* pc/Body3 */
                                            font-size: 12px;
                                            line-height: 20px; /* 146.667% */

                                            > span {
                                                font-size: 12px;
                                                line-height: 20px;
                                            }
                                        }

                                        > div:nth-child(2) {

                                            > div:nth-child(1) {

                                                font-size: 16px;
                                                line-height: 24px; /* 166.667% */

                                                > span {
                                                    color: var(--Black, #101010);

                                                    /* pc/Body1 */
                                                    font-size: 16px;
                                                    line-height: 24px;
                                                }
                                            }

                                            > div:nth-child(2) {
                                                font-size: 12px;
                                                line-height: 20px; /* 146.667% */
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        > div:nth-child(4) {
                            margin: 0 -16px;

                            > div:nth-child(1) {
                                padding: 0 16px;
                            }

                            > div:nth-child(2) {

                                gap: 12px;
                                padding: 0 16px;

                                > div {


                                    > div:nth-child(1) {

                                        display: flex;
                                        align-items: center;
                                        gap: var(--Space-12, 12px);
                                        flex: 1 0 0;
                                        width: 100%;

                                        > div {
                                            color: var(--Gray-500, #9D9D9D);

                                            /* pc/Body2 */

                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 22px; /* 137.5% */

                                            > b {
                                                color: var(--Gray-500, #9D9D9D);

                                                /* pc/Body2 */

                                                font-size: 16px;
                                                font-style: normal;
                                                font-weight: 700;
                                                line-height: 22px;
                                            }

                                            > span {
                                                color: var(--Tgreen-300, #9d9d9d);

                                                /* pc/Body2 */

                                                font-size: 16px;
                                                font-style: normal;
                                                font-weight: 500;
                                                line-height: 22px;
                                            }
                                        }

                                        > div, > svg {
                                            cursor: pointer;
                                        }

                                        > svg:nth-child(1) > path {
                                            display: none;
                                        }

                                        &.active {
                                            > svg:nth-child(1) > path {
                                                display: block;
                                            }

                                            > div, > div > b {
                                                color: var(--Gray-500, #454545);
                                            }

                                            > div > span {
                                                color: var(--Tgreen-300, #00ACA3);
                                            }

                                        }

                                        > svg:last-child {
                                            width: 30px;
                                            height: 30px;

                                        }

                                    }

                                    > div:nth-child(2) {
                                        display: flex;
                                        padding: 16px;
                                        flex-direction: column;
                                        align-items: center;
                                        gap: var(--space-12, 12px);
                                        align-self: stretch;

                                        border-radius: var(--space-8, 8px);
                                        background: var(--Gray-100, #F5F5F6);

                                        > ul {
                                            padding-left: 20px;
                                            margin: 0;

                                            > li {
                                                list-style: disc;

                                                color: var(--Gray-500, #454545);

                                                /* pc/Body3 */

                                                font-size: 15px;
                                                font-style: normal;
                                                font-weight: 500;
                                                line-height: 22px; /* 146.667% */
                                            }
                                        }

                                        > div:nth-child(1) {
                                            color: var(--Gray-500, #454545);

                                            /* pc/Body3 */
                                            font-size: 15px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 20px; /* 133.333% */
                                        }

                                        > div:nth-child(2) {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: flex-start;
                                            gap: var(--space-8, 8px);
                                            align-self: stretch;

                                            > div {
                                                display: flex;
                                                align-items: center;
                                                gap: var(--space-20, 20px);
                                                align-self: stretch;

                                                > div:nth-child(1) {
                                                    min-width: 56px;
                                                    color: #000;

                                                    /* pc/Body3 */
                                                    font-size: 15px;
                                                    font-style: normal;
                                                    font-weight: 700;
                                                    line-height: 20px; /* 133.333% */
                                                }

                                                > div:nth-child(2) {
                                                    color: var(--Gray-500, #454545);

                                                    /* pc/Body3 */
                                                    font-size: 15px;
                                                    font-style: normal;
                                                    font-weight: 500;
                                                    line-height: 20px; /* 133.333% */
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    > div:nth-child(2) {
                        position: sticky;
                        margin: 20px -16px 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                        padding: var(--space-20, 20px) var(--space-16, 16px) var(--space-28, 28px) var(--space-16, 16px);


                        z-index: 1000;

                        > button {
                            height: 52px;
                            font-size: 18px;
                            font-weight: 700;


                            &.active {
                                font-size: 18px;
                                font-weight: 700;
                            }
                        }
                    }


                }
            }
        }

        .div-3 {
            display: flex;
            width: 100%;
            min-width: 100%;
            height: unset;
            max-width: 800px;
            padding: 12px 0 80px 0;
            flex-direction: column;
            align-items: flex-start;
            justify-self: center;

            > div:nth-child(1) {

                display: flex;

                padding: 0 16px 20px;
                align-items: center;
                gap: var(--space-8, 8px);
                width: 100%;
                align-self: center;

                > div {
                    font-size: 18px;
                    line-height: 27px; /* 166.667% */
                }
            }

            > div:nth-child(2) {
                padding: 0 16px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: var(--space-20, 20px);
                align-self: stretch;
                >div {
                    width: 100%;
                }
                >div > textarea {
                    flex: 1;
                    display: flex;
                    height: 339px;
                    min-height: unset;
                    padding: var(--space-20, 20px);
                    align-items: flex-start;
                    gap: 10px;
                    align-self: stretch;

                    border-radius: var(--space-12, 12px);
                    border: 1px solid var(--Gray-500, #454545);
                    background: var(--Gray-100, #F5F5F6);

                    resize: none;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 24px; /* 150% */

                    &:read-only {
                        color: var(--Gray-500, #454545);

                        /* pc/Body2 */
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 24px; /* 150% */

                        border-radius: var(--space-12, 12px);
                        border: 1px solid var(--Gray-200, #D9D9D9);
                        background: var(--white, #FFF);
                    }


                    &::placeholder {
                        color: var(--Gray-400, #9D9D9D);
                    }
                }

                >button {
                    width: 100%;
                    display: flex;
                    height: 45px;
                    min-height: 45px;
                    max-height: 45px;
                    padding: 0 var(--Space-12, 12px);
                    justify-content: center;
                    align-items: center;
                    gap: var(--Space-8, 8px);
                    align-self: stretch;

                    font-size: 16px;
                    line-height: 24px; /* 166.667% */
                }
                >div:first-child {
                    font-size: 14px;
                    line-height: 18px;
                }
                >div:last-child {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    gap: var(--space-12, 12px);
                    flex-wrap: wrap;
                    >button {
                        flex: 0 0 100%;
                        width: 100%;
                        height: 45px;
                        min-height: 45px;
                        max-height: 45px;
                        padding: 0 var(--Space-12, 12px);

                        font-size: 16px;
                        line-height: 24px; /* 166.667% */
                        &:disabled {
                            font-size: 16px;
                            line-height: 24px; /* 166.667% */
                        }
                    }
                    >button:first-child {
order: 2;
                    }
                    >button:last-child {
                    }
                }
            }
            >div:nth-child(3) {
                display: flex;
                padding: 16px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10px;

                position: fixed;
                inset: 0;

                background: rgba(0, 0, 0, 0.50);

                >div {
                    width: 100%;
                    min-width: 100%;

                    >div {
                        gap: 8px;

                        >div:nth-child(1) {
                            font-size: 16px;
                            line-height: 24px; /* 138.889% */
                        }
                        .div:nth-child(2) {
                            font-size: 14px;
                            line-height: 22px; /* 137.5% */
                        }
                    }
                }
            }

        }

        .div-4 {
            background: url(/include/images/sub04_11_2.png) lightgray 50% / cover no-repeat;

            padding: 0 var(--space-16, 16px);
            height: calc(100vh - 98px);

            gap: 20px;

            > div:nth-child(1) {
                gap: 16px;

                > div:nth-child(1) {
                    font-size: 28px;
                    line-height: 42px; /* 150% */
                }
                >div:nth-child(2) {
                    >div:nth-child(1) {
                        font-size: 16px;
                        line-height: 24px; /* 150% */
                    }
                    ol {
                        padding-left: 20px;
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        margin: 0;

                        li {
                            font-size: 16px;
                            line-height: 24px; /* 150% */
                        }

                    }
                }
            }

            > div:nth-child(2) {
                width: 280px;
                gap: 8px;

                > button {
                    height: 45px;
                    min-height: 45px;
                    max-height: 45px;
                    padding: 0 var(--Space-12, 12px);
                    border-radius: 50px;

                    font-size: 16px;
                    line-height: 24px; /* 150% */
                }
            }
        }

        .pc-only {
            display: none;
        }
        .mobile-only {
            display: block;
        }
    }
}