@media only screen and (max-width: 1224px) {
    .sub-title{
        font-size: 27px;
    }
    .title{
        font-size: 22px;
    }
    .click-title{
        font-size: 17px;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 1160px) {
    .blue-box .boxes li{
        width: 27%;
    }
    .soil .soil-title {
        font-size: 30px;
    }
    .soil .blue-box p.title {
        font-size: 32px;
    }
    .soil .blue-box p.sub-title{
        font-size: 21px;
    }
}
@media only screen and (max-width: 1024px) {
    .sub-title{
        font-size: 25px;
        width: 60%;
    }
    .sds-wrap ul li{width: 43%;}
}

@media only screen and (max-width: 768px) {
    .logo1, .logo2 {
        width: 18%;
        background: #fff;
        padding: 10px 10px 20px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .logo2 {
        left: auto;
        right: 1%;
        width: 12%;
        padding: 17px 25px 15px;
    }

    .main-title {
        padding-top: 140px;
        font-size: 4.5vw;
        margin-bottom: 36px;
    }
    .main-title:after{
        font-size: 4.5vw;
        padding-top: 137px;
        display: none;
    }
    .sub-title {
        font-size: 3.4vw;
        width: 59%;
        margin-bottom: 15px;
    }
    .title {
        font-size: 17px;
        width: 340px;
    }
    .click-title {
        margin-top: 14px;
    }
    .sds{
        font-size: 14px;
        padding: 8px 12px;
        top: 57%;
    }
    .sun {
        right: 7%;
        top: 54%;
        left: auto;
        transform: scale(0.7);
    }
    .road {
        height: 70px;
    }
    .soil .soil-title {
        font-size: 27px;
        padding: 36px 20px;
        width: 80%;
        margin: 0 auto;
        line-height: 1.4;
    }
    .soil .blue-box p.title{
        padding: 20px 0 10px;
        font-size: 28px;
        width: 80%;
    }
    .soil .blue-box p.sub-title {
        font-size: 20px;
        width: 80%;
        line-height: 1.3;
    }
    .blue-box .boxes li{
        width: 38%;
    }
    .popup{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
    }
    .popup > a{
        width: 80%;
        height: 40vh;
    }
    .sds-wrap{padding: 25px;}
    .sds-wrap ul li{width: 40%;}
}

@media only screen and (max-width: 767px) {
    .container-box {
        height: 610px;
    }
    .main-title {
        font-size: 30px;
        padding-top: 150px;
    }
    .logo1{
        width: 31%;
    }
    .logo2 {
        width: 18%;
        padding: 17px 34px 18px;
    }
    .sun {
        top: 64%;
        left: auto;
        transform: scale(0.6);
    }
    .sds {
        font-size: 12px;
        padding: 6px 10px;
        top: auto;
        right: auto;
        width: 130px;
        margin: 16px auto 0;
        position: relative;
        display: block;
        border-radius: 6px;
        text-align: center;
    }
    .sub-title {
        font-size: 20px;
        max-width: 310px;
        width: 84%;
    }
    .title {
        font-size: 17px;
        width: 297px;
    }
    .click-title{width: 100%;}
    .soil{
        background-size: cover;
    }
    .soil .soil-title {
        font-size: 22px;
        width: 90%;
    }
    .soil .blue-box p.title {
        font-size: 25px;
        width: 90%;
    }
    .soil .blue-box p.sub-title {
        font-size: 18px;
        width: 90%;
    }    
    .blue-box .boxes li {
        width: 80%;
        display: block;
        height: auto;
        padding: 30px 20px;
    }
    .road {
        height: 140px;
    }
    .road .car-1 {
        width: 12%;
    }
    .road .car-2 {
        width: 15%;
    }
    .road .truck {
        width: 18%;
    }
    .road .trash-truck {
        width: 13%;
    }
    .dustbin {
        left: 29%;
        width: 14%;
        bottom: -3px;
    }
    .name-plate.garbage-area {
        font-size: 2vw;
        width: 90%;
        left: -2%;
        top: -42.5%;
    }
    .office {
        left: 2%;
        width: 30%;
    }
    .name-plate.conference {
        font-size: 1.6vw;
        width: 26%;
        left: 18%;
        top: 42.5%;
    }
    .name-plate.hotel {
        font-size: 2vw;
    }
    .name-plate.office {
        font-size: 2.5vw;
        width: 62%;
        left: 26%;
        top: 1.3%;
    }
    .tree {width: 3.5%;}

    .shoppingmall {
        left: 32%;
        width: 33%;
    }
    .name-plate.shopping-mall {
        font-size: 3vw;
        width: 62%;
        left: 19%;
        top: 1.5%;
    }

    .airport {
        left: 66%;
        width: 35%;
    }
    .name-plate.airport {
        font-size: 2vw;
    }
    div.school, div.bank {
        display: none;
    }
    .road div.school {
        display: block;
        left: 7%;
        bottom: -11px;
        width: 26%;
        z-index: 9;
    }
    .road .name-plate.school {
        font-size: 2.5vw;
        width: 46%;
        left: 27%;
        top: 42%;
    }

    .road div.bank {
        display: block;
        left: 67%;
        bottom: -11px;
        width: 26%;
        z-index: 9;
    }
    .name-plate.bank {
        font-size: 3vw;
        top: 2%;
    }
    .sds-wrap ul li{width: 70%;}
}

@media only screen and (max-width: 480px) {
    .container-box {
        height: 550px;
    }
    .main-title {
        font-size: 30px;
        padding-top: 120px;
    }
    .road {
        height: 100px;
    }
}