@charset "utf-8";

:root{
	--color-main01: #a72b43;
	--color-main02: #ff9b51;
	--color-main03: #2e58ae;

	--color-main01-20: #edd5d9;
	--color-main02-20: #ffebdc;
	--color-main03-20: #d5deef;

	--color-main01-10: #f6e9ec;
	--color-main02-10: #fff5ed;
	--color-main03-10: #eaeef7;

	--color-main01-5: #fbf4f5;
	--color-main02-5: #fffaf6;
	--color-main03-5: #f4f6fb;

	--height-input: 3.2rem;
	--border-color-input: #b3b3b3;
	--width-form-tit:9rem;


	--color-red:#f20f3b; /* error, secret, delete */
	--color-red-10:#f20f3b1a;
	--color-red-5:#f20f3b0d;
	--color-blue:#2e71f6; /* link, tag */ 
}

html{scroll-behavior: smooth; overflow-x:hidden;}

/* 전체스크롤바 숨김 */
body.scrollHidden{-ms-overflow-style: none;}
body.scrollHidden::-webkit-scrollbar{display: none;}

br.br640{display:none;}
br.br480{display:none;}

.w1600{width:1600px; margin:0 auto;}
.w1440{width:1440px; margin:0 auto;}
.w1280{width:1280px; margin:0 auto;}


/***** text *****/
.T_center{text-align:center !important;}
.T_left{text-align:left !important;}
.T_right{text-align:right !important;}

/* font color */
.colorRed{color:var(--color-red) !important;}
.color01{color:var(--color-main01);}
.color02{color:var(--color-main02);}
.color03{color:var(--color-main03);}

.inf-error{position:relative; padding-left:1.5rem; margin-top:0.8rem; letter-spacing:0.3px; line-height:1.5; color:var(--color-red); animation:shakeX 1s;}
.inf-error:before{content:'\00D7'; display:block; background:#fff; width:18px; height:18px; text-align:center; background:var(--color-red); font-size:14px; color:#fff; line-height:18px; top:3px; border-radius:50%; font-weight:bold; position:absolute; left:0;}


/***** input *****/
input{width:100%; height:var(--height-input); line-height:var(--height-input); color:#000; border:1px solid var(--border-color-input); border-radius:0.5rem; font-size:1rem; padding:0 1rem; font-family:'NanumNeo_R',"Pretendard-Regular",sans-serif;}
input:focus{border:2px solid #333;}
input::placeholder{font-family:'NanumNeo_R','Pretendard-Regular',sans-serif; color:#aaa;}
input:disabled,
input:read-only{background:#eee; cursor:default;}
input:disabled:active,input:disabled:focus,
input:read-only:active,input:read-only:focus{border:1px solid var(--border-color-input);}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}
input[type="checkbox"],
input[type="radio"]{width:1rem; height:1rem; vertical-align:middle; margin:0; line-height:initial; padding:0; border:inherit; border-radius:inherit; font-size:inherit;}

/* password eyes */
div.pw{position:relative;}
div.pw input.pw-input{padding-right:2rem;}
div.pw a.pw-eyes{width:1.5rem; height:1.5rem; position:absolute; top:50%; right:0.8rem; transform:translateY(-50%);}
div.pw a.pw-eyes.hide{background:url("/fro_end/img/input_showpw.svg")center/100% auto no-repeat;}
div.pw a.pw-eyes.show{background:url("/fro_end/img/input_hidepw.svg")center/100% auto no-repeat;}

/* checkbox,radio */
label.c-input{position:relative; display:inline-block; padding-left:1.8rem; cursor:pointer; font-size:1rem; margin:0.5rem;}
label.c-input input{position:absolute; z-index:-1; opacity:0; width:0; height:0; padding:0;}
label.c-input div.ci-show{position:absolute; top:50%; left:0; transform:translateY(-50%); height:1.25rem; width:1.25rem; background:#fff; border:1px solid var(--border-color-input); border-radius:4px;}
label.c-input div.ci-show:after{content:""; position:absolute;}
label.c-input:hover input ~ div.ci-show,
label.c-input input:focus ~ div.ci-show{border-color:#333;}
label.c-input input:checked ~ div.ci-show{background:var(--color-main01); border-color:var(--color-main01);}
label.c-input:hover input:not([disabled]):checked ~ div.ci-show{background:var(--color-main01);}
label.c-input input:checked:focus ~ div.ci-show{background:var(--color-main01);}
label.c-input input:disabled ~ div.ci-show{background:#e6e6e6; opacity:0.6; pointer-events:none;}
label.c-input input:checked ~ div.ci-show:after{display:block;}

label.c-input.ci-check div.ci-show:after{width:3.25px; height:7px; left:50%; top:45%; border:solid #ddd; border-width:0 2px 2px 0; transform:translate(-50%, -50%) rotate(45deg);}
label.c-input.ci-check:hover input ~ div.ci-show:after,
label.c-input.ci-check input:focus ~ div.ci-show:after{border-color:var(--border-color-input);}
label.c-input.ci-check input:checked ~ div.ci-show:after{border-color:#fff;}

label.c-input.ci-radio div.ci-show{border-radius:50%;}
label.c-input.ci-radio div.ci-show:after{left:50%; top:50%; transform:translate(-50%, -50%); height:6px; width:6px; border-radius:50%; background:#fff;}
label.c-input.ci-radio input:disabled ~ div.ci-show:after{background:#7b7b7b;}

label.c-input.square{display:inline-block; margin:0; padding:0; margin-right:1rem;}
label.c-input.square div.ci-show{width:auto; padding:0 5rem; border:2px solid #ddd; background:#f9f9f9; color:#777; border-radius:0.5rem; height:var(--height-input); line-height:var(--height-input); position:static; transform:none;}
label.c-input.square div.ci-show:after{display:none;}
label.c-input.square:hover input ~ div.ci-show, 
label.c-input.square input:focus ~ div.ci-show{border-color:#ccc; background:#f5f5f5;}
label.c-input.square:hover input:not([disabled]):checked ~ div.ci-show{background:#fff;}
label.c-input.square input:checked ~ div.ci-show{background:#fff; border-color:#333; color:#333; font-family:'NanumNeo_EB',sans-serif; box-shadow:5px 8px 20px rgba(0,0,0,0.1);}
label.c-input.square input:checked:focus ~ div.ci-show{background:#fff;}

/* select */
select{height:var(--height-input); border:1px solid var(--border-color-input); font-size:1rem; font-family:'NanumNeo_R',sans-serif; border-radius:0.5rem; padding:0 3rem 0 0.8rem; background:#fff url("/fro_end/img/select_arrow.svg")right center/2.2rem 14px no-repeat;}
select:active,
select:focus{border:2px solid #333;}

/* textarea */
textarea{width:100%; font-size:0.95rem; color:#000; min-height:5rem; border:1px solid var(--border-color-input); border-radius:0.5rem; padding:0.5rem; font-family:'NanumNeo_R','Pretendrad-Regular',sans-serif; resize:none;}
textarea::placeholder{font-family:'NanumNeo_L','Pretendard-Light',sans-serif; color:#aaa;}
textarea:focus,
textarea:active{border:2px solid #333;}

/* file */
input[type="file"]{background:#fff !important;}
div.c-file{margin-bottom:0.5rem;}
div.c-file input[type="file"]{display:none;}
div.c-file div.ci-show{width:100%; height:var(--height-input); line-height:var(--height-input); border:1px solid var(--border-color-input); border-radius:0.5rem; position:relative;}
div.c-file div.ci-show a.file-attach{position:absolute; width:6rem; height:2.25rem; line-height:2.25rem; text-align:center; display:block; font-family:'NanumNeo_B',sans-serif; font-size:0.9rem; border-radius:5px; background:#828181; color:#fff; top:50%; left:0.5rem; transform:translateY(-50%);}
div.c-file div.ci-show div.file-name{color:#777; padding-left:7.25rem; padding-right:13rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
div.c-file div.ci-show div.attach-after{display:none; position:absolute; top:50%; right:0.5rem; transform:translateY(-50%); align-items:center; gap:0.25rem;}
div.c-file div.ci-show div.attach-after a[class^="btn-"]{display:block; padding:0 0.5rem; height:2.25rem; line-height:2.25rem; background:#fff; border-radius:5px; font-size:0.9rem; position:relative; padding-left:1.5rem;}
div.c-file div.ci-show div.attach-after a[class^="btn-"]:before{content:''; display:block; width:1rem; height:1rem; position:absolute; top:50%; left:0.25rem; transform:translateY(-50%);}
div.c-file div.ci-show div.attach-after a.btn-preview:before{background:url("/fro_end/img/ico_download.svg")center/93% auto no-repeat;}
div.c-file div.ci-show div.attach-after a.btn-delete:before{background:url("/fro_end/img/ico_plus.svg")center/90% auto no-repeat; transform:translateY(-50%) rotate(45deg);}
div.c-file.attached div.ci-show div.file-name{color:#000;}
div.c-file.attached div.ci-show div.attach-after{display:flex;}
@media(hover:hover){
	div.c-file div.ci-show div.attach-after a[class^="btn-"]:hover{background:var(--color-main01-5);}
}


/***** button *****/
.btn-center-wrap{margin-top:4rem; display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap;}
.c-btn{display:inline-block; font-family:'NanumNeo_B',sans-serif; font-size:1rem; padding:0.8rem 2rem; border-radius:0.5rem; border:2px solid #333;}
.c-btn[class*="--sm"]{font-size:0.9rem; padding:0.4rem 0.8rem; border-radius:0.3rem;}
.c-btn[class*="--lg"]{font-size:1.125rem; padding:1rem 2.5rem;}

.c-btn.fill01{background:var(--color-main01); color:#fff; border-color:var(--color-main01);}
.c-btn.fill02{background:var(--color-main02); color:#fff; border-color:var(--color-main02);}
.c-btn.fill03{background:var(--color-main03); color:#fff; border-color:var(--color-main03);}


.c-btn.delete{background:var(--color-red); color:#fff; border-color:var(--color-red);}
.c-btn.write{background:var(--color-main02); color:#fff; border-color:var(--color-main02);}
.c-btn.reply{background:var(--color-main03); color:#fff; border-color:var(--color-main03);}
.c-btn.confirm{background:#333; color:#fff;}
.c-btn.underline{text-decoration:underline; text-underline-offset:5px; padding:0 !important; border-radius:0 !important; background:transparent !important; border:0 !important;}
.c-btn.link{background:var(--color-main01); color:#fff; border-color:var(--color-main01); padding-right:4rem; position:relative;}
.c-btn.link:after{content:''; display:block; width:1rem; height:1rem; background:url("/fro_end/img/ico_link_wh.svg")center/100% auto no-repeat; position:absolute; top:50%; right:2rem; transform:translateY(-50%);}
.c-btn.link[class*="--sm"]{padding-right:2.5rem;}
.c-btn.link[class*="--sm"]:after{right:1rem; width:0.8rem; height:0.8rem;}
.c-btn.arrow{position:relative; padding-left:1.5rem; padding-right:3rem;}
.c-btn.arrow:after{content:''; display:block; width:1em; height:1em; background:url("/fro_end/img/ico_arrow.svg")center/80% auto no-repeat; position:absolute; top:50%; right:1rem; transform:translateY(-50%);}




/***** form *****/
div.form-wrap{}
div.form-wrap div.form{display:flex; padding:1.8rem 0.5rem; border-bottom:1px solid #ddd;}
div.form-wrap div.form span.bar{display:inline-block; margin:0 0.5rem; font-family:'NanumNeo_B',sans-serif;}
div.form-wrap div.form div.tit{min-width:var(--width-form-tit); font-size:1.125rem; margin-top:0.8rem; font-family:'NanumNeo_EB',sans-serif;}
div.form-wrap div.form div.con{width:calc(100% - var(--width-form-tit));}
div.form-wrap div.form div.row{display:flex; align-items:center;}
div.form-wrap div.form div.row.mb0d5{margin-bottom:0.5rem;}

/* 생년월일 */
div.form-wrap div.form.birth div.con div.row span.bar{margin:0 1.5rem 0 0.5rem;}
div.form-wrap div.form.birth div.con div.row span.bar:last-of-type{margin-right:0;}

/* 주소 */
div.form-wrap div.form.addr div.con div.row.row01{gap:0.5rem;}
div.form-wrap div.form.addr div.con div.row.row01 input[type="text"]{width:10rem;}
div.form-wrap div.form.addr div.con div.row.row02{margin:0.5rem 0;}



/***** modal *****/
div.modal-wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:900;}
div.modal-wrap div.back-bg{background:rgba(0,0,0,0.3); position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
div.modal-wrap div.modal{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; border-radius:1rem;  z-index:2; overflow:hidden; min-width:600px; box-shadow:0 15px 30px rgba(0,0,0,0.2); max-height:90%;}
div.modal-wrap div.modal div.inner{padding:2rem 3rem;}
div.modal-wrap div.modal div.inner div.txt-area{margin-bottom:2rem; text-align:center; }
div.modal-wrap div.modal div.inner div.txt-area p.tit{font-family:'NanumNeo_EB',sans-serif; font-size:1.5rem; margin-bottom:0.5rem;}
div.modal-wrap div.modal div.inner div.txt-area p.txt{line-height:1.6; font-size:1.125rem; color:#555;}
div.modal-wrap div.modal div.inner div.txt-area p.txt02{line-height:1.5; font-size:1rem; font-family:'NanumNeo_B',sans-serif;}
div.modal-wrap div.modal div.btn-wrap{display:flex;}
div.modal-wrap div.modal div.btn-wrap a[class^="btn-"]{display:inline-block; width:50%; height:3.3rem; line-height:3.3rem; text-align:center; font-size:1.125rem; font-family:'NanumNeo_B',sans-serif;}
div.modal-wrap div.modal div.btn-wrap a.btn-confirm{background:#333; color:#fff; border-top:1px solid #333;}
div.modal-wrap div.modal div.btn-wrap a.btn-cancel{background:#ebebeb; color:#444; border-top:1px solid #ddd;}


/* 비밀글 */
div.modal-wrap.secret div.modal div.inner div.input-area input.pw-input{border:2px solid #333;}
/* 글삭제 */
div.modal-wrap.delete div.modal div.inner div.txt-area p.tit:before{content:''; display:block; width:2.25rem; height:2.25rem; background:url("/fro_end/img/ico_delete.svg")center/100% auto no-repeat; margin:0 auto; margin-bottom:1rem;}


/***** table *****/
div.table-wrap table{width:100%;}
div.table-wrap table th{font-family:'NanumNeo_EB',sans-serif;}

table.def-table{border-top:1px solid #ddd; margin:0.5rem 0;}
table.def-table tr{border-bottom:1px solid #ddd;}
table.def-table th{padding:0.8rem;}
table.def-table td{padding:0.8rem;}
table.def-table tbody tr th{background:#f5f5f5;}



/***** term *****/
div.term-wrap div.term div.incon{font-size:0.85rem; line-height:1.5;}
div.term-wrap div.term div.incon h5{text-align:center; font-family:'NanumNeo_EB',sans-serif; font-size:0.95rem; margin:2rem 0;}
div.term-wrap div.term div.incon h5.first{margin-top:0;}
div.term-wrap div.term div.incon div.set{margin-bottom:1.5rem;}
div.term-wrap div.term div.incon p.tit{font-family:'NanumNeo_EB',sans-serif;}
div.term-wrap div.term div.incon p.txt{font-family:'NanumNeo_B',sans-serif; color:#666; line-height:1.6; margin-bottom:1rem;}
div.term-wrap div.term div.incon ul.n-list{}
div.term-wrap div.term div.incon ul.n-list > li{margin:0.5rem 0; padding-left:1.5rem; position:relative;}
div.term-wrap div.term div.incon ul.n-list > li:before{content:''; display:block; font-size:0.9em; position:absolute; top:1px; left:0.25rem; font-family:'Montserrat_M','NanumNeo_R',sans-serif;}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(1):before{content:'[1]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(2):before{content:'[2]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(3):before{content:'[3]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(4):before{content:'[4]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(5):before{content:'[5]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(6):before{content:'[6]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(7):before{content:'[7]';}
div.term-wrap div.term div.incon ul.n-list > li:nth-child(8):before{content:'[8]';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list{}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li{margin:0.5rem 0; line-height:1.3; padding-left:1.5rem; position:relative; color:#666;}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:before{content:''; display:block; font-size:0.9em; position:absolute; top:1px; left:0.25rem; font-family:'Montserrat_M','NanumNeo_R',sans-serif;}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(1):before{content:'①';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(2):before{content:'②';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(3):before{content:'③';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(4):before{content:'④';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(5):before{content:'⑤';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(6):before{content:'⑥';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(7):before{content:'⑦';}
div.term-wrap div.term div.incon ul.n-list > li > ul.ni-list > li:nth-child(8):before{content:'⑧';}
div.term-wrap div.term div.incon table{width:100%; font-size:0.8rem; margin:0.25rem 0; background:#fff;}
div.term-wrap div.term div.incon table th{border:1px solid #ccc; padding:0.3rem 0.25rem; text-align:center; background:#f1f1f1; font-family:'NanumNeo_B',sans-serif;}
div.term-wrap div.term div.incon table td{border:1px solid #ccc; padding:0.3rem 0.25rem;}


/* tab page */
div.tab-page{}
div.tab-page section.tab-list{}
div.tab-page section.tab-list ul{display:flex; align-items:center; gap:0.25rem; border-bottom:2px solid #333;}
div.tab-page section.tab-list ul > li{font-size:1.2rem; text-align:center; border-radius:0.5rem 0.5rem 0 0; border:2px solid #ddd; border-bottom:0; color:#666; background:#fafafa; transition:0.3s; -webkit-transition:0.3s;} 
div.tab-page section.tab-list ul > li a{padding:0.8rem 2rem;} 
div.tab-page section.tab-list ul > li.on{font-family:'NanumNeo_EB',sans-serif; background:#fff; color:#333; border-color:#333; position:relative;}
div.tab-page section.tab-list ul > li.on:after{content:''; display:block; width:100%; height:3px; background:#fff; position:absolute; bottom:-3px; left:0;}
div.tab-page section.tab-cont{padding:2rem 0;}
@media(hover:hover){
	div.tab-page section.tab-list ul li:not(.on):hover{background:#fff; color:#333; border-color:#eee;}
}



/* ----- 반응형 ----- */
@media screen and (max-width:1600px){
	.w1600{width:90%;}
}
@media screen and (max-width:1440px){
	.w1440{width:90%;}
}
@media screen and (max-width:1280px){
	.w1280{width:90%;}
}
@media screen and (max-width:1024px){
	
	/* input */
	div.c-file div.ci-show a.file-attach{width:5rem;}
	div.c-file div.ci-show div.file-name{padding-right:5rem; padding-left:6rem;}

}
@media screen and (max-width:800px){}
@media screen and (max-width:640px){
	br.br640{display:block;}
	
	/* modal */
	div.modal-wrap div.modal{width:90%; min-width:unset;}

	/* tab page */
	div.tab-page section.tab-list ul > li{font-size:1.1rem;}
	div.tab-page section.tab-list ul > li a{padding:0.6rem 1rem;}
}
@media screen and (max-width:480px){
	:root{
		--height-input: 3rem;
	}

	br.br480{display:block;}

	/* button */
	.btn-center-wrap{margin-top:3rem;}
	.c-btn{padding:0.6rem 1.5rem;}
	.c-btn[class*="--lg"]{font-size:1.1rem; padding:0.8rem 2rem;}
	
	/* input */
	input{padding:0 0.6rem;}
	label.c-input.ci-check div.ci-show:after{top:43%;}

	/* modal */
	div.modal-wrap div.modal div.inner{padding:2rem;}
	div.modal-wrap div.modal div.inner div.txt-area p.tit{word-break:keep-all;}
	div.modal-wrap div.modal div.inner div.txt-area p.txt{word-break:keep-all; font-size:1rem; line-height:1.5;}


	/* form */
	div.form-wrap div.form{padding:1.5rem 0; display:block;}
	div.form-wrap div.form div.tit{width:100%; margin:0; margin-bottom:0.25rem; font-size:1rem;}
	div.form-wrap div.form div.con{width:100%;}
	div.form-wrap div.form.birth div.con div.row span.bar{margin:0 1rem 0 0.2rem;}
	div.form-wrap div.form.secret div.con div.row{display:block;}
	div.form-wrap div.form.secret div.con div.row div.pw{margin-top:0.35rem;}

	/* tab page */
	div.tab-page section.tab-list ul > li{font-size:1rem;}
	div.tab-page section.tab-list ul > li a{padding:0.6rem 0.8rem;}
	div.tab-page section.tab-cont{padding:1rem 0;}
}
@media screen and (max-width:400px){
	
	.w1600{width:92%;}
	.w1440{width:92%;}
	.w1280{width:92%;}
	
	/* button */
	.btn-center-wrap{gap:0.5rem;}

	/* input */
	label.c-input.square{margin-right:0.5rem;}
	label.c-input.square div.ci-show{padding:0 3rem;}


}
@media screen and (max-width:320px){}