스트리밍 프리미엄 해지 팝업 작업중

kr/assets/css/mypage.scss

@@ -4298,6 +4298,11 @@ pre {
 }
 
 .cancelPremiumPopup {
+    .popInner {
+        @include tablet {
+            width: 56rem;
+        }
+    }
     .content {
         .alertMessage {
             display: block;
@@ -4366,12 +4371,57 @@ pre {
             }
         }
 
+        .amount-box {
+            .totalRefund-detail {
+                padding: 1.6rem;
+                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;
+
+                    span {
+                        display: block;
+
+                        b {
+                            color: #000;
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
+
+            .btn-detail {
+                font-size: 1.4rem;
+                color: #676767;
+                font-weight: 400;
+                border-bottom: 1px solid #676767;
+                &:after {
+                    content:"";
+                    display: block;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    margin:0 .4rem .2rem 0;
+                    background: url('../images/common/icon-tbarrow.svg') no-repeat center / contain;
+                    
+                }
+            }
+
+        }
+
         .totalRefund {
             display: flex;
             align-items: center;
             justify-content: center;
             height: 8rem;
-            margin: 3rem 0 3.6rem;
+            margin: 3rem 0 0;
             background-color: #ececec;
             font-size: 1.6rem;
             font-weight: 400;
@@ -4383,11 +4433,46 @@ pre {
                 margin: 2rem 0;
             }
 
-            b {
-                font-weight: 400;
-
-                .minusPriceInfo {
+            > div {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                flex:1;
+                padding:0 3rem;
+                line-height: 1.5;
+                .amount {
+                    display: block;
+                    width: 100%;
+                    padding-left: 1.8rem;
                     font-weight: 600;
+                    color: #5D7D2B;
+                }
+                b {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    font-weight: 400;
+                    &:before {
+                        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;
+                    }
+                }
+
+                &.minus {
+                    border-left: 1px solid #D9D9D9;
+                    b {
+                        &:before {
+                            background: url('../images/common/icon-minus-red.png') no-repeat center / contain;
+                        }
+                    }
+                    .amount {
+                        color: #EA0029;
+                    }
                 }
             }
         }