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
2025-06-09 23:34:45 +09:00
parent 86c514f3e2
commit 59c54a86f3
5 changed files with 1630 additions and 1667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc
View File

@@ -1,4 +1,4 @@
{
"printWidth": 99999,
"tabWidth": 4
"printWidth": 99999,
"tabWidth": 2
}

6
.vscode/settings.json vendored
View File

@@ -1,6 +1,4 @@
{
"prettier.printWidth": 9999,
"prettier.htmlWhitespaceSensitivity": "ignore", // 불필요한 줄 정렬 방지
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true // 저장 시 자동 포맷
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// "editor.formatOnSave": true // 저장 시 자동 포맷
}

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

@@ -13,12 +13,12 @@ html body {
font-weight: 400;
overflow-x: hidden;
}
html input[type=checkbox] {
html input[type="checkbox"] {
accent-color: #000;
width: 2rem;
height: 2rem;
border-radius: 0.6rem;
border-color: #DEDEDE;
border-color: #dedede;
}
html button {
font-family: "KiaSignature";
@@ -76,7 +76,7 @@ html .hederWarp_n.hBoder .icon-cart {
}
html textarea {
width: 100%;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
outline: 0 none;
border-radius: 0;
padding: 1.5rem 1.7rem;
@@ -97,7 +97,7 @@ html .scrollDisable .logoImg {
background-image: url(../../images/kia/kia-blogo-n.svg);
}
html .mainNotice {
background-color: #F3F3F3;
background-color: #f3f3f3;
height: 11.5rem;
width: 100%;
display: flex;
@@ -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;
@@ -209,7 +209,7 @@ html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
}
}
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dt {
color: #9EA1A2;
color: #9ea1a2;
}
html .mainNotice .noticInnerWarp .noticeInner .mainNiticeList ul li dl dd {
color: #000;
@@ -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;
@@ -476,19 +481,19 @@ html .mainCarNum .oneButton a p:hover {
justify-content: center;
margin-left: initial;
background-color: #fff;
color: #05141F;
color: #05141f;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #9BA1A5;
border-color: #9ba1a5;
}
html .mainCarNum .oneButton a p:hover {
color: #05141F;
border-color: #F3C300;
background-color: #F3C300;
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .mainCarNum .oneButton a:hover p {
color: #05141F;
background-color: #F3C300;
color: #05141f;
background-color: #f3c300;
}
html .mainCarNum .oneButton a:hover::before {
content: "";
@@ -505,7 +510,7 @@ html .footer {
position: relative;
width: 100%;
height: 100%;
background-color: #05141F;
background-color: #05141f;
color: #fff;
font-family: "KiaSignature";
padding-top: 9rem;
@@ -550,7 +555,7 @@ html .footer .kiaInner {
padding-left: 2rem;
padding-right: 2rem;
margin: 0 auto;
background-color: #05141F;
background-color: #05141f;
display: block;
padding-bottom: 10.3rem;
}
@@ -568,7 +573,7 @@ html .footer .kiaInner {
}
}
html .footer .kiaInner .tLeft {
displaY: block;
display: block;
}
@media (min-width: 1240px) {
html .footer .kiaInner .tLeft {
@@ -594,10 +599,10 @@ html .footer .kiaInner .tLeft .companyInfo {
}
}
html .footer .kiaInner .tLeft .companyInfo ul {
displaY: flex;
display: flex;
}
html .footer .kiaInner .tLeft .companyInfo ul li {
displaY: flex;
display: flex;
align-items: center;
color: #aaa;
font-size: 1.2rem;
@@ -619,7 +624,7 @@ html .footer .kiaInner .tLeft .companyInfo ul li:first-child a {
}
html .footer .kiaInner .tLeft .companyInfo ul li::after {
content: "";
displaY: block;
display: block;
margin-left: 1rem;
margin-right: 1rem;
width: 1px;
@@ -642,23 +647,35 @@ html .footer .kiaInner .tLeft .companyInfo ul + ul li {
margin-bottom: 1rem;
}
html .footer .kiaInner .tLeft .companyInfo ul + ul li:nth-child(3)::after {
displaY: none;
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;
}
}
@@ -678,14 +695,14 @@ html .footer .kiaInner .csTime {
}
}
html .footer .kiaInner .csTime p strong {
displaY: block;
display: block;
font-size: 1.6rem;
font-weight: 400;
color: #fff;
margin-bottom: 1rem;
}
html .footer .kiaInner .csTime p span {
displaY: block;
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #aaa;
@@ -744,7 +761,7 @@ html .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-
height: 4.5rem;
font-size: 1.4rem;
padding: 1.4rem 2rem;
background-color: #05141F;
background-color: #05141f;
border: 1px solid #676767;
box-sizing: border-box;
cursor: pointer;
@@ -769,7 +786,7 @@ html .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-
transform: translate(-50%, 0);
width: 1.2rem;
height: 1.2rem;
displaY: block;
display: block;
background: url("/kr/assets/images/common/icon-wplus.svg");
background-size: contain;
background-repeat: no-repeat;
@@ -784,7 +801,7 @@ html .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .list
left: 0;
border: 1px solid #676767;
box-sizing: border-box;
background-color: #05141F;
background-color: #05141f;
z-index: 1;
}
html .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .btn-select.on::after {
@@ -819,7 +836,7 @@ html .footer .kiaInner .familyBoxWarp .familyBox .familyInner .cont-select .list
}
html .footer .kiaInner .familyBoxWarp .searchTextBox {
width: 100%;
border: 1px solid #DEDEDE;
border: 1px solid #dedede;
border-left: 0;
height: 4.5rem;
padding: 1rem 2rem;
@@ -831,11 +848,11 @@ 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 {
displaY: block;
display: block;
width: 2.4rem;
height: 2.4rem;
background-image: url(../../images/common/icon-search.svg);
@@ -854,12 +871,12 @@ html .towButton {
html .towButton .leftBtn,
html .towButton .rightBtn {
height: 5.6rem;
displaY: flex;
display: flex;
width: 100%;
}
html .towButton .leftBtn p,
html .towButton .rightBtn p {
displaY: flex;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
@@ -879,7 +896,7 @@ html .towButton .leftBtn p {
color: #000;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #9BA1A5;
border-color: #9ba1a5;
border-radius: 0 0.4rem 0.4rem 0;
}
html .towButton .leftBtn::before {
@@ -897,9 +914,9 @@ html .towButton .leftBtn::before {
}
}
html .towButton .leftBtn:hover p {
color: #05141F;
border-color: #F3C300;
background-color: #F3C300;
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .towButton .leftBtn:hover::before {
content: "";
@@ -907,24 +924,24 @@ html .towButton .leftBtn:hover::before {
}
@media (hover: hover) and (pointer: fine) {
html .towButton .leftBtn:hover p {
color: #05141F;
border-color: #9BA1A5;
background-color: #fff;
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .towButton .leftBtn:hover::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
}
@media (hover: hover) and (pointer: fine) {
html .towButton .leftBtn:hover p {
color: #05141F;
border-color: #9BA1A5;
background-color: #fff;
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .towButton .leftBtn:hover::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
background-image: url(../../images/kia/svg/kia-btn-yleft.svg);
}
}
html .towButton .rightBtn {
@@ -936,13 +953,14 @@ html .towButton .rightBtn {
}
}
html .towButton .rightBtn p {
background-color: #05141F;
background-color: #05141f;
color: #fff !important;
border: none;
border-right: none;
border-radius: 0.4rem 0 0 0.4rem;
padding-left: 2.8rem;
font-family: "KiaSignature";
text-align: center;
}
html .towButton .rightBtn::after {
content: "";
@@ -962,9 +980,9 @@ html .towButton .rightBtn::after {
}
}
html .towButton .rightBtn:hover p {
color: #05141F;
border-color: #CDD0D2;
background-color: #CDD0D2;
color: #05141f;
border-color: #cdd0d2;
background-color: #cdd0d2;
}
html .towButton .rightBtn:hover::after {
content: "";
@@ -996,8 +1014,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;
}
}
@@ -1015,17 +1033,17 @@ 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;
}
}
html .oneButton button:hover p,
html .oneButton div:hover p,
html .oneButton a:hover p {
color: #05141F;
border-color: #F3C300;
background-color: #F3C300;
color: #05141f;
border-color: #f3c300;
background-color: #f3c300;
}
html .oneButton button:hover::before,
html .oneButton div:hover::before,
@@ -1051,10 +1069,10 @@ html .oneButton a p {
height: 5.6rem;
width: calc(100% - 64px);
background-color: #fff;
color: #05141F;
color: #05141f;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #9BA1A5;
border-color: #9ba1a5;
border-radius: 0;
}
html .oneButtonBlack {
@@ -1079,19 +1097,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;
}
}
@@ -1108,27 +1126,27 @@ 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;
}
}
html .oneButtonBlack button:hover p,
html .oneButtonBlack a:hover p {
color: #05141F;
border-color: #CDD0D2;
background-color: #CDD0D2;
color: #05141f;
border-color: #cdd0d2;
background-color: #cdd0d2;
}
html .oneButtonBlack button:hover::before,
html .oneButtonBlack a:hover::before {
@@ -1150,11 +1168,11 @@ html .oneButtonBlack a p {
justify-content: center;
height: 5.6rem;
width: calc(100% - 64px);
background-color: #05141F;
background-color: #05141f;
color: #fff;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #05141F;
border-color: #05141f;
border-radius: 0;
}
html .productRight .optionWarp .producOption .optionList .productSmallVideo {
@@ -1162,17 +1180,17 @@ html .productRight .optionWarp .producOption .optionList .productSmallVideo {
}
html .productRight .optionWarp .producOption .optionList .checkBtn label {
border-radius: 0.6rem;
border: 1px solid #DEDEDE;
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 {
background-color: #05141F;
border: 1px solid #05141F;
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;
@@ -1185,8 +1203,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 {
@@ -1200,7 +1218,7 @@ html .productRight .optionWarp .producOption .optionList .checkBtn div {
}
html .productRight .optionWarp .producOption .optionList .checkBtn div p span,
html .productRight .optionWarp .producOption .optionList .checkBtn div p strong {
displaY: block;
display: block;
width: 100%;
font-size: 1.6rem;
}
@@ -1216,11 +1234,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;
}
}
@@ -1323,8 +1343,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;
}
}
@@ -1342,8 +1362,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;
}
}
@@ -1351,8 +1371,8 @@ body#faq .csWarp {
.oneButtonLine div:hover p,
.oneButtonLine a:hover p {
color: #fff;
border-color: #05141F;
background-color: #05141F;
border-color: #05141f;
background-color: #05141f;
}
.oneButtonLine button:hover::before,
.oneButtonLine div:hover::before,
@@ -1378,10 +1398,10 @@ body#faq .csWarp {
height: 5.6rem;
width: calc(100% - 64px);
background-color: #fff;
color: #05141F;
color: #05141f;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #9BA1A5;
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

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

File diff suppressed because it is too large Load Diff