Implement share functionality and UI updates: Add share button to various pages, create share popup with URL input, and enhance CSS styles for better layout and responsiveness. Update JavaScript for clipboard functionality and navigator share API support.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
@import "utils.scss";
|
||||
/*변수*/
|
||||
/*반응형 화면 크기*/
|
||||
/*css 디폴트는 모바일이 기준*/
|
||||
@@ -136,7 +137,7 @@
|
||||
.contentsTypeNew.caseAs ul.case01 li {
|
||||
position: relative;
|
||||
padding: 80px 30px 25px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 30px 24px;
|
||||
@@ -210,7 +211,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #EEEEEE;
|
||||
background-color: #eeeeee;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
@@ -246,7 +247,7 @@
|
||||
background-position: 40px 5px;
|
||||
}
|
||||
.contentsTypeNew.caseAs ul.case02 li + li {
|
||||
border-left: 1px solid #DEDEDE;
|
||||
border-left: 1px solid #dedede;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contentsTypeNew.caseAs ul.case02 li {
|
||||
@@ -329,7 +330,7 @@
|
||||
width: calc(50% - 10px);
|
||||
height: 120px;
|
||||
padding-left: 110px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background: url("/kr/assets/images/kia/contents/icon06.svg") no-repeat 30px center;
|
||||
line-height: 118px;
|
||||
@@ -474,7 +475,7 @@
|
||||
width: calc(33.3333333333% - 12px);
|
||||
}
|
||||
.contentsTypeNew.caseRegist .connectStore ul li:first-child img {
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.contentsTypeNew.caseRegist .connectStore ul li img {
|
||||
display: block;
|
||||
@@ -542,7 +543,7 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
@@ -628,7 +629,8 @@
|
||||
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;
|
||||
@@ -647,8 +649,8 @@
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 40px;
|
||||
border-top: 1px solid #9BA1A5;
|
||||
border-bottom: 1px solid #9BA1A5;
|
||||
border-top: 1px solid #9ba1a5;
|
||||
border-bottom: 1px solid #9ba1a5;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseVideo a {
|
||||
display: block;
|
||||
@@ -668,7 +670,7 @@
|
||||
top: 50px;
|
||||
width: 51px;
|
||||
height: 57px;
|
||||
background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionTab {
|
||||
overflow-x: auto;
|
||||
@@ -702,7 +704,7 @@
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionTab > ul button {
|
||||
margin-right: 20px;
|
||||
font-size: 18px;
|
||||
color: #9EA1A2;
|
||||
color: #9ea1a2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionTab > ul li.active button {
|
||||
@@ -739,7 +741,7 @@
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .item img {
|
||||
max-width: 100%;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -798,13 +800,14 @@
|
||||
.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;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #DEDEDE;
|
||||
background: #dedede;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before {
|
||||
left: calc((100% - 100px) / 4);
|
||||
@@ -842,7 +845,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section > div a.caseBorder {
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section > div a + a {
|
||||
margin-left: 15px;
|
||||
@@ -863,14 +866,15 @@
|
||||
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 {
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
padding-left: 50px;
|
||||
border-left: 1px solid #DEDEDE;
|
||||
border-left: 1px solid #dedede;
|
||||
}
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
@@ -945,7 +949,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 {
|
||||
@@ -1026,7 +1030,7 @@
|
||||
.contentsTypeNew.caseRspa2 .info ul li img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
@@ -1036,7 +1040,7 @@
|
||||
.contentsTypeNew.caseRspa2 .info ul li + li + li + li {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(3n+1) {
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(3n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -1050,7 +1054,7 @@
|
||||
.contentsTypeNew.caseRspa2 .info ul li + li + li {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(2n+1) {
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(2n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .info ul li strong {
|
||||
@@ -1085,7 +1089,7 @@
|
||||
position: relative;
|
||||
width: calc(33.3333333333% - 8px);
|
||||
padding: 30px 30px 110px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 30px bottom 30px;
|
||||
@@ -1101,7 +1105,7 @@
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .howtobuy > div > * b:first-child {
|
||||
font-size: 14px;
|
||||
color: #9EA1A2;
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .howtobuy > div > * strong {
|
||||
display: block;
|
||||
@@ -1177,11 +1181,13 @@
|
||||
width: calc(20% - 15px);
|
||||
height: unset;
|
||||
padding: 20px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
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 {
|
||||
@@ -1295,7 +1301,7 @@
|
||||
.contentsTypeNew .storeGuideItem > header strong {
|
||||
padding: 0 0 13px 5px;
|
||||
font-size: 12px;
|
||||
color: #FF0000;
|
||||
color: #ff0000;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.contentsTypeNew .storeGuideItem > header strong {
|
||||
@@ -1324,16 +1330,16 @@
|
||||
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;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul li > b {
|
||||
display: block;
|
||||
margin: 20px 0 8px;
|
||||
font-size: 14px;
|
||||
color: #9EA1A2;
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul li strong {
|
||||
font-size: 16px;
|
||||
@@ -1373,13 +1379,13 @@
|
||||
width: 400px;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
background: #C3C6C8;
|
||||
background: #c3c6c8;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag,
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
|
||||
border-radius: 0;
|
||||
background: #05141F;
|
||||
background: #05141f;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar-after-space {
|
||||
height: 68px;
|
||||
@@ -1395,7 +1401,8 @@
|
||||
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;
|
||||
@@ -1406,7 +1413,7 @@
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-next,
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-prev {
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1437,7 +1444,8 @@
|
||||
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;
|
||||
}
|
||||
@@ -1459,11 +1467,12 @@
|
||||
.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 {
|
||||
@@ -1601,7 +1610,7 @@
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.contentsTypeNew .caseMagazineView > div,
|
||||
.contentsTypeNew .caseMagazineView img {
|
||||
.contentsTypeNew .caseMagazineView img {
|
||||
width: 100%;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
@@ -1646,7 +1655,7 @@
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: #DEDEDE;
|
||||
background: #dedede;
|
||||
}
|
||||
.contentsTypeNew .caseService header h2 {
|
||||
font-size: 16px;
|
||||
@@ -1692,7 +1701,7 @@
|
||||
position: relative;
|
||||
width: calc(50% - 5px);
|
||||
padding: 120px 50px 30px 30px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 30px 30px;
|
||||
@@ -1715,7 +1724,8 @@
|
||||
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) {
|
||||
@@ -1931,7 +1941,7 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 1.4rem 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
@@ -1955,7 +1965,7 @@
|
||||
transform: translate(-50%, 0);
|
||||
width: 1.4rem;
|
||||
height: 0.8rem;
|
||||
displaY: block;
|
||||
display: block;
|
||||
background: url("/kr/assets/images/common/icon-notice.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -1968,7 +1978,7 @@
|
||||
width: 100%;
|
||||
top: 4.4rem;
|
||||
left: 0;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
@@ -2028,7 +2038,7 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 1.4rem 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
@@ -2052,7 +2062,7 @@
|
||||
transform: translate(-50%, 0);
|
||||
width: 1.4rem;
|
||||
height: 0.8rem;
|
||||
displaY: block;
|
||||
display: block;
|
||||
background: url("/kr/assets/images/common/icon-notice.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -2065,7 +2075,7 @@
|
||||
width: 100%;
|
||||
top: 4.4rem;
|
||||
left: 0;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
@@ -2126,7 +2136,7 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 1.4rem 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
@@ -2150,7 +2160,7 @@
|
||||
transform: translate(-50%, 0);
|
||||
width: 1.4rem;
|
||||
height: 0.8rem;
|
||||
displaY: block;
|
||||
display: block;
|
||||
background: url("/kr/assets/images/common/icon-notice.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -2163,7 +2173,7 @@
|
||||
width: 100%;
|
||||
top: 4.4rem;
|
||||
left: 0;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
@@ -2193,4 +2203,39 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*# sourceMappingURL=contents.css.map */
|
||||
/*# sourceMappingURL=contents.css.map */
|
||||
|
||||
.util-area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
@media (min-width: 768px) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
width: 8px;
|
||||
}
|
||||
.popupWarp .popInner .termsCon::-webkit-scrollbar-thumb {
|
||||
background-color: #DEDEDE;
|
||||
background-color: #dedede;
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
border: 2px solid transparent;
|
||||
@@ -127,8 +127,8 @@
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.2rem;
|
||||
color: #676767;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
border-bottom: 1px solid #DEDEDE;
|
||||
border-top: 1px solid #dedede;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
.popupWarp .marketingAgree.popInner .towButton {
|
||||
width: 100%;
|
||||
@@ -197,7 +197,7 @@
|
||||
.popupWarp .inquiryCaseEtc .inquiryCaseEtcCon .linkBox {
|
||||
margin-top: 2rem;
|
||||
padding: 2.8rem;
|
||||
background-color: #F3F3F3;
|
||||
background-color: #f3f3f3;
|
||||
text-align: center;
|
||||
}
|
||||
.popupWarp .inquiryCaseEtc .inquiryCaseEtcCon .linkBox a {
|
||||
@@ -224,6 +224,19 @@
|
||||
margin-left: 1rem;
|
||||
background-position: center;
|
||||
}
|
||||
.popupWarp .sharePop {
|
||||
max-width: 54rem;
|
||||
}
|
||||
.popupWarp .sharePop .shareCon .shareUrlBox input {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
padding: 0 2.4rem;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 0.6rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.payComplete {
|
||||
position: fixed;
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"}
|
||||
{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"}
|
||||
@@ -1,409 +1,422 @@
|
||||
@charset "UTF-8";
|
||||
@import 'utils.scss';
|
||||
@import "utils.scss";
|
||||
/*변수파일 import*/
|
||||
|
||||
.popupWarp {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
|
||||
.popInner {
|
||||
background-color: #fff;
|
||||
padding: 5rem;
|
||||
border-radius: 0.6rem;
|
||||
.popInner {
|
||||
background-color: #fff;
|
||||
padding: 5rem;
|
||||
border-radius: 0.6rem;
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.termsCon {
|
||||
height: 29rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #dedede;
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0px 0px 5px white;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2.4rem;
|
||||
color: #676767;
|
||||
}
|
||||
}
|
||||
|
||||
.oneButton {
|
||||
width: 16rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.towButton {
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
@include maxtablet {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.popInner {
|
||||
position: absolute;
|
||||
width: 92%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@include desktopMax {
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.termsPop {
|
||||
max-width: 90rem;
|
||||
}
|
||||
|
||||
.payInfo {
|
||||
max-width: 54rem;
|
||||
|
||||
.payInfoCon {
|
||||
p {
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.termsCon {
|
||||
height: 29rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
margin-top: 1.5rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.marketingAgree {
|
||||
max-width: 54rem;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #DEDEDE;
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.payInfoCon {
|
||||
p {
|
||||
text-align: center;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0px 0px 5px white;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2.4rem;
|
||||
color: #676767;
|
||||
}
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.oneButton {
|
||||
width: 16rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
margin-top: 1.5rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
&.borderWrap {
|
||||
margin-top: 30px;
|
||||
padding: 24px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.2rem;
|
||||
color: #676767;
|
||||
border-top: 1px solid #dedede;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.popInner {
|
||||
.towButton {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hideAdCheck {
|
||||
text-align: center;
|
||||
margin-top: 5rem;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include maxtablet {
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.payInfoCon {
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
|
||||
&.borderWrap {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.popInner {
|
||||
padding: 3rem 3rem 4rem;
|
||||
|
||||
.towButton {
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
margin-top: 4rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include maxtablet {
|
||||
padding: 3rem;
|
||||
button + button {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideAdCheck {
|
||||
margin-top: 4rem;
|
||||
|
||||
label {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popInner {
|
||||
position: absolute;
|
||||
width: 92%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.inquiryCaseEtc {
|
||||
max-width: 54rem;
|
||||
|
||||
@include desktopMax {
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
.inquiryCaseEtcCon {
|
||||
p {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
margin-top: 1.5rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.linkBox {
|
||||
margin-top: 2rem;
|
||||
padding: 2.8rem;
|
||||
background-color: #f3f3f3;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: inline;
|
||||
border-bottom: 1px solid #676767;
|
||||
margin-right: 2rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.2;
|
||||
color: #676767;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: -2rem;
|
||||
bottom: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.6rem 1.2rem;
|
||||
margin-left: 1rem;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.termsPop {
|
||||
max-width: 90rem;
|
||||
.sharePop {
|
||||
max-width: 54rem;
|
||||
.shareCon {
|
||||
.shareUrlBox {
|
||||
input {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
padding: 0 2.4rem;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 0.6rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payInfo {
|
||||
max-width: 54rem;
|
||||
|
||||
.payInfoCon {
|
||||
p {
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
margin-top: 1.5rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.marketingAgree {
|
||||
max-width: 54rem;
|
||||
|
||||
.payInfoCon {
|
||||
p {
|
||||
text-align: center;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
margin-top: 1.5rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
&.borderWrap {
|
||||
margin-top: 30px;
|
||||
padding: 24px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.2rem;
|
||||
color: #676767;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
border-bottom: 1px solid #DEDEDE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.popInner {
|
||||
.towButton {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hideAdCheck {
|
||||
text-align: center;
|
||||
margin-top: 5rem;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include maxtablet {
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.payInfoCon {
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
|
||||
&.borderWrap {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.popInner {
|
||||
padding: 3rem 3rem 4rem;
|
||||
|
||||
.towButton {
|
||||
margin-top: 4rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
button+button {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideAdCheck {
|
||||
margin-top: 4rem;
|
||||
|
||||
label {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inquiryCaseEtc {
|
||||
max-width: 54rem;
|
||||
|
||||
.inquiryCaseEtcCon {
|
||||
p {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
margin-top: 1.5rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.linkBox {
|
||||
margin-top: 2rem;
|
||||
padding: 2.8rem;
|
||||
background-color: #F3F3F3;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: inline;
|
||||
border-bottom: 1px solid #676767;
|
||||
margin-right: 2rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.2;
|
||||
color: #676767;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: -2rem;
|
||||
bottom: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.6rem 1.2rem;
|
||||
margin-left: 1rem;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//설치안내 팝업
|
||||
.payComplete {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
|
||||
.popInner {
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
max-width: 120rem;
|
||||
height: 90rem;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -45rem;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: url(../images/kia/contents/poup_complete.jpg) no-repeat center / cover;
|
||||
|
||||
.popInner {
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
max-width: 120rem;
|
||||
height: 90rem;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -45rem;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: url(../images/kia/contents/poup_complete.jpg) no-repeat center / cover;
|
||||
.popContents {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 8.333%;
|
||||
width: 44rem;
|
||||
height: 45.5rem;
|
||||
|
||||
.popContents {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 8.333%;
|
||||
width: 44rem;
|
||||
height: 45.5rem;
|
||||
.logo {
|
||||
display: block;
|
||||
height: 1.6rem;
|
||||
margin-bottom: 1.9rem;
|
||||
background-image: url(../images/kia/kia-logo-n.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
height: 1.6rem;
|
||||
margin-bottom: 1.9rem;
|
||||
background-image: url(../images/kia/kia-logo-n.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
.payInfoCon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 44rem;
|
||||
height: 42rem;
|
||||
background-color: #fff;
|
||||
|
||||
.payInfoCon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 44rem;
|
||||
height: 42rem;
|
||||
background-color: #fff;
|
||||
& > p {
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 2.8rem;
|
||||
line-height: 3.4rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&>p {
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 2.8rem;
|
||||
line-height: 3.4rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include maxtablet {
|
||||
max-height: 64rem;
|
||||
width: calc(100% - 4rem);
|
||||
background: url(../images/kia/contents/poup_complete_m.jpg) no-repeat center / cover;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 0;
|
||||
|
||||
.popContents {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 81.25%;
|
||||
height: 1.2rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.payInfoCon {
|
||||
width: 81.25%;
|
||||
height: 27.7rem;
|
||||
margin: 0 auto;
|
||||
|
||||
&>p {
|
||||
padding: 0 3rem;
|
||||
|
||||
strong {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.16rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.68rem;
|
||||
|
||||
em {
|
||||
display: block;
|
||||
}
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oneButton {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 320px) {
|
||||
.popContents {
|
||||
.payInfoCon {
|
||||
&>p {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include maxtablet {
|
||||
max-height: 64rem;
|
||||
width: calc(100% - 4rem);
|
||||
background: url(../images/kia/contents/poup_complete_m.jpg) no-repeat center / cover;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 0;
|
||||
|
||||
.popContents {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: 81.25%;
|
||||
height: 1.2rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.payInfoCon {
|
||||
width: 81.25%;
|
||||
height: 27.7rem;
|
||||
margin: 0 auto;
|
||||
|
||||
& > p {
|
||||
padding: 0 3rem;
|
||||
|
||||
strong {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.16rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.68rem;
|
||||
|
||||
em {
|
||||
display: block;
|
||||
}
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oneButton {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.popContents {
|
||||
.payInfoCon {
|
||||
& > p {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,15 +157,6 @@
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
.contentWarp .productView .productRight .optionWarp .producTitle h1 .btn-wish {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: url(../images/kia/pdp/display_theme_disney/Icon_heart.png) no-repeat center/100% auto;
|
||||
}
|
||||
.contentWarp .productView .productRight .optionWarp .producTitle span {
|
||||
color: #676767;
|
||||
font-size: 1.5rem;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -132,15 +132,6 @@
|
||||
@include tablet {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
.btn-wish {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: url(../images/kia/pdp/display_theme_disney/Icon_heart.png) no-repeat center / 100% auto;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #676767;
|
||||
|
||||
@@ -103,6 +103,14 @@ html {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#promotion .promotionWrap .util-area {
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#promotion .promotionWrap .util-area {
|
||||
margin-bottom: 2.8rem;
|
||||
}
|
||||
}
|
||||
#promotion .parallax-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -97,6 +97,12 @@ html {
|
||||
}
|
||||
}
|
||||
}
|
||||
.util-area {
|
||||
margin-bottom: 2.4rem;
|
||||
@include tablet {
|
||||
margin-bottom: 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax 섹션 스타일
|
||||
|
||||
Reference in New Issue
Block a user