Update styles in contents and pdp_detail CSS/SCSS files: 포토리뷰 수정, DM 수정 - 2시간간

This commit is contained in:
2026-01-15 22:26:47 +09:00
parent c67e0944f2
commit 90a7cf6566
9 changed files with 80 additions and 81 deletions

View File

@@ -2261,7 +2261,7 @@
top: 50%; top: 50%;
right: 0; right: 0;
transform: translate(0, -50%); transform: translate(0, -50%);
font-size: 1.6rem; font-size: 1.8rem;
color: #05141f; color: #05141f;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #05141f; border-bottom: 1px solid #05141f;

File diff suppressed because one or more lines are too long

View File

@@ -198,7 +198,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
&+li { & + li {
margin-top: 38px; margin-top: 38px;
} }
@@ -277,7 +277,7 @@
background-position: 40px 5px; background-position: 40px 5px;
} }
&+li { & + li {
border-left: 1px solid #dedede; border-left: 1px solid #dedede;
} }
@@ -287,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;
} }
@@ -345,7 +345,7 @@
font-size: 14px; font-size: 14px;
} }
&+dd { & + dd {
color: #676767; color: #676767;
} }
} }
@@ -498,7 +498,7 @@
//스토어 가입안내 //스토어 가입안내
&.caseRegist { &.caseRegist {
section+section { section + section {
margin-top: 80px; margin-top: 80px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
@@ -541,7 +541,7 @@
width: 100%; width: 100%;
} }
li+li { li + li {
margin-top: 30px; margin-top: 30px;
} }
} }
@@ -563,8 +563,8 @@
//상품별 이용안내 목록 //상품별 이용안내 목록
&.caseUsageList { &.caseUsageList {
>section { > section {
&+section { & + section {
margin-top: 80px; margin-top: 80px;
} }
@@ -582,7 +582,7 @@
a { a {
width: calc(50% - 20px); width: calc(50% - 20px);
&+a+a { & + a + a {
margin-top: 40px; margin-top: 40px;
} }
} }
@@ -629,7 +629,7 @@
a { a {
width: calc(50% - 15px); width: calc(50% - 15px);
&+a+a { & + a + a {
margin-top: 30px; margin-top: 30px;
} }
} }
@@ -651,7 +651,7 @@
a { a {
width: calc(50% - 10px); width: calc(50% - 10px);
&+a+a { & + a + a {
margin-top: 20px; margin-top: 20px;
} }
} }
@@ -672,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;
} }
@@ -690,7 +690,7 @@
div.listType01 a { div.listType01 a {
width: 100%; width: 100%;
&+a { & + a {
margin-top: 20px; margin-top: 20px;
} }
} }
@@ -704,7 +704,7 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
>section+section { > section + section {
margin-top: 90px; margin-top: 90px;
} }
@@ -792,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;
@@ -907,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;
} }
@@ -916,7 +916,7 @@
width: 100%; width: 100%;
} }
>section { > section {
letter-spacing: -4px; letter-spacing: -4px;
&:first-of-type { &:first-of-type {
@@ -963,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;
} }
@@ -990,7 +990,7 @@
border: 1px solid #dedede; border: 1px solid #dedede;
} }
&+a { & + a {
margin-left: 15px; margin-left: 15px;
} }
} }
@@ -1005,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%;
} }
@@ -1031,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%;
} }
@@ -1049,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;
@@ -1061,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;
} }
@@ -1083,7 +1083,7 @@
width: 100% !important; width: 100% !important;
} }
>div { > div {
strong { strong {
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -1104,7 +1104,7 @@
.item { .item {
width: calc(50% - 10px); width: calc(50% - 10px);
&+.item+.item { & + .item + .item {
margin-top: 14px; margin-top: 14px;
} }
} }
@@ -1130,13 +1130,12 @@
.caseFunction { .caseFunction {
.functionDetail { .functionDetail {
.itemWrap { .itemWrap {
.item, .item,
p { p {
width: 100%; width: 100%;
} }
.item+.item { .item + .item {
margin-top: 14px; margin-top: 14px;
} }
@@ -1172,7 +1171,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
>section+section { > section + section {
margin-top: 60px; margin-top: 60px;
} }
@@ -1203,7 +1202,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) {
@@ -1232,7 +1231,7 @@
position: relative; position: relative;
width: calc(20% - 12px); width: calc(20% - 12px);
&+li { & + li {
margin-left: 15px; margin-left: 15px;
} }
@@ -1257,7 +1256,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;
} }
@@ -1273,11 +1272,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;
} }
@@ -1305,7 +1304,7 @@
width: 100%; width: 100%;
margin-left: 0 !important; margin-left: 0 !important;
&+li { & + li {
margin-top: 15px; margin-top: 15px;
} }
} }
@@ -1314,7 +1313,7 @@
} }
.howtobuy { .howtobuy {
>div { > div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@@ -1322,7 +1321,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;
@@ -1366,7 +1365,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;
@@ -1379,10 +1378,10 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
>* { > * {
width: 100%; width: 100%;
&+* { & + * {
margin-top: 10px; margin-top: 10px;
} }
} }
@@ -1408,8 +1407,8 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
>div { > div {
h3+p { h3 + p {
margin-top: 15px; margin-top: 15px;
} }
@@ -1427,7 +1426,7 @@
margin-left: -15px; margin-left: -15px;
padding-top: 30px; padding-top: 30px;
>div { > div {
align-items: stretch; align-items: stretch;
} }
@@ -1554,11 +1553,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;
@@ -1588,7 +1587,7 @@
} }
} }
.titleCase03+strong { .titleCase03 + strong {
padding-bottom: 8px !important; padding-bottom: 8px !important;
} }
@@ -1621,7 +1620,7 @@
} }
} }
>b { > b {
display: block; display: block;
margin: 20px 0 8px; margin: 20px 0 8px;
font-size: 14px; font-size: 14px;
@@ -1671,7 +1670,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;
@@ -1693,7 +1692,7 @@
height: 68px; height: 68px;
} }
.swiper-scrollbar-lock+.swiper-scrollbar-after-space { .swiper-scrollbar-lock + .swiper-scrollbar-after-space {
display: none; display: none;
} }
@@ -1732,7 +1731,7 @@
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
&+.storeGuideItem { & + .storeGuideItem {
margin-top: 0; margin-top: 0;
} }
@@ -1792,7 +1791,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);
} }
@@ -1902,18 +1901,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;
} }
@@ -1931,7 +1930,7 @@
width: 50%; width: 50%;
border-radius: 6px; border-radius: 6px;
&+div { & + div {
padding-left: 50px; padding-left: 50px;
} }
} }
@@ -1950,11 +1949,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;
} }
@@ -1964,8 +1963,7 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
> div,
>div,
img { img {
width: 100%; width: 100%;
padding-right: 0 !important; padding-right: 0 !important;
@@ -2102,7 +2100,7 @@
background-position: 25px 25px; background-position: 25px 25px;
font-size: 16px; font-size: 16px;
&+a { & + a {
margin-top: 10px; margin-top: 10px;
} }
@@ -2362,7 +2360,7 @@
} }
} }
.btn-select.on+.list-member { .btn-select.on + .list-member {
display: block; display: block;
} }
@@ -2474,7 +2472,7 @@
} }
} }
.btn-select.on+.list-member { .btn-select.on + .list-member {
display: block; display: block;
} }
@@ -2579,7 +2577,7 @@
} }
} }
.btn-select.on+.list-member { .btn-select.on + .list-member {
display: block; display: block;
} }
@@ -2650,7 +2648,7 @@
top: 50%; top: 50%;
right: 0; right: 0;
transform: translate(0, -50%); transform: translate(0, -50%);
font-size: 1.6rem; font-size: 1.8rem;
color: #05141f; color: #05141f;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #05141f; border-bottom: 1px solid #05141f;
@@ -2681,4 +2679,4 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }

View File

@@ -1703,7 +1703,7 @@
.reviewArea .reviewInner .reviewList .item.best .textArea .info:after { .reviewArea .reviewInner .reviewList .item.best .textArea .info:after {
content: ""; content: "";
display: block; display: block;
width: 6.8rem; width: 7.7rem;
height: 2.4rem; height: 2.4rem;
margin-left: 0; margin-left: 0;
margin-top: 0.8rem; margin-top: 0.8rem;

View File

@@ -1838,7 +1838,7 @@
&:after { &:after {
content: ""; content: "";
display: block; display: block;
width: 6.8rem; width: 7.7rem;
height: 2.4rem; height: 2.4rem;
margin-left: 0; margin-left: 0;
margin-top: 0.8rem; margin-top: 0.8rem;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -64,7 +64,9 @@
</tr> </tr>
<tr> <tr>
<td style="padding-top: 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left"> <td style="padding-top: 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left">
홍*동 고객님만을 위한 특별한 혜택이 시작됩니다. <br>무약정 상품을 계속해서 약정 요금으로 이용하실 수 있습니다. 홍*동 고객님께서 이용 중인 스트리밍 프리미엄 상품의 약정 기간 만료 및 <br />
무약정 요금제 전환이 완료되었습니다. <br />
약정 상품과 동일한 무약정 요금으로 구독이 유지됩니다.
</td> </td>
</tr> </tr>

View File

@@ -64,7 +64,7 @@
</tr> </tr>
<tr> <tr>
<td style="padding-top: 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left"> <td style="padding-top: 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left">
홍*동 고객님, 기아 커넥트 스토어에서 이용 중이신 스트리밍 프리미엄 약정 <br>상품의 이용 기간이 곧 종료됨을 알려 드립니다. 홍*동 고객님, 기아 커넥트 스토어에서 이용 중이신 스트리밍 프리미엄 약정 <br>상품의 이용 기간이 곧 종료됨을 알려드립니다.
</td> </td>
</tr> </tr>
@@ -90,10 +90,7 @@
<table width="540" border="0" cellpadding="0" cellspacing="0" style="border-top: 1px solid #dedede"> <table width="540" border="0" cellpadding="0" cellspacing="0" style="border-top: 1px solid #dedede">
<tr> <tr>
<td width="402" style="padding: 30px 0 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; text-align: left"> <td width="402" style="padding: 30px 0 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; text-align: left">
약정 종료 후에는 아래와 같이 서비스가 전환 됩니다. <br> 12회차 약정이 모두 완료되어, 다음 달부터는 위약금 없는 무약정 요금제로 <br>자동 전환되며, 동일한 요금으로 이용하실 수 있습니다.
※ 마이페이지에서 무약정 상품 요금 이용에 동의하신 경우, 별도 신청 없이 무약정 상품으로 자동 전환됩니다. <br>
※ 약정 기간을 모두 이용하신 고객님께는, 무약정 상품(월 24,000원)을 계속해서 약정 요금(월 11,000원)으로 이용하실 수 있는 특별 혜택이 제공됩니다. <br>
※ 자동 전환에 동의하지 않으신 고객님도 언제든지 무약정 상품을 약정 요금으로 다시 구매하실 수 있습니다.
</td> </td>
</tr> </tr>
</table> </table>

View File

@@ -62,8 +62,10 @@
</tr> </tr>
<tr> <tr>
<td style="padding-top: 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left"> <td style="padding-top: 30px; font-family: 'arial,Helvetica,sans-serif'; font-size: 16px; font-weight: 400; color: #000000; line-height: 24px; text-align: left">
홍* 고객님, 예약하신 무약정 할인 요금제의 결제가 실패하여 서비스 해지되었습니다. <br /><br /> 홍* 고객님, 예약하신 무약정 할인 요금제의 결제가 실패하여 서비스 <br />
지금 기아 커넥트 스토어에서 상품을 다시 구독하시면, 기존 무약정 할인 요금제로 이용할 수 있습니다. 해지되었습니다. <br /><br />
지금 기아 커넥트 스토어에서 상품을 다시 구독하시면, 동일한 요금의 위약금 없는 무약정 할인 요금제로 이용할 수 있습니다.
</td> </td>
</tr> </tr>
<tr> <tr>