/*轮播图 开始*/



.main_banner {

    width: 100%;

    height: 334px;

    padding-bottom: 46px;position: relative;

}



.main_banner_wrap {

    width: 1200px;

    margin: 0 auto;

    overflow: hidden;

    height: 334px;

}



#myCanvas {

    position: absolute;

    z-index: 13;

    opacity: 0.8;

    cursor: pointer;

    -webkit-animation: roll 3s;

    animation: roll 3s;

}



@-webkit-keyframes roll {

    from {

        -webkit-transform: rotate(120deg);

        opacity: 0;

    }

    to {

        -webkit-transform: rotate(0deg);

        opacity: 0.8;

    }

}



@keyframes roll {

    from {

        transform: rotate(120deg);

        opacity: 0;

    }

    to {

        transform: rotate(0deg);

        opacity: 0.8;

    }

}









@-webkit-keyframes arrow {

    from {

        -webkit-transform: scale(1);

        opacity: 1;

    }

    to {

        -webkit-transform: scale(1.5);

        opacity: 0.2;

    }

}



@-moz-keyframes arrow {

    from {

        -moz-transform: scale(1);

        opacity: 1;

    }

    to {

        -moz-transform: scale(1.5);

        opacity: 0.2;

    }

}





/*火狐倒影图层样式*/



.main_banner li {

    position: absolute;

    overflow: hidden;

}





/*给每张图片初始设置不同宽高，层级，位置*/



.main_banner li#imgCard0 {

    width: 534px;

    height: 334px;

    z-index: 5;

    left: 340px;

    top: 0px;

    opacity: 1;

}



.main_banner li#imgCard1 {

    width: 471px;

    height: 294px;

    z-index: 1;

    left: 732px;

    top: 16px;

    opacity: 1;

}



.main_banner li#imgCard2 {

    /*初始在背后，透明度为0*/

    width: 471px;

    height: 294px;

    z-index: 1;

    left: 0px;

    top: 16px;

    opacity: 0;

}



.main_banner li#imgCard3 {

    /*初始在背后，透明度为0*/

    width: 471px;

    height: 294px;

    z-index: 1;

    left: 0px;

    top: 16px;

    opacity: 0;

}



.main_banner li#imgCard4 {

    width: 471px;

    height: 294px;

    z-index: 2;

    left: 0px;

    top: 16px;

    opacity: 1;

}



.main_banner li img {

    width: 100%;

    height: auto;
    transition: transform 3s;

}
.main_banner li:hover img{ transform: scale(1.2); }

/*遮罩层*/

.main_banner li span {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    background: #2F5597;

    opacity: 0;

    filter: alpha(opacity=0);

}

.main_banner li p {

    width: 100%;

    height: 44px;

    position: absolute;

    left: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.7);

    color: #fff;

    line-height: 44px;

    font-size: 16px;

    text-align: center;

    z-index: 99;

}





/*指示器按钮*/

.btn_list {

    text-align: center;

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

}

.btn_list span {

    width: 12px;

    height: 12px;

    display: inline-block;

    margin: 0 8px;

    border-radius: 50%;

    cursor: pointer;

    background: url(../images/yuan1.png);

}

.btn_list span.curr {

    background: url(../images/yuan2.png);

}





/*轮播图 结束*/

/* 基金会动态-图集（Swiper） */
.jjh-gallery { position: relative; }
.jjh-gallery .jjh-swiper { padding: 8px 0 6px; }
.jjh-gallery .swiper-slide { height: auto; }
.jjh-gallery .jjh-card {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #f2f2f2;
}
.jjh-gallery .jjh-thumb { display: block; width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.jjh-gallery .jjh-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.jjh-gallery .jjh-card:hover .jjh-thumb img { transform: scale(1.06); }
.jjh-gallery .jjh-title{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    line-height: 44px;
    padding: 0 12px;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.jjh-gallery .swiper-button-prev,
.jjh-gallery .swiper-button-next{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.jjh-gallery .swiper-button-prev:hover,
.jjh-gallery .swiper-button-next:hover{ background: rgba(0,0,0,.88); transform: scale(1.04); }
.jjh-gallery .swiper-button-prev:after,
.jjh-gallery .swiper-button-next:after{ font-size: 20px; font-weight: 800; }
.jjh-gallery .swiper-button-prev{ left: 10px; }
.jjh-gallery .swiper-button-next{ right: 10px; }
.jjh-gallery .swiper-button-prev.swiper-button-disabled,
.jjh-gallery .swiper-button-next.swiper-button-disabled{ opacity: .25; }

/* 兼容不支持 aspect-ratio 的老浏览器：强制统一展示高度 */
@supports not (aspect-ratio: 1 / 1) {
    .jjh-gallery .jjh-thumb { height: 240px; }
}

@media (max-width: 1240px){
    .jjh-gallery{ width: 100% !important; }
}
@media (max-width: 768px){
    .jjh-gallery .jjh-swiper{ padding: 8px 0 6px; }
    .jjh-gallery .swiper-button-prev{ left: 6px; }
    .jjh-gallery .swiper-button-next{ right: 6px; }
    @supports not (aspect-ratio: 1 / 1) {
        .jjh-gallery .jjh-thumb { height: 200px; }
    }
}