/* 실시간인기 */
.main-container .main-left .board-best {position: relative; padding: 24px 30px 14px; margin-bottom: 30px; border: 1px solid #E7E6E6; border-radius: 12px;}
.main-container .main-left .board-best .tob-box {display: flex; align-items: center; gap: 0 8px; padding-bottom: 20px;}
.main-container .main-left .board-best .tob-box h2 {font-family: inherit; font-size: 20px; font-weight: 700;}


.main-container .main-left .board-best .content-wrap {display: flex; gap: 0 5%;}
.main-container .main-left .board-best .content-wrap .content-box {width: 50%;}
.main-container .main-left .board-best .content-wrap .content-box li {display: flex; align-items: center; width: 100%; padding-bottom: 10px; white-space: nowrap;}
.main-container .main-left .board-best .content-wrap .content-box li .num {width: 30px; font-size: 16px; font-weight: 600; padding-right: 5px;}
.main-container .main-left .board-best .content-wrap .content-box li .board-tag {padding: 2px 6px; margin-right: 5px; width: 50px; text-align: center; border: 1px solid #D3D5D7; border-radius: 6px; font-weight: 700; background-color: #F5F6FA;}
.main-container .main-left .board-best .content-wrap .content-box:first-child li:nth-of-type(-n+3) .num {color: #F03A23;}
.main-container .main-left .board-best .content-wrap .content-box li .tit {margin-right: 5px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600;}
.main-container .main-left .board-best .content-wrap .content-box li .txt {display: flex; align-items: center; gap: 0 5px; margin-left: auto; font-size: 13px; color: #858894;}
.main-container .main-left .board-best .content-wrap .content-box li .txt img {width: 16px; filter: invert(38%) sepia(0%) saturate(1997%) hue-rotate(186deg) brightness(89%) contrast(80%);}

/* 목록 */
.main-container .main-left .board-list-wrap {padding: 24px 30px; border: 1px solid #E7E6E6; border-radius: 12px; margin-bottom: 24px;}
.main-container .main-left .board-list-wrap .top-wrap {margin-bottom: 20px;}
.main-container .main-left .board-list-wrap .top-wrap .tit-box {display: flex; align-items: center; padding-bottom: 24px;}
.main-container .main-left .board-list-wrap .top-wrap .tit-box h1 {font-size: 20px; font-weight: 700;}

.main-container .main-left .board-list-wrap .top-wrap .cate-box {margin-bottom: 20px;}
.main-container .main-left .board-list-wrap .top-wrap .cate-box ul {font-size: 18px; font-weight: 700;}
.main-container .main-left .board-list-wrap .top-wrap .cate-box ul li {position: relative; width: auto;}
.main-container .main-left .board-list-wrap .top-wrap .cate-box ul li a {color: #9DA5B6;}
.main-container .main-left .board-list-wrap .top-wrap .cate-box ul li a:hover,
.main-container .main-left .board-list-wrap .top-wrap .cate-box ul li.active a {color: #000;}
.main-container .main-left .board-list-wrap .top-wrap .cate-box ul li.new::before {content: ""; position: absolute; top: 0; right: -10px; width: 6px; height: 6px; border-radius: 50%; background-color: #F35F4C;}

.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box {padding: 10px 12px; margin-bottom: 20px; background-color: #F5F6FA; border-radius: 6px;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul {font-size: 16px; font-weight: 500;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li {position: relative; padding: 6px 12px; width: auto; border: 1px solid #E7E6E6; border-radius: 24px; background-color: #fff;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li:hover,
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li.active {background-color: #F35F4C; font-weight: 600;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li:hover a,
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li.active a {color: #fff;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li.new {padding-right: 15px;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li.new::before {content: ""; position: absolute; top: 5px; right: 10px; width: 4px; height: 4px; border-radius: 50%; background-color: #F35F4C;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li.new:hover::before {background-color: #fff;}
.main-container .main-left .board-list-wrap .top-wrap .sub-cate-box ul li.active::before {background-color: #fff;}

.main-container .main-left .board-list-wrap .content-wrap {border-radius: 2px; padding-bottom: 30px;}

.main-container .main-left .board-list-wrap .content-wrap .btn-wrap {position: relative; display: flex; justify-content: space-between; padding-bottom: 20px;}
.main-container .main-left .board-list-wrap .content-wrap .btn-wrap select { padding: 7px; border: 1px solid #c9c9c9; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; } 

.main-container .main-left .board-list-wrap .content-wrap .w-sunj {width: 100%; min-width: 0; text-align: center;}
.main-container .main-left .board-list-wrap .content-wrap .w-writer {text-align: center; flex: 1 0 105px;}
.main-container .main-left .board-list-wrap .content-wrap .w-date {text-align: center; flex: 1 0 85px;}

.main-container .main-left .board-list-wrap .content-wrap .list-area {width: 100%; border-top: 2px solid #1F2124;}
.main-container .main-left .board-list-wrap .content-wrap .list-area li {box-sizing: border-box;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .head-box {display: flex; padding: 12px 30px; width: 100%; border-bottom: 1px solid #E7E6E6; font-size: 15px; font-weight: 600; text-align: center;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box {position: relative; display: flex; align-items: center; padding: 20px 30px; border-bottom: 1px solid #E7E6E6;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box.ad {background-color: #FEF2F1;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box.ad .content-box .subj-box .cate {padding: 2px 6px; border: 0; border-radius: 6px; font-weight: 700; background-color: #FBCFC9; color: #F03A23;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box {width: 100%; padding: 0 10px; min-width: 0; box-sizing: border-box;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box {display: flex; align-items: center; gap: 0 1%; white-space: nowrap;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box .cate {padding: 2px 6px; border: 1px solid #D3D5D7; border-radius: 6px; background-color: #F5F6FA; font-weight: 700; color: #5F5F5F;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box .subj-area {display: inline-flex; width: 100%; min-width: 0; white-space: nowrap;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box .subj-area .subj { 
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    margin-right: 5px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
} 
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box .subj-area .subj .cate-tag-wrap{
    font-size: 14px;
    display: inline-block;
    margin-right: 3px;
}

.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box .comment-cnt {font-size: 16px; font-weight: 600; color: #F03A23;}

.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box {display: flex; align-items: center; color: #5F5F5F;}
/* .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box .nick .mb-profile-img {width: 20px; height: 20px; border-radius: 40px;} */
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box .info {display: flex; align-items: center; gap: 0 2px;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box .info .icon-hit {filter: invert(33%) sepia(90%) saturate(0%) hue-rotate(206deg) brightness(89%) contrast(88%);}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .rate {display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-basis: 50px; width: 70px; height: 26px; padding: 2px 6px; border-radius: 6px; font-weight: 500; color: #fff; background-color: #F35F4C;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .write-box {flex: 1 0 105px; text-align: center;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .date-box {flex: 1 0 85px; text-align: center;}

.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .right-comment-box {flex-direction: column; justify-content: center; align-items: center; margin-left: auto; min-width: 40px; height: 60px; border-radius: 8px; background-color: #F5F6FA;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .right-comment-box .cnt {padding-bottom: 8px; font-weight: 600; color: #5F5F5F;}
.main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .right-comment-box .txt  {font-size: 11px; color: #858894;}

.main-container .main-left .board-list-wrap .page-wrap {display: flex; justify-content: center; margin-bottom: 20px;}
.main-container .main-left .board-list-wrap .page-wrap ul {display: flex; align-items: center; justify-content: center; width: 100%;}
.main-container .main-left .board-list-wrap .page-wrap ul li {padding: 5px 10px;}
.main-container .main-left .board-list-wrap .page-wrap ul li a {display: flex; align-items: center; color: #858894; border: 1px solid #fff;}
.main-container .main-left .board-list-wrap .page-wrap ul .txt {padding: 5px;}
.main-container .main-left .board-list-wrap .page-wrap ul .txt a {color: #000;}
.main-container .main-left .board-list-wrap .page-wrap ul li.active {border: 1px solid #D3D5D7; border-radius: 4px; box-sizing: border-box;}
.main-container .main-left .board-list-wrap .page-wrap ul li.active a {color: #000;}
.main-container .main-left .board-list-wrap .page-wrap ul .txt a img {filter: invert(0%) sepia(65%) saturate(18%) hue-rotate(308deg) brightness(98%) contrast(104%);}
.main-container .main-left .board-list-wrap .page-wrap ul .page-prev a img {transform: rotate(180deg);}

.main-container .main-left .board-list-wrap .search-wrap {display: flex; justify-content: center; gap: 0 5px;}
.main-container .main-left .board-list-wrap .search-wrap select {padding: 8px 12px; border: 1px solid #D3D5D7; border-radius: 4px;}
.main-container .main-left .board-list-wrap .search-wrap .search-txt-box {position: relative;}
.main-container .main-left .board-list-wrap .search-wrap .search-txt-box input {padding: 8px 12px; width: 280px; border: 1px solid #D3D5D7; border-radius: 4px; box-sizing: border-box;}
.main-container .main-left .board-list-wrap .search-wrap .search-txt-box button {position: absolute; top: 8px; right: 10px; background-color: #fff; border: 0;}


/* 본문 */
.cu-view-wrap .sv_member, 
.cu-view-wrap .sv_guest, 
.cu-view-wrap .member, 
.cu-view-wrap .guest {font-weight: 700;}
.cu-view-wrap .ip-txt {padding-left: 5px; color: #5F5F5F}


.cu-view-wrap {padding: 24px 30px; border: 1px solid #E7E6E6; border-radius: 12px;}
.cu-view-wrap .cu-board-name {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; white-space: nowrap; }
.cu-view-wrap .cu-board-name .name-txt {display: flex; color: #F35F4C;}
.cu-view-wrap .cu-board-name .board-top-btn ul {display: flex; align-items: center;}
.cu-view-wrap .cu-board-name img {filter: invert(60%) sepia(79%) saturate(4569%) hue-rotate(333deg) brightness(102%) contrast(91%);}

.cu-view-wrap .view-title {margin-bottom: 16px; width: 100%; font-family: 'Pretendard' !important;}
.cu-view-wrap .view-title .cu-view-cate {padding: 2px 10px; margin-right: 5px; border: 1px solid #D3D5D7; border-radius: 6px; background-color: #F5F6FA; font-size: 20px; font-weight: 600;}
.cu-view-wrap .view-title .cu-view-subj {font-size: 26px; font-weight: 500; line-height: 1.4; word-break: break-all;}


.cu-view-wrap .cu-view-user {display: flex; align-items: center; border-bottom: 1px solid #E7E6E6; padding-bottom: 17px;}
.cu-view-wrap .cu-view-user .profile-img {margin-right: 10px;}
.cu-view-wrap .cu-view-user .profile-img img {width: 50px; height: 50px; border-radius: 50%;}
.cu-view-wrap .cu-view-user .user-info {width: 100%;}
.cu-view-wrap .cu-view-user .user-info .txt1 .info-heart {display: inline-flex; align-items: center; gap: 0 2px; padding: 3px 6px; margin: 0 0 2px 5px; border-radius: 4px; background-color: #FEF2F1; color:#F35F4C; font-size: 11px; font-weight: 600;}
.cu-view-wrap .cu-view-user .user-info .txt1 .info-heart img {width: 11px; height: 11px;}
.cu-view-wrap .cu-view-user .user-info .txt2 {display: flex; align-items: center; justify-content: space-between; margin-right: auto;}
.cu-view-wrap .cu-view-user .user-info .txt2 .date {font-size: 12px; color:#5F5F5F;}
.cu-view-wrap .cu-view-user .user-info .txt2 .ect {font-size: 13px; letter-spacing: -0.5px;}
.cu-view-wrap .cu-view-user .user-info .txt2 .ect img {width: 16px; height: 16px;}

.cu-view-wrap .act-wrap {display: flex; align-items: center; width: 100%; justify-content: center; gap: 0 10px; margin-bottom: 20px;}
.cu-view-wrap .act-wrap .heart-box {display: flex; align-items: center; gap: 0 5px; padding: 20px 40px; border: 1px solid #D3D5D7; border-radius: 8px; font-size: 16px; font-weight: 600;}
.cu-view-wrap .act-wrap .share-box {display: flex; align-items: center; gap: 0 5px; padding: 20px 40px; border: 1px solid #D3D5D7; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer;}
.cu-view-wrap .act-wrap img { width: 20px; height: 20px; }

/* 댓글 */
.cu-cmt-btn {display: flex; align-items: center; gap: 0 3px; margin-bottom: 20px; border: 0; background-color: #fff;}
.cu-cmt-btn .cnt {font-size: 13px; font-weight: 600;}

.cu-cmt-wrap {position: relative;}
.cu-cmt-wrap article {display: flex; min-width: 0;}
.cu-cmt-wrap .pf_img {margin-right: 10px;}
.cu-cmt-wrap .pf_img img {width: 36px; height: 36px; border-radius: 30px;}
.cu-cmt-wrap .cm_wrap {width: 100%;}
.cu-cmt-wrap .cm_wrap .info-heart {display: inline-flex; align-items: center; gap: 0 2px; padding: 3px 6px; margin-left: 5px; border-radius: 4px; background-color: #FEF2F1; color: #F35F4C; font-size: 11px; font-weight: 600;}
.cu-cmt-wrap .cm_wrap .info-heart img {width: 11px; height: 11px;}
.cu-cmt-wrap .cm_wrap .cmt_contents {padding: 10px 0;}
.cu-cmt-submit {padding: 8px; width: 110px; height: 45px; border: 0; border-radius: 8px; color: #fff; background-color: #F35F4C;}


/*  글쓰기 */
/** 원본에 넣은 css **/
.cu-radio {display: flex !important; gap: 0 5px;}
.cu-write-select select {padding: 8px 20px; border: 1px solid #D3D5D7; border-radius: 4px;}
.cu-rate-wrap .tit {font-weight: 600; margin-right: 5px;}
#cu_rate_range {margin-right: 5px;}
.cu-btn-wrap {display: flex; align-items: center; justify-content: end; gap: 0 10px; width: 100%;}
.cu-btn-wrap .cancel-btn {padding: 8px 32px; border-radius: 8px; background-color: #D3D5D7;}
.cu-btn-wrap .confirm-btn {padding: 8px 32px; border: 0; border-radius: 8px; background-color: #F35F4C; color: #fff }

/** 원본수정 **/
#bo_w .write_div {margin: 20px 0;}
#bo_w .bo_v_option li {margin: 0 10px 0 0;}
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {top: 0px;}
#bo_vc .cmt_contents {padding: 5px 0;}
#bo_vc_empty {padding: 40px 0 !important;}
.bo_vc_w textarea {padding: 10px; border-radius: 8px;}

/* 반응형 */
.main-container .main-left .resp.board-best {padding: 24px 0 0 0; border: 0; border-radius: 0; border-top: 2px solid #E7E6E6;}
.main-container .main-left .resp.board-best .content-wrap .content-box {width: 100%;}
.main-container .main-left .resp.board-best .content-wrap .content-box li {margin-bottom: 10px;}

/* 하트 애니메이션 */
.heart-box img.animate {
    animation: heart-spread-out 0.6s forwards;
}

@keyframes heart-spread-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@media all and (max-width: 1280px) {
    .main-container .main-left .board-list-wrap {
        padding: 0 0 24px 0;
        border: 0;
        background-color: white;
        margin-bottom: 0;
    }
    
    .main-container .main-left .board-list-wrap > div{
        padding: 18px 15px;
    }

    .main-container .main-left .board-list-wrap .top-wrap,
    .main-container .main-left .board-list-wrap .content-wrap .btn-wrap{
        padding: 12px;
    }
    
    .main-container .main-left .board-list-wrap .content-wrap .btn-wrap{
        border-bottom: 1px solid #E7E6E6;
    }

    .main-container .main-left .board-list-wrap .top-wrap{
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 18px;
    }

    .main-container .main-left .board-list-wrap .content-wrap{
        padding-bottom: 10px;
    }

    .main-container .main-left .board-list-wrap .content-wrap .list-area { border: 0 !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .head-box { padding: 12px 0 !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box { padding: 12px !important; } 

    /* 본문 */
    .cu-view-wrap { border: 0; padding: 24px 0; } 

    .cu-view-wrap .view-title .cu-view-subj{
        font-size: 22px;
    }

    #bo_v{
        margin-bottom: 0;
        padding-top: 10px;
    }

	#bo_vc{
		margin-top: 20px;
	}

	#bo_vc .bo_vl_opt{
		top: -7px;
	}
}

@media all and (max-width: 570px) { 

    .cu-view-wrap .view-title .cu-view-cate{
        font-size: 14px;
    }
    
    .cu-view-wrap .view-title .cu-view-subj{
        font-size: 18px;
    }

    .cu-view-wrap .act-wrap .heart-box{
        font-size: 14px;
    }

    .cu-view-wrap .act-wrap .share-box{
        font-size: 14px;
    }

	.main-container .main-left .board-list-wrap .top-wrap .tit-box{
		padding-bottom: 0;
	}

    .main-container .main-left .board-list-wrap .top-wrap .tit-box h1{
        font-size: 18px;
        font-weight: normal;
        margin-top: 2px;
    }

    .main-container .main-left .board-list-wrap .top-wrap .cate-box{
        margin: 12px 0;
        margin-bottom: 0;
    }

    .main-container .main-left .board-list-wrap .content-wrap{
        padding-bottom: 0;
    }
    
    /* .main-container .main-left .board-list-wrap .content-wrap ul .list-box .thumb-img { min-width: 90px; } */
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box { flex-direction: column; align-items: start !important; gap: 8px 0 !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box { flex-wrap: wrap !important; } 


    /* .main-container .main-left .board-list-wrap .page-wrap ul li:not(.txt) { display: none; } */
    /* 모바일 게시판 댓글 부분 */
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box { white-space: normal !important; margin-bottom: 5px !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .subj-box .cate-box { font-size: 12px !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box { font-size: 12px !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box .info img { width: 15px !important; } 
    .main-container .main-left .board-list-wrap .content-wrap .list-area .list-box .content-box .info-box .nick a { font-size: 12px !important; } 

    .main-container .main-left .board-list-wrap .search-wrap .search-txt-box input { width: 100%; } 

    .main-container .main-left .board-list-wrap .page-wrap{
        margin-bottom: 0;
    }
}