body[data-page='0'] header{ display:none;}
body header > nav{ display:none;}

footer{ display:none;}
.EventSection > div{ display:flex; flex-direction: column; width:90%; margin:auto; max-width:640px;}
.EventSection > div > div{ display:flex; width:100%; flex-direction: column; justify-content:center; position:relative; overflow:hidden; z-index:2; }
.EventSection > div > div > .text{ width:100%; display:flex; justify-content:center ; align-items:center; flex-direction: column;}
.EventSection > div > div > .text > h3{ text-align:center; font-size:32px; margin-bottom:0px; }
.EventSection > div > div > .text > h3 > span{ display:inline-block;}
.EventSection form > div > div > ul > li{ display:flex; gap:8px; margin:30px 0;}
.EventSection form > div > div > ul > li > label{ font-size:18px; font-weight:700; width:140px; min-width:140px;}
.EventSection form > div > div > ul > li > label > span{}
.EventSection form > div > div > ul > li > div{ font-size:18px; font-weight:400;}
.EventSection form > div > div > ul > li > div input[type=text]{ font-size:18px; font-weight:400; flex-grow:1;}
.addrul{ width:100%; display:flex; flex-direction:column;}
.addrul > li{ flex-grow:1;}
.addrul .AddressFindBtn{ border:1px solid #004cff; color:#004cff; padding:6px 20px;}
#previewul{ display:flex; gap:4px 30px; flex-wrap:wrap;}
.activedutyfile{ border:1px solid #004cff; color:#004cff; padding:6px 20px;}
.EventSection form > div > div > ul > li > div input[type=tel]{ font-size:18px; font-weight:400;}
.EventSection form > div > div > ul > li > div input[type=number]{ font-size:18px; font-weight:400; border:0; border-bottom:1px solid #000;}
.EventSection form > div > div > ul > li > div input[type=email]{ font-size:18px; font-weight:400;}
.EventSection form > div > div > ul > li > div textarea{ font-size:18px; font-weight:400; width:calc(100% - 14px);}
.EventSection form > div > div > ul > li > div select{ font-size:18px; font-weight:400; width:calc(100% - 14px);}

.EventSection form > div > div > h3{ font-size:28px; margin-top:150px;}
.EventSection form > div > div > div > h3{ font-size:24px; margin-top:30px; display:inline-block; width:100%; }
.EventSection form > div > div > div > ul{ margin:30px 0;}
.EventSection form > div > div > ul > li > div > ul{ display:flex; gap:16px 30px; flex-wrap:wrap;}
.EventSection form > div > nav{ display:flex; justify-content:center; align-items:center; gap:30px; margin-top:50px;}
.EventSection form > div > nav > a{ display:inline-block; padding:12px 50px; font-size:24px; font-weight:bold; background-color:#004cff; color:#fff;}

.EventSection aside{ display:flex; flex-direction:column; gap:30px 50px;}
.EventSection aside > .text{ width:90%; margin:auto;}
.EventSection aside > .text > ul > li{ display:flex; gap:8px 30px; margin:20px 0;}
.EventSection aside > .text > ul > li > label{ position:relative; font-size:20px; font-weight:700; width:130px;  display:flex; justify-content:space-between;}
.EventSection aside > .text > ul > li > label:before{ content:""; background-color:#12176A; width:5px; height:20px; position:absolute; left:-12px; top:6px; display:inline-block;}
.EventSection aside > .text > ul > li > label > span{color:#12176A; }

.EventSection aside > .text > ul > li > div{ font-size:20px; font-weight:400;}

.EventSection aside > .text > ul > li .general{ text-decoration:line-through; color:#555;}
.EventSection aside > nav{ display:flex; justify-content:center; align-items:center; gap:30px; margin-bottom:80px;}
.EventSection aside > nav > a{ display:flex; justify-content:center; width:450px; height:110px; align-items:center; text-align:center; font-size:24px; font-weight:bold; background-color:#004cff; color:#fff;}


.EventSection > div > div > form{ display:none; width:100%;}
.EventSection > div > div > aside{ display:none;}
.EventSection > div > div > form > div > div > nav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:80px; justify-content:center;}
.EventSection > div > div > form > div > div > nav > a{ border:2px solid #004cff; font-size:24px; font-weight:700; padding:12px 50px;}
.EventSection > div > div > form > div > div > nav > a[data-arrow='back']{ background-color:#fff; color:#004cff;}
.EventSection > div > div > form > div > div > nav > a[data-arrow='next']{ background-color:#004cff; color:#fff;}

body[data-page='0'] .EventSection > div > div > aside{ display:flex;}
body[data-page='1'] .EventSection > div > div > #EventUserForm{ display:block; }
body[data-page='2'] .EventSection > div > div > #EventHelmetForm{ display:block; }
body[data-page='3'] .EventSection > div > div > #EventListForm{ display:block; }
body[data-page='2'] .EventSection > div > div > #EventPlateForm{ display:block; }

#EventListForm > div > div > div > ul > li{ display:flex; gap:8px; margin:30px 0;}
#EventListForm > div > div > div > ul > li > label{ font-size:18px; font-weight:700; width:140px; min-width:140px;}
#EventListForm > div > div > div > ul > li > label > span{}
#EventListForm > div > div > div > ul > li > div{ font-size:18px; font-weight:400;}

#helmetpricelist{ display:flex; flex-direction:column;}

swiper-container::part(bullet) {
    background-color: #fff;
	box-shadow:1px 1px 6px 1px gray;
	width:12px; height:12px;
	opacity:0.7;
}

swiper-container::part(bullet-active) {
    background-color: #004cff; /* 비활성 동그라미 색상 */
	box-shadow:1px 1px 6px 1px gray;
	width:12px; height:12px;
	opacity:1;
}
swiper-container::part(button-prev),
swiper-container::part(button-next) {
  color: transparent; /* 원하는 색상으로 변경 */
 width:24px;
  height:24px;
  background-color:transparent;
  padding:8px;
  background-size: 18px 18px;
  background-position:center;
  background-repeat: no-repeat;
  background-color:#fff;
  border-radius:50%;
  
}

swiper-container::part(button-prev) {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.67%200l2.83%202.829-9.339%209.175%209.339%209.167-2.83%202.829-12.17-11.996z%22%20fill%3D%22%23004cff%22%0Astroke%3D%22%23eee%22%0Astroke-width%3D%222%22%0Astroke-linejoin%3D%22round%22%0A%2F%3E%3C%2Fsvg%3E');
}

swiper-container::part(button-next) {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20d%3D%22M7.33%2024l-2.83-2.829%209.339-9.175-9.339-9.167%202.83-2.829%2012.17%2011.996z%22%20fill%3D%22%23004cff%22%0Astroke%3D%22%23eee%22%0Astroke-width%3D%222%22%0Astroke-linejoin%3D%22round%22%0A%2F%3E%0A%3C%2Fsvg%3E');
}