@charset "utf-8";

/* common */
.flex_box{display: flex; justify-content: space-between;}
.flex_box.f_top{align-items: flex-start;}
.flex_box.f_center{align-items: center;}
.flex_box.f_bottom{align-items: baseline;}
.nice-select .current{font-size: 14px;}
.test_entry{margin: 10px 0;}
.test_entry button{cursor: pointer; background-color: #aaa; color: #000; padding: 10px 20px; border: 1px solid #ddd;}
.no_items p.info{font-size: 16px; text-align: center;}
.mo_none{display: block;}
.mo_block{display: none;}
.editor_area .editor_contents img{width: auto; height: auto;}

/* plterview */
.plterview_list .flex_box.f_top{width: 100%;}
.plterview_list .flex_box.f_center{width: 100%;}
.plterview_list .list_item .items .left_area .text_box{margin: 13px 20px !important;width: 100%;}
.plterview_list .list_item .items .left_area .text_box p{display: inline-block;}
.plterview_list .list_item .items .left_area .text_box div span{float: right;margin-left:15px;}
.plterview_date {font-size: 12px; color: #aaa;}
.plterview_header .view_comment {float: right;}
.plterview_header .view_comment span {margin-left: 15px;}

/* gallery */
.board_gallery{padding: 30px 0; color: #fff;}
.board_gallery .list_header_box{margin-bottom: 5px;}
.board_gallery .list_header_box .title_box h2{color: #e71959; font-size: 32px; font-weight: bold; margin-right: 20px;}
.board_gallery .list_header_box .title_box p{font-size: 16px;}

.board_gallery .list_item{border-top: 2px solid #444; padding: 25px 0;}
.board_gallery .list_item .items{border: 1px solid #666; padding: 15px;}
/* .board_gallery .list_item .items .left_area{border: 1px solid #666; padding: 15px;} */
.board_gallery .list_item .items .left_area .img_box{max-width: 360px; max-height: 200px;}
.board_gallery .list_item .items .left_area .img_box img{width: 100%;}
.board_gallery .list_item .items .left_area .text_box{margin: 10px 20px;}
.board_gallery .list_item .items .left_area .text_box h4{font-size: 24px; margin-bottom: 5px;}
.board_gallery .list_item .items .left_area .text_box h4 a{color: inherit;}
.board_gallery .list_item .items .left_area .text_box p{font-size: 14px; color: #aaa;}
.board_gallery .list_item .items .right_area .status_text{border: 1px solid rgb(95, 95, 95); color: rgb(95, 95, 95); padding: 10px 20px; font-size: 16px; border-radius: 5px;}
.board_gallery .list_item .items .right_area .status_text.on{border: 1px solid rgb(255, 78, 110); color: rgb(255, 78, 110);}

/* view-page */
.view_box{border-top: 2px solid #444; border-bottom: 2px solid #444; padding: 25px 0;}
.view_box .img_area{margin: 20px 0;}
.view_box .img_area img{width: 100%;}

.go_list_area{margin: 40px 0; text-align: center;}
.go_list_area .box a{background: #e71959; padding: 10px 20px;color: #fff;}

/* reply */
.reply_area{padding: 20px 0;}
/* .reply_form_flex{display: flex; justify-content: space-between;} */
.reply_area .submit_btn_box{display: flex; justify-content: space-between; align-items: center;}
.reply_area .submit_btn_box button{background-color: #e71959; color: #fff; font-size: 12px; padding: 10px 20px;}
.reply_area .reply_val{width: 100%; height: 100px; padding: 10px; font-size: 14px; margin-bottom: 5px;}
.reply_area .reply_val_input {width: 100%; padding: 10px; font-size: 14px; margin-bottom: 5px;}

.reply_list{padding: 10px 10px 0px 10px;}
.reply_list .reply_info{margin-bottom: 10px;}
.reply_list .reply_info > * {display: inline-block;}
.reply_list .reply_info .user_name{font-size: 14px; margin-right: 20px;}
.reply_list .reply_text{font-size: 14px; word-break: break-word; line-height: 18px;}
.reply_list .reply_btn_group{padding-top: 10px;}
.reply_list .reply_btn_group .btn{color: #fff; margin-right: 10px; border: 1px solid #e71959; background-color: #e71959;}
.reply_list .reply_btn_group .btn.reply_btn_delete{color: #333; margin-right: 10px; border: 1px solid #ddd; background-color: #ddd;}
.reply_list .reply_btn_group .btn.reply_btn_cancle{color: #fff; margin-right: 10px; border: 1px solid #555; background-color: #555;}
.reply_list .like_box{margin-left: 10px;}
.reply_list .like_box .like_btn{color: #fff;}
.reply_list .like_box .like_btn .fa-heart{color: #e71959;}
.reply_list .like_cnt{margin-left: 2px;}
.reply_list .btn-ti {padding: 0.25rem 0.5rem;font-size: 0.875rem;border-radius: 0.2rem;}

/*hover effect*/
@keyframes shake {
	25% {
		transform: rotate(calc(var(--angle) * -1));
	}

	50% {
		transform: rotate(var(--angle));
	}

	100% {
		transform: rotate(0deg);
	}
}

.paging_box_hover{
    text-align: center;
    margin-top: 20px;
}

.paging_box_hover .paging_btn{
    --width: 100%;
    --time: 0.7s;
    position: relative;
	display: inline-block;
	padding: 10px 20px;
    cursor: pointer;
	color: #333;
	background: #eee;
	overflow: hidden;
}

.paging_box_hover .paging_btn text{
	position: relative;
	z-index: 5;
	
	transition: color var(--time);
}

.paging_box_hover .paging_btn:hover text{
    color: #fff;
}

.paging_box_hover .paging_btn span{
    position: absolute;
	display: block;
	content: "";
	z-index: 0;
	width: 0;
	height: 0;
	
	border-radius: 100%;
	background: #e71959;
	
	transform: translate(-50%, -50%);
	transition: width var(--time), padding-top var(--time);
}

.paging_box_hover .paging_btn:hover span {
	width: calc(var(--width) * 2.25);
	padding-top: calc(var(--width) * 2.25);
}

.animated {
	--angle: 5deg;
	animation: shake 0.3s;
}

@media screen and (max-width: 768px) {
    .mo_none{display: none;}
    .mo_block{display: block;}

    .board_gallery .list_header_box .title_box.flex_box{display: block;}
    .board_gallery .list_header_box .title_box h2{font-size: 24px; font-weight: bold; width: 100%;}
    .board_gallery .list_header_box .title_box p{font-size: 14px;}

    .board_gallery .list_item .items > .flex_box{display: block;}
    .board_gallery .list_item .items .left_area .img_box{    max-width: 100%; max-height: 100%;}
    .board_gallery .list_item .items .left_area.flex_box{display: block;}
    .board_gallery .list_item .items .left_area .text_box{margin: 10px 0px;}
    .board_gallery .list_item .items .left_area .text_box h4{font-size: 18px; margin-bottom: 5px;}

    .board_gallery .list_item .items .right_area{display: inline-block;}

    .board_gallery .list_item .items .right_area .status_text{padding: 5px 10px; font-size: 14px; border-radius: 5px;}
    

}