한글 디즈니 작업 중

This commit is contained in:
2025-07-23 23:26:02 +09:00
parent deed3fa35a
commit f8fa2eb962
4 changed files with 45 additions and 28 deletions

View File

@@ -4120,7 +4120,7 @@
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .comp_top {
padding: 0 0 7.6rem;
padding: 0 0 5.4rem;
}
}
.displayThemeDesney.discover-epic-design .comp_top h3 {
@@ -4290,6 +4290,7 @@
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box {
margin-bottom: 2.4rem;
padding-top: 3.2rem;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box.box1 {
@@ -4327,6 +4328,11 @@
margin-bottom: 6.4rem;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box .item:not(.welcome-goodbye) .image_area {
overflow: hidden;
border-radius: 0.8rem;
border: 0.2rem solid rgba(255, 255, 255, 0.2);
}
.displayThemeDesney.discover-epic-design .tab-wrap h4 {
font-size: 1.8rem;
font-weight: 600;
@@ -4347,7 +4353,7 @@
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap p {
margin-top: 1rem;
margin-top: 1.4rem;
font-size: 1.6rem;
}
}
@@ -4357,7 +4363,9 @@
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap p .add {
display: block;
font-size: 1.6rem;
margin-top: 0.4rem;
}
}
.displayThemeDesney .image_area {
@@ -4390,11 +4398,6 @@
background-color: #fff;
text-align: left;
}
@media (min-width: 768px) {
.displayThemeDesney .three-reasons {
padding: 9.6rem 0 0;
}
}
.displayThemeDesney .three-reasons .tit-area {
position: relative;
padding: 0 2rem 4rem;
@@ -4451,6 +4454,7 @@
.displayThemeDesney .three-reasons .reasons li {
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
.displayThemeDesney .three-reasons .reasons li + li {
@@ -4458,7 +4462,7 @@
}
@media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons li + li {
margin-top: 6rem;
margin-top: 7.6rem;
}
}
.displayThemeDesney .three-reasons .reasons li p {
@@ -4472,7 +4476,7 @@
}
@media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons li p {
margin: 1.2rem 0 0;
margin: 0;
padding: 0 2rem 0 7.2rem;
font-size: 1.6rem;
background-position: 0 0.5rem;
@@ -4512,6 +4516,7 @@
@media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons li:nth-child(2) .img-area {
padding-left: 0;
margin-bottom: 0;
}
}
.displayThemeDesney .three-reasons .reasons li:nth-child(3) p {

File diff suppressed because one or more lines are too long

View File

@@ -4673,7 +4673,7 @@
padding: 0 2rem 2.4rem;
@include tablet {
padding: 0 0 7.6rem;
padding: 0 0 5.4rem;
}
h3 {
@@ -4850,6 +4850,7 @@
@include tablet {
margin-bottom: 2.4rem;
padding-top: 3.2rem;
}
&.box1 {
@@ -4888,6 +4889,13 @@
@include tablet {
margin-bottom: 6.4rem;
}
&:not(.welcome-goodbye) {
.image_area {
overflow: hidden;
border-radius: 0.8rem;
border: 0.2rem solid rgba(255, 255, 255, 0.2);
}
}
}
}
@@ -4910,14 +4918,16 @@
letter-spacing: -0.025em;
@include tablet {
margin-top: 1rem;
margin-top: 1.4rem;
font-size: 1.6rem;
}
.add {
font-size: 1rem;
color: #969696;
@include tablet {
display: block;
font-size: 1.6rem;
margin-top: 0.4rem;
}
}
}
@@ -4963,7 +4973,7 @@
text-align: left;
@include tablet {
padding: 9.6rem 0 0;
// padding: 9.6rem 0 0;
}
.tit-area {
@@ -5036,13 +5046,14 @@
@include tablet {
display: flex;
flex-wrap: wrap;
align-items: center;
}
& + li {
margin-top: 3.2rem;
@include tablet {
margin-top: 6rem;
margin-top: 7.6rem;
}
}
@@ -5056,7 +5067,7 @@
background: url(../images/kia/pdp/display_theme_disney/number1.png) no-repeat 0 0 / 2.3rem auto;
@include tablet {
margin: 1.2rem 0 0;
margin: 0;
padding: 0 2rem 0 7.2rem;
font-size: 1.6rem;
background-position: 0 0.5rem;
@@ -5097,6 +5108,7 @@
@include tablet {
padding-left: 0;
margin-bottom: 0;
}
}
}

View File

@@ -427,8 +427,8 @@
<div class="comp_wide discover-epic-design displayThemeDesney">
<div class="comp_top">
<h3>마블 테마, <br class="btn-m" />직접 확인해보세요!</h3>
<p class="info">옵션을 선택하면, 차량에 적용된 테마 디자인을 <br class="btn-m" />바로 확인할 수 있어요.</p>
<h3>마블 테마, <br class="br-m" />직접 확인해보세요!</h3>
<p class="info">옵션을 선택하면, 차량에 적용된 테마 디자인을 <br class="br-m" />바로 확인할 수 있어요.</p>
</div>
<div class="comp_body">
<div class="tab-wrap">
@@ -586,13 +586,13 @@
<div class="inner">
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel Avengers_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel Avengers_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
@@ -649,15 +649,15 @@
</div>
</div>
<div class="three-reasons" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="three-reasons">
<div class="tit-area">
<div class="inner">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<p>마블 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
</div>
</div>
<div class="reasons">
<div class="inner">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<ol>
<li>
<p>
@@ -673,19 +673,19 @@
<li>
<p>
<strong>취향에 따라 골라보는 다양한 테마</strong>
어벤져스, 스파이더맨, 엑스맨 등 마블 유니버스의 팬이라면, <br />
곧 최애 캐릭터를 만나보게 될 거예요.
어벤져스, 스파이더맨, 엑스맨 등 <br class="br-m" />마블 유니버스의 팬이라면, <br />곧 최애 캐릭터를 만나보게 될 거예요.
<span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2_m.png" class="mobile" alt="" />
<span class="msg">앞으로 출시될 테마들을<br />기대해주세요!</span>
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reason_marvel.png" alt="" />
<span class="msg">앞으로 출시될 테마들을<br />기대해주세요!</span>
</span>
</div>
</li>
<li>
<p>
<strong>나만의 개성을 담은 드라이빙의 시작</strong>
<strong>나만의 개성을 담은 <br class="br-m" />드라이빙의 시작</strong>
기아 오너를 위한 첫 마블 어벤저스 테마로 <br />지금, 누구보다 먼저 새로운 드라이빙 무드를 경험해 보세요.
</p>
<div class="img-area">