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-12 20:33:09 +09:00
parent 4588733421
commit f7e7196d65
9 changed files with 280 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
kr/assets/.DS_Store vendored Normal file
View File

Binary file not shown.

2
kr/assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

234
kr/assets/css/common.scss
View File

File diff suppressed because it is too large Load Diff

10
kr/assets/css/contents.css
View File

@@ -2256,6 +2256,16 @@
height: 3rem; height: 3rem;
} }
} }
.util-area .btn-reviewCount {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
font-size: 1.6rem;
color: #05141f;
cursor: pointer;
border-bottom: 1px solid #05141f;
}
.utilBtnArea { .utilBtnArea {
width: 100%; width: 100%;

2
kr/assets/css/contents.css.map
View File

File diff suppressed because one or more lines are too long

160
kr/assets/css/contents.scss
View File

@@ -11,6 +11,7 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out;
@include tablet { @include tablet {
top: 5.6rem; top: 5.6rem;
} }
@@ -18,6 +19,7 @@
@media (min-width: 1120px) { @media (min-width: 1120px) {
top: 8rem; top: 8rem;
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
height: 35rem; height: 35rem;
} }
@@ -45,6 +47,7 @@
&.case06 { &.case06 {
background-image: url("/kr/assets/images/kia/contents/header06.jpg"); background-image: url("/kr/assets/images/kia/contents/header06.jpg");
} }
&.case07 { &.case07 {
background-image: url("/kr/assets/images/kia/keybg/event-key.png"); background-image: url("/kr/assets/images/kia/keybg/event-key.png");
} }
@@ -195,7 +198,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
& + li { &+li {
margin-top: 38px; margin-top: 38px;
} }
@@ -274,7 +277,7 @@
background-position: 40px 5px; background-position: 40px 5px;
} }
& + li { &+li {
border-left: 1px solid #dedede; border-left: 1px solid #dedede;
} }
@@ -284,7 +287,7 @@
padding-right: 0; padding-right: 0;
padding-left: 0 !important; padding-left: 0 !important;
& + li { &+li {
margin-top: 20px; margin-top: 20px;
border-left: none; border-left: none;
} }
@@ -342,7 +345,7 @@
font-size: 14px; font-size: 14px;
} }
& + dd { &+dd {
color: #676767; color: #676767;
} }
} }
@@ -495,7 +498,7 @@
//스토어 가입안내 //스토어 가입안내
&.caseRegist { &.caseRegist {
section + section { section+section {
margin-top: 80px; margin-top: 80px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
@@ -538,7 +541,7 @@
width: 100%; width: 100%;
} }
li + li { li+li {
margin-top: 30px; margin-top: 30px;
} }
} }
@@ -560,8 +563,8 @@
//상품별 이용안내 목록 //상품별 이용안내 목록
&.caseUsageList { &.caseUsageList {
> section { >section {
& + section { &+section {
margin-top: 80px; margin-top: 80px;
} }
@@ -579,7 +582,7 @@
a { a {
width: calc(50% - 20px); width: calc(50% - 20px);
& + a + a { &+a+a {
margin-top: 40px; margin-top: 40px;
} }
} }
@@ -626,7 +629,7 @@
a { a {
width: calc(50% - 15px); width: calc(50% - 15px);
& + a + a { &+a+a {
margin-top: 30px; margin-top: 30px;
} }
} }
@@ -648,7 +651,7 @@
a { a {
width: calc(50% - 10px); width: calc(50% - 10px);
& + a + a { &+a+a {
margin-top: 20px; margin-top: 20px;
} }
} }
@@ -669,14 +672,14 @@
div.listType02 a { div.listType02 a {
width: 100%; width: 100%;
& + a { &+a {
margin-top: 20px; margin-top: 20px;
} }
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
& + section { &+section {
margin-top: 60px; margin-top: 60px;
} }
@@ -687,7 +690,7 @@
div.listType01 a { div.listType01 a {
width: 100%; width: 100%;
& + a { &+a {
margin-top: 20px; margin-top: 20px;
} }
} }
@@ -701,7 +704,7 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
> section + section { >section+section {
margin-top: 90px; margin-top: 90px;
} }
@@ -789,7 +792,7 @@
display: none; display: none;
} }
> ul { >ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -904,7 +907,7 @@
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
> p { >p {
margin-top: 28px; margin-top: 28px;
color: #676767; color: #676767;
} }
@@ -913,7 +916,7 @@
width: 100%; width: 100%;
} }
> section { >section {
letter-spacing: -4px; letter-spacing: -4px;
&:first-of-type { &:first-of-type {
@@ -960,10 +963,10 @@
letter-spacing: 0; letter-spacing: 0;
} }
> div { >div {
display: inline-block; display: inline-block;
& + div { &+div {
margin-left: 40px; margin-left: 40px;
} }
@@ -987,7 +990,7 @@
border: 1px solid #dedede; border: 1px solid #dedede;
} }
& + a { &+a {
margin-left: 15px; margin-left: 15px;
} }
} }
@@ -1002,7 +1005,7 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
justify-content: flex-start; justify-content: flex-start;
> section { >section {
&:first-of-type { &:first-of-type {
width: 100%; width: 100%;
} }
@@ -1028,8 +1031,8 @@
} }
@media (max-width: 680px) { @media (max-width: 680px) {
> section { >section {
> div { >div {
&:first-of-type { &:first-of-type {
width: 100%; width: 100%;
} }
@@ -1046,11 +1049,11 @@
} }
@media (max-width: 500px) { @media (max-width: 500px) {
> p { >p {
margin-top: 23px; margin-top: 23px;
} }
> section { >section {
@media (max-width: 359px) { @media (max-width: 359px) {
&:first-of-type { &:first-of-type {
display: flex; display: flex;
@@ -1058,14 +1061,14 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
> div { >div {
display: unset; display: unset;
margin-left: 0 !important; margin-left: 0 !important;
} }
} }
} }
& + section { &+section {
margin-top: 28px !important; margin-top: 28px !important;
} }
@@ -1080,7 +1083,7 @@
width: 100% !important; width: 100% !important;
} }
> div { >div {
strong { strong {
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -1101,7 +1104,7 @@
.item { .item {
width: calc(50% - 10px); width: calc(50% - 10px);
& + .item + .item { &+.item+.item {
margin-top: 14px; margin-top: 14px;
} }
} }
@@ -1127,12 +1130,13 @@
.caseFunction { .caseFunction {
.functionDetail { .functionDetail {
.itemWrap { .itemWrap {
.item, .item,
p { p {
width: 100%; width: 100%;
} }
.item + .item { .item+.item {
margin-top: 14px; margin-top: 14px;
} }
@@ -1168,7 +1172,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
> section + section { >section+section {
margin-top: 60px; margin-top: 60px;
} }
@@ -1199,7 +1203,7 @@
//원격 스마트 주차 보조2 (RSPA2) 기능 소개 //원격 스마트 주차 보조2 (RSPA2) 기능 소개
&.caseRspa2 { &.caseRspa2 {
> section + section { >section+section {
margin-top: 90px; margin-top: 90px;
@media (max-width: 500px) { @media (max-width: 500px) {
@@ -1228,7 +1232,7 @@
position: relative; position: relative;
width: calc(20% - 12px); width: calc(20% - 12px);
& + li { &+li {
margin-left: 15px; margin-left: 15px;
} }
@@ -1253,7 +1257,7 @@
li { li {
width: calc(100% / 3 - 10px); width: calc(100% / 3 - 10px);
& + li + li + li { &+li+li+li {
margin-top: 15px; margin-top: 15px;
} }
@@ -1269,11 +1273,11 @@
li { li {
width: calc(50% - 7px); width: calc(50% - 7px);
& + li { &+li {
margin-left: 14px; margin-left: 14px;
} }
& + li + li { &+li+li {
margin-top: 15px; margin-top: 15px;
} }
@@ -1301,7 +1305,7 @@
width: 100%; width: 100%;
margin-left: 0 !important; margin-left: 0 !important;
& + li { &+li {
margin-top: 15px; margin-top: 15px;
} }
} }
@@ -1310,7 +1314,7 @@
} }
.howtobuy { .howtobuy {
> div { >div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@@ -1318,7 +1322,7 @@
justify-content: space-between; justify-content: space-between;
margin-top: 40px; margin-top: 40px;
> * { >* {
position: relative; position: relative;
width: calc(100% / 3 - 8px); width: calc(100% / 3 - 8px);
padding: 30px 30px 110px; padding: 30px 30px 110px;
@@ -1362,7 +1366,7 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
> * { >* {
padding: 25px 25px 79px; padding: 25px 25px 79px;
background-position: left 20px bottom 20px; background-position: left 20px bottom 20px;
background-size: 40px; background-size: 40px;
@@ -1375,10 +1379,10 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
> * { >* {
width: 100%; width: 100%;
& + * { &+* {
margin-top: 10px; margin-top: 10px;
} }
} }
@@ -1404,8 +1408,8 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
> div { >div {
h3 + p { h3+p {
margin-top: 15px; margin-top: 15px;
} }
@@ -1423,7 +1427,7 @@
margin-left: -15px; margin-left: -15px;
padding-top: 30px; padding-top: 30px;
> div { >div {
align-items: stretch; align-items: stretch;
} }
@@ -1550,11 +1554,11 @@
position: relative; position: relative;
margin-bottom: 10rem; margin-bottom: 10rem;
& + .storeGuideItem { &+.storeGuideItem {
margin-top: 20px; margin-top: 20px;
} }
> header { >header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@@ -1584,7 +1588,7 @@
} }
} }
.titleCase03 + strong { .titleCase03+strong {
padding-bottom: 8px !important; padding-bottom: 8px !important;
} }
@@ -1617,7 +1621,7 @@
} }
} }
> b { >b {
display: block; display: block;
margin: 20px 0 8px; margin: 20px 0 8px;
font-size: 14px; font-size: 14px;
@@ -1667,7 +1671,7 @@
} }
} }
.swiper-horizontal > .swiper-scrollbar, .swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal { .swiper-scrollbar.swiper-scrollbar-horizontal {
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -1689,7 +1693,7 @@
height: 68px; height: 68px;
} }
.swiper-scrollbar-lock + .swiper-scrollbar-after-space { .swiper-scrollbar-lock+.swiper-scrollbar-after-space {
display: none; display: none;
} }
@@ -1728,7 +1732,7 @@
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
& + .storeGuideItem { &+.storeGuideItem {
margin-top: 0; margin-top: 0;
} }
@@ -1788,7 +1792,7 @@
} }
} }
.swiper-horizontal > .swiper-scrollbar, .swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal { .swiper-scrollbar.swiper-scrollbar-horizontal {
width: calc(100% - 40px); width: calc(100% - 40px);
} }
@@ -1898,18 +1902,18 @@
align-items: center; align-items: center;
padding-top: 50px; padding-top: 50px;
> div { >div {
width: 50%; width: 50%;
&:first-child { &:first-child {
padding-right: 50px; padding-right: 50px;
} }
h3 + p { h3+p {
margin-top: 20px; margin-top: 20px;
} }
p + p { p+p {
margin-top: 10px; margin-top: 10px;
color: #676767; color: #676767;
} }
@@ -1927,7 +1931,7 @@
width: 50%; width: 50%;
border-radius: 6px; border-radius: 6px;
& + div { &+div {
padding-left: 50px; padding-left: 50px;
} }
} }
@@ -1946,11 +1950,11 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
> div:first-child { >div:first-child {
padding-right: 30px; padding-right: 30px;
} }
img + div { img+div {
padding-left: 30px; padding-left: 30px;
} }
@@ -1960,7 +1964,8 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
> div,
>div,
img { img {
width: 100%; width: 100%;
padding-right: 0 !important; padding-right: 0 !important;
@@ -2097,7 +2102,7 @@
background-position: 25px 25px; background-position: 25px 25px;
font-size: 16px; font-size: 16px;
& + a { &+a {
margin-top: 10px; margin-top: 10px;
} }
@@ -2357,7 +2362,7 @@
} }
} }
.btn-select.on + .list-member { .btn-select.on+.list-member {
display: block; display: block;
} }
@@ -2365,8 +2370,10 @@
font-size: 1.6rem; font-size: 1.6rem;
line-height: 2; line-height: 2;
box-sizing: border-box; box-sizing: border-box;
button { button {
font-size: 1.4rem; font-size: 1.4rem;
@include tablet { @include tablet {
font-size: 1.6rem; font-size: 1.6rem;
} }
@@ -2467,7 +2474,7 @@
} }
} }
.btn-select.on + .list-member { .btn-select.on+.list-member {
display: block; display: block;
} }
@@ -2572,7 +2579,7 @@
} }
} }
.btn-select.on + .list-member { .btn-select.on+.list-member {
display: block; display: block;
} }
@@ -2598,6 +2605,7 @@
} }
} }
} }
.util-area { .util-area {
position: relative; position: relative;
display: flex; display: flex;
@@ -2605,40 +2613,58 @@
align-items: center; align-items: center;
gap: 1.6rem; gap: 1.6rem;
margin-bottom: 1.6rem; margin-bottom: 1.6rem;
@media (min-width: 768px) { @media (min-width: 768px) {
gap: 2rem; gap: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.btn-wish { .btn-wish {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
background: url(../images/common/icon_heart.png) no-repeat center / 100% auto; background: url(../images/common/icon_heart.png) no-repeat center / 100% auto;
text-indent: -9999px; text-indent: -9999px;
cursor: pointer; cursor: pointer;
@media (min-width: 768px) { @media (min-width: 768px) {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
} }
.btn-share { .btn-share {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
background: url(../images/common/icon_share.png) no-repeat center / 100% auto; background: url(../images/common/icon_share.png) no-repeat center / 100% auto;
text-indent: -9999px; text-indent: -9999px;
cursor: pointer; cursor: pointer;
@media (min-width: 768px) { @media (min-width: 768px) {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
} }
.btn-reviewCount {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
font-size: 1.6rem;
color: #05141f;
cursor: pointer;
border-bottom: 1px solid #05141f;
}
} }
.utilBtnArea { .utilBtnArea {
width: 100%; width: 100%;
padding: 4rem 0; padding: 4rem 0;
@include tablet { @include tablet {
padding: 4rem 0; padding: 4rem 0;
} }
.utilBtnInner { .utilBtnInner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -2646,11 +2672,13 @@
max-width: 120rem; max-width: 120rem;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 2rem;
@include tablet { @include tablet {
padding: 0; padding: 0;
} }
.util-area { .util-area {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }

13
kr/assets/js/common.js
View File

@@ -1694,3 +1694,16 @@ function copyShareLink() {
} }
} }
} }
// 앵커로 스크롤 이동 함수
function goToAnchor(anchorId) {
const $target = $("#" + anchorId);
if ($target.length > 0) {
$("html, body").animate(
{
scrollTop: $target.offset().top - 60,
},
400
);
}
}

2
kr/mail-form/Case09.스트리밍프리미엄_정기결제실패안내.html
View File

@@ -97,7 +97,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="padding-top: 60px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left">※ 스트리밍 프리미엄 데이터 요금제는 통신사 정책에 따라 사후 일할 계산됩니다. 문의: 기아 커넥트 센터 1899-2121</td> <td style="padding-top: 60px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left">※ 스트리밍 프리미엄 데이터 요금제는 통신사 정책에 따라 사후 일할 계산됩니다. <br />문의: 기아 커넥트 센터 1899-2121</td>
</tr> </tr>
</table> </table>
</td> </td>

17
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -438,6 +438,7 @@
<div class="util-area"> <div class="util-area">
<button type="button" class="btn-share" onclick="openSharePopup()">공유하기</button> <button type="button" class="btn-share" onclick="openSharePopup()">공유하기</button>
<button type="button" class="btn-wish">좋아요</button> <button type="button" class="btn-wish">좋아요</button>
<button type="button" onclick="goToAnchor('pdpReviewArea')" class="btn-reviewCount">리뷰 8개</button>
</div> </div>
<h1> <h1>
디즈니 디스플레이 테마 디즈니 디스플레이 테마
@@ -1100,33 +1101,33 @@
</button> </button>
<ul> <ul>
<li> <li>
<button onclick="open_layer_popup('photoReviewDetail_Popup')"> <button onclick="open_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll')">
<img src="../assets/images/kia/product-img/phptoreview-temp1.jpg" alt="리뷰 이미지"> <img src="../assets/images/kia/product-img/phptoreview-temp1.jpg" alt="리뷰 이미지">
<div class="count">3</div> <div class="count">3</div>
</button> </button>
</li> </li>
<li> <li>
<button onclick="open_layer_popup('photoReviewDetail_Popup')"> <button onclick="open_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll')">
<img src="../assets/images/kia/product-img/phptoreview-temp2.jpg" alt="리뷰 이미지"> <img src="../assets/images/kia/product-img/phptoreview-temp2.jpg" alt="리뷰 이미지">
</button> </button>
</li> </li>
<li> <li>
<button onclick="open_layer_popup('photoReviewDetail_Popup')"> <button onclick="open_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll')">
<img src="../assets/images/kia/product-img/phptoreview-temp3.jpg" alt="리뷰 이미지"> <img src="../assets/images/kia/product-img/phptoreview-temp3.jpg" alt="리뷰 이미지">
</button> </button>
</li> </li>
<li> <li>
<button onclick="open_layer_popup('photoReviewDetail_Popup')"> <button onclick="open_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll')">
<img src="../assets/images/kia/product-img/phptoreview-temp5.jpg" alt="리뷰 이미지"> <img src="../assets/images/kia/product-img/phptoreview-temp5.jpg" alt="리뷰 이미지">
</button> </button>
</li> </li>
<li> <li>
<button onclick="open_layer_popup('photoReviewDetail_Popup')"> <button onclick="open_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll')">
<img src="../assets/images/kia/product-img/phptoreview-temp6.jpg" alt="리뷰 이미지"> <img src="../assets/images/kia/product-img/phptoreview-temp6.jpg" alt="리뷰 이미지">
</button> </button>
</li> </li>
<li> <li>
<button onclick="open_layer_popup('photoReviewDetail_Popup')"> <button onclick="open_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll')">
<img src="../assets/images/kia/product-img/phptoreview-temp2.jpg" alt="리뷰 이미지"> <img src="../assets/images/kia/product-img/phptoreview-temp2.jpg" alt="리뷰 이미지">
</button> </button>
</li> </li>
@@ -1744,7 +1745,7 @@
<dd> <dd>
<div class="selectInner"> <div class="selectInner">
<div class="cont-select"> <div class="cont-select">
<button class="btn-select" data-placeholder="리뷰를 작성하실 옵션을 선택하세요." data-placeholder-mobile="제품사양을 선택하세요."></button> <button class="btn-select" data-placeholder="리뷰를 작성하실 옵션을 선택하세요." data-placeholder-mobile="리뷰를 작성하실 옵션을 선택하세요."></button>
<ul class="list-member"> <ul class="list-member">
<li><button type="button">디즈니 미키와 친구들</button></li> <li><button type="button">디즈니 미키와 친구들</button></li>
<li><button type="button">마블 어벤져스 어셈블</button></li> <li><button type="button">마블 어벤져스 어셈블</button></li>
@@ -1974,7 +1975,7 @@
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<strong>포토리뷰 상세</strong> <strong>포토리뷰 상세</strong>
<button class="btn-photoList" onClick="open_layer_popup('photoReviewAll_Popup'); close_layer_popup('photoReviewDetail_Popup');">포토리뷰 전체보기</button> <button class="btn-photoList" onClick="open_layer_popup('photoReviewAll_Popup'); close_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll');">포토리뷰 전체보기</button>
<button class="btn-close" onClick="close_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll');"><p>닫기</p></button> <button class="btn-close" onClick="close_layer_popup('photoReviewDetail_Popup', 'toPhotoReviewAll');"><p>닫기</p></button>
</div> </div>