Files
peko-h5/view/peko/modules/act-wishingStar/css/index.css

1124 lines
20 KiB
CSS
Raw Normal View History

2024-02-23 12:29:08 +08:00
html,
body {
width: 100%;
background: #F36121;
}
2024-02-27 20:16:07 +08:00
.rabbit {
z-index: 999;
width: 0.8rem;
height: 0.8rem;
}
2024-02-23 12:29:08 +08:00
.back {
position: fixed;
top: 0.93333rem;
left: 0.45333rem;
z-index: 99;
width: 0.82667rem;
height: 0.82667rem;
}
.back img {
width: 100%;
height: 100%;
}
.back p {
color: #fff;
font-size: 0.42667rem;
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: 0.82667rem;
}
.header {
width: 10rem;
height: 12.22667rem;
position: relative;
margin: 0 auto -3.2rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
}
.header .rule_icon {
width: 0.82667rem;
height: 1.94667rem;
position: absolute;
right: 0;
top: 2.08rem;
}
.header .record_icon {
width: 0.82667rem;
height: 1.94667rem;
position: absolute;
right: 0;
top: 4.04rem;
}
.header .tabBox {
width: 8.44rem;
height: 1.6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 7.4rem;
display: flex;
justify-content: space-between;
}
.header .tabBox div {
width: 3.98667rem;
height: 100%;
}
.header .tabBox .tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.header .tabBox .tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.header .tabBox .act1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.header .tabBox .act2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page1 {
width: 10rem;
height: 13.42667rem;
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.26667rem;
position: relative;
overflow: hidden;
}
2024-02-26 14:18:30 +08:00
.page1 .update {
width: 0.86667rem;
height: 0.86667rem;
position: fixed;
right: 0.45rem;
bottom: 0.45rem;
}
2024-02-23 12:29:08 +08:00
.page1 .top {
width: 100%;
height: 1.2rem;
position: relative;
margin: 0.7rem auto 0;
line-height: 1.2rem;
}
.page1 .top .left {
color: #FEE7C1;
font-size: 0.32rem;
font-weight: 600;
position: absolute;
left: 1.37333rem;
top: 50%;
transform: translateY(-50%);
}
.page1 .top .star {
width: 0.53333rem;
height: 0.53333rem;
position: absolute;
left: 3.08rem;
top: 50%;
transform: translateY(-50%);
}
.page1 .top .centon {
width: 2.17333rem;
left: 3.66667rem;
top: 50%;
transform: translateY(-50%);
color: #FFF5E4;
font-size: 0.42667rem;
font-weight: 600;
position: absolute;
}
.page1 .top .but {
width: 2.72rem;
height: 0.89333rem;
position: absolute;
right: 1.26667rem;
top: 50%;
transform: translateY(-50%);
background: url(../images/buyBut.png) no-repeat;
background-size: 100% 100%;
}
.page1 .page1Title {
width: 5.36rem;
height: 0.30667rem;
display: block;
margin: 0.53333rem auto 0.13333rem;
}
.page1 ul {
width: 9.02667rem;
height: 10.5rem;
margin: 0 auto 0;
overflow-y: scroll;
}
.page1 ul::-webkit-scrollbar {
display: none;
}
.page1 ul li {
width: 100%;
height: 3.29333rem;
background: url(../images/giftBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin-bottom: 0.21333rem;
}
.page1 ul li .giftBox {
width: 2.37333rem;
height: 2.37333rem;
position: absolute;
left: 0.42667rem;
top: 0.44rem;
background: url(../images/giftBox.png) no-repeat;
background-size: 100% 100%;
}
.page1 ul li .giftBox .giftImg {
width: 2rem;
height: 2rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.page1 ul li .giftInfo {
height: 0.4rem;
line-height: 0.4rem;
position: absolute;
left: 2.92rem;
top: 0.64rem;
font-weight: 500;
display: flex;
white-space: nowrap;
}
.page1 ul li .giftInfo b {
color: #B52E1C;
font-size: 0.37333rem;
margin-right: 0.17333rem;
}
.page1 ul li .giftInfo img {
display: inline-block;
width: 0.34667rem;
height: 0.34667rem;
vertical-align: middle;
margin-right: 0.08rem;
}
.page1 ul li .giftInfo i {
font-style: normal;
color: #DE2A21;
font-size: 0.29333rem;
font-weight: 400;
}
.page1 ul li .inventory {
color: #AA5854;
font-size: 0.24rem;
font-weight: 5.33333rem;
position: absolute;
right: 0.65333rem;
top: 0.72rem;
}
.page1 ul li .schedule {
color: #FF3600;
font-size: 0.29333rem;
font-weight: 500;
position: absolute;
left: 2.93333rem;
top: 1.36rem;
}
.page1 ul li .line {
width: 4.2rem;
height: 0.4rem;
position: absolute;
left: 4.18667rem;
top: 1.30667rem;
background: url(../images/lineBox.png) no-repeat;
background-size: 100% 100%;
}
.page1 ul li .line .line_in {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4.09333rem;
height: 0.26667rem;
border-radius: 0.26667rem;
overflow: hidden;
}
.page1 ul li .line .line_in img {
display: block;
height: 100%;
2024-02-26 10:25:02 +08:00
width: 0%;
2024-02-23 12:29:08 +08:00
}
.page1 ul li .line p {
width: 100%;
height: 100%;
line-height: 0.4rem;
text-align: center;
color: #DE2A21;
font-size: 0.24rem;
font-weight: 400;
2024-02-27 20:16:07 +08:00
position: absolute;
z-index: 2;
2024-02-23 12:29:08 +08:00
}
.page1 ul li .wishIng {
padding: 0.10667rem 0.17333rem;
background: #C67571;
border-radius: 0.06667rem;
position: absolute;
left: 2.94667rem;
bottom: 0.69333rem;
text-align: center;
color: #FEF3DA;
font-size: 0.24rem;
font-weight: 400;
}
.page1 ul li .wishIngBut {
width: 2.18667rem;
height: 1.06667rem;
position: absolute;
bottom: 0.44rem;
right: 0.48rem;
}
2024-02-26 10:25:02 +08:00
.page2 {
display: none;
width: 9.36rem;
height: 11.94667rem;
background: #804030;
border-radius: 0.42667rem;
border: 0.02667rem solid #FFE478;
box-sizing: border-box;
margin: 0.66667rem auto 2.06667rem;
position: relative;
}
.page2 .listTab {
width: 5.94667rem;
height: 1.12rem;
position: absolute;
top: -0.56rem;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
}
.page2 .listTab div {
width: 50%;
height: 100%;
}
.page2 .tab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
}
.page2 .tab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
}
.page2 .listBox {
width: 9.33333rem;
height: 10.7rem;
margin: 1.09333rem auto 0;
overflow-y: scroll;
}
.page2 .listBox::-webkit-scrollbar {
display: none;
}
.page2 .listBox li {
2024-02-27 20:16:07 +08:00
width: 99.5%;
2024-02-26 10:25:02 +08:00
height: 2.13333rem;
background: #804030;
overflow: hidden;
2024-02-27 20:16:07 +08:00
margin: 0 auto 0;
2024-02-26 10:25:02 +08:00
}
.page2 .listBox li .num {
width: 0.97333rem;
height: 100%;
line-height: 2.13333rem;
text-align: center;
color: #FFFBE3;
font-size: 0.42667rem;
font-weight: 500;
margin-right: 0.18667rem;
float: left;
}
.page2 .listBox li .num1 {
width: 0.64rem;
height: 0.64rem;
background: url(../images/no1.png) no-repeat;
background-size: 100% 100%;
margin-right: 0.32rem;
2024-02-27 20:16:07 +08:00
margin-top: 0.74667rem;
margin-left: 0.37333rem;
2024-02-26 10:25:02 +08:00
}
.page2 .listBox li .num2 {
width: 0.64rem;
height: 0.64rem;
background: url(../images/no2.png) no-repeat;
background-size: 100% 100%;
margin-right: 0.32rem;
2024-02-27 20:16:07 +08:00
margin-top: 0.74667rem;
margin-left: 0.37333rem;
2024-02-26 10:25:02 +08:00
}
.page2 .listBox li .num3 {
width: 0.64rem;
height: 0.64rem;
background: url(../images/no3.png) no-repeat;
background-size: 100% 100%;
margin-right: 0.32rem;
2024-02-27 20:16:07 +08:00
margin-top: 0.74667rem;
margin-left: 0.37333rem;
2024-02-26 10:25:02 +08:00
}
.page2 .listBox li .tx {
display: block;
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
margin-top: 0.42667rem;
margin-right: 0.32rem;
float: left;
}
.page2 .listBox li .name {
width: 2.98667rem;
height: 100%;
line-height: 2.13333rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #FFFFFF;
font-size: 0.37333rem;
font-weight: 500;
float: left;
}
.page2 .listBox li .right {
width: 1.8rem;
text-align: center;
float: right;
margin-right: 0.64rem;
}
.page2 .listBox li .right p {
height: 0.58667rem;
line-height: 0.58667rem;
color: #FFFFFF;
font-size: 0.42667rem;
font-weight: 600;
margin-top: 0.50667rem;
margin-bottom: 0.10667rem;
}
.page2 .listBox li .right b {
color: #E6E2DC;
font-size: 0.29333rem;
font-weight: 400;
}
.page2 .listBox .li1 {
2024-02-27 20:16:07 +08:00
background: linear-gradient(270deg, rgba(255, 204, 0, 0.1) 0%, rgba(255, 216, 44, 0.5) 100%);
2024-02-26 10:25:02 +08:00
}
.page2 .listBox .li2 {
2024-02-27 20:16:07 +08:00
background: linear-gradient(270deg, rgba(109, 139, 209, 0.1) 0%, rgba(131, 204, 255, 0.5) 100%);
2024-02-26 10:25:02 +08:00
}
.page2 .listBox .li3 {
2024-02-27 20:16:07 +08:00
background: linear-gradient(270deg, rgba(163, 102, 46, 0.1) 0%, rgba(223, 137, 63, 0.5) 100%);
2024-02-26 10:25:02 +08:00
}
.page2 .my {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: url(../images/myBg.png) no-repeat;
background-size: 100% 100%;
width: 10rem;
height: 2.02667rem;
}
.page2 .my .num {
2024-02-27 10:16:03 +08:00
width: 1.8rem;
2024-02-26 10:25:02 +08:00
height: 100%;
line-height: 2.13333rem;
text-align: center;
color: #FFFBE3;
font-size: 0.42667rem;
font-weight: 500;
margin-right: 0.18667rem;
float: left;
}
.page2 .my .tx {
display: block;
width: 1.28rem;
height: 1.28rem;
border-radius: 50%;
margin-top: 0.42667rem;
margin-right: 0.32rem;
float: left;
}
.page2 .my .name {
width: 2.98667rem;
height: 100%;
line-height: 2.13333rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #FFFFFF;
font-size: 0.37333rem;
font-weight: 500;
float: left;
}
.page2 .my .right {
width: 1.8rem;
text-align: center;
float: right;
margin-right: 0.64rem;
}
.page2 .my .right p {
height: 0.58667rem;
line-height: 0.58667rem;
color: #FFFFFF;
font-size: 0.42667rem;
font-weight: 600;
margin-top: 0.50667rem;
margin-bottom: 0.10667rem;
}
.page2 .my .right b {
color: #E6E2DC;
font-size: 0.29333rem;
font-weight: 400;
}
.wishingPop {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.wishingPop .wishingPop_in {
width: 7.92rem;
height: 7.73333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #804030;
border-radius: 0.53333rem;
border: 0.02667rem solid #FFE478;
}
.wishingPop .wishingPop_in .wishIngtitle {
width: 4rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1.12rem;
}
.wishingPop .wishingPop_in h3 {
width: 100%;
text-align: center;
color: #E6E2DC;
font-size: 0.29333rem;
position: absolute;
top: 0.64rem;
left: 0;
}
.wishingPop .wishingPop_in .decrease {
width: 0.85333rem;
height: 0.85333rem;
position: absolute;
top: 1.38667rem;
left: 0.56rem;
}
.wishingPop .wishingPop_in input {
background: url(../images/wishingIput.png) no-repeat;
background-size: 100% 100%;
outline: none;
border: none;
position: absolute;
width: 4.88rem;
height: 0.85333rem;
left: 50%;
transform: translateX(-50%);
top: 1.38667rem;
text-align: center;
color: #8F392E;
font-size: 0.42667rem;
font-weight: 500;
}
.wishingPop .wishingPop_in .add {
width: 0.85333rem;
height: 0.85333rem;
position: absolute;
top: 1.38667rem;
right: 0.56rem;
}
.wishingPop .wishingPop_in .quickAddition {
width: 6.82667rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
top: 2.88rem;
left: 50%;
transform: translateX(-50%);
}
.wishingPop .wishingPop_in .quickAddition div {
width: 1.62667rem;
border-radius: 0.8rem;
text-align: center;
color: #8F392E;
font-size: 0.32rem;
background: #FFF3DB;
font-weight: 500;
}
.wishingPop .wishingPop_in .magicSticks {
width: 100%;
position: absolute;
top: 4.48rem;
left: 50%;
transform: translateX(-50%);
height: 0.58667rem;
line-height: 0.58667rem;
text-align: center;
color: #E6E2DC;
font-size: 0.29333rem;
font-weight: 400;
vertical-align: middle;
}
.wishingPop .wishingPop_in .magicSticks img {
display: inline-block;
width: 0.48rem;
height: 0.48rem;
vertical-align: middle;
}
.wishingPop .wishingPop_in .magicSticks b {
color: #fff;
font-size: 0.42667rem;
font-weight: 600;
vertical-align: middle;
}
.wishingPop .wishingPop_in .but {
width: 5.46667rem;
height: 1.28rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.85333rem;
}
.magicStick {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.magicStick .magicStick_in {
width: 7.92rem;
height: 7.73333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #804030;
border-radius: 0.53333rem;
border: 0.02667rem solid #FFE478;
}
.magicStick .magicStick_in .magicSticktitle {
width: 4rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1.12rem;
}
.magicStick .magicStick_in h3 {
width: 100%;
text-align: center;
color: #FFD4A6;
font-size: 0.42667rem;
position: absolute;
top: 0.64rem;
left: 0;
}
.magicStick .magicStick_in .decrease {
width: 0.85333rem;
height: 0.85333rem;
position: absolute;
top: 1.76rem;
left: 0.56rem;
}
.magicStick .magicStick_in input {
background: url(../images/wishingIput.png) no-repeat;
background-size: 100% 100%;
outline: none;
border: none;
position: absolute;
width: 4.88rem;
height: 0.85333rem;
left: 50%;
transform: translateX(-50%);
top: 1.76rem;
text-align: center;
color: #8F392E;
font-size: 0.42667rem;
font-weight: 500;
}
.magicStick .magicStick_in .add {
width: 0.85333rem;
height: 0.85333rem;
position: absolute;
top: 1.76rem;
right: 0.56rem;
}
.magicStick .magicStick_in .quickAddition {
width: 5.33333rem;
height: 0.8rem;
line-height: 0.8rem;
display: flex;
justify-content: space-between;
position: absolute;
top: 3.25333rem;
left: 50%;
transform: translateX(-50%);
}
.magicStick .magicStick_in .quickAddition div {
width: 1.62667rem;
border-radius: 0.8rem;
text-align: center;
color: #8F392E;
font-size: 0.32rem;
background: #FFF3DB;
font-weight: 500;
}
.magicStick .magicStick_in .magicSticks {
width: 100%;
position: absolute;
top: 4.6rem;
left: 50%;
transform: translateX(-50%);
height: 0.58667rem;
line-height: 0.58667rem;
text-align: center;
color: #E6E2DC;
font-size: 0.29333rem;
font-weight: 400;
vertical-align: middle;
}
.magicStick .magicStick_in .magicSticks img {
display: inline-block;
width: 0.48rem;
height: 0.48rem;
vertical-align: middle;
}
.magicStick .magicStick_in .magicSticks b {
color: #fff;
font-size: 0.42667rem;
font-weight: 600;
vertical-align: middle;
}
.magicStick .magicStick_in .but {
width: 5.46667rem;
height: 1.28rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.06667rem;
}
.magicStick .magicStick_in i {
font-style: normal;
width: 100%;
text-align: center;
color: #E6E2DC;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
bottom: 0.53333rem;
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.rule .rule_in {
width: 8.4rem;
height: 9.33333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #804030;
border-radius: 0.53333rem;
border: 0.02667rem solid #FFE478;
}
.rule .rule_in .ruleTitle {
width: 4rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1.12rem;
}
.rule .rule_in .ruleText {
width: 7.06667rem;
height: 8.3rem;
margin: 0.74667rem auto 0;
overflow-y: scroll;
color: #fff;
font-size: 0.32rem;
font-weight: 400;
}
.rule .rule_in .ruleText::-webkit-scrollbar {
display: none;
}
2024-02-27 20:16:07 +08:00
.rule .rule_in .ruleText p {
margin-bottom: 0.10667rem;
line-height: 0.45rem;
}
2024-02-26 10:25:02 +08:00
.record {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.record .record_in {
width: 8.4rem;
height: 9.33333rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #804030;
border-radius: 0.53333rem;
border: 0.02667rem solid #FFE478;
}
.record .record_in .recordTitl {
width: 4rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1.12rem;
}
.record .record_in .recordtab {
width: 6.42667rem;
height: 0.90667rem;
display: flex;
justify-content: space-between;
margin: 0.50667rem auto 0.34667rem;
}
.record .record_in .recordtab div {
width: 2.8rem;
height: 100%;
}
.record .record_in .recordtab .tab1 {
background: url(../images/record2.png) no-repeat;
background-size: 100% 100%;
}
.record .record_in .recordtab .tab2 {
background: url(../images/record1.png) no-repeat;
background-size: 100% 100%;
}
.record .record_in .recordtab .act1 {
background: url(../images/recordAct1.png) no-repeat;
background-size: 100% 100%;
}
.record .record_in .recordtab .act2 {
background: url(../images/recordAct2.png) no-repeat;
background-size: 100% 100%;
}
.record .record_in .ul1 {
width: 8.4rem;
height: 7rem;
margin: 0 auto;
overflow-y: scroll;
}
.record .record_in .ul1::-webkit-scrollbar {
display: none;
}
.record .record_in .ul1 li {
width: 100%;
height: 1.2rem;
margin-bottom: 0.05333rem;
background: #8D4937;
display: flex;
justify-content: space-between;
overflow: hidden;
}
.record .record_in .ul1 li div {
width: 50%;
text-align: center;
color: #FFFFFF;
font-weight: 400;
text-align: center;
}
.record .record_in .ul1 li div p {
font-size: 0.32rem;
margin-top: 0.2rem;
margin-bottom: 0.06667rem;
}
.record .record_in .ul1 li div i {
font-style: normal;
font-size: 0.26667rem;
}
.record .record_in .ul1 .liAct {
background: #A65C46;
}
.record .record_in .ul2 {
display: none;
width: 8.4rem;
height: 7rem;
margin: 0 auto;
overflow-y: scroll;
}
.record .record_in .ul2::-webkit-scrollbar {
display: none;
}
.record .record_in .ul2 li {
width: 100%;
height: 1.2rem;
margin-bottom: 0.05333rem;
background: #8D4937;
display: flex;
justify-content: space-between;
overflow: hidden;
}
.record .record_in .ul2 li div {
width: 33.33333333%;
text-align: center;
color: #FFFFFF;
font-weight: 400;
text-align: center;
}
.record .record_in .ul2 li div p {
width: 100%;
font-size: 0.32rem;
margin-top: 0.24rem;
margin-bottom: 0.06667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.record .record_in .ul2 li div i {
font-style: normal;
font-size: 0.26667rem;
}
.record .record_in .ul2 .liAct {
background: #A65C46;
}
.goToPay {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.goToPay .goToPay_in {
width: 7.86667rem;
height: 4.96rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(../images/goToPay.png) no-repeat;
background-size: 100% 100%;
}
.goToPay .goToPay_in .but {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.2rem;
width: 5.5rem;
height: 1.1rem;
}
.buySuccess {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.buySuccess .buySuccess_in {
width: 7.86667rem;
height: 4.96rem;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #FFE3C7;
border-radius: 0.53333rem;
border: 0.02667rem solid #FFE478;
}
.buySuccess .buySuccess_in h3 {
position: absolute;
left: 0;
top: 0.53333rem;
color: #B52E1C;
font-size: 0.42667rem;
font-weight: 600;
text-align: center;
width: 100%;
}
.buySuccess .buySuccess_in p {
position: absolute;
left: 0;
top: 1.86667rem;
color: #FF5426;
font-size: 0.37333rem;
font-weight: 500;
text-align: center;
width: 100%;
}
.buySuccess .buySuccess_in .buySuccessBut {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 5.46667rem;
height: 1.28rem;
top: 3.14667rem;
}