#wrap { background: url(../img/game1/bgm1.png) no-repeat; background-size: 100% 100%; overflow: hidden; position: relative; } .tipsNum { width: 1.45rem; height: 3.2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .tipText { position: absolute; top: 40%; transform: translateY(-40%); right: .65rem; width: .8rem; height: 4.32rem; } .tipText ul { display: flex; } .tipText ul li { flex: 1; text-align: center; color: #333; font-size: .26rem; } .tipsNum img { width: 100%; height: 100%; } .titleIcon { margin-top: .1rem; margin-left: .1rem; } .titleIcon ul { display: flex; justify-content: flex-end; } .titleIcon ul li { width: .98rem; height: 1.24rem; } .titleIcon ul li img { width: 100%; height: 100%; } /*箭头部分*/ .mapList { /*position: relative;*/ width: 100%; height: 100%; } .mapList ul { width: 100%; height: 100%; /*display: flex;*/ } .mapList li { /*float: right;*/ position: absolute; transform: translate(-50%, -50%); } .mapList p.dian { width: .1rem; height: .1rem; background: #FE1010; border-radius: 50%; border: 1px solid #333; margin-right: .05rem; margin-top: .25rem; } .mapList p.kuang { width: 2.22rem; height: 1.25rem; } .mapList p.contText { font-size: .18rem; position: absolute; width: 3rem; background: #F4BA78; border: 1px solid #D01217; border-radius: 7px; box-sizing: border-box; padding: .1rem; display: none; } .mapList p.kuang img { width: 100%; height: 100%; } .mapList p.text { font-size: .31rem; color: #333; } .adr1 { top: 65%; left: 69%; display: flex; align-items: center; } .adr1 p.jt1 { /*display: none;*/ /*margin-top: .4rem;*/ position: absolute; left: -2.42rem; top: -.22rem; /* width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; */ /*display: none;*/ } .adr1 p.jt1 img { width: 2.48rem; height: 1.05rem; } .adr2 p.contText { left: 100%; top: -60%; /*display: none;*/ } .adr4 p.contText { left: 0%; top: -60%; } .adr5 p.contText { left: 10%; bottom: 87%; } .adr6 p.contText { left: 100%; bottom: 10%; } .adr7 p.contText { right: -2.25rem; top: -.44rem; } .adr2 { top: 50%; left: 58%; display: flex; align-items: center; } .adr2 p { /*float: right;*/ } .adr2 .text { margin-top: 1rem; margin-right: .05rem; } .adr2 p.dian { margin-top: 1.4rem; } .adr2 p.jt2 { position: absolute; left: -.64rem; top: -.58rem; /* width: 0; overflow: hidden; */ } .adr2 p.jt2 img { margin-top: 2rem; width: .66rem; height: .32rem; } .adr3 { top: 57%; left: 40.5%; } .adr3 .text { text-align: center; } .adr3 p.dian { margin-left: 56%; margin-top: 0.1rem; } .adr3 p.jt3 { /*margin-left: .2rem;*/ margin-top: -.1rem; /* width: 0; overflow: hidden; */ } .adr3 p.jt3 img { margin-left: 0.2rem; margin-top: -.2rem; width: 1.05rem; height: .76rem; } .adr4 { top: 56%; left: 35%; position: relative; } .adr4 p.text { position: relative; right: .6rem; top: 1.2rem; } .adr4 p.dian { position: absolute; left: 0.2rem; bottom: -.7rem; } .adr4 p.jt4 { position: absolute; right: 86%; top: -25%; /* width: 0; overflow: hidden; */ } .adr4 p.jt4 img { width: .48rem; height: .83rem; margin-left: 2rem; margin-top: -2rem; } .adr4 .kuang { position: absolute; top: .5rem; left: -2.9rem; font-size: 0; } .adr5 { top: 45%; /*top: 20%;*/ left: 25%; position: relative; } .adr5 .text { margin-top: 1rem; margin-left: -.5rem; } .adr5 p.dian { /*margin-top: 2rem;*/ margin-left: 1.4rem; position: absolute; left: -.8rem; top: 1rem; } .adr5 p.jt5 { position: absolute; left: -.05rem; top: .2rem; /* width: 0; overflow: hidden; */ } .adr5 p.jt5 img { width: .22rem; height: .68rem; margin-left: .5rem; margin-top: 0rem; } .adr5 .kuang { position: absolute; right: -2.9rem; top: 0rem; } .adr6 { top: 40%; left: 24%; } .adr6 .kuang { position: absolute; left: -1.8rem; top: -1.2rem; } .adr6 p.dian { position: absolute; right: -.35rem; bottom: 0.13rem; } .adr6 p.jt6 { position: absolute; left: .9rem; bottom: 0rem; /* width: 0; overflow: hidden; */ } .adr6 p.jt6 img { width: 0.86rem; height: 1.02rem; } .adr7 { top: 10%; left: 30%; } .adr7 p.kuang { position: absolute; right: -1.4rem; top: -.6rem; } .adr7 p.jt7 { position: absolute; left: 1rem; top: .08rem; /* width: 0; overflow: hidden; */ } .adr7 p.jt7 img { width: 1.78rem; height: .97rem; } .adr7 p.text { width: 2rem; position: absolute; left: -.6rem; top: .65rem; } .adr7 p.dian { position: absolute; left: .72rem; top: .8rem; } .adr8 { top: 12%; left: 52%; display: flex; } .adr8 p.start { width: .4rem; height: .4rem; font-size: 0; } .adr8 p.start img { width: 100%; height: 100%; } /*底部图片*/ .imgList {} .imgList ul { width: 100%; height: 1.6rem; float: right; display: flex; justify-content: flex-end; box-sizing: border-box; position: absolute; left: 0; bottom: -10rem; width: 100%; /*z-index: 0;*/ /*margin: 0 .1rem;*/ } .imgList ul li { height: 1.25rem; /*flex: 1;*/ width: 17%; margin-right: .1rem; position: absolute; left: 0; top: 0; /*z-index: 999;*/ } .imgList li img { width: 100%; height: 100%; } /**/ /*p.dian{ display: none; }*/ /*雪花*/ @font-face { font-family: icon; src: url("font/icon.ttf"), url("font/icon.eot"); } .snowList { display: none; } .snow { font-family: icon; color: #fff; position: absolute; top: -100px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /*手势*/ .mask { display: block; } .shoushi { position: absolute; right: -.66rem; bottom: 20px; } .shoushi img { width: 50%; height: 50%; }