.game1Index { width: 100%; height: 100%; } .game1Index p.bgm img { width: 100%; height: 100%; } .game1Index p.bgm img:nth-child(1) { opacity: 1; } .game1Index p.bgm img:nth-child(2) { opacity: 0; position: absolute; left: 0; top: 0; } .game1Index .imgList li { width: 1.21rem; height: 1.2rem; background: url(../img/game1/kuang.png) no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0; } .game1Index .imgList li img { position: absolute; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%, -50%); } .game1Index .imgList li:nth-child(1) { left: 1%; } .game1Index .imgList li:nth-child(2) { left: 11%; } .game1Index .imgList li:nth-child(3) { left: 21%; } .game1Index .clickIcon li { width: 1rem; height: 1rem; position: absolute; /*left: 0; top: 0;*/ /*background: #000000; opacity: .5;*/ } .game1Index .clickIcon li.click1 { top: 40%; left: 60%; } .game1Index .clickIcon li.click2 { bottom: 23%; left: 40%; width: 1.5rem; height: 1rem; } .game1Index .clickIcon img { width: .92rem; display: none; } .game1Index .clickIcon li.click3 { top: 43%; left: 15%; width: 3rem; height: 1.3rem; transform: rotate(33deg); } /*书*/ .game1Index .maskBgm { display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../img/game1/successBgm.png) no-repeat; background-size: 100% 100%; z-index: 99; } .game1Index .maskBgm:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: inherit; filter: blur(10px); z-index: 2; } .game1Index .book_box { display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 999; } .game1Index div.line { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: rgba(61, 117, 122, .5); width: 100%; height: 1.66rem; z-index: -1; } .game1Index div.line div { margin: 0 auto; width: 11rem; height: 100%; display: flex; justify-content: space-between; align-items: center; } .game1Index div.line p { box-sizing: border-box; font-size: .44rem; font-weight: 400; color: #C9C6BA; } div.line p { width: .42rem; height: .4rem; font-size: 0; } div.line p img { width: 100%; height: 100%; } .game1Index div.closeIcon { display: flex; justify-content: flex-end; margin-right: 1.2rem; margin-top: .55rem; } .game1Index div.closeIcon img { width: .546rem; height: .546rem; } .game1Index .bookCont { width: 9.93rem; height: 5.89rem; background: url(../img/bookBgm.png) no-repeat; background-size: 100% 100%; margin: 0 auto; z-index: 999; display: flex; } .game1Index .leftImg { width: 3.58rem; margin-left: .9rem; } .game1Index .leftImg .titleTip { display: flex; justify-content: space-between; align-items: center; margin-top: .42rem; } .game1Index .leftImg .titleTip p { color: #1F444B; font-size: .22rem; } .game1Index .leftImg .img { width: 1.18rem; height: .91rem; } .game1Index .leftImg .imgList { width: 3.58rem; height: 4.14rem; margin-top: .1rem; } .game1Index .leftImg img { width: 100%; height: 100%; } .game1Index .rightCont { width: 3.8rem; margin-left: 1.05rem; position: relative; } .game1Index .rightCont .titleTip { display: flex; margin-top: .7rem; justify-content: space-between; } .game1Index .rightCont .titleTip h2, .game1Index .rightCont .titleTip h5 { color: #1F444B; font-size: .3rem; } .game1Index .rightCont .titleTip h5 { font-weight: normal; font-size: .22rem; } .game1Index .rightCont ul { margin-top: .12rem; } .game1Index .rightCont li { font-size: .2rem; color: #1F444B; line-height: .36rem; } .game1Index .rightCont .pageNum { position: absolute; bottom: 5%; left: 40%; transform: translateX(-50%); text-align: center; font-size: .2rem; color: #1F444B; } /*手势*/ .game1Index .shoushi { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 99999; } .game1Index .shoushi img { position: absolute; right: 28%; top: 11%; width: 2.5rem; }