3385 lines
70 KiB
CSS
3385 lines
70 KiB
CSS
|
@font-face {
|
||
|
|
font-family: "Acrom";
|
||
|
|
src: url("../font/Acrom-Bold.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "TT Norms";
|
||
|
|
src: url("../font/TTNorms-Bold.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Rubik";
|
||
|
|
src: url("../font/Rubik-Medium.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Rubik Bold";
|
||
|
|
src: url("../font/Rubik-Bold.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Rubik Light";
|
||
|
|
src: url("../font/Rubik-Light.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Inter";
|
||
|
|
src: url("../font/Inter-Regular.otf") format("opentype");
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: "Inter Thin";
|
||
|
|
src: url("../font/Inter-Thin.otf") format("opentype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Zabal";
|
||
|
|
src: url("../font/ZabalDEMO-Medium.otf") format("opentype");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Zabal Bold";
|
||
|
|
src: url("../font/ZabalDEMO-Bold.otf") format("opentype");
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
/* z-index: 999; */
|
||
|
|
/* display: none; */
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.generalContainer {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background-image: url("/html/images/cropped-1920-1080-11680331.png");
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topSection {
|
||
|
|
display: flex;
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.129); */
|
||
|
|
height: 4rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
width: 96.5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.titleArea {
|
||
|
|
display: flex;
|
||
|
|
text-transform: uppercase;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: fit-content;
|
||
|
|
height: 4rem;
|
||
|
|
line-height: 4rem;
|
||
|
|
font-size: 45px;
|
||
|
|
font-family: Rubik Bold;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title2 {
|
||
|
|
margin-left: 0.8rem;
|
||
|
|
color: #ff8a8a;
|
||
|
|
text-shadow: 0px 0px 25.4407px rgba(255, 138, 138, 0.34);
|
||
|
|
}
|
||
|
|
|
||
|
|
.topRectangle {
|
||
|
|
height: 2px;
|
||
|
|
width: 92rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-left: 4rem;
|
||
|
|
background: rgba(255, 255, 255, 0.09);
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* CATEGORY STARTED */
|
||
|
|
|
||
|
|
.categorieSection {
|
||
|
|
display: flex;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
height: 50px;
|
||
|
|
width: 116rem;
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.1); */
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainMenuButton {
|
||
|
|
background: linear-gradient(0deg, rgba(56, 49, 31, 0.9), rgba(56, 56, 10, 0.12)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 239, 93, 0.494), rgba(56, 49, 31, 0.9)) border-box;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
height: 3rem;
|
||
|
|
width: 4rem;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainMenuButton:hover {
|
||
|
|
background: linear-gradient(0deg, rgba(97, 81, 45, 0.9), rgba(103, 103, 15, 0.12)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 239, 93, 0.494), rgba(56, 49, 31, 0.9)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
#homeIcon {
|
||
|
|
font-size: 17px;
|
||
|
|
color: white;
|
||
|
|
line-height: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.categorieItemList {
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.124); */
|
||
|
|
display: flex;
|
||
|
|
height: 3rem;
|
||
|
|
width: 82rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
overflow-x: auto;
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.categorieItemList::-webkit-scrollbar {
|
||
|
|
width: 0px;
|
||
|
|
height: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.categorieItem {
|
||
|
|
color: rgba(255, 255, 255, 0.51);
|
||
|
|
font-family: Acrom;
|
||
|
|
/* background-color: red; */
|
||
|
|
min-width: 230px;
|
||
|
|
/* font-size: 30px; */
|
||
|
|
margin-top: 0.25rem;
|
||
|
|
height: 2.5rem;
|
||
|
|
line-height: 2.5rem;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
background: linear-gradient(0deg, rgba(61, 32, 32, 0.9), rgba(71, 43, 43, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(61, 32, 32, 0.6)) border-box;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.categorieItem:hover {
|
||
|
|
background: linear-gradient(0deg, rgba(81, 45, 45, 0.9), rgba(91, 58, 58, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(61, 32, 32, 0.6)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.categorieItem.selected {
|
||
|
|
background: linear-gradient(0deg, rgba(107, 60, 60, 0.9), rgba(131, 85, 85, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(123, 58, 58, 0.5)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.categorieItem:not(:last-child) {
|
||
|
|
margin-right: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charInfoSection {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
background: linear-gradient(360deg, rgba(255, 138, 138, 0.25) 0%, rgba(0, 0, 0, 0) 105.75%);
|
||
|
|
border-radius: 7px;
|
||
|
|
width: 27rem;
|
||
|
|
height: 5rem;
|
||
|
|
top: 5.9rem;
|
||
|
|
/* bottom: 0; */
|
||
|
|
margin-left: 89rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profileImageSection {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 39px;
|
||
|
|
height: 39px;
|
||
|
|
border-radius: 37px;
|
||
|
|
margin-left: 1.5rem;
|
||
|
|
margin-top: 1.2rem;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.profileImageSection img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charNameSection {
|
||
|
|
display: flex;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 7.5rem;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charName {
|
||
|
|
line-height: 5rem;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
font-family: Acrom;
|
||
|
|
font-size: 14px;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.charSurName {
|
||
|
|
line-height: 4.9rem;
|
||
|
|
margin-left: 0.25rem;
|
||
|
|
font-family: Zabal;
|
||
|
|
font-size: 14px;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
color: rgba(255, 255, 255, 0.72);
|
||
|
|
}
|
||
|
|
|
||
|
|
#creditCardIcon {
|
||
|
|
color: #f8ca48;
|
||
|
|
line-height: 5rem;
|
||
|
|
font-size: 23px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profileCreditSection {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
display: flex;
|
||
|
|
line-height: 5rem;
|
||
|
|
color: #ffffff;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 13px;
|
||
|
|
width: 6.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.creditCount {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.creditText {
|
||
|
|
margin-left: 0.2rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditButton {
|
||
|
|
cursor: pointer;
|
||
|
|
margin-left: 1.2rem;
|
||
|
|
background: #f8ca48;
|
||
|
|
border-radius: 3px;
|
||
|
|
height: 33px;
|
||
|
|
line-height: 33px;
|
||
|
|
width: 6rem;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-top: 1.4rem;
|
||
|
|
color: rgba(0, 0, 0, 0.789);
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditButton:hover {
|
||
|
|
background: #f8c94800;
|
||
|
|
color: white;
|
||
|
|
border: 1px solid #f8ca48;
|
||
|
|
}
|
||
|
|
|
||
|
|
.generalMiddle {
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.111); */
|
||
|
|
height: 52rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
width: 116rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blackLinear {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
border-radius: 10px;
|
||
|
|
background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60.09%);
|
||
|
|
|
||
|
|
height: 818px;
|
||
|
|
margin-left: 1px;
|
||
|
|
width: 427px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
background: linear-gradient(0deg, rgba(62, 31, 31, 0.6), rgba(48, 27, 27, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 238, 0, 0.7), rgba(62, 31, 31, 0.3)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
height: 820px;
|
||
|
|
width: 430px;
|
||
|
|
filter: drop-shadow(0px 0px 18px rgba(248, 202, 72, 0.06));
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redeemCodeTextArea {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
font-family: Acrom;
|
||
|
|
font-size: 25px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redeemText {
|
||
|
|
color: #f8ca48;
|
||
|
|
text-shadow: 0px 0px 11px rgba(248, 202, 72, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.codeText {
|
||
|
|
color: #d6d6d6;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redeemCodeDescArea {
|
||
|
|
position: absolute;
|
||
|
|
width: 80%;
|
||
|
|
/* background-color: red; */
|
||
|
|
text-transform: uppercase;
|
||
|
|
|
||
|
|
color: #9c9494;
|
||
|
|
font-family: Zabal;
|
||
|
|
font-size: 11px;
|
||
|
|
margin-left: 2.1rem;
|
||
|
|
margin-top: 4.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.writeTheCode {
|
||
|
|
z-index: 999;
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 5rem;
|
||
|
|
margin-top: 38rem;
|
||
|
|
width: 270px;
|
||
|
|
height: 60px;
|
||
|
|
padding-left: 1.2rem;
|
||
|
|
padding-right: 1.2rem;
|
||
|
|
font-family: Zabal;
|
||
|
|
color: #909090;
|
||
|
|
|
||
|
|
background: rgba(7, 7, 7, 0.7);
|
||
|
|
border: 1px solid rgba(248, 202, 72, 0.35);
|
||
|
|
border-radius: 5px;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.approveButton {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
background: #f8ca48;
|
||
|
|
box-shadow: 0px 0px 18px rgba(255, 218, 113, 0.26);
|
||
|
|
border-radius: 3px;
|
||
|
|
height: 47px;
|
||
|
|
width: 178px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 47px;
|
||
|
|
font-family: Acrom;
|
||
|
|
margin-left: 8rem;
|
||
|
|
margin-top: 42.7rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.approveButton:hover {
|
||
|
|
background: #f8c94800;
|
||
|
|
border: 1px solid #f8ca48;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redeemInfoArea {
|
||
|
|
/* text-align: center; */
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
line-height: 3rem;
|
||
|
|
position: absolute;
|
||
|
|
height: 2rem;
|
||
|
|
width: 17rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 5rem;
|
||
|
|
margin-top: 35.6rem;
|
||
|
|
color: #b5b5b5;
|
||
|
|
font-size: 10px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-family: Inter;
|
||
|
|
/* line-height: 5rem; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#InfoIcon {
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 3rem;
|
||
|
|
margin-right: 0.3rem;
|
||
|
|
color: #2e2e2e;
|
||
|
|
}
|
||
|
|
|
||
|
|
#InfoIconCar {
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 3rem;
|
||
|
|
margin-right: 0.3rem;
|
||
|
|
color: #595959;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperMidCarBox {
|
||
|
|
position: absolute;
|
||
|
|
background: linear-gradient(0deg, rgba(17, 15, 15, 0.6), rgba(23, 22, 22, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(219, 107, 205, 0.5), rgba(23, 22, 22, 0.3)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
height: 24.5rem;
|
||
|
|
border-radius: 10px;
|
||
|
|
width: 57.4rem;
|
||
|
|
margin-left: 29.4rem;
|
||
|
|
margin-top: -51.25rem;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.upperMidCarBox img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxInfoArea {
|
||
|
|
z-index: 98;
|
||
|
|
text-transform: uppercase;
|
||
|
|
display: flex;
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
font-family: Zabal;
|
||
|
|
color: #b4b4b4;
|
||
|
|
width: 25rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 9.5rem;
|
||
|
|
margin-top: 4rem;
|
||
|
|
font-size: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxInfoText {
|
||
|
|
margin-left: -2.9rem;
|
||
|
|
line-height: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxTitleArea {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
/* justify-content: center; */
|
||
|
|
font-size: 34px;
|
||
|
|
font-family: Acrom;
|
||
|
|
color: white;
|
||
|
|
/* background-color: rgba(0, 0, 255, 0.116); */
|
||
|
|
width: 28rem;
|
||
|
|
margin-top: 6rem;
|
||
|
|
margin-left: 5rem;
|
||
|
|
height: 4rem;
|
||
|
|
letter-spacing: -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxDoYouNeed {
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
color: #ba6ff5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxDescription {
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 8.9rem;
|
||
|
|
margin-left: 11rem;
|
||
|
|
width: 12rem;
|
||
|
|
font-family: Zabal;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #cecece;
|
||
|
|
text-align: center;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxButton {
|
||
|
|
z-index: 987;
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 14rem;
|
||
|
|
margin-left: 12rem;
|
||
|
|
width: 155px;
|
||
|
|
height: 45px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 45px;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
border: 1.34286px solid #ba6ff5;
|
||
|
|
/* box-shadow: (0px 0px 13.4286px #7198ff); */
|
||
|
|
box-shadow: 0px 0px 13px #7197ff31;
|
||
|
|
border-radius: 6.71429px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxButton:hover {
|
||
|
|
background: #ba6ff5;
|
||
|
|
color: black;
|
||
|
|
box-shadow: 0px 0px 13.4286px rgba(186, 111, 245, 0.24);
|
||
|
|
}
|
||
|
|
|
||
|
|
.carButtonBelowText {
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 17.3rem;
|
||
|
|
margin-left: 12.95rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 10px;
|
||
|
|
color: #696969;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 8rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottomMidGunBox {
|
||
|
|
position: absolute;
|
||
|
|
background: linear-gradient(0deg, rgba(17, 15, 15, 0.6), rgba(23, 22, 22, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(99, 172, 209, 0.5), rgba(23, 22, 22, 0.3)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 10px;
|
||
|
|
height: 24.5rem;
|
||
|
|
width: 57.4rem;
|
||
|
|
margin-left: 29.4rem;
|
||
|
|
margin-top: -24.6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
display: flex;
|
||
|
|
font-size: 34px;
|
||
|
|
font-family: Acrom;
|
||
|
|
color: white;
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
height: 3rem;
|
||
|
|
width: 25rem;
|
||
|
|
margin-top: 7rem;
|
||
|
|
margin-left: 28rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunDoYouNeedText {
|
||
|
|
color: #7198ff;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxInfoArea {
|
||
|
|
font-family: Zabal;
|
||
|
|
color: #b4b4b4;
|
||
|
|
font-size: 8px;
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
text-transform: uppercase;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 20rem;
|
||
|
|
justify-content: center;
|
||
|
|
margin-top: 6.2rem;
|
||
|
|
margin-left: 30rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#InfoIconGun {
|
||
|
|
margin-right: 0.4rem;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 9px;
|
||
|
|
margin-right: 0.3rem;
|
||
|
|
color: #595959;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxDescription {
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 10rem;
|
||
|
|
margin-left: 33rem;
|
||
|
|
width: 14rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Zabal;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #cecece;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton {
|
||
|
|
z-index: 987;
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 14rem;
|
||
|
|
margin-left: 35rem;
|
||
|
|
width: 155px;
|
||
|
|
height: 45px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 45px;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
border: 1px solid #7198ff;
|
||
|
|
/* box-shadow: (0px 0px 13.4286px #7198ff); */
|
||
|
|
box-shadow: 0px 0px 13px #7197ff61;
|
||
|
|
border-radius: 6.71429px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton:hover {
|
||
|
|
background: #7198ff;
|
||
|
|
color: black;
|
||
|
|
box-shadow: 0px 0px 13.4286px rgba(113, 152, 255, 0.24);
|
||
|
|
/* border-radius: 6.71429px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunButtonBelowText {
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 17.3rem;
|
||
|
|
margin-left: 35.95rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 10px;
|
||
|
|
color: #999999;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 8rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottomMidGunBox img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox {
|
||
|
|
position: relative;
|
||
|
|
/* background-color: red; */
|
||
|
|
background: linear-gradient(0deg, rgba(17, 15, 15, 0.6), rgba(23, 22, 22, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(115, 184, 126, 0.5), rgba(23, 22, 22, 0.3)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
width: 27rem;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 10px;
|
||
|
|
height: 24.5rem;
|
||
|
|
margin-left: 89rem;
|
||
|
|
margin-top: -51.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.otherBoxButton {
|
||
|
|
z-index: 987;
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 4rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
width: 155px;
|
||
|
|
height: 45px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 45px;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
border: 1px solid #bcf3a7;
|
||
|
|
box-shadow: 0px 0px 13px #bdf3a73a;
|
||
|
|
border-radius: 6.71429px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.otherBoxButton:hover {
|
||
|
|
color: black;
|
||
|
|
background: #bcf3a7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moneyBoxButton {
|
||
|
|
z-index: 987;
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 4rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
width: 155px;
|
||
|
|
height: 45px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 45px;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
border: 1px solid #ff7d7d;
|
||
|
|
box-shadow: 0px 0px 13px #ff7d7d44;
|
||
|
|
border-radius: 6.71429px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moneyBoxButton:hover {
|
||
|
|
color: black;
|
||
|
|
background: #ff8a8a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
width: 9.7rem;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 9px;
|
||
|
|
color: #aaaaaa;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
width: 9.7rem;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 9px;
|
||
|
|
color: #aaaaaa;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#InfoIconOther {
|
||
|
|
margin-right: 0.3rem;
|
||
|
|
line-height: 11px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#InfoIconMoney {
|
||
|
|
margin-right: 0.3rem;
|
||
|
|
line-height: 11px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.otherBoxDescription {
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 7.5rem;
|
||
|
|
color: #cccccc;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 6.9rem;
|
||
|
|
width: 14rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moneyBoxDescription {
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 7.5rem;
|
||
|
|
color: #cccccc;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 6.9rem;
|
||
|
|
width: 14rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.otherBoxLinear {
|
||
|
|
/* background-color: red; */
|
||
|
|
background: linear-gradient(0deg, rgba(198, 255, 178, 0.4) -10.4%, rgba(198, 255, 178, 0) 59.07%);
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxLinear {
|
||
|
|
/* background-color: red; */
|
||
|
|
background: linear-gradient(360deg, rgba(191, 111, 255, 0.1) -12.13%, rgba(217, 217, 217, 0) 77.87%);
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxLinear {
|
||
|
|
/* background-color: red; */
|
||
|
|
background: linear-gradient(360deg, rgba(96, 120, 190, 0.4) -12.13%, rgba(217, 217, 217, 0) 56.67%);
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moneyBoxLinear {
|
||
|
|
background: linear-gradient(360deg, rgba(255, 97, 97, 0.4) -12.13%, rgba(217, 217, 217, 0) 56.67%);
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
position: absolute;
|
||
|
|
background: linear-gradient(0deg, rgba(17, 15, 15, 0.6), rgba(23, 22, 22, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(217, 152, 106, 0.5), rgba(23, 22, 22, 0.3)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 10px;
|
||
|
|
height: 24.5rem;
|
||
|
|
width: 27rem;
|
||
|
|
margin-left: 89rem;
|
||
|
|
margin-top: 2.15rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottomRightMoneyBox img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ! VEHICLE AREA */
|
||
|
|
|
||
|
|
.homeMenu {
|
||
|
|
/* display: none; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.vehicleMenu {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemsMenu {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditMenu {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSelectedCarDetailsArea {
|
||
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(71, 32, 32, 0.4), rgba(0, 0, 0, 0.7)) border-box;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
height: 820px;
|
||
|
|
width: 430px;
|
||
|
|
/* filter: drop-shadow(0px 0px 18px rgba(248, 202, 72, 0.06)); */
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftCarNameArea {
|
||
|
|
text-transform: uppercase;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
/* background-color: red; */
|
||
|
|
color: #ffffff;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 22px;
|
||
|
|
margin-top: 3rem;
|
||
|
|
text-align: center;
|
||
|
|
/* height: 2.5rem; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftCarBrand {
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
color: #ff8a8a;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftCarYear {
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: Inter;
|
||
|
|
text-align: center;
|
||
|
|
color: #b1b1b1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 90%;
|
||
|
|
margin-left: 1.5rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
height: 14rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftCarImageArea img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftGraphArea {
|
||
|
|
margin-top: 2rem;
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.113); */
|
||
|
|
/* height: 10rem; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.graphAreaItem {
|
||
|
|
margin-top: 2rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 2.5rem;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
#leftGraphIcon {
|
||
|
|
color: #b0b0b0;
|
||
|
|
font-size: 27px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftGraphOut {
|
||
|
|
margin-top: 0.4rem;
|
||
|
|
margin-left: 1rem;
|
||
|
|
background: rgba(58, 58, 58, 0.5);
|
||
|
|
height: 15px;
|
||
|
|
width: 270px;
|
||
|
|
border-radius: 27px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftGraphFill {
|
||
|
|
background: rgba(255, 138, 138, 0.5);
|
||
|
|
max-width: 97%;
|
||
|
|
width: 55%;
|
||
|
|
height: 7px;
|
||
|
|
border-radius: 18px;
|
||
|
|
margin-top: 4px;
|
||
|
|
margin-left: 4px;
|
||
|
|
transition-property: width;
|
||
|
|
transition-duration: 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.graphValueText {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 10px;
|
||
|
|
margin-top: 0.46rem;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
font-family: Zabal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea {
|
||
|
|
margin-top: 4rem;
|
||
|
|
margin-left: 2.5rem;
|
||
|
|
width: 80%;
|
||
|
|
height: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea input[type="checkbox"] {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea label {
|
||
|
|
cursor: pointer;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 12px;
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
outline: none;
|
||
|
|
padding-left: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea label::before,
|
||
|
|
.leftItemCheckArea label::after {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
outline: none;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea label::before {
|
||
|
|
height: 21px;
|
||
|
|
width: 21px;
|
||
|
|
background-color: #1b1b1b;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
|
|
left: -15px;
|
||
|
|
top: -4px;
|
||
|
|
outline: none;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Checkmark of the fake checkbox*/
|
||
|
|
.leftItemCheckArea label::after {
|
||
|
|
height: 5px;
|
||
|
|
width: 9px;
|
||
|
|
outline: none;
|
||
|
|
border-left: 2px solid #ff8a8a;
|
||
|
|
border-bottom: 2px solid #ff8a8a;
|
||
|
|
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
|
||
|
|
left: -9px;
|
||
|
|
top: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea input[type="checkbox"] + label::after {
|
||
|
|
content: none;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemCheckArea input[type="checkbox"]:checked + label::after {
|
||
|
|
content: "";
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#checkBoxLabel span {
|
||
|
|
color: #f8ca48;
|
||
|
|
margin-left: 0.20000000000000018rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftItemPlateInput {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
margin-left: 2.5rem;
|
||
|
|
width: 342px;
|
||
|
|
height: 42px;
|
||
|
|
background: rgba(17, 17, 17, 0.68);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
|
|
border-radius: 5px;
|
||
|
|
padding-left: 1rem;
|
||
|
|
color: rgba(255, 255, 255, 0.42);
|
||
|
|
outline: none;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
transition-property: border;
|
||
|
|
transition-duration: 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftBuyButton {
|
||
|
|
cursor: pointer;
|
||
|
|
border: 3px solid #f8ca48;
|
||
|
|
border-radius: 7px;
|
||
|
|
width: 340px;
|
||
|
|
height: 77px;
|
||
|
|
color: white;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-left: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftBuyButton:hover {
|
||
|
|
background: #f8ca48;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyButtonPrice {
|
||
|
|
text-align: center;
|
||
|
|
line-height: 55px;
|
||
|
|
font-size: 25px;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyButtonBuyText {
|
||
|
|
font-size: 15px;
|
||
|
|
font-family: Acrom;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: -14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: wrap;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.042); */
|
||
|
|
width: 90rem;
|
||
|
|
height: 51.4rem;
|
||
|
|
position: relative;
|
||
|
|
left: 440px;
|
||
|
|
top: -821px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea::-webkit-scrollbar {
|
||
|
|
/* padding-left: 75px; */
|
||
|
|
width: 0px;
|
||
|
|
height: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carListItem {
|
||
|
|
background: linear-gradient(0deg, rgba(14, 6, 6, 0.8), rgba(12, 5, 5, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.3), rgba(20, 7, 7, 0.4)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
/* background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 138, 138, 0.09) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, 0.5); */
|
||
|
|
border-radius: 20px;
|
||
|
|
width: 435px;
|
||
|
|
height: 388px;
|
||
|
|
margin-left: 38px;
|
||
|
|
margin-bottom: 44px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carListItem:nth-last-child(-n + 3):nth-child(3n + 1),
|
||
|
|
.carListItem:nth-last-child(-n + 3):nth-child(3n + 1) ~ .carListItem {
|
||
|
|
/* margin-left: 0px; */
|
||
|
|
margin-bottom: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carListItem.selected {
|
||
|
|
background: linear-gradient(0deg, rgba(25, 10, 10, 0.8), rgba(19, 7, 7, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.3), rgba(20, 7, 7, 0.4)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carListItem:hover {
|
||
|
|
background: linear-gradient(0deg, rgba(30, 12, 12, 0.8), rgba(26, 9, 9, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.3), rgba(20, 7, 7, 0.4)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemCarNameArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
font-size: 22px;
|
||
|
|
width: 20rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 3rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
font-family: Acrom;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBrand {
|
||
|
|
color: #ff8a8a;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carModel {
|
||
|
|
font-family: Inter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.caryearModel {
|
||
|
|
color: #b1b1b1;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 13rem;
|
||
|
|
width: 20rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-left: 3.7rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemCarImageArea img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemCreditArea {
|
||
|
|
display: flex;
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 2rem;
|
||
|
|
font-size: 18px;
|
||
|
|
width: 13rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
margin-left: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemPrice {
|
||
|
|
/* line-height: -100rem; */
|
||
|
|
margin-left: 0.6rem;
|
||
|
|
color: white;
|
||
|
|
font-family: Inter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemPriceText {
|
||
|
|
margin-left: 0.3rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#creditCardIconList {
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
/* line-height: 95px; */
|
||
|
|
font-size: 18px;
|
||
|
|
color: #f8ca48;
|
||
|
|
/* box-shadow: 0px 0px 10px #f8ca48; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
display: flex;
|
||
|
|
/* background-color: red; */
|
||
|
|
justify-content: end;
|
||
|
|
height: 2rem;
|
||
|
|
width: 6.3rem;
|
||
|
|
margin-top: -2.3rem;
|
||
|
|
margin-left: 18rem;
|
||
|
|
/* float: left; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#itemGraphIcon {
|
||
|
|
font-size: 27px;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemMaxSpeedText {
|
||
|
|
color: #dbdbdb;
|
||
|
|
font-family: Zabal;
|
||
|
|
font-size: 13px;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
margin-top: 0.35rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ! ITEMS MENU */
|
||
|
|
|
||
|
|
.itemsMenuItemList {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
overflow-y: auto;
|
||
|
|
/* background-color: red; */
|
||
|
|
gap: 38px;
|
||
|
|
height: 830px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemsMenuItem {
|
||
|
|
background: linear-gradient(0deg, rgba(14, 6, 6, 0.8), rgba(12, 5, 5, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.3), rgba(20, 7, 7, 0.4)) border-box;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
/* background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 138, 138, 0.09) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, 0.5); */
|
||
|
|
border-radius: 20px;
|
||
|
|
width: 435.5px;
|
||
|
|
height: 388px;
|
||
|
|
/* margin-right: 38px; */
|
||
|
|
/* margin-bottom: 44px; */
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemsMenuItem.selected {
|
||
|
|
background: linear-gradient(0deg, rgba(25, 10, 10, 0.8), rgba(19, 7, 7, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.3), rgba(20, 7, 7, 0.4)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemsMenuItem:hover {
|
||
|
|
background: linear-gradient(0deg, rgba(30, 12, 12, 0.8), rgba(26, 9, 9, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.3), rgba(20, 7, 7, 0.4)) border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemsMenuItemList::-webkit-scrollbar {
|
||
|
|
/* padding-left: 75px; */
|
||
|
|
width: 0px;
|
||
|
|
height: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemMenuItemNameArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
padding-right: 2rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
margin-left: 2rem;
|
||
|
|
color: #ffffff;
|
||
|
|
height: 2.5rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 13.5rem;
|
||
|
|
width: 21.5rem;
|
||
|
|
margin-left: 3rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemMenuItemImageAreas img {
|
||
|
|
/* position: relative; */
|
||
|
|
/* margin: auto; */
|
||
|
|
/* background-color: blue; */
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
display: flex;
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 2rem;
|
||
|
|
font-size: 19px;
|
||
|
|
width: 13rem;
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ItemMenuItemPrice {
|
||
|
|
/* line-height: -100rem; */
|
||
|
|
margin-left: 0.6rem;
|
||
|
|
color: white;
|
||
|
|
font-family: Inter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ItemMenuItemPriceText {
|
||
|
|
margin-left: 0.3rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#creditCardIconItemList {
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
/* line-height: 95px; */
|
||
|
|
font-size: 18px;
|
||
|
|
color: #f8ca48;
|
||
|
|
/* box-shadow: 0px 0px 10px #f8ca48; */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* YOU WANT BUY */
|
||
|
|
|
||
|
|
.youWantBuySection {
|
||
|
|
z-index: 987987;
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wantBuyPopUp {
|
||
|
|
z-index: 9879897;
|
||
|
|
background: linear-gradient(0deg, rgba(14, 6, 6, 0.9), rgba(12, 5, 5, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.7), rgba(14, 6, 6, 1)) border-box;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 25px;
|
||
|
|
width: 500px;
|
||
|
|
min-height: 220px;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -250px;
|
||
|
|
margin-top: -110px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wantBuyTitleArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 2rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 25px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.youWantBuyText {
|
||
|
|
color: #7baa4b;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpRectangle {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 3rem;
|
||
|
|
/* width: 538px; */
|
||
|
|
height: 1px;
|
||
|
|
|
||
|
|
background: rgba(217, 217, 217, 0.17);
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItemList {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.057); */
|
||
|
|
margin-top: 2rem;
|
||
|
|
width: 80%;
|
||
|
|
/* height: 12rem; */
|
||
|
|
margin-left: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItem {
|
||
|
|
display: flex;
|
||
|
|
/* flex-direction: column; */
|
||
|
|
flex-wrap: wrap;
|
||
|
|
/* background-color: rgba(0, 0, 255, 0.137); */
|
||
|
|
/* height: 2rem; */
|
||
|
|
/* gap: 10px; */
|
||
|
|
width: 100%;
|
||
|
|
padding-left: 3px;
|
||
|
|
padding-right: 3px;
|
||
|
|
/* margin: 10px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItem:not(:last-child) {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItemName {
|
||
|
|
width: 50%;
|
||
|
|
color: white;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItemCost {
|
||
|
|
color: #f8ca48;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
/* justify-content: end; */
|
||
|
|
text-align: end;
|
||
|
|
/* background-color: green; */
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpButtons {
|
||
|
|
display: flex;
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 3rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 3.5rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-bottom: 2.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpButtonItem {
|
||
|
|
cursor: pointer;
|
||
|
|
width: 50%;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 3.5rem;
|
||
|
|
font-family: Acrom;
|
||
|
|
border-radius: 12px;
|
||
|
|
color: rgba(255, 255, 255, 0.69);
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 138, 138, 0.144) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 138, 138, 0.16);
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpButtonItem:not(:last-child) {
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#popUpBuy {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(157, 255, 97, 0.156) 0%, rgba(0, 0, 0, 0) 100%), rgba(159, 255, 114, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
#popUpBuy:hover {
|
||
|
|
box-shadow: 0px 0px 15px rgba(90, 255, 32, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
#popUpCancel:hover {
|
||
|
|
box-shadow: 0px 0px 15px rgba(219, 69, 49, 0.07);
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
cursor: pointer;
|
||
|
|
position: absolute;
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(173, 255, 216, 0.2) 0%, rgba(173, 255, 216, 0) 100%), rgba(173, 255, 216, 0.22);
|
||
|
|
width: 373px;
|
||
|
|
border-radius: 10px;
|
||
|
|
height: 373px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditFirstBox:hover {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(173, 255, 216, 0.3) 0%, rgba(173, 255, 216, 0) 100%), rgba(173, 255, 216, 0.32);
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
cursor: pointer;
|
||
|
|
position: absolute;
|
||
|
|
left: 443px;
|
||
|
|
top: 210px;
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 131, 131, 0.2) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 131, 131, 0.22);
|
||
|
|
width: 680px;
|
||
|
|
height: 373px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditSecondBox:hover {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 131, 131, 0.3) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 131, 131, 0.32);
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
position: absolute;
|
||
|
|
cursor: pointer;
|
||
|
|
left: 1160px;
|
||
|
|
top: 210px;
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 247, 63, 0.2) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 215, 72, 0.22);
|
||
|
|
width: 730px;
|
||
|
|
height: 830px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditThirdBox:hover {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 247, 63, 0.3) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 215, 72, 0.32);
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditFourBox {
|
||
|
|
cursor: pointer;
|
||
|
|
position: absolute;
|
||
|
|
top: 620px;
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(185, 131, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%), rgba(185, 131, 255, 0.22);
|
||
|
|
width: 1092px;
|
||
|
|
height: 420px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditFourBox:hover {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(185, 131, 255, 0.3) 0%, rgba(0, 0, 0, 0) 100%), rgba(185, 131, 255, 0.32);
|
||
|
|
}
|
||
|
|
|
||
|
|
.firstBoxPrice {
|
||
|
|
/* background-color: red; */
|
||
|
|
text-align: center;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
color: #ffffff;
|
||
|
|
/* line-height: 10rem; */
|
||
|
|
margin-top: 3rem;
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.firstBoxImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 9rem;
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 2.1rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.firstBoxImageArea img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.firstBoxGetCredit {
|
||
|
|
color: white;
|
||
|
|
/* color: rgba(255, 255, 255, 0.55); */
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 2rem;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.firstBoxExtraCredit {
|
||
|
|
color: rgba(255, 255, 255, 0.55);
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-top: 0.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxImageArea {
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 20rem;
|
||
|
|
height: 15rem;
|
||
|
|
margin-top: 5rem;
|
||
|
|
margin-left: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxImageArea img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxPrice {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 30rem;
|
||
|
|
margin-top: 4.5rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 34px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxGetCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 30rem;
|
||
|
|
margin-top: 15rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxExtraCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 28.4rem;
|
||
|
|
margin-top: 16.5rem;
|
||
|
|
color: rgba(255, 255, 255, 0.55);
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thirdBoxPrice {
|
||
|
|
/* background-color: red; */
|
||
|
|
text-align: center;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
color: white;
|
||
|
|
font-size: 40px;
|
||
|
|
margin-top: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thirdBoxGetCredit {
|
||
|
|
margin-top: 3rem;
|
||
|
|
font-family: Inter;
|
||
|
|
color: white;
|
||
|
|
font-size: 19px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thirdBoxExtraCredit {
|
||
|
|
color: rgba(255, 255, 255, 0.55);
|
||
|
|
font-family: Inter;
|
||
|
|
margin-top: 0.2rem;
|
||
|
|
font-size: 18px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thirdImageArea {
|
||
|
|
margin-top: 8rem;
|
||
|
|
width: 60%;
|
||
|
|
height: 25rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thirdImageArea img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxImageArea {
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 20rem;
|
||
|
|
height: 15rem;
|
||
|
|
margin-top: 6.5rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxImageArea img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxPrice {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 47rem;
|
||
|
|
margin-top: 8rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 35px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxGetCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 47.2rem;
|
||
|
|
margin-top: 16rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxExtraCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 45.3rem;
|
||
|
|
margin-top: 17.5rem;
|
||
|
|
color: rgba(255, 255, 255, 0.55);
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customizationSection {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 98254;
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* */
|
||
|
|
|
||
|
|
.customizePopUp {
|
||
|
|
z-index: 9879897;
|
||
|
|
background: linear-gradient(0deg, rgba(14, 6, 6, 0.9), rgba(12, 5, 5, 0.9)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(177, 167, 161, 0.7), rgba(14, 6, 6, 1)) border-box;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 25px;
|
||
|
|
width: 500px;
|
||
|
|
min-height: 220px;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -250px;
|
||
|
|
margin-top: -110px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customizeTitleArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 2rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 25px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customizeBuyText {
|
||
|
|
color: #7baa4b;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpRectangle {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 3rem;
|
||
|
|
/* width: 538px; */
|
||
|
|
height: 1px;
|
||
|
|
|
||
|
|
background: rgba(217, 217, 217, 0.17);
|
||
|
|
}
|
||
|
|
|
||
|
|
.customizeItemArea {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.057); */
|
||
|
|
margin-top: 2rem;
|
||
|
|
width: 80%;
|
||
|
|
/* height: 12rem; */
|
||
|
|
margin-left: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItem {
|
||
|
|
display: flex;
|
||
|
|
/* flex-direction: column; */
|
||
|
|
flex-wrap: wrap;
|
||
|
|
/* background-color: rgba(0, 0, 255, 0.137); */
|
||
|
|
/* height: 2rem; */
|
||
|
|
/* gap: 10px; */
|
||
|
|
width: 100%;
|
||
|
|
padding-left: 3px;
|
||
|
|
padding-right: 3px;
|
||
|
|
/* margin: 10px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItem:not(:last-child) {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItemName {
|
||
|
|
width: 50%;
|
||
|
|
color: white;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpItemCost {
|
||
|
|
color: #f8ca48;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 11px;
|
||
|
|
/* justify-content: end; */
|
||
|
|
text-align: end;
|
||
|
|
/* background-color: green; */
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpButtons {
|
||
|
|
display: flex;
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 3rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 3.5rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-bottom: 2.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpButtonItem {
|
||
|
|
cursor: pointer;
|
||
|
|
width: 50%;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 3.5rem;
|
||
|
|
font-family: Acrom;
|
||
|
|
border-radius: 12px;
|
||
|
|
color: rgba(255, 255, 255, 0.69);
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(255, 138, 138, 0.144) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 138, 138, 0.16);
|
||
|
|
}
|
||
|
|
|
||
|
|
.popUpButtonItem:not(:last-child) {
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#popUpBuy {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(157, 255, 97, 0.156) 0%, rgba(0, 0, 0, 0) 100%), rgba(159, 255, 114, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
#popUpBuy:hover {
|
||
|
|
box-shadow: 0px 0px 15px rgba(90, 255, 32, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
#popUpCancel:hover {
|
||
|
|
box-shadow: 0px 0px 15px rgba(219, 69, 49, 0.07);
|
||
|
|
}
|
||
|
|
|
||
|
|
.customInput {
|
||
|
|
z-index: 999;
|
||
|
|
/* position: absolute; */
|
||
|
|
/* margin-left: 5rem; */
|
||
|
|
/* margin-top: 38rem; */
|
||
|
|
/* margin-bottom: 5rem; */
|
||
|
|
/* width: 270px; */
|
||
|
|
height: 40px;
|
||
|
|
padding-left: 1.2rem;
|
||
|
|
padding-right: 1.2rem;
|
||
|
|
font-family: Zabal;
|
||
|
|
color: #a3a3a3;
|
||
|
|
outline: none;
|
||
|
|
background: rgba(7, 7, 7, 0.7);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 5px;
|
||
|
|
transition: border 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customizeInfo {
|
||
|
|
color: rgba(255, 255, 255, 0.686);
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#customizeBuy {
|
||
|
|
background: radial-gradient(104.93% 104.93% at 50% 100%, rgba(157, 255, 97, 0.156) 0%, rgba(0, 0, 0, 0) 100%), rgba(159, 255, 114, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
#customizeBuy:hover {
|
||
|
|
box-shadow: 0px 0px 15px rgba(90, 255, 32, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
#customizeUpCancel:hover {
|
||
|
|
box-shadow: 0px 0px 15px rgba(219, 69, 49, 0.07);
|
||
|
|
}
|
||
|
|
|
||
|
|
.notifySectionXX {
|
||
|
|
z-index: 1489765;
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
/* height: 20%; */
|
||
|
|
width: 100%;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.notifyArea {
|
||
|
|
min-height: 4rem;
|
||
|
|
max-width: 30%;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 1rem;
|
||
|
|
background: radial-gradient(105.91% 105.91% at 50% 100%, rgba(255, 123, 123, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 138, 138, 0.15);
|
||
|
|
border: 1px solid #ff8a8a;
|
||
|
|
box-shadow: 0px 0px 35px rgba(255, 138, 138, 0.42);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 10px;
|
||
|
|
/* line-height: 5rem; */
|
||
|
|
text-align: center;
|
||
|
|
padding: 1.5rem;
|
||
|
|
color: white;
|
||
|
|
font-family: Acrom;
|
||
|
|
/* transition: opacity 0.4s; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.succesfullyArea {
|
||
|
|
display: none;
|
||
|
|
z-index: 9876;
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.succesNotify {
|
||
|
|
/* position: absolute; */
|
||
|
|
color: white;
|
||
|
|
font-family: Acrom;
|
||
|
|
font-size: 19px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 1.5rem;
|
||
|
|
min-height: 4rem;
|
||
|
|
max-width: 25rem;
|
||
|
|
background: radial-gradient(105.91% 105.91% at 50% 100%, rgba(248, 202, 72, 0.33) 0%, rgba(0, 0, 0, 0) 100%), rgba(248, 202, 72, 0.18);
|
||
|
|
border: 1px solid rgba(248, 202, 72, 0.37);
|
||
|
|
box-shadow: 0px 0px 35px rgba(248, 202, 72, 0.2);
|
||
|
|
border-radius: 10px;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1680px) and (max-height: 1050px) {
|
||
|
|
.categorieSection {
|
||
|
|
width: 71rem;
|
||
|
|
}
|
||
|
|
.charInfoSection {
|
||
|
|
margin-left: 74.5rem;
|
||
|
|
}
|
||
|
|
.generalMiddle {
|
||
|
|
height: 49.5rem;
|
||
|
|
width: 101rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
height: 800px;
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
.blackLinear {
|
||
|
|
height: 800px;
|
||
|
|
width: 398px;
|
||
|
|
}
|
||
|
|
.upperMidCarBox {
|
||
|
|
height: 23.5rem;
|
||
|
|
width: 49.4rem;
|
||
|
|
margin-left: 27.4rem;
|
||
|
|
margin-top: -50rem;
|
||
|
|
}
|
||
|
|
.bottomMidGunBox {
|
||
|
|
height: 23.5rem;
|
||
|
|
width: 49.4rem;
|
||
|
|
margin-left: 27.4rem;
|
||
|
|
margin-top: -23.6rem;
|
||
|
|
}
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
margin-left: 23rem;
|
||
|
|
}
|
||
|
|
.upperRightOtherBox {
|
||
|
|
width: 22.5rem;
|
||
|
|
height: 23.5rem;
|
||
|
|
margin-left: 79rem;
|
||
|
|
margin-top: -50rem;
|
||
|
|
}
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
width: 22.5rem;
|
||
|
|
height: 23.5rem;
|
||
|
|
margin-left: 79rem;
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.otherBoxButton {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.otherBoxDescription {
|
||
|
|
margin-left: 4.5rem;
|
||
|
|
}
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.moneyBoxButton {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.moneyBoxDescription {
|
||
|
|
margin-left: 4.5rem;
|
||
|
|
}
|
||
|
|
.redeemInfoArea {
|
||
|
|
margin-left: 4rem;
|
||
|
|
}
|
||
|
|
.writeTheCode {
|
||
|
|
margin-left: 4rem;
|
||
|
|
}
|
||
|
|
.approveButton {
|
||
|
|
margin-left: 7rem;
|
||
|
|
}
|
||
|
|
.rightCarListArea {
|
||
|
|
width: 75rem;
|
||
|
|
height: 51rem;
|
||
|
|
left: 425px;
|
||
|
|
}
|
||
|
|
.carListItem {
|
||
|
|
width: 360px;
|
||
|
|
height: 310px;
|
||
|
|
}
|
||
|
|
.listItemCarNameArea {
|
||
|
|
font-size: 19px;
|
||
|
|
width: 19rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.listItemCarImageArea {
|
||
|
|
height: 11.5rem;
|
||
|
|
width: 17.5rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-left: 2.7rem;
|
||
|
|
}
|
||
|
|
.listItemCreditArea {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
width: 6.3rem;
|
||
|
|
margin-left: 15rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItemList {
|
||
|
|
height: 51rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItem {
|
||
|
|
width: 375px;
|
||
|
|
height: 330px;
|
||
|
|
}
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
height: 11.5rem;
|
||
|
|
width: 19.5rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 1.8rem;
|
||
|
|
}
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
width: 320px;
|
||
|
|
height: 343px;
|
||
|
|
}
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
left: 400px;
|
||
|
|
width: 630px;
|
||
|
|
height: 343px;
|
||
|
|
}
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
left: 1070px;
|
||
|
|
width: 585px;
|
||
|
|
height: 793px;
|
||
|
|
}
|
||
|
|
.buyCreditFourBox {
|
||
|
|
top: 595px;
|
||
|
|
width: 1000px;
|
||
|
|
height: 409px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1600px) and (max-height: 1024px) {
|
||
|
|
.categorieSection {
|
||
|
|
width: 66rem;
|
||
|
|
}
|
||
|
|
.charInfoSection {
|
||
|
|
margin-left: 69.5rem;
|
||
|
|
}
|
||
|
|
.generalMiddle {
|
||
|
|
height: 49.5rem;
|
||
|
|
width: 101rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
height: 790px;
|
||
|
|
width: 385px;
|
||
|
|
}
|
||
|
|
.blackLinear {
|
||
|
|
height: 790px;
|
||
|
|
width: 383px;
|
||
|
|
}
|
||
|
|
.upperMidCarBox {
|
||
|
|
height: 23.5rem;
|
||
|
|
width: 46.4rem;
|
||
|
|
margin-left: 26.5rem;
|
||
|
|
margin-top: -49.5rem;
|
||
|
|
}
|
||
|
|
.bottomMidGunBox {
|
||
|
|
height: 23.5rem;
|
||
|
|
width: 46.4rem;
|
||
|
|
margin-left: 26.5rem;
|
||
|
|
margin-top: -23.6rem;
|
||
|
|
}
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
margin-left: 20rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxInfoArea {
|
||
|
|
margin-left: 23.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxDescription {
|
||
|
|
margin-left: 27rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton {
|
||
|
|
margin-left: 29rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunButtonBelowText {
|
||
|
|
margin-left: 29.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox {
|
||
|
|
width: 21.5rem;
|
||
|
|
height: 23.5rem;
|
||
|
|
margin-left: 75rem;
|
||
|
|
margin-top: -49.5rem;
|
||
|
|
}
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
width: 21.5rem;
|
||
|
|
height: 23.5rem;
|
||
|
|
margin-left: 75rem;
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
}
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.otherBoxButton {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.otherBoxDescription {
|
||
|
|
margin-left: 4.5rem;
|
||
|
|
}
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.moneyBoxButton {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.moneyBoxDescription {
|
||
|
|
margin-left: 4.5rem;
|
||
|
|
}
|
||
|
|
.redeemInfoArea {
|
||
|
|
margin-left: 4rem;
|
||
|
|
}
|
||
|
|
.writeTheCode {
|
||
|
|
margin-left: 4rem;
|
||
|
|
}
|
||
|
|
.approveButton {
|
||
|
|
margin-left: 7rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSelectedCarDetailsArea {
|
||
|
|
height: 790px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 70rem;
|
||
|
|
height: 49rem;
|
||
|
|
top: -785px;
|
||
|
|
left: 430px;
|
||
|
|
}
|
||
|
|
.carListItem {
|
||
|
|
width: 332px;
|
||
|
|
height: 310px;
|
||
|
|
}
|
||
|
|
.leftGraphArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.leftItemCheckArea {
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
.listItemCarNameArea {
|
||
|
|
font-size: 19px;
|
||
|
|
width: 18rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.listItemCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 11.5rem;
|
||
|
|
width: 15.5rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-left: 2.7rem;
|
||
|
|
}
|
||
|
|
.listItemCreditArea {
|
||
|
|
width: 11rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
/* background-color: blue; */
|
||
|
|
width: 6.3rem;
|
||
|
|
margin-left: 13rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItemList {
|
||
|
|
height: 51rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItem {
|
||
|
|
width: 357px;
|
||
|
|
height: 330px;
|
||
|
|
}
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 11.5rem;
|
||
|
|
width: 18.5rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 1.8rem;
|
||
|
|
}
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
width: 310px;
|
||
|
|
height: 335px;
|
||
|
|
}
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
left: 380px;
|
||
|
|
width: 620px;
|
||
|
|
height: 335px;
|
||
|
|
}
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
left: 1030px;
|
||
|
|
width: 545px;
|
||
|
|
height: 783px;
|
||
|
|
}
|
||
|
|
.thirdImageArea {
|
||
|
|
margin-left: 7rem;
|
||
|
|
}
|
||
|
|
.buyCreditFourBox {
|
||
|
|
top: 585px;
|
||
|
|
width: 970px;
|
||
|
|
height: 409px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1600px) and (max-height: 900px) {
|
||
|
|
.categorieSection {
|
||
|
|
width: 66rem;
|
||
|
|
}
|
||
|
|
.charInfoSection {
|
||
|
|
margin-left: 69.5rem;
|
||
|
|
}
|
||
|
|
.generalMiddle {
|
||
|
|
height: 49.5rem;
|
||
|
|
width: 101rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
height: 650px;
|
||
|
|
width: 385px;
|
||
|
|
}
|
||
|
|
.blackLinear {
|
||
|
|
height: 649px;
|
||
|
|
width: 383px;
|
||
|
|
}
|
||
|
|
.upperMidCarBox {
|
||
|
|
height: 19.5rem;
|
||
|
|
width: 46.4rem;
|
||
|
|
margin-left: 26.5rem;
|
||
|
|
margin-top: -40.5rem;
|
||
|
|
}
|
||
|
|
.bottomMidGunBox {
|
||
|
|
height: 19.5rem;
|
||
|
|
width: 46.4rem;
|
||
|
|
margin-left: 26.5rem;
|
||
|
|
margin-top: -19.6rem;
|
||
|
|
}
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
margin-left: 20rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxInfoArea {
|
||
|
|
margin-left: 23.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxDescription {
|
||
|
|
margin-left: 27rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton {
|
||
|
|
margin-left: 29rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunButtonBelowText {
|
||
|
|
margin-left: 29.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox {
|
||
|
|
width: 21.5rem;
|
||
|
|
height: 19.5rem;
|
||
|
|
margin-left: 75rem;
|
||
|
|
margin-top: -40.5rem;
|
||
|
|
}
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
width: 21.5rem;
|
||
|
|
height: 19.5rem;
|
||
|
|
margin-left: 75rem;
|
||
|
|
margin-top: 1.35rem;
|
||
|
|
}
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.otherBoxButton {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.otherBoxDescription {
|
||
|
|
margin-left: 4.5rem;
|
||
|
|
}
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.moneyBoxButton {
|
||
|
|
margin-left: 6.7rem;
|
||
|
|
}
|
||
|
|
.moneyBoxDescription {
|
||
|
|
margin-left: 4.5rem;
|
||
|
|
}
|
||
|
|
.redeemInfoArea {
|
||
|
|
margin-left: 4rem;
|
||
|
|
margin-top: 26.6rem;
|
||
|
|
}
|
||
|
|
.writeTheCode {
|
||
|
|
margin-left: 4rem;
|
||
|
|
margin-top: 29rem;
|
||
|
|
}
|
||
|
|
.approveButton {
|
||
|
|
margin-left: 7rem;
|
||
|
|
margin-top: 33.6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSelectedCarDetailsArea {
|
||
|
|
height: 650px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 70rem;
|
||
|
|
height: 41rem;
|
||
|
|
top: -655px;
|
||
|
|
left: 430px;
|
||
|
|
}
|
||
|
|
.carListItem {
|
||
|
|
width: 332px;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
.leftGraphArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.leftItemCheckArea {
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
.leftCarNameArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.leftCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 70%;
|
||
|
|
margin-left: 4.3rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
height: 9rem;
|
||
|
|
}
|
||
|
|
.listItemCarNameArea {
|
||
|
|
font-size: 19px;
|
||
|
|
width: 18rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.listItemCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 10.5rem;
|
||
|
|
width: 15.5rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-left: 2.7rem;
|
||
|
|
}
|
||
|
|
.listItemCreditArea {
|
||
|
|
width: 11rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
/* background-color: blue; */
|
||
|
|
width: 6.3rem;
|
||
|
|
margin-left: 13rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItemList {
|
||
|
|
height: 41rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
.itemsMenuItem {
|
||
|
|
width: 357px;
|
||
|
|
height: 330px;
|
||
|
|
}
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 11.5rem;
|
||
|
|
width: 18.5rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 1.8rem;
|
||
|
|
}
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
width: 310px;
|
||
|
|
height: 315px;
|
||
|
|
}
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
left: 380px;
|
||
|
|
width: 620px;
|
||
|
|
height: 315px;
|
||
|
|
}
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
left: 1030px;
|
||
|
|
width: 545px;
|
||
|
|
height: 665px;
|
||
|
|
}
|
||
|
|
.thirdImageArea {
|
||
|
|
margin-top: 4.5rem;
|
||
|
|
top: 620px;
|
||
|
|
}
|
||
|
|
.buyCreditFourBox {
|
||
|
|
top: 555px;
|
||
|
|
width: 970px;
|
||
|
|
height: 319px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.fourBoxImageArea {
|
||
|
|
margin-top: 3.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxImageArea {
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
.firstBoxImageArea {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
.firstBoxPrice {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxGetCredit {
|
||
|
|
margin-top: 12rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxExtraCredit {
|
||
|
|
margin-top: 13.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxPrice {
|
||
|
|
margin-top: 6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxGetCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 47.2rem;
|
||
|
|
margin-top: 11rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxExtraCredit {
|
||
|
|
margin-top: 12.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1440px) and (max-height: 900px) {
|
||
|
|
.categorieSection {
|
||
|
|
width: 56rem;
|
||
|
|
}
|
||
|
|
.charInfoSection {
|
||
|
|
margin-left: 59.5rem;
|
||
|
|
}
|
||
|
|
.generalMiddle {
|
||
|
|
height: 49.5rem;
|
||
|
|
width: 101rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
height: 650px;
|
||
|
|
width: 345px;
|
||
|
|
}
|
||
|
|
.blackLinear {
|
||
|
|
height: 649px;
|
||
|
|
width: 343px;
|
||
|
|
}
|
||
|
|
.upperMidCarBox {
|
||
|
|
height: 19.5rem;
|
||
|
|
width: 41.4rem;
|
||
|
|
margin-left: 23.5rem;
|
||
|
|
margin-top: -40.5rem;
|
||
|
|
}
|
||
|
|
.bottomMidGunBox {
|
||
|
|
height: 19.5rem;
|
||
|
|
width: 41.4rem;
|
||
|
|
margin-left: 23.5rem;
|
||
|
|
margin-top: -19.6rem;
|
||
|
|
}
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
margin-left: 16rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxInfoArea {
|
||
|
|
margin-left: 17rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxDescription {
|
||
|
|
margin-left: 20rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton {
|
||
|
|
margin-left: 22rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunButtonBelowText {
|
||
|
|
margin-left: 22.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox {
|
||
|
|
width: 19.9rem;
|
||
|
|
height: 19.5rem;
|
||
|
|
margin-left: 66.5rem;
|
||
|
|
margin-top: -40.5rem;
|
||
|
|
}
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
width: 19.9rem;
|
||
|
|
height: 19.5rem;
|
||
|
|
margin-left: 66.5rem;
|
||
|
|
margin-top: 1.35rem;
|
||
|
|
}
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
margin-left: 5.2rem;
|
||
|
|
}
|
||
|
|
.otherBoxButton {
|
||
|
|
margin-left: 5.2rem;
|
||
|
|
}
|
||
|
|
.otherBoxDescription {
|
||
|
|
margin-left: 3rem;
|
||
|
|
}
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
margin-left: 5.2rem;
|
||
|
|
}
|
||
|
|
.moneyBoxButton {
|
||
|
|
margin-left: 5.2rem;
|
||
|
|
}
|
||
|
|
.moneyBoxDescription {
|
||
|
|
margin-left: 3rem;
|
||
|
|
}
|
||
|
|
.redeemInfoArea {
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 26.6rem;
|
||
|
|
}
|
||
|
|
.writeTheCode {
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 29rem;
|
||
|
|
}
|
||
|
|
.approveButton {
|
||
|
|
margin-left: 5rem;
|
||
|
|
margin-top: 33.6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSelectedCarDetailsArea {
|
||
|
|
height: 650px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 60rem;
|
||
|
|
height: 41rem;
|
||
|
|
top: -655px;
|
||
|
|
left: 430px;
|
||
|
|
}
|
||
|
|
.carListItem {
|
||
|
|
width: 280px;
|
||
|
|
height: 270px;
|
||
|
|
}
|
||
|
|
.leftGraphArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.leftItemCheckArea {
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
.leftCarNameArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.leftCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 70%;
|
||
|
|
margin-left: 4.3rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
height: 9rem;
|
||
|
|
}
|
||
|
|
.listItemCarNameArea {
|
||
|
|
font-size: 16px;
|
||
|
|
width: 15rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.listItemCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 9rem;
|
||
|
|
width: 12rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-left: 2.7rem;
|
||
|
|
}
|
||
|
|
.listItemCreditArea {
|
||
|
|
width: 9rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
font-size: 15px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
/* background-color: blue; */
|
||
|
|
width: 6.3rem;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 10rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItemList {
|
||
|
|
height: 41rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
.itemsMenuItem {
|
||
|
|
width: 317px;
|
||
|
|
height: 310px;
|
||
|
|
}
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 10.5rem;
|
||
|
|
width: 16.5rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 1.8rem;
|
||
|
|
}
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
width: 310px;
|
||
|
|
height: 315px;
|
||
|
|
}
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
left: 380px;
|
||
|
|
width: 620px;
|
||
|
|
height: 315px;
|
||
|
|
}
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
left: 1030px;
|
||
|
|
width: 385px;
|
||
|
|
height: 665px;
|
||
|
|
}
|
||
|
|
.thirdImageArea {
|
||
|
|
margin-top: 4.5rem;
|
||
|
|
top: 620px;
|
||
|
|
margin-left: 5rem;
|
||
|
|
}
|
||
|
|
.buyCreditFourBox {
|
||
|
|
top: 555px;
|
||
|
|
width: 970px;
|
||
|
|
height: 319px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.fourBoxImageArea {
|
||
|
|
margin-top: 3.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxImageArea {
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
.firstBoxImageArea {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
.firstBoxPrice {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxGetCredit {
|
||
|
|
margin-top: 12rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxExtraCredit {
|
||
|
|
margin-top: 13.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxPrice {
|
||
|
|
margin-top: 6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxGetCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 47.2rem;
|
||
|
|
margin-top: 11rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxExtraCredit {
|
||
|
|
margin-top: 12.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (width: 2560px) and (height: 1440px) {
|
||
|
|
.categorieSection {
|
||
|
|
width: 120rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
.redeemCodeTextArea {
|
||
|
|
font-size: 55px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxPrice {
|
||
|
|
margin-top: 8.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redeemCodeDescArea {
|
||
|
|
font-size: 17px;
|
||
|
|
margin-top: 6.300000000000001rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redeemInfoArea {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.writeTheCode {
|
||
|
|
width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charInfoSection {
|
||
|
|
margin-left: 125.5rem;
|
||
|
|
}
|
||
|
|
.generalMiddle {
|
||
|
|
height: 75.5rem;
|
||
|
|
width: 152.5rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
height: 1150px;
|
||
|
|
width: 550px;
|
||
|
|
}
|
||
|
|
.blackLinear {
|
||
|
|
height: 1149px;
|
||
|
|
width: 548px;
|
||
|
|
}
|
||
|
|
.upperMidCarBox {
|
||
|
|
height: 33.5rem;
|
||
|
|
width: 75.4rem;
|
||
|
|
margin-left: 38.5rem;
|
||
|
|
margin-top: -72rem;
|
||
|
|
}
|
||
|
|
.bottomMidGunBox {
|
||
|
|
height: 34.5rem;
|
||
|
|
width: 75.4rem;
|
||
|
|
margin-left: 38.5rem;
|
||
|
|
margin-top: -34.6rem;
|
||
|
|
}
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
margin-left: 41rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topRectangle {
|
||
|
|
width: 128.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxInfoArea {
|
||
|
|
margin-left: 42rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxDescription {
|
||
|
|
margin-left: 46rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton {
|
||
|
|
margin-left: 48rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunButtonBelowText {
|
||
|
|
margin-left: 48.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox {
|
||
|
|
width: 34.1rem;
|
||
|
|
height: 33.4rem;
|
||
|
|
margin-left: 118.5rem;
|
||
|
|
margin-top: -72rem;
|
||
|
|
}
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
width: 34.1rem;
|
||
|
|
height: 34rem;
|
||
|
|
margin-left: 118.5rem;
|
||
|
|
margin-top: 4.35rem;
|
||
|
|
}
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
margin-left: 13.2rem;
|
||
|
|
}
|
||
|
|
.otherBoxButton {
|
||
|
|
margin-left: 13.2rem;
|
||
|
|
}
|
||
|
|
.otherBoxDescription {
|
||
|
|
margin-left: 11rem;
|
||
|
|
}
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
margin-left: 13.2rem;
|
||
|
|
}
|
||
|
|
.moneyBoxButton {
|
||
|
|
margin-left: 13.2rem;
|
||
|
|
}
|
||
|
|
.moneyBoxDescription {
|
||
|
|
margin-left: 11rem;
|
||
|
|
}
|
||
|
|
.redeemInfoArea {
|
||
|
|
margin-left: 12rem;
|
||
|
|
margin-top: 49.6rem;
|
||
|
|
}
|
||
|
|
.writeTheCode {
|
||
|
|
margin-left: 10rem;
|
||
|
|
margin-top: 52rem;
|
||
|
|
}
|
||
|
|
.approveButton {
|
||
|
|
margin-left: 13.5rem;
|
||
|
|
margin-top: 56.6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSelectedCarDetailsArea {
|
||
|
|
height: 1187px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 128rem;
|
||
|
|
height: 74rem;
|
||
|
|
top: -1187px;
|
||
|
|
left: 430px;
|
||
|
|
}
|
||
|
|
.carListItem {
|
||
|
|
width: 364px;
|
||
|
|
height: 359px;
|
||
|
|
}
|
||
|
|
.leftGraphArea {
|
||
|
|
margin-top: 15rem;
|
||
|
|
}
|
||
|
|
.leftItemCheckArea {
|
||
|
|
margin-top: 9rem;
|
||
|
|
}
|
||
|
|
.leftCarNameArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.leftCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 70%;
|
||
|
|
margin-left: 4.3rem;
|
||
|
|
margin-top: 13rem;
|
||
|
|
height: 9rem;
|
||
|
|
}
|
||
|
|
.listItemCarNameArea {
|
||
|
|
font-size: 16px;
|
||
|
|
width: 15rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.listItemCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 13rem;
|
||
|
|
width: 18rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-left: 2.7rem;
|
||
|
|
}
|
||
|
|
.listItemCreditArea {
|
||
|
|
width: 9rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
font-size: 15px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
/* background-color: blue; */
|
||
|
|
width: 6.3rem;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 13rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItemList {
|
||
|
|
height: 73rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
.itemsMenuItem {
|
||
|
|
/* width: 375px; */
|
||
|
|
/* height: 354px; */
|
||
|
|
width: 441.5px;
|
||
|
|
height: 388px;
|
||
|
|
}
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 10.5rem;
|
||
|
|
width: 16.5rem;
|
||
|
|
margin-left: 6rem;
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
}
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 3.8rem;
|
||
|
|
}
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
width: 510px;
|
||
|
|
height: 465px;
|
||
|
|
}
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
left: 580px;
|
||
|
|
width: 1220px;
|
||
|
|
height: 465px;
|
||
|
|
}
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
left: 1830px;
|
||
|
|
width: 640px;
|
||
|
|
height: 1165px;
|
||
|
|
}
|
||
|
|
.thirdImageArea {
|
||
|
|
margin-top: 24.5rem;
|
||
|
|
top: 620px;
|
||
|
|
margin-left: 9rem;
|
||
|
|
}
|
||
|
|
.buyCreditFourBox {
|
||
|
|
top: 720px;
|
||
|
|
width: 1770px;
|
||
|
|
height: 655px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.fourBoxImageArea {
|
||
|
|
margin-top: 13.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxImageArea {
|
||
|
|
margin-top: 7rem;
|
||
|
|
}
|
||
|
|
.firstBoxImageArea {
|
||
|
|
margin-top: 4.5rem;
|
||
|
|
}
|
||
|
|
.firstBoxPrice {
|
||
|
|
margin-top: 5.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxGetCredit {
|
||
|
|
margin-top: 20rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxExtraCredit {
|
||
|
|
margin-top: 18.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxPrice {
|
||
|
|
margin-top: 15rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxGetCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 47.2rem;
|
||
|
|
margin-top: 23rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxExtraCredit {
|
||
|
|
margin-top: 24.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (width: 3840px) and (height: 2160px) {
|
||
|
|
.categorieSection {
|
||
|
|
width: 200rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
.charInfoSection {
|
||
|
|
margin-left: 184.5rem;
|
||
|
|
width: 48rem;
|
||
|
|
}
|
||
|
|
.generalMiddle {
|
||
|
|
height: 115.5rem;
|
||
|
|
width: 232.5rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftRedeemBox {
|
||
|
|
height: 1850px;
|
||
|
|
width: 850px;
|
||
|
|
}
|
||
|
|
.blackLinear {
|
||
|
|
height: 1849px;
|
||
|
|
width: 848px;
|
||
|
|
}
|
||
|
|
.upperMidCarBox {
|
||
|
|
height: 54.5rem;
|
||
|
|
width: 120.4rem;
|
||
|
|
margin-left: 58.5rem;
|
||
|
|
margin-top: -115.6rem;
|
||
|
|
}
|
||
|
|
.bottomMidGunBox {
|
||
|
|
height: 54.5rem;
|
||
|
|
width: 120.4rem;
|
||
|
|
margin-left: 58.5rem;
|
||
|
|
margin-top: -55.1rem;
|
||
|
|
}
|
||
|
|
.gunBoxTitleArea {
|
||
|
|
margin-left: 66rem;
|
||
|
|
margin-top: 8rem;
|
||
|
|
font-size: 65px;
|
||
|
|
width: 60rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topRectangle {
|
||
|
|
width: 213.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxInfoArea {
|
||
|
|
margin-left: 65rem;
|
||
|
|
font-size: 25px;
|
||
|
|
width: 50rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxDescription {
|
||
|
|
margin-left: 65rem;
|
||
|
|
margin-top: 13rem;
|
||
|
|
font-size: 30px;
|
||
|
|
width: 50rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunBoxButton {
|
||
|
|
margin-left: 83rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gunButtonBelowText {
|
||
|
|
margin-left: 71.95rem;
|
||
|
|
margin-top: 31rem;
|
||
|
|
font-size: 30px;
|
||
|
|
width: 30rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upperRightOtherBox {
|
||
|
|
width: 48.1rem;
|
||
|
|
height: 54.4rem;
|
||
|
|
margin-left: 184.5rem;
|
||
|
|
margin-top: -115.6rem;
|
||
|
|
}
|
||
|
|
.bottomRightMoneyBox {
|
||
|
|
width: 48.1rem;
|
||
|
|
height: 54rem;
|
||
|
|
margin-left: 184.5rem;
|
||
|
|
margin-top: 6.35rem;
|
||
|
|
}
|
||
|
|
.otherBoxInfoArea {
|
||
|
|
margin-left: -0.7999999999999972rem;
|
||
|
|
font-size: 25px;
|
||
|
|
width: 50rem;
|
||
|
|
}
|
||
|
|
.otherBoxButton {
|
||
|
|
margin-left: 17.2rem;
|
||
|
|
font-size: 40px;
|
||
|
|
height: 4rem;
|
||
|
|
margin-top: 6rem;
|
||
|
|
line-height: 4rem;
|
||
|
|
width: 14rem;
|
||
|
|
}
|
||
|
|
.otherBoxDescription {
|
||
|
|
margin-top: 11rem;
|
||
|
|
margin-left: 9rem;
|
||
|
|
font-size: 23px;
|
||
|
|
width: 30rem;
|
||
|
|
}
|
||
|
|
.moneyBoxInfoArea {
|
||
|
|
margin-left: 3.1999999999999993rem;
|
||
|
|
font-size: 25px;
|
||
|
|
width: 40rem;
|
||
|
|
}
|
||
|
|
.moneyBoxButton {
|
||
|
|
margin-left: 17.2rem;
|
||
|
|
font-size: 40px;
|
||
|
|
width: 14rem;
|
||
|
|
height: 4rem;
|
||
|
|
margin-top: 6rem;
|
||
|
|
line-height: 4rem;
|
||
|
|
}
|
||
|
|
.moneyBoxDescription {
|
||
|
|
margin-left: 9rem;
|
||
|
|
margin-top: 11rem;
|
||
|
|
font-size: 25px;
|
||
|
|
width: 30rem;
|
||
|
|
}
|
||
|
|
.redeemInfoArea {
|
||
|
|
margin-left: 12rem;
|
||
|
|
width: 29rem;
|
||
|
|
margin-top: 78.6rem;
|
||
|
|
font-size: 22px;
|
||
|
|
/* background: red; */
|
||
|
|
}
|
||
|
|
.writeTheCode {
|
||
|
|
margin-left: 18rem;
|
||
|
|
margin-top: 82rem;
|
||
|
|
width: 20rem;
|
||
|
|
height: 5rem;
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
.approveButton {
|
||
|
|
margin-left: 18rem;
|
||
|
|
margin-top: 88.6rem;
|
||
|
|
width: 20rem;
|
||
|
|
/* height: 7rem; */
|
||
|
|
font-size: 30px;
|
||
|
|
/* padding: 3rem; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSelectedCarDetailsArea {
|
||
|
|
height: 1908px;
|
||
|
|
width: 28rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCarListArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 206rem;
|
||
|
|
height: 119rem;
|
||
|
|
top: -1906px;
|
||
|
|
left: 473px;
|
||
|
|
}
|
||
|
|
.carListItem {
|
||
|
|
width: 614px;
|
||
|
|
height: 557px;
|
||
|
|
}
|
||
|
|
.leftGraphArea {
|
||
|
|
margin-top: 26rem;
|
||
|
|
}
|
||
|
|
.leftItemCheckArea {
|
||
|
|
margin-top: 34rem;
|
||
|
|
}
|
||
|
|
.leftCarNameArea {
|
||
|
|
margin-top: 1rem;
|
||
|
|
font-size: 35px;
|
||
|
|
}
|
||
|
|
.leftCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 70%;
|
||
|
|
margin-left: 4.3rem;
|
||
|
|
margin-top: 21rem;
|
||
|
|
height: 9rem;
|
||
|
|
}
|
||
|
|
.listItemCarNameArea {
|
||
|
|
font-size: 40px;
|
||
|
|
width: 15rem;
|
||
|
|
height: 2rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
.listItemCarImageArea {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 23rem;
|
||
|
|
width: 33rem;
|
||
|
|
margin-top: 3rem;
|
||
|
|
margin-left: 2.7rem;
|
||
|
|
}
|
||
|
|
.listItemCreditArea {
|
||
|
|
width: 9rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
font-size: 27px;
|
||
|
|
margin-left: 2rem;
|
||
|
|
}
|
||
|
|
.listItemMaxSpeedArea {
|
||
|
|
/* background-color: blue; */
|
||
|
|
width: 6.3rem;
|
||
|
|
font-size: 27px;
|
||
|
|
margin-left: 27rem;
|
||
|
|
}
|
||
|
|
.itemsMenuItemList {
|
||
|
|
height: 119rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
}
|
||
|
|
.itemsMenuItem {
|
||
|
|
width: 683px;
|
||
|
|
height: 598px;
|
||
|
|
}
|
||
|
|
.itemMenuItemImageAreas {
|
||
|
|
/* background-color: red; */
|
||
|
|
height: 26.5rem;
|
||
|
|
width: 38.5rem;
|
||
|
|
margin-left: 2rem;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|
||
|
|
.itemMenuItemCreditArea {
|
||
|
|
font-size: 36px;
|
||
|
|
margin-top: 1.8rem;
|
||
|
|
}
|
||
|
|
.buyCreditFirstBox {
|
||
|
|
width: 846px;
|
||
|
|
height: 787px;
|
||
|
|
}
|
||
|
|
.buyCreditSecondBox {
|
||
|
|
left: 902px;
|
||
|
|
width: 1533px;
|
||
|
|
height: 790px;
|
||
|
|
}
|
||
|
|
.buyCreditThirdBox {
|
||
|
|
left: 2475px;
|
||
|
|
width: 1276px;
|
||
|
|
height: 1849px;
|
||
|
|
}
|
||
|
|
.thirdImageArea {
|
||
|
|
margin-top: 55.5rem;
|
||
|
|
top: 639px;
|
||
|
|
margin-left: 16rem;
|
||
|
|
}
|
||
|
|
.buyCreditFourBox {
|
||
|
|
top: 1019px;
|
||
|
|
width: 2401px;
|
||
|
|
height: 1043px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.fourBoxImageArea {
|
||
|
|
margin-top: 24.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxImageArea {
|
||
|
|
margin-top: 19rem;
|
||
|
|
}
|
||
|
|
.firstBoxImageArea {
|
||
|
|
margin-top: 3.5rem;
|
||
|
|
margin-left: 5rem;
|
||
|
|
}
|
||
|
|
.firstBoxPrice {
|
||
|
|
margin-top: 15.5rem;
|
||
|
|
}
|
||
|
|
.secondBoxGetCredit {
|
||
|
|
margin-top: 34rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondBoxExtraCredit {
|
||
|
|
margin-top: 36.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxPrice {
|
||
|
|
margin-top: 27rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxGetCredit {
|
||
|
|
position: absolute;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 47.2rem;
|
||
|
|
margin-top: 37rem;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fourBoxExtraCredit {
|
||
|
|
margin-top: 39.5rem;
|
||
|
|
}
|
||
|
|
.leftItemCheckArea label {
|
||
|
|
margin-left: 1rem;
|
||
|
|
font-size: 17px;
|
||
|
|
margin-top: -1rem;
|
||
|
|
}
|
||
|
|
.itemMaxSpeedText {
|
||
|
|
font-size: 27px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemMenuItemNameArea {
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxInfoArea {
|
||
|
|
font-size: 20px;
|
||
|
|
width: 51rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxTitleArea {
|
||
|
|
font-size: 65px;
|
||
|
|
width: 65rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.carBoxDescription {
|
||
|
|
font-size: 35px;
|
||
|
|
width: 50rem;
|
||
|
|
margin-top: 11rem;
|
||
|
|
margin-left: 1rem;
|
||
|
|
}
|
||
|
|
.carBoxButton {
|
||
|
|
z-index: 987;
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 20rem;
|
||
|
|
margin-left: 12rem;
|
||
|
|
width: 310px;
|
||
|
|
height: 86px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 90px;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 40px;
|
||
|
|
border: 1.34286px solid #ba6ff5;
|
||
|
|
box-shadow: 0px 0px 13px #7197ff31;
|
||
|
|
border-radius: 6.71429px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.carButtonBelowText {
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 26.3rem;
|
||
|
|
margin-left: 11.95rem;
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
font-size: 20px;
|
||
|
|
color: #696969;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 20rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.gunBoxButton {
|
||
|
|
z-index: 987;
|
||
|
|
/* background-color: red; */
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 24rem;
|
||
|
|
margin-left: 78rem;
|
||
|
|
width: 311px;
|
||
|
|
height: 85px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 90px;
|
||
|
|
font-size: 40px;
|
||
|
|
color: #d1d1d1;
|
||
|
|
font-family: Inter;
|
||
|
|
border: 1px solid #7198ff;
|
||
|
|
box-shadow: 0px 0px 13px #7197ff61;
|
||
|
|
border-radius: 6.71429px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.categorieItem {
|
||
|
|
color: rgba(255, 255, 255, 0.51);
|
||
|
|
font-family: Acrom;
|
||
|
|
/* background-color: red; */
|
||
|
|
min-width: 246px;
|
||
|
|
font-size: 25px;
|
||
|
|
margin-top: 0.25rem;
|
||
|
|
height: 3.5rem;
|
||
|
|
line-height: 3.5rem;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
background: linear-gradient(0deg, rgba(61, 32, 32, 0.9), rgba(71, 43, 43, 0.6)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(61, 32, 32, 0.6)) border-box;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.categorieItemList {
|
||
|
|
/* background-color: rgba(255, 0, 0, 0.124); */
|
||
|
|
display: flex;
|
||
|
|
height: 5rem;
|
||
|
|
width: 180rem;
|
||
|
|
/* margin-bottom: 1rem; */
|
||
|
|
margin-left: 2rem;
|
||
|
|
overflow-x: auto;
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
.charNameSection {
|
||
|
|
display: flex;
|
||
|
|
/* background-color: red; */
|
||
|
|
width: 15.5rem;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
.charSurName {
|
||
|
|
line-height: 4.9rem;
|
||
|
|
margin-left: 0.25rem;
|
||
|
|
font-family: Zabal;
|
||
|
|
font-size: 34px;
|
||
|
|
color: rgba(255, 255, 255, 0.72);
|
||
|
|
}
|
||
|
|
.charName {
|
||
|
|
line-height: 5rem;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
font-family: Acrom;
|
||
|
|
font-size: 34px;
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
.profileCreditSection {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
display: flex;
|
||
|
|
line-height: 5rem;
|
||
|
|
color: #ffffff;
|
||
|
|
font-family: Inter;
|
||
|
|
font-size: 33px;
|
||
|
|
width: 14.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buyCreditButton {
|
||
|
|
cursor: pointer;
|
||
|
|
margin-left: 2rem;
|
||
|
|
background: #f8ca48;
|
||
|
|
border-radius: 3px;
|
||
|
|
height: 46px;
|
||
|
|
line-height: 46px;
|
||
|
|
width: 11rem;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 22px;
|
||
|
|
margin-top: 1rem;
|
||
|
|
color: rgba(0, 0, 0, 0.789);
|
||
|
|
font-family: Zabal Bold;
|
||
|
|
}
|
||
|
|
.mainMenuButton {
|
||
|
|
background: linear-gradient(0deg, rgba(56, 49, 31, 0.9), rgba(56, 56, 10, 0.12)) padding-box,
|
||
|
|
linear-gradient(to top, rgba(255, 239, 93, 0.494), rgba(56, 49, 31, 0.9)) border-box;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
height: 4rem;
|
||
|
|
width: 4rem;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|