html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
figure,
figcaption {
    margin: 0;
    padding: 0
}

#s3 {
    overflow: hidden;

    .time_8s {
        transition: all 0.8s ease;
    }

    .active .translateY {
        transform: translateY(0);
        opacity: 1;
    }

    .translateY {
        transform: translateY(3.90625vw);
        opacity: 0;
    }

    .active .translate_X,
    .active .translateX {
        transform: translateX(0);
        opacity: 1;
    }

    .translate_X {
        transform: translateX(-3.90625vw);
        opacity: 0;
    }

    .translateX {
        transform: translateX(3.90625vw);
        opacity: 0;
    }

    .section {
        position: relative;
    }

    img {
        width: 100%;
    }
}

@media screen and (min-width: 1080px) {
    .mob {
        display: none;
    }

    #s3 {
        .title {
            font-family: Semibold;
            font-size: 3.5156vw;
            font-weight: 700;
            line-height: 100%;

        }

        .subtitle {
            font-size: 2.5vw;
            font-weight: 600;
            line-height: 100%;
        }

        .text {
            font-size: 1.4844vw;
            font-weight: 400;
            line-height: 100%;
        }

        .screen1 {
            .top {
                position: absolute;
                left: 50.0781vw;
                top: 32.5vw;
                display: flex;
                flex-direction: column;
                gap: 1.1719vw;

                img {
                    width: 45.1719vw;
                    height: 6.2578vw;
                }

                p {
                    font-size: 4.6875vw;
                    font-weight: 400;
                    line-height: 100%;
                    color: #FFFFFF;
                }
            }

            .list {
                position: absolute;
                left: 49.9609vw;
                top: 47.1484vw;
                display: flex;
                flex-direction: row;
                gap: 2.5453vw;

                p {
                    font-size: 1.3281vw;
                    font-weight: 400;
                    line-height: 100%;
                    color: #FFFFFF;
                }

                :nth-child(2) {
                    position: relative;
                }

                :nth-child(2)::before {
                    content: '';
                    position: absolute;
                    height: .9375vw;
                    width: .0781vw;
                    background-color: #FFFFFF;
                    left: -1.2726vw;
                    top: .332vw;
                }

                :nth-child(2)::after {
                    content: '';
                    position: absolute;
                    height: .9375vw;
                    width: .0781vw;
                    background-color: #FFFFFF;
                    right: -1.2726vw;
                    top: .332vw;
                }
            }
        }

        .screen2 {
            padding: 14.0625vw 0 14.0625vw;

            p {
                text-align: center;
            }

            .top {
                padding-bottom: 7.8125vw;

                .subtitle {
                    margin-top: 5.2344vw;
                }

                .text {
                    margin-top: 1.5625vw;
                }

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 11.4844vw;
                    height: .5469vw;
                    background-color: #000000;
                    top: 5.2813vw;
                    left: 44.2578vw;
                }
            }

            .bottom {
                display: flex;
                justify-content: center;

                img {
                    width: 92.3047vw;
                }
            }
        }

        .screen3 {
            p {
                text-align: center;
            }

            .top {
                padding-bottom: 7.8125vw;

                .subtitle {
                    margin-top: 5.2344vw;
                }

                .text {
                    margin-top: 1.5625vw;
                }

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 11.4844vw;
                    height: .5469vw;
                    background-color: #000000;
                    top: 5.2813vw;
                    left: 44.2578vw;
                }
            }

            .bottom {
                display: flex;
                justify-content: center;

                img {
                    width: 44.4922vw;
                }
            }

            .tips {
                color: #333;
                font-weight: 400;
                font-size: .703125vw;
                text-align: right !important;
                margin-top: 2vw;
                padding-right: 5vw;
            }
        }

        .screen4 {
            padding: 14.0625vw 0 14.0625vw;

            p {
                text-align: center;
            }

            .top {
                padding-bottom: 3.9063vw;

                .subtitle {
                    margin-top: 5.2344vw;
                }

                .text {
                    margin-top: 1.5625vw;
                }

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 11.4844vw;
                    height: .5469vw;
                    background-color: #000000;
                    top: 5.2813vw;
                    left: 44.2578vw;
                }
            }

            .bottom {
                display: flex;
                flex-direction: row;
                gap: .9375vw;
                justify-content: center;

                .left {
                    img {
                        width: 36.9531vw;
                    }
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    gap: .9375vw;

                    img {
                        width: 40.2344vw;
                    }
                }
            }
        }

        .screen5 {
            p {
                text-align: center;
            }

            .top {
                padding-bottom: 3.125vw;

                .subtitle {
                    margin-top: 5.2344vw;
                }

                .text {
                    margin-top: 1.5625vw;
                }

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 11.4844vw;
                    height: .5469vw;
                    background-color: #000000;
                    top: 5.2813vw;
                    left: 44.2578vw;
                }
            }
        }

        .screen6 {
            padding: 16.4063vw 0 14.0625vw;

            p {
                color: #FFFFFF;
            }

            .top {
                position: absolute;
                top: 33.3203vw;
                left: 10.9375vw;
                z-index: 3;

                .subtitle {
                    margin-top: 5.2344vw;
                }

                .text {
                    margin-top: 1.5625vw;
                }

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 11.4844vw;
                    height: .5469vw;
                    background-color: #FFFFFF;
                    top: 5.2813vw;
                }
            }
        }

        .screen7 {
            p {
                text-align: center;
            }

            .top {
                padding-bottom: 7.8125vw;

                .subtitle {
                    margin-top: 5.2344vw;
                }

                .text {
                    margin-top: 1.5625vw;
                }

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 11.4844vw;
                    height: .5469vw;
                    background-color: #000000;
                    top: 5.2813vw;
                    left: 44.2578vw;
                }
            }

            .bottom {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;

                .i1 {
                    width: 44.9219vw;
                    margin: auto;
                }

                .i2 {
                    width: 11.25vw;
                    margin: auto;
                }
            }
        }

        .screen8 {
            padding: 18.0469vw 0 6.25vw;

            p {
                text-align: center;
            }

            .text {
                padding: 1.5625vw 0 3.5156vw;
            }

            .bottom {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;

                .i1 {
                    width: 56.1719vw;
                    margin: auto;
                }

                .i2 {
                    width: 28.3203vw;
                    margin: auto;
                }
            }
        }
    }
}

@media screen and (max-width: 1080px) {
    #s3 {
        .pc {
            display: none;
        }

        .title {
            font-family: Semibold;
            font-size: 5.5556vw;
            font-weight: 700;
            line-height: 100%;
        }

        .subtitle {
            font-size: 3.7037vw;
            font-weight: 600;
            line-height: 100%;
        }

        .text {
            font-size: 2.5926vw;
            font-weight: 400;
            line-height: 100%;
            padding: 5.5556vw 5.5556vw 0 5.5556vw;
        }

        .screen1 {
            .top {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 7.4074vw 0 0 0;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;

                img {
                    width: 82.0556vw;

                }

                p {
                    font-size: 7.4074vw;
                    font-weight: 400;
                    line-height: 100%;
                    color: #FFFFFF;
                }
            }

            .list {
                display: flex;
                flex-direction: row;
                justify-content: center;
                padding: 27.7778vw 0 0 0;
                gap: 3.7037vw;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;

                p {
                    color: #FFFFFF;
                }

                :nth-child(2) {
                    position: relative;
                }

                :nth-child(2)::before {
                    content: '';
                    position: absolute;
                    height: 2.2222vw;
                    width: .1852vw;
                    background-color: #FFFFFF;
                    left: -1.8726vw;
                    top: 1.332vw;
                }

                :nth-child(2)::after {
                    content: '';
                    position: absolute;
                    height: 2.2222vw;
                    width: .1852vw;
                    background-color: #FFFFFF;
                    right: -1.8726vw;
                    top: 1.332vw;
                }
            }
        }

        .screen2 {
            padding: 22.2222vw 0 29.6296vw;

            .top {
                display: flex;
                flex-direction: column;
                gap: 6.4815vw;
                padding: 0 0 11.1111vw 5.5556vw;

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 24.0741vw;
                    height: .9259vw;
                    background-color: #000000;
                    top: 7.8519vw;
                }
            }
        }

        .screen3 {
            .top {
                display: flex;
                flex-direction: column;
                gap: 6.4815vw;
                padding: 0 0 11.1111vw 5.5556vw;

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 24.0741vw;
                    height: .9259vw;
                    background-color: #000000;
                    top: 13.4519vw;
                }
            }

            .bottom {
                img {
                    width: 88.8889vw;
                    margin-left: 5.5556vw;
                }
            }

            .tips {
                color: #333;
                font-weight: 400;
                font-size: 1.296vw;
                text-align: right !important;
                margin-top: 2vw;
                padding-right: 6vw;
            }
        }

        .screen4 {
            padding: 29.6296vw 0 29.6296vw;

            .top {
                display: flex;
                flex-direction: column;
                gap: 6.4815vw;
                padding: 0 0 11.1111vw 5.5556vw;

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 24.0741vw;
                    height: .9259vw;
                    background-color: #000000;
                    top: 7.8519vw;
                }
            }

            .bottom {
                display: flex;
                flex-direction: column;
                gap: 2.2222vw;
                align-items: center;

                img {
                    width: 88.8889vw;
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    gap: 2.2222vw;
                    justify-content: center;
                }
            }
        }

        .screen5 {
            .top {
                display: flex;
                flex-direction: column;
                gap: 6.4815vw;
                padding: 0 0 11.1111vw 5.5556vw;

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 24.0741vw;
                    height: .9259vw;
                    background-color: #000000;
                    top: 7.8519vw;
                }
            }
        }

        .screen6 {
            padding: 29.6296vw 0 29.6296vw;

            .top {
                display: flex;
                flex-direction: column;
                gap: 6.4815vw;
                padding: 0 0 11.1111vw 5.5556vw;

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 24.0741vw;
                    height: .9259vw;
                    background-color: #000000;
                    top: 7.8519vw;
                }
            }
        }

        .screen7 {
            .top {
                display: flex;
                flex-direction: column;
                gap: 6.8519vw;
                padding: 0 0 11.1111vw 5.5556vw;

                .title {
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 24.0741vw;
                    height: .9259vw;
                    background-color: #000000;
                    top: 13.4519vw;
                }
            }

            .bottom {
                display: flex;
                flex-direction: column;
                gap: 1.8519vw;
                align-items: center;

                .i1 {
                    width: 88.838vw;
                }

                .i2 {
                    width: 26.6667vw;
                }
            }
        }

        .screen8 {
            padding: 25.9259vw 0 11.1111vw;

            .top {
                padding: 0 0 5.5556vw 5.5556vw;
            }

            .bottom {
                display: flex;
                flex-direction: column;
                gap: 2.2222vw;
                align-items: center;

                .i1 {
                    width: 88.8889vw;
                }

                .i2 {
                    width: 67.1296vw;
                }
            }
        }
    }
}