.tab {
    position: relative;
    width: 360px;
    height: 250px;
    margin-top: 20px;
    margin-right: 20px;
    float: left;
}

.tab:after {
    display: block;
    clear: both;
    content: '';
}

.tab.tab-line > .tab-title > li:after {
    position: absolute;
    top: 0;
    right: -1px;
    color: #d1d1d1;
    content: '|';
}

.tab.tab-card > .tab-title {
    margin: 0 0 -1px 1px;

}

.tab.tab-card > .tab-title > li {
    position: relative;
    height: 35px;
    line-height: 35px;
}

.tab.tab-card > .tab-title > li > span {
    position: relative;
    height: inherit;
    margin-left: -1px;
    border: solid 1px #d1d1d1;
    background: #fff;
    color: #737373;
    line-height: inherit;
}

.tab.tab-card > .tab-title > li.on > span {
    z-index: 10;
    border-bottom-color: #950302;
}

.tab.tab-card > .tab-body {
    border: solid 1px #d1d1d1;
    background: #fff;
    padding: 10px 10px;
}

.tab.tab-card-text > .tab-title {
    margin: 0 0 0 1px;
}

.tab.tab-card-text > .tab-title > li {
    position: relative;
    height: 35px;
    line-height: 35px;
}

.tab.tab-card-text > .tab-title > li > span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    border-top: solid 2px transparent;
    background: #fff;
    color: #737373;
    line-height: inherit;
}

.tab.tab-card-text > .tab-title > li.on > span {
    top: 1px;
    left: -1px;
    z-index: 10;
    border: solid 1px #d1d1d1;
    border-top: solid 2px #950302;
    border-bottom-color: #fff;
    color: #950302;
}

.tab.tab-card-text > .tab-body {
    padding: 10px 10px;
    border-top: solid 1px #d1d1d1;
    background: #fff;
}

.tab.tab-card-text.tab-line > .tab-title > li:after {
    right: 0;
}

.tab.tab-text > .tab-title > li {
    position: relative;
    height: 35px;
    line-height: 35px;
}

.tab.tab-text > .tab-title > li > span {
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
    height: 100%;

    font-size: 14px;
}

.tab.tab-text > .tab-title > li.on > span {
    top:-1px;
    z-index: 10;
    border-bottom: solid 3px #950302;
    color: #950302;
}

.tab.tab-text > .tab-body {
    padding:5px 0;

}

.tab > .tab-title {
    width: 100%;
    border-bottom: solid 1px #999;
}

.tab > .tab-title:after {
    display: block;
    clear: both;
    content: '';
}

.tab > .tab-title > li {
    display: block;
    float: left;
    min-width: 100px;
    text-align: center;
}

.tab > .tab-title > li > span {
    display: block;
    min-width: 100px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    padding: 0 10px;

}

.tab > .tab-title > li > span:hover {
    color: #950302;
}

.tab > .tab-title > li > span > i {
    float: right;
    margin-left: 5px;
    font-style: normal;
    color: #999999;
}

.tab > .tab-title > li > span > i:hover {
    color: #950302;
}

.tab > .tab-body {
    width: 100%;
}

.tab > .tab-body > li {
    display: none;
    width: 100%;
}

.tab > .tab-body > li.on {
    display: block;
}

.banner {
    position: relative;
    width: 1000px;
    height: 391px;
    margin-top: 20px;
    overflow: hidden;

}

.banner > .banner-main {
    position: relative;
    display: block;
    float: left;
    width: 760px;
    height: inherit;
}

.banner > .banner-main > li {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    overflow: hidden;
    transition: all .5s;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
}
.banner > .banner-main > li  img {
	 width: 760px;
    height: 390px;
	}
.banner > .banner-main > li.on{
    opacity: 1;
    filter:alpha(opacity=100);
    -moz-opacity:1;
}

.banner > .banner-nav {
    position: relative;
    display: block;
    float: right;
    width: 240px;
    height: 390px;
    margin-top: 1px;

}

.banner > .banner-nav > li {
    display:block;
    cursor: pointer;
    position: relative;
    width: 238px;
    height:129px;
    border: solid 1px #fff;
    margin-top: -1px;
    overflow: hidden;

}

.banner > .banner-nav > li  img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.banner > .banner-nav > li:hover img{
    transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
}

.banner > .banner-nav> li:hover  img {
    z-index: 2;
}


.banner > .banner-nav > li.on{
    z-index: 2;
    border: solid 1px #d1d1d1;
}

.banner > .banner-nav.banner-nav-img > li:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    content: '';
}