body{
    background-color: #fff;color:#000;
    padding-top:60px;
    padding-bottom:30px;
}

.titleBox{
    text-align: center;padding:60px 0 30px;line-height: 24px;
}
.ptitle{
    font-size: 22px;color:#2a2a2a;
}
.psubtitle{
    font-size: 14px;color:#7f7f7f;
}


.aboutBox{
    width:1200px;margin:0 auto;
    border-bottom:1px solid #7f7f7f;
}
.aboutBox p{
    line-height: 28px;font-size: 14px;color:#7f7f7f;padding-bottom:20px;margin-top:10px;
}
.aboutBox h4{
 color:#7f7f7f;
}

.imgBox{
    width:1200px;margin:30px auto 0;
}

#viewer li{
    position: relative;width:30%;float: left;margin-left:30px;
    border:1px solid #7f7f7f;margin-bottom:70px;
}
.width100{
    width:100%;
}

#viewer .vie{
    width:100%;position: absolute;top:50%;left:50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#viewer li p{
    position: absolute;bottom:-40px;width:100%;left:0;text-align: center;
    font-size: 24px;color:#7f7f7f;
}

@media screen and (min-device-width:1024px) and (max-device-width:1290px){
    body{
        padding-top:40px;
    }
    #viewer li{
        margin-bottom:40px;
    }
    #viewer li p{
        bottom:-20px;font-size: 16px;
    }
}
@media screen and (min-device-width:1290px) and (max-device-width:1580px){
    body{
        padding-top:45px;
    }
    #viewer li{
        margin-bottom:50px;
    }
    #viewer li p{
        bottom:-30px;font-size: 18px;
    }
}
@media screen and (min-device-width:1580px) and (max-device-width:1680px){
    body{
        padding-top:50px;
    }
    #viewer li{
        margin-bottom:60px;
    }
    #viewer li p{
        bottom:-40px;font-size: 21px;
    }
}