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
2025-06-01 19:45:00 +09:00
parent 9d70d7ca8f
commit 1be0633605
6 changed files with 826 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
kr/assets/css/mypage.css
View File

@@ -1093,7 +1093,7 @@ pre {
width: 100%;
font-weight: 400;
font-size: 1.4rem;
color: #9EA1A2;
color: #9ea1a2;
text-align: right;
text-decoration: line-through;
}
@@ -3954,6 +3954,9 @@ pre {
border-radius: 0.6rem;
}
.cancelPremiumPopup .popInner {
padding: 3rem;
}
@media (min-width: 768px) {
.cancelPremiumPopup .popInner {
width: 56rem;
@@ -3962,115 +3965,207 @@ pre {
.cancelPremiumPopup .content .alertMessage {
display: block;
margin-bottom: 3rem;
font-size: 2.4rem;
font-size: 1.6rem;
font-weight: 600;
line-height: 3.2rem;
line-height: 2.2rem;
text-align: center;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .alertMessage {
font-size: 2.4rem;
line-height: 3.2rem;
}
}
.cancelPremiumPopup .content .alertMessage em {
display: block;
margin-bottom: 1.5rem;
font-size: 1.4rem;
margin-bottom: 3rem;
font-size: 1.2rem;
font-weight: 400;
text-align: left;
line-height: 1.6rem;
}
@media (max-width: 768px) {
.cancelPremiumPopup .content .alertMessage {
font-size: 1.6rem;
line-height: 2.2rem;
@media (min-width: 768px) {
.cancelPremiumPopup .content .alertMessage em {
font-size: 1.4rem;
}
}
.cancelPremiumPopup .content .alertSubMessage li {
font-size: 1.6rem;
font-weight: 600;
padding-left: 1.4rem;
text-indent: -1rem;
}
@media (max-width: 768px) {
.cancelPremiumPopup .content .alertSubMessage li {
padding-left: 0;
text-indent: 0;
}
}
.cancelPremiumPopup .content .alertSubMessage li + li {
margin-top: 1rem;
}
@media (max-width: 768px) {
.cancelPremiumPopup .content .alertSubMessage li + li {
margin-top: 0.8rem;
}
}
.cancelPremiumPopup .content .alertSubMessage li ul {
padding: 0.5rem 0;
}
.cancelPremiumPopup .content .alertSubMessage li ul li {
color: #aaa;
.cancelPremiumPopup .content .alertSubMessage > ul > li {
font-size: 1.4rem;
font-weight: 600;
}
.cancelPremiumPopup .content .alertSubMessage > ul > li .bu {
display: block;
padding-left: 1.2rem;
text-indent: -1.2rem;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .alertSubMessage > ul > li {
font-size: 1.6rem;
}
}
.cancelPremiumPopup .content .alertSubMessage > ul > li .red {
display: inline-block;
margin-top: 0.6rem;
color: #ea0029;
text-indent: 0;
}
.cancelPremiumPopup .content .alertSubMessage > ul > li + li {
margin-top: 1.2rem;
}
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul {
padding: 1.2rem 0 0;
}
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li {
color: #aaa;
font-size: 1.2rem;
font-weight: 400;
padding-left: 2rem;
text-indent: -2.2rem;
line-height: 1.5;
}
.cancelPremiumPopup .content .alertSubMessage li ul li span {
display: block;
@media (min-width: 768px) {
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li {
font-size: 1.4rem;
}
}
.cancelPremiumPopup .content .alertSubMessage li ul li span b {
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li strong {
color: #000;
font-weight: 400;
}
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span {
display: block;
padding-left: 1.8rem;
text-indent: 0;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span {
padding-left: 2rem;
}
}
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span.bu {
padding-left: 2.2rem;
text-indent: -0.6rem;
}
.cancelPremiumPopup .content .alertSubMessage > ul > li > ul > li > span b {
color: #000;
font-weight: 400;
}
.cancelPremiumPopup .content .amount-box {
margin-bottom: 3rem;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail {
display: none;
padding: 1.6rem;
background-color: #F5F5F5;
background-color: #f5f5f5;
}
.cancelPremiumPopup .content .amount-box ul {
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul {
padding: 0.5rem 0;
}
.cancelPremiumPopup .content .amount-box ul li {
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li {
color: #aaa;
font-size: 1.4rem;
font-size: 1.2rem;
font-weight: 400;
padding-left: 2rem;
text-indent: -2.2rem;
padding-left: 1.2rem;
text-indent: -1.2rem;
line-height: 1.5;
}
.cancelPremiumPopup .content .amount-box ul li span {
display: block;
@media (min-width: 768px) {
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li {
font-size: 1.4rem;
}
}
.cancelPremiumPopup .content .amount-box ul li span b {
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li + li {
margin-top: 1.6rem;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span {
display: block;
padding: 0;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span b {
color: #000;
font-weight: 400;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span.bu {
padding-left: 1.4rem;
text-indent: -1.2rem;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span.bu {
padding-left: 1.4rem;
text-indent: -1.2rem;
}
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span .green {
color: #5d7d2b;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li span .red {
color: #ea0029;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total {
padding: 1.6rem 0 0 1.2rem;
font-size: 1.2rem;
color: #000;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total {
font-size: 1.4rem;
}
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total em {
color: #5d7d2b;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .total.minus em {
color: #ea0029;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .black {
color: #000;
}
.cancelPremiumPopup .content .amount-box .totalRefund-detail ul li .black em {
color: #aaa;
}
.cancelPremiumPopup .content .amount-box .btn-detail {
display: flex;
align-items: center;
justify-content: center;
justify-self: flex-end;
position: relative;
margin-top: 1.2rem;
font-size: 1.4rem;
color: #676767;
font-weight: 400;
border-bottom: 1px solid #676767;
}
.cancelPremiumPopup .content .amount-box .btn-detail:after {
content: "";
display: block;
top: 0;
right: -2rem;
width: 1.4rem;
height: 1.4rem;
margin: 0 0.4rem 0.2rem 0;
margin: 0 0 0 0.4rem;
background: url("../images/common/icon-tbarrow.svg") no-repeat center/contain;
transform: rotate(0);
transition: all 0.1s ease;
}
.cancelPremiumPopup .content .amount-box .btn-detail em {
border-bottom: 1px solid #676767;
}
.cancelPremiumPopup .content .amount-box .btn-detail.fold:after {
transform: rotate(180deg);
}
.cancelPremiumPopup .content .totalRefund {
display: flex;
align-items: center;
justify-content: center;
height: 8rem;
margin: 3rem 0 0;
margin: 2.8rem 0 0;
background-color: #ececec;
padding: 0 2rem;
font-size: 1.6rem;
font-weight: 400;
color: #000;
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.cancelPremiumPopup .content .totalRefund {
height: 6rem;
font-size: 1.4rem;
margin: 2rem 0;
display: flex;
align-items: center;
justify-content: center;
height: 8rem;
margin: 3rem 0 0;
padding: 0;
}
}
.cancelPremiumPopup .content .totalRefund > div {
@@ -4079,15 +4174,21 @@ pre {
justify-content: flex-start;
flex-wrap: wrap;
flex: 1;
padding: 0 3rem;
padding: 2rem 0;
line-height: 1.5;
text-indent: 0;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .totalRefund > div {
padding: 0 3rem;
}
}
.cancelPremiumPopup .content .totalRefund > div .amount {
display: block;
width: 100%;
padding-left: 1.8rem;
font-weight: 600;
color: #5D7D2B;
color: #5d7d2b;
}
.cancelPremiumPopup .content .totalRefund > div b {
display: flex;
@@ -4104,12 +4205,18 @@ pre {
background: url("../images/common/icon-plus-green.png") no-repeat center/contain;
}
.cancelPremiumPopup .content .totalRefund > div.minus {
border-left: 1px solid #D9D9D9;
border-top: 1px solid #d9d9d9;
}
@media (min-width: 768px) {
.cancelPremiumPopup .content .totalRefund > div.minus {
border-top: 0;
border-left: 1px solid #d9d9d9;
}
}
.cancelPremiumPopup .content .totalRefund > div.minus b:before {
background: url("../images/common/icon-minus-red.png") no-repeat center/contain;
}
.cancelPremiumPopup .content .totalRefund > div.minus .amount {
color: #EA0029;
color: #ea0029;
}
/*# sourceMappingURL=mypage.css.map */

2
kr/assets/css/mypage.css.map
View File

File diff suppressed because one or more lines are too long

397
kr/assets/css/mypage.scss
View File

@@ -204,7 +204,7 @@ pre {
}
}
li+li {
li + li {
margin-top: 0;
margin-left: 2rem;
@@ -269,7 +269,7 @@ pre {
}
}
>div {
> div {
display: block;
align-items: center;
justify-content: space-between;
@@ -334,7 +334,7 @@ pre {
margin-top: 3rem;
width: 100%;
>div {
> div {
h3 {
font-size: 1.8rem;
font-weight: 600;
@@ -347,8 +347,8 @@ pre {
.itemListWarp {
margin-top: 2rem;
>ul {
>li {
> ul {
> li {
border: 1px solid #dedede;
border-radius: 0.6rem;
@@ -386,10 +386,10 @@ pre {
flex-wrap: nowrap;
}
>div {
> div {
display: flex;
>p {
> p {
min-width: 7.5rem;
height: 7.5rem;
overflow: hidden;
@@ -478,7 +478,7 @@ pre {
}
}
dt+dd {
dt + dd {
margin-top: 1rem;
@include desktopMin {
@@ -486,7 +486,7 @@ pre {
}
}
dd+dd {
dd + dd {
margin-top: 1.5rem;
font-size: 1.5rem;
@@ -498,7 +498,7 @@ pre {
}
}
.cartItemInfo+ul {
.cartItemInfo + ul {
padding-right: 0;
@include tablet {
@@ -517,7 +517,7 @@ pre {
font-weight: 400;
}
li+li {
li + li {
margin-top: 0.5rem;
}
}
@@ -631,20 +631,20 @@ pre {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
}
}
>div.subScription {
> div.subScription {
.itemListWarp {
ul {
li {
.cartItem {
.cartItemInfo {
>div {
> div {
dl {
dt {
span {
@@ -663,7 +663,7 @@ pre {
}
}
>div+div {
> div + div {
margin-top: 1.5rem;
@include tablet {
@@ -671,13 +671,13 @@ pre {
}
}
>div.myPayList {
> div.myPayList {
width: 100%;
>ul {
> ul {
width: 100%;
>li {
> li {
border: 1px solid #dedede;
border-radius: 0.6rem;
width: 100%;
@@ -730,7 +730,7 @@ pre {
font-size: 1.4rem;
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -942,7 +942,7 @@ pre {
font-size: 1.4rem;
}
p+p {
p + p {
border-left: 1px solid #dedede;
padding-left: 1rem;
margin-left: 1rem;
@@ -959,7 +959,7 @@ pre {
}
}
>li+li {
> li + li {
margin-top: 3rem;
}
}
@@ -974,15 +974,15 @@ pre {
}
}
>div.myPayList {
> div.myPayList {
border-top: 1px solid #999;
@include desktopMin {
border-top: 0;
}
>ul {
>li {
> ul {
> li {
border-radius: 0;
border: 0;
border-bottom: 1px solid #dedede;
@@ -1005,7 +1005,7 @@ pre {
padding: 3.2rem;
}
>dl {
> dl {
display: flex;
flex-direction: column;
align-items: stretch;
@@ -1154,7 +1154,7 @@ pre {
width: 100%;
font-weight: 400;
font-size: 1.4rem;
color: #9EA1A2;
color: #9ea1a2;
text-align: right;
text-decoration: line-through;
@@ -1170,7 +1170,7 @@ pre {
}
}
>li+li {
> li + li {
margin-top: 0;
@include desktopMin {
@@ -1280,7 +1280,7 @@ pre {
}
.contents {
+.title {
+ .title {
margin-top: 2.2rem;
}
}
@@ -1327,7 +1327,7 @@ pre {
}
ul {
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1354,7 +1354,6 @@ pre {
margin-top: 4rem;
a {
&::after,
&::before {
width: 3.2rem;
@@ -1388,7 +1387,7 @@ pre {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -1425,7 +1424,7 @@ pre {
}
}
p+p {
p + p {
display: flex;
align-items: center;
margin-top: 1rem;
@@ -1569,14 +1568,14 @@ pre {
.completeForm {
margin-top: 2rem;
>div {
> div {
border-top: 1px solid #999999;
@include tablet {
border-top: 1px solid #dedede;
}
>dl {
> dl {
border-bottom: 1px solid #dedede;
display: flex;
flex-wrap: wrap;
@@ -1593,7 +1592,7 @@ pre {
}
}
>dt {
> dt {
padding-top: 1rem;
@include tablet {
@@ -1602,7 +1601,7 @@ pre {
}
}
>dd {
> dd {
padding-top: 1rem;
padding-bottom: 1rem;
font-weight: 600;
@@ -1614,7 +1613,7 @@ pre {
}
}
>dt {
> dt {
width: 100%;
font-size: 1.4rem;
padding-left: 0rem;
@@ -1642,7 +1641,7 @@ pre {
}
}
>dt.calc {
> dt.calc {
@include tablet {
&::after {
content: "";
@@ -1651,7 +1650,7 @@ pre {
}
}
>dd {
> dd {
padding-left: 0;
width: 100%;
font-size: 1.4rem;
@@ -1725,7 +1724,7 @@ pre {
}
}
dl+dl {
dl + dl {
margin-top: 3rem;
}
@@ -1761,7 +1760,7 @@ pre {
}
a {
>div {
> div {
display: flex;
align-items: center;
gap: 0.8rem;
@@ -1847,7 +1846,7 @@ pre {
}
}
>p {
> p {
margin-top: 1rem;
color: #000;
font-weight: 600;
@@ -1861,7 +1860,7 @@ pre {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1875,7 +1874,7 @@ pre {
.usrQuestions,
.adminAnswer {
>div {
> div {
display: flex;
align-items: center;
gap: 0.8rem;
@@ -1969,7 +1968,7 @@ pre {
}
.usrQuestions {
>div {
> div {
em {
padding-left: 0.8rem;
@@ -2072,7 +2071,7 @@ pre {
flex-wrap: nowrap;
}
>div {
> div {
width: 100%;
p {
@@ -2149,7 +2148,7 @@ pre {
}
}
div+div {
div + div {
margin-top: 3rem;
width: fit-content;
@@ -2263,7 +2262,7 @@ pre {
&:after {
width: 0.8rem;
height: 1rem;
margin-left: .5rem;
margin-left: 0.5rem;
}
}
}
@@ -2292,7 +2291,7 @@ pre {
}
}
label+label {
label + label {
margin-top: 2.4rem;
}
}
@@ -2434,7 +2433,7 @@ pre {
}
}
dl+dl {
dl + dl {
margin-top: 0;
border-bottom: 1px solid #999;
border-top: 1px solid #dedede;
@@ -2496,7 +2495,7 @@ pre {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -2574,7 +2573,7 @@ pre {
}
}
p+p {
p + p {
margin-top: 2rem;
}
}
@@ -2584,8 +2583,7 @@ pre {
padding: 0;
border: 0;
>div {
> div {
p {
display: flex;
align-items: center;
@@ -2706,7 +2704,7 @@ pre {
}
}
&+span {
& + span {
margin-top: 2.4rem;
}
}
@@ -2762,7 +2760,7 @@ pre {
.itemStreaming {
margin-top: 2rem;
>p {
> p {
color: #000;
font-size: 1.4rem;
margin-top: 1rem;
@@ -2774,7 +2772,7 @@ pre {
}
}
>span {
> span {
display: block;
color: #676767;
font-size: 1.4em;
@@ -2793,7 +2791,7 @@ pre {
visibility: hidden;
position: absolute;
&:checked+label {
&:checked + label {
background-color: #05141f;
dt,
@@ -2885,7 +2883,7 @@ pre {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -2974,7 +2972,7 @@ pre {
flex-wrap: nowrap;
}
>div {
> div {
display: flex;
// margin-top: 1.4rem;
@@ -2982,7 +2980,7 @@ pre {
margin-top: 0;
}
>p {
> p {
min-width: 7.5rem;
height: 7.5rem;
overflow: hidden;
@@ -3066,7 +3064,7 @@ pre {
margin-top: 1.2rem;
}
dt+dd {
dt + dd {
margin-top: 0.5rem;
@include desktopMin {
@@ -3074,7 +3072,7 @@ pre {
}
}
dd+dd {
dd + dd {
margin-top: 1.5rem;
font-size: 1.4rem;
@@ -3086,7 +3084,7 @@ pre {
}
}
.cartItemInfo+dl {
.cartItemInfo + dl {
@include maxmobile {
width: 100%;
}
@@ -3147,7 +3145,7 @@ pre {
width: 100%;
min-width: 18rem;
button+button {
button + button {
margin-top: 1rem;
}
@@ -3370,7 +3368,7 @@ pre {
}
}
li+li {
li + li {
margin-top: 1rem;
}
@@ -3390,7 +3388,7 @@ pre {
min-height: 17rem;
}
>p {
> p {
font-weight: 600;
font-size: 1.8rem;
color: #9ea1a2;
@@ -3426,7 +3424,7 @@ pre {
width: fit-content;
}
>p {
> p {
width: 100%;
display: flex;
align-items: center;
@@ -3452,7 +3450,6 @@ pre {
button,
a {
&::before,
&::after {
@include tablet {
@@ -3679,14 +3676,14 @@ pre {
width: 100% !important;
tr {
td+td+td {
td + td + td {
width: calc(100% - 138px) !important;
}
}
}
}
.mailBodyContents>table>tbody>tr>td {
.mailBodyContents > table > tbody > tr > td {
font-size: 1.8rem !important;
@include maxtablet {
@@ -4170,7 +4167,7 @@ pre {
}
}
>div {
> div {
width: 100%;
display: flex;
flex-wrap: wrap;
@@ -4189,11 +4186,11 @@ pre {
}
}
input[type="text"]+input[type="text"] {
input[type="text"] + input[type="text"] {
margin-left: 1rem;
}
input[type="text"]+select {
input[type="text"] + select {
width: 100%;
margin-top: 1rem;
@@ -4299,6 +4296,7 @@ pre {
.cancelPremiumPopup {
.popInner {
padding: 3rem;
@include tablet {
width: 56rem;
}
@@ -4307,64 +4305,88 @@ pre {
.alertMessage {
display: block;
margin-bottom: 3rem;
font-size: 2.4rem;
font-size: 1.6rem;
font-weight: 600;
line-height: 3.2rem;
line-height: 2.2rem;
text-align: center;
@include tablet {
font-size: 2.4rem;
line-height: 3.2rem;
}
em {
display: block;
margin-bottom: 1.5rem;
font-size: 1.4rem;
margin-bottom: 3rem;
font-size: 1.2rem;
font-weight: 400;
text-align: left;
line-height: 1.6rem;
}
@media (max-width: 768px) {
font-size: 1.6rem;
line-height: 2.2rem;
@include tablet {
font-size: 1.4rem;
}
}
}
.alertSubMessage {
li {
font-size: 1.6rem;
font-weight: 600;
padding-left: 1.4rem;
text-indent: -1rem;
@media (max-width: 768px) {
padding-left: 0;
text-indent: 0;
}
+li {
margin-top: 1rem;
@media (max-width: 768px) {
margin-top: 0.8rem;
> ul {
> li {
font-size: 1.4rem;
font-weight: 600;
.bu {
display: block;
padding-left: 1.2rem;
text-indent: -1.2rem;
}
}
ul {
padding: 0.5rem 0;
@include tablet {
font-size: 1.6rem;
}
.red {
display: inline-block;
margin-top: 0.6rem;
color: #ea0029;
text-indent: 0;
}
li {
color: #aaa;
font-size: 1.4rem;
font-weight: 400;
padding-left: 2rem;
text-indent: -2.2rem;
line-height: 1.5;
+ li {
margin-top: 1.2rem;
}
span {
display: block;
> ul {
padding: 1.2rem 0 0;
b {
> li {
color: #aaa;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.5;
@include tablet {
font-size: 1.4rem;
}
strong {
color: #000;
font-weight: 400;
}
> span {
display: block;
padding-left: 1.8rem;
text-indent: 0;
@include tablet {
padding-left: 2rem;
}
&.bu {
padding-left: 2.2rem;
text-indent: -0.6rem;
}
b {
color: #000;
font-weight: 400;
}
}
}
}
}
@@ -4372,65 +4394,126 @@ pre {
}
.amount-box {
margin-bottom: 3rem;
.totalRefund-detail {
display: none;
padding: 1.6rem;
background-color: #F5F5F5;
}
ul {
padding: 0.5rem 0;
background-color: #f5f5f5;
ul {
padding: 0.5rem 0;
li {
color: #aaa;
font-size: 1.4rem;
font-weight: 400;
padding-left: 2rem;
text-indent: -2.2rem;
line-height: 1.5;
li {
color: #aaa;
font-size: 1.2rem;
font-weight: 400;
padding-left: 1.2rem;
text-indent: -1.2rem;
line-height: 1.5;
@include tablet {
font-size: 1.4rem;
}
& + li {
margin-top: 1.6rem;
}
span {
display: block;
span {
display: block;
padding: 0;
b {
b {
color: #000;
font-weight: 400;
}
&.bu {
padding-left: 1.4rem;
text-indent: -1.2rem;
@include tablet {
padding-left: 1.4rem;
text-indent: -1.2rem;
}
}
.green {
color: #5d7d2b;
}
.red {
color: #ea0029;
}
}
.total {
padding: 1.6rem 0 0 1.2rem;
font-size: 1.2rem;
color: #000;
font-weight: 400;
@include tablet {
font-size: 1.4rem;
}
em {
color: #5d7d2b;
}
&.minus {
em {
color: #ea0029;
}
}
}
.black {
color: #000;
em {
color: #aaa;
}
}
}
}
}
.btn-detail {
display: flex;
align-items: center;
justify-content: center;
justify-self: flex-end;
position: relative;
margin-top: 1.2rem;
font-size: 1.4rem;
color: #676767;
font-weight: 400;
border-bottom: 1px solid #676767;
&:after {
content:"";
content: "";
display: block;
top: 0;
right: -2rem;
width: 1.4rem;
height: 1.4rem;
margin:0 .4rem .2rem 0;
background: url('../images/common/icon-tbarrow.svg') no-repeat center / contain;
margin: 0 0 0 0.4rem;
background: url("../images/common/icon-tbarrow.svg") no-repeat center / contain;
transform: rotate(0);
transition: all 0.1s ease;
}
em {
border-bottom: 1px solid #676767;
}
&.fold {
&:after {
transform: rotate(180deg);
}
}
}
}
.totalRefund {
display: flex;
align-items: center;
justify-content: center;
height: 8rem;
margin: 3rem 0 0;
margin: 2.8rem 0 0;
background-color: #ececec;
padding: 0 2rem;
font-size: 1.6rem;
font-weight: 400;
color: #000;
@media (max-width: 768px) {
height: 6rem;
font-size: 1.4rem;
margin: 2rem 0;
@include tablet {
display: flex;
align-items: center;
justify-content: center;
height: 8rem;
margin: 3rem 0 0;
padding: 0;
}
> div {
@@ -4438,15 +4521,20 @@ pre {
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
flex:1;
padding:0 3rem;
flex: 1;
padding: 2rem 0;
line-height: 1.5;
text-indent: 0;
@include tablet {
padding: 0 3rem;
}
.amount {
display: block;
width: 100%;
padding-left: 1.8rem;
font-weight: 600;
color: #5D7D2B;
color: #5d7d2b;
}
b {
display: flex;
@@ -4454,27 +4542,32 @@ pre {
justify-content: flex-start;
font-weight: 400;
&:before {
content:"";
content: "";
display: block;
width: 1.4rem;
height: 1.4rem;
margin:0 .4rem .2rem 0;
background: url('../images/common/icon-plus-green.png') no-repeat center / contain;
margin: 0 0.4rem 0.2rem 0;
background: url("../images/common/icon-plus-green.png") no-repeat center / contain;
}
}
&.minus {
border-left: 1px solid #D9D9D9;
border-top: 1px solid #d9d9d9;
@include tablet {
border-top: 0;
border-left: 1px solid #d9d9d9;
}
b {
&:before {
background: url('../images/common/icon-minus-red.png') no-repeat center / contain;
background: url("../images/common/icon-minus-red.png") no-repeat center / contain;
}
}
.amount {
color: #EA0029;
color: #ea0029;
}
}
}
}
}
}
}

8
kr/assets/js/common.js
View File

@@ -1292,3 +1292,11 @@ function pdpDisplayThemeKboSwiperDtl() {
flagScroll = false;
}
function slideToggle(button, element) {
const $target = $(element).first();
if ($target.length === 0) return;
$target.stop(true, true).slideToggle(300);
$(button).toggleClass("fold");
}

479
kr/mypage/my-product-view.html
View File

@@ -247,11 +247,17 @@
</div>
<div class="couponArea">
<dl class="lnbCoupon">
<dt><span>사용 가능한 </span>쿠폰</dt>
<dt>
<span>사용 가능한</span>
쿠폰
</dt>
<dd>3</dd>
</dl>
<dl class="lnbPoint">
<dt><span>멤버스 </span>포인트</dt>
<dt>
<span>멤버스</span>
포인트
</dt>
<dd>30p</dd>
</dl>
</div>
@@ -538,7 +544,8 @@
<dl>
<dt class="calc">재 결제 금액</dt>
<dd>
\ 1,486<br />
\ 1,486
<br />
1,858 P
</dd>
</dl>
@@ -563,7 +570,8 @@
<dl>
<dt class="calc">취소금액</dt>
<dd>
\ 1,486<br />
\ 1,486
<br />
1,858 P
</dd>
</dl>
@@ -588,8 +596,16 @@
<li>모든 일할 정산의 기준 금액은 판매가에서 할인 금액을 뺀 최근 실 구독 결제액으로 산정합니다.</li>
<li>일할 정산 금액은 최종 계산까지는 소수점 둘째 자리까지 계산하되, 최종 금액산정은 결과값에서 소수점 이하에서 반올림으로 처리합니다.</li>
<li>정기 구독 사양 일할 정산 금액의 산정 기준은 365일로 계산합니다.</li>
<li>월 구독의 경우 최근 실 구독 비용이 10,000원으로 발생된다면, 1일 기준 비용은 328.77원입니다.<br />(10,000원 X 12개월 / 365일 = 328.77)</li>
<li>연 구독의 경우 최근 실 구독 비용이 100,000원으로 발생된다면, 1일 기준 비용은 273.97원입니다.<br />(100,000원 / 365일 = 273.97)</li>
<li>
월 구독의 경우 최근 실 구독 비용이 10,000원으로 발생된다면, 1일 기준 비용은 328.77원입니다.
<br />
(10,000원 X 12개월 / 365일 = 328.77)
</li>
<li>
연 구독의 경우 최근 실 구독 비용이 100,000원으로 발생된다면, 1일 기준 비용은 273.97원입니다.
<br />
(100,000원 / 365일 = 273.97)
</li>
<li>환불 액 계산은 잔여일 수 X 일 비용으로 계산합니다.</li>
<li>잔여일 수 계산은 (다음 구독 결제일-구독 해지 신청일-1)로 합니다.</li>
</ul>
@@ -613,10 +629,7 @@
<dl>
<dt>지니뮤직 프로모션 데이터 요금제</dt>
<dd>
<p>
2개월간 무료로 뮤직 스트리밍 서비스를 이용하실 수 있으며, 본 요금제는 차량당 1회만 가입이 가능합니다. 무료 기간 종료 후에는 ‘일반 스트리밍 데이터 요금제’로 자동 변경되어 요금이 청구됩니다.
2개월간 무료 이후 3,300원/월 (VAT 포함)
</p>
<p>2개월간 무료로 뮤직 스트리밍 서비스를 이용하실 수 있으며, 본 요금제는 차량당 1회만 가입이 가능합니다. 무료 기간 종료 후에는 ‘일반 스트리밍 데이터 요금제’로 자동 변경되어 요금이 청구됩니다. 2개월간 무료 이후 3,300원/월 (VAT 포함)</p>
<strong>기간 2022년 4월 25일 ~ 9999년 12월 31일</strong>
</dd>
<dd>
@@ -732,7 +745,7 @@
<div class="popInner">
<div class="content">
<p>
<span> 요금제 변경을 위해서는 사용중인 요금제를 해지하신 후, 다시 구매하셔야 합니다. 요금제를 해지하시겠습니까? </span>
<span>요금제 변경을 위해서는 사용중인 요금제를 해지하신 후, 다시 구매하셔야 합니다. 요금제를 해지하시겠습니까?</span>
</p>
<div class="carswBtn">
<div class="towButton">
@@ -750,7 +763,7 @@
<div class="popInner">
<div class="content">
<p>
<span> 요금제 해지가 완료되었습니다. </span>
<span>요금제 해지가 완료되었습니다.</span>
</p>
<div class="carswBtn">
@@ -801,7 +814,11 @@
</p>
<p><span>오류문의: 24시간 연중 무휴</span></p>
<p>
<span> 일반 문의: 주중 08:30 ~ 18:00<br /><span style="margin-left: 64px">(토·일·공휴일 휴무)</span> </span>
<span>
일반 문의: 주중 08:30 ~ 18:00
<br />
<span style="margin-left: 64px">(토·일·공휴일 휴무)</span>
</span>
</p>
</div>
<div class="familyBoxWarp">
@@ -827,7 +844,10 @@
</div>
</div>
</div>
<p class="copyRight"><span>Ⓒ</span> Kia CORP. ALL RIGHTS RESERVED.</p>
<p class="copyRight">
<span>Ⓒ</span>
Kia CORP. ALL RIGHTS RESERVED.
</p>
</div>
</div>
@@ -836,17 +856,7 @@
<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>
<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">
@@ -861,7 +871,13 @@
<h1>결제 방법 안내</h1>
<div class="payInfoCon">
<p>
<strong>이미 등록된 결제 방법이 있습니다.<br />(지로, 서울특별시 OO구 OOO로 OO길 OO)<br />해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
<strong>
이미 등록된 결제 방법이 있습니다.
<br />
(지로, 서울특별시 OO구 OOO로 OO길 OO)
<br />
해당 결제 방법으로 요금을 납부하시겠습니까?
</strong>
<span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
</p>
</div>
@@ -894,157 +910,396 @@
<div id="cancelPremiumAlert" class="alertPopup cancelPremiumPopup" style="display: flex; opacity: 1">
<div class="popInner">
<div class="content">
<strong class="alertMessage">
<!-- [무약정 즉시 해지](결제 7일 이내) -->
<!-- <strong class="alertMessage">
<em>즉시 해지(결제 7일 이내)</em>
스트리밍 프리미엄 약정 사양 구독을 해지 하시겠습니까?
스트리밍 프리미엄 무약정 사양<br />
구독을 해지 하시겠습니까?
</strong>
<!-- [즉시 해지] (결제 7일 이내) -->
<div class="alertSubMessage">
<ul>
<li>∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</li>
<li>
∙ 해지 시 과금/환불 비용 구분<br />
<span class="bu">∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</span>
</li>
<li>
<span class="bu">∙ 해지 시 과금/환불 비용 구분</span>
<ul>
<li>
<span>가) 차량용 webOS 콘텐츠 플랫폼</span>
가입일로부터 7일 이내에 환불 요청 시, 전체 환불 처리 됩니다.
</li>
<li>
<span>나) 스트리밍 프리미엄 데이터 요금제</span>
통신사 정책에 따라 사후 일할 계산됩니다.<br />(문의 : 기아 커넥트 센터 1899-2121)
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span>가입일로부터 7일 이내에 환불 요청 시, <br class="br-m" />전체 환불 처리 됩니다.</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">6,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span
><b>1) 환불 금액 : 6,000원</b>
<br class="br-m" />
(잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span
>
<span class="bu">i) 일할 계산 : 7일 이내 전체 환불</span>
</li>
<li>
<span><b>2) 총 받으실 금액 : 6,000원</b></span>
<span class="bu">i) 환불 금액 6,000원</span>
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<div class="totalRefund radioArea">
<b>총 받으실 금액 : <span class="minusPriceInfo">6,000</span>원</b>
</div>
<ul>
<li>
<ul>
<li>
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.<br class="br-m" />
(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>
</ul>
</div> -->
<!--// [무약정 즉시 해지](결제 7일 이내) -->
<!-- [무약정 즉시 해지](결제 7일 초과) -->
<strong class="alertMessage">
<em>즉시 해지(결제 7일 초과)</em>
스트리밍 프리미엄 무약정 사양<br />
구독을 해지 하시겠습니까?
</strong>
<div class="alertSubMessage">
<ul>
<li>
<span class="bu">∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</span>
</li>
<li>
<span class="bu">∙ 해지 시 과금/환불 비용 구분</span>
<ul>
<li>
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span class="bu">∙ 납부하신 당월 결제 금액은 일할 계산되어 환불 처리 됩니다</span>
<span class="bu">∙ 총 납부하실 금액은 구독 해지 즉시 결제 진행됩니다.</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">6,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span
><b>1) 환불 금액 : 6,000원</b>
<br class="br-m" />
(잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span
>
<span class="bu">i) 일할 계산 환불 금액: 월 요금 - (월 요금 * (사용일수/결제월 총일수의 반올림))</span>
<span class="total">→ 총 받으실 금액 : <em>5,000원</em></span>
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<ul>
<li>
차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
<ul>
<li>
<span><b>a) 환불 금액 : 6,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
i) 일할 계산 : 7일 이내 전체 환불
</li>
<li>
<span><b>b) 중도 해지 납부 금액 : 0원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
i) 할인 반환금 : 0원 <br />
ii)중도해지 위약금 : 0원 (약정 기간 종료 전 해지로 인한 위약금)
</li>
<li>
<span><b>c) 총 받으실 금액 : 6,000원</b></span>
i) 환불 금액 6,000원 - 중도 해지 납부 금액 0원
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.
<br class="br-m" />(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>
</ul>
</div>
<!--// [즉시 해지] (결제 7일 이내) -->
<!-- [즉시 해지] (결제 7일 초과) -->
<!-- <div class="alertSubMessage">
<!--// [무약정 즉시 해지](결제 7일 초과) -->
<!-- [무약정 예약 해지] (다음 회차 정기결제 시점 해지) -->
<!-- <strong class="alertMessage">
<em>예약 해지(다음 회차 정기결제 시점 해지)</em>
스트리밍 프리미엄 무약정 사양<br />
구독해지를 예약 하시겠습니까?
</strong>
<div class="alertSubMessage">
<ul>
<li>∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</li>
<li>
∙ 해지 시 과금/환불 비용 구분<br />
<span class="bu">
∙ 디지털 사양 구독 해지를 예약하시면 다음 회차 정기 결제 일에 해지되며 차량에서 해당 사양의 이용이 중지됩니다.<br />
<em class="red">(2024.10.26 구독해지 예정)</em>
</span>
</li>
<li>
<span class="bu">∙ 해지 시 과금/환불 비용 구분</span>
<ul>
<li>
<span>가) 차량용 webOS 콘텐츠 플랫폼</span>
∙ 납부하신 당월 결제 금액은 일할 계산되어 환불 처리 됩니다.<br />
∙ 총 납부하실 금액은 구독 해지 즉시 결제 진행됩니다.
</li>
<li>
<span>나) 스트리밍 프리미엄 데이터 요금제</span>
통신사 정책에 따라 사후 일할 계산됩니다. (문의 : 기아 커넥트 센터 1899-2121)
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span class="bu"> ∙ 다음 회차 정기 결제 일에 해지가 되므로, 환불/납부하실 금액은 금액은 없습니다.</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">0원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span
><b>1) 환불 금액 : 0원</b>
<br class="br-m" />
(잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span
>
<span class="bu">i) 일할 계산 : 다음 회차 정기 결제일에 해지되어 일할 계산할 금액이 없습니다.</span>
<span class="total minus">→ 총 납부하실 금액 : <em>0원</em></span>
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<div class="totalRefund radioArea">
<b>총 받으실 금액 : <span class="minusPriceInfo">2,000</span>원</b>
</div>
<ul>
<li>
차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
<ul>
<li>
<span><b>a) 환불 금액 : 5,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
i) 일할 계산 환불 금액: 월 요금 - (월 요금 * (사용일수/결제월 총일수의 반올림))
</li>
<li>
<span><b>b) 중도 해지 납부 금액 : 3,000원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
i) 할인 반환금 : 1,000원 (할인 받으셨던 기간 동안의 해택 반환금) <br />
ii)중도해지 위약금 : 0원 (약정 기간 종료 전 해지로 인한 위약금)<br />
</li>
<li>
<span><b>c) 총 받으실 금액 : 2,000원</b></span>
i) 환불 금액 5,000원 - 중도 해지 납부 금액 3,000원
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.
<br class="br-m" />(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>
</ul>
</div> -->
<!--// [즉시 해지] (결제 7일 초과) -->
<!-- [예약 해지] (다음 회차 정기결제 시점 해지) -->
<!-- <div class="alertSubMessage">
<!--// [무약정 예약 해지] (다음 회차 정기결제 시점 해지) -->
<!-- [약정 즉시 해지](결제 7일 이내) -->
<!-- <strong class="alertMessage">
<em>즉시 해지(결제 7일 이내)</em>
스트리밍 프리미엄 약정 사양<br />
구독을 해지 하시겠습니까?
</strong>
<div class="alertSubMessage">
<ul>
<li>
∙ 디지털 사양 구독 해지를 예약하시면 다음 회차 정기 결제 일에 해지되며 차량에서 해당 사양의 이용이 중지됩니다.<br />
(2024.10.26 구독해지 예정)
<span class="bu">∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</span>
</li>
<li>
∙ 해지 시 과금/환불 비용 구분<br />
<span class="bu">∙ 해지 시 과금/환불 비용 구분</span>
<ul>
<li>
<span>가) 차량용 webOS 콘텐츠 플랫폼</span>
∙ 다음 회차 정기 결제 일에 해지되며 환불받으실 금액은 없습니다.<br />
∙ 총 납부하실 금액은 구독 해지 예약 신청 즉시 결제 진행됩니다.
</li>
<li>
<span>나) 스트리밍 프리미엄 데이터 요금제</span>
통신사 정책에 따라 사후 일할 계산됩니다. (문의 : 기아 커넥트 센터 1899-2121)
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span>가입일로부터 7일 이내에 환불 요청 시, <br class="br-m" />전체 환불 처리 됩니다.</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">6,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span><b>1) 환불 금액 : 6,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
<span class="bu black">i) 일할 계산 : 7일 이내 전체 환불</span>
</li>
<li>
<span><b>2) 중도 해지 납부 금액 : 0원</b> (약정 사양 중도 해지로 인한 납부 금액)</span>
<span class="bu black">i) 할인 반환금 : 0원</span>
<span class="bu black">ii) 중도해지 위약금 : 0원 <em>(약정 기간 종료 전 해지로 인한 위약금)</em></span>
</li>
<li>
<span><b>2) 총 받으실 금액 : <em class="green">6,000원</em></b> (원단위 절사)</span>
<span class="bu black">i) 환불 금액 6,000원 - 중도 해지 납부 금액 0원</span>
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<div class="totalRefund radioArea">
<b>총 납부하실 금액 : <span class="minusPriceInfo">15,000</span>원</b>
</div>
<ul>
<li>
차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
<ul>
<li>
<span><b>a) 환불 금액 : 0원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
i) 일할 계산 : 다음 회차 정기 결제일에 해지되어 일할 계산할 금액이 없습니다.
</li>
<li>
<span><b>b) 중도 해지 납부 금액 : 30,000원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
i) 할인 반환금 : 15,000원 (할인 받으셨던 기간 동안의 해택 반환금)<br />
ii)중도해지 위약금 : 15,000원 (약정 기간 종료 전 해지로 인한 위약금)
</li>
<li>
<span><b>c) 총 납부하실 금액 : 15,000원</b></span>
i) 환불 금액 15,000원 - 중도 해지 납부 금액 30,000원
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.<br class="br-m" />
(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>
</ul>
</div> -->
<!--// [예약 해지] (다음 회차 정기결제 시점 해지) -->
<!--// [약정 즉시 해지](결제 7일 이내) -->
<!-- [약정 즉시 해지](결제 7일 초과) -->
<!-- <strong class="alertMessage">
<em>즉시 해지(결제 7일 초과)</em>
스트리밍 프리미엄 약정 사양<br />
구독을 해지 하시겠습니까?
</strong>
<div class="alertSubMessage">
<ul>
<li>
<span class="bu">∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</span>
</li>
<li>
<span class="bu">∙ 해지 시 과금/환불 비용 구분</span>
<ul>
<li>
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span class="bu">∙ 납부하신 당월 결제 금액은 일할 계산되어 환불 처리 됩니다</span>
<span class="bu">∙ 총 납부하실 금액은 구독 해지 즉시 결제 진행됩니다.</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">2,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span><b>1) 환불 금액 : 5,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
<span class="bu black">
i) 일할 계산 환불 금액: <br />
월 요금 - (월 요금 * (사용일수/결제월 총일수의 반올림))
</span>
</li>
<li>
<span><b>2) 중도 해지 납부 금액 : 3,000원</b> (약정 사양 중도 해지로 인한 납부 금액)</span>
<span class="bu black">i) 할인 반환금 : 1,000원 <em>(할인 받으셨던 기간 동안의 해택 반환금)</em></span>
<span class="bu black">ii) 중도해지 위약금 : 2,000원 <em>(약정 기간 종료 전 해지로 인한 위약금)</em></span>
</li>
<li>
<span
><b>2) 총 받으실 금액 : <em class="green">2,000원</em></b> (원단위 절사)</span
>
<span class="bu black">i) 환불 금액 5,000원 - 중도 해지 납부 금액 3,000원</span>
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li>
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.
<br class="br-m" />(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>
</ul>
</div> -->
<!--// [약정 즉시 해지](결제 7일 초과) -->
<!-- [약정 예약 해지] (다음 회차 정기결제 시점 해지) -->
<!-- <strong class="alertMessage">
<em>예약 해지(다음 회차 정기결제 시점 해지)</em>
스트리밍 프리미엄 약정 사양<br />
구독해지를 예약 하시겠습니까?
</strong>
<div class="alertSubMessage">
<ul>
<li>
<span class="bu">
∙ 디지털 사양 구독 해지를 예약하시면 다음 회차 정기 결제 일에 해지되며 차량에서 해당 사양의 이용이 중지됩니다.<br />
<em class="red">(2024.10.26 구독해지 예정)</em>
</span>
</li>
<li>
<span class="bu">∙ 해지 시 과금/환불 비용 구분</span>
<ul>
<li>
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span class="bu"> ∙ 다음 회차 정기 결제 일에 해지되며 환불 받으실 금액은 없습니다.</span>
<span class="bu">∙ 총 납부하실 금액은 구독 해지 예약 신청 즉시 결제 진행됩니다</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">2,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">15,000원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span><b>1) 환불 금액 : 0원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
<span class="bu black">i) 일할 계산 : 다음 회차 정기 결제일에 해지되어 일할 계산할 금액이 없습니다.</span>
</li>
<li>
<span><b>2) 중도 해지 납부 금액 : 30,000원</b> (약정 사양 중도 해지로 인한 납부 금액)</span>
<span class="bu black">i) 할인 반환금 : 15,000원</span>
<span class="bu black">ii) 중도해지 위약금 : 15,000원 <em>(약정 기간 종료 전 해지로 인한 위약금)</em></span>
</li>
<li>
<span
><b>2) 총 받으실 금액 : <em class="red">15,000원</em></b> (원단위 절사)</span
>
<span class="bu black">i) 환불 금액 5,000원 - 중도 해지 납부 금액 3,000원</span>
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li>
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.
<br class="br-m" />(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>
</ul>
</div> -->
<!--// [약정 예약 해지] (다음 회차 정기결제 시점 해지) -->
<div class="carswBtn">
<div class="towButton">
<a href="" id="alertCancel" class="cartBtn leftBtn">
<p>계속 구독하기</p>
<p>취소</p>
</a>
<a href="" id="alertCancelPremiumReservation" class="PurchaseBtn rightBtn">
<p>구독 해지</p>
<p>신청</p>
</a>
</div>
</div>

85
kr/mypage/my-product-view_popup.html
View File

@@ -45,16 +45,14 @@
gap: 10px;
}
.alertPopup .popInner {
position: relative ;
position: relative;
top: auto;
left: auto;
transform:translate(0)
transform: translate(0);
}
</style>
</head>
<body>
<!--알럿팝업-->
<!-- [S] 요금제 리스트에서 변경 또는 해지 버튼을 클릭 시 노출되는 레이어 팝업 -->
@@ -108,17 +106,7 @@
<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>
<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">
@@ -168,7 +156,7 @@
<div class="content">
<strong class="alertMessage">
<em>즉시 해지(결제 7일 이내)</em>
스트리밍 프리미엄 무약정 사양<br>구독을 해지 하시겠습니까?
스트리밍 프리미엄 무약정 사양<br />구독을 해지 하시겠습니까?
</strong>
<!-- [즉시 해지] (결제 7일 이내) -->
<div class="alertSubMessage">
@@ -178,49 +166,46 @@
∙ 해지 시 과금/환불 비용 구분<br />
<ul>
<li>
<span>가) 차량용 webOS 콘텐츠 플랫폼</span>
가입일로부터 7일 이내에 환불 요청 시, 전체 환불 처리 됩니다.
<strong>가) 차량용 webOS 콘텐츠 플랫폼</strong>
<span>가입일로부터 7일 이내에 환불 요청 시, <br class="br-m" />전체 환불 처리 됩니다.</span>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">6,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span
><b>1) 환불 금액 : 6,000원</b>
<br class="br-m" />
(잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span
>
i) 일할 계산 : 7일 이내 전체 환불
</li>
<li>
<span><b>2) 총 받으실 금액 : 6,000원</b></span>
i) 환불 금액 6,000원
</li>
</ul>
</div>
<button type="button" class="btn-detail" onclick="slideToggle(this,'.totalRefund-detail')"><em>비용 상세보기</em></button>
</div>
</li>
</ul>
</li>
</ul>
<div class="amount-box">
<div class="totalRefund">
<div class="plus"><b>총 받으실 금액 :</b> <span class="amount">6,000원</span></div>
<div class="minus"><b>총 납부하실 금액 :</b> <span class="amount">0원</span></div>
</div>
<div class="totalRefund-detail">
<ul>
<li>
<span><b>1) 환불 금액 : 6,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
i) 일할 계산 : 7일 이내 전체 환불
</li>
<li>
<span><b>2) 총 받으실 금액 : 6,000원</b></span>
i) 환불 금액 6,000원
</li>
</ul>
</div>
<button type="button" class="btn-detail">비용 상세보기</button>
</div>
<ul>
<li>
차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
<ul>
<li>
<span><b>a) 환불 금액 : 6,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
i) 일할 계산 : 7일 이내 전체 환불
</li>
<li>
<span><b>b) 중도 해지 납부 금액 : 0원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
i) 할인 반환금 : 0원 <br />
ii)중도해지 위약금 : 0원 (약정 기간 종료 전 해지로 인한 위약금)
</li>
<li>
<span><b>c) 총 받으실 금액 : 6,000원</b></span>
i) 환불 금액 6,000원 - 중도 해지 납부 금액 0원
<strong>나) 스트리밍 프리미엄 데이터 요금제</strong>
<span>
통신사 정책에 따라 사후 일할 계산됩니다.<br class="br-m" />
(문의 : 기아 커넥트 센터 1899-2121)
</span>
</li>
</ul>
</li>