@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ /*변수파일 import*/ @-webkit-keyframes fadein { from { opacity: 0.9; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0.9; } to { opacity: 1; } } .contentWarp.main { margin-bottom: 0; } .contentWarp.main .mainWarpInner { width: 120rem; margin: 0 auto; } .mainBanner + .contentWarp { margin-top: 8rem; } .mainBanner + .contentWarp .mainWarpInner .mainProductList .mainProductInner { margin-top: 0; } .mainTopKey { width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 2; } @media (min-width: 1025px) { .mainTopKey { max-width: 192rem; } } .mainTopKey .mainSwiper { max-width: 192rem; width: 100%; top: 0; left: 50%; transform: translate(-50%, 0); height: 64rem; background-size: cover; z-index: 0; } @media (min-width: 768px) { .mainTopKey .mainSwiper { height: 64rem; } } @media (min-width: 1025px) { .mainTopKey .mainSwiper { height: 69rem; } } @media (min-width: 1240px) { .mainTopKey .mainSwiper { height: 85.5rem; } } .mainTopKey .mainSwiper::before { content: ""; display: block; position: absolute; width: 100%; height: 8rem; top: 0; background: linear-gradient(180deg, rgba(5, 20, 31, 0.8) 0%, rgba(5, 20, 31, 0) 100%); z-index: 2; } .mainTopKey .mainSwiper ul li { displaY: flex; align-items: center; height: 64rem; background-size: cover; } @media (min-width: 768px) { .mainTopKey .mainSwiper ul li { height: 69rem; } } @media (min-width: 1025px) { .mainTopKey .mainSwiper ul li { height: 69rem; } } @media (min-width: 1240px) { .mainTopKey .mainSwiper ul li { height: 85.5rem; } } .mainTopKey .mainSwiper ul li .mainText { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1025px) { .mainTopKey .mainSwiper ul li .mainText { width: 120rem; } } @media (min-width: 1240px) { .mainTopKey .mainSwiper ul li .mainText { padding-left: 0rem; padding-right: 0rem; } } .mainTopKey .mainSwiper ul li .mainText p { width: 100%; } .mainTopKey .mainSwiper ul li .mainText p strong { font-size: 3.5rem; font-weight: 600; } @media (min-width: 1025px) { .mainTopKey .mainSwiper ul li .mainText p strong { font-size: 8rem; } } .mainTopKey .mainSwiper ul li .mainText p strong, .mainTopKey .mainSwiper ul li .mainText p span { displaY: block; width: 100%; color: #fff; } .mainTopKey .mainSwiper ul li .mainText p span { margin-top: 2.5rem; font-size: 1.6rem; line-height: 2.8rem; } @media (min-width: 1240px) { .mainTopKey .mainSwiper ul li .mainText p span { font-size: 2rem; } } .mainTopKey .mainSwiper ul li .mainText .oneButton { width: 16rem; margin-top: 5rem; } .mainTopKey .mainSwiper .swiper-pagination { bottom: 10.8rem; } .mainTopKey .mainSwiper .swiper-pagination span { width: 1rem; height: 1rem; border-radius: 50%; background-color: #fff; opacity: 1; } .mainTopKey .mainSwiper .swiper-pagination .swiper-pagination-bullet-active { background-color: #00AAD2; } .mainTopKey .mycarInfo { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 8.7rem; position: absolute; bottom: 0; left: 0; z-index: 1; background-color: #000; } @media (min-width: 1025px) { .mainTopKey .mycarInfo { width: 100%; padding-left: 2rem; padding-right: 2rem; } } @media (min-width: 1240px) { .mainTopKey .mycarInfo { max-width: 192rem; padding-left: 0rem; padding-right: 0rem; } } .mainTopKey .mycarInfo .mycarInfoInner { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1240px) { .mainTopKey .mycarInfo .mycarInfoInner { width: 120rem; } } .mainTopKey .mycarInfo .mycarInfoInner .mainComment { display: none; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainComment { display: block; } } .mainTopKey .mycarInfo .mycarInfoInner .mainComment p { color: #fff; font-size: 1.6rem; display: flex; align-items: center; } .mainTopKey .mycarInfo .mycarInfoInner .mainComment p::before { content: ""; display: block; width: 4.3rem; height: 4.3rem; margin-right: 1.5rem; background-image: url(/kr/assets/images/common/icon-car.svg); background-size: contain; background-repeat: no-repeat; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum { width: 100%; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist { position: relative; width: 100%; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist { width: auto; display: block; padding-left: 0rem; padding-right: 0rem; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span { color: #00AAD2; font-weight: 400; displaY: flex; width: auto; min-width: 2.2rem; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span { width: 100%; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span::before { content: ""; displaY: block; width: 1px; height: 1.4rem; background-color: #DEDEDE; margin-left: 1rem; margin-right: 1rem; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem { displaY: flex; height: 8.7rem; font-size: 1.4rem; align-items: center; cursor: pointer; color: #676767; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem::after { content: ""; width: 2.5rem; height: 0.8rem; displaY: block; background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat; background-size: 1.2rem; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:hover, .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:focus { border: none; outline: none; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on .carlistItem { display: block; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem { display: none; position: absolute; width: 100%; min-width: 17rem; top: 8.7rem; left: 50%; transform: translate(-50%, 0); background-color: #fff; z-index: 1; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem .boxBullet { display: none; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem .boxBullet { width: 1.4rem; height: 1rem; displaY: block; position: absolute; top: -0.9rem; left: 50%; transform: translate(-50%, 0); z-index: 1; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul { position: relative; display: block; padding: 2rem; background-color: #fff; border: 1px solid #DEDEDE; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a { display: flex; font-size: 1.4rem; align-items: center; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a:hover span { color: #000; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a span { color: #9EA1A2; font-weight: 400; displaY: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li + li { margin-top: 1rem; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem.on { display: block; } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem { display: block; width: 100%; } @media (min-width: 1025px) { .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist.on a::after { transform: rotate(-180deg); background-position-x: left; } .mainTopKey + .contentWarp { margin-top: 63.5rem; z-index: 1; } @media (min-width: 1240px) { .mainTopKey + .contentWarp { margin-top: 85.5rem; } } .mainProductList { padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1240px) { .mainProductList { padding-left: 0; padding-right: 0; } } .mainProductList .mainContensTitle { display: block; } .mainProductList .mainContensTitle h1, .mainProductList .mainContensTitle p { text-align: left; } .mainProductList .mainContensTitle h1 { font-size: 3rem; font-weight: 600; } @media (min-width: 1025px) { .mainProductList .mainContensTitle h1 { font-size: 6rem; line-height: 6.5rem; } } .mainProductList .mainContensTitle p { display: none; font-size: 1.8rem; font-weight: 400; margin-top: 1.5rem; } @media (min-width: 1025px) { .mainProductList .mainContensTitle p { display: block; } } .mainProductList .mainProductInner { max-width: 50rem; margin: 0 auto; margin-top: 2rem; } @media (min-width: 768px) { .mainProductList .mainProductInner { max-width: 120rem; } } @media (min-width: 1025px) { .mainProductList .mainProductInner { margin-top: 5rem; margin-top: 7rem; } } .mainProductList .mainProductInner ul li { position: relative; width: 100%; overflow: hidden; background-color: #F6F3F2; display: flex; flex-direction: column; } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li { height: 35rem; } } @media (min-width: 768px) { .mainProductList .mainProductInner ul li { display: grid; flex-direction: inherit; grid-template-columns: 35rem auto; } } .mainProductList .mainProductInner ul li > p { position: relative; width: 100%; } @media (min-width: 1240px) { .mainProductList .mainProductInner ul li > p { height: 35rem; width: 35rem; } } .mainProductList .mainProductInner ul li > p img { top: 0; left: 0; transform: translate(50, 50); width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; margin: auto; } .mainProductList .mainProductInner ul li .productSmallVideo { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; } .mainProductList .mainProductInner ul li video { width: 100%; height: 100%; } .mainProductList .mainProductInner ul li .contentInfo { width: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; } @media (min-width: 768px) { .mainProductList .mainProductInner ul li .contentInfo { padding: 3rem; } } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo { padding: 4rem; justify-content: inherit; } } @media (min-width: 1240px) { .mainProductList .mainProductInner ul li .contentInfo { height: 100%; justify-content: inherit; } } .mainProductList .mainProductInner ul li .contentInfo .tag { display: flex; } .mainProductList .mainProductInner ul li .contentInfo .tag span { padding: 0.6rem; font-size: 1.1rem; font-weight: 400; color: #fff; background-color: #00AAD2; } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo .tag span { font-size: 1.3rem; } } .mainProductList .mainProductInner ul li .contentInfo .tag span + span { margin-left: 0.8rem; } .mainProductList .mainProductInner ul li .contentInfo .tag + h2 { margin-top: 2rem; } .mainProductList .mainProductInner ul li .contentInfo h2 { font-size: 3rem; font-weight: 500; color: #000; } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo h2 { font-size: 4rem; } } .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice { margin-top: 3rem; display: block; } @media (min-width: 768px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice { margin-top: 0rem; display: flex; align-items: center; } } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice { position: absolute; bottom: 4rem; left: 4rem; } } @media (min-width: 1240px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice { position: absolute; bottom: 4rem; left: 4rem; } } .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl { displaY: flex; justify-content: space-between; flex-direction: row-reverse; width: 100%; align-items: center; } @media (min-width: 768px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; flex-direction: column-reverse; justify-content: inherit; } } .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dt, .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd { color: #676767; font-size: 1.4rem; width: 100%; font-family: "HyundaiSansHeadKR"; } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dt, .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd { font-size: 1.6rem; } } .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dt { font-weight: 400; border-left: 1px solid rgba(255, 255, 255, 0.5); } .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd { font-weight: 600; margin-top: 1rem; color: #000; text-align: right; } @media (min-width: 768px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd { text-align: left; } } .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl + dl { border-top: 1px solid #DEDEDE; margin-top: 1.5rem; padding-top: 1.5rem; } @media (min-width: 768px) { .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl + dl { border-left: 1px solid #DEDEDE; margin-left: 1.5rem; padding-left: 1.5rem; border-top: 0; margin-top: 0; padding-top: 0; } } .mainProductList .mainProductInner ul li .contentInfo .noActionDescript { color: #676767; font-weight: 400; line-height: 2.2rem; font-size: 1.4rem; margin-top: 1rem; } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo .noActionDescript { font-size: 1.6rem; margin-top: 1.5rem; } } .mainProductList .mainProductInner ul li .contentInfo .listImgBtn { right: 4rem; bottom: 4rem; width: 100%; margin-top: 4rem; } @media (min-width: 768px) { .mainProductList .mainProductInner ul li .contentInfo .listImgBtn { margin-top: 0rem; width: 16rem; } } @media (min-width: 1025px) { .mainProductList .mainProductInner ul li .contentInfo .listImgBtn { position: absolute; } } @media (min-width: 1240px) { .mainProductList .mainProductInner ul li .contentInfo .listImgBtn { position: absolute; } } .mainProductList .mainProductInner ul li .contentInfo .descript + .listImgBtn { margin-top: 4rem; } .mainProductList .mainProductInner ul li + li { margin-top: 4rem; } .mainSevice { width: 100%; display: flex; flex-wrap: wrap; max-width: 120rem; margin: 0 auto; justify-content: space-between; padding-left: 2rem; padding-right: 2rem; margin-top: 5rem; } @media (min-width: 768px) { .mainSevice { margin-top: 6rem; flex-wrap: nowrap; } } @media (min-width: 1025px) { .mainSevice { margin-top: 12rem; } } @media (min-width: 1240px) { .mainSevice { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) { .mainSevice .left { width: 50%; } } .mainSevice .left span { color: #676767; font-size: 1.6rem; } .mainSevice .left h2 { margin-top: 1rem; font-size: 3rem; font-weight: 500; line-height: 4rem; font-family: "HyundaiSansHeadKR"; } @media (min-width: 1025px) { .mainSevice .left h2 { font-size: 4rem; line-height: 5rem; } } .mainSevice .right { display: flex; flex-wrap: wrap; margin-top: 2.5rem; width: 100%; } @media (min-width: 768px) { .mainSevice .right { flex-wrap: nowrap; width: 50%; margin-top: 0; } } .mainSevice .right a { width: 100%; height: 14rem; padding: 3rem; border: 1px solid #DEDEDE; } @media (min-width: 768px) { .mainSevice .right a { height: 17rem; } } @media (min-width: 1025px) { .mainSevice .right a { width: 29rem; } } .mainSevice .right a:hover { border: 1px solid #05141F; } .mainSevice .right a .faq, .mainSevice .right a .cs { display: flex; height: 100%; flex-direction: column; justify-content: space-between; } .mainSevice .right a .faq span, .mainSevice .right a .cs span { position: relative; displaY: block; font-weight: 600; font-size: 1.8rem; color: #002c5f; } .mainSevice .right a .faq span::after, .mainSevice .right a .cs span::after { content: ""; position: absolute; right: 0; displaY: inline-block; width: 0.8rem; height: 1.6rem; background-size: contain; background-repeat: no-repeat; background-position: center right; background-image: url(/kr/assets/images/common/icon-bgo.svg); } .mainSevice .right a .faq::before, .mainSevice .right a .cs::before { content: ""; display: block; width: 4.5rem; height: 4.5rem; background-size: contain; background-repeat: no-repeat; } .mainSevice .right a .faq::before { background-image: url(/kr/assets/images/common/icon-faq.svg); } .mainSevice .right a .cs::before { background-image: url(/kr/assets/images/common/icon-bannercs.svg); } .mainSevice .right a + a { margin-top: 1rem; } @media (min-width: 768px) { .mainSevice .right a + a { margin-left: 1rem; margin-top: 0; } } .mainBanner { background-image: url(/kr/assets/images/hyundai/product-img/producy-mtemp8.png); background-repeat: no-repeat; background-size: cover; background-position: center; height: 34rem; margin-top: 6rem; display: flex; align-items: center; padding-top: 5rem; padding-bottom: 4rem; } @media (min-width: 768px) { .mainBanner { padding-top: 0; padding-bottom: 0; height: 34rem; background-image: url(/kr/assets/images/hyundai/product-img/producy-temp8.png); } } @media (min-width: 1025px) { .mainBanner { margin-top: 8rem; } } .mainBanner .mabannerInner { position: relative; display: flex; flex-wrap: wrap; max-width: 120rem; width: 100%; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; height: 100%; flex-direction: column; justify-content: space-between; } @media (min-width: 768px) { .mainBanner .mabannerInner { height: auto; flex-direction: inherit; justify-content: inherit; } } @media (min-width: 1240px) { .mainBanner .mabannerInner { max-width: 120rem; padding-left: 0rem; padding-right: 0rem; } } .mainBanner .mabannerInner dl { width: 100%; } .mainBanner .mabannerInner dl dt, .mainBanner .mabannerInner dl dd { width: 100%; color: #fff; } .mainBanner .mabannerInner dl dt { font-size: 2.5rem; font-weight: 600; } @media (min-width: 1025px) { .mainBanner .mabannerInner dl dt { font-size: 4rem; } } .mainBanner .mabannerInner dl dd { margin-top: 1.5rem; line-height: 2.2rem; } .mainBanner .mabannerInner dl dd br { display: none; } @media (min-width: 768px) { .mainBanner .mabannerInner dl dd br { display: block; } } .mainBanner .mabannerInner .listImgBtn { width: 100%; margin-top: 3rem; } @media (min-width: 768px) { .mainBanner .mabannerInner .listImgBtn { width: 17.6rem; } } .mainNotice { margin-top: 9rem; } @media (min-width: 1025px) { .mainNotice { margin-top: 15rem; } }