gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

디스플레이테마 인트로 영상 영역 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2024-07-11 23:14:56 +09:00
parent 41158ec39f
commit 840da699c8
6 changed files with 615 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
assets/css/pdp_detail.css
View File

@@ -2148,6 +2148,52 @@
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
border: 2px solid #F8C40C;
}
.displayTheme.comp_wide.playing .comp_body.layer_up,
.displayTheme.comp_wide.playing .thumb-swiper,
.displayTheme.comp_wide.playing .displayThemeDtl {
filter: blur(2px);
}
@media (max-width: 1700px) {
.displayTheme.comp_wide.playing .displayThemeDtl {
filter: blur(0);
}
}
.displayTheme.comp_wide .close-today {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 8.2rem;
width: 100%;
font-size: 1.6rem;
color: #fff;
font-weight: 600;
transition: all 0.2s ease;
}
.displayTheme.comp_wide .close-today label {
display: flex;
align-items: center;
justify-content: center;
}
.displayTheme.comp_wide .close-today label input {
margin-right: 0.4rem;
}
@media (max-width: 1780px) {
.displayTheme.comp_wide .close-today {
bottom: 4rem;
}
}
@media (max-width: 1024px) {
.displayTheme.comp_wide .close-today {
bottom: 2rem;
}
}
@media (max-width: 501px) {
.displayTheme.comp_wide .close-today {
bottom: 4rem;
font-size: 1.2rem;
}
}
.displayTheme .comp_top {
z-index: 2;
}
@@ -2183,39 +2229,96 @@
width: 100%;
padding-top: 56.25%;
z-index: 4;
background: #000;
background: rgba(0, 0, 0, 0.5);
opacity: 1;
transition: all 0.3s ease;
}
.displayTheme .comp_md.video_wrap video {
.displayTheme .comp_md.video_wrap .video-area {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 125rem;
padding-top: 43.5%;
}
.displayTheme .comp_md.video_wrap .video-area .video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 160rem;
background-color: #000;
border: 2.5rem solid #000;
border-bottom-width: 5.65rem;
}
.displayTheme .comp_md.video_wrap .video-area .video video {
width: 100%;
height: 100%;
max-height: 90rem;
}
@media (max-width: 768px) {
.displayTheme .comp_md.video_wrap .video-area {
width: 100%;
}
.displayTheme .comp_md.video_wrap .video-area .video {
border: 1.5rem solid #000;
border-bottom-width: 1.5rem;
}
}
.displayTheme .comp_md.video_wrap .btn-close {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 1;
width: 6rem;
height: 6rem;
background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center/contain;
top: -6rem;
right: -16rem;
width: 14rem;
height: 14rem;
background-color: transparent;
border: none;
cursor: pointer;
text-indent: -9999em;
}
@media (max-width: 1024px) {
.displayTheme .comp_md.video_wrap .btn-close {
top: -7rem;
right: -12rem;
width: 10rem;
height: 10rem;
}
}
@media (max-width: 768px) {
.displayTheme .comp_md.video_wrap .btn-close {
top: 1rem;
right: 1rem;
width: 4rem;
height: 4rem;
top: -7rem;
right: 0;
width: 6rem;
height: 6rem;
}
}
.displayTheme .comp_md.video_wrap .btn-close::before,
.displayTheme .comp_md.video_wrap .btn-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9.2rem;
height: 2px;
background-color: #fff;
}
@media (max-width: 1024px) {
.displayTheme .comp_md.video_wrap .btn-close::before,
.displayTheme .comp_md.video_wrap .btn-close::after {
width: 7rem;
}
}
@media (max-width: 768px) {
.displayTheme .comp_md.video_wrap .btn-close::before,
.displayTheme .comp_md.video_wrap .btn-close::after {
width: 4rem;
}
}
.displayTheme .comp_md.video_wrap .btn-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.displayTheme .comp_md.video_wrap .btn-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 768px) {
.displayTheme .comp_md.video_wrap {
height: 56rem;