.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{ top: 16%; left: 46%; width: .5rem; height: .5rem; } .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; }