@media screen and (max-width: 1200px) {
    .mian {
        width: 100%;
        padding: 0 60px;
    }

    .box.mian {
        padding: 120px 60px;
    }

    .box.mian.box_a {
        padding: 30px 60px 120px;
    }

    .list1 div div {
        height: auto;
        padding-bottom: 40px;
    }

    .list4 li .txt {
        height: auto;
        padding-bottom: 30px;
    }

    .list5 li {
        padding: 30px 30px;
        width: calc(33.33% - 50px);
    }

    h2 {
        line-height: 36px;
    }
}



@media screen and (max-width: 800px) {
    header button {
        width: 60px;
    }

    .mian {
        width: 100%;
        padding: 0 3vw;
        
    }
    header .mian {
        height: 45px;
    }
    .logo_box {
        background-color: #3bb3c3;
    } 
    header  .logo img {
        height: 45px;
        margin-top: 5px;
    }
    .logo {
        height: 45px;
    }
    .box.mian {
        padding: 60px 3vw;
    }

    .box.mian.box_a {
        padding: 30px 3vw 60px;
    }

    .banner {

        padding-top: 10vh;
        height: 65vh;
    }

    .banner_img {
        width: 94vw;
    }

    .banner_img img {
        width: 80vw;
    }

    .banner_img h2 {
        width: 70vw;
        margin: 30px auto;
    }

    .df2 li {
        width: 100%;
    }

    .list1 li,
    .list4 li,
    .df3 li {
        border-bottom: 1px solid #ccc;
        padding: 20px 0 20px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .list1 li,
    .list4 li,
    .df3 li:last-child {
        border-bottom: none;
    }

    .df2 li:nth-last-child(1) {
        border: none;
    }

    .list1 li .txt,
    .list5 li .txt {
        width: calc(100% - 50px);
        margin-left: 20px;
        flex: 1;
    }

    .list1 div div {
        padding: 0;
    }

    .list2 li {
        margin-bottom: 20px;
        display: block;
        padding: 16px;
        padding-bottom: 40px;
    }

    .box_c .title {
        flex-direction: column;
    }

    .box_c .title img {
        width: 94vw;
        order: 2;
        margin-top: 20px;
    }

    .box_b ul {
        
    }
    
    .box {
        padding: 30px 0;
    }

    .df4 {
        flex-wrap: wrap;
    }

    .df4 li {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 10px;
        padding-bottom: 40px;
    }

    .list4 li div {
        height: auto;
        padding-bottom: 0;
    }

    .list4 li .txt {
        padding: 0;
    }

    .df3 {
        flex-wrap: wrap;
    }

    .df3 li {
        width: 100%;
    }

    .list5 li {
        height: auto;
        background-color: transparent;
        box-shadow: none;
        margin: 0;
    }

    .box_c .title div {
        width: 100%;
    }

    footer {
        height: 100px;
    }

    footer .mian {
        height: 100px;
    }
}