.mt20{
    margin-top: 20px;
}
.main-left-container{
   width: 880px;
}
.futures-price-box{
    padding: 28px 20px 8px;
    background: #FFFFFF;
}
.futures-price-box .futures-price-box-header{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
}
.priceSwiper{
    width: 100%;
    height: 405px;
    margin-left: auto;
    margin-right: auto;
}
.futurePriceSwiper{
    height: 470px;
}
 .swiper-wrapper{
    flex-direction: column;
    flex-wrap: wrap;
     height: 300px;
}
.futurePriceSwiper .swiper-wrapper{
    height: 380px;
}
.swiper-slide {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
.stock-item{
    border-radius: 4px;
    border: 1px solid #DBDEE2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 195px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 20px 0;
    height: fit-content;
}
.stock-item:nth-child(4n){
    margin-right: 0;
}
.h1-title{
    color: #292929;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 1px solid #EBECEF;
}
.futures-price-box .futures-price-box-header .futures-price-title{
    color: #292929;
    font-size: 18px;
    font-weight: 500;
}
.futures-price-box .futures-price-box-header .futures-price-title:before{
    content: '';
    background: #3875F6;
    height: 16px;
    width: 4px;
    display: inline-block;
    border-radius: 15px;
}
.right-btn-arrow {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 20px;
    background-image: url('../image/more_arr_b.png');
    background-position: right 4px;
    background-repeat: no-repeat;
    background-size: 14px;
    padding-right: 20px;
    cursor: pointer;
    color: #3C7BFF;
}
.right-btn-arrow a{
    color: #3C7BFF;
}
.stock-item-brand{
    color: #292929;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
    width: 170px;
    height: 44px;
}
.stock-item-tag{
    color: #646464;
    font-size: 12px;
    margin-bottom: 12px;
}
.stock-item-price{
    font-weight: 500;
    font-size: 26px;
}
.mgb-16{
    margin-bottom: 16px;
}
.stock-item-floating{
    display: flex;
    font-size: 14px;
}
.stock-item-floating-first{
    margin-right:12px;
}


.swiper-button-prev{
    background-image: url("../image/ic_previous.png");
    background-size: 44px;
    width: 44px;
    left: -1px;
    top:180px;
}
.swiper-button-prev:after{
    content: '';
}

.swiper-button-next{
    background-image: url("../image/ic_next.png");
    background-size: 44px;
    width: 44px;
    right: -1px;
    top:180px;
}
.futurePriceSwiper .swiper-button-next{
    top: 218px;
}
.futurePriceSwiper .swiper-button-prev{
    top: 218px;
}
.swiper-button-next:after{
    content: '';
}
.swiper-button-disabled{
    opacity: 0.2;
}

.breadcrumbs-list{
    margin-top: 20px;
}
.futures-table-box{
    width: 100%;
    background: #FFFFFF;
    display: flex;
    padding: 28px 20px 0;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.futures-name-box{
    width: 270px;
}
.futures-table-price-box{
    width: 222px;
}
.futures-floating-box{
    width: 238px;
}
.futures-floating-proportion-box{
    width: calc(100% - 270px - 270px - 222px - 238px);
}
.futures-table-title{
    color: #444444;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 28px;
}
.futures-table-value{
    color: #292929;
    margin-bottom: 28px;
}
.futures-category-box{
    width: 270px;
}
.futures-market-box{
    width: 222px;
}
.futures-minimum-price-box{
    width: 238px;
}
.futures-highest-price-box{
    width: 238px;
}
.futures-Chg-box{
   width: calc(100% - 270px - 222px - 238px - 238px);
}
.category-body{
    position: relative;
}
.category-tab{
    position: absolute;
    top: 0;
    padding:16px 8px;
    left: -94px;
    background: #FFFFFF;
    cursor: pointer;
}
.category-tab-item{
    padding: 10px 20px;
    display: block;
}

.category-tab-item-active{
    background: #3C7BFF;
    color: #FFFFFF;
}

a:hover, a {
    text-decoration: none;
}
.card-container {
    background-color: #fff;
    padding: 28px 20px;
}


.card-container  .card-title-container {
    overflow: hidden;
}
.card-container  .card-title-container h5, h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #292929;
    float: left;
    margin: 0;
}
.card-container  .card-title-container .right-btn-arrow {
    float: right;
    line-height: 24px;
    background-position: right center;
    color: #3C7BFF;
    background-image: url('../image/more_arr_b.png');
    background-repeat: no-repeat;
    background-size: 14px;
    padding-right: 20px;
    cursor: pointer;
}
.card-container  .card-title-container .right-btn-arrow a {
    color: #3C7BFF;
}
.recommand-list {
    width: 300px;
    height: fit-content;
}
.recommand-list-wrapper .recommand-wrapper-item  {
    margin-top: 24px;
}
.recommand-list-wrapper .recommand-wrapper-item:first-child  {
    margin-top: 20px;
}
.recommand-list-wrapper .recommand-wrapper-item .recommand-item-pic{
    width: 260px;
    height: 146px;
    position: relative;
    overflow: hidden;
}
.recommand-list-wrapper .recommand-wrapper-item .recommand-item-pic::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, #000000 100%);
    opacity: 0.05;
}
.recommand-list-wrapper .recommand-wrapper-item img,
.recommand-list-wrapper .recommand-wrapper-item video {
    width: 100%;
    height: 100%;
}
.recommand-list-wrapper .recommand-wrapper-item img {
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.recommand-list-wrapper .recommand-wrapper-item .recommand-item-content {
    font-size: 16px;
    line-height: 22px;
    color: #292929;
    padding-top: 12px;
}

.video-icon {
    position: relative;
}
.video-icon::after {
    width: 36px;
    height: 36px;
    content: '';
    position: absolute;
    background-image: url('../image/video_icon_b.png');
    background-size: 100%;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -18px;
}
.video-icon-b::after {
    background-image: url('../image/video_icon.png');
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
}

/**推荐新闻***/
.recommend-news-card{
    background: #FFFFFF;
    padding: 28px 20px;
    margin:20px 0 ;
}
.recommend-news-content{
    overflow: hidden;
    position: relative;
    padding-bottom: 58px;
}
/*.recommend-news-card .swiper-slide{*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/
.recommend-news-card .card-title-container{
    display: flex;
    justify-content: space-between;
}
.recommend-news-item{
    margin-top: 32px;
}
.recommend-news-item-title{
    color: #292929;
    font-size: 16px;
    margin-bottom: 14px;
    font-weight: 500;
}
.recommend-news-item-content{
    display: none;
}
.recommend-news-item-content-img{
    width: 175px;
    height: 98px;
    margin-right: 20px;
}
.recommend-news-item-content-info{
    color: #646464;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.recommend-news-item-content-footer{
    display: flex;
    justify-content: space-between;
    color: #9A9EAB;
}
.recommend-news-item-content-footer .author{
    font-size: 14px;
}
.recommend-news-item-content-footer .time{
    line-height: 14px;
}
.recommend-news-item-content-footer .time::before{
    content: '';
    background: url('../image/ic-time.png');
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background-size: contain;
    margin-bottom: -2px;
}
.recommend-news-card .swiper-pagination {
    bottom: 18px;
}

.zx-tab {
    display: flex;
    padding-top: 25px;
    border-bottom: 1px solid #EBECEF;
    justify-content: space-between;
}
.zx-tab  .zx-tab-container {
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 60px);
}
.zx-tab-container .zx-tab-item {
    display: inline-block;
    vertical-align: top;
    padding-right: 48px;
}
.zx-tab .zx-tab-more a.more-text,
.zx-tab-container .zx-tab-item a{
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #646464;
    text-decoration: none;
    display: block;
    padding: 7px 0;
    position: relative;
}
.zx-tab-container .zx-tab-item a::after {
    content: '';
    background-color: transparent;
    width: 50%;
    height: 3px;
    border-radius: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -25%;
}
.zx-tab-container .zx-tab-item:hover a,
.zx-tab-container .zx-tab-item.active a {
    color: #3875F6;
}
.zx-tab-container .zx-tab-item:hover a::after,
.zx-tab-container .zx-tab-item.active a::after {
    background-color: #3875F6;
}
.zx-tab .zx-tab-more {
    position: relative;
}
.zx-tab .zx-tab-more a.more-text{
    background-image: url('../image/sel_arr_ic.png');
    background-position: right 12px;
    background-size: 16px;
    background-repeat: no-repeat;
    padding-right: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.more-container-wrapper:hover,
.zx-tab .zx-tab-more a.more-text:hover ~.more-container-wrapper {
    display: block;
}
.more-container-wrapper {
    position: absolute;
    top: 38px;
    right: 0;
    display: none;
}
.more-tab-container {
    background-color: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 8px 12px;
    min-width: 320px;
    border: 1px solid #EBECEF;
    position: relative;
    z-index: 2;
}
.more-tab-container::before {
    top: -20px;
    right: 12px;
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color: #fff;
}

.angel-icon-box{
    height: 20px;
    position: absolute;
    width: 321px;
    top: -11px;
}
.angel-icon {
    background-image: url('../image/trangle_ico.png');
    background-size: cover;
    width: 24px;
    height: 14px;
    position: absolute;
    right: 12px;
    /* z-index: 2; */
}

.more-tab-container li {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #646464;
    padding-right: 12px;
    padding: 4px 12px 4px 0px;
    float: left;
    cursor: pointer;
}

.more-tab-container li a {
    color: #646464;
    font-weight: 600;
}
.more-tab-container li a:hover {
    color: #3875F6;
}

/* 资讯tab ---end */
.news-content-list .news-content-item{
    margin-top: 32px;
}
.news-content-item:hover .news-content-title{
    color: #3875F6;
}
.news-content-item:hover .news-content-pic img{
    transform: scale(1.2);
}
.news-content-list .news-content-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #292929;
    margin-bottom: 0;
}
.news-content-list .news-content-info {
    display: flex;
    padding-top: 12px;
}
.news-content-list .news-content-pic {
    width: 174px;
    height: 98px;
    flex-shrink: 0;
    overflow: hidden;
}
.news-content-list .news-content-pic img {
    width: 100%;
    height: 100%;
    transition: all 0.4s;
}
.news-content-list .news-content-des {
    padding-left: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.news-content-list .news-content-des .destro{
    font-size: 14px;
    line-height: 20px;
    color: #646464;
    height: 40px;
}

.news-content-item .prod {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px;
    color: #9D9FA2;
}
.time-icon {
    background-image: url('../image/time_ico.png');
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: left center;
    padding-left: 18px;
}

.price-green{
    color: #4DA869;
}
.price-red{
    color: red;
}