Browse Source

feat : 반응형 추가 769 ~ 1024

remotes/origin/main
이시연 1 month ago
parent
commit
836884f9ae
  1. 16
      src/css/main.css

16
src/css/main.css

@ -225,14 +225,22 @@ body{overflow-x:hidden;}
@media (max-width:768px){ @media (max-width:768px){
.airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);} .airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);}
.airspace-dot-uam{width:150px;} .airspace-dot-uam{width:130px;}
.airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;} .airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;}
.airspace-uam-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;} .airspace-uam-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
.airspace-uam-content span{font-size:14px;line-height:1.7;word-break:keep-all;} .airspace-uam-content span{font-size:14px;line-height:1.7;word-break:keep-all;}
.airspace-dot-image img{width: 16px;height:16%} .airspace-dot-image img{width: 16px;height:16%}
.airspace-dot-image{ .airspace-dot-image{transform:translateX(-5%);}
transform:translateX(-5%); }
}
@media (min-width:769px) and (max-width:1024px){
.airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);}
.airspace-dot-uam{width:280px;}
.airspace-uam-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;}
.airspace-uam-content h2{font-size:clamp(44px,7vw,72px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
.airspace-uam-content span{font-size:15px;line-height:1.7;word-break:keep-all;}
.airspace-dot-image img{width:16px;height:auto;}
.airspace-dot-image{transform:translateX(-6%);}
} }
@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}} @keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}

Loading…
Cancel
Save