@media all and (max-width: 1400px) {
    .main-mv_slide .slick-nav {
        left: 4%;
    }

    .main-service .service-list {
        gap: 2%;
    }

    .main-about .about-cards,
    .main-about .about-cards .col-3 {
        gap: 20px;
    }

    .main-service .inner-L {
        padding: 9% 4%;
    }

    .main-service .service-tit .commonBtn {
        margin-top: 20px;
    }

    .main-service .overScroll {
        overflow-x: scroll;
    }

    .main-service .service-list {
        width: fit-content;
        margin-top: 8%;
    }

    .main-service .service-list > li {
        height: auto;
        width: 335px;
        border: 0;
    }

    .main-service .service-list .service-list_bg {
        position: static;
        opacity: 1;
    }

    .main-service .service-list .service-list_bg img {
        position: static;
        transform: none;
    }

    .main-service .service-list .service-list_grayBg {
        display: none;
    }

    .main-service .service-list > li:hover .service-list_bg {
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }

    .main-service .service-list .service-txt {
        bottom: 15px;
        left: 20px;
        right: 20px;
        padding: 0;
    }

    .main-service .service-list > li .service-txt h6 {
        color: #FFF;
        margin-bottom: 10px;
    }

    .main-service .service-list > li .service-txt .dotList li {
        color: #FFF;
    }

    .main-service .service-list > li .service-txt .commonBtn {
        margin-top: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .main-service .service-list > li:hover .service-txt h6,
    .main-service .service-list > li:hover .service-txt .dotList li,
    .main-service .service-list > li:hover .service-txt .commonBtn {
        animation: none;
    }
}

@media all and (max-width: 1024px) {
    .main-mv_txt span {
        font-size: 8vw;
    }

    .mainPage > section {
        padding: 15% 0;
    }

    .main-data .data-list {
        gap: 2%;
        margin-top: 6%;
    }

    .main-addition .addition-list {
        margin-top: 6%;
        gap: 20px;
    }

    .main-addition .addition-list > li {
        width: 100%;
    }

    .main-technology .inner {
        flex-direction: column;
        gap: 50px;
        padding-bottom: 130px;
    }

    .main-technology .commonBtn {
        position: absolute;
        bottom: 0;
    }

    .main-service .carousel-wrap {
        font-size: 100px;
    }

    .main-about .about-cards {
        margin-top: 6%;
        flex-direction: column;
    }

    .main-about .about-cards > li {
        height: auto;
    }

    .main-about .about-cards .card img {
        filter: none;
    }

    .main-about .about-cards .col-1 .card img {
        top: 50%;
        transform: translateY(-50%);
        height: 80%;
        right: 5%;
    }

    .main-about .about-cards .col-2 .card img {
        top: auto;
        bottom: -25%;
        width: 100%;
    }

    .main-about .about-cards .col-2 .card h3,
    .main-about .about-cards .col-2 .card p {
        opacity: 1;
    }

    .main-rnd .rnd-cards {
        gap: 2%;
        margin-top: 10%;
    }

    .main-rnd .rnd-cards .card {
        height: 370px;
        padding: 25px;
    }

    .main-rnd .rnd-cards .card .count {
        font-size: 80px;
    }

    .main-rnd .rnd-cards .card p {
        left: 25px;
        right: 25px;
        bottom: auto;
    }

    .parallaxWrap .inner p {
        font-size: 5.5vw;
    }
}

@media all and (max-width: 768px) {
    .main-data .data-list {
        flex-direction: column;
        gap: 20px;
    }
}

@media all and (max-width: 640px) {
    .main-mv_txt span {
        font-size: 9.8vw;
    }

    .main-mv_slide .slick-nav {
        bottom: 42%;
    }

    .main-tit h2 {
        font-size: 9vw;
    }

    .main-data .data-list li .iconBox {
        height: auto;
        padding: 20px 0;
        gap: 10px;
    }

    .main-data .data-list li .iconBox img {
        width: 30%;
    }

    .main-data .data-list li .iconBox p {
        font-size: 18px;
    }

    .main-data .data-list li .textBox {
        min-height: auto;
        height: auto;
    }

    .main-addition .addition-list > li {
        flex-direction: column;
        gap: 10px;
    }

    .main-addition .addition-list li .iconBox {
        height: auto;
        padding: 25px 0;
        gap: 10px;
        width: 100%;
    }

    .main-addition .addition-list li .textBox {
        min-height: auto;
        height: auto;
        width: 100%;
        padding: 15px 20px;
    }

    .main-addition .addition-list > li .textBox h6 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .main-addition .addition-list .dotList > li {
        font-size: 15px;
    }

    .main-technology .inner {
        gap: 35px;
        padding-bottom: 85px;
    }

    .main-technology .technology-list {
        row-gap: 40px;
    }

    .main-technology .technology-list li {
        gap: 20px;
    }

    .main-technology .technology-list li > figure {
        width: 15%;
    }

    .main-technology .technology-list h6 {
        font-size: 17px;
    }

    .main-technology .technology-list p {
        font-size: 14px;
    }

    .main-service .carousel-wrap {
        font-size: 70px;
    }

    .main-service .service-list {
        gap: 15px;
    }

    .main-service .service-list > li {
        width: 255px;
    }

    .main-service .service-list > li .service-txt h6 {
        font-size: 20px;
        margin-bottom: 0px;
    }

    .main-service .service-list .service-txt {
        min-height: 170px;
        left: 15px;
        right: 15px;
    }

    .main-service .service-list > li .service-txt .dotList li {
        font-size: 14px;
    }

    .main-service .service-list > li .service-txt .commonBtn {
        height: 40px;
    }

    .main-about .about-cards .card {
        padding: 20px;
    }

    .main-about .about-cards, .main-about .about-cards .col-3 {
        gap: 10px;
    }

    .main-about .about-cards .card h3 {
        font-size: 18px;
        margin-bottom: 7px;
    }

    .main-about .about-cards .card p {
        font-size: 14px;
    }

    .main-about .about-cards .col-3 .card {
        padding: 20px;
        position: relative;
    }

    .main-about .about-cards .col-3 .card img {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .main-rnd .rnd-cards {
        flex-direction: column;
        gap: 10px;
    }

    .main-rnd .rnd-cards .card {
        height: auto;
    }

    .main-rnd .rnd-cards .card img {
        width: 30px;
    }

    .main-rnd .rnd-cards .card .count {
        font-size: 50px;
    }

    .main-rnd .rnd-cards .card p {
        position: static;
        min-height: auto;
        font-size: 15px;
    }

    .main-rnd .rnd-cards .card:hover {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .main-rnd .rnd-cards .card img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    }

    .main-rnd .rnd-cards .card .count {
        color: var(--keyColor);
    }

    .main-rnd .rnd-cards .card p {
        color: var(--textBlack);
    }

    .parallaxWrap .inner-L {
        height: auto;
        padding: 35px 0px;
    }

    .parallaxWrap .inner p {
        font-size: 35px;
    }
}