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

인트로 사운드 버튼, 아케이드게임 레이아웃 수정 중

Browse Source
This commit is contained in:
hyeonggil
2024-07-30 16:55:25 +09:00
parent 1d6468b0e5
commit d54256da93
9 changed files with 262 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
assets/css/pdp_detail.css
View File

@@ -2315,6 +2315,12 @@
height: 80rem;
}
}
.inCarGame .comp_top.title-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inCarGame .visualBg {
position: absolute;
width: 100%;
@@ -2337,6 +2343,16 @@
height: auto;
}
}
.inCarGame .visualBg.swiper {
position: static;
}
.inCarGame .visualBg.swiper .image_area {
height: 70rem;
}
.inCarGame .visualBg.swiper .image_area img {
-o-object-fit: cover;
object-fit: cover;
}
.inCarGame.comp_wide .comp_body.layer_up .text_area {
margin-top: 7rem;
}
@@ -2983,7 +2999,7 @@
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 125rem;
max-width: 120rem;
padding-top: 43.5%;
}
.editorWarp .video_wrap .video-area .video {
@@ -2993,7 +3009,6 @@
transform: translate(-50%, -50%);
width: 100%;
background: #000;
aspect-ratio: 16/9;
}
.editorWarp .video_wrap .video-area .video video {
display: block;
@@ -3001,16 +3016,21 @@
height: 100%;
visibility: visible;
}
.editorWarp .video_wrap .video-area .video video video[poster] {
.editorWarp .video_wrap .video-area .video video[poster] {
height: 100%;
width: 100%;
}
.editorWarp .video_wrap .video-area .video .btn-play {
display: none;
.editorWarp .video_wrap .video-area .video .video-ctrl {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 4rem;
}
.editorWarp .video_wrap .video-area .video .btn-play {
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_play.png) no-repeat center/100% auto;
@@ -3024,8 +3044,31 @@
.editorWarp .video_wrap .video-area .video .btn-play.play {
display: block;
}
.editorWarp .video_wrap .video-area .video:hover .btn-play.pause {
display: block;
@media (max-width: 501px) {
.editorWarp .video_wrap .video-area .video .btn-play {
width: 4rem;
height: 4rem;
}
}
.editorWarp .video_wrap .video-area .video .btn-sound {
display: none;
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center/100% auto;
text-indent: -9999em;
cursor: pointer;
}
.editorWarp .video_wrap .video-area .video .btn-sound.off {
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center/100% auto;
}
.editorWarp .video_wrap .video-area .video .btn-sound.on {
background: url(../images/kia/contents/ico_sound_on.png) no-repeat center/100% auto;
}
@media (max-width: 501px) {
.editorWarp .video_wrap .video-area .video .btn-sound {
width: 4rem;
height: 4rem;
}
}
@media (max-width: 768px) {
.editorWarp .video_wrap .video-area {
@@ -3091,6 +3134,24 @@
.editorWarp .video_wrap .btn-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.editorWarp .video_wrap.played:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.played:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.played:hover .video-ctrl .btn-sound {
display: block;
}
.editorWarp .video_wrap.paused .btn-play,
.editorWarp .video_wrap.paused .btn-sound {
display: block !important;
}
.editorWarp .video_wrap.paused:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.paused:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.paused:hover .video-ctrl .btn-sound {
display: block;
}
@media (max-width: 768px) {
.editorWarp .video_wrap {
height: 56rem;
@@ -3098,7 +3159,7 @@
}
@media (max-width: 501px) {
.editorWarp .video_wrap {
height: 36rem;
height: 40rem;
}
}
.editorWarp .close-today {
@@ -3151,7 +3212,7 @@
}
@media (max-width: 501px) {
.editorWarp .close-today {
bottom: 4rem;
bottom: 3.5rem;
font-size: 1.2rem;
}
}
@@ -3202,4 +3263,12 @@
filter: blur(0);
}
}
.editorWarp .srsPlus .close-today {
bottom: 13rem;
}
@media (max-width: 1920px) {
.editorWarp .srsPlus .close-today {
bottom: 2vw;
}
}
/*# sourceMappingURL=pdp_detail.css.map */