:root {
  --base: #fed039;
  --base2: #fe9e39;
  --bold: #3f51b5;
  --black: #333;
  --blue: #1d62bb;
  --green: #6da83d;
  --w: #fff;
  --bg: #020e3d;
  --section: #f4f9ff;
  --title-span: #404f68;
  --gray-bg: #f1f3f6;
  --gray-text: #888;
}

.event-join { width: 100%; height: 75px; display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; left: 0; bottom: 0; background-color: var(--base); font-size: 22px; font-weight: 700; color: var(--black); z-index: 9; }
.event-logo img { display: flex; width: 160px; }
.visual-wrap { width: 740px; margin: 0 auto; position: relative; }
.event-wrap { width: 1000px; margin: 0 auto; position: relative; }

.event-section { padding: 60px 0; line-height: 1.4; background-color: var(--section); }
.event-section .event-wrap > p { text-align: center; font-size: 14px; color: var(--gray-text); margin-top: 20px; opacity: 0.7; }
.event-section.visual { background-color: var(--bg); }
.event-visual { display: flex; align-items: center; justify-content: space-between; }

.visual-img { width: 300px; height: 300px; position: relative; }
.visual-img img { position: absolute; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; }
.visual-img img:nth-child(1) { width: 200px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.visual-img img:nth-child(2) { width: 60px; bottom: 20px; left: 0; animation-name: event-1; }
.visual-img img:nth-child(3) { width: 60px; top: 80px; right: 0; animation-name: event-2; }
.visual-img img:nth-child(4) { width: 100px; top: 0px; left: 0; animation-name: event-3; }
@keyframes event-1 { 50% { bottom: 40px; } 100% { bottom: 20px; } }
@keyframes event-2 { 50% { top: 100px; } 100% { top: 80px; } }
@keyframes event-3 { 50% { top: 20px; } 100% { top: 0px; } }

.visual-title { display: flex; flex-direction: column; gap: 20px; }
.visual-title h2 { font-size: 50px; font-weight: 700; line-height: 1.2; color: var(--w); }
.visual-title p { font-size: 17px; color: var(--base); margin-bottom: 10px; }
.visual-title i a { display: flex; align-items: center; gap: 10px; width: fit-content; height: 50px; font-size: 16px; color: var(--base); padding: 0 20px; border-radius: 50px; border: 2px solid var(--base); }

.event-title { text-align: center; margin-bottom: 40px; }
.event-title p { width: fit-content; display: block; color: var(--base2); font-size: 15px; font-weight: 500; padding: 10px 20px; border-radius: 50px; border: 1.5px solid var(--base2); margin:  0 auto 15px auto; }
.event-title h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.4px; color: var(--black); }
/* .event-title h3 b { color: var(--base2); } */
/* .event-title h4 { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 30px; font-weight: 700; color: var(--black); line-height: 1.6; margin-bottom: 10px; } */
/* .event-title h4 span { font-weight: 400; text-decoration: line-through; opacity: 0.3; } */
.event-title h4 { font-size: 26px; font-weight: 700; color: var(--black); line-height: 1.6; margin-bottom: 10px; }
.event-title h4 span { font-weight: 500; margin-right: 10px; }
.event-title h4 b { font-size: 60px; color: var(--base2); }
.event-title > span { font-size: 16px; color: var(--title-span); }

.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.6; text-align: center; }
.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 { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 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 { flex: 1; padding: 15px 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, var(--base), var(--base2)); 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-box ul li span { background-color: var(--w); color: var(--base2); padding: 6px 12px; font-size: 13px; border-radius: 50px; }

.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); padding: 0px 0 100px 0; }
.event-footer i { display: flex; align-items: center; gap: 15px; }
.event-footer p { font-size: 12px; color: var(--gray-text); padding-top: 5px; }
#info { background-color: var(--gray-bg); }

.bg-icon { position: absolute; z-index: 1; }
.bg-icon-1 { left: 30px; top: -180px; }
.bg-icon-2 { left: 0; top: -500px; }
.bg-icon-3 { right: 20px; top: -120px; }
.bg-icon-4 { left: 60px; top: 160px; }