@media screen and (min-width:320px) and (max-device-width:640px) {
    #fourPoint{
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .section {
        min-width: 100%;
        max-width: 100%;
    }
    .content {
        width: 100%;
    }
    #banner{
        width: 100%;
        height: 100%;
        background-size: cover;
    }
    #banner h1 {
        width: 100%;
    }
    h2.mainTitle {
        width: 100%;
        font-size: 40px;
        line-height: 2;
        text-align: center;
        box-sizing: border-box;
    }
    #case .caseTxt .left, #case .caseTxt .right {
        width: 50%;
        float: none;
        margin-left: 0;
        padding-left: 20px;
        padding-right: 0;
    }
    #case .caseTxt li {
        width: 80%;
        padding: 0 2%;
    }
    #case img{
        max-width: 80%;
        height:auto;
        margin-left: -20%;
    }
    #direct .directConfusion .left, #direct .directConfusion .right {
        width: 100%;
        float: none;
        margin-left: 0;
        padding-left: 20px;
        padding-right: 0;
    }
    #direct .directFive p {
        padding: 0 1%;
        text-align: left;
    }
    #fourPoint .point{
        width: 100%;
        height: 100%;
        float: none;
    }

}