gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

버튼 이미지 미리 로딩 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2026-01-28 22:38:34 +09:00
parent 086574d412
commit 4850608ada
6 changed files with 1780 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
kr/assets/css/kia/kia.css
View File

@@ -13,7 +13,7 @@ html body {
font-weight: 400;
overflow-x: hidden;
}
html input[type=checkbox] {
html input[type="checkbox"] {
accent-color: #000;
width: 2rem;
height: 2rem;
@@ -201,7 +201,7 @@ html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
}
@media (min-width: 768px) {
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt,
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
font-size: 1.6rem;
width: -webkit-fit-content;
width: -moz-fit-content;
@@ -339,11 +339,13 @@ html .mainBanner .mabannerInner .listImgBtn {
width: 17.6rem;
}
}
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after, html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after,
html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
width: 3.2rem;
}
@media (min-width: 768px) {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after, html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
html .mainBanner .mabannerInner .listImgBtn .oneButton div::after,
html .mainBanner .mabannerInner .listImgBtn .oneButton div::before {
width: 3.2rem;
}
}
@@ -409,13 +411,15 @@ html .mainSwiper ul li .mainText p span {
html .mainSwiper ul li .mainText .oneButton {
margin-top: 5rem;
}
html .mainSwiper ul li .mainText .oneButton a::before, html .mainSwiper ul li .mainText .oneButton a::after {
html .mainSwiper ul li .mainText .oneButton a::before,
html .mainSwiper ul li .mainText .oneButton a::after {
width: 3.2rem;
}
html .mainCarNum .oneButton a {
position: relative;
}
html .mainCarNum .oneButton a::before, html .mainCarNum .oneButton a::after {
html .mainCarNum .oneButton a::before,
html .mainCarNum .oneButton a::after {
background-image: initial;
width: 0;
height: 0;
@@ -455,7 +459,8 @@ html .mainCarNum .oneButton a p:hover {
html .mainCarNum .oneButton {
width: 16rem;
}
html .mainCarNum .oneButton a::before, html .mainCarNum .oneButton a::after {
html .mainCarNum .oneButton a::before,
html .mainCarNum .oneButton a::after {
background-image: initial;
width: 5rem;
margin-left: -0.1rem;
@@ -644,21 +649,33 @@ html .footer .kiaInner .tLeft .companyInfo ul + ul li {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after {
display: none;
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
width: 100%;
}
@media (min-width: 768px) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3), html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3),
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4) {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
display: none;
}
@media (min-width: 768px) {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after, html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(1)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(2)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after,
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(4)::after {
display: block;
}
}
@@ -831,7 +848,7 @@ html .footer .kiaInner .familyBoxWarp .searchTextBox {
width: 32rem;
}
}
html .footer .kiaInner .familyBoxWarp .searchTextBox input[type=text] {
html .footer .kiaInner .familyBoxWarp .searchTextBox input[type="text"] {
width: 100%;
}
html .footer .kiaInner .familyBoxWarp .searchTextBox .icon-search {
@@ -857,6 +874,16 @@ html .threeButton {
justify-content: center;
}
}
html .threeButton::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .threeButton::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .threeButton .leftBtn,
html .threeButton .centerBtn,
html .threeButton .rightBtn {
@@ -866,8 +893,8 @@ html .threeButton .rightBtn {
}
@media (min-width: 768px) {
html .threeButton .leftBtn,
html .threeButton .centerBtn,
html .threeButton .rightBtn {
html .threeButton .centerBtn,
html .threeButton .rightBtn {
width: 18rem;
}
}
@@ -1013,6 +1040,16 @@ html .towButton {
display: flex;
justify-content: space-between;
}
html .towButton::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .towButton::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .towButton .leftBtn,
html .towButton .centerBtn,
html .towButton .rightBtn {
@@ -1140,6 +1177,16 @@ html .oneButton {
width: 100%;
min-width: 16rem;
}
html .oneButton::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .oneButton::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .oneButton button,
html .oneButton div,
html .oneButton a {
@@ -1161,8 +1208,8 @@ html .oneButton a::before {
}
@media (min-width: 768px) {
html .oneButton button::before,
html .oneButton div::before,
html .oneButton a::before {
html .oneButton div::before,
html .oneButton a::before {
width: 3.2rem;
}
}
@@ -1180,8 +1227,8 @@ html .oneButton a::after {
}
@media (min-width: 768px) {
html .oneButton button::after,
html .oneButton div::after,
html .oneButton a::after {
html .oneButton div::after,
html .oneButton a::after {
width: 3.2rem;
}
}
@@ -1226,6 +1273,16 @@ html .oneButtonBlack {
height: 5.6rem;
width: 100%;
}
html .oneButtonBlack::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
html .oneButtonBlack::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
html .oneButtonBlack button,
html .oneButtonBlack a {
width: 100%;
@@ -1244,19 +1301,19 @@ html .oneButtonBlack a::before {
}
@media (max-width: 320px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@media (max-width: 768px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@media (max-width: 501px) {
html .oneButtonBlack button::before,
html .oneButtonBlack a::before {
html .oneButtonBlack a::before {
width: 3.2rem;
}
}
@@ -1273,19 +1330,19 @@ html .oneButtonBlack a::after {
}
@media (max-width: 320px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 4.2rem;
}
}
@media (max-width: 768px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 3rem;
}
}
@media (max-width: 501px) {
html .oneButtonBlack button::after,
html .oneButtonBlack a::after {
html .oneButtonBlack a::after {
width: 3rem;
}
}
@@ -1329,15 +1386,15 @@ html .productRight .optionWarp .producOption .optionList .checkBtn label {
border-radius: 0.6rem;
border: 1px solid #dedede;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox] {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"] {
visibility: hidden;
position: absolute;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label {
background-color: #05141f;
border: 1px solid #05141f;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label::before {
content: "";
position: absolute;
right: 2rem;
@@ -1350,8 +1407,8 @@ html .productRight .optionWarp .producOption .optionList .checkBtn input[type=ch
background-size: contain;
background-repeat: no-repeat;
}
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p strong {
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn input[type="checkbox"]:checked + label div p strong {
color: #fff;
}
html .productRight .optionWarp .producOption .optionList .checkBtn:hover label {
@@ -1381,11 +1438,13 @@ html .productRight .optionWarp .producOption .optionList .checkBtn div p strong
html .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn {
margin-top: 1rem;
}
html .inquiryBtn a::before, html .inquiryBtn a::after {
html .inquiryBtn a::before,
html .inquiryBtn a::after {
width: 3.2rem;
}
@media (min-width: 768px) {
html .inquiryBtn a::before, html .inquiryBtn a::after {
html .inquiryBtn a::before,
html .inquiryBtn a::after {
width: 3.2rem;
}
}
@@ -1467,6 +1526,16 @@ body#faq .csWarp {
width: 100%;
min-width: 16rem;
}
.oneButtonLine::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
.oneButtonLine::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
.oneButtonLine button,
.oneButtonLine div,
.oneButtonLine a {
@@ -1488,8 +1557,8 @@ body#faq .csWarp {
}
@media (min-width: 768px) {
.oneButtonLine button::before,
.oneButtonLine div::before,
.oneButtonLine a::before {
.oneButtonLine div::before,
.oneButtonLine a::before {
width: 3.2rem;
}
}
@@ -1507,8 +1576,8 @@ body#faq .csWarp {
}
@media (min-width: 768px) {
.oneButtonLine button::after,
.oneButtonLine div::after,
.oneButtonLine a::after {
.oneButtonLine div::after,
.oneButtonLine a::after {
width: 3.2rem;
}
}
@@ -1549,4 +1618,4 @@ body#faq .csWarp {
border-color: #9ba1a5;
border-radius: 0;
}
/*# sourceMappingURL=kia.css.map */
/*# sourceMappingURL=kia.css.map */

12
kr/assets/css/kia/kia.css.map
View File

File diff suppressed because one or more lines are too long

57
kr/assets/css/kia/kia.scss
View File

@@ -1,4 +1,5 @@
@charset "UTF-8";
@charset "UTF-8";
@import "../utils.scss";
html {
@@ -1027,6 +1028,17 @@ html {
justify-content: center;
}
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
.leftBtn,
.centerBtn,
.rightBtn {
@@ -1206,6 +1218,18 @@ html {
display: flex;
justify-content: space-between;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
.leftBtn,
.centerBtn,
.rightBtn {
@@ -1352,6 +1376,17 @@ html {
width: 100%;
min-width: 16rem;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
button,
div,
a {
@@ -1431,6 +1466,17 @@ html {
height: 5.6rem;
width: 100%;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
button,
a {
width: 100%;
@@ -1723,6 +1769,17 @@ body#faq {
width: 100%;
min-width: 16rem;
&::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yleft.svg), url(../../images/kia/svg/kia-btn-wleft.svg), url(../../images/kia/svg/kia-btn-bleft.svg), url(../../images/kia/svg/kia-btn-gleft.svg);
opacity: 0;
}
&::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-yright.svg), url(../../images/kia/svg/kia-btn-wright.svg), url(../../images/kia/svg/kia-btn-bright.svg), url(../../images/kia/svg/kia-btn-gright.svg);
opacity: 0;
}
button,
div,
a {