1차 수정4

This commit is contained in:
hyeonggil
2024-07-23 14:10:06 +09:00
parent 9f0cfae1dc
commit cee833d7af
7 changed files with 296 additions and 221 deletions

View File

@@ -224,7 +224,8 @@
margin-left: 1rem;
background-position: center;
}
.popupWarp.payComplete {
.payComplete {
position: fixed;
overflow: hidden;
width: 100%;
@@ -235,23 +236,27 @@
left: 0;
z-index: 500;
}
.popupWarp.payComplete .popInner {
position: relative;
.payComplete .popInner {
position: absolute;
top: 55%;
left: 50%;
width: 100%;
max-width: 120rem;
height: 84.5rem;
height: 90rem;
transform: translateX(-50%);
margin-top: -45rem;
padding: 0;
border-radius: 0;
background: url(../images/kia/contents/poup_complete.jpg) no-repeat center/cover;
}
.popupWarp.payComplete .popInner .popContents {
.payComplete .popInner .popContents {
position: absolute;
bottom: 14%;
right: 11.5%;
bottom: 10%;
right: 8.333%;
width: 44rem;
height: 45.5rem;
}
.popupWarp.payComplete .popInner .popContents .logo {
.payComplete .popInner .popContents .logo {
display: block;
height: 1.6rem;
margin-bottom: 1.9rem;
@@ -260,7 +265,7 @@
background-size: auto 100%;
text-indent: -9999em;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon {
.payComplete .popInner .popContents .payInfoCon {
display: flex;
justify-content: center;
flex-direction: column;
@@ -268,14 +273,14 @@
height: 42rem;
background-color: #fff;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon > p strong {
.payComplete .popInner .popContents .payInfoCon > p strong {
display: block;
font-size: 2.8rem;
line-height: 3.4rem;
margin-bottom: 3rem;
text-align: center;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon > p span {
.payComplete .popInner .popContents .payInfoCon > p span {
display: block;
font-size: 1.6rem;
color: #676767;
@@ -283,50 +288,56 @@
text-align: center;
}
@media (max-width: 768px) {
.popupWarp.payComplete .popInner {
.payComplete .popInner {
max-height: 64rem;
width: calc(100% - 4rem);
background: url(../images/kia/contents/poup_complete_m.jpg) no-repeat center/cover;
transform: translate(-50%, -50%);
margin-top: 0;
}
.popupWarp.payComplete .popInner .popContents {
.payComplete .popInner .popContents {
position: absolute;
bottom: 3rem;
right: auto;
width: 100%;
height: auto;
}
.popupWarp.payComplete .popInner .popContents .logo {
.payComplete .popInner .popContents .logo {
display: block;
width: 81.25%;
height: 1.2rem;
margin: 0 auto;
margin-bottom: 1.2rem;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon {
.payComplete .popInner .popContents .payInfoCon {
width: 81.25%;
height: 26rem;
height: 27.7rem;
margin: 0 auto;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon > p {
.payComplete .popInner .popContents .payInfoCon > p {
padding: 0 3rem;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon > p strong {
font-size: 1.6rem;
line-height: 1.92rem;
margin-bottom: 2rem;
.payComplete .popInner .popContents .payInfoCon > p strong {
font-size: 1.8rem;
line-height: 2.16rem;
margin-bottom: 1.6rem;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon > p span {
font-size: 1.2rem;
line-height: 1.44rem;
.payComplete .popInner .popContents .payInfoCon > p span {
font-size: 1.4rem;
line-height: 1.68rem;
}
.popupWarp.payComplete .popInner .popContents .payInfoCon > p span em {
.payComplete .popInner .popContents .payInfoCon > p span em {
display: block;
}
.popupWarp.payComplete .popInner .popContents .oneButton {
margin-top: 4rem;
.payComplete .popInner .popContents .payInfoCon > p span br {
display: none;
}
.payComplete .popInner .popContents .oneButton {
margin-top: 3rem;
}
}
@media (max-width: 320px) {
.popupWarp.payComplete .popInner .popContents .payInfoCon > p {
.payComplete .popInner .popContents .payInfoCon > p {
padding: 0 1rem;
}
}