@media screen and (min-width:870px) {
    .mob {
        display: none;
    }
}
@media screen and (max-width: 1400px) {
    header {
        padding: 0 5%;
        height: 100px;
    }
    .header-inner h1 {
        margin-left: 0;
    }
    h1 img {
        width: 140px;
    }
    .header-inner .wrap > a {
        display: none;
    }
    html {
        font-size: 12px;
    }
    .wrap {
        width: 90%;
    }
    .main-bnr {
        padding-left: 5%;
        padding-top: 30%;
    }
    .main-cont span {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-cont span img {
        margin-left: 6px;
        width: 16px;
        height: 16px;
    }
    .bnr-text {
        width: 100%;
        padding-top: 0;
        word-break: keep-all;
    }
    .bnr-text h2 {
        font-size: 3.5rem;
    }
    .company-contain ul {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 8rem;
    }
    .company-contain ul li {
        width: 60%;
    }
    .company-contain .reverse {
        flex-direction:column-reverse;
    }
    .company-contain ul li p {
        margin-bottom: 6rem;
    }
    .tab-inner ul {
        flex-direction: column;
    }
}
@media screen and (max-width: 980px) {
    .footer-logo {
        width: 130px;
    }
    .footer-logo img {
        width: 100%;
    }
}
@media screen and (max-width: 870px) {
    .pc {
        display: none;
    }
    html {
        font-size: 10px;
    }
    h1 img {
        width: 130px;
    }
    .parallax-bg {
        height: 100vh;
    }
    .main-bnr {
        padding-top: 50%;
    }
    .main-cont-1 {
        flex-direction: column;
    }
    .main-cont-1 .left,
    .main-cont-1 .right {
        width: 100%;
    }
    .sub-bg-1 {
        height: 350px;
    }
    .main-contain > .wrap > div p img {
        width: 60px;
    }
    .main-cont-1 .right ul {
        height: 320px;
    }
    .col-2 li:first-child,
    .col-2 li:last-child {
        width: 50%;
        height: 150px;
    }
    footer .wrap {
        justify-content: flex-start;
    }
    .footer-link {
        justify-content: flex-start;
        margin-bottom: 8rem;
        font-size: 12px;
    }
    footer ul li ul {
        flex-direction: column;
        gap: 12px;
    }
    footer ul li {
        font-size: 12px;
        text-align: left;
    }
    .sub-bnr {
        height: 300px;
    }
    .form-contain form label,.form-contain p,
    .form-contain button {
        font-size: 2rem;
    }
    .form-contain form input,.form-contain form textarea,
    .form-contain form select {
        font-size: 1.6rem;
    }
    .main-slide .slide-inner p, .tab-cont h5 span {
        font-size: 1.6rem;
    }
    .slide-title {
        margin-bottom: 10%;
    }
    .col-title ul {
        flex-direction: column;
        align-items: center;
    }
    .col-title ul li {
        width: 90%;
    }
    .our ul li {
        width: 45%;
    }
    .recruit {
        margin-top: 20%;
    }
    .col-title li img {
        width: 70%;
    }
}
@media screen and (max-width: 750px) {
    .main-cont-2 .col-3 {
        flex-direction: column;
    }
    .main-cont-2 .col-3 li {
        width: 100%;
        height: 150px;
    }
    .story-contain {
        flex-direction: column;
    }
    .story-contain li {
        height: 250px;
        width: 100%;
        margin-bottom: 30px;
    }
    .story-contain li p {
        font-size: 2rem;
    }
    .company-contain ul li {
        width: 80%;
    }
    .sub-title {
        width: 90%;
        margin: 20% auto 5%;
    }
    .slide-contain .wrap {
        flex-direction: column;
        justify-content: flex-start;
    }
    .main-slide .swiper-slide {
        height: 500px;
    }
    .tab-cont {
        width: 90%;
    }
    .tab-cont img {
        width: 80px;
    }
    .tab-cont h5 img {
        width: 25px;
    }
    .mainSwiper {
        width: 100%;
    }
    .slide-title {
        padding-left: 0;
    }
    .slide-title h3, .slide-title p{
        text-align: center;
    }
    .service-bnr a {
        margin-top: 30px;
    }
}
@media screen and (max-width: 560px) {
    html {
        font-size: 8px;
    }
    header {
        height: 70px;
    }
    h1 img {
        width: 100px;
    }
    footer ul {
        margin-top: 22px;
    }
    .bnr-text h2 {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .bnr-text p {
        font-size: 12px;
    }
    .main-title h3 {
        font-size: 24px;
    }
    .slide-inner {
        margin: 60px auto 24px;
    }
    .main-bnr {
        height: 520px;
    }
    .main-cont {
        margin-top: 10%;
    }
    .sub-bg-1 {
        height: 200px;
    }
    .main-contain > .wrap > div p span {
        font-size: 1.75rem;
    }
    .main-cont-1 .left,.main-cont-1 .right ul li,
    .main-cont-2 ul li {
        border-radius: 20px;
    }
    .sub-bnr {
        height: 250px;
    }
    .company-contain ul li {
        width: 100%;
    }
    .sub-title p {
        margin-bottom: 20%;
        font-size: 1.75rem;
    }
    .company-contain ul li p,.col-title li p {
        font-size: 1.75rem;
    }
    .company-contain h5,.col-title h5 {
        font-size: 3rem;
    }
    .form-contain form > div {
        width: 90%;
    }
    .main-slide .swiper-slide {
        height: 440px;
        padding: 4% 4% 20px;
    }
    .mainSwiper .swiper-slide:nth-child(1) {
        background-position: bottom center;
    }
    .mainSwiper .swiper-slide:nth-child(2) {
        background-position: bottom center;
    }
    .mainSwiper .swiper-slide:nth-child(3) {
        background-position: bottom center;
    }
    .mainSwiper .swiper-slide:nth-child(4) {
        background-position: bottom center;
    }
    .mainSwiper .swiper-slide:nth-child(5) {
        background-position: bottom center;
    }
    .mainSwiper .swiper-slide:nth-child(6) {
        background-position: bottom center;
    }
    .main-slide .slide-inner p {
        font-size: 1.75rem;
    }
    .main-slide .slide-inner h4,.tab-cont h5  {
        font-size: 2.8rem;
    }
    .slide-title h3 {
        font-size: 24px;
    }
    .slide-contain {
        padding: 50px 0;
    }
    .our ul li {
        width: 100%;
    }
    .our ul li p {
        font-size: 2rem;
    }
    .our ul li img {
        width: 40%;
    }
    .notice-inner p {
        font-size: 1.75rem;
    }
    .notice-tab p {
        font-size: 1.75rem;
    }
    .slide-title {
        width: 65%;
    }
    .tab-inner ul li p {
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 430px) {
    .main-bnr {
        padding-top: 60%;
    }
    .main-contain > .wrap > div p img {
        width: 40px;
    }
}