.header {
    height: 67px;
    border-bottom: 1px solid #f0f0f0;
}

.header .logo {
    line-height: 67px;

}

.header .logo img {
    width: 131px;
    height: 39px;
    margin-right: 39px;
    margin-top: 14px;
}

.logo ul {}

.logo ul li {
    float: left;
    font-weight: 300;
    margin-right: 4px;
    position: relative;
}

.logo ul li a {
    display: block;
    height: 100%;
    color: #333;
    font-size: 16px;
    padding: 0 14px;
}

.logo ul .active {
    font-weight: 600;
    background: #ffe443;
}

.menu {
    line-height: 50px;
    position: absolute;
    width: 170px;
    height: 155px;
    background: #fff;
    box-shadow: 0 0 30px 0 rgb(65 67 70 / 8%);
    left: 50%;
    margin-left: -85px;
    top: 61px;
    display: none;
    z-index: 3;
}

.menu .item:hover {
    background: #ffdf1f;
}

.logo ul li:hover .menu {
    display: inline-block;
}

.header .search {}

.search .search_wrap {
    width: 294px;
    height: 34px;
    background: #f5f5f5;
    ;
    margin-top: 16.5px;
}

.search .search_wrap i {
    top: 50%;
    margin-top: -8px;
    left: 8px;
    font-size: 16px;
    color: #999;
}

.search .search_wrap input {
    background: #504e4e00;
    width: 100%;
    height: 100%;
    padding-left: 30px;
}

.search .logo_text {
    line-height: 67px;
    font-size: 14px;
    color: #333;
}

.sub_nav {
    height: 54px;
    line-height: 54px;
}

.sub_nav ul {
    margin-left: 206px;
}

.sub_nav ul li {
    float: left;
    margin-right: 34px;
    position: relative;
}

.sub_nav ul .active::after {
    content: "";
    position: absolute;
    height: 6px;
    width: 100%;
    background: #ffe443;
    bottom: 19px;
    left: 0;
    z-index: -1;
}

.sub_nav ul li a {
    font-size: 14px;
    font-family: 300;
    color: #333;
}

.banner {
    height: 350px;
}

.banner img {
    width: 100%;
    height: 100%;
}

.banner i {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background: #00000038;
    color: #fff;
    border-radius: 100%;
    top: 50%;
    margin-top: -30px;
}

.icon-htmal5icon39 {
    left: 25px;
}

.icon-htmal5icon39-copy {
    right: 25px;
}

.banner ul {
    width: 100%;
    height: 60px;
    bottom: 0;
    background: rgba(0, 0, 0, .15);
}

.banner ul li {
    float: left;
    width: 25%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    position: relative;

}

.banner ul li ::after {
    position: absolute;
    width: 1px;
    height: 28px;
    background: hsla(0, 0%, 100%, .1);
    content: "";
    right: 0;
    top: 50%;
    margin-top: -14px;
}

.banner ul li:last-child::after {
    width: 0px !important;
}

/* last-child 选中最后一个  */

.recommend {
    margin-top: 60px;
    margin-bottom: 24px;

}

.recommend .recommend_title {
    width: 1192px;
    margin: 0 auto;
    height: 40px;
    line-height: 50px;
}

.recommend .recommend_title h3 {
    font-size: 28px;
    margin-right: 40px;
    line-height: 40px;
    display: block;
    width: 112px;
    height: 40px;
    color: #333;
    

}

.recommend .recommend_title .data {}

.recommend .recommend_title .data li {
    float: left;
    margin-right: 34px;
    position: relative;
    
}

.recommend .recommend_title .data li a {
    color: #333;
}

.recommend .recommend_title .data .active::after {
    content: "";
    position: absolute;
    height: 6px;
    width: 100%;
    background: #ffe443;
    bottom: 17px;
    left: 0;
    z-index: -1;
}

.recommend_list {
 
}
.recommend_list {
    width: 1192px;
    height: 100%;
    float: left;
    margin-left: 163px;

}
.recommend_list li {
    width: 20%;
    float: left;
}

.recommend_list .top {
    width: 177px;
    height: 177px;
}
.recommend_list .text {}