.clear {
    clear: both;
}

.userbox {
    width: 40%;
    margin: 15% auto;
    height: auto;
    padding: 10px 15px;
    background: #fff;
    border-radius: 6px;
    position: absolute;
    top: -15%;
    left: 30%;
}

    .userbox .img {
        text-align: center;
    }

.closemessage {
    color: #333;
    position:fixed;
    right:29%;
}

.userbox .img .erwei {
    width: 25%;
    float: left;
    top: 86px;
    position: relative;
}

.message {
    float: left;
    width:70%;
}

    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
        text-indent: 1rem;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
        line-height: 20px;
        font-size: 1rem;
    }

        .message p img {
            width: 3%;
            margin-left: 10px;
            margin-right: 10px;
        }

@media screen and (max-width:1366px) {
    .userbox {
        width: 40%;
        margin: 10% auto;
        height: auto;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 0%;
        left: 30%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right: 29%;
    }
        .userbox img {
            width: 35%;
            float: left;
        }

    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
        text-indent: 1rem;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
        width:100%;
    }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}

@media screen and (max-width:1024px) {
    .userbox {
        width: 60%;
        margin: 3% auto;
        height: auto;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 15%;
        left: 18%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right: 20%;
    }
        .userbox img {
            width: 35%;
            float: left;
        }

    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
        text-indent: 1rem;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
    }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}

@media screen and (max-width:768px) {
    .userbox {
        width: 80%;
        margin: 15% auto;
        height: auto;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 10%;
        left: 8%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right:10%;
    }
        .userbox img {
            width: 35%;
            float: left;
        }

    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
        text-indent: 1rem;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
    }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}

@media screen and (max-width:736px) {
    .userbox {
        width: 70%;
        margin: 8% auto;
        height: 150px;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 0%;
        left: 13%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right: 15%;
    }
        .userbox img {
            width: 35%;
            float: left;
        }
        .userbox .img .erwei {
            width: 26%;
            float: left;
            top: 85px;
            position: relative;
        }
    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
        text-indent: 1rem;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
    }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}

@media screen and (max-width:640px) {
    .userbox {
        width: 75%;
        margin: 7% auto;
        height: 140px;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 0%;
        left: 13%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right: 10%;
    }
        .userbox img {
            width: 35%;
            float: left;
        }
        .userbox .img .erwei {
            width: 23%;
            float: left;
            top: 85px;
            position: relative;
        }
    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
    }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}

@media screen and (max-width:568px) {
    .userbox {
        width: 85%;
        margin: 6% auto;
        height: 130px;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 0%;
        left: 5%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right: 7%;
    }
        .userbox img {
            width: 35%;
            float: left;
        }
        .userbox .img .erwei {
            width: 23%;
            float: left;
            top: 85px;
            position: relative;
        }
    .message h1 {
        color: #063767;
        font-size: 2rem;
        font-weight: normal;
        text-indent: 1rem;
    }

    .message p {
        text-align: left;
        color: #333;
        text-indent: 0em;
    }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}

@media screen and (max-width:414px) {
    .userbox {
        width: 70%;
        margin: 15% auto;
        height: 388px;
        padding: 10px 15px;
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: 0%;
        left: 10.5%;
        overflow-y: auto;
    }
    .closemessage {
        color: #333;
        position: fixed;
        right: 15%;
    }
        .userbox img {
            width: 60%;
            margin: auto auto;
            float: none;
        }

        .userbox .img .erwei {
            width: 60%;
            float: none;
            top: 20px;
        }

    .message {
        float: none;
    width: 100%;
    }

        .message h1 {
            color: #063767;
            font-size: 2rem;
            font-weight: normal;
            text-indent: 0rem;
            text-align: center;
        }

        .message p img {
            width: 5%;
            margin-left: 10px;
            margin-right: 10px;
        }

        .message p {
            text-align: left;
        }

    ::-webkit-scrollbar {
        width: 5px;
        background-color: #ddd;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 10px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        background-color: transparent;
    }
}