마수동, 광수동 수정 중

This commit is contained in:
2024-11-17 21:33:45 +09:00
parent d2a1e9fddf
commit 6f2e197911
8 changed files with 448 additions and 80 deletions

View File

@@ -2214,6 +2214,9 @@ video::-webkit-media-controls {
width: 16rem;
}
}
.alertPopup .popInner .btnWarp.mg-t {
margin-top: 5rem;
}
.alertPopup .popInner .counponBtn {
width: 16rem;
margin: 0 auto;
@@ -3252,7 +3255,10 @@ video::-webkit-media-controls {
max-width: 100rem;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
padding: 0 3rem;
}
.policyPopup .popInner .content u {
text-decoration: underline;
}
.policyPopup .popInner .content .title strong {
display: flex;
@@ -3271,8 +3277,8 @@ video::-webkit-media-controls {
}
.policyPopup .popInner .content .editorText {
margin-top: 3rem;
height: calc(100vh - 342px);
overflow-y: scroll;
max-height: calc(90vh - 342px);
overflow-y: auto;
}
.policyPopup .popInner .content .editorText .termsContents {
margin-top: 4rem;
@@ -3350,7 +3356,43 @@ video::-webkit-media-controls {
.policyPopup .popInner .content .carswBtn {
width: 16rem;
margin: 0 auto;
margin-top: 5rem;
}
.policyPopup .popInner .content .marketingCheck {
display: flex;
justify-content: space-between;
margin-top: 3rem;
flex-direction: column;
}
@media (min-width: 768px) {
.policyPopup .popInner .content .marketingCheck {
flex-direction: row;
}
}
.policyPopup .popInner .content .marketingCheck > span {
display: block;
}
.policyPopup .popInner .content .marketingCheck .agree-area {
display: block;
gap: 5rem;
}
@media (min-width: 768px) {
.policyPopup .popInner .content .marketingCheck .agree-area {
display: flex;
}
}
.policyPopup .popInner .content .marketingCheck .agree-area label {
display: flex;
align-items: center;
margin-top: 3rem;
}
@media (min-width: 768px) {
.policyPopup .popInner .content .marketingCheck .agree-area label {
margin-top: 0;
}
}
.policyPopup .popInner .content .marketingCheck .agree-area label span {
margin-left: 1rem;
}
.termsContents {
@@ -3789,6 +3831,28 @@ video::-webkit-media-controls {
.table-wrap table td {
border: 1px solid #e6e6e6;
}
.table-wrap.type2 table {
table-layout: fixed;
}
.table-wrap.type2 table th {
padding: 2.3rem 1.8rem;
font-size: 1.6rem;
color: #000;
}
@media (max-width: 768px) {
.table-wrap.type2 table th {
padding: 1.8rem 1rem;
}
}
.table-wrap.type2 table td {
font-size: 1.4rem;
color: #676767;
}
@media (max-width: 768px) {
.table-wrap.type2 table td {
padding: 1.8rem 1rem;
}
}
.noticeTextUnderTable {
margin-top: 2.4rem;

File diff suppressed because one or more lines are too long

View File

@@ -2147,6 +2147,9 @@ video::-webkit-media-controls {
@include tablet {
width: 16rem;
}
&.mg-t {
margin-top:5rem;
}
}
.counponBtn {
width: 16rem;
@@ -3096,7 +3099,10 @@ video::-webkit-media-controls {
max-width: 100rem;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
padding: 0 3rem;
u {
text-decoration: underline;
}
.title {
strong {
display: flex;
@@ -3114,8 +3120,8 @@ video::-webkit-media-controls {
}
.editorText {
margin-top: 3rem;
height: calc(100vh - 342px);
overflow-y: scroll;
max-height: calc(90vh - 342px);
overflow-y:auto;
.termsContents {
margin-top: 4rem;
h2 {
@@ -3219,7 +3225,39 @@ video::-webkit-media-controls {
.carswBtn {
width: 16rem;
margin: 0 auto;
margin-top: 3rem;
margin-top: 5rem;
}
.marketingCheck {
display: flex;
justify-content: space-between;
margin-top:3rem;
flex-direction: column;
@include tablet {
flex-direction: row;
}
> span {
display: block;
}
.agree-area {
display: block;
gap: 5rem;
@include tablet {
display: flex;
}
label {
display: flex;
align-items: center;
margin-top:3rem;
@include tablet {
margin-top:0;
}
span {
margin-left: 1rem;
}
}
}
}
}
}
@@ -3612,6 +3650,26 @@ video::-webkit-media-controls {
border: 1px solid #e6e6e6;
}
}
&.type2 {
table {
table-layout: fixed;
th {
padding: 2.3rem 1.8rem;
font-size: 1.6rem;
color:#000;
@include maxtablet {
padding: 1.8rem 1rem;
}
}
td {
font-size: 1.4rem;
color:#676767;
@include maxtablet {
padding: 1.8rem 1rem;
}
}
}
}
}
.noticeTextUnderTable {
margin-top: 2.4rem;

View File

@@ -2098,6 +2098,7 @@ pre {
}
.contentWarp .mypageWarp .rightConWarp .myAccount .marketingAgrre .marketingCheck span,
.contentWarp .mypageWarp .rightConWarp .myAccount .outAgrre .marketingCheck span {
flex: 1;
font-size: 1.6rem;
font-weight: 400;
}
@@ -2402,6 +2403,82 @@ pre {
.contentWarp .mypageWarp .rightConWarp .myAccount .outInfo p + p {
margin-top: 2rem;
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation {
padding: 0;
border: 0;
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p {
display: flex;
align-items: center;
font-size: 1.4rem;
}
@media (min-width: 768px) {
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p {
font-size: 1.6rem;
}
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p strong {
font-size: 1.8rem;
font-weight: 600;
}
@media (min-width: 768px) {
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p strong {
font-size: 2.4rem;
}
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p span {
font-size: 1.4rem;
font-weight: 400;
margin-left: 1rem;
}
@media (min-width: 768px) {
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p span {
font-size: 1.8rem;
}
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p:nth-child(2) {
margin-top: 2rem;
color: #676767;
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div p:nth-child(3) {
margin-top: 1rem;
color: #676767;
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a {
font-size: 1.4rem;
color: #676767;
display: flex;
align-items: center;
justify-content: space-between;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@media (min-width: 1025px) {
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a {
font-size: 1.6rem;
width: 13.5rem;
}
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a span {
display: block;
border-bottom: 1px solid #676767;
}
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a::after {
content: "";
width: 1.6rem;
height: 2.5rem;
display: block;
margin-left: 0.5rem;
background: url(/kr/assets/images/common/icon-tbarrow.svg) center right no-repeat;
background-size: 1.4rem;
transform: rotate(-90deg);
}
@media (min-width: 768px) {
.contentWarp .mypageWarp .rightConWarp .myAccount.reNew .myinfomation > div a::after {
background-size: 1.6rem;
}
}
.contentWarp .mypageWarp .rightConWarp .memberOut {
display: block;
width: 20rem;

File diff suppressed because one or more lines are too long

View File

@@ -2227,6 +2227,7 @@ pre {
}
span {
flex: 1;
font-size: 1.6rem;
font-weight: 400;
@@ -2555,6 +2556,89 @@ pre {
margin-top: 2rem;
}
}
&.reNew {
.myinfomation {
padding: 0;
border:0;
>div {
p {
display: flex;
align-items: center;
font-size: 1.4rem;
@include tablet {
font-size: 1.6rem;
}
strong {
font-size: 1.8rem;
font-weight: 600;
@include tablet {
font-size: 2.4rem;
}
}
span {
font-size: 1.4rem;
font-weight: 400;
margin-left: 1rem;
@include tablet {
font-size: 1.8rem;
}
}
&:nth-child(2) {
margin-top: 2rem;
color: #676767;
}
&:nth-child(3) {
margin-top: 1rem;
color: #676767;
}
}
a {
font-size: 1.4rem;
color: #676767;
display: flex;
align-items: center;
justify-content: space-between;
width: fit-content;
@include desktopMin {
font-size: 1.6rem;
width: 13.5rem;
}
span {
display: block;
border-bottom: 1px solid #676767;
}
&::after {
content: "";
width: 1.6rem;
height: 2.5rem;
display: block;
margin-left: 0.5rem;
background: url(/kr/assets/images/common/icon-tbarrow.svg) center right no-repeat;
background-size: 1.4rem;
transform: rotate(-90deg);
@include tablet {
background-size: 1.6rem;
}
}
}
}
}
}
}
.memberOut {

View File

@@ -1224,3 +1224,26 @@ $(document).on("click", ".refund-area .btn-fold", function () {
function truncateToTenwon(amount) {
return Math.floor(amount / 10) * 10;
}
//알럿 레이어 팝업 클로즈 스크립트
function close_alert_popup(popid) {
if (typeof popid === 'object') {
popupId = $(popid).parents('.alertPopup');
}else{
popupId = $(`#${popid}`);
}
popupId
.stop()
.animate(
{ opacity: "0" },
{
queue: true,
duration: 200,
easing: "easeInOutExpo",
complete: function () {
$(this).find(".popInner").css("top", "53%");
$(this).css("display", "none");
},
}
);
}

View File

@@ -278,24 +278,22 @@
<strong>홍길동</strong>
<span>test@test.com</span>
</p>
<p>서비스 가입일: 2022.08.30 12:11:14</p>
<p>개인정보는 kia.com에서 수정 가능합니다.</p>
<p>기아 커넥트 스토어 가입일: 2023-06-07</p>
<p>개인정보는 kia.com에서 수정 가능합니다. </p>
</div>
</div>
<div class="marketingAgrre">
<h3>
<strong>[선택] 마케팅 활용 및 광고성 정보 수신 동의</strong>
</h3>
<div class="contents">
</div>
<div class="marketingCheck">
<label for="d">
<input type="checkbox" name="" id="d">
<span>마케팅 활용 및 광고성 정보 수신에 동의합니다. (선택)</span>
<label for="agreeMarketing">
<input type="checkbox" name="" id="agreeMarketing">
<span>(선택) 마케팅 활용 목적의 개인정보 수집ㆍ이용에 동의합니다.</span>
<a href="javascript:;" onClick="javascript:open_layer_popup('marketing_popup');">더보기 &gt;</a>
</label>
<label for="agreeAd">
<input type="checkbox" name="" id="agreeAd">
<span>(선택) 전자적 전송매체를 통한 광고성 정보 수신에 동의합니다.</span>
<a href="javascript:;" onClick="javascript:open_layer_popup('ad_popup');">더보기 &gt;</a>
</label>
</div>
</div>
@@ -316,7 +314,7 @@
<!--알럿팝업-->
<div class="alertPopup" style="displaY:none;">
<div class="alertPopup" style="display:none;">
<div class="popInner">
<div class="content">
<p><strong>마케팅 수신 여부</strong></p>
@@ -346,88 +344,97 @@
</div>
</div>
<div id="checkedAgree" class="alertPopup" style="display:none;z-index: 501;">
<div class="popInner">
<div class="content">
<p>
<span>
마케팅 활용 동의를 수행하는 경우
광고성 정보 수신동의도 동의한 것으로 간주합니다.
</span>
</p>
<!--버튼 한개-->
<div class="btnWarp mg-t">
<div class="oneButton">
<button onclick="close_alert_popup(this)"><p>확인</p></button>
</div>
</div>
<!--버튼 한개-->
</div>
</div>
</div>
<!-- [S] 마케팅 활용 및 광고성 정보 수신 동의 -->
<div id="marketing_popup" class="policyPopup" style="display:block; opacity:0;">
<div id="marketing_popup" class="policyPopup" style="display:none; opacity:1;">
<div class="popInner">
<div class="content">
<p class="title">
<strong>마케팅 활용 및 광고성 정보 수신 동의</strong>
<strong>마케팅 활용 목적의 개인정보 수집 · 이용 동의 (선택)</strong>
</p>
<div class="editorText termsContents withTable">
<!-- 이용약관 내용 넣어주시면 됩니다. -->
<!-- <p>
전자적 전송매체(SMS/MMS/이메일 등)를 통해, 기아 커넥트 스토어가 제공하는 이벤트/혜택 등 다양한 정보(뉴스레터 포함)를 수신하실 수 있고, 기타 유용한 광고 정보 수신하실 수 있습니다.
<br>
<br>
본 마케팅 활용 및 광고성 정보수신 동의 항목은 선택사항이므로 동의를 거부하는 경우에도 기아 커넥트 스토어 서비스의 이용에는 영향이 없습니다. 다만 거부시 동의를 통해 제공 가능한 각 종 혜택, 이벤트 안내를 받아 보실 수 없습니다.
<br>
<br>
본 수신 동의를 철회하고자 할 경우에는 고객센터를 통해 언제든 수신동의 철회를 요청하실 수 있습니다.
<p>
<strong>※ 마케팅 활용 동의를 수행하는 경우 광고 정보 수신동의도 동의한 것으로 간주합니다.</strong>
<br>기아는 <u>개인정보보호법 제22조. 정보통신망법 제50조</u>에 따라 아래와 같이 정보주체의 개인정보를 동의 받아 수집하고 있습니다.
</p>
<div class="table-wrap mt-2">
<div class="table-wrap type2 mt-2">
<table style="min-width: 600px">
<colgroup>
<col style="width: 33%;">
<col style="width: 33%;">
<col style="width: 33%;">
<col style="width: 280px;">
<col style="width: 280px;">
<col style="width: 280px;">
</colgroup>
<thead>
<tr>
<th>수집·이용 목적</th>
<th>수집·이용 항목</th>
<th>보유기간</th>
<th>① 개인정보의 수집이용 목적</th>
<th>② 개인정보의 수집이용 항목</th>
<th>③ 개인정보의 보유 및 이용 기간</th>
</tr>
</thead>
<tbody>
<tr>
<td>기아가 제공하는 상품·서비스·이벤트 제공 안내, 가입한 서비스간 개인정보 결합 및 분석을 통한 개인 맞춤형 서비스 제공, 신규서비스 개발 및 개선, 마케팅 활용 및 광고 전송</td>
<td>성명, ID(이메일), 비밀번호, 생년월일, 휴대폰 번호, 구입차량정보, 이용중 사양, 정비서비스이용정보, 기아가 제공하는 서비스(기아닷컴, 기아커넥트, 기아멤버스, 마이기아, 인증 중고차 등)이용 시 수집·이용에 동의한 정보 및 상기 정보들을 조합 또는 분석하여 생성된 정보</td>
<td>서비스 탈퇴 또는 동의 철회 시까지</td>
</tr>
</tbody>
</table>
</div>
<div class="noticeTextUnderTable">
※ 위와 같이 개인정보를 수집·이용하는데 동의를 거부할 권리가 있습니다. 그러나 동의를 거부할 경우, 기아가 제공하는 상품, 서비스, 이벤트 등 정보를 제공받을 수 없습니다.
</div> -->
<p>
기아는 개인정보보호법 제 17조에 따라 아래와 같이 정보주체의 개인정보를 동의 받아 제공하고 있습니다.
</p>
<div class="table-wrap mt-2">
<table style="min-width: 600px">
<colgroup>
<col style="width: 33%;">
<col style="width: 67%;">
</colgroup>
<tbody>
<tr>
<th>제공받는 자</th>
<td>KT(스트리밍 프리미엄 webOS 결제주체)</td>
</tr>
<tr>
<th>제공받는 자의 수집 · 이용 목적</th>
<td>스트리밍 프리미엄 사양의 “차량용 webOS 콘텐츠 플랫폼” 이용을 위한 결제 정보 보관 및 미납금(위약금 및 할인반환금) 청구 / 일할정산 환불금 지급을 위함</td>
</tr>
<tr>
<th>개인정보 제공 항목</th>
<td>기아 커넥트 스토어 구매 내역, 이름, ID, 이메일, 휴대폰번호, VIN정보, carID</td>
</tr>
<tr>
<th>제공받는 자의 보유 기간</th>
<td>
처리 목적 달성 시 파기<br>
(스트리밍 프리미엄 이용 해지 완료 및 미납금 처리 완료 시)
기아가 제공하는 상품 · 서비스 · 이벤트
제공 안내, 가입한 서비스 간 개인정보
결합 및 분석을 통한 개인 맞춤형 서비스 제공
</td>
<td>
구입차량정보, 정비 서비스 이용정보, 기아가 제공하는
서비스* 이용 시 수집 · 이용에 동의한 정보 및
상기 정보들을 조합 또는 분석하여 생성된 정보<br><br>
※ 기아가 제공하는 서비스는 개인정보처리방침
(https://privacy.kia.com/overview/full-policy/)을
참고하시기 바랍니다.
</td>
<td>
서비스 이용 기간 또는 동의 해지 시까지
</td>
</tr>
</tbody>
</table>
</div>
<div class="noticeTextUnderTable">
※ 고객님께서는 동의를 거부할 권리가 있습니다. 단, 동의 거부 시 스트리밍 프리미엄 서비스를 구매/이용하실 수 없습니다.
※ 고객님께서는 동의를 거부할 권리가 있습니다. 단, 동의 거부 시 기아가 제공하는 상품 정보 및 이벤트 안내 등의 유익한 정보 안내를 받아 보실 수 없습니다.
</div>
<div class="marketingCheck">
<span>마케팅 목적의 개인정보 수집 및 이용에 동의 하시겠습니까?</span>
<div class="agree-area">
<label for="mktAgree">
<input type="checkbox" name="" id="mktAgree">
<span>동의합니다.</span>
</label>
<label for="mktDisagree">
<input type="checkbox" name="" id="mktDisagree">
<span>동의하지 않습니다.</span>
</label>
</div>
</div>
</div>
<div class="carswBtn">
@@ -440,6 +447,52 @@
</div>
</div>
<!-- [E] 마케팅 활용 및 광고성 정보 수신 동의 -->
<!-- [S] 전자적 전송매체를 활용한 광고성 정보 수신 동의 -->
<div id="ad_popup" class="policyPopup" style="display:none; opacity:1;">
<div class="popInner">
<div class="content">
<p class="title">
<strong>전자적 전송매체를 활용한 광고성 정보 수신 동의 (선택)</strong>
</p>
<div class="editorText termsContents withTable">
<p>
<strong>※ 광고성 정보 수신동의를 수행하는 경우 마케팅 활용 동의도 동의한 것으로 간주합니다.</strong>
<br><br>기아는 정보통신망법 제50조에 따라 고객 동의 기반으로 마케팅 활용 목적으로 수집한 개인정보를 전자적 전송 매체(SMS(알림톡),
E-mail, TM, DM(우편) 등) 를 통해 광고성 정보를 발송하고 있습니다.
</p>
<div class="marketingCheck">
<span>전자적 전송매체를 활용한 광고성 정보 수신에 동의 하시겠습니까?</span>
<div class="agree-area">
<label for="adAgree">
<input type="checkbox" name="" id="adAgree">
<span>동의합니다.</span>
</label>
<label for="adDisagree">
<input type="checkbox" name="" id="adDisagree">
<span>동의하지 않습니다.</span>
</label>
</div>
</div>
</div>
<div class="carswBtn">
<div class="oneButton">
<a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('ad_popup');"><p>닫기</p></a>
</div>
</div>
</div>
</div>
</div>
<!-- [E] 전자적 전송매체를 활용한 광고성 정보 수신 동의 -->
<!--알럿팝업-->
<!--//footer-->
@@ -560,7 +613,16 @@
</div>
<!--//footer-->
<script>
open_layer_popup('marketing_popup')
// open_layer_popup('marketing_popup')
['mktAgree', 'adAgree'].forEach((id) => {
document.getElementById(id).addEventListener('change', (e) => {
if (e.target.checked) open_layer_popup('checkedAgree');
});
});
</script>
</body>
</html>