.xl-tab .tab-area{
margin: 0;
padding: 0;
position: relative;
display: table;
}
.xl-tab li{
display: inline-block;
cursor: pointer;
}
.xl-tab .tab-content{
display: none;
}
.xl-tab .tab-content.active{
display: block;
}
.xl-tab .tab-content.active {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .5s;
}
.xl-tab .inrtab{
position: relative;
} .xl-tab.nvcenter ul.tab-area{
margin:0px auto;
text-align: center;
}
.xl-tab.nvright ul.tab-area,.nvleft ul.tab-area{
width: 100%;
}
.xl-tab.nvright ul.tab-area li{
float: right;
}
.xl-tab.nvcenter .tab-area li{
float: none;
} .xl-tab.styleone .tab-area li.active .inrtab div:before {
content: '';
display: block;
position: absolute;
left: 0px;
width: 100%;
bottom: -2px;
height: 2px;
background: black;
}
.styleone .tab-area li .inrtab {
background: #7a81f4;
color: #fff;
font-weight: bold;
transition: all 0.3s ease-in 0s;
} .styletwo li{
position:relative;
margin:0px 10px;
}
.styletwo li span:before {
content: "";
width: 100%;
height: 4px;
background: #f6f6f6;
position: absolute;
bottom: 0;
left: 0;
}
.styletwo li.active span:after {
width: 100%;
opacity: 1;
}
.styletwo li span:after {
content: "";
width: 0;
height: 4px;
background: #727cb6;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
z-index: 1;
transition: all 1s ease 0s;
} .stylethree li span:after {
content: "";
width: 0;
border-top: 3px solid #00a6ff;
position: absolute;
bottom: -1px;
left: 0;
transition: all 0.3s ease 0s;
left: auto;
right: 0;
}
.stylethree li span:hover:after,.stylethree li.active span:after {
width: 100%;
} .stylefive li:last-child .inrtab:before{
display:none;
}
.stylefive .active .inrtab{
background:#ff007a;
}
.stylefive li:last-child .inrtab:after,.stylefive  li:last-child .inrtab div:after {
display:none;
}
.stylefive .inrtab:before {
border-bottom: 10px solid rgba(0, 0, 0, 0);
border-left: 10px solid #fff;
border-top: 10px solid rgba(0, 0, 0, 0);
content: "";
position: absolute;
right: -8px;
top: 11px;
z-index: 2;
}
.stylefive .active .inrtab:before {
border-left: 10px solid #ff007a;
}
.stylefive .active .inrtab:after,.stylefive  .inrtab div:after {
content: "";
border-left: 10px solid #ff007a;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
top: 11px;
right: -10px;
z-index: 1;
}
.stylefive .inrtab:after {
border-left: 10px solid red;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}