.bg { width: 10rem; margin: 0 auto; position: relative; } .live-title { font-size: 0.35rem; color: #333333; text-indent: 0.5rem; padding-top: 0.6rem; font-weight: 700; } .live-top-box { width: 9rem; height: 1.18rem; background: #FED7DA; border-radius: 0.2rem; margin: 0 auto; line-height: 1.18rem; margin-top: 0.2rem; } .live-top-p1 { float: left; color: #343333; font-size: 0.35rem; text-indent: 0.4rem; } .live-top-p2 { float: right; color: #E3257C; font-size: 0.35rem; margin-right: 0.4rem; } .live-line { background: #F5F5F5; height: 0.15rem; width: 10rem; margin-top: 0.35rem; } .live-line2 { background: #F5F5F5; height: 0.15rem; width: 10rem; } .live-content { width: 10rem; height: 5.65rem; position: relative; } .tips-top-box-li1 { width: 3.62rem; height: 1.5rem; margin-bottom: 0.15rem; position: absolute; background: url(../images/top-box1.png?v=2023050901) no-repeat; background-size: 100% 100%; top: -0.73rem; left: 0.05rem; border-radius: 0.32rem; box-shadow: 0 0 0.3rem #fff; } .tips-top-box-li1>p { color: #fff; font-size: 0.4rem; font-weight: 700; position: absolute; width: 3.62rem; top: 0.7rem; text-indent: 0.4rem; } .tips-top-box-li2 { width: 3.62rem; height: 1.5rem; margin-bottom: 0.15rem; position: absolute; background: url(../images/top-box2.png?v=2023050901) no-repeat; background-size: 100% 100%; top: -0.73rem; left: 0.05rem; border-radius: 0.32rem; box-shadow: 0 0 0.3rem #fff; } .tips-top-box-li2>p { color: #fff; font-size: 0.4rem; font-weight: 700; position: absolute; width: 3.62rem; top: 0.7rem; text-indent: 0.4rem; } .top-box-ul { width: 3.62rem; position: absolute; top: 0.35rem; left: 0.45rem; } .top-box-ul li { width: 3.62rem; height: 1.5rem; margin-bottom: 0.15rem; position: relative; } .top-box-ul li>p { color: #fff; font-size: 0.4rem; font-weight: 700; position: absolute; width: 3.62rem; top: 0.7rem; text-indent: 0.4rem; } .top-box-ul .top-box-li1 { background: url(../images/top-box1.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li2 { background: url(../images/top-box2.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li2 .top-box-tips { box-shadow: 0 0 0.2rem #76E9DF; } .top-box-ul .top-box-li2 span { color: #76E9DF; } .top-box-ul .top-box-li3 { background: url(../images/top-box3.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li3 .top-box-tips { box-shadow: 0 0 0.2rem #b287f8; height: 1.1rem; } .top-box-ul .top-box-li3 .triangle { top: 0.4rem; } .day-top-box { height: 1.15rem; width: 10rem; position: relative; } .day-top-box .day-top-box-p { color: #1F1F1F; font-weight: 700; font-size: 0.35rem; line-height: 1.15rem; text-indent: 0.55rem; } .day-top-box .day-top-box-p2 { color: #E31C74; font-size: 0.35rem; position: absolute; right: 0.5rem; bottom: 0.35rem; } .day-top-box .day-top-box-p2 img { vertical-align: middle; margin-top: -0.05rem; width: 0.33rem; } .day-box-content>div { position: relative; width: 4.48rem; height: 3.1rem; float: left; margin-left: 0.33rem; margin-bottom: 0.2rem; } .day-box-content .day-box1 { background: url(../images/content-box1.png?v=2023050901) no-repeat; background-size: 100% 100%; } .day-box-content .day-box1 .day-title { color: #1A5679; font-size: 0.5rem; font-weight: 700; position: absolute; top: 0.35rem; left: 0.4rem; } .day-box-content .day-box1 .percentage-num { color: #1A5679; } .day-box-content .day-box1 .bar-nav { background: #438bb4; } .day-box-content .day-box1 .day-num { position: absolute; font-size: 0.38rem; color: #3290C7; text-align: right; font-weight: 700; right: 0.35rem; top: 0.43rem; } .day-box-content .day-box2 { background: url(../images/content-box4.png?v=2023050901) no-repeat; background-size: 100% 100%; } .day-box-content .day-box2 .day-title { color: #63319B; font-size: 0.5rem; font-weight: 700; position: absolute; top: 0.35rem; left: 0.4rem; } .day-box-content .day-box2 .percentage-num { color: #63319B; } .day-box-content .day-box2 .bar-nav { background: #7B2CD4; } .day-box-content .day-box2 .day-num { line-height: 0.5rem; font-size: 0.4rem; color: #7B2CD4; position: absolute; font-weight: 700; right: 0.35rem; top: 0.43rem; } .day-box-content .day-box2 .day-num img { width: 0.33rem; vertical-align: middle; margin-top: -0.05rem; } .day-box-content .day-box3 { background: url(../images/content-box3.png?v=2023050901) no-repeat; background-size: 100% 100%; } .day-box-content .day-box3 .day-title { color: #A0054F; font-size: 0.5rem; font-weight: 700; position: absolute; top: 0.35rem; left: 0.4rem; } .day-box-content .day-box3 .percentage-num { color: #A0054F; } .day-box-content .day-box3 .bar-nav { background: #E53985; } .day-box-content .day-box3 .day-num { line-height: 0.5rem; font-size: 0.4rem; color: #E53985; position: absolute; font-weight: 700; right: 0.35rem; top: 0.43rem; } .day-box-content .day-box4 { background: url(../images/content-box2.png?v=2023050901) no-repeat; background-size: 100% 100%; } .day-box-content .day-box4 .day-title { color: #216A64; font-size: 0.5rem; font-weight: 700; position: absolute; top: 0.35rem; left: 0.4rem; } .day-box-content .day-box4 .percentage-num { color: #216A64; } .day-box-content .day-box4 .bar-nav { background: #10A497; } .day-box-content .day-box4 .day-num { line-height: 0.5rem; font-size: 0.4rem; color: #10A497; position: absolute; font-weight: 700; right: 0.35rem; top: 0.43rem; } .day-box-content .day-box4 .day-num img { width: 0.33rem; vertical-align: middle; margin-top: -0.05rem; } .day-box-content .day-box5 { background: url(../images/content-box3.png?v=2023050901) no-repeat; background-size: 100% 100%; } .day-box-content .day-box5 .day-title { color: #A0054F; font-size: 0.5rem; font-weight: 700; position: absolute; top: 0.35rem; left: 0.4rem; } .day-box-content .day-box5 .percentage-num { color: #A0054F; } .day-box-content .day-box5 .bar-nav { background: #E53985; } .day-box-content .day-box5 .day-num { line-height: 0.5rem; font-size: 0.4rem; color: #E53985; position: absolute; font-weight: 700; right: 0.35rem; top: 0.43rem; } .day-box-content .day-box6 { background: url(../images/content-box2.png?v=2023050901) no-repeat; background-size: 100% 100%; } .day-box-content .day-box6 .day-title { color: #216A64; font-size: 0.5rem; font-weight: 700; position: absolute; top: 0.35rem; left: 0.4rem; } .day-box-content .day-box6 .percentage-num { color: #216A64; } .day-box-content .day-box6 .bar-nav { background: #10A497; } .day-box-content .day-box6 .day-num { line-height: 0.5rem; font-size: 0.4rem; color: #10A497; position: absolute; font-weight: 700; right: 0.35rem; top: 0.43rem; } .percentage-num { font-size: 0.33rem; position: absolute; top: 1.7rem; left: 0.4rem; font-weight: 700; } .bar-big-box { width: 3.7rem; height: 0.3rem; background: rgba(255, 255, 255, 0.5); border-radius: 1rem; position: absolute; left: 50%; margin-left: -1.85rem; top: 2.3rem; } .bar-big-box .bar-content { width: 3.6rem; height: 0.2rem; position: absolute; top: 0.05rem; left: 0.05rem; border-radius: 1rem; overflow: hidden; } .bar-big-box .bar-nav { width: 0%; height: 0.2rem; border-radius: 1rem; } .top-box-ul .top-box-li1-en { background: url(../images/top-box1-en.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li2-en { background: url(../images/top-box2-en.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li3-en { background: url(../images/top-box3-en.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li1-tv { background: url(../images/top-box1-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li2-tv { background: url(../images/top-box2-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li3-tv { background: url(../images/top-box3-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li1-es { background: url(../images/top-box1-es.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li2-es { background: url(../images/top-box2-es.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-ul .top-box-li3-es { background: url(../images/top-box3-es.png?v=2023050901) no-repeat; background-size: 100% 100%; } .award-box { position: absolute; top: 1.6rem; right: 0.4rem; height: 0.56rem; line-height: 0.56rem; background: rgba(0, 0, 0, 0.15); border-radius: 1rem; font-size: 0.3rem; color: #fff; text-align: center; padding-left: 0.15rem; padding-right: 0.15rem; } .award-box>img { width: 0.25rem; vertical-align: middle; margin-top: -0.02rem; } .btn-get { width: 3.96rem; height: 0.64rem; position: absolute; background: url(../images/btn-get.png?v=2023050901) no-repeat; background-size: 100% 100%; left: 50%; margin-left: -1.98rem; top: 2.25rem; display: none; } .btn-get-en { background: url(../images/btn-get-en.png?v=2023050901) no-repeat; background-size: 100% 100%; } .btn-get-tv { background: url(../images/btn-get-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; } .btn-get-es { background: url(../images/btn-get-es.png?v=2023050901) no-repeat; background-size: 100% 100%; } .top-box-view { width: 5.6rem; height: 5.6rem; position: absolute; right: 0; } .circleChart1 { width: 5.6rem; height: 5.6rem; line-height: 5.6rem; position: absolute; top: 0; right: 0; font-size: 0; text-align: center; } .circleChart1 canvas { display: inline-block !important; vertical-align: middle; height: 4.1rem; } .circleChart2 { width: 5.6rem; height: 5.6rem; position: absolute !important; top: 0; right: 0; font-size: 0; text-align: center; line-height: 5.6rem; } .circleChart2 canvas { display: inline-block !important; vertical-align: middle; height: 3.25rem; } .circleChart3 { width: 5.6rem; height: 5.6rem; position: absolute !important; top: 0; right: 0; font-size: 0; text-align: center; line-height: 5.6rem; } .circleChart3 canvas { display: inline-block !important; vertical-align: middle; height: 2.42rem; } .top-box-tips { position: absolute; width: 3.5rem; height: 2.9rem; background: #FFFFFF; border-radius: 0.2rem; box-shadow: 0 0 0.2rem #f885b7; left: 4.1rem; z-index: 5; } .top-box-tips1 { color: #333333; font-size: 0.3rem; text-indent: 0.2rem; line-height: 0.45rem; padding-top: 0.15rem; } .top-box-tips1 span { color: #FD72AB; } .top-box-tips2 { color: #333333; font-size: 0.3rem; text-indent: 0.2rem; line-height: 0.45rem; } .top-box-tips2 span { color: #FD72AB; } .top-box-tips3 { color: #333333; font-size: 0.3rem; text-indent: 0.2rem; line-height: 0.45rem; } .top-box-tips3 span { color: #FD72AB; } .top-box-content-tips { margin-left: 0.2rem; font-size: 0.3rem; width: 3.15rem; margin-top: 0.1rem; } .box-shadow { width: 4.48rem; height: 3.01rem; position: absolute; background: url(../images/box-shadow.png?v=2023050901) no-repeat; background-size: 100% 100%; left: 0; top: 0; z-index: 50; text-align: center; line-height: 3.01rem; font-size: 0; } .box-shadow .lock { vertical-align: middle; width: 0.69rem; } .box-shadow .check { vertical-align: middle; width: 0.89rem; } .triangle { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 0.2rem 0.3rem; border-color: transparent transparent #fff; transform: rotate(-90deg); left: -0.2rem; top: 0.6rem; } .tips1-box { position: absolute; left: 0.42rem; top: 4rem; } .tips2-box { position: absolute; left: 0.42rem; top: 5.6rem; } .tips1 { width: 9.16rem; height: 5.16rem; background: url(../images/tips1.png?v=2023050901) no-repeat; background-size: 100% 100%; position: absolute; } .tips1-en { background: url(../images/tips1-en.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.44rem; height: 6.38rem; } .tips1-tv { background: url(../images/tips1-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.44rem; height: 6.38rem; } .tips1-es { background: url(../images/tips1-es.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.44rem; height: 6.38rem; } .tips2 { height: 5.22rem; width: 9.16rem; background: url(../images/tips2.png?v=2023050901) no-repeat; background-size: 100% 100%; position: absolute; } .tips2-en { background: url(../images/tips2-en.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.4rem; height: 6.37rem; } .tips2-tv { background: url(../images/tips2-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.4rem; height: 6.37rem; } .tips2-es { background: url(../images/tips2-es.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.4rem; height: 6.37rem; } .tips-shadow { position: absolute; width: 10rem; height: 20rem; left: 50%; top: 0; background: rgba(0, 0, 0, 0.8); z-index: 500; margin-left: -5rem; } .tips3-box { position: absolute; left: 0.8rem; top: 13.25rem; } .tips3 { width: 8.76rem; height: 5.81rem; background: url(../images/tips3.png?v=2023050901) no-repeat; background-size: 100% 100%; position: absolute; } .tips3-en { background: url(../images/tips3-en.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.08rem; height: 6.56rem; } .tips3-tv { background: url(../images/tips3-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.56rem; height: 6.64rem; } .tips3-es { background: url(../images/tips3-es.png?v=2023050901) no-repeat; background-size: 100% 100%; width: 9.56rem; height: 6.64rem; } .tips3-box1 { position: absolute; left: 2.9rem; top: 0.1rem; width: 0.7rem; height: 0.7rem; font-size: 0.4rem; font-weight: 700; text-align: center; line-height: 0.7rem; background: #FB9CC8; color: #E53985; border-radius: 0.1rem; box-shadow: 0 0 0.2rem #FB9CC8, 0 0 0.3rem #FB9CC8, 0 0 0.3rem #FB9CC8, 0 0 0.3rem #FB9CC8; } .tips3-box2 { position: absolute; top: 1.6rem; right: 5.1rem; height: 0.56rem; line-height: 0.56rem; background: #D576A4; box-shadow: 0 0 0.2rem #FB9CC8, 0 0 0.3rem #FB9CC8, 0 0 0.3rem #FB9CC8; border-radius: 1rem; font-size: 0.3rem; color: #fff; text-align: center; padding-left: 0.15rem; padding-right: 0.15rem; } .tips3-box2>img { width: 0.25rem; vertical-align: middle; margin-top: -0.02rem; } .tips1-ok { position: absolute; width: 2.5rem; height: 1rem; top: 4.15rem; left: 3.15rem; } .tips2-ok { position: absolute; width: 2.5rem; height: 1rem; top: 4.23rem; left: 3.15rem; } .tips3-ok { position: absolute; width: 2.5rem; height: 1rem; top: 4.82rem; left: 3.65rem; } .rule-bg { width: 10rem; margin: 0 auto; position: relative; } .rule-bg>p { position: relative; font-size: 0.35rem; line-height: 0.6rem; width: 8.8rem; margin-left: 0.7rem; margin-right: 0.5rem; margin-top: 0.15rem; } .rule-bg>p>span { position: absolute; left: -0.35rem; } .rule-bg .rule-p1 { width: 9.2rem; margin: 0 auto; margin-top: 0.15rem; } .rule-bg .rule-p2 { font-weight: 700; margin-top: 0.2rem; margin-bottom: 0.2rem; position: relative; left: -0.35rem; } .rule-bg .rule-p7 { font-weight: 700; margin-top: 0.2rem; margin-bottom: 0.2rem; position: relative; left: -0.35rem; } .table { width: 9.3rem; height: 2.16rem; background: url(../images/table.png?v=2023050901) no-repeat; background-size: 100% 100%; margin: 0 auto; margin-top: 0.15rem; } .table-en { background: url(../images/table-en.png?v=2023050901) no-repeat; background-size: 100% 100%; } .table-tv { background: url(../images/table-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; } .table-es { background: url(../images/table-es.png?v=2023050901) no-repeat; background-size: 100% 100%; } .table.highVer { background: url(../images/7590/table.png) no-repeat; background-size: 100% 100%; } .table-en.highVer { background: url(../images/7590/table-en.png?v=2023050901) no-repeat; background-size: 100% 100%; } .table-tv.highVer { background: url(../images/7590/table-tv.png?v=2023050901) no-repeat; background-size: 100% 100%; } .table-es.highVer { background: url(../images/7590/table-es.png?v=2023050901) no-repeat; background-size: 100% 100%; } .rule-btn { font-size: 0.33rem; position: absolute; right: 0.7rem; top: 0.65rem; color: #E3257C; } .room-tips { width: 10rem; height: 11.58rem; background: url(../images/room-tips.png) no-repeat; background-size: 100% 100%; position: absolute; top: 2.6rem; } .room-tips2 { display: none; width: 10rem; height: 11.58rem; background: url(../images/room-tips2.png) no-repeat; background-size: 100% 100%; position: absolute; top: 2.6rem; } .room-tips2 .tips-btn { top: 8.5rem; } .room-tips-en { background: url(../images/room-tips-en.png) no-repeat; background-size: 100% 100%; } .room-tips-en .tips-btn { top: 8.2rem; } .room-tips-es { background: url(../images/room-tips-es.png) no-repeat; background-size: 100% 100%; } .room-tips-es .tips-btn { top: 8.3rem; } .room-tips-tv { background: url(../images/room-tips-tv.png) no-repeat; background-size: 100% 100%; } .room-tips-tv .tips-btn { top: 9.3rem; } .room-tips2-en { background: url(../images/room-tips2-en.png) no-repeat; background-size: 100% 100%; } .room-tips2-en .tips-btn { top: 9.65rem; } .room-tips2-es { background: url(../images/room-tips2-es.png) no-repeat; background-size: 100% 100%; } .room-tips2-es .tips-btn { top: 9.8rem; } .room-tips2-tv { background: url(../images/room-tips2-tv.png) no-repeat; background-size: 100% 100%; } .room-tips2-tv .tips-btn { top: 10.3rem; } .tips-btn { position: absolute; width: 2.5rem; height: 1rem; top: 6.5rem; left: 3.4rem; } .room2-tips { width: 10rem; height: 11.12rem; background: url(../images/room2-tips.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0rem; } .room2-tips .tips-btn { position: absolute; width: 2.5rem; height: 1rem; top: 7.2rem; left: 3.6rem; } .room2-tips2 { display: none; width: 10rem; height: 11.12rem; background: url(../images/room2-tips2.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0rem; } .room2-tips2 .tips-btn { top: 7.3rem; left: 3.6rem; } .room2-tips-en { background: url(../images/room2-tips-en.png) no-repeat; background-size: 100% 100%; } .room2-tips-en .tips-btn { top: 9rem; left: 3.9rem; } .room2-tips-es { background: url(../images/room2-tips-es.png) no-repeat; background-size: 100% 100%; } .room2-tips-es .tips-btn { top: 9rem; } .room2-tips-tv { background: url(../images/room2-tips-tv.png) no-repeat; background-size: 100% 100%; } .room2-tips-tv .tips-btn { top: 10rem; } .room2-tips2-en { background: url(../images/room2-tips2-en.png) no-repeat; background-size: 100% 100%; } .room2-tips2-en .tips-btn { top: 8.45rem; } .room2-tips2-es { background: url(../images/room2-tips2-es.png) no-repeat; background-size: 100% 100%; } .room2-tips2-es .tips-btn { top: 8.4rem; } .room2-tips2-tv { background: url(../images/room2-tips2-tv.png) no-repeat; background-size: 100% 100%; } .room2-tips2-tv .tips-btn { top: 9.1rem; } .room-tips.highVer { width: 10rem; height: 11.58rem; background: url(../images/7590/room-tips.png) no-repeat; background-size: 100% 100%; position: absolute; top: 2.6rem; } .room-tips2.highVer { display: none; width: 10rem; height: 11.58rem; background: url(../images/7590/room-tips2.png) no-repeat; background-size: 100% 100%; position: absolute; top: 2.6rem; } .room-tips-en.highVer { background: url(../images/7590/room-tips-en.png) no-repeat; background-size: 100% 100%; } .room-tips-es.highVer { background: url(../images/7590/room-tips-es.png) no-repeat; background-size: 100% 100%; } .room-tips-tv.highVer { background: url(../images/7590/room-tips-tv.png) no-repeat; background-size: 100% 100%; } .room-tips2-en.highVer { background: url(../images/7590/room-tips2-en.png) no-repeat; background-size: 100% 100%; } .room-tips2-es.highVer { background: url(../images/7590/room-tips2-es.png) no-repeat; background-size: 100% 100%; } .room-tips2-tv.highVer { background: url(../images/7590/room-tips2-tv.png) no-repeat; background-size: 100% 100%; } .room2-tips.highVer { width: 10rem; height: 11.12rem; background: url(../images/7590/room2-tips.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0rem; } .room2-tips2.highVer { display: none; width: 10rem; height: 11.12rem; background: url(../images/7590/room2-tips2.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0rem; } .room2-tips-en.highVer { background: url(../images/7590/room2-tips-en.png) no-repeat; background-size: 100% 100%; } .room2-tips-es.highVer { background: url(../images/7590/room2-tips-es.png) no-repeat; background-size: 100% 100%; } .room2-tips-tv.highVer { background: url(../images/7590/room2-tips-tv.png) no-repeat; background-size: 100% 100%; } .room2-tips2-en.highVer { background: url(../images/7590/room2-tips2-en.png) no-repeat; background-size: 100% 100%; } .room2-tips2-es.highVer { background: url(../images/7590/room2-tips2-es.png) no-repeat; background-size: 100% 100%; } .room2-tips2-tv.highVer { background: url(../images/7590/room2-tips2-tv.png) no-repeat; background-size: 100% 100%; }