@charset "utf-8";

/*** 게시판 작성 및 수정 영역 - OLD ***/

#bbs-field {}
#bbs-field label { display: inline-block; margin-top: 20px; margin-bottom:10px; font-size: 15px; font-weight: 400; color: #555; }
#bbs-field label:first-child { margin-top: 0; }
#bbs-field label strong { font-size: 13px; font-weight: 700; color: #FCA5A8; }
#bbs-field input[type=text], #bbs-field input[type=password], #bbs-field input[type=file] { display: block; width: 100%; height:40px; padding: 8px; background: #fff; border: 1px solid #e1e1e1; font-weight: 400; box-sizing: border-box; transition: all 0.5s; }
#bbs-field input[type=text]:focus, #bbs-field input[type=password]:focus, #bbs-field input[type=file]:focus { border: 1px solid #FCA5A8; }
#bbs-field ul.option { margin-top: 10px; }
#bbs-field ul.option li { display: inline-block; }
#bbs-field ul.option li input[type=checkbox] { position: relative; display: inline-block; width: 16px; height: 16px; border: 1px solid #e1e1e1; vertical-align: middle; transition: all 0.3s; }
#bbs-field ul.option li input[type=checkbox]::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: transparent; content: ""; transition: all 0.3s; }
#bbs-field ul.option li input[type=checkbox]:checked { border-color: #333; }
#bbs-field ul.option li input[type=checkbox]:checked::after { background: #333; }
#bbs-field ul.option li label { display: inline-block; margin: 0 0 0 5px; font-size: 16px; }
#bbs-field select { height: 40px; margin-right: -1px; padding: 0 5px; font-weight: 400; border: 1px solid #e1e1e1; }
#bbs-field textarea { height: 400px !important; padding: 10px; border: 1px solid #e1e1e1; box-sizing: border-box; font-weight: 400; }
#bbs-field input[type=file] + input[type=text] { margin-top: 5px; }
#bbs-field span.delete { display: block; margin-top: 10px; }
#bbs-field span.delete input[type=checkbox] { display: inline-block; width: 15px; height: 15px; border: 1px solid #e1e1e1; vertical-align: middle; }
#bbs-field span.delete label { display: inline-block; margin: 0 0 0 5px; font-size: 16px; }
#bbs-field div.cke_sc { display: none; }
#bbs-field-warning { margin-top: 20px; font-size: 16px; font-weight: 400; }

.checkBox.abs { position: absolute; top: 0; left: 0; }
.checkBox label {display: flex; align-items: center; gap: 8px;}
.checkBox input {flex: none; position: relative; width: 22px; height: 22px; -webkit-appearance: none; transition: .5s ease; background: url("/@soda/images/ico_checkbox_gray.svg") no-repeat center / contain;}
.checkBox input:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: url("/@soda/images/ico_checkbox_check_gray.svg") no-repeat center / contain; opacity: 0; transition: .5s ease;}
.checkBox input:checked:after {opacity: 1;}
.checkBox label small {color: #666666; font-size: .9rem; font-weight: 500;}
.checkBox.white input {background-image: url("/@soda/images/ico_checkbox_white.svg");}
.checkBox.white input:after {background-image: url("/@soda/images/ico_checkbox_check_white.svg");}
.checkBox.white label small {color: #fff;}

/* 페이지 번호 - soda  */
.pg_wrap {margin-top: 3.3rem;}
.pg_wrap .pg {display: flex; gap: 0.6rem; justify-content: center; width: 100%;}
.pg_wrap a {background: #fff; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .5s ease; border: 1px solid #ddd; font-weight: 500; box-sizing: border-box;}
.pg_wrap a.pg_start {background: transparent url("/@soda/images/ico_page_first_active.svg") no-repeat center / 60%; text-indent: -9999px; }
.pg_wrap a.pg_prev {background: transparent url("/@soda/images/ico_page_prev_active.svg") no-repeat center / 60%; text-indent: -9999px; }
.pg_wrap a.pg_next {background: transparent url("/@soda/images/ico_page_next_active.svg") no-repeat center / 60%; text-indent: -9999px; }
.pg_wrap a.pg_end {background: transparent url("/@soda/images/ico_page_last_active.svg") no-repeat center / 60%; text-indent: -9999px; }
.pg_wrap strong {width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mainColor3); color: #fff; border-color: transparent; border-color: var(--mainColor3); font-weight: 600; box-sizing: border-box;}
.aos-init + .pg_wrap {opacity: 0; transition: .5s ease;}
.aos-init.aos-animate + .pg_wrap {animation: opacityMove 1s .1s ease both;}

.buttonBox { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.6rem !important; opacity: 1 !important; }
.buttonBox.center { justify-content: center !important; gap: 1.0rem;}
.buttonBox a {max-width: 8.8rem; width: 100%; height: 3.5rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; transition: .5s ease;}
.buttonBox > div { display: flex; gap: .5rem; width: 100%; }
.buttonBox > div:last-child { justify-content: flex-end; }
.buttonBox button {max-width: 8.8rem; width: 100%; height: 3.5rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; transition: .5s ease;}
.buttonBox button.black {background: #333333; color: #fff;}
.buttonBox button.yellow {background: var(--green); color: #333333;}
.buttonBox button.blue {background: var(--blue); color: #fff;}
.buttonBox .writeBtn:last-child {margin-left: auto;}
.buttonBox a.black {background: #333333; color: #fff;}
.buttonBox a.yellow {background: var(--green); color: #333333;}
.buttonBox a.blue {background: var(--blue); color: #fff;}
.buttonBox .writeBtn:last-child {margin-left: auto;}

@media screen and (min-width: 1025px) {

	.buttonBox a.black:hover {box-shadow: inset 0 -4px 0 #ffffff70, 0 5px 5px #00000030;}
	.buttonBox a.yellow:hover {box-shadow: inset 0 -4px 0 #ffffff70, 0 5px 5px #F3C54B30;} 
	.buttonBox a.blue:hover {box-shadow: inset 0 -4px 0 #ffffff70, 0 5px 5px #1D518130;}

}