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

17
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -438,6 +438,7 @@
<div class="util-area">
<button type="button" class="btn-share" onclick="openSharePopup()">공유하기</button>
<button type="button" class="btn-wish">좋아요</button>
<button type="button" onclick="goToAnchor('pdpReviewArea')" class="btn-reviewCount">리뷰 8개</button>
</div>
<h1>
디즈니 디스플레이 테마
@@ -1100,33 +1101,33 @@
</button>
<ul>
<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="리뷰 이미지">
<div class="count">3</div>
</button>
</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="리뷰 이미지">
</button>
</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="리뷰 이미지">
</button>
</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="리뷰 이미지">
</button>
</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="리뷰 이미지">
</button>
</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="리뷰 이미지">
</button>
</li>
@@ -1744,7 +1745,7 @@
<dd>
<div class="selectInner">
<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">
<li><button type="button">디즈니 미키와 친구들</button></li>
<li><button type="button">마블 어벤져스 어셈블</button></li>
@@ -1974,7 +1975,7 @@
<div class="content">
<div class="title">
<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>
</div>