@charset "euc-kr";

body { width: 100%; height: 100vh; }
.container { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #232f49; gap: 40px; padding: 60px 0; }
.container .design h1 { font-size: 18px; color: #fff; margin-bottom: 20px; padding-left: 10px; }
.container ul { width: 1000px; display: flex; flex-wrap: wrap; gap: 20px; margin: 0 auto; }
.container ul li { position: relative; top: 0; transition: 0.3s; border-radius: 20px; overflow: hidden; }
.container ul li a { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; background-color: #303e5b; color: #fff; text-align: center; line-height: 1.4; }
.container ul li:hover { top: -5px; box-shadow: 10px 10px 30px rgba(0,0,0,0.3); }
.container ul li:hover span { animation-iteration-count: 1; }
.container ul li p { position: absolute; width: 100%; text-align: center; bottom: 20px; left: 50%; color: #888b9d; font-size: 12px; transform: translate(-50%,0); }
.container ul li span { position: absolute; width: 10px; height: 10px; top: 20px; left: 20px; background-color: #ff9b1e; border-radius: 100%; content: ''; }
.container ul li span { animation-name: event; animation-duration: 0.6s; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-direction: alternate; }
.container ul li span.none { display: none !important; }
@keyframes event { 0% { opacity: 0; } 100% { opacity: 1; } }