[기능] CLAUDE.md 파일 추가 및 package.json, package-lock.json 생성

kr/assets/css/kia/kiamain.css

@@ -9,14 +9,6 @@
 /*반응형, 브라우저 크기가 1204px 이상일때*/
 /*넓이, 높이 자동 계산함수*/
 /*변수파일 import*/
-@-webkit-keyframes fadein {
-  from {
-    opacity: 0.9;
-  }
-  to {
-    opacity: 1;
-  }
-}
 @keyframes fadein {
   from {
     opacity: 0.9;
@@ -36,22 +28,22 @@
 .mainContentsWrap {
   width: 100%;
   margin: 0 auto;
-  margin-top: 59rem;
+  margin-top: 68rem;
   z-index: 1;
 }
 @media (min-width: 768px) {
   .mainContentsWrap {
-    margin-top: 59rem;
+    margin-top: 65rem;
   }
 }
 @media (min-width: 1025px) {
   .mainContentsWrap {
-    margin-top: 64rem;
+    margin-top: 72rem;
   }
 }
 @media (min-width: 1240px) {
   .mainContentsWrap {
-    margin-top: 76.8rem;
+    margin-top: 84.8rem;
   }
 }
 
@@ -143,7 +135,7 @@
   height: 35rem;
   overflow: hidden;
   margin: 0 auto;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 0.6rem;
 }
 @media (max-width: 1024px) {
@@ -236,7 +228,7 @@
   display: inline-block;
   height: 2.5rem;
   padding: 0.6rem 0.8rem 0.5rem;
-  border: 1px solid #9EA1A2;
+  border: 1px solid #9ea1a2;
   font-size: 1.3rem;
   font-weight: 400;
   color: #000;
@@ -255,14 +247,14 @@
   }
 }
 .mainProductItem .item .infoArea .infoTop .tag span.available {
-  background-color: #5D7D2B;
+  background-color: #5d7d2b;
   color: #fff;
-  border-color: #5D7D2B;
+  border-color: #5d7d2b;
 }
 .mainProductItem .item .infoArea .infoTop .tag span.promotion {
-  background-color: #F3C300;
+  background-color: #f3c300;
   color: #000;
-  border-color: #F3C300;
+  border-color: #f3c300;
 }
 .mainProductItem .item .infoArea .infoTop h2 {
   width: 100%;
@@ -278,7 +270,7 @@
 }
 @media (max-width: 1024px) {
   .mainProductItem .item .infoArea .infoTop h2 {
-    color: #FFFFFF;
+    color: #ffffff;
     font-size: 3rem;
   }
 }
@@ -332,7 +324,7 @@
   min-width: 16rem;
   height: 9.2rem;
   padding: 1.6rem;
-  background-color: #F2F2F2;
+  background-color: #f2f2f2;
   border-radius: 0.6rem;
 }
 @media (max-width: 1024px) {
@@ -396,7 +388,7 @@
   display: block;
   margin: 0.6rem 0 0;
   font-size: 1.4rem;
-  color: #9EA1A2;
+  color: #9ea1a2;
   text-align: left;
 }
 @media (max-width: 1024px) {
@@ -404,31 +396,33 @@
     width: 100%;
     margin: 0 0 0;
     font-size: 0.9rem;
-    color: #9EA1A2;
+    color: #9ea1a2;
     text-align: right;
   }
 }
 .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount b {
   font-weight: 600;
 }
-.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount i {
-  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 .discount i {
+  font-weight: 400;
+  text-decoration: line-through;
+}
 .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .dc {
   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 dd .dc {
+  color: #ea0029;
+}
 .mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
   margin-left: 0.8rem;
 }
@@ -497,8 +491,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 @media (max-width: 768px) {
   .mainBannerArea .mainBannerImageArea .mainBannerPC {
@@ -513,8 +506,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .mainBannerArea .mainBannerInfo {
@@ -589,7 +581,7 @@
 .mainTopKey {
   width: 100%;
   position: absolute;
-  top: 0;
+  top: 10.6rem;
   left: 50%;
   transform: translate(-50%, 0);
 }
@@ -598,6 +590,11 @@
     max-width: 192rem;
   }
 }
+@media (min-width: 768px) {
+  .mainTopKey {
+    top: 8rem;
+  }
+}
 .mainTopKey .mainSwiper {
   max-width: 192rem;
   width: 100%;
@@ -628,13 +625,13 @@
   display: block;
   position: absolute;
   width: 100%;
-  height: 8rem;
+  height: 24rem;
   top: 0;
-  background: linear-gradient(180deg, rgba(5, 20, 31, 0.8) 0%, rgba(5, 20, 31, 0) 100%);
+  background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
   z-index: 2;
 }
 .mainTopKey .mainSwiper ul li {
-  displaY: flex;
+  display: flex;
   align-items: center;
   height: 59rem;
   background-size: cover;
@@ -688,7 +685,7 @@
 }
 .mainTopKey .mainSwiper ul li .mainText p strong,
 .mainTopKey .mainSwiper ul li .mainText p span {
-  displaY: block;
+  display: block;
   width: 100%;
   color: #fff;
   line-height: 1.1;
@@ -720,8 +717,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   overflow: hidden;
 }
 .mainTopKey .mainSwiper ul li .imageArea.mainKvImagePc {
@@ -742,8 +738,7 @@
 }
 .mainTopKey .mainSwiper ul li .imageArea img {
   width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .mainTopKey .mainSwiper .swiper-pagination {
   bottom: 3rem;
@@ -854,8 +849,6 @@
 }
 @media (min-width: 1025px) {
   .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
     width: fit-content;
   }
 }
@@ -874,16 +867,14 @@
   }
 }
 .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span {
-  color: #F3C300;
+  color: #f3c300;
   font-weight: 400;
-  displaY: flex;
+  display: flex;
   width: auto;
   min-width: 2.2rem;
 }
 @media (min-width: 1025px) {
   .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
     width: fit-content;
   }
 }
@@ -892,22 +883,20 @@
 }
 @media (min-width: 1025px) {
   .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
     width: fit-content;
   }
 }
 .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span::before {
   content: "";
-  displaY: block;
+  display: block;
   width: 1px;
   height: 1.4rem;
-  background-color: #DEDEDE;
+  background-color: #dedede;
   margin-left: 1rem;
   margin-right: 1rem;
 }
 .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem {
-  displaY: flex;
+  display: flex;
   height: 5rem;
   font-size: 1.4rem;
   align-items: center;
@@ -918,7 +907,7 @@
   content: "";
   width: 2.5rem;
   height: 0.8rem;
-  displaY: block;
+  display: block;
   background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
   background-size: 1.2rem;
 }
@@ -948,8 +937,6 @@
 @media (min-width: 1025px) {
   .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem {
     top: 8.7rem;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
     width: fit-content;
     left: auto;
     right: 0;
@@ -970,7 +957,7 @@
   .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem .boxBullet {
     width: 1.4rem;
     height: 1rem;
-    displaY: block;
+    display: block;
     position: absolute;
     top: -0.9rem;
     left: 73%;
@@ -989,7 +976,7 @@
   display: block;
   padding: 2rem;
   background-color: #fff;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
 }
 .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a {
   display: flex;
@@ -1000,11 +987,9 @@
   color: #000;
 }
 .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a span {
-  color: #9EA1A2;
+  color: #9ea1a2;
   font-weight: 400;
-  displaY: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
+  display: flex;
   width: fit-content;
 }
 .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li + li {
@@ -1019,8 +1004,6 @@
 }
 @media (min-width: 1025px) {
   .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
     width: fit-content;
   }
 }
@@ -1062,7 +1045,8 @@
     display: block;
   }
 }
-.mainProductList .mainContensTitle h1, .mainProductList .mainContensTitle p {
+.mainProductList .mainContensTitle h1,
+.mainProductList .mainContensTitle p {
   text-align: center;
 }
 .mainProductList .mainContensTitle h1 {
@@ -1227,15 +1211,17 @@
   margin-top: 3rem;
 }
 .mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl {
-  displaY: flex;
+  display: flex;
   text-align: left;
 }
-.mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dt, .mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dd {
+.mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dt,
+.mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dd {
   color: #fff;
   font-size: 1.4rem;
 }
 @media (min-width: 1025px) {
-  .mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dt, .mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dd {
+  .mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dt,
+  .mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dd {
     font-size: 1.6rem;
   }
 }
@@ -1276,16 +1262,15 @@
 }
 .mainProductList .mainProductInner ul li a:hover::before {
   content: "";
-  -webkit-animation: fadein 1s;
-          animation: fadein 1s;
+  animation: fadein 1s;
   background-image: url(/kr/assets/images/kia/producy-on.png);
   z-index: 1;
   background-size: cover;
 }
-.mainProductList .mainProductInner ul li a:hover .descript, .mainProductList .mainProductInner ul li a:hover .listImgBtn {
-  displaY: block;
-  -webkit-animation: fadein 1s;
-          animation: fadein 1s;
+.mainProductList .mainProductInner ul li a:hover .descript,
+.mainProductList .mainProductInner ul li a:hover .listImgBtn {
+  display: block;
+  animation: fadein 1s;
 }
 
 .mainSevice {
@@ -1329,7 +1314,7 @@
   }
 }
 .mainSevice .left span {
-  color: #05141F;
+  color: #05141f;
   font-size: 1.6rem;
 }
 .mainSevice .left h2 {
@@ -1362,7 +1347,7 @@
   height: 14rem;
   padding: 3rem;
   border-radius: 0.6rem;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   color: #000000;
 }
 @media (min-width: 768px) {
@@ -1376,23 +1361,26 @@
   }
 }
 .mainSevice .right a:hover {
-  border: 1px solid #05141F;
+  border: 1px solid #05141f;
 }
-.mainSevice .right a .faq, .mainSevice .right a .cs {
+.mainSevice .right a .faq,
+.mainSevice .right a .cs {
   display: flex;
   height: 100%;
   flex-direction: column;
   justify-content: space-between;
 }
-.mainSevice .right a .faq span, .mainSevice .right a .cs span {
+.mainSevice .right a .faq span,
+.mainSevice .right a .cs span {
   position: relative;
-  displaY: block;
+  display: block;
 }
-.mainSevice .right a .faq span::after, .mainSevice .right a .cs span::after {
+.mainSevice .right a .faq span::after,
+.mainSevice .right a .cs span::after {
   content: "";
   position: absolute;
   right: 0;
-  displaY: inline-block;
+  display: inline-block;
   width: 0.8rem;
   height: 1.6rem;
   background-size: contain;
@@ -1400,7 +1388,8 @@
   background-position: center right;
   background-image: url(/kr/assets/images/common/icon-bgo.svg);
 }
-.mainSevice .right a .faq::before, .mainSevice .right a .cs::before {
+.mainSevice .right a .faq::before,
+.mainSevice .right a .cs::before {
   content: "";
   display: block;
   width: 4.5rem;
@@ -1452,12 +1441,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem 0.8rem;
+  padding: 0.6rem 0.8rem 0.5rem;
   margin: 0 0.4rem 0 0.6rem;
-  border: 1px solid #9EA1A2;
+  border: 1px solid #9ea1a2;
   font-size: 1.3rem;
   font-weight: 400;
-  color: #9EA1A2;
+  color: #9ea1a2;
   line-height: 1;
 }
 @media (max-width: 768px) {
@@ -1465,16 +1454,19 @@
     display: inline-flex;
     margin-left: 0;
     font-size: 1.1rem;
-    color: #FFFFFF;
-    border: 1px solid #FFFFFF;
+    color: #ffffff;
+    border: 1px solid #ffffff;
   }
 }
 .specNoti .tag.available {
-  background-color: #5D7D2B;
+  background-color: #5d7d2b;
   color: #fff;
+  border: 0;
 }
 .specNoti .tag.promotion {
-  background-color: #F3C300;
+  background-color: #f3c300;
   color: #000;
+  border: 0;
 }
-/*# sourceMappingURL=kiamain.css.map */
+
+/*# sourceMappingURL=kiamain.css.map */