@charset "utf-8";
.banner{ overflow: hidden; position: relative; z-index: 1;}
.banner a{ position: relative; display: block; max-width: unset; filter: unset;}
.banner a::before{ content: ''; display: block; width: 100%; height: 108px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.641007) 100%);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.641007) 100%);
    background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.641007) 100%);
    position: absolute; bottom: 0; left: 0; z-index: 1;
}
.banner .img{ padding-bottom: calc(450% / 19.2);}
.banner .title{ position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    line-height: 37px; font-size: 28px; font-weight: bold; color: #fff; z-index: 1;}

.content{ margin-top: 56px;}
.modeTil{ padding-bottom: 14px; border-bottom: 1px solid #003670; align-items: center;}
.modeTil .title{ font-weight: bold; line-height: 32px;}
.modeTil .more{ color: #999;}
/* 新闻资讯 */
.row1 .modeCon{ margin-top: 19px;}
.mode1{width: 60%;}
.mode1 .left{width: 351px;background: #F9F9F9;}
.mode1 .right{width: calc(100% - 372px);}
.mode1 .info{ padding: 15px; box-sizing: border-box; position: relative; overflow: hidden;}
.mode1 .info::before{ content: ''; display: block; width: 100%; height: 0%; background: #003670; transform: skewX(90deg); transform-origin: bottom center; border-radius: 100% 100% 0 0;
    position: absolute; bottom: 0; left: 0; z-index: 0; transition: all 0.35s ease;}
.mode1 a:hover .info::before{ height: 100%; transform: skewX(0deg); border-radius: 0%;}
.mode1 .info .title{ line-height: 24px; height: 48px; position: relative; z-index: 1; transition: all 0.35s ease;}
.mode1 .info .summary{ margin-top: 5px; line-height: 22px; color: #999; position: relative; z-index: 1; transition: all 0.35s ease;}
.mode1 .info .date{ margin-top: 23px; transition: all 0.35s ease;}
.mode1 a:hover .info .title, .mode1 a:hover .info .summary, .mode1 a:hover .info .date{ color: #fff;}
.row1 .date{ line-height: 18px; padding-left: 18px; position: relative;}
.row1 .date::before{ content: ''; display: block; width: 12px; height: 12px; background: url(../images/date_icon.png) no-repeat center/cover;
    position: absolute; left: 0; top: 2px;}
.mode1 .right li{ margin-bottom: 16px;}
.mode1 .right li:last-child{ margin-bottom: 0px;}
.mode1 .right a{ display: block; padding: 11px 13px; background: #F6F6F6; position: relative;}
.mode1 .right a::before{ content: ''; display: block; width: 0%; height: 100%; background: #003670;
    position: absolute; left: 0; top: 0; z-index: 0; transition: all 0.35s ease;}
.mode1 .right a:hover::before{ width: 100%;}
.mode1 .right a .title{ line-height: 20px; position: relative; transition: all 0.35s ease;}
.mode1 .right .date{ margin-top: 9px; transition: all 0.35s ease;}
.mode1 .right a:hover .title, .mode1 .right a:hover .date{ color: #fff;}
.row1 a:hover .date::before{ filter: brightness(300%);}
/* 捐赠鸣谢 */
.mode2{width: 37%;}
.mode2 .tr{transition: all 0.25s ease;min-height: 62px;align-items: center;}
.mode2 .tr:hover{ transform: translateY(-8px); box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.1);}
.mode2 .td{ text-align: center;}
.mode2 .th .td{ line-height: 38px; background: #003670; color: #fff; font-weight: bold;}
.mode2 .tr .td{line-height: 22px;}
.mode2 .tr:nth-of-type(odd){ background: #F8F9FF;}
.mode2 .td{width: 50%;box-sizing: border-box;padding: 0 16px;}
/* .mode2 .td:last-child{width: 50%;position: relative; display: none; } */
.mode2 .th:first-child .td:first-child{width:100%}
.mode2 .modeCon{ position: relative;}
.mode2 .modeCon::before{
    content: '';
    display: block;
    width: 1px;
    /* height: 100%; */
    background: linear-gradient(180deg,rgba(233,233,233,0.35) 0%, rgba(233,233,233,1) 100%);
    position: absolute;
    right: 34.1%;
    }
/* 项目展示 */
.row2{ margin-top: 56px;}
.mode3 ul{ margin: 0 -12px;}
.mode3 ul li{ margin-top: 24px;}
.mode3 ul li:nth-of-type(1){ margin-top: 0px;}
.mode3 ul li:nth-of-type(2){ margin-top: 0px;}
.mode3 ul a{ padding: 14px 11px 14px 14px; background: #F6F6F6; margin: 0 12px; transition: all 0.35s ease;}
.mode3 ul a:hover{ transform: translateY(-8px);}
.mode3 .modeCon{ margin-top: 16px;}
.mode3 .img{ width: 259px; flex-shrink: 0;}
.mode3 .img .gp-img-responsive{ padding-bottom: 56.37%;}
.mode3 .infoBox{ flex: 1; padding-left: 16px;}
.mode3 .infoBox .title{ line-height: 20px; transition: all 0.35s ease;}
.mode3 a:hover .infoBox .title{ color: #003670;}
.mode3 .infoBox .summary{ color: #999; line-height: 22px; margin-top: 23px;}
.mode3 .infoBox .more{ color: #003670; line-height: 18px; margin-top: 21px;}

/* 项目展示 */
.row3{ background: url(../images/contribute.png) no-repeat center/cover; margin-top: 56px;}
.mode4 .textImg{ font-size: 0; text-align: center; padding: 52px 0 25px;}
.mode4 .btn{ font-size: 0; text-align: center; padding-bottom: 51px;}
.mode4 .btn a{ display: inline-block; width: 163px; height: 44px; line-height: 44px;
    border-radius: 4px; background: url(../images/btn_bg.png) no-repeat center/cover; color: #fff;}
.mode4 .btn a:first-child{ margin-right: 43px;}

/* 受益感言 */
.row4{ margin-top: 56px;}
.mode5{ width: 61.33%;}
.mode5 .modeCon{ margin-top: 7px;}
.mode5 ul{ margin: 0 -7px;}
.mode5 ul li{ margin-top: 22px;}
.mode5 ul a{ margin: 0 7px; transition: all 0.35s ease;}
.mode5 ul a:hover{ transform: translateY(-6px);}
.mode5 ul .img{ width: 172px; flex-shrink: 0;}
.mode5 ul .img .gp-img-responsive{ padding-bottom: 56.39%;}
.mode5 ul .infoBox{ flex: 1; padding-left: 10px;}
.mode5 ul .title{ line-height: 24px; height: 48px;}
.mode5 ul a:hover .title{ color: #003670;}
.mode5 ul .summary{ line-height: 22px; color: #999; margin-top: 7px;}

/* 联系我们 */
.mode6{ width: 36.33%;}
.mode6 .modeCon{ padding: 22px 30px 29px; background: #F6F6F6;}
.mode6 .modeCon div{ transition: all 0.35s ease;}
.mode6 .modeCon div:hover{ color: #003670;}
.mode6 .name{ color: #003670; font-weight: bold; line-height: 23px; margin-bottom: 26px;}
.mode6 .modeCon > div{ line-height: 20px; margin-bottom: 22px;}
.mode6 .modeCon > div:last-child{ margin-bottom: 0;}

/* 响应式样式 */
@media screen and (max-width:1600px){
    
}

@media screen and (max-width:1480px) {
    
}

@media screen and (max-width:1400px) {
    
}


@media screen and (max-width:1280px) {
    
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:1100px) {
    .banner .img{ padding-bottom: 0; height: 240px;}
    .banner .img img{ min-height: 100%; max-width: unset;}
    .banner .title{ bottom: 20px; font-weight: normal; font-size: 24px; line-height: 1;}
    .row1 > .flex,
    .row4 > .flex{ flex-direction: column;}
    .mode1, .mode2, .mode5, .mode6{ width: 100%;}
    .mode2, .mode6{ margin-top: 30px;}
    .mode1 .left{ width: 35.5%;}
    .mode1 .right{ width: 62%;}
    .content, .row2, .row3, .row4{ margin-top: 40px;}
}
@media screen and (max-width:1080px) {
    .banner .title{ width: 100%;}
}

@media screen and (max-width:996px) {
    .mode3 ul li:nth-of-type(2), .mode3 ul li{ margin-top: 20px;}
    .mode1 .left{ width: 340px; flex-shrink: 0;}
    .mode1 .right{ width: calc(100% - 340px); flex: 1; padding-left: 15px; box-sizing: border-box;}
}

@media screen and (max-width:768px) {
    
}

@media screen and (max-width:680px) {
    .banner .img{ height: 200px;}
    .banner .img img{ height: 100%; width: auto;}
    .row1 .modeCon{ flex-direction: column;}
    .mode1 .left, .mode1 .right{ width: 100%;}
    .mode1 .right{ padding-left: 0; margin-top: 16px;}
    .mode1 .info .title{ height: auto;}
    .mode1 .info .date{ margin-top: 15px;}
    .content, .row2, .row3, .row4{ margin-top: 30px;}
    .mode2 .tr{/*flex-wrap:wrap*/}
    .mode2 .td{/*width: 100%;*/}
}

@media screen and (max-width:540px) {
    .mode3 .img{ width: 240px;}
    .mode3 .infoBox .summary{ margin-top: 15px;}
    .mode3 .infoBox .more{ margin-top: 15px;}
}

@media screen and (max-width:479px) {
    .mode3 ul a, .mode5 ul a{ flex-direction: column;}
    .mode3 .img, .mode5 ul .img{ width: 100%;}
    .mode3 .infoBox, .mode5 ul .infoBox{ padding-left: 0; padding-top: 10px;}
    .mode5 ul .title{ height: auto;}
    .mode4 .btn a{ width: 120px;}
}

@media screen and (max-width:414px) {
    .gp-container{ padding-left: 0; padding-right: 0;}
    .mode2, .mode6{ margin-top: 30px;}
    .mode3 ul a{ padding: 10px;}
    .mode3 .infoBox .summary, .mode3 .infoBox .date{ margin-top: 10px;}
    .mode6 .modeCon{ padding: 15px;}
}

@media screen and (max-width:370px) {
    .content, .row2, .row3, .row4, .mode6{ margin-top: 20px;}
    .mode2 .td:first-child{ width: 60%;}
    .mode2 .td:last-child{ width: 40%;}
    .mode2 .modeCon::before{ right: 40%;}
}