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-08-05 11:54:16 +09:00
parent 206836b8c7
commit d693f7e152
17 changed files with 114 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
assets/css/pdp_detail.css
View File

@@ -2312,6 +2312,7 @@
@media (max-width: 768px) {
.inCarGame.comp_1x_w_v_o_b .image_area {
overflow: hidden;
height: auto;
}
}
.inCarGame .comp_top.title-area {
@@ -2355,6 +2356,12 @@
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet {
width: 3rem;
height: 0.3rem;
}
}
.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: rgb(255, 255, 255);
}
@@ -2995,7 +3002,7 @@
}
}
.editorWarp .video_wrap {
display: flex;
display: none;
align-items: center;
justify-content: center;
position: absolute;
@@ -3035,26 +3042,20 @@
height: 100%;
width: 100%;
}
.editorWarp .video_wrap .video-area .video .video-ctrl {
display: flex;
align-items: center;
justify-content: center;
.editorWarp .video_wrap .video-area .video .btn-play {
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;
background: url(../images/kia/contents/ico_play.png?v1) no-repeat center/100% auto;
text-indent: -9999em;
cursor: pointer;
}
.editorWarp .video_wrap .video-area .video .btn-play.pause {
display: none;
background: url(../images/kia/contents/ico_pause.png) no-repeat center/100% auto;
background: url(../images/kia/contents/ico_pause.png?v1) no-repeat center/100% auto;
}
.editorWarp .video_wrap .video-area .video .btn-play.play {
display: block;
@@ -3067,22 +3068,27 @@
}
.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;
position: absolute;
bottom: 3rem;
right: 3rem;
width: 4rem;
height: 4rem;
background: url(../images/kia/contents/ico_sound_off.png?v1) 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;
background: url(../images/kia/contents/ico_sound_off.png?v1) 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;
background: url(../images/kia/contents/ico_sound_on.png?v1) no-repeat center/100% auto;
}
@media (max-width: 501px) {
.editorWarp .video_wrap .video-area .video .btn-sound {
width: 4rem;
height: 4rem;
bottom: 1.5rem;
right: 1.5rem;
width: 2rem;
height: 2rem;
}
}
@media (max-width: 768px) {
@@ -3149,22 +3155,17 @@
.editorWarp .video_wrap .btn-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.editorWarp .video_wrap.played .video:hover .video-ctrl {
display: flex;
.editorWarp .video_wrap.played .video .btn-sound {
display: block;
}
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-sound {
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-play {
display: block;
}
.editorWarp .video_wrap.paused .btn-play,
.editorWarp .video_wrap.paused .btn-sound {
display: block !important;
}
.editorWarp .video_wrap.paused .video:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-sound {
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-play {
display: block;
}
@media (max-width: 768px) {
@@ -3232,7 +3233,7 @@
}
}
.editorWarp .btn-intro {
display: flex;
display: none;
align-items: center;
position: absolute;
top: 5rem;
@@ -3302,14 +3303,16 @@
max-width: 92%;
}
}
.editorWarp .visualBg .swiper-button-next, .editorWarp .visualBg .swiper-button-prev {
.editorWarp .visualBg .swiper-button-next,
.editorWarp .visualBg .swiper-button-prev {
position: static;
width: 1.8rem;
height: 3.6rem;
margin: 0;
background: url(../images/common/ico_arrow_r.png) no-repeat center/contain;
}
.editorWarp .visualBg .swiper-button-next:after, .editorWarp .visualBg .swiper-button-prev:after {
.editorWarp .visualBg .swiper-button-next:after,
.editorWarp .visualBg .swiper-button-prev:after {
display: none;
}
.editorWarp .visualBg .swiper-button-prev {