마이페이지 스트리밍 프리미엄 구독해지

This commit is contained in:
2025-06-12 00:01:13 +09:00
parent 59c54a86f3
commit 2651bde2a5
11 changed files with 6140 additions and 4281 deletions

View File

@@ -13,7 +13,7 @@ html body {
font-weight: 400;
overflow-x: hidden;
}
html input[type="checkbox"] {
html input[type=checkbox] {
accent-color: #000;
width: 2rem;
height: 2rem;
@@ -201,7 +201,7 @@ html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
}
@media (min-width: 768px) {
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt,
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
font-size: 1.6rem;
width: -webkit-fit-content;
width: -moz-fit-content;
@@ -339,13 +339,11 @@ html .mainBanner .mabannerInner .listImgBtn {
width: 17.6rem;
}
}
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after,
html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after, html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
width: 3.2rem;
}
@media (min-width: 768px) {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after,
html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after, html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
width: 3.2rem;
}
}
@@ -411,15 +409,13 @@ html .mainSwiper ul li .mainText p span {
html .mainSwiper ul li .mainText .oneButton {
margin-top: 5rem;
}
html .mainSwiper ul li .mainText .oneButton a::before,
html .mainSwiper ul li .mainText .oneButton a::after {
html .mainSwiper ul li .mainText .oneButton a::before, html .mainSwiper ul li .mainText .oneButton a::after {
width: 3.2rem;
}
html .mainCarNum .oneButton a {
position: relative;
}
html .mainCarNum .oneButton a::before,
html .mainCarNum .oneButton a::after {
html .mainCarNum .oneButton a::before, html .mainCarNum .oneButton a::after {
background-image: initial;
width: 0;
height: 0;
@@ -459,8 +455,7 @@ html .mainCarNum .oneButton a p:hover {
html .mainCarNum .oneButton {
width: 16rem;
}
html .mainCarNum .oneButton a::before,
html .mainCarNum .oneButton a::after {
html .mainCarNum .oneButton a::before, html .mainCarNum .oneButton a::after {
background-image: initial;
width: 5rem;
margin-left: -0.1rem;
@@ -649,33 +644,21 @@ html .footer .kiaInner .tLeft .companyInfo ul + ul li {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after {
display: none;
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
width: 100%;
}
@media (min-width: 768px) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
display: none;
}
@media (min-width: 768px) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
display: block;
}
}
@@ -848,7 +831,7 @@ html .footer .kiaInner .familyBoxWarp .searchTextBox {
width: 32rem;
}
}
html .footer .kiaInner .familyBoxWarp .searchTextBox input[type="text"] {
html .footer .kiaInner .familyBoxWarp .searchTextBox input[type=text] {
width: 100%;
}
html .footer .kiaInner .familyBoxWarp .searchTextBox .icon-search {
@@ -864,17 +847,181 @@ html .footer .top {
bottom: 45rem;
display: none;
}
html .threeButton {
display: block;
gap: 1rem;
}
@media (min-width: 768px) {
html .threeButton {
display: flex;
justify-content: center;
}
}
html .threeButton .leftBtn,
html .threeButton .centerBtn,
html .threeButton .rightBtn {
height: 5.6rem;
display: flex;
width: 100%;
}
@media (min-width: 768px) {
html .threeButton .leftBtn,
html .threeButton .centerBtn,
html .threeButton .rightBtn {
width: 18rem;
}
}
html .threeButton .leftBtn p,
html .threeButton .centerBtn p,
html .threeButton .rightBtn p {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 5.6rem;
font-size: 1.4rem;
font-weight: 600;
font-family: "KiaSignature";
}
html .threeButton .leftBtn p {
padding-right: 2.8rem;
background-color: #fff;
color: #000;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #9ba1a5;
border-radius: 0 0.4rem 0.4rem 0;
}
html .threeButton .leftBtn::before {
content: "";
display: block;
width: 3.2rem;
height: 5.6rem;
background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
background-size: auto;
background-repeat: no-repeat;
}
html .threeButton .leftBtn:hover p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .threeButton .leftBtn:hover::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
@media (hover: hover) and (pointer: fine) {
html .threeButton .leftBtn:hover p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .threeButton .leftBtn:hover::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
}
@media (hover: hover) and (pointer: fine) {
html .threeButton .leftBtn:hover p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .threeButton .leftBtn:hover::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
}
html .threeButton .centerBtn {
margin: 1rem 0;
}
@media (min-width: 768px) {
html .threeButton .centerBtn {
margin: 0;
}
}
html .threeButton .centerBtn p {
display: flex;
justify-content: center;
align-items: center;
height: 5.6rem;
padding: 0 1.6rem;
background-color: #fff;
color: #000;
border: 1px solid #9ba1a5;
border-radius: 0.4rem;
}
html .threeButton .centerBtn:hover p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
@media (hover: hover) and (pointer: fine) {
html .threeButton .centerBtn:hover p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
}
@media (hover: hover) and (pointer: fine) {
html .threeButton .centerBtn:hover p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
}
html .threeButton .rightBtn {
border-radius: 0.4rem;
}
html .threeButton .rightBtn p {
background-color: #05141f;
color: #fff !important;
border: none;
border-right: none;
border-radius: 0.4rem 0 0 0.4rem;
padding-left: 2.8rem;
font-family: "KiaSignature";
text-align: center;
}
html .threeButton .rightBtn::after {
content: "";
display: block;
width: 3.2rem;
border: none;
height: 5.6rem;
background-image: url(../../images/kia/svg/kia-btn-bright.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: top right;
margin-left: -1px;
}
@media (min-width: 768px) {
html .threeButton .rightBtn::after {
width: 3.2rem;
}
}
html .threeButton .rightBtn:hover p {
color: #05141f;
border-color: #cdd0d2;
background-color: #cdd0d2;
}
html .threeButton .rightBtn:hover::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gright.svg);
}
html .towButton {
display: flex;
justify-content: space-between;
}
html .towButton .leftBtn,
html .towButton .centerBtn,
html .towButton .rightBtn {
height: 5.6rem;
display: flex;
width: 100%;
}
html .towButton .leftBtn p,
html .towButton .centerBtn p,
html .towButton .rightBtn p {
display: flex;
justify-content: center;
@@ -954,7 +1101,7 @@ html .towButton .rightBtn {
}
html .towButton .rightBtn p {
background-color: #05141f;
color: #fff !important;
color: #fff;
border: none;
border-right: none;
border-radius: 0.4rem 0 0 0.4rem;
@@ -1014,8 +1161,8 @@ html .oneButton a::before {
}
@media (min-width: 768px) {
html .oneButton button::before,
html .oneButton div::before,
html .oneButton a::before {
html .oneButton div::before,
html .oneButton a::before {
width: 3.2rem;
}
}
@@ -1033,8 +1180,8 @@ html .oneButton a::after {
}
@media (min-width: 768px) {
html .oneButton button::after,
html .oneButton div::after,
html .oneButton a::after {
html .oneButton div::after,
html .oneButton a::after {
width: 3.2rem;
}
}
@@ -1097,19 +1244,19 @@ html .oneButtonBlack a::before {
}
@media (max-width: 320px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@media (max-width: 768px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@media (max-width: 501px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@@ -1126,19 +1273,19 @@ html .oneButtonBlack a::after {
}
@media (max-width: 320px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 4.2rem;
}
}
@media (max-width: 768px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 3rem;
}
}
@media (max-width: 501px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 3rem;
}
}
@@ -1182,15 +1329,15 @@ html .productRight .optionWarp .producOption .optionList .checkBtn label {
border-radius: 0.6rem;
border: 1px solid #dedede;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"] {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox] {
visibility: hidden;
position: absolute;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label {
background-color: #05141f;
border: 1px solid #05141f;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label::before {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
content: "";
position: absolute;
right: 2rem;
@@ -1203,8 +1350,8 @@ html .productRight .optionWarp .producOption .optionList .checkBtn input[type="c
background-size: contain;
background-repeat: no-repeat;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label div p strong {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p strong {
color: #fff;
}
html .productRight .optionWarp .producOption .optionList .checkBtn:hover label {
@@ -1234,13 +1381,11 @@ html .productRight .optionWarp .producOption .optionList .checkBtn div p strong
html .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn {
margin-top: 1rem;
}
html .inquiryBtn a::before,
html .inquiryBtn a::after {
html .inquiryBtn a::before, html .inquiryBtn a::after {
width: 3.2rem;
}
@media (min-width: 768px) {
html .inquiryBtn a::before,
html .inquiryBtn a::after {
html .inquiryBtn a::before, html .inquiryBtn a::after {
width: 3.2rem;
}
}
@@ -1343,8 +1488,8 @@ body#faq .csWarp {
}
@media (min-width: 768px) {
.oneButtonLine button::before,
.oneButtonLine div::before,
.oneButtonLine a::before {
.oneButtonLine div::before,
.oneButtonLine a::before {
width: 3.2rem;
}
}
@@ -1362,8 +1507,8 @@ body#faq .csWarp {
}
@media (min-width: 768px) {
.oneButtonLine button::after,
.oneButtonLine div::after,
.oneButtonLine a::after {
.oneButtonLine div::after,
.oneButtonLine a::after {
width: 3.2rem;
}
}
@@ -1404,4 +1549,4 @@ body#faq .csWarp {
border-color: #9ba1a5;
border-radius: 0;
}
/*# sourceMappingURL=kia.css.map */
/*# sourceMappingURL=kia.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -1018,12 +1018,196 @@ html {
}
}
//기아 결재버튼 [3개 짜리]
.threeButton {
display: block;
gap: 1rem;
@include tablet {
display: flex;
justify-content: center;
}
.leftBtn,
.centerBtn,
.rightBtn {
height: 5.6rem;
display: flex;
width: 100%;
@include tablet {
width: 18rem;
}
p {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 5.6rem;
font-size: 1.4rem;
font-weight: 600;
font-family: "KiaSignature";
}
}
.leftBtn {
p {
padding-right: 2.8rem;
background-color: #fff;
color: #000;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #9ba1a5;
border-radius: 0 0.4rem 0.4rem 0;
}
&::before {
content: "";
display: block;
width: 3.2rem;
height: 5.6rem;
background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
background-size: auto;
background-repeat: no-repeat;
}
&:hover {
p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
@media (hover: hover) and (pointer: fine) {
p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
}
}
@media (hover: hover) and (pointer: fine) {
&:hover {
p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
}
}
}
.centerBtn {
margin: 1rem 0;
@include tablet {
margin: 0;
}
p {
display: flex;
justify-content: center;
align-items: center;
height: 5.6rem;
padding: 0 1.6rem;
background-color: #fff;
color: #000;
border: 1px solid #9ba1a5;
border-radius: 0.4rem;
}
&:hover {
p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
@media (hover: hover) and (pointer: fine) {
p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
}
}
@media (hover: hover) and (pointer: fine) {
&:hover {
p {
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
}
}
}
.rightBtn {
border-radius: 0.4rem;
p {
background-color: #05141f;
color: #fff !important;
border: none;
border-right: none;
border-radius: 0.4rem 0 0 0.4rem;
padding-left: 2.8rem;
font-family: "KiaSignature";
text-align: center;
}
&::after {
content: "";
display: block;
width: 3.2rem;
border: none;
height: 5.6rem;
background-image: url(../../images/kia/svg/kia-btn-bright.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: top right;
margin-left: -1px;
@include tablet {
width: 3.2rem;
}
}
&:hover {
p {
color: #05141f;
border-color: #cdd0d2;
background-color: #cdd0d2;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gright.svg);
}
}
}
}
//기아 결재버튼 [2개 짜리]
.towButton {
display: flex;
justify-content: space-between;
.leftBtn,
.centerBtn,
.rightBtn {
height: 5.6rem;
display: flex;
@@ -1121,7 +1305,7 @@ html {
p {
background-color: #05141f;
color: #fff !important;
color: #fff;
border: none;
border-right: none;
border-radius: 0.4rem 0 0 0.4rem;

View File

@@ -468,7 +468,7 @@ pre {
display: block;
font-size: 1.4rem;
color: #05141f;
margin-bottom: 1rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
.contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo > div dl dt,
@@ -526,6 +526,19 @@ pre {
.contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul li + li {
margin-top: 0.5rem;
}
.contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul.bu-type li {
position: relative;
font-size: 1.4rem;
font-weight: 400;
color: #676767;
padding: 0 0 0 1rem;
}
.contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .cartItem .cartItemInfo + ul.bu-type li::before {
content: "∙";
position: absolute;
top: 0;
left: 0;
}
.contentWarp .mypageWarp .rightConWarp .myItemWarp > div .itemListWarp > ul > li .components {
background-color: #f3f3f3;
padding: 3rem;
@@ -1390,6 +1403,14 @@ pre {
font-size: 1.6rem;
}
}
.contentWarp .mypageWarp .rightConWarp .infoRefund .title + .summary {
margin-top: 1rem;
font-size: 1.4rem;
font-weight: 600;
}
.contentWarp .mypageWarp .rightConWarp .infoRefund .title + .summary + ul {
margin-top: 0;
}
.contentWarp .mypageWarp .rightConWarp .infoRefund ul {
margin-top: 1rem;
}
@@ -1399,7 +1420,7 @@ pre {
font-weight: 400;
color: #676767;
line-height: 2.2rem;
padding: 0.5rem 0 0.5rem 1rem;
padding: 0.125rem 0 0 1rem;
}
.contentWarp .mypageWarp .rightConWarp .infoRefund ul li::before {
content: "∙";
@@ -1407,6 +1428,32 @@ pre {
top: 0.6rem;
left: 0;
}
.contentWarp .mypageWarp .rightConWarp .infoRefund .serviceLinked {
width: 100%;
}
@media (min-width: 768px) {
.contentWarp .mypageWarp .rightConWarp .infoRefund .serviceLinked {
width: 26rem;
}
}
.contentWarp .mypageWarp .rightConWarp .infoRefund .unsubscribeBtns {
width: auto;
margin-bottom: 3rem;
}
.contentWarp .mypageWarp .rightConWarp .infoRefund .desc {
margin-top: 1rem;
font-size: 1.4rem;
font-weight: 400;
color: #676767;
line-height: 2.2rem;
}
.contentWarp .mypageWarp .rightConWarp .infoRefund .infoList {
margin: 4rem 0 1rem;
padding: 1.8rem 0;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #dedede;
}
.contentWarp .mypageWarp .rightConWarp .infoRefundStep {
margin-top: 3rem;
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@@ -0,0 +1,486 @@
<!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/mypage.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="/kr/kia.html#mainProductList" class="menuDepth1 lower">디지털 사양</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">KBO 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme.html">NBA 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/product-usage-guide.html" class="menuDepth1" data-url="/kr/info/product-usage-guide.html">사양별 이용 안내</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/product-usage-guide.html">사양별 이용 안내</a></h3>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/service-info.html" class="menuDepth1 lower" data-url="/kr/info/service-info.html">스토어 소개</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/service-info.html">스토어 소개</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/info/service-info.html">스토어 소개</a></li>
<li class="menuDepth2"><a href="/kr/info/registration-guide.html">스토어 가입안내</a></li>
<li class="menuDepth2"><a href="/kr/info/buying-Installation-guide.html">스토어 이용안내</a></li>
<li class="menuDepth2"><a href="/kr/service/event-list.html">이벤트</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/as-guide.html" class="menuDepth1 lower" data-url="/kr/info/as-guide.html">고객지원</a>
<div class="menuDepth2Wrap support">
<h3><a href="/kr/info/as-guide.html">고객지원</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/service/faq.html">자주하는 질문</a></li>
<li class="menuDepth2"><a href="/kr/service/inquiry-list.html">문의하기</a></li>
<li class="menuDepth2"><a href="/kr/info/as-guide.html">고객센터 및 AS안내</a></li>
<li class="menuDepth2"><a href="/kr/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="/kr/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-->
<div class="contentWarp">
<div class="mypageWarp">
<div class="leftLnbWarp">
<div class="title">
<h1>마이페이지</h1>
<p><span>일반회원 홍길동님</span></p>
</div>
<div class="couponArea">
<dl class="lnbCoupon">
<dt><span>사용 가능한 </span>쿠폰</dt>
<dd>3</dd>
</dl>
<dl class="lnbPoint">
<dt><span>멤버스 </span>포인트</dt>
<dd>30p</dd>
</dl>
</div>
<div class="swiper lnbList">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="../mypage/my-product-list.html" class="on">이용중인 사양</a></li>
<li class="swiper-slide"><a href="../mypage/payment-history-list.html">결제내역</a></li>
<li class="swiper-slide"><a href="../mypage/wish-list.html">위시리스트</a></li>
<li class="swiper-slide"><a href="../mypage/coupon-list.html">쿠폰내역</a></li>
<li class="swiper-slide"><a href="../mypage/notification-list.html">알림내역</a></li>
<li class="swiper-slide"><a href="../mypage/inquiry-list.html">문의내역</a></li>
<li class="swiper-slide"><a href="../mypage/my-info-view.html">회원정보</a></li>
<li class="swiper-slide"><a href="">로그아웃</a></li>
</ul>
</div>
</div>
<div class="rightConWarp">
<div class="conTitle">
<h2>이용중인 사양</h2>
</div>
<div class="myItemWarp">
<div>
<div class="itemListWarp">
<ul>
<!--● 차량 SW 일시불 상품 구매 취소 상태-->
<li>
<a href="">
<div class="cartItem">
<div class="cartItemInfo">
<div>
<p>
<img src="../assets/images/kia/product-img/producy-temp9.png" alt="이미지 상품명" />
</p>
<dl>
<dt>스트리밍 프리미엄</dt>
<dd>1년 약정 요금제</dd>
</dl>
</div>
</div>
<ul>
<li>ㆍ가입일: 2023.06.19</li>
<li>ㆍ약정 만료일: 2025.07.01</li>
<li>ㆍ구독료: ₩11,000 / 월</li>
<li>ㆍ결제 수단: HYUDAI BLUE (123412******123*)</li>
</ul>
</div>
</a>
</li>
</ul>
</div>
<div class="infoRefund">
<div class="title">뮤직 스트리밍 서비스 연동</div>
<ul>
<li>본 요금제는 차량용 webOS 콘텐츠 플랫폼 및 스트리밍 프리미엄 데이터 요금제가 결합된 이용권 입니다.</li>
<li>스트리밍 프리미엄은 차세대 인포테인먼트 시스템(ccNC) 장착 차량에 한하여 이용 가능합니다.</li>
</ul>
<div class="btnWarp serviceLinked">
<div class="oneButtonBlack">
<a href="">
<p>뮤직스트리밍 서비스 연동</p>
</a>
</div>
</div>
</div>
<div class="infoRefund">
<div class="title">결제 수단 변경 및 구독 해지</div>
<div class="summary">스트리밍 프리미엄 사양 해지 정책</div>
<ul>
<li>약정 사양의 경우 해지시점에 따라 받으실 금액(일할 계산 환불) 또는 납부하실 금액(할인 반환금, 중도해지 위약금)이 발생합니다.</li>
<li>무약정 사양의 경우 해지 신청 시점까지 일할 계산되어 환불 됩니다.</li>
<li>해지와 관련된 상세 금액은 해지 단계(구독 해지 예약, 구독 즉시 해지)에서 확인하실 수 있습니다.</li>
</ul>
<div class="btnWarp unsubscribeBtns">
<div class="threeButton">
<a href="" class="leftBtn"><p>결제수단 변경</p></a>
<a href="" class="centerBtn"><p>구독해지 예약</p></a>
<a href="" class="rightBtn"><p>구독즉시 해제</p></a>
</div>
</div>
<ul>
<li>구매일 포함 7일 이내에는 데이터 요금 외 전액 환불 됩니다.</li>
<li>구독 해지 예약 : 신청 시 결제 기간이 끝날 때 까지 이용 가능하며, 이후 자동으로 해지됩니다.</li>
<li>구독 즉시 해지 : 신청과 동시에 서비스 이용이 종료되며, 위약금이 발생할 수 있습니다.</li>
</ul>
</div>
</div>
</div>
<div class="itemInfo">
<h3>상세 이용 안내</h3>
<div class="editBox">
<div class="comp_mypage_user_guide">
<div class="content">
<div class="text">사양 구매 후 차량 내 메인 메뉴에서 ‘시네마 및 엔터테인먼트’ 기능을 이용할 수 있으며, ‘미디어’ 기능에서 스트리밍 프리미엄 앱의 고음질 음원을 이용 할 수 있습니다. 또한, LG webOS를 활용한 다양한 OTT 및 앱 이용이 가능합니다.</div>
<a href="">이용안내 바로가기 &gt;</a>
</div>
<div class="image_area">
<img src="../assets/images/kia/product-img/producy-temp10.png" alt="이미지 상품명" />
</div>
</div>
</div>
<div class="carswBtn">
<div class="towButton">
<a href="" class="cartBtn leftBtn"><p>목록</p></a>
<a href="" class="PurchaseBtn rightBtn"><p>사양 정보</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--//content-warp-->
<!--//footer-->
<div class="floating_menu">
<a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
<a href="/kr/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="/kr/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="/kr/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>

View File

@@ -0,0 +1,488 @@
<!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/mypage.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="/kr/kia.html#mainProductList" class="menuDepth1 lower">디지털 사양</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">KBO 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme.html">NBA 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/product-usage-guide.html" class="menuDepth1" data-url="/kr/info/product-usage-guide.html">사양별 이용 안내</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/product-usage-guide.html">사양별 이용 안내</a></h3>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/service-info.html" class="menuDepth1 lower" data-url="/kr/info/service-info.html">스토어 소개</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/service-info.html">스토어 소개</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/info/service-info.html">스토어 소개</a></li>
<li class="menuDepth2"><a href="/kr/info/registration-guide.html">스토어 가입안내</a></li>
<li class="menuDepth2"><a href="/kr/info/buying-Installation-guide.html">스토어 이용안내</a></li>
<li class="menuDepth2"><a href="/kr/service/event-list.html">이벤트</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/as-guide.html" class="menuDepth1 lower" data-url="/kr/info/as-guide.html">고객지원</a>
<div class="menuDepth2Wrap support">
<h3><a href="/kr/info/as-guide.html">고객지원</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/service/faq.html">자주하는 질문</a></li>
<li class="menuDepth2"><a href="/kr/service/inquiry-list.html">문의하기</a></li>
<li class="menuDepth2"><a href="/kr/info/as-guide.html">고객센터 및 AS안내</a></li>
<li class="menuDepth2"><a href="/kr/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="/kr/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-->
<div class="contentWarp">
<div class="mypageWarp">
<div class="leftLnbWarp">
<div class="title">
<h1>마이페이지</h1>
<p><span>일반회원 홍길동님</span></p>
</div>
<div class="couponArea">
<dl class="lnbCoupon">
<dt><span>사용 가능한 </span>쿠폰</dt>
<dd>3</dd>
</dl>
<dl class="lnbPoint">
<dt><span>멤버스 </span>포인트</dt>
<dd>30p</dd>
</dl>
</div>
<div class="swiper lnbList">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="../mypage/my-product-list.html" class="on">이용중인 사양</a></li>
<li class="swiper-slide"><a href="../mypage/payment-history-list.html">결제내역</a></li>
<li class="swiper-slide"><a href="../mypage/wish-list.html">위시리스트</a></li>
<li class="swiper-slide"><a href="../mypage/coupon-list.html">쿠폰내역</a></li>
<li class="swiper-slide"><a href="../mypage/notification-list.html">알림내역</a></li>
<li class="swiper-slide"><a href="../mypage/inquiry-list.html">문의내역</a></li>
<li class="swiper-slide"><a href="../mypage/my-info-view.html">회원정보</a></li>
<li class="swiper-slide"><a href="">로그아웃</a></li>
</ul>
</div>
</div>
<div class="rightConWarp">
<div class="conTitle">
<h2>이용중인 사양</h2>
</div>
<div class="myItemWarp">
<div>
<div class="itemListWarp">
<ul>
<!--● 차량 SW 일시불 상품 구매 취소 상태-->
<li>
<a href="">
<div class="cartItem">
<div class="cartItemInfo">
<div>
<p>
<img src="../assets/images/kia/product-img/producy-temp9.png" alt="이미지 상품명" />
</p>
<dl>
<dd><span>구독 해지 예정</span></dd>
<dt>스트리밍 프리미엄</dt>
<dd>1년 약정 요금제</dd>
</dl>
</div>
</div>
<ul>
<li>ㆍ가입일: 2023.06.19</li>
<li>ㆍ약정 만료일: 2025.07.01</li>
<li>ㆍ구독료: ₩11,000 / 월</li>
<li>ㆍ결제 수단: HYUDAI BLUE (123412******123*)</li>
</ul>
</div>
</a>
</li>
</ul>
</div>
<div class="infoRefund">
<div class="title">뮤직 스트리밍 서비스 연동</div>
<div class="desc">
본 요금제는 스트리밍 이용을 위한 스마트TV(webOS) 및 데이터에 대한 이용권이며, 스트리밍 서비스에 대한 이용권 및 무료 쿠폰은 별도 등록이 필요합니다.<br /><br />
※ 모바일 기기 전용 스트리밍 이용권을 이용하실 경우 차량에서 스트리밍 서비스를 이용하실 수 없으며, FLAC과 같은 특정 음질을 이용하시기 위해서는 별도의 스트리밍 이용권이 필요할 수 있습니다.
</div>
<div class="btnWarp serviceLinked">
<div class="oneButtonBlack">
<a href="">
<p>뮤직스트리밍 서비스 연동</p>
</a>
</div>
</div>
<ul class="infoList">
<li>구독 해지 예정입니다. 해당 사양의 기능이 차량에서 종료되면, 구독 해지가 완료됩니다.</li>
<li>환불은 구매 취소 완료 후 진행됩니다.</li>
</ul>
</div>
<div class="infoRefund">
<div class="title">구독 해지 안내</div>
<div class="summary">스트리밍 프리미엄 사양 해지 정책</div>
<ul>
<li>약정 사양의 경우 해지시점에 따라 받으실 금액(일할 계산 환불) 또는 납부하실 금액(할인 반환금, 중도해지 위약금)이 발생합니다.</li>
<li>무약정 사양의 경우 해지 신청 시점까지 일할 계산되어 환불 됩니다.</li>
</ul>
<div class="btnWarp serviceLinked">
<div class="oneButtonBlack">
<a href="">
<p>해지 예약 취소</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="itemInfo">
<h3>상세 이용 안내</h3>
<div class="editBox">
<div class="comp_mypage_user_guide">
<div class="content">
<div class="text">사양 구매 후 차량 내 메인 메뉴에서 ‘시네마 및 엔터테인먼트’ 기능을 이용할 수 있으며, ‘미디어’ 기능에서 스트리밍 프리미엄 앱의 고음질 음원을 이용 할 수 있습니다. 또한, LG webOS를 활용한 다양한 OTT 및 앱 이용이 가능합니다.</div>
<a href="">이용안내 바로가기 &gt;</a>
</div>
<div class="image_area">
<img src="../assets/images/kia/product-img/producy-temp10.png" alt="이미지 상품명" />
</div>
</div>
</div>
<div class="carswBtn">
<div class="towButton">
<a href="" class="cartBtn leftBtn"><p>목록</p></a>
<a href="" class="PurchaseBtn rightBtn"><p>사양 정보</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--//content-warp-->
<!--//footer-->
<div class="floating_menu">
<a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
<a href="/kr/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="/kr/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="/kr/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>

View File

@@ -0,0 +1,465 @@
<!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/mypage.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="/kr/kia.html#mainProductList" class="menuDepth1 lower">디지털 사양</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">KBO 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme.html">NBA 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/product-usage-guide.html" class="menuDepth1" data-url="/kr/info/product-usage-guide.html">사양별 이용 안내</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/product-usage-guide.html">사양별 이용 안내</a></h3>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/service-info.html" class="menuDepth1 lower" data-url="/kr/info/service-info.html">스토어 소개</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/service-info.html">스토어 소개</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/info/service-info.html">스토어 소개</a></li>
<li class="menuDepth2"><a href="/kr/info/registration-guide.html">스토어 가입안내</a></li>
<li class="menuDepth2"><a href="/kr/info/buying-Installation-guide.html">스토어 이용안내</a></li>
<li class="menuDepth2"><a href="/kr/service/event-list.html">이벤트</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/as-guide.html" class="menuDepth1 lower" data-url="/kr/info/as-guide.html">고객지원</a>
<div class="menuDepth2Wrap support">
<h3><a href="/kr/info/as-guide.html">고객지원</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/service/faq.html">자주하는 질문</a></li>
<li class="menuDepth2"><a href="/kr/service/inquiry-list.html">문의하기</a></li>
<li class="menuDepth2"><a href="/kr/info/as-guide.html">고객센터 및 AS안내</a></li>
<li class="menuDepth2"><a href="/kr/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="/kr/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-->
<div class="contentWarp">
<div class="mypageWarp">
<div class="leftLnbWarp">
<div class="title">
<h1>마이페이지</h1>
<p><span>일반회원 홍길동님</span></p>
</div>
<div class="couponArea">
<dl class="lnbCoupon">
<dt><span>사용 가능한 </span>쿠폰</dt>
<dd>3</dd>
</dl>
<dl class="lnbPoint">
<dt><span>멤버스 </span>포인트</dt>
<dd>30p</dd>
</dl>
</div>
<div class="swiper lnbList">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="../mypage/my-product-list.html" class="on">이용중인 사양</a></li>
<li class="swiper-slide"><a href="../mypage/payment-history-list.html">결제내역</a></li>
<li class="swiper-slide"><a href="../mypage/wish-list.html">위시리스트</a></li>
<li class="swiper-slide"><a href="../mypage/coupon-list.html">쿠폰내역</a></li>
<li class="swiper-slide"><a href="../mypage/notification-list.html">알림내역</a></li>
<li class="swiper-slide"><a href="../mypage/inquiry-list.html">문의내역</a></li>
<li class="swiper-slide"><a href="../mypage/my-info-view.html">회원정보</a></li>
<li class="swiper-slide"><a href="">로그아웃</a></li>
</ul>
</div>
</div>
<div class="rightConWarp">
<div class="conTitle">
<h2>이용중인 사양</h2>
</div>
<div class="myItemWarp">
<div>
<div class="itemListWarp">
<ul>
<!--● 차량 SW 일시불 상품 구매 취소 상태-->
<li>
<a href="">
<div class="cartItem">
<div class="cartItemInfo">
<div>
<p>
<img src="../assets/images/kia/product-img/producy-temp9.png" alt="이미지 상품명" />
</p>
<dl>
<dd><span>구독 해지중</span></dd>
<dt>스트리밍 프리미엄</dt>
<dd>1년 약정 요금제</dd>
</dl>
</div>
</div>
<ul>
<li>ㆍ가입일: 2023.06.19</li>
<li>ㆍ약정 만료일: 2025.07.01</li>
<li>ㆍ구독료: ₩11,000 / 월</li>
<li>ㆍ결제 수단: HYUDAI BLUE (123412******123*)</li>
</ul>
</div>
</a>
</li>
</ul>
</div>
<div class="infoRefund">
<ul class="infoList">
<li>구독 해지 예정입니다. 해당 사양의 기능이 차량에서 종료되면, 구독 해지가</li>
<li>환불은 구매 취소 완료 후 진행됩니다.</li>
</ul>
</div>
<div class="infoRefund">
<div class="title">구독 해지 안내</div>
<div class="summary">스트리밍 프리미엄 사양 해지 정책</div>
<ul>
<li>약정 사양의 경우 해지시점에 따라 받으실 금액(일할 계산 환불) 또는 납부하실 금액(할인 반환금, 중도해지 위약금)이 발생합니다.</li>
<li>무약정 사양의 경우 해지 신청 시점까지 일할 계산되어 환불 됩니다.</li>
</ul>
</div>
</div>
</div>
<div class="itemInfo">
<h3>상세 이용 안내</h3>
<div class="editBox">
<div class="comp_mypage_user_guide">
<div class="content">
<div class="text">사양 구매 후 차량 내 메인 메뉴에서 ‘시네마 및 엔터테인먼트’ 기능을 이용할 수 있으며, ‘미디어’ 기능에서 스트리밍 프리미엄 앱의 고음질 음원을 이용 할 수 있습니다. 또한, LG webOS를 활용한 다양한 OTT 및 앱 이용이 가능합니다.</div>
<a href="">이용안내 바로가기 &gt;</a>
</div>
<div class="image_area">
<img src="../assets/images/kia/product-img/producy-temp10.png" alt="이미지 상품명" />
</div>
</div>
</div>
<div class="carswBtn">
<div class="towButton">
<a href="" class="cartBtn leftBtn"><p>목록</p></a>
<a href="" class="PurchaseBtn rightBtn"><p>사양 정보</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--//content-warp-->
<!--//footer-->
<div class="floating_menu">
<a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
<a href="/kr/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="/kr/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="/kr/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>