.tab-wrapper {
  width:800px;
  padding-left:20px;	
  float: left;	
}
.tab-wrapper .hd {margin-left:20px;}
.tab-wrapper .hd li {
  position:relative;
  background-color: #f0f0f0;
  color:#333333;
  display: inline-block;
  width:auto;
  padding:0 20px;
  height:40px;
  font-size:18px;
  font-weight:bold;
  line-height:40px;
  text-align:center;
  opacity: 0.9;
  cursor:pointer;
  z-index:0;
  margin-left:16px;
  border-radius:8px 8px 0 0;
}

.tab-wrapper .hd li:hover {
  color:#ffffff;
  background:#f96f86;
}

.tab-wrapper .hd li.on {
  background:#f96f86;
  color:#ffffff;
  opacity: 1;
}

.tab-wrapper .hd li.on:hover {
  color:#ffffff;
}
.tab-wrapper .bd {width:800px;background:#f0f0f0;height:320px;overflow:auto;border-radius:12px;}
.tab-wrapper .bd>ul {
  box-sizing:border-box;
  padding: 20px;   
}
.tab-wrapper .bd>ul>h3 {
  line-height:36px;
  font-size:18px;
  font-weight:bold; 
  color:#333333; 
}
.tab-wrapper .bd>ul>p {
  line-height:24px;
  text-indent:28px;	
}