304 lines
7.4 KiB
CSS
304 lines
7.4 KiB
CSS
.Orders1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.Orders1, .logo {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.Orders2 .bart, .Orders2 .Home {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.Orders2 .active.bart, .Orders2 .active.Home, .Orders2 .bart:hover, .Orders2 .Home:hover {
|
|
background-color: rgba(255, 240, 104, 0.9);
|
|
}
|
|
|
|
.Orders2 .bart, .Orders2 .Home, .Orders1 .touchstart, .Orders1 .language_sw {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fadeIn {
|
|
animation-name: fadeIn;
|
|
animation-duration: 500ms;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
html,
|
|
body,
|
|
.root {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 1080px;
|
|
height: 1920px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
color: #2F2F27;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 74px;
|
|
flex-shrink: 0;
|
|
background-size: 100% 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.banner {
|
|
position: absolute;
|
|
top: 74px;
|
|
left: 0;
|
|
width: 1080px;
|
|
height: 350px;
|
|
z-index: 1;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.Orders1 {
|
|
position: absolute;
|
|
}
|
|
.Orders1 .logo {
|
|
height: 85px;
|
|
}
|
|
.Orders1 .language_sw {
|
|
position: absolute;
|
|
top: 154px;
|
|
right: 46px;
|
|
width: 250px;
|
|
height: 72px;
|
|
border-radius: 72px;
|
|
}
|
|
.Orders1 .touchstart {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 305px;
|
|
font-family: Montserrat;
|
|
gap: 9px;
|
|
font-size: 72px;
|
|
letter-spacing: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.zh-tw .Orders1 .touchstart {
|
|
font-family: "Microsoft JhengHei UI";
|
|
font-weight: bold;
|
|
}
|
|
|
|
.Orders2 {
|
|
position: absolute;
|
|
top: 424px;
|
|
left: 0;
|
|
width: calc(100% - 80px);
|
|
height: 1420px;
|
|
background-color: #F6F6F6;
|
|
margin: 34px 40px 42px 40px;
|
|
}
|
|
|
|
.Orders2 {
|
|
background-color: transparent;
|
|
margin: 0 40px;
|
|
}
|
|
.Orders2 .bart, .Orders2 .Home {
|
|
position: absolute;
|
|
top: 36px;
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50px;
|
|
}
|
|
.Orders2 .Home {
|
|
left: 787px;
|
|
background-image: url("../images/orders/home.png");
|
|
}
|
|
.Orders2 .bart {
|
|
left: 930px;
|
|
background-image: url("../images/Orders/bart.png");
|
|
}
|
|
.Orders2 .bart .badge {
|
|
font-family: Montserrat;
|
|
position: absolute;
|
|
background-color: red;
|
|
top: -3px;
|
|
right: 0;
|
|
padding: 3px 9px;
|
|
border-radius: 10px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "inter-variablefont_slnt,wght";
|
|
src: url("../fonts/inter font/inter-variablefont_slnt_wght.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-black";
|
|
src: url("../fonts/inter font/static/inter-black.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-bold";
|
|
src: url("../fonts/inter font/static/inter-bold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-extrabold";
|
|
src: url("../fonts/inter font/static/inter-extrabold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-extralight";
|
|
src: url("../fonts/inter font/static/inter-extralight.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-light";
|
|
src: url("../fonts/inter font/static/inter-light.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-medium";
|
|
src: url("../fonts/inter font/static/inter-medium.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-regular";
|
|
src: url("../fonts/inter font/static/inter-regular.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-semibold";
|
|
src: url("../fonts/inter font/static/inter-semibold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "inter-thin";
|
|
src: url("../fonts/inter font/static/inter-thin.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-black";
|
|
src: url("../fonts/lato/lato-black.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-blackitalic";
|
|
src: url("../fonts/lato/lato-blackitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-bold";
|
|
src: url("../fonts/lato/lato-bold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-bolditalic";
|
|
src: url("../fonts/lato/lato-bolditalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-italic";
|
|
src: url("../fonts/lato/lato-italic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-light";
|
|
src: url("../fonts/lato/lato-light.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-lightitalic";
|
|
src: url("../fonts/lato/lato-lightitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-regular";
|
|
src: url("../fonts/lato/lato-regular.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-thin";
|
|
src: url("../fonts/lato/lato-thin.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "lato-thinitalic";
|
|
src: url("../fonts/lato/lato-thinitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-italic-variablefont_wght";
|
|
src: url("../fonts/montserrat/montserrat-italic-variablefont_wght.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-variablefont_wght";
|
|
src: url("../fonts/montserrat/montserrat-variablefont_wght.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-black";
|
|
src: url("../fonts/montserrat/static/montserrat-black.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-blackitalic";
|
|
src: url("../fonts/montserrat/static/montserrat-blackitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-bold";
|
|
src: url("../fonts/montserrat/static/montserrat-bold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: Montserrat;
|
|
src: url("../fonts/montserrat/static/montserrat-bold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-bolditalic";
|
|
src: url("../fonts/montserrat/static/montserrat-bolditalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-extrabold";
|
|
src: url("../fonts/montserrat/static/montserrat-extrabold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-extrabolditalic";
|
|
src: url("../fonts/montserrat/static/montserrat-extrabolditalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-extralight";
|
|
src: url("../fonts/montserrat/static/montserrat-extralight.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-extralightitalic";
|
|
src: url("../fonts/montserrat/static/montserrat-extralightitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-italic";
|
|
src: url("../fonts/montserrat/static/montserrat-italic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-light";
|
|
src: url("../fonts/montserrat/static/montserrat-light.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-lightitalic";
|
|
src: url("../fonts/montserrat/static/montserrat-lightitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-medium";
|
|
src: url("../fonts/montserrat/static/montserrat-medium.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-mediumitalic";
|
|
src: url("../fonts/montserrat/static/montserrat-mediumitalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-regular";
|
|
src: url("../fonts/montserrat/static/montserrat-regular.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-semibold";
|
|
src: url("../fonts/montserrat/static/montserrat-semibold.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-semibolditalic";
|
|
src: url("../fonts/montserrat/static/montserrat-semibolditalic.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-thin";
|
|
src: url("../fonts/montserrat/static/montserrat-thin.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "montserrat-thinitalic";
|
|
src: url("../fonts/montserrat/static/montserrat-thinitalic.ttf") format("truetype");
|
|
}
|