@media screen and (min-width: 960px)  {
    .hearder {
        width: 65%;
        margin: 0 auto;
        height: 3rem;
        line-height: 3rem;
    }
    .header-title {
        color: #004596;
        vertical-align: middle;
        font-size: 1.5rem;
    }
    .header-right li {
        list-style: none;
        float: right;
        margin: 0 4%;
    }

    .service h2 {
        text-align: center;
        margin-top: 7rem;
        font-size: 2rem;
    }
    .pic {
        width: 100%;
        margin-top: 4rem;
        text-align: center;
    }
    .pic div{
        width: 6rem;
    }
    .pic div:nth-child(2){
        margin: 0 6rem;
    }
    .pic div:nth-child(3){
        margin-right: 6rem;
    }
    .pic div:nth-child(4){
        margin-right: 6rem;
    }
    .pic div p{
        margin-top: 2rem;
    }
     .aboutus h2 {
        text-align: center;
        margin-bottom: 1%;
        margin-top: 1%;
        font-size: 2rem;
    }
    .aboutus h5 {
        text-align: center;
        margin-top: 3rem;
    }
    .aboutus p {
        width: 900px;
        margin: 14px auto;
        text-indent: 2rem;
        line-height: 1.5rem;
    }
    .contactus h2 {
        text-align: center;
        margin-bottom: 2%;
        font-size: 1.5rem;
    }
    .contactus>div{
        text-align: center;
        margin-top: 4rem;
    }
     .address-leftmar{
        margin-left: 15rem;
    }
   .code-li {
        position: relative;
    }
    .code-li:hover .dicode {
        display: block;
        
    }
    .dicode {
        background-color: #fff;
        width: 250px;
        height: 250px;
        padding: 25px;
        position: absolute;
        top: 90%;
        left: -96%;
        display: none;

    }
    .dicode>img {
        width: 100%;
        height: 100%;
    }
    .image-item{
        height: 22rem;
        width: 960px;
    }

}