UIUX수정

assets/css/kia/kiamain.css

@@ -71,7 +71,7 @@
   }
 }
 .mainTopCopy .title {
-  font-size: 5.2rem;
+  font-size: 5rem;
   font-weight: 600;
   color: #000000;
   line-height: 5.8rem;
@@ -192,7 +192,7 @@
     position: relative;
     display: flex;
     width: 100%;
-    padding: 3rem;
+    padding: 3rem 2rem 2rem;
     background-size: cover;
     background-position: center;
   }
@@ -234,7 +234,8 @@
 }
 .mainProductItem .item .infoArea .infoTop .tag span {
   display: inline-block;
-  padding: 0.5rem 0.8rem;
+  height: 2.5rem;
+  padding: 0.6rem 0.8rem 0.5rem;
   border: 1px solid #9EA1A2;
   font-size: 1.3rem;
   font-weight: 400;
@@ -246,28 +247,22 @@
 }
 @media (max-width: 1024px) {
   .mainProductItem .item .infoArea .infoTop .tag span {
+    height: 2.3rem;
+    padding: 0.6rem 0.6rem 0.5rem;
     font-size: 1.1rem;
-    color: #FFFFFF;
-    border: 1px solid #FFFFFF;
+    color: #fff;
+    border: 1px solid #fff;
   }
 }
 .mainProductItem .item .infoArea .infoTop .tag span.available {
   background-color: #5D7D2B;
   color: #fff;
-}
-@media (max-width: 1024px) {
-  .mainProductItem .item .infoArea .infoTop .tag span.available {
-    border: 0;
-  }
+  border-color: #5D7D2B;
 }
 .mainProductItem .item .infoArea .infoTop .tag span.promotion {
   background-color: #F3C300;
   color: #000;
-}
-@media (max-width: 1024px) {
-  .mainProductItem .item .infoArea .infoTop .tag span.promotion {
-    border: 0;
-  }
+  border-color: #F3C300;
 }
 .mainProductItem .item .infoArea .infoTop h2 {
   width: 100%;
@@ -334,6 +329,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
+  min-width: 16rem;
   height: 9.2rem;
   padding: 1.6rem;
   background-color: #F2F2F2;
@@ -346,7 +342,7 @@
     align-items: center;
     width: 100%;
     height: 4.8rem;
-    padding: 1rem 1.6rem;
+    padding: 0 1.6rem;
   }
   .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
     margin-top: 1rem;
@@ -360,8 +356,9 @@
 @media (max-width: 1024px) {
   .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dt {
     position: relative;
-    font-size: 1.4rem;
+    font-size: 1.1rem;
     color: #000;
+    font-weight: 400;
     margin-left: 0;
     padding-left: 0;
   }
@@ -385,6 +382,7 @@
 @media (max-width: 1024px) {
   .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .price {
     display: flex;
+    align-items: center;
   }
   .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .price em {
     order: 2;
@@ -404,7 +402,8 @@
 @media (max-width: 1024px) {
   .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount {
     width: 100%;
-    margin: 0.2rem 0 0;
+    margin: 0 0 0;
+    font-size: 0.9rem;
     color: #9EA1A2;
     text-align: right;
   }
@@ -416,10 +415,20 @@
   font-weight: 400;
   text-decoration: line-through;
 }
+@media (min-width: 1025px) {
+  .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount i {
+    font-size: 1.2rem;
+  }
+}
 .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .dc {
-  font-size: 1.4rem;
+  font-size: 1.1rem;
   color: #EA0029;
 }
+@media (min-width: 1025px) {
+  .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .dc {
+    font-size: 1.4rem;
+  }
+}
 .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
   margin-left: 0.8rem;
 }
@@ -1416,21 +1425,27 @@
 }
 
 .specNoti {
-  display: flex;
-  align-items: center;
-  max-width: 120rem;
-  height: 6.5rem;
-  padding: 0 2.4rem;
-  margin: 6rem auto -3rem;
+  display: block;
+  padding: 1.2rem;
+  margin: -2rem 2rem 2rem;
+  font-size: 1.4rem;
+  line-height: 2.2rem;
   background-color: #f1f1f1;
+  border-radius: 0.6rem;
 }
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .specNoti {
-    display: block;
-    padding: 1.2rem;
+    display: flex;
+    align-items: center;
+    height: 6.5rem;
+    max-width: 120rem;
+    padding: 0 2.4rem;
     margin: -2rem 2rem 2rem;
-    font-size: 1.4rem;
-    line-height: 2.2rem;
+  }
+}
+@media (min-width: 1025px) {
+  .specNoti {
+    margin: 6rem auto -3rem;
   }
 }
 .specNoti .tag {