﻿.honor_boxleft {
    /* flex: 1; */
    width: 45%;

}

.honor_boxright {
    /* flex: 1; */
    width: 45%;
}

.honor_box {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    align-items: center;
}

.honor_con {
    position: relative;
    padding-top: 36px;
    padding-bottom: 52px;
}

.honor_coinmg {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.honor_boxleft1 {
    color: #333;
    font-family: Microsoft YaHei;
    font-style: normal;
    font-weight: 700;
    line-height: 54px;
    /* 150% */
    position: relative;
    display: inline-block;
}

.honor_boxleft1::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -18px;
    /* width: 300px; */
    width: 80%;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.3;
    background: linear-gradient(270deg, #FF0800 0%, rgba(202, 21, 15, 0.00) 94.19%);
}

.honor_boxleft2 {
    position: relative;

    color: #333;
    font-family: Microsoft YaHei;
    font-style: normal;
    font-weight: 700;
    line-height: 54px;
    /* 150% */
    display: inline-block;

}

.honor_boxleft2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0px;
    /* width: 300px; */
    width: 80%;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.3;
    background: linear-gradient(90deg, #FF0800 0%, rgba(202, 21, 15, 0.00) 94.19%);
}

.honor_boxleft3 {
    color: #666;
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
    margin-top: 60px;

}

.honor_boxleft4 {
    color: #666;
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
    margin-top: 30px;

}

.honer_box {
    position: relative;
}

.honer_boxmb {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    background: linear-gradient(180deg, #999 0%, rgba(153, 153, 153, 0.00) 100%);
}

.honer_con {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;



}

.honer_contop {
    margin-top: 50px;
    padding-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.honer_click {
    position: relative;
    color: #FFF;
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    /* 300% */
    margin-right: 50px;
    cursor: pointer;
}

.honer_click::after {
    content: '';
    position: absolute;
    width: 0%;
    background: #D9B569;
    height: 4px;
    bottom: -11px;
    left: 0;



}

.honer_click.active::after {
    width: 100%;
}

.honer_click.active {
    color: #D9B569;

    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.honer_conbottom {
    margin-top: 123px;
    width: 100%;

}

.honer_conbottomleft {
    width: 40%;
}

.honer_conbottomright {
    width: 60%;
    flex-wrap: wrap;
    display: none;
    max-height: 528px;
    overflow-y: scroll;
}

.honer_conbottomright::-webkit-scrollbar {

    display: none;
}

.honer_conbottomright.active {

    display: flex;
}

.honer_conbottom {
    display: flex;
}

.honer_conever {
    min-width: 400px;
    max-width: 400px;
    padding: 10px 50px;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    border-radius: 40px;
    background: #FFF;

}

.honer_conever span {
    color: #666;
    font-family: Microsoft YaHei;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    /* 266.667% */
    /* margin-left: 20px; */
    -webkit-line-clamp: 1;
    /*设置了最大显示行数为2行，超出的内容将被隐藏。*/
    display: -webkit-box;
    /*声明将元素以flex盒子布局方式显示*/
    -webkit-box-orient: vertical;
    /*设置了盒子的主轴方向为垂直方向*/
    overflow: hidden;
    /*声明当内容溢出容器时进行隐藏。*/
    text-overflow: ellipsis;
    /*声明当文本溢出容器时使用省略号表示*/
}

.honer_conever {
    display: flex;
    align-items: center;
    margin-right: 6.944%;
    margin-bottom: 20px;
}

.honer_conever:nth-child(2n) {
    margin-right: 0px;
}

@media(max-width:1718px) {
    .honer_conbottomright {
        max-height: 450px;

    }

    .honer_conbottom {
        margin-top: 80px;
    }

}

@media(max-width:1591px) {
    .honer_conbottomright {
        max-height: 450px;

    }

    .honer_conbottom {
        margin-top: 80px;
    }

    .honer_conever {
        min-width: 350px;
        max-width: 350px;
    }

    .honer_conever {
        display: flex;
        align-items: center;
        margin-right: 30px;
        padding: 10px 30px;
    }

    .honer_conbottomright {
        max-height: 400px;
    }

}

@media(max-width:1444px) {
    .honer_conever {
        min-width: 300px;
        max-width: 300px;
    }

    .honer_conbottomright {
        max-height: 350px;
    }

}

@media(max-width:1266px) {
    .honer_conever {
        min-width: 250px;
        max-width: 250px;
        padding: 5px 15px;
    }

    .honer_conbottomright {
        max-height: 300px;
    }



}

@media(max-width:1198px) {
    .honer_conever {
        min-width: 250px;
        max-width: 250px;
        padding: 5px 15px;
    }

    .honer_conbottomright {
        max-height: 300px;
    }

    .honer_conbottom {
        margin-top: 40px;
    }



}

@media(max-width:1060px) {


    .honor_box{
        flex-wrap: wrap;
    }
    .honor_boxleft{
        width: 100%;
    }
    .honor_boxright{
        width: 100%;
        margin-top: 20px;
    }
    .honer_conever {
        min-width: 100%;
    }
    .honor_boxleft {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }
    .honer_conbottomright {
        justify-content: center;
        flex-wrap: wrap;
    }

    .honer_conever {
        display: flex;
        align-items: center;
        margin-right: 0;
        padding: 10px 30px;
    }

    .honer_conbottomright {
        max-height: 250px;
    }

    .honer_contop {
        margin-top: 30px;
    }
}

    @media(max-width:916px) {
        .honer_contop {
            flex-wrap: wrap;
        }

        .honer_click {
            width: 100%;
        }

        .honer_box>img {
            display: none;
        }

        /* .honer_boxmb {
            display: none;
        } */

        .honer_con {
            position: relative;
            width: 100%;
            transform: translate(0,0);
            height: 100%;
            left: 0;
            right: 0;
        }
        .honer_conbottomright {
            max-height: 300px;
        }
        .honer_conbottomleft{
            display: none;
        }
        .honer_conever {
            min-width: 100%;
        }
        .honer_click{
            margin-top: 20px;
        }
        .honer_conbottomright{
            width: 100%;
        }
    
       
     
    }
    @media(max-width:460px) {
   
        .honor_boxleft3 {
          
            margin-top: 30px;
        }
        .honor_con {
            padding-bottom: 30px;
        }
   
    }