:root {
  --base: #247cff;
  --base2: #4e9cfe;
  --green: #6bb52e;
  --new: #3bffe7;
  --bold: #ffd02f;
  --blue: #006fff;
  --black: #333;
  --w: #fff;
  --gray-bg: #f1f3f6;
  --gray-text: #888;
}

.event-wrap { width: 1000px; margin: 0 auto; position: relative; }

.event-visual { background: linear-gradient(120deg, var(--base2), var(--base)); text-align: center; padding: 30px 0 60px 0; }
.event-title { color: var(--w); }
.event-title h1 { font-size: 60px; font-weight: 700; line-height: 1.4; }
.event-title h2 { font-size: 40px; font-weight: 700; line-height: 1.4; margin-bottom: -16px; }
.event-title h2 b { color: var(--new); }
.event-title p { width: 350px; height: 10px; background-color: rgba(255,255,255,.3); content: ''; margin: 0 auto; }
.event-title h3 { width: fit-content; display: flex; align-items: flex-end; gap: 5px; font-size: 50px; font-weight: 700; position: relative; margin: 30px auto 0 auto; }
.event-title h3 dd { width: 8px; height: 8px; border-radius: 100px; background-color: var(--bold); content: ''; position: absolute; top: 35px; }
.event-title h3 dd:nth-child(3) { left: 17px; }
.event-title h3 dd:nth-child(4) { left: 61px; }
.event-title h3 dd:nth-child(5) { left: 105px; }
.event-title h3 b { font-size: 100px; color: var(--bold); position: relative; bottom: -12px; }
.event-title h3 span { font-size: 40px; font-weight: 400; margin-left: -3px; }

.bg-icon { position: absolute; z-index: 1; }
.bg-icon-1 { left: 160px; top: 20px; }
.bg-icon-2 { right: 20px; bottom: 20px; }
.bg-icon-3 { right: 20px; top: 40px; }
.bg-icon-4 { left: 630px; top: 260px; }
.bg-icon-5 { left: 60px; top: 270px; }
.bg-icon-6 { left: 40px; bottom: -20px; }

.circle { width: 280px; height: 280px; border: 4px dotted rgba(255,255,255,.3); border-radius: 100%; position: absolute; }
.circle-1 { left: -160px; bottom: 100px; }
.circle-2 { right: -20px; top: 0px; width: 200px; height: 200px; }
.circle-3 { right: 100px; bottom: 10px; width: 10px; height: 10px; border: none; background-color: rgba(255,255,255,.3); }
.circle-4 { left: 40px; top: 20px; width: 10px; height: 10px; border: none; background-color: rgba(255,255,255,.3); }
.circle { animation-name: rotate; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes rotate { 100% { transform: rotate(360deg); } }

.event-box-wrap { display: flex; gap: 20px; margin-top: 40px; position: relative; z-index: 1; }
.event-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 25px; border-radius: 20px; background-color: var(--w); box-shadow: 0 0 2px rgba(0,0,0,.08), 4px 12px 36px rgba(0,0,0,.09); }
.event-box h3 { width: 100px; line-height: 35px; text-align: center; border-radius: 50px; font-size: 15px; color: var(--w); }
.event-box h4 { font-size: 16px; line-height: 1.4; }
.event-box i { display: flex; align-items: center; justify-content: center; height: 80px; margin: -20px 0 -10px 0; }
.event-box ul { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.event-box ul li { flex: 1; padding: 20px; display: flex; align-items: center; justify-content: space-between; background-color: var(--gray-bg); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--gray-text); }
.event-box ul li:first-child { background: linear-gradient(90deg, #63b9ba, #0d2dcd); color: var(--w); }
.event-box:nth-child(1) h3 { background-color: var(--black); }
.event-box:nth-child(2) h3 { background-color: var(--blue); }
.event-box:nth-child(3) h3 { background-color: var(--green); }

.event-join-btn { display: flex; justify-content: center; margin-top: 40px; }
.event-join-btn a { display: flex; align-items: center; gap: 10px; background-color: var(--black); color: var(--w); padding: 20px 30px; border-radius: 50px; }

.event-info { background-color: var(--gray-bg); padding: 60px 0; }
.event-info h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; color: var(--gray-text); }
.event-info ul { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }
.event-info ul li { font-size: 15px; color: var(--gray-text); list-style-type: disc; }

.event-footer { background-color: var(--gray-bg); }
.event-footer i { display: flex; align-items: center; gap: 10px; height: 55px; }
.event-footer img { width: 105px; }
.event-footer p { font-size: 12px; color: var(--gray-text); }