.bg { width: 10rem; margin: 0 auto; } .down { position: fixed; width: 10rem; height: 1.1rem; z-index: 2500; background: #FF299D; } .down .down-l img { position: absolute; width: 0.9rem; vertical-align: middle; height: 0.9rem; top: 0.1rem; left: 0.2rem; } .down-bottom { position: fixed; width: 10rem; display: none; bottom: 0; height: 1.1rem; z-index: 2500; background: #FF299D; } .down-bottom .down-l img { position: absolute; width: 1.1rem; vertical-align: middle; height: 1.4rem; top: -0.6rem; left: 0.2rem; } .down-bottom .down-font { position: absolute; color: #ffffff; top: 0.3rem; font-size: 0.33rem; left: 1.5rem; } .down-font { position: absolute; color: #ffffff; top: 0.3rem; font-size: 0.33rem; left: 1.3rem; } .down-btn { position: absolute; height: 0.9rem; width: 2.2rem; background: #ffffff; color: #FF299D; font-size: 0.33rem; text-align: center; line-height: 0.9rem; border-radius: 1rem; top: 0.1rem; right: 0.2rem; } .video-play { position: relative; overflow: hidden; height: 17rem; width: 10rem; } .video-play-bg { position: absolute; overflow: hidden; height: 100%; width: 10rem; background-color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); } .box-img { position: relative; height: 100%; width: 10rem; overflow: hidden; background: #f3f3f3; } .bg-img { position: absolute; left: 50%; margin-left: -300px; top: 50%; margin-top: -300px; width: 600px; height: 600px; background-color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); } .video-play-bg1 { position: absolute; overflow: hidden; height: 100%; width: 10rem; } .more-video { width: 10rem; height: 15rem; } .more-h1 { height: 1.5rem; width: 10rem; line-height: 1.5rem; text-align: center; color: #FF299D; font-size: 0.5rem; } .more-h1 img { vertical-align: middle; width: 0.5rem; } .more-ul { width: 10rem; margin-left: 0.14rem; } .more-ul li { position: relative; float: left; width: 3.15rem; margin-right: 0.14rem; margin-bottom: 0.14rem; height: 3.15rem; } .more-ul li img { width: 3.15rem; height: 3.15rem; } .more-ul li .live { position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 0.5rem; text-align: center; width: 1.2rem; height: 0.4rem; font-size: 0.3rem; line-height: 0.4rem; color: #ffffff; right: 0.1rem; top: 0.15rem; } .more-ul li .live .dian { position: absolute; width: 0.11rem; height: 0.11rem; left: 0.15rem; top: 0.15rem; border-radius: 50%; background: #FF299D; } .live-text { margin-left: 0.2rem; } .play-btn { position: absolute; width: 3rem; height: 3rem; top: 50%; left: 50%; margin-top: -1.5rem; margin-left: -1.5rem; z-index: 2000; } .play-btn img { width: 3rem; height: 3rem; } .play-bottom { position: absolute; bottom: 0; width: 9.4rem; height: 1.5rem; margin-left: 0.3rem; z-index: 20; border-top: 0.05rem solid #ffffff; } .play-bottom img { width: 1.2rem; float: right; margin-top: 0.3rem; margin-right: 0.25rem; } .play-bottom input { height: 1.1rem; margin-top: 0.3rem; margin-left: 0.05rem; width: 7.4rem; border-radius: 1rem; color: #999999; font-size: 0.4rem; text-indent: 0.5rem; background: #FF299D; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ffffff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ffffff; opacity: 1; } input:-ms-input-placeholder { color: #ffffff; opacity: 1; } input::-webkit-input-placeholder { color: #ffffff; opacity: 1; } .bg { position: relative; width: 10rem; margin: 0 auto; } .guanzhu { position: absolute; right: 0.3rem; top: 1.8rem; background: #FF299D; width: 1.5rem; height: 0.6rem; line-height: 0.6rem; color: #ffffff; text-align: center; font-size: 0.35rem; z-index: 500; border-radius: 0.5rem; text-indent: 0.5rem; } .name-more { position: absolute; left: 0.2rem; top: 1.5rem; z-index: 500; width: 3.5rem; height: 1.2rem; border-radius: 100px; background: rgba(0, 0, 0, 0.3); } .name-more img { width: 1rem; height: 1rem; position: absolute; border-radius: 50%; left: 0.1rem; top: 0.1rem; } .name-more .name { display: inline-block; position: absolute; color: #ffffff; font-size: 0.37rem; left: 1.05rem; width: 2.3rem; top: 0.1rem; text-align: center; } .name-more .hot { display: inline-block; position: absolute; color: #ffffff; font-size: 0.4rem; left: 1.05rem; width: 2.2rem; top: 0.65rem; text-align: center; } .end { position: absolute; z-index: 2000; left: 50%; margin-left: -2rem; top: 50%; margin-top: -1.5rem; width: 4rem; height: 3rem; } .end .text1 { display: inline-block; width: 4rem; height: 1.5rem; line-height: 1.5rem; color: #ffffff; font-size: 0.8rem; text-align: center; } .end .text2 { display: inline-block; width: 4rem; background: #ffffff; color: #393939; height: 1rem; border-radius: 0.8rem; line-height: 1rem; text-align: center; font-size: 0.45rem; } .weixin-img { position: fixed; width: 100%; height: 100%; background-size: 100% 100%; z-index: 10000; } .add { font-size: 0.5rem; font-weight: 700; left: -0.3rem; /* top: -0.02rem; */ height: 0.6rem; top: 50%; margin-top: -0.3rem; position: absolute; } .zhuan { position: absolute; width: 3rem; height: 3rem !important; left: 3.5rem; z-index: 5; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; margin-top: -1.5rem; height: 3rem; transform: rotate(0deg); animation: rot 2s linear infinite; } @keyframes rot { form { transform: rotate(0deg); } to { transform: rotate(360deg); } } .shadow-img { display: none; width: 10rem; position: fixed; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 10000; } .shadow-img img { position: absolute; top: 0; right: 0; width: 6.98rem; }