/**!
* 北外滩开发建设专栏
* date: 2022-10-31
* author:wzhchao
*/
/* img {
    width: 100%;
} */
.generalize {
    min-height: 490px;
    padding-bottom: 86px;
    box-sizing: border-box;
    background: url('../images/generalize_bg.png') no-repeat center bottom;
}
.generalize-l {
    width: 320px;
    height: 404px;
    background: url('../images/generalize_l.png') no-repeat center top;
}
.generalize-r {
    margin-left: 410px;
}
.generalize-tt {
    margin-top: 64px;
    line-height: 47px;
    color: #2e3033;
    font-size: 32px;
    font-weight: bold;
}
.generalize-paragraph {
    margin-top: 25px;
}
.generalize-paragraph p {
    line-height: 31px;
    color: #60666d;
    font-size: 18px;
    margin-bottom: 12px;
}
.generalize-btn {
    margin-top: 26px;
    text-align: right;
}
.generalize-btn a {
    display: inline-block;
    vertical-align: top;
    height: 40px;
    padding: 0 43px;
    transform: skew(-45deg);
    line-height: 40px;
    background: #f1f6ff;
    border-radius: 2px;
    color: #3164c7;
    font-size: 16px;
    position: relative;
    margin-right: 20px;
}
.generalize-btn a::before {
    content: '';
    position: absolute;
    height: 40px;
    width: 10px;
    border-radius: 2px;
    background: #2d6be2;
    transform: translateY(-50%);
    left: 0;
    top: 50%;
}
.generalize-btn a:hover {
    background: #2d6be2;
    color: #fff;
}
.generalize-btn a span {
    position: relative;
    display: inline-block;
    transform: skew(45deg);
    vertical-align: top;
}
.generalize-btn a:hover span::before {
    position: absolute;
    content: '';
    width: 17px;
    height: 11px;
    background: url('../images/btn_arrow.png') no-repeat center top;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
}
.advance {
    padding-top: 80px;
    padding-bottom: 48px;
}
.com-hd {
    line-height: 84px;
    height: 84px;
    position: relative;
}
.com-tt {
    font-size: 32px;
    color: #2e3033;
    font-weight: bold;
}
.com-hd::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}
.com-hd.advance-tt::before {
    width: 299px;
    height: 42px;
    background: url('../images/latest.png') no-repeat center top;
}
.com-tt::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 6px;
    background: #f1b946;
    border-radius: 1px;
    bottom: -6px;
    left: 0;
}
.com-more {
    color: #8a8f99;
    font-size: 16px;
    padding-right: 22px;
    background: url('../images/more_arrow.png') no-repeat center right;
}
.com-list {
    margin-top: 34px;
}
.com-list-item {
    line-height: 48px;
}
.com-list-item span {
    color: #949baa;
    font-size: 16px;
}
.com-list-item a {
    color: #2e3033;
    font-size: 16px;
    display: block;
    margin-right: 100px;
    padding-left: 16px;
    position: relative;
}
.com-list-item a::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #2d6be2;
    border-radius: 1px;
    transform: rotate(45deg) translateY(-50%);
    left: 0;
    top: 50%;
}
.com-list-item:hover a,
.com-list-item:hover span {
    color: #2d6be2;
}
.plan {
    min-height: 534px;
    padding-top: 80px;
    padding-bottom: 48px;
    box-sizing: border-box;
    background: url('../images/plan_bg.jpg') no-repeat center bottom;
}
.com-hd.plan-tt::before {
    width: 396px;
    height: 42px;
    background: url('../images/plan.png') no-repeat center top;
}
.media {
    padding-top: 80px;
    padding-bottom: 64px;
}
.com-hd.media-tt::before {
    width: 243px;
    height: 42px;
    background: url('../images/media.png') no-repeat center top;
}
.media-list {
    margin: 42px -15px 0;
}
.media-item {
    width: 33.333333%;
}
.media-con {
    display: block;
    margin: 0 15px 24px;
    position: relative;
    height:278px;
}
.media-con img{
    width:100%;
    height:100%;
}
.media-shadow {
    width: 100%;
    position: absolute;
    height: 52px;
    background: rgba(0, 0, 0, 0.8);
    padding: 0 15px;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 16px;
    line-height: 52px;
}

.media-con:hover {
    transform: scale(1.1);
}
@media (max-width: 980px) {
    .generalize-tt{
        margin-top: 30px;
    }
    .media-item {
        width: 50%;
    }
}

@media (max-width: 812px) {
    .generalize-tt{
        margin-top:10px;
    }
    .generalize-btn{
        text-align: center;
    }
    .media-item {
        width: 100%;
    }
    .generalize-l{
        float: none !important;
    }
    .generalize-r{
        width: 100%;
        margin-left: 0;
    }
    .media-list{
        padding: 0 15px;
    }
    .media-con:hover{
        transform: scale(1);
    }
    .media-list{
        margin: 42px 0 0;
    }
    .media-con{
        margin: 0 0 24px;
        height: auto ;
    }
}


@media (max-width: 396px){
    .com-hd.plan-tt::before{
       width: auto;
       left: 0;
       right: 0;
    }
}