@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ /*변수파일 import*/ pre { font-family: "KiaSignature"; } /*비디오 콘트롤러 없앰*/ video::-webkit-media-controls { display: none !important; } .scrollDisable { min-height: 100%; overflow: hidden !important; touch-action: none; } .scrollDisable .logo { z-index: 101; } .listNone { display: flex; justify-content: center; align-items: center; height: 14rem; } @media (min-width: 768px) { .listNone { height: 18rem; } } .listNone p { font-size: 1.6rem; color: #9ea1a2; font-weight: 600; } @media (min-width: 768px) { .listNone p { font-size: 2rem; } } .hederWarp { position: relative; background-repeat: no-repeat; background-position: center; z-index: 101; } .hederWarp .headerInner { display: block; width: 100%; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1025px) { .hederWarp .headerInner { width: 100%; } } @media (min-width: 1240px) { .hederWarp .headerInner { width: 120rem; margin: 0 auto; padding-left: 0rem; padding-right: 0rem; position: relative; z-index: 1; } } .hederWarp .headerInner .headerTop { display: flex; align-items: center; justify-content: center; width: 100%; height: 5.6rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop { height: 8rem; } } .hederWarp .headerInner .headerTop .headerGnb { width: 100%; display: flex; justify-content: space-between; } .hederWarp .headerInner .headerTop .headerGnb .logo { display: flex; align-items: center; } .hederWarp .headerInner .headerTop .headerGnb .logo a .logoImg { display: block; background-position: center; background-repeat: no-repeat; background-size: contain; margin-right: 0.9rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .logo a .logoImg { margin-right: 1.3rem; } } .hederWarp .headerInner .headerTop .headerGnb .logo p { font-size: 1rem; font-weight: 400; color: #fff; margin-top: 0.3rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .logo p { font-size: 1.1rem; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil { position: relative; display: flex; align-items: center; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist { position: relative; display: none; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist { display: block; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist span { color: #fff; font-weight: 400; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 2.2rem; } .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; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem { display: flex; height: 8rem; font-size: 1.4rem; align-items: center; cursor: pointer; color: #676767; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem::after { content: ""; width: 2.5rem; height: 0.8rem; display: block; background: url("../images/common/icon-wtbarrow.svg") center right no-repeat; background-size: 1.2rem; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem:hover, .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem:focus { border: none; outline: none; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem.on .carlistItem { display: block; } .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); } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem .boxBullet { display: none; } @media (min-width: 1025px) { .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; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul { position: relative; display: block; padding: 2rem; background-color: #fff; border: 1px solid #dedede; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li a { display: flex; font-size: 1.4rem; align-items: center; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li a:hover span { color: #000; } .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; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem ul li + li { margin-top: 1rem; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carlistItem.on { display: block; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem.on + .carlistItem { display: block; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist.on a::after { transform: rotate(-180deg); background-position-x: left; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon { display: flex; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon i { display: block; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .boxBullet { display: none; } @media (min-width: 1025px) { .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; } } .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) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { max-width: 36rem; } } @media (max-width: 768px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { background-color: #fff; } } @media (max-width: 320px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { max-width: 32rem; } } @media (min-width: 768px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp { max-width: 36rem; } } @media (min-width: 1025px) { .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; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember { margin-top: 5.6rem; display: flex; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember { display: none; } } .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) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button { display: none; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button::after { content: ""; display: block; width: 0.6rem; height: 1.2rem; background-image: url("../images/common/icon-mMarrow.svg"); background-repeat: no-repeat; background-size: contain; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember button + button { border-right: 0; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .mobileMember { display: none; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu { position: relative; padding: 3rem 2rem; min-height: 100vh; overflow-y: auto; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu { padding: 0; min-height: auto; overflow-y: inherit; padding: 0; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu > a { display: none; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu > a { display: flex; align-items: center; height: 8rem; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu { width: 100%; display: block; margin-bottom: 4rem; } @media (min-width: 1025px) { .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; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock { display: block; margin-top: 5rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock { display: none; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock li a { color: #676767; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu .moblieBlock li + li { margin-top: 2rem; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul { position: relative; display: block; } .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) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li a { color: #9ea1a2; font-size: 1.4rem; font-weight: 400; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li a:hover { color: #000; } .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; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li + li { margin-top: 3rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu ul li + li { margin-top: 1rem; } } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .loginBtn { display: none; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu .gnbMenu.on { display: block; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user { position: relative; display: none; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user { display: block; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user > a { display: none; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user > a { display: flex; align-items: center; height: 8rem; } } @media (min-width: 1025px) { .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; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul { position: relative; display: block; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li a { display: flex; font-size: 1.4rem; align-items: center; color: #9ea1a2; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li a:hover { color: #000; } .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; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu ul li + li { margin-top: 1rem; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .user .userMenu.on { display: block; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp .menu + .user { margin-left: 2rem; } .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; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp + .cart { margin-left: 0; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .mMenuWarp + .cart { margin-left: 2rem; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .cart > a { display: flex; align-items: center; height: 5.6rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .cart > a { height: 8rem; } } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu { position: relative; display: block; width: 3rem; height: 5.6rem; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu { display: none; height: 8rem; } } .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; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur { display: block; position: absolute; width: 0px; height: 0px; left: 50%; transform: translate(-50%, -50%); top: 50%; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur .top-line { width: 1.8rem; height: 0.2rem; background-color: #fff; bottom: -0.4rem; content: ""; position: absolute; left: -0.4rem; transition: transform 0.3s; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur .bot-line { width: 1.8rem; height: 0.2rem; background-color: #fff; top: -0.6rem; content: ""; position: absolute; left: -0.4rem; transition: transform 0.3s; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur.on { width: 0; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur.on .bot-line { transform: translateY(4px) rotate(135deg); background-color: #000; } .hederWarp .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .burgur.on .top-line { transform: translateY(-4px) rotate(-135deg); background-color: #000; } .hederWarp .headerInner .headerTop .headerGnb .carlist + .gnbIcon { margin-left: 0; } @media (min-width: 1025px) { .hederWarp .headerInner .headerTop .headerGnb .carlist + .gnbIcon { margin-left: 2.5rem; } } .hederWarp.noBoder, .hederWarp.hBoder { height: 5.6rem; background-image: none; } @media (min-width: 1025px) { .hederWarp.noBoder, .hederWarp.hBoder { height: 8rem; } } .hederWarp.noBoder .headerInner .headerTop .headerGnb .topUtil .carlist .carItem::after, .hederWarp.hBoder .headerInner .headerTop .headerGnb .topUtil .carlist .carItem::after { background-image: url("../images/common/icon-tbarrow.svg"); } .hederWarp.noBoder .headerInner .headerTop .headerGnb .topUtil .carlist span, .hederWarp.hBoder .headerInner .headerTop .headerGnb .topUtil .carlist span { color: #676767; } .hederWarp.noBoder .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .slide-open .burgur .top-line, .hederWarp.noBoder .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .slide-open .burgur .bot-line, .hederWarp.hBoder .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .slide-open .burgur .top-line, .hederWarp.hBoder .headerInner .headerTop .headerGnb .topUtil .gnbIcon .moblieMenu .slide-open .burgur .bot-line { background-color: #000; } .hederWarp.noBoder .headerInner .headerTop .headerGnb .logo p, .hederWarp.hBoder .headerInner .headerTop .headerGnb .logo p { color: #000000; } .hederWarp.hBoder { border-bottom: 1px solid #dedede; } .hederWarp.hBoder.menu-open .user .icon-user { background-image: url(../images/common/icon-user.svg); } .hederWarp_n { position: relative; width: 100%; z-index: 101; overflow-x: clip; background-color: #fff; } @media (max-width: 1240px) { .hederWarp_n { padding: 0 1.5rem; } } body.scroll-ing .hederWarp_n .headerInner { transform: translateY(-100%); transition: transform 0.3s ease-in-out; } body.scroll-down .hederWarp_n .headerInner { transform: translateY(-100%); transition: transform 0.3s ease-in-out; } body.scroll-up .hederWarp_n .headerInner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 1.5rem; transform: translateY(0); background-color: #fff; transition: transform 0.3s ease-in-out; } body.scroll-up .hederWarp_n .mobileOpenMenu { position: fixed; top: 5.6rem; } .hederWarp_n.menu-open ~ .pageTitle { z-index: 0 !important; } .hederWarp_n.menu-open ~ .contentWarp { z-index: 0 !important; } .hederWarp_n.menu-open .user .icon-user { background-image: url(../images/common/icon-user.svg) !important; } .hederWarp_n.menu-open .headerInner .gnb .logoWrap a { color: #05141f; } .hederWarp_n.menu-open .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 { color: #05141f; } .hederWarp_n.menu-open .headerInner .func .carlist .carItem span { color: #05141f; } .hederWarp_n.menu-open .headerInner .func .carlist .carItem::after { content: ""; display: block; width: 2.5rem; height: 0.8rem; margin-top: -0.4rem; background: url("../images/common/icon-tbarrow.svg") center right no-repeat; background-size: 1.2rem; } .hederWarp_n.menu-open .headerInner .func .carlist.on a::after { transform: rotate(-180deg); background-position-x: left; } .hederWarp_n.menu-open .headerInner .func .userLogin > a { border: 1px solid rgba(5, 20, 31, 0.3); color: #05141f; transition: 0.3s; } .hederWarp_n.menu-open .headerInner .func .userLogin > a:hover { border: 1px solid rgb(5, 20, 31); } @media (max-width: 1120px) { .hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .top-line { background-color: #000; } .hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .bot-line { background-color: #000; } } @media (min-width: 1120px) { .hederWarp_n.menu-open .headerInner .menuBg { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1019607843); } .hederWarp_n.menu-open .headerInner .menuBg::after { opacity: 1; } } .hederWarp_n .headerInner { display: flex; justify-content: space-between; align-items: center; max-width: 120rem; height: 8rem; margin: 0 auto; flex-wrap: wrap; } @media (max-width: 1120px) { .hederWarp_n .headerInner { height: 5.6rem; } } @media (min-width: 1240px) { .hederWarp_n .headerInner { max-width: 100%; padding: 0 1.5rem; flex-wrap: nowrap; } } @media (min-width: 1920px) { .hederWarp_n .headerInner { max-width: 1920px; } } .hederWarp_n .headerInner .menuBg { display: none; } @media (min-width: 1120px) { .hederWarp_n .headerInner .menuBg { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 1; background-color: #fff; transition: height 0.2s; } .hederWarp_n .headerInner .menuBg::after { content: ""; position: absolute; top: 80px; left: 0; right: 0; border-top: 1px solid #dedede; z-index: 2; opacity: 0; transition: opacity 0.2s; } } .hederWarp_n .headerInner .gnb { display: flex; justify-content: flex-start; align-items: center; } @media (min-width: 1240px) { .hederWarp_n .headerInner .gnb { flex: 1; justify-content: space-between; } .hederWarp_n .headerInner .gnb .menuWarp { padding-right: 25%; } } .hederWarp_n .headerInner .gnb .logoWrap { position: relative; z-index: 2; } @media (min-width: 1120px) { .hederWarp_n .headerInner .gnb .logoWrap { display: flex; align-items: center; } } .hederWarp_n .headerInner .gnb .logoWrap a { display: flex; justify-content: flex-start; align-items: center; font-size: 2rem; font-weight: 600; } .hederWarp_n .headerInner .gnb .logoWrap a .logoImg { background-size: contain; } .hederWarp_n .headerInner .gnb .logoWrap a span { margin-left: 1rem; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .logoWrap a span { font-size: 1.5rem; margin-top: 0.4rem; } } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp { position: fixed; top: 0; bottom: 0; right: -36rem; z-index: 9999; width: 36rem; height: 100vh; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } } @media (max-width: 500px) { .hederWarp_n .headerInner .gnb .menuWarp { right: -100%; width: 100%; } } .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop { display: none; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop { display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; height: 5.6rem; } .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop .mobileLogoWrap a { display: flex; justify-content: flex-start; align-items: center; font-size: 2rem; font-weight: 600; color: #05141f; } .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop .mobileLogoWrap a .logoImg { display: block; width: 16.7rem; height: 1.5rem; background-image: url(../images/kia/kia-blogo-n.svg); background-size: contain; background-repeat: no-repeat; } .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop .mobileLogoWrap a span { margin-left: 1rem; font-size: 1.5rem; margin-top: 0.4rem; } .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop .closeBtn a { display: block; width: 1.6rem; height: 1.6rem; background: url("../images/common/icon-menu-close.svg") center center no-repeat; } } .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc { display: none; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc { display: flex; width: 100%; } .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc button { display: flex; align-items: center; width: 100%; height: 5rem; font-size: 1.6rem; font-weight: bold; background-color: #f3f3f3; border: solid #dedede; border-width: 1px 0 1px 0; padding: 2rem; color: #030303; cursor: pointer; } .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc button::after { content: ""; display: block; width: 0.6rem; height: 1.2rem; margin-left: 0.8rem; background-image: url("../images/common/icon-mMarrow.svg"); background-repeat: no-repeat; background-size: contain; } .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc button + button { border-right: 0; } } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist { display: none; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist { display: block; position: relative; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem { display: flex; justify-content: space-between; align-items: center; padding: 0 2rem 2rem; margin-top: -1px; color: #05141f; border-bottom: 1px solid #dedede; background-color: #f3f3f3; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem.on { border: none; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item { display: block; position: relative; width: 100%; padding: 1.2rem 1.4rem; background-color: #fff; border: 1px solid #dedede; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item strong { display: block; margin-bottom: 0.4rem; color: #05141f; font-size: 1.4rem; font-weight: 400; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span { color: #9ea1a2; font-size: 1.2rem; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span { color: #676767; font-weight: 400; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span::before { content: ""; display: block; width: 1px; height: 1.4rem; background-color: #dedede; margin-left: 1rem; margin-right: 1rem; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .btn-select { position: absolute; bottom: 1.2rem; right: 1.4rem; font-weight: 600; font-size: 1.2rem; color: #676767; border-bottom: 1px solid #676767; cursor: pointer; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .arrow { display: none; width: 1.2rem; height: 0.8rem; margin-top: -0.4rem; background: url("../images/common/icon-tbarrow.svg") center right no-repeat; background-size: 1.2rem; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .arrow.on { transform: rotate(-180deg); } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem { position: absolute; display: none; z-index: 10; width: 100%; top: 5.6rem; border-bottom: 1px solid #dedede; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul { position: relative; display: block; padding: 2rem; background-color: #fff; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul li a { display: flex; font-size: 1.4rem; align-items: center; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul li a:hover span { color: #000; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul li a span { color: #9ea1a2; font-weight: 600; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul li a span + span { font-weight: 400; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul li a span + span::before { content: ""; display: block; width: 1px; height: 1.4rem; background-color: #dedede; margin-left: 1rem; margin-right: 1rem; } .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem ul li + li { margin-top: 1rem; } } .hederWarp_n .headerInner .gnb .menuWarp .menu { display: flex; margin-left: 4.5rem; transition: margin-left 0.2s ease-in-out; } @media (max-width: 1250px) { .hederWarp_n .headerInner .gnb .menuWarp .menu { margin-left: 2rem; } } @media (min-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap.info { display: block; width: 27rem; } } .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap h3 { margin-bottom: 2.8rem; } @media (min-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(1) .menuDepth2Wrap { left: -11.6rem; } } @media (min-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(2) .menuDepth2Wrap { left: 4.4rem; } } @media (min-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(3) .menuDepth2Wrap { left: 14.6rem; } } @media (min-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(4) .menuDepth2Wrap { display: block; left: 37.4rem; } } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu { display: block; margin-left: 0; margin-top: 2rem; overflow: hidden; overflow-y: auto; height: 63vh; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap { position: relative; z-index: 2; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap { padding: 0 2rem; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 { display: flex; justify-content: center; align-items: center; height: 8rem; padding: 0 2rem; font-size: 1.6rem; font-weight: 600; color: #05141f; white-space: nowrap; } @media (max-width: 1220px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 { padding: 0 1rem; } } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 { position: relative; justify-content: flex-start; height: initial; padding: 1.3rem 0; color: #000000; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower::after { content: ""; position: absolute; right: 0; width: 1.5rem; height: 1.5rem; transform: rotate(90deg); background: url("../images/common/icon-arrow_right.svg") center center no-repeat; transition: transform 0.2s ease; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on { margin-bottom: 0.3rem; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on::after { content: ""; position: absolute; right: 0; width: 1.5rem; height: 1.5rem; transform: rotate(270deg); background: url("../images/common/icon-arrow_right.svg") center center no-repeat; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on ~ .menuDepth2Wrap { padding-left: 1.2rem; margin-bottom: 1rem; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap { position: absolute; display: none; width: 100%; min-width: 11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); padding: 4rem 2rem 5rem; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap h3 a { color: #000; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap { position: initial; width: 100%; transform: initial; padding: 0; border: none; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap .boxBullet { display: none !important; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap h3 { display: none; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info { width: 14rem; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info { width: 100%; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support { width: 16rem; left: 40rem; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support { width: 100%; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap .boxBullet { width: 1.4rem; height: 1rem; display: none; position: absolute; top: -0.9rem; left: 50%; transform: translate(-50%, 0); z-index: 1; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a { display: flex; justify-content: flex-start; align-items: center; font-size: 1.4rem; font-weight: 400; color: #9ea1a2; padding: 0.8rem 0; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a.active { color: #05141f; } .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a:hover { color: #05141f; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a { padding: 0.6rem 0; } } .hederWarp_n .headerInner .gnb .menuWarp .menu .hiddenMenuDepth1Wrap .menuDepth1 { display: block !important; } @media (min-width: 768px) { .hederWarp_n .headerInner .gnb .menuWarp .menu .hiddenMenuDepth1Wrap .menuDepth1 { display: none !important; } } .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu { display: none; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu { display: flex; position: absolute; bottom: 3.2rem; left: 0; right: 0; } .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu a { display: block; padding: 0 2rem; font-size: 1.4rem; font-weight: 600; color: #676767; } .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu a + a { border-left: 1px solid #dedede; } } .hederWarp_n .headerInner .gnb .menuWarp .loginBtn { display: none; } @media (max-width: 1120px) { .hederWarp_n .headerInner .gnb .menuWarp .loginBtn { position: absolute; bottom: 2rem; display: block; padding: 0 2rem; } } .hederWarp_n .headerInner .func { display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 2; } .hederWarp_n .headerInner .func .carlist { position: relative; margin-right: 2rem; transition: all 0.2s ease-in-out; } @media (max-width: 1220px) { .hederWarp_n .headerInner .func .carlist { margin-right: 1.5rem; } } @media (max-width: 1150px) { .hederWarp_n .headerInner .func .carlist { display: none; } } .hederWarp_n .headerInner .func .carlist.on a::after { transform: rotate(-180deg); background-position-x: left; } .hederWarp_n .headerInner .func .carlist .carItem { display: flex; justify-content: flex-end; align-items: center; height: 8rem; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carItem { justify-content: space-between; width: 35rem; height: 3.5rem; padding: 0; border-bottom: 1px solid #cdd0d2; text-align: left; } .hederWarp_n .headerInner .func .carlist .carItem span { display: block; width: 35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .hederWarp_n .headerInner .func .carlist .carItem::after { content: ""; display: block; width: 2.5rem; height: 0.8rem; margin-top: -0.4rem; background: url("../images/common/icon-tbarrow.svg") center right no-repeat; background-size: 1.2rem; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carItem::after { margin-left: 2rem; } } .hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus { border: none; outline: none; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus { border-bottom: 1px solid #dedede; } } .hederWarp_n .headerInner .func .carlist .carItem.on { border-bottom-color: #000; } .hederWarp_n .headerInner .func .carlist .carItem.on::after { transform: rotate(-180deg); background-position-x: left; } .hederWarp_n .headerInner .func .carlist .carItem.on .carlistItem { display: block; } .hederWarp_n .headerInner .func .carlist .carItem span { color: #05141f; font-size: 1.4rem; font-weight: 400; white-space: nowrap; } .hederWarp_n .headerInner .func .carlist .carItem span + span::before { content: ""; display: block; width: 1px; height: 1.4rem; background-color: #dedede; margin-left: 1rem; margin-right: 1rem; } .hederWarp_n .headerInner .func .carlist .carlistItem { position: absolute; display: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 11rem; top: 6.1rem; left: 50%; transform: translate(-50%, 0); } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carlistItem { top: 3.2rem; left: 0; right: 0; transform: initial; width: 100%; } } .hederWarp_n .headerInner .func .carlist .carlistItem.on { display: block; } .hederWarp_n .headerInner .func .carlist .carlistItem.on + .carlistItem { display: block; } .hederWarp_n .headerInner .func .carlist .carlistItem .boxBullet { width: 1.4rem; height: 1rem; display: none; position: absolute; top: -0.9rem; left: 50%; transform: translate(-50%, 0); z-index: 1; } .hederWarp_n .headerInner .func .carlist .carlistItem ul { position: relative; display: block; padding: 2rem; background-color: #fff; border: 1px solid #dedede; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carlistItem ul { margin-top: 0.5rem; padding: 1.2rem; max-height: 70rem; overflow-y: auto; /* WebKit 기반 브라우저용 스크롤바 스타일 */ } .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar { width: 0.4rem; /* 폭 4px */ } .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-track { background: transparent; /* 트랙 투명 */ } .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-thumb { background-color: #dedede; /* 스크롤바 색상 */ border-radius: 0.2rem; } } .hederWarp_n .headerInner .func .carlist .carlistItem ul li { align-items: center; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li a { display: flex; font-size: 1.4rem; align-items: center; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li a:hover span { color: #000; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li a span { color: #05141f; font-weight: 400; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carlistItem ul li a span { display: inline; } } .hederWarp_n .headerInner .func .carlist .carlistItem ul li a span + span::before { content: ""; display: block; width: 1px; height: 1.4rem; background-color: #dedede; margin-left: 1rem; margin-right: 1rem; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carlistItem ul li a { position: relative; display: inline; } } .hederWarp_n .headerInner .func .carlist .carlistItem ul li button { display: inline; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carlistItem ul li { position: relative; padding-left: 2rem; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li > span { display: inline; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li button { text-align: left; cursor: pointer; } } .hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info { display: inline-block; position: relative; width: 1.3rem; height: 1.3rem; margin-left: 0.4rem; background: url("../images/common/ico_info.png") center center no-repeat; background-size: 1.3rem auto; cursor: pointer; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info:hover .tooltip { display: flex; left: -2.4rem; top: 2.4rem; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li:before { content: ""; display: block; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1.4rem; height: 1.4rem; margin-right: 0.4rem; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li.selected:before { content: ""; display: block; width: 1.4rem; height: 1.4rem; background: url("../images/common/ico_selected.png") center center no-repeat; background-size: 1.4rem auto; } .hederWarp_n .headerInner .func .carlist .carlistItem ul li + li { margin-top: 1rem; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .carlist .carlistItem ul li + li { margin-top: 1.2rem; } } .hederWarp_n .headerInner .func .userLogin { position: relative; display: block; margin-right: 2rem; } @media (max-width: 1150px) { .hederWarp_n .headerInner .func .userLogin { display: none; } } .hederWarp_n .headerInner .func .userLogin > a { display: flex; align-items: center; padding: 0.3rem 0.6rem; font-size: 1.4rem; font-weight: 600; border: 1px solid rgba(5, 20, 31, 0.3); color: #05141f; transition: 0.3s; } .hederWarp_n .headerInner .func .userLogin > a:hover { border: 1px solid rgb(5, 20, 31); } .hederWarp_n .headerInner .func .user { position: relative; display: block; margin-right: 0; } @media (max-width: 1120px) { .hederWarp_n .headerInner .func .user { display: none; } } .hederWarp_n .headerInner .func .user .icon-user { background-image: url(../images/common/icon-user.svg); } .hederWarp_n .headerInner .func .user > a { display: flex; align-items: center; height: 8rem; } .hederWarp_n .headerInner .func .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; } .hederWarp_n .headerInner .func .user .userMenu .boxBullet { width: 1.4rem; height: 1rem; display: block; position: absolute; top: -0.9rem; left: 50%; transform: translate(-50%, 0); z-index: 1; } .hederWarp_n .headerInner .func .user .userMenu ul { position: relative; display: block; } .hederWarp_n .headerInner .func .user .userMenu ul li a { display: flex; font-size: 1.4rem; align-items: center; color: #9ea1a2; } .hederWarp_n .headerInner .func .user .userMenu ul li a:hover { color: #000; } .hederWarp_n .headerInner .func .user .userMenu ul li a span { color: #676767; font-weight: 400; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .hederWarp_n .headerInner .func .user .userMenu ul li + li { margin-top: 1rem; } .hederWarp_n .headerInner .func .user .userMenu.on { display: block; } .hederWarp_n .headerInner .func .cart > a { display: flex; align-items: center; height: 5.6rem; } @media (min-width: 1025px) { .hederWarp_n .headerInner .func .cart > a { height: 8rem; } } .hederWarp_n .headerInner .func .moblieMenu { display: none; } @media (max-width: 1150px) { .hederWarp_n .headerInner .func .moblieMenu { display: flex; justify-content: center; align-items: center; margin-left: 1.5rem; width: 2.4rem; height: 2.4rem; cursor: pointer; } .hederWarp_n .headerInner .func .moblieMenu .burgur { position: relative; display: block; width: 1.8rem; height: 1rem; } .hederWarp_n .headerInner .func .moblieMenu .burgur .top-line { position: absolute; width: 1.8rem; height: 0.2rem; background-color: #000; top: 0; content: ""; } .hederWarp_n .headerInner .func .moblieMenu .burgur .bot-line { position: absolute; width: 1.8rem; height: 0.2rem; background-color: #000; bottom: 0; content: ""; } } .hederWarp_n .headerInner .mobileOpenMenu { display: block; position: absolute; top: 5.6rem; left: 0; width: 100%; height: 5rem; padding-top: 0.4rem; background-color: #fff; border-top: 1px solid #dedede; } .hederWarp_n .headerInner .mobileOpenMenu.hBoder { border-bottom: 1px solid #dedede; } .hederWarp_n .headerInner .mobileOpenMenu .menu { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex; align-items: center; white-space: nowrap; height: 100%; padding: 0 2rem; gap: 2rem; } .hederWarp_n .headerInner .mobileOpenMenu .menu::-webkit-scrollbar { display: none; } .hederWarp_n .headerInner .mobileOpenMenu .menu li { display: flex; align-items: center; height: 100%; border-bottom: 0.4rem solid transparent; } .hederWarp_n .headerInner .mobileOpenMenu .menu li.active { border-bottom: 0.4rem solid #000; } .hederWarp_n .headerInner .mobileOpenMenu .menu a { font-size: 1.6rem; font-weight: 400; color: #05141f; } @media (min-width: 1120px) { .hederWarp_n .headerInner .mobileOpenMenu { display: none; } } .hederWarp_n.noBoder .headerInner .gnb .logoWrap a, .hederWarp_n.hBoder .headerInner .gnb .logoWrap a { color: #05141f; } .hederWarp_n.noBoder .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1, .hederWarp_n.hBoder .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 { color: #05141f; } .hederWarp_n.noBoder .headerInner .func .carlist .carItem span, .hederWarp_n.hBoder .headerInner .func .carlist .carItem span { color: #000; } .hederWarp_n.noBoder .headerInner .func .carlist .carItem::after, .hederWarp_n.hBoder .headerInner .func .carlist .carItem::after { content: ""; display: block; width: 2.5rem; height: 0.8rem; margin-top: -0.4rem; background: url("../images/common/icon-tbarrow.svg") center right no-repeat; background-size: 1.2rem; } .hederWarp_n.noBoder .headerInner .func .carlist .carItem.on::after, .hederWarp_n.hBoder .headerInner .func .carlist .carItem.on::after { transform: rotate(-180deg); background-position-x: left; } .hederWarp_n.noBoder .headerInner .func .carlist.on a::after, .hederWarp_n.hBoder .headerInner .func .carlist.on a::after { transform: rotate(-180deg); background-position-x: left; } .hederWarp_n.noBoder .headerInner .func .userLogin > a, .hederWarp_n.hBoder .headerInner .func .userLogin > a { border: 1px solid rgba(5, 20, 31, 0.3); color: #05141f; transition: 0.3s; } .hederWarp_n.noBoder .headerInner .func .userLogin > a:hover, .hederWarp_n.hBoder .headerInner .func .userLogin > a:hover { border: 1px solid rgb(5, 20, 31); } @media (max-width: 1120px) { .hederWarp_n.noBoder .headerInner .func .moblieMenu .burgur .top-line, .hederWarp_n.hBoder .headerInner .func .moblieMenu .burgur .top-line { background-color: #000; } .hederWarp_n.noBoder .headerInner .func .moblieMenu .burgur .bot-line, .hederWarp_n.hBoder .headerInner .func .moblieMenu .burgur .bot-line { background-color: #000; } } .hederWarp_n.hBoder { border-bottom: 1px solid #dedede; } .footer { width: 100%; padding-bottom: 6rem; } @media (min-width: 768px) { .footer { padding-bottom: 0; } } .footer .top { z-index: 100; } .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select::after { top: 35% !important; } .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select.on::after { top: 35% !important; background: url("../images/common/icon-wminus.svg"); background-size: auto; background-repeat: no-repeat; background-position: center; } .infoSticky { height: 5.6rem; background-color: #000; color: #fff; position: -webkit-sticky; position: sticky; top: 0; z-index: 100; margin-top: 5rem; transition: top 0.3s ease-in-out; } @media (min-width: 1025px) { .infoSticky { height: 6rem; } } @media (min-width: 1025px) { .infoSticky { margin-top: 0; } } .infoSticky .infoStickyInner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 5.6rem; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1240px) { .infoSticky .infoStickyInner { width: 120rem; height: 6rem; margin: 0 auto; padding-left: 0rem; padding-right: 0rem; } } .infoSticky .infoStickyInner .stickyLeft p { display: flex; align-items: center; flex-wrap: wrap; } .infoSticky .infoStickyInner .stickyLeft p strong { font-weight: 600; font-size: 1.2rem; width: 100%; color: #fff; } @media (min-width: 1025px) { .infoSticky .infoStickyInner .stickyLeft p strong { font-size: 1.4rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .infoSticky .infoStickyInner .stickyLeft p span { font-weight: 400; font-size: 1.2rem; color: #9ea1a2; width: 100%; margin-top: 0.5rem; } @media (min-width: 1025px) { .infoSticky .infoStickyInner .stickyLeft p span { font-size: 1.4rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: 1.5rem; margin-top: 0rem; } } .infoSticky .infoStickyInner .stickyRight dl { display: flex; align-items: center; flex-wrap: wrap; } .infoSticky .infoStickyInner .stickyRight dl dt { font-weight: 400; font-size: 1.2rem; width: 100%; text-align: right; color: #fff; } @media (min-width: 1025px) { .infoSticky .infoStickyInner .stickyRight dl dt { font-size: 1.4rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-align: left; } } .infoSticky .infoStickyInner .stickyRight dl dd { font-weight: 600; font-size: 1.2rem; width: 100%; margin-top: 0.5rem; text-align: right; color: #fff; } @media (min-width: 1025px) { .infoSticky .infoStickyInner .stickyRight dl dd { font-size: 1.4rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: 1rem; margin-top: 0rem; text-align: left; } } @media (min-width: 768px) { .infoSticky { display: flex; justify-content: space-between; } } @media (min-width: 1240px) { .infoSticky { display: flex; justify-content: center; align-items: center; padding-left: 0rem; padding-right: 0rem; } } body.scroll-up .infoSticky { top: 10.6rem; transition: top 0.3s ease-in-out; } @media (min-width: 1025px) { body.scroll-up .infoSticky { top: 0; } } .contentWarp { position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 6rem; margin-bottom: 10rem; } @media (min-width: 768px) { .contentWarp { margin-top: 10rem; } } @media (min-width: 1025px) { .contentWarp { max-width: 120rem; margin: 0 auto; margin-top: 10rem; margin-bottom: 15rem; } } @media (min-width: 1240px) { .contentWarp { margin-top: 10rem; margin-bottom: 15rem; } } .contentWarp .tabWarp { display: flex; margin-top: 4rem; } @media (min-width: 1025px) { .contentWarp .tabWarp { margin-top: 7rem; } } .contentWarp .tabWarp a { color: #9ea1a2; font-weight: 600; font-size: 1.6rem; padding-bottom: 0.8rem; } @media (min-width: 1025px) { .contentWarp .tabWarp a { font-size: 1.8rem; } } .contentWarp .tabWarp a:hover { color: #000; } .contentWarp .tabWarp .tabActive { color: #000; border-bottom: 1px solid #000; } .contentWarp .tabWarp a + a { margin-left: 2rem; } .contentWarp .searchBoxWarp { display: flex; justify-content: flex-end; width: 100%; } @media (min-width: 768px) { .contentWarp .searchBoxWarp { width: auto; } } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select { position: relative; width: 100%; height: 4.5rem; min-width: 10rem; } @media (min-width: 768px) { .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select { width: 13rem; } } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .btn-select { position: relative; width: 100%; height: 4.5rem; font-size: 1.4rem; padding: 1.4rem 2rem; background-color: #fff; border: 1px solid #dedede; box-sizing: border-box; cursor: pointer; text-align: left; color: #000; line-height: 1; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 768px) { .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .btn-select { font-size: 1.6rem; } } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .btn-select::after { content: ""; position: absolute; right: 1rem; top: 40%; transform: translate(-50%, 0); width: 1.4rem; height: 0.8rem; display: block; background: url("../images/common/icon-notice.svg"); background-size: contain; background-repeat: no-repeat; transform: rotate(-180deg); } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .list-member { display: none; position: absolute; padding: 1rem 2rem; width: 100%; top: 4.4rem; left: 0; border: 1px solid #dedede; box-sizing: border-box; background-color: #fff; z-index: 1; } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .btn-select.on::after { transform: rotate(0deg); } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .btn-select.on + .list-member { display: block; } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .list-member li { font-size: 1.6rem; line-height: 2; box-sizing: border-box; } .contentWarp .searchBoxWarp .searchBox .selectInner .cont-select .list-member li button { width: 100%; font-size: 1.6rem; border: none; background-color: #fff; cursor: pointer; text-align: left; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .contentWarp .searchBoxWarp .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) { .contentWarp .searchBoxWarp .searchTextBox { width: 32rem; } } .contentWarp .searchBoxWarp .searchTextBox input[type=text] { width: 100%; font-size: 1.4rem; } @media (min-width: 768px) { .contentWarp .searchBoxWarp .searchTextBox input[type=text] { font-size: 1.6rem; } } .contentWarp .searchBoxWarp .searchTextBox .icon-search { display: block; width: 2.4rem; height: 2.4rem; background-image: url("../images/common/icon-search.svg"); background-size: contain; } .contentWarp .towButton { display: flex; justify-content: space-between; flex-direction: column; } @media (min-width: 768px) { .contentWarp .towButton { flex-direction: row; max-width: 37rem; } } .contentWarp .towButton .leftBtn { cursor: pointer; margin-right: 0; } @media (min-width: 768px) { .contentWarp .towButton .leftBtn { margin-right: 0.5rem; } } .contentWarp .towButton .rightBtn { cursor: pointer; margin-left: 0em; margin-top: 0.8rem; } @media (min-width: 768px) { .contentWarp .towButton .rightBtn { margin-left: 0.5rem; margin-top: 0; } } .paging { display: flex; justify-content: center; margin-top: 5rem; } .paging .pagingInner { display: flex; align-items: center; justify-content: space-between; max-width: 100%; } @media (min-width: 768px) { .paging .pagingInner { max-width: 36.5rem; } } .paging .pagingInner a { display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; margin: 0 0.7rem; color: #9ea1a2; font-weight: 600; font-size: 1.6rem; line-height: initial; transition: 0.3 all; } .paging .pagingInner a:hover { color: #000; } .paging .pagingInner a.active { color: #000; } .paging .pagingInner a i { display: block; width: 3.5rem; height: 3.5rem; background-image: url("../images/common/icon-page-arrow.svg"); background-repeat: no-repeat; background-position: center; border: 1px solid #cdd0d2; transition: 0.3s all; } .paging .pagingInner a i:hover { border: 1px solid #000000; } .paging .pagingInner a .next { transform: rotate(180deg); } .paging .pagingInner a:first-child { margin-right: 2.7rem; } .paging .pagingInner a:last-child { margin-left: 2.7rem; } .editorWarp { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 5rem; min-height: 50rem; } @media (min-width: 1240px) { .editorWarp { margin-top: 12rem; } } .editorWarp .editorInner { display: block; width: 100%; text-align: center; } @media (min-width: 1240px) { .editorWarp .editorInner { width: 100%; padding-left: 0rem; padding-right: 0rem; } } .relatedProducts { margin-top: 12rem; margin-bottom: 5rem; } @media (min-width: 768px) { .relatedProducts { margin-top: 6rem; margin-bottom: 10rem; } } .relatedProducts .relatedInnder { display: block; width: 100%; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder { display: flex; flex-wrap: wrap; justify-content: space-between; } } @media (min-width: 1240px) { .relatedProducts .relatedInnder { width: 120rem; margin: 0 auto; padding-left: 0rem; padding-right: 0rem; } } .relatedProducts .relatedInnder h2 { width: 100%; font-size: 1.8rem; font-weight: 600; } @media (min-width: 1240px) { .relatedProducts .relatedInnder h2 { font-size: 2.4rem; } } .relatedProducts .relatedInnder .relatedList { margin-top: 1.5rem; width: 100%; } @media (min-width: 1240px) { .relatedProducts .relatedInnder .relatedList { margin-top: 3rem; } } .relatedProducts .relatedInnder .relatedList a { display: block; } .relatedProducts .relatedInnder .relatedList a:hover .relatedListItem { border: 1px solid #05141f; } .relatedProducts .relatedInnder .relatedList a .relatedListItem { border: 1px solid #dedede; border-radius: 0.6rem; padding: 2rem; padding-right: 2rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem { padding-right: 4rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner { display: block; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner { display: flex; flex-wrap: nowrap; justify-content: space-between; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft { display: flex; } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .img { flex-grow: 16rem; flex-shrink: 1; flex-basis: 0; border-radius: 0.6rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .img { height: 16rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .img img { width: 7.5rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .img img { width: 16rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName { display: flex; flex-wrap: wrap; flex-grow: 1; flex-shrink: 1; flex-basis: 0; padding-left: 1.5rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName { flex-grow: 3; flex-shrink: 3; padding-left: 2rem; align-items: center; } } @media (min-width: 1240px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName { padding-left: 4rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dt, .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dd { display: block; width: 100%; line-height: 1.2; white-space: normal; display: -webkit-box; color: #000000; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dt, .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dd { width: 100%; } } @media (min-width: 1240px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dt, .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dd { width: 100%; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dt { font-size: 1.8rem; font-weight: 600; line-height: 2.2rem; } @media (min-width: 1240px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dt { font-size: 2.4rem; line-height: 3.2rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dd { margin-top: 1rem; color: #676767; font-size: 1.4rem; font-weight: 400; line-height: 2rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dd { margin-top: 2rem; line-height: 2.4rem; } } @media (min-width: 1240px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .itemLeft .productName dd { font-size: 1.6rem; margin-top: 2rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice { flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-width: 24rem; width: 100%; display: block; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice { min-width: 24rem; display: flex; align-items: center; justify-content: flex-end; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl { border-bottom: 1px solid #dedede; display: flex; justify-content: space-between; align-items: center; margin-top: 3rem; padding-bottom: 1.2rem; margin-bottom: 1.2rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl { display: block; padding-right: 1rem; margin-right: 1rem; border-right: 1px solid #dedede; border-bottom: 0; margin-top: 0rem; padding-bottom: 0rem; margin-bottom: 0rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl dt { color: #676767; font-size: 1.4rem; font-weight: 400; } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl dd { color: #000; font-size: 1.6rem; font-weight: 600; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl dd { margin-top: 1rem; } } @media (min-width: 1240px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl dd { font-size: 1.6rem; } } .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl + dl { border-bottom: 0; margin-top: 0rem; padding-bottom: 0rem; margin-bottom: 0rem; } @media (min-width: 768px) { .relatedProducts .relatedInnder .relatedList a .relatedListItem .itemInner .productPrice dl + dl { border-right: 0; padding-right: 0rem; margin-right: 0rem; } } .relatedProducts .relatedInnder .relatedList a + a { margin-top: 1.1rem; } .alertPopup { position: fixed; overflow: hidden; width: 100%; height: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; z-index: 500; padding: 2rem; } .alertPopup .popInner { width: calc(100% - 4rem); min-height: 22rem; position: absolute; top: 53%; left: 50%; max-height: 90%; overflow-y: auto; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-color: #fff; padding: 3rem 3rem; border-radius: 0.6rem; } @media (min-width: 768px) { .alertPopup .popInner { padding: 5rem; width: 54rem; } } .alertPopup .popInner p strong { display: flex; justify-content: center; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; line-height: 2.6rem; } @media (min-width: 768px) { .alertPopup .popInner p strong { font-size: 2.4rem; line-height: 3.2rem; } } .alertPopup .popInner p span { display: flex; justify-content: center; font-size: 1.4rem; line-height: 2.2rem; text-align: center; } @media (min-width: 768px) { .alertPopup .popInner p span { font-size: 1.6rem; } } .alertPopup .popInner p span.info { font-size: 1.4rem; } .alertPopup .popInner p + p { margin-top: 1.5rem; } @media (min-width: 768px) { .alertPopup .popInner p + p { margin-top: 2rem; } } .alertPopup .popInner .tableView { margin-top: 3rem; } @media (max-width: 768px) { .alertPopup .popInner .tableView { margin-top: 2.5rem; } } .alertPopup .popInner .tableView dl { display: flex; justify-content: flex-start; align-items: center; padding: 2rem 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } @media (max-width: 768px) { .alertPopup .popInner .tableView dl { display: block; padding: 1.5rem 0; } } .alertPopup .popInner .tableView dl .itemName { position: relative; width: 14.5rem; font-size: 1.4rem; line-height: 2.2rem; color: #676767; } @media (max-width: 768px) { .alertPopup .popInner .tableView dl .itemName { font-size: 1.4rem; line-height: 2.2rem; } } .alertPopup .popInner .tableView dl .itemName::after { content: ""; position: absolute; top: 0.3rem; right: 0; display: block; width: 0.1rem; height: 1.5rem; background-color: #dedede; } @media (max-width: 768px) { .alertPopup .popInner .tableView dl .itemName::after { display: none; } } .alertPopup .popInner .tableView dl .itemValue { display: flex; justify-content: flex-start; width: calc(100% - 14.5rem); padding-left: 2rem; font-size: 1.4rem; line-height: 2.2rem; color: #000000; } @media (max-width: 768px) { .alertPopup .popInner .tableView dl .itemValue { display: block; width: 100%; margin-top: 0; padding-left: 0; font-size: 1.4rem; line-height: 2.2rem; } } .alertPopup .popInner .tableView dl:not(:first-child) { border-top: 0; } .alertPopup .popInner .carswBtn { width: 100%; margin: 0 auto; margin-top: 3rem; } @media (min-width: 768px) { .alertPopup .popInner .carswBtn { margin-top: 5rem; width: 37rem; } } .alertPopup .popInner .carswBtn .towButton { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .alertPopup .popInner .carswBtn .towButton { flex-wrap: nowrap; } } .alertPopup .popInner .carswBtn .towButton a + a { margin-top: 1rem; } @media (min-width: 768px) { .alertPopup .popInner .carswBtn .towButton a + a { margin-top: 0; } } .alertPopup .popInner .btnWarp { width: 100%; margin: 0 auto; } @media (min-width: 768px) { .alertPopup .popInner .btnWarp { width: 16rem; } } .alertPopup .popInner .btnWarp.mg-t { margin-top: 5rem; } .alertPopup .popInner .counponBtn { width: 16rem; margin: 0 auto; margin-top: 3rem; } @media (max-width: 768px) { .alertPopup .popInner .counponBtn { width: 100%; } } .alertPopup .popInner .tableStyle { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin-top: 3rem; margin-bottom: 5rem; } .alertPopup .popInner .tableStyle dl { display: block; border-bottom: 1px solid #dedede; padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 768px) { .alertPopup .popInner .tableStyle dl { display: flex; padding-top: 0rem; padding-bottom: 0rem; } } .alertPopup .popInner .tableStyle dl dt { font-size: 1.4rem; color: #676767; } @media (min-width: 768px) { .alertPopup .popInner .tableStyle dl dt { padding: 2rem; font-weight: 700; width: 14rem; background-color: #f3f3f3; } } .alertPopup .popInner .tableStyle dl dd { padding: 0rem; margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 768px) { .alertPopup .popInner .tableStyle dl dd { padding: 2rem; margin-top: 0; } } .alertPopup .popInner .tableStyle dl:last-child { border-bottom: 0; } .inquiryPopup { position: fixed; overflow: hidden; width: 100%; height: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; z-index: 500; padding: 2rem; } .inquiryPopup .popInner { width: 100%; max-width: 120rem; min-height: 22rem; max-height: 90%; overflow-y: scroll; position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 5rem 0; border-radius: 0.6rem; } @media (max-width: 1240px) { .inquiryPopup .popInner { width: calc(100% - 4rem); } } .inquiryPopup .popInner .title strong { display: flex; justify-content: center; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; line-height: 2.6rem; } @media (min-width: 768px) { .inquiryPopup .popInner .title strong { font-size: 2.4rem; line-height: 3.2rem; } } .inquiryPopup .popInner .inquiryType { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; max-width: 80rem; margin-top: 3rem; margin-left: auto; margin-right: auto; background-color: #f3f3f3; padding: 3rem 2.4rem; } .inquiryPopup .popInner .inquiryType .radioArea { display: flex; justify-content: center; align-items: center; } .inquiryPopup .popInner .inquiryType .radioArea label { font-size: 20px; line-height: 2rem; padding: 0.2em 0.4em; } .inquiryPopup .popInner .inquiryType .radioArea span { vertical-align: middle; font-size: 1.6rem; } .inquiryPopup .popInner .inquiryType .radioArea [type=radio] { vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: max(1px, 0.1em) solid #05141f; border-radius: 50%; width: 1.5rem; height: 1.5rem; transition: border 0.3s ease-in-out; } .inquiryPopup .popInner .inquiryType .radioArea [type=radio]:checked { border: 0.4rem solid #ea0029; } .inquiryPopup .popInner .inquiryType .radioArea [type=radio]:hover { box-shadow: 0 0 0 max(2px, 0.2em) #dedede; cursor: pointer; } .inquiryPopup .popInner .inquiryType .radioArea [type=radio]:disabled { background-color: #dedede; box-shadow: none; opacity: 0.7; cursor: not-allowed; } .inquiryPopup .popInner .inquiryType .radioArea [type=radio]:disabled + span { opacity: 0.5; cursor: not-allowed; } .inquiryPopup .popInner .inquiryType .info { font-size: 1.4rem; font-weight: 400; line-height: 2.2; color: #676767; } .inquiryPopup .popInner .privateApply { margin: auto; width: 100%; max-width: 84rem; text-align: left; margin-top: 2rem; padding: 0 2rem; } .inquiryPopup .popInner .privateApply label { display: inline-flex; align-items: center; cursor: pointer; font-size: 1.4rem; } .inquiryPopup .popInner .privateApply label span { margin-left: 1rem; line-height: 2rem; } .inquiryPopup .popInner .csWarp { margin-top: 5rem; padding: 0 2rem; } .inquiryPopup .popInner .csWarp .csInner { max-width: 80rem; margin: 0 auto; } .inquiryPopup .popInner .csWarp .csInner dl.important dt { display: flex; align-items: center; } .inquiryPopup .popInner .csWarp .csInner dl.important dt::after { content: ""; width: 0.5rem; height: 0.5rem; display: block; border-radius: 50%; margin-left: 0.4rem; background-color: #ea0029; margin-top: -0.7rem; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl.important dt::after { margin-left: 0.4rem; margin-top: -1rem; } } .inquiryPopup .popInner .csWarp .csInner dl { display: flex; flex-wrap: wrap; align-items: center; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl { flex-wrap: nowrap; } } .inquiryPopup .popInner .csWarp .csInner dl dt { position: relative; width: 100%; font-size: 1.4rem; font-weight: 600; color: #676767; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl dt { max-width: 14rem; } } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner dl dt { font-size: 1.6rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd { width: 100%; display: flex; margin-top: 1rem; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl dd { margin-top: 0; } } .inquiryPopup .popInner .csWarp .csInner dl dd input[type=text] { display: flex; width: 100%; align-items: center; padding-left: 1.7rem; border: 1px solid #dedede; height: 4.5rem; font-size: 1.4rem; color: #000; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner dl dd input[type=text] { font-size: 1.6rem; height: 5rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd > div { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl dd > div { flex-wrap: nowrap; } } .inquiryPopup .popInner .csWarp .csInner dl dd > div input[type=text] { width: 33.3333333333%; font-size: 1.4rem; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner dl dd > div input[type=text] { font-size: 1.6rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd > div input[type=text] + input[type=text] { margin-left: 1rem; } .inquiryPopup .popInner .csWarp .csInner dl dd > div input[type=text] + select { width: 100%; margin-top: 1rem; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl dd > div input[type=text] + select { margin-top: 0; margin-left: 1rem; width: 33.3333333333%; } } .inquiryPopup .popInner .csWarp .csInner dl dd > div span { height: 5rem; display: flex; align-items: center; padding-left: 0.8rem; padding-right: 0.8rem; } .inquiryPopup .popInner .csWarp .csInner dl dd > div.phone { flex-wrap: nowrap; } .inquiryPopup .popInner .csWarp .csInner dl dd > div.mail input { width: 45.5%; } .inquiryPopup .popInner .csWarp .csInner dl dd select { width: 100%; height: 4.5rem; border: 1px solid #dedede; outline: 0 none; border-radius: 0; padding-left: 1.7rem; display: flex; align-items: center; font-size: 1.4rem; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner dl dd select { font-size: 1.6rem; height: 5rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd select option { height: 4.5rem; display: flex; padding-left: 1.7rem; align-items: center; } @media (min-width: 1240px) { .inquiryPopup .popInner .csWarp .csInner dl dd select option { height: 5rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd textarea { width: auto; border: 1px solid #dedede; outline: 0 none; border-radius: 0; padding: 1.5rem 1.7rem; font-size: 1.4rem; line-height: 2.2rem; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner dl dd textarea { font-size: 1.6rem; line-height: 2.4rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd.contentsWrap { flex-direction: column; } .inquiryPopup .popInner .csWarp .csInner dl dd.contentsWrap .wordCounter { justify-content: flex-end; margin-top: 1rem; font-size: 1.4rem; color: #676767; text-align: right; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp { display: block; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul { display: flex; justify-content: space-between; width: 100%; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem { position: relative; width: calc((100% - 30px) / 3); border: 1px solid #dedede; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap { position: relative; width: 100%; padding-top: 100%; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap .imgInput { display: none; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap .contents { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; cursor: pointer; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap .contents img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .delImg { position: absolute; display: none; top: 1.5rem; right: 1rem; cursor: pointer; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .textInfo { font-size: 1.4rem; color: #9ea1a2; margin-top: 1.5rem; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn { display: flex; margin-top: 3rem; flex-wrap: nowrap; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button, .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label { display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; border: 1px solid #dedede; cursor: pointer; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button span, .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label span { font-weight: 600; font-family: "KiaSignature"; color: #676767; font-size: 1.4rem; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button span, .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label span { font-size: 1.6rem; } } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button .icon-reset, .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label .icon-reset { width: 1.4rem; height: 1.4rem; background-image: url(../images/common/icon-reset.svg); background-size: contain; background-repeat: no-repeat; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button .icon-plus, .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label .icon-plus { width: 1.4rem; height: 1.4rem; background-image: url(../images/common/icon-bplus.svg); background-size: contain; background-repeat: no-repeat; } .inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button + label { margin-left: 1rem; } .inquiryPopup .popInner .csWarp .csInner dl.insertFile { align-items: flex-start; } .inquiryPopup .popInner .csWarp .csInner dl.insertFile dt { margin-top: 0rem; } @media (min-width: 768px) { .inquiryPopup .popInner .csWarp .csInner dl.insertFile dt { margin-top: 2rem; } } .inquiryPopup .popInner .csWarp .csInner dl + dl { margin-top: 3rem; } .inquiryPopup .popInner .csWarp .csInner .csComplete { text-align: center; border: 1px solid #dedede; width: 100%; padding: 3rem; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner .csComplete { border: none; } } .inquiryPopup .popInner .csWarp .csInner .csComplete p strong { font-size: 1.8rem; font-weight: 600; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner .csComplete p strong { font-size: 2.4rem; } } .inquiryPopup .popInner .csWarp .csInner .csComplete p span { font-size: 1.4rem; line-height: 2.2rem; } @media (min-width: 1025px) { .inquiryPopup .popInner .csWarp .csInner .csComplete p span { line-height: 2.4rem; font-size: 1.6rem; } } .inquiryPopup .popInner .csWarp .csInner .csComplete p + p { margin-top: 2rem; } .inquiryPopup .popInner .carswBtn { width: 100%; margin: 0 auto; margin-top: 3rem; } @media (min-width: 768px) { .inquiryPopup .popInner .carswBtn { margin-top: 5rem; width: 37rem; } } .inquiryPopup .popInner .carswBtn .towButton { display: flex; flex-wrap: wrap; padding: 0 2rem; } .inquiryPopup .popInner .carswBtn .towButton .leftBtn { margin-right: 0; } @media (min-width: 768px) { .inquiryPopup .popInner .carswBtn .towButton .leftBtn { margin-right: 0.5rem; } } .inquiryPopup .popInner .carswBtn .towButton .rightBtn { margin-left: 0; } @media (min-width: 768px) { .inquiryPopup .popInner .carswBtn .towButton .rightBtn { margin-left: 0.5rem; } } @media (min-width: 768px) { .inquiryPopup .popInner .carswBtn .towButton { flex-wrap: nowrap; } } .inquiryPopup .popInner .carswBtn .towButton a + a { margin-top: 1rem; } @media (min-width: 768px) { .inquiryPopup .popInner .carswBtn .towButton a + a { margin-top: 0; } } .inquiryPopup .popInner .btnWarp { width: 100%; margin: 0 auto; } @media (min-width: 768px) { .inquiryPopup .popInner .btnWarp { width: 16rem; } } .inquiryPopup .popInner .tableStyle { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin-top: 3rem; margin-bottom: 5rem; } .inquiryPopup .popInner .tableStyle dl { display: block; border-bottom: 1px solid #dedede; padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 768px) { .inquiryPopup .popInner .tableStyle dl { display: flex; padding-top: 0rem; padding-bottom: 0rem; } } .inquiryPopup .popInner .tableStyle dl dt { font-size: 1.4rem; color: #676767; } @media (min-width: 768px) { .inquiryPopup .popInner .tableStyle dl dt { padding: 2rem; font-weight: 700; width: 14rem; background-color: #f3f3f3; } } .inquiryPopup .popInner .tableStyle dl dd { padding: 0rem; margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 768px) { .inquiryPopup .popInner .tableStyle dl dd { padding: 2rem; margin-top: 0; } } .inquiryPopup .popInner .tableStyle dl:last-child { border-bottom: 0; } .couponPopup { position: fixed; overflow: hidden; width: 100%; height: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; z-index: 500; padding: 2rem; } .couponPopup .popInner { width: 100%; max-width: 120rem; min-height: 22rem; max-height: 90%; overflow-y: auto; position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 5rem 0; border-radius: 0.6rem; } @media (max-width: 1240px) { .couponPopup .popInner { width: calc(100% - 4rem); } } .couponPopup .popInner .content { max-width: 100rem; width: 100%; margin: 0 auto; } .couponPopup .popInner .content .title strong { display: flex; justify-content: center; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; line-height: 2.6rem; } @media (min-width: 768px) { .couponPopup .popInner .content .title strong { font-size: 2.4rem; line-height: 3.2rem; } } .couponPopup .popInner .content .cartItemWrap { padding: 0 2rem; max-width: 100rem; margin: 0 auto; margin-top: 3rem; } .couponPopup .popInner .content .cartItemWrap .cartItem { display: flex; justify-content: space-between; align-items: center; padding-right: 2rem !important; border: 1px solid #dedede; border-radius: 0.6rem; } @media (max-width: 768px) { .couponPopup .popInner .content .cartItemWrap .cartItem { display: block; padding: 2rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div { display: flex; align-items: center; margin-top: 0; } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div > p { margin-left: 0; border-radius: 0; overflow: hidden; } @media (max-width: 768px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div > p { width: 7.5rem; height: 7.5rem; border-radius: 0.6rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div > p img { width: 18rem; height: 18rem; } @media (max-width: 768px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div > p img { width: 7.5rem; height: 7.5rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl { margin-left: 1.5rem; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 58%; } @media (max-width: 768px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl { width: calc(100% - 7.5rem); max-width: initial; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dt { font-weight: 600; font-size: 1.6rem; color: #000; line-height: 2rem; } @media (min-width: 1025px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dt { font-size: 2rem; line-height: 2.6rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dd { font-weight: 400; font-size: 1.4rem; line-height: 2rem; color: #676767; } @media (min-width: 1025px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dd { line-height: 2.2rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dt, .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dd { width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 1025px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dt, .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dd { -webkit-line-clamp: 2; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dt + dd { margin-top: 0.5rem; } @media (min-width: 1025px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dt + dd { margin-top: 1rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dd + dd { margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 1025px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo > div dl dd + dd { margin-top: 2rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo + dl { min-width: 20rem; text-align: right; } @media (max-width: 768px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo + dl { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #dedede; text-align: left; } } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo + dl dt { font-size: 1.4rem; font-weight: 400; } .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2rem; font-weight: 600; margin-top: 0.5rem; } @media (min-width: 1025px) { .couponPopup .popInner .content .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2.4rem; } } .couponPopup .popInner .content .cartItemWrap .cartItem > dl .couponBtn { display: flex; justify-content: flex-end; margin-top: 1rem !important; } @media (max-width: 767px) { .couponPopup .popInner .content .cartItemWrap .cartItem > dl .couponBtn { justify-content: flex-start; } } .couponPopup .popInner .content .cartItemWrap .cartItem > dl .couponBtn .info { display: flex; align-items: center; margin-right: 1rem; font-size: 1.4rem; font-weight: 400; color: #000000; } .couponPopup .popInner .content .cartItemWrap .cartItem > dl .couponBtn .apply { display: flex; justify-content: center; align-items: center; width: 7.2rem; height: 2.4rem; font-size: 1.4rem; font-weight: 400; color: #ffffff; background-color: #05141f; } .couponPopup .popInner .content .cartItemWrap .cartItem > dl .couponBtn .clear { display: flex; justify-content: center; align-items: center; width: 7.2rem; height: 2.4rem; font-size: 1.4rem; font-weight: 400; color: #9ea1a2; background-color: #f3f3f3; } .couponPopup .popInner .content .counponList { padding: 0 2rem; } .couponPopup .popInner .content .counponList li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dedede; padding: 2.5rem 0; } @media (max-width: 768px) { .couponPopup .popInner .content .counponList li { display: block; } } .couponPopup .popInner .content .counponList li .infoWrap { width: calc(100% - 15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .couponPopup .popInner .content .counponList li .infoWrap { width: 100%; } } .couponPopup .popInner .content .counponList li .infoWrap .info { display: flex; flex-wrap: wrap; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem { margin-top: 0.5rem; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem [type=radio] { position: relative; top: -0.1rem; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: max(1px, 0.1em) solid #05141f; border-radius: 50%; width: 1.5rem; height: 1.5rem; transition: border 0.3s ease-in-out; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem [type=radio]:checked::after { content: ""; position: absolute; top: 0.3rem; left: 0.3rem; width: 0.7rem; height: 0.7rem; background: #000000; border-radius: 100%; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem [type=radio]:disabled { background-color: #dedede; box-shadow: none; opacity: 0.7; cursor: not-allowed; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem [type=radio]:disabled + span { opacity: 0.5; cursor: not-allowed; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem span { position: relative; font-size: 1.6rem; font-weight: 600; padding-left: 0.5rem; color: #000000; } .couponPopup .popInner .content .counponList li .infoWrap .info .radioItem span::before { content: ""; position: absolute; top: 0.1rem; right: -1.2rem; display: inline-block; width: 0.1rem; height: 1.5rem; background-color: #dedede; padding-top: 0.2rem; } .couponPopup .popInner .content .counponList li .infoWrap .info .title { position: relative; padding-left: 2.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.5rem; font-size: 1.6rem; font-weight: 600; color: #676767; } .couponPopup .popInner .content .counponList li .infoWrap .date { margin-top: 1.2rem; margin-left: 2.4rem; font-size: 1.4rem; font-weight: 400; color: #676767; } .couponPopup .popInner .content .counponList li .benefit { width: 15rem; margin-top: 2.5rem; text-align: right; font-size: 2rem; font-weight: 600; color: 600; } @media (max-width: 768px) { .couponPopup .popInner .content .counponList li .benefit { width: 100%; margin-left: 2.4rem; text-align: left; font-size: 1.8rem; } } .couponPopup .popInner .content .carswBtn { width: 100%; margin: 0 auto; margin-top: 3rem; } @media (min-width: 768px) { .couponPopup .popInner .content .carswBtn { margin-top: 5rem; width: 37rem; } } .couponPopup .popInner .content .carswBtn .towButton { display: flex; flex-wrap: wrap; padding: 0 2rem; } .couponPopup .popInner .content .carswBtn .towButton .leftBtn { margin-right: 0; } @media (min-width: 768px) { .couponPopup .popInner .content .carswBtn .towButton .leftBtn { margin-right: 0.5rem; } } .couponPopup .popInner .content .carswBtn .towButton .rightBtn { margin-left: 0; } @media (min-width: 768px) { .couponPopup .popInner .content .carswBtn .towButton .rightBtn { margin-left: 0.5rem; } } @media (min-width: 768px) { .couponPopup .popInner .content .carswBtn .towButton { flex-wrap: nowrap; } } .couponPopup .popInner .content .carswBtn .towButton a + a { margin-top: 1rem; } @media (min-width: 768px) { .couponPopup .popInner .content .carswBtn .towButton a + a { margin-top: 0; } } .policyPopup { display: flex; align-items: center; justify-content: center; position: fixed; overflow: hidden; width: 100%; height: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; z-index: 500; padding: 2rem; } .policyPopup .popInner { overflow-y: auto; width: 100%; max-width: 120rem; min-height: 22rem; max-height: calc(90vh - 10rem); position: relative; top: 0 !important; background-color: #fff; padding: 10rem 0; border-radius: 0.6rem; } @media (max-width: 1240px) { .policyPopup .popInner { width: calc(100% - 4rem); } } @media (max-width: 768px) { .policyPopup .popInner { padding: 3rem 0; } } .policyPopup .popInner .content { position: relative; max-width: 100rem; width: 100%; margin: 0 auto; } @media (max-width: 1100px) { .policyPopup .popInner .content { padding: 0 3rem; } } .policyPopup .popInner .content + .content { margin-top: 3rem; padding-top: 6rem; border-top: 1px solid #d9d9d9; } @media (max-width: 768px) { .policyPopup .popInner .content + .content { padding-top: 4rem; } } .policyPopup .popInner .content u { border-bottom: 1px solid #000; } .policyPopup .popInner .content .title strong { display: flex; justify-content: center; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; line-height: 2.6rem; } @media (min-width: 768px) { .policyPopup .popInner .content .title strong { font-size: 3.2rem; line-height: 3.4rem; } } .policyPopup .popInner .content .editorText { margin-top: 4rem; } @media (max-width: 768px) { .policyPopup .popInner .content .editorText { margin-top: 1.6rem; } } .policyPopup .popInner .content .editorText.termsContents h2 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .policyPopup .popInner .content .editorText.termsContents h2 { font-size: 2.4rem; } } .policyPopup .popInner .content .editorText.termsContents h3 { margin-top: 2rem; } @media (min-width: 768px) { .policyPopup .popInner .content .editorText.termsContents h3 { margin-top: 3rem; } } .policyPopup .popInner .content .editorText.termsContents h4 { margin-top: 4rem; } .policyPopup .popInner .content .editorText.termsContents > p { margin-top: 2rem; line-height: 3rem; font-size: 2.2rem; } @media (max-width: 768px) { .policyPopup .popInner .content .editorText.termsContents > p { font-size: 1.4rem; line-height: 2.2rem; } } .policyPopup .popInner .content .editorText.termsContents ul, .policyPopup .popInner .content .editorText.termsContents ol { margin-top: 2rem; } .policyPopup .popInner .content .editorText.termsContents ul li, .policyPopup .popInner .content .editorText.termsContents ol li { line-height: 2.2rem; font-size: 1.4rem; color: #676767; } .policyPopup .popInner .content .editorText.termsContents ol li { padding: 0.2rem 0; } .policyPopup .popInner .content .editorText.termsContents ol li span { line-height: 2.2rem; font-size: 1.4rem; } .policyPopup .popInner .content .editorText.termsContents ol li span::before { display: block; padding-right: 0.5rem; font-style: normal; margin-top: 0.2rem; } .policyPopup .popInner .content .editorText.termsContents ol li ol { margin-top: 0.3rem; margin-bottom: 1rem; } .policyPopup .popInner .content .editorText.termsContents ol li ol li { padding: 0 0 0 2rem; } .policyPopup .popInner .content .editorText.termsContents ol li ol li span { line-height: 2.2rem; font-size: 1.4rem; } .policyPopup .popInner .content .editorText.termsContents ol li ol li span::before { display: block; padding-right: 0.5rem; font-style: normal; margin-top: 0.2rem; } .policyPopup .popInner .content .carswBtn { width: 18rem; margin: 0 auto; margin-top: 3rem; } @media (min-width: 768px) { .policyPopup .popInner .content .carswBtn { margin-top: 5rem; } } .policyPopup .popInner .content .marketingCheck { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-top: 3rem; flex-direction: column; } @media (min-width: 768px) { .policyPopup .popInner .content .marketingCheck { flex-direction: row; } } .policyPopup .popInner .content .marketingCheck h4 { width: 100%; margin: 0 0 1.6rem; font-size: 2.2rem; } @media (max-width: 768px) { .policyPopup .popInner .content .marketingCheck h4 { font-size: 1.6rem; } } .policyPopup .popInner .content .marketingCheck h5 { width: 100%; margin: 0 0 1.6rem; font-size: 1.4rem; } .policyPopup .popInner .content .marketingCheck > span { display: block; } @media (max-width: 768px) { .policyPopup .popInner .content .marketingCheck > span { font-size: 1.4rem; } } .policyPopup .popInner .content .marketingCheck .titArea { margin-bottom: 4rem; font-size: 2.2rem; } @media (max-width: 768px) { .policyPopup .popInner .content .marketingCheck .titArea { margin-bottom: 2.4rem; font-size: 1.6rem; } } .policyPopup .popInner .content .marketingCheck .titArea + .agree-area { margin-bottom: 4rem; } .policyPopup .popInner .content .marketingCheck .titArea h4 { margin-top: 0; } @media (max-width: 768px) { .policyPopup .popInner .content .marketingCheck .titArea span { font-size: 1.4rem; } } .policyPopup .popInner .content .marketingCheck .agree-area { display: block; gap: 5rem; } @media (min-width: 768px) { .policyPopup .popInner .content .marketingCheck .agree-area { display: flex; } } .policyPopup .popInner .content .marketingCheck .agree-area label { display: flex; align-items: center; margin-top: 3rem; } @media (min-width: 768px) { .policyPopup .popInner .content .marketingCheck .agree-area label { margin-top: 0; } } .policyPopup .popInner .content .marketingCheck .agree-area label span { margin-left: 1rem; } @media (max-width: 768px) { .policyPopup .popInner .content .marketingCheck .agree-area label span { font-size: 1.4rem; } } .policyPopup .popInner .content .marketingCheck.Multi { display: block; } .policyPopup .popInner .content .bu { display: block; padding-left: 0.8rem; text-indent: -1rem; } .policyPopup .popInner .content .bu2 { display: block; padding-left: 1.8rem; text-indent: -1.8rem; } .policyPopup .popInner .content .acc { color: #000; font-weight: 700; } .policyPopup .popInner .content .acc .bu { display: block; padding-left: 2rem; text-indent: -2rem; } .policyPopup .popInner .content .noticeTextBox { margin: 3.2rem 0 4rem; padding: 3.2rem; font-size: 2rem; line-height: 2.4rem; border: 1px solid #e2e2e2; } @media (max-width: 768px) { .policyPopup .popInner .content .noticeTextBox { margin: 1.6rem 0 4rem; padding: 2.4rem 2rem; font-size: 1.4rem; } } .policyPopup .popInner .content .agreeBox { padding: 4.2rem; border: 1px solid #e2e2e2; } @media (max-width: 768px) { .policyPopup .popInner .content .agreeBox { padding: 2.4rem 2rem; font-size: 1.4rem; } } .policyPopup .popInner .content .agreeBox h4 { margin: 0 0 1.6rem !important; font-size: 2.2rem; } @media (max-width: 768px) { .policyPopup .popInner .content .agreeBox h4 { font-size: 1.6rem; } } .policyPopup .popInner .content .agreeBox h5 { font-size: 1.6rem; } .policyPopup .popInner .content .agreeBox .titArea { margin-bottom: 4rem; } .policyPopup .popInner .content .agreeBox .titArea span { font-size: 2.2rem; } @media (max-width: 768px) { .policyPopup .popInner .content .agreeBox .titArea span { font-size: 1.4rem; } } .policyPopup .popInner .content .towButton { justify-content: center; } .policyPopup .popInner .content .towButton a { width: 18rem; } @media (max-width: 768px) { .policyPopup.marketingAd .popInner { width: 100%; } } @media (max-width: 768px) { .policyPopup.marketingAd .popInner .content { width: auto; padding: 0; margin: 0 3rem; } .policyPopup.marketingAd .popInner .content + .content { padding: 6rem 0; } .policyPopup.marketingAd .popInner .content .marketingCheck { display: block; } .policyPopup.marketingAd .popInner .content .marketingCheck .agree-area label { margin-top: 2.4rem; } .policyPopup.marketingAd .popInner .content .carswBtn { width: 100%; margin: 0; padding: 4rem 0 0; } .policyPopup.marketingAd .popInner .content .carswBtn .towButton { display: block; } .policyPopup.marketingAd .popInner .content .carswBtn .towButton a { width: 100%; margin-top: 0.8rem; } } #ad_popup .popInner .content .carswBtn { width: 100%; margin: 0 auto; margin-top: 3rem; padding-top: 0; } @media (min-width: 768px) { #ad_popup .popInner .content .carswBtn { margin-top: 5rem; } } .termsContents { margin-top: 4rem; } .termsContents h2 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .termsContents h2 { font-size: 2.4rem; } } .termsContents h3 { margin-top: 2rem; } @media (min-width: 768px) { .termsContents h3 { margin-top: 3rem; } } .termsContents h4 { margin-top: 4rem; } .termsContents > p { margin-top: 2rem; line-height: 2.2rem; font-size: 1.6rem; } @media (max-width: 768px) { .termsContents > p { font-size: 1.4rem; } } .termsContents ul, .termsContents ol { margin-top: 2rem; } .termsContents ul li, .termsContents ol li { line-height: 2.2rem; font-size: 1.4rem; color: #676767; } .termsContents ol li { padding: 0.2rem 0; } .termsContents ol li span { line-height: 2.2rem; font-size: 1.4rem; } .termsContents ol li span::before { display: block; padding-right: 0.5rem; font-style: normal; margin-top: 0.2rem; } .termsContents ol li ol { margin-top: 0.3rem; margin-bottom: 1rem; } .termsContents ol li ol li { padding: 0 0 0 2rem; } .termsContents ol li ol li span { line-height: 2.2rem; font-size: 1.4rem; } .termsContents ol li ol li span::before { display: block; padding-right: 0.5rem; font-style: normal; margin-top: 0.2rem; } .installInfoPopup { position: fixed; overflow: hidden; width: 100%; height: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; z-index: 500; padding: 2rem; } .installInfoPopup .popInner { width: 100%; max-width: 120rem; min-height: 22rem; position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-color: #fff; padding: 5rem; border-radius: 0.6rem; } @media (max-width: 1240px) { .installInfoPopup .popInner { width: calc(100% - 4rem); } } @media (max-width: 1120px) { .installInfoPopup .popInner { padding: 3rem 3rem; } } .installInfoPopup .popInner .swiper { margin-top: 4rem; } .installInfoPopup .popInner .swiper ul li { width: calc((100% - 40px) / 3); } @media (max-width: 768px) { .installInfoPopup .popInner .swiper ul li { width: 100%; } } .installInfoPopup .popInner .swiper ul li img { width: 100%; border-radius: 0.6rem; } .installInfoPopup .popInner .swiper ul li:not(:last-child) { margin-right: 2rem; } .installInfoPopup .popInner .swiper ul li p { margin-top: 1.5rem; font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; } @media (max-width: 768px) { .installInfoPopup .popInner .swiper ul li p { font-size: 1.4rem; line-height: 2.2rem; } } .installInfoPopup .popInner .swiper .swiper-scrollbar, .installInfoPopup .popInner .swiper .swiper-scrollbar.swiper-scrollbar-horizontal { bottom: 0; left: 0; right: 0; margin: auto; width: 400px; height: 4px; border-radius: 0; background: #c3c6c8; opacity: 1 !important; } @media (max-width: 768px) { .installInfoPopup .popInner .swiper .swiper-scrollbar, .installInfoPopup .popInner .swiper .swiper-scrollbar.swiper-scrollbar-horizontal { width: 100%; } } .installInfoPopup .popInner .swiper .swiper-scrollbar .swiper-scrollbar-drag, .installInfoPopup .popInner .swiper .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag { border-radius: 0; background: #05141f; } .installInfoPopup .popInner .swiper .swiper-scrollbar-after-space { height: 40px; } .installInfoPopup .popInner .swiper .swiper-scrollbar-lock + .swiper-scrollbar-after-space { display: none; } .installInfoPopup .popInner p strong { display: flex; justify-content: center; align-items: flex-start; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; line-height: 2.6rem; text-align: left; } @media (min-width: 768px) { .installInfoPopup .popInner p strong { font-size: 2.4rem; line-height: 3.2rem; } } .installInfoPopup .popInner p strong img { margin-right: 1rem; } .installInfoPopup .popInner p span { display: flex; justify-content: center; font-size: 1.4rem; line-height: 2.2rem; text-align: center; } @media (min-width: 768px) { .installInfoPopup .popInner p span { font-size: 1.6rem; } } .installInfoPopup .popInner p span.info { font-size: 1.4rem; } .installInfoPopup .popInner p + p { margin-top: 1.5rem; } @media (min-width: 768px) { .installInfoPopup .popInner p + p { margin-top: 2rem; } } .installInfoPopup .popInner .tableView { margin-top: 3rem; } @media (max-width: 768px) { .installInfoPopup .popInner .tableView { margin-top: 2.5rem; } } .installInfoPopup .popInner .tableView dl { display: flex; justify-content: flex-start; align-items: center; padding: 2rem 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } @media (max-width: 768px) { .installInfoPopup .popInner .tableView dl { display: block; padding: 1.5rem 0; } } .installInfoPopup .popInner .tableView dl .itemName { position: relative; width: 14.5rem; font-size: 1.4rem; line-height: 2.2rem; color: #676767; } @media (max-width: 768px) { .installInfoPopup .popInner .tableView dl .itemName { font-size: 1.4rem; line-height: 2.2rem; } } .installInfoPopup .popInner .tableView dl .itemName::after { content: ""; position: absolute; top: 0.3rem; right: 0; display: block; width: 0.1rem; height: 1.5rem; background-color: #dedede; } @media (max-width: 768px) { .installInfoPopup .popInner .tableView dl .itemName::after { display: none; } } .installInfoPopup .popInner .tableView dl .itemValue { display: flex; justify-content: flex-start; width: calc(100% - 14.5rem); padding-left: 2rem; font-size: 1.4rem; line-height: 2.2rem; color: #000000; } @media (max-width: 768px) { .installInfoPopup .popInner .tableView dl .itemValue { display: block; width: 100%; margin-top: 0; padding-left: 0; font-size: 1.4rem; line-height: 2.2rem; } } .installInfoPopup .popInner .tableView dl:not(:first-child) { border-top: 0; } .installInfoPopup .popInner .carswBtn { width: 100%; margin: 0 auto; margin-top: 3rem; } @media (min-width: 768px) { .installInfoPopup .popInner .carswBtn { margin-top: 5rem; width: 37rem; } } .installInfoPopup .popInner .carswBtn .towButton { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .installInfoPopup .popInner .carswBtn .towButton { flex-wrap: nowrap; } } .installInfoPopup .popInner .carswBtn .towButton a + a { margin-top: 1rem; } @media (min-width: 768px) { .installInfoPopup .popInner .carswBtn .towButton a + a { margin-top: 0; } } .installInfoPopup .popInner .btnWarp { width: 100%; margin: 0 auto; } @media (min-width: 768px) { .installInfoPopup .popInner .btnWarp { width: 16rem; } } .installInfoPopup .popInner .counponBtn { width: 16rem; margin: 0 auto; margin-top: 3rem; } @media (max-width: 768px) { .installInfoPopup .popInner .counponBtn { width: 100%; } } .installInfoPopup .popInner .tableStyle { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin-top: 3rem; margin-bottom: 5rem; } .installInfoPopup .popInner .tableStyle dl { display: block; border-bottom: 1px solid #dedede; padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 768px) { .installInfoPopup .popInner .tableStyle dl { display: flex; padding-top: 0rem; padding-bottom: 0rem; } } .installInfoPopup .popInner .tableStyle dl dt { font-size: 1.4rem; color: #676767; } @media (min-width: 768px) { .installInfoPopup .popInner .tableStyle dl dt { padding: 2rem; font-weight: 700; width: 14rem; background-color: #f3f3f3; } } .installInfoPopup .popInner .tableStyle dl dd { padding: 0rem; margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 768px) { .installInfoPopup .popInner .tableStyle dl dd { padding: 2rem; margin-top: 0; } } .installInfoPopup .popInner .tableStyle dl:last-child { border-bottom: 0; } .floating_menu { display: none; position: fixed; bottom: 1rem; right: 1rem; z-index: 1; } .floating_menu a { display: block; } .floating_menu a img { width: 5.6rem; height: 5.6rem; } @media (max-width: 768px) { .floating_menu a img { width: 5rem; height: 5rem; } } .floating_menu a:not(:first-child) { margin-top: -1.2rem; } .table-wrap { width: 100%; overflow-x: auto; } .table-wrap table { width: 100%; } .table-wrap table th { padding: 2.3rem; background-color: #f3f3f3; font-size: 1.6rem; line-height: 1.4rem; color: #676767; font-weight: 600; text-align: center; } @media (max-width: 768px) { .table-wrap table th { font-size: 1.4rem; } } .table-wrap table td { padding: 2.3rem 2.4rem; color: #000000; font-size: 1.6rem; line-height: 2.4rem; } @media (max-width: 768px) { .table-wrap table td { font-size: 1.4rem; } } .table-wrap table th, .table-wrap table td { border: 1px solid #e6e6e6; } .table-wrap.type2 table { table-layout: fixed; } .table-wrap.type2 table th { padding: 2.3rem 1.8rem; font-size: 1.6rem; color: #000; } @media (max-width: 768px) { .table-wrap.type2 table th { padding: 1.8rem 1rem; } } .table-wrap.type2 table td { font-size: 1.6rem; color: #676767; } @media (max-width: 768px) { .table-wrap.type2 table td { padding: 1.8rem 1rem; font-size: 1.4rem; } } .table-wrap.type2 table td a { color: #676767; border-bottom: 1px solid #676767; } .noticeTextUnderTable { margin-top: 3.2rem; font-size: 2.2rem; font-weight: 400; line-height: 3rem; color: #000000; text-indent: -2.4rem; padding: 0 0 2rem 2.4rem; } @media (max-width: 768px) { .noticeTextUnderTable { font-size: 1.4rem; text-indent: -1.7rem; padding: 0 0 0 1.5rem; } } .mt-2 { margin-top: 2rem; } .mt-4 { margin-top: 4rem; } .mt-6 { margin-top: 6rem; } .mt-8 { margin-top: 8rem; } .mt-10 { margin-top: 10rem; } .mt-12 { margin-top: 12rem; } .mt-14 { margin-top: 14rem; } .mt-16 { margin-top: 16rem; } .mt-18 { margin-top: 18rem; } .mt-20 { margin-top: 20rem; } .btn-more { display: inline-flex; align-items: center; font-size: 1.6rem; font-weight: 400; color: #676767; margin-left: 1rem; } @media (max-width: 768px) { .btn-more { font-size: 1.4rem; margin-left: 0.5rem; } } .btn-more em { border-bottom: 1px solid #676767; line-height: 1.3; } .btn-more:after { content: ""; display: block; width: 0.8rem; height: 1.4rem; margin-left: 0.6rem; background: url(../images/common/icon-arrow_right.svg) no-repeat center/contain; } .agree-result .popInner { width: 64rem; padding: 5rem 3rem; } @media (max-width: 768px) { .agree-result .popInner { width: 90%; transform: translate(-50%, -55%); -webkit-transform: translate(-50%, -55%); } } .agree-result .popInner .tableStyle { border-top: 1px solid #dedede; margin-top: 3rem; margin-bottom: 5rem; } .agree-result .popInner .tableStyle dl { display: flex; align-items: center; padding-top: 0rem; padding-bottom: 0rem; text-align: center; } .agree-result .popInner .tableStyle dl dt { width: 39rem; padding: 2rem 0.5rem; font-size: 1.6rem; color: #000; font-weight: 400; background-color: #f3f3f3; } @media (max-width: 768px) { .agree-result .popInner .tableStyle dl dt { width: 60%; font-size: 1.4rem; padding: 2rem; } } .agree-result .popInner .tableStyle dl dd { margin-top: 0; font-size: 1.4rem; flex: 1; color: #676767; text-align: center; } @media (min-width: 768px) { .agree-result .popInner .tableStyle dl dd { width: 40%; flex: auto; padding: 2rem; } } .agree-result .popInner .tableStyle dl:last-child { border-bottom: 0; } .agree-result .popInner .btnWarp { width: 16rem; margin: 0 auto; } .agree-result .popInner .btnWarp.mg-t { margin-top: 5rem; } .br-m { display: none; } @media (max-width: 768px) { .br-m { display: block; } } .br-pc { display: none; } @media (min-width: 768px) { .br-pc { display: block; } } .tooltip { display: none; position: absolute; z-index: 1; } .tooltip-bubble { position: relative; padding: 1.6rem 1.6rem 1.4rem; background: #fff; border: 1px solid #697279; /* 테두리 추가 */ border-radius: 0.6rem; font-size: 1.4rem; color: #9ea1a2; box-shadow: 4px 4px 10px 0px rgba(5, 20, 31, 0.1215686275); } .tooltip-bubble .edge { position: absolute; top: -0.7rem; /* border 두께 때문에 살짝 조정 */ left: 2.4rem; width: 1.2rem; height: 1.2rem; background: #fff; border-left: 1px solid #697279; /* 포인터 테두리 */ border-top: 1px solid #697279; transform: rotate(45deg); } #carListPopup { display: flex; justify-content: center; align-items: center; } #carListPopup .popContents { display: flex; flex-direction: column; } #carListPopup .payInfoCon { flex: 1; overflow-y: auto; max-height: 60vh; } #carListPopup .popContents { width: 90%; max-width: 40rem; background-color: #fff; border-radius: 0.6rem; padding: 0 1.6rem; } #carListPopup .popContents h2 { height: 7.8rem; padding: 3.2rem 0 2.4rem; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; } #carListPopup .popContents .carlistItem { overflow-y: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; max-height: 27rem; } #carListPopup .popContents .carlistItem button { position: relative; padding: 0.8rem 0 0.8rem 3rem; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } #carListPopup .popContents .carlistItem button strong { display: block; font-size: 1.4rem; font-weight: 400; color: #05141f; line-height: 1.5; } #carListPopup .popContents .carlistItem button em { display: block; font-size: 1.2rem; color: #9ea1a2; line-height: 1.4; } #carListPopup .popContents .carlistItem .selected button:before { content: ""; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2rem; height: 2rem; background: url("../images/common/ico_selected2.png") center center no-repeat; background-size: 1.8rem auto; } #carListPopup .towButton { justify-content: center; height: 12rem; gap: 1rem; padding: 3.2rem 0; } #carListPopup .towButton button { max-width: 12.5rem; } .reviewWritePopup { position: fixed; overflow: hidden; width: 100%; height: 100%; display: flex; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; z-index: 500; padding: 2rem; } .reviewWritePopup .popInner { width: 100%; max-height: 100%; overflow-y: auto; position: absolute; top: 0 !important; left: 0; bottom: 0; transform: translate(0, 0); background-color: #fff; padding: 2rem; border-radius: 0; } @media (min-width: 768px) { .reviewWritePopup .popInner { top: 53% !important; left: 50%; bottom: auto; width: 100%; max-width: 90rem; min-height: 22rem; transform: translate(-50%, -50%); padding: 5rem 3rem; border-radius: 0.6rem; } } .reviewWritePopup .popInner button { cursor: pointer; } .reviewWritePopup .popInner .title { position: relative; margin-bottom: 2rem; } .reviewWritePopup .popInner .title strong { display: flex; justify-content: center; font-size: 1.8rem; font-weight: 600; color: #000; text-align: center; line-height: 2.6rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .title strong { font-size: 2.4rem; line-height: 3.2rem; } } .reviewWritePopup .popInner .btn-close { display: block; position: absolute; top: 0.4rem; right: 0; width: 3rem; height: 3rem; background: url(../images/common/icon-menu-close.svg) no-repeat center/1.8rem auto; text-indent: -9999em; } @media (min-width: 768px) { .reviewWritePopup .popInner .btn-close { display: none; } } .reviewWritePopup .popInner .inquiryType { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; max-width: 80rem; margin-top: 3rem; margin-left: auto; margin-right: auto; background-color: #f3f3f3; padding: 3rem 2.4rem; } .reviewWritePopup .popInner .inquiryType .radioArea { display: flex; justify-content: center; align-items: center; } .reviewWritePopup .popInner .inquiryType .radioArea label { font-size: 20px; line-height: 2rem; padding: 0.2em 0.4em; } .reviewWritePopup .popInner .inquiryType .radioArea span { vertical-align: middle; font-size: 1.6rem; } .reviewWritePopup .popInner .inquiryType .radioArea [type=radio] { vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: max(1px, 0.1em) solid #05141f; border-radius: 50%; width: 1.5rem; height: 1.5rem; transition: border 0.3s ease-in-out; } .reviewWritePopup .popInner .inquiryType .radioArea [type=radio]:checked { border: 0.4rem solid #ea0029; } .reviewWritePopup .popInner .inquiryType .radioArea [type=radio]:hover { box-shadow: 0 0 0 max(2px, 0.2em) #dedede; cursor: pointer; } .reviewWritePopup .popInner .inquiryType .radioArea [type=radio]:disabled { background-color: #dedede; box-shadow: none; opacity: 0.7; cursor: not-allowed; } .reviewWritePopup .popInner .inquiryType .radioArea [type=radio]:disabled + span { opacity: 0.5; cursor: not-allowed; } .reviewWritePopup .popInner .inquiryType .info { font-size: 1.4rem; font-weight: 400; line-height: 2.2; color: #676767; } .reviewWritePopup .popInner .privateApply { margin: auto; width: 100%; max-width: 84rem; text-align: left; margin-top: 2rem; padding: 0 2rem; } .reviewWritePopup .popInner .privateApply label { display: inline-flex; align-items: center; cursor: pointer; font-size: 1.4rem; } .reviewWritePopup .popInner .privateApply label span { margin-left: 1rem; line-height: 2rem; } .reviewWritePopup .popInner .csWarp .csInner { margin: 0 auto; } .reviewWritePopup .popInner .csWarp .csInner dl.important dt { display: flex; align-items: center; } .reviewWritePopup .popInner .csWarp .csInner dl.important dt::after { content: ""; width: 0.5rem; height: 0.5rem; display: block; border-radius: 50%; margin-left: 0.4rem; background-color: #ea0029; margin-top: -0.7rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl.important dt::after { margin-left: 0.4rem; margin-top: -1rem; } } .reviewWritePopup .popInner .csWarp .csInner dl.important.optionSelected .optionDetailInner { display: flex !important; } .reviewWritePopup .popInner .csWarp .csInner dl.important.optionSelected .before { display: none !important; } .reviewWritePopup .popInner .csWarp .csInner dl { display: flex; flex-wrap: wrap; align-items: center; row-gap: 1rem; } .reviewWritePopup .popInner .csWarp .csInner dl dt { position: relative; width: 100%; font-size: 1.4rem; font-weight: 600; color: #000; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner dl dt { font-size: 1.6rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd { width: 100%; display: flex; margin-top: 0.3rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd { margin-top: 0; } } .reviewWritePopup .popInner .csWarp .csInner dl dd input[type=text] { display: flex; width: 100%; align-items: center; padding-left: 1.7rem; border: 1px solid #dedede; height: 4.5rem; font-size: 1.4rem; color: #000; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner dl dd input[type=text] { font-size: 1.6rem; height: 5rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd > div { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd > div { flex-wrap: nowrap; } } .reviewWritePopup .popInner .csWarp .csInner dl dd > div input[type=text] { width: 33.3333333333%; font-size: 1.4rem; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner dl dd > div input[type=text] { font-size: 1.6rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd > div input[type=text] + input[type=text] { margin-left: 1rem; } .reviewWritePopup .popInner .csWarp .csInner dl dd > div input[type=text] + select { width: 100%; margin-top: 1rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd > div input[type=text] + select { margin-top: 0; margin-left: 1rem; width: 33.3333333333%; } } .reviewWritePopup .popInner .csWarp .csInner dl dd > div span { height: 5rem; display: flex; align-items: center; padding-left: 0.8rem; padding-right: 0.8rem; } .reviewWritePopup .popInner .csWarp .csInner dl dd > div.phone { flex-wrap: nowrap; } .reviewWritePopup .popInner .csWarp .csInner dl dd > div.mail input { width: 45.5%; } .reviewWritePopup .popInner .csWarp .csInner dl dd select { width: 100%; height: 4.5rem; border: 1px solid #dedede; outline: 0 none; border-radius: 0; padding-left: 1.7rem; display: flex; align-items: center; font-size: 1.4rem; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner dl dd select { font-size: 1.6rem; height: 5rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd select option { height: 4.5rem; display: flex; padding-left: 1.7rem; align-items: center; } @media (min-width: 1240px) { .reviewWritePopup .popInner .csWarp .csInner dl dd select option { height: 5rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd textarea { width: auto; height: 30rem; border: 1px solid #dedede; outline: 0 none; border-radius: 0; padding: 1.5rem 2rem; font-size: 1.4rem; line-height: 1.2; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd textarea { height: 24rem; font-size: 1.6rem; line-height: 1.2; } } .reviewWritePopup .popInner .csWarp .csInner dl dd textarea::-moz-placeholder { color: #9ea1a2; } .reviewWritePopup .popInner .csWarp .csInner dl dd textarea::placeholder { color: #9ea1a2; } .reviewWritePopup .popInner .csWarp .csInner dl dd .selectInner .cont-select .btn-select::before { content: attr(data-placeholder-mobile); color: #9ea1a2; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd .selectInner .cont-select .btn-select::before { content: attr(data-placeholder); } } .reviewWritePopup .popInner .csWarp .csInner dl dd .selectInner .cont-select .btn-select.selected::before { display: none; } .reviewWritePopup .popInner .csWarp .csInner dl dd.contentsWrap { position: relative; flex-direction: column; } .reviewWritePopup .popInner .csWarp .csInner dl dd.contentsWrap .wordCounter { position: absolute; bottom: 1.4rem; right: 2rem; justify-content: flex-end; font-size: 1.2rem; color: #9ea1a2; text-align: right; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd.contentsWrap .wordCounter { font-size: 1.6rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp { display: block; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul { display: flex; justify-content: space-between; width: 100%; gap: 1rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul { justify-content: flex-start; } } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem { overflow: hidden; position: relative; width: calc((100% - 30px) / 3); border: 1px solid #dedede; border-radius: 0.8rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem { width: 16rem; height: 16rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap { position: relative; width: 100%; padding-top: 100%; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap .imgInput { display: none; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap .contents { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; cursor: pointer; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .itemWrap .contents img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileList ul .imgItem .delImg { position: absolute; display: none; top: 1rem; right: 1rem; cursor: pointer; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .textInfo { font-size: 1.4rem; color: #9ea1a2; margin-top: 1.5rem; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn { display: flex; margin-top: 3rem; flex-wrap: nowrap; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button, .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label { display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; border: 1px solid #dedede; cursor: pointer; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button span, .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label span { font-weight: 600; font-family: "KiaSignature"; color: #676767; font-size: 1.4rem; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button span, .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label span { font-size: 1.6rem; } } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button .icon-reset, .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label .icon-reset { width: 1.4rem; height: 1.4rem; background-image: url(../images/common/icon-reset.svg); background-size: contain; background-repeat: no-repeat; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button .icon-plus, .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label .icon-plus { width: 1.4rem; height: 1.4rem; background-image: url(../images/common/icon-bplus.svg); background-size: contain; background-repeat: no-repeat; } .reviewWritePopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn button + label { margin-left: 1rem; } .reviewWritePopup .popInner .csWarp .csInner .selectInner .cont-select { width: 100%; } .reviewWritePopup .popInner .csWarp .csInner dl.insertFile { align-items: flex-start; } .reviewWritePopup .popInner .csWarp .csInner dl.insertFile em { font-size: 1.4rem; color: #9ea1a2; font-weight: 400; margin-top: 0.5rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl.insertFile em { font-size: 1.6rem; } } .reviewWritePopup .popInner .csWarp .csInner dl.insertFile dt { margin-top: 0; } .reviewWritePopup .popInner .csWarp .csInner dl + dl { margin-top: 2.5rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .csWarp .csInner dl + dl { margin-top: 2rem; } } .reviewWritePopup .popInner .csWarp .csInner .csComplete { text-align: center; border: 1px solid #dedede; width: 100%; padding: 3rem; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner .csComplete { border: none; } } .reviewWritePopup .popInner .csWarp .csInner .csComplete p strong { font-size: 1.8rem; font-weight: 600; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner .csComplete p strong { font-size: 2.4rem; } } .reviewWritePopup .popInner .csWarp .csInner .csComplete p span { font-size: 1.4rem; line-height: 2.2rem; } @media (min-width: 1025px) { .reviewWritePopup .popInner .csWarp .csInner .csComplete p span { line-height: 2.4rem; font-size: 1.6rem; } } .reviewWritePopup .popInner .csWarp .csInner .csComplete p + p { margin-top: 2rem; } .reviewWritePopup .popInner .selectInner .cont-select .list-member { top: 4.8rem; } .reviewWritePopup .popInner .carswBtn { width: 100%; margin: 0 auto; margin-top: 3rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .carswBtn { margin-top: 5rem; } } .reviewWritePopup .popInner .carswBtn .oneButton { width: 16rem; margin: 0 auto; } .reviewWritePopup .popInner .carswBtn .towButton { display: flex; gap: 1rem; } .reviewWritePopup .popInner .carswBtn .towButton .leftBtn { margin-right: 0; cursor: pointer; } @media (min-width: 768px) { .reviewWritePopup .popInner .carswBtn .towButton .leftBtn { margin-right: 0.5rem; max-width: 18rem; } } .reviewWritePopup .popInner .carswBtn .towButton .rightBtn { margin-left: 0; cursor: pointer; } @media (min-width: 768px) { .reviewWritePopup .popInner .carswBtn .towButton .rightBtn { margin-left: 0.5rem; max-width: 18rem; } } @media (min-width: 768px) { .reviewWritePopup .popInner .carswBtn .towButton { flex-wrap: nowrap; justify-content: center; } } @media (min-width: 768px) { .reviewWritePopup .popInner .carswBtn .towButton a + a { margin-top: 0; } } .reviewWritePopup .popInner .photoReviewList { margin-top: 0; border: 0; } .reviewWritePopup .popInner .btnWarp { width: 100%; margin: 0 auto; } @media (min-width: 768px) { .reviewWritePopup .popInner .btnWarp { width: 16rem; } } .reviewWritePopup .popInner .optionDetail { display: none !important; } @media (min-width: 768px) { .reviewWritePopup .popInner .optionDetail { display: flex !important; } } @media (min-width: 768px) { .reviewWritePopup .popInner .optionDetail .before { display: flex; align-items: center; justify-content: center !important; width: 100%; height: 18rem; font-size: 1.6rem; font-weight: 400; color: #9ea1a2; background: #f0f0f0; border-radius: 0.6rem; border: 1px solid #dedede; padding: 1.6rem 3rem; } } .reviewWritePopup .popInner .optionDetail .optionDetailInner { overflow: hidden; display: none !important; align-items: center; justify-content: flex-start; height: 18rem; border-radius: 0.6rem; border: 1px solid #dedede; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionThumb { width: 18rem; height: 18rem; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionThumb img { width: 100%; height: 100%; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; padding: 1.6rem 3rem; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .date { font-size: 1.4rem; color: #676767; font-weight: 400; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .date b, .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .date strong { font-weight: 400; margin-right: 0.4rem; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .name { margin-top: 2rem; font-size: 2rem; font-weight: 600; color: #000; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .info { display: flex; margin-top: 0.6rem; font-size: 1.4rem; color: #676767; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .info span { height: auto; padding: 0; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .info span + span { margin-left: 0.5rem; } .reviewWritePopup .popInner .optionDetail .optionDetailInner .optionDetailItem .info span + span:before { content: "|"; margin-right: 0.4rem; } .reviewWritePopup .popInner .tableStyle { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin-top: 3rem; margin-bottom: 5rem; } .reviewWritePopup .popInner .tableStyle dl { display: block; border-bottom: 1px solid #dedede; padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .tableStyle dl { display: flex; padding-top: 0rem; padding-bottom: 0rem; } } .reviewWritePopup .popInner .tableStyle dl dt { font-size: 1.4rem; color: #676767; } @media (min-width: 768px) { .reviewWritePopup .popInner .tableStyle dl dt { padding: 2rem; font-weight: 700; width: 14rem; background-color: #f3f3f3; } } .reviewWritePopup .popInner .tableStyle dl dd { padding: 0rem; margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 768px) { .reviewWritePopup .popInner .tableStyle dl dd { padding: 2rem; margin-top: 0; } } .reviewWritePopup .popInner .tableStyle dl:last-child { border-bottom: 0; } .reviewWritePopup.photoReviewAllPopup .popInner { padding: 2rem 2rem; } @media (min-width: 768px) { .reviewWritePopup.photoReviewAllPopup .popInner { padding: 5rem 3rem; } } .reviewWritePopup.photoReviewAllPopup .popInner .title { display: flex; align-items: center; justify-content: center; min-height: 3.4rem; line-height: 1; } .reviewWritePopup.photoReviewAllPopup .popInner .title button { position: absolute; top: 0.2rem; right: 0; } @media (min-width: 768px) { .reviewWritePopup.photoReviewAllPopup .popInner .title button { top: 1.5rem; } } .reviewWritePopup.photoReviewAllPopup .popInner .carswBtn { display: none; } @media (min-width: 768px) { .reviewWritePopup.photoReviewAllPopup .popInner .carswBtn { display: block; } } .photoReviewDetailPopup .popInner { max-width: 124rem; padding: 2rem; } @media (min-width: 768px) { .photoReviewDetailPopup .popInner { padding: 5rem 3rem; } } .photoReviewDetailPopup .popInner .btn-close { display: block; position: absolute; top: 0.4rem; right: 0; width: 3rem; height: 3rem; background: url(../images/common/icon-menu-close.svg) no-repeat center/1.8rem auto; text-indent: -9999em; } @media (min-width: 768px) { .photoReviewDetailPopup .popInner .btn-close { display: none; } } .photoReviewDetailPopup .content > .title { display: flex; align-items: center; justify-content: center; position: relative; min-height: 3.4rem; line-height: 1; } .photoReviewDetailPopup .content > .title button { position: absolute; top: 0.2rem; right: 0; } @media (min-width: 768px) { .photoReviewDetailPopup .content > .title button { top: 1.5rem; } } .photoReviewDetailPopup .btn-photoList { display: block; position: absolute; bottom: 0; left: 0; width: 3rem; height: 3rem; background: url(../images/common/icon-photoList.png) no-repeat center/2rem auto; text-indent: -9999em; } @media (min-width: 768px) { .photoReviewDetailPopup .btn-photoList { left: auto; right: 0; width: auto; height: auto; padding-right: 1.8rem; font-size: 1.4rem; color: #05141f; font-weight: 600; background: url(../images/common/icon-bgo.svg) no-repeat right center/auto 1.2rem; white-space: nowrap; text-indent: 0; line-height: 1; } } .photoReviewDetailPopup .photoReviewDetailWrap { display: flex; flex-wrap: wrap; width: 100%; transition: 0.2s all ease; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailWrap { flex-wrap: nowrap; gap: 3rem; } } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft { width: 100%; margin-bottom: 2rem; transition: 0.2s all ease; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft { max-width: 72rem; margin-bottom: 0; } } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper { width: 100%; } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-wrapper { align-items: center; } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 39rem; background-color: #969696; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-wrapper .swiper-slide { height: 60rem; } } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-button-next, .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-button-prev { width: 2rem; height: 2rem; margin: 0; background: url(../images/common/ico_arrow_r.png) no-repeat center/auto 100%; } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-button-next:after, .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-button-prev:after { display: none; } .photoReviewDetailPopup .photoReviewDetailWrap .photoReviewDetailLeft .photoReviewDetailSwiper .swiper-button-prev { background: url(../images/common/ico_arrow_l.png) no-repeat center/contain; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight { display: flex; flex-direction: column; height: 60rem; padding: 3.2rem 0 2rem; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewSummary { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2rem; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewSummary { padding-bottom: 1rem; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewSummary .reviewBtnArea { margin-top: 0; } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail { padding-top: 1rem; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail { padding-top: 0; border: 0; flex: 1; height: calc(100% - 62rem); } } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea { display: flex; flex-direction: column; height: 100%; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .title { display: flex; margin-bottom: 1.5rem; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .title { margin-bottom: 1rem; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .title .name { font-size: 1.4rem; color: #000; font-weight: 600; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .title .name { font-size: 1.6rem; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .title .date { margin-left: 1rem; font-size: 1.4rem; color: #676767; } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .info span { display: block; font-size: 1.4rem; color: #a6a6a6; } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .info span + span { margin-top: 0.5rem; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .info span + span { margin-top: 0.6rem; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .contents { padding: 0 0 2rem; margin-top: 1rem; font-size: 1.4rem; color: #000; line-height: 1.5; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail .textArea .contents { flex: 1; overflow: hidden; overflow-y: auto; margin-top: 1.6rem; font-size: 1.6rem; } } .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail.best .textArea .info:after { content: ""; display: block; width: 6.8rem; height: 2.4rem; margin-top: 0.3rem; background: url("../images/kia/contents/review_best.png") no-repeat center center/contain; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .reviewItemDetail.best .textArea .info:after { margin-top: 0.6rem; } } .photoReviewDetailPopup .photoReviewDetailRight .photoThumbnails { display: flex; gap: 1rem; } .photoReviewDetailPopup .photoReviewDetailRight .photoThumbnails .photoThumbItem { width: 4rem; height: 4rem; border-radius: 0.8rem; overflow: hidden; } @media (min-width: 768px) { .photoReviewDetailPopup .photoReviewDetailRight .photoThumbnails .photoThumbItem { width: 6rem; height: 6rem; } } .photoReviewDetailPopup .photoReviewDetailRight .photoThumbnails .photoThumbItem img { width: 100%; height: 100%; } /*# sourceMappingURL=common.css.map */