/* 신청페이지 헤더,푸터 모양 달라서 별도 스타일 */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 30px 0; box-sizing: border-box; }
header .logo { box-sizing: border-box; }
header .logo img { height: 88px; }

footer { background-color: #000; color: #fff; font-family: 'Poppins'; font-size: 14px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.5; text-align: center; position: relative; z-index: 9; }
footer .wrap { padding: 15px 0; }
footer .wrap p { }

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	header{padding: 18px 0;}
	header .logo img{height: 60px;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	header .logo img{height: 50px;}
	footer{font-size: 12px; }
}
@media screen and (max-width:320px) {}





main { overflow: hidden; position: relative;}
input { border: 0; margin: 0; padding: 0; }
button { background-color: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }

/* 제출 버튼 */
._submit_btn { }
._submit_btn.flexBx{
	display: flex; align-items: center; justify-content: center; gap: 10px;
}
._submit_btn > * { font-size: 1px; display: flex; align-items: center; justify-content: center; gap: 20em; background-color: var(--pink); padding: 0 27em; min-height: 60em; box-sizing: border-box; color: #fff; margin: 0 auto; transition: background-color 0.2s; }
._submit_btn > *:hover { background-color: #555; }
._submit_btn p { font-family: "WantedSans"; font-size: 18em; }
._submit_btn i { font-size: 20em; }
._submit_btn .cancel {background-color: #a7a7a7; }
._submit_btn .cancel:hover{ background-color: #555;}
._submit_btn p { }
._submit_btn i { }

/* 블러 */
._ball {position: absolute;font-size: max(calc(1/1920*100vw),0.5px);width: 1em;height: 1em;display: flex; align-items: center;justify-content: center;z-index: 0;pointer-events: none;z-index: -1;}
._ball > div {width:2500em; height:2500em; border-radius:50%;flex-shrink:0; }
._ball > div { background: radial-gradient(circle at center,
	rgba(255, 208, 227, 0.9) 0%,
	rgb(255, 208, 227, 0.6) 15%,
	rgb(255, 208, 227, 0.3) 30%,
	rgb(255, 208, 227, 0) 50%
); }
._ball .scale { animation: scale140 forwards infinite 3s; }
._ball .floating { animation: floating80 forwards infinite 6s; }
._ball .opacity { animation: opacity50 forwards infinite 4s; }

/* 제목 */
._titleBx { text-align: center; margin-bottom: 50px; }
._titleBx small { font-family: 'Poppins'; color: var(--pink); line-height: 1.3; margin-bottom: calc(20/16*1em); display: block; }
._titleBx h1 { font-size: 70px; font-weight: 600; }

/* ---------------------- apply01  ---------------------- */
.apply01 { display: flex; align-items: center; justify-content: center; padding-top: 50px; box-sizing: border-box; overflow: hidden; position: relative;}
.apply01 .wrap{padding: 100px 0; box-sizing: border-box; position: relative;}
.apply01 .cont.n1 { position: relative; z-index: 2; }
.apply01 .cont.n1 .flexBx { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 60px; }
.apply01 .cont.n1 .inputBx { display: flex; align-items: center; justify-content: flex-start; }
.apply01 .cont.n1 .inputBx p { font-size: 20px; font-weight: 600; min-width: calc(96/20*1em); }
.apply01 .cont.n1 .inputBx input {min-width: 450px; height: 50px; font-family: 'Pretendard'; font-size: 16px; font-weight: 500;padding: 0 calc(14/16*1em); box-sizing: border-box; border: 1px solid #000;background-color: #fff; }
.apply01 .cont.n1 ._submit_btn { }


.apply01 .cont.none{display: none;}
.apply01 .cont.n2{}
.apply01 .cont.n2 h2{font-size: 40px; font-weight: 600; margin-bottom: 60px;}
.apply01 .cont.n2 .whiteBx{
	background-color: #fff; border: 1px solid #000; box-sizing: border-box;
	width: 720px; padding: 42px 89px; line-height: calc(32/20); text-align: center;
	margin: 0 auto;
	margin-bottom: 30px;
}
.apply01 .cont.n2 .grayBx{
	background-color: #efefef;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px;
	padding: 44px; margin-bottom: 15px;
}
.apply01 .cont.n2 .grayBx .col{
	font-size: 20px; line-height: 1.3;
	display: flex; align-items: flex-start;
}
.apply01 .cont.n2 .grayBx .col em{min-width: calc(92/20*1em); text-align: left; color: rgba(0,0,0,0.7);}
.apply01 .cont.n2 .grayBx .col p{font-weight: 600;}

.apply01 .info{line-height: 1.3; text-align: center; font-size: 16px; }
.apply01 ._submit_btn.flexBx{display: flex; justify-content: center;}
.apply01 ._submit_btn.flexBx > *{margin: unset; gap: 8px;}

.apply01 ._ball {left: 11%;bottom: 2%;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	._titleBx small{font-size: 14px; }
	._titleBx h1{font-size: 60px; }
	._submit_btn > *{font-size: 0.8px; }


	.apply01 .cont.n1 .inputBx input{min-width: 360px;}

	.apply01 .cont.n2 h2{font-size: 30px; margin-bottom: 20px;}
	.apply01 .cont.n2 .grayBx .col{font-size: 18px; }
}
@media screen and (max-width:820px) {
	._titleBx h1{font-size: 40px; }


	.apply01 .cont.n1 .inputBx p{font-size: 18px; }
	.apply01 .cont.n1 .inputBx input{min-width: 300px; height: 40px;}

	.apply01 .cont.n2 .whiteBx{width: 100%; padding: 30px 20px;}
	.apply01 .cont.n2 .grayBx{padding: 30px 20px;}
	.apply01 .cont.n2 .grayBx .col{font-size: 14px; }
	.apply01 .info{font-size: 14px; }
}
@media screen and (max-width:500px) {
	._titleBx{margin-bottom: 40px;}
	._titleBx h1{font-size: 32px; }
	._submit_btn > *{font-size: 0.7px; }


	.apply01 .cont.n1 .inputBx p{font-size: 15px; }
	.apply01 .cont.n1 .inputBx input{min-width: unset; width: 100%;}

	.apply01 .cont.n2 h2{font-size: 24px; }
	.apply01 .cont.n2 .whiteBx{padding: 30px 10px;}
}
@media screen and (max-width:320px) {}




/* ---------------------- 신청 마감  ---------------------- */
.end_page{display: flex; align-items: center; justify-content: center; position: relative;}
.end_page .contents{position: relative;}
.end_page .contents ._titleBx{margin-bottom: 70px;}
.end_page .contents ._titleBx i{font-size: 40px; }
.end_page .contents ._titleBx h1{font-size: 70px; font-weight: 600; margin-top: calc(30/70*1em); text-align: center; line-height: 1.3;}
.end_page .contents ._submit_btn{text-align: center;}
.end_page .contents ._submit_btn > *{display: inline-flex;}
.end_page ._ball {left: 11%;bottom: 2%;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.end_page .contents ._titleBx h1{font-size: max(calc(70/1024*100vw),30px); }
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.end_page .contents ._titleBx i{font-size: 30px; }
}
@media screen and (max-width:320px) {}




/* ---------------------- apply02  ---------------------- */
.apply02{padding-top: 290px; padding-bottom: 160px; position: relative;}
.apply02 .wrap{
	display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
	position: relative; z-index: 2;
}
.apply02 ._titleBx{text-align: left; white-space:nowrap;}
.apply02 form{
	width: 100%; max-width: 740px;
}
.apply02 form .col{margin-bottom: 45px; display: block;}
.apply02 form .col.hide{display: none;}
.apply02 form .col.no_margin{margin-bottom: 0;}
.apply02 form .col.flexBx{
	display: flex; gap: 40px;
}
.apply02 form .col.flexBx > *{flex: 1;}
.apply02 form .tit{margin-bottom: 10px; display: flex; align-items: center;}
.apply02 form .tit h3{font-size: 20px; font-weight: 600;display: flex;}
.apply02 form .tit h3{}
.apply02 form .tit h3.star::after {content:'*'; display: block; color: var(--pink); margin-left: 0.2em;}
.apply02 form .tit > p{color: #999999; margin-left: 10px; font-weight: 500;}
.apply02 form input[type="text"]{
	height: 40px; font-size: 16px; font-weight: 500; font-family: 'Pretendard'; letter-spacing: -0.04em;
	border-bottom: 1px solid #000; box-sizing: border-box; width: 100%; padding: 0 10px; box-sizing: border-box;
	background: transparent;
}
.apply02 form input[type="text"]:placeholder{
	font-family: 'Pretendard'; font-size: 16px; font-weight: 500; color: #999999; letter-spacing: -0.04em;
}

.apply02 form .selectBx{position: relative; display: flex; align-items: center;}
.apply02 form .selectBx select{
	font-size: 16px; font-family: 'Pretendard'; font-weight: 500; width: 100%; color: #000;
	padding: 0 10px; box-sizing: border-box; height: 40px; border: 0; border-bottom: 1px solid #000;
	background-color: transparent; cursor: pointer;
}
.apply02 form .selectBx select:invalid{color: #999999;}
.apply02 form .selectBx select option{font-size: 16px; font-family: 'Pretendard'; color: #000;}
.apply02 form .selectBx i{position: absolute; right: 10px; transition: transform 0.5s;}
.apply02 form .selectBx select:focus + i{transform: rotate(180deg);}

.apply02 form .textArea{width: 100%; height: 150px; box-sizing: border-box; border: 1px solid #000; background-color: #fff; margin-top: 20px;}
.apply02 form .textArea textarea{
	padding: 20px; box-sizing: border-box; line-height: 1.3; font-family: 'Pretendard'; font-size: 16px; font-weight: 500; letter-spacing: -0.04em;
	resize: none; width: 100%; height: 100%; border: 0; background-color: transparent;
}
.apply02 form .fileBx{display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;}
.apply02 form .fileBx .file{
	height: 40px; display: flex; gap: 20px;
}
.apply02 form .fileBx .file.hide{display: none;}
.apply02 form .fileBx .file .txt{
	width: calc(100% - 20px - 80px); border-bottom: 1px solid #000; box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
}
.apply02 form .fileBx .file .txt p{color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.apply02 form .fileBx .file .txt.on p{color: #000;}
.apply02 form .fileBx .file .txt .delete{color: red; cursor: pointer; display: none;}
.apply02 form .fileBx .file .txt.on .delete{display: block;}
.apply02 form .fileBx .file .txt .delete i{}
.apply02 form .fileBx .file{}
.apply02 form .fileBx .file label{
	display: flex; align-items: center; justify-content: center; border: 1px solid #000; box-sizing: border-box;
	background-color: #fff; font-size: 14px; width: 80px; height: 100%;
	cursor: pointer;
}
.apply02 form .fileBx .file label:hover{background-color: #555; color: #fff;}
.apply02 form .fileBx .file label input{display: none;}
.apply02 form .fileBx .file label p{}

.apply02 form .info{font-size: 14px; line-height: 1.3; margin-top: 15px;}
.apply02 ._submit_btn{margin-top: 50px; justify-content: flex-end;}
.apply02 ._submit_btn > *{margin: unset;}

.apply02 ._ball{right: 0%; bottom: 0%;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.apply02{padding-top: 240px;}
}
@media screen and (max-width:1280px) {
	.apply02 .wrap{flex-direction: column;}
	.apply02 form{max-width: unset;}
}
@media screen and (max-width:1024px) {
	.apply02{padding-top: 180px;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.apply02{padding-top: 140px; padding-bottom: 120px;}

	.apply02 .wrap{gap: 30px;}
	.apply02 form .col{margin-bottom: 40px;}
	.apply02 form .tit{margin-bottom: 5px;}
	.apply02 form .tit h3{font-size: 18px; }
	.apply02 form .col.flexBx{gap: 10px;}
	.apply02 form input[type="text"]{font-size: 14px; padding: 0 4px;}
	.apply02 form input[type="text"]::placeholder{font-size: 14px; }
	.apply02 form .selectBx select{padding: 0 4px; font-size: 14px; }
	.apply02 form .selectBx select option{font-size: 14px; }
	.apply02 form .textArea textarea{font-size: 14px; padding: 10px;}
	.apply02 form .textArea textarea::placeholder{font-size: 14px; }
	.apply02 form .fileBx .file{gap: 14px;}
	.apply02 form .fileBx .file .txt{font-size: 14px; padding: 0 4px; width: calc(100% - 14px - 60px);}
	.apply02 form .fileBx .file label{width: 60px; font-size: 12px; }
	.apply02 form .info{font-size: 12px; }
}
@media screen and (max-width:360px) {
	.apply02 form .col.flexBx{flex-direction: column; gap: 40px;}
}





/* ---------------------- apply03 클래스틑  apply02를 사용해야함 ---------------------- */

.apply02 .radioBx{
	display: flex; gap: 20px; margin-top: 20px;
}
.apply02 .radioBx label{flex: 1; cursor: pointer;}
.apply02 .radioBx label:hover{}
.apply02 .radioBx label input{display: none;}
.apply02 .radioBx label div{
	border: 1px solid #000; box-sizing: border-box; width: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; height: calc(60/18*1em); background-color: #fff;
}
.apply02 .radioBx label:hover div{background-color: #555; border-color: #555; color: #fff;}
.apply02 .radioBx label input:checked + div{background-color: #000; border-color: #000; color: #fff;}

/* 서초구 거주 체크 박스 */
.apply02 .tit.flexBx{
	display: flex; align-items: center; justify-content: space-between;
}
.apply02 .tit.flexBx h3{}
.apply02 .tit.flexBx label{
	display: flex; align-items: center; justify-content: flex-start; gap: 4px;
	cursor: pointer;
}
.apply02 .tit.flexBx label input{display: none;}
.apply02 .tit.flexBx label .ico{
	display: flex; align-items: center; justify-content: center;
	font-size: calc(20/16*1em); line-height: 0.8;
}
.apply02 .tit.flexBx label .ico i{}
.apply02 .tit.flexBx label .ico i:nth-child(1){}
.apply02 .tit.flexBx label .ico i:nth-child(2){position: absolute; opacity: 0;}
.apply02 .tit.flexBx label input:checked + .ico i:nth-child(1){opacity: 0;}
.apply02 .tit.flexBx label input:checked + .ico i:nth-child(2){opacity: 1;}
.apply02 .tit.flexBx label p{}

.apply02 .infoBx{}
.apply02 .infoBx ul{
	font-size: 14px; display: flex; flex-direction: column; gap: 5px;
	line-height: 1.3;
}
.apply02 .infoBx ul li{
	text-indent: calc(-10 / 14 * 1em); padding-left: calc(10/14*1em); box-sizing: border-box;
}
.apply02 .infoBx .info{}


/* 스케줄 체크 */
.apply02 .schedule_check{margin-top: 50px;}
.apply02 .schedule_check .tit{}
.apply02 .schedule_check .checkBx{
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.apply02 .schedule_check .checkBx label{
	width: calc(50% - 5px); display: flex; align-items: flex-start; gap: 4px;
	line-height: 1.3; cursor: pointer;
}
.apply02 .schedule_check .checkBx label input{display: none;}
.apply02 .schedule_check .checkBx label .ico{position: relative; display: flex; align-items: center; justify-content: center; line-height: 0.6;}
.apply02 .schedule_check .checkBx label .ico i{font-size: calc(20/16*1em); }
.apply02 .schedule_check .checkBx label .ico i:nth-child(1){}
.apply02 .schedule_check .checkBx label .ico i:nth-child(2){position: absolute; opacity: 0;}
.apply02 .schedule_check .checkBx label .ico i:nth-child(3){position: absolute; opacity: 0; font-size: 1em; line-height: 0.3; color: red;}

.apply02 .schedule_check .checkBx label input:checked + .ico i:nth-child(1){opacity: 0;}
.apply02 .schedule_check .checkBx label input:checked + .ico i:nth-child(2){opacity: 1;}
.apply02 .schedule_check .checkBx label p{}

.apply02 .schedule_check .checkBx label.end{pointer-events: none; color: #999;}
.apply02 .schedule_check .checkBx label.end .ico i:nth-child(1){opacity: 0;}
.apply02 .schedule_check .checkBx label.end .ico i:nth-child(2){opacity: 0;}
.apply02 .schedule_check .checkBx label.end .ico i:nth-child(3){opacity: 1 !important;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.apply02 .schedule_check .checkBx{flex-direction: column;}
	.apply02 .schedule_check .checkBx label{width: 100%;}
}
@media screen and (max-width:500px) {
	.apply02 .radioBx{gap: 4px;}
	.apply02 .radioBx label div{font-size: 14px; }
	.apply02 .tit.flexBx label{font-size: 13px; }
	.apply02 .infoBx ul{font-size: 13px; gap: 8px;}
	.apply02 form .tit > p{font-size: 12px; }
	.apply02 .schedule_check .checkBx label{font-size: 15px; }
}
@media screen and (max-width:320px) {}






/* ---------------------- apply04 클래스틑  apply02를 사용해야함 ---------------------- */
.apply04{display: flex; align-items: center; justify-content: center;}
.apply04 .wrap{position: relative; padding: 100px 0; box-sizing: border-box;}
.apply04 .wrap ._titleBx{}
.apply04 .wrap .whiteBx{
	width: 540px; height: 150px;
	background-color: #fff; border: 1px solid #000; box-sizing: border-box;
	text-align: center; font-size: 20px; font-weight: 600; line-height: calc(32/20);
	margin: 0 auto;
	margin-bottom: 10px;
	padding: 42px 20px; width: 100%; max-width: 540px;
}
.apply04 .wrap .whiteBx p{}
.apply04 .wrap .info{text-align: center; margin-bottom: 50px; line-height: 1.3;}
.apply04 .wrap ._submit_btn > *{gap: 8px;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.apply04 .wrap .whiteBx{font-size: 18px; height: auto; padding: 30px 10px;}
	.apply04 .wrap .info{font-size: 14px; }
}
@media screen and (max-width:320px) {}