@media (min-width: 320px){
    .wrap{width: 310px;}
    .h-top-1, .h-top-3, .main-left, .f-list,.h-search{display: none;}
    .h-bot{padding-top: 5px;}
    .logo{margin: 0 auto 5px;}
    .f-right{padding-top: 20px;}
    .comment_name, .comment_email{float: left; width: 100%; margin: 0 0 3px 0;}
    .share-btn{margin-left: 5px;}
    .like-btn, .dislike-btn{margin: 15px 0 0 5px;}
}
@media (min-width: 360px){
    .wrap{width: 350px;}
    .h-top-4{padding-left: 40px; background: url(images/dn.png) no-repeat center left;}
}
@media (min-width:410px){
    .wrap{width: 400px;}
    .h-top-2{padding-left: 40px; background: url(images/cs.png) no-repeat center left;}
    .comment_name, .comment_email{float: left;w idth: 146px; margin: 0 10px 0 0;}
}
@media (min-width: 480px){
    .wrap{width: 480px;}
    .h-bot{padding-top: 10px;}
    .logo{margin: 0 auto 15px;}
    .comment_name, .comment_email{float: left; width: 181px; margin: 0 10px 0 0;}
    .share-btn{margin-left: 30px;}
    .like-btn, .dislike-btn{margin: 15px 0 0 10px;}
}
@media (min-width: 580px){
    .wrap{width: 580px;}
    .f-info{float: left; width: calc(100% - 210px); margin-left: 15px;}
    .f-right{float: right; width: 180px; margin-right: 15px; padding-top: 20px;}
    .comment_name, .comment_email{float: left; width: 231px; margin: 0 10px 0 0;}
}
@media (min-width: 767px){
    .wrap, .ws-title-wrapper{width: 767px;}
    .h-bot{padding-top: 15px;}
    .h-top-2{margin-right: 45px;}
    .h-top-3,.h-search{display: block;}
    .comment_name, .comment_email{float: left; width: 258px; margin: 0 10px 0 0;}
}
@media (min-width: 970px){
    .wrap, .ws-title-wrapper{width:970px;}
    .h-top-1{display: block; width: 255px;}
    .main-left{float: left; display: block; width: 270px;}
    .main-right{float: right; width: calc(100% - 300px);}
     .f-info{width: 500px;}
    .f-list{display: block; width: 225px;}
}
@media (min-width: 1170px){
    .wrap, .ws-title-wrapper{width: 1170px;}
    .h-top-1{width: 385px;}
    .f-info{width: 550px;}
    .f-list{width: auto;}
}