section[data-cattype="258"]{ min-height: 60vh; padding: 12vh 0; } [data-cattype="258"] > .container{ z-index: 10; text-align: left; position: relative; } [data-cattype="258"] .rocket{ position: absolute; bottom: -1px; height: 100%; width: 100%; background-position: bottom left; background-repeat: no-repeat; background-size: contain; z-index: 1; opacity: 0; } [data-cattype="258"] h1.section-title{ font-size: 2.81rem; line-height: 1.2; color: #000; max-width: 54vw; } [data-cattype="258"] .list-point{ max-width: 63vw; } [data-cattype="258"] .list-point li{ width: 42%; padding: 15px 30px 0 0; } [data-cattype="258"] .leading{ font-size: 1rem; font-weight: 300; line-height: 1.5; } @media (max-width: 1400px) { [data-cattype="258"] h1.section-title{ font-size: 2.6rem; } [data-cattype="258"] .leading{ font-size: 1.0rem; } } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="258"] h1.section-title, [data-cattype="258"] .list-point{ max-width: 100vw; padding: 0 30px; } [data-cattype="258"] .rocket{ opacity: 0.3; } [data-cattype="258"] .list-point li{ width: 48%; padding: 15px 15px 0 0; } } @media (max-width: 767px) { [data-cattype="258"] h1.section-title, [data-cattype="258"] .list-point{ max-width: 100vw; padding: 0 15px; } [data-cattype="258"] .rocket{ opacity: 0.3; margin-left: -24%; } } @media (max-width: 480px) { section[data-cattype="258"]{ padding-top: 30px; overflow: visible; } [data-cattype="258"] h1.section-title{ font-size: 1.62em; text-align: center; padding: 0; } [data-cattype="258"] h2.section-title{ font-size: 1.26em; text-align: center; } [data-cattype="258"] .list-point .section-title, [data-cattype="258"] .list-point li{ width: 100%; padding: 0; text-align: center; } }