gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

스트리밍프리미엄 PDP, 주문/결제 작업 중

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2024-10-13 22:19:44 +09:00
parent 3ff4ee80bb
commit 7f69a65b58
18 changed files with 2606 additions and 1521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
assets/css/order.css
View File

@@ -63,7 +63,7 @@
}
}
.contentWarp .cartView .productListWarp .allSelect {
bordeR: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
padding: 2rem;
height: 5.5rem;
@@ -81,7 +81,7 @@
margin-top: 1rem;
}
.contentWarp .cartView .productListWarp .productLis ul li {
bordeR: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
}
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap {
@@ -115,7 +115,7 @@
}
}
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem {
displaY: flex;
display: flex;
width: 100%;
flex-wrap: wrap;
flex-shrink: 2;
@@ -141,7 +141,7 @@
align-items: center;
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
}
@media (min-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo {
@@ -189,7 +189,7 @@
}
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl {
margin-left: 1.5rem;
displaY: flex;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
@@ -244,7 +244,7 @@
}
@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 {
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd {
-webkit-line-clamp: 2;
}
}
@@ -358,7 +358,7 @@
}
}
.contentWarp .cartView .productListWarp .productLis ul li .components {
background-color: #F3F3F3;
background-color: #f3f3f3;
padding: 3rem 3rem 3rem 6rem;
}
@media (max-width: 768px) {
@@ -459,7 +459,7 @@
}
}
.contentWarp .cartView .productListWarp .productLis ul li .componentsPayment {
background-color: #F3F3F3;
background-color: #f3f3f3;
padding: 3rem;
}
@media (max-width: 768px) {
@@ -531,6 +531,36 @@
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 + li {
margin-top: 1rem;
}
@@ -555,7 +585,7 @@
.contentWarp .cartView .productListWarp .productLis ul .noPrice > p {
font-weight: 600;
font-size: 1.8rem;
color: #9EA1A2;
color: #9ea1a2;
}
@media (min-width: 1025px) {
.contentWarp .cartView .productListWarp .productLis ul .noPrice > p {
@@ -563,7 +593,7 @@
}
}
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList {
displaY: flex;
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
@@ -582,6 +612,7 @@
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList {
flex-wrap: nowrap;
margin: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -590,6 +621,7 @@
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList {
flex-wrap: nowrap;
margin: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -609,6 +641,7 @@
margin-top: 0;
min-width: 15rem;
margin-left: 5rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -622,15 +655,15 @@
}
@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 {
.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 {
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after {
width: 3.2rem;
}
}
@@ -701,6 +734,7 @@
.contentWarp .cartView .productListWarp .totalWarp .totalPrice {
flex-wrap: nowrap;
margin-top: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -709,6 +743,7 @@
.contentWarp .cartView .productListWarp .totalWarp .totalPrice {
flex-wrap: nowrap;
margin-top: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -739,6 +774,7 @@
margin-top: 0;
min-width: 15rem;
margin-left: 5rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@@ -752,27 +788,27 @@
}
@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 {
.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 {
.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;
border-top: 1px solid #dedede;
}
.contentWarp .cartView .counponList li {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
padding: 2.5rem 0;
}
@media (max-width: 768px) {
@@ -805,7 +841,7 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: max(1px, 0.1em) solid #05141F;
border: max(1px, 0.1em) solid #05141f;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
@@ -822,7 +858,7 @@
border-radius: 100%;
}
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio]:disabled {
background-color: #DEDEDE;
background-color: #dedede;
box-shadow: none;
opacity: 0.7;
cursor: not-allowed;
@@ -846,7 +882,7 @@
display: inline-block;
width: 0.1rem;
height: 1.5rem;
background-color: #DEDEDE;
background-color: #dedede;
padding-top: 0.2rem;
}
.contentWarp .cartView .counponList li .infoWrap .info .radioItem.none span::before {
@@ -892,11 +928,11 @@
align-items: center;
height: 14rem;
margin-top: 2rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
width: 100%;
overflow: hidden;
color: #9EA1A2;
color: #9ea1a2;
}
@media (max-width: 768px) {
.contentWarp .cartView .counponList li.noList {
@@ -1054,7 +1090,7 @@
font-size: 1.4rem;
font-weight: 400;
color: #ffffff;
background-color: #05141F;
background-color: #05141f;
}
.contentWarp.carsw .carswLeft .productListWarp .productLis ul li .cartItemWrap .cartItem > dl .couponBtn .clear {
display: flex;
@@ -1064,8 +1100,8 @@
height: 2.4rem;
font-size: 1.4rem;
font-weight: 400;
color: #9EA1A2;
background-color: #F3F3F3;
color: #9ea1a2;
background-color: #f3f3f3;
}
.contentWarp.carsw .carswLeft .couponInfo {
margin-top: 2rem;
@@ -1086,7 +1122,7 @@
.contentWarp.carsw .carswRight {
padding-left: 2rem;
padding-right: 2rem;
background-color: #F3F3F3;
background-color: #f3f3f3;
width: 100%;
margin-top: 5rem;
padding-bottom: 6rem;
@@ -1139,7 +1175,7 @@
.contentWarp.carsw .carswRight .carswRightInner .carswInfo dl {
padding-bottom: 2.5rem;
margin-bottom: 2rem;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
}
@media (min-width: 768px) {
.contentWarp.carsw .carswRight .carswRightInner .carswInfo dl {
@@ -1188,12 +1224,12 @@
width: 0.1rem;
height: 1.4rem;
margin: 0 0.8rem;
background-color: #DEDEDE;
background-color: #dedede;
}
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px dashed #DEDEDE;
border-bottom: 1px dashed #dedede;
}
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .amount .item {
display: flex;
@@ -1264,10 +1300,10 @@
}
.contentWarp.carsw .carswRight .carswRightInner .carswInfo > a::after {
content: "";
displaY: block;
display: block;
width: 0.6rem;
margin-left: 0.8rem;
background-image: url(/kr/assets/images/common/icon-mMarrow.svg);
background-image: url(../images/common/icon-mMarrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center right;
@@ -1353,7 +1389,7 @@
}
.contentWarp.carsw .carsFull .privacyStatement .contentsBox {
padding: 2rem;
border: 0.1rem solid #DEDEDE;
border: 0.1rem solid #dedede;
border-radius: 0.6rem;
}
@media (min-width: 768px) {
@@ -1406,9 +1442,9 @@
.contentWarp.carsw .carsFull .installGuide {
margin-top: 4rem;
padding: 2rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
displaY: flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
@@ -1483,11 +1519,11 @@
}
@media (min-width: 768px) {
.contentWarp.carsw .carsFull .completeForm > div {
border-top: 1px solid #DEDEDE;
border-top: 1px solid #dedede;
}
}
.contentWarp.carsw .carsFull .completeForm > div > dl {
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -1502,7 +1538,7 @@
}
@media (min-width: 768px) {
.contentWarp.carsw .carsFull .completeForm > div > dl:last-child {
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
}
}
.contentWarp.carsw .carsFull .completeForm > div > dl > dt {
@@ -1550,7 +1586,7 @@
right: 0;
width: 0.1rem;
height: 1.6rem;
background-color: #DEDEDE;
background-color: #dedede;
}
}
.contentWarp.carsw .carsFull .completeForm > div > dl > dd {
@@ -1638,12 +1674,12 @@
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .imgItem dl dd span {
display: block;
font-size: 1.4rem;
color: #05141F;
color: #05141f;
margin-bottom: 1rem;
font-weight: 700;
}
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem {
displaY: flex;
display: flex;
align-items: center;
margin-top: 2.1rem;
flex-wrap: wrap;
@@ -1661,6 +1697,7 @@
display: flex;
align-items: center;
justify-content: space-between;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
}
@@ -1728,7 +1765,7 @@
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li + li {
margin-top: 0;
padding-bottom: 2rem;
border-top: 1px solid #DEDEDE;
border-top: 1px solid #dedede;
}
}
.contentWarp.carsw .carsFull .completeForm > div dl.innerList {
@@ -1753,7 +1790,7 @@
}
}
.contentWarp.carsw .carsFull .carswBtn .towButton {
displaY: flex;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 768px) {
@@ -1769,4 +1806,68 @@
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 */

2
assets/css/order.css.map
View File

File diff suppressed because one or more lines are too long

1516
assets/css/order.scss
View File

File diff suppressed because it is too large Load Diff

39
assets/css/pdp_detail.css
View File

@@ -2972,6 +2972,45 @@
font-size: 1.4rem;
}
}
.streamingPremium.comp_wide .comp_body .refund-table .text_area {
margin-top: 0;
}
.streamingPremium.comp_wide .comp_body .table-area {
margin-bottom: 12rem;
}
@media (max-width: 768px) {
.streamingPremium.comp_wide .comp_body .table-area {
margin-bottom: 5rem;
}
}
.streamingPremium.comp_wide .comp_body .table-area .index {
padding: 1.6rem 0 1rem;
font-size: 1.4rem;
color: #676767;
text-align: right;
}
.streamingPremium.comp_wide .comp_body .table-area table {
width: 100%;
border-top: 1px solid #999;
}
.streamingPremium.comp_wide .comp_body .table-area table th {
height: 7.6rem;
padding: 0 1rem;
font-size: 1.6rem;
font-weight: 600;
vertical-align: middle;
text-align: center;
}
.streamingPremium.comp_wide .comp_body .table-area table tbody {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
.streamingPremium.comp_wide .comp_body .table-area table tbody td {
padding: 1rem;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
}
.streamingPremium.comp_1x_b_v_s_b .image_area {
height: auto;
}

2
assets/css/pdp_detail.css.map
View File

File diff suppressed because one or more lines are too long

42
assets/css/pdp_detail.scss
View File

@@ -3308,6 +3308,48 @@
}
}
}
.refund-table {
.text_area {
margin-top: 0;
}
}
.table-area {
margin-bottom: 12rem;
@include maxtablet {
margin-bottom: 5rem;
}
.index {
padding: 1.6rem 0 1rem;
font-size: 1.4rem;
color: #676767;
text-align: right;
}
table {
width: 100%;
border-top: 1px solid #999;
th {
height: 7.6rem;
padding: 0 1rem;
font-size: 1.6rem;
font-weight: 600;
vertical-align: middle;
text-align: center;
}
tbody {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
td {
padding: 1rem;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
}
}
}
}
}
}

BIN
assets/images/kia/contents/img_order-stp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img1-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img1_3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 KiB

After

Width:  |  Height:  |  Size: 840 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img2_2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 614 KiB

After

Width:  |  Height:  |  Size: 453 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img2_3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 614 KiB

After

Width:  |  Height:  |  Size: 543 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img3_1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 499 KiB

After

Width:  |  Height:  |  Size: 522 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img3_2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 KiB

After

Width:  |  Height:  |  Size: 418 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img3_3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 257 KiB

BIN
assets/images/kia/pdp/streaming_premium/usage_service.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
assets/images/kia/pdp/streaming_premium/usage_service_m.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 151 KiB

760
order/order-streaming-premium.html Normal file
View File

@@ -0,0 +1,760 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>제품상세명 &gt; 제품리스트 &gt; 회사명</title>
<!--
//위에 순서대로 title 이 변경되어야 합니다.
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-title" content="" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="format-detection" content="telephone=no" />
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="Page Contens" />
<meta property="og:image" content="../assets/images/kia/meta_img.png" />
<meta property="og:site_name" content="Page name" />
<meta property="og:description" content="Page Coment" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/jquery-ui.min.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/order.css?v1" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
<link rel="icon" href="../assets/images/kia/favicon-16x16.png" />
<link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
<link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
</head>
<body>
<!--//header-->
<div class="hederWarp_n hBoder">
<div class="headerInner">
<div class="gnb">
<!-- GNB 로고 영역입니다. -->
<div class="logoWrap">
<a href="">
<i class="logoImg"></i>
<!-- <span>
Connect Store
</span> -->
</a>
</div>
<div class="menuWarp">
<div class="mobileMenuTop">
<!-- 모바일 슬라이드 메뉴의 로고 영역입니다. -->
<div class="mobileLogoWrap">
<a href="">
<i class="logoImg"></i>
<!-- <span>
Connect store
</span> -->
</a>
</div>
<span class="closeBtn" id="closeBtn">
<a href="#"></a>
</span>
</div>
<!-- 모바일 전용 USER 관련 링크 영역입니다. -->
<div class="mobileFunc">
<button>
<span>마이페이지</span>
<!--<span>로그인</span>-->
</button>
<!-- <button>
<span>장바구니</span>
</button> -->
</div>
<!-- 모바일 전용 차량 선택 UI입니다. -->
<div class="mobileCarlist">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="item">
<span>MV</span>
<span>161어 1660</span>
</div>
<div class="arrow"></div>
</a>
<div class="carlistItem">
<ul>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
</a>
</li>
</ul>
</div>
</div>
<!-- PC 모바일 공통 메뉴 영역입니다. -->
<ul class="menu">
<li class="menuDepth1Wrap">
<a href="../kia.html#mainProductList" class="menuDepth1">디지털 사양</a>
<div class="menuDepth2Wrap info">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white" />
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<li class="menuDepth2"><a href="../kia.html#mainProductList">디지털 사양</a></li>
<li class="menuDepth2"><a href="../info/product-usage-guide.html" class="active">사양별 이용안내</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="../info/service-info.html" class="menuDepth1 lower" data-url="../info/service-info.html">스토어 소개</a>
<div class="menuDepth2Wrap info">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white" />
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<li class="menuDepth2"><a href="../info/service-info.html">스토어 소개</a></li>
<li class="menuDepth2"><a href="../info/registration-guide.html" class="active">스토어 가입안내</a></li>
<li class="menuDepth2"><a href="../info/buying-Installation-guide.html">스토어 이용안내</a></li>
<li class="menuDepth2"><a href="../service/event-list.html">이벤트</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="../info/as-guide.html" class="menuDepth1 lower" data-url="../info/as-guide.html">고객지원</a>
<div class="menuDepth2Wrap support">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white" />
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<li class="menuDepth2"><a href="../service/faq.html">자주하는 질문</a></li>
<li class="menuDepth2"><a href="../service/inquiry-list.html">문의하기</a></li>
<li class="menuDepth2"><a href="../info/as-guide.html" class="active">고객센터 및 AS안내</a></li>
<li class="menuDepth2"><a href="../service/notice-list.html">공지사항</a></li>
</ul>
</div>
</li>
</ul>
<!-- 모바일 전용 추가 메뉴 영역입니다. -->
<div class="mobileSubMenu">
<a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a>
<a href="../member/terms.html">이용약관</a>
</div>
<!-- 모바일 전용 로그아웃 버튼입니다. -->
<!-- <div class="loginBtn oneButton">
<button><p>로그아웃</p></button>
</div> -->
</div>
</div>
<div class="func">
<!-- PC 전용 차량 선택 UI입니다. -->
<div class="carlist">
<a href="javascript:void(0)" class="carItem">
<span>MV</span>
<span>161어 1660</span>
</a>
<div class="carlistItem">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
<path d="M7 1L1 10H13L7 1Z" fill="white" />
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
</a>
</li>
</ul>
</div>
</div>
<!-- PC 전용 로그인 버튼입니다. -->
<div class="userLogin">
<a href="#">로그인/가입</a>
</div>
<!-- PC 전용 USER 관련 링크 영역입니다. -->
<div class="user">
<a href="../mypage/my-product-list.html"><i class="icon-user"></i></a>
</div>
<!-- PC 모바일 공통 장바구니 버튼입니다. -->
<!-- <div class="cart">
<a href="" class="login-alrt"><i class="icon-cart"></i></a>
</div> -->
<!-- 모바일 전용 햄버거 메뉴 버튼입니다. -->
<div class="moblieMenu burgurBtn">
<span class="burgur" id="burgur">
<span class="top-line"></span>
<span class="bot-line"></span>
</span>
</div>
</div>
</div>
</div>
<!--//header-->
<!--//content-warp-->
<!--footer에 margin 이 없는 class 가 있습니다. -->
<div class="contentWarp carsw">
<div class="cartView carswLeft">
<div class="pageTitle">
<h1>주문/결제</h1>
</div>
<div class="pageSubTitle">
<h2>주문 사양</h2>
</div>
<div class="productListWarp">
<div class="productLis">
<ul>
<li>
<div class="cartItemWrap">
<div class="cartItem">
<div class="cartItemInfo">
<div>
<p>
<img src="../assets/images/kia/contents/img_order-stp.png" alt="이미지 상품명" />
</p>
<dl>
<dt>스트리밍 프리미엄</dt>
<dd>이제 차 안에서도 스마트하게 여러 콘텐츠를 이용해보세요</dd>
</dl>
</div>
</div>
<dl>
<dt>연 정기 구독</dt>
<dd>\ 150,000/년</dd>
<!-- <dd class="couponBtn">
<a href="#" class="apply" onClick="javascript:open_layer_popup('coupon_popup');">
쿠폰 적용
</a>
</dd> -->
</dl>
</div>
</div>
<div class="componentsPayment spec">
<div class="componentsList">
<h3>구성사양</h3>
<div class="item">
<dl>
<dt>차량용 webOS 콘텐츠 플랫폼</dt>
<dd>₩19,000 / 월(선불)</dd>
</dl>
<dl>
<dt>차량용 webOS 콘텐츠 플랫폼</dt>
<dd>₩19,000 / 월(선불)</dd>
</dl>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="refund-table-area">
<div class="pageSubTitle">
<h2>할인 반환금 안내</h2>
<p>고객님의 이해를 돕기 위해 예시된 표이며, 해지 시점에 따라 실제 발생하는 금액은 상이 할 수 있습니다.</p>
</div>
<div class="table-area">
<div class="index">(단위: 개월, 원)</div>
<div class="tbl-dtl">
<table>
<thead>
<tr>
<th>이용 개월수</th>
<th>할인 반환금</th>
<th>위약금</th>
<th>합계</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>13,000</td>
<td>6,600</td>
<td>19,600</td>
</tr>
<tr>
<td>2</td>
<td>26,000</td>
<td>600</td>
<td>32,000</td>
</tr>
<tr>
<td>3</td>
<td>39,000</td>
<td>5,400</td>
<td>44,400</td>
</tr>
<tr>
<td>4</td>
<td>45,000</td>
<td>4,800</td>
<td>50,300</td>
</tr>
<tr>
<td>5</td>
<td>52,000</td>
<td>4,200</td>
<td>56,200</td>
</tr>
<tr>
<td>6</td>
<td>58,500</td>
<td>3,600</td>
<td>62,100</td>
</tr>
<tr>
<td>7</td>
<td>65,000</td>
<td>3,000</td>
<td>68,000</td>
</tr>
<tr>
<td>8</td>
<td>71,500</td>
<td>2,400</td>
<td>73,900</td>
</tr>
<tr>
<td>9</td>
<td>78,000</td>
<td>1,800</td>
<td>79,800</td>
</tr>
<tr>
<td>10</td>
<td>78,000</td>
<td>1,200</td>
<td>79,200</td>
</tr>
<tr>
<td>11</td>
<td>78,000</td>
<td>600</td>
<td>78,600</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="carswRight">
<div class="carswRightInner">
<h2>결제 정보</h2>
<div class="carswInfo">
<div class="amount">
<div class="item">
<div class="title">사양 금액</div>
<div class="value">\ 110,000/월</div>
</div>
</div>
<dl>
<dt>최종 결제금액</dt>
<dd>\ 480,000</dd>
</dl>
<!-- <div class="kiaPayBox">
<div class="pointInfo">
<div class="title">기아멤버스 포인트</div>
<div class="info">1,521,150 P</div>
</div>
<div class="pointInfo">
<div class="title">결제 가능 포인트</div>
<div class="info">250,000 P</div>
</div>
<div class="caution">※ 결제 가능 기아멤버스 포인트는 쿠폰 적용시 변동될 수 있으며 최종 결제 가능 기아멤버스 포인트는 결제하기 버튼을 눌러서 확인하실 수 있습니다.</div>
</div>
<div class="kiaPayBox">
<div class="cautionKiaPay">※ Kia Pay 미 가입 고객이십니다. <br />결제 시 <span>기아멤버스 포인트를 사용</span>하시기 위해서는 <span>Kia Pay 가입</span>이 필요합니다.</div>
<div class="oneButton">
<button><p>Kia Pay 가입하기</p></button>
</div>
</div>
<div class="kiaPayBox">
<div class="cautionKiaPay">
※ 기아멤버스에 가입하시지 않아 기아멤버스 포인트를 조회/사용하실 수 없습니다.<br />
(기아멤버스에 가입하시지 않아도 결제를 하실 수 있습니다.)
</div>
<div class="oneButton">
<button onclick="window.open('https://members.kia.com/');"><p>기아멤버스 바로가기</p></button>
</div>
</div> -->
<dl class="carType">
<dt>적용 차량</dt>
<dd>
<strong>EV9</strong>
<span></span>
KMTKEXXBPMU000081
</dd>
</dl>
<div class="agree-label">
<label for="allagree">
<input type="checkbox" id="allagree" />
<span>개인정보 제3자 제공동의(필수)</span>
</label>
<a href="#">더보기 ></a>
</div>
<div class="agree-label">
<label for="allagree">
<input type="checkbox" id="allagree" />
<span>차량용 webOS 콘텐츠 플랫폼 이용약관 (KT)(필수)</span>
</label>
<a href="#">더보기 ></a>
</div>
<label for="allagree">
<input type="checkbox" id="allagree" />
<span>위 주문 내용을 확인하였으며,<br />결제 진행에 동의합니다.</span>
</label>
<div class="oneButtonBlack">
<button><p>구매하기</p></button>
</div>
<div class="safariCaution">* 결제 팝업이 보이지 않을 경우 [설정 > Safari > 팝업 차단] 해제 후 결제를 진행해 주세요.</div>
<script>
function isMobile() {
var user = navigator.userAgent;
var is_mobile = false;
if (user.indexOf("iPhone") > -1 || user.indexOf("iPad") > -1 || user.indexOf("iPod") > -1) {
is_mobile = true;
}
return is_mobile;
}
const agent = navigator.userAgent.toUpperCase();
function isSafari() {
if (agent.indexOf("SAFARI") >= 0) {
if (agent.indexOf("CHROME") >= 0) {
return false;
} else if (agent.indexOf("GSA") >= 0) {
return false;
} else if (agent.indexOf("CRIOS") >= 0) {
return false;
} else {
return true;
}
}
}
var is_mobile = isMobile();
var is_safari = isSafari();
if (is_mobile && is_safari) {
$(".safariCaution").css("display", "block");
}
</script>
</div>
</div>
</div>
</div>
<!--//content-warp-->
<!--알럿팝업-->
<!-- [S] 문의 등록 레이어 팝업 -->
<div id="coupon_popup" class="couponPopup" style="display: none; opacity: 0">
<div class="popInner">
<div class="content">
<p class="title">
<strong>사용가능 쿠폰 목록</strong>
</p>
<div class="cartItemWrap">
<div class="cartItem">
<div class="cartItemInfo">
<div>
<p>
<img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명" />
</p>
<dl>
<dt>Kia Dynamic LEDKia Dynamic LEDKia Dynamic LEDKia Dynamic LEDKia Dynamic LEDKia Dynamic LED</dt>
<dd>더 특별하게 더 반짝이게더 특별하게 더 반짝이게더 특별하게 더 반짝이게더 특별하게 더 반짝이게더 특별하게 더 반짝이게</dd>
<dd>옵션: LED A-Type</dd>
</dl>
</div>
</div>
<dl>
<dt>평생 이용권</dt>
<dd>\ 150,000</dd>
</dl>
</div>
</div>
<ul class="counponList">
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>30,000원 할인</span>
</label>
<span class="title">
회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰 회원 가입 감사 쿠폰
</span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -9,999,999</div>
</li>
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>10% 할인</span>
</label>
<span class="title"> 회원 가입 감사 쿠폰 </span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -100,000</div>
</li>
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>10% 할인</span>
</label>
<span class="title"> 회원 가입 감사 쿠폰 </span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -100,000</div>
</li>
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>10% 할인</span>
</label>
<span class="title"> 회원 가입 감사 쿠폰 </span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -100,000</div>
</li>
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>10% 할인</span>
</label>
<span class="title"> 회원 가입 감사 쿠폰 </span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -100,000</div>
</li>
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>10% 할인</span>
</label>
<span class="title"> 회원 가입 감사 쿠폰 </span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -100,000</div>
</li>
<li>
<div class="infoWrap">
<div class="info">
<label class="radioItem">
<input type="radio" name="counponItem" value="" />
<span>10% 할인</span>
</label>
<span class="title"> 회원 가입 감사 쿠폰 </span>
</div>
<div class="date">2022-03-09 까지</div>
</div>
<div class="benefit">\ -100,000</div>
</li>
</ul>
<div class="carswBtn">
<div class="towButton">
<a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('coupon_popup');"><p>취소</p></a>
<a href="javascript:;" class="PurchaseBtn rightBtn"><p>적용</p></a>
</div>
</div>
</div>
</div>
</div>
<!-- [E] 문의 등록 레이어 팝업 -->
<!--알럿팝업-->
<!--//footer-->
<div class="floating_menu">
<a href="../service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
<a href="../service/inquiry-list.html" class="floating_inquiry"><img src="../assets/images/common/floating_faq.png" alt="문의하기" /></a>
<a href="javascript:;" class="floating_top"><img src="../assets/images/common/floating_top.png" alt="top" /></a>
</div>
<div class="footer">
<div class="kiaInner">
<div class="tLeft">
<div class="logoSEction">
<a href="../kia.html"><img src="../assets/images/kia/kia-logo.svg" alt="kia" /></a>
</div>
<div class="companyInfo">
<ul>
<li><a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a></li>
<li><a href="../member/terms.html">이용약관</a></li>
</ul>
<ul>
<li>사업자: 기아주식회사, 대표 송호성, 최준영</li>
<li>주소: 서울특별시 서초구 현릉로 12 기아</li>
<li>사업자등록번호: 119-81-02316</li>
<li>통신판매신고: 2006-07935</li>
<li>호스팅제공자: 현대오토에버</li>
<li>이메일: KiaConnectStore@kia.com</li>
<li>개인정보책임자: 기아정보보호센터 이상영 상무, privacy@kia.com / 080-200-2000</li>
</ul>
</div>
</div>
<div class="csTime">
<div>
<p>
<strong>고객센터: 080-200-2000</strong>
</p>
<p><span>오류문의: 24시간 연중 무휴</span></p>
<p>
<span> 일반 문의: 주중 08:30 ~ 18:00<br /><span style="margin-left: 64px">(토·일·공휴일 휴무)</span> </span>
</p>
</div>
<div class="familyBoxWarp">
<div class="familyBox">
<div class="familyInner">
<div class="cont-select">
<ul class="list-member">
<li><a href="https://www.kia.com/kr" target="_balnk">기아</a></li>
<li><a href="https://connect.kia.com/kr" target="_balnk">기아 커넥트</a></li>
<li><a href="https://worldwide.kia.com/kr" target="_balnk">Worldwide</a></li>
<li><a href="https://www.hyundai.co.kr" target="_balnk">현대자동차그룹</a></li>
<li><a href="https://members.kia.com" target="_balnk">기아멤버스</a></li>
<li><a href="https://drivingexperience.hyundai.co.kr/" target="_balnk">기아 드라이빙 아카데미</a></li>
<li><a href="https://worldwide.kia.com/kr/company/ir" target="_balnk">IR</a></li>
<li><a href="http://winwin.hyundai.com/" target="_balnk">동반성장</a></li>
<li><a href="https://gbic.hyundai.com/" target="_balnk">글로벌경영연구소</a></li>
<li><a href="https://tigers.co.kr" target="_balnk">기아타이거즈</a></li>
<li><a href="https://special.kia.com" target="_balnk">기아군용</a></li>
</ul>
<button class="btn-select">Family Site</button>
</div>
</div>
</div>
</div>
</div>
<p class="copyRight"><span>Ⓒ</span> Kia CORP. ALL RIGHTS RESERVED.</p>
</div>
</div>
<div class="popupWarp" style="display: none">
<div class="popInner termsPop" style="display: none">
<div class="popContents">
<h1>개인정보 수집/이용 및 기타 동의</h1>
<div class="termsCon">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable
English. ManyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many
</p>
</div>
<div>
<div class="oneButton">
<a href=""><p>닫기</p></a>
</div>
</div>
</div>
</div>
<div class="popInner payInfo" style="display: none">
<div class="popContents">
<h1>결제 방법 안내</h1>
<div class="payInfoCon">
<p>
<strong>이미 등록된 결제 방법이 있습니다.<br />(지로, 서울특별시 OO구 OOO로 OO길 OO)<br />해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
<span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
</p>
</div>
<div>
<div class="towButton">
<button class="cartBtn leftBtn"><p>취소</p></button>
<button class="PurchaseBtn rightBtn"><p>확인</p></button>
</div>
</div>
</div>
</div>
<div class="popInner payInfo" style="display: none">
<div class="popContents">
<h1>결제 방법 안내</h1>
<div class="payInfoCon">
<p>
<strong>등록된 결제 방법이 없어 요금제 가입 진행이 불가합니다. 결제 카드 등록은 블루링크 App에서 진행해주시길 바랍니다.</strong>
</p>
</div>
<div>
<div class="oneButton">
<a href=""><p>닫기</p></a>
</div>
</div>
</div>
</div>
</div>
<!--//footer-->
</body>
</html>

1573
product/pdp_streaming_premium.html
View File

File diff suppressed because it is too large Load Diff