.tabs {width:98%;margin: 20px 1%;}
.tabs-box ul, .tabs-box ol {margin-left: 40px; list-style:none; margin-top: 20px;}


.tabs-nav {list-style: none;}
.tabs-nav li {
    position:relative;
    text-align:center;
    float:left;
    width: 28%;
    padding: 2%;
    background:#F4F8FB;
    border:1px solid #CCDCE8;
    cursor:pointer;
    color:#000; 
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;
font-size: 90%;
height: 30px;
font-weight: 700;}

.tabs-box ul {margin-left:30px; list-style: square outside;}
.tabs-box ul li{width: 99%; float: none; background: none; color: #000; font-weight: 300; font-size: 100%; height: auto; border: 0px;}

.tabs-nav li:nth-child(4){background: #8ad1ff; border:1px solid #8ad1ff;}
.tabs-nav li:nth-child(3){background: #BAE4B9; border:1px solid #BAE4B9;border-radius:0 20px 20px 0;}
.tabs-nav li:nth-child(2){background: #FFCA9E; border:1px solid #FFCA9E;}
.tabs-nav li:nth-child(1){background: #FEB4AE; border:1px solid #FEB4AE;border-radius:20px 0 0 20px;}

.tabs-nav li.active:nth-child(4){background: #43adf1; color:#fff;}
.tabs-nav li.active:nth-child(3){background: #71CC6F; color:#fff;}
.tabs-nav li.active:nth-child(2){background: #F8A057; color:#fff;}
.tabs-nav li.active:nth-child(1){background: #F37D73; color:#fff;}

.tabs-nav div {
    position: relative;
    background:#F4F8FB;
    border:1px solid #CCDCE8;
    color:#D1D5D8; 
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;
font-size: 90%;
height: 30px;
font-weight: 700; 
float: left;
text-align:center;
display: block;
    width: 30%;
    padding: 13px 0px 6px 0;
}


.tabs li:hover {color: #000;}
.tabs li.active {}
.tabs li.active b{border:1px solid #CCDCE8; padding: 3px 30px;}

.tabs li.two{width: 60%;}


.tabs li.vn{position:relative; text-align:center; float:left; width: 20%; min-width: 200px; background:#f5f5f5; border:1px solid #dddada; color:#536366; font-szie:90%;height: 20px; margin:0 0 0 0; font-size: 85%;}
.tabs li.vn.active {background: #ece7e7;}
.tabs li.vn.active::after {
content: '';
position: absolute;
bottom: -20px;
border: 10px solid transparent;
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: transparent;
border-top: 10px solid #ece7e7;
margin-left: -12px;
left: 50%;}


.tabs-box > div.vnbox {padding:5%; width: 90%; margin-top: -1px;}
.tabs-box > div {
background:#fdfdfd; width: 90%; padding:30px 0; display:none; text-align: left; float: left;
    -webkit-animation: fade 0.5s linear;
    -ms-animation: fade 0.5s linear;
    animation: fade 0.5s linear;
    padding: 5%;
    margin-top: -1px;
}  


.tabs-box > .active {display: block;}
@keyframes fade {
 0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }}
  
@media (max-width: 1000px) { 
.tabs {margin: 40px 1%;}}  
@media (max-width: 520px) {  
.tabs-box .tabs ul{margin-left:0;}
.tabs-nav li {width: 100%; padding: 6px 0 2px 0; margin-right: 2px;}}