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
}

#l101q {
    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) {
    #l101q {
        .mob {
            display: none !important;
        }

        .title {
            font-size: 3.125vw;
            font-weight: 600;
            line-height: 100%;
        }

        .subtitle {
            font-size: 1.25vw;
            font-weight: 400;
            line-height: 100%;
        }

        .screen1 {
            .top {
                position: absolute;
                left: 6.25vw;
                top: 25vw;
                display: flex;
                flex-direction: column;
                gap: .7031vw;

                img {
                    width: 43.6719vw;
                }

                .list {
                    display: flex;
                    flex-direction: row;
                    gap: 1.8438vw;

                    p {
                        font-size: 1.0156vw;
                        font-weight: 400;
                        line-height: 100%;
                    }

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

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

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

        .screen2 {
            padding: 7.0313vw 0 7.0313vw;
            display: flex;
            flex-direction: column;
            gap: .9375vw;
            align-items: center;

            .box {
                position: relative;
            }

            p {
                font-weight: 600;
            }

            .top {
                display: flex;
                flex-direction: row;
                gap: .9375vw;

                .box1 {
                    width: 35.1563vw;

                    .content {
                        display: flex;
                        flex-direction: column;
                        gap: .7813vw;
                        position: absolute;
                        left: 1.5625vw;
                        top: 7.5vw;

                        .tit {
                            width: 5.4688vw;
                        }

                        p {
                            font-size: 1.5625vw;
                            font-weight: 600;
                            line-height: 100%;
                        }
                    }
                }

                .box2 {
                    width: 25.7813vw;

                    p {
                        color: #FFFFFF;
                        position: absolute;
                        left: 0;
                        right: 0;
                        text-align: center;
                        top: 1.25vw;
                    }
                }

                .box3 {
                    width: 15.3125vw;

                    p {
                        color: #FFFFFF;
                        position: absolute;
                        left: 0;
                        right: 0;
                        text-align: center;
                        top: 1.25vw;
                    }
                }
            }

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

                .box {
                    width: 18.8281vw;
                }

                p {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: .7813vw;
                    text-align: center;
                }

                .box1 {
                    p {
                        position: absolute;
                        left: 1.6406vw;
                        text-align: left;
                    }
                }

                .box4 {
                    background-color: #E5E5E5;
                    border-radius: 1.5625vw;

                    img {
                        width: 17.3789vw;
                        margin-left: .7422vw;
                        margin-top: 4.8438vw;
                    }
                }
            }
        }

        .screen3 {
            display: flex;
            flex-direction: column;
            align-items: center;

            .top {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;
                padding-bottom: 4.6875vw;
            }

            img {
                width: 78.125vw;
            }
        }

        .screen4 {
            .top {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;
                position: absolute;
                left: 0;
                right: 0;
                top: 14.0625vw;

                p {
                    text-align: center;
                }
            }
        }

        .screen5 {
            .top {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;
                position: absolute;
                left: 10.9375vw;
                top: 17.1875vw;
            }
        }

        .screen6 {
            padding: 3.125vw 0 12.5vw;
            display: flex;
            flex-direction: row;
            gap: 4.6875vw;
            justify-content: center;

            .box {
                width: 36.7188vw;
                height: 40.625vw;
                background-color: #E5E5E5;
                border-radius: 2.3438vw;
                display: flex;
                flex-direction: column;
                gap: 2.3438vw;

                .list {
                    display: flex;
                    flex-direction: column;
                    gap: 1.2813vw;
                    margin-left: 2.3438vw;

                    p {
                        font-size: 1.0938vw;
                        font-weight: 400;
                        line-height: 100%;
                    }

                    .tit {
                        font-size: 1.6406vw;
                        font-weight: 600;
                    }
                }
            }
        }

        .screen7 {
            display: flex;
            flex-direction: column;
            gap: 4.6875vw;
            align-items: center;

            .top {
                display: flex;
                flex-direction: column;
                gap: 4.6875vw;

                img {
                    width: 49.6875vw;
                }

                p {
                    text-align: center;
                }
            }

            .bottom {
                display: flex;
                flex-direction: row;
                gap: 11.5625vw;

                .box {
                    display: flex;
                    flex-direction: column;
                    gap: 2.3438vw;

                    p {
                        font-weight: 600;
                        text-align: center;
                    }

                    img {
                        width: 8.9063vw;
                        margin: auto;
                    }
                }
            }
        }

        .screen8 {
            padding: 12.5vw 0 10.9375vw;
            display: flex;
            flex-direction: column;
            gap: 4.6875vw;
            align-items: center;

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

                p {
                    text-align: center;
                }
            }

            .bottom {
                display: flex;
                flex-direction: row;
                gap: 2.5vw;

                .box {
                    width: 37.8125vw;
                    height: 46.875vw;
                    border-radius: 1.5625vw;
                    background-color: #E5E5E5;
                }

                .box2 {
                    img {
                        width: 36.3672vw;
                        margin-left: .7422vw;
                        margin-top: 14.6094vw;
                    }
                }
            }
        }

        .screen9 {
            .top {
                position: absolute;
                top: 5.4688vw;
                left: 0;
                right: 0;
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;

                p {
                    text-align: center;
                    color: #FFFFFF;
                }
            }
        }
    }
}

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

        .title {
            font-size: 5.5556vw;
            font-weight: 600;
            line-height: 100%;
            padding-left: 5.5556vw;
        }

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

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

                img {
                    width: 70.463vw;
                }

                .list {
                    display: flex;
                    flex-direction: row;
                    gap: 3.7037vw;

                    p {
                        font-size: 2.4074vw;
                        font-weight: 400;
                        line-height: 100%;
                    }

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

                    :nth-child(2)::before {
                        content: '';
                        position: absolute;
                        left: -1.8519vw;
                        top: .6481vw;
                        width: .1852vw;
                        height: 1.4815vw;
                        background-color: #000000;
                    }

                    :nth-child(2)::after {
                        content: '';
                        position: absolute;
                        right: -1.8519vw;
                        top: .6481vw;
                        width: .1852vw;
                        height: 1.4815vw;
                        background-color: #000000;
                    }
                }
            }
        }

        .screen2 {
            padding: 16.6667vw 0 16.6667vw;
            display: flex;
            flex-direction: column;
            gap: 1.8519vw;
            align-items: center;

            p {
                font-size: 2.963vw;
                font-weight: 600;
                line-height: 100%;
                position: absolute;
            }

            .top {
                display: flex;
                flex-direction: row;
                gap: 1.8519vw;

                .box {
                    width: 43.5185vw;
                    position: relative;
                }

                .box1 {
                    .title {
                        width: 37.037vw;
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 2.963vw;
                        margin: auto;
                    }
                }

                .box2 {
                    p{
                        text-align: center;
                        left: 0;
                        right: 0;
                        top: 2.963vw;
                        color: #FFFFFF;
                    }
                }
            }
            .middle{
                display: flex;
                flex-direction: row;
                gap: 1.8519vw;
                p{
                    text-align: center;
                    left: 0;
                    right: 0;
                    top: 1.8519vw;
                }
                .box{
                    width: 43.5185vw;
                    height: 29.6296vw;
                    background-color: #E5E5E5;
                    border-radius: 1.8519vw;
                    position: relative;
                }
                .left{
                    display: flex;
                    flex-direction: column;
                    gap: 1.8519vw;
                }
                .right{
                    display: flex;
                    flex-direction: column;
                    gap: 1.8519vw;
                    .box2{
                        img{
                            width: 39.4787vw;
                            margin-left: 1.2963vw;
                            margin-top: 7.8704vw;
                        }
                    }
                }
            }
            .bottom{
                .box{
                    width: 88.8889vw;
                    position: relative;
                    p{
                        left: 5.5556vw;
                        top: 8.5185vw;
                        color: #FFFFFF;
                    }
                }
            }
        }
        .screen3{
            .top{
                display: flex;
                flex-direction: column;
                gap: 5.5556vw;
                padding-bottom: 11.1111vw;
            }
        }
        .screen4{
            .top{
                position: absolute;
                top: 29.6296vw;
                display: flex;
                flex-direction: column;
                gap: 5.5556vw;
            }
        }
        .screen5{
            padding: 29.6296vw 0 7.4074vw;
            .top{
                display: flex;
                flex-direction: column;
                gap: 5.5556vw;
                padding-bottom: 11.1111vw;
            }
        }
        .screen6{
            display: flex;
            flex-direction: column;
            gap: 7.4074vw;
            align-items: center;
            p{
                font-size: 2.5926vw;
                font-weight: 400;
            }
            .box{
                width: 88.8889vw;
                height: 96.2963vw;
                background-color: #F5F5F5;
                border-radius: 5.5556vw;
                .tit{
                    font-size: 3.8889vw;
                    font-weight: 600;
                }
                .list{
                    display: flex;
                    flex-direction: column;
                    gap: 1.8519vw;
                    padding: 5.5556vw 0 0 5.5556vw;
                }
            }
        }
        .screen7{
            padding: 29.6296vw 0 29.6296vw;
            .top{
                img{
                    width: 88.8889vw;
                    margin: 11.1111vw 5.5556vw;
                }
            }
            .bottom{
                display: flex;
                flex-direction: row;
                gap: 10.8333vw;
                justify-content: center;
                .box{
                    display: flex;
                    flex-direction: column;
                    gap: 1.8519vw;
                    img{
                        width: 12.963vw;
                        margin: auto;
                    }
                    p{
                        padding-left: 0;
                        text-align: center;
                        font-size: 1.8519vw;
                        font-weight: 600;
                    }
                }
            }
        }
        .screen8{
            .top{
                display: flex;
                flex-direction: column;
                gap: 5.5556vw;
                padding-bottom: 11.1111vw;
            }
            .bottom{
                display: flex;
                flex-direction: row;
                gap: 1.8519vw;
                justify-content: center;
                .box{
                    width: 43.5185vw;
                    height: 70.3704vw;
                    border-radius: 1.8519vw;
                    background-color: #F5F5F5;
                }
                .box2{
                    img{
                        width: 41.1944vw;
                        margin: 25.1852vw 1.2037vw;
                    }
                }
            }
        }
        .screen9{
            padding-top: 25.9259vw;
            .top{
                display: flex;
                flex-direction: column;
                gap: 5.5556vw;
                position: absolute;
                top: 42.5926vw;
                p{
                    color: #FFFFFF;
                }
            }
        }
    }
}