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

스트리밍 프리미엄 PDP, 사양안내 3차 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2024-09-19 22:44:18 +09:00
parent f0e31dc93d
commit d2c073879b
4 changed files with 647 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
assets/css/product.css
View File

@@ -263,18 +263,22 @@
position: absolute;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label {
background-color: #05141F;
background-color: #05141f;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd {
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd {
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd strong {
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt p,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt strong,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd p,
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd strong {
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label {
display: block;
padding: 2.5rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
cursor: pointer;
}
@@ -324,7 +328,7 @@
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > a::after {
content: "";
displaY: block;
display: block;
width: 0.6rem;
margin-left: 0.8rem;
background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
@@ -347,7 +351,7 @@
.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming {
margin-top: 2rem;
padding: 3rem 2rem;
background-color: #F3F3F3;
background-color: #f3f3f3;
border-radius: 0.6rem;
}
.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming P {
@@ -379,7 +383,7 @@
.contentWarp .productView .productRight .optionWarp .packageOption .optionList {
margin-top: 2rem;
padding: 2.5rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
}
@media (max-width: 768px) {
@@ -422,7 +426,7 @@
border-radius: 0.6rem;
}
.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem {
displaY: flex;
display: flex;
width: 100%;
height: 9rem;
overflow: hidden;
@@ -446,7 +450,7 @@
}
.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p span,
.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p strong {
displaY: block;
display: block;
width: 100%;
font-size: 1.4rem;
line-height: 1.4;
@@ -512,7 +516,7 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label {
displaY: flex;
display: flex;
width: 100%;
height: 12rem;
overflow: hidden;
@@ -569,8 +573,8 @@
position: absolute;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label {
background-color: #05141F;
border: 1px solid #05141F;
background-color: #05141f;
border: 1px solid #05141f;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
content: "";
@@ -617,7 +621,7 @@
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span,
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
displaY: block;
display: block;
width: 100%;
font-size: 1.4rem;
width: 75%;
@@ -691,17 +695,17 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label {
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label span,
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label strong {
color: #9EA1A2;
color: #9ea1a2;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label p {
opacity: 0.5;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn:hover label {
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn {
margin-top: 1rem;
@@ -723,7 +727,7 @@
margin-top: 2rem;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label {
displaY: flex;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
@@ -733,7 +737,7 @@
cursor: pointer;
position: relative;
border-radius: 0.6rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label span {
font-size: 1.4rem;
@@ -765,7 +769,7 @@
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
display: block;
font-size: 1.4rem;
color: #9EA1A2;
color: #9ea1a2;
}
@media (max-width: 1024px) {
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
@@ -785,8 +789,8 @@
position: absolute;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label {
background-color: #05141F;
border: 1px solid #05141F;
background-color: #05141f;
border: 1px solid #05141f;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span,
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label strong {
@@ -799,13 +803,13 @@
color: #fff;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label .discount {
color: #9EA1A2;
color: #9ea1a2;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn:hover label {
border: 1px solid #000;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon {
background-color: #F3F3F3;
background-color: #f3f3f3;
border-radius: 0.6rem;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon label .title {
@@ -830,20 +834,20 @@
color: #676767;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label {
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span,
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label strong {
color: #9EA1A2;
color: #9ea1a2;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span .title {
color: #9EA1A2 !important;
color: #9ea1a2 !important;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span .info {
color: #9EA1A2 !important;
color: #9ea1a2 !important;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn:hover label {
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn + .radioBtn {
margin-top: 1rem;
@@ -947,7 +951,7 @@
.pdpListBtn {
width: 100%;
height: 7.4rem;
background-color: #F3F3F3;
background-color: #f3f3f3;
padding: 0 2rem;
}
@media (min-width: 768px) {

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

File diff suppressed because one or more lines are too long

1117
info/product-usage-guide-streamingPremium.html
View File

File diff suppressed because it is too large Load Diff

81
product/pdp_streaming_premium.html
View File

@@ -288,7 +288,11 @@
<div class="radioBtn">
<input type="radio" name="radioBtn" id="radioOne" value="연 구독 150000" />
<label for="radioOne">
<span>1년 약정</span>
<p>
<strong>1년 약정 요금제</strong><br />
<span>중도 해지시 위약금 발생</span>
</p>
<strong>₩ 11,000/월</strong>
</label>
</div>
@@ -296,17 +300,28 @@
<div class="radioBtn">
<input type="radio" name="radioBtn" id="radioTwo" value="무약정 24000" />
<label for="radioTwo">
<span>무약정</span>
<p>
<strong>무약정</strong><br />
<span>언제든 위약금 없이 해지 가능</span>
</p>
<strong>₩ 24,000/월</strong>
</label>
</div>
</div>
</div>
<div class="producInfoWarp">
<p>
본 요금제는 차량용 webOS 콘텐츠 플랫폼 및 스트리밍 프리미엄 데이터 요금제가 결합된 이용권 입니다.<br /><br />
스트리밍 프리미엄은 차세대 인포테인먼트 시스템(ccNC) 장착 차량에 한하여 이용 가능합니다.
</p>
</div>
<div class="priceTotal">
<dl class="total">
<!-- <dl class="total">
<dt>총 결제 금액</dt>
<dd>₩ 0</dd>
</dl>
</dl> -->
<div class="paymentButton oneButtonBlack">
<button class="PurchaseBtn rightBtn"><p>요금제 가입하기</p></button>
</div>
@@ -520,22 +535,35 @@
<div class="comp_body disclaimerInner">
<h2>정보고시</h2>
<div class="disclaimerList">
<div class="item">
<div class="title">구매 조건</div>
<div class="bar"></div>
<ul class="contents">
<li>기아 커넥스 서비스 이용자에 한하여 구매할 수 있습니다.</li>
<li>차세대 인포테인먼트 시스템 (ccNC) 및 12.3인치 인포테인먼트 시스템 장착 차량에 한하여 이용 가능합니다.</li>
</ul>
</div>
<div class="item">
<div class="title">이용조건</div>
<div class="bar"></div>
<ul class="contents">
<li>차량에서 사용하시는 사용자 프로필과 기아 커넥트 앱에 로그인하실 때 입력하시는 기아 이메일 계정을 연동하신 후 이용하실 수 있습니다.</li>
<li>차량 내비게이션에서 연동 설정을 진행해주세요.</li>
<li>서비스 이용을 위해서는 콘텐츠 플랫폼의 계정 연동이 필요합니다.</li>
<li>주행 중에는 비디오 스트리밍 서비스 이용이 불가능 합니다. (P단에서 이용 가능)</li>
<li>가입하신 요금제의 종류에 따라 데이터 이용료가 발생할 수 있습니다.</li>
<li>각 콘텐츠 플랫폼 사의 상황에 따라 서비스 제공이 원활하지 않을 수 있습니다.</li>
<li>일시적인 통신 장애로 이용에 실패할 수 있습니다.</li>
<li>통신 음영 지역에서는 이용에 제한이 있을 수 있습니다.</li>
<li>비디오 스트리밍 서비스는 ’23년 2차 내비게이션 업데이트 이후 이용 가능합니다.</li>
<li>비디오 스트리밍 서비스는 차세대 인포테인먼트 시스템 (ccNC) 및 14.5인치 인포테인먼트 시스템 장착 차량에 한하여 이용 가능합니다.</li>
<li>서비스는 변경, 추가 및 삭제될 수 있으며, 차종 및 내비게이션 장치의 종류에 따라 서비스 종류에 차이가 있을 수 있습니다.</li>
<li>차량 내비게이션 장치의 개조, 탈부착, 파손 및 정비 불량 등 기타 원인에 의하 장치가 정상 작동 상태가 아닌 경우에는 서비스가 제공되지 않을 수 있습니다.</li>
<li>
CCS 서비스 가입<br />
- 기아 커넥트 서비스 유지 상태여야 정상 이용할 수 있습니다.<br />
- 일시적인 통신 장애로 이용에 실패할 수 있습니다.<br />
- 통신 음영 지역에서는 이용에 제한이 있을 수 있습니다.
</li>
<li>
주행 조건<br />
- 정차 중에서만 이용할 수 있습니다. (주행 중에는 서비스 이용이 불가능합니다.)<br />
- 고객은 차량이 안전한 장소에 주차되어 사고 발생 등의 안전상 위험 요소가 없는 경우에만 서비스를 이용하시기 바랍니다. 서비스 사용 중 고객의 부주의로 인한 손해, 불이익에 대하여 회사는 책임을 면합니다.
</li>
<li>
차량 연동<br />
- 단말이 변경되어도,차량의 구매정보 기반으로 서비스 지속 이용 가능합니다.<br />
- 컨텐츠 이용권은 차량에 귀속됩니다. 차량 소유자가 변경되더라도, 서비스 잔여 기간 동안 서비스 지속 이용 가능합니다
</li>
</ul>
</div>
@@ -543,23 +571,22 @@
<div class="title">이용기간</div>
<div class="bar"></div>
<ul class="contents">
<li>명기된 기간동안 이용이 가능합니다. 단, Kia Connect 해지 시 자동 해지되며, Kia Connect의 요금 산정 기준을 따릅니다.</li>
<li>명기된 기간동안 이용이 가능합니다.</li>
<li>단, 기아 커넥트 해지 시 서비스가 자동 해지됩니다.</li>
</ul>
</div>
<div class="item">
<div class="title">청약철회</div>
<div class="title">결제/취소/해지 안내</div>
<div class="bar"></div>
<ul class="contents">
<li>청약철회와 관련된 상세 정보는 https://connect.kia.com/kr/kiac_terms.html 를 참고하세요.</li>
</ul>
</div>
<div class="item">
<div class="title">고객센터</div>
<div class="bar"></div>
<ul class="contents">
<li>기타 문의는 고객센터(1899-2121)나 1:1문의로 신청바랍니다.</li>
<li>본 상품은 차량용 WebOS 콘텐츠 플랫폼 상품과 스트리밍 프리미엄 데이터 요금제를 결합한 상품으로, 실제 청구 시 각 요금은 분할되어 청구됩니다.</li>
<li>최초 가입 후 7일 이내에는 구매 취소가 가능하며, 데이터 사용분에 대해서는 사용료가 일할 청구됩니다.</li>
<li>약정 상품 중도 해지 시 위약금과 할인 반환금이 발생 할 수 있습니다.</li>
<li>
차량용 WebOS 콘텐츠 플랫폼 상품에 대한 자세한 약관은 아래 링크에서 확인하실 수 있습니다.<br />
- "KT제공 URL 예정"
</li>
</ul>
</div>
</div>