/* 解决IOS滑屏卡顿  如有定位问题 改变层级关系*/
*{-webkit-overflow-scrolling: touch; touch-action: pan-y; } 
html{-ms-touch-action: none;}
body{font-size: 12px;font-family: ubuntu,helvetica,arial;overflow: hidden;}
img{display: block;}
body,ul,li{padding: 0;margin: 0;border: 0;}
.wh100{width: 100%;height: 100%;}
.loading{width: 100%;height: 100%;background-color: #F7AB48;position: absolute;z-index: 9999;}
.loading .load{text-align: center;font-size: 15px;}
.loading .bd{width: 55%;top: 50%;left: 60%;}
.loading .bd img{width: 120%;margin-left: -10%;}
.loading .bd .cent{text-align: center;}

.loading .loada {
position: absolute;
top: 20.5%;
left: 45%;
width: 120px;
height: 300px;
top: 50%;
margin-top: -150px;
background: url(http://n.sinaimg.cn/ln/20200106langhua/images/loada1.png) no-repeat center top;
background-size: 100% 100%;
}
.loading .loada .loadb {
height: 120px;
overflow: hidden;
}
.loading .loada .loadb img {
height: 300px;
width: 120px;
}
.loading .loading-percent {
position: absolute;
/*transform: rotate(90deg);*/
color: #333;
opacity: 0.9;
font-size: 12px;
top: 135%;
margin-top: -40px;
left: 25%;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
}
.loading .loading-percent:after {
content:'';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://n.sinaimg.cn/ln/20200106langhua/images/loading.png) no-repeat;
background-size: 100%;
animation: loading 3s linear infinite;
}
@keyframes loading {
100% {
    transform:rotate(360deg)
}
}

#music {position: absolute;width: 40px;height: 40px;right: 3%;top: 2%;background-size: 100%;z-index: 99999;background-repeat: no-repeat;background-position: center center;background-image: url(../music.png);}
#wrapper{position: absolute;z-index: 1;top: 0;bottom: 0;left: 0;width: 100%;height: 100%;overflow: hidden;opacity: 0;}
#scroller{position: absolute;z-index: 1;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-transform: translateZ(0);transform: translateZ(0);-webkit-touch-callout: none;
user-select: none;-webkit-text-size-adjust: none;text-size-adjust: none;perspective: 3100px;width: 100%;will-change: transform;}
.v_img{position: absolute;z-index: 999;transform: translate3d(-50%,-50%,0) rotate(90deg);-webkit-transform: translate3d(-50%,-50%,0) rotate(90deg);left: -50%;	}
.v_img2{position: absolute;z-index: 999;transform: translate3d(-50%,-50%,0) rotate(90deg);-webkit-transform: translate3d(-50%,-50%,0) rotate(90deg);left: 50%;	}
/* 字幕 */
.list_box .point .zm{transform: scale(3) translateX(31%) translateY(-85%) translate3d(0px,0px,0px);}
.list_box .point .zm2{transform: scale(3) translateX(-63%) translateY(-85%) translate3d(0px,0px,0px);}
/* 文字合成后 蒙层 */
.text{position: absolute;top: 0;left: 0; background: rgba(0, 0, 0, 0.6);z-index: 99999;}
.text img{width: 120%;top: 50%;left: 50%;z-index: 999999;}

.list_box img{transform: translate3d(0px,0px,0px);-webkit-transform: translate3d(0px,0px,0px);width: 100%;}
.index_box {position: absolute;z-index: 999;height: 100%;width: 100%;top: 0;left: 0;}
.index_box .video{position: absolute;top: 50%;z-index: 999999;}
.index_box .video img{position: absolute;z-index: 9999999;width: 17%;top: 40%;left: 40%;animation: pointAni 1.5s infinite; }
.index_box .video video{object-fit: fill;}
/* 加载后弹出蒙层 */
.list_box .loaded_tip{ width: 100%; height: 100%; position: absolute; top:0; left: 0; background:rgba(0,0,0,0.8)!important;z-index: 999999999; }
.list_box .loaded_tip .load_point{ transform: rotateZ(90deg);top: 5%;left: 30%;position: absolute;width: 25%;animation: pointAni 2s infinite; }
.list_box .loaded_tip .tips{ transform: rotateZ(90deg) !important;top: 3%;left: 0;position: absolute;}

.p_3d {perspective: 300px;perspective-origin: 75% 17%;}

/* 手指提示 */
.hand{position: absolute;width: 18%;left: 53%;top: 5%;z-index:9999999;}
.hand2{position: absolute;width: 94%;left: 112%;top: -50%;transform-origin: bottom;-webkit-transform-origin: bottom;}
.hand3{position: absolute;width: 11%;left: 65%;z-index: 999999;top: 45%;display: none;}
/* p1-------p1 */
    /* 树 */
    .tree {top: 2.2%;width: 116%;left: 50%;z-index: 9999899;}
    /* 动车 */
    .motor{top: 2.2%;width: 127%;left: 40.5%;z-index: 999999;}
    /* 头盔人 */
    .p1_person{top: 8%;width: 93%;left: 43%;z-index: 9999999;}
    /* 辽宁舰 */
    .LN_ship{top: 14.5%;width: 302%;left: 55%;z-index: 999999;}
    /* 飞机 */
    .airplane{top: 17.7%;width: 58%;left: 32%;z-index: 99999;}
    /* 浪花 */
    .spray{top: 18.4%;width: 128%;left: 21.9%;z-index: 999999;}
/* p2-------p2 */
    /* 浪花2 */
    .spindrift{top: 22.5%;width: 130%;left: 6.8%;z-index: 999999;}
    /* 鱼 */
    .fish{top: 22%;width: 30%;left: -16%;z-index: 99999;}
    /* 船 */
    .p2_ship{top: 18%;width: 155%;left: 35%;z-index: 9999;}
    /* 人挥手 */
    .p2_persons{top: 28.2%;width: 150%;left: 49%;z-index: 9999;}
/* p3-------p3 */
    /* 山 */
    .mountain{top: 34.4%;width: 172%;left: 50%;z-index: 9999999;}
    /* 船 */
    .p3_ship{top: 37%;width: 86%;left: 42%;z-index: 9999;}
    /* 鹤 */
    .he{top: 38.8%;width: 100%;left: -35%;z-index: 99999;}
    /* 芦苇 */
    .reed{top: 42.5%;width: 170%;left: 21%;z-index: 9999;}
    /* 云 */
    .p3_cloud{top: 45.5%;width: 180%;left: 51%;z-index: 99999;}
/* p4-------p4 */
    /* 机器人 */
    .robot{top: 53.46%;width: 30%;left: 30%;z-index: 999999;}
    /* 数据视图 */
    .model{top: 56.6%;width: 86%;left: 45%;z-index: 9999999;animation: modelAni 1.5s infinite;}
    /* 医生 */
    .doctors{top: 61.2%;width: 156%;left: 40.5%;z-index: 999999;}
    /* 灯光 */
    .light{top: 66.4%;width: 117%;left: 62.5%;z-index: 999999;}
/* p5-------p5 */
    /* 树 */
    .p5_tree{top: 69.9%;width: 163%;left: 50.5%;z-index: 9999999;}
    /* 骑车 */
    .cycling{top: 70%;width: 63%;left: 38.5%;z-index: 999999;}
    /* 学生 */
    .student{top: 78.2%;width: 113%;left: 49.3%;z-index: 9999999;}
    /* 人物 */
    .p5_person{top: 86.6%;width: 45%;left: 29%;z-index: 999999;}
/* p6-------p6 */
    /* 交警 */
    .police{top: 88.4%;width: 63%;left: 34.5%;z-index: 99999;}
    /* 车 */
    .car{top: 88.7%;width: 125%;left: 32.5%;z-index: 9999;}
    /* 地铁口 */
    .subway{top: 93.6%;width: 180%;left: 67%;z-index: 999;}
    /* 人物 */
    .p6_person{top: 93%;width: 70%;left: 20%;z-index: 999999;}
    /* 动车 */
    .p6_motor{top: 93.2%;width: 74%;left: 73%;z-index: 99;}
    /* 立交桥 */
    .bridge{top: 97.333%;width: 140%;left: 50%;z-index: 999999;}
/* point */
    .point{width: 12%;z-index: 99999999;}
    .point .zm{width: 50%;top: 72.22%;left: 45.8%;}    
    .point .zm2{width: 50%;top: 72.22%;left: 44.8%;}
    .point1{top: 4.5%;left: 72%;}
    .point2{top: 11.5%;left: 85%;}
    .point3{top: 22.5%;left: 25%;}
    .point4{top: 26.8%;left: 60%;}
    .point5{top: 34.5%;left: 45%;}
    .point6{top: 43.75%;left: 72%;}
    .point7{top: 53.5%;left: 28%;}
    .point8{top: 57.8%;left: 81%;}
    .point9{top: 69%;left: 48%;}
    .point10{top: 80.3%;left: 75%;}
    .point11{top: 89.3%;left: 36%;}
    .point12{top: 98.3%;left: 71%;}

    
/* ********************************** */

@keyframes transform { 
    0% {transform-origin:right center;transform:rotateZ(0deg);}
    25% {transform-origin:right center;transform:rotateZ(10deg);}
    50% {transform-origin:right center;transform:rotateZ(00deg);}
    75% {transform-origin:right center;transform:rotateZ(-10deg);}
    100% {transform-origin:right center;transform:rotateZ(0deg);}
}
.w_btn{top: 97.7%;width: 36%;left: 0;z-index: 1994052225;opacity: 0;position: absolute;}
/* 已选字 集合 */
.o5{opacity: .5;}
.p7 {position: absolute;z-index: 999;height: 100%;width: 100%;top: 50%;left: 50%;}
.p7 .bg{position: absolute;z-index: 999999;}
.p7 .flex {position: absolute;display: flex;flex-wrap: wrap;justify-content: space-around;
        width: 80%;height: 60%;transform: translate3d(12%,15%,0);z-index: 999999;}
.p7 .flex .item{width: 25%;height: 50%;display: flex;justify-content: center;}
.p7 .flex .item:nth-of-type(5){margin-left: 10%;}
.p7 .flex .item:last-child{margin-right: 10%;}
.p7 .flex .item img{width: 80%;}
/* 7个字 */
.p7 .flex .no{background: url(../images/p7/no.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .no.active{background: url(../images/p7/noa.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .wen{background: url(../images/p7/w1.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .wen.active{background: url(../images/p7/w1a.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .feng{background: url(../images/p7/f1.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .feng.active{background: url(../images/p7/f1a.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .mei{background: url(../images/p7/m1.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .mei.active{background: url(../images/p7/m1a.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .jian{background: url(../images/p7/j1.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .jian.active{background: url(../images/p7/j1a.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .chang{background: url(../images/p7/c1.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .chang.active{background: url(../images/p7/c1a.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .zhi{background: url(../images/p7/z1.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
.p7 .flex .zhi.active{background: url(../images/p7/z1a.png) no-repeat;background-size: 80% 100%;background-position-x: center;}
/* end */
/* 确认按钮 */
.p7 .toSubmit{width: 30%;height: 20%;position: absolute;top: 75%;left: 35%;z-index: 999999;}
.p7 .toSubmit img{width: 100%;}
/* p8 */
.p8 {position: absolute;z-index: 9999;height: 100%;width: 100%;}
.p8 .hb{position: absolute;width: 77.2%;height: 76.7%;top: 4.5%;left: 11.5%;}
.p8 .btn1{position: absolute;width: 60%;height: 7%;top: 79%;left: 10%;z-index: 999;pointer-events: none;}
.p8 .btn2{position: absolute;width: 60%;height: 7%;top: 87.5%;left: 10%;z-index: 999;}
.p8 .btn3{position: absolute;width: 17.3%;height: 15.3%;top: 79%;left: 73%;z-index: 999;}
.tip{width: 100%;height: 100%;position: fixed;left: 0px;top: 0px;z-index: 999999999;background:url(./tip.png) center center no-repeat rgb(0, 0, 0);display: none;}
/* share */
.sharebox{ width: 100%; height: 100%; position: absolute; top:0; left: 0; background:rgba(0,0,0,0.7)!important;filter:Alpha(opacity=70); background:#000;z-index: 999999;}
.sharebox img{width: 80%; height: auto; position: absolute; top: 3%; left: 10%;}


/* ssssssssssssssssssssssssssss */
@keyframes pointAni{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes