@charset "utf-8";

.bbs_skin *{vertical-align: middle;}

/* 공통 */
.bbs_comment{margin:15px 0}
.adm_check{width: 20px;height: 20px;}
.w_star{color: #db2457;}
.input_w100{width:100% !important;}
.input_w90{width:90% !important;}
.input_w80{width:80% !important;}
.input_w70{width:70% !important;}
.input_w60{width:60% !important;}
.input_w50{width:50% !important;}
.input_w50{width:40% !important;}
.input_w40{width:40% !important;}
.input_w30{width:40% !important;}
.input_w20{width:20% !important;}

/* 게시판 기본 버튼스타일 */
.bbs_btn {text-align: right; margin:20px 0;} 
.bbs_btn a{display:inline-block; margin:0 2px 6px 2px; vertical-align:middle; border-radius: 10px; transition: 0.3s ease-out;} 
.bbs_btn .bbs_bt1{background: #fff; border:1px solid #e1e1e1; color: #464646; padding:10px 30px } 
.bbs_btn .bbs_bt1:hover, .bbs_btn .bbs_bt1:focus {background:#451876; color:#fff;} 
.bbs_btn .bbs_bt2 {background: #333; color:#fff; padding:10px 30px } 
.bbs_btn .bbs_bt2:hover, .bbs_btn .bbs_bt2:focus {background:#451876; } 
.bbs_btn .bbs_bt3 {background:#fff; border:1px solid #451876; color:#451876; padding:10px 30px } 
.bbs_btn .bbs_bt3:hover, .bbs_btn .bbs_bt3:focus {background:#451876; color:#fff;} 
.bbs_btn input[type=submit] {margin:0 2px 6px 2px; background: #333; color:#fff; height: 54px; padding: 0 30px;vertical-align:middle;cursor: pointer;font-size: 18px; border-radius: 10px;} 
.bbs_btn input[type=submit]:hover, .bbs_btn input[type=submit]:focus { background:#451876; } 

.btn_bbsw{display: inline-block; height: 40px; margin:2px 0 2px 3px; padding: 10px; background: #451876; font-size:15px; vertical-align: middle; line-height: 1.5em; color:#fff; white-space:nowrap; border-radius: 10px;} 
.btn_bbsw:hover,.btn_bbsw:focus{color:#451876; border:1px solid #451876; background:#fff; transition: 0.3s ease-out;} 

/* 페이징 */
.bbs_page{text-align:center; margin:25px 0}
.bbs_page a{display:inline-block; width: 46px; height: 46px; padding:11px 0 0 0; margin:0 4px 4px; border: 1px solid #e1e1e1; background: #fff; border-radius: 50%; font-size: 17px; }
.bbs_page a:hover, .bbs_page a:focus{border-color:#8252b5; color: #8252b5; transition: 0.3s ease-out;}
.bbs_page a.on{font-weight:500; color:#fff; background: #8252b5; border: none; }
.bbs_page .prev{font-size:0;overflow:hidden;background: url("/images/member/bbs/bbs_page.png") no-repeat;background-position: 50% -37px;}
.bbs_page .prev2{font-size:0;overflow:hidden;background: url("/images/member/bbs/bbs_page.png") no-repeat;background-position: 50% 8px;}
.bbs_page .next{font-size:0;overflow:hidden;background: url("/images/member/bbs/bbs_page.png") no-repeat;background-position: 50% -83px;}
.bbs_page .next2{font-size:0;overflow:hidden;background: url("/images/member/bbs/bbs_page.png") no-repeat;background-position: 50% -127px;}


/* 게시판 기본 검색스타일 */
.bbs_total{margin:10px 0;} 
.bbs_total strong{color: #451876; font-weight:500; vertical-align:top;} 
.bbs_search{margin: 0 0 20px;}
.bbs_search input,.bbs_search select{display: inline-block; height: 40px; margin: 2px 0; padding: 0 7px; border: 1px solid #e1e1e1; border-radius: 10px;}
.bbs_search input[type="submit"],.bbs_search input[type="button"]{padding: 0 10px; background: #333; color: #fff; border: 1px #e1e1e1;}
.bbs_search input[type="submit"]:hover,.bbs_search input[type="button"]:hover{background: #451876; transition: 0.3s ease-out;}
.bbs_search.bbs_search2{padding: 20px; background: #f8f8f8; text-align: center; border-radius: 10px;}

@media all and (min-width:768px) {
.bbs_search .flex{display: flex; justify-content: space-between;}
}

/* 기본_테이블형식 */
.bbs_list_t{width:100%; border-top: 1px solid #8252b5;}
.bbs_list_t tbody .notice span{display: inline-block; width: 16px; height: 16px; background: url('/images/member/bbs/ico_notice.png') no-repeat; font-size: 0;}
.bbs_list_t tbody .secret span{display: inline-block; width: 16px; height: 20px; margin-right: 6px; background: url('/images/member/bbs/ico_secret.png') no-repeat; font-size: 0;}
.bbs_list_t tbody ul{text-align: left;}
.bbs_list_t tbody li{position: relative; line-height:1.5em; padding:0 0 0 16px; margin-bottom: 8px;}
.bbs_list_t tbody li::before{content: '';position: absolute; top: 8px; left: 0; display: block; width: 6px; height: 6px; background: #8252b5; border-radius: 50%;}
.bbs_list_t tbody li ul{margin:8px 0 0;}
.bbs_list_t tbody li li{padding:0 0 0 16px; margin-bottom:6px;}
.bbs_list_t tbody li li::before{top: 9px; width: 8px; height: 4px; background: #838383; border-radius: 4px;}
.bbs_list_t tbody li li li{padding:0 0 0 14px; color:#737373; font-size:15px;}
.bbs_list_t tbody li li li::before{top: 8px; width: 6px; height: 6px; background: #a9a9a9; border-radius: 50%;}
/* .bbs_list_t tbody .call a{display: inline-block; padding-left: 30px; background: url("/images/common/call.png") no-repeat top left;} */

@media all and (min-width:1200px){
.bbs_list_t{min-width:860px; margin:20px 0; table-layout: fixed;}
.bbs_list_t th,.bbs_list_t td{text-align: center; padding:20px 8px; border:1px solid #e4e4e4; line-height: 1.4em; border-top: 0; border-left: 0; border-right: 0;}
.bbs_list_t tbody .title{text-align: left;}
.bbs_list_t tbody .title a{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bbs_list_t tbody .secret a{display: inline-block; width:calc(100% - 30px);}
.bbs_list_t tbody td .sbtn_go, .bbs_list_t tbody td .sbtn_new, .bbs_list_t tbody td .sbtn_down{margin: 2px 0;}
.bbs_list_t tbody td img{display: inline-block; vertical-align: middle;}
.bbs_list_t tbody tr:hover .title a,.bbs_list_t tbody tr .title a:focus{text-decoration: underline;}
}

@media all and (max-width:1200px){
.bbs_list_t col{width:100% !important;}
.bbs_list_t thead{display: none;}
.bbs_list_t tbody tr{display: block; border-bottom: 1px solid #e4e4e4; padding:10px;}
.bbs_list_t tbody td{display: inline-block; padding:6px 0; margin-right:10px; line-height: 1.4em; vertical-align: middle;}
.bbs_list_t tbody .title{display: block; background: #f9f5ff; padding:16px; margin:0 0 10px; border-radius: 10px;}
.bbs_list_t tbody [data-cell-header]:before{content:attr(data-cell-header); display:inline-block; color:#666; padding-right:5px;}
.bbs_list_t tbody [data-cell-header="바로가기 :"]{padding: 0;}
.bbs_list_t tbody .num[data-cell-header]:before,.bbs_list_t tbody .title[data-cell-header]:before,.bbs_list_t tbody .notice[data-cell-header]:before{display:none;}
.bbs_list_t tbody td img{display: inline-block;vertical-align: baseline;}
.bbs_list_t tbody td span{vertical-align: text-bottom;}
.bbs_list_t tbody td input{vertical-align: middle;}
}


/* 뷰 */
.bbs_vtop h4{padding: 0; font-weight: 500; background: none;}
.bbs_vtop .col{text-align: right; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px #e1e1e1 solid;}
.bbs_vtop .col li{display: inline-block; margin:0 6px; color: #666; line-height: 1.5em; vertical-align: middle;}
.bbs_vtop .col li strong{color: #333;line-height: 1.5em;vertical-align: text-top;}
.bbs_vtop .tt_list{margin-bottom: 30px; border-top: 1px solid #8252b5;}
.bbs_vtop .tt_list li{border-bottom: 1px solid #e1e1e1;display:table;width:100%;}
.bbs_vtop .tt_list strong{display:table-cell;padding:20px 10px;background: #f9f5ff; width:40%;text-align:center;vertical-align:middle;}
.bbs_vtop .tt_list span{display:table-cell;padding:20px 10px;text-align:left;vertical-align:middle;}
.bbs_vtable{width:100%;min-width:900px; margin-bottom: 30px; border-top: 1px solid #dedede;}
.bbs_vtable th, .bbs_vtable td{border-bottom: 1px solid #e1e1e1; padding: 12px 10px;}
.bbs_vtable th{background: #f9f5ff;}


 /* 포토_목록 */
.photo_list {border-top: 1px solid #8252b5;}
.photo_list li{margin:0 0 20px 0;text-align:center; }
.photo_list li a{display:block; border-radius: 20px; border: 1px solid #e1e1e1; overflow: hidden; }
.photo_list .img{display: block;overflow:hidden; position:relative; width: 100%; transition: .5s ease-in-out;}
.photo_list .img img{width:100%; height: 250px; border-bottom: 1px solid #f4f4f4;}
.photo_list .date{display:block; padding:16px 10px; color:#666;}
.photo_list strong{display:block; font-size: 18px; margin-bottom:4px; width: 100%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color: #333;}
.photo_list .list_none{width:100% !important; text-align:center; padding:20px 0; border-bottom:1px solid #e1e1e1; border-radius: 0;}
.photo_list .adm_check{margin:10px auto;}
.photo_list li a:hover,.photo_list li a:focus{border: 1px solid #8252b5 ; transition: 0.3s ease-in-out;}
.photo_list li a:hover strong,.photo_list li a:focus strong{color: #8252b5;}


/* 뷰_본문 */
.bbs_con{line-height:1.5em;}
.bbs_con img{max-width:100%;}
.bbs_img{text-align:center;}
.bbs_img figcaption{text-align:center;color:#666;margin:10px 0 0 0;font-size:15px;}
.bbs_filedown{border-radius: 10px; margin: 20px 0; background: #f9f5ff;}
.bbs_filedown dl{display:table;width: 100%;padding: 20px;}
.bbs_filedown dt{display:block; margin: 0 0 14px 0; padding:0 0 14px 0; text-align:center; border-bottom: solid 1px #dae6ff; font-weight:500; color: #8252b5;}
.bbs_filedown dd{text-align:left;margin: 0 0 8px;}
.bbs_filedown dd:last-of-type{margin: 0;}
.bbs_filedown dd span{display: inline-block;align-self: center;padding-left: 24px;background: url('/images/member/bbs/ico_file.png') no-repeat left top 5px;line-height: 1.5em;}
.bbs_filedown dd span a{display: inline-block;line-height:1.5em;}
.bbs_filedown dd p span{background:none;padding:0;}
.bbs_filedown dd:hover span a{text-decoration: underline;}
@media all and (min-width:768px){
.bbs_vtop .col li{display:inline;margin:0 0 0 10px}
.bbs_vtop .tt_list{overflow:hidden}
.bbs_vtop .tt_list li{float:left;width:50%}
.bbs_vtop .tt_list li.line1{width:100%}
.bbs_vtop .tt_list li.line1 strong{width:20%}

.bbs_filedown dl{padding: 20px 20px 20px 0;}
.bbs_filedown dt{display:table-cell; width: 120px; border-right: solid 1px #dad6de; border-bottom:0; padding:0;}
.bbs_filedown dd{display:flex;flex-wrap: wrap;margin: 0 0 6px 3%;}
.bbs_filedown dd:last-of-type{margin: 0 0 0 3%;}
.bbs_filedown dd p{margin-left:12px;}
}

/*포토_뷰*/
.photo_view .img_view{margin:30px 0 10px 0;}
.photo_view .img_big img{max-width: 100%;}
.photo_view .img_list{overflow: hidden; height: 78px; position: relative; border-top: 1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;}
.photo_view .img_list button{width:40px; height:40px; font-size:0; overflow: hidden; position: absolute; top:17px; border:1px solid #e1e1e1; background: url('/images/member/bbs/bbs_step.png')no-repeat; border-radius: 10px;}
.photo_view .img_list button:hover, .photo_view .img_list button:focus{border-color: #8252b5;}
.photo_view .img_list .prev{background-position: center 6px; left:0; transform: rotate(-180deg);}
.photo_view .img_list .next{background-position: center 6px; right:0;}
.photo_view .img_list ul{overflow:hidden;width:65%;margin:0 auto;position: relative;}
.photo_view .img_list li{float:left;width:50%;text-align:center;margin: 15px 0 30px;}
.photo_view .img_list li img{border:3px solid #fff; border-radius: 20px;}
.photo_view .img_list li.on img{border: 1px solid #8252b5;}
.photo_view .img_list img{height:50px}
.photo_view .img_list li span{display: block;position: absolute;width: 100%;font-size: 13px;color: #666;padding: 10px 0 0 0;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;left: -999999px;} 

@media all and (min-width:768px){
.photo_list ul{display: flex; flex-wrap: wrap;}  
.photo_list li{width: 50%; padding: 0 1%;}
.photo_view .img_view .img_list{height: 130px;}
.photo_view .img_view .img_list button{top:40px}
.photo_view .img_view .img_list ul{width:85%}
.photo_view .img_view .img_list li{width:33.333%}
.photo_view .img_view .img_list img{height:100px}
.photo_view .img_big img{height:550px;}
}

@media all and (min-width:1023px){
.photo_list li{width: 33.33%;}
.photo_view .img_view{position:relative;text-align: center;}
.photo_view .img_view>div{margin:0 auto!important}
.photo_view .img_view .img_list li{width: 20%;}
}

@media all and (min-width:1200px){
.photo_list li{width: 25%;}    
.sub_site .photo_list li{width: 33.33%;}   
}


/* 쓰기 */
.bbs_write {width: 100%;margin: 20px 0; border-top: 1px solid #8252b5; border-left: 2px #fff solid; border-right: 2px #fff solid;}
.bbs_write th, .bbs_write td {padding: 12px 10px;border: 1px solid #e1e1e1; border-top: none; line-height: 1.5em; display: block; text-align: center;}
.bbs_write th {background: #f9f5ff; text-align: center; font-weight: 500;}
.bbs_write td * {vertical-align: middle;}
.bbs_write input{border:1px solid #dedede; height: 42px; padding: 0 7px; margin:2px 0;border-radius: 5px;}
.bbs_write input[type=checkbox]{width:16px; height:16px; border-radius:5px}
.bbs_write input[type=radio]{width:16px; height:16px;}
.bbs_write .bw_file{margin: 2px 0;}
.bbs_write .bw_file input{padding: 6px; height: 42px; width: 100%;}
.bbs_write .bw_file .memoarea{display: flex; justify-content: space-between;}
.bbs_write .bw_file .memoarea input{display: inline-block; width: calc(100% - 120px);}
.bbs_write .bw_file .memoarea em{display: inline-block; width: 110px; padding-top: 11px; padding-left: 21px; font-style: normal; background: url('/images/member/bbs/ico_memoarea.png') no-repeat top 16px left 4px; }
.bbs_write td .ggong ul li{margin: 9px 0; color: #666;}
.bbs_write td .ggong ul li img{display: block; height: 35px; padding-right: 10px;margin: 0 auto;}
.bbs_write textarea{border:1px solid #dedede;border-radius: 5px;}
.bbs_write select{height: 42px; border:1px solid #dedede;padding:7px 0;margin:2px 0;border-radius: 5px;}
.bbs_write td label{margin: auto;}
.bbs_write a span{display:inline-block;margin:0 5px}

@media all and (min-width:768px){
.bbs_write td{display: table-cell;text-align: left;}
.bbs_write th{display: table-cell;}
.bbs_write td .ggong ul li img {display: inline-block;margin: 0;}
}



/* 달력-기본형 */

.bbs_calender .calender{margin-bottom: 20px;}
.bbs_calender .calender .month{height: 40px; text-align:center; font-size: 26px; margin:0 0 26px 0; position:relative;}
.bbs_calender .calender .month em{font-style:normal;font-weight:600}
.bbs_calender .calender p strong{color: #8252b5;font-weight:600}
.bbs_calender .calender p button{position:absolute; width: 40px; height:40px; font-size: 0; overflow:hidden; border:1px solid #e1e1e1; background: #fff url("/images/member/common/step.png") no-repeat; border-radius: 5px; }
.bbs_calender .calender p .prev{background-position: center 6px;left:0; transform: rotate(-180deg);}
.bbs_calender .calender p .next{background-position: center 6px;right:0;}
.bbs_calender .calender p button:hover,.bbs_calender .calender p button:focus{border-color:#8252b5;}
.bbs_calender table{width:100%;background: #fff; border-right: 2px #fff solid; border-left: 2px #fff solid;}
.bbs_calender .calender th, .bbs_calender .calender td{border: 1px solid #e1e1e1; width:14%; text-align:center;}
.bbs_calender .sun{border-left:none}
.bbs_calender .calender th{border-top: 1px solid #8252b5; padding: 9px 0;font-weight: normal;}
.bbs_calender td{padding: 15px 0;position:relative;}
.bbs_calender td.sat a{color:#4f6bd0;}
.bbs_calender td.sun a{color:#c74b4b;}
.bbs_calender td.today{background: #f9f5ff !important;}
.bbs_calender td.have:before{content:""; display:block; position:absolute; bottom: 6px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #8252b5;}
.bbs_calender td.on a:after{content:""; display:block; position:absolute; top:0;bottom:0;right:0;left:0;z-index:0;border: 1px solid #8252b5;}
.bbs_calender .tab{overflow:hidden}
.bbs_calender .tab li{float:left;width:25%;text-align:center}
.bbs_calender .tab li a{display:block;border:1px solid #333;background:#fff;color:#333;padding:10px 0;margin:0 0 0 1px}
.bbs_calender .tab li.on a{background:#333;color:#fff}
.bbs_calender .info{height: 450px; border: 1px solid #8252b5; padding: 30px 20px; margin:25px 0 20px 0; border-radius: 10px;}
.bbs_calender .info h4{margin: 0 0 20px 0; font-size:20px; padding: 20px 0; background: #f9f5ff; border-radius: 10px; text-align: center;}
.bbs_calender .info li{position: relative; line-height:1.5em; padding:0 0 0 16px; margin-bottom: 8px;}
.bbs_calender .info li::before{content: '';position: absolute; top: 12px; left: 0; display: block; width: 8px; height: 4px; background: #bebebe; border-radius: 4px;}

@media all and (min-width:1023px){
.bbs_calender{overflow:hidden; border: none; margin-bottom:40px;}
.bbs_calender .calender{float:left; width:50%; margin: 0; padding: 0 30px 0 0;}
.bbs_calender .calender td{padding: 22px;}
.bbs_calender .calender th{padding: 14px;}
.bbs_calender .info{float:left;width: 50%; margin: 0;padding: 30px;}
.bbs_calender .info ul{height: 270px; overflow-y:scroll;}
}