html {
font-size: 1vw;
}
* {
box-sizing: border-box;
}
.ac-rtl {
direction: rtl;
}
.ac-en {
font-family: HyundaiSansHead-Regular;
direction: ltr;
}
body {
font-family: "AlmoniDLAAA";
}
.ac-img-responsive {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.ac-container {
width: 60rem;
margin: 0 auto;
}
.slick-slider {
width: 100%;
}
/* Header */
header {
width: 100%;
height: 3.5rem;
height: 8vh;
display: flex;
justify-content: center;
align-items: center;
}
header .ac-container-flued {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: row;
}
header .ac-container-flued .ac-col {
display: flex;
justify-content: center;
align-items: center;
}
header .ac-container-flued .ac-col-1 {
width: 70%;
}
header .ac-container-flued .ac-col-2 {
width: 30%;
}
header .ac-container-flued .ac-col-3 {
display: none;
}
header .ac-container-flued .ac-col-2 .ac-hyundai-logo {
width: 10.4rem;
}
header .ac-container-flued .ac-col-1 a {
font-family: HyundaiSansHead-Regular;
font-weight: 900;
font-size: 2rem;
}
#nav-mob {
display: none;
}
/* End Header */
/* Section Opening */
#ac-opening {
display: flex;
justify-content: space-between;
height: 86vh;
}
#ac-opening .ac-col {
display: flex;
}
#ac-opening .ac-col-3 {
display: none;
}
#ac-opening .ac-col-1 {
width: 70%;
position: relative;
}
#ac-opening .ac-col-1 .ac-slider-titles-wrapper {
position: absolute;
top: 1.7rem;
z-index: 1;
right: 3rem;
color: #fff;
}
#ac-opening .ac-col-1 .ac-slider-2 .ac-slider-titles-wrapper,
#ac-opening .ac-col-1 .ac-slider-1 .ac-slider-titles-wrapper {
right:unset;
left: 3rem;
}
#ac-opening .ac-col-1 .ac-slider-titles-wrapper .ac-title {
font-size: 2.5rem;
font-weight: 600;
line-height: 1.1;
direction: rtl;
text-align: right;
}
#ac-opening .ac-col-1 .ac-slider-titles-wrapper .ac-title .ac-en {
font-weight: 600;
}
#ac-opening .ac-col-1 .ac-sliderlaw {
position: absolute;
bottom: 1rem;
right: 3rem;
color: #fff;
text-align: right;
font-size: 1.2rem;
}
#ac-opening .ac-col-1 .ac-sliderlaw span {
text-shadow: 0.05vw 0.05vw 0.2vw #000;
display: block;
}
#ac-opening .ac-col-1 .slick-dotted.slick-slider {
margin-bottom: 0;
width: 100%;
}
#ac-opening .ac-col-1 .slick-slider .slick-list,
#ac-opening .ac-col-1 .slick-slider .slick-track,
#ac-opening .ac-col-1 .slick-slider picture,
#ac-opening .ac-col-1 .slick-slider picture img {
width: 100%;
height: 100%;
}
#ac-opening .ac-col-1 .slick-slider picture img {
object-fit: cover;
}
#ac-opening .ac-col-2 {
width: 30%;
}
#ac-opening .slick-dots {
display: none;
}
/* Form Desktop */
#ac-opening .ac-col-2 .ac-form-wrapper {
width: 100%;
background-color: #e4dbd2;
display: block;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-form-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#ac-opening .ac-col-2 .ac-form-wrapper .form {
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80%;
}
#ac-opening .ac-col-2 .ac-form-wrapper .form input,
#ac-opening .ac-col-2 .ac-form-wrapper .form select {
height: 6vh;
width: 100%;
margin-bottom: 1.5vh;
border: 0;
padding-right: 1rem;
color: #000;
font-family: "AlmoniDLAAA";
font-size: 1.2rem;
direction: rtl;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-title {
text-align: center;
font-size: 2rem;
margin-bottom: 2vh;
font-weight: 700;
}
::-webkit-input-placeholder,
select::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #000;
}
::-moz-placeholder,
select::-moz-placeholder {
/* Firefox 19+ */
color: #000;
}
:-ms-input-placeholder,
select:-ms-input-placeholder {
/* IE 10+ */
color: #000;
}
:-moz-placeholder,
select:-moz-placeholder {
/* Firefox 18- */
color: #000;
}
.ac-checkbox-wrapper {
display: flex;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-checkbox-div {
width: 2.5rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0.5rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-checkbox-div input {
height: 100%;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-checkbox-wrapper {
display: flex;
align-items: flex-start;
margin-top: 1vh;
}
#ac-opening .ac-col-2 .ac-form-wrapper .label-wrapper {
position: relative;
top: -0.4rem;
font-size: 0.9rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-leagal-v2 {
display: block;
position: relative;
top: 0.5rem;
right: -2rem;
margin-bottom: 2rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-button-wrapper {
width: 70%;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-button-wrapper button {
width: 100%;
background: #002c5f;
font-weight: 400;
border: 0;
color: #fff;
font-size: 1.7rem;
padding: 0.3rem 0.5rem 0.5rem;
}
/* End Form Desktop */
.slick-next, .slick-prev {
width: 1.3rem;
height: auto;
top: 50%;
z-index: 1;
}
.slick-next {
right: 3rem;
}
.slick-prev {
left: 2rem;
}
/* End Section Opening */
#ac-part-1 {
padding: 1rem;
font-size: 1.4rem;
text-align: center;
}
/* Navigator Desktop */
#ac-nav-desk,
#ac-nav-desk .ac-container,
#ac-nav-desk nav,
#ac-nav-desk ul,
#ac-nav-desk li,
#ac-nav-desk a {
display: flex;
justify-content: center;
align-items: center;
height: 6vh;
}
#ac-nav-desk {
background-color: #002c5f;
z-index: 1;
}
#ac-nav-desk nav,
#ac-nav-desk ul {
width: 100%;
}
#ac-nav-desk ul li {
width: 20%;
}
#ac-nav-desk ul li a {
color: #fff;
text-decoration: none;
width: 100%;
transition: background-color 0.5s, color 0.5s;
}
#ac-nav-desk ul li a:hover {
color: #002c5f;
background-color: #fff;
}
/* End Navigator Desktop */
.slick-slide {
display: block;
position: relative;
}
/* More Info */
#ac-more-info {
width: 100%;
background: #f7f3f2;
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
}
#ac-more-info .ac-container {
margin: auto;
display: flex;
flex-direction: column;
}
#ac-more-info h1 {
margin: 0.5rem auto 2.5rem auto;
font-size: 2rem;
font-weight: 900;
}
#ac-more-info .ac-wrapper-bnts {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
align-items: center;
}
#ac-more-info .ac-wrapper-bnts a {
font-size: 1.5rem;
padding: 0.5rem 2rem 0.5rem;
margin: 0 1rem 1rem;
}
#ac-more-info .ac-wrapper-bnts a.ac-tohyundai {
background-color: #012c5f;
}
#ac-more-info .ac-wrapper-bnts a.ac-tomifrat {
background-color: #e3dcd2;
}
/* End More Info */
/* Footer */
footer .ac-row-1 {
background-color: #1c1c1c;
display: flex;
justify-content: space-between;
height: 4rem;
}
footer .ac-row-1 .ac-col {
width: 33.33%;
}
footer .ac-row-1 .ac-col-1 {
justify-content: center;
display: flex;
align-items: center;
padding-right: 2rem;
}
footer .ac-row-1 .ac-col-3 {
display: flex;
justify-content: flex-start;
align-items: center;
/* display: none; */
}
footer .ac-row-1 .ac-col-3.ac-show-on-mobile {
display: none;
}
footer .ac-row-1 .ac-col-2 {
display: flex;
justify-content: flex-end;
align-items: center;
}
footer .ac-social {
width: 2.5rem;
margin: 0 0.5rem;
}
footer .ac-logo-h {
width: 4.5rem;
margin-left: 4rem;
}
footer .ac-colmobile {
width: 7.3rem;
margin-right: 4.5rem;
}
footer .ac-row-2 {
justify-content: center;
align-items: center;
height: 3.5rem;
}
footer .ac-row-2 p {
font-size: 1.5rem;
}
footer .ac-row-2 .ac-polution,
footer .ac-row-2 .ac-safety {
padding: 0 0.6vw 0.2vw 0.6vw;
display: none
}
footer .ac-row-2 .ac-polution.ac-active,
footer .ac-row-2 .ac-safety.ac-active {
display: inline-block;
}
footer .ac-row-2 .ac-safety {
color: #fff;
}
.ac-safety-seven {
background-color: #416fb6;
}
.ac-safety-six {
background-color: #1a6eb7;
}
.ac-safety-five {
background-color: #2789CA;
}
.ac-polution-three {
background-color: #008452;
}
.ac-polution-eleven {
background-color: #F49628;
}
footer .ac-showform-mob {
display: none;
}
/* End Footer */
.ac-show-on-mobile {
display: none;
}
.ac-hide-on-mobile {
display: block;
}
@media (max-width: 1000px) {
.ac-show-on-mobile {
display: block;
}
.ac-hide-on-mobile {
display: none;
}
html {
font-size: 2.2vw;
}
.ac-container {
width: 90%;
margin: 0 auto;
}
/* Header Mobile */
header {
height: 12vw;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
background-color: #fff;
}
header .ac-container-flued {
width: 90%;
}
header .ac-container-flued .ac-col-3,
header .ac-container-flued .ac-col-2,
header .ac-container-flued .ac-col-1 {
display: flex;
width: 33.33%;
}
header #ac-open-nav {
background-color: transparent;
border: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 40px;
height: 25px;
flex-direction: column;
padding: 0;
margin-right: 0%;
margin-left: auto;
}
header #ac-open-nav span {
display: flex;
width: 100%;
height: 2px;
background-color: #000;
}
header .ac-container-flued .ac-col-2 a {
margin-left: 0;
margin-right: auto;
}
header .ac-container-flued .ac-col-2 .ac-hyundai-logo {
width: 4.4rem;
}
header .ac-container-flued .ac-col-1 a {
font-size: 1.5rem;
}
header #nav-mob {
display: flex;
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background-color: #fff;
justify-content: center;
align-items: center;
flex-direction: column;
transition: right 0.5s;
}
header #nav-mob.active {
right: 0;
}
header #nav-mob nav {
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
width: 100%;
}
header #nav-mob nav li {
padding: 1.5rem 0;
}
header #nav-mob nav a {
font-size: 2.5rem;
text-decoration: none;
color: #000
}
header #nav-mob .ac-wrapper-close-btn {
width: 100%;
height: 0;
position: relative;
}
header #nav-mob .ac-wrapper-close-btn .nav-close-btn {
background: transparent;
border: 0;
font-size: 6rem;
transform: rotate(45deg);
position: relative;
right: 10px;
}
/* End Header Mobile */
/* Opening Mobile */
#ac-opening {
justify-content: center;
height: auto;
flex-direction: column;
margin-top: 12vw;
}
#ac-opening .ac-col-1,
#ac-opening .ac-col-2 {
width: 100%;
}
#ac-opening .ac-col-2 {
/* height: 0;
overflow: hidden;
transition: 0.5s; */
height: auto;
overflow: hidden;
transition: 0.5s;
}
#ac-opening .ac-col-2.ac-active {
height: auto;
overflow: hidden;
}
#ac-opening .ac-form-wrapper .close-form-wrapper {
margin-bottom: 11vw;
position: relative;
width: 90%;
}
#ac-opening .ac-form-wrapper .close-form-wrapper button {
position: absolute;
right: 0;
top: 10px;
z-index: 1;
background: transparent;
border: 0;
font-size: 2rem;
display: none;
}
#ac-opening .ac-col-2 .ac-form-wrapper .form input,
#ac-opening .ac-col-2 .ac-form-wrapper .form select {
height: 4rem;
width: 100%;
margin-bottom: 1.5rem;
border: 0;
padding-right: 1rem;
color: #000;
font-family: "AlmoniDLAAA";
font-size: 1.7rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-checkbox-div {
width: 3.5rem;
height: 2.5rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .label-wrapper {
top: -0.8rem;
font-size: 1.3rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-form-inner {
padding-bottom: 4rem;
}
#ac-opening .ac-col-2 .ac-form-wrapper .ac-button-wrapper button {
font-size: 2.2rem;
}
/* End Opening Mobile */
/* Navigator Mobile */
#ac-nav-desk {
display: none;
}
/* End Navigator Mobile */
/* More Info Mobile*/
#ac-more-info .ac-wrapper-bnts {
flex-direction: column;
}
#ac-more-info .ac-wrapper-bnts a.ac-tohyundai {
background-color: #012c5f;
}
#ac-more-info .ac-wrapper-bnts a {
font-size: 2rem;
padding: 0.8rem 2rem 1rem;
margin: 0 1.4rem 1rem;
width: 100%;
}
#ac-more-info p {
font-size: 14px !important;
}
/* End More Info Mobile*/
/* Footer Mobile */
footer .ac-row-1 {
flex-direction: column;
height: 18rem;
/* margin-bottom: 19rem; */
margin-bottom: 0rem;
}
footer .ac-row-1 .ac-col {
width: 100%;
height: 7rem;
}
footer .ac-row-1 .ac-col-3.ac-show-on-mobile {
justify-content: center;
display: flex;
}
footer .ac-row-1 .ac-col-2 {
justify-content: center;
}
footer .ac-row-1 .ac-col-3.ac-hide-on-mobile {
display: none;
}
footer .ac-logo-h {
margin-left: 0;
}
footer .ac-colmobile-mob {
width: 9rem;
position: relative;
top: -1rem;
}
footer .ac-row-1 .ac-col-1 {
border-bottom: 2px solid #434343;
justify-content: center;
}
footer .ac-row-2 {
height: auto;
padding: 2rem 0;
flex-direction: column;
width: 100%;
/* position: fixed; */
position: relative;
bottom: 0;
background-color: #fff;
}
footer .ac-row-1 .ac-col-2,
footer .ac-row-1 .ac-col-3.ac-show-on-mobile {
height: 5rem;
}
footer .ac-row-2 .ac-polution,
footer .ac-row-2 .ac-safety {
padding: 0 1.5vw 0.2vw 1.5vw;
}
footer .ac-row-2 p {
text-align: center;
}
footer .ac-showform-mob {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
width: 100%;
}
footer .ac-showform-mob .ac-toggole-form {
background-color: #002c63;
color: #fff;
width: 90%;
padding: 0.7rem 0 0.8rem;
font-size: 6vw;
border: 0;
margin: 1rem 5% 0rem;
}
footer .ac-showform-mob h3 {
font-size: 2.5rem;
margin-top: 0.4vw;
font-weight: 900;
text-align: center;
}
/* End Footer Mobile */
.ac-c2c {
position: fixed;
top: 34%;
right: 0;
width: 49px;
}
#ac-opening .ac-col-1 .ac-slider-titles-wrapper .ac-title {
font-size: 2rem;
}
#ac-part-1 {
font-size: 1.8rem;
}
#ac-opening .ac-col-1 .ac-slider-2 .ac-slider-titles-wrapper, #ac-opening .ac-col-1 .ac-slider-1 .ac-slider-titles-wrapper {
right: unset;
left: 2.5rem;
}
#ac-opening .ac-col-3 {
display: flex;
font-size: 1.8rem;
text-align: center;
padding: 1rem 0;
}
#ac-more-info {
background: #e4dbd2;
}
#ac-more-info .ac-wrapper-bnts a.ac-tomifrat {
background-color: #cccccc;
}
#ac-more-info h1 {
margin: 2.5rem auto 2.5rem auto;
}
/* }
.slick-next, .slick-prev {
display: none !important;
} */
}
@media (max-width: 650px) {
html {
font-size: 2.8vw;
}
}
.ac-popup-colmobile {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
overflow: auto;
z-index: 999;
background-color: #000000bf;
opacity: 0;
transition: opacity 0.5s;
}
.ac-popup-inner {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.ac-popup-inner img {
width: 35%;
height: auto;
cursor: pointer;
}
.ac-popup-colmobile.ac-open {
display: block;
opacity: 1;
}
.ac-clk-colmobile {
text-decoration: underline;
cursor: pointer;
}