1563 lines
40 KiB
SCSS
1563 lines
40 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background: #160C0D;
|
|
}
|
|
|
|
.back {
|
|
width: 100%;
|
|
height: px2rem(44);
|
|
line-height: px2rem(44);
|
|
position: fixed;
|
|
left: 0;
|
|
top: px2rem(65);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(38);
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
|
|
img {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
position: absolute;
|
|
left: px2rem(18);
|
|
top: px2rem(0);
|
|
}
|
|
}
|
|
|
|
.header {
|
|
width: px2rem(750);
|
|
height: px2rem(1800);
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
|
|
.rule_icon {
|
|
width: px2rem(140);
|
|
height: px2rem(50);
|
|
line-height: px2rem(45);
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(216);
|
|
background: url(../images/rule_iconBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FDF565;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.time {
|
|
width: 92%;
|
|
height: px2rem(122);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(50);
|
|
margin: px2rem(658) auto 0;
|
|
|
|
div {
|
|
float: left;
|
|
width: px2rem(110);
|
|
height: px2rem(110);
|
|
background: url(../images/timeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(18);
|
|
// line-height: px2rem(122);
|
|
|
|
b {
|
|
color: #FFF783;
|
|
font-size: px2rem(44);
|
|
font-weight: 600;
|
|
font-family: PingFang SC;
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0.25rem;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
font-family: PingFang SC;
|
|
}
|
|
}
|
|
|
|
.day {
|
|
background: url(../images/timeBg.png) no-repeat;
|
|
// background: url(../images/timeBgAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: px2rem(47);
|
|
}
|
|
|
|
.colon {
|
|
width: px2rem(16);
|
|
height: px2rem(40);
|
|
background: url(../images/icon1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 px2rem(17);
|
|
margin-top: px2rem(41);
|
|
}
|
|
}
|
|
}
|
|
|
|
.content_box{
|
|
position: absolute;
|
|
top: px2rem(796);
|
|
}
|
|
|
|
.myRecharge {
|
|
width: px2rem(750);
|
|
height: px2rem(498);
|
|
background: url(../images/myRechargeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(365);
|
|
height: px2rem(74);
|
|
line-height: px2rem(74);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(29);
|
|
text-align: center;
|
|
font-family: SF Arabic;
|
|
font-weight: 500;
|
|
font-size: px2rem(34);
|
|
color: #893628;
|
|
text-shadow: 0px px2rem(3) 0px #FFFFFF;
|
|
background: url(../images/myRecharge_title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
height: 1.2rem;
|
|
line-height: 1.2rem;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: 0;
|
|
top: px2rem(160);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.avatar {
|
|
width: px2rem(88);
|
|
height: px2rem(90);
|
|
border-radius: 50%;
|
|
border: px2rem(4) solid #FFF783;
|
|
margin: 0 px2rem(20);
|
|
}
|
|
|
|
b {
|
|
color: #FFF783;
|
|
font-size: px2rem(86);
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
}
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(50);
|
|
height: px2rem(50);
|
|
margin: 0 px2rem(10) 0;
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(336);
|
|
height: px2rem(84);
|
|
line-height: px2rem(84);
|
|
text-align: center;
|
|
color: #FFF0BA;
|
|
font-size: px2rem(24);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(316);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.recharge3000 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
// background: url(../images/bgTop.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
// line-height: px2rem(124);
|
|
// background: url(../images/title.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(120);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
// height: 3rem;
|
|
// background: url(../images/bgBottom.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
text-align: center;
|
|
color: #8B8B8B;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #FFE483;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: px2rem(120);
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
padding-bottom: px2rem(100);
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
// background: url(../images/bgCentent.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
margin-bottom: px2rem(73);
|
|
margin-top: px2rem(150);
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(608);
|
|
height: px2rem(911);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge3000.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bo {
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: px2rem(506);
|
|
left: px2rem(147);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.8rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge5000 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
// background: url(../images/bgTop.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
// line-height: px2rem(124);
|
|
// background: url(../images/title.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(120);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
// height: 3rem;
|
|
// background: url(../images/bgBottom.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
text-align: center;
|
|
color: #8B8B8B;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #FFE483;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: px2rem(120);
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
padding-bottom: px2rem(100);
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
// background: url(../images/bgCentent.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
margin-bottom: px2rem(73);
|
|
margin-top: px2rem(150);
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(608);
|
|
height: px2rem(911);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge5000.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bo {
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: px2rem(506);
|
|
left: px2rem(147);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.8rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge8000 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
// background: url(../images/bgTop.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
// line-height: px2rem(124);
|
|
// background: url(../images/title.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(120);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
// height: 3rem;
|
|
// background: url(../images/bgBottom.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
text-align: center;
|
|
color: #8B8B8B;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #FFE483;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: px2rem(120);
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
padding-bottom: px2rem(100);
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
// background: url(../images/bgCentent.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
margin-bottom: px2rem(73);
|
|
margin-top: px2rem(150);
|
|
padding-top: px2rem(10);
|
|
position: relative;
|
|
.whyShiping{
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
left: px2rem(354);
|
|
top: px2rem(-2);
|
|
z-index: 10;
|
|
}
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(608);
|
|
height: px2rem(911);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge8000.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bo {
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: px2rem(506);
|
|
left: px2rem(147);
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.8rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge10000 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
// background: url(../images/bgTop.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
// line-height: px2rem(124);
|
|
// background: url(../images/title.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(120);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
// height: 3rem;
|
|
// background: url(../images/bgBottom.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
text-align: center;
|
|
color: #8B8B8B;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #FFE483;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: px2rem(120);
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
padding-bottom: px2rem(100);
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
// background: url(../images/bgCentent.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
margin-bottom: px2rem(73);
|
|
margin-top: px2rem(150);
|
|
padding-top: px2rem(10);
|
|
position: relative;
|
|
.whyShiping{
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
left: px2rem(354);
|
|
top: px2rem(-2);
|
|
z-index: 10;
|
|
}
|
|
.whyToushi{
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
right: px2rem(100);
|
|
top: px2rem(22);
|
|
z-index: 10;
|
|
}
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(608);
|
|
height: px2rem(911);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge10000.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bo {
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: px2rem(506);
|
|
left: px2rem(147);
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.8rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recharge20000 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
// background: url(../images/bgTop.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
// line-height: px2rem(124);
|
|
// background: url(../images/title.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(120);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
// height: 3rem;
|
|
// background: url(../images/bgBottom.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
text-align: center;
|
|
color: #8B8B8B;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(300);
|
|
height: px2rem(90);
|
|
line-height: px2rem(90);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #FFE483;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: px2rem(120);
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
padding-bottom: px2rem(100);
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
// background: url(../images/bgCentent.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
margin-bottom: px2rem(73);
|
|
margin-top: px2rem(150);
|
|
padding-top: px2rem(10);
|
|
position: relative;
|
|
.whyShiping{
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
left: px2rem(354);
|
|
top: px2rem(-2);
|
|
z-index: 10;
|
|
}
|
|
.whyToushi{
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
right: px2rem(100);
|
|
top: px2rem(22);
|
|
z-index: 10;
|
|
}
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(608);
|
|
height: px2rem(911);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge20000.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bo {
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: px2rem(506);
|
|
left: px2rem(147);
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.8rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.pub_in {
|
|
width: px2rem(745);
|
|
height: px2rem(802);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/pub_in_bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.close {
|
|
width: px2rem(68);
|
|
height: px2rem(68);
|
|
position: absolute;
|
|
right: px2rem(23);
|
|
top: px2rem(-80);
|
|
}
|
|
|
|
.title {
|
|
width: px2rem(430);
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(70);
|
|
}
|
|
|
|
.centent {
|
|
width: 100%;
|
|
height: px2rem(460);
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(10);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(118);
|
|
margin-top: px2rem(180);
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
p {
|
|
color: #FFF784;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
// line-height: 0.45rem;
|
|
margin-bottom: 0.2rem;
|
|
width: 100%;
|
|
line-height: px2rem(38);
|
|
|
|
}
|
|
}
|
|
|
|
.myRechargeText {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-content: flex-start;
|
|
|
|
p {
|
|
// padding-bottom: 0.3rem;
|
|
}
|
|
}
|
|
|
|
.myRechargeTextWhy {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-content: flex-start;
|
|
|
|
p {
|
|
// padding-bottom: 2.3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.disclaimer {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: px2rem(30);
|
|
margin-bottom: px2rem(42);
|
|
color: #FFF784;
|
|
font-size: px2rem(26);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.video {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
video {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 65%;
|
|
}
|
|
|
|
.close {
|
|
width: px2rem(68);
|
|
height: px2rem(68);
|
|
position: absolute;
|
|
top: 10%;
|
|
right: px2rem(70);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
.arabic {
|
|
.back img {
|
|
left: auto;
|
|
right: 0.24rem;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
|
|
.header .time .day,
|
|
.header .time .hour,
|
|
.header .time .colon,
|
|
.header .time .min,
|
|
.header .time .sec {
|
|
float: right;
|
|
}
|
|
|
|
.header .time .day {
|
|
margin-right: 0;
|
|
margin-left: 0.62667rem;
|
|
}
|
|
|
|
|
|
.recharges .content .topTitle {
|
|
direction: ltr;
|
|
}
|
|
}
|
|
.english{
|
|
.header{
|
|
background: url(../images/header-en.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge3000 .content .rewardImg{
|
|
background: url(../images/recharge3000-en.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge5000 .content .rewardImg{
|
|
background: url(../images/recharge5000-en.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge8000 .content .rewardImg{
|
|
background: url(../images/recharge8000-en.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge10000 .content .rewardImg{
|
|
background: url(../images/recharge10000-en.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge20000 .content .rewardImg{
|
|
background: url(../images/recharge20000-en.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.Turkiye{
|
|
.header{
|
|
background: url(../images/header-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge3000 .content .rewardImg{
|
|
background: url(../images/recharge3000-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge5000 .content .rewardImg{
|
|
background: url(../images/recharge5000-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge8000 .content .rewardImg{
|
|
background: url(../images/recharge8000-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge10000 .content .rewardImg{
|
|
background: url(../images/recharge10000-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge20000 .content .rewardImg{
|
|
background: url(../images/recharge20000-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
} |