@media (min-width: 320px){
    .wrap{width: 310px;}
    .h-float{position: relative;}
    .main-left, .f-popular, .f-list-1, .f-list-2,.h-tel{display: none;}
    .h-tel{top: 55px; right: 50px;}
    .f-info{text-align: center;}
    .f-info img{margin: 0 auto 20px;}
    .f-social a{display: inline-block; margin: 0 5px;}
    .f-social a:nth-last-child(2){vertical-align: top;}
}
@media (min-width: 360px){
    .wrap{width: 350px;}
}
@media (min-width:410px){
    .wrap{width: 400px;}
    .f-popular{display: block;}
    .f-popular input[type='submit']{width: calc(50%);}
}
@media (min-width: 480px){
    .wrap{width: 480px;}
    .h-tel{top: 13px; right: 255px;}
}
@media (min-width: 580px){
    .wrap{width: 580px;}
    .f-popular input[type='submit']{width: calc(100%/3);}
    .f-copy{float: left;}
    .f-design{float: right;}
}
@media (min-width: 767px){
    .wrap, .ws-title-wrapper{width: 767px;}
    .f-info{float: left; width: 360px; text-align: left;}
    .f-info img{margin: 0 0 20px;}
    .f-info ul li span{display: inline-block;}
    .f-info ul li span:nth-child(1){width: 75px; vertical-align: top;}
    .f-info ul li span:nth-child(2){width: calc(100% - 75px); vertical-align: top;}
    .f-social{float: right; width: 265px; text-align: left;}
    .f-social a{float: left; display: block; margin: 0 10px 0 0;}
    .f-social a:nth-last-child(2){margin: 0 0 0 10px; line-height: 30px; vertical-align: initial;}
}
@media (min-width: 970px){
    .wrap, .ws-title-wrapper{width:970px;}
    .h-float{position: absolute;}
    .main-left{float: left; display: block; width: 275px;}
    .main-right{float: right; width: calc(100% - 300px);}
    .f-popular input[type='submit']{width: 25%;}
    .f-info{margin-right: 70px;}
    .f-list-1{display: block;}
}
@media (min-width: 1170px){
    .wrap, .ws-title-wrapper{width: 1170px;}
    .f-popular input[type='submit']{width: 20%;}
    .f-list-2,.h-tel{display: block;}
}