Update Kia HTML and CSS files for improved layout and consistency

- Added a note in the Kia HTML file to remind users to check available digital specifications for each vehicle.
- Updated common CSS files to include a new background image for enhanced visual appeal.
- Adjusted various HTML files to ensure consistent links to the customer service and notice sections across multiple pages.
This commit is contained in:
2025-04-29 23:47:51 +09:00
parent 9822260997
commit 2b9d51aea5
109 changed files with 2504 additions and 1927 deletions

View File

@@ -163,7 +163,7 @@ video::-webkit-media-controls {
width: 2.5rem;
height: 0.8rem;
display: block;
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem:hover, .hederWarp .headerInner .headerTop .headerGnb .topUtil .carlist .carItem:focus {
@@ -329,7 +329,7 @@ video::-webkit-media-controls {
display: block;
width: 0.6rem;
height: 1.2rem;
background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
background-image: url("../images/common/icon-mMarrow.svg");
background-repeat: no-repeat;
background-size: contain;
}
@@ -616,7 +616,7 @@ video::-webkit-media-controls {
}
.hederWarp.noBoder .headerInner .headerTop .headerGnb .topUtil .carlist .carItem::after,
.hederWarp.hBoder .headerInner .headerTop .headerGnb .topUtil .carlist .carItem::after {
background-image: url("/kr/assets/images/common/icon-tbarrow.svg");
background-image: url("../images/common/icon-tbarrow.svg");
}
.hederWarp.noBoder .headerInner .headerTop .headerGnb .topUtil .carlist span,
.hederWarp.hBoder .headerInner .headerTop .headerGnb .topUtil .carlist span {
@@ -738,7 +738,7 @@ video::-webkit-media-controls {
display: block;
width: 16.7rem;
height: 1.5rem;
background-image: url(/kr/assets/images/kia/kia-blogo-n.svg);
background-image: url(../images/kia/kia-blogo-n.svg);
background-size: contain;
background-repeat: no-repeat;
}
@@ -751,7 +751,7 @@ video::-webkit-media-controls {
display: block;
width: 1.6rem;
height: 1.6rem;
background: url("/kr/assets/images/common/icon-menu-close.svg") center center no-repeat;
background: url("../images/common/icon-menu-close.svg") center center no-repeat;
}
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
@@ -780,7 +780,7 @@ video::-webkit-media-controls {
display: block;
width: 0.6rem;
height: 1.2rem;
background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
background-image: url("../images/common/icon-mMarrow.svg");
background-repeat: no-repeat;
background-size: contain;
}
@@ -840,7 +840,7 @@ video::-webkit-media-controls {
width: 1.2rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url("/kr/assets/images/common/icon-tbarrow.svg") center right no-repeat;
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .arrow.on {
@@ -1122,7 +1122,7 @@ video::-webkit-media-controls {
width: 2.5rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus {
@@ -1158,7 +1158,7 @@ video::-webkit-media-controls {
width: -moz-fit-content;
width: fit-content;
min-width: 11rem;
top: 7.9rem;
top: 6.1rem;
left: 50%;
transform: translate(-50%, 0);
}
@@ -1171,7 +1171,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .func .carlist .carlistItem .boxBullet {
width: 1.4rem;
height: 1rem;
display: block;
display: none;
position: absolute;
top: -0.9rem;
left: 50%;
@@ -1366,7 +1366,7 @@ video::-webkit-media-controls {
width: 2.5rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url("/kr/assets/images/common/icon-tbarrow.svg") center right no-repeat;
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.hederWarp_n.noBoder .headerInner .func .carlist.on a::after,
@@ -1416,7 +1416,7 @@ video::-webkit-media-controls {
}
.footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select.on::after {
top: 35% !important;
background: url("/kr/assets/images/common/icon-wminus.svg");
background: url("../images/common/icon-wminus.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: center;
@@ -1656,7 +1656,7 @@ video::-webkit-media-controls {
width: 1.4rem;
height: 0.8rem;
display: block;
background: url("/kr/assets/images/common/icon-notice.svg");
background: url("../images/common/icon-notice.svg");
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-180deg);
@@ -1723,7 +1723,7 @@ video::-webkit-media-controls {
display: block;
width: 2.4rem;
height: 2.4rem;
background-image: url("/kr/assets/images/common/icon-search.svg");
background-image: url("../images/common/icon-search.svg");
background-size: contain;
}
.contentWarp .towButton {
@@ -1797,7 +1797,7 @@ video::-webkit-media-controls {
display: block;
width: 3.5rem;
height: 3.5rem;
background-image: url("/kr/assets/images/common/icon-page-arrow.svg");
background-image: url("../images/common/icon-page-arrow.svg");
background-repeat: no-repeat;
background-position: center;
border: 1px solid #cdd0d2;
@@ -2713,7 +2713,7 @@ video::-webkit-media-controls {
.inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label .icon-reset {
width: 1.4rem;
height: 1.4rem;
background-image: url(/kr/assets/images/common/icon-reset.svg);
background-image: url(../images/common/icon-reset.svg);
background-size: contain;
background-repeat: no-repeat;
}
@@ -2721,7 +2721,7 @@ video::-webkit-media-controls {
.inquiryPopup .popInner .csWarp .csInner dl dd.flieWarp .fileAddBtn label .icon-plus {
width: 1.4rem;
height: 1.4rem;
background-image: url(/kr/assets/images/common/icon-bplus.svg);
background-image: url(../images/common/icon-bplus.svg);
background-size: contain;
background-repeat: no-repeat;
}

File diff suppressed because one or more lines are too long

View File

@@ -160,7 +160,7 @@ video::-webkit-media-controls {
width: 2.5rem;
height: 0.8rem;
display: block;
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
@@ -348,7 +348,7 @@ video::-webkit-media-controls {
display: block;
width: 0.6rem;
height: 1.2rem;
background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
background-image: url("../images/common/icon-mMarrow.svg");
background-repeat: no-repeat;
background-size: contain;
}
@@ -678,7 +678,7 @@ video::-webkit-media-controls {
.carlist {
.carItem {
&::after {
background-image: url("/kr/assets/images/common/icon-tbarrow.svg");
background-image: url("../images/common/icon-tbarrow.svg");
}
}
@@ -822,7 +822,7 @@ video::-webkit-media-controls {
display: block;
width: 16.7rem;
height: 1.5rem;
background-image: url(/kr/assets/images/kia/kia-blogo-n.svg);
background-image: url(../images/kia/kia-blogo-n.svg);
background-size: contain;
background-repeat: no-repeat;
}
@@ -840,7 +840,7 @@ video::-webkit-media-controls {
display: block;
width: 1.6rem;
height: 1.6rem;
background: url("/kr/assets/images/common/icon-menu-close.svg") center center no-repeat;
background: url("../images/common/icon-menu-close.svg") center center no-repeat;
}
}
}
@@ -871,7 +871,7 @@ video::-webkit-media-controls {
display: block;
width: 0.6rem;
height: 1.2rem;
background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
background-image: url("../images/common/icon-mMarrow.svg");
background-repeat: no-repeat;
background-size: contain;
}
@@ -937,7 +937,7 @@ video::-webkit-media-controls {
width: 1.2rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url("/kr/assets/images/common/icon-tbarrow.svg") center right no-repeat;
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
&.on {
@@ -1271,7 +1271,7 @@ video::-webkit-media-controls {
width: 2.5rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
@@ -1314,7 +1314,7 @@ video::-webkit-media-controls {
display: none;
width: fit-content;
min-width: 11rem;
top: 7.9rem;
top: 6.1rem;
left: 50%;
transform: translate(-50%, 0);
@@ -1329,7 +1329,7 @@ video::-webkit-media-controls {
.boxBullet {
width: 1.4rem;
height: 1rem;
display: block;
display: none;
position: absolute;
top: -0.9rem;
left: 50%;
@@ -1570,7 +1570,7 @@ video::-webkit-media-controls {
width: 2.5rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url("/kr/assets/images/common/icon-tbarrow.svg") center right no-repeat;
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
}
@@ -1643,7 +1643,7 @@ video::-webkit-media-controls {
.btn-select.on {
&::after {
top: 35% !important;
background: url("/kr/assets/images/common/icon-wminus.svg");
background: url("../images/common/icon-wminus.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: center;
@@ -1885,7 +1885,7 @@ video::-webkit-media-controls {
width: 1.4rem;
height: 0.8rem;
display: block;
background: url("/kr/assets/images/common/icon-notice.svg");
background: url("../images/common/icon-notice.svg");
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-180deg);
@@ -1963,7 +1963,7 @@ video::-webkit-media-controls {
display: block;
width: 2.4rem;
height: 2.4rem;
background-image: url("/kr/assets/images/common/icon-search.svg");
background-image: url("../images/common/icon-search.svg");
background-size: contain;
}
}
@@ -2041,7 +2041,7 @@ video::-webkit-media-controls {
display: block;
width: 3.5rem;
height: 3.5rem;
background-image: url("/kr/assets/images/common/icon-page-arrow.svg");
background-image: url("../images/common/icon-page-arrow.svg");
background-repeat: no-repeat;
background-position: center;
border: 1px solid #cdd0d2;
@@ -3013,7 +3013,7 @@ video::-webkit-media-controls {
.icon-reset {
width: 1.4rem;
height: 1.4rem;
background-image: url(/kr/assets/images/common/icon-reset.svg);
background-image: url(../images/common/icon-reset.svg);
background-size: contain;
background-repeat: no-repeat;
}
@@ -3021,7 +3021,7 @@ video::-webkit-media-controls {
.icon-plus {
width: 1.4rem;
height: 1.4rem;
background-image: url(/kr/assets/images/common/icon-bplus.svg);
background-image: url(../images/common/icon-bplus.svg);
background-size: contain;
background-repeat: no-repeat;
}

File diff suppressed because one or more lines are too long

View File

@@ -190,7 +190,7 @@
@media (max-width: 1024px) {
.mainProductItem .item .infoArea {
position: relative;
display: block;
display: flex;
width: 100%;
padding: 3rem;
background-size: cover;
@@ -238,7 +238,7 @@
border: 1px solid #9EA1A2;
font-size: 1.3rem;
font-weight: 400;
color: #9EA1A2;
color: #000;
line-height: 1;
}
.mainProductItem .item .infoArea .infoTop .tag span:not(:first-child) {
@@ -251,6 +251,24 @@
border: 1px solid #FFFFFF;
}
}
.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;
}
}
.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;
}
}
.mainProductItem .item .infoArea .infoTop h2 {
width: 100%;
display: -webkit-box;
@@ -291,11 +309,12 @@
.mainProductItem .item .infoArea .infoBottom {
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-end;
width: 100%;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom {
display: block;
margin-top: 2.5rem;
}
}
@@ -313,21 +332,28 @@
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: space-between;
align-items: flex-start;
height: 9.2rem;
padding: 1.6rem;
background-color: #F2F2F2;
border-radius: 0.6rem;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl {
flex-direction: row-reverse;
justify-content: flex-end;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
height: 4.8rem;
padding: 1rem 1.6rem;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
margin-top: 1rem;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dt {
font-size: 1.6rem;
font-size: 1.1rem;
font-weight: 400;
color: #676767;
}
@@ -335,73 +361,71 @@
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dt {
position: relative;
font-size: 1.4rem;
color: #FFFFFF;
margin-left: 0.8rem;
padding-left: 0.8rem;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dt::before {
content: "";
position: absolute;
top: 0.1rem;
left: 0;
width: 0.1rem;
height: 1.4rem;
background-color: #DEDEDE;
color: #000;
margin-left: 0;
padding-left: 0;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd {
margin-top: 1rem;
font-size: 1.6rem;
font-weight: 600;
color: #000000;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-end;
margin-top: 0;
font-size: 1.4rem;
color: #FFFFFF;
color: #000;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount {
margin: 0.6rem 0 -1.5rem;
font-size: 1.4rem;
color: #9EA1A2;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount {
width: 100%;
margin: 0.2rem 0 0;
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .price {
display: flex;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .price em {
order: 2;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .price .dc {
order: 1;
margin-right: 0.4rem;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd.discount b {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount {
display: block;
margin: 0.6rem 0 0;
font-size: 1.4rem;
color: #9EA1A2;
text-align: left;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount {
width: 100%;
margin: 0.2rem 0 0;
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 {
.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.4rem;
color: #EA0029;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
margin-left: 1.5rem;
padding-left: 1.5rem;
margin-left: 0.8rem;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
margin-left: 0;
padding-left: 0;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child)::before {
content: "";
position: absolute;
top: 0.2rem;
left: 0;
width: 0.1rem;
height: 4.4rem;
background-color: #DEDEDE;
}
@media (max-width: 1024px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child)::before {
display: none;
}
}
@media (max-width: 1024px) {
@@ -1392,10 +1416,50 @@
}
.specNoti {
display: block;
display: flex;
align-items: center;
max-width: 120rem;
height: 6.5rem;
margin: 0 auto;
padding: 0 2.4rem;
margin: 6rem auto -3rem;
background-color: #f1f1f1;
}
@media (max-width: 768px) {
.specNoti {
display: block;
padding: 1.2rem;
margin: -2rem 2rem 2rem;
font-size: 1.4rem;
line-height: 2.2rem;
}
}
.specNoti .tag {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
margin: 0 0.4rem 0 0.6rem;
border: 1px solid #9EA1A2;
font-size: 1.3rem;
font-weight: 400;
color: #9EA1A2;
line-height: 1;
}
@media (max-width: 768px) {
.specNoti .tag {
display: inline-flex;
margin-left: 0;
font-size: 1.1rem;
color: #FFFFFF;
border: 1px solid #FFFFFF;
}
}
.specNoti .tag.available {
background-color: #5D7D2B;
color: #fff;
}
.specNoti .tag.promotion {
background-color: #F3C300;
color: #000;
}
/*# sourceMappingURL=kiamain.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -1310,21 +1310,26 @@
background-color: #f1f1f1;
@include maxtablet{
display: block;
padding:1.2rem;
margin: -2rem 2rem 2rem;
font-size: 1.4rem;
line-height: 2.2rem;
}
.tag {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
margin: 0 0.4rem;
margin: 0 0.4rem 0 0.6rem;
border: 1px solid #9EA1A2;
font-size: 1.3rem;
font-weight: 400;
color: #9EA1A2;
line-height: 1;
@include maxtablet{
display: inline-flex;
margin-left:0;
font-size: 1.1rem;
color: #FFFFFF;
border: 1px solid #FFFFFF;

View File

@@ -1426,8 +1426,11 @@
}
@media (max-width: 768px) {
.specNoti {
display: block;
padding: 1.2rem;
margin: -2rem 2rem 2rem;
font-size: 1.4rem;
line-height: 2.2rem;
}
}
.specNoti .tag {
@@ -1435,7 +1438,7 @@
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
margin: 0 0.4rem;
margin: 0 0.4rem 0 0.6rem;
border: 1px solid #9EA1A2;
font-size: 1.3rem;
font-weight: 400;
@@ -1444,6 +1447,8 @@
}
@media (max-width: 768px) {
.specNoti .tag {
display: inline-flex;
margin-left: 0;
font-size: 1.1rem;
color: #FFFFFF;
border: 1px solid #FFFFFF;

File diff suppressed because one or more lines are too long