/*第一套*/
.tabboxa {

}
.tabboxa>.table-headera{
    /* 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; */
}
.tabboxa>.table-headera>.item{
    cursor:pointer;
    /*color: #080808;
    font-size: 22px;
    font-weight:700;
    position: relative;
    width:100%;
    max-width:345px;*/
}
.tabboxa>.table-headera>.item.active{
    /*color: #8b8b8b;*/
}

.tabboxa>.table-headera>.item:hover {
	/*color: #8b8b8b;*/
}

.tabboxa>.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;*/
}

.tabboxa>.table-headera>.item.active::after ,
.tabboxa>.table-headera>.item:hover::after{
	width: 47px;
}
.tabboxa>.table-contenta{
    /* padding:10px; */
}

.tabboxa>.table-contenta>.item{
    display:none;
}

.tabboxa>.table-contenta>.item.active{
    display:block;
}

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

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

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

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

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

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

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

.tabboxa>.table-contenta>.item.active.fade-down-8,.tabboxa>.table-contenta>.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); /* 标准语法 */
    }
}  


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

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

.tabboxa>.table-headeraa>.item:hover {
	color: #fff;
}

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

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

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

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

.tabboxa>.table-headerab>.item:hover {
	color: #fff;
}

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

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


/*第二套*/
.tabboxb {

}
.tabboxb>.table-headerb{
    /* 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; */
}
.tabboxb>.table-headerb>.item{
    cursor:pointer;
    /*color: #080808;
    font-size: 22px;
    font-weight:700;
    position: relative;
    width:100%;
    max-width:345px;*/
}
.tabboxb>.table-headerb>.item.active{
    /*color: #8b8b8b;*/
}

.tabboxb>.table-headerb>.item:hover {
	/*color: #8b8b8b;*/
}

.tabboxb>.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;*/
}

.tabboxb>.table-headerb>.item.active::after ,
.tabboxb>.table-headerb>.item:hover::after{
	width: 47px;
}
.tabboxb>.table-contentb{
    /* padding:10px; */
}

.tabboxb>.table-contentb>.item{
    display:none;
}

.tabboxb>.table-contentb>.item.active{
    display:block;
}

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

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

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

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

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

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

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

.tabboxb>.table-contentb>.item.active.fade-down-8,.tabboxb>.table-contentb>.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); /* 标准语法 */
    }
}  


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

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

.tabboxb>.table-headerba>.item:hover {
	color: #fff;
}

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

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

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

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

.tabboxb>.table-headerbb>.item:hover {
	color: #fff;
}

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

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