한글 디즈니 기아 디자인 검수 수정
This commit is contained in:
@@ -3989,23 +3989,14 @@
|
||||
.displayThemeDesney .available-theme .list ul li.more {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 320/190;
|
||||
padding: 0;
|
||||
padding: 6.6666666667vw 5.5555555556vw;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.displayThemeDesney .available-theme .list ul li.more a {
|
||||
padding: 6.6666666667vw 5.5555555556vw;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .available-theme .list ul li.more a {
|
||||
padding: 4.8rem 4rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .available-theme .list ul li.more:before {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -4028,6 +4019,7 @@
|
||||
.displayThemeDesney .available-theme .list ul li.more {
|
||||
width: 57.4rem;
|
||||
height: 36.9rem;
|
||||
padding: 4.8rem 4rem;
|
||||
margin: 0 0 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
@@ -4059,14 +4051,15 @@
|
||||
position: absolute;
|
||||
top: -5.5rem;
|
||||
left: 5rem;
|
||||
background-color: #fbc707;
|
||||
background-color: #fff;
|
||||
border: 0.14rem solid #000;
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@@ -4081,14 +4074,24 @@
|
||||
}
|
||||
.displayThemeDesney .available-theme .list ul li.more strong .speech-bubble::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
bottom: -0.7rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 1rem solid transparent;
|
||||
border-right: 1rem solid transparent;
|
||||
border-top: 1rem solid #fbc707;
|
||||
border-width: 0.7rem 0.7rem 0 0.7rem;
|
||||
border-style: solid;
|
||||
border-color: #000 transparent transparent transparent;
|
||||
}
|
||||
.displayThemeDesney .available-theme .list ul li.more strong .speech-bubble::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -0.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 0.7rem 0.7rem 0 0.7rem;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
.displayThemeDesney .available-theme .list ul li.more .arrow {
|
||||
display: inline-block;
|
||||
@@ -4465,15 +4468,38 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .tit-area .inner {
|
||||
position: relative;
|
||||
padding-left: 1.8rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .tit-area .inner {
|
||||
padding-left: 3.6rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .tit-area .inner:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 0.6rem;
|
||||
height: 5rem;
|
||||
background: #ea0029;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .tit-area .inner:before {
|
||||
width: 1.2rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .tit-area h3 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 3.5rem;
|
||||
padding: 0.4rem 0.8rem 0;
|
||||
padding: 0;
|
||||
font-size: 2.4rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background-color: #ed1c24;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@@ -4481,17 +4507,16 @@
|
||||
height: 6.4rem;
|
||||
padding: 0 0.8rem;
|
||||
font-size: 4.8rem;
|
||||
line-height: 6.4rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .tit-area p {
|
||||
margin: 0 0 0.2rem;
|
||||
font-size: 2.4rem;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .tit-area p {
|
||||
margin: 0 0 1.1rem;
|
||||
font-size: 4.8rem;
|
||||
color: #000;
|
||||
}
|
||||
@@ -4522,21 +4547,19 @@
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li p {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 1rem 2rem 0 4.2rem;
|
||||
margin: 0 0 1.6rem 4rem;
|
||||
padding: 1rem 2rem 0 3.6rem;
|
||||
margin: 0 0 1.6rem 2rem;
|
||||
font-size: 1.4rem;
|
||||
color: #fff;
|
||||
line-height: 1.52;
|
||||
background: url(../images/kia/pdp/display_theme_disney/number1.png) no-repeat 0 0/2.3rem auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li p {
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 7.2rem;
|
||||
padding: 0 2rem 0 4.8rem;
|
||||
font-size: 1.6rem;
|
||||
background-position: 0 0;
|
||||
background-size: 3.1rem auto;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li p .add {
|
||||
@@ -4549,26 +4572,64 @@
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li p::before {
|
||||
content: "1";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding-top: 0.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #05141f;
|
||||
font-weight: 600;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 0.4rem 0px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li p::before {
|
||||
top: 0.3rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
font-size: 2rem;
|
||||
box-shadow: 0px 0px 0.8rem 0px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(1) p {
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(2) p {
|
||||
padding: 1rem 6rem 0 0;
|
||||
padding: 1rem 3.6rem 0 0;
|
||||
margin: 0 2rem 2.3rem 2rem;
|
||||
background: url(../images/kia/pdp/display_theme_disney/number2.png) no-repeat calc(100% - 0.6rem) 0/3.7rem auto;
|
||||
text-align: right;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(2) p {
|
||||
padding: 0 2rem 0 7.2rem;
|
||||
padding: 0 2rem 0 4.8rem;
|
||||
margin: 0;
|
||||
background-position: 0 1.2rem;
|
||||
background-size: 5.1rem auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(2) p::before {
|
||||
content: "2";
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(2) p::before {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(2) .img-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -4581,23 +4642,27 @@
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(3) p {
|
||||
padding-left: 5.4rem;
|
||||
margin-left: 2.7rem;
|
||||
background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0/3.6rem auto;
|
||||
margin-bottom: 2.8rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(3) p {
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 7.2rem;
|
||||
padding: 0 2rem 0 4.8rem;
|
||||
background-position: 0 0;
|
||||
background-size: 4.9rem auto;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(3) p::before {
|
||||
content: "3";
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(3) .img-area {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-left: 8rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li:nth-child(3) .img-area {
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -4648,7 +4713,7 @@
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .three-reasons .reasons li .img-area .img-msg img {
|
||||
width: 18rem;
|
||||
width: 50vw;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li .img-area .img-msg img {
|
||||
@@ -4660,14 +4725,14 @@
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
width: 13rem;
|
||||
height: 11.7rem;
|
||||
width: 36.1111111111vw;
|
||||
height: 32.5vw;
|
||||
padding: 1.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
background: url(../images/kia/pdp/display_theme_disney/img_reason_msg.png) no-repeat 0 0/100% auto;
|
||||
background: url(../images/kia/pdp/display_theme_disney/img_reason_msg.png) no-repeat 0 0/cover;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .three-reasons .reasons li .img-area .img-msg .msg {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1563,7 +1563,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-select.on+.list-member {
|
||||
.btn-select.on + .list-member {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1834,7 +1834,7 @@
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
>p {
|
||||
> p {
|
||||
position: relative;
|
||||
width: 93%;
|
||||
|
||||
@@ -1910,7 +1910,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
dt.active+dd {
|
||||
dt.active + dd {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -2042,7 +2042,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
button+button {
|
||||
button + button {
|
||||
margin-top: 1rem;
|
||||
|
||||
@include tablet {
|
||||
@@ -2054,7 +2054,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
>.dd-padding {
|
||||
> .dd-padding {
|
||||
padding-left: 6.5rem;
|
||||
}
|
||||
}
|
||||
@@ -2075,9 +2075,10 @@
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {}
|
||||
&:hover {
|
||||
}
|
||||
|
||||
>p {
|
||||
> p {
|
||||
span {
|
||||
color: #9ea1a2;
|
||||
}
|
||||
@@ -2085,7 +2086,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
dl+dl {
|
||||
dl + dl {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -2305,7 +2306,6 @@
|
||||
}
|
||||
|
||||
@include maxtablet {
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
@@ -2374,7 +2374,6 @@
|
||||
// height: 10rem;
|
||||
.comp_body {
|
||||
.text_area {
|
||||
|
||||
// display: flex;
|
||||
h3 {
|
||||
font-size: 3rem;
|
||||
@@ -2385,7 +2384,7 @@
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -2461,7 +2460,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&+.item {
|
||||
& + .item {
|
||||
margin-top: 8rem;
|
||||
|
||||
@include maxtablet {
|
||||
@@ -2475,7 +2474,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&+.comp_1x_b_v_s_b {
|
||||
& + .comp_1x_b_v_s_b {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 0;
|
||||
@@ -2501,7 +2500,7 @@
|
||||
margin-top: 8rem;
|
||||
|
||||
.comp_body {
|
||||
&+.comp_body {
|
||||
& + .comp_body {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
@@ -2518,7 +2517,7 @@
|
||||
|
||||
.displayThemeDtl {
|
||||
.swiper-navigation {
|
||||
>* {
|
||||
> * {
|
||||
top: 210px;
|
||||
left: -65px;
|
||||
width: 5rem;
|
||||
@@ -2753,7 +2752,6 @@
|
||||
}
|
||||
|
||||
@include maxtablet {
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
@@ -2824,13 +2822,12 @@
|
||||
|
||||
.comp_body {
|
||||
.text_area {
|
||||
|
||||
// display: flex;
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -2899,7 +2896,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&+.item {
|
||||
& + .item {
|
||||
margin-top: 8rem;
|
||||
|
||||
@include maxtablet {
|
||||
@@ -2913,7 +2910,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&+.comp_1x_b_v_s_b {
|
||||
& + .comp_1x_b_v_s_b {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 2rem;
|
||||
@@ -3186,7 +3183,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"]+label {
|
||||
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"] + label {
|
||||
height: auto;
|
||||
padding: 2rem 2rem 2rem 0;
|
||||
|
||||
@@ -3382,13 +3379,12 @@
|
||||
// }
|
||||
.comp_body {
|
||||
.text_area {
|
||||
|
||||
// display: flex;
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -3418,7 +3414,7 @@
|
||||
|
||||
.comp_wide {
|
||||
&.title-only {
|
||||
&+.comp_wide {
|
||||
& + .comp_wide {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
@@ -3666,7 +3662,6 @@
|
||||
}
|
||||
|
||||
&.paused {
|
||||
|
||||
.btn-play,
|
||||
.btn-sound {
|
||||
display: block !important;
|
||||
@@ -3798,7 +3793,6 @@
|
||||
}
|
||||
|
||||
&.playing {
|
||||
|
||||
.comp_body.layer_up,
|
||||
.thumb-swiper,
|
||||
.pdpInCarGameSwiper,
|
||||
@@ -3939,7 +3933,7 @@
|
||||
|
||||
.pdpDtl {
|
||||
.swiper-navigation {
|
||||
>* {
|
||||
> * {
|
||||
top: 210px;
|
||||
left: -65px;
|
||||
width: 5rem;
|
||||
@@ -3988,7 +3982,8 @@
|
||||
}
|
||||
|
||||
.scroll_area {
|
||||
@include maxtablet {}
|
||||
@include maxtablet {
|
||||
}
|
||||
|
||||
.web {
|
||||
display: block;
|
||||
@@ -4282,7 +4277,7 @@
|
||||
display: block;
|
||||
|
||||
.swiper-slide {
|
||||
&+.swiper-slide {
|
||||
& + .swiper-slide {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
@@ -4290,7 +4285,7 @@
|
||||
}
|
||||
|
||||
.swiper-navigation {
|
||||
>* {
|
||||
> * {
|
||||
top: 210px;
|
||||
left: -65px;
|
||||
width: 5rem;
|
||||
@@ -4537,7 +4532,7 @@
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -4615,14 +4610,15 @@
|
||||
position: absolute;
|
||||
top: -5.5rem;
|
||||
left: 5rem;
|
||||
background-color: #fbc707;
|
||||
background-color: #fff;
|
||||
border: 0.14rem solid #000;
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
@include tablet {
|
||||
@@ -4634,19 +4630,44 @@
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
// 말풍선 꼬리
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
bottom: -0.7rem; // 꼬리가 박스 아래로 나가게
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 1rem solid transparent;
|
||||
border-right: 1rem solid transparent;
|
||||
border-top: 1rem solid #fbc707;
|
||||
|
||||
@include tablet {}
|
||||
border-width: 0.7rem 0.7rem 0 0.7rem; // 아래쪽이 뾰족
|
||||
border-style: solid;
|
||||
border-color: #000 transparent transparent transparent;
|
||||
}
|
||||
|
||||
// 꼬리 내부 흰색 부분 (외곽선 안쪽)
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -0.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 0.7rem 0.7rem 0 0.7rem;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// &::after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// bottom: -1rem;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
// border-left: 1rem solid transparent;
|
||||
// border-right: 1rem solid transparent;
|
||||
// border-top: 1rem solid #fbc707;
|
||||
|
||||
// @include tablet {}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4996,7 +5017,7 @@
|
||||
|
||||
.welcome-goodbye {
|
||||
.image_area {
|
||||
&+.image_area {
|
||||
& + .image_area {
|
||||
margin-top: 0.4rem;
|
||||
|
||||
@include tablet {
|
||||
@@ -5057,33 +5078,51 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.inner {
|
||||
position: relative;
|
||||
padding-left: 1.8rem;
|
||||
@include tablet {
|
||||
padding-left: 3.6rem;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 0.6rem;
|
||||
height: 5rem;
|
||||
background: #ea0029;
|
||||
@include tablet {
|
||||
width: 1.2rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 3.5rem;
|
||||
padding: 0.4rem 0.8rem 0;
|
||||
padding: 0;
|
||||
font-size: 2.4rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background-color: #ed1c24;
|
||||
white-space: nowrap;
|
||||
|
||||
@include tablet {
|
||||
height: 6.4rem;
|
||||
padding: 0 0.8rem;
|
||||
font-size: 4.8rem;
|
||||
line-height: 6.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0.2rem;
|
||||
font-size: 2.4rem;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
|
||||
@include tablet {
|
||||
margin: 0 0 1.1rem;
|
||||
font-size: 4.8rem;
|
||||
color: #000;
|
||||
}
|
||||
@@ -5106,7 +5145,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&+li {
|
||||
& + li {
|
||||
margin-top: 3.7rem;
|
||||
|
||||
@include tablet {
|
||||
@@ -5115,20 +5154,19 @@
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 1rem 2rem 0 4.2rem;
|
||||
margin: 0 0 1.6rem 4rem;
|
||||
padding: 1rem 2rem 0 3.6rem;
|
||||
margin: 0 0 1.6rem 2rem;
|
||||
font-size: 1.4rem;
|
||||
color: #fff;
|
||||
line-height: 1.52;
|
||||
background: url(../images/kia/pdp/display_theme_disney/number1.png) no-repeat 0 0 / 2.3rem auto;
|
||||
// background: url(../images/kia/pdp/display_theme_disney/number1.png) no-repeat 0 0 / 2.3rem auto;
|
||||
|
||||
@include tablet {
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 7.2rem;
|
||||
padding: 0 2rem 0 4.8rem;
|
||||
font-size: 1.6rem;
|
||||
background-position: 0 0;
|
||||
background-size: 3.1rem auto;
|
||||
}
|
||||
|
||||
.add {
|
||||
@@ -5140,6 +5178,34 @@
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "1";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding-top: 0.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #05141f;
|
||||
font-weight: 600;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 0.4rem 0px #00000099;
|
||||
border-radius: 0.4rem;
|
||||
|
||||
@include tablet {
|
||||
top: 0.3rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
font-size: 2rem;
|
||||
box-shadow: 0px 0px 0.8rem 0px #00000099;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
@@ -5152,18 +5218,27 @@
|
||||
|
||||
&:nth-child(2) {
|
||||
p {
|
||||
padding: 1rem 6rem 0 0;
|
||||
padding: 1rem 3.6rem 0 0;
|
||||
margin: 0 2rem 2.3rem 2rem;
|
||||
background: url(../images/kia/pdp/display_theme_disney/number2.png) no-repeat calc(100% - 0.6rem) 0 / 3.7rem auto;
|
||||
// background: url(../images/kia/pdp/display_theme_disney/number2.png) no-repeat calc(100% - 0.6rem) 0 / 3.7rem auto;
|
||||
text-align: right;
|
||||
|
||||
@include tablet {
|
||||
padding: 0 2rem 0 7.2rem;
|
||||
padding: 0 2rem 0 4.8rem;
|
||||
margin: 0;
|
||||
background-position: 0 1.2rem;
|
||||
background-size: 5.1rem auto;
|
||||
text-align: left;
|
||||
}
|
||||
&::before {
|
||||
content: "2";
|
||||
left: auto;
|
||||
right: 0;
|
||||
@include tablet {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-area {
|
||||
@@ -5180,22 +5255,27 @@
|
||||
|
||||
&:nth-child(3) {
|
||||
p {
|
||||
padding-left: 5.4rem;
|
||||
margin-left: 2.7rem;
|
||||
background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0 / 3.6rem auto;
|
||||
margin-bottom: 2.8rem;
|
||||
// background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0 / 3.6rem auto;
|
||||
|
||||
@include tablet {
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 7.2rem;
|
||||
padding: 0 2rem 0 4.8rem;
|
||||
background-position: 0 0;
|
||||
background-size: 4.9rem auto;
|
||||
}
|
||||
&::before {
|
||||
content: "3";
|
||||
}
|
||||
}
|
||||
|
||||
.img-area {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-left: 8rem;
|
||||
|
||||
@include tablet {
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -5250,7 +5330,7 @@
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18rem;
|
||||
width: 50vw;
|
||||
|
||||
@include tablet {
|
||||
width: 25.6rem;
|
||||
@@ -5262,14 +5342,14 @@
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
width: 13rem;
|
||||
height: 11.7rem;
|
||||
width: 36.11111111111111vw;
|
||||
height: 32.5vw;
|
||||
padding: 1.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
background: url(../images/kia/pdp/display_theme_disney/img_reason_msg.png) no-repeat 0 0 / 100% auto;
|
||||
background: url(../images/kia/pdp/display_theme_disney/img_reason_msg.png) no-repeat 0 0 / cover;
|
||||
|
||||
@include tablet {
|
||||
width: 18.5rem;
|
||||
@@ -5498,4 +5578,4 @@
|
||||
text-indent: -9999em;
|
||||
background: url(../images/kia/pdp/display_theme_disney/btn_zoom_close.png) no-repeat 0 0 / 100% auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,9 +52,7 @@
|
||||
<div class="logoWrap">
|
||||
<a href="">
|
||||
<i class="logoImg"></i>
|
||||
<!-- <span>
|
||||
Connect Store
|
||||
</span> -->
|
||||
<!-- <span>Connect Store</span> -->
|
||||
</a>
|
||||
</div>
|
||||
<div class="menuWarp">
|
||||
@@ -63,9 +61,7 @@
|
||||
<div class="mobileLogoWrap">
|
||||
<a href="">
|
||||
<i class="logoImg"></i>
|
||||
<!-- <span>
|
||||
Connect store
|
||||
</span> -->
|
||||
<!-- <span> Connect store </span> -->
|
||||
</a>
|
||||
</div>
|
||||
<span class="closeBtn" id="closeBtn">
|
||||
|
||||
Reference in New Issue
Block a user