* { margin: 0; padding: 0; box-sizing: border-box; } $desktop: 1025px; $table: 1024px; $moblie: 767px; @media screen and(max-width:$table) { } @media screen and(max-width:$moblie) { } body { height: 2800px; hr{ margin: 20px; } } #banner { width: 100vw; height: 500px; } .marquee { margin: 100px auto; height: 100px; width: 1000px; overflow: hidden; position: relative; font-size: 48px; #marquee-box { display: block; width: 200%; height: 75px; position: absolute; overflow: hidden; animation: marquee 5s linear infinite; .span { float: left; width: 50%; } @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } } } #tag{ width: 100vw; text-align: center; .btn{ padding: 15px; width: 150px; margin: 10px; background-color:#CE0000; border-radius: 10px;; font-size: 24px; color:#fff; border: none; } } .btn1{ display: none; } #Search-result{ .result-box{ margin: 50px auto; width: 700px; display: grid; grid-template-columns: repeat(2,1fr ); grid-gap:10px; h1{ margin: 10px; } p{ padding: 15px 0; margin: 10px; } span{ padding: 0px 10px; } } } #logo{ width: 100vw; text-align: center; @media screen and(max-width:$table) { width: 80vw; margin: 0 auto; } .logo{ padding: 15px; width: 150px; margin: 10px; background-color:#CE0000; border-radius: 10px;; font-size: 24px; color:#fff; border: none; } } #news{ display: grid; grid-template-columns: repeat(3,1fr ); margin: 50px; grid-gap:30px; h1{ margin-bottom: 10px; } a{ margin-top: 20px; line-height: 1.5; display: inline-block; } } #footer{ text-align: center; line-height: 2; }