@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; } } } } } } @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%; } } } } } } } @media(max-width: 500px){ main{ .detail--container{ .img--section{ &.type2{ flex-direction: column; .img--box{ width: 100%; } } } } } }