@charset "utf-8"; /* 图片容器 */
.w100{ width: 100%;}
.imgBoxs {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.imgBoxs .img, .imgBoxs .imgLi {
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important
}

.imgBoxs .img, .imgBoxs .imgLi {
    padding-bottom: 59%;
    transition: transform .5s;
    background-size: cover;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    background-size: .24rem auto !important;
    will-change: transform;
}

.imgBoxs img, .imgBoxs video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: .5s;
    will-change: transform;
}

.ieFiximg img {
    opacity: 0\0;
    transition: transform .5s
}

.ieFiximg .imgbg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform .3s ease
}

.zfpage2 {
    background: url(../images/zfBox_b.jpg) center no-repeat;
    background-size: cover;
    overflow: hidden;
    transition: .5s;
}
.zfpage3 {
     transition: .5s;
}

.zfslider .swiper-container {
    height: 100%;
    overflow: visible;
}

.zfslider li {
    width: 14.57vw;
}

.zfslider .a {
    display: block;
    position: relative;
    box-shadow: 0px 9px 12px 0px rgba(0, 37, 111, 0.24),inset 0px 20px 18px 0px rgba(63, 1, 118, 0.08);
    border-radius: .15rem;
    overflow: hidden;
    padding: 1px;
    background: linear-gradient(-142deg, #93b1ef, #fff, #93b1ef, #fff, #93b1ef);
    transition: .5s;
}
.zfslider .imgBoxs {
    border-radius: .15rem;
    background: url(../images/zfslider_bgs.png) center no-repeat;
    background-size: cover;
    }

.zfslider .imgBoxs .img {
    padding-bottom: 141.78%;
    /* backdrop-filter: blur(1rem); */
}
.zfslider .imgBoxs .img::before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/zfslider_bgs.png) center no-repeat;background-size: cover;transition: .5s;}
.zfslider .imgBoxs .img::after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/zfslider_bgss.png) center no-repeat;background-size: cover;transition: .5s;opacity: 0;}

.zfslider .box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    padding: .2rem .18rem .24rem;
    border-radius: .15rem;
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
}

.zfslider .box .bg1 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    width: 100%;
}

.zfslider .box .bg2 {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    width: 100%;
}

.zfslider .box .center {
    /*border-top: rgba(255,255,255,.4) 1px solid; border-bottom: rgba(255,255,255,.4) 1px solid;*/
    margin: .1rem 0;
    padding: .15rem 0;
    height: 1.26rem;
    display: flex;
    width: 100%;
    align-items: center;
    text-align: center;
    position: relative;
}
.zfslider .box .center .name{
    font-size: .2rem;
    color: #fff;
    line-height: 2;
    width: 2.8rem;
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: 114%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden
}

.zfslider .box .top {
    width: 100%;
    padding: 0 20% 0 0;
    position: relative;
}

.zfslider .box .top img{width: 80%;transition: .5s;}
.zfslider .box .center::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: rgba(255,255,255,.4);
    height: 1px;
    filter: blur(.6px);
}

.zfslider .box .center::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(255,255,255,.4);
    height: 1px;
    filter: blur(.6px);
}

.zfslider .box .center h4 {
    font-size: 0.16rem;
    color: #fff;
    line-height: 1.75;
    width: 1.8rem;
    max-width: 100%;
    margin: 0 auto;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.zfslider .box .bottom {
    width: 100%;
    text-align: center
}

.zfslider .box .bottom .smzfewm {
    width: .7rem;
    margin: 0 auto
}

.zfslider .box .bottom .smzfewm img {
    width: 100%
}

.zfslider .box .bottom h6 {
    font-size: .12rem;
    color: #fff;
    margin: .04rem 0 0;
}

.bBox {
    width: 6.2rem;
    max-width: 80vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    bottom: 15vh;
}

.bBox .dots {
    justify-content: center
}

.misoBtn {
    font-size: .18rem;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

#slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    transform: translateY(100vh);
    opacity: 0;
    transition: .5s ease;
}
.xqzfpages>div.on #slider{transform: translateY(0); opacity: 1;}

#slider.move {
    cursor: grabbing;
}

.viewport {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60vh;
    will-change: transform;
    width: 100% !important;
    max-width: 100% !important;
}

.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

.media {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    will-change: transform;
    opacity: 1;
    transition: opacity 0.3s ease;
    -webkit-user-drag: none;
    user-select: none;
    color: inherit;
    text-decoration: none;
}

.navigation-dots{position: absolute;bottom: 26vh;left: 50%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;background: url(../images/zfslider_dots.png) center .13rem no-repeat;background-size: auto 100%;/* width: 3.32rem; */height: .61rem;transform: translateX(-50%);z-index: 2;gap: .44rem;}
.navigation-dots .nav-dot{display: block;transition: .5s;position: relative;width: .08rem;height: .08rem;}
.navigation-dots .nav-dot:before{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: .06rem;height: .06rem;border: rgba(255,255,255,.7) 1px solid;background: #3a6da3;border-radius: 50vw;}
.navigation-dots:before{content: "";position: absolute;top: 50%;right: 0;left: 0;height: 1px;background: rgba(255,255,255,.2);margin: -.5px 0 0;z-index: -1; opacity: 0; transition: .5s}
.n10,.n11,.n12,.n13,.n14,.n15,.n16,.n17,.n18,.n19,.n20{  background: none !important}
.n10:before,.n11:before,.n12:before,.n13:before,.n14:before,.n15:before,.n16:before,.n17:before,.n18:before,.n19:before,.n20:before{ opacity: 1 !important; }
.navigation-dots .nav-dot.active:before{background: #ee6f08;border: rgba(255,255,255,1) 1px solid;}

.navigation-dots.n1 .nav-dot:nth-child(1), .navigation-dots.n1 .nav-dot:last-child{ transform: translateY(.14rem)}

.navigation-dots.n3 .nav-dot:nth-child(1), .navigation-dots.n3 .nav-dot:last-child{transform: translateY(-.12rem);}
.navigation-dots.n3 .nav-dot:nth-child(2), .navigation-dots.n3 .nav-dot:nth-last-child(2){transform: translateY(-.16rem);}

.navigation-dots.n4 .nav-dot:nth-child(1), .navigation-dots.n4 .nav-dot:last-child{transform: translateY(-.09rem);}
.navigation-dots.n4 .nav-dot:nth-child(2), .navigation-dots.n4 .nav-dot:nth-last-child(2){transform: translateY(-.15rem);}

.navigation-dots.n5 .nav-dot:nth-child(1), .navigation-dots.n5 .nav-dot:last-child{transform: translateY(-.03rem);}
.navigation-dots.n5 .nav-dot:nth-child(2), .navigation-dots.n5 .nav-dot:nth-last-child(2){transform: translateY(-.13rem);}
.navigation-dots.n5 .nav-dot:nth-child(3){ transform: translateY(-.16rem);}

.navigation-dots.n6 .nav-dot:nth-child(1), .navigation-dots.n6 .nav-dot:last-child{transform: translateY(.04rem);}
.navigation-dots.n6 .nav-dot:nth-child(2), .navigation-dots.n6 .nav-dot:nth-last-child(2){transform: translateY(-.09rem);}
.navigation-dots.n6 .nav-dot:nth-child(3), .navigation-dots.n6 .nav-dot:nth-last-child(3){ transform: translateY(-.15rem)}

.navigation-dots.n7 .nav-dot:nth-child(1), .navigation-dots.n7 .nav-dot:last-child{ transform: translateY(.14rem)}
.navigation-dots.n7 .nav-dot:nth-child(2), .navigation-dots.n7 .nav-dot:nth-last-child(2){transform: translateY(-36%);}
.navigation-dots.n7 .nav-dot:nth-child(3), .navigation-dots.n7 .nav-dot:nth-last-child(3){transform: translateY(-158%);}
.navigation-dots.n7 .nav-dot:nth-child(4), .navigation-dots.n7 .nav-dot:nth-last-child(4){ transform: translateY(-.16rem)}

.navigation-dots.n8 .nav-dot:nth-child(1), .navigation-dots.n8 .nav-dot:last-child{ transform: translateY(.22rem)}
.navigation-dots.n8 .nav-dot:nth-child(2), .navigation-dots.n8 .nav-dot:nth-last-child(2){transform: translateY(.04rem);}
.navigation-dots.n8 .nav-dot:nth-child(3), .navigation-dots.n8 .nav-dot:nth-last-child(3){transform: translateY(-.09rem);}
.navigation-dots.n8 .nav-dot:nth-child(4), .navigation-dots.n8 .nav-dot:nth-last-child(4){ transform: translateY(-.15rem)}

.navigation-dots.n9 .nav-dot:nth-child(1), .navigation-dots.n9 .nav-dot:last-child{transform: translateY(.34rem);}
.navigation-dots.n9 .nav-dot:nth-child(2), .navigation-dots.n9 .nav-dot:nth-last-child(2){transform: translateY(.13rem);}
.navigation-dots.n9 .nav-dot:nth-child(3), .navigation-dots.n9 .nav-dot:nth-last-child(3){transform: translateY(-.025rem);}
.navigation-dots.n9 .nav-dot:nth-child(4), .navigation-dots.n9 .nav-dot:nth-last-child(4){transform: translateY(-.13rem);}
.navigation-dots.n9 .nav-dot:nth-child(5), .navigation-dots.n9 .nav-dot:nth-last-child(5){transform: translateY(-.16rem);}

.zfpage3Box{position: fixed;width: 5.32rem;height: 7.48rem;background: url(../images/zfpage3Box_b.png) center no-repeat;background-size: 100% 100%;padding: .06rem;box-shadow: 0 0 .5rem rgba(255,255,255,.25);border-radius: .18rem;transform: scale(.76);}
.zfpage3Box .boxW{width: 100%;height: 100%;border-radius: .15rem;overflow: hidden}
.zfpage3Box .box{background: #598bdf url(../images/zfpage3Box_bg.png) center no-repeat;background-size: cover;width: 100%;height: 100%;/* border-radius: .15rem; */flex-direction: column;justify-content: space-between;padding: .2rem .32rem .4rem;position: relative;z-index: 1;flex-wrap: nowrap;}
.zfpage3Box .box .bg1 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
}
.zfpage3.on .zfpage3Box .boxW{ pointer-events: none}
.zfpage3Box .box .bg2 {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

.zfpage3Box .box .center {
    /*border-top: rgba(255,255,255,.4) 1px solid; border-bottom: rgba(255,255,255,.4) 1px solid;*/
    padding: .15rem 0;
    height: 2rem;
    display: flex;
    width: 100%;
    align-items: center;
    text-align: center;
    position: relative;
    margin: .8rem 0 0;
    background: url(../images/lines1.png) center top no-repeat, url(../images/lines1.png) center bottom no-repeat;
    background-size: 100% auto;
}

.zfpage3Box .box .center::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    /* background: rgba(255,255,255,.4); */
    height: 1px;
    z-index: 1;
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.5);
    
    /* 提升渲染性能 */
    transform: translateZ(0);
    display: none;
}

.zfpage3Box .box .center::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    /* background: rgba(255,255,255,.4); */
    height: 1px;
    z-index: 1;
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateZ(0);
    display: none;
}

.zfpage3Box .box .bottom {
    width: 100%;
    text-align: center
}

.zfpage3Box .box .bottom .smzfewm {
    width: 1.5rem;
    margin: 0 auto;
    border: #fff .05rem solid;
}

.zfpage3Box .box .bottom .smzfewm img {
    width: 100%
}

.zfpage3Box .box .bottom h6 {
    font-size: .21rem;
    color: #fff;
    margin: .12rem 0 0;
}

.zfpage3Box .box .top {
    width: 100%;
    padding: 0 20% 0 0;
    position: relative;
}

.zfpage3Box .box .top img{width: 80%;}
.zfpage3Box .box .center .name{
    font-size: .32rem;
    color: #fff;
    line-height: 2;
    width: 2.8rem;
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
}
.zfpage3Box .box .center .name1{
    font-size: .24rem;
    color: #fff;
    line-height: 2;
    width: 2.8rem;
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: calc(130% - .4rem);
    left: 50%;
    transform: translateX(-50%);
}
.zfpage3Box .box .center h4 {
    font-size: .28rem;
    color: #fff;
    line-height: 1.75;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#imgdy{position: absolute;top: .06rem;right: .06rem;bottom: .06rem;left: .06rem;z-index: 10;opacity: 0;/* pointer-events: none; */}
#imgdy.show{/* opacity: 1; *//* pointer-events: auto; */}
#imgdy img{ width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: default !important;}
#imgdy canvas{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100% !important; height: 100% !important; pointer-events: none;}

.zfpage3Box .close{position: absolute;left: calc(100% + .6rem);top: 50%;transform: translateY(-50%);width: .7rem;height: .7rem;display: flex;justify-content: center;align-items: center;border: #fff 2px solid;border-radius: 50vw;cursor: pointer;transition: .5s;}
.zfpage3Box .close img{ width: .27rem; transition: .5s;}
.zfpage3Box .close:hover img{ transform: rotate(180deg);}

.shus #blessing-success-dialog{ transform: translate(-50%, -50%) rotate(90deg) !important}

@media(min-width: 1024px){
    .zfslider .a:hover .box .top img{ filter: brightness(6)}
    .zfslider .a:hover .imgBoxs .img::before{ opacity: 0}
    .zfslider .a:hover .imgBoxs .img::after{ opacity: 1}
    .zfslider .a:hover .box .bg1, .zfslider .a:hover .box .bg2{ filter: brightness(5);}
    .zfslider .a:hover{ box-shadow: 0 0 .5rem rgba(255,255,255,.35);}

    
}
@media(max-width: 1024px){
    /* header{ display: none;} */
    .zfslider .box .center{height: 1rem;}
    .zfpage3Box .close{/* left: 50%; *//* top: calc(100% + .1rem); *//* transform: translateX(-50%); *//* width: .5rem; *//* height: .5rem; */}
    .zfpage3Box .close{width: .5rem;height: .5rem;}
    .zfpage3Box .close img{ width: .18rem; height: .18rem}
    .bBox{bottom: 5vh;}
    .navigation-dots{bottom: 8vh;}
    .zfpage3Box{/* width:3.19rem; *//* height: 5rem; */transform: scale(.6);}
    .zfpage3Box .box .center .name{font-size: .24rem;}
    .zfpage3Box .box .center h4{font-size: .24rem;}

    .shus .viewport{width: 80vw !important;}
    .zfslider .box .center h4{ font-size: .16rem; line-height: 1.75}
    .zfslider .box {padding: .1rem .18rem .15rem;}
    .zfpage3Box .box .top img{width: 72%;}

.viewport{height: 80vh;top: 35%;}
}

/* 修复图片显示容器 */
#imgdy {
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* display: none; */
    /* justify-content: center; */
    /* align-items: center; */
    /* z-index: 9999; */
}

#imgdy.show {
    /* display: flex; */
}

#img {
    /* max-width: 90%; */
    /* max-height: 90%; */
    width: auto;
    height: auto;
    object-fit: contain;
    /* 防止 iOS 缩放 */
    -webkit-tap-highlight-color: transparent;
}

/* iOS 专用 */
@supports (-webkit-touch-callout: none) {
    #img {
        max-width: 85%;
        max-height: 85%;
    }
}