:root{
	--color-main01: #002d7a;
	--color-main02: #6D61EE;
	--color-main03: #00C3A4;
	--color-main04: #8800FF;

	--color-main01-20: #F2F4F8;
	--color-main02-20: #F8F7FE;


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

.color01{color:var(--color-main01);}
.color02{color:var(--color-main02);}
.color03{color:var(--color-main03);}
.color04{color:var(--color-main04);}

/***** select *****/
select{width:auto; height:3rem; padding:0 0.8rem; padding-right:3rem; font-family:"Pretendard-Regular"; font-size:1rem; border-radius:5px; border:1px solid #ccc; outline:0; background:#fff url("/fro_end/img/select_arrow.png")right center/28px auto no-repeat;}
select:focus{border:2px solid #333;}

/***** input *****/
input{border:1px solid #ccc; margin:0; border-radius:5px; outline:none; -webkit-appearance:none; appearance:none; font-family:"Pretendard-Regular"; font-size:1rem;}
input:-ms-input-placeholder,
input:-moz-input-placeholder,
input::-webkit-input-placeholder{color:#888; font-family:"Pretendard-ExtraLight";}
input::placeholder{opacity:1; color:#888; font-family:"Pretendard-ExtraLight";}
input:focus{outline:none; border:2px solid #333;}

input[type="text"],
input[type="password"],
input[type="number"]{width:100%; height:3rem; line-height:3rem; padding:0 0.5rem;}
input[type="date"]{height:3rem; line-height:3rem; padding:0 0.5rem; margin:0.5rem;}
input[type="text"]:read-only,
input[type="text"]:disabled{background:#eee; border:#ddd;}

/* input - checkbox, radio */
label.c-input{position:relative; display:inline-block; height:3rem; line-height:3rem; padding-left:1.5rem; cursor:pointer; font-size:1rem;}
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.05em; width:1.05em; background:#fff; border:1px solid #888; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
label.c-input div.ci-show:after{content:""; position:absolute; display:none;}
label.c-input.ci-radio div.ci-show{border-radius:50%;}
label.c-input:hover input ~ div.ci-show,
label.c-input input:focus ~ div.ci-show{border-color:var(--color-main01);}
label.c-input input:checked ~ div.ci-show{background:var(--color-main01); border-color: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;}
/* checkbox */
label.c-input.ci-check input:checked ~ div.ci-show{background:#fff;}
label.c-input.ci-check div.ci-show:after{left:0; top:0; width:100%; height:100%; background:url("/fro_end/img/ico_check_blue.svg")center/62% auto no-repeat;}
label.c-input.ci-check input:disabled ~ div.ci-show:after{border-color:#7b7b7b;}
/* radio */
label.c-input.ci-radio div.ci-show:after{left:50%; top:50%; transform:translate(-50%, -50%); height:42%; width:42%; border-radius:50%; background:#fff;}
label.c-input.ci-radio input:disabled ~ div.ci-show:after{background:#7b7b7b;}
/* single */
label.c-input.single{height:auto; line-height:initial; padding:0; position:static;}
label.c-input.single div.ci-show{position:relative; top:2px; left:0; transform:none;}

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


/***** textarea *****/
textarea{border:1px solid #ccc; padding:0.5rem; border-radius:0.5rem; outline:none; font-family:"Pretendard-Regular"; font-size:1rem; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
textarea:-ms-input-placeholder{opacity:1; color:#888; font-family:"Pretendard-ExtraLight"; font-size:1rem; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
textarea:-moz-input-placeholder{opacity:1; color:#888; font-family:"Pretendard-ExtraLight"; font-size:1rem; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
textarea::-webkit-input-placeholder{opacity:1; color:#888; font-family:"Pretendard-ExtraLight"; font-size:1rem; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
textarea::placeholder{opacity:1; color:#888; font-family:"Pretendard-ExtraLight"; font-size:1rem; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
textarea:focus{outline:none; border:2px solid #333;}

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

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

/* margin */
.mt0d5{margin-top:0.5rem;}
.mt1{margin-top:1rem;}

/* button */
div.btn-center-wrap{text-align:center; margin-top:4rem;}
div.btn-center-wrap > a{margin:0 0.25rem;}
.c-btn{display:inline-block; font-size:1rem; padding:0.625rem 1.2rem; border-radius:0.5rem; font-family:'Pretendard-Medium',sans-serif; transition:0.3s; -webkit-transition:0.3s;}
.c-btn[class*="--lg"]{font-size:1.25rem; padding:0.7rem 1.5rem;}
.c-btn.btn01{background:var(--color-main01); color:#fff;}
.c-btn.btn02{background:var(--color-main02); color:#fff;}
.c-btn.btn03{background:var(--color-main03); color:#fff;}
.c-btn.btn04{background:var(--color-main04); color:#fff;}
.c-btn:not(.underline):hover{transform: scaleX(1.08) scaleY(1.12) translateZ(0);}
.c-btn:not(.underline):active{transform: scaleX(0.95) scaleY(0.93) translateZ(0);}
.c-btn.underline{padding:0; text-decoration:underline; text-underline-offset:4px;}
.c-btn.confirm{background:var(--color-main01); color:#fff;}
.c-btn.cancel{background:#bbb; color:#fff;}
.c-btn.list{border:3px solid var(--color-main01); color:var(--color-main01);}
.c-btn.delete{border:3px solid var(--color-red); color:var(--color-red);}
.c-btn.write{border:3px solid var(--color-main02); color:var(--color-main02);}
.c-btn.reply{border:3px solid var(--color-main03); color:var(--color-main03);}


/* 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:3rem; line-height:3rem; border:1px solid #aaa; border-radius:0.5rem; position:relative;}
div.c-file div.ci-show a.file-attach{position:absolute; width:5rem; height:2rem; line-height:2rem; text-align:center; display:block; font-family:'Pretendard-Bold',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:6rem; 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_close.svg")center/90% auto no-repeat; transform:translateY(-50%);}
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);}
}


/* table */
.BR{border-right:1px solid #ddd !important;}
.BL{border-left:1px solid #ddd !important;}
table{width:100%; font-size:1rem; background:#fff;}
table th{font-weight:unset; font-family:'Pretendard-Bold',sans-serif;}
table td{font-weight:unset; font-family:'Pretendard-Regular',sans-serif;}
table.def-table{border-top:2px solid #333; margin:0.5rem 0; text-align:center;}
table.def-table thead tr{border-bottom:1px solid #333;}
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;}
table.def-table tbody tr td{border-right:1px solid #ddd;}
table.def-table tbody tr td:last-child{border-right:none;}
div.table-wrap.mob-scroll{overflow-y:auto;}
div.table-wrap.mob-scroll p.mob-scroll-inf{display:none; font-size:0.9rem; font-family:'Pretendard-Medium',sans-serif; padding-left:2rem; position:relative;}
div.table-wrap.mob-scroll p.mob-scroll-inf:before{content:''; display:block; width:1.2em; height:1.2em; background:url("/fro_end/img/mob_scroll_inf.svg")center/100% auto no-repeat; position:absolute; top:0; left:0; animation:mobScrollMove 2s infinite linear;}
div.table-wrap.mob-scroll table.def-table{min-width:500px;}
@keyframes mobScrollMove{
	0%{transform:translateX(0);}
	50%{transform:translateX(8px);}
	100%{transform:translateX(0);}
}

/* 원고관리기능 - 에디터 내 table style */
.cke_editable table{}
.cke_editable table tr{border:1px solid #000;}
.cke_editable table th{border:1px solid #000; padding:5px;}
.cke_editable table td{border:1px solid #000; padding:5px;}


/* box */
div.def-box{padding:3rem 1rem; text-align:center; font-size:1.25rem; font-family:'Pretendard-Medium',sans-serif; border:2px solid #333; border-radius:1rem; line-height:1.5;}
div.def-box.box02{padding:1rem; font-size:1rem; border-radius:0.5rem; border:1px solid #ddd; font-family:'Pretendard-Regular',sans-serif;}

/* term */
div.term{}
div.term div.term-con{padding:0 0.2rem 0.5rem 0.2rem; font-size:0.9rem; max-height:12rem; overflow-y:auto;}
div.term div.term-con div.set{}
div.term div.term-con p.tit01{font-family:'Pretendard-Bold',sans-serif; text-align:center; font-size:1.35em; margin:3rem 0;}
div.term div.term-con p.tit02{font-family:'Pretendard-Bold',sans-serif; margin:2rem 0 0.5rem 0;}
div.term div.term-con p.txt01{line-height:1.5; margin:0.8rem 0;}
div.term div.term-con ul.num{}
div.term div.term-con ul.num > li{position:relative; padding-left:1rem; margin:0.32rem 0;}
div.term div.term-con ul.num > li:before{content:'0.'; display:block; font-size:1em; position:absolute; top:0; left:0;}
div.term div.term-con ul.num > li:nth-child(1):before{content:'1.';}
div.term div.term-con ul.num > li:nth-child(2):before{content:'2.';}
div.term div.term-con ul.num > li:nth-child(3):before{content:'3.';}
div.term div.term-con ul.num > li:nth-child(4):before{content:'4.';}
div.term div.term-con ul.num > li:nth-child(5):before{content:'5.';}
div.term div.term-con ul.num > li:nth-child(6):before{content:'6.';}
div.term div.term-con ul.num > li:nth-child(7):before{content:'7.';}
div.term div.term-con ul.num > li:nth-child(8):before{content:'8.';}
div.term div.term-con ul.num > li:nth-child(9):before{content:'9.';}
div.term div.term-con ul.bar{}
div.term div.term-con ul.bar > li{position:relative; padding-left:0.8rem; margin:0.32rem 0;}
div.term div.term-con ul.bar > li:before{content:''; display:block; width:5px; height:1px; background:#777; position:absolute; top:0.5rem; left:0;}
div.term div.term-con > table{font-size:0.95em; text-align:center;}
div.term div.term-con > table th{padding:0.3rem; border:1px solid #ddd; background:#eee;}
div.term div.term-con > table td{padding:0.3rem; border:1px solid #ddd;}
div.term ul.term-inf{border:1px solid #ddd; padding:1rem; margin:0.5rem 0;}
div.term ul.term-inf li{font-size:0.95rem; margin-bottom:0.5rem; position:relative; padding-left:0.8rem;}
div.term ul.term-inf li:last-child{margin-bottom:0;}
div.term ul.term-inf li:before{content:''; display:block; width:5px; height:1px; background:#777; position:absolute; top:0.5rem; left:0;}
div.term div.term-chk{background:#f5f5f5; padding:0.5rem; display:flex; align-items:center; justify-content:center; gap:2rem; margin-top:0.5rem;}
div.term div.term-chk div.lab{font-family:'Pretendard-Bold',sans-serif;}


/* form */
div.form{}
div.form div.form-item{display:flex; gap:1rem; padding:1.5rem 0; border-bottom:1px dashed #ddd;}
div.form div.form-item div.tit{width:9rem; margin-top:1rem; font-family:'Pretendard-Bold',sans-serif; text-align:center;}
div.form div.form-item div.con{width:calc(100% - 10rem);}
div.form div.form-item div.con > div.row{display:flex; align-items:center;}
div.form div.form-item div.con a.form-btn{height:3rem; line-height:calc(3rem - 2px); text-wrap:nowrap; border:2px solid #323232; background:#fff; font-family:'Pretendard-SemiBold',sans-serif; box-shadow:0 6px 16px rgba(0,0,0,0.1); padding:0 1rem; margin-left:0.5rem; border-radius:0.5rem; transition:0.3s; -webkit-transition:0.3s;}
div.form div.form-item div.con a.form-btn:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.15);}
div.form div.form-item div.con ul.inf{font-size:0.9rem; color:#777; margin-top:0.5rem;}
div.form div.form-item div.con ul.inf li{padding-left:1.3rem; position:relative;}
div.form div.form-item div.con ul.inf li:before{content:'!'; display:block; width:16px; height:16px; line-height:16px; text-align:center; font-size:11px; color:#fff; font-family:'Montserrat_B', 'Pretendard-Bold',sans-serif; background:#9f9f9f; border-radius:50%; position:absolute; top:1px; left:0;}
div.form div.form-item div.con ul.inf.error li{color:var(--color-red);}
div.form div.form-item div.con ul.inf.error li:before{content:'\00D7'; font-size:17px; background:var(--color-red);}
div.form div.form-item div.con span.bar{display:inline-block; margin:0 0.5rem; text-wrap:nowrap;}
div.form div.form-item div.con p.fix{height:3rem; line-height:3rem;}
div.form div.form-item.form-row{flex-wrap:wrap; gap:0;}
div.form div.form-item.form-row div.tit{width:100%; text-align:left; margin-top:0; margin-bottom:0.5rem;}
div.form div.form-item.form-row div.con{width:100%;}

/* 휴대폰번호 */
div.form div.form-item.tel div.con div.row select.tel01{}
div.form div.form-item.tel div.con div.row input.tel02{width:30%;}
div.form div.form-item.tel div.con div.row input.tel03{width:30%;}
/* 주소 */
div.form div.form-item.addr div.con div.row{margin-bottom:0.5rem;}
div.form div.form-item.addr div.con div.row .addr-num{width:9rem;}
/* 가입경로 */
div.form div.form-item.joinroot div.con label.c-input{width:17%;}
/* 주민등록번호 */
div.form div.form-item.idnum div.con input.idnum01,
div.form div.form-item.idnum div.con input.idnum02{width:10rem;}
div.form div.form-item.idnum div.con input.idnum02-1{width:3rem; margin-right:0.25rem;}


/* 모달창 */
div.modal-wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:200;}
div.modal-wrap.show{display:block;}
div.modal-wrap div.bg{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); backdrop-filter:blur(1px);}
div.modal-wrap div.modal{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; box-shadow:0 20px 40px rgba(0,0,0,0.2); width:800px; padding:3rem; max-height:80vh; overflow-y:auto; overflow-x:hidden; border-radius:1rem;}
div.modal-wrap div.modal div.tit{margin-bottom:2rem;}
div.modal-wrap div.modal div.tit p.tit{text-align:center; font-family:'Pretendard-Bold',sans-serif; font-size:2rem; margin-bottom:0.5rem;}
div.modal-wrap div.modal div.tit p.tit02{text-align:center; font-family:'Pretendard-Bold',sans-serif; font-size:1.5rem; word-break:keep-all; margin-bottom:0.5rem; line-height:1.5;}
div.modal-wrap div.modal div.tit p.txt{font-size:1.125rem; text-align:center; color:#777;}
div.modal-wrap div.modal div.tit span.colorRed{color:var(--color-red);}
div.modal-wrap div.modal div.btn{margin-top:2rem; display:flex; align-items:center; justify-content:center; gap:0.8rem;}
div.modal-wrap div.modal div.table-wrap{margin:1rem 0;}
div.modal-wrap div.modal div.table-wrap table{width:100%; border-top:2px solid #333;}
div.modal-wrap div.modal div.table-wrap table tr{border-bottom:1px solid #ddd;}
div.modal-wrap div.modal div.table-wrap table th{padding:0.8rem; background:#f5f5f5;}
div.modal-wrap div.modal div.table-wrap table td{padding:0.8rem;}
div.modal-wrap div.modal div.box{background:#f5f5f5; padding:2rem; border-radius:0.5rem; display:flex; margin:2rem 0; font-size:1.125rem; border:1px solid #ddd;}
div.modal-wrap div.modal div.box span.tit{width:20%; font-family:'Pretendard-Bold',sans-serif; text-align:center; position:relative; color:#777;}
div.modal-wrap div.modal div.box span.tit:after{content:''; display:block; width:1px; height:80%; background:#ddd; position:absolute; right:0; top:10%;}
div.modal-wrap div.modal div.box span.con{width:80%; padding-left:2rem;}


@media screen and (max-width:1600px){
	.w1600{width:90%;}
}

@media screen and (max-width:1440px){
	.w1440{width:90%;}
}

@media screen and (max-width:1280px){
	html{font-size:15px;}

	.w1280{width:90%;}
}

@media screen and (max-width:800px){
	
	/* modal */
	div.modal-wrap div.modal{width:90%; padding:2rem;}

	/* box */
	div.def-box{font-size:1.125rem; padding:2rem 1rem; border-radius:0.8rem;}
}

@media screen and (max-width:640px){
	
	/* form */
	div.form div.form-item{flex-wrap:wrap; gap:0.5rem;}
	div.form div.form-item div.tit{width:100%; margin:0; text-align:left;}
	div.form div.form-item div.con{width:100%;}
	div.form div.form-item div.con ul.inf li:before{width:14px; height:14px; line-height:14px; font-size:9px;}
	div.form div.form-item.joinroot div.con label.c-input{width:25%;}

	/* modal */
	div.modal-wrap div.modal div.table-wrap table{font-size:0.9rem;}
	div.modal-wrap div.modal div.table-wrap table th{padding:0.5rem;}
	div.modal-wrap div.modal div.table-wrap table td{padding:0.5rem;}

}


@media screen and (max-width:480px){
	html{font-size:14px;}

	/* file */
	div.c-file div.ci-show div.file-name{padding-right:6rem;}

	/* table */
	table.def-table th{padding:0.6rem 0.5rem;}
	table.def-table td{padding:0.6rem 0.5rem;}
	div.table-wrap.mob-scroll p.mob-scroll-inf{display:block;}

	/* form */
	div.form div.form-item div.con span.bar{margin:0 0.25rem;}
	div.form div.form-item.tel div.con div.row input.tel02{width:36%;}
	div.form div.form-item.tel div.con div.row input.tel03{width:36%;}
	div.form div.form-item.email div.con div.row{flex-wrap:wrap;}
	div.form div.form-item.email div.con div.row input.email01{width:94%; margin-bottom:0.5rem;} 
	div.form div.form-item.email div.con div.row input.email02{width:46%;} 
	div.form div.form-item.email div.con div.row select.email03{width:46%;} 
	div.form div.form-item.addr div.con div.row{flex-wrap:wrap;}
	div.form div.form-item.addr div.con div.row input.addr-num{order:1; width:50%;}
	div.form div.form-item.addr div.con div.row input#addr1{width:100%; order:3; margin-top:0.5rem;}
	div.form div.form-item.addr div.con div.row a.form-btn{order:2;}

	/* term */
	div.term div.term-chk{flex-direction:column; text-align:center;}
	div.term div.term-chk div.lab{width:100%;}
	div.term div.term-chk div.chk{width:100%;}
	
	/* modal */
	div.modal-wrap div.modal div.tit{margin-bottom:1.5rem;}
	div.modal-wrap div.modal div.tit p.tit{font-size:1.8rem;}
	div.modal-wrap div.modal div.tit p.txt{font-size:1rem;}
	div.modal-wrap div.modal div.table-wrap table{font-size:0.8rem;}

	/* box */
	div.def-box{font-size:1.05rem; line-height:1.4; padding:1.5rem 0.8rem;}

}
@media screen and (max-width:400px){
	html{font-size:13px;}

	div.form div.form-item.joinroot div.con label.c-input{width:auto; margin-right:1rem;}
}
@media screen and (max-width:320px){
	html{font-size:12px;}
}