gnb 원뎁스
This commit is contained in:
@@ -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 */
|
||||
Reference in New Issue
Block a user