@charset "UTF-8";
@font-face {font-family: "Haval-300"; src: url('font/Haval-300.eot'); src: url('font/Haval-300.eot?#iefix') format('embedded-opentype'), url('font/Haval-300.woff') format('woff'), url('font/Haval-300.ttf')  format('truetype');}
@font-face {font-family: "Haval-400"; src: url('font/Haval-400.eot'); src: url('font/Haval-400.eot?#iefix') format('embedded-opentype'), url('font/Haval-400.woff') format('woff'), url('font/Haval-400.ttf')  format('truetype');}
@font-face {font-family: "Haval-500"; src: url('font/Haval-500.eot'); src: url('font/Haval-500.eot?#iefix') format('embedded-opentype'), url('font/Haval-500.woff') format('woff'), url('font/Haval-500.ttf')  format('truetype');}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; 
}

html, body {font:400 12px/12px "Haval-400", sans-serif; margin:0px; padding:0px; background-color: #ffffff; color: #000000; width:100%; height:100vh; scrollbar-width: thin; scrollbar-color: #000000 #cccccc; overflow-x: hidden; }

.container {width:100%; max-width:1170px;}

.desktop header {display:block; position:fixed; top:0px; left:0px; width:100%; background: #000000; color:#ffffff; text-align: center; border-bottom: 1px solid rgb(255,255,255,0.2); height:75px;}
.desktop header .container {padding: 14px 0px 0px 0px; display: inline-block; text-align: center;}
.desktop header .container div {width:32%; float:left; display:block; padding:0px 0px; height:42px; padding:0px 0.5%;}
.desktop header .logo * {float:left}
.desktop header .logo .spacer{display:block; width:1px; height:22px; margin:20px 16px 0px 16px; background-color:#ffffff;}
.desktop header .phone {font:400 15px/15px "Haval-500", sans-serif; text-align:center;}





.desktop menu {display:block;  position:fixed; top:76px; left:0px;  width:100%; height:33px; background: #000000; color:#ffffff; text-align: center; margin:0px;}
.desktop menu .container {padding: 0px; display: inline-block; text-align: center; text-align:left;}
.desktop menu ul {width:100%; text-align:left;}
.desktop menu ul li:not(:last-child) {float:left; width:auto; line-height:33px; list-style:none; margin-right:8px;}
.desktop menu ul li a{font:400 12px/12px "Haval-400", sans-serif; color:#ffffff; text-decoration:none;} 

.desktop .content {display:inline-block; margin:100px 0px;}


.desktop .content .banner {display:block; height:756px;}






.haval {
  background-color: #ffffff;
  width: 100%;
  min-width: 1920px;
  min-height: 2026px;
  position: relative;
}

.haval .div-content {
  position: absolute;
  height: calc(100% - 1270px);
  top: 105px;
  left: 0;
  width: 1920px;
  background: url(https://c.animaapp.com/mp5yzaikh4xZ0q/img/div-content.png) 50%
    50% / cover;
}

.haval .view {
  position: absolute;
  top: 63px;
  left: 390px;
  width: 1144px;
  height: 148px;
}

.haval .rectangle {
  position: absolute;
  top: 0;
  left: 1px;
  width: 1140px;
  height: 148px;
  backdrop-filter: blur(5.3px) brightness(100%);
  -webkit-backdrop-filter: blur(5.3px) brightness(100%);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 39%,
    rgba(0, 0, 0, 0.5) 62%,
    rgba(0, 0, 0, 0) 100%
  );
}

.haval .text-wrapper {
  position: absolute;
  top: 17px;
  left: calc(50% - 448px);
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Raleway", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 55px;
  white-space: nowrap;
}

.haval .div {
  position: absolute;
  top: 82px;
  left: calc(50% - 423px);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Raleway", Helvetica;
  font-weight: 500;
  color: #00cabf;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.haval .div-wrapper {
  position: absolute;
  top: calc(50% - 143px);
  left: calc(50% - 187px);
  width: 374px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00cabf;
}

.haval .text-wrapper-2 { display: flex;
align-items: center; justify-content: center;
margin-top: ipx; height: 19px;
margin-left: -Ipx; width: 329px;
font-family: "Raleway", Helvetica font-weight: 500;
color: #ffffff; font-size: 16px;
text-align: center; letter-spacing: 0; line-height: normal;
white-space: nowrap;}

.haval .div-block { position: absolute;
width: 100%; top: 861px; left: 0;
height: 205px;
background-color: #f2f2f2;}


.haval .p {
position: absolute;
top: 35px;
left: 390px;
width: 554px;
height: 19px;
display: flex;
align-items: center;
font-family: "Raleway", Helvetica;
font-weight: 400;
color: #000000;
font-size: 16px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;
}
.haval .image {
position: absolute;
top: 57px;
left: 379px;
width: 571px;
height: 130px;
object-fit: cover;}

.haval .link {
position: absolute;
top: calc(50% - 36px);
left: 1063px;
width: 467px;
height: 70px;
display: flex;
justify-content: center;
background-color: #00cabf;
}


.haval .text-wrapper-3 { display: flex;
align-items: center; justify-content: center;
margin-top: 25px;
width: 329px;
height: 19px;
margin-left: 10px;
font-family: "Raleway", Helvetica;
font-weight: 500;
color: #ffffff;
font-size: 16px;
text-align: center; letter-spacing: 0;
line-height: normal;
white-space: nowrap;}

.haval .header { position: absolute;
width: 100%;
top: 0;
left: 0;
height: 76px;
display: flex;
justify-content: center;
background-color: #000000;
border-top-style: none; border-right-style: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-style: none; border-color: #ffffff33;
}

.haval .div-logo-wrap {
width: 307px;
align-self: center;
margin-left: 15px;
display: flex;
gap: 16px;}

.haval .png {
height: 42px;
width: 162px;
align-self: center;
display: flex;
background: url("https://c.animaapp.com/mp5yzaikh4xZ0q/img/logol-png.png") 50% 50% / cover;}

.haval .text-wrapper-4 {
display: flex;
align-items: center;
margin-top: 2px;
width: 155px;
height: 13px;
margin-left: Ipx;
font-family: "Raleway", Helvetica;
font-weight: 400;
color: #ffffff;
font-size: llpx;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;}

.haval .rectangle-2 {
margin-top: 22px;
width: ipx;
height: 22px;
background-color: #ffffff;}

.haval .logo-png {
height: 48px;
width: 112px;
align-self: center;
background-image: url("https://c.animaapp.com/mp5yzaikh4xZ0q/img/logo2-png.png"); background-size: cover;
background-position: 50% 50%;}

.haval .group {
margin-top: 12px;
width: 240px;
margin-left: 97px;
display: flex;
gap: 10px;}

.haval .view-2 {
height: 24px;
width: 21px;
align-self: center;
background-image: url("https://c.animaapp.com/mp5yzaikh4xZ0q/img/—.png");
background-size: cover;
background-position: 50% 50%;}

.haval .link-2 {
display: flex;
align-items: center;
margin-top: 3px;
width: 207px;
height: 17px;
font-family: "Raleway", Helvetica;
font-weight: 500;
color: #ffffff;
font-size: 15px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;}

.haval .group-2 {
margin-top: 9px;
width: 401px;
margin-left: 96px;
display: flex;
gap: 10px;}

.haval .div-top-addr {
height: 28px;
width: 17px;
align-self: center;
background-image: url("https://c.animaapp.com/mp5yzaikh4xZ0q/img/div-top-addr.png"); background-size: cover;
background-position: 50% 50%;}

.haval .group-3 {
width: 378px;
height: 30px;
display: flex;
flex-direction: column; gap: 1px;}

.haval .text-wrapper-5 { display: flex;
align-items: center;
width: 374px;
height: 15px;
font-family: "Raleway", Helvetica;
font-weight: 400;
color: #ffffff;
font-size: 13px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;}

.haval .text-wrapper-6 { display: flex;
align-items: center;
width: 248px;
height: 14px;
font-family: "Raleway", Helvetica;
font-weight: 400;
color: #ffffff;
font-size: 12px;
white-space: nowrap; letter-spacing: 0;
line-height: normal;}

.haval .navbar { position: absolute;
width: 100%;
top: 76px;
left: 0;
height: 33px;
display: flex;
background-color: #000000;}

.haval .link-m {width: 24px;
margin-left: 390px;
font-family: "Raleway", Helvetica;
font-weight: 500;
font-size: 10.7px;
display: flex; align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff; letter-spacing: 0; line-height: normal;}

.haval .link-DARGO-x { display: flex;
align-items: center;
margin-top: 10px;
width: 70px;
height: 13px;
margin-left: 13px;
font-family: "Raleway", Helvetica;
font-weight: 500; color: #ffffff;
font-size: 10.7px; letter-spacing: 0; line-height: normal;}
.haval .link-DARGO { width: 55px;
margin-left: 14px;
font-family: "Raleway", Helvetica;
font-weight: 500;
font-size: 10.7px;
display: flex; align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff; letter-spacing: 0; line-height: normal;
}

.haval .link-JOLION {
width: 62px;
margin-left: 14px;
font-family: "Raleway", Helvetica;
font-weight: 500;
font-size: 10.7px;
display: flex;
align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff;
letter-spacing: 0;
line-height: normal;}

.haval .link-fx {
width: 29px;
margin-left: 14px;
font-family: "Raleway", Helvetica;
font-weight: 500;
font-size: 10.7px;
display: flex;
align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff;
letter-spacing: 0;
line-height: normal;}

.haval .link-f {
width: 20px;
margin-left: 13px;
font-family: "Raleway", Helvetica;
font-weight: 500;
font-size: 10.8px;
display: flex;
align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff;
letter-spacing: 0;
line-height: normal;}

.haval .link-h { width: 22px;
margin-left: 14px;
font-family: "Raleway", Helvetica;
font-weight: 500;
font-size: 10.7px;
display: flex; align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff; letter-spacing: 0; line-height: normal;}

.haval .link-GWM-poer { display: flex;
align-items: center;
margin-top: 10px;
width: 78px;
height: 13px;
margin-left: 13px;
font-family: "Raleway", Helvetica;
font-weight: 500; color: #ffffff;
font-size: 10.7px; letter-spacing: 0; line-height: normal;}

.haval .link-GWM-poer-2 { display: flex;
align-items: center;
margin-top: 10px;
width: 168px;
height: 13px;
margin-left: 14px;
font-family: "Raleway", Helvetica;
font-weight: 500; color: #ffffff;
font-size: 10.7px; letter-spacing: 0; line-height: normal;}

.haval .link-3 { display: flex;
align-items: center;
margin-top: 10px;
width: 234px;
height: 13px;
margin-left: 54px;
font-family: "Raleway", Helvetica;
font-weight: 400;
color: #ffffff;
font-size: llpx;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;}

.haval .link-4 { width: 102px;
margin-left: 13px;
font-family: "Raleway", Helvetica;
font-weight: 400;
font-size: llpx;
white-space: nowrap;
display: flex;
align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff;
letter-spacing: 0;
line-height: normal;}

.haval .link-5 { width: 87px;
margin-left: 13px;
font-family: "Raleway", Helvetica;
font-weight: 400;
font-size: llpx;
white-space: nowrap;
display: flex;
align-items: center;
margin-top: 10px;
height: 13px;
color: #ffffff;
letter-spacing: 0;
line-height: normal;}


.haval .div-widget { position: absolute; top: 987px;
left: 48px;
width: 70px;
height: 70px; background-color: #000001; border-radius: 100px;
opacity: 0.2;}

.haval .div-b-widget { position: absolute;
top: 994px;
left: 55px;
width: 56px;
height: 56px;}

.haval .view-3 { position: absolute;
top: 1122px;
left: 970px;
width: 560px;
height: 885px;}

.haval .rectangle-3 { position: absolute;
width: 100%;
height: 97.51%;
top: 2.49%; left: 0;
background-color: #f2f2f2;}

.haval .rectangle-4 { position: absolute;
width: 85.71%;
height: 40.23%;
top: 6.89%;
left: 7.14%; background-color: #ffffff; border: Ipx solid;
border-color: #00000033;}

.haval .mask-group {
position: absolute;
width: 85.71%;
height: 40.23%;
top: 6.89%;
left: 7.14%;}

.haval .list-item-jpg {
width: 83.39%;
height: 27.01%;
top: 19.44%;
background-image: url(https://c.animaapp.com/mp5yzaikh4xZ0q/img/list— item—3-jpg.png);
background-size: cover;
background-position: 50% 50%;
position: absolute;
left: 7.14%;}

.haval .view-4 {
position: absolute;
width: 27.32%;
height: 3.16%;
top: 9.94%;
left: 61.25%;}

.haval .text-wrapper-7 {
position: absolute;
width: 76.47%;
height: 100%;
top: 0;
left: 23.53%;
display: flex;
align-items: center;
font-family: "Raleway", Helvetica;
font-weight: 300;
color: #000000;
font-size: 12px;
letter-spacing: 0;
line-height: normal;}

.haval .lets-icons-filter { position: absolute;
width: 18.3%; height: 100%; top: 0; left: 0;}

.haval .img { position: absolute; height: 3.16%; top: 49.27%;
left: calc(50% - 80px); width: 167px;}

.haval .view-5 { position: absolute; width: 33.75%; height: 4.75%; top: 0;
left: 59.11%;}

.haval .rectangle-5 { position: absolute; width: 98.94%; height: 100%; top: 0; left: 0;}

.haval .element { position: absolute; width: 54.5%;
height: 33.33%;
top: 33.33%; left: 22.22%; display: flex; align-items: center; justify-content: center;
font-family: "Raleway", Helvetica; font-weight: 500;
color: #ffffff; font-size: 12px; text-align: center; white-space: nowrap; letter-spacing: 0; line-height: normal;}

.haval .frame { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 20px;
position: absolute;
top: 85px; left: 64px;}

.haval .list-item-HAVAL { position: relative;
display: flex; align-items: center;
width: fit-content;
margin-top: -Ipx;
font-family: "Raleway", Helvetica; font-weight: 500;
color: #000000;
font-size: 22px; letter-spacing: 0; line-height: 30.6px;
white-space: nowrap;}

.haval .list-item { position: relative; display: flex;
align-items: center; width: fit-content;
font-family: "Raleway", Helvetica; font-weight: 400;
color: transparent;
font-size: 20px; letter-spacing: 0; line-height: normal;
white-space: nowrap;}

.haval .span { font-weight: 300; color: #000000;}

.haval .text-wrapper-8 { font-family: "Raleway", Helvetica; font-weight: 500;
color: #00cabf;}

.haval .list-item-link {
width: 85.71%;
height: 6.78%;
top: 72.88%;
display: flex;
justify-content: center;
background-color: var(--blue);
position: absolute;
left: 7.14%;}

.haval .text-wrapper-9 {
display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
width: 212px;
height: 16px;
font-family: "Raleway", Helvetica;
font-weight: 500;
color: #ffffff;
font-size: 13.6px;
text-align: center;
white-space: nowrap;
letter-spacing: 0;
line-height: normal;}

.haval .list-item-link-2 {
top: 80.79%;
background-color: var(--black);
position: absolute;
width: 85.71%;
height: 6.78%;
left: 7.14%;
display: flex;
justify-content: center;}

.haval .text-wrapper-10 { display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
width: 297px;
height: 16px;
margin-left: Ipx;
font-family: "Raleway", Helvetica;
font-weight: 500;
color: #ffffff;
font-size: 13.6px;
text-align: center;
white-space: nowrap; letter-spacing: 0;
line-height: normal;}

.haval .list-item-link-3 { top: 88.7%;
border: Ipx solid;
border-color: #000000;
position: absolute;
width: 85.71%;
height: 6.78%;
left: 7.14%;
display: flex;
justify-content: center;}

.haval .text-wrapper-11 { display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
width: 297px;
height: 16px;
margin-left: Ipx;
font-family: "Raleway", Helvetica;
font-weight: 500;
color: #000000;
font-size: 13.6px;
text-align: center;
white-space: nowrap; letter-spacing: 0;
line-height: normal;}


.haval .view-6 { position: absolute; width: 84.29%; height: 12.77%; top: 56.5%; left: 8.57%;}

.haval .group-4 { position: absolute; top: 0; left: 0;
width: 183px; height: 31px;}

.haval .text-wrapper-12 { position: absolute; width: 77.05%; height: 90.32%; top: 9.68%;
left: 21.86%;
font-family: "Raleway", Helvetica; font-weight: 300;
color: #000000; font-size: 12px; letter-spacing: 0; line-height: normal;}

.haval .lets-icons-filter-2 { width: 15.3%;
height: 90.32%; position: absolute; top: 0;
left: 0;}

.haval .group-5 { position: absolute; top: 0; left: 236px;
width: 226px; height: 31px;}

.haval .text-wrapper-13 { position: absolute;
width: 81.42%;
height: 90.32%;
top: 9.68%;
left: 17.7%;
display: flex;
align-items: center;
font-family: "Raleway", Helvetica;
font-weight: 300;
color: #000000;
font-size: 12px;
letter-spacing: 0;
line-height: normal;}

.haval .lets-icons-filter-3 { width: 12.39%;
height: 90.32%;
position: absolute;
top: 0;
left: 0;}

.haval .group-6 { position: absolute;
top: 44px;
left: 0;
width: 189px;
height: 28px;}

.haval .text-wrapper-14 { position: absolute;
width: 77.78%;
height: 50%;
top: 25%;
left: 21.16%;
display: flex;
align-items: center;
font-family: "Raleway", Helvetica;
font-weight: 300;
color: #000000;
font-size: 12px;
letter-spacing: 0;
line-height: normal;}


.haval .lets-icons-filter-4 {
width: 14.81%;
height: 100%;
position: absolute;
top: 0;
left: 0;}

.haval .group-7 { position: absolute;
top: 44px;
left: 236px;
width: 238px;
height: 28px;}

.haval .text-wrapper-15 { position: absolute;
width: 82.35%;
height: 50%;
top: 25%;
left: 16.81%;
display: flex;
align-items: center;
font-family: "Raleway", Helvetica;
font-weight: 300;
color: #000000;
font-size: 12px;
white-space: nowrap; letter-spacing: 0;
line-height: normal;}

.haval .lets-icons-filter-5 {
width: 11.76%;
height: 100%;
position: absolute;
top: 0;
left: 0;}

.haval .group-8 { position: absolute;
top: 85px;
left: 0;
width: 233px;
height: 28px;}


.haval .element-2 { position: absolute; width: 81.97%; height: 100%; top: 0; left: 17.17%; font-family: "Raleway”, Helvetica; font-weight: 300; color: #000000; font-size: 12px; letter-spacing: 0; line-height: normal;}

.haval .lets-icons-filter-6 { width: 12.02%; height: 100%; position: absolute; top: 0; left: 0;}

.haval .view-7 { position: absolute; top: 1122px; left: 379px; width: 560px; height: 885px;}

.haval .list-item-jpg-2 { position: absolute; width: 83.39%; height: 27.01%; top: 19.44%; left: 7.14%;
background-image: url(https://c.animaapp.com/mp5yzaikh4xZ0q/img/list—item—3-jpg-1.png); background-size: cover; background-position: 50% 50%;}

.haval .image-2 { position: absolute; height: 3.16%; top: 49.27%; left: calc(50% - 58px); width: 123px;}



.haval .element-3 { position: absolute; width: 77.78%; height: 66.67%; top: 16.67%; left: 10.58%;
font-family: "Raleway", Helvetica font-weight: 500;
color: transparent; font-size: 12px;
text-align: center; letter-spacing: 0; line-height: normal;}

.haval .text-wrapper-16 { color: #ffffff;}

.haval .text-wrapper-17 { color: #000000;}

.haval .view-8 { position: absolute; width: 84.64%; height: 12.99%; top: 56.27%; left: 8.21%;}

.haval .view-9 { position: absolute; top: 0; left: 0;
width: 185px; height: 33px;}


.haval .text-wrapper-18 { position: absolute;
width: 76.22%;
height: 84.85%;
top: 15.15%;
left: 22.7%;
font-family: "Raleway", Helvetica;
font-weight: 300;
color: #000000;
font-size: 12px;
letter-spacing: 0;
line-height: normal;}

.haval .lets-icons-filter-7 { width: 17.3%;
height: 96.97%;
position: absolute;
top: 0;
left: 0;}

.haval .group-9 { position: absolute;
top: 2px;
left: 238px;
width: 226px;
height: 31px;}

.haval .group-10 { position: absolute;
top: 46px;
left: 2px;
width: 189px;
height: 28px;}

.haval .group-11 { position: absolute;
top: 46px;
left: 238px;
width: 238px;
height: 28px;}


.haval .group-12 { position: absolute; top: 87px; left: 2px;
width: 233px; height: 28px;}

.haval .img-2 { top: 1624px; left: 445px; position: absolute; width: 53px;
height: 59px; object-fit: cover;}

.haval .img-3 { top: 1474px; left: 749px; position: absolute; width: 53px;
height: 59px; object-fit: cover;}