.room-bg1 { width: 100vw; height: 76.26vw; background: url(../images/room-bg1.png) no-repeat; background-size: 100% 100%; position: relative; display: none; } i { font-style: normal; } .room-bg2 { width: 100vw; height: 76.26vw; background: url(../images/room-bg2.png) no-repeat; background-size: 100% 100%; position: relative; display: none; } .room-bg2 .room-bg-top { text-shadow: 0.3vw 0.3vw 0.3vw #803df3, 0.3vw 0 0.3vw #803df3, 0 0.3vw 0.3vw #803df3; } .room-bg2 .room-targe { -webkit-text-stroke: none; text-shadow: 0.3vw 0.3vw 0.3vw #803df3, 0.3vw 0 0.3vw #803df3, 0 0.3vw 0.3vw #803df3; } .room-bg2 .room-num { -webkit-text-stroke: 0; text-shadow: 0.3vw 0.3vw 0.3vw #803df3, 0.3vw 0 0.3vw #803df3, 0 0.3vw 0.3vw #803df3; } .room-bg2 .room-bar > div { background: #A775FA; } .room-bg3 { width: 100vw; height: 76.26vw; background: url(../images/room-bg3.png) no-repeat; background-size: 100% 100%; position: relative; display: none; } .room-bg3 .room-bg-top { text-shadow: 0.3vw 0.3vw 0.3vw #00f4f8, 0.3vw 0 0.3vw #00f4f8, 0 0.3vw 0.3vw #00f4f8; } .room-bg3 .room-targe { text-shadow: 0.3vw 0.3vw 0.3vw #00f4f8, 0.3vw 0 0.3vw #00f4f8, 0 0.3vw 0.3vw #00f4f8; } .room-bg3 .room-num { text-shadow: 0.3vw 0.3vw 0.3vw #00f4f8, 0.3vw 0 0.3vw #00f4f8, 0 0.3vw 0.3vw #00f4f8; } .room-bg3 .room-bar > div { background: #00d6c4; } .room-bg-top { font-size: 15.5vw; color: #fff; font-weight: 700; position: absolute; top: 7.5vw; left: 7.5vw; text-shadow: 0.3vw 0.3vw 0.3vw #f7237f, 0.3vw 0 0.3vw #f7237f, 0 0.3vw 0.3vw #f7237f; } .room-targe { font-size: 11vw; color: #fff; font-weight: 700; text-shadow: 0.3vw 0.3vw 0.3vw #f7237f, 0.3vw 0 0.3vw #f7237f, 0 0.3vw 0.3vw #f7237f; position: absolute; top: 12vw; right: 6vw; } .room-num { font-size: 11vw; color: #fff; font-weight: 700; text-shadow: 0.3vw 0.3vw 0.3vw #f7237f, 0.3vw 0 0.3vw #f7237f, 0 0.3vw 0.3vw #f7237f; position: absolute; top: 40vw; left: 10vw; } .room-bar-box { position: absolute; width: 82vw; height: 6vw; background: rgba(255, 255, 255, 0.4); border-radius: 10vw; left: 9vw; top: 56vw; } .room-bar { width: 80vw; height: 4vw; position: absolute; left: 1vw; top: 1vw; border-radius: 10vw; } .room-bar > div { height: 4vw; width: 0%; background: #FC3F91; border-radius: 10vw; } .r-p1 { font-size: 12.5vw; color: #fff; font-weight: 700; text-shadow: 0.5vw 0.5vw 0.5vw red, 0.5vw 0 0.5vw red, 0 0.5vw 0.5vw red, 0 -0.5vw 0.5vw red; text-indent: 6vw; margin-top: 4vw; } .r-p2 { font-size: 12.5vw; color: #fff; font-weight: 700; text-shadow: 0.5vw 0.5vw 0.5vw red, 0.5vw 0 0.5vw red, 0 0.5vw 0.5vw red, 0 -0.5vw 0.5vw red; text-indent: 6vw; margin-top: 4vw; } .r-p3 { font-size: 12.5vw; color: #fff; font-weight: 700; text-shadow: 0.5vw 0.5vw 0.5vw red, 0.5vw 0 0.5vw red, 0 0.5vw 0.5vw red, 0 -0.5vw 0.5vw red; text-indent: 6vw; margin-top: 4vw; } .act-room-bg1 { width: 10rem; height: 8.885rem; background: url(../images/act-room-bg1.png) no-repeat; background-size: 100% 100%; position: relative; } .act-room-bg1 .room-title { font-size: 0.8rem; height: 2rem; line-height: 1.9rem; color: #fff; text-align: center; } .act-room-bg1 .room-bg-p1 { color: #fff; font-size: 0.85rem; text-indent: 0.9rem; padding-top: 0.4rem; } .act-room-bg1 .room-bg-p1 span { color: #F83AFF; } .act-room-bg1 .room-bg-p2 { color: #fff; font-size: 0.85rem; text-indent: 0.9rem; padding-top: 0.4rem; } .act-room-bg1 .room-bg-p2 span { color: #F83AFF; } .act-room-bg1 .room-bg-p3 { color: #fff; font-size: 0.85rem; text-indent: 0.9rem; padding-top: 0.4rem; } .act-room-bg1 .room-bg-p3 span { color: #F83AFF; }