#body {
    background: #131313;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 210px 0 0;

    .bgImg {
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
    }

    article {
        position: relative;

        .titleBox {
            width: auto;
            z-index: 2;

            h1 {
                color: #ffffff;
                font-size: 30px;
                font-weight: 500;
            }

            .web {
                margin: 13px 0 0;

                p {
                    color: #ffffff;
                    font-size: 18px;
                    margin: 0 22px 0 0;
                    font-weight: 300;
                }

                .box {
                    border: 1px solid rgba(127, 127, 127, 0.3);
                    border-radius: 20px;
                    width: auto;
                    padding: 5px 20px;
                    height: 30px;
                    margin: 0 18px 0 0;

                    p {
                        font-size: 16px;
                        color: #ffffff;
                        margin: 0;
                    }

                    img {
                        width: 20px;
                        margin: 0 8px 0 0;
                    }

                    &:nth-last-child(2),
                    &:nth-child(4) {
                        img {
                            margin: 0 12px 0 0;
                        }
                    }

                    &:nth-child(3) {
                        img {
                            margin: 0 10px 0 0;
                            width: 10px;
                        }
                    }

                    &:nth-child(5) {
                        img {
                            width: 15px;
                        }
                    }
                }
            }
        }

        .inputBox {
            width: 900px;
            height: 54px;
            background: #ffffff;
            padding: 7px 8px;
            border-radius: 50px;
            z-index: 10;
            margin: 67px 0 0;

            input {
                width: calc(100% - 160px);
                height: 100%;
                border: none;
                border-radius: 50px;
                padding: 0 25px;
                font-size: 18px;

                &::placeholder {
                    font-size: 18px;
                    color: rgba(19, 19, 19, 0.3);
                }
            }

            #mainBtn {
                border-radius: 20px;
                font-size: 17px;
                font-weight: 700;
                width: 150px;
                height: 40px;

                img {
                    width: 19px;
                    margin: 0 7px 0 0;
                }
            }
        }
    }
}




/* ///////////////// */
/* ///////////////// */
/* slide */
/* ///////////////// */
/* ///////////////// */


.slideBox {
    margin: 105px 0 88px;
    position: relative;
    width: 100%;
    overflow: hidden;

    .blackBox {
        width: calc((100% - 2880px) / 2);
        height: 100%;
        background: linear-gradient(to right, rgb(19, 19, 19) 50%, rgba(19, 19, 19, 0));
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;

        .right {
            background: linear-gradient(to left, rgb(19, 19, 19) 50%, rgba(19, 19, 19, 0));
            right: 0 !important;
            left: auto;
        }
    }
}

#body article .swiper {
    .swiper-wrapper {
        .swiper-slide {
            &>.box {
                position: relative;
                border-radius: 30px;
                overflow: hidden;
                cursor: pointer;

                &::after {
                    content: "";
                    display: block;
                    width: 100%;
                    padding: 0 0 100%;
                }

                &>img {
                    width: auto;
                    min-width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                }

                .black {
                    transition: all .2s ease-in-out;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 10;
                    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
                    padding: 18px;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: flex-start;

                    img {
                        width: 41px;
                        height: 41px;
                        border-radius: 100%;
                        margin: 0 8px 0 0;
                    }

                    p {
                        font-size: 17px;
                        color: #ffffff;
                    }
                }
            }

            &:hover {
                .black {
                    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
                }
            }
        }
    }
}



.swiper-button-next,
.swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    border-radius: 100%;
    background: rgba(19, 19, 19, 0.5);
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all .2s ease-in-out;
}

.swiper-button-prev {
    left: calc((100% - 2880px) /2) !important;

    &:hover {
        background-color: rgb(19, 19, 19);
        color: rgb(255, 255, 255);
    }

    &::after {
        font-size: 12px !important;

    }
}

.swiper-button-next {
    right: calc((100% - 2880px) /2) !important;

    &:hover {
        background-color: rgb(19, 19, 19);
        color: rgb(255, 255, 255);
    }

    &::after {
        font-size: 12px !important;

    }
}



/* 메인2번째 */

#main2 {
    width: 100%;
    position: relative;
    background: rgba(217, 217, 217, 0.1);
    height: 700px;
    padding: 100px 0 0;
    justify-content: flex-start;

    .title {
        width: 100%;

        h1 {
            font-size: 30px;
            font-weight: 600;
            color: #ffffff;
            margin: 0 0 23px;
        }

        h2 {
            color: #ffffff;
            font-weight: 400;
            font-size: 20px;
            margin: 0 0 37px;
            line-height: 1.4
        }

        div {
            margin: 0 0 11px;

            img {
                width: 10px;
                margin: 0 15px 0 0;
            }

            p {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
            }
        }

        #redBtn {
            width: 145px;
            height: 40px;
            margin: 65px 0 0;
            font-size: 17px;
        }
    }

    .slide {
        width: 50%;
        justify-content: flex-end;
        overflow: hidden;
    }

    .swiper3 {
        position: absolute;
        bottom: 100px;
        right: calc((100% - 1280px) / 2);
        align-items: flex-end;

        &>div {
            &:first-child {
                margin: 0 0 20px;
            }

            .swiper-slide {
                width: 183px;
                height: 244px;
                margin: 0 10px;

                &>div {
                    width: 100%;
                    padding: 6px 10px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background: rgba(19, 19, 19, 0.73);
                    height: 73px;
                    justify-content: space-between;

                    &>div {
                        width: 100%;


                        img {
                            width: 7px;
                            margin: 0 3px 0 0;
                        }

                        p {
                            font-size: 10px;
                            color: #AFAFAF;
                            margin: 0 10px 0 0;
                        }
                    }
                }

                img {
                    width: 100%;
                    height: 100%;
                }

                .titleBox {
                    &>div {
                        width: 100%;
                    }
                }

                h1 {
                    font-size: 14px;
                    font-weight: 500;
                    color: #ffffff;
                    margin: 0 0 5px;
                }

                h2 {
                    font-size: 12px;
                    font-weight: 200;
                    color: #ffffff;
                }

            }
        }
    }
}

/* 세번째 */
#explore {
    padding: 63px 0;

    .title {
        width: 100%;
        margin: 0 0 54px;

        h1 {
            font-size: 25px;
            font-weight: 600;
            color: #ffffff;
        }
    }

    .filter {
        width: 100%;
        margin: 0 0 30px;

        div {
            img {
                width: 24px;
                margin: 0 7px 0 0;
            }

            p {
                font-size: 600;
                font-size: 17px;
                color: #ffffff;
            }
        }

        .search {
            border: 1px solid #7F7F7F;
            border-radius: 16px;
            background: #1F1F22;
            color: #A4A4A4;
            width: 230px;
            height: 32px;

            input {
                width: calc(100% - 30px);
                height: 100%;
                background: transparent;
                border: none;
                padding: 0 10px;
                color: #A4A4A4;
            }
        }
    }

    .tabBox {
        width: 100%;
        margin: 0 0 26px;

        .tab {
            background: #000000;
            height: 31px;
            border-radius: 15px;
            margin: 0 14px 0 0;

            div {
                padding: 6px 16px;
                border-radius: 15px;
                color: #ffffff;
                font-size: 16px;
                cursor: pointer;

                &:nth-child(3) {
                    img {
                        width: 18px;
                        margin: 0 8px 0 0;
                    }
                }

                &:nth-child(2) {
                    img {
                        width: 10px;
                        margin: 0 8px 0 0;
                    }
                }

                &.active {
                    background: #EC2C7E;
                    color: #ffffff;
                }

                img {
                    width: 13px;
                    margin: 0 8px 0 0;
                }
            }
        }

        .type {
            padding: 0 0 0 14px;
            width: auto;
            border-left: 1px solid #ffffff;

            div {
                padding: 6px 10px;
                border: 1px solid #424242;
                color: #ffffff;
                margin: 0 8px 0 0;
                border-radius: 27px;
                cursor: pointer;
                transition: all 0.2s ease-in-out;

                &:hover {
                    background: #EC2C7E;
                    border: 1px solid #EC2C7E;
                }

                &.active {
                    background: #EC2C7E;
                    border: 1px solid #EC2C7E;
                }

                img {
                    width: 12px;
                    margin: 0 8px 0 0;
                }
            }
        }
    }

    .imageBox {
        width: 100%;
        flex-wrap: wrap;
        height: 4000px;
        margin: 20px 0 0;
        justify-content: flex-start;

        img {
            width: calc(100% / 4 - 17.5px);
            margin: 0 23px 23px 0;
            border-radius: 10px;

            &:nth-child(4n) {
                margin: 0 0 23px;
            }
        }
    }

    .grid {
        max-width: 100%;
        width: 100%;

        .grid-item {
            width: calc(100% / 4 - 23px);
            height: auto;
            margin: 0 23px 0 0;

            img {
                width: 100%;
                margin: 0 0 10px;
                border-radius: 10px;
            }
        }
    }
}


#body #mobile,
#body #main2 .rsWrapper .bgImg4,
#body article>div .inputBox .mobile {
    display: none;
}


#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background: rgba(19, 19, 19, 0.9);
    display: none;

    &>div {
        width: 100%;
        height: 100%;
        position: relative;

        .close {
            position: absolute;
            top: 52px;
            right: 6%;
            z-index: 10;
            width: 40px;
            opacity: 0.2;
            cursor: pointer;
            display: flex;
            transition: all .2s ease-in-out;

            &:hover {
                opacity: 1;

            }

            img {
                width: 100%;

            }
        }
    }


    .mySwiper {
        width: 100%;
        height: 100%;

        .swiper-wrapper {
            .swiper-slide {
                width: 100%;
                height: 100%;

                &>div {
                    width: 100%;
                    height: 100%;

                    &>div {
                        width: 80%;
                        height: 90%;
                        background: #202020;
                        padding: 20px 32px;
                        align-items: flex-start;
                        border-radius: 10px;

                        .right {
                            width: 700px;

                            &>img {
                                width: 100%;
                                height: auto;
                                border-radius: 10px;
                            }

                            .top {
                                padding: 12px;
                                height: 64px;

                                &>img {
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 100%;
                                    margin: 0 8px 0 0;
                                }

                                &>div {
                                    h1 {
                                        font-size: 18px;
                                        font-weight: 500;
                                        color: #ffffff;
                                        margin: 0 0 12px;
                                    }

                                    p {
                                        font-size: 14px;
                                        color: rgba(255, 255, 255, 0.6);
                                    }
                                }

                                &>#greyBorderBtn2 {
                                    width: 98px;
                                    height: 40px;
                                    flex-direction: row;
                                    margin: 0 0 0 20px;

                                    p {
                                        font-size: 16px;
                                        color: #959595;
                                        margin: 0 4px 0 0;
                                    }

                                    img {
                                        width: 20px;
                                    }
                                }
                            }

                            .bottom {
                                padding: 12px;

                                p {
                                    font-size: 14px;
                                    color: #B0B0B0;
                                }


                                .type {
                                    width: 110px;
                                    height: 32px;
                                    border: 1px solid rgba(255, 255, 255, 0.14);
                                    border-radius: 6px;
                                    margin: 0 12px 0 0;

                                    img {
                                        width: 20px;
                                        margin: 0 4px 0 0;
                                    }

                                    p {
                                        font-size: 14px;
                                        color: #ffffff;
                                    }
                                }
                            }
                        }

                        .left {
                            width: calc(100% - 700px - 32px);

                            .top {
                                height: 64px;
                                padding: 12px;

                                p {
                                    font-size: 16px;
                                    color: #FDFDFD;
                                    margin: 0 8px 0 0;
                                }

                                .contentBox {
                                    background: #151515;
                                    padding: 28px 16px;
                                    border-radius: 10px;
                                    color: rgba(255, 255, 255, 0.9);
                                    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
                                    line-height: 1.4;
                                    margin: 0 0 8px;
                                    font-size: 16px;
                                }

                                input[type="checkbox"] {
                                    display: none;
                                }

                                input[type="checkbox"]+label {
                                    display: inline-block;
                                    width: 16px;
                                    height: 16px;
                                    border: 1px solid transparent;
                                    position: relative;
                                    background: rgba(217, 217, 217, 0.1);
                                    cursor: pointer;
                                    border-radius: 2px;
                                }

                                input[id="check"]:checked+label::after {
                                    content: '✔';
                                    font-size: 16px;
                                    width: 16px;
                                    height: 16px;
                                    text-align: center;
                                    position: absolute;
                                    left: -1px;
                                    top: -1px;
                                    color: #ffffff;
                                    background: #EC2C7E;
                                    border-radius: 2px;
                                }
                            }

                            .contentBox {
                                background: #151515;
                                padding: 28px 16px;
                                border-radius: 10px;
                                color: rgba(255, 255, 255, 0.9);
                                text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
                                line-height: 1.4;
                                margin: 0 0 8px;
                                font-size: 16px;
                            }

                            .typeBox {
                                width: 100%;
                                margin: 0 0 8px;
                                flex-wrap: wrap;

                                .type {
                                    width: auto;
                                    min-width: calc(100% / 3 - 5.4px);
                                    margin: 0 8px 8px 0;
                                    height: 40px;
                                    background: #151515;
                                    padding: 16px 12px;
                                    border-radius: 10px;

                                    &:last-child {
                                        margin: 0 0 8px;
                                    }

                                    img {
                                        width: 16px;
                                        margin: 0 8px 0 0;
                                    }

                                    p {
                                        color: rgba(255, 255, 255, 0.6);
                                        font-size: 14px;
                                        font-weight: 500;
                                    }


                                }
                            }

                            #pinkBtn {
                                width: 100%;
                                height: 44px;
                                border-radius: 10px;
                                padding: 16px 12px;
                                margin: 0 0 16px;

                                &:hover {
                                    svg path {
                                        fill: #EC2C7E;

                                    }
                                }

                                svg {
                                    margin: 0 8px 0 0;

                                    path {

                                        transition: all .2s ease-in-out;
                                    }
                                }

                                p {
                                    font-size: 16px;
                                    font-weight: 500;
                                }

                            }

                            .box {
                                margin: 4px 0;
                                height: 36px;
                                width: 100%;

                                h2 {
                                    font-size: 14px;
                                    color: #B0B0B0
                                }

                                p {
                                    font-size: 14px;
                                    color: #FFFFFF;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .mobileTop,
#modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom,
#modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileTop {
    display: none;
}

#modal .mySwiper-button-next,
#modal .mySwiper-button-prev {
    color: #CDCDCD;
}


#modal .mySwiper-button-next,
#modal .mySwiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 110px);
    left: auto;
}

#modal .mySwiper-button-prev,
#modal .mySwiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 110px);
    right: auto;
}

#modal .mySwiper-button-next:after,
#modal .mySwiper-button-prev:after {
    font-size: 30px;
}





@media (max-width : 2880px) {
    #body .slideBox .blackBox {
        width: calc((100% - 2400px) / 2)
    }

    .swiper-button-prev {
        left: calc((100% - 2400px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 2400px) /2) !important;

    }
}

@media (max-width : 2560px) {
    #body .slideBox .blackBox {
        width: calc((100% - 1920px) / 2)
    }

    .swiper-button-prev {
        left: calc((100% - 1920px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 1920px) /2) !important;

    }
}

@media (max-width : 1920px) {
    #body .slideBox .blackBox {
        width: calc((100% - 1280px) / 2);
    }

    .swiper-button-prev {
        left: calc((100% - 1700px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 1700px) /2) !important;

    }

    #body .bgImg {
        width: 50%;
    }

}

@media (max-width : 1700px) {
    .swiper-button-prev {
        left: calc((100% - 1500px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 1500px) /2) !important;

    }
}

@media (max-width : 1500px) {

    #main2 .rsWrapper .slide {
        width: 60%;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right {
        width: 55%;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left {
        width: 40%;
    }

    .swiper-button-prev {
        left: calc((100% - 1350px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 1350px) /2) !important;

    }

}

@media (max-width : 1400px) {
    #explore {
        padding: 65px;
    }

    .swiper-button-prev {
        left: calc((100% - 1280px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 1280px) /2) !important;

    }


}

@media (max-width :1280px) {
    #explore .tabBox {
        flex-wrap: wrap;
    }

    #explore .tabBox .tab {
        margin: 0 0 10px;
    }


    #explore .tabBox .type {
        border-left: none;
        padding: 0;
        width: 100%;
    }

    #main2 {
        height: 550px;
    }

    #main2 .rsWrapper .slide {
        margin: 50px 0 0;
        width: 70%;
    }

    #main2 .rsWrapper .title {
        position: initial;
    }

    #main2 .rsWrapper .swiper3>div .swiper-slide {
        width: 150px;
        height: 220px;
    }

    .swiper-button-prev {
        left: calc((100% - 1100px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 1100px) /2) !important;

    }

    #body .slideBox .blackBox {
        width: calc((100% - 1100px) / 2);
    }



    #main2 .rsWrapper .swiper3 {
        bottom: 0;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div {
        width: 90%;
    }

    #modal>div .close {
        right: 1%;
    }

    #modal .mySwiper-button-next,
    #modal .mySwiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 20px);
    }

    #modal .mySwiper-button-prev,
    #modal .mySwiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 20px);
    }
}


@media(max-width : 1100px) {

    #main2 .rsWrapper .slide {
        width: 80%;
    }

    #main2 .rsWrapper .swiper3 {
        position: initial;
        width: 100%;
        margin: 30px 0 0;
    }

    #main2 .rsWrapper .swiper3>div .swiper-slide {
        width: 185px;
        height: 244px;
    }

    #main2 .rsWrapper .title {
        align-items: center;
    }

    #main2 {
        height: auto;
        padding: 100px 0;
    }

    #body article>div>.titleBox>.web>p,
    #body article>div>.titleBox>.web .box p {
        font-size: 14px;
    }

    #body article>div>.titleBox>.web .box {
        margin: 0 5px 0 0;
    }

    .swiper-button-prev {
        left: calc((100% - 900px) /2) !important;
    }

    .swiper-button-next {
        right: calc((100% - 900px) /2) !important;

    }

    #body .slideBox .blackBox {
        width: calc((100% - 900px) / 2);
    }


    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div {
        width: 500px;
        flex-wrap: wrap;
        overflow: auto;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right {
        width: 100%;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left {
        width: 100%;
    }
}




@media (max-width : 900px) {

    #body article {
        width: 100%;
    }

    #main2 .rsWrapper .slide .swiper2,
    #main2 .rsWrapper .slide .swiper5 {

        display: initial;
    }

    #body #mobile,
    #body #main2 .rsWrapper .bgImg4,
    #body article>div .inputBox .mobile {
        display: flex;
    }

    /* #main2 .rsWrapper .swiper3, */
    #body .slideBox,
    #body #web,
    #body #explore,
    #main2 .rsWrapper .title div,
    #main2 .rsWrapper .title #redBtn,
    #body article>div>.titleBox>.web,
    #body article>div .inputBox .web {
        display: none;
    }

    #main2 .rsWrapper .swiper3>div .swiper-slide {
        width: 95px;
        height: 126px;
        margin: 0 5px;
    }

    #main2 .rsWrapper .swiper3>div:first-child {
        margin: 0 20px 10px 0;
    }

    #main2 .rsWrapper .swiper3>div:nth-child(2) {
        margin: 0 -50px 0 0;
    }

    #body article>div>.titleBox {
        align-items: center;
        width: 100%;
    }

    #body article>div>.titleBox h1 {
        margin: 0 0 10px;
    }

    #body article>div>.titleBox>.mobileText>p {
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        line-height: 1.3;
    }

    #body article>div .inputBox {
        margin: 36px 0 200px;
        width: 100%;
        height: 44px;
    }

    #body article>div .inputBox input {
        font-size: 14px;
        padding: 0 20px;
        width: calc(100% - 96px);
    }

    #body article>div .inputBox input::placeholder {
        font-size: 14px;
    }


    #body article>div .inputBox #mainBtn {
        width: 96px;
        height: 38px;
        font-size: 14px;
    }

    #body article>div .inputBox #mainBtn img {
        width: 13px;
    }

    #body>article>div>.arrowMobile {
        width: 100%;
        margin: 0 0 103px
    }

    #body>article>div>.arrowMobile img {
        width: 60px;
    }

    #body .bgImg {
        width: 80%;
    }

    #body .bgImg2 {
        position: absolute;
        top: -20%;
        right: 0;
        width: 50%;
    }

    #body .bgImg3 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    #main2 {
        background: #131313;
    }

    #main2 .rsWrapper .slide {
        width: 100%;
    }

    #body #main2 .rsWrapper .bgImg4 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    #main2 .rsWrapper .title {
        padding: 0 20px;
    }

    #main2 .rsWrapper .title h1 {
        font-size: 24px;
    }

    #main2 .rsWrapper .title h2 {
        font-size: 14px;
        font-weight: 300;
        margin: 0 0 42px;
    }

    #main2 .rsWrapper .slide {
        margin: 0;
        height: 330px;
    }

    #main2 .rsWrapper .swiper3 {
        align-items: center;
        margin: 0;
    }

    #main2 .rsWrapper .slide .swiper2,
    #main2 .rsWrapper .slide .swiper5 {
        margin: 0 0 7px;
    }

    #main2 .rsWrapper .slide .swiper2 .swiper-slide div h1,
    #main2 .rsWrapper .slide .swiper5 .swiper-slide div h1 {
        font-size: 7px;
    }

    #main2 .rsWrapper .slide .swiper2 .swiper-slide div h2,
    #main2 .rsWrapper .slide .swiper5 .swiper-slide div h2 {
        font-size: 6px;
        margin: 0 0 9px
    }

    #main2 .rsWrapper .swiper3 div .swiper-slide div h1 {
        font-size: 7px;
        margin: 0 0 2px;
    }

    #main2 .rsWrapper .swiper3 div .swiper-slide div h2 {
        font-size: 6px;
    }

    #main2 .rsWrapper .mobileBtn {
        padding: 63px 36px 34px;
        width: 100%;
    }

    #main2 .rsWrapper .mobileBtn p {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
        margin: 0 0 24px;
        font-weight: 500;
    }

    #main2 .rsWrapper .mobileBtn #pinkBtn {
        width: 100%;
        height: 50px;
        border-radius: 50px;
        font-size: 16px;
    }

    #body .mobileBox {
        background: #F5F5F5;
        padding: 62px 20px;
    }

    #body .mobileBox .title {
        width: 100%;
    }

    #body .mobileBox .title h1 {
        font-size: 24px;
        color: #000000;
        line-height: 1.3;
        margin: 0 0 6px;
    }

    #body .mobileBox .title p {
        font-size: 14px;
        color: #000000;
        font-weight: 300;
        line-height: 1.3;
        margin: 0 0 28px;
    }


    #body .mobileBox .slide {
        width: 100%;
        justify-content: flex-end;
        overflow: hidden;
        height: 310px;
        margin: 0 0 98px;
    }



    #body .mobileBox .slide .swiper4 {
        width: 100%;
        height: 100%;
        /* margin-left: auto; */
        /* margin-right: auto; */
    }

    #body .mobileBox .slide .swiper4 .swiper-slide {
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    #body .mobileBox .slide .swiper4 .swiper-slide img {
        width: 100%;
        height: 100%;
    }

    #body .mobileBox .slide .swiper4 .swiper-slide .absoluteBox {
        position: absolute;
        top: 0;
        left: 0;
        padding: 26px;
        width: 100%;
        height: 100%;
        justify-content: flex-start;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))
    }

    #body .mobileBox .slide .swiper4 .swiper-slide .absoluteBox h1 {
        font-size: 16px;
        color: #ffffff;
        font-weight: 600;
        line-height: 1.3
    }

    #main2 .rsWrapper .swiper3 .swiper-slide>div {
        height: 40px;
        padding: 4px 5px;
    }

    #main2 .rsWrapper .swiper3 div .swiper-slide div>div div p {
        font-size: 5px;
    }

}

@media (max-width : 700px) {

    #modal>div .close,
    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .top,
    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .top {
        display: none;
    }


    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div {
        width: 100%;
        max-height: 90%;
        height: auto;
        padding: 0;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div {
        justify-content: flex-end;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .mobileTop,
    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileTop {
        display: flex;
        height: 56px;
        width: 100%;
        padding: 20px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .mobileTop h1,
    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileTop h1 {
        color: #9A9A9A;
        font-size: 16px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .mobileTop img,
    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileTop img {
        width: 28px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right>img {
        border-radius: 0;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .bottom {
        width: 100%;
        justify-content: space-between;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom div>img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        margin: 0 8px 0 0;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom {
        display: flex;
        padding: 20px 12px;
        width: 100%;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom div>div h1 {
        font-size: 18px;
        font-weight: 500;
        color: #ffffff;
        margin: 0 0 12px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom div>div p {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom #pinkBtn {
        width: 98px;
        height: 40px;
        flex-direction: row;
        margin: 0 0 0 20px;
        border-radius: 10px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .right .mobileBottom #pinkBtn p {
        font-size: 16px;
        margin: 0 4px 0 0;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .mobileLine {
        display: flex;
        width: 100%;
        padding: 8px 12px;

    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .mobileLine .line {
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: 100%;
        height: auto;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .typeBox {
        padding: 0 12px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .typeBox .type {
        padding: 10px 8px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .typeBox .type p {
        font-size: 12px;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left #pinkBtn {
        width: calc(100% - 24px);
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left {
        align-items: center;
    }

    #modal .mySwiper .swiper-wrapper .swiper-slide>div>div .left .box {
        padding: 0 12px;
    }

    #modal .mySwiper .swiper-button-next,
    #modal .mySwiper .swiper-button-prev {
        display: none;
    }
}