@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ /*변수파일 import*/ .contentWarp .cartView { padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1025px) { .contentWarp .cartView { width: 120rem; } } @media (min-width: 1240px) { .contentWarp .cartView { padding-left: 0rem; padding-right: 0rem; } } .contentWarp .cartView .pageTitle h1 { font-size: 3rem; font-weight: 600; line-height: 1; } @media (min-width: 1025px) { .contentWarp .cartView .pageTitle h1 { font-size: 4.5rem; font-weight: 600; } } .contentWarp .cartView .pageTitle p { font-size: 1.6rem; font-weight: 400; margin-top: 1.5rem; } @media (min-width: 1025px) { .contentWarp .cartView .pageTitle p { font-size: 1.8rem; font-weight: 400; margin-top: 2rem; } } .contentWarp .cartView .pageSubTitle { margin-top: 7rem; } .contentWarp .cartView .pageSubTitle h2 { font-size: 2.4rem; font-weight: 600; } .contentWarp .cartView .productListWarp { margin-top: 2rem; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp { margin-top: 3rem; } } .contentWarp .cartView .productListWarp .allSelect { border: 1px solid #dedede; border-radius: 0.6rem; padding: 2rem; height: 5.5rem; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; } .contentWarp .cartView .productListWarp .allSelect span { color: #676767; font-size: 1.6rem; margin-left: 2rem; } .contentWarp .cartView .productListWarp .productLis { margin-top: 1rem; } .contentWarp .cartView .productListWarp .productLis ul li { border: 1px solid #dedede; border-radius: 0.6rem; } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap { display: flex; padding: 2rem; padding-left: 2rem; } @media (max-width: 501px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap { flex-wrap: wrap; } } @media (max-width: 320px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap { flex-wrap: wrap; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap { flex-wrap: nowrap; justify-content: space-between; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap { padding: 3rem; padding-left: 2rem; display: flex; flex-wrap: nowrap; justify-content: space-between; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem { display: flex; width: 100%; flex-wrap: wrap; flex-shrink: 2; align-items: center; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem { flex-wrap: nowrap; padding-right: 3rem; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem { justify-content: space-between; padding-right: 5rem; flex-wrap: nowrap; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo { display: flex; width: 100%; flex-wrap: wrap; align-items: center; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #dedede; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo { padding-bottom: 0; margin-bottom: 0; border-bottom: none; flex-wrap: nowrap; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div { display: flex; margin-top: 1.4rem; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div { margin-top: 0; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 7.5rem; height: 7.5rem; overflow: hidden; border-radius: 0.6rem; margin-left: 0rem; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 10rem; height: 10rem; margin-left: 2rem; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 17rem; height: 17rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; aspect-ratio: 1/1; } .contentWarp .cartView .productListWarp .productLis ul li .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%; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl { max-width: 50%; margin-left: 2rem; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl { max-width: 58%; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt { font-weight: 600; font-size: 1.6rem; color: #000; line-height: 2rem; } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt a { color: #000; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt { font-size: 2rem; line-height: 2.6rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { font-weight: 400; font-size: 1.4rem; line-height: 2rem; color: #676767; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { line-height: 2.2rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt, .contentWarp .cartView .productListWarp .productLis ul li .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) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt, .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd { -webkit-line-clamp: 2; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt + dd { margin-top: 0.5rem; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt + dd { margin-top: 0.8rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd + dd { margin-top: 1.5rem; font-size: 1.4rem; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd + dd { margin-top: 2rem; } } @media (max-width: 501px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { width: 100%; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { min-width: 14rem; text-align: right; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { min-width: 14rem; text-align: right; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dt { font-size: 1.4rem; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dt { font-size: 1.6rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dt.experienceInfo { padding: 0.2rem 0; } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dt.experienceInfo.cost { font-weight: 600; } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2rem; font-weight: 600; margin-top: 1rem; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2.4rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { display: flex; flex-grow: 1; align-items: center; margin-top: 3rem; margin-left: 4rem; justify-content: flex-end; } @media (max-width: 501px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { width: 100%; margin-left: 0rem; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp { margin-top: 0; flex-basis: 18rem; margin-left: 0rem; } } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { width: 100%; min-width: 18rem; } .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton button + button { margin-top: 1rem; } @media (min-width: 501px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { max-width: inherit; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { min-width: 15rem; max-width: 15rem; flex-direction: column; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton { min-width: 18rem; max-width: 18rem; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .addBtnWarp .towButton .rightBtn { margin-left: 0; } } .contentWarp .cartView .productListWarp .productLis ul li .components { background-color: #f3f3f3; padding: 3rem 3rem 3rem 6rem; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components { padding: 2rem; } } .contentWarp .cartView .productListWarp .productLis ul li .components .componentsTitle { font-size: 1.6rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsTitle { font-size: 1.4rem; } } .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-top: 0.2rem; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList { display: block; margin-top: 0.8rem; } } .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item { width: 17rem; margin-top: 1.8rem; margin-right: 1.8rem; text-align: center; } @media (max-width: 1024px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item { width: 10rem; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-top: 1.2rem; margin-right: 0; text-align: left; } } .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemImg { width: 17rem; height: 17rem; border-radius: 0.6rem; overflow: hidden; } @media (max-width: 1024px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemImg { width: 10rem; height: 10rem; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemImg { width: 4rem; height: 4rem; } } .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemImg img { width: 17rem; height: 17rem; } @media (max-width: 1024px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemImg img { width: 10rem; height: 10rem; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemImg img { width: 4rem; height: 4rem; } } .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemTitle { margin-top: 1.2rem; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .components .componentsList .item .itemTitle { margin-top: 0; margin-left: 0.7rem; font-weight: 400; } } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment { background-color: #f3f3f3; padding: 3rem; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment { padding: 2rem; } } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsTitle { font-size: 1.6rem; font-weight: 600; color: #000000; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsTitle { font-size: 1.4rem; } } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-top: 0.2rem; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList { display: block; margin-top: 0.8rem; } } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList .item { display: flex; justify-content: flex-start; align-items: center; width: 33.333%; text-align: center; margin-bottom: 1.5rem; padding-right: 1.5rem; } @media (max-width: 1024px) { .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList .item { width: 100%; margin-right: 0; text-align: left; } } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemImg { width: 4rem; height: 4rem; border-radius: 0.6rem; overflow: hidden; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemImg img { width: 4rem; height: 4rem; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemTitle { padding-left: 1.2rem; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; text-align: left; width: calc(100% - 4rem); } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment .componentsList .item .itemTitle { margin-top: 0; padding-left: 0.7rem; font-weight: 400; } } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment.spec .componentsList { align-items: flex-start; width: 100%; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment.spec .componentsList h3 { width: 17rem; font-size: 1.6rem; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment.spec .componentsList .item { flex: 1; flex-wrap: wrap; padding: 0; margin-bottom: 0; gap: 1rem; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment.spec .componentsList .item dl { display: flex; justify-content: space-between; width: 100%; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment.spec .componentsList .item dl dt { font-size: 1.4rem; color: #676767; font-weight: 400; } .contentWarp .cartView .productListWarp .productLis ul li .componentsPayment.spec .componentsList .item dl dd { font-size: 1.6rem; color: #000; font-weight: 600; } .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents { background-color: #f3f3f3; padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents { flex-direction: row; align-items: center; } } .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsTitle { font-size: 1.6rem; font-weight: 600; color: #000000; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsTitle { flex-basis: 30%; margin-left: 2rem; display: flex; align-items: center; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsTitle { font-size: 1.4rem; } } .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList { display: flex; flex-direction: column; margin-top: 0.2rem; width: 100%; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList { flex-basis: 70%; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList { margin-top: 0.8rem; } } .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item { padding: 0.4rem 0; display: flex; justify-content: space-between; width: 100%; position: relative; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item { text-align: left; } } .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemTitle { font-size: 1.4rem; line-height: 1.8rem; flex-basis: 55%; word-wrap: break-word; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemTitle { margin-top: 0; } } .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemPrice { flex-basis: 45%; text-align: right; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemPrice { align-self: flex-end; } } .contentWarp .cartView .productListWarp .productLis ul li + li { margin-top: 1rem; } .contentWarp .cartView .productListWarp .productLis ul .noPrice { padding: 2rem; text-align: center; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice { padding-left: 3rem; min-height: 17rem; } } .contentWarp .cartView .productListWarp .productLis ul .noPrice > p { font-weight: 600; font-size: 1.8rem; color: #9ea1a2; } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice > p { font-size: 2.4rem; } } .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList { width: 18rem; } } @media (max-width: 501px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList { width: 100%; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList { flex-wrap: nowrap; margin: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList { flex-wrap: nowrap; margin: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList > p { width: 100%; display: flex; align-items: center; font-size: 2.4rem; font-weight: 600; } .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton { margin-top: 3rem; } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton { margin-top: 0; min-width: 15rem; margin-left: 5rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton { margin-top: 0; min-width: 18rem; margin-left: 5rem; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after { width: 3.2rem; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after { width: 3.2rem; } } .contentWarp .cartView .productListWarp .totalWarp { background-color: #f3f3f3; margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 3rem 2rem 2rem 2rem; border-radius: 0.6rem; } @media (min-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp { padding: 2rem; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .totalWarp { flex-wrap: nowrap; width: inherit; } } @media (max-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp { flex-wrap: wrap; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .totalWarp { flex-wrap: nowrap; padding: 3rem; padding-left: 6rem; max-height: 12rem; } } .contentWarp .cartView .productListWarp .totalWarp > p { font-size: 1.4rem; } @media (min-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp > p { font-size: 1.6rem; } } .contentWarp .cartView .productListWarp .totalWarp .totalPrice { display: flex; flex-wrap: wrap; margin-top: 1.5rem; width: 100%; } @media (min-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice { margin-top: 0; } } @media (max-width: 768px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice { width: 18rem; } } @media (max-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice { width: 100%; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice { flex-wrap: nowrap; margin-top: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice { flex-wrap: nowrap; margin-top: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .contentWarp .cartView .productListWarp .totalWarp .totalPrice > p { width: 100%; display: flex; align-items: center; justify-content: flex-start; font-size: 2rem; font-weight: 600; } @media (min-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice > p { justify-content: flex-end; } } .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack { margin-top: 3rem; } @media (min-width: 501px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack { margin-top: 1rem; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack { margin-top: 0; min-width: 15rem; margin-left: 5rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack { margin-top: 0; min-width: 18rem; margin-left: 5rem; } } @media (min-width: 768px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::before, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::after, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::before, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::after { width: 3.2rem; } } @media (min-width: 1025px) { .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::before, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::after, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::before, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::after { width: 3.2rem; } } .contentWarp .cartView .counponList { margin-top: 3rem; border-top: 1px solid #dedede; } .contentWarp .cartView .counponList li { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 0; } @media (max-width: 768px) { .contentWarp .cartView .counponList li { display: block; } } .contentWarp .cartView .counponList li .infoWrap { width: calc(100% - 15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .contentWarp .cartView .counponList li .infoWrap { width: 100%; } } .contentWarp .cartView .counponList li .infoWrap .info { display: flex; flex-wrap: wrap; } .contentWarp .cartView .counponList li .infoWrap .info .radioItem { margin-top: 0.5rem; } .contentWarp .cartView .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; } .contentWarp .cartView .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%; } .contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio]:disabled { background-color: #dedede; box-shadow: none; opacity: 0.7; cursor: not-allowed; } .contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio]:disabled + span { opacity: 0.5; cursor: not-allowed; } .contentWarp .cartView .counponList li .infoWrap .info .radioItem span { position: relative; font-size: 1.6rem; font-weight: 600; padding-left: 0.5rem; color: #000000; } .contentWarp .cartView .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; } .contentWarp .cartView .counponList li .infoWrap .info .radioItem.none span::before { display: none; } .contentWarp .cartView .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; } .contentWarp .cartView .counponList li .infoWrap .date { margin-top: 1.2rem; margin-left: 2.4rem; font-size: 1.4rem; font-weight: 400; color: #676767; } .contentWarp .cartView .counponList li .benefit { width: 15rem; margin-top: 2.5rem; text-align: right; font-size: 2rem; font-weight: 600; color: 600; } @media (max-width: 768px) { .contentWarp .cartView .counponList li .benefit { width: 100%; margin-left: 2.4rem; text-align: left; font-size: 1.8rem; } } .contentWarp .cartView .counponList li.noList { display: flex; justify-content: center; align-items: center; height: 8rem; margin-top: 2rem; border: 1px solid #dedede; border-radius: 0.6rem; width: 100%; overflow: hidden; color: #9ea1a2; } .contentWarp .cartView .counponList .coupon-active { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 8rem; width: 100%; padding: 2rem 4rem 2rem 2rem; font-size: 1.6rem; color: #000; border: 1px solid #dedede; border-radius: 0.6rem; text-align: left; } @media (min-width: 768px) { .contentWarp .cartView .counponList .coupon-active { padding: 2rem 4rem 2rem 3rem; } } .contentWarp .cartView .counponList .coupon-active:after { content: ""; display: block; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); width: 1rem; height: 2rem; background: url(../images/common/icon-bgo.svg) no-repeat center/100% auto; } .contentWarp .cartView .counponList .coupon-active.active { color: #fff; background-color: #05141f; } .contentWarp .cartView .counponList .coupon-active.active strong { display: flex; align-items: center; } .contentWarp .cartView .counponList .coupon-active.active strong:before { content: ""; display: inline-block; width: 2.4rem; height: 2rem; margin-right: 1.2rem; background: url(../images/common/icon_coupon_w.png) no-repeat center/100% auto; } .contentWarp .cartView .counponList .coupon-active.active:after { filter: brightness(0) saturate(100%) invert(100%); } .couponPopup .coupon-list { display: flex; flex-direction: column; overflow: hidden; overflow-y: auto; max-height: 59vh; margin: 0; padding: 0; border: none; } .couponPopup .coupon-list li { position: relative; } .couponPopup .coupon-list li + li { margin-top: 2rem; } .couponPopup .coupon-list input[type=radio] { position: absolute; opacity: 0; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .couponPopup .coupon-list input[type=radio]:focus { outline: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item { border-color: #111; } .couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item:focus { outline: none; } .couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item .icon-check { background-color: #05141f; background-image: url("../images/common/coupon_check_on.png"); } .couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item { background-color: #f1f1f1; border-color: #e0e0e0; color: #aaa; cursor: not-allowed; } .couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item .coupon-label { color: #aaa; } .couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item .coupon-label strong { color: #9ea1a2; } .couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item .coupon-label small { color: #bbb; } .couponPopup .coupon-list .coupon-item { position: relative; display: flex; justify-content: space-between; gap: 1.2rem; border: 1px solid #ccc; border-radius: 0.8rem; background-color: #fff; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .couponPopup .coupon-list .coupon-item:focus { outline: none; } @media (min-width: 768px) { .couponPopup .coupon-list .coupon-item.coupon-none { height: 8rem; } } @media (min-width: 768px) { .couponPopup .coupon-list .coupon-item.coupon-none .coupon-label { display: flex; align-items: center; padding: 1.6rem 3rem; } } .couponPopup .coupon-list .coupon-item .coupon-label { flex: 1; padding: 1.6rem; line-height: 1.4; } @media (min-width: 768px) { .couponPopup .coupon-list .coupon-item .coupon-label { padding: 4rem 3rem; } } .couponPopup .coupon-list .coupon-item .coupon-label strong { display: block; font-size: 1.6rem; font-weight: 600; color: #000; } @media (min-width: 768px) { .couponPopup .coupon-list .coupon-item .coupon-label strong { font-size: 1.8rem; line-height: 1.35; } } .couponPopup .coupon-list .coupon-item .coupon-label small { display: block; margin-top: 0.4rem; padding-left: 6.6rem; text-indent: -6.6rem; font-size: 1.4rem; font-weight: 400; color: #676767; } @media (min-width: 768px) { .couponPopup .coupon-list .coupon-item .coupon-label small { margin-top: 1rem; line-height: 1.6; } } .couponPopup .coupon-list .coupon-item .coupon-label span { display: inline-block; } .couponPopup .coupon-list .coupon-item .coupon-label .error-text { display: block; font-size: 1.4rem; color: #ea0029; } .couponPopup .coupon-list .coupon-item .icon-check { display: flex; width: 4.4rem; background: url("../images/common/coupon_check.png") no-repeat center/2.2rem auto; flex-shrink: 0; border-left: 1px dashed #dedede; border-radius: 0 0.8rem 0.8rem 0; } @media (min-width: 768px) { .couponPopup .coupon-list .coupon-item .icon-check { width: 16rem; } } @media (min-width: 768px) { .couponPopup .popInner { max-width: 76rem; } } .couponPopup .popInner .towButton { margin-top: 3rem; gap: 1rem; } @media (min-width: 768px) { .couponPopup .popInner .towButton { justify-content: center; } .couponPopup .popInner .towButton > a { width: 18rem; margin: 0; } } .contentWarp.carsw { display: flex; width: 100%; margin: 0 auto; justify-content: space-between; } @media (max-width: 768px) { .contentWarp.carsw { flex-wrap: wrap; } } @media (min-width: 1240px) { .contentWarp.carsw { width: 120rem; } } .contentWarp.carsw .carswLeft { margin-top: 6rem; width: 100%; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft { width: 60%; margin-top: 10rem; padding-bottom: 15rem; } } @media (max-width: 768px) { .contentWarp.carsw .carswLeft { flex-wrap: wrap; } } @media (min-width: 1025px) { .contentWarp.carsw .carswLeft { width: 70%; margin-top: 10rem; } } @media (min-width: 1240px) { .contentWarp.carsw .carswLeft { width: 73rem; } } .contentWarp.carsw .carswLeft .pageSubTitle { margin-top: 4rem; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .pageSubTitle { margin-top: 7rem; } } .contentWarp.carsw .carswLeft .pageSubTitle h2 { font-size: 1.8rem; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .pageSubTitle h2 { font-size: 2.4rem; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap { padding: 0; } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem { padding-right: 2rem !important; justify-content: space-between; border-radius: 0.6rem; overflow: hidden; } @media (min-width: 1025px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem { padding-right: 1rem; } } @media (max-width: 767px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem { padding: 2rem; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div { margin-top: 0; } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { margin-left: 0; border-radius: 0; } @media (max-width: 767px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { border-radius: 0.6rem; } } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { width: 10rem; height: 10rem; } } @media (min-width: 1025px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p { min-width: 18rem; height: 18rem; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p img { width: 7.5rem; height: 7.5rem; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div > p img { width: 18rem; height: 18rem; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl { min-width: 20rem; } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2rem; font-weight: 600; margin-top: 0.5rem; } @media (min-width: 1025px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd { font-size: 2.4rem; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .discount { display: block; font-size: 1.6rem; font-weight: 600; color: #9ea1a2; text-decoration: line-through; } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .price { display: flex; align-items: center; justify-content: flex-start; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .price { justify-content: flex-end; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .price strong { order: 1; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .price strong { order: 2; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .price .dc { order: 2; margin-left: 0.4rem; font-size: 1.8rem; font-weight: 600; color: #ea0029; } @media (min-width: 768px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo + dl dd .price .dc { order: 1; margin-left: 0; margin-right: 0.8rem; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem > dl .couponBtn { display: flex; justify-content: flex-end; margin-top: 1rem !important; } @media (max-width: 767px) { .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem > dl .couponBtn { justify-content: flex-start; } } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem > dl .couponBtn .info { display: flex; align-items: center; margin-right: 1rem; font-size: 1.4rem; font-weight: 400; color: #000000; } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .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; } .contentWarp.carsw .carswLeft .productListWarp .productLis ul li .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; } .contentWarp.carsw .carswLeft .couponInfo { margin-top: 2rem; } .contentWarp.carsw .carswLeft .couponInfo ul li { display: flex; align-items: center; margin-bottom: 0.5rem; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; } .contentWarp.carsw .carswLeft .couponInfo ul li::before { content: "∙"; margin-right: 0.5rem; } .contentWarp.carsw .carswRight { padding-left: 2rem; padding-right: 2rem; background-color: #f3f3f3; width: 100%; margin-top: 5rem; padding-bottom: 6rem; } @media (min-width: 768px) { .contentWarp.carsw .carswRight { width: 38%; min-height: 89rem; margin-top: 0rem; padding-bottom: 0rem; } } @media (min-width: 1025px) { .contentWarp.carsw .carswRight { width: 30%; } } @media (min-width: 1240px) { .contentWarp.carsw .carswRight { width: 40rem; padding-left: 5rem; padding-right: 5rem; } } .contentWarp.carsw .carswRight .carswRightInner { margin-top: 5rem; } @media (min-width: 768px) { .contentWarp.carsw .carswRight .carswRightInner { margin-top: 21.6rem; } } .contentWarp.carsw .carswRight .carswRightInner h2 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp.carsw .carswRight .carswRightInner h2 { font-size: 2.4rem; } } .contentWarp.carsw .carswRight .carswRightInner .carswInfo { margin-top: 4rem; } @media (min-width: 768px) { .contentWarp.carsw .carswRight .carswRightInner .carswInfo { margin-top: 5rem; } } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl { padding-bottom: 2.5rem; margin-bottom: 2rem; border-bottom: 1px solid #dedede; } @media (min-width: 768px) { .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl { padding-bottom: 2.5rem; margin-bottom: 2rem; } } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl dt { font-size: 1.6rem; color: #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl dd { font-size: 3rem; font-weight: 600; margin-top: 1rem; } @media (min-width: 768px) { .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl dd { font-size: 4rem; } } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl.carType { padding-bottom: 2rem; margin-bottom: 2rem; } @media (min-width: 768px) { .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl.carType { padding-bottom: 2rem; margin-bottom: 2rem; } } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl.carType dd { display: flex; justify-content: flex-start; align-items: center; font-size: 1.6rem; font-weight: 400; color: #000000; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl.carType dd strong { font-size: 1.6rem; font-weight: 600; color: #000000; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo dl.carType dd span { display: inline-block; width: 0.1rem; height: 1.4rem; margin: 0 0.8rem; background-color: #dedede; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px dashed #dedede; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount .item { display: flex; justify-content: space-between; align-items: center; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount .item .title { font-size: 1.6rem; font-weight: 400; color: #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount .item .value { font-size: 1.6rem; font-weight: 400; color: #000000; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount .item:last-child { margin-top: 2rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox { padding: 2rem; margin-bottom: 2rem; border-radius: 0.6rem; background-color: #ffffff; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .pointInfo { display: flex; justify-content: space-between; width: 100%; margin-bottom: 1rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .pointInfo .title { font-size: 1.4rem; width: 50%; color: #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .pointInfo .info { font-size: 1.4rem; width: 50%; text-align: right; color: #000000; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .caution { margin-top: 2rem; font-size: 1.4rem; line-height: 2.2rem; color: #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .cautionKiaPay { font-size: 1.4rem; line-height: 2.2rem; color: #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .cautionKiaPay span { font-weight: 600; color: #000000; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .kiaPayBox .oneButton { margin-top: 2rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo > a { display: flex; font-size: 1.4rem; color: #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo > a span { border-bottom: 1px solid #676767; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo > a::after { content: ""; display: block; width: 0.6rem; margin-left: 0.8rem; background-image: url(../images/common/icon-mMarrow.svg); background-size: contain; background-repeat: no-repeat; background-position: center right; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo a + a { margin-top: 1.5rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo > label { display: flex; margin-top: 2rem; align-items: flex-start; cursor: pointer; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo > label span { font-size: 1.4rem; margin-left: 1rem; line-height: 2.2rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack { margin-top: 4rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack button::before, .contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack button::after { width: 3.2rem; } .contentWarp.carsw .carswRight .carswRightInner .carswInfo .safariCaution { display: none; margin-top: 2rem; padding: 2rem; border-radius: 0.6rem; background-color: #ffffff; font-size: 1.4rem; font-weight: 400; } .contentWarp.carsw .carsFull { margin-top: 6rem; width: 100%; padding-bottom: 9rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull { margin-top: 10rem; padding-bottom: 15rem; } } @media (max-width: 768px) { .contentWarp.carsw .carsFull { flex-wrap: wrap; } } @media (min-width: 1025px) { .contentWarp.carsw .carsFull { margin-top: 10rem; } } .contentWarp.carsw .carsFull .pageSubTitle { margin-top: 4rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .pageSubTitle { margin-top: 7rem; } } .contentWarp.carsw .carsFull .pageSubTitle h2 { font-size: 1.8rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .pageSubTitle h2 { font-size: 3rem; } } @media (min-width: 768px) { .contentWarp.carsw .carsFull .pageSubTitle p { font-size: 1.8rem; } } .contentWarp.carsw .carsFull .privacyStatement { margin-top: 3rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .privacyStatement { margin-top: 4rem; } } .contentWarp.carsw .carsFull .privacyStatement .contentsBox { padding: 2rem; border: 0.1rem solid #dedede; border-radius: 0.6rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .privacyStatement .contentsBox { padding: 4rem; } } .contentWarp.carsw .carsFull .privacyStatement .contentsBox .title { font-size: 1.6rem; font-weight: 600; color: #000000; line-height: 2.2rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .privacyStatement .contentsBox .title { font-size: 2rem; line-height: 2.8rem; } } .contentWarp.carsw .carsFull .privacyStatement .contentsBox .contents { margin-top: 1rem; font-size: 1.4rem; font-weight: 400; color: #676767; line-height: 2.2rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .privacyStatement .contentsBox .contents { margin-top: 2rem; font-size: 1.6rem; line-height: 2.4rem; } } .contentWarp.carsw .carsFull .privacyStatement label { display: flex; justify-content: flex-start; align-items: center; margin-top: 1.5rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .privacyStatement label { margin-top: 2rem; } } .contentWarp.carsw .carsFull .privacyStatement label span { margin-left: 1rem; font-size: 1.4rem; color: #000000; } .contentWarp.carsw .carsFull .installGuide { margin-top: 4rem; padding: 2rem; border: 1px solid #dedede; border-radius: 0.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .installGuide { flex-wrap: nowrap; padding: 4rem; } } @media (min-width: 1025px) { .contentWarp.carsw .carsFull .installGuide { margin-top: 7rem; } } .contentWarp.carsw .carsFull .installGuide div p strong { font-size: 1.8rem; font-weight: 600; line-height: 2.4rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .installGuide div p strong { font-size: 2.4rem; line-height: 3.2rem; } } .contentWarp.carsw .carsFull .installGuide div p span { font-size: 1.4rem; line-height: 2.4rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .installGuide div p span { font-size: 1.6rem; } } .contentWarp.carsw .carsFull .installGuide div p + p { margin-top: 2rem; } .contentWarp.carsw .carsFull .installGuide div:last-child { width: 100%; margin-top: 3rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .installGuide div:last-child { margin-top: 0; width: 16rem; } } .contentWarp.carsw .carsFull .installGuide div:last-child div a::before, .contentWarp.carsw .carsFull .installGuide div:last-child div a::after { width: 3.2rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .installGuide div:last-child div a::before, .contentWarp.carsw .carsFull .installGuide div:last-child div a::after { width: 3.2rem; } } .contentWarp.carsw .carsFull .installGuide div:first-child { width: initial; margin-top: initial; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .installGuide div:first-child { margin-top: initial; width: initial; } } .contentWarp.carsw .carsFull .completeForm { margin-top: 4rem; } .contentWarp.carsw .carsFull .completeForm > div { border-top: 1px solid #999999; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div { border-top: 1px solid #dedede; } } .contentWarp.carsw .carsFull .completeForm > div > dl { border-bottom: 1px solid #dedede; display: flex; flex-wrap: wrap; align-items: center; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl { flex-wrap: nowrap; } } .contentWarp.carsw .carsFull .completeForm > div > dl:last-child { border-bottom: 1px solid #999; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl:last-child { border-bottom: 1px solid #dedede; } } .contentWarp.carsw .carsFull .completeForm > div > dl > dt { padding-top: 1rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl > dt { padding-top: 2.2rem; padding-bottom: 2.2rem; } } .contentWarp.carsw .carsFull .completeForm > div > dl > dd { padding-top: 1rem; padding-bottom: 1rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl > dd { padding-top: 2.2rem; padding-bottom: 2.2rem; font-weight: 400; } } .contentWarp.carsw .carsFull .completeForm > div > dl > dt { width: 100%; font-size: 1.4rem; padding-left: 0rem; text-align: left; padding-bottom: 0; color: #676767; font-weight: 700; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl > dt { position: relative; font-size: 1.6rem; padding-bottom: 2.2rem; min-width: 15.7rem; width: auto; } .contentWarp.carsw .carsFull .completeForm > div > dl > dt::after { content: ""; position: absolute; top: 2.2rem; right: 0; width: 0.1rem; height: 1.6rem; background-color: #dedede; } } .contentWarp.carsw .carsFull .completeForm > div > dl > dd { padding-left: 0; width: 100%; font-size: 1.4rem; color: #000; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl > dd { padding-left: 2rem; font-size: 1.6rem; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList { padding-left: 0; padding-top: 0; padding-bottom: 0; } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li { padding: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li { padding: 3rem; flex-wrap: nowrap; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem { display: flex; align-items: center; margin-top: 1.5rem; width: 100%; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem { width: inherit; margin-top: 0; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem > div { position: relative; border-radius: 0.6rem; overflow: hidden; min-width: 7.5rem; height: 7.5rem; } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem > div img { width: 7.5rem; height: 7.5rem; } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem dl { margin-left: 2rem; } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem dl dt { width: 100%; position: relative; font-size: 1.6rem; font-weight: 600; line-height: 1.2; height: 4rem; /* 말줄임 */ display: -webkit-box; white-space: normal; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem dl dt { font-size: 1.8rem; padding-right: 5rem; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem dl dd { margin-top: 0.8rem; font-size: 1.4rem; color: #676767; } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem dl dd span { display: block; font-size: 1.4rem; color: #05141f; margin-bottom: 1rem; font-weight: 700; } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem { display: flex; align-items: center; margin-top: 2.1rem; flex-wrap: wrap; width: 100%; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem { margin-top: 0; flex-wrap: nowrap; width: inherit; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl { width: 100%; display: flex; align-items: center; justify-content: space-between; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl { display: block; width: inherit; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl dt { color: #676767; font-size: 1.4rem; text-align: right; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl dt { font-size: 1.6rem; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl dd { margin-top: 0rem; font-size: 1.4rem; font-weight: 600; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl dd { font-size: 1.6rem; margin-top: 1rem; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl + dl { margin-top: 1rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem dl + dl { margin-left: 2rem; margin-top: 0; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div { margin-left: 0rem; width: 100%; margin-top: 3rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div { margin-left: 4rem; width: 16rem; margin-top: 0; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::before, .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::after { width: 3.2rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::before, .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::after { width: 3.2rem; } } .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li + li { border-top: 0; margin-top: 1.5rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li + li { margin-top: 0; padding-bottom: 2rem; border-top: 1px solid #dedede; } } .contentWarp.carsw .carsFull .completeForm > div dl.innerList { padding-bottom: 2rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .completeForm > div dl.innerList { padding-bottom: 0; } } .contentWarp.carsw .carsFull .carswBtn { width: 100%; margin: 0 auto; margin-top: 4rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .carswBtn { width: 37rem; margin-top: 5rem; padding-left: 2rem; padding-right: 2rem; } } .contentWarp.carsw .carsFull .carswBtn .towButton { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .carswBtn .towButton { flex-wrap: nowrap; } } .contentWarp.carsw .carsFull .carswBtn .towButton button + button { margin-top: 1rem; } @media (min-width: 768px) { .contentWarp.carsw .carsFull .carswBtn .towButton button + button { margin-left: 0.5rem; margin-top: 0; } } .refund-table-area .pageSubTitle h2 { margin-bottom: 2rem; } .refund-table-area .table-area { margin-bottom: 12rem; } @media (max-width: 768px) { .refund-table-area .table-area { margin-bottom: 5rem; } } .refund-table-area .table-area .index { padding: 1.6rem 0 1rem; font-size: 1.4rem; color: #676767; text-align: right; } .refund-table-area .table-area table { width: 100%; border-top: 1px solid #999; } .refund-table-area .table-area table th { height: 7.6rem; padding: 0 1rem; font-size: 1.6rem; font-weight: 600; vertical-align: middle; text-align: center; } .refund-table-area .table-area table tbody { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } .refund-table-area .table-area table tbody td { padding: 1rem; font-size: 1.4rem; font-weight: 400; text-align: center; } .agree-label { display: flex; flex-direction: column; } .agree-label + .agree-label { margin-top: 2.5rem; } .agree-label label { display: flex; align-items: flex-start; cursor: pointer; } .agree-label label span { font-size: 1.4rem; margin-left: 1rem; line-height: 2.2rem; } .agree-label a { align-self: end; font-size: 1.4rem; color: #676767; } /*# sourceMappingURL=order.css.map */