:root {
  --base: #35b5db;
  --base2: #39b4e0;
  --title: #6bb52e;
  --title2: #006fff;
  --new: #ffeb3B;
  --bold: #7cf6ff;
  --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: 70px; font-weight: 700; line-height: 1.4; }
.event-title h2 { font-size: 40px; font-weight: 700; line-height: 1.4; margin-bottom: -15px; }
.event-title h2 b { color: var(--new); }
.event-title p { width: 250px; 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: 10px; font-size: 46px; font-weight: 700; position: relative; margin: 50px auto 0 auto; }
.event-title h3 dd { width: 8px; height: 8px; border-radius: 100px; background-color: var(--bold); content: ''; position: absolute; top: 0px; }
.event-title h3 dd:nth-child(3) { left: 16px; }
.event-title h3 dd:nth-child(4) { left: 66px; }
.event-title h3 dd:nth-child(5) { left: 108px; }
.event-title h3 b { font-size: 64px; color: var(--bold); position: relative; }
.event-title h3 span { font-size: 40px; font-weight: 400; margin-left: -3px; }

.event-visual ul { display: flex; justify-content: center; gap: 20px; margin-top: 60px; }
.event-visual ul li { width: 365px; height: 365px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; background-color: var(--w); border-radius: 20px; box-shadow: inset 0px 0px 0px 5px var(--title2); color: var(--black); position: relative; overflow: hidden; box-sizing: border-box; }
.event-visual ul li:first-child { box-shadow: inset 0px 0px 0px 5px var(--title); }
.event-visual ul li:first-child p { color: var(--title); border-color: var(--title); }
.event-visual ul li:first-child h3 b { color: var(--title); }
.event-visual ul li p { color: var(--title2); font-size: 16px; font-weight: 500; padding: 10px 20px; border-radius: 50px; border: 1.5px solid var(--title2); background-color: var(--w); margin-bottom: 15px; }
.event-visual ul li h3 { font-size: 34px; font-weight: 700; letter-spacing: -0.4px; color: var(--black); margin-bottom: 20px; }
.event-visual ul li h3 b { color: var(--title2); }
.event-visual ul li h4 { width: 120px; height: 120px; position: absolute; top: -55px; right: -55px; display: flex; align-items: center; justify-content: center; background-color: var(--title2); transform: rotate(45deg); font-size: 15px; color: var(--w); font-weight: 600; padding-top: 80px; box-sizing: border-box; }
.event-visual ul li i { display: flex; align-items: end; gap: 8px; margin-top: 10px; }
.event-visual ul li i b { width: 55px; height: 70px; display: flex; align-items: center; justify-content: center; background-color: var(--black); color: var(--w); font-size: 36px; font-weight: 700; border-radius: 5px; }
.event-visual ul li i span { font-size: 36px; font-weight: 700; position: relative; bottom: 2px; }
.event-visual ul li a { display: flex; align-items: center; margin-top: 40px; color: var(--gray-text); gap: 5px; }
.event-visual ul li a::after { content: ''; display: block; width: 6.5px; height: 6.5px; border-top: 1px solid var(--gray-text); border-left: 1px solid var(--gray-text); transform: rotate(135deg); position: relative; left: 0; transition: 0.2s; }
.event-visual ul li a:hover::after { left: 5px; }

.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: 780px; top: 280px; }
.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-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); }