.tabbox{

}
.tabbox>.table-header{
    /* list-style:none;
    height:84px;
    display:flex;
    flex-direction: row;
    justify-content: left;
    margin: 0px auto;
    border-bottom:2px solid #d6d6d9;
    padding-left:96px;
    padding-top:37px; */
}
.tabbox>.table-header>.item{
    cursor:pointer;
    color: #080808;
    font-size: 22px;
    font-weight:700;
    position: relative;
    width:100%;
    max-width:345px;
}
.tabbox>.table-header>.item.active{
    color: #8b8b8b;
}

.tabbox>.table-header>.item:hover {
	color: #8b8b8b;
}

.tabbox>.table-header>.item::after {
	display: block;
	content: '';
	width: 0;
	height: 2px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: all .36s;
}

.tabbox>.table-header>.item.active::after ,
.tabbox>.table-header>.item:hover::after{
	width: 47px;
}
.tabbox>.table-content{
    /* padding:10px; */
}

.tabbox>.table-content>.item{
    display:none;
}

.tabbox>.table-content>.item.active{
    display:block;
}

.tabbox>.table-content>.item.active.fade-down-1,.tabbox>.table-content>.item.active .fade-down-1{
    animation: fade-in;/*动画名称*/  
    animation-duration: .2s;/*动画持续时间*/  
    -webkit-animation:fade-in .2s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-2,.tabbox>.table-content>.item.active .fade-down-2{
    animation: fade-in;/*动画名称*/  
    animation-duration: .4s;/*动画持续时间*/  
    -webkit-animation:fade-in .4s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-3,.tabbox>.table-content>.item.active .fade-down-3{
    animation: fade-in;/*动画名称*/  
    animation-duration: .6s;/*动画持续时间*/  
    -webkit-animation:fade-in .6s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-4,.tabbox>.table-content>.item.active .fade-down-4{
    animation: fade-in;/*动画名称*/  
    animation-duration: .8s;/*动画持续时间*/  
    -webkit-animation:fade-in .8s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-5,.tabbox>.table-content>.item.active .fade-down-5{
    animation: fade-in;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 1s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-6,.tabbox>.table-content>.item.active .fade-down-6{
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.2s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.2s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-7,.tabbox>.table-content>.item.active .fade-down-7{
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.4s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.4s;/*针对webkit内核*/
}

.tabbox>.table-content>.item.active.fade-down-8,.tabbox>.table-content>.item.active .fade-down-8{
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.6s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.6s;/*针对webkit内核*/
}

@keyframes fade-in {  
    from {
        opacity: 0;
        -webkit-transform: translate(0,200px); /* Safari */
        transform: stranslate(0,200px); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform: translate(0,0px); /* Safari */
        transform: stranslate(0,0px); /* 标准语法 */
    }
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    from {
        opacity:0;
        -webkit-transform: translate(0,200px); /* Safari */
        transform: stranslate(0,200px); /* 标准语法 */
    }
    to {
        opacity:1;
        -webkit-transform: translate(0,0px); /* Safari */
        transform: stranslate(0,0px); /* 标准语法 */
    }
}  


.tabbox>.table-headera {
    /* list-style:none; */
    display:flex;
    margin: 0px auto;
}
.tabbox>.table-headera>.item{
    cursor:pointer;
    color: #737373;
    font-size: 16px;
    position: relative;
    padding: 7px 0px;
    margin: 0 auto;
}

.tabbox>.table-headera>.item.active{
    color: #fff;
    font-weight:normal;
}

.tabbox>.table-headera>.item:hover {
	color: #fff;
}

.tabbox>.table-headera>.item::after {
	display: block;
	content: '';
	width: 0;
	height: 2px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: all .36s;
}

.tabbox>.table-headera>.item.active::after ,
.tabbox>.table-headera>.item:hover::after{
	width: 47px;
}

.tabbox>.table-headerb {
    /* list-style:none; */
    display:flex;
    margin: 0px auto;
}
.tabbox>.table-headerb>.item{
    cursor:pointer;
    color: #909aa5;
    font-size: 16px;
    position: relative;
    padding: 7px 0px;
    margin: 0 auto;
}

.tabbox>.table-headerb>.item.active{
    color: #fff;
    font-weight:normal;
}
.tabbox>.table-headerb>.item.active a{
    color: #fff;
    font-weight:normal;
}

.tabbox>.table-headerb>.item:hover {
	color: #fff;
}

.tabbox>.table-headerb>.item::after {
	display: block;
	content: '';
	width: 0;
	height: 2px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: all .36s;
}

.tabbox>.table-headerb>.item.active::after ,
.tabbox>.table-headerb>.item:hover::after{
	width: 47px;
}