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

스트리밍 프리미엄 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2024-09-12 22:34:23 +09:00
parent bd656d65a6
commit d364cc05c2
10 changed files with 3975 additions and 3875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
assets/css/pdp_detail.css
View File

@@ -92,7 +92,7 @@
margin-top: 3rem;
font-size: 1.4rem;
font-weight: 400;
color: #0F0B0B;
color: #0f0b0b;
line-height: 2.2rem;
}
@@ -138,7 +138,7 @@
font-size: 1.4rem;
font-weight: 400;
line-height: 2.2rem;
color: #FFFFFF;
color: #ffffff;
}
@media (max-width: 1024px) {
.comp_1x_w_v_s_eS .comp_top .text_area .info {
@@ -208,7 +208,7 @@
margin-top: 3rem;
font-size: 1.8rem;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
text-align: center;
}
@media (max-width: 768px) {
@@ -217,11 +217,11 @@
}
}
.comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li.active img {
border: 1px solid #FFFFFF;
border: 1px solid #ffffff;
}
.comp_1x_w_v_s_e1 {
border-top: 1px solid #DEDEDE;
border-top: 1px solid #dedede;
padding-top: 10rem;
}
@media (max-width: 1024px) {
@@ -267,7 +267,7 @@
left: 0;
width: 100%;
height: 50%;
background-color: #0F0B0B;
background-color: #0f0b0b;
background-size: 100% 50%;
z-index: -1;
}
@@ -276,10 +276,10 @@
padding-top: 4rem;
}
.comp_1x_w_v_s_e1 .bottom .text_area h3 {
color: #FFFFFF;
color: #ffffff;
}
.comp_1x_w_v_s_e1 .bottom .text_area p {
color: #FFFFFF;
color: #ffffff;
}
.comp_1x_w_v_s_e1 .bottom .contents_area {
display: flex;
@@ -392,7 +392,7 @@
margin-top: 10rem;
padding-top: 10rem;
padding-bottom: 10rem;
border-top: 1px solid #DEDEDE;
border-top: 1px solid #dedede;
}
@media (max-width: 1024px) {
.comp_1x_b_n_n_e1 {
@@ -440,7 +440,7 @@
margin-top: 10rem;
padding-top: 10rem;
padding-bottom: 10rem;
border-top: 1px solid #DEDEDE;
border-top: 1px solid #dedede;
}
@media (max-width: 1024px) {
.comp_1x_b_n_n_e2 {
@@ -709,7 +709,7 @@
display: block;
width: 100%;
height: 60rem;
background-color: #05141F;
background-color: #05141f;
z-index: -1;
}
@media (max-width: 1025px) {
@@ -930,7 +930,7 @@
}
.comp_1x_b_h_s_e4 {
border-top: 1px solid #DEDEDE;
border-top: 1px solid #dedede;
padding-top: 6rem;
}
@media (max-width: 768px) {
@@ -1212,7 +1212,7 @@
.comp_1x_b_n_n_b {
margin-top: 15rem;
background-color: #F3F3F3;
background-color: #f3f3f3;
padding: 4rem 0;
}
@media (max-width: 1024px) {
@@ -1284,7 +1284,7 @@
justify-content: space-between;
align-items: center;
padding: 2rem 0;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
}
.disclaimerArea .disclaimerInner .disclaimerList .item:last-child {
border-bottom: none;
@@ -1313,7 +1313,7 @@
.disclaimerArea .disclaimerInner .disclaimerList .item .bar {
width: 0.1rem;
height: 1.5rem;
background-color: #DEDEDE;
background-color: #dedede;
}
@media (max-width: 768px) {
.disclaimerArea .disclaimerInner .disclaimerList .item .bar {
@@ -1356,8 +1356,8 @@
margin-top: 0;
padding-top: 10rem;
padding-bottom: 10rem;
border-top: 0.1rem solid #DEDEDE;
border-bottom: 0.1rem solid #DEDEDE;
border-top: 0.1rem solid #dedede;
border-bottom: 0.1rem solid #dedede;
}
.reviewArea:has(+ .qnaArea) {
border-bottom: none;
@@ -1401,7 +1401,7 @@
font-size: 1.4rem;
padding: 1.4rem 2rem;
background-color: #fff;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
box-sizing: border-box;
cursor: pointer;
text-align: left;
@@ -1425,7 +1425,7 @@
transform: translate(-50%, 0);
width: 1.4rem;
height: 0.8rem;
displaY: block;
display: block;
background: url("/kr/assets/images/common/icon-notice.svg");
background-size: contain;
background-repeat: no-repeat;
@@ -1438,7 +1438,7 @@
width: 100%;
top: 4.4rem;
left: 0;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
box-sizing: border-box;
background-color: #fff;
z-index: 1;
@@ -1481,7 +1481,7 @@
justify-content: space-between;
align-items: flex-end;
padding: 2rem 0;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
}
@media (max-width: 768px) {
.reviewArea .reviewInner .reviewList .item {
@@ -1510,7 +1510,7 @@
.reviewArea .reviewInner .reviewList .item .textArea .title .date {
margin-left: 1rem;
font-size: 1.4rem;
color: #9EA1A2;
color: #9ea1a2;
}
.reviewArea .reviewInner .reviewList .item .textArea .contents {
margin-top: 1.5rem;
@@ -1535,12 +1535,12 @@
align-items: center;
margin-top: 1rem;
font-size: 1.6rem;
color: #9EA1A2;
color: #9ea1a2;
cursor: pointer;
}
.reviewArea .reviewInner .reviewList .item .textArea .contentMoreBtn::after {
content: "";
displaY: block;
display: block;
width: 1rem;
height: 1rem;
margin-left: 0.5rem;
@@ -1569,7 +1569,7 @@
align-items: center;
width: 10rem;
height: 3.5rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
transition: 0.3s;
}
@@ -1583,7 +1583,7 @@
.reviewArea .reviewInner .reviewList .item .reviewBtnArea .reviewBtn .goodNum {
margin-left: 0.8rem;
padding-top: 0.2rem;
color: #9EA1A2;
color: #9ea1a2;
font-size: 1.4rem;
font-weight: 600;
line-height: 2rem;
@@ -1600,10 +1600,10 @@
align-items: center;
height: 14rem;
margin-top: 4rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
font-size: 1.8rem;
color: #9EA1A2;
color: #9ea1a2;
}
@media (min-width: 768px) {
.reviewArea .reviewInner .noList {
@@ -1615,8 +1615,8 @@
margin-top: 0;
padding-top: 10rem;
padding-bottom: 10rem;
border-top: 0.1rem solid #DEDEDE;
border-bottom: 0.1rem solid #DEDEDE;
border-top: 0.1rem solid #dedede;
border-bottom: 0.1rem solid #dedede;
}
@media (max-width: 768px) {
.qnaArea {
@@ -1664,13 +1664,13 @@
}
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl {
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
padding: 2rem;
position: relative;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl:hover {
border-color: #05141F;
border-color: #05141f;
}
@media (min-width: 768px) {
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl {
@@ -1699,7 +1699,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
color: #9EA1A2;
color: #9ea1a2;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 400;
@@ -1711,12 +1711,12 @@
height: 2.5rem;
margin-right: 1rem;
padding: 0 0.8rem;
border: 0.1rem solid #DEDEDE;
border: 0.1rem solid #dedede;
font-size: 1.4rem;
font-weight: 400;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p .subTitle .badge.an {
color: #9EA1A2;
color: #9ea1a2;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p .subTitle .badge.ay {
color: #000000;
@@ -1736,7 +1736,7 @@
transform: rotate(-180deg);
width: 1.4rem;
height: 0.8rem;
displaY: block;
display: block;
background: url("/kr/assets/images/common/icon-notice.svg");
background-size: contain;
background-repeat: no-repeat;
@@ -1758,7 +1758,7 @@
}
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt.active + dd {
displaY: block;
display: block;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd {
display: none;
@@ -1783,7 +1783,7 @@
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .imageArea .item {
width: calc((100% - 4rem) / 3);
border: 0.1rem solid #DEDEDE;
border: 0.1rem solid #dedede;
overflow: hidden;
margin-right: 2rem;
}
@@ -1800,10 +1800,10 @@
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer {
margin-top: 3.5rem;
padding-top: 3.5rem;
border-top: 0.1rem solid #DEDEDE;
border-top: 0.1rem solid #dedede;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .subTitle {
color: #9EA1A2;
color: #9ea1a2;
font-size: 1.4rem;
font-weight: 400;
}
@@ -1823,7 +1823,7 @@
align-items: center;
font-size: 1.6rem;
padding: 0.7rem 1rem;
background-color: #F3F3F3;
background-color: #f3f3f3;
color: #000000;
margin-right: 1rem;
margin-bottom: 1rem;
@@ -1854,7 +1854,7 @@
margin: 0 auto;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton {
displaY: flex;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 768px) {
@@ -1883,7 +1883,7 @@
}
@media (min-width: 768px) {
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton button + button {
margin-lefT: 1rem;
margin-left: 1rem;
margin-top: 0;
}
}
@@ -1894,7 +1894,7 @@
border-color: #000;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private:hover {
border-color: #DEDEDE;
border-color: #dedede;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private dt {
cursor: default;
@@ -1903,7 +1903,7 @@
content: none;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private dt > p span {
color: #9EA1A2;
color: #9ea1a2;
}
.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl + dl {
margin-top: 1rem;
@@ -1913,10 +1913,10 @@
justify-content: center;
align-items: center;
height: 14rem;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-radius: 0.6rem;
font-size: 1.8rem;
color: #9EA1A2;
color: #9ea1a2;
}
@media (min-width: 768px) {
.qnaArea .qnaInner .qnaList .qnaAccodion .noList {
@@ -2160,7 +2160,7 @@
border: 2px dashed rgba(255, 255, 255, 0.5);
}
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
border: 2px solid #F8C40C;
border: 2px solid #f8c40c;
}
.displayTheme .comp_top {
z-index: 2;
@@ -2315,7 +2315,7 @@
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: #E9E9E9;
background-color: #e9e9e9;
}
.displayThemeDtl .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #000;
@@ -2763,7 +2763,7 @@
height: 7.2rem;
padding: 0 0 0 1.6rem;
font-size: 1.2rem;
color: #05141F;
color: #05141f;
line-height: 2rem;
border: 1px solid #000;
border-radius: 0.4rem;
@@ -2904,13 +2904,31 @@
.streamingPremium.comp_1x_b_v_s_b {
margin-top: 4rem;
}
@media (max-width: 501px) {
.streamingPremium.comp_1x_b_v_s_b {
margin-top: 2rem;
}
}
.streamingPremium.comp_1x_b_v_s_b .mt-12 {
margin-top: 6rem;
margin-top: 12rem;
}
@media (max-width: 501px) {
.streamingPremium.comp_1x_b_v_s_b .mt-12 {
margin-top: 6rem;
}
}
.streamingPremium.comp_1x_b_v_s_b .mb-2 {
margin-bottom: 2rem;
}
@media (max-width: 501px) {
.streamingPremium.comp_1x_b_v_s_b .mb-2 {
margin-top: 1rem;
}
}
@media (max-width: 768px) {
.streamingPremium.comp_1x_w_v_o_b .image_area {
overflow: hidden;
height: 80rem;
height: auto;
}
}
.streamingPremium .visualBg {
@@ -2978,10 +2996,23 @@
height: 3rem;
}
}
.streamingPremium .spec-area {
padding: 6rem 0 16rem;
}
@media (max-width: 501px) {
.streamingPremium .spec-area {
padding: 3rem 0 8rem;
}
}
.comp_wide.title-only + .comp_wide {
margin-top: 4rem;
}
.comp_wide .between {
display: flex;
justify-content: space-between;
align-items: center;
}
.editorWarp .visualBg img {
width: 100%;
@@ -3381,4 +3412,53 @@
object-fit: inherit;
border-radius: 0.6rem;
}
.pdpDtl .swiper-navigation > * {
top: 210px;
left: -65px;
width: 5rem;
height: 5rem;
border-radius: 50%;
background: rgb(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center/15px auto;
}
.pdpDtl .swiper-navigation > *:after {
display: none;
}
.pdpDtl .swiper-navigation .swiper-button-next {
left: auto;
right: -65px;
transform: rotate(180deg);
}
@media (max-width: 1200px) {
.pdpDtl .swiper-navigation {
display: none;
}
}
.pdpDtl .swiper-pagination {
position: static;
top: 46.4rem;
}
@media (max-width: 1200px) {
.pdpDtl .swiper-pagination {
top: 36.4vw;
}
}
.pdpDtl .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: #e9e9e9;
}
.pdpDtl .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #000;
}
.scroll_area {
overflow: hidden;
overflow-x: auto;
}
.scroll_area .themeImg {
height: 40rem;
}
/*# sourceMappingURL=pdp_detail.css.map */

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

File diff suppressed because one or more lines are too long

7219
assets/css/pdp_detail.scss
View File

File diff suppressed because it is too large Load Diff

BIN
assets/images/kia/pdp/streaming_premium/img_spec.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_img1-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
assets/images/kia/pdp/streaming_premium/streaming_premium_m.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 386 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: 156 KiB

After

Width:  |  Height:  |  Size: 157 KiB

210
assets/js/common.js
View File

@@ -47,32 +47,18 @@ $(document).ready(function () {
e.preventDefault();
});
$(document).on(
"click",
".btnClose, .menuWarp .menuDepth2Wrap a",
function (e) {
$(".menuWarp .menuDepth1").removeClass("on");
$(".menuWarp .menuDepth2Wrap").hide();
$(".menuWarp").css("right", "-100%");
$("html").removeClass("scrollDisable");
}
);
$(document).on("click", ".btnClose, .menuWarp .menuDepth2Wrap a", function (e) {
$(".menuWarp .menuDepth1").removeClass("on");
$(".menuWarp .menuDepth2Wrap").hide();
$(".menuWarp").css("right", "-100%");
$("html").removeClass("scrollDisable");
});
$(document).on("click", ".closeBtn", function () {
$(".menuWarp")
.stop()
.animate(
{ right: "-100%" },
{ queue: true, duration: 500, easing: "easeInOutExpo" }
);
$(".menuWarp").stop().animate({ right: "-100%" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
$("html").removeClass("scrollDisable");
});
$(document).on("click", ".burgurBtn", function () {
$(".menuWarp")
.stop()
.animate(
{ right: "0" },
{ queue: true, duration: 500, easing: "easeInOutExpo" }
);
$(".menuWarp").stop().animate({ right: "0" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
$("html").addClass("scrollDisable");
});
}
@@ -114,32 +100,18 @@ $(document).ready(function () {
e.preventDefault();
});
$(document).on(
"click",
".btnClose, .menuWarp .menuDepth2Wrap a",
function (e) {
$(".menuWarp .menuDepth1").removeClass("on");
$(".menuWarp .menuDepth2Wrap").hide();
$(".menuWarp").css("right", "-36rem");
$("html").removeClass("scrollDisable");
}
);
$(document).on("click", ".btnClose, .menuWarp .menuDepth2Wrap a", function (e) {
$(".menuWarp .menuDepth1").removeClass("on");
$(".menuWarp .menuDepth2Wrap").hide();
$(".menuWarp").css("right", "-36rem");
$("html").removeClass("scrollDisable");
});
$(document).on("click", ".closeBtn", function () {
$(".menuWarp")
.stop()
.animate(
{ right: "-36rem" },
{ queue: true, duration: 500, easing: "easeInOutExpo" }
);
$(".menuWarp").stop().animate({ right: "-36rem" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
$("html").removeClass("scrollDisable");
});
$(document).on("click", ".burgurBtn", function () {
$(".menuWarp")
.stop()
.animate(
{ right: "0" },
{ queue: true, duration: 500, easing: "easeInOutExpo" }
);
$(".menuWarp").stop().animate({ right: "0" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
$("html").addClass("scrollDisable");
});
}
@@ -189,12 +161,7 @@ $(document).ready(function () {
$(".mobileCarlist > .mobilecarItem").next().css("display", "none");
$(".menuDepth1Wrap > .menuDepth1").removeClass("on");
$(".menuDepth1Wrap > .menuDepth1").next().css("display", "none");
$(".menuWarp")
.stop()
.animate(
{ right: "-100%" },
{ queue: true, duration: 500, easing: "easeInOutExpo" }
);
$(".menuWarp").stop().animate({ right: "-100%" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
$("html").removeClass("scrollDisable");
}
@@ -246,32 +213,24 @@ $(document).ready(function () {
$(this).toggleClass("active");
$(this).find(">dd.a").slideToggle();
$(this).find(">dt.q").toggleClass("active");
if (
$("body>div.contentWarp").find("div.productView").length > 0 &&
$(this).hasClass("active")
) {
if ($("body>div.contentWarp").find("div.productView").length > 0 && $(this).hasClass("active")) {
window.dataLayer.push({
event: "configurator",
event_category: "Product",
event_action: "Q&A",
event_label: "Details",
customer_ID:
ComUtils.getCookie("dlu") === null ? "" : ComUtils.getCookie("dlu"), //ID가 이메일 등의 개인정보일 경우 참고
customer_ID: ComUtils.getCookie("dlu") === null ? "" : ComUtils.getCookie("dlu"), //ID가 이메일 등의 개인정보일 경우 참고
fod_product: $("h1.productName").text(), // eg ‘Vehicle To Grid’
fod_qa_detail: $(this).find("dd.a>p").text().substr(0, 20),
fod_review_detail: undefined,
});
} else if (
$("body>div.contentWarp").find("div.faqWarp").length > 0 &&
$(this).hasClass("active")
) {
} else if ($("body>div.contentWarp").find("div.faqWarp").length > 0 && $(this).hasClass("active")) {
window.dataLayer.push({
event: "FAQ",
event_category: "FAQ",
event_action: $("ul.tabList>li.on>a").text(), //eg '전체', '회원', '상품' …
event_label: $(this).find("dt>p>span").text().substr(0, 20), //eg'회원정보 수정은…'
customer_ID:
ComUtils.getCookie("dlu") === null ? "" : ComUtils.getCookie("dlu"), //ID가 이메일 등의 개인정보일 경우 참고
customer_ID: ComUtils.getCookie("dlu") === null ? "" : ComUtils.getCookie("dlu"), //ID가 이메일 등의 개인정보일 경우 참고
});
}
});
@@ -309,6 +268,9 @@ $(document).ready(function () {
pdpDisplayThemeSwiperDtl();
pdpInCarGameSwiper();
pdpInCarGameSwiperDtl();
pdpSwiperDtl(".streamingPremium-swiper1");
pdpSwiperDtl(".streamingPremium-swiper2");
pdpSwiperDtl(".streamingPremium-swiper3");
flagScroll = false;
}
@@ -347,9 +309,7 @@ $(document).ready(function () {
if (content.length > maxInquiryContentsCount) {
$(this).val($(this).val().substring(0, maxInquiryContentsCount));
$(".textCount").text(
maxInquiryContentsCount + "/" + maxInquiryContentsCount
);
$(".textCount").text(maxInquiryContentsCount + "/" + maxInquiryContentsCount);
alert("글자수는 " + maxInquiryContentsCount + "자까지 입력 가능합니다.");
}
});
@@ -424,9 +384,7 @@ function pdpDisplayThemeSwiper() {
function () {
let leftPos = $(this).offset().left;
if (dtthumbClickFlag === false) {
$(this).append(
`<div class="tooltip"><div class="msg">썸네일을 클릭하면 적용예시를 확인<br>할 수 있습니다.</div><button class="btn-close">x</button></div>`
);
$(this).append(`<div class="tooltip"><div class="msg">썸네일을 클릭하면 적용예시를 확인<br>할 수 있습니다.</div><button class="btn-close">x</button></div>`);
}
},
function () {
@@ -439,6 +397,26 @@ function pdpDisplayThemeSwiper() {
flagScroll = false;
}
function pdpSwiperDtl(obj) {
if ($(`${obj}`).length > 0) {
var swiperThemeDtl = new Swiper(`${obj} .swiper`, {
slidesPerView: 1,
navigation: {
nextEl: `${obj} .swiper-button-next`,
prevEl: `${obj} .swiper-button-prev`,
},
pagination: {
el: `${obj} .swiper-pagination`,
},
on: {
init: function () {},
},
});
}
flagScroll = false;
}
function pdpDisplayThemeSwiperDtl() {
if ($(".displayThemeDtl .swiper").length > 0) {
var swiperThemeDtl = new Swiper(".displayThemeDtl .swiper", {
@@ -655,12 +633,8 @@ $(document).on("click", ".displayTheme .dtthumb", function () {
$(".theme-story .btn-dtthumb").removeClass("active");
const dtthumbItem = $(this).html();
const dtthumbSelectedItem = $(
`.pdpDisplayThemeSwiper .dtthumb[value=${dtlImgPath}]`
);
const dtthumbHisSelectedItem = $(
`.theme-story .dtthumb[value=${dtlImgPath}]`
).parent();
const dtthumbSelectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtlImgPath}]`);
const dtthumbHisSelectedItem = $(`.theme-story .dtthumb[value=${dtlImgPath}]`).parent();
const dtthumbItemHtml = `
<div class="btn-dtthumb active">
<button class="dtthumb" value="${dtlImgPath}">
@@ -695,13 +669,8 @@ $(document).on("click", ".displayTheme .dtthumb", function () {
}
$(".btn-dtthumb .btn-remove").click(function () {
const dtthumbValue = $(this)
.closest(".btn-dtthumb")
.find(".dtthumb")
.attr("value");
const selectedItem = $(
`.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbValue}]`
);
const dtthumbValue = $(this).closest(".btn-dtthumb").find(".dtthumb").attr("value");
const selectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbValue}]`);
$(this).closest(".btn-dtthumb").remove();
selectedItem.attr("data-click", "false");
selectedItem.removeClass("selected");
@@ -737,15 +706,14 @@ function pdpIntro() {
case $(".srsPlus").length > 0:
cookieVal = "srsPlusIntro";
break;
case $(".streamingPremium").length > 0:
cookieVal = "streamingPremiumIntro";
break;
}
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
$(".close-today").html(`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`);
$(".btn-intro")
.css({ display: "flex", opacity: "0", marginTop: "2rem" })
.animate({ opacity: "1", marginTop: "0" }, 400);
$(".btn-intro").css({ display: "flex", opacity: "0", marginTop: "2rem" }).animate({ opacity: "1", marginTop: "0" }, 400);
if (getCookie(cookieVal)) {
$(".editorWarp").removeClass("playing");
$(".video_wrap").css("display", "none");
@@ -754,17 +722,11 @@ function pdpIntro() {
// videoElements[0].pause();
// videoElements[0].currentTime = 0;
$(".close-today").html(
`<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
$(".close-today").html(`<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`);
$(".editorWarp .youtube-box").html("");
} else {
$(".video_wrap")
.css({ display: "flex", opacity: "0" })
.animate({ opacity: "1" }, 200);
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
$(".video_wrap").css({ display: "flex", opacity: "0" }).animate({ opacity: "1" }, 200);
$(".close-today").html(`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`);
$(".editorWarp .youtube-box").html(youtubeFrame);
}
@@ -891,17 +853,12 @@ function initSwiper() {
slidesPerView: "auto",
on: {
click: function (swiper) {
let getEventLabel = $(
".lnbList>ul>li:nth-of-type(" + (swiper.clickedIndex + 1) + ")>a"
).data("dleventlabel");
let getEventLabel = $(".lnbList>ul>li:nth-of-type(" + (swiper.clickedIndex + 1) + ")>a").data("dleventlabel");
if (getEventLabel) {
myLnbTagManager(getEventLabel);
}
location.href = $(".lnbList > ul > li")
.eq(swiper.clickedIndex)
.find("a")
.attr("href");
location.href = $(".lnbList > ul > li").eq(swiper.clickedIndex).find("a").attr("href");
},
},
});
@@ -929,13 +886,8 @@ function setImageFromFile(input, expression) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(expression)
.attr("src", e.target.result)
.attr("id", input.files[0].lastModified);
$(expression)
.closest(".imgItem")
.find(".delImg")
.data("index", input.files[0].lastModified);
$(expression).attr("src", e.target.result).attr("id", input.files[0].lastModified);
$(expression).closest(".imgItem").find(".delImg").data("index", input.files[0].lastModified);
};
reader.readAsDataURL(input.files[0]);
}
@@ -949,16 +901,10 @@ function open_layer_popup(popid) {
$("body").css("touch-action", "none");
$("#" + popid)
.stop()
.animate(
{ opacity: "1" },
{ queue: true, duration: 450, easing: "easeInOutExpo" }
);
.animate({ opacity: "1" }, { queue: true, duration: 450, easing: "easeInOutExpo" });
$("#" + popid + ">.popInner")
.stop()
.animate(
{ top: "50%" },
{ queue: true, duration: 450, easing: "easeInOutExpo" }
);
.animate({ top: "50%" }, { queue: true, duration: 450, easing: "easeInOutExpo" });
}
//레이어 팝업 클로즈 스크립트
@@ -1034,10 +980,7 @@ function XSS_Check(strTemp, level) {
strTemp = strTemp.replaceAll(/\)/g, "&#41;");
strTemp = strTemp.replaceAll(/\//g, "&#x2F;");
} else if (level != undefined && level == 2) {
strTemp = strTemp.replaceAll(
/alert|window|document|eval|cookie|this|self|parent|top|opener|function|constructor|script|on|\-+\\<>=/gi,
""
);
strTemp = strTemp.replaceAll(/alert|window|document|eval|cookie|this|self|parent|top|opener|function|constructor|script|on|\-+\\<>=/gi, "");
}
if (getType === "object") {
@@ -1072,13 +1015,7 @@ function enterVideo() {
$(".withVideo").find("video").get(0).load();
$(".withVideo").find("video").get(0).currentTime = 0;
$(document).on("mouseenter", ".withVideo", function () {
$(this)
.find(".productSmallVideo > img")
.stop()
.animate(
{ opacity: "0" },
{ queue: true, duration: 300, easing: "easeInOutExpo" }
);
$(this).find(".productSmallVideo > img").stop().animate({ opacity: "0" }, { queue: true, duration: 300, easing: "easeInOutExpo" });
playPromise = $(this).find("video").get(0).play();
});
$(document).on("mouseleave", ".withVideo", function () {
@@ -1126,12 +1063,7 @@ $.fn.clearForm = function () {
if (tag === "form") {
return $(":input", this).clearForm();
}
if (
type === "text" ||
type === "password" ||
type === "hidden" ||
tag === "textarea"
) {
if (type === "text" || type === "password" || type === "hidden" || tag === "textarea") {
this.value = "";
} else if (type === "checkbox" || type === "radio") {
this.checked = false;
@@ -1167,9 +1099,7 @@ function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
$(".close-today input").prop("checked", false);
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${name}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
$(".close-today").html(`<span onclick="hideTodayIntroPopup('${name}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`);
}
// 팝업을 숨기는 함수
@@ -1184,7 +1114,5 @@ function hideTodayIntroPopup(name) {
} else {
setCookie("hideIntroPopup", "true", 1);
}
$(".close-today").html(
`<span onclick="deleteCookie('${name}')" style="cursor:pointer"><input type="checkbox" checked> 오늘 하루 재생하지 않기</span>`
);
$(".close-today").html(`<span onclick="deleteCookie('${name}')" style="cursor:pointer"><input type="checkbox" checked> 오늘 하루 재생하지 않기</span>`);
}

235
product/pdp_streaming_premium.html
View File

@@ -282,37 +282,33 @@
<h1>스트리밍 프리미엄</h1>
<p>이제 차안에서도 스마트하게 여러 컨텐츠를 이욯해 보세요.</p>
</div>
<div class="producInfoWarp">
<div class="producOption">
<h2>요금제</h2>
<div class="optionList">
<div class="checkBtn type2">
<input type="checkbox" name="check" id="check1" value="Atlanta Hawks" checked />
<label for="check1">
<div class="optionText">
<p>
<strong>
스마트 TV 솔루션즈 플러스
<div class="priceOption">
<h2>원하시는 요금제를 선택해주세요.</h2>
<div class="priceList">
<div class="radioBtn">
<input type="radio" name="radioBtn" id="radioOne" value="연 구독 150000" />
<label for="radioOne">
<span>1년 약정</span>
<strong>₩ 11,000/월</strong>
</label>
</div>
<span>차량에서 스마트 TV 서비스를 이용 가능합니다.</span>
</strong>
<span>단, 비디오 스트리밍의 경우 지원 차량이 제한되오니 하단의 상세 정보를 확인바랍니다.</span>
</p>
</div>
</label>
</div>
<div class="radioBtn">
<input type="radio" name="radioBtn" id="radioTwo" value="무약정 24000" />
<label for="radioTwo">
<span>무약정</span>
<strong>₩ 24,000/월</strong>
</label>
</div>
</div>
<div class="producInfoLogOut">
<p>본 요금제는 스트리밍 서비스 이용 시 사용하는 이용권이며, 서비스 이용을 위한 콘텐츠 플랫폼사 이용권은 별도로 구매 후 연동하셔야 합니다.</p>
<span>(단, 구독 중인 콘텐츠 플랫폼의 이용권이 모바일 기기만 지원 할 경우, 차량 내 스트리밍 서비스를 이용하실 수 없습니다) </span>
</div>
<!-- [E] 로그아웃 케이스 -->
</div>
<div class="priceTotal">
<div class="oneButtonBlack">
<a href="" class="requireLogin"><p>요금제 가입하기</p></a>
<dl class="total">
<dt>총 결제 금액</dt>
<dd>₩ 0</dd>
</dl>
<div class="paymentButton oneButtonBlack">
<button class="PurchaseBtn rightBtn"><p>요금제 가입하기</p></button>
</div>
</div>
</div>
@@ -333,49 +329,151 @@
<div class="comp_body layer_up">
<div class="text_area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">이제 차량에서도 스마트 TV를 이용해보세요.</h3>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">다양한 OTT 컨텐츠와 더불어 뉴스, SNS,  회의, 스포츠 등 스마트TV에서 이용하던 다양한 서비스를 사용할 수 있습니다.</div>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">다양한 OTT 컨텐츠와 더불어 뉴스, SNS, 스포츠 등 스마트TV에서 이용하던 다양한 서비스를 사용할 수 있습니다.</div>
</div>
</div>
<div class="btn-intro" style="color: #fff">Intro영상 다시보기</div>
</div>
<div class="comp_md layer_up"></div>
<div class="comp_md layer_up video_wrap">
<div class="video-area">
<div class="video">
<div class="youtube-box" value="QTNIYFnfw_I"></div>
<div class="btn-close">닫기</div>
</div>
</div>
<div class="close-today"></div>
</div>
</div>
<div class="comp_wide comp_1x_b_v_s_b streamingPremium">
<div class="comp_body">
<div class="item aos-init aos-animate spec-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="scroll_area">
<img src="../assets/images/kia/pdp/streaming_premium/img_spec.png" class="themeImg" alt="이용 사양" />
<!-- <img src="../assets/images/kia/pdp/streaming_premium/img_spec_m.png" class="themeImg mobile" alt="비디오 스트리밍" /> -->
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg web" alt="비디오 스트리밍" />
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1_m.png" class="themeImg mobile" alt="비디오 스트리밍" />
<div class="pdpDtl streamingPremium-swiper1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" />
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" />
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img1.png" class="themeImg" alt="더욱 다양한 OTT 서비스" />
</div>
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="text_area">
<h5>비디오 스트리밍</h5>
<p>넷플릭스, 유튜브와 같은 비디오 컨텐츠를 대화면으로 즐길 수 있습니다.</p>
<h5>더욱 다양한 OTT 서비스</h5>
<p>넷플릭스, 디즈니+ , 티빙 등 주요 OTT 컨텐츠를 차량에서 감상해보세요</p>
</div>
</div>
<div class="item aos-init aos-animate mt-12" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
<div class="pdpDtl streamingPremium-swiper2">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" />
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" />
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg" alt="SNS 및 실시간 라이브 방송" />
</div>
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="text_area">
<h5>SNS 및 실시간 라이브 방송</h5>
<p>유튜브, 스포티비, LG채널, LGU+TV 등을 통해 현장감 있는 컨텐츠를 즐길 수 있어요</p>
</div>
</div>
<div class="item aos-init aos-animate mt-12" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2.png" class="themeImg web" alt="엔터테인먼트" />
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img2_m.png" class="themeImg mobile" alt="엔터테인먼트" />
<div class="pdpDtl streamingPremium-swiper3">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg" alt="노래방 / 키즈/ 게임" />
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg" alt="노래방 / 키즈/ 게임" />
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg" alt="노래방 / 키즈/ 게임" />
</div>
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="text_area">
<h5>라이브 채널</h5>
<p>LG 채널, U+ TV 로 온에어 방송을 시청해보세요.</p>
</div>
</div>
<div class="item aos-init aos-animate mt-12" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3.png" class="themeImg web" alt="Profile" />
<img src="../assets/images/kia/pdp/streaming_premium/streaming_premium_img3_m.png" class="themeImg mobile" alt="Profile" />
</div>
<div class="text_area">
<h5>엔터테인먼트</h5>
<p>노래방 서비스 (스팅레이)와 스낵게임(Playworks) 를 즐겨 보세요</p>
<h5>노래방 / 키즈/ 게임</h5>
<p>온가족 또는 친구와 함께 즐길 수 있는 컨텐츠가 준비되어 있습니다</p>
</div>
</div>
</div>
</div>
<div class="comp_wide comp_2x_b_h_s_e2">
<div class="comp_wide comp_1x_b_v_s_b streamingPremium">
<div class="comp_body">
<div class="item aos-init aos-animate mt-12" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
<div class="text_area between mb-2">
<h5>이용 가능 서비스 예시</h5>
<p class="web">※ 예시로 작성된 표 입니다. webOS 업데이트에 따라 콘텐츠는 수시로 변경될 수 있습니다.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/streaming_premium/usage_service.png" class="themeImg web" alt="이용 가능 서비스 예시" />
<img src="../assets/images/kia/pdp/streaming_premium/usage_service_m.png" class="themeImg mobile" alt="이용 가능 서비스 예시" />
</div>
<p class="mt-2 mobile">※ 예시로 작성된 표 입니다. webOS 업데이트에 따라 콘텐츠는 수시로 변경될 수 있습니다.</p>
</div>
</div>
</div>
<div class="comp_wide comp_2x_b_h_s_e2 mt-16">
<div class="comp_body">
<div class="item">
<div class="image_area">
@@ -426,8 +524,18 @@
<div class="title">이용조건</div>
<div class="bar"></div>
<ul class="contents">
<li>상품 구매 및 이용가능 여부는 차량에 설치된 하드웨어 구성 및 OTA펌웨어 버전에 따라 다르기에 로그인하시면 확인하실 수 있습니다.</li>
<li>상품 이용을 위해 구입 후 가이드에 따라 차량에 설치를 완료하셔야 합니다.</li>
<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>
</ul>
</div>
@@ -435,8 +543,7 @@
<div class="title">이용기간</div>
<div class="bar"></div>
<ul class="contents">
<li>평생 이용 선택 시 기간 제한 없이 이용이 가능합니다.</li>
<li>월/연 구독 선택 시 명기된 기간동안 이용이 가능합니다.</li>
<li>명기된 기간동안 이용이 가능합니다. 단, Kia Connect 해지 시 자동 해지되며, Kia Connect의 요금 산정 기준을 따릅니다.</li>
</ul>
</div>
@@ -444,27 +551,7 @@
<div class="title">청약철회</div>
<div class="bar"></div>
<ul class="contents">
<li>평생 이용은 결제 후 7일 내 구매 취소가 가능합니다.</li>
<li>
월/연 구독은 언제든지 취소할 수 있으며<br />
- 기능을 한번도 이용하지 않은 고객이 7일 이내에 구독 취소를 한 경우에는 구독 비용이 전액 환불됩니다.<br />
- 7일 이내 기능을 이용하거나 7일 이후에 구독 취소를 한 경우에는 중도 해지 및 이에 따른 환불이 가능합니다.<br />
</li>
<li>구매 취소는 차량 내 설치된 상품이 삭제완료 된 후에 진행됩니다.</li>
</ul>
</div>
<div class="item">
<div class="title">취소/해지/반품/환불 안내</div>
<div class="bar"></div>
<ul class="contents">
<li>고객님의 상품 이용 현황에 따라 정기 결제를 취소하거나 바로 해지하실 수 있습니다.</li>
<li>상품별 해지/환불 정책은 이용 안내 또는 상품 상세 설명을 참고해 주시기 바랍니다.</li>
<li>정기 결제를 취소하시면 구독 종료일까지 상품을 정상적으로 이용하실 수 있으며, 다음 정기 결제일에 해지됩니다.</li>
<li>구독 할인쿠폰이 적용된 상품을 해지하시면 쿠폰 사용 기간이 남아 있더라도 쿠폰은 소멸됩니다.</li>
<li>구독 할인쿠폰이 적용된 상품을 변경하셔도 쿠폰이 소멸될 수 있으니, 변경 신청 전 안내 내용을 꼼꼼히 확인해 주시기 바랍니다.</li>
<li>상품을 즉시 해지하는 경우, 재가입 및 혜택 이용이 제한될 수 있습니다.</li>
<li>정기 결제 당일에는 상품 해지가 불가 합니다. (정기 결제가 완료된 이후에는 결제 취소 가능하며, 재결제 기간 종료 후 자동으로 해지 됩니다.)</li>
<li>청약철회와 관련된 상세 정보는 https://connect.kia.com/kr/kiac_terms.html 를 참고하세요.</li>
</ul>
</div>
@@ -472,7 +559,7 @@
<div class="title">고객센터</div>
<div class="bar"></div>
<ul class="contents">
<li>기타 문의는 고객센터(080-200-2000)나 1:1문의로 신청바랍니다.</li>
<li>기타 문의는 고객센터(1899-2121)나 1:1문의로 신청바랍니다.</li>
</ul>
</div>
</div>