4680 lines
112 KiB
CSS
4680 lines
112 KiB
CSS
@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: transparent;
|
|
}
|
|
@media (max-width: 1240px) {
|
|
.hederWarp_n {
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
@media (max-width: 1120px) {
|
|
.hederWarp_n .headerInner {
|
|
height: 5.6rem;
|
|
}
|
|
}
|
|
@media (min-width: 1240px) {
|
|
.hederWarp_n .headerInner {
|
|
max-width: 100%;
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
@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;
|
|
height: 8rem;
|
|
}
|
|
}
|
|
.hederWarp_n .headerInner .gnb .logoWrap a {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
.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: 1220px) {
|
|
.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: #ffffff;
|
|
white-space: nowrap;
|
|
}
|
|
@media (max-width: 1220px) {
|
|
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
|
|
padding: 0 1.25rem;
|
|
}
|
|
}
|
|
@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: 1120px) {
|
|
.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-wtbarrow.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: #fff;
|
|
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: 1120px) {
|
|
.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(255, 255, 255, 0.3);
|
|
color: #ffffff;
|
|
transition: 0.3s;
|
|
}
|
|
.hederWarp_n .headerInner .func .userLogin > a:hover {
|
|
border: 1px solid rgb(255, 255, 255);
|
|
}
|
|
.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 > 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: 1120px) {
|
|
.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: #fff;
|
|
top: 0;
|
|
content: "";
|
|
}
|
|
.hederWarp_n .headerInner .func .moblieMenu .burgur .bot-line {
|
|
position: absolute;
|
|
width: 1.8rem;
|
|
height: 0.2rem;
|
|
background-color: #fff;
|
|
bottom: 0;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
@media (min-width: 1025px) {
|
|
.infoSticky {
|
|
height: 6rem;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/*# sourceMappingURL=common.css.map */ |