1120사이즈 UIUX수정

This commit is contained in:
2025-05-29 00:44:25 +09:00
parent ed9b8e8b3b
commit 09914b462e
19 changed files with 712 additions and 3887 deletions

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;
}