@media(max-width: 1920px){ main{ .detail--container{ padding: 0 20px; .title--wrap{ padding-left: 0; padding-right: 0; h2{ font-size: 60px; } } .content--wrap{ padding-left: 0; padding-right: 0; .tech--card--wrap{ .tech--card{ h3{ font-size: 18px; } } } } .more--section{ >h2{ font-size: 36px; } .tech--card--wrap{ .tech--card{ h3{ font-size: 18px; } } } } .img--desc--section{ &.reverse{ .desc--wrap{ padding-left: 0; padding-right: 20px; } } .desc--wrap{ padding-right: 0; padding-left: 20px; h3{ font-size: 24px; } } } } } footer{ .footer--wrap{ padding: 40px 20px; } } } @media (max-width: 1440px) { header{ .header--wrap{ padding: 20px; .header--search--wrap{ opacity: 0; transition: opacity 0.3s; pointer-events: none; } } .header--hamburger{ display: flex; order: -1; &.active{ &~.header--logo--wrap{ opacity: 0; } &~.header--search--wrap{ opacity: 1; } } } .header--logo--wrap{ position: absolute; left: 50%; transform: translateX(-50%); } .header--menu--wrap{ display: none; } .header--submenu{ display: none; } .header--dim{ display: none; } .mobile--menu{ display: block; .mobile--menu--main{ } } } } @media(max-width: 1024px){ main{ .visual--section{ .title--wrap{ width: 100%; padding: 40px 20px; >h2{ font-size: 28px; } >p{ font-size: 16px; } } .desc--wrap{ .desc{ padding: 20px; } } } .detail--container{ .title--wrap{ h2{ font-size: 44px; } } .content--wrap{ .tech--card--wrap{ .tech--card{ width: calc(50% - 8px); } } .ls--card--wrap{ .ls--card{ gap: 36px; flex-wrap: wrap; .ls--img--wrap{ width: 100%; } .ls--txt--wrap{ width: 100%; } &.reverse{ flex-direction: column-reverse; } } } } .title--section{ padding-left: 0; padding-right: 0; >h2{ font-size: 36px; &.big--title{ font-size: 40px; } } >h3{ font-size: 20px; &.big--title{ font-size: 28px; } } } .desc--section{ padding-left: 0; padding-right: 0; >h2{ font-size: 36px; } >h3{ font-size: 32px; } &.full--type{ >ul{ >li{ font-size: 20px; } } } } .img--desc--section{ flex-direction: column; gap: 20px; &.reverse{ flex-direction: column; .desc--wrap{ padding: 0; } } .img--wrap{ width: 100%; } .desc--wrap{ padding: 0; width: 100%; } &.type2{ .inner--box{ width: 100%; } } } .more--section{ >h2{ font-size: 28px; } .tech--card--wrap{ flex-wrap: wrap; row-gap: 16px; .tech--card{ width: calc(50% - 8px); } } } } } } @media(max-width: 768px){ main{ .visual--section{ &.h--800{ .img--wrap{ height: 640px; } } } .detail--container{ .title--wrap{ h2{ font-size: 24px; } } .content--wrap{ .tech--card--wrap{ .tech--card{ width: 100%; } } .ls--card--wrap{ .ls--card{ .ls--txt--wrap{ >h2{ font-size: 24px; } >h3{ font-size: 18px; } } } } } .more--section{ .tech--card--wrap{ .tech--card{ width: 100%; } } &.type2{ .tech--card--wrap{ .tech--card{ width: 100%; } } } &.type3{ .tech--card--wrap{ .tech--card{ width: 100%; } } } } .title--section{ >h2{ font-size: 28px; &.big--title{ font-size: 32px; } } } .desc--section{ >h2{ font-size: 28px; } >h3{ font-size: 24px; &.big--title{ font-size: 28px; } } } .img--section{ &.type3{ flex-wrap: wrap; .img--box{ &:first-child{ width: 100%; } &:last-child{ width: 100%; } } } } } } footer{ .footer--wrap{ padding: 70px 0 40px; .scroll--to--top{ right: 20px; } .footer--info--wrap{ padding: 40px 20px 0; .sns--wrap{ justify-content: flex-start; } .copy--wrap{ .link--list{ gap: 12px; } } } } } .quick__menu__wrap{ } } @media(max-width: 500px){ main{ .detail--container{ .img--section{ &.type2{ flex-direction: column; .img--box{ width: 100%; } } } } } }