@media (min-width: 320px){
    .wrap{width: 310px;}
    .main-right, .footer-list{display: none;}
    .footer-info{text-align: center;}
    .button a{width: 30px; height: 30px;}
    .product-content{border: none;padding: 0;}
}
@media (min-width: 360px){
    .wrap{width: 350px;}

}
@media (min-width:410px){
    .wrap{width: 400px;}

}
@media (min-width: 480px){
    .wrap{width: 480px;}
    .footer-copy{float: left;}
    .footer-design{float: right;}
    .footer-face{width: 460px;}
    .button a{width: 40px; height: 40px;}
}
@media (min-width: 580px){
    .wrap{width: 580px;}
    
}
@media (min-width: 768px){
    .wrap, .ws-title-wrapper{width: 758px;}
}
@media (min-width: 970px){
    .wrap, .ws-title-wrapper{width:970px;}
    
    .main-left{float: left; width: calc(100% - 330px);}
    .main-right{float: right; display: block; width: 300px;}
    .product-content{border: 1px solid #d7d7d7;padding: 10px;}
    .footer-info{float: left; width: 420px; margin-right: 30px; text-align: left;}
    .footer-list{float: left; display: block; width: 200px; margin-right: 30px;}
    .footer-face{float: left; width: 290px;}
}
@media (min-width: 1170px){
    .wrap, .ws-title-wrapper{width: 1170px;}
    .footer-info{width: 480px; margin-right: 50px;}
    .footer-list{width: 250px; margin-right: 50px;}
    .footer-face{width: 340px;}
}