@charset "utf-8";
/*
* @Description: 
* @Author: Sun Jia
* @Date: 2024-10-23
*/
.banner{ position: relative; z-index: 1; overflow: hidden; background: #eee;}
.bannerCon{ max-width: 1030px; margin: 0 auto; position: relative;}
.bannerCon::before, .bannerCon::after{ 
    content: '';display: block;width: 5px; height: 100%;background: #eee;
    position: absolute;left: 100%;top: 0;z-index: 2;
}
.bannerCon::after{ left: auto; right: 100%;}
.banner-swiper a{ position: relative; filter: brightness(0.55);transition: filter 0.35s ease;}
.banner-swiper a.swiper-slide-active{ filter: brightness(1);}
.banner-swiper .gp-img-responsive{ padding-bottom: 56.31%; position: relative; }
.banner-swiper .gp-img-responsive::before{
    content: '';display: block;height: 0;width: 100%;padding-bottom: 18.25%;
    background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.55; position: absolute; left: 0; bottom: 0; z-index: 1;pointer-events: none;
}
.banner-swiper .title{ position: absolute; left: 0px; bottom: 30px; width: 100%; padding: 0 40px; color: #fff;z-index: 2; opacity: 0; transition: all 0.35s ease;}
.banner-swiper .swiper-slide-active .title{ opacity: 1;}
.banner-swiper{ position: relative;z-index: 1;}
.banner-swiper .banner-button-prev{ position: absolute;z-index: 1;top: 50%;left: 20px;transform: translateY(-50%);
    width: 42px;height: 42px;border-radius: 50%;background: url(../images/banner-arrow.png) no-repeat center/cover;}
.banner-swiper .banner-button-next{ position: absolute;z-index: 1;top: 50%;right: 20px;transform: translateY(-50%) rotateZ(180deg);
    width: 42px;height: 42px;border-radius: 50%;background: url(../images/banner-arrow.png) no-repeat center/cover;}
.newsLink{ position: absolute; left: 40px; bottom: 70px;z-index: 2;transition: all 0.35s ease;}
.newsLink:hover{ transform: translateY(-8px);}
.newsLink a{ display: block;width: 152px; line-height: 47px;border-radius: 23.5px;background: #00508f;color: #fff;text-align: center;}

/* row1 */
.row1{ background: #f6f8fa;padding: 60px 0 20px;}
.modeTil{ position: relative; line-height: 32px; justify-content: flex-start; align-items: center;text-align: center;}
.row1 .modeTil{ width: 33.33%;}
.modeTil i{ font-size: 28px; color: #00508f;margin-right: 15px;}
.modeTil i.icon-zhutiyanjiang{ font-size: 32px;}
.modeTil span{ color: #333; display: inline-block;}
.modeTil .tabMore{ display: inline-block; width: 68px; line-height: 32px;border-radius: 16px;background: #cfa972;visibility: hidden;
    color: #fff;text-align: center;margin-left: 20px; transform: translateY(60px); opacity: 0; transition: all 0.35s ease;}
.modeTil.on .tabMore{ transform: translateY(0); opacity: 1;visibility: visible;}
.imgList{ margin-top: 40px;}
.imgList li{ width: 33.33%; border: 1px solid #e5e5e5;}
/* .imgList li:nth-of-type(1){ border-right: none;} */
/* .imgList li:nth-of-type(3){ border-left: none;} */
/* .imgList li:nth-of-type(2) a{ padding: 30px;} */
/* .imgList li:nth-of-type(2) .title{ margin-top: 0;} */
/* .imgList li:nth-of-type(2) .img{ margin-top: 25px;} */
.imgList li a{ display: block; padding: 20px 30px 30px; transition: all 0.35s ease;}
.imgList li.on a{ transform: translateY(0px); background: #fff; height: 100%;}
.imgList .gp-img-responsive{ padding-bottom: 56.25%;}
.imgList .title{ line-height: 1; margin-top: 20px;}
.imgList .date{ line-height: 1; color: #00508f; margin-top: 20px;}
.imgList .summary{ line-height: 26px; color: #999; margin-top: 25px; height: 52px;}
.boxList{ margin-top: 25px;}
.boxList ul{ margin: 0 -30px; display: none;}
.boxList ul.on{ display: block; animation: effectDown 0.5s ease forwards;}
.boxList li{ margin-bottom: 30px;}
.boxList li:nth-of-type(4){ margin-bottom: 0;}
.boxList a{ margin: 0 30px; align-items: center; transition: all 0.35s ease;}
.boxList a:hover{ transform: translateX(8px);}
.boxList .date{ flex-shrink: 0; color: #00508f; text-align: center; line-height: 1; padding-right: 60px; position: relative;}
.boxList .date::before{ content: '';display: block;width: 1px; height: 42px; background: #e5e5e5;
    position: absolute; top: 50%; right: 30px;transform: translateY(-50%);z-index: 1;pointer-events: none;}
.boxList .year{ margin-top: 12px;}
.boxList .title{ line-height: 28px;}
.boxList .title{ flex: 1;}
@keyframes effectDown {
    0%{ transform: translateY(60px);opacity: 0;}
    100%{ transform: translateY(0px);opacity: 1;}
}
@-webkit-keyframes effectDown {
    0%{ transform: translateY(100px);opacity: 0;}
    100%{ transform: translateY(0px);opacity: 1;}
}

/* row2 */
.row2{ padding: 50px 0 120px;}
.row2 .modeTil a{ display: inline-block;}
.row2 .rowCon{ padding-top: 40px;}
.row2 .rowCon li:nth-of-type(1){ width: 35.21%;}
.row2 .rowCon li:nth-of-type(2){ width: 28.17%;}
.row2 .rowCon li:nth-of-type(3){ width: 35.21%;}
.row2 .rowCon .item{ position: relative;}
.row2 .rowCon .item:first-child{ margin-bottom: 10px;}
.row2 .rowCon a{ position: relative;}
.row2 .rowCon a::before{ content: '';display: block;border: 1px solid rgba(255, 255, 255, 0.3);
    position: absolute;top: 10px;right: 10px;bottom: 10px;left: 10px; z-index: 2;pointer-events: none;}
.row2 .rowCon .item:hover a::before{ animation: photo 0.45s ease-in-out alternate;}
@keyframes photo {
    0%{ transform: scale(1);}
    25%{ transform: scale(0.85);}
    60%{ transform: scale(0.85);}
    100%{ transform: scale(1);}
}
.row2 .rowCon .gp-img-responsive{ padding-bottom: 70%; position: relative; z-index: 1;}
.row2 .rowCon .gp-img-responsive::before{content: '';display: block;background: rgba(0,0,0,0.3);
    position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;}
.row2 .rowCon .no-mask .gp-img-responsive::before{ display: none;}
.row2 .rowCon li:nth-of-type(2) .item:nth-of-type(1) .gp-img-responsive{ padding-bottom: 125%;}
.row2 .rowCon li:nth-of-type(2) .item:nth-of-type(2) .gp-img-responsive{ padding-bottom: 50%;}
.row2 .rowCon .gp-img-responsive img:hover{ opacity: 1;}
.row2 .rowCon .item:hover img{ transition: all 0.35s ease; transform: scale(1.04);}
.row2 .rowCon .lable{ position: absolute;left: 40px; top: 40px;z-index: 1;}

/* row3 */
.row3{ padding: 40px 0 50px;}
.row3 .modeTil{ max-height: 30px;}
.row3 .modeTil a{ display: inline-block; line-height: 1;}
.row3 .modeTil .icon-ding{ display: inline-block; width: 33px;height: 33px;background: url(../images/ding.png) no-repeat center/cover; vertical-align: top;}
.modeTitle{ align-items: center;}
.row3 .rowCon{ margin: 0 -30px; padding-top: 20px;}
.row3 .rowCon > div{ width: 33.33%;}
.row3 .modeCon{ margin: 0 30px;}
.modeTitle a{ flex-shrink: 0;}
.row3 .modeTitle .title{ padding-left: 11px; padding-right: 19px; border-left: 2px solid #cfa972; line-height: 1;}
.modeTitle .line{ display: block; flex: 1; height: 1px; background: #e5e5e5;}
.row3 .modeTitle .more{ width: 68px; height: 28px;line-height: 28px;border-radius: 14px; color: #cfa972;border: 1px solid #e5e5e5;text-align: center;transition: all 0.35s ease;}
.modeTitle:hover .more{ margin-right: 10px;}
.row3 .modeList{ margin-top: 30px;}
.row3 .modeList a{ transition: all 0.35s ease;}
.row3 .modeList ul a{ display: block;}
.row3 .modeList a:hover{ transform: translateX(8px);}
.row3 .modeList .img{ width: 200px;flex-shrink: 0;}
.row3 .modeList .info{ flex: 1; padding-left: 15px;}
.row3 .modeList .gp-img-responsive{ padding-bottom: 56.25%;}
.row3 .modeList .title{ line-height: 28px;}
.row3 .modeList ul .title{ line-height: 1;padding-left: 17px; border-left: 3px solid #00508f;}
.row3 .modeList .date{ color: #00508f; margin-top: 15px; line-height: 1;}
.row3 .modeList ul .date{ padding-left: 20px;}
.row3 .modeList ul li{ margin-top: 30px;}
.row3 .rt .modeList{ display: block; background: #f1f4f7; padding: 20px 0 40px;}
.row3 .donate-icon{ background: #fff; width: 150px;height: 150px;border-radius: 50%;margin: 0 auto; position: relative;}
.row3 .donate-icon i{ display: inline-block; font-size: 0;width: 110px;position: absolute;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);}
.row3 .donate-icon i img{ width: 100%;}
/* .row3 .donate-icon i::before{ font-size: 63px; color: #00508f; position: absolute;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0); } */
.row3 a:hover .donate-icon i::before{ transform: translate3d(-50%,-50%,0) rotateY(180deg);transition: all 0.5s ease;}
.row3 .donateName{ text-align: center; line-height: 1; margin-top: 30px; position: relative;}
.row3 .donateName::before{ content: '';display: block;width: 23px;height: 2px;background: #cfa972;
    position: absolute;left: 50%;transform: translateX(-50%);top: calc(100% + 15px);}
.row3 .donateSummary{ line-height: 24px; color: #999; max-width: 300px; margin: 32px auto 0;}


/* 20250306 Rewrite */
.row1 .deleteTab .modeTil{ width: 100%;}
.deleteTab .left,
.deleteTab .right{ width: calc(50% - 15px);}
.deleteTab .modeTil .tabMore{ transform: none;opacity: 1;visibility: visible;}
.deleteTab .modeTil span{ flex: 1; text-align: left;}
.deleteTab .imgList li{ width: 100%;}
.deleteTab .boxList ul{ margin: 0;display: block; width: 100%; flex-shrink: 0;}
.deleteTab .boxList ul a{ margin: 0;}

.row3 .rowCon > div.lf{ width: 66.66%; overflow: hidden;}
.noticeList{ padding-top: 30px; margin: 0 -30px;}
.noticeList li{ margin-bottom: 40px;}
.noticeList li:nth-of-type(7),
.noticeList li:nth-of-type(8){ margin-bottom: 0;}
.noticeList a{ margin: 0 30px; align-items: center; transition: all 0.35s ease;}
.noticeList a:hover{ transform: translateX(8px);}
.noticeList .date{ flex-shrink: 0; color: #00508f; text-align: center; line-height: 1; padding-right: 60px; height: 56px; position: relative;}
.noticeList .date::before{ content: '';display: block;width: 1px; height: 42px; background: #e5e5e5;
    position: absolute; top: 50%; right: 30px;transform: translateY(-50%);z-index: 1;pointer-events: none;}
.noticeList .year{ margin-top: 12px;}
.noticeList .title{ line-height: 28px;}
.noticeList .title{ flex: 1;}

/* 底部合作伙伴图片 */
.footer-img-box {
   align-items: center;
   justify-content: flex-start; 
}
.footer-img-box .img {
   box-sizing: border-box;
   width: 100px;
}
.footer-img-box .img:nth-child(1) {
  margin-right: 10px; 
}
.footer-img-box .gp-img-responsive {
    padding-bottom: 100%;
}


/* Responsive Style */
@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) {
    .row1{ padding: 50px 0;}
    .boxList ul{ margin: 0 -20px;}
    .boxList a{ margin: 0 20px;}
    .boxList .date{ padding-right: 40px;}
    .boxList .date::before{ right: 20px;}
    .row2 .rowCon{ padding-top: 25px;}
    .row3{ padding: 0 0 50px;}
    .row3 .rowCon{ padding-top: 30px;}
    .row3 .rowCon{ margin: 0 -20px;}
    .row3 .modeCon{ margin: 0 20px;}
    .row3 .modeList .info{ padding-left: 10px;}
}

@media screen and (max-width:1100px) {
    .modeTil span{ font-size: 26px;}
    .modeTil .tabMore{ line-height: 28px; width: 60px; border-radius: 14px;}
    .modeTil i{ margin-right: 10px;}
    .modeTil .tabMore{ margin-left: 10px;}
    .imgList{ margin-top: 30px;}
    .imgList li a,
    .imgList li:nth-of-type(2) a{ padding: 20px;}
    .imgList .title,
    .imgList .date,
    .imgList .summary,
    .imgList li:nth-of-type(2) .img{ margin-top: 15px;}
    .row1, .row2{ padding: 40px 0;}
    .row3 .donateSummary{ max-width: unset; padding: 0 10px;}
    .row3 .rowCon{ margin: 0 -15px;}
    .row3 .modeCon{ margin: 0 15px;}
}
@media screen and (max-width:1024px) {
    
}

@media screen and (max-width:996px) {
    .boxList li{ margin-bottom: 20px;}
    .imgList li a, .imgList li:nth-of-type(2) a{ padding: 20px 15px;}
    .imgList li{ width: 100%;}
    .imgList li.on{ display: block;}
    .imgList li:nth-of-type(2) a{ display: flex;display: -ms-flexbox;flex-direction: column;}
    .imgList li:nth-of-type(2) .infoBox{ order: 1; margin-top: 15px;}
    .imgList li:nth-of-type(2) .img{ margin-top: 0;}
    .modeTil{ line-height: 1;}
    .modeTil i{ margin-right: 5px; font-size: 24px;}
    .modeTil span{ font-size: 22px; line-height: 1;}
    .modeTil.on .tabMore{ height: 25px; line-height: 25px; margin-left: 5px;}
    .imgList{ margin-top: 20px;}
    .imgList li.on a{ transform: none;}
    .boxList{ margin-top: 15px;}
    .row1, .row2{ padding: 30px 0;}
    .row2 .rowCon{ padding-top: 15px;}

    .row3{ padding: 0 0 30px;}
    .row3 .rowCon{ flex-wrap: wrap;}
    .row3 .rowCon > div{ width: 100%;}
    .row3 .modeList{ margin-top: 20px;}
    .row3 .modeList ul li{ margin-top: 20px;}
    .row3 .modeCon{ margin-bottom: 30px;}
    .row3 .rt .modeCon{ margin-bottom: 0;}
    .row3 .donateSummary{ text-align: center;}
    .row2 .rowCon .lable{ top: 20px; left: 20px; font-size: 18px;}
    
    .deleteTab .left,
    .deleteTab .right{ width: calc(50% - 10px);}
    .row3 .rowCon > div.lf{ width: 100%;}
    .noticeList li,
    .noticeList li:nth-of-type(7){ margin-bottom: 20px;}
}

@media screen and (max-width:767px) {
    .newsLink{ left: 20px; bottom: 55px;}
    .newsLink a{ width: 110px; line-height: 40px;}
    .banner-swiper .title{ padding: 0 20px; bottom: 20px;}
    .row2 .rowCon{ flex-wrap: wrap;}
    .row2 .rowCon li:nth-of-type(1){ width: calc(55.5% - 5px);}
    .row2 .rowCon li:nth-of-type(2){ width: calc(44.5% - 5px);}
    .row2 .rowCon li:nth-of-type(3){ display: flex; display: -ms-flexbox; justify-content: space-between; width: 100%; margin-top: 10px;}
    .row2 .rowCon li:nth-of-type(3) .item{ width: calc(50% - 5px);}

    .deleteTab > .flex{
        flex-direction: column;
    }
    .deleteTab .left, .deleteTab .right{
        width: 100%;
    }
    .deleteTab .imgList .summary{
        height: auto;
    }
    .deleteTab .right{
        margin-top: 30px;
    }
}

@media screen and (max-width:680px) {
    .row1 .tilList{ overflow-x: scroll; overflow-y: clip; padding-bottom: 10px;}
    .row1 .modeTil{ width: auto; min-width: 115px; margin-right: 20px; position: relative; transition: all 0.35s ease;}
    .row1 .modeTil.on{ margin-right: 70px;}
    .modeTil span{ text-wrap: nowrap;}
    /* .row1 .modeTil .tabMore{ position: absolute; top: 0px;left: 100%;} */
    .imgList{ margin-top: 10px;}
    
    .row1 .deleteTab .tilList{ overflow: hidden;}
}

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

@media screen and (max-width:479px) {
    .newsLink{ left: auto; right: 15px; bottom: auto; top: 10px; }
    .newsLink a{ width: 90px; line-height: 30px; font-size: 14px;}
    .row2 .rowCon .lable{ font-size: 16px;}
    .banner-swiper .banner-button-prev,
    .banner-swiper .banner-button-next{ width: 35px; height: 35px;}
    .boxList .date{ padding-right: 25px;}
    .boxList .date::before{ right: 13px;}
    
    .deleteTab .right{
        margin-top: 20px;
    }
}

@media screen and (max-width:414px) {
    .row2 .rowCon li:nth-of-type(1){ width: calc(55.5% - 2px);}
    .row2 .rowCon li:nth-of-type(2){ width: calc(44.5% - 2px);}
    .row2 .rowCon li:nth-of-type(3){ margin-top: 4px;}
    .row2 .rowCon .item:first-child{ margin-bottom: 4px;}
    .row2 .rowCon li:nth-of-type(3) .item{ width: calc(50% - 2px);}
    .row3 .modeList .img{ width: 160px;}

    .noticeList .date{
        padding-right: 25px;
    }
    .noticeList .date::before{
        right: 12px;
    }
}

@media screen and (max-width:370px) {
    .banner-swiper .swiper-slide-active .title{ bottom: 10px;}
    .row3 .modeList > a .title{
        line-height: 22px;
        -webkit-line-clamp: 3;
    }
}