body{ background: #fff; }
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; }


/* application01 신청조회 */
.application01{ display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; position: relative;} 
.application01 .wrap{padding: 180px 0; box-sizing: border-box; position: relative;}
.application01 .cont.n1{ position: relative; z-index: 2; }
.application01 .cont.n1 .flexBx { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 60px; }
.application01 .cont.n1 .inputBx { display: flex; align-items: center; justify-content: flex-start; }
.application01 .cont.n1 .inputBx p { font-size: 20px; font-weight: 600; min-width: calc(150/20*1em); text-align: center; line-height: 1.3; }
.application01 .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; }
.application01 .cont.n1 ._submit_btn { }

.application01 .cont.none{display: none;}
.application01 .cont.n2{}
.application01 .cont.n2 h2{font-size: 40px; font-weight: 600; margin-bottom: 60px;}
.application01 .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;
}
.application01 .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;
}
.application01 .cont.n2 .grayBx .col{
	font-size: 20px; line-height: 1.3;
	display: flex; align-items: flex-start;
}
.application01 .cont.n2 .grayBx .col em{ width: calc(140/20*1em); text-align: left; color: rgba(0,0,0,0.7);}
.application01 .cont.n2 .grayBx .col p{font-weight: 600;}

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

.application01 ._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; }


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

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

    .application01 .cont.n1 .inputBx{ flex-direction: column; gap: 10px; }
	.application01 .cont.n1 .inputBx p{font-size: 18px; }
	.application01 .cont.n1 .inputBx input{min-width: 300px; height: 40px;}

	.application01 .cont.n2 .whiteBx{ max-width: 500px; width: 100%; padding: 30px 20px;}
	.application01 .cont.n2 .grayBx{padding: 30px 20px;}
	.application01 .cont.n2 .grayBx .col{font-size: 14px; }
	.application01 .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; }


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

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


/* ---------------------- 신청 마감  ---------------------- */
.end_page{ padding: 180px 0; 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) {}


/* application02 본인인증 */
.application02{ padding: 180px 0; box-sizing: border-box; }
.application02 .cont.n1 .flexBx { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; }
.application02 .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; }

.application02 .cont.n2{}
.application02 .cont.none{display: none;}
.application02 .cont.n2 h2{font-size: 40px; font-weight: 600; margin-bottom: 60px;}
.application02 .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;
}
.application02 .cont.n2 .alert{ font-size: 22px; font-weight: 500; }
.application02 .cont.n2 .flexBx { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; }
.application02 .cont.n2 .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; }

.application02 .info{line-height: 1.3; text-align: center; font-size: 16px; margin-bottom: 60px; }
.application02 ._submit_btn.flexBx{display: flex; justify-content: center;}
.application02 ._submit_btn.flexBx > *{margin: unset; gap: 8px;}
.application02 ._ball {left: 11%;bottom: 2%;}


/* application03 신청 내역 */
.application03{ padding: 180px 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; position: relative;}
.application03 .whiteBx{
    background-color: #fff; border: 1px solid #000; box-sizing: border-box;
	width: 1200px; padding: 60px 50px; line-height: calc(32/20); text-align: center;
	margin: 50px auto;
}
.application03 ul li{ 
    display: flex; align-items: center; gap: 81px; box-sizing: border-box; padding: 40px 0; 
    font-size: 20px; font-weight: 500; word-break: keep-all;
}
.application03 ul li + li{ border-top: 1px solid #00000033; }
.application03 ul li > div{ text-align: start; }
.application03 ul li .num{ min-width: 20px; }
.application03 ul li .history{ min-width: 150px; width: 100%; }
.application03 ul li .seller{ min-width: 100px; }
.application03 ul li .category{ min-width: 135px; width: 100%; }
.application03 ul li .btn .button{ background: #000; color: #fff; font-size: 14px; padding: 9px 30px; cursor: pointer; transition: background .3s ease-in; }
.application03 ul li .btn:hover .button{ background: #555; }

.application03 ._submit_btn{ text-align: center; }
.application03 ._submit_btn > *{ display: inline-flex; }

@media screen and (max-width: 1280px){
    .application03 .whiteBx{ max-width: 980px; }
    .application03 ul li{ gap: 40px; font-size: 18px; }
    .application03 ul li .history{ min-width: 130px; }
    .application03 ul li .category{ min-width: 72px; }
}
@media screen and (max-width: 1024px){
    .application03 .whiteBx { max-width: 768px; }
    .application03 ul li{ gap: 20px; font-size: 16px; padding: 30px 0; }
}
@media screen and (max-width: 820px){
    .application03{ padding: 140px 0 100px; }
    .application03 .whiteBx{width: 100%; padding: 10px 50px; }
    .application03 .whiteBx ul{ width: 100%; }
    .application03 ul li{ 
        white-space: nowrap; flex-direction: column; align-items: center; 
        padding: 20px 0; gap: 10px;
    }
    .application03 ul li > div{ width: 100%; text-align: center; }
    .application03 ul li .num{ display: none; }
}
@media screen and (max-width: 500px){
    .application02 .cont.n1 .inputBx input{ min-width: 240px; width: 100%; }
    .application02 .info{ font-size: 14px; }
}
@media screen and (max-width: 360px){
    .application02 .cont.n1 .inputBx input{ min-width: 220px; width: 100%; height: 42px;  }
    .application03{ padding: 120px 0 70px; }
    
}


/* application04 신청 조회 수정 */
.application04{padding-top: 290px; padding-bottom: 160px; position: relative; background: #fff;}
/* 비활성화 */
.application04._disabled input,
.application04._disabled textarea,
.application04._disabled select,
/* .application04._disabled button, */
.application04._disabled .radioBx label,
.application04._disabled .fileBx .file .txt,
.application04._disabled form .fileBx .file label,
.application04._disabled .tit.flexBx label,
.application04._disabled .infoBx ul {
    /* background-color: #f5f5f5; */
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.2;
}
.application04.application04._disabled form .textArea{ border: 1px solid rgba(0,0,0,0.2); }
.application04._disabled .info{ opacity: 0.2; }
.application04._disabled h3.star::after { display: none !important; content: ''; }
.application04._disabled label {
    pointer-events: none;
}

.application04 .wrap .bx{
	display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
	position: relative; z-index: 2;
}
.application04 .col._mt{ margin-top: 120px; }
.application04 ._titleBx{text-align: left; white-space:nowrap;}
.application04 form{
	width: 100%; max-width: 740px;
}
.application04 form .col{margin-bottom: 45px; display: block;}
.application04 form .col.hide{display: none;}
.application04 form .col.no_margin{margin-bottom: 0;}
.application04 form .col.flexBx{
	display: flex; gap: 40px;
}
.application04 form .col.flexBx > *{flex: 1;}
.application04 form .tit{margin-bottom: 10px; display: flex; align-items: center;}
.application04 form .tit h3{font-size: 20px; font-weight: 600;display: flex;}
.application04 form .tit h3{}
.application04 form .tit h3.star::after {content:'*'; display: block; color: var(--pink); margin-left: 0.2em;}
.application04 form .tit > p{color: #999999; margin-left: 10px; font-weight: 500;}
.application04 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;
}
.application04 form input[type="text"]:placeholder{
	font-family: 'Pretendard'; font-size: 16px; font-weight: 500; color: #999999; letter-spacing: -0.04em;
}

.application04 form .selectBx{position: relative; display: flex; align-items: center;}
.application04 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;
}
.application04 form .selectBx select:invalid{color: #999999;}
.application04 form .selectBx select option{font-size: 16px; font-family: 'Pretendard'; color: #000;}
.application04 form .selectBx i{position: absolute; right: 10px; transition: transform 0.5s;}
.application04 form .selectBx select:focus + i{transform: rotate(180deg);}

.application04 form .textArea{width: 100%; height: 150px; box-sizing: border-box; border: 1px solid #000; background-color: #fff; margin-top: 20px;}
.application04 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;
}
.application04 form .fileBx{display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;}
.application04 form .fileBx .file{
	height: 40px; display: flex; gap: 20px;
}
.application04 form .fileBx .file.hide{display: none;}
.application04 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;
}
.application04 form .fileBx .file .txt p{color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.application04 form .fileBx .file .txt.on p{color: #000;}
.application04 form .fileBx .file .txt .delete{color: red; cursor: pointer; display: none;}
.application04 form .fileBx .file .txt.on .delete{display: block;}
.application04 form .fileBx .file .txt .delete i{}
.application04 form .fileBx .file{}
.application04 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;
}
.application04 form .fileBx .file label:hover{background-color: #555; color: #fff;}
.application04 form .fileBx .file label input{display: none;}
.application04 form .fileBx .file label p{}

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

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

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

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

.application04 .radioBx{
	display: flex; gap: 20px; margin-top: 20px;
}
.application04 .radioBx label{flex: 1; cursor: pointer;}
.application04 .radioBx label:hover{}
.application04 .radioBx label input{display: none;}
.application04 .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;
}
.application04 .radioBx label:hover div{background-color: #555; border-color: #555; color: #fff;}
.application04 .radioBx label input:checked + div{background-color: #000; border-color: #000; color: #fff;}

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


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

.application04 .statusBx{margin-top: 50px;}
.application04 .statusBx .tit{}
.application04 .statusBx .status{
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.application04 .statusBx .status label{
	width: calc(50% - 5px); display: flex; align-items: center; gap: 14px;
	line-height: 1.3; cursor: pointer; font-size: 17px;
}
.application04 .statusBx .status label input{display: none;}
.application04 .statusBx .status label{pointer-events: none;}
.application04 .statusBx .status label .badge{ width: 60px; text-align: center; padding: 8px 0; color: #fff; font-size: 14px; }
.application04 .statusBx .status label .badge.done{ background: #00a34f; }
.application04 .statusBx .status label .badge.pending{ background: #1b75b9; }
.application04 .statusBx .status label .badge.wait{ background: #ed558b; }
.application04 .statusBx .status label .badge.badge.disabled{ background: #848484; }
.application04 .statusBx .status .info p{ font-size: 14px; }



@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) {
	.application04 .statusBx .status{flex-direction: column;}
	.application04 .statusBx .status label{width: 100%;}
}
@media screen and (max-width:500px) {
	.application04 .radioBx{gap: 4px;}
	.application04 .radioBx label div{font-size: 14px; }
	.application04 .tit.flexBx label{font-size: 13px; }
	.application04 .infoBx ul{font-size: 13px; gap: 8px;}
	.application04 form .tit > p{font-size: 12px; }
	.application04 .statusBx .status label{font-size: 15px; }
}
@media screen and (max-width:360px) {
     .application04 .statusBx .status label{ font-size: 14px; }
}



/* faq  */
.faq{ padding: 180px 0; box-sizing: border-box; overflow: hidden; position: relative;}
.faq .whiteBx{
    background-color: #fff; border: 1px solid #000; box-sizing: border-box;
	max-width: 1200px; padding: 40px 50px; line-height: calc(32/20); text-align: center;
	margin: 50px auto;
}
.faqList li + li { border-top: 1px solid #ddd; }
.faqList .question { display: flex; align-items: flex-start; cursor: pointer; position: relative; padding: 0px 0; font-size: 24px; }
.faqList .question .tit { flex: 1; text-align: left;  font-size: calc(20 / 24 * 1em); font-weight: 600; padding-top: calc(3 / 20 * 1em);}
.faqList .question .ic { font-size: inherit; font-weight: 600; color: #ed558b; padding-right: 30px; }
.faqList .question i { position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-size: 20px; }
.faqList .xi-minus { display: none; }
.faqList li.active .xi-plus { display: none; }
.faqList li.active .xi-minus { display: block; }
.faqList .asked { display: none; padding: 20px 0; }
.faqList .asked .askBx{ display: flex; }
.faqList .asked .ic{ font-size: 24px; font-weight: 600; padding-right: 30px; }
.faqList .asked .txt{width: 100%; font-size: 16px; text-align: left; word-break: keep-all; }

@media screen and (max-width: 500px){
    .faqList .question{ padding-right: 40px; }
    .faqList .question .tit{  
        min-width: 0; overflow: hidden; padding-right: 10px;
        text-overflow: ellipsis; white-space: nowrap; }
}