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

1120사이즈 UIUX수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-05-29 00:44:25 +09:00
parent ed9b8e8b3b
commit 09914b462e
19 changed files with 712 additions and 3887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4345
kr/assets/css/common copy.css
View File

File diff suppressed because it is too large Load Diff

103
kr/assets/css/common.css
View File

@@ -651,10 +651,13 @@ video::-webkit-media-controls {
}
@media (max-width: 1240px) {
.hederWarp_n {
padding: 0 2rem;
padding: 0 1.5rem;
}
}
.hederWarp_n.menu-open + .pageTitle {
.hederWarp_n.menu-open ~ .pageTitle {
z-index: 0 !important;
}
.hederWarp_n.menu-open ~ .contentWarp {
z-index: 0 !important;
}
.hederWarp_n.menu-open .user .icon-user {
@@ -690,7 +693,7 @@ video::-webkit-media-controls {
.hederWarp_n.menu-open .headerInner .func .userLogin > a:hover {
border: 1px solid rgb(5, 20, 31);
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .top-line {
background-color: #000;
}
@@ -698,7 +701,7 @@ video::-webkit-media-controls {
background-color: #000;
}
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n.menu-open .headerInner .menuBg::after {
opacity: 1;
}
@@ -711,7 +714,7 @@ video::-webkit-media-controls {
height: 8rem;
margin: 0 auto;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner {
height: 5.6rem;
}
@@ -719,7 +722,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .menuBg {
display: none;
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n .headerInner .menuBg {
display: block;
position: absolute;
@@ -751,7 +754,7 @@ video::-webkit-media-controls {
position: relative;
z-index: 2;
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .logoWrap {
display: flex;
align-items: center;
@@ -772,13 +775,13 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .logoWrap a span {
margin-left: 1rem;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .logoWrap a span {
font-size: 1.5rem;
margin-top: 0.4rem;
}
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp {
position: fixed;
top: 0;
@@ -800,7 +803,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop {
display: none;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .mobileMenuTop {
display: flex;
justify-content: space-between;
@@ -839,7 +842,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
display: none;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .mobileFunc {
display: flex;
width: 100%;
@@ -873,7 +876,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist {
display: none;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist {
display: block;
position: relative;
@@ -899,10 +902,12 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 600;
display: flex;
align-items: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 2.2rem;
word-break: break-word;
}
.hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span + span {
color: #676767;
@@ -977,8 +982,14 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu {
display: flex;
margin-left: 4.5rem;
transition: margin-left 0.2s ease-in-out;
}
@media (min-width: 1024px) {
@media (max-width: 1220px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu {
margin-left: 2rem;
}
}
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap.info {
display: block;
width: 27rem;
@@ -987,28 +998,28 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap h3 {
margin-bottom: 2.8rem;
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(1) .menuDepth2Wrap {
left: -15.6rem;
left: -11.6rem;
}
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(2) .menuDepth2Wrap {
left: 3.4rem;
left: 5.4rem;
}
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(3) .menuDepth2Wrap {
left: 19.6rem;
left: 21.6rem;
}
}
@media (min-width: 1024px) {
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(4) .menuDepth2Wrap {
display: block;
left: 28.4rem;
left: 30.4rem;
}
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu {
display: block;
margin-left: 0;
@@ -1022,7 +1033,7 @@ video::-webkit-media-controls {
position: relative;
z-index: 2;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap {
padding: 0 2rem;
}
@@ -1036,8 +1047,14 @@ video::-webkit-media-controls {
font-size: 1.6rem;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
}
@media (max-width: 1024px) {
@media (max-width: 1220px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
padding: 0 1.25rem;
}
}
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
position: relative;
justify-content: flex-start;
@@ -1084,7 +1101,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap h3 a {
color: #000;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
position: initial;
width: 100%;
@@ -1102,7 +1119,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
width: 14rem;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.info {
width: 100%;
}
@@ -1110,7 +1127,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support {
width: 16rem;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap.support {
width: 100%;
}
@@ -1140,7 +1157,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a:hover {
color: #05141f;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a {
padding: 0.6rem 0;
}
@@ -1148,7 +1165,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
display: none;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
display: flex;
position: absolute;
@@ -1170,7 +1187,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
display: none;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
position: absolute;
bottom: 2rem;
@@ -1187,9 +1204,15 @@ video::-webkit-media-controls {
}
.hederWarp_n .headerInner .func .carlist {
position: relative;
margin-right: 2.5rem;
margin-right: 2rem;
transition: all 0.2s ease-in-out;
}
@media (max-width: 1024px) {
@media (max-width: 1220px) {
.hederWarp_n .headerInner .func .carlist {
margin-right: 1.5rem;
}
}
@media (max-width: 1120px) {
.hederWarp_n .headerInner .func .carlist {
display: none;
}
@@ -1200,7 +1223,7 @@ video::-webkit-media-controls {
}
.hederWarp_n .headerInner .func .carlist .carItem {
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
height: 8rem;
}
@@ -1232,7 +1255,7 @@ video::-webkit-media-controls {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 2.2rem;
white-space: nowrap;
}
.hederWarp_n .headerInner .func .carlist .carItem span + span::before {
content: "";
@@ -1310,7 +1333,7 @@ video::-webkit-media-controls {
display: block;
margin-right: 2rem;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .func .userLogin {
display: none;
}
@@ -1331,9 +1354,9 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .func .user {
position: relative;
display: block;
margin-right: 2rem;
margin-right: 0;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .func .user {
display: none;
}
@@ -1405,7 +1428,7 @@ video::-webkit-media-controls {
.hederWarp_n .headerInner .func .moblieMenu {
display: none;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n .headerInner .func .moblieMenu {
display: flex;
justify-content: center;
@@ -1481,7 +1504,7 @@ video::-webkit-media-controls {
.hederWarp_n.hBoder .headerInner .func .userLogin > a:hover {
border: 1px solid rgb(5, 20, 31);
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.hederWarp_n.noBoder .headerInner .func .moblieMenu .burgur .top-line,
.hederWarp_n.hBoder .headerInner .func .moblieMenu .burgur .top-line {
background-color: #000;
@@ -3845,7 +3868,7 @@ video::-webkit-media-controls {
width: calc(100% - 4rem);
}
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.installInfoPopup .popInner {
padding: 3rem 3rem;
}

1
kr/assets/css/common.css copy.map
View File

File diff suppressed because one or more lines are too long

2
kr/assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

103
kr/assets/css/common.scss
View File

@@ -733,14 +733,17 @@ video::-webkit-media-controls {
background-color: transparent;
@media (max-width: 1240px) {
padding: 0 2rem;
padding: 0 1.5rem;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
// height: 5.6rem;
}
&.menu-open {
&+.pageTitle {
&~.pageTitle {
z-index: 0 !important;
}
&~.contentWarp {
z-index: 0 !important;
}
.user .icon-user {
@@ -809,7 +812,7 @@ video::-webkit-media-controls {
}
.moblieMenu {
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.burgur .top-line {
background-color: #000;
}
@@ -822,7 +825,7 @@ video::-webkit-media-controls {
}
.menuBg {
@media (min-width: 1024px) {
@media (min-width: 1120px) {
&::after{
opacity: 1;
}
@@ -844,13 +847,13 @@ video::-webkit-media-controls {
margin: 0 auto;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
height: 5.6rem;
}
.menuBg {
display: none;
@media (min-width: 1024px) {
@media (min-width: 1120px) {
display: block;
position: absolute;
top: 0;
@@ -881,7 +884,7 @@ video::-webkit-media-controls {
.logoWrap {
position: relative;
z-index: 2;
@media (min-width: 1024px) {
@media (min-width: 1120px) {
display: flex;
align-items: center;
height: 8rem;
@@ -902,7 +905,7 @@ video::-webkit-media-controls {
span {
margin-left: 1rem;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
font-size: 1.5rem;
margin-top: 0.4rem;
}
@@ -911,7 +914,7 @@ video::-webkit-media-controls {
}
.menuWarp {
@media (max-width: 1024px) {
@media (max-width: 1120px) {
position: fixed;
top: 0;
bottom: 0;
@@ -932,7 +935,7 @@ video::-webkit-media-controls {
.mobileMenuTop {
display: none;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: flex;
justify-content: space-between;
align-items: center;
@@ -979,7 +982,7 @@ video::-webkit-media-controls {
.mobileFunc {
display: none;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: flex;
width: 100%;
@@ -1016,7 +1019,7 @@ video::-webkit-media-controls {
.mobileCarlist {
display: none;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: block;
position: relative;
@@ -1042,8 +1045,10 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 600;
display: flex;
align-items: center;
width: fit-content;
min-width: 2.2rem;
word-break: break-word;
}
span+span {
@@ -1136,11 +1141,15 @@ video::-webkit-media-controls {
.menu {
display: flex;
margin-left: 4.5rem;
transition: margin-left 0.2s ease-in-out;
@media (max-width: 1220px) {
margin-left: 2rem;
}
&.open {
li {
.menuDepth2Wrap {
&.info {
@media (min-width: 1024px) {
@media (min-width: 1120px) {
display: block;
width: 27rem;
}
@@ -1154,39 +1163,39 @@ video::-webkit-media-controls {
li:nth-child(1) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
left: -15.6rem;
@media (min-width: 1120px) {
left: -11.6rem;
}
}
}
li:nth-child(2) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
left: 3.4rem;
@media (min-width: 1120px) {
left: 5.4rem;
}
}
}
li:nth-child(3) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
left: 19.6rem;
@media (min-width: 1120px) {
left: 21.6rem;
}
}
}
li:nth-child(4) {
.menuDepth2Wrap {
@media (min-width: 1024px) {
@media (min-width: 1120px) {
display: block;
left: 28.4rem;
left: 30.4rem;
}
}
}
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: block;
margin-left: 0;
margin-top: 2rem;
@@ -1199,7 +1208,7 @@ video::-webkit-media-controls {
position: relative;
z-index: 2;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
padding: 0 2rem;
}
@@ -1212,8 +1221,13 @@ video::-webkit-media-controls {
font-size: 1.6rem;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
@media (max-width: 1024px) {
@media (max-width: 1220px) {
padding: 0 1.25rem;
}
@media (max-width: 1120px) {
position: relative;
justify-content: flex-start;
height: initial;
@@ -1271,7 +1285,7 @@ video::-webkit-media-controls {
}
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
position: initial;
width: 100%;
transform: initial;
@@ -1290,7 +1304,7 @@ video::-webkit-media-controls {
&.info {
width: 14rem;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
width: 100%;
}
}
@@ -1298,7 +1312,7 @@ video::-webkit-media-controls {
&.support {
width: 16rem;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
width: 100%;
}
}
@@ -1333,7 +1347,7 @@ video::-webkit-media-controls {
color: #05141f;
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
padding: .6rem 0;
}
}
@@ -1346,7 +1360,7 @@ video::-webkit-media-controls {
.mobileSubMenu {
display: none;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: flex;
position: absolute;
bottom:3.2rem;
@@ -1372,7 +1386,7 @@ video::-webkit-media-controls {
.loginBtn {
display: none;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
position: absolute;
bottom: 2rem;
display: block;
@@ -1391,9 +1405,13 @@ video::-webkit-media-controls {
.carlist {
position: relative;
margin-right: 2.5rem;
@media (max-width: 1024px) {
margin-right: 2rem;
transition: all 0.2s ease-in-out;
@media (max-width: 1220px) {
margin-right: 1.5rem;
}
@media (max-width: 1120px) {
display: none;
}
@@ -1408,7 +1426,7 @@ video::-webkit-media-controls {
.carItem {
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
height: 8rem;
@@ -1444,7 +1462,8 @@ video::-webkit-media-controls {
font-weight: 400;
display: flex;
width: fit-content;
min-width: 2.2rem;
// min-width: 2.2rem;
white-space: nowrap;
}
span+span {
@@ -1540,7 +1559,7 @@ video::-webkit-media-controls {
display: block;
margin-right: 2rem;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: none;
}
@@ -1563,9 +1582,9 @@ video::-webkit-media-controls {
.user {
position: relative;
display: block;
margin-right: 2rem;
margin-right: 0;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: none;
}
@@ -1648,7 +1667,7 @@ video::-webkit-media-controls {
.moblieMenu {
display: none;
@media (max-width: 1024px) {
@media (max-width: 1120px) {
display: flex;
justify-content: center;
align-items: center;
@@ -1755,7 +1774,7 @@ video::-webkit-media-controls {
}
.moblieMenu {
@media (max-width: 1024px) {
@media (max-width: 1120px) {
.burgur .top-line {
background-color: #000;
}
@@ -4335,7 +4354,7 @@ video::-webkit-media-controls {
width: calc(100% - 4rem);
}
@media (max-width: 1024px) {
@media (max-width: 1120px) {
padding: 3rem 3rem;
}

1385
kr/assets/css/kia.css
View File

File diff suppressed because it is too large Load Diff

1
kr/assets/css/kia.css.map
View File

File diff suppressed because one or more lines are too long

2
kr/assets/css/kia/kia.css
View File

@@ -388,11 +388,13 @@ html .hederWarp_n .headerInner .gnb .logoWrap a .logoImg {
height: 1.5rem;
background-image: url(../../images/kia/kia-logo-n.svg);
background-repeat: no-repeat;
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
@media (min-width: 1025px) {
html .hederWarp_n .headerInner .gnb .logoWrap a .logoImg {
height: 2rem;
width: 22.8rem;
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
}
html .hederWarp_n.menu-open .headerInner .gnb .logoWrap a .logoImg {

2
kr/assets/css/kia/kia.css.map
View File

File diff suppressed because one or more lines are too long

2
kr/assets/css/kia/kia.scss
View File

@@ -481,10 +481,12 @@ html {
height: 1.5rem;
background-image: url(../../images/kia/kia-logo-n.svg);
background-repeat: no-repeat;
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
@include desktopMin {
height: 2rem;
width: 22.8rem;
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
}