[김은해] 특장점 인포그래픽 수정 - 220216

src/assets/css/seller_common.css

@@ -687,6 +687,7 @@
   width:100%;
   bottom:20px;
   font-size:1.3rem;
+  left:0;
 }
 
 .seller-tab-area .fp-item-txt.processor-txt {
@@ -749,12 +750,55 @@
   letter-spacing: -0.46px;
 }
 
+/* 추가 22.02.16 */
 .seller-tab-area .row-box {
   display:flex;
   align-items: center;
   justify-content:center;
 }
 
+.seller-tab-area .fp-item-desc.flip-display-desc {
+  padding-right:30px;
+  padding-left:30px;
+} 
+
+.seller-tab-area .row-box.flip-display {
+  max-width:280px;
+  margin:0 auto;
+}
+
+.seller-tab-area .row-box.flip-display .fp-item-txt.side-txt {
+  margin-left:auto;
+  width:60%;
+  text-align: center;
+  word-break: keep-all;
+}
+
+.seller-tab-area .row-box.flip-display .fp-item-img.side-img {
+ width:40%;
+}
+.seller-tab-area .fp-item-desc.fold-display-desc {
+  padding-right:30px;
+  padding-left:30px;
+} 
+
+.seller-tab-area .row-box.fold-display {
+  max-width:280px;
+  margin:0 auto;
+}
+
+.seller-tab-area .row-box.fold-display .fp-item-txt.side-txt {
+  margin-left:auto;
+  width:60%;
+  text-align: center;
+  word-break: keep-all;
+}
+
+.seller-tab-area .row-box.fold-display .fp-item-img.side-img {
+  width:40%;
+}
+/* /추가 22.02.16 */
+
 
 .seller-tab-area .noti {
   font-size:0.9rem;
@@ -1014,7 +1058,7 @@
 }
 
 .seller-tab-area .w66 {
-  width:63px;
+  width:66px;
 }
 
 .seller-tab-area .w63 {
@@ -1589,4 +1633,39 @@
   .product-color .color-chips .c-ick-var {
     margin-right: 8px
   }
-}
+}
\ No newline at end of file
+
+/* 갤럭시 폴드형 대응  22.02.16 */
+@media all and (max-width: 390px) {
+  .seller-tab-area .fp-item-txt.side-txt {
+    margin-left:10%;
+  }
+}
+
+@media all and (max-width: 330px) {
+  .seller-tab-area .fp-item-txt.side-txt.long-txt {
+    margin-left:4%;
+  }
+}
+
+@media all and (max-width: 310px) {
+  .seller-tab-area .fp-item-txt.side-txt {
+    margin-left:8%;
+  }
+}
+
+@media all and (max-width: 290px) {
+  .seller-tab-area .fp-item-txt.side-txt.long-txt {
+    margin-left:2%;
+  }
+
+  .seller-tab-area .fp-item-desc.flip-display-desc {
+    padding-right:20px;
+    padding-left:20px;
+  }
+
+  .seller-tab-area .fp-item-desc.fold-display-desc {
+    padding-right:20px;
+    padding-left:20px;
+  }
+}