#first-wrapper {
    width: 100%;
    /* background-image: linear-gradient(to right, #F1F9FF,40% #F9EFDD,20% #FBFFE6,40%); */
    padding-top: 64px;
    background: url('../images/first-scene-bg-2.png') no-repeat top;
    background-size: 100%;
    position: relative;

}

/* -----------header common css */


/* -----------header common css */
.share-opus img {
    width: 657px;
    height: 166px;
}

.free-btn {
    width: 228px;
    height: 66px;
    line-height: 66px;
    font-size: 24px;
    font-weight: 600;
    color: #FD2B54;
    background-color: #FFFFFF;
    border-radius: 12px;
    position: relative;

}

.free-btn:hover {
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);

}

.free-btn p {
    padding-right: 25px;
}

.free-btn img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 53px;
}


.arrow-left-animate {
    animation: arrowLeftAnimateAdd 1.5s linear infinite;
}

@keyframes arrowLeftAnimateAdd {
    0% {
        right: 53px;
    }

    50% {
        right: 38px;
    }

    100% {
        right: 53px;
    }

}

.desc-title-content {
    font-size: 18px;
    color: #CCC7BD;
    text-align: center;
    font-weight: 400;
}

/* ------------------------swiper------------------ */

.swiper--wrapper {
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
    position: relative;
    overflow: hidden;
    width: 100%;
}

#scroller_roll3 {
    /* width: 100% !important; */
    height: 420px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
#scroller_roll3 ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.scroller_roll ul li {
    height: 340px !important;
    background-color: transparent;
    box-shadow: 0px 9px 28.8px 0px rgba(0, 0, 0, 0.16);
}

/* ------------------------swiper------------------ */

.linear-gradient-bottom {
    width: 100%;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: -40px;
    /* filter: blur(20px); */
    /* margin-top: 47px; */
    /* background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%); */
    /* background-color: #ffffff; */
    z-index: 9;
}


/* 高斯--------- */
.swiper-filter-box-wrap{
    position: relative;
}
.filter-item-box {
    position: absolute;
    bottom: 0px;
    width: 150px;
    height: 800px;
    z-index: 999;
    filter: blur(19px);
}

.filter-left-box {
    left: -55px;
    background: #E4F1FF;
}

.filter-right-box {
    right: -55px;
    background: #FBFFE3;
}


/* .no-l-filter-box,.no-r-filter-box {
    position: absolute;
    bottom: 0px;
    width: 45px;
    height: 420px;
    background: #E4F1FF;
    background-color: red;
    z-index: 999;
}
.no-l-filter-box{
    left: 0;

}
.no-r-filter-box{
    right: 0;
} */

/* ----------------------brand---- */
.secend-wrapper {
    height: 492px;
    padding: 187px 0 140px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    display: flex;
    justify-content: flex-start;
}

.title h3,
.share-title {
    font-weight: 600;
    font-size: 40px;
}

.title h3:nth-of-type(2) {
    padding-left: 10px;
    color: #22A3FF;
}

.sub-title-list {
    padding-top: 50px;
    font-size: 18px;
    color: #8D9399;
    font-weight: 400;
}

.sub-title-list li {
    margin-left: 20px;
    padding-top: 24px;
}

.secend-wrapper .left {
    width: 470px;
    height: 492px;
    display: flex;
    align-items: center;
}

.secend-wrapper .right {
    width: 694px;
    height: 492px;
    background: #65BFFF;
    border-radius: 20px 20px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.secend-wrapper #animation-el {
    width: 444px;
    height: 462px;
    overflow: hidden;
    position: relative;
}

.secend-wrapper #animation-el img {
    width: 444px;
    height: 462px;
    position: absolute;
    left: 0;
    bottom: -400px;
    transition: all 0.3s linear;
    opacity: 0;
}


.secend-wrapper #animation-el .animation-add {
    opacity: 1;
    bottom: 0px;
}


/* ------------------case share ------------------- */

.case-share-wrap {
    flex-direction: column;
    height: 577px;
    background-color: #F2F3F5;
}

.share-title {
    justify-content: flex-start;
    margin-bottom: 44px;
}

.share-title h3:nth-of-type(2) {
    color: #00A04B;
}


.share-imgs {
    transition: all 0.6s ease-out;
    margin-bottom: -200px;
    opacity: 0;
}

.share-imgs-animate {
    margin-bottom: 0;
    opacity: 1;

}

.share-imgs div {
    width: 378px;
    height: 237px;
    margin-left: 33px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    padding: 32px 0 0 32px;
    box-sizing: border-box;
    border-radius: 16px;
}

.share-imgs div:nth-of-type(1) h4 {
    color: #100D24;
}

.share-imgs div p {
    font-size: 16px;
    font-weight: 400;
    padding-top: 16px;
}

.share-imgs div:nth-of-type(1) p {
    color: #100D24;
}

.share-imgs div:nth-of-type(1) {
    background: url('../images/case-img-left.png') no-repeat center;
    background-size: 100%;
    margin-left: 0;
}

.share-imgs div:nth-of-type(2) {
    background: url('../images/case-img-center.png') no-repeat center;
    background-size: 100%;
}

.share-imgs div:nth-of-type(3) {
    background: url('../images/case-img-right.png') no-repeat center;
    background-size: 100%;
}

.share-imgs .share-imgs-hover {
    box-shadow: 0px 16px 32px 3px rgba(0, 0, 0, 0.12);
}

/* ----------------visitor status */
.visitor-wrap {
    height: 723px;
}

.visitor-content-wrap {
    width: 1190px;
    height: 443px;
    background: url('../images/visitor-bg.png') no-repeat center;
    background-size: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
}

.visitor-content {
    padding-left: 98px;
}

.visitor-content h3:nth-of-type(1) {
    color: #FFFFFF;
}

.visitor-content h3:nth-of-type(2) {
    color: #FF6A00;
}

.visitor-icon {
    width: 298px;
    height: 100%;
    position: relative;
    margin-left: 60px;
}

.visitor-icon div {
    width: 210px;
    height: 53px;
    position: absolute;
    opacity: 0;
}

.visitor-icon div:nth-of-type(1) {
    top: 115px;
    left: 88px;
    background: url('../images/visitor-img-top.png') no-repeat center;
    background-size: 100%;
    transition: all 0.3s ease-in;
}

.visitor-icon div:nth-of-type(2) {
    width: 298px;
    height: 97px;
    top: 194px;
    left: 32px;
    z-index: 1;
    background: url('../images/visitor-img-center.png') no-repeat center;
    background-size: 100%;
    transition: all 1s ease-in;
}

.visitor-icon div:nth-of-type(3) {
    width: 230px;
    top: 240px;
    left: 80px;
    z-index: 0;
    background: url('../images/visitor-img-bottom.png') no-repeat center;
    background-size: 100%;
    transition: all 2s ease-in;
}

.icon-anmite-add>div {
    opacity: 1;
}







/* ----------------banquan ------------------*/
.copyright-position {
    width: 648px;
    height: 327px;
    position: absolute;
    top: 0;
    left: 0;
}

.copyright {
    position: relative;
}

.copyright .left-bg,
.copyright .right-bg {
    top: 0;
    height: 569px;
    position: absolute;
}

.copyright .left-bg {
    left: 0;
    width: 54.6%;
    background-color: #F7FCFF;
}

.copyright .right-bg {
    right: 0;
    width: 45.4%;
    background-image: linear-gradient(to top right, #23D5F7, #3F8DFD, #3F8DFD, #23D5F7);
}

.copyright .copyright-width-1200 {
    width: 1200px;
    height: 569px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copyright .right-wrap {
    width: 648px;
    height: 327px;
    position: relative;
}

.copyright .right .bottom img,
.drop-img-wrap img {
    width: 648px;
    height: 327px;
}

.copyright .right .c-bottom-hover {
    box-shadow: 0px 16px 32px 3px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
}

.copyright .right .top {
    width: 200px;
    border-radius: 20px 0px 0px 20px;
    overflow: hidden;
    pointer-events: none;
}

.drop-mask-wrap {
    left: -443px;
    pointer-events: none;
}

.drop-mask-clip {
    border-radius: 20px;
    overflow: hidden;
}

/* -----------------footer common css */