html,body {width:100%;  }
body,div,ul,li{margin:0; padding:0;}
ul,li {list-style:none;}

<style>
@media only screen and (max-width:800px) {
.dvLocation {width:320px;}
.tab {width:320px;}
.visual {width:320px;}

}
@media (min-width:800px) {
.visual {width:500px;}
.tabcontent {width:600px;}
.tab {width:600px;}
}
</style>

/*tab css*/
.tab{float:left; width:640px;}
.tabnav{font-size:0; width:640px; border:1px solid #ddd;}
.tabnav li{display: inline-block;  height:46px; text-align:center; border-right:1px solid #ddd;}
.tabnav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tabnav li a.active:before{background:#7ea21e;}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:25px; text-decoration:none; font-size:12px;}
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#7ea21e; }
.tabcontent{padding: 20px;  border:1px solid #ddd; border-top:none;}