diff --git a/assets/css/popup.css b/assets/css/popup.css index 8e44ada..a8a3eaf 100644 --- a/assets/css/popup.css +++ b/assets/css/popup.css @@ -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; } } diff --git a/assets/css/popup.css.map b/assets/css/popup.css.map index b25cc82..2f79c15 100644 --- a/assets/css/popup.css.map +++ b/assets/css/popup.css.map @@ -1 +1 @@ -{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"} \ No newline at end of file +{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"} \ No newline at end of file diff --git a/assets/css/popup.scss b/assets/css/popup.scss index 8182f01..6ef5812 100644 --- a/assets/css/popup.scss +++ b/assets/css/popup.scss @@ -2,117 +2,136 @@ @import 'utils.scss'; /*변수파일 import*/ -.popupWarp{ - position:fixed; - top:0; - left:0; - width:100%; - height:100%; - overflow:hidden; - background-color: rgba(0,0,0,0.4); - z-index:1000; - - .popInner{ +.popupWarp { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.4); + z-index: 1000; + + .popInner { background-color: #fff; - padding:5rem; + padding: 5rem; border-radius: 0.6rem; - h1{ + + h1 { font-size: 2.4rem; font-weight: bold; text-align: center; - margin-bottom:3rem; + margin-bottom: 3rem; } - .termsCon{ - height:29rem; + + .termsCon { + height: 29rem; overflow-y: auto; overflow-x: hidden; - &::-webkit-scrollbar { + + &::-webkit-scrollbar { width: 8px; } + &::-webkit-scrollbar-thumb { background-color: #DEDEDE; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } + &::-webkit-scrollbar-track { background-color: transparent; border-radius: 10px; box-shadow: inset 0px 0px 5px white; } - p{ + + p { line-height: 2.4rem; color: #676767; } } - .oneButton{ - width:16rem; - margin:0 auto; - margin-top:5rem; + + .oneButton { + width: 16rem; + margin: 0 auto; + margin-top: 5rem; } - .towButton{ - margin:0 auto; - margin-top:5rem; + + .towButton { + margin: 0 auto; + margin-top: 5rem; } - @include maxtablet{ + + @include maxtablet { padding: 3rem; } } - .popInner{ + + .popInner { position: absolute; width: 92%; - left:50%; - top:50%; - transform: translate(-50%,-50%); - @include desktopMax{ - width:fit-content; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + @include desktopMax { + width: fit-content; width: 100%; } } - .termsPop{ - max-width:90rem; + + .termsPop { + max-width: 90rem; } - .payInfo{ - max-width:54rem; - .payInfoCon{ - p{ - strong{ + .payInfo { + max-width: 54rem; + + .payInfoCon { + p { + strong { display: block; font-size: 1.6rem; line-height: 2.4rem; text-align: center; } - span{ + + span { text-align: center; display: block; font-size: 1.6rem; color: #676767; - margin-top:1.5rem; + margin-top: 1.5rem; line-height: 2.4rem; } } } } - .marketingAgree{ - max-width:54rem; - .payInfoCon{ - p{ + + .marketingAgree { + max-width: 54rem; + + .payInfoCon { + p { text-align: center; - strong{ + + strong { display: block; font-size: 1.6rem; line-height: 2.4rem; } - span{ + + span { text-align: center; display: block; font-size: 1.6rem; color: #676767; - margin-top:1.5rem; + margin-top: 1.5rem; line-height: 2.4rem; } - &.borderWrap{ + + &.borderWrap { margin-top: 30px; padding: 24px; font-size: 1.4rem; @@ -123,15 +142,18 @@ } } } - &.popInner{ - .towButton{ + + &.popInner { + .towButton { width: 100%; } } - .hideAdCheck{ + + .hideAdCheck { text-align: center; margin-top: 5rem; - label{ + + label { display: flex; width: 100%; justify-content: center; @@ -140,64 +162,78 @@ font-size: 1.6rem; color: #676767; cursor: pointer; - span{ + + span { margin-left: 1rem; } } } - @include maxtablet{ - h1{ + + @include maxtablet { + h1 { font-size: 1.8rem; margin-bottom: 1.5rem; } - .payInfoCon{ - p{ + + .payInfoCon { + p { font-size: 1.4rem; - &.borderWrap{ + + &.borderWrap { padding: 2rem 1rem; } } } - &.popInner{ + + &.popInner { padding: 3rem 3rem 4rem; - .towButton{ + + .towButton { margin-top: 4rem; flex-wrap: wrap; - button+button{ + + button+button { margin-top: 1rem; } } } - .hideAdCheck{ + + .hideAdCheck { margin-top: 4rem; - label{ + + label { font-size: 1.4rem; } } } } - .inquiryCaseEtc{ - max-width:54rem; - .inquiryCaseEtcCon{ - p{ + + .inquiryCaseEtc { + max-width: 54rem; + + .inquiryCaseEtcCon { + p { font-size: 1.6rem; line-height: 2.4rem; text-align: center; - span{ + + span { text-align: center; display: block; font-size: 1.6rem; color: #676767; - margin-top:1.5rem; + margin-top: 1.5rem; line-height: 2.4rem; } } - .linkBox{ + + .linkBox { margin-top: 2rem; padding: 2.8rem; background-color: #F3F3F3; text-align: center; - a{ + + a { position: relative; display: inline; border-bottom: 1px solid #676767; @@ -206,7 +242,8 @@ font-weight: 400; line-height: 2.2; color: #676767; - &:after{ + + &:after { content: ''; display: inline-block; position: absolute; @@ -217,7 +254,7 @@ background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg); background-repeat: no-repeat; background-size: 0.6rem 1.2rem; - margin-left:1rem; + margin-left: 1rem; background-position: center; } } @@ -225,121 +262,148 @@ } } - &.payComplete{ - position: fixed; - overflow: hidden; +} + +//설치안내 팝업 +.payComplete { + position: fixed; + overflow: hidden; + width: 100%; + height: 100%; + display: flex; + background-color: rgba(0, 0, 0, 0.4); + top: 0; + left: 0; + z-index: 500; + + .popInner { + position: absolute; + top: 55%; + left: 50%; width: 100%; - height: 100%; - display: flex; - background-color: rgba(0, 0, 0, 0.4); - top: 0; - left: 0; - z-index: 500; - .popInner { - position: relative; - top:55%; - max-width:120rem; - height: 84.5rem; - padding: 0; - border-radius: 0; - background: url(../images/kia/contents/poup_complete.jpg) no-repeat center / cover; - .popContents{ - position: absolute; - bottom:14%; - right: 11.5%; + max-width: 120rem; + 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; + + .popContents { + position: absolute; + bottom: 10%; + right: 8.333%; + width: 44rem; + height: 45.5rem; + + .logo { + display: block; + height: 1.6rem; + margin-bottom: 1.9rem; + background-image: url(../images/kia/kia-logo-n.svg); + background-repeat: no-repeat; + background-size: auto 100%; + text-indent: -9999em; + } + + .payInfoCon { + display: flex; + justify-content: center; + flex-direction: column; width: 44rem; - height: 45.5rem; + height: 42rem; + background-color: #fff; + + &>p { + strong { + display: block; + font-size: 2.8rem; + line-height: 3.4rem; + margin-bottom: 3rem; + text-align: center; + } + + span { + display: block; + font-size: 1.6rem; + color: #676767; + line-height: 2.4rem; + text-align: center; + } + } + } + } + + + @include maxtablet { + 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; + + .popContents { + position: absolute; + bottom: 3rem; + right: auto; + width: 100%; + height: auto; + .logo { display: block; - height: 1.6rem; - margin-bottom:1.9rem; - background-image: url(../images/kia/kia-logo-n.svg); - background-repeat: no-repeat; - background-size: auto 100%; - text-indent: -9999em; + width: 81.25%; + height: 1.2rem; + margin: 0 auto; + margin-bottom: 1.2rem; } + .payInfoCon { - display: flex; - justify-content: center; - flex-direction: column; - width: 44rem; - height: 42rem; - background-color: #fff; - &>p{ - strong{ - display: block; - font-size: 2.8rem; - line-height: 3.4rem; - margin-bottom:3rem; - text-align: center; + width: 81.25%; + height: 27.7rem; + margin: 0 auto; + + &>p { + padding: 0 3rem; + + strong { + font-size: 1.8rem; + line-height: 2.16rem; + margin-bottom: 1.6rem; } - span{ - display: block; - font-size: 1.6rem; - color: #676767; - line-height: 2.4rem; - text-align: center; - } - } - } - } - - - @include maxtablet{ - max-height: 64rem; - background: url(../images/kia/contents/poup_complete_m.jpg) no-repeat center / cover; - .popContents { - position: absolute; - bottom: 3rem; - right: auto; - width: 100%; - height: auto; - .logo { - display: block; - width: 81.25%; - height: 1.2rem; - margin: 0 auto; - margin-bottom:1.2rem; - } - .payInfoCon { - width: 81.25%; - height: 26rem; - margin: 0 auto; - &>p{ - padding:0 3rem; - strong{ - font-size: 1.6rem; - line-height: 1.92rem; - margin-bottom:2rem; + + span { + font-size: 1.4rem; + line-height: 1.68rem; + + em { + display: block; } - span{ - font-size: 1.2rem; - line-height: 1.44rem; - em { - display: block; - } + + br { + display: none; } } } - - .oneButton { - margin-top:4rem; - } - } - } - @media(max-width: 320px){ - .popContents { - .payInfoCon { - &>p { - padding: 0 1rem; - } - } + .oneButton { + margin-top: 3rem; } + } - - } + + @media(max-width: 320px) { + .popContents { + .payInfoCon { + &>p { + padding: 0 1rem; + } + } + } + } + + } -} +} \ No newline at end of file diff --git a/assets/images/kia/contents/poup_complete.jpg b/assets/images/kia/contents/poup_complete.jpg index b997bed..7bb747e 100644 Binary files a/assets/images/kia/contents/poup_complete.jpg and b/assets/images/kia/contents/poup_complete.jpg differ diff --git a/assets/images/kia/contents/poup_complete_m.jpg b/assets/images/kia/contents/poup_complete_m.jpg index ede503b..0ef4252 100644 Binary files a/assets/images/kia/contents/poup_complete_m.jpg and b/assets/images/kia/contents/poup_complete_m.jpg differ diff --git a/order/order-carsw-complete.html b/order/order-carsw-complete.html index 3d55e22..176d328 100644 --- a/order/order-carsw-complete.html +++ b/order/order-carsw-complete.html @@ -434,11 +434,11 @@

- 커넥트 스토어 상품 구매를
진심으로 축하드립니다~!!! + 커넥트 스토어 상품 구매를
진심으로 축하드립니다. - 지금 바로 새로운 기능을 추가하여 더욱 안전하고
즐거운 드라이빙을 해보세요!! + 지금 바로 새로운 기능을 추가하여 더욱 안전하고
즐거운 드라이빙을 해보세요!! -

+

확인

 diff --git a/order/order-carsw-complete.php b/order/order-carsw-complete.php index 561be05..e7b14db 100644 --- a/order/order-carsw-complete.php +++ b/order/order-carsw-complete.php @@ -228,22 +228,22 @@