@charset "utf-8";

/* 게시판용 공통 */

.bo-com-btn {
    text-align: right;
}

.bo-com-btn > ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.bo-com-btn > ul > li{
	position:relative;
    display: inline-block;
    margin-right: 10px;
}

.bo-com-btn > ul > li:last-child{
	margin-right: 0;
}

.bo-com-btn > ul > li > button,
.bo-com-btn > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: #DCF763;
    color: #1C1C1C;
	border-radius: 10px;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease-in-out;
}

.bo-com-btn > ul > li > a.btn_admin,.bo-com-btn > ul > li > .btn_admin {background:#d13f4a; color:#fff; } /* 관리자 전용 버튼 */

.bo-com-btn > ul > li:hover > button,
.bo-com-btn > ul > li:hover > a {
	background: #FFFFFF;
}

.bo-com-btn > ul > li > button > i,
.bo-com-btn > ul > li > a > i{
    font-size: 18px;
    color: inherit;
}

.bo-write-btn { display:flex; justify-content: center; gap:10px;}

.bo-btn-write {
	position: relative;
    display: inline-block;
    background: #DCF763;
	border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: capitalize;
    color: #161616;
    border: none;
    padding: 18px 34px;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    z-index: 0;
}


.bo-btn-cancel {
    background: #FFFFFF1A;
    color: #fff;
}

.bo-btn-write:hover{
	background: #fff;
	color:#000;
}


@media only screen and (max-width: 991px){	
	.bo-com-btn ul {
		text-align: left;
	}
}

/*
리스트
*/

#bo-list .bo-category{
	text-align: center;
	margin-bottom: 60px;
}

#bo-list .bo-category ul{
	list-style: none;
	text-align: center;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 60px;
	padding: 0;margin: 0;
}

#bo-list .bo-category ul li a{
	position: relative;
	display: inline-block;
	color: var(--text-color);
	font-weight: 500;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

#bo-list .bo-category ul li a::before{
    content: '/';
    position: absolute;
    top: 0;
	bottom: 0;
    right: -33px;
	font-weight: 400;
	color: var(--text-color);
}

#bo-list .bo-category ul li:last-child a:before{
	display: none;
}

#bo-list .bo-category ul li #bo_cate_on,
#bo-list .bo-category ul li a:hover{
	color: #DCF763;
}


#bo-list .page-pagination{
    margin-top: 20px;
    text-align: center;
}

#bo-list .page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

#bo-list .page-pagination ul li a,
#bo-list .page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: #1C1C1C;
    color: #D7D7D7;
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

#bo-list .page-pagination ul li.active a, 
#bo-list .page-pagination ul li a:hover{
    background: #DCF763;
    color: #1C1C1C;
}

#bo-w iframe { background:#fff; }


/* Contact Us */

.contact-us-form .radio-wrapper { display: grid;  grid-template-columns: repeat(4, 1fr); /* 4개씩 2줄로 정렬 */    gap: 10px;}
.contact-us-form .form-check { padding-left:0; }
.contact-us-form .btn { display:block; width:100% !important; letter-spacing:-0.1em; color: var(--primary-color); background: var(--divider-color); border: 1px solid var(--divider-color); line-height:2.2; height:50px; }
.contact-us-form .btn:hover,
.contact-us-form .btn-check:checked+.btn { background:#dcf763; color:#161616; }
.contact-us-form .form-select { color: var(--primary-color); background:var(--divider-color);  border: 1px solid var(--divider-color); padding:0.8rem 0.725rem;  }
.contact-us-form .form-select option { color:#000; }

.contact-us-form textarea.form-control { min-height:300px; }

.contact-us-form .contact-btn { display:flex; flex-wrap:wrap; gap:20px; justify-content: space-between; padding:0; }
.contact-us-form .contact-btn li {}
.contact-us-form .contact-btn a { display:inline-block; color:#fff; background:transparent; border:0; font-size:16px !important; width:auto !important; height:auto !important; line-height:1.2; }

#contact-private .modal-header h5 { color:#333; }
#contact-private .modal-body { line-height:1.5; color:#333; font-size:14px; }

@media only screen and (max-width: 680px){	
	.contact-us-form .btn { line-height:1.5; height:40px; }
	.contact-us-form .radio-wrapper { grid-template-columns: repeat(2, 1fr); }
	.contact-us-form .contact-btn label,
	.contact-us-form .contact-btn a { font-size:12px !important; margin:0; padding:0; }
}