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 */