.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.28s
}

.fade-enter,
.fade-leave-active {
    opacity: 0
}

.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all .5s
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px)
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px)
}

.breadcrumb-enter-active,
.breadcrumb-leave-active {
    transition: all .5s
}

.breadcrumb-enter,
.breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(20px)
}

.breadcrumb-move {
    transition: all .5s
}

.breadcrumb-leave-active {
    position: absolute
}

@keyframes showLeft {
    0% {
        opacity: 0;
        left: -200px
    }

    100% {
        opacity: 1;
        left: 0
    }
}

@keyframes hideLeft {
    0% {
        opacity: 1;
        left: 15px
    }

    100% {
        opacity: 0;
        left: -50px
    }
}

@keyframes showLeft2 {
    0% {
        opacity: 0;
        left: -200px
    }

    100% {
        opacity: 1;
        left: 0
    }
}

@keyframes banner_fade_1 {
    0% {
        opacity: 0;
        top: -30px;
        right: -30px
    }

    100% {
        opacity: 1;
        top: -9px;
        right: -9px
    }
}

@keyframes banner_fade_2 {
    0% {
        opacity: 0;
        top: 340;
        right: -120px
    }

    100% {
        opacity: 1;
        top: 14px;
        right: -13px
    }
}

@keyframes banner_fade_3 {
    0% {
        opacity: 0;
        bottom: -200px;
        left: 393px
    }

    100% {
        opacity: 1;
        bottom: 28px;
        left: 693px
    }
}

@keyframes banner_fade_4 {
    0% {
        opacity: 0;
        bottom: -318px;
        right: -20px
    }

    100% {
        opacity: 1;
        bottom: 118px;
        right: -21px
    }
}

@keyframes hideLeft2 {
    0% {
        opacity: 1;
        left: 15px
    }

    100% {
        opacity: 0;
        left: -50px
    }
}

@keyframes showRight {
    0% {
        opacity: 0;
        right: -50px
    }

    100% {
        opacity: 1;
        right: 0
    }
}

@keyframes hideRight {
    0% {
        opacity: 1;
        right: 15px
    }

    100% {
        opacity: 0;
        right: -50px
    }
}

@keyframes showBottomRight {
    0% {
        opacity: 0;
        right: -164px;
        top: 238px
    }

    100% {
        opacity: 1;
        right: 164px;
        top: -38px
    }
}

@keyframes hideBottomRight {
    0% {
        opacity: 1;
        right: -164px;
        bottom: -38px
    }

    100% {
        opacity: 0;
        left: 982px;
        top: 530px
    }
}

@keyframes showBottomRight_q1 {
    0% {
        opacity: 0;
        top: 700px;
        left: 1500px
    }

    100% {
        opacity: 1;
        top: 314px;
        left: 1059px
    }
}

@keyframes showBottomRight_q2 {
    0% {
        opacity: 0;
        left: 270px;
        top: 900px
    }

    100% {
        opacity: 1;
        left: 870px;
        top: 369px
    }
}

@keyframes hideBottomRight_q1 {
    0% {
        opacity: 1;
        left: 1120px;
        bottom: -145px
    }

    100% {
        opacity: 0;
        left: 1300px;
        bottom: -555px
    }
}

@keyframes showBottomRight_star1 {
    0% {
        opacity: 0;
        top: -167px;
        right: -51px
    }

    100% {
        opacity: 1;
        top: -67px;
        right: 51px
    }
}

@keyframes showBottomRight_star2 {
    0% {
        opacity: 0;
        top: 549px;
        left: -20px
    }

    100% {
        opacity: 1;
        top: 349px;
        left: -3px
    }
}

@keyframes showBottomRight_car {
    0% {
        opacity: 0;
        top: -100px;
        left: 100px
    }

    100% {
        opacity: 1;
        top: 0;
        left: 0
    }
}

@keyframes showBottom {
    0% {
        opacity: 0;
        bottom: -50px
    }

    100% {
        opacity: 1;
        bottom: 15px
    }
}

@keyframes hideBottom {
    0% {
        opacity: 1;
        bottom: 15px
    }

    100% {
        opacity: 0;
        bottom: -50px
    }
}

@keyframes dong {
    0% {
        transform: translate(0px, 0px)
    }

    50% {
        transform: translate(0px, -8px)
    }

    100% {
        transform: translate(0px, 0px)
    }
}

@keyframes dong_ban {
    0% {
        transform: translate(0px, 0px)
    }

    50% {
        transform: translate(0px, -5px)
    }

    100% {
        transform: translate(0px, 0px)
    }
}

@keyframes bullBall {
    0% {
        transform: translate(50px, -50px)
    }

    10% {
        transform: translate(150px, -150px)
    }

    20% {
        transform: translate(100px, -150px)
    }

    30% {
        transform: translate(100px, -200px)
    }

    40% {
        transform: translate(60px, -200px)
    }

    50% {
        transform: translate(80px, -200px)
    }

    60% {
        transform: translate(90px, -400px)
    }

    70% {
        transform: translate(80px, -400px)
    }

    80% {
        transform: translate(60px, -350px)
    }

    100% {
        transform: translate(50px, -50px)
    }
}

@keyframes purpleBall {
    0% {
        transform: translate(-20px, 50px)
    }

    10% {
        transform: translate(-80px, 70px)
    }

    20% {
        transform: translate(-100px, 150px)
    }

    30% {
        transform: translate(-100px, 200px)
    }

    40% {
        transform: translate(-60px, 200px)
    }

    50% {
        transform: translate(-80px, 200px)
    }

    60% {
        transform: translate(-90px, 400px)
    }

    70% {
        transform: translate(-80px, 400px)
    }

    80% {
        transform: translate(-60px, 350px)
    }

    100% {
        transform: translate(-20px, 50px)
    }
}

.button-sweep {
    background: rgba(64, 100, 255, 0.93) !important;
    border-radius: 40px !important;
    display: inline-block !important;
    transition-property: color !important;
    position: relative !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -moz-osx-font-smoothing: grayscale !important;
    transition-duration: 0.3s !important;
    overflow: hidden !important
}

.button-sweep:before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #3a67ff !important;
    border-radius: 40px !important;
    transform: scaleX(0) !important;
    transform-origin: 0 50% !important;
    transition-property: transform !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease-out !important
}

.button-sweep:hover,
.button-sweep:focus,
.button-sweep:active {
    color: white !important
}

.button-sweep:hover:before,
.button-sweep:focus:before,
.button-sweep:active:before {
    -webkit-transform: scaleX(1) !important;
    transform: scaleX(1) !important
}

.place-warp {
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    background: #ecf1f6
}

.place-warp .place-warp-2 {
    background-size: 100% 100%;
    width: 100%;
    height: 100%
}

.place-warp .top-warp {
    margin-top: 208px;
    width: 100%;
    padding-top: 0;
    padding-bottom: 75px;
    text-align: center;
    position: relative
}

.place-warp .top-warp .ball {
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    box-shadow: h-shadow v-shadow blur spread color inset;
    filter: blur(3px)
}

.place-warp .top-warp .ball div {
    width: 100%;
    height: 100%;
    background: url(../../images/bg_wang.png) no-repeat center;
    background-size: cover
}

.place-warp .top-warp .ball.blue {
    background-image: radial-gradient(circle, #86ccfa, 50%, rgba(244, 244, 244, 0.3) 80%);
    left: -500px;
    bottom: -713px;
    animation: bullBall 8s infinite
}

.place-warp .top-warp .ball.purple {
    background-image: radial-gradient(circle, #888ffa, 40%, rgba(244, 244, 244, 0.3) 80%);
    right: -319px;
    top: -623px;
    animation: purpleBall 8s infinite
}

.place-warp .top-warp .top-title {
    text-align: center;
    margin-bottom: 45px;
    font-size: 70px;
    font-family: Gilroy-ExtraBold;
    font-weight: 800;
    color: #0A0D19;
    line-height: 74px;
    position: relative;
    z-index: 2
}

.place-warp .top-warp .top-title span {
    color: #4064ff;
    font-size: 70px;
    font-family: Gilroy-ExtraBold;
    font-weight: 800
}

.place-warp .top-warp .top-explain {
    text-align: center;
    margin-bottom: 58px;
    font-size: 18px;
    font-family: Gilroy-Regular;
    font-weight: 400;
    color: #0A0D19;
    position: relative;
    z-index: 2;
    line-height: 1
}

.place-warp .top-warp .top-btn {
    width: 350px;
    height: 80px;
    background: #4064FF;
    box-shadow: 0px 34px 46px 0px rgba(64, 100, 255, 0.23);
    border-radius: 40px;
    margin: 0 auto;
    font-size: 20px;
    font-family: Gilroy-Bold;
    font-weight: bold;
    color: #FFFFFF;
    position: relative;
    z-index: 2
}

.place-warp .second-warp {
    width: 1320px;
    height: 800px;
    background: #F8F8F8;
    opacity: 0.9;
    border-radius: 80px;
    margin: 0 auto;
    padding: 87px 90px;
    margin-bottom: 133px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2
}

.place-warp .second-warp .second-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 69px;
    padding: 0 66px
}

.place-warp .second-warp .second-tab .second-tab-item {
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    font-family: Gilroy-Bold;
    font-weight: bold;
    color: #0A0D19;
    border-radius: 40px;
    cursor: pointer;
    width: auto;
    text-align: center;
    margin-right: 102px
}

.place-warp .second-warp .second-tab .second-tab-item:last-child {
    margin-right: 0 !important
}

.place-warp .second-warp .second-tab .second-tab-item:hover {
    color: #4064FF
}

.place-warp .second-warp .second-tab .second-tab-item.active {
    height: 80px;
    background: #4064FF;
    box-shadow: 0px 34px 46px 0px rgba(64, 100, 255, 0.23);
    border-radius: 40px;
    font-size: 20px;
    line-height: 80px;
    color: #fff;
    font-family: Gilroy-Bold;
    padding: 0 53px
}

.place-warp .second-warp .second-content {
    flex: 1;
    padding-left: 50px;
    position: relative
}

.place-warp .second-warp .second-content .mymap {
    width: 100%;
    height: 100%
}

.place-warp .second-warp .second-content .mapImg {
    width: 100%
}

.place-warp .second-warp .second-content .location-warp {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.place-warp .second-warp .second-content .location-warp .location-item {
    display: flex;
    flex-direction: row;
    width: 114px;
    height: 124px
}

.place-warp .second-warp .second-content .location-warp .location-item .location-img-warp {
    position: absolute
}

.place-warp .second-warp .second-content .location-warp .location-item .location-img-warp .otherImage {
    position: absolute;
    width: 51px;
    height: 51px;
    border-radius: 50%;
    top: 9px;
    left: 30px
}

.place-warp .second-warp .second-content .location-warp .location-item .baseImage {
    width: 114px;
    height: 124px;
    vertical-align: top;
    line-height: 0
}

.place-warp .second-warp .second-content .location-warp .location-item span {
    font-size: 20px;
    font-family: Gilroy;
    font-weight: bold;
    color: #0A0D19;
    line-height: 1.1;
    left: 98px;
    top: 20px;
    width: auto;
    position: absolute
}

.place-warp .second-warp .second-content .location-warp .location1 {
    position: absolute
}

.place-warp .second-warp .second-content .location-warp .location2 {
    position: absolute;
    left: 224px;
    top: 112px
}

.place-warp .content {
    width: 1500px;
    height: 470px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    z-index: 2;
    position: relative;
    margin-bottom: 122px
}

.place-warp .content .left {
    padding: 70px 0 70px 80px
}

.place-warp .content .left .active {
    width: 419px;
    height: 100px;
    background: #FFFFFF;
    border-radius: 50px 0px 0px 50px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #0A0D19;
    line-height: 26px;
    font-size: 22px;
    line-height: 100px;
    padding-left: 50px;
    opacity: 1;
    font-family: Gilroy-Bold;
    cursor: pointer
}

.place-warp .content .left h3 {
    font-size: 22px;
    font-weight: bold;
    color: #0A0D19;
    line-height: 26px;
    opacity: 0.6;
    margin-bottom: 5px;
    padding-left: 50px;
    cursor: pointer;
    height: 81px;
    line-height: 81px;
    font-family: Gilroy-Bold
}

.place-warp .content .left h3:hover {
    width: 419px;
    height: 100px;
    background: #FFFFFF;
    border-radius: 50px 0px 0px 50px;
    font-weight: bold;
    color: #0A0D19;
    line-height: 26px;
    font-size: 22px;
    line-height: 100px;
    padding-left: 50px;
    opacity: 1;
    cursor: pointer
}

.place-warp .content .right {
    flex: 1;
    padding: 66px 57px 50px 73px;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    display: flex;
    flex-direction: column
}

.place-warp .content .right .title {
    font-size: 40px;
    font-weight: bold;
    color: #0A0D19;
    margin-bottom: 50px;
    text-align: left;
    font-family: Gilroy-Bold
}

.place-warp .content .right .content2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    overflow: auto
}

.place-warp .content .right .content2 .img-item {
    display: inline-block;
    padding: 10px 24px;
    background: #f4f4f4;
    border-radius: 40px;
    margin-right: 15px;
    margin-bottom: 20px
}

.place-warp .content .right .content2 .img-item img {
    width: 40px;
    height: 40px;
    line-height: 0;
    vertical-align: top;
    border: 1px solid #eee
}

.place-warp .content .right .content2 .img-item img:last-child {
    margin-right: 0
}

.place-warp .content .right .content2 .img-item h5 {
    font-weight: bold;
    color: #0A0D19;
    font-size: 16px;
    font-family: Gilroy-Bold;
    margin-top: 11px;
    display: inline-block;
    margin-left: 7px
}

.place-warp .content .right .fixed {
    position: absolute;
    font-family: Gilroy-ExtraBold;
    font-size: 300px;
    bottom: -147px;
    opacity: .1;
    right: 30px
}

.place-warp .other-footer {
    position: relative;
    z-index: 2
}