@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ html body { font-family: "HyundaiSansHeadKR"; font-weight: 400; } html input[type=checkbox] { accent-color: #000; width: 2rem; height: 2rem; border-radius: 0.6rem; border-color: #DEDEDE; } html .icon-cs { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-tbcs.svg); } html .icon-user { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-user.svg); } html .icon-cart { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-cart.svg); } html .hederWarp.noBoder .icon-cs, html .hederWarp.hBoder .icon-cs { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-tbcs.svg); } html .hederWarp.noBoder .icon-user, html .hederWarp.hBoder .icon-user { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-user.svg); } html .hederWarp.noBoder .icon-cart, html .hederWarp.hBoder .icon-cart { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-cart.svg); } html textarea { width: 100%; border: 1px solid #DEDEDE; outline: 0 none; border-radius: 0; padding: 1.5rem 1.7rem; font-size: 1.6rem; font-family: "HyundaiSansHeadKR"; } html .icon-tbarrow { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/hyundai/svg/icon-tbarrow.svg); } html .icon-wtbarrow { width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/hyundai/svg/icon-wtbarrow.svg); } html .scrollDisable .logoImg { background-image: url(/kr/assets/images/hyundai/hyundai-blogo.svg); } html .mainNotice { background-color: #F3F3F3; height: 8.5rem; width: 100%; display: flex; justify-content: center; align-items: center; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 768px) { html .mainNotice { height: 8.5rem; } } @media (min-width: 1240px) { html .mainNotice { padding-left: 0; padding-right: 0; } } html .mainNotice .noticInnerWarp { width: 100%; } @media (min-width: 1240px) { html .mainNotice .noticInnerWarp { width: 120rem; } } html .mainNotice .noticInnerWarp .noticeInner { display: flex; height: 8.5rem; position: relative; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner { height: 10rem; } } html .mainNotice .noticInnerWarp .noticeInner h2 { display: none; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner h2 { font-size: 2.2rem; font-weight: 600; color: #000; display: flex; align-items: center; } } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList { margin-left: 0rem; display: flex; align-items: center; height: 8.5rem; width: 100%; overflow: hidden; justify-content: space-between; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList { margin-left: 7.5rem; height: 10rem; } } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li { display: flex; align-items: flex-start; padding-top: 2.3rem; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li { align-items: center; padding-top: 0; } } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl { display: flex; flex-wrap: wrap; align-items: center; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl { flex-wrap: nowrap; } } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt, html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd { font-size: 1.4rem; width: 100%; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt, html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd { font-size: 1.6rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt { color: #9EA1A2; } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd { color: #000; margin-top: 0.8rem; font-weight: 400; } @media (min-width: 768px) { html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd { margin-top: 0; border-left: 1px solid rgba(0, 0, 0, 0.3); padding-left: 1rem; margin-left: 1rem; } } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp { right: 0; margin-top: 2rem; } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp .swiper-button-next, html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp .swiper-button-prev { position: relative; justify-content: flex-end; top: 55%; margin-top: 0; height: auto; width: auto; right: inherit; } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp .swiper-button-next::after, html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp .swiper-button-prev::after { content: ""; display: block; width: 1.4rem; height: 0.8rem; background-image: url(/kr/assets/images/common/icon-notice.svg); background-repeat: no-repeat; background-position: center; } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp .swiper-button-next { transform: rotate(0deg); margin-top: -2rem; right: 0; } html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList .swiperButtonWarp .swiper-button-prev { transform: rotate(-180deg); margin-bottom: 0; left: 0; margin-top: 2rem; } html .hederWarp .headerInner .headerTop .headerGnb .logo a { font-family: "HyundaiSansHeadKR"; } html .hederWarp .headerInner .headerTop .headerGnb .logo a .logoImg { display: block; width: 14rem; height: 1.9rem; background-image: url(/kr/assets/images/hyundai/hyundai-logo.svg); } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .logo a .logoImg { width: 14rem; height: 1.9rem; } } html .hederWarp .headerInner .headerTop .headerGnb .logo p { color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .logo.on a .logoImg { width: 3.5rem; height: 1.8rem; background-image: url(/kr/assets/images/hyundai/hyundai-sblogo.svg); } html .hederWarp .headerInner .headerTop .headerGnb .logo.on p { color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil { position: relative; display: flex; align-items: center; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist { position: relative; display: none; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist { display: block; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist span { color: #676767; font-weight: 400; displaY: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 2.2rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist span + span::before { content: ""; displaY: block; width: 1px; height: 1.4rem; background-color: #DEDEDE; margin-left: 1rem; margin-right: 1rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem { displaY: flex; height: 8rem; font-size: 1.4rem; align-items: center; cursor: pointer; color: #676767; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem::after { content: ""; width: 2.5rem; height: 0.8rem; displaY: block; background: url("/kr/assets/images/common/icon-tbarrow.svg") center right no-repeat; background-size: 1.2rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem:hover, html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem:focus { border: none; outline: none; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem.on .carlistItem { display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem { display: none; position: absolute; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 17rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem .boxBullet { display: none; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem .boxBullet { width: 1.4rem; height: 1rem; displaY: block; position: absolute; top: -0.9rem; left: 50%; transform: translate(-50%, 0); z-index: 1; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul { position: relative; display: block; padding: 2rem; background-color: #fff; border: 1px solid #DEDEDE; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li a { display: flex; font-size: 1.4rem; align-items: center; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li a:hover span { color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li a span { color: #9EA1A2; font-weight: 400; displaY: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li + li { margin-top: 1rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem.on { display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem.on + .carlistItem { display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist.on a::after { transform: rotate(-180deg); background-position-x: left; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon { display: flex; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon i { displaY: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .boxBullet { display: none; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .boxBullet { width: 1.4rem; height: 1rem; displaY: block; position: absolute; top: -0.9rem; left: 50%; transform: translate(-50%, 0); z-index: 1; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { position: fixed; right: -100rem; top: 0; height: 100vh; width: 100%; min-width: 36rem; transition: right 0.3s; } @media (min-width: 501px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { max-width: 36rem; } } @media (max-width: 768px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { background-color: #fff; } } @media (max-width: 320px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { max-width: 32rem; } } @media (min-width: 768px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { max-width: 36rem; } } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { position: inherit; display: flex; align-items: center; right: inherit; top: inherit; width: auto; height: auto; width: 100%; min-width: auto; box-shadow: none; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember { margin-top: 5.6rem; displaY: flex; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember { display: none; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button { width: 50%; height: 5rem; background-color: #F3F3F3; border: solid #DEDEDE; border-width: 1px 1px 1px 0px; padding: 2rem; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button { display: none; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button::after { content: ""; display: block; width: 0.6rem; height: 1.2rem; background-image: url(/kr/assets/images/common/icon-mMarrow.svg); background-repeat: no-repeat; background-size: contain; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button + button { border-right: 0; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember { display: none; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu { position: relative; padding: 3rem 2rem; min-height: 100vh; overflow-y: auto; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu { padding: 0; min-height: auto; overflow-y: inherit; padding: 0; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu > a { display: none; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu > a { display: flex; align-items: center; height: 8rem; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu { width: 100%; displaY: block; margin-bottom: 4rem; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu { display: none; position: absolute; min-width: 11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); background-color: #fff; padding: 1.5rem; border: 1px solid #DEDEDE; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock { display: block; margin-top: 5rem; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock { display: none; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock li a { color: #676767; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock li + li { margin-top: 2rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul { position: relative; display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li a { display: flex; font-size: 1.6rem; font-weight: 600; align-items: center; color: #000; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li a { color: #9EA1A2; font-size: 1.4rem; font-weight: 400; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li a:hover { color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li a span { color: #676767; font-weight: 400; displaY: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li + li { margin-top: 3rem; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li + li { margin-top: 1rem; } } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .loginBtn { display: none; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu.on { display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user { position: relative; display: none; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user { display: block; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user > a { display: none; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user > a { display: flex; align-items: center; height: 8rem; } } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu { displaY: none; width: 100%; min-width: 11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); position: absolute; padding: 1.5rem; background-color: #fff; border: 1px solid #DEDEDE; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul { position: relative; display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li a { display: flex; font-size: 1.4rem; align-items: center; color: #9EA1A2; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li a:hover { color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li a span { color: #676767; font-weight: 400; displaY: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li + li { margin-top: 1rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu.on { display: block; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu + .user { margin-left: 2rem; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp.on { right: 0rem; display: block; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp + .cart { margin-left: 0; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp + .cart { margin-left: 2rem; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .cart > a { display: flex; align-items: center; height: 5.6rem; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .cart > a { height: 8rem; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu { position: relative; display: block; width: 3rem; height: 5.6rem; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu { display: none; height: 8rem; } } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .slide-open { position: absolute; display: flex; align-items: center; justify-content: flex-end; top: 50%; left: 0%; width: 3.6rem; height: 5rem; transform: translate(0%, -50%); cursor: pointer; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur { display: block; position: absolute; width: 0px; height: 0px; left: 50%; transform: translate(-50%, -50%); top: 50%; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur .top-line { width: 1.8rem; height: 0.2rem; background-color: #000; bottom: -0.4rem; content: ""; position: absolute; left: -0.4rem; transition: transform 0.3s; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur .bot-line { width: 1.8rem; height: 0.2rem; background-color: #000; top: -0.6rem; content: ""; position: absolute; left: -0.4rem; transition: transform 0.3s; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur.on { width: 0; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur.on .bot-line { transform: translateY(4px) rotate(135deg); background-color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur.on .top-line { transform: translateY(-4px) rotate(-135deg); background-color: #000; } html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist + .gnbIcon { margin-left: 0; } @media (min-width: 1025px) { html .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist + .gnbIcon { margin-left: 2.5rem; } } html .hederWarp.hBoder .headerInner .headerGnb .logo a .logoImg, html .hederWarp.noBoder .headerInner .headerGnb .logo a .logoImg { background-image: url(/kr/assets/images/hyundai/hyundai-logo.svg); } html .footer { position: relative; width: 100%; height: 100%; background-color: #1D1D1D; color: #fff; font-family: "HyundaiSansHeadKR"; padding-top: 5rem; } @media (min-width: 768px) { html .footer { padding-bottom: 10rem; } } @media (min-width: 1240px) { html .footer { padding-top: 7rem; height: 39rem; padding-bottom: 0rem; } } html .footer .hyundaiInner { position: relative; width: 100%; padding-left: 2rem; padding-right: 2rem; margin: 0 auto; display: block; padding-bottom: 16.3rem; } @media (min-width: 768px) { html .footer .hyundaiInner { display: flex; padding-bottom: 0rem; } } @media (min-width: 1240px) { html .footer .hyundaiInner { width: 120rem; padding-left: 0; padding-right: 0; } } html .footer .hyundaiInner .tLeft { displaY: block; } @media (min-width: 1240px) { html .footer .hyundaiInner .tLeft { display: flex; } } html .footer .hyundaiInner .tLeft .logoSEction { width: 15rem; display: none; } @media (min-width: 768px) { html .footer .hyundaiInner .tLeft .logoSEction { display: block; } } html .footer .hyundaiInner .tLeft .logoSEction img { width: 7.5rem; height: 3.8rem; } html .footer .hyundaiInner .tLeft .companyInfo { margin-left: 0rem; margin-top: 0; } @media (min-width: 768px) { html .footer .hyundaiInner .tLeft .companyInfo { margin-top: 2.5rem; } } @media (min-width: 1240px) { html .footer .hyundaiInner .tLeft .companyInfo { margin-left: 5.5rem; margin-top: 0rem; } } html .footer .hyundaiInner .tLeft .companyInfo ul { displaY: flex; } html .footer .hyundaiInner .tLeft .companyInfo ul li { displaY: flex; align-items: center; color: #aaa; font-size: 1.2rem; font-weight: 400; } @media (min-width: 768px) { html .footer .hyundaiInner .tLeft .companyInfo ul li { font-size: 1.2rem; } } html .footer .hyundaiInner .tLeft .companyInfo ul li a { color: #aaa; font-size: 1.2rem; font-weight: 400; } html .footer .hyundaiInner .tLeft .companyInfo ul li:first-child a { color: #fff; font-weight: 600; } html .footer .hyundaiInner .tLeft .companyInfo ul li::after { content: ""; displaY: block; margin-left: 1rem; margin-right: 1rem; width: 1px; height: 1.5rem; background-color: rgb(68, 68, 68); } html .footer .hyundaiInner .tLeft .companyInfo ul li:last-child::after { display: none; } html .footer .hyundaiInner .tLeft .companyInfo ul + ul { margin-top: 1.3rem; flex-wrap: wrap; } @media (min-width: 768px) { html .footer .hyundaiInner .tLeft .companyInfo ul + ul { margin-top: 0.9rem; } } html .footer .hyundaiInner .tLeft .companyInfo ul + ul li { margin-bottom: 1rem; } html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(3)::after { displaY: none; } html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(4) { width: 100%; } @media (min-width: 768px) { html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(4) { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(4)::after { display: none; } @media (min-width: 768px) { html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .hyundaiInner .tLeft .companyInfo ul + ul li:nth-child(4)::after { display: block; } } html .footer .hyundaiInner .csTime { min-width: 25rem; margin-top: 3rem; } @media (min-width: 768px) { html .footer .hyundaiInner .csTime { margin-left: 5rem; } } @media (min-width: 1240px) { html .footer .hyundaiInner .csTime { margin-top: 0; margin-left: 0rem; } } html .footer .hyundaiInner .csTime p strong { displaY: block; font-size: 1.6rem; font-weight: 400; color: #fff; margin-bottom: 1rem; } html .footer .hyundaiInner .csTime p span { displaY: block; font-size: 1.4rem; font-weight: 400; color: #aaa; } html .footer .hyundaiInner .csTime p + p { margin-top: 0.8rem; } html .footer .hyundaiInner .copyRight { position: absolute; left: 2rem; bottom: 4rem; font-size: 1.2rem; } @media (min-width: 768px) { html .footer .hyundaiInner .copyRight { bottom: 0; } } @media (min-width: 1240px) { html .footer .hyundaiInner .copyRight { left: 15rem; } } html .footer .hyundaiInner .copyRight span { font-family: Arial, Helvetica, sans-serif; } html .footer .hyundaiInner .familyBoxWarp { display: flex; justify-content: flex-start; width: 100%; } @media (min-width: 768px) { html .footer .hyundaiInner .familyBoxWarp { width: 24rem; justify-content: flex-end; } } html .footer .hyundaiInner .familyBoxWarp .familyBox { margin-top: 2.7rem; width: 100%; } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select { position: relative; width: 100%; height: 4.5rem; min-width: 10rem; } @media (min-width: 768px) { html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select { width: 24rem; } } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select { position: relative; width: 100%; height: 3.5rem; font-size: 1.4rem; padding: 1rem; background-color: #1D1D1D; border: 1px solid #676767; box-sizing: border-box; cursor: pointer; text-align: left; color: #fff; line-height: 1; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 768px) { html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select { font-size: 1.4rem; } } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select::after { content: ""; position: absolute; right: 1rem; top: 40%; transform: translate(-50%, 0); width: 1.2rem; height: 1.2rem; displaY: block; background: url("/kr/assets/images/common/icon-wplus.svg"); background-size: contain; background-repeat: no-repeat; transform: rotate(-180deg); } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .list-member { display: none; position: absolute; padding: 1rem 1.5rem; width: 100%; bottom: 4.4rem; left: 0; border: 1px solid #676767; box-sizing: border-box; background-color: #1D1D1D; z-index: 1; } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select.on::after { transform: rotate(0deg); } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select.on + .list-member { display: block; } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .list-member li { display: flex; align-items: center; font-size: 1.4rem; line-height: 2; height: 3rem; box-sizing: border-box; } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .list-member li a { display: block; width: 100%; font-size: 1.4rem; border: none; cursor: pointer; text-align: left; color: #676767; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } html .footer .hyundaiInner .familyBoxWarp .familyBox .familyInner .cont-select .list-member li a:hover { color: #fff; } html .footer .hyundaiInner .familyBoxWarp .searchTextBox { width: 100%; border: 1px solid #DEDEDE; border-left: 0; height: 4.5rem; padding: 1rem 2rem; display: flex; justify-content: space-between; } @media (min-width: 768px) { html .footer .hyundaiInner .familyBoxWarp .searchTextBox { width: 32rem; } } html .footer .hyundaiInner .familyBoxWarp .searchTextBox input[type=text] { width: 100%; } html .footer .hyundaiInner .familyBoxWarp .searchTextBox .icon-search { displaY: block; width: 2.4rem; height: 2.4rem; background-image: url(/kr/assets/images/common/icon-search.svg); background-size: contain; } html .footer .top { position: absolute; right: 2rem; bottom: 65rem; } @media (min-width: 768px) { html .footer .top { right: 13.5rem; bottom: 50rem; } } html .footer .fmLogo { position: absolute; left: 50%; bottom: 4rem; font-size: 1.2rem; transform: translate(-50%, 0); } @media (min-width: 768px) { html .footer .fmLogo { left: 2rem; bottom: 0rem; transform: initial; } } @media (max-width: 768px) { html .footer .fmLogo { bottom: 2rem; } } @media (min-width: 1240px) { html .footer .fmLogo { left: 17rem; bottom: 4rem; transform: initial; } } html .footer .fmLogo .logoSEction { displaY: flex; justify-content: center; } @media (min-width: 768px) { html .footer .fmLogo .logoSEction { displaY: none; } } html .footer .fmLogo .logoSEction img { width: 5.9rem; height: 2.9rem; } html .footer .fmLogo .copyRight { position: relative; left: initial; bottom: initial; margin-top: 1.5rem; } @media (min-width: 768px) { html .footer .fmLogo .copyRight { margin-top: 0; } } html .towButton .leftBtn, html .towButton .rightBtn { height: 5.6rem; displaY: flex; width: 100%; } html .towButton .leftBtn p, html .towButton .rightBtn p { displaY: flex; justify-content: center; align-items: center; width: 100%; height: 5.6rem; font-size: 1.4rem; font-weight: 600; font-family: "HyundaiSansHeadKR"; } html .towButton .leftBtn p { background-color: #676767; color: #fff; border: 1px solid #9BA1A5; } html .towButton .leftBtn:hover p { color: #002C5F; border-color: #DEDEDE; background-color: #fff; } html .towButton .rightBtn { border-radius: 0.4rem; } html .towButton .rightBtn p { background-color: #002C5F; color: #fff; border: 1px solid #002C5F; font-family: "HyundaiSansHeadKR"; } html .towButton .rightBtn:hover p { color: #002C5F; border-color: #DEDEDE; background-color: #fff; } html .oneButton { height: 4.5rem; width: 100%; } html .oneButton button, html .oneButton div, html .oneButton a { width: 100%; display: flex; } html .oneButton button:hover p, html .oneButton div:hover p, html .oneButton a:hover p { color: #002C5F; border: 1px solid #DEDEDE; background-color: #fff; } html .oneButton button p, html .oneButton div p, html .oneButton a p { font-family: "HyundaiSansHeadKR"; display: flex; font-size: 1.4rem; align-items: center; justify-content: center; height: 4.5rem; width: 100%; background-color: #002C5F; color: #fff; border-width: 0; } html .oneButtonBlack { height: 5.6rem; width: 100%; } html .oneButtonBlack button, html .oneButtonBlack a { width: 100%; display: flex; color: #fff; border-color: #002C5F !important; background-color: #002C5F !important; } html .oneButtonBlack button:hover p, html .oneButtonBlack a:hover p { color: #002C5F !important; border: 1px solid #DEDEDE !important; background-color: #fff !important; } html .oneButtonBlack button p, html .oneButtonBlack a p { font-family: "HyundaiSansHeadKR"; display: flex; font-size: 1.4rem; font-weight: 600; align-items: center; justify-content: center; height: 5.6rem; width: 100%; color: #fff; border-color: #002C5F !important; background-color: #002C5F !important; border-radius: 0; } html .productRight .optionWarp .producOption .optionList .productSmallVideo { border-radius: 0.6rem; } html .productRight .optionWarp .producOption .optionList .checkBtn label { border: 1px solid #DEDEDE; } html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox] { visibility: hidden; position: absolute; } html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label { background-color: #fff !important; border: 1px solid #00AAD2 !important; } html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before { content: ""; position: absolute; right: 2rem; top: 50%; transform: translate(-50%, -50%); display: block; width: 2rem; height: 2rem; background-image: url(/kr/assets/images/common/icon_select.svg); background-size: 1.1rem !important; background-repeat: no-repeat; background-color: #00AAD2; background-position: center; } html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p span, html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p strong { color: #000 !important; } html .productRight .optionWarp .producOption .optionList .checkBtn:hover label { border: 1px solid #00AAD2 !important; } html .productRight .optionWarp .producOption .optionList .checkBtn div { display: flex; flex-wrap: wrap; align-items: center; padding-left: 3rem; } html .productRight .optionWarp .producOption .optionList .checkBtn div p span, html .productRight .optionWarp .producOption .optionList .checkBtn div p strong { displaY: block; width: 100%; font-size: 1.6rem; } html .productRight .optionWarp .producOption .optionList .checkBtn div p strong { font-weight: 600; } html .productRight .optionWarp .producOption .optionList .checkBtn div p span { font-weight: 400; } html .productRight .optionWarp .producOption .optionList .checkBtn div p strong + span { margin-top: 1rem; } html .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn { margin-top: 1rem; } body { overflow-x: hidden; } body .faqKey { background-image: url(/kr/assets/images/hyundai/keybg/faq-key.png); } @media (min-width: 1025px) { body .faqKey { background-image: url(/kr/assets/images/hyundai/keybg/faq-key.png); } } body .csKey { background-image: url(/kr/assets/images/hyundai/keybg/cs-key.png); } @media (min-width: 1025px) { body .csKey { background-image: url(/kr/assets/images/hyundai/keybg/cs-key.png); } } body .serviceInfo { background-image: url(/kr/assets/images/hyundai/keybg/serviceinfo-key.png); } @media (min-width: 1025px) { body .serviceInfo { background-image: url(/kr/assets/images/hyundai/keybg/serviceinfo-key.png); } } body .notice { background-image: url(/kr/assets/images/hyundai/keybg/notice-key.png); } @media (min-width: 1025px) { body .notice { background-image: url(/kr/assets/images/hyundai/keybg/notice-key.png); } } body#notice .hederWarp.hskey .headerInner { position: relative; background-color: #fff; border-bottom: 1px solid #dedede; width: 100%; } body#notice .hederWarp.hskey .headerInner .headerTop { max-width: 120rem; margin: 0 auto; } body#notice .contentWarp { margin-top: 5rem; } @media (min-width: 768px) { body#notice .contentWarp { margin-top: 8rem; } } body#notice .contentWarp .noticeList .borderList ul li.point a { border-radius: 0 !important; border: 1px solid #002C5F !important; } body#notice .contentWarp .noticeList .borderList ul li a { border-radius: 0 !important; } body#notice .contentWarp .noticeList .borderList ul li a:hover { border: 1px solid #002C5F !important; } body#notice .contentWarp .noticeList .borderList ul li a div p { font-weight: 500; } body#notice .contentWarp .noticeList .noList { border-radius: 0 !important; } body#notice .pageTitle { position: absolute !important; max-width: 192rem; display: flex; align-items: center; width: 100%; margin: 0 auto; margin-top: 0; top: 15rem; left: 50%; transform: translate(-50%); } @media (min-width: 768px) { body#notice .pageTitle { height: 45rem; top: 8rem; } } body#notice .cmsWarp p { font-family: "HyundaiSansHeadKR"; } body#faq .hederWarp.hskey .headerInner { position: relative; background-color: #fff; border-bottom: 1px solid #dedede; width: 100%; } body#faq .hederWarp.hskey .headerInner .headerTop { max-width: 120rem; margin: 0 auto; } body#faq .contentWarp .noticeList .borderList ul li a { border-radius: 0 !important; } body#faq .contentWarp .noticeList .borderList ul li a:hover { border: 1px solid #002C5F !important; } body#faq .contentWarp .faqList .faqAccodion .accordion dl { border-radius: 0; } body#faq .contentWarp .faqList .faqAccodion .accordion dl:hover { border-color: #00AAD2; } body#faq .contentWarp .csWarp dl.important dt::after { content: ""; background-color: #00AAD2; } body#faq .pageTitle { position: absolute !important; max-width: 192rem; display: flex; align-items: center; width: 100%; margin: 0 auto; margin-top: 0; z-index: 102; top: 15rem; left: 50%; transform: translate(-50%); } @media (min-width: 768px) { body#faq .pageTitle { height: 45rem; top: 8rem; } } .alertPopup .popInner { border-radius: 0; } .contentWarp .productView .productLeft .productImg .productSwiper .swiper-pagination span { width: 1rem !important; height: 1rem !important; border-radius: 50% !important; background-color: #fff; opacity: 1; } .contentWarp .productView .productLeft .productImg .productSwiper .swiper-pagination span + span { margin-left: 1.5rem; } .contentWarp .productView .productLeft .productImg .productSwiper .swiper-pagination .swiper-pagination-bullet-active { background-color: #00AAD2; } .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label { border: 1px solid #DEDEDE !important; border-radius: 0 !important; } .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn:hover label { border: 1px solid #00AAD2 !important; } .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label { border: 1px solid #00AAD2 !important; background-color: #fff !important; } .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label strong, .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span { color: #000 !important; } .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li { border-radius: 0 !important; } .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus { background-color: #fff !important; border: 1px solid #00AAD2 !important; } .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover dd, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active dd, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active dd, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus dd { color: #000 !important; } .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:hover dd strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li .active dd strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:active dd strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li:focus dd strong { color: #000 !important; } .contentWarp .noticeList .borderList ul li.point { a: hover; } .contentWarp .noList { border-radius: 0 !important; } .contentWarp .cartView .productListWarp .allSelect { border-radius: 0; } .contentWarp .cartView .productListWarp .productLis ul li { border-radius: 0; } .contentWarp .mypageWarp .leftLnbWarp .lnbList ul li .on { color: #002C5F; } .contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul li { border-radius: 0; } .contentWarp .mypageWarp .rightConWarp .myItemWarp .itemListWarp ul li .cartItem .cartItemInfo > div > p { border-radius: 0 !important; } .contentWarp .mypageWarp .rightConWarp .myItemWarp .itemListWarp ul li .cartItem .cartItemInfo > div dl dd span { color: #00AAD2 !important; } .contentWarp .mypageWarp .rightConWarp .questions ul li a > div span { color: #00AAD2; } .contentWarp .mypageWarp .rightConWarp .questionsView { border-radius: 0; } .contentWarp .mypageWarp .rightConWarp .questionsView .usrQuestions > div span { color: #00AAD2; } .contentWarp .mypageWarp .rightConWarp .listbtnWarp { width: 37rem; } .contentWarp .mypageWarp .rightConWarp .myAccount .myinfomation, .contentWarp .mypageWarp .rightConWarp .myAccount .outInfo { border-radius: 0; } .contentWarp .mypageWarp .rightConWarp .myAccount .serviceOut .editorBox { border-radius: 0; } .contentWarp .tabWarp .tabActive { color: #002C5F; border-bottom: 1px solid #002C5F; } .member .section1 .editorBox, .member .section1 .memberComplet, .member .section2 .editorBox, .member .section2 .memberComplet, .member .section3 .editorBox, .member .section3 .memberComplet { border-radius: 0; } .contentWarp.carsw .carsFull .installGuide { border-radius: 0; } .contentWarp.carsw .carsFull .selectStreamign li { border-radius: 0; } .contentWarp.carsw .carsFull .selectStreamign li > div > div .oneButton a p { display: flex; font-size: 1.4rem; font-weight: 600; align-items: center; justify-content: center; height: 5.6rem; width: 100%; color: #fff; border-color: #002C5F !important; background-color: #002C5F !important; border-radius: 0; } .contentWarp.carsw .carsFull .selectStreamign li > div > div .oneButton a::before, .contentWarp.carsw .carsFull .selectStreamign li > div > div .oneButton a::after { content: none; } .contentWarp.carsw .carsFull .selectStreamign li > div > div dl dd { color: #00AAD2; } .relatedProducts .relatedList a .relatedListItem { border-radius: 0 !important; } .relatedProducts .relatedList a:hover .relatedListItem { border-color: #00AAD2 !important; }