1120사이즈 UIUX수정

assets/css/common.css

@@ -638,6 +638,9 @@ video::-webkit-media-controls {
 .hederWarp.hBoder {
   border-bottom: 1px solid #dedede;
 }
+.hederWarp.hBoder.menu-open .user .icon-user {
+  background-image: url(../images/common/icon-user.svg);
+}
 
 .hederWarp_n {
   position: relative;
@@ -646,33 +649,26 @@ video::-webkit-media-controls {
   overflow-x: clip;
   background-color: transparent;
 }
-.hederWarp_n::before {
-  opacity: 1;
-  transition: opacity 0.1s ease-in-out;
-}
 @media (max-width: 1240px) {
   .hederWarp_n {
-    padding: 0 2rem;
+    padding: 0 1.5rem;
   }
 }
-.hederWarp_n.menu-open {
+.hederWarp_n.menu-open ~ .pageTitle {
-  background-color: #fff;
-}
-.hederWarp_n.menu-open:before {
-  opacity: 0 !important;
-}
-.hederWarp_n.menu-open + .pageTitle {
   z-index: 0 !important;
 }
+.hederWarp_n.menu-open ~ .contentWarp {
+  z-index: 0 !important;
+}
+.hederWarp_n.menu-open .user .icon-user {
+  background-image: url(../images/common/icon-user.svg) !important;
+}
 .hederWarp_n.menu-open .headerInner .gnb .logoWrap a {
   color: #05141f;
 }
 .hederWarp_n.menu-open .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
   color: #05141f;
 }
-.hederWarp_n.menu-open .headerInner .gnb .menuWarp .menuBg {
-  opacity: 1;
-}
 .hederWarp_n.menu-open .headerInner .func .carlist .carItem span {
   color: #05141f;
 }
@@ -697,7 +693,7 @@ video::-webkit-media-controls {
 .hederWarp_n.menu-open .headerInner .func .userLogin > a:hover {
   border: 1px solid rgb(5, 20, 31);
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .top-line {
     background-color: #000;
   }
@@ -705,6 +701,11 @@ video::-webkit-media-controls {
     background-color: #000;
   }
 }
+@media (min-width: 1120px) {
+  .hederWarp_n.menu-open .headerInner .menuBg::after {
+    opacity: 1;
+  }
+}
 .hederWarp_n .headerInner {
   display: flex;
   justify-content: space-between;
@@ -713,20 +714,47 @@ video::-webkit-media-controls {
   height: 8rem;
   margin: 0 auto;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner {
     height: 5.6rem;
   }
 }
+.hederWarp_n .headerInner .menuBg {
+  display: none;
+}
+@media (min-width: 1120px) {
+  .hederWarp_n .headerInner .menuBg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    background-color: #fff;
+    transition: height 0.2s;
+  }
+  .hederWarp_n .headerInner .menuBg::after {
+    content: "";
+    position: absolute;
+    top: 80px;
+    left: 0;
+    right: 0;
+    border-top: 1px solid #dedede;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+}
 .hederWarp_n .headerInner .gnb {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
 .hederWarp_n .headerInner .gnb .logoWrap {
-  z-index: 0;
+  position: relative;
+  z-index: 2;
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .logoWrap {
     display: flex;
     align-items: center;
@@ -747,13 +775,13 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .logoWrap a span {
   margin-left: 1rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .logoWrap a span {
     font-size: 1.5rem;
     margin-top: 0.4rem;
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp {
     position: fixed;
     top: 0;
@@ -775,7 +803,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop {
     display: flex;
     justify-content: space-between;
@@ -814,7 +842,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
     display: flex;
     width: 100%;
@@ -848,7 +876,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist {
     display: block;
     position: relative;
@@ -874,10 +902,12 @@ video::-webkit-media-controls {
     font-size: 1.4rem;
     font-weight: 600;
     display: flex;
+    align-items: center;
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
     min-width: 2.2rem;
+    word-break: break-word;
   }
   .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span {
     color: #676767;
@@ -949,28 +979,17 @@ video::-webkit-media-controls {
     margin-top: 1rem;
   }
 }
-.hederWarp_n .headerInner .gnb .menuWarp .menuBg {
-  transition: all 0.1s ease;
-  background-color: #fff;
-}
-@media (min-width: 1024px) {
-  .hederWarp_n .headerInner .gnb .menuWarp .menuBg {
-    display: block;
-    position: absolute;
-    top: 8rem;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    height: 0;
-    opacity: 0;
-    border-top: 1px solid #DEDEDE;
-  }
-}
 .hederWarp_n .headerInner .gnb .menuWarp .menu {
   display: flex;
   margin-left: 4.5rem;
+  transition: margin-left 0.2s ease-in-out;
 }
-@media (min-width: 1024px) {
+@media (max-width: 1220px) {
+  .hederWarp_n .headerInner .gnb .menuWarp .menu {
+    margin-left: 2rem;
+  }
+}
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap.info {
     display: block;
     width: 27rem;
@@ -979,28 +998,28 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap h3 {
   margin-bottom: 2.8rem;
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(1) .menuDepth2Wrap {
-    left: -15.6rem;
+    left: -11.6rem;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(2) .menuDepth2Wrap {
-    left: 3.4rem;
+    left: 5.4rem;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(3) .menuDepth2Wrap {
-    left: 19.6rem;
+    left: 21.6rem;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(4) .menuDepth2Wrap {
     display: block;
-    left: 28.4rem;
+    left: 30.4rem;
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu {
     display: block;
     margin-left: 0;
@@ -1014,7 +1033,7 @@ video::-webkit-media-controls {
   position: relative;
   z-index: 2;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap {
     padding: 0 2rem;
   }
@@ -1028,8 +1047,14 @@ video::-webkit-media-controls {
   font-size: 1.6rem;
   font-weight: 600;
   color: #ffffff;
+  white-space: nowrap;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1220px) {
+  .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
+    padding: 0 1.25rem;
+  }
+}
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
     position: relative;
     justify-content: flex-start;
@@ -1076,7 +1101,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap h3 a {
   color: #000;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
     position: initial;
     width: 100%;
@@ -1094,7 +1119,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
   width: 14rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
     width: 100%;
   }
@@ -1102,7 +1127,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support {
   width: 16rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support {
     width: 100%;
   }
@@ -1132,7 +1157,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a:hover {
   color: #05141f;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a {
     padding: 0.6rem 0;
   }
@@ -1140,7 +1165,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
     display: flex;
     position: absolute;
@@ -1162,7 +1187,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
     position: absolute;
     bottom: 2rem;
@@ -1174,12 +1199,20 @@ video::-webkit-media-controls {
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  position: relative;
+  z-index: 2;
 }
 .hederWarp_n .headerInner .func .carlist {
   position: relative;
-  margin-right: 2.5rem;
+  margin-right: 2rem;
+  transition: all 0.2s ease-in-out;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1220px) {
+  .hederWarp_n .headerInner .func .carlist {
+    margin-right: 1.5rem;
+  }
+}
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .carlist {
     display: none;
   }
@@ -1190,7 +1223,7 @@ video::-webkit-media-controls {
 }
 .hederWarp_n .headerInner .func .carlist .carItem {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   height: 8rem;
 }
@@ -1207,6 +1240,10 @@ video::-webkit-media-controls {
   border: none;
   outline: none;
 }
+.hederWarp_n .headerInner .func .carlist .carItem.on::after {
+  transform: rotate(-180deg);
+  background-position-x: left;
+}
 .hederWarp_n .headerInner .func .carlist .carItem.on .carlistItem {
   display: block;
 }
@@ -1218,7 +1255,7 @@ video::-webkit-media-controls {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
-  min-width: 2.2rem;
+  white-space: nowrap;
 }
 .hederWarp_n .headerInner .func .carlist .carItem span + span::before {
   content: "";
@@ -1296,7 +1333,7 @@ video::-webkit-media-controls {
   display: block;
   margin-right: 2rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .userLogin {
     display: none;
   }
@@ -1317,9 +1354,9 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .func .user {
   position: relative;
   display: block;
-  margin-right: 2rem;
+  margin-right: 0;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .user {
     display: none;
   }
@@ -1391,7 +1428,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .func .moblieMenu {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .moblieMenu {
     display: flex;
     justify-content: center;
@@ -1447,6 +1484,11 @@ video::-webkit-media-controls {
   background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
   background-size: 1.2rem;
 }
+.hederWarp_n.noBoder .headerInner .func .carlist .carItem.on::after,
+.hederWarp_n.hBoder .headerInner .func .carlist .carItem.on::after {
+  transform: rotate(-180deg);
+  background-position-x: left;
+}
 .hederWarp_n.noBoder .headerInner .func .carlist.on a::after,
 .hederWarp_n.hBoder .headerInner .func .carlist.on a::after {
   transform: rotate(-180deg);
@@ -1462,7 +1504,7 @@ video::-webkit-media-controls {
 .hederWarp_n.hBoder .headerInner .func .userLogin > a:hover {
   border: 1px solid rgb(5, 20, 31);
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n.noBoder .headerInner .func .moblieMenu .burgur .top-line,
 .hederWarp_n.hBoder .headerInner .func .moblieMenu .burgur .top-line {
     background-color: #000;
@@ -3826,7 +3868,7 @@ video::-webkit-media-controls {
     width: calc(100% - 4rem);
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .installInfoPopup .popInner {
     padding: 3rem 3rem;
   }

assets/css/kia.css

@@ -388,11 +388,13 @@ html .hederWarp_n .headerInner .gnb .logoWrap a .logoImg {
   height: 1.5rem;
   background-image: url(../../images/kia/kia-logo-n.svg);
   background-repeat: no-repeat;
+  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
 }
 @media (min-width: 1025px) {
   html .hederWarp_n .headerInner .gnb .logoWrap a .logoImg {
     height: 2rem;
     width: 22.8rem;
+    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
   }
 }
 html .hederWarp_n.menu-open .headerInner .gnb .logoWrap a .logoImg {

kr/assets/css/common.css

@@ -651,10 +651,13 @@ video::-webkit-media-controls {
 }
 @media (max-width: 1240px) {
   .hederWarp_n {
-    padding: 0 2rem;
+    padding: 0 1.5rem;
   }
 }
-.hederWarp_n.menu-open + .pageTitle {
+.hederWarp_n.menu-open ~ .pageTitle {
+  z-index: 0 !important;
+}
+.hederWarp_n.menu-open ~ .contentWarp {
   z-index: 0 !important;
 }
 .hederWarp_n.menu-open .user .icon-user {
@@ -690,7 +693,7 @@ video::-webkit-media-controls {
 .hederWarp_n.menu-open .headerInner .func .userLogin > a:hover {
   border: 1px solid rgb(5, 20, 31);
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .top-line {
     background-color: #000;
   }
@@ -698,7 +701,7 @@ video::-webkit-media-controls {
     background-color: #000;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n.menu-open .headerInner .menuBg::after {
     opacity: 1;
   }
@@ -711,7 +714,7 @@ video::-webkit-media-controls {
   height: 8rem;
   margin: 0 auto;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner {
     height: 5.6rem;
   }
@@ -719,7 +722,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .menuBg {
   display: none;
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .menuBg {
     display: block;
     position: absolute;
@@ -751,7 +754,7 @@ video::-webkit-media-controls {
   position: relative;
   z-index: 2;
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .logoWrap {
     display: flex;
     align-items: center;
@@ -772,13 +775,13 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .logoWrap a span {
   margin-left: 1rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .logoWrap a span {
     font-size: 1.5rem;
     margin-top: 0.4rem;
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp {
     position: fixed;
     top: 0;
@@ -800,7 +803,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop {
     display: flex;
     justify-content: space-between;
@@ -839,7 +842,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
     display: flex;
     width: 100%;
@@ -873,7 +876,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist {
     display: block;
     position: relative;
@@ -899,10 +902,12 @@ video::-webkit-media-controls {
     font-size: 1.4rem;
     font-weight: 600;
     display: flex;
+    align-items: center;
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
     min-width: 2.2rem;
+    word-break: break-word;
   }
   .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span {
     color: #676767;
@@ -977,8 +982,14 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu {
   display: flex;
   margin-left: 4.5rem;
+  transition: margin-left 0.2s ease-in-out;
 }
-@media (min-width: 1024px) {
+@media (max-width: 1220px) {
+  .hederWarp_n .headerInner .gnb .menuWarp .menu {
+    margin-left: 2rem;
+  }
+}
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap.info {
     display: block;
     width: 27rem;
@@ -987,28 +998,28 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap h3 {
   margin-bottom: 2.8rem;
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(1) .menuDepth2Wrap {
-    left: -15.6rem;
+    left: -11.6rem;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(2) .menuDepth2Wrap {
-    left: 3.4rem;
+    left: 5.4rem;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(3) .menuDepth2Wrap {
-    left: 19.6rem;
+    left: 21.6rem;
   }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(4) .menuDepth2Wrap {
     display: block;
-    left: 28.4rem;
+    left: 30.4rem;
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu {
     display: block;
     margin-left: 0;
@@ -1022,7 +1033,7 @@ video::-webkit-media-controls {
   position: relative;
   z-index: 2;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap {
     padding: 0 2rem;
   }
@@ -1036,8 +1047,14 @@ video::-webkit-media-controls {
   font-size: 1.6rem;
   font-weight: 600;
   color: #ffffff;
+  white-space: nowrap;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1220px) {
+  .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
+    padding: 0 1.25rem;
+  }
+}
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
     position: relative;
     justify-content: flex-start;
@@ -1084,7 +1101,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap h3 a {
   color: #000;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
     position: initial;
     width: 100%;
@@ -1102,7 +1119,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
   width: 14rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
     width: 100%;
   }
@@ -1110,7 +1127,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support {
   width: 16rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support {
     width: 100%;
   }
@@ -1140,7 +1157,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a:hover {
   color: #05141f;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a {
     padding: 0.6rem 0;
   }
@@ -1148,7 +1165,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
     display: flex;
     position: absolute;
@@ -1170,7 +1187,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
     position: absolute;
     bottom: 2rem;
@@ -1187,9 +1204,15 @@ video::-webkit-media-controls {
 }
 .hederWarp_n .headerInner .func .carlist {
   position: relative;
-  margin-right: 2.5rem;
+  margin-right: 2rem;
+  transition: all 0.2s ease-in-out;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1220px) {
+  .hederWarp_n .headerInner .func .carlist {
+    margin-right: 1.5rem;
+  }
+}
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .carlist {
     display: none;
   }
@@ -1200,7 +1223,7 @@ video::-webkit-media-controls {
 }
 .hederWarp_n .headerInner .func .carlist .carItem {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   height: 8rem;
 }
@@ -1232,7 +1255,7 @@ video::-webkit-media-controls {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
-  min-width: 2.2rem;
+  white-space: nowrap;
 }
 .hederWarp_n .headerInner .func .carlist .carItem span + span::before {
   content: "";
@@ -1310,7 +1333,7 @@ video::-webkit-media-controls {
   display: block;
   margin-right: 2rem;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .userLogin {
     display: none;
   }
@@ -1331,9 +1354,9 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .func .user {
   position: relative;
   display: block;
-  margin-right: 2rem;
+  margin-right: 0;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .user {
     display: none;
   }
@@ -1405,7 +1428,7 @@ video::-webkit-media-controls {
 .hederWarp_n .headerInner .func .moblieMenu {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n .headerInner .func .moblieMenu {
     display: flex;
     justify-content: center;
@@ -1481,7 +1504,7 @@ video::-webkit-media-controls {
 .hederWarp_n.hBoder .headerInner .func .userLogin > a:hover {
   border: 1px solid rgb(5, 20, 31);
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .hederWarp_n.noBoder .headerInner .func .moblieMenu .burgur .top-line,
 .hederWarp_n.hBoder .headerInner .func .moblieMenu .burgur .top-line {
     background-color: #000;
@@ -3845,7 +3868,7 @@ video::-webkit-media-controls {
     width: calc(100% - 4rem);
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1120px) {
   .installInfoPopup .popInner {
     padding: 3rem 3rem;
   }

kr/assets/css/common.scss

@@ -733,14 +733,17 @@ video::-webkit-media-controls {
     background-color: transparent;
 
     @media (max-width: 1240px) {
-        padding: 0 2rem;
+        padding: 0 1.5rem;
     }
 
-    @media (max-width: 1024px) {
+    @media (max-width: 1120px) {
         // height: 5.6rem;
     }
     &.menu-open {
-        &+.pageTitle {
+        &~.pageTitle {
+            z-index: 0 !important;
+        }
+        &~.contentWarp {
             z-index: 0 !important;
         }
         .user .icon-user {
@@ -809,7 +812,7 @@ video::-webkit-media-controls {
                 }
 
                 .moblieMenu {
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         .burgur .top-line {
                             background-color: #000;
                         }
@@ -822,7 +825,7 @@ video::-webkit-media-controls {
             }
 
             .menuBg {
-                @media (min-width: 1024px) {
+                @media (min-width: 1120px) {
                     &::after{
                         opacity: 1;
                     }
@@ -844,13 +847,13 @@ video::-webkit-media-controls {
         margin: 0 auto;
         
 
-        @media (max-width: 1024px) {
+        @media (max-width: 1120px) {
             height: 5.6rem;
         }
 
         .menuBg {
             display: none;
-            @media (min-width: 1024px) {
+            @media (min-width: 1120px) {
                 display: block;
                 position: absolute;
                 top: 0;
@@ -881,7 +884,7 @@ video::-webkit-media-controls {
             .logoWrap {
                 position: relative;
                 z-index: 2;
-                @media (min-width: 1024px) {
+                @media (min-width: 1120px) {
                     display: flex;
                     align-items: center;
                     height: 8rem;
@@ -902,7 +905,7 @@ video::-webkit-media-controls {
                     span {
                         margin-left: 1rem;
 
-                        @media (max-width: 1024px) {
+                        @media (max-width: 1120px) {
                             font-size: 1.5rem;
                             margin-top: 0.4rem;
                         }
@@ -911,7 +914,7 @@ video::-webkit-media-controls {
             }
 
             .menuWarp {
-                @media (max-width: 1024px) {
+                @media (max-width: 1120px) {
                     position: fixed;
                     top: 0;
                     bottom: 0;
@@ -932,7 +935,7 @@ video::-webkit-media-controls {
                 .mobileMenuTop {
                     display: none;
 
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
@@ -979,7 +982,7 @@ video::-webkit-media-controls {
                 .mobileFunc {
                     display: none;
 
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         display: flex;
                         width: 100%;
 
@@ -1016,7 +1019,7 @@ video::-webkit-media-controls {
                 .mobileCarlist {
                     display: none;
 
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         display: block;
                         position: relative;
 
@@ -1042,8 +1045,10 @@ video::-webkit-media-controls {
                                     font-size: 1.4rem;
                                     font-weight: 600;
                                     display: flex;
+                                    align-items: center;
                                     width: fit-content;
                                     min-width: 2.2rem;
+                                    word-break: break-word;
                                 }
 
                                 span+span {
@@ -1136,11 +1141,15 @@ video::-webkit-media-controls {
                 .menu {
                     display: flex;
                     margin-left: 4.5rem;
+                    transition: margin-left 0.2s ease-in-out;
+                    @media (max-width: 1220px) {
+                        margin-left: 2rem;
+                    }
                     &.open {
                         li {
                             .menuDepth2Wrap {
                                 &.info {
-                                    @media (min-width: 1024px) {
+                                    @media (min-width: 1120px) {
                                         display: block;
                                         width: 27rem;
                                     }
@@ -1154,39 +1163,39 @@ video::-webkit-media-controls {
 
                         li:nth-child(1) {
                             .menuDepth2Wrap {
-                                @media (min-width: 1024px) {
+                                @media (min-width: 1120px) {
-                                    left: -15.6rem;
+                                    left: -11.6rem;
                                 }
                             }
                         }
 
                         li:nth-child(2) {
                             .menuDepth2Wrap {
-                                @media (min-width: 1024px) {
+                                @media (min-width: 1120px) {
-                                    left: 3.4rem;
+                                    left: 5.4rem;
                                 }
                             }
                         }
 
                         li:nth-child(3) {
                             .menuDepth2Wrap {
-                                @media (min-width: 1024px) {
+                                @media (min-width: 1120px) {
-                                    left: 19.6rem;
+                                    left: 21.6rem;
                                 }
                             }
                         }
 
                         li:nth-child(4) {
                             .menuDepth2Wrap {
-                                @media (min-width: 1024px) {
+                                @media (min-width: 1120px) {
                                     display: block;
-                                    left: 28.4rem;
+                                    left: 30.4rem;
                                 }
                             }
                         }
                     }
 
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         display: block;
                         margin-left: 0;
                         margin-top: 2rem;
@@ -1199,7 +1208,7 @@ video::-webkit-media-controls {
                         position: relative;
                         z-index: 2;
 
-                        @media (max-width: 1024px) {
+                        @media (max-width: 1120px) {
                             padding: 0 2rem;
                         }
 
@@ -1212,8 +1221,13 @@ video::-webkit-media-controls {
                             font-size: 1.6rem;
                             font-weight: 600;
                             color: #ffffff;
+                            white-space: nowrap;
 
-                            @media (max-width: 1024px) {
+                            @media (max-width: 1220px) {
+                                padding: 0 1.25rem;
+                            }
+
+                            @media (max-width: 1120px) {
                                 position: relative;
                                 justify-content: flex-start;
                                 height: initial;
@@ -1271,7 +1285,7 @@ video::-webkit-media-controls {
                                 }
                             }
 
-                            @media (max-width: 1024px) {
+                            @media (max-width: 1120px) {
                                 position: initial;
                                 width: 100%;
                                 transform: initial;
@@ -1290,7 +1304,7 @@ video::-webkit-media-controls {
                             &.info {
                                 width: 14rem;
 
-                                @media (max-width: 1024px) {
+                                @media (max-width: 1120px) {
                                     width: 100%;
                                 }
                             }
@@ -1298,7 +1312,7 @@ video::-webkit-media-controls {
                             &.support {
                                 width: 16rem;
 
-                                @media (max-width: 1024px) {
+                                @media (max-width: 1120px) {
                                     width: 100%;
                                 }
                             }
@@ -1333,7 +1347,7 @@ video::-webkit-media-controls {
                                             color: #05141f;
                                         }
 
-                                        @media (max-width: 1024px) {
+                                        @media (max-width: 1120px) {
                                             padding: .6rem 0;
                                         }
                                     }
@@ -1346,7 +1360,7 @@ video::-webkit-media-controls {
                 .mobileSubMenu {
                     display: none;
 
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         display: flex;
                         position: absolute;
                         bottom:3.2rem;
@@ -1372,7 +1386,7 @@ video::-webkit-media-controls {
                 .loginBtn {
                     display: none;
 
-                    @media (max-width: 1024px) {
+                    @media (max-width: 1120px) {
                         position: absolute;
                         bottom: 2rem;
                         display: block;
@@ -1391,9 +1405,13 @@ video::-webkit-media-controls {
 
             .carlist {
                 position: relative;
-                margin-right: 2.5rem;
+                margin-right: 2rem;
+                transition: all 0.2s ease-in-out;
                 
-                @media (max-width: 1024px) {
+                @media (max-width: 1220px) {
+                    margin-right: 1.5rem;
+                }
+                @media (max-width: 1120px) {
                     display: none;
                 }
 
@@ -1408,7 +1426,7 @@ video::-webkit-media-controls {
 
                 .carItem {
                     display: flex;
-                    justify-content: center;
+                    justify-content: flex-end;
                     align-items: center;
                     height: 8rem;
 
@@ -1444,7 +1462,8 @@ video::-webkit-media-controls {
                         font-weight: 400;
                         display: flex;
                         width: fit-content;
-                        min-width: 2.2rem;
+                        // min-width: 2.2rem;
+                        white-space: nowrap;
                     }
 
                     span+span {
@@ -1540,7 +1559,7 @@ video::-webkit-media-controls {
                 display: block;
                 margin-right: 2rem;
 
-                @media (max-width: 1024px) {
+                @media (max-width: 1120px) {
                     display: none;
                 }
 
@@ -1563,9 +1582,9 @@ video::-webkit-media-controls {
             .user {
                 position: relative;
                 display: block;
-                margin-right: 2rem;
+                margin-right: 0;
 
-                @media (max-width: 1024px) {
+                @media (max-width: 1120px) {
                     display: none;
                 }
 
@@ -1648,7 +1667,7 @@ video::-webkit-media-controls {
             .moblieMenu {
                 display: none;
 
-                @media (max-width: 1024px) {
+                @media (max-width: 1120px) {
                     display: flex;
                     justify-content: center;
                     align-items: center;
@@ -1755,7 +1774,7 @@ video::-webkit-media-controls {
             }
 
             .moblieMenu {
-                @media (max-width: 1024px) {
+                @media (max-width: 1120px) {
                     .burgur .top-line {
                         background-color: #000;
                     }
@@ -4335,7 +4354,7 @@ video::-webkit-media-controls {
             width: calc(100% - 4rem);
         }
 
-        @media (max-width: 1024px) {
+        @media (max-width: 1120px) {
             padding: 3rem 3rem;
         }
 

kr/assets/css/kia/kia.css

@@ -388,11 +388,13 @@ html .hederWarp_n .headerInner .gnb .logoWrap a .logoImg {
   height: 1.5rem;
   background-image: url(../../images/kia/kia-logo-n.svg);
   background-repeat: no-repeat;
+  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
 }
 @media (min-width: 1025px) {
   html .hederWarp_n .headerInner .gnb .logoWrap a .logoImg {
     height: 2rem;
     width: 22.8rem;
+    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
   }
 }
 html .hederWarp_n.menu-open .headerInner .gnb .logoWrap a .logoImg {

kr/assets/css/kia/kia.scss

@@ -481,10 +481,12 @@ html {
                             height: 1.5rem;
                             background-image: url(../../images/kia/kia-logo-n.svg);
                             background-repeat: no-repeat;
+                            transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
 
                             @include desktopMin {
                                 height: 2rem;
                                 width: 22.8rem;
+                                transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
                             }
                         }
 

kr/info/buying-Installation-guide.html

@@ -131,6 +131,20 @@
                                         <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
                                     </ul>
                                 </div>
@@ -239,10 +253,12 @@
             </div>
         </div>
         <!--//header-->
+        <script></script>
 
         <div class="pageTitle">
             <h1>스토어 이용안내</h1>
         </div>
+        <script></script>
 
         <div class="contentWarp">
             <div class="contentsTypeNew caseStoreguide">

kr/info/registration-guide.html

@@ -131,6 +131,11 @@
                                         <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
                                     </ul>
                                 </div>
@@ -475,6 +480,7 @@
          </div>
         <!--//footer-->
         <script>
+            AOS.init();
             var swiper1 = new Swiper(".swiper1", {
                 slidesPerView: "auto",
                 //freeMode: true,

kr/kia.html

@@ -27,7 +27,7 @@
         <link rel="stylesheet" charset="UTF-8" href="assets/css/library/swiper.min.css?v1" type="text/css" />
         <link rel="stylesheet" charset="UTF-8" href="assets/css/library/aos.css?v1" type="text/css" />
         <link rel="stylesheet" charset="UTF-8" href="assets/css/basic.css?v1" type="text/css" />
-        <link rel="stylesheet" charset="UTF-8" href="assets/css/common.css?v3" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="assets/css/common.css?v4" type="text/css" />
         <link rel="stylesheet" charset="UTF-8" href="assets/css/contents.css?v1" type="text/css" />
         <link rel="stylesheet" charset="UTF-8" href="assets/css/popup.css?v1" type="text/css" />
         <script type="text/javascript" charset="UTF-8" src="assets/js/library/jquery.js?v1"></script>
@@ -88,8 +88,8 @@
                         <div class="mobileCarlist">
                             <a href="javascript:void(0)" class="mobilecarItem">
                                 <div class="item">
-                                    <span>MV</span>
+                                    <span>스포티지 HEV/PHEV 개조25</span>
-                                    <span>161어 1660</span>
+                                    <span>KNAPX81GDSK215530</span>
                                 </div>
                                 <div class="arrow"></div>
                             </a>
@@ -132,6 +132,15 @@
                                         <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
                                     </ul>
                                 </div>
                             </li>
@@ -182,8 +191,8 @@
                     <!-- PC 전용 차량 선택 UI입니다. -->
                     <div class="carlist">
                         <a href="javascript:void(0)" class="carItem">
-                            <span>MV</span>
+                            <span>스포티지 HEV/PHEV 개조25</span>
-                            <span>161어 1660</span>
+                            <span>KNAPX81GDSK215530</span>
                         </a>
                         <div class="carlistItem">
                             <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
@@ -214,9 +223,9 @@
                     </div>
 
                     <!-- PC 전용 로그인 버튼입니다. -->
-                    <div class="userLogin">
+                    <!-- <div class="userLogin">
                         <a href="#">로그인/가입</a>
-                    </div>
+                    </div> -->
 
                     <!-- PC 전용 USER 관련 링크 영역입니다. -->
                     <div class="user">

kr/mypage/my-product-view_popup.html

@@ -0,0 +1,414 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>제품상세명 &gt; 제품리스트 &gt; 회사명</title>
+        <!--
+            //위에 순서대로 title 이 변경되어야 합니다. 
+        -->
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="apple-mobile-web-app-title" content="" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-touch-fullscreen" content="yes" />
+        <meta name="title" content="" />
+        <meta name="keywords" content="" />
+        <meta name="description" content="" />
+        <meta name="format-detection" content="telephone=no" />
+        <meta property="og:title" content="Page Title" />
+        <meta property="og:type" content="Page Contens" />
+        <meta property="og:image" content="../assets/images/kia/meta_img.png" />
+        <meta property="og:site_name" content="Page name" />
+        <meta property="og:description" content="Page Coment" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/library/jquery-ui.min.css?v1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
+        <script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
+        <script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
+        <script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
+        <script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
+        <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1"></script>
+        <!--상품상세 페이지 css 분리-->
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/mypage.css?v1" type="text/css" />
+        <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
+        <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
+        <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
+        <link rel="icon" href="../assets/images/kia/favicon-16x16.png" />
+        <link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
+        <link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
+        <style>
+            .alertPopup {
+                gap: 10px;
+            }
+            .alertPopup .popInner {
+                position: relative ;
+                top: auto;
+                left: auto;
+                transform:translate(0)
+            }
+        </style>
+    </head>
+    <body>
+
+
+        <!--알럿팝업-->
+
+        <!-- [S] 요금제 리스트에서 변경 또는 해지 버튼을 클릭 시 노출되는 레이어 팝업 -->
+        <div id="terminationService" class="alertPopup" style="display: none; opacity: 0">
+            <div class="popInner">
+                <div class="content">
+                    <p>
+                        <span> 요금제 변경을 위해서는 사용중인 요금제를 해지하신 후, 다시 구매하셔야 합니다. 요금제를 해지하시겠습니까? </span>
+                    </p>
+                    <div class="carswBtn">
+                        <div class="towButton">
+                            <a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('terminationService');"><p>취소</p></a>
+                            <a href="javascript:;" class="PurchaseBtn rightBtn" onClick="javascript:close_layer_popup('terminationService');open_layer_popup('terminationFinish');"><p>요금제 해지</p></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- [E] 요금제 리스트에서 변경 또는 해지 버튼을 클릭 시 노출되는 레이어 팝업 -->
+
+        <!-- [S] 뮤직 스트리밍 서비스 해지 컨펌 레이어 팝업에서 요금제 해지를 클릭한 경우 -->
+        <div id="terminationFinish" class="alertPopup" style="display: none; opacity: 0">
+            <div class="popInner">
+                <div class="content">
+                    <p>
+                        <span> 요금제 해지가 완료되었습니다. </span>
+                    </p>
+
+                    <div class="carswBtn">
+                        <div class="oneButton">
+                            <!-- 뮤직 스트리밍 PDP 페이지로 이동합니다. -->
+                            <a href=""><p>확인</p></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- [E] 뮤직 스트리밍 서비스 해지 컨펌 레이어 팝업에서 요금제 해지를 클릭한 경우 -->
+
+        <!--알럿팝업-->
+
+        <!--//footer-->
+        <div class="floating_menu">
+            <a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
+            <a href="/kr/service/inquiry-list.html" class="floating_inquiry"><img src="../assets/images/common/floating_faq.png" alt="문의하기" /></a>
+            <a href="javascript:;" class="floating_top"><img src="../assets/images/common/floating_top.png" alt="top" /></a>
+        </div>
+
+        <div class="popupWarp" style="display: none">
+            <div class="popInner termsPop" style="display: none">
+                <div class="popContents">
+                    <h1>개인정보 수집/이용 및 기타 동의</h1>
+                    <div class="termsCon">
+                        <p>
+                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
+                            make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                            containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable
+                            content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable
+                            English. ManyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
+                            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by
+                            the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like
+                            readable English. Many
+                        </p>
+                    </div>
+                    <div>
+                        <div class="oneButton">
+                            <a href=""><p>닫기</p></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="popInner payInfo" style="display: none">
+                <div class="popContents">
+                    <h1>결제 방법 안내</h1>
+                    <div class="payInfoCon">
+                        <p>
+                            <strong>이미 등록된 결제 방법이 있습니다.<br />(지로, 서울특별시 OO구 OOO로 OO길 OO)<br />해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
+                            <span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
+                        </p>
+                    </div>
+                    <div>
+                        <div class="towButton">
+                            <button class="cartBtn leftBtn"><p>취소</p></button>
+                            <button class="PurchaseBtn rightBtn"><p>확인</p></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="popInner payInfo" style="display: none">
+                <div class="popContents">
+                    <h1>결제 방법 안내</h1>
+                    <div class="payInfoCon">
+                        <p>
+                            <strong>등록된 결제 방법이 없어 요금제 가입 진행이 불가합니다. 결제 카드 등록은 블루링크 App에서 진행해주시길 바랍니다.</strong>
+                        </p>
+                    </div>
+                    <div>
+                        <div class="oneButton">
+                            <a href=""><p>닫기</p></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="cancelPremiumAlert" class="alertPopup cancelPremiumPopup" style="display: flex; opacity: 1">
+            <div class="popInner">
+                <div class="content">
+                    <strong class="alertMessage">
+                        <em>즉시 해지(결제 7일 이내)</em>
+                        스트리밍 프리미엄 약정 사양 구독을 해지 하시겠습니까?
+                    </strong>
+                    <!-- [즉시 해지] (결제 7일 이내) -->
+                    <div class="alertSubMessage">
+                        <ul>
+                            <li>∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</li>
+                            <li>
+                                ∙ 해지 시 과금/환불 비용 구분<br />
+                                <ul>
+                                    <li>
+                                        <span>가) 차량용 webOS 콘텐츠 플랫폼</span>
+                                        가입일로부터 7일 이내에 환불 요청 시, 전체 환불 처리 됩니다.
+                                    </li>
+                                    <li>
+                                        <span>나) 스트리밍 프리미엄 데이터 요금제</span>
+                                        통신사 정책에 따라 사후 일할 계산됩니다.<br />(문의 : 기아 커넥트 센터 1899-2121)
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+
+                        <div class="totalRefund radioArea">
+                            <b>총 받으실 금액 : <span class="minusPriceInfo">6,000</span>원</b>
+                        </div>
+
+                        <ul>
+                            <li>
+                                차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
+                                <ul>
+                                    <li>
+                                        <span><b>a) 환불 금액 : 6,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
+                                        i) 일할 계산 : 7일 이내 전체 환불
+                                    </li>
+                                    <li>
+                                        <span><b>b) 중도 해지 납부 금액 : 0원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
+                                        i) 할인 반환금 : 0원 <br />
+                                        ii)중도해지 위약금 : 0원 (약정 기간 종료 전 해지로 인한 위약금)
+                                    </li>
+                                    <li>
+                                        <span><b>c) 총 받으실 금액 : 6,000원</b></span>
+                                        i) 환불 금액 6,000원 - 중도 해지 납부 금액 0원
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="carswBtn">
+                        <div class="towButton">
+                            <a href="" id="alertCancel" class="cartBtn leftBtn">
+                                <p>계속 구독하기</p>
+                            </a>
+                            <a href="" id="alertCancelPremiumReservation" class="PurchaseBtn rightBtn">
+                                <p>구독 해지</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="popInner">
+                <div class="content">
+                    <strong class="alertMessage">
+                        <em>즉시 해지(결제 7일 이내)</em>
+                        스트리밍 프리미엄 약정 사양 구독을 해지 하시겠습니까?
+                    </strong>
+                    <!-- [즉시 해지] (결제 7일 초과) -->
+                    <div class="alertSubMessage">
+                        <ul>
+                            <li>∙ 구독을 해지하시면 차량에서 해당 사양의 이용이 중지됩니다.</li>
+                            <li>
+                                ∙ 해지 시 과금/환불 비용 구분<br />
+                                <ul>
+                                    <li>
+                                        <span>가) 차량용 webOS 콘텐츠 플랫폼</span>
+                                        ∙ 납부하신 당월 결제 금액은 일할 계산되어 환불 처리 됩니다.<br />
+                                        ∙ 총 납부하실 금액은 구독 해지 즉시 결제 진행됩니다.
+                                    </li>
+                                    <li>
+                                        <span>나) 스트리밍 프리미엄 데이터 요금제</span>
+                                        통신사 정책에 따라 사후 일할 계산됩니다. (문의 : 기아 커넥트 센터 1899-2121)
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+
+                        <div class="totalRefund radioArea">
+                            <b>총 받으실 금액 : <span class="minusPriceInfo">2,000</span>원</b>
+                        </div>
+
+                        <ul>
+                            <li>
+                                차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
+                                <ul>
+                                    <li>
+                                        <span><b>a) 환불 금액 : 5,000원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
+                                        i) 일할 계산 환불 금액: 월 요금 - (월 요금 * (사용일수/결제월 총일수의 반올림))
+                                    </li>
+                                    <li>
+                                        <span><b>b) 중도 해지 납부 금액 : 3,000원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
+                                        i) 할인 반환금 : 1,000원 (할인 받으셨던 기간 동안의 해택 반환금) <br />
+                                        ii)중도해지 위약금 : 0원 (약정 기간 종료 전 해지로 인한 위약금)<br />
+                                    </li>
+                                    <li>
+                                        <span><b>c) 총 받으실 금액 : 2,000원</b></span>
+                                        i) 환불 금액 5,000원 - 중도 해지 납부 금액 3,000원
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <!--// [즉시 해지] (결제 7일 초과) -->
+                    <!-- [예약 해지] (다음 회차 정기결제 시점 해지) -->
+                    <!-- <div class="alertSubMessage">
+                        <ul>
+                            <li>
+                                ∙ 디지털 사양 구독 해지를 예약하시면 다음 회차 정기 결제 일에 해지되며 차량에서 해당 사양의 이용이 중지됩니다.<br />
+                                (2024.10.26 구독해지 예정)
+                            </li>
+                            <li>
+                                ∙ 해지 시 과금/환불 비용 구분<br />
+                                <ul>
+                                    <li>
+                                        <span>가) 차량용 webOS 콘텐츠 플랫폼</span>
+                                        ∙ 다음 회차 정기 결제 일에 해지되며 환불받으실 금액은 없습니다.<br />
+                                        ∙ 총 납부하실 금액은 구독 해지 예약 신청 즉시 결제 진행됩니다.
+                                    </li>
+                                    <li>
+                                        <span>나) 스트리밍 프리미엄 데이터 요금제</span>
+                                        통신사 정책에 따라 사후 일할 계산됩니다. (문의 : 기아 커넥트 센터 1899-2121)
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+
+                        <div class="totalRefund radioArea">
+                            <b>총 납부하실 금액 : <span class="minusPriceInfo">15,000</span>원</b>
+                        </div>
+
+                        <ul>
+                            <li>
+                                차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
+                                <ul>
+                                    <li>
+                                        <span><b>a) 환불 금액 : 0원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
+                                        i) 일할 계산 : 다음 회차 정기 결제일에 해지되어 일할 계산할 금액이 없습니다.
+                                    </li>
+                                    <li>
+                                        <span><b>b) 중도 해지 납부 금액 : 30,000원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
+                                        i) 할인 반환금 : 15,000원 (할인 받으셨던 기간 동안의 해택 반환금)<br />
+                                        ii)중도해지 위약금 : 15,000원 (약정 기간 종료 전 해지로 인한 위약금)
+                                    </li>
+                                    <li>
+                                        <span><b>c) 총 납부하실 금액 : 15,000원</b></span>
+                                        i) 환불 금액 15,000원 - 중도 해지 납부 금액 30,000원
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div> -->
+                    <!--// [예약 해지] (다음 회차 정기결제 시점 해지) -->
+                    <div class="carswBtn">
+                        <div class="towButton">
+                            <a href="" id="alertCancel" class="cartBtn leftBtn">
+                                <p>계속 구독하기</p>
+                            </a>
+                            <a href="" id="alertCancelPremiumReservation" class="PurchaseBtn rightBtn">
+                                <p>구독 해지</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="popInner">
+                <div class="content">
+                    <strong class="alertMessage">
+                        <em>즉시 해지(결제 7일 이내)</em>
+                        스트리밍 프리미엄 약정 사양 구독을 해지 하시겠습니까?
+                    </strong>
+                    <!-- [예약 해지] (다음 회차 정기결제 시점 해지) -->
+                    <div class="alertSubMessage">
+                        <ul>
+                            <li>
+                                ∙ 디지털 사양 구독 해지를 예약하시면 다음 회차 정기 결제 일에 해지되며 차량에서 해당 사양의 이용이 중지됩니다.<br />
+                                (2024.10.26 구독해지 예정)
+                            </li>
+                            <li>
+                                ∙ 해지 시 과금/환불 비용 구분<br />
+                                <ul>
+                                    <li>
+                                        <span>가) 차량용 webOS 콘텐츠 플랫폼</span>
+                                        ∙ 다음 회차 정기 결제 일에 해지되며 환불받으실 금액은 없습니다.<br />
+                                        ∙ 총 납부하실 금액은 구독 해지 예약 신청 즉시 결제 진행됩니다.
+                                    </li>
+                                    <li>
+                                        <span>나) 스트리밍 프리미엄 데이터 요금제</span>
+                                        통신사 정책에 따라 사후 일할 계산됩니다. (문의 : 기아 커넥트 센터 1899-2121)
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+
+                        <div class="totalRefund radioArea">
+                            <b>총 납부하실 금액 : <span class="minusPriceInfo">15,000</span>원</b>
+                        </div>
+
+                        <ul>
+                            <li>
+                                차량용 webOS 콘텐츠 플랫폼 비용 상세 사항
+                                <ul>
+                                    <li>
+                                        <span><b>a) 환불 금액 : 0원</b> (잔여 이용 기간에 대하여 돌려받으실 환불 금액 )</span>
+                                        i) 일할 계산 : 다음 회차 정기 결제일에 해지되어 일할 계산할 금액이 없습니다.
+                                    </li>
+                                    <li>
+                                        <span><b>b) 중도 해지 납부 금액 : 30,000원</b> (약정 사양 중도 해지로 인한 납부 금액) </span>
+                                        i) 할인 반환금 : 15,000원 (할인 받으셨던 기간 동안의 해택 반환금)<br />
+                                        ii)중도해지 위약금 : 15,000원 (약정 기간 종료 전 해지로 인한 위약금)
+                                    </li>
+                                    <li>
+                                        <span><b>c) 총 납부하실 금액 : 15,000원</b></span>
+                                        i) 환불 금액 15,000원 - 중도 해지 납부 금액 30,000원
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <!--// [예약 해지] (다음 회차 정기결제 시점 해지) -->
+                    <div class="carswBtn">
+                        <div class="towButton">
+                            <a href="" id="alertCancel" class="cartBtn leftBtn">
+                                <p>계속 구독하기</p>
+                            </a>
+                            <a href="" id="alertCancelPremiumReservation" class="PurchaseBtn rightBtn">
+                                <p>구독 해지</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--//footer-->
+    </body>
+</html>

kr/service/event-list.html

@@ -129,6 +129,18 @@
                                         <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                                        <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
                                         <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
@@ -240,9 +252,12 @@
         </div>
         <!--//header-->
 
+        <script></script>
+
         <div class="pageTitle">
             <h1>이벤트</h1>
         </div>
+        <script></script>
 
         <!--//content-warp-->
         <div class="contentWarp">