/* 默认背景色 */
body {
    background: rgba(255, 223, 90, 1);
}

.flex-center-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 默认背景图 */
.com-page-bg {
    width: 100%;
    height: 100vh;
    background: rgba(255, 223, 90, 1) url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/dhl_bg.png') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
}

.com-page-padding {
    padding: 0.25rem 0.25rem 0.41rem 0.25rem;
}

.dhl-img {
    width: 100%;
    height: 1rem;
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/dhl_img.png') no-repeat center center;
    background-size: 100% 100%;

}

/*斑马线*/
.zebra-crossing-img {
    width: 100%;
    height: 0.08rem;
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/zebra_crossing_img.png') no-repeat center center;
    background-size: 100% 100%;
}

/* 互动答题 */
.interactive-answer-img {
    width: 100%;
    height: 2rem;
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/hddt_title.png') no-repeat center center;
    background-size: 100% 100%;
    margin-top: 0.32rem;
}

.ipt-cont-box {
    padding: 0 0 0 0.45rem;
}

/* 下一关 */
.next-level {
    width: 3rem;
    height: 0.9rem;
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/next_level_btn.png') no-repeat center center;
    background-size: 100% 100%;
}

/* 提交按钮 */
.submit-btn {
    width: 5.08rem;
    height: 1.2rem;
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/submit_btn.png') no-repeat center center;
    background-size: 100% 100%;
}

/* 红色关闭按钮 */
.red-close-icon {
    width: 0.53rem;
    height: 0.53rem;
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/red_close.png') no-repeat center center;
    background-size: 100% 100%;
}

/*地图页*/
.map-page {
    background-color: #FFDF5A;
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_bg.png");
    position: relative;
}

.map-page .logo-area {
    padding: .37rem .35rem .24rem;
    position: relative;
}
.map-page .logo-area .play-icon{
    position: absolute;
    width: .66rem;
    height: .66rem;
    display: block;
    right: .4rem;
    top: .2rem;
    margin: auto;
}
@keyframes rotate {
    form {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate360 {
    -webkit-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
    animation-fill-mode: both;
}

.map-page .logo-area .logo {
    width: 2.36rem;
    height: .34em;
    display: block;
}

.map-page .map-content {
    position: relative;
}

.map-page .map-content .detail {}

.map-page .map-content .zhu-hai {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_zhu_hai.png");
}

.map-page .map-content .zhu-hai-active {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_zhu_hai_active.png") !important;
}

.map-page .map-content .jiang-men {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_jiang_men.png");
}

.map-page .map-content .jiang-men-active {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_jiang_men_active.png") !important;
}

.map-page .map-content .zhong-shan {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_zhong_shan.png");
}

.map-page .map-content .zhong-shan-active {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_zhong_shan_active.png") !important;
}

.map-page .map-content .dong-guan {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_dong_guan.png");
}

.map-page .map-content .dong-guan-active {
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_dong_guan_active.png") !important;
}


.map-page .map-content img {
    display: block;
}

.map-page .map-content .airplane {
    position: absolute;
    width: 17.87%;
    top: 0;
}

.map-page .map-content .default-bg {
    transition: all .6s;
}

.map-page .btn-box {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

.map-page .btn-box .interactive-answer-btn,
.interactive-answer-btn {
    width: 3rem;
    height: .9rem;
    display: block;
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_btn1.png");
    margin-right: .3rem;
}

.map-page .btn-box .good-gif-btn {
    width: 3rem;
    height: .9rem;
    display: block;
    background-image: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/dhl/map_btn2.png");
}

.map-page .airplane-map {
    display: block;
    position: absolute;
    width: 750px;
    height: 1448px;
    top: 0;
    left: -168px;
    pointer-events: none;
    overflow: hidden;
}

.map-page .airplane-temp {
    width: 17.87%;
    position: absolute;
    display: block !important;
    z-index: 99;
    pointer-events: none;
}

.no-click {
    pointer-events: none;
}



.error-prompt {
    width: 3.94rem;
    height: 1.94rem;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0.24rem;
    position: fixed;
    left: 25%;
    transform: translateX(-25%);
    top: 50%;
    transform: translateY(-50%);
}

.error-prompt-cont {
    width: 100%;
    height: 100%;
}

.white-close {
    width: 0.5rem;
    height: 0.5rem;
}

.error-prompt-text {
    font-size: 0.28rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.35rem;
    letter-spacing: 0.02rem;
    margin-top: 0.24rem;
    padding: 0 .2rem;
    text-align: center;
}
