gnb 원뎁스

This commit is contained in:
2025-11-23 23:23:25 +09:00
parent cfb9b1c4d4
commit 9f67ce0682
41 changed files with 7909 additions and 6710 deletions

View File

@@ -1,5 +1,4 @@
@charset "UTF-8";
@import "utils.scss";
/*변수*/
/*반응형 화면 크기*/
/*css 디폴트는 모바일이 기준*/
@@ -12,11 +11,22 @@
.contentHeaderCase {
position: absolute;
left: 0;
top: 0;
top: 10.6rem;
width: 100%;
height: 22rem;
background-size: cover;
background-position: center;
transition: top 0.3s ease-in-out;
}
@media (min-width: 768px) {
.contentHeaderCase {
top: 5.6rem;
}
}
@media (min-width: 1120px) {
.contentHeaderCase {
top: 8rem;
}
}
@media (min-width: 1025px) {
.contentHeaderCase {
@@ -41,6 +51,9 @@
.contentHeaderCase.case06 {
background-image: url("/kr/assets/images/kia/contents/header06.jpg");
}
.contentHeaderCase.case07 {
background-image: url("/kr/assets/images/kia/keybg/event-key.png");
}
.contentsTypeNew {
width: 100%;
@@ -629,8 +642,7 @@
line-height: 54px;
color: #000;
}
.contentsTypeNew.caseUsageDetail .caseBtnWrap a::before,
.contentsTypeNew.caseUsageDetail .caseBtnWrap a::after {
.contentsTypeNew.caseUsageDetail .caseBtnWrap a::before, .contentsTypeNew.caseUsageDetail .caseBtnWrap a::after {
content: "";
position: absolute;
top: 0;
@@ -800,8 +812,7 @@
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2) h3 {
width: 100px;
}
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before,
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before, .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
content: "";
position: absolute;
top: 0;
@@ -866,8 +877,7 @@
margin-top: 40px;
width: unset;
}
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before,
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before, .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
display: none;
}
.contentsTypeNew.caseUsageDetail .caseStreaming > section:last-of-type {
@@ -949,7 +959,7 @@
}
@media (max-width: 680px) {
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap .item,
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap p {
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap p {
width: 100%;
}
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap .item + .item {
@@ -1185,9 +1195,7 @@
border-radius: 6px;
font-size: 16px;
}
.contentsTypeNew .storeguideTab a:hover,
.contentsTypeNew .storeguideTab a:focus,
.contentsTypeNew .storeguideTab a.current {
.contentsTypeNew .storeguideTab a:hover, .contentsTypeNew .storeguideTab a:focus, .contentsTypeNew .storeguideTab a.current {
border-color: #000;
}
.contentsTypeNew .storeguideTab a strong {
@@ -1330,7 +1338,7 @@
image-rendering: crisp-edges;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
backface-visibility: hidden;
}
.contentsTypeNew .storeGuideItem ul li img:not(.noBorder) {
border: 1px solid #dedede;
@@ -1401,8 +1409,7 @@
height: 55px;
background: url("/kr/assets/images/kia/contents/arrowSwipe.svg") no-repeat center;
}
.contentsTypeNew .storeGuideItem .swiper-button-next::after,
.contentsTypeNew .storeGuideItem .swiper-button-next.swiper-button-disabled,
.contentsTypeNew .storeGuideItem .swiper-button-next::after, .contentsTypeNew .storeGuideItem .swiper-button-next.swiper-button-disabled,
.contentsTypeNew .storeGuideItem .swiper-button-prev::after,
.contentsTypeNew .storeGuideItem .swiper-button-prev.swiper-button-disabled {
display: none;
@@ -1413,7 +1420,7 @@
}
@media (max-width: 1400px) {
.contentsTypeNew .storeGuideItem .swiper-button-next,
.contentsTypeNew .storeGuideItem .swiper-button-prev {
.contentsTypeNew .storeGuideItem .swiper-button-prev {
display: none;
}
}
@@ -1444,8 +1451,7 @@
padding-left: 24px !important;
margin-right: 0 !important;
}
.contentsTypeNew .storeGuideItem ul.caseWide li,
.contentsTypeNew .storeGuideItem ul.caseWide2 li {
.contentsTypeNew .storeGuideItem ul.caseWide li, .contentsTypeNew .storeGuideItem ul.caseWide2 li {
width: 480px;
padding-left: 2rem !important;
}
@@ -1467,12 +1473,11 @@
.contentsTypeNew .storeGuideItem ul li b {
margin-top: 15px;
}
.contentsTypeNew .storeGuideItem ul.caseWide li,
.contentsTypeNew .storeGuideItem ul.caseWide2 li {
.contentsTypeNew .storeGuideItem ul.caseWide li, .contentsTypeNew .storeGuideItem ul.caseWide2 li {
width: 100%;
}
.contentsTypeNew .storeGuideItem .swiper-horizontal > .swiper-scrollbar,
.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal {
.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal {
width: calc(100% - 40px);
}
.contentsTypeNew .storeGuideItem .swiper-scrollbar-after-space {
@@ -1610,7 +1615,7 @@
}
@media (max-width: 640px) {
.contentsTypeNew .caseMagazineView > div,
.contentsTypeNew .caseMagazineView img {
.contentsTypeNew .caseMagazineView img {
width: 100%;
padding-right: 0 !important;
padding-left: 0 !important;
@@ -1724,8 +1729,7 @@
height: 16px;
background: url("/kr/assets/images/kia/contents/arrow.svg") no-repeat center;
}
.contentsTypeNew .caseService div a:hover,
.contentsTypeNew .caseService div a:focus {
.contentsTypeNew .caseService div a:hover, .contentsTypeNew .caseService div a:focus {
border-color: #000;
}
@media screen and (max-width: 500px) {
@@ -2203,7 +2207,6 @@
text-overflow: ellipsis;
overflow: hidden;
}
/*# sourceMappingURL=contents.css.map */
.util-area {
position: relative;
@@ -2212,30 +2215,63 @@
align-items: center;
gap: 1.6rem;
margin-bottom: 1.6rem;
@media (min-width: 768px) {
}
@media (min-width: 768px) {
.util-area {
gap: 2rem;
margin-bottom: 2rem;
}
.btn-wish {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/icon_heart.png) no-repeat center / 100% auto;
text-indent: -9999px;
cursor: pointer;
@media (min-width: 768px) {
width: 3rem;
height: 3rem;
}
}
.btn-share {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/icon_share.png) no-repeat center / 100% auto;
text-indent: -9999px;
cursor: pointer;
@media (min-width: 768px) {
width: 3rem;
height: 3rem;
}
}
.util-area .btn-wish {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/icon_heart.png) no-repeat center/100% auto;
text-indent: -9999px;
cursor: pointer;
}
@media (min-width: 768px) {
.util-area .btn-wish {
width: 3rem;
height: 3rem;
}
}
.util-area .btn-share {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/icon_share.png) no-repeat center/100% auto;
text-indent: -9999px;
cursor: pointer;
}
@media (min-width: 768px) {
.util-area .btn-share {
width: 3rem;
height: 3rem;
}
}
.utilBtnArea {
width: 100%;
padding: 4rem 0;
}
@media (min-width: 768px) {
.utilBtnArea {
padding: 4rem 0;
}
}
.utilBtnArea .utilBtnInner {
display: flex;
justify-content: flex-end;
width: 100%;
max-width: 120rem;
margin: 0 auto;
padding: 0 2rem;
}
@media (min-width: 768px) {
.utilBtnArea .utilBtnInner {
padding: 0;
}
}
.utilBtnArea .utilBtnInner .util-area {
margin-bottom: 0;
}
/*# sourceMappingURL=contents.css.map */