오더 CSS 씽크 맞춤

kr/assets/css/order.scss

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 @import "utils.scss";
 /*변수파일 import*/
-
 //장바구니 레이아웃 및 요소
 .contentWarp {
   .cartView {
@@ -560,6 +559,83 @@
                 }
               }
             }
+
+            .streamingPremiumComponents {
+              background-color: #f3f3f3;
+              padding: 2rem;
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+
+              @include tablet {
+                flex-direction: row;
+                align-items: center;
+              }
+
+              .componentsTitle {
+                font-size: 1.6rem;
+                font-weight: 600;
+                color: #000000;
+
+                @include tablet {
+                  flex-basis: 30%;
+                  margin-left: 2rem;
+                  display: flex;
+                  align-items: center;
+                }
+
+                @include maxtablet {
+                  font-size: 1.4rem;
+                }
+              }
+
+              .componentsList {
+                display: flex;
+                flex-direction: column;
+                margin-top: 0.2rem;
+                width: 100%;
+
+                @include tablet {
+                  flex-basis: 70%;
+                }
+
+                @include maxtablet {
+                  margin-top: 0.8rem;
+                }
+
+                .item {
+                  padding: 0.4rem 0;
+                  display: flex;
+                  justify-content: space-between;
+                  width: 100%;
+                  position: relative;
+
+                  @include maxtablet {
+                    text-align: left;
+                  }
+
+                  .itemTitle {
+                    font-size: 1.4rem;
+                    line-height: 1.8rem;
+                    flex-basis: 55%;
+                    word-wrap: break-word;
+
+                    @include maxtablet {
+                      margin-top: 0;
+                    }
+                  }
+
+                  .itemPrice {
+                    flex-basis: 45%;
+                    text-align: right;
+
+                    @include maxtablet {
+                      align-self: flex-end;
+                    }
+                  }
+                }
+              }
+            }
           }
 
           li + li {