/*.three-html,.three-body{*/


/*height: 100%;*/


/*}*/


/*.three-body{*/


/*background: url("../../img/third-bg.png") no-repeat 0 0;*/


/*background-size: 100% 100%;*/


/*}*/

.third-article {
    /* background: url(../../new-img/third-line.png) no-repeat 0 5px;
    width: 100%;
    height: 100%;
    background-size: contain; */
    /* position: relative; */
    /* top: 1.87rem; */
    /* margin-top: 1.9rem; */
    /* left: 3rem; */
}

.first-circle {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background: #f03e6e;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    /* right: .9rem; */
    /* left: 1.3rem; */
    /* top: -.0rem; */
    font-size: .4rem;
    /* top: 2.25rem; */
    bottom: 74%;
    left: 12%;
}

.swiper-slide-active .first-circle.bounceInDown {
    animation-name: bounceInDown;
    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -ms-animation-name: bounceInDown;
}

.swiper-slide-active .imgUp.bounceInUp {
    animation-name: bounceInUp;
    -webkit-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    -ms-animation-name: bounceInUp;
}

.second-title {
    animation-delay: .5s;
}

.third-title {
    animation-delay: 1s;
}

.swiper-slide-active .second-text.bounceInRight {
    animation-name: bounceInRight;
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -ms-animation-name: bounceInRight;
}

.swiper-slide-active .third-text.bounceInLeft {
    animation-name: bounceInLeft;
    -webkit-animation-name: bounceInLeft;
    -moz-animation-name: bounceInLeft;
    -ms-animation-name: bounceInLeft;
}

.swiper-slide-active .four-text.bounceInRight {
    animation-name: bounceInRight;
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -ms-animation-name: bounceInRight;
}

.second-text {
    animation-delay: .5s;
}

.third-text {
    animation-delay: 1s;
}

.four-text {
    animation-delay: 1.5s;
}

.four-title {
    animation-delay: 1.5s;
}

.first-title {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -.15rem;
    right: -0.35rem;
}

.first-title>p {
    width: .6rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background: #527698;
    border: 3px solid #fff;
    margin-right: .4rem;
    font-size: .4rem;
}

.second-circle {
    /* position: relative; */
}

.second-title {
    position: absolute;
    right: 3rem;
    top: 4.8rem;
}

.second-title>img {
    width: .8rem;
    z-index: 2;
    position: relative;
    top: -0.8rem;
    left: 0.6rem;
}

.third-title>img {
    width: .8rem;
    z-index: 2;
    position: relative;
    left: 0.3rem;
    top: 1.4rem
}

.four-title>img {
    width: .8rem;
    z-index: 2;
    position: relative;
    right: -2.78rem;
}

.twoPage-second-tips {
    position: absolute;
    left: 1rem;
    top: -0.7rem;
    width: 2rem;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: .6rem;
    color: #fff;
    text-align: center;
    background: url(../../img/first-tips.png) no-repeat 0 0;
    background-size: 100%;
    transform: rotate(245deg);
}

.second-tips>img, .third-tips>img, .four-tips>img {
    width: 2rem;
    z-index: 1;
    position: relative;
}

.second-text {
    position: absolute;
    /* left: .7rem; */
    font-size: .5rem;
    color: #fff;
    top: 4rem;
    right: 3.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.third-circle {
    position: absolute;
    top: 6rem;
    left: 3.2rem;
}

.third-title, .four-title {
    position: relative;
}

.twoPage-third-tips {
    width: 2rem;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: .6rem;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 1.6rem;
    left: -1.4rem;
    background: url(../../img/second-tips.png) no-repeat 0 0;
    background-size: 100%;
    transform: rotate(107deg);
}

.third-title>img {}

.third-text {
    font-size: .5rem;
    color: #fff;
    /* margin-left: -3.5rem; */
    margin-top: 0.65rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-left: 1.5rem;
}

.four-circle {
    position: absolute;
    top: 10rem;
    /* left: -.36rem; */
    right: -1rem;
}

.twoPage-four-tips {
    position: absolute;
    left: 3.1rem;
    top: 0.3rem;
    width: 2rem;
    height: 2.1rem;
    line-height: 2.1rem;
    font-size: .6rem;
    color: #fff;
    text-align: center;
    background: url(../../img/third-tips.png) no-repeat 0 0;
    background-size: 100%;
    transform: rotate(274deg);
}

.four-text {
    font-size: .5rem;
    color: #fff;
    margin-left: -0.7rem;
    margin-top: -.78rem;
    margin-right: 4.4rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.swiper-slide-active .three-airPlan {
    /* width: 0.8rem; */
    position: absolute;
    transform: rotate(30deg);
    left: 0;
    /* bottom: 74.6%; */
    animation: thirdPageMyMove 8s ease;
    animation-fill-mode: forwards;
}

@keyframes thirdPageMyMove {
    0% {
        left: 0;
        bottom: 74.6%;
        transform: rotate(30deg);
    }
    10% {
        left: 4rem;
        bottom: 74.6%;
        transform: rotate(30deg);
    }
    25% {
        left: 6.75rem;
        bottom: 74.6%;
        transform: rotate(30deg);
    }
    26% {
        left: 6.75rem;
        bottom: 74.6%;
        transform: rotate(120deg);
    }
    35% {
        transform: rotate(120deg);
        left: 6.75rem;
        bottom: 52.5%;
    }
    36% {
        transform: rotate(210deg);
        left: 6.75rem;
        bottom: 52.5%;
    }
    45% {
        transform: rotate(210deg);
        left: 3.5rem;
        bottom: 52.5%;
    }
    46% {
        transform: rotate(120deg);
        left: 3.5rem;
        bottom: 52.5%;
    }
    55% {
        left: 3.5rem;
        bottom: 38%;
        transform: rotate(120deg);
    }
    56% {
        left: 3.5rem;
        bottom: 38%;
        transform: rotate(30deg);
    }
    57% {
        left: 3.5rem;
        bottom: 38%;
        transform: rotate(30deg);
    }
    70% {
        transform: rotate(30deg);
        left: 6.75rem;
        bottom: 38%;
    }
    71% {
        transform: rotate(120deg);
        left: 6.75rem;
        bottom: 38%;
    }
    85% {
        left: 6.75rem;
        bottom: 10%;
        transform: rotate(120deg);
    }
    86% {
        left: 6.7rem;
        bottom: 10%;
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(30deg);
        left: 8.9rem;
        bottom: 10%;
    }
}

.three-airPlan>img {
    /* position: absolute; */
    /* display: none; */
    width: 1rem;
    /* transform: rotate(30deg); */
    /* left: 0; */
    /* top: 1.3rem; */
}


/*  弹窗*/

.third-shadow {
    display: none;
    /* background: #ccc; */
    left: 0;
    position: absolute;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    font-family: mFont;
}

.third-op {
    display: none;
    position: absolute;
    background: #000;
    /* z-index: 111; */
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.third-shadow-box1 {
    margin: 2rem 0;
    width: 100%;
    height: calc(100% - 4rem);
    display: flex;
    justify-content: center;
}

.third-shadow-box2 {
    background: #527ca9;
    width: 80%;
    height: 80%;
    margin-top: 30px;
    border-radius: 10px;
    position: relative;
}

.third-shadow-box2 .s-img1 {
    position: absolute;
    width: 3.5rem;
    left: 2rem;
    top: -0.6rem;
}

.third-shadow-box2 .s-img2 {
    position: absolute;
    width: 100%;
    top: 1.48rem;
}

.third-shadow-text-box {
    position: absolute;
    top: 2.3rem;
    text-align: center;
    padding: 10px;
    background: #d8e8f3;
    height: calc(100% -2rem);
    height: 75%;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

.third-shadow-text-box .s-title {
    font-size: 0.45rem;
    color: #527ca9;
    font-weight: bold;
}

.third-shadow-text-box .s-text {
    margin-top: 0.2rem;
    line-height: 23px;
    text-align: left;
    height: 90%;
    overflow-y: scroll;
}

.third-shadow-close {
    position: absolute;
    right: 15px;
    top: 1.5rem;
}

.third-shadow-close .s-img-close {
    width: 0.8rem;
}

.thirdPage-box {
    width: 90%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    text-align: center;
    background: #fff;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .4rem;
    color: #666;
    display: none;
}


/*.list-info.jackInBox{*/


/*animation-name: jackInBox;*/


/*-webkit-animation-name: jackInBox;*/


/*-moz-animation-name: jackInBox;*/


/*-ms-animation-name: jackInBox;*/


/*}*/


/*.list-info.on{*/


/*display: block;*/


/*}*/

.synopsis-one {
    margin-top: 1rem;
    line-height: .8rem;
}

.close-btn {
    position: absolute;
    right: .2rem;
    top: 0;
    color: #f00;
    font-size: .6rem;
}

.company-name {
    font-size: .5rem;
    color: #414141;
    margin-bottom: .3rem;
}

.thirdPage-box img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid #f00;
}

.third-box1 {
    position: absolute;
    bottom: 70%;
    right: 24.5%;
}

.third-box2 {
    position: absolute;
    bottom: 48%;
    right: 56.5%;
}

.third-box3 {
    position: absolute;
    bottom: 32%;
    right: 24.5%;
}

.box-text {
    font-size: .5rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    position: absolute;
    position: absolute;
}

.box-t1 {
    bottom: 70%;
    right: 33%;
}

.box-t2 {
    bottom: 48.5%;
    right: 21%;
}

.box-t3 {
    bottom: 32.3%;
    right: 33%;
}

.third-box1>img, .third-box2>img, .third-box3>img {
    width: .8rem;
    z-index: 2;
    position: relative;
}

.third-box1 .box1 {
    position: absolute;
    left: 0.4rem;
    top: 0;
    width: 2rem;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: .6rem;
    color: #fff;
    text-align: center;
    background: url(../../img/first-tips.png) no-repeat 0 0;
    background-size: 100%;
    transform: rotate(245deg);
}

.third-box2 .box2 {
    position: absolute;
    left: -1.6rem;
    top: 0;
    width: 2rem;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: .6rem;
    color: #fff;
    text-align: center;
    background: url(../../img/second-tips.png) no-repeat 0 0;
    background-size: 100%;
    transform: rotate(107deg);
}

.third-box3 .box3 {
    position: absolute;
    left: 0.2rem;
    top: 0.1rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: .6rem;
    color: #fff;
    text-align: center;
    background: url(../../img/third-tips.png) no-repeat 0 0;
    background-size: contain;
    transform: rotate(274deg);
}