这里写自定义目录标题
汽车商务平台网页设计
网页效果展示
css
style.css
#page-preloader {
width: 100%;
background-color: #222;
}
* {
margin: 0;
padding: 0;
}
.box1 {
width: 1170px;
height: 50px;
line-height: 50px;
background-color: #222;
}
#page-preloader .box1 li {
padding-right: 20px;
font-size: 13px;
letter-spacing: 0.04em;
color: #fff;
list-style: none;
text-decoration: none;
float: left;
}
#list1 img {
margin-right: 20px;
}
.center {
margin-left: auto;
margin-right: auto;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.box1-1-2-1 {
width: 250px;
height: 180px;
background-color: rgba(0, 0, 0, 0.7);
float: left;
position: absolute;
bottom: -150px;
left: 690px;
display: none;
}
.box2:hover .box1-1-2-1 {
display: block;
z-index: 11;
}
.box1-1-3 {
text-align: center;
width: 90px;
height: 40px;
font-size: 16px;
color: #fff;
margin: 5px 15px;
}
.box2,
.box3 {
width: 100%;
padding: 5px 0;
}
.box2-1 {
width: 1170px;
height: 91px;
}
.box2 {
background-color: #FFFFFF;
}
.box2-2 {
margin-left: 15px;
margin-right: 100px;
padding: 15px 0;
}
.box2-3 li {
color: #222222;
list-style: none;
text-decoration: none;
float: left;
margin: 0 1px;
line-height: 31px;
font-size: 14px;
font-weight: 600;
}
.box2-3 li a {
background-color: #FFFFFF;
color: #222222;
list-style: none;
text-decoration: none;
float: left;
margin: 0 1px;
padding: 30px 15px;
line-height: 31px;
font-size: 14px;
font-weight: 600;
}
.box2-3 li a:hover {
background-color: #d01818;
color: #FFFFFF;
}
.box2-4-1 {
width: 112px;
height: 44px;
}
.box2-4-1 a {
text-decoration: none;
list-style: none;
background-color: #D01818;
color: #FFFFFF;
}
.box2-4 li {
list-style: none;
text-decoration: none;
float: left;
}
.playbox {
width: 100%;
height: 700px;
overflow: hidden;
}
ul {
list-style: none;
}
.relative {
position: relative;
}
.zhezhao1 {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 700px;
z-index: 4;
position: absolute;
top: 0;
left: 0;
}
.picbox {
z-index: 3;
position: absolute;
top: 0;
left: 0;
}
.pixapp {
width: 680px;
height: 700px;
position: absolute;
top: 180px;
right: 150px;
z-index: 5;
}
.picapp1 {
width: 117px;
height: 34px;
font-size: 13px;
font-weight: 500;
text-align: center;
line-height: 33px;
background-color: #D01818;
color: #fefdfd;
position: absolute;
top: 25px;
left: 0;
}
.picapp2 {
position: absolute;
top: 0;
left: 130px;
}
.picapp2 h2 {}
.starting {
border: 2px #FEFDFD solid;
color: #FEFDFD;
margin-right: 13px;
margin-bottom: 20px;
width: 193px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
top: 200px;
}
.starting:hover {
border: 2px #FF0000 solid;
color: #FF0000;
}
.book {
text-align: center;
background-color: #D01818;
color: #FEFDFD;
margin-right: 13px;
margin-bottom: 20px;
width: 120px;
height: 54px;
line-height: 50px;
position: absolute;
left: 210px;
top: 200px;
}
.book:hover {
background-color: #FF0000;
color: #FEFDFD;
}
.picapp2 p,
.picapp2 h2 {
color: #FFFFFF;
font-size: 50px;
}
.line {
border: 2px #FFFFFF solid;
position: absolute;
top: 290px;
width: 65px;
}
.line1 {
border: 2px #D01818 solid;
position: absolute;
bottom: 60px;
left: 50px;
width: 20px;
}
.box3 {
height: 730px;
position: relative;
z-index: 6;
}
.box3-1 {
width: 1140px;
height: 343px;
position: absolute;
top: -40px;
left: 380px;
z-index: 7;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
overflow: hidden;
}
.largest {
width: 380px;
height: 340px;
position: absolute;
top: 0;
background-color: #f4f4f4;
}
.largest:nth-of-type(1) {
left: 0;
}
.largest:nth-of-type(2) {
left: 380px;
}
.largest:nth-of-type(3) {
left: 760px;
}
.largest h3 {
margin: 0 50px;
color: #222222;
font-size: 14px;
margin-bottom: 15px;
}
.largest p {
margin: 0 50px;
color: #969696;
font-size: 14px;
}
.largest img {
width: 55px;
height: 55px;
margin: 60px 0px 30px 50px;
}
.box3-2 {
width: 1140px;
height: 350px;
position: absolute;
left: 380px;
bottom: 0;
}
.find {
text-align: center;
width: 100%;
height: auto;
}
.find h2,
.feature h2,
.about h2 {
margin-top: 0;
margin-bottom: 2px;
font-size: 48px;
font-weight: 320;
line-height: 1.08;
}
.find p,
.feature p,
.about p {
margin-bottom: 100px;
font-size: 16px;
line-height: 1.875;
color: #888;
}
.line3,
.line4,
.line7 {
border-bottom: 1px #D01818 solid;
width: 40px;
position: absolute;
}
.line7:nth-of-type(1) {
left: 27px;
top: 100px;
}
.line7:nth-of-type(2) {
left: 2px;
top: 108px;
}
.line7:nth-of-type(3) {
left: 52px;
top: 108px;
}
.line3:nth-of-type(1) {
left: 550px;
bottom: 250px;
}
.line3:nth-of-type(2) {
left: 525px;
bottom: 242px;
}
.line3:nth-of-type(3) {
left: 575px;
bottom: 242px;
}
.line4:nth-of-type(1) {
left: 931px;
bottom: 65px;
}
.line4:nth-of-type(2) {
left: 906px;
bottom: 58px;
}
.line4:nth-of-type(3) {
left: 956px;
bottom: 58px;
}
.box4 {
width: 100%;
background-color: #f4f4f4;
}
.input {
width: 1140px;
height: 140px;
padding: 70px 0;
}
select {
width: 260px;
height: 50px;
padding: 0 20px;
font-size: 14px;
line-height: 48px;
vertical-align: top;
text-transform: inherit;
color: #222;
border: 1px solid #eee;
border-radius: 0;
background-color: #fff;
margin: 0 30px 40px 0;
}
input {
background-color: #D01818;
color: #FFFFFF;
height: 50px;
font-weight: bold;
font-size: 14px;
line-height: 46px;
text-align: center;
width: 166px;
height: 50px;
margin-bottom: 20px;
list-style: none;
}
.search1 {
margin-top: 25px;
margin-left: 100px;
width: 170px;
height: 140px;
text-align: center;
}
.search1 a {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
transition: all .3s;
color: #222;
line-height: 1;
font-family: Poppins;
text-decoration: underline;
}
.input1 {
width: 290px;
height: 140px;
float: left;
}
.box5 {
height: 890px;
width: 100%;
background-color: #ffffff;
}
.feature {
width: 100%;
height: 170px;
text-align: center;
position: relative;
padding-top: 100px;
}
.msrp {
width: 100%;
height: 396px;
position: relative;
}
.msrpbox {
width: 357px;
height: 410px;
position: absolute;
top: 0;
overflow: hidden;
z-index: 2;
}
.msrpbox:hover .zhezhao6 {
z-index: 3;
}
.msrpbox:nth-of-type(1) .zhezhao6 {
transition: all 1s linear;
transform: rotate(90deg);
transform-origin: right top;
}
.msrpbox:nth-of-type(1):hover .zhezhao6 {
transform: rotate(0deg);
}
.msrpbox:nth-of-type(2) .zhezhao6 {
transform: scale(0);
transition: all 1s linear;
}
.msrpbox:nth-of-type(2):hover .zhezhao6 {
transform: scale(1);
}
.msrpbox:nth-of-type(3) .zhezhao6 {
transform: translate(96px, 0);
transition: all 1s linear;
}
.msrpbox:nth-of-type(3):hover .zhezhao6 {
transform: translate(0, 0);
}
.zhezhao6 {
width: 100%;
height: 218px;
color: #FFFFFF;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
z-index: -1;
}
.msrpbox img {
width: 357px;
height: 218px;
}
.msrpbox:nth-of-type(1) {
left: 0;
}
.msrpbox:nth-of-type(2) {
left: 386px;
}
.msrpbox:nth-of-type(3) {
left: 772px;
}
.msrpbox:nth-of-type(4) {
left: 1158px;
}
.msrpbox:nth-of-type(5) {
left: 1544px;
}
.price {
position: absolute;
right: 10px;
top: 170px;
background-color: #d01818;
padding: 0 15px;
font-family: Poppins;
font-weight: 600;
line-height: 38px;
color: white;
}
.mi {
width: 357px;
height: 48px;
margin-bottom: 34px;
}
.mi ul {
display: table;
width: 100%;
margin-top: 10px;
margin-bottom: 6px;
font: 500 12px Poppins;
color: #888;
border: 1px solid #eee;
}
.mi li {
display: table-cell;
line-height: 35px;
padding-top: 15px;
height: 35px;
text-align: center;
border-right: 1px solid #eee;
font: 500 13px Poppins;
color: #888;
}
.mi li:hover {
color: #D01818;
}
.line5 {
border: 2px #D01818 solid;
position: absolute;
bottom: 77px;
left: 0;
width: 8px;
}
.line9 {
border: 2px #D01818 solid;
position: absolute;
top: 12px;
left: 0;
width: 8px;
}
.lexus {
width: 356px;
height: auto;
}
.lexus h3 {
padding-left: 27px;
margin-bottom: 20px;
}
.lexus a {
color: #222;
text-decoration: none;
font-size: 16px;
line-height: 1;
font-weight: 600;
font-family: Poppins;
}
.lexus p {
font: 12px/1.7143 'Hind';
color: #444;
}
.box6 {
width: 100%;
height: 550px;
background: url(../img/content/bg/bg-1.jpg) repeat fixed center;
position: relative;
}
.zhezhao2 {
width: 100%;
height: 550px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 2;
}
.box6 .feature p,
.box6 .feature h2 {
color: #FFFFFF;
}
.box7 {
width: 100%;
height: 431px;
position: relative;
z-index: 4;
}
.balancing {
width: 263px;
height: 373px;
position: absolute;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
top: -283px;
color: #222222;
background-color: #F4F4F4;
z-index: 5;
text-align: center;
}
.balancing:hover {
background-color: #D01818;
color: #FFFFFF;
}
.balancing:nth-of-type(1) {
left: 380px;
}
.balancing:nth-of-type(2) {
left: 673px;
}
.balancing:nth-of-type(3) {
left: 966px;
}
.balancing:nth-of-type(4) {
left: 1259px;
}
.balancing img {
width: 65px;
height: 65px;
margin-top: 45px;
margin-bottom: 25px;
}
.h3x {
margin-top: 0;
margin-bottom: 27px;
font-size: 16px;
font-weight: 600;
}
strong {
margin-top: 5px;
font-size: 20px;
}
.p {
font: 12px/1.7143 'Hind';
color: #444;
margin-bottom: 7px;
padding: 0 30px;
}
.balancing:hover .p {
color: #FFFFFF;
}
.line6 {
border: 1px #D01818 solid;
position: absolute;
bottom: 55px;
left: 121px;
width: 18px;
}
.balancing:hover .line6 {
border: 1px #ffffff solid;
}
.box7-1 {
width: 100%;
height: 100%;
position: relative;
}
.stock {
height: 93px;
width: 267px;
position: absolute;
text-align: center;
bottom: 115px;
}
.stock:nth-of-type(1) {
left: 380px;
}
.stock:nth-of-type(2) {
left: 673px;
}
.stock:nth-of-type(3) {
left: 966px;
}
.stock:nth-of-type(4) {
left: 1259px;
}
.stock h3 {
color: #d01818;
}
.stock .p {
margin-bottom: 3px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #444;
}
.box8 {
width: 100%;
height: 891px;
position: relative;
background-image: url(../img/content/bg/bg-5.jpg);
background-size: cover;
z-index: 1;
}
#tit {
display: block;
font-size: 1.5em;
color: #FFFFFF;
}
.zhezhao3 {
position: absolute;
width: 100%;
height: 891px;
background-color: rgba(254, 254, 254, 0.7);
z-index: 2;
}
.container {
width: 1140px;
height: 510px;
position: relative;
}
.ford0 {
width: 458px;
height: 505px;
background-color: #ffffff;
}
.ford {
width: 458px;
height: 100px;
margin-bottom: 1px;
background-color: #ececec;
}
.ford:hover {
background-color: #D01818;
}
.ford:hover .lines {
color: #FFFFFF
}
.ford h4 {
margin-bottom: 4px;
font: 600 16px Poppins;
white-space: nowrap;
letter-spacing: .01em;
color: #222;
padding: 25px 30px 5px 0px;
}
.ford span {
padding: 1px 30px 25px 50px;
}
.ford span,
.ford span strong {
font-weight: 500;
white-space: nowrap;
color: #888;
font: 14px/1.7143 'Hind';
}
.ford span strong {
font-weight: 700;
}
.fordpic {
width: 682px;
height: 505px;
position: absolute;
overflow: hidden;
top: 0;
left: 459px;
}
.order {
text-align: center;
padding-top: 10px;
width: 40px;
height: 30px;
position: fixed;
left: 0;
top: 140px;
background-color: #FFFFFF;
border: #DDDDDD 1px solid;
z-index: 10;
}
.ford h4 .lines {
font-size: 1rem;
font-weight: bolder;
color: #D01818;
padding: 0 15px;
}
.box9 {
width: 100%;
height: 976px;
background-color: #FFFFFF;
}
.motorland {
width: 1140px;
height: 762px;
padding: 100px 15px;
position: relative;
}
.about {
height: 100%;
width: 600px;
text-align: left;
position: absolute;
}
.visited {
width: 585px;
height: 306px;
text-align: left;
padding: 81px 0;
margin: 60px 0;
}
.visited1 {
font: 600 18px/1.2 Poppins;
letter-spacing: .01em;
color: #222;
}
.visited2 {
margin-bottom: 20px;
font: 300 24px Poppins;
color: #444;
}
.visited .visited3 {
margin: 0 0 50px;
font: 14px/1.7143 'Hind';
color: #444;
}
.btn:hover {
box-shadow: 0 0 1px 0 #000;
text-shadow: 0 0 1px #000;
}
.btn {
overflow: hidden;
display: inline-block;
height: 44px;
margin-bottom: 0;
padding: 0 20px;
font: 600 12px/40px Poppins;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 2px solid transparent;
white-space: nowrap;
user-select: none;
text-transform: uppercase;
color: white;
transition: all .3s;
letter-spacing: .05em;
border-radius: 2px;
}
.visited a,
.buy a {
text-decoration: none;
}
.btn-dark {
background-color: #222;
}
.btn-red {
background-color: #D01818;
}
.aboutpic {
height: 100%;
left: 665px;
text-align: left;
position: absolute;
padding-top: 105px;
}
.aboutend {
height: 100%;
left: 1029px;
width: 339px;
position: absolute;
padding-top: 164px;
}
.aboutend1 {
margin-bottom: 34px;
padding-left: 77px;
width: 262px;
height: 138px;
}
.aboutend1:hover .aboutend3 {
color: #D01818;
}
.aboutend1:hover .aboutend4 {
background-color: #000000;
}
.aboutend2 {
margin-bottom: 14px;
font: 600 16px Poppins;
color: #222;
}
.aboutend3 {
font: 14px/1.7143 'Hind';
color: #444;
}
.aboutend4 {
display: inline-block;
width: 20px;
height: 3px;
background-color: #D01818;
}
.frame {
width: 60px;
padding-top: 164px;
left: 1029px;
height: 100%;
position: absolute;
}
.aboutendpic {
width: 58px;
height: 58px;
position: absolute;
left: 0px;
}
.aboutendpic img {
width: 58px;
height: 58px;
}
.aboutendpic:nth-of-type(1) {
top: 164px;
}
.aboutendpic:nth-of-type(2) {
top: 342px;
}
.aboutendpic:nth-of-type(3) {
top: 506px;
}
.tobuy {
width: 100%;
height: 464px;
position: relative;
}
.tobuy1 {
width: 950px;
height: 424px;
margin: 20px 0;
background: url(../img/content/bg/bg-4.jpg) no-repeat fixed;
position: absolute;
background-size: cover;
}
.tozhe,
.tozhe1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.tozhe-red {
background-color: rgba(255, 0, 0, 0.5);
}
.tozhe-black {
background-color: rgba(0, 0, 0, 0.5);
}
.tobuy2 {
position: absolute;
left: 950px;
width: 950px;
height: 464px;
background: url(../img/content/bg/bg-3.jpg) no-repeat fixed;
background-size: cover;
}
.buy {
margin: 100px 0 0 380px;
position: relative;
font: 14px/1.7143 'Hind';
width: 423px;
height: 234px;
}
.tozhe-black .buy {
margin: 100px 0 0 200px;
}
.buy1 {
margin-top: 5px;
margin-bottom: 20px;
font-size: 18px;
letter-spacing: .03em;
color: #fff;
line-height: 1.1;
font-weight: 600;
font-family: Poppins;
}
.buy2 {
margin-top: 10px;
font-size: 36px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .03em;
color: #fff;
}
.btn-white {
margin-top: 34px;
padding: 0 40px;
border-color: #fff;
background-color: transparent;
}
.buy3 {
color: #fff;
}
.team {
width: 100%;
height: 986px;
}
.teambox {
width: 1140px;
height: 100%;
}
.eteam1 {
width: 1140px;
height: 522px;
}
.teambox .msrp {
width: 100%;
height: 396px;
position: relative;
}
.teambox .msrpbox {
width: 360px;
height: 552px;
position: absolute;
top: 0;
overflow: hidden;
}
.teambox .msrpbox img {
width: 360px;
height: 280px;
}
.teambox .msrpbox:nth-of-type(1) {
left: 0;
}
.teambox .msrpbox:nth-of-type(2) {
left: 386px;
}
.teambox .msrpbox:nth-of-type(3) {
left: 772px;
}
.teambox .price {
position: absolute;
right: 20px;
top: 220px;
background-color: #d01818;
padding: 0 15px;
font-family: Poppins;
font-weight: 600;
line-height: 38px;
color: white;
}
.teambox .msrpbox .mi {
width: 356px;
height: 40px;
margin-bottom: 34px;
}
.teambox .msrpbox .mi ul {
display: table;
width: 100%;
margin-top: 10px;
margin-bottom: 6px;
font: 14px/1.7143 'Hind';
color: #444;
border: 1px solid #eee;
}
.teambox .msrpbox .mi li {
display: table-cell;
padding: 0;
line-height: 40px;
height: 40px;
text-align: center;
border-right: 1px solid #eee;
font: 600 12px/40px Poppins;
color: #888;
}
.lexus1 {
width: 100%;
text-align: center;
}
.name {
margin-top: 47px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #222;
margin-bottom: 6px;
line-height: 1.1;
}
.euis {
margin-top: 20px;
margin-bottom: 14px;
padding-bottom: 22px;
}
body {
font: 14px/1.7143 'Hind';
color: #444;
}
.photo {
width: 100%;
height: 260px;
background-color: #f4f4f4;
}
.choose {
width: 100%;
height: 708px;
}
.all {
width: 1140px;
padding: 0 15px;
position: relative;
}
.all li {
float: left;
padding-right: 0;
padding-left: 0;
text-align: -webkit-match-parent;
border: #FFFFFF 2px solid;
}
.all li a {
text-decoration: none;
color: #2f2f2f;
border-color: #444;
position: relative;
padding: 0 24px;
font: 500 14px/36px Poppins;
color: #888;
border: 2px solid transparent;
border-radius: 2px;
}
.all li:hover {
border: #444444 2px solid;
}
.all li:hover .all li a {
color: #000000;
}
.all ul {
margin-top: 37px;
margin-bottom: 36px;
margin-left: 0;
padding-left: 200px;
text-align: center;
}
.choose1 {
width: 100%;
height: 600px;
}
.choose1 li {
float: left;
height: 296px;
}
.choose1 li img {
width: 380px;
}
.topmake {
width: 100%;
height: 744px;
overflow: hidden;
}
.alfa {
width: 199px;
height: auto;
float: left;
}
.romeo {
width: 585px;
height: 306px;
text-align: left;
padding: 81px 0;
margin: 60px 0;
}
a {
text-decoration: none;
}
.remeo li a {
display: block;
padding-bottom: 12px;
font-weight: 600;
color: #444;
text-decoration: none;
}
.remeo li a:hover {
color: #D01818;
}
.remeo ul {
margin-bottom: 40px;
}
.rental {
width: 316px;
height: 450px;
padding: 44px 30px 30px 44px;
position: absolute;
background-color: #15191a;
color: #FFFFFF;
left: 740px;
top: 100px;
}
.checkbox0 {
position: absolute;
left: 44px;
top: 182px;
}
.checkbox {
position: absolute;
}
.checkbox:nth-of-type(1) {
top: 0px;
}
.checkbox:nth-of-type(2) {
top: 29px;
}
.checkbox:nth-of-type(3) {
top: 58px;
}
.checkbox:nth-of-type(4) {
top: 87px;
}
.checkbox:nth-of-type(5) {
top: 116px;
}
.rental1 {
font: 18px/1 Poppins;
}
.rental2 {
color: #d01818;
margin-bottom: 13px;
font: 600 36px/1 Poppins;
letter-spacing: .025em;
}
.rental3 {
margin-bottom: 17px;
font-size: 16px;
font-weight: 500;
}
.rental ul {
margin-bottom: 40px;
padding-left: 0;
list-style-type: none;
}
.rental ul li {
position: relative;
margin-bottom: 5px;
padding-left: 30px;
display: list-item;
text-align: -webkit-match-parent;
}
.will {
width: 100%;
height: 344px;
background: url(../img/content/bg/bg-6.jpg) repeat fixed;
background-size: cover;
position: relative;
}
.will1 {
width: 100%;
height: 185px;
position: relative;
}
.will-1 {
width: 480px;
height: 263px;
padding-left: 60px;
margin: 30px 15px;
position: absolute;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
top: -195px;
background-color: #f4f4f4;
}
.will-1:nth-of-type(1) {
left: 381px;
}
.will-1:nth-of-type(2) {
left: 961px;
}
.will-2 {
width: 80px;
height: 80px;
position: absolute;
left: 60px;
top: -35px;
}
.will-3 {
width: 60px;
height: 50px;
position: absolute;
right: 40px;
top: 40px;
}
.will-4 {
width: 400px;
height: 130px;
position: absolute;
left: 60px;
top: 80px;
}
.span {
display: block;
font: 600 16px Poppins;
letter-spacing: .02em;
color: #222;
}
.shop {
width: 100%;
height: 1167px;
}
.gauge {
width: 1140px;
height: auto;
}
.gauge1 {
float: left;
}
.latest {
width: 100%;
height: 1048px;
background: url(../img/content/bg/bg-7.jpg) no-repeat fixed;
background-size: cover;
position: relative;
}
.zhezhao4 {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
left: 0;
top: 0;
}
.post {
width: 360px;
height: 631px;
position: absolute;
margin-right: 20px;
background-color: #FFFFFF;
}
.post0 {
width: 100%;
position: relative;
}
.post:nth-of-type(1) {
left: 380px;
}
.post:nth-of-type(2) {
left: 780px;
}
.post:nth-of-type(3) {
left: 1180px;
}
.postpic,
.postpic img {
width: 360px;
height: 250px;
}
.postpic {
position: absolute;
top: 0;
left: 0;
}
.postpic1 {
position: absolute;
border: 38px;
overflow: hidden;
top: 200px;
left: 30px;
border-radius: 38px 38px;
}
.post1 {
left: 30px;
top: 350px;
width: 300px;
position: absolute;
overflow: hidden;
}
.w300 {
width: 300px;
}
.last {
width: 100%;
height: 143px;
padding: 104px 0;
}
.auto {
width: 238px;
height: 115px;
padding: 10px;
margin: 0 25px;
float: left;
text-align: center;
position: relative;
}
.zhezhao5 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
}
.zhezhao5:hover {
background-color: rgba(255, 255, 255, 0.0);
}
.end {
width: 100%;
height: 547px;
background: url(../img/content/bg/bg-1.jpg) no-repeat;
background-size: cover;
position: relative;
}
.end-1 {
width: 263px;
height: 100%;
position: absolute;
left: 300px;
top: 110px;
}
.end-1 img {
margin: 40px 0;
}
.end-1 p:hover {
color: #D01818;
}
.end-1 p {
color: #868686;
}
.end-2 {
width: 310px;
height: 100%;
position: absolute;
left: 650px;
top: 180px;
}
.end-2-1 {
color: #868686;
position: absolute;
top: 60px;
}
.end-2-1 li:hover {
color: #D01818;
}
.end-2-1 li {
margin-bottom: 10px;
}
.end-2-1:nth-of-type(1) {
left: 0;
}
.end-2-1:nth-of-type(2) {
left: 150px;
}
.end-2-1 span {
color: #ffffff;
margin-right: 7px;
}
.end-tit {
width: 320px;
position: absolute;
top: 0;
left: 0;
}
.end-tit span {
color: #D01818;
font-weight: bolder;
margin-right: 30px;
}
.end-tit h2,
.end-tit h4 {
font-size: 1em;
margin-left: 0px;
color: #FFFFFF;
}
.end-tit h4 {
margin-left: 60px;
}
.sell {
width: 300px;
height: 70px;
padding-top: 20px;
margin-left: 900px;
}
.end-3 {
width: 263px;
height: 100%;
position: absolute;
left: 1000px;
top: 180px;
}
.sell img {
margin: 15px 15px 0 10px;
}
.end-4 {
width: 320px;
height: 100%;
position: absolute;
left: 1225px;
top: 180px;
}
.black1 {
background-color: rgba(0, 0, 0, 0.8);
}
.end-4 li {
color: #FFFFFF;
}
.end-4 li img {
width: 25px;
height: 25px;
}
.w1903{
width: 1903px;
height: auto;
}
style-artice.css
#page-preloader {
width: 100%;
background-color: #222;
}
* {
margin: 0;
padding: 0;
}
.box1 {
width: 1170px;
height: 50px;
line-height: 50px;
background-color: #222;
}
#page-preloader .box1 li {
padding-right: 20px;
font-size: 13px;
letter-spacing: 0.04em;
color: #fff;
list-style: none;
text-decoration: none;
float: left;
}
#list1 img {
margin-right: 20px;
}
.center {
margin-left: auto;
margin-right: auto;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.box1-1-2-1 {
width: 250px;
height: 180px;
background-color: rgba(0, 0, 0, 0.7);
float: left;
position: absolute;
bottom: -150px;
left: 690px;
display: none;
}
.box2:hover .box1-1-2-1 {
display: block;
z-index: 11;
}
.box1-1-3 {
text-align: center;
width: 90px;
height: 40px;
font-size: 16px;
color: #fff;
margin: 5px 15px;
}
.box2,
.box3 {
width: 100%;
padding: 5px 0;
}
.box2-1 {
width: 1170px;
height: 91px;
}
.box2 {
background-color: #FFFFFF;
}
.box2-2 {
margin-left: 15px;
margin-right: 100px;
padding: 15px 0;
}
.box2-3 li {
color: #222222;
list-style: none;
text-decoration: none;
float: left;
margin: 0 1px;
line-height: 31px;
font-size: 14px;
font-weight: 600;
}
.box2-3 li a {
background-color: #FFFFFF;
color: #222222;
list-style: none;
text-decoration: none;
float: left;
margin: 0 1px;
padding: 30px 15px;
line-height: 31px;
font-size: 14px;
font-weight: 600;
}
.box2-3 li a:hover {
background-color: #d01818;
color: #FFFFFF;
}
.box2-4-1 {
width: 112px;
height: 44px;
}
.box2-4-1 a {
text-decoration: none;
list-style: none;
background-color: #D01818;
color: #FFFFFF;
}
.box2-4 li {
list-style: none;
text-decoration: none;
float: left;
}
.playbox {
width: 100%;
height: 700px;
overflow: hidden;
}
ul {
list-style: none;
}
.relative {
position: relative;
}
.zhezhao1 {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 700px;
z-index: 4;
position: absolute;
top: 0;
left: 0;
}
.picbox {
z-index: 3;
position: absolute;
top: 0;
left: 0;
}
.pixapp {
width: 680px;
height: 700px;
position: absolute;
top: 180px;
right: 150px;
z-index: 5;
}
.picapp1 {
width: 117px;
height: 34px;
font-size: 13px;
font-weight: 500;
text-align: center;
line-height: 33px;
background-color: #D01818;
color: #fefdfd;
position: absolute;
top: 25px;
left: 0;
}
.picapp2 {
position: absolute;
top: 0;
left: 130px;
}
.picapp2 h2 {}
.starting {
border: 2px #FEFDFD solid;
color: #FEFDFD;
margin-right: 13px;
margin-bottom: 20px;
width: 193px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
top: 200px;
}
.starting:hover {
border: 2px #FF0000 solid;
color: #FF0000;
}
.book {
text-align: center;
background-color: #D01818;
color: #FEFDFD;
margin-right: 13px;
margin-bottom: 20px;
width: 120px;
height: 54px;
line-height: 50px;
position: absolute;
left: 210px;
top: 200px;
}
.book:hover {
background-color: #FF0000;
color: #FEFDFD;
}
.picapp2 p,
.picapp2 h2 {
color: #FFFFFF;
font-size: 50px;
}
.line {
border: 2px #FFFFFF solid;
position: absolute;
top: 290px;
width: 65px;
}
.line1 {
border: 2px #D01818 solid;
position: absolute;
bottom: 60px;
left: 50px;
width: 20px;
}
.box3 {
height: 730px;
position: relative;
z-index: 6;
}
.box3-1 {
width: 1140px;
height: 343px;
position: absolute;
top: -40px;
left: 380px;
z-index: 7;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
overflow: hidden;
}
.largest {
width: 380px;
height: 340px;
position: absolute;
top: 0;
background-color: #f4f4f4;
}
.largest:nth-of-type(1) {
left: 0;
}
.largest:nth-of-type(2) {
left: 380px;
}
.largest:nth-of-type(3) {
left: 760px;
}
.largest h3 {
margin: 0 50px;
color: #222222;
font-size: 14px;
margin-bottom: 15px;
}
.largest p {
margin: 0 50px;
color: #969696;
font-size: 14px;
}
.largest img {
width: 55px;
height: 55px;
margin: 60px 0px 30px 50px;
}
.box3-2 {
width: 1140px;
height: 350px;
position: absolute;
left: 380px;
bottom: 0;
}
.find {
text-align: center;
width: 100%;
height: auto;
}
.find h2,
.feature h2,
.about h2 {
margin-top: 0;
margin-bottom: 2px;
font-size: 48px;
font-weight: 320;
line-height: 1.08;
}
.find p,
.feature p,
.about p {
margin-bottom: 100px;
font-size: 16px;
line-height: 1.875;
color: #888;
}
.line3,
.line4,
.line7 {
border-bottom: 1px #D01818 solid;
width: 40px;
position: absolute;
}
.line7:nth-of-type(1) {
left: 27px;
top: 100px;
}
.line7:nth-of-type(2) {
left: 2px;
top: 108px;
}
.line7:nth-of-type(3) {
left: 52px;
top: 108px;
}
.line3:nth-of-type(1) {
left: 550px;
bottom: 250px;
}
.line3:nth-of-type(2) {
left: 525px;
bottom: 242px;
}
.line3:nth-of-type(3) {
left: 575px;
bottom: 242px;
}
.line4:nth-of-type(1) {
left: 931px;
bottom: 65px;
}
.line4:nth-of-type(2) {
left: 906px;
bottom: 58px;
}
.line4:nth-of-type(3) {
left: 956px;
bottom: 58px;
}
.box4 {
width: 100%;
background-color: #f4f4f4;
}
.input {
width: 1140px;
height: 140px;
padding: 70px 0;
}
select {
width: 260px;
height: 50px;
padding: 0 20px;
font-size: 14px;
line-height: 48px;
vertical-align: top;
text-transform: inherit;
color: #222;
border: 1px solid #eee;
border-radius: 0;
background-color: #fff;
margin: 0 30px 40px 0;
}
input {
background-color: #D01818;
color: #FFFFFF;
height: 50px;
font-weight: bold;
font-size: 14px;
line-height: 46px;
text-align: center;
width: 166px;
height: 50px;
margin-bottom: 20px;
list-style: none;
}
.search1 {
margin-top: 25px;
margin-left: 100px;
width: 170px;
height: 140px;
text-align: center;
}
.search1 a {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
transition: all .3s;
color: #222;
line-height: 1;
font-family: Poppins;
text-decoration: underline;
}
.input1 {
width: 290px;
height: 140px;
float: left;
}
.box5 {
height: 890px;
width: 100%;
background-color: #ffffff;
}
.feature {
width: 100%;
height: 170px;
text-align: center;
position: relative;
padding-top: 100px;
}
.msrp {
width: 100%;
height: 396px;
position: relative;
}
.msrpbox {
width: 357px;
height: 410px;
position: absolute;
top: 0;
overflow: hidden;
z-index: 2;
}
.msrpbox:hover .zhezhao6 {
z-index: 3;
}
.msrpbox:nth-of-type(1) .zhezhao6 {
transition: all 1s linear;
transform: rotate(90deg);
transform-origin: right top;
}
.msrpbox:nth-of-type(1):hover .zhezhao6 {
transform: rotate(0deg);
}
.msrpbox:nth-of-type(2) .zhezhao6 {
transform: scale(0);
transition: all 1s linear;
}
.msrpbox:nth-of-type(2):hover .zhezhao6 {
transform: scale(1);
}
.msrpbox:nth-of-type(3) .zhezhao6 {
transform: translate(96px, 0);
transition: all 1s linear;
}
.msrpbox:nth-of-type(3):hover .zhezhao6 {
transform: translate(0, 0);
}
.zhezhao6 {
width: 100%;
height: 218px;
color: #FFFFFF;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
z-index: -1;
}
.msrpbox img {
width: 357px;
height: 218px;
}
.msrpbox:nth-of-type(1) {
left: 0;
}
.msrpbox:nth-of-type(2) {
left: 386px;
}
.msrpbox:nth-of-type(3) {
left: 772px;
}
.msrpbox:nth-of-type(4) {
left: 1158px;
}
.msrpbox:nth-of-type(5) {
left: 1544px;
}
.price {
position: absolute;
right: 10px;
top: 170px;
background-color: #d01818;
padding: 0 15px;
font-family: Poppins;
font-weight: 600;
line-height: 38px;
color: white;
}
.mi {
width: 357px;
height: 48px;
margin-bottom: 34px;
}
.mi ul {
display: table;
width: 100%;
margin-top: 10px;
margin-bottom: 6px;
font: 500 12px Poppins;
color: #888;
border: 1px solid #eee;
}
.mi li {
display: table-cell;
line-height: 35px;
padding-top: 15px;
height: 35px;
text-align: center;
border-right: 1px solid #eee;
font: 500 13px Poppins;
color: #888;
}
.mi li:hover {
color: #D01818;
}
.line5 {
border: 2px #D01818 solid;
position: absolute;
bottom: 77px;
left: 0;
width: 8px;
}
.line9 {
border: 2px #D01818 solid;
position: absolute;
top: 12px;
left: 0;
width: 8px;
}
.lexus {
width: 356px;
height: auto;
}
.lexus h3 {
padding-left: 27px;
margin-bottom: 20px;
}
.lexus a {
color: #222;
text-decoration: none;
font-size: 16px;
line-height: 1;
font-weight: 600;
font-family: Poppins;
}
.lexus p {
font: 12px/1.7143 'Hind';
color: #444;
}
.box6 {
width: 100%;
height: 550px;
background: url(../img/content/bg/bg-1.jpg) repeat fixed center;
position: relative;
}
.zhezhao2 {
width: 100%;
height: 550px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 2;
}
.box6 .feature p,
.box6 .feature h2 {
color: #FFFFFF;
}
.box7 {
width: 100%;
height: 431px;
position: relative;
z-index: 4;
}
.balancing {
width: 263px;
height: 373px;
position: absolute;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
top: -283px;
color: #222222;
background-color: #F4F4F4;
z-index: 5;
text-align: center;
}
.balancing:hover {
background-color: #D01818;
color: #FFFFFF;
}
.balancing:nth-of-type(1) {
left: 380px;
}
.balancing:nth-of-type(2) {
left: 673px;
}
.balancing:nth-of-type(3) {
left: 966px;
}
.balancing:nth-of-type(4) {
left: 1259px;
}
.balancing img {
width: 65px;
height: 65px;
margin-top: 45px;
margin-bottom: 25px;
}
.h3x {
margin-top: 0;
margin-bottom: 27px;
font-size: 16px;
font-weight: 600;
}
strong {
margin-top: 5px;
font-size: 20px;
}
.p {
font: 12px/1.7143 'Hind';
color: #444;
margin-bottom: 7px;
padding: 0 30px;
}
.balancing:hover .p {
color: #FFFFFF;
}
.line6 {
border: 1px #D01818 solid;
position: absolute;
bottom: 55px;
left: 121px;
width: 18px;
}
.balancing:hover .line6 {
border: 1px #ffffff solid;
}
.box7-1 {
width: 100%;
height: 100%;
position: relative;
}
.stock {
height: 93px;
width: 267px;
position: absolute;
text-align: center;
bottom: 115px;
}
.stock:nth-of-type(1) {
left: 380px;
}
.stock:nth-of-type(2) {
left: 673px;
}
.stock:nth-of-type(3) {
left: 966px;
}
.stock:nth-of-type(4) {
left: 1259px;
}
.stock h3 {
color: #d01818;
}
.stock .p {
margin-bottom: 3px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #444;
}
.box8 {
width: 100%;
height: 891px;
position: relative;
background-image: url(../img/content/bg/bg-5.jpg);
background-size: cover;
z-index: 1;
}
#tit {
display: block;
font-size: 1.5em;
color: #FFFFFF;
}
.zhezhao3 {
position: absolute;
width: 100%;
height: 891px;
background-color: rgba(254, 254, 254, 0.7);
z-index: 2;
}
.container {
width: 1140px;
height: 510px;
position: relative;
}
.ford0 {
width: 458px;
height: 505px;
background-color: #ffffff;
}
.ford {
width: 458px;
height: 100px;
margin-bottom: 1px;
background-color: #ececec;
}
.ford:hover {
background-color: #D01818;
}
.ford:hover .lines {
color: #FFFFFF
}
.ford h4 {
margin-bottom: 4px;
font: 600 16px Poppins;
white-space: nowrap;
letter-spacing: .01em;
color: #222;
padding: 25px 30px 5px 0px;
}
.ford span {
padding: 1px 30px 25px 50px;
}
.ford span,
.ford span strong {
font-weight: 500;
white-space: nowrap;
color: #888;
font: 14px/1.7143 'Hind';
}
.ford span strong {
font-weight: 700;
}
.fordpic {
width: 682px;
height: 505px;
position: absolute;
overflow: hidden;
top: 0;
left: 459px;
}
.order {
text-align: center;
padding-top: 10px;
width: 40px;
height: 30px;
position: fixed;
left: 0;
top: 140px;
background-color: #FFFFFF;
border: #DDDDDD 1px solid;
z-index: 10;
}
.ford h4 .lines {
font-size: 1rem;
font-weight: bolder;
color: #D01818;
padding: 0 15px;
}
.box9 {
width: 100%;
height: 976px;
background-color: #FFFFFF;
}
.motorland {
width: 1140px;
height: 762px;
padding: 100px 15px;
position: relative;
}
.about {
height: 100%;
width: 600px;
text-align: left;
position: absolute;
}
.visited {
width: 585px;
height: 306px;
text-align: left;
padding: 81px 0;
margin: 60px 0;
}
.visited1 {
font: 600 18px/1.2 Poppins;
letter-spacing: .01em;
color: #222;
}
.visited2 {
margin-bottom: 20px;
font: 300 24px Poppins;
color: #444;
}
.visited .visited3 {
margin: 0 0 50px;
font: 14px/1.7143 'Hind';
color: #444;
}
.btn:hover {
box-shadow: 0 0 1px 0 #000;
text-shadow: 0 0 1px #000;
}
.btn {
overflow: hidden;
display: inline-block;
height: 44px;
margin-bottom: 0;
padding: 0 20px;
font: 600 12px/40px Poppins;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 2px solid transparent;
white-space: nowrap;
user-select: none;
text-transform: uppercase;
color: white;
transition: all .3s;
letter-spacing: .05em;
border-radius: 2px;
}
.visited a,
.buy a {
text-decoration: none;
}
.btn-dark {
background-color: #222;
}
.btn-red {
background-color: #D01818;
}
.aboutpic {
height: 100%;
left: 665px;
text-align: left;
position: absolute;
padding-top: 105px;
}
.aboutend {
height: 100%;
left: 1029px;
width: 339px;
position: absolute;
padding-top: 164px;
}
.aboutend1 {
margin-bottom: 34px;
padding-left: 77px;
width: 262px;
height: 138px;
}
.aboutend1:hover .aboutend3 {
color: #D01818;
}
.aboutend1:hover .aboutend4 {
background-color: #000000;
}
.aboutend2 {
margin-bottom: 14px;
font: 600 16px Poppins;
color: #222;
}
.aboutend3 {
font: 14px/1.7143 'Hind';
color: #444;
}
.aboutend4 {
display: inline-block;
width: 20px;
height: 3px;
background-color: #D01818;
}
.frame {
width: 60px;
padding-top: 164px;
left: 1029px;
height: 100%;
position: absolute;
}
.aboutendpic {
width: 58px;
height: 58px;
position: absolute;
left: 0px;
}
.aboutendpic img {
width: 58px;
height: 58px;
}
.aboutendpic:nth-of-type(1) {
top: 164px;
}
.aboutendpic:nth-of-type(2) {
top: 342px;
}
.aboutendpic:nth-of-type(3) {
top: 506px;
}
.tobuy {
width: 100%;
height: 464px;
position: relative;
}
.tobuy1 {
width: 950px;
height: 424px;
margin: 20px 0;
background: url(../img/content/bg/bg-4.jpg) no-repeat fixed;
position: absolute;
background-size: cover;
}
.tozhe,
.tozhe1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.tozhe-red {
background-color: rgba(255, 0, 0, 0.5);
}
.tozhe-black {
background-color: rgba(0, 0, 0, 0.5);
}
.tobuy2 {
position: absolute;
left: 950px;
width: 950px;
height: 464px;
background: url(../img/content/bg/bg-3.jpg) no-repeat fixed;
background-size: cover;
}
.buy {
margin: 100px 0 0 380px;
position: relative;
font: 14px/1.7143 'Hind';
width: 423px;
height: 234px;
}
.tozhe-black .buy {
margin: 100px 0 0 200px;
}
.buy1 {
margin-top: 5px;
margin-bottom: 20px;
font-size: 18px;
letter-spacing: .03em;
color: #fff;
line-height: 1.1;
font-weight: 600;
font-family: Poppins;
}
.buy2 {
margin-top: 10px;
font-size: 36px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .03em;
color: #fff;
}
.btn-white {
margin-top: 34px;
padding: 0 40px;
border-color: #fff;
background-color: transparent;
}
.buy3 {
color: #fff;
}
.team {
width: 100%;
height: 986px;
}
.teambox {
width: 1140px;
height: 100%;
}
.eteam1 {
width: 1140px;
height: 522px;
}
.teambox .msrp {
width: 100%;
height: 396px;
position: relative;
}
.teambox .msrpbox {
width: 360px;
height: 552px;
position: absolute;
top: 0;
overflow: hidden;
}
.teambox .msrpbox img {
width: 360px;
height: 280px;
}
.teambox .msrpbox:nth-of-type(1) {
left: 0;
}
.teambox .msrpbox:nth-of-type(2) {
left: 386px;
}
.teambox .msrpbox:nth-of-type(3) {
left: 772px;
}
.teambox .price {
position: absolute;
right: 20px;
top: 220px;
background-color: #d01818;
padding: 0 15px;
font-family: Poppins;
font-weight: 600;
line-height: 38px;
color: white;
}
.teambox .msrpbox .mi {
width: 356px;
height: 40px;
margin-bottom: 34px;
}
.teambox .msrpbox .mi ul {
display: table;
width: 100%;
margin-top: 10px;
margin-bottom: 6px;
font: 14px/1.7143 'Hind';
color: #444;
border: 1px solid #eee;
}
.teambox .msrpbox .mi li {
display: table-cell;
padding: 0;
line-height: 40px;
height: 40px;
text-align: center;
border-right: 1px solid #eee;
font: 600 12px/40px Poppins;
color: #888;
}
.lexus1 {
width: 100%;
text-align: center;
}
.name {
margin-top: 47px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #222;
margin-bottom: 6px;
line-height: 1.1;
}
.euis {
margin-top: 20px;
margin-bottom: 14px;
padding-bottom: 22px;
}
body {
font: 14px/1.7143 'Hind';
color: #444;
}
.photo {
width: 100%;
height: 260px;
background-color: #f4f4f4;
}
.choose {
width: 100%;
height: 708px;
}
.all {
width: 1140px;
padding: 0 15px;
position: relative;
}
.all li {
float: left;
padding-right: 0;
padding-left: 0;
text-align: -webkit-match-parent;
border: #FFFFFF 2px solid;
}
.all li a {
text-decoration: none;
color: #2f2f2f;
border-color: #444;
position: relative;
padding: 0 24px;
font: 500 14px/36px Poppins;
color: #888;
border: 2px solid transparent;
border-radius: 2px;
}
.all li:hover {
border: #444444 2px solid;
}
.all li:hover .all li a {
color: #000000;
}
.all ul {
margin-top: 37px;
margin-bottom: 36px;
margin-left: 0;
padding-left: 200px;
text-align: center;
}
.choose1 {
width: 100%;
height: 600px;
}
.choose1 li {
float: left;
height: 296px;
}
.choose1 li img {
width: 380px;
}
.topmake {
width: 100%;
height: 744px;
overflow: hidden;
}
.alfa {
width: 199px;
height: auto;
float: left;
}
.romeo {
width: 585px;
height: 306px;
text-align: left;
padding: 81px 0;
margin: 60px 0;
}
a {
text-decoration: none;
}
.remeo li a {
display: block;
padding-bottom: 12px;
font-weight: 600;
color: #444;
text-decoration: none;
}
.remeo li a:hover {
color: #D01818;
}
.remeo ul {
margin-bottom: 40px;
}
.rental {
width: 316px;
height: 450px;
padding: 44px 30px 30px 44px;
position: absolute;
background-color: #15191a;
color: #FFFFFF;
left: 740px;
top: 100px;
}
.checkbox0 {
position: absolute;
left: 44px;
top: 182px;
}
.checkbox {
position: absolute;
}
.checkbox:nth-of-type(1) {
top: 0px;
}
.checkbox:nth-of-type(2) {
top: 29px;
}
.checkbox:nth-of-type(3) {
top: 58px;
}
.checkbox:nth-of-type(4) {
top: 87px;
}
.checkbox:nth-of-type(5) {
top: 116px;
}
.rental1 {
font: 18px/1 Poppins;
}
.rental2 {
color: #d01818;
margin-bottom: 13px;
font: 600 36px/1 Poppins;
letter-spacing: .025em;
}
.rental3 {
margin-bottom: 17px;
font-size: 16px;
font-weight: 500;
}
.rental ul {
margin-bottom: 40px;
padding-left: 0;
list-style-type: none;
}
.rental ul li {
position: relative;
margin-bottom: 5px;
padding-left: 30px;
display: list-item;
text-align: -webkit-match-parent;
}
.will {
width: 100%;
height: 344px;
background: url(../img/content/bg/bg-6.jpg) repeat fixed;
background-size: cover;
position: relative;
}
.will1 {
width: 100%;
height: 185px;
position: relative;
}
.will-1 {
width: 480px;
height: 263px;
padding-left: 60px;
margin: 30px 15px;
position: absolute;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
top: -195px;
background-color: #f4f4f4;
}
.will-1:nth-of-type(1) {
left: 381px;
}
.will-1:nth-of-type(2) {
left: 961px;
}
.will-2 {
width: 80px;
height: 80px;
position: absolute;
left: 60px;
top: -35px;
}
.will-3 {
width: 60px;
height: 50px;
position: absolute;
right: 40px;
top: 40px;
}
.will-4 {
width: 400px;
height: 130px;
position: absolute;
left: 60px;
top: 80px;
}
.span {
display: block;
font: 600 16px Poppins;
letter-spacing: .02em;
color: #222;
}
.shop {
width: 100%;
height: 1167px;
}
.gauge {
width: 1140px;
height: auto;
}
.gauge1 {
float: left;
}
.latest {
width: 100%;
height: 1048px;
background: url(../img/content/bg/bg-7.jpg) no-repeat fixed;
background-size: cover;
position: relative;
}
.zhezhao4 {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
left: 0;
top: 0;
}
.post {
width: 360px;
height: 631px;
position: absolute;
margin-right: 20px;
background-color: #FFFFFF;
}
.post0 {
width: 100%;
position: relative;
}
.post:nth-of-type(1) {
left: 380px;
}
.post:nth-of-type(2) {
left: 780px;
}
.post:nth-of-type(3) {
left: 1180px;
}
.postpic,
.postpic img {
width: 360px;
height: 250px;
}
.postpic {
position: absolute;
top: 0;
left: 0;
}
.postpic1 {
position: absolute;
border: 38px;
overflow: hidden;
top: 200px;
left: 30px;
border-radius: 38px 38px;
}
.post1 {
left: 30px;
top: 350px;
width: 300px;
position: absolute;
overflow: hidden;
}
.w300 {
width: 300px;
}
.last {
width: 100%;
height: 143px;
padding: 104px 0;
}
.auto {
width: 238px;
height: 115px;
padding: 10px;
margin: 0 25px;
float: left;
text-align: center;
position: relative;
}
.zhezhao5 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
}
.zhezhao5:hover {
background-color: rgba(255, 255, 255, 0.0);
}
.end {
width: 100%;
height: 547px;
background: url(../img/content/bg/bg-1.jpg) no-repeat;
background-size: cover;
position: relative;
}
.end-1 {
width: 263px;
height: 100%;
position: absolute;
left: 300px;
top: 110px;
}
.end-1 img {
margin: 40px 0;
}
.end-1 p:hover {
color: #D01818;
}
.end-1 p {
color: #868686;
}
.end-2 {
width: 310px;
height: 100%;
position: absolute;
left: 650px;
top: 180px;
}
.end-2-1 {
color: #868686;
position: absolute;
top: 60px;
}
.end-2-1 li:hover {
color: #D01818;
}
.end-2-1 li {
margin-bottom: 10px;
}
.end-2-1:nth-of-type(1) {
left: 0;
}
.end-2-1:nth-of-type(2) {
left: 150px;
}
.end-2-1 span {
color: #ffffff;
margin-right: 7px;
}
.end-tit {
width: 320px;
position: absolute;
top: 0;
left: 0;
}
.end-tit span {
color: #D01818;
font-weight: bolder;
margin-right: 30px;
}
.end-tit h2,
.end-tit h4 {
font-size: 1em;
margin-left: 0px;
color: #FFFFFF;
}
.end-tit h4 {
margin-left: 60px;
}
.sell {
width: 300px;
height: 70px;
padding-top: 20px;
margin-left: 900px;
}
.end-3 {
width: 263px;
height: 100%;
position: absolute;
left: 1000px;
top: 180px;
}
.sell img {
margin: 15px 15px 0 10px;
}
.end-4 {
width: 320px;
height: 100%;
position: absolute;
left: 1225px;
top: 180px;
}
.black1 {
background-color: rgba(0, 0, 0, 0.8);
}
.end-4 li {
color: #FFFFFF;
}
.end-4 li img {
width: 25px;
height: 25px;
}
.w1903{
width: 1903px;
height: auto;
}
style-list.css
#page-preloader {
width: 100%;
background-color: #222;
}
* {
margin: 0;
padding: 0;
}
.box1 {
width: 1170px;
height: 50px;
line-height: 50px;
background-color: #222;
}
#page-preloader .box1 li {
padding-right: 20px;
font-size: 13px;
letter-spacing: 0.04em;
color: #fff;
list-style: none;
text-decoration: none;
float: left;
}
#list1 img {
margin-right: 20px;
}
.center {
margin-left: auto;
margin-right: auto;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.box1-1-2-1 {
width: 250px;
height: 180px;
background-color: rgba(0, 0, 0, 0.7);
float: left;
position: absolute;
bottom: -150px;
left: 690px;
display: none;
}
.box2:hover .box1-1-2-1 {
display: block;
z-index: 11;
}
.box1-1-3 {
text-align: center;
width: 90px;
height: 40px;
font-size: 16px;
color: #fff;
margin: 5px 15px;
}
.box2,
.box3 {
width: 100%;
padding: 5px 0;
}
.box2-1 {
width: 1170px;
height: 91px;
}
.box2 {
background-color: #FFFFFF;
}
.box2-2 {
margin-left: 15px;
margin-right: 100px;
padding: 15px 0;
}
.box2-3 li {
color: #222222;
list-style: none;
text-decoration: none;
float: left;
margin: 0 1px;
line-height: 31px;
font-size: 14px;
font-weight: 600;
}
.box2-3 li a {
background-color: #FFFFFF;
color: #222222;
list-style: none;
text-decoration: none;
float: left;
margin: 0 1px;
padding: 30px 15px;
line-height: 31px;
font-size: 14px;
font-weight: 600;
}
.box2-3 li a:hover {
background-color: #d01818;
color: #FFFFFF;
}
.box2-4-1 {
width: 112px;
height: 44px;
}
.box2-4-1 a {
text-decoration: none;
list-style: none;
background-color: #D01818;
color: #FFFFFF;
}
.box2-4 li {
list-style: none;
text-decoration: none;
float: left;
}
.playbox {
width: 100%;
height: 700px;
overflow: hidden;
}
ul {
list-style: none;
}
.relative {
position: relative;
}
.zhezhao1 {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 700px;
z-index: 4;
position: absolute;
top: 0;
left: 0;
}
.picbox {
z-index: 3;
position: absolute;
top: 0;
left: 0;
}
.pixapp {
width: 680px;
height: 700px;
position: absolute;
top: 180px;
right: 150px;
z-index: 5;
}
.picapp1 {
width: 117px;
height: 34px;
font-size: 13px;
font-weight: 500;
text-align: center;
line-height: 33px;
background-color: #D01818;
color: #fefdfd;
position: absolute;
top: 25px;
left: 0;
}
.picapp2 {
position: absolute;
top: 0;
left: 130px;
}
.picapp2 h2 {}
.starting {
border: 2px #FEFDFD solid;
color: #FEFDFD;
margin-right: 13px;
margin-bottom: 20px;
width: 193px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
top: 200px;
}
.starting:hover {
border: 2px #FF0000 solid;
color: #FF0000;
}
.book {
text-align: center;
background-color: #D01818;
color: #FEFDFD;
margin-right: 13px;
margin-bottom: 20px;
width: 120px;
height: 54px;
line-height: 50px;
position: absolute;
left: 210px;
top: 200px;
}
.book:hover {
background-color: #FF0000;
color: #FEFDFD;
}
.picapp2 p,
.picapp2 h2 {
color: #FFFFFF;
font-size: 50px;
}
.line {
border: 2px #FFFFFF solid;
position: absolute;
top: 290px;
width: 65px;
}
.line1 {
border: 2px #D01818 solid;
position: absolute;
bottom: 60px;
left: 50px;
width: 20px;
}
.box3 {
height: 730px;
position: relative;
z-index: 6;
}
.box3-1 {
width: 1140px;
height: 343px;
position: absolute;
top: -40px;
left: 380px;
z-index: 7;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
overflow: hidden;
}
.largest {
width: 380px;
height: 340px;
position: absolute;
top: 0;
background-color: #f4f4f4;
}
.largest:nth-of-type(1) {
left: 0;
}
.largest:nth-of-type(2) {
left: 380px;
}
.largest:nth-of-type(3) {
left: 760px;
}
.largest h3 {
margin: 0 50px;
color: #222222;
font-size: 14px;
margin-bottom: 15px;
}
.largest p {
margin: 0 50px;
color: #969696;
font-size: 14px;
}
.largest img {
width: 55px;
height: 55px;
margin: 60px 0px 30px 50px;
}
.box3-2 {
width: 1140px;
height: 350px;
position: absolute;
left: 380px;
bottom: 0;
}
.find {
text-align: center;
width: 100%;
height: auto;
}
.find h2,
.feature h2,
.about h2 {
margin-top: 0;
margin-bottom: 2px;
font-size: 48px;
font-weight: 320;
line-height: 1.08;
}
.find p,
.feature p,
.about p {
margin-bottom: 100px;
font-size: 16px;
line-height: 1.875;
color: #888;
}
.line3,
.line4,
.line7 {
border-bottom: 1px #D01818 solid;
width: 40px;
position: absolute;
}
.line7:nth-of-type(1) {
left: 27px;
top: 100px;
}
.line7:nth-of-type(2) {
left: 2px;
top: 108px;
}
.line7:nth-of-type(3) {
left: 52px;
top: 108px;
}
.line3:nth-of-type(1) {
left: 550px;
bottom: 250px;
}
.line3:nth-of-type(2) {
left: 525px;
bottom: 242px;
}
.line3:nth-of-type(3) {
left: 575px;
bottom: 242px;
}
.line4:nth-of-type(1) {
left: 931px;
bottom: 65px;
}
.line4:nth-of-type(2) {
left: 906px;
bottom: 58px;
}
.line4:nth-of-type(3) {
left: 956px;
bottom: 58px;
}
.box4 {
width: 100%;
background-color: #f4f4f4;
}
.input {
width: 1140px;
height: 140px;
padding: 70px 0;
}
select {
width: 260px;
height: 50px;
padding: 0 20px;
font-size: 14px;
line-height: 48px;
vertical-align: top;
text-transform: inherit;
color: #222;
border: 1px solid #eee;
border-radius: 0;
background-color: #fff;
margin: 0 30px 40px 0;
}
input {
background-color: #D01818;
color: #FFFFFF;
height: 50px;
font-weight: bold;
font-size: 14px;
line-height: 46px;
text-align: center;
width: 166px;
height: 50px;
margin-bottom: 20px;
list-style: none;
}
.search1 {
margin-top: 25px;
margin-left: 100px;
width: 170px;
height: 140px;
text-align: center;
}
.search1 a {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
transition: all .3s;
color: #222;
line-height: 1;
font-family: Poppins;
text-decoration: underline;
}
.input1 {
width: 290px;
height: 140px;
float: left;
}
.box5 {
height: 890px;
width: 100%;
background-color: #ffffff;
}
.feature {
width: 100%;
height: 170px;
text-align: center;
position: relative;
padding-top: 100px;
}
.msrp {
width: 100%;
height: 396px;
position: relative;
}
.msrpbox {
width: 357px;
height: 410px;
position: absolute;
top: 0;
overflow: hidden;
z-index: 2;
}
.msrpbox:hover .zhezhao6 {
z-index: 3;
}
.msrpbox:nth-of-type(1) .zhezhao6 {
transition: all 1s linear;
transform: rotate(90deg);
transform-origin: right top;
}
.msrpbox:nth-of-type(1):hover .zhezhao6 {
transform: rotate(0deg);
}
.msrpbox:nth-of-type(2) .zhezhao6 {
transform: scale(0);
transition: all 1s linear;
}
.msrpbox:nth-of-type(2):hover .zhezhao6 {
transform: scale(1);
}
.msrpbox:nth-of-type(3) .zhezhao6 {
transform: translate(96px, 0);
transition: all 1s linear;
}
.msrpbox:nth-of-type(3):hover .zhezhao6 {
transform: translate(0, 0);
}
.zhezhao6 {
width: 100%;
height: 218px;
color: #FFFFFF;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
z-index: -1;
}
.msrpbox img {
width: 357px;
height: 218px;
}
.msrpbox:nth-of-type(1) {
left: 0;
}
.msrpbox:nth-of-type(2) {
left: 386px;
}
.msrpbox:nth-of-type(3) {
left: 772px;
}
.msrpbox:nth-of-type(4) {
left: 1158px;
}
.msrpbox:nth-of-type(5) {
left: 1544px;
}
.price {
position: absolute;
right: 10px;
top: 170px;
background-color: #d01818;
padding: 0 15px;
font-family: Poppins;
font-weight: 600;
line-height: 38px;
color: white;
}
.mi {
width: 357px;
height: 48px;
margin-bottom: 34px;
}
.mi ul {
display: table;
width: 100%;
margin-top: 10px;
margin-bottom: 6px;
font: 500 12px Poppins;
color: #888;
border: 1px solid #eee;
}
.mi li {
display: table-cell;
line-height: 35px;
padding-top: 15px;
height: 35px;
text-align: center;
border-right: 1px solid #eee;
font: 500 13px Poppins;
color: #888;
}
.mi li:hover {
color: #D01818;
}
.line5 {
border: 2px #D01818 solid;
position: absolute;
bottom: 77px;
left: 0;
width: 8px;
}
.line9 {
border: 2px #D01818 solid;
position: absolute;
top: 12px;
left: 0;
width: 8px;
}
.lexus {
width: 356px;
height: auto;
}
.lexus h3 {
padding-left: 27px;
margin-bottom: 20px;
}
.lexus a {
color: #222;
text-decoration: none;
font-size: 16px;
line-height: 1;
font-weight: 600;
font-family: Poppins;
}
.lexus p {
font: 12px/1.7143 'Hind';
color: #444;
}
.box6 {
width: 100%;
height: 550px;
background: url(../img/content/bg/bg-1.jpg) repeat fixed center;
position: relative;
}
.zhezhao2 {
width: 100%;
height: 550px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 2;
}
.box6 .feature p,
.box6 .feature h2 {
color: #FFFFFF;
}
.box7 {
width: 100%;
height: 431px;
position: relative;
z-index: 4;
}
.balancing {
width: 263px;
height: 373px;
position: absolute;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
top: -283px;
color: #222222;
background-color: #F4F4F4;
z-index: 5;
text-align: center;
}
.balancing:hover {
background-color: #D01818;
color: #FFFFFF;
}
.balancing:nth-of-type(1) {
left: 380px;
}
.balancing:nth-of-type(2) {
left: 673px;
}
.balancing:nth-of-type(3) {
left: 966px;
}
.balancing:nth-of-type(4) {
left: 1259px;
}
.balancing img {
width: 65px;
height: 65px;
margin-top: 45px;
margin-bottom: 25px;
}
.h3x {
margin-top: 0;
margin-bottom: 27px;
font-size: 16px;
font-weight: 600;
}
strong {
margin-top: 5px;
font-size: 20px;
}
.p {
font: 12px/1.7143 'Hind';
color: #444;
margin-bottom: 7px;
padding: 0 30px;
}
.balancing:hover .p {
color: #FFFFFF;
}
.line6 {
border: 1px #D01818 solid;
position: absolute;
bottom: 55px;
left: 121px;
width: 18px;
}
.balancing:hover .line6 {
border: 1px #ffffff solid;
}
.box7-1 {
width: 100%;
height: 100%;
position: relative;
}
.stock {
height: 93px;
width: 267px;
position: absolute;
text-align: center;
bottom: 115px;
}
.stock:nth-of-type(1) {
left: 380px;
}
.stock:nth-of-type(2) {
left: 673px;
}
.stock:nth-of-type(3) {
left: 966px;
}
.stock:nth-of-type(4) {
left: 1259px;
}
.stock h3 {
color: #d01818;
}
.stock .p {
margin-bottom: 3px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #444;
}
.box8 {
width: 100%;
height: 891px;
position: relative;
background-image: url(../img/content/bg/bg-5.jpg);
background-size: cover;
z-index: 1;
}
#tit {
display: block;
font-size: 1.5em;
color: #FFFFFF;
}
.zhezhao3 {
position: absolute;
width: 100%;
height: 891px;
background-color: rgba(254, 254, 254, 0.7);
z-index: 2;
}
.container {
width: 1140px;
height: 510px;
position: relative;
}
.ford0 {
width: 458px;
height: 505px;
background-color: #ffffff;
}
.ford {
width: 458px;
height: 100px;
margin-bottom: 1px;
background-color: #ececec;
}
.ford:hover {
background-color: #D01818;
}
.ford:hover .lines {
color: #FFFFFF
}
.ford h4 {
margin-bottom: 4px;
font: 600 16px Poppins;
white-space: nowrap;
letter-spacing: .01em;
color: #222;
padding: 25px 30px 5px 0px;
}
.ford span {
padding: 1px 30px 25px 50px;
}
.ford span,
.ford span strong {
font-weight: 500;
white-space: nowrap;
color: #888;
font: 14px/1.7143 'Hind';
}
.ford span strong {
font-weight: 700;
}
.fordpic {
width: 682px;
height: 505px;
position: absolute;
overflow: hidden;
top: 0;
left: 459px;
}
.order {
text-align: center;
padding-top: 10px;
width: 40px;
height: 30px;
position: fixed;
left: 0;
top: 140px;
background-color: #FFFFFF;
border: #DDDDDD 1px solid;
z-index: 10;
}
.ford h4 .lines {
font-size: 1rem;
font-weight: bolder;
color: #D01818;
padding: 0 15px;
}
.box9 {
width: 100%;
height: 976px;
background-color: #FFFFFF;
}
.motorland {
width: 1140px;
height: 762px;
padding: 100px 15px;
position: relative;
}
.about {
height: 100%;
width: 600px;
text-align: left;
position: absolute;
}
.visited {
width: 585px;
height: 306px;
text-align: left;
padding: 81px 0;
margin: 60px 0;
}
.visited1 {
font: 600 18px/1.2 Poppins;
letter-spacing: .01em;
color: #222;
}
.visited2 {
margin-bottom: 20px;
font: 300 24px Poppins;
color: #444;
}
.visited .visited3 {
margin: 0 0 50px;
font: 14px/1.7143 'Hind';
color: #444;
}
.btn:hover {
box-shadow: 0 0 1px 0 #000;
text-shadow: 0 0 1px #000;
}
.btn {
overflow: hidden;
display: inline-block;
height: 44px;
margin-bottom: 0;
padding: 0 20px;
font: 600 12px/40px Poppins;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 2px solid transparent;
white-space: nowrap;
user-select: none;
text-transform: uppercase;
color: white;
transition: all .3s;
letter-spacing: .05em;
border-radius: 2px;
}
.visited a,
.buy a {
text-decoration: none;
}
.btn-dark {
background-color: #222;
}
.btn-red {
background-color: #D01818;
}
.aboutpic {
height: 100%;
left: 665px;
text-align: left;
position: absolute;
padding-top: 105px;
}
.aboutend {
height: 100%;
left: 1029px;
width: 339px;
position: absolute;
padding-top: 164px;
}
.aboutend1 {
margin-bottom: 34px;
padding-left: 77px;
width: 262px;
height: 138px;
}
.aboutend1:hover .aboutend3 {
color: #D01818;
}
.aboutend1:hover .aboutend4 {
background-color: #000000;
}
.aboutend2 {
margin-bottom: 14px;
font: 600 16px Poppins;
color: #222;
}
.aboutend3 {
font: 14px/1.7143 'Hind';
color: #444;
}
.aboutend4 {
display: inline-block;
width: 20px;
height: 3px;
background-color: #D01818;
}
.frame {
width: 60px;
padding-top: 164px;
left: 1029px;
height: 100%;
position: absolute;
}
.aboutendpic {
width: 58px;
height: 58px;
position: absolute;
left: 0px;
}
.aboutendpic img {
width: 58px;
height: 58px;
}
.aboutendpic:nth-of-type(1) {
top: 164px;
}
.aboutendpic:nth-of-type(2) {
top: 342px;
}
.aboutendpic:nth-of-type(3) {
top: 506px;
}
.tobuy {
width: 100%;
height: 464px;
position: relative;
}
.tobuy1 {
width: 950px;
height: 424px;
margin: 20px 0;
background: url(../img/content/bg/bg-4.jpg) no-repeat fixed;
position: absolute;
background-size: cover;
}
.tozhe,
.tozhe1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.tozhe-red {
background-color: rgba(255, 0, 0, 0.5);
}
.tozhe-black {
background-color: rgba(0, 0, 0, 0.5);
}
.tobuy2 {
position: absolute;
left: 950px;
width: 950px;
height: 464px;
background: url(../img/content/bg/bg-3.jpg) no-repeat fixed;
background-size: cover;
}
.buy {
margin: 100px 0 0 380px;
position: relative;
font: 14px/1.7143 'Hind';
width: 423px;
height: 234px;
}
.tozhe-black .buy {
margin: 100px 0 0 200px;
}
.buy1 {
margin-top: 5px;
margin-bottom: 20px;
font-size: 18px;
letter-spacing: .03em;
color: #fff;
line-height: 1.1;
font-weight: 600;
font-family: Poppins;
}
.buy2 {
margin-top: 10px;
font-size: 36px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .03em;
color: #fff;
}
.btn-white {
margin-top: 34px;
padding: 0 40px;
border-color: #fff;
background-color: transparent;
}
.buy3 {
color: #fff;
}
.team {
width: 100%;
height: 986px;
}
.teambox {
width: 1140px;
height: 100%;
}
.eteam1 {
width: 1140px;
height: 522px;
}
.teambox .msrp {
width: 100%;
height: 396px;
position: relative;
}
.teambox .msrpbox {
width: 360px;
height: 552px;
position: absolute;
top: 0;
overflow: hidden;
}
.teambox .msrpbox img {
width: 360px;
height: 280px;
}
.teambox .msrpbox:nth-of-type(1) {
left: 0;
}
.teambox .msrpbox:nth-of-type(2) {
left: 386px;
}
.teambox .msrpbox:nth-of-type(3) {
left: 772px;
}
.teambox .price {
position: absolute;
right: 20px;
top: 220px;
background-color: #d01818;
padding: 0 15px;
font-family: Poppins;
font-weight: 600;
line-height: 38px;
color: white;
}
.teambox .msrpbox .mi {
width: 356px;
height: 40px;
margin-bottom: 34px;
}
.teambox .msrpbox .mi ul {
display: table;
width: 100%;
margin-top: 10px;
margin-bottom: 6px;
font: 14px/1.7143 'Hind';
color: #444;
border: 1px solid #eee;
}
.teambox .msrpbox .mi li {
display: table-cell;
padding: 0;
line-height: 40px;
height: 40px;
text-align: center;
border-right: 1px solid #eee;
font: 600 12px/40px Poppins;
color: #888;
}
.lexus1 {
width: 100%;
text-align: center;
}
.name {
margin-top: 47px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #222;
margin-bottom: 6px;
line-height: 1.1;
}
.euis {
margin-top: 20px;
margin-bottom: 14px;
padding-bottom: 22px;
}
body {
font: 14px/1.7143 'Hind';
color: #444;
}
.photo {
width: 100%;
height: 260px;
background-color: #f4f4f4;
}
.choose {
width: 100%;
height: 708px;
}
.all {
width: 1140px;
padding: 0 15px;
position: relative;
}
.all li {
float: left;
padding-right: 0;
padding-left: 0;
text-align: -webkit-match-parent;
border: #FFFFFF 2px solid;
}
.all li a {
text-decoration: none;
color: #2f2f2f;
border-color: #444;
position: relative;
padding: 0 24px;
font: 500 14px/36px Poppins;
color: #888;
border: 2px solid transparent;
border-radius: 2px;
}
.all li:hover {
border: #444444 2px solid;
}
.all li:hover .all li a {
color: #000000;
}
.all ul {
margin-top: 37px;
margin-bottom: 36px;
margin-left: 0;
padding-left: 200px;
text-align: center;
}
.choose1 {
width: 100%;
height: 600px;
}
.choose1 li {
float: left;
height: 296px;
}
.choose1 li img {
width: 380px;
}
.topmake {
width: 100%;
height: 744px;
overflow: hidden;
}
.alfa {
width: 199px;
height: auto;
float: left;
}
.romeo {
width: 585px;
height: 306px;
text-align: left;
padding: 81px 0;
margin: 60px 0;
}
a {
text-decoration: none;
}
.remeo li a {
display: block;
padding-bottom: 12px;
font-weight: 600;
color: #444;
text-decoration: none;
}
.remeo li a:hover {
color: #D01818;
}
.remeo ul {
margin-bottom: 40px;
}
.rental {
width: 316px;
height: 450px;
padding: 44px 30px 30px 44px;
position: absolute;
background-color: #15191a;
color: #FFFFFF;
left: 740px;
top: 100px;
}
.checkbox0 {
position: absolute;
left: 44px;
top: 182px;
}
.checkbox {
position: absolute;
}
.checkbox:nth-of-type(1) {
top: 0px;
}
.checkbox:nth-of-type(2) {
top: 29px;
}
.checkbox:nth-of-type(3) {
top: 58px;
}
.checkbox:nth-of-type(4) {
top: 87px;
}
.checkbox:nth-of-type(5) {
top: 116px;
}
.rental1 {
font: 18px/1 Poppins;
}
.rental2 {
color: #d01818;
margin-bottom: 13px;
font: 600 36px/1 Poppins;
letter-spacing: .025em;
}
.rental3 {
margin-bottom: 17px;
font-size: 16px;
font-weight: 500;
}
.rental ul {
margin-bottom: 40px;
padding-left: 0;
list-style-type: none;
}
.rental ul li {
position: relative;
margin-bottom: 5px;
padding-left: 30px;
display: list-item;
text-align: -webkit-match-parent;
}
.will {
width: 100%;
height: 344px;
background: url(../img/content/bg/bg-6.jpg) repeat fixed;
background-size: cover;
position: relative;
}
.will1 {
width: 100%;
height: 185px;
position: relative;
}
.will-1 {
width: 480px;
height: 263px;
padding-left: 60px;
margin: 30px 15px;
position: absolute;
box-shadow: 0 0 20px rgb(0 0 0 / 45%);
top: -195px;
background-color: #f4f4f4;
}
.will-1:nth-of-type(1) {
left: 381px;
}
.will-1:nth-of-type(2) {
left: 961px;
}
.will-2 {
width: 80px;
height: 80px;
position: absolute;
left: 60px;
top: -35px;
}
.will-3 {
width: 60px;
height: 50px;
position: absolute;
right: 40px;
top: 40px;
}
.will-4 {
width: 400px;
height: 130px;
position: absolute;
left: 60px;
top: 80px;
}
.span {
display: block;
font: 600 16px Poppins;
letter-spacing: .02em;
color: #222;
}
.shop {
width: 100%;
height: 1167px;
}
.gauge {
width: 1140px;
height: auto;
}
.gauge1 {
float: left;
}
.latest {
width: 100%;
height: 1048px;
background: url(../img/content/bg/bg-7.jpg) no-repeat fixed;
background-size: cover;
position: relative;
}
.zhezhao4 {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
left: 0;
top: 0;
}
.post {
width: 360px;
height: 631px;
position: absolute;
margin-right: 20px;
background-color: #FFFFFF;
}
.post0 {
width: 100%;
position: relative;
}
.post:nth-of-type(1) {
left: 380px;
}
.post:nth-of-type(2) {
left: 780px;
}
.post:nth-of-type(3) {
left: 1180px;
}
.postpic,
.postpic img {
width: 360px;
height: 250px;
}
.postpic {
position: absolute;
top: 0;
left: 0;
}
.postpic1 {
position: absolute;
border: 38px;
overflow: hidden;
top: 200px;
left: 30px;
border-radius: 38px 38px;
}
.post1 {
left: 30px;
top: 350px;
width: 300px;
position: absolute;
overflow: hidden;
}
.w300 {
width: 300px;
}
.last {
width: 100%;
height: 143px;
padding: 104px 0;
}
.auto {
width: 238px;
height: 115px;
padding: 10px;
margin: 0 25px;
float: left;
text-align: center;
position: relative;
}
.zhezhao5 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
}
.zhezhao5:hover {
background-color: rgba(255, 255, 255, 0.0);
}
.end {
width: 100%;
height: 547px;
background: url(../img/content/bg/bg-1.jpg) no-repeat;
background-size: cover;
position: relative;
}
.end-1 {
width: 263px;
height: 100%;
position: absolute;
left: 300px;
top: 110px;
}
.end-1 img {
margin: 40px 0;
}
.end-1 p:hover {
color: #D01818;
}
.end-1 p {
color: #868686;
}
.end-2 {
width: 310px;
height: 100%;
position: absolute;
left: 650px;
top: 180px;
}
.end-2-1 {
color: #868686;
position: absolute;
top: 60px;
}
.end-2-1 li:hover {
color: #D01818;
}
.end-2-1 li {
margin-bottom: 10px;
}
.end-2-1:nth-of-type(1) {
left: 0;
}
.end-2-1:nth-of-type(2) {
left: 150px;
}
.end-2-1 span {
color: #ffffff;
margin-right: 7px;
}
.end-tit {
width: 320px;
position: absolute;
top: 0;
left: 0;
}
.end-tit span {
color: #D01818;
font-weight: bolder;
margin-right: 30px;
}
.end-tit h2,
.end-tit h4 {
font-size: 1em;
margin-left: 0px;
color: #FFFFFF;
}
.end-tit h4 {
margin-left: 60px;
}
.sell {
width: 300px;
height: 70px;
padding-top: 20px;
margin-left: 900px;
}
.end-3 {
width: 263px;
height: 100%;
position: absolute;
left: 1000px;
top: 180px;
}
.sell img {
margin: 15px 15px 0 10px;
}
.end-4 {
width: 320px;
height: 100%;
position: absolute;
left: 1225px;
top: 180px;
}
.black1 {
background-color: rgba(0, 0, 0, 0.8);
}
.end-4 li {
color: #FFFFFF;
}
.end-4 li img {
width: 25px;
height: 25px;
}
.w1903{
width: 1903px;
height: auto;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-artice.css" />
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/act1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="w1903 center">
<div class="order">
<img src="img/general/Snipaste_2021-09-29_07-07-32.png">
</div>
<div id="page-preloader">
<div class="box1 center">
<ul id="list1">
<li><img src="./img/general/Snipaste_2021-09-27_09-42-24.png">Mon - Fri : 0900am to 0600pm</li>
<li><img src="./img/general/Snipaste_2021-09-27_09-43-12.png">+ 042 798 3549</li>
<li><img src="./img/general/Snipaste_2021-09-27_09-43-29.png">support@motorland.com</li>
</ul>
<ul class="fr">
<li><img src="./img/general/Snipaste_2021-09-27_09-49-02.png"></li>
<li><img src="./img/general/Snipaste_2021-09-27_09-49-32.png"></li>
<li><img src="img/general/Snipaste_2021-09-27_09-50-11.png"></li>
<li><img src="img/general/Snipaste_2021-09-27_09-50-47.png"></li>
<li><img src="img/general/Snipaste_2021-09-27_09-51-12.png"></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="box2">
<div class="box2-1 center">
<div class="box2-2 fl"><img src="img/general/logo-dark.png"></div>
<div class="box2-3 fl">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="list.html">List</a></li>
<li><a href="article.html">Article</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Pages</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="sell">
<img src="./img/general/Snipaste_2021-09-27_11-05-40.png">
<img src="./img/general/Snipaste_2021-09-27_11-05-56.png">
<div class="btn btn-red">SELL CAR</div>
</div>
<div class="box1-1-2-1">
<div class="fl">
<div class="box1-1-3">测评</div>
<div class="box1-1-3">教程</div>
<div class="box1-1-3">评测</div>
<div class="box1-1-3">攻略</div>
</div>
<div class="fl">
<div class="box1-1-3">公告</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="playbox center relative">
<!-- <div class="picleft">
<img src="img/general/playful_white@x2.png" >
</div> -->
<div class="pixapp">
<div class="picapp1">
MODEL 2018
</div>
<div class="picapp2">
<div>
<h2>MERCEDES BENZ</h2>
<p>SMART DRIVE</p>
</div>
<div class="starting">
Starting $560/M
</div>
<div class="book">
BOOK NOW
</div>
<div class="line"></div>
<div class="clear"></div>
</div>
</div>
<div class="zhezhao1">
</div>
<div class="picbox">
<img src="img/components/b-main-slider/1.jpg">
<img src="img/components/b-main-slider/2.jpg">
</div>
</div>
<div class="box3">
<div class="box3-1 center">
<div class="largest">
<img src="./img/general/Agenda.svg">
<h3>Largest Dealership of Cars</h3>
<p>MotorLand is nisi aliquip ex consequat duis velit esse cillum dolore fugiat nulla pariatur
excepteur sint occaecat.</p>
<div class="line1"></div>
</div>
<div class="largest">
<img src="./img/general/Radio.svg">
<h3>We Offers Lower Cars Prices</h3>
<p>MotorLand is nisi aliquip ex consequat duis velit esse cillum dolore fugiat nulla pariatur
excepteur sint occaecat.</p>
<div class="line1"></div>
</div>
<div class="largest">
<img src="./img/general/Column.svg">
<h3>Multipoint Safety Checks</h3>
<p>MotorLand is nisi aliquip ex consequat duis velit esse cillum dolore fugiat nulla pariatur
excepteur sint occaecat.</p>
<div class="line1"></div>
</div>
</div>
<div class="box3-2 center">
<div class="find">
<h2>Find Your Dream Car</h2>
<p>Tempor incididunt labore dolore magna aliqua sed ipsum</p>
<div class="line3"></div>
<div class="line3"></div>
<div class="line3"></div>
<p><img src="img/general/Snipaste_2021-09-27_16-39-31.png"></p>
</div>
</div>
</div>
<div class="box4">
<div class="input center">
<div class="input1">
<select name="">
<option value=""> Select Make</option>
<option value="">Make 1</option>
<option value="">Make 2</option>
<option value="">Make 3</option>
</select>
<select name="">
<option value=""> Select Model</option>
<option value="">Model 1</option>
<option value="">Model 2</option>
<option value="">Model 3</option>
</select>
</div>
<div class="input1">
<select name="">
<option value=""> Select Year</option>
<option value="">2016</option>
<option value="">2017</option>
<option value="">2018</option>
</select>
<select name="">
<option value=""> Select Car Status</option>
<option value="">Make 1</option>
<option value="">Make 2</option>
<option value="">Make 3</option>
</select>
</div>
<div class="input1">
<select name="">
<option value=""> Select All Location</option>
<option value="">Make 1</option>
<option value="">Make 2</option>
<option value="">Make 3</option>
</select>
<select name="">
<option value=""> Select All Location</option>
<option value="">Make 1</option>
<option value="">Make 2</option>
<option value="">Make 3</option>
</select>
</div>
<div class="search1 fl">
<p><input type="button" name="" id="" value="SEARCH VEHICLE" /></p>
<a href="#">ADVANCED SEARCH</a>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="box5">
<div class="feature">
<h2>Featured Vehicles</h2>
<p>Tempor incididunt labore dolore magna alique</p>
<div class="line4"></div>
<div class="line4"></div>
<div class="line4"></div>
</div>
<div class="msrp">
<div class="msrpbox">
<div class="zhezhao6"></div>
<img src="img/components/b-goods/featured-2.jpg">
<div class="price">
$45,000 MSRP $27,000
</div>
<div class="mi">
<ul>
<li>35,000 mi</li>
<li>Model: 2017</li>
<li>Auto</li>
<li>320 hp</li>
</ul>
</div>
<div class="line5"></div>
<div class="lexus">
<h3><a href="#">Lexus GX 490i Hybird</a></h3>
<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
</p>
</div>
</div>
<div class="msrpbox">
<div class="zhezhao6"></div>
<img src="img/components/b-goods/featured-1.jpg">
<div class="price">
$45,000 MSRP $27,000
</div>
<div class="mi">
<ul>
<li>35,000 mi</li>
<li>Model: 2017</li>
<li>Auto</li>
<li>320 hp</li>
</ul>
</div>
<div class="line5"></div>
<div class="lexus">
<h3><a href="#">Lexus GX 490i Hybird</a></h3>
<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
</p>
</div>
</div>
<div class="msrpbox">
<div class="zhezhao6"></div>
<img src="img/components/b-goods/featured-3.jpg">
<div class="price">
$45,000 MSRP $27,000
</div>
<div class="mi">
<ul>
<li>35,000 mi</li>
<li>Model: 2017</li>
<li>Auto</li>
<li>320 hp</li>
</ul>
</div>
<div class="line5"></div>
<div class="lexus">
<h3><a href="#">Lexus GX 490i Hybird</a></h3>
<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
</p>
</div>
</div>
<div class="msrpbox">
<div class="zhezhao6"></div>
<img src="img/components/b-goods/featured-4.jpg">
<div class="price">
$45,000 MSRP $27,000
</div>
<div class="mi">
<ul>
<li>35,000 mi</li>
<li>Model: 2017</li>
<li>Auto</li>
<li>320 hp</li>
</ul>
</div>
<div class="line5"></div>
<div class="lexus">
<h3><a href="#">Lexus GX 490i Hybird</a></h3>
<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
</p>
</div>
</div>
<div class="msrpbox">
<div class="zhezhao6"></div>
<img src="img/components/b-goods/featured-5.jpg">
<div class="price">
$45,000 MSRP $27,000
</div>
<div class="mi">
<ul>
<li>35,000 mi</li>
<li>Model: 2017</li>
<li>Auto</li>
<li>320 hp</li>
</ul>
</div>
<div class="line5"></div>
<div class="lexus">
<h3><a href="#">Lexus GX 490i Hybird</a></h3>
<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
</p>
</div>
</div>
</div>
</div>
<div class="box6">
<div class="zhezhao2">
<div class="feature white">
<h2>What We Offers</h2>
<p>Tempor incididunt labore dolore duis lorem magna aliqua sed ipsum</p>
<div class="line4"></div>
<div class="line4"></div>
<div class="line4"></div>
</div>
</div>
</div>
<div class="box7">
<div class="balancing">
<img src="./img/general/Radio.svg">
<h3 class="h3x">
The Wheel<br />
<strong>Balancing</strong>
</h3>
<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
</p>
<div class="line6"></div>
</div>
<div class="balancing">
<img src="./img/general/Radio.svg">
<h3 class="h3x">
Transmission<br />
<strong>Installation</strong>
</h3>
<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
</p>
<div class="line6"></div>
</div>
<div class="balancing">
<img src="./img/general/Radio.svg">
<h3 class="h3x">
CarZone<br />
<strong>Painting</strong>
</h3>
<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
</p>
<div class="line6"></div>
</div>
<div class="balancing">
<img src="./img/general/Radio.svg">
<h3 class="h3x">
CarZone<br />
<strong>Inspection</strong>
</h3>
<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
</p>
<div class="line6"></div>
</div>
<div class="box7-1">
<div class="stock">
<h3>3874</h3>
<p class="p">VEHICLES STOCK</p>
<!-- <div class="line6"></div> -->
</div>
<div class="stock">
<h3>299+</h3>
<p class="p">DEALERS SERVED</p>
<!-- <div class="line6"></div> -->
</div>
<div class="stock">
<h3>6403</h3>
<p class="p">HAPPY CUSTOMERS</p>
<!-- <div class="line6"></div> -->
</div>
<div class="stock">
<h3>1450+</h3>
<p class="p">VEHICLES ON SALE</p>
<!-- <div class="line6"></div> -->
</div>
</div>
</div>
<div class="box8">
<div class="zhezhao3">
<div class="feature">
<h2>Recent Cars</h2>
<p>Tempor incididunt labore dolore magna cillium fugiat alique</p>
<div class="line4"></div>
<div class="line4"></div>
<div class="line4"></div>
</div>
<div class="container center">
<div class="ford0">
<div class="ford">
<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
</div>
<div class="ford">
<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
</div>
<div class="ford">
<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
</div>
<div class="ford">
<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
</div>
<div class="ford">
<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
</div>
</div>
<div class="fordpic">
<img src="img/components/b-thumb-slider/img-1.jpg">
<img src="img/components/b-thumb-slider/img-1.jpg">
</div>
</div>
</div>
</div>
<div class="box9">
<div class="motorland center">
<div class="about">
<h2>Recent Cars</h2>
<p>Tempor incididunt labore dolore magna cillium fugiat alique</p>
<div class="line7"></div>
<div class="line7"></div>
<div class="line7"></div>
<div class="visited">
<div class="visited1">
We are a Trusted Name in Auto Industry
</div>
<div class="visited2">
Visited by Million of Car Buyers Every Month!
</div>
<p class="visited3">
MotorLand is aliquip exd ea consequat duis lorem ipsum dolor sit amet consectetur dipis
icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam quis nostrud exercitation.
</p>
<p class="visited3">
Slamco laboris nisi ut aliquip ex ea comdo consequat uis aute irure dolor raeprehenderit
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<a class="btn btn-dark" href="#">Our partners</a>
<a class="btn btn-red" href="#">Our partners</a>
</div>
</div>
<div class="aboutpic">
<img src="./img/content/bg/bg-2.png">
</div>
<div class="frame">
<div class="aboutendpic">
<img src="./img/general/Column.svg">
</div>
<div class="aboutendpic">
<img src="./img/general/Column.svg">
</div>
<div class="aboutendpic">
<img src="./img/general/Column.svg">
</div>
</div>
<div class="aboutend">
<div class="aboutend1">
<div class="aboutend2">
10 Years in Business
</div>
<div class="aboutend3">
MotorLand is nisi aliquip ea consequat duis velit esse cillum dolore fugiat nulla pariatur
excepteur sint occaecat.
</div>
<div class="aboutend4">
</div>
</div>
<div class="aboutend1">
<div class="aboutend2">
Trusted by Auto Buyers
</div>
<div class="aboutend3">
MotorLand is nisi aliquip ea consequat duis velit esse cillum dolore fugiat nulla pariatur
excepteur sint occaecat.
</div>
<div class="aboutend4">
</div>
</div>
<div class="aboutend1">
<div class="aboutend2">
Affordable Auto Prices
</div>
<div class="aboutend3">
MotorLand is nisi aliquip ea consequat duis velit esse cillum dolore fugiat nulla pariatur
excepteur sint occaecat.
</div>
<div class="aboutend4">
</div>
</div>
</div>
</div>
</div>
<div class="tobuy">
<div class="tobuy1">
<div class="tozhe tozhe-red">
<div class="buy">
<h2 class="buy1">
Are You Looking<br />
<strong class="buy2">TO BUY A CAR?</strong>
</h2>
<div class="buy3">
MotorLand is nisi aliquip exa con velit esse cillum dolore fugiatal sint occaecat excepteur
ipsum dolor sit amet consectetur.
</div>
<a class="btn btn-white" href="#">search your car</a>
</div>
</div>
</div>
<div class="tobuy2">
<div class="tozhe tozhe-black">
<div class="buy">
<h2 class="buy1">
Are You Looking<br />
<strong class="buy2">TO BUY A CAR?</strong>
</h2>
<div class="buy3">
MotorLand is nisi aliquip exa con velit esse cillum dolore fugiatal sint occaecat excepteur
ipsum dolor sit amet consectetur.
</div>
<a class="btn btn-white" href="#">search your car</a>
</div>
</div>
</div>
</div>
<div class="team">
<div class="feature">
<h2>Executive Team</h2>
<p>Tempor incididunt duis labore dolore magna aliqua sed ipsum</p>
<div class="line4"></div>
<div class="line4"></div>
<div class="line4"></div>
</div>
<div class="teambox center">
<div class="msrp">
<div class="msrpbox">
<img src="img/components/b-team/group-1_3.jpg">
<div class="price">
Owner & CEO
</div>
<div class="lexus1">
<h3 class="name">William J. Smith</h3>
<div class="euis">
Euis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
excepteur ipsum
</div>
</div>
<div class="mi">
<ul>
<li>FaceBook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>YouTUbe</li>
</ul>
</div>
</div>
<div class="msrpbox">
<img src="img/components/b-team/group-1_1.jpg">
<div class="price">
Senior Manager
</div>
<div class="lexus1">
<h3 class="name">William J. Smith</h3>
<div class="euis">
Euis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
excepteur ipsum
</div>
</div>
<div class="mi">
<ul>
<li>FaceBook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>YouTUbe</li>
</ul>
</div>
</div>
<div class="msrpbox">
<img src="img/components/b-team/group-1_2.jpg">
<div class="price">
Dealers President
</div>
<div class="lexus1">
<h3 class="name">William J. Smith</h3>
<div class="euis">
Euis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
excepteur ipsum
</div>
</div>
<div class="mi">
<ul>
<li>FaceBook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>YouTUbe</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="photo">
<div class="feature">
<h2>Photo Gallery</h2>
<p>Tempor incididunt labore dolore magna cillium fugiat</p>
<div class="line4"></div>
<div class="line4"></div>
<div class="line4"></div>
</div>
</div>
<div class="choose">
<div class="all center">
<ul>
<li><a href="#">ALL</a></li>
<li><a href="#">FOR SALE</a></li>
<li><a href="#">NEW ARRIVALS</a></li>
<li><a href="#">TOP BRANDS</a></li>
<li><a href="#">FERRARI</a></li>
<li><a href="#">MERCEDES</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="choose1">
<ul>
<li><img src="img/content/gallery/384x300/1.jpg"></li>
<li><img src="img/content/gallery/384x300/2.jpg"></li>
<li><img src="img/content/gallery/384x300/3.jpg"></li>
<li><img src="img/content/gallery/384x300/4.jpg"></li>
<li><img src="img/content/gallery/384x300/5.jpg"></li>
<li><img src="img/content/gallery/384x300/6.jpg"></li>
<li><img src="img/content/gallery/384x300/7.jpg"></li>
<li><img src="img/content/gallery/384x300/8.jpg"></li>
<li><img src="img/content/gallery/384x300/9.jpg"></li>
<li><img src="img/content/gallery/384x300/10.jpg"></li>
<div class="clear">
</div>
</ul>
</div>
</div>
<div class="topmake">
<div class="motorland center ">
<div class="about">
<h2>Top Car Makes</h2>
<p>We have large number of Cars available, here you can browse by Make!</p>
<div class="line7"></div>
<div class="line7"></div>
<div class="line7"></div>
<div class="remeo">
<div class="alfa">
<ul>
<li><a href="#">Alfa Romeo(256)</a></li>
<li><a href="#">Alpine(157)</a></li>
<li><a href="#">Alpine(145)</a></li>
<li><a href="#">Aston Martin(456)</a></li>
<li><a href="#">Audi(856)</a></li>
<li><a href="#">Bently(125)</a></li>
<li><a href="#">BMW(562)</a></li>
<li><a href="#">Bugatti(562)</a></li>
</ul>
</div>
<div class="alfa">
<ul>
<li><a href="#">Alfa Romeo(256)</a></li>
<li><a href="#">Alpine(157)</a></li>
<li><a href="#">Alpine(145)</a></li>
<li><a href="#">Aston Martin(456)</a></li>
<li><a href="#">Audi(856)</a></li>
<li><a href="#">Bently(125)</a></li>
<li><a href="#">BMW(562)</a></li>
<li><a href="#">Bugatti(562)</a></li>
</ul>
</div>
<div class="alfa">
<ul>
<li><a href="#">Alfa Romeo(256)</a></li>
<li><a href="#">Alpine(157)</a></li>
<li><a href="#">Alpine(145)</a></li>
<li><a href="#">Aston Martin(456)</a></li>
<li><a href="#">Audi(856)</a></li>
<li><a href="#">Bently(125)</a></li>
<li><a href="#">BMW(562)</a></li>
<li><a href="#">Bugatti(562)</a></li>
</ul>
</div>
<div class="clear"></div>
<a class="btn btn-red" href="#">OSee all brands</a>
</div>
</div>
<div class="rental">
<div class="rental1">Best & Low Cost</div>
<div class="rental2">CAR RENTAL</div>
<div class="rental3">We have Effective and Efficient Vehicles for Car Rental to meet all your needs!
</div>
<ul>
<li>Instant Quotes</li>
<li>Unlimited Mileage</li>
<li>No Booking Fees or Hidden Costs</li>
<li>Hassle-Free Service</li>
<li>Guranteed Reservations</li>
</ul>
<div class="checkbox0">
<div class="checkbox">
<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
</div>
<div class="checkbox">
<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
</div>
<div class="checkbox">
<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
</div>
<div class="checkbox">
<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
</div>
<div class="checkbox">
<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
</div>
</div>
</div>
</div>
</div>
<div class="will">
<div class="tozhe tozhe-black">
</div>
</div>
<div class="will1">
<div class="will-1">
<div class="will-2">
<img src="img/components/b-blockquote/face-1.jpg">
</div>
<div class="will-3">
<img src="./img/components/b-blockquote/ic-quotes.png">
</div>
<div class="will-4">
<div class="line9"></div>
<div class="lexus">
<h3><a href="#">James Liam</a></h3>
<span>Quality Assurance Manager</span>
<p>Motorland uis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
excepteur ipsum et dolore magna aliqua. Ut enim minim veniam quis nostrud exercitation
ullamco.</p>
</div>
</div>
</div>
<div class="will-1">
<div class="will-2">
<img src="img/components/b-blockquote/face-2.jpg">
</div>
<div class="will-3">
<img src="./img/components/b-blockquote/ic-quotes.png">
</div>
<div class="will-4">
<div class="line9"></div>
<div class="lexus">
<h3><a href="#">Nick William</a></h3>
<span>Quality Assurance Manager</span>
<p>Motorland uis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
excepteur ipsum et dolore magna aliqua. Ut enim minim veniam quis nostrud exercitation
ullamco.</p>
</div>
</div>
</div>
</div>
<div class="latest">
<div class="zhezhao4">
<div class="feature">
<h2>Latest News</h2>
<p>Tempor incididunt labore dolore magna clium fugiat alique</p>
<div class="line4"></div>
<div class="line4"></div>
<div class="line4"></div>
</div>
<div class="post0">
<div class="post">
<div class="postpic">
<img src="img/content/posts/360x250/1.jpg">
</div>
<div class="postpic1">
<img src="img/content/posts/face/76x76_1.jpg">
</div>
<div class="post1">
<div class="line9"></div>
<div class="lexus w300">
<h3><a href="#">Ford Motors overhauled its design team </a></h3>
<p>Duis aute irure reprehender voluptate velits fugiat nulla pariatur excepteur ipsum
doloe amet consecteur adipisicing elit.</p>
</div>
</div>
</div>
<div class="post">
<div class="postpic">
<img src="img/content/posts/360x250/2.jpg">
</div>
<div class="postpic1">
<img src="img/content/posts/face/76x76_2.jpg">
</div>
<div class="post1">
<div class="line9"></div>
<div class="lexus w300">
<h3><a href="#">Ford Motors overhauled its design team </a></h3>
<p>Duis aute irure reprehender voluptate velits fugiat nulla pariatur excepteur ipsum
doloe amet consecteur adipisicing elit.</p>
</div>
</div>
</div>
<div class="post">
<div class="postpic">
<img src="img/content/posts/360x250/3.jpg">
</div>
<div class="postpic1">
<img src="img/content/posts/face/76x76_3.jpg">
</div>
<div class="post1">
<div class="line9"></div>
<div class="lexus w300">
<h3><a href="#">Ford Motors overhauled its design team </a></h3>
<p>Duis aute irure reprehender voluptate velits fugiat nulla pariatur excepteur ipsum
doloe amet consecteur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="last">
<div class="auto">
<div class="zhezhao5"></div>
<img src="img/components/b-brands/4.jpg">
</div>
<div class="auto">
<div class="zhezhao5"></div>
<img src="img/components/b-brands/5.jpg">
</div>
<div class="auto">
<div class="zhezhao5"></div>
<img src="img/components/b-brands/6.jpg">
</div>
<div class="auto">
<div class="zhezhao5"></div>
<img src="img/components/b-brands/1.jpg">
</div>
<div class="auto">
<div class="zhezhao5"></div>
<img src="img/components/b-brands/2.jpg">
</div>
<div class="auto">
<div class="zhezhao5"></div>
<img src="img/components/b-brands/3.jpg">
</div>
</div>
<div class="end">
<div class="tozhe black1">
<div class="end-1">
<img src="./img/general/logo.png">
<p>Duis aute irure reprehend voluptate velit ese acium fugiat nula pariatur exceptus ipsum dolor sit
amet consectetur adipisic elita sed eiusmod tempor.</p>
<img src="./img/general/Snipaste_2021-09-28_17-30-26.png">
</div>
<div class="end-2">
<div class="end-tit">
<h2><span>—</span>TOP BRANDS</h2>
</div>
<div class="end-2-1">
<ul>
<li><span>></span>Alfa Romeo</li>
<li><span>></span>Ferrari</li>
<li><span>></span>BMW Series</li>
<li><span>></span>Mercedes</li>
<li><span>></span>Aston Martin</li>
<li><span>></span>Toyota</li>
</ul>
</div>
<div class="end-2-1">
<ul>
<li><span>></span>Alfa Romeo</li>
<li><span>></span>Ferrari</li>
<li><span>></span>BMW Series</li>
<li><span>></span>Mercedes</li>
<li><span>></span>Aston Martin</li>
</ul>
</div>
</div>
<div class="end-3">
<div class="end-tit">
<h2><span>—</span>CATEGORIES</h2>
</div>
<div class="end-2-1">
<ul>
<li><span></span></li>
</ul>
</div>
<div class="end-2-1">
<ul>
<li><span>></span>Alfa Romeo</li>
<li><span>></span>Ferrari</li>
<li><span>></span>BMW Series</li>
<li><span>></span>Mercedes</li>
<li><span>></span>Aston Martin</li>
</ul>
</div>
</div>
<div class="end-4">
<div class="end-tit">
<div id="tit">
<span>—</span> ADDRESSINFORMATION
</div>
<h4>Call us<span>(042) 789 35490</span></h4>
</div>
<div class="end-2-1">
<ul>
<li><span></span></li>
</ul>
</div>
<div class="end-2-1">
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span><img
src="img/general/Snipaste_2021-09-27_09-50-47.png"></span>support@motorland.com
</li>
<li><span><img src="./img/general/map-marker.png"></span>Fairview Ave, El Monte, CA, 91732
</li>
<li><span><img src="./img/general/map-marker.png"></span>Mon - Fri : 0900am to 0600pm</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>