.main-container .main-left .sect-wrap {padding: 24px 30px; border: 1px solid #E7E6E6; border-radius: 12px; margin-bottom: 24px;}

.main-container .main-left .sect-banner {margin-bottom: 24px;}
.main-container .main-left .sect-banner img {width: 100%;}
.main-container .main-left .sect-wrap .top-wrap {margin-bottom: 20px;}
.main-container .main-left .sect-wrap .top-wrap .tit-box {display: flex; align-items: center; padding-bottom: 24px;}
.main-container .main-left .sect-wrap .top-wrap .tit-box img { margin-right: 10px; }
.main-container .main-left .sect-wrap .top-wrap .tit-box h1 {font-size: 20px; font-weight: 700;}

.main-container .main-left .sect-wrap .top-wrap .cate-box {padding-bottom: 20px; }
.main-container .main-left .sect-wrap .top-wrap .cate-box ul {display: flex; align-items: center; gap: 0 4%; font-size: 18px; font-weight: 700;}
.main-container .main-left .sect-wrap .top-wrap .cate-box ul li {position: relative;}
.main-container .main-left .sect-wrap .top-wrap .cate-box ul li a {color: #9DA5B6;}
.main-container .main-left .sect-wrap .top-wrap .cate-box ul li a:hover,
.main-container .main-left .sect-wrap .top-wrap .cate-box ul li.active a {color: #000;}
.main-container .main-left .sect-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 .sect-wrap .top-wrap .sub-cate-box {padding: 10px 12px; margin-bottom: 20px; background-color: #F5F6FA; border-radius: 6px;}
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul {display: flex; align-items: center; gap: 0 1%; font-size: 16px; font-weight: 500;}
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul li {position: relative; padding: 6px 12px; border: 1px solid #E7E6E6; border-radius: 24px; background-color: #fff;}
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul li:hover,
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul li.active {background-color: #F35F4C; font-weight: 600;}
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul li:hover a,
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul li.active a {color: #fff;}
.main-container .main-left .sect-wrap .top-wrap .sub-cate-box ul li.new {padding-right: 15px;}
.main-container .main-left .sect-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 .sect-wrap .top-wrap .sub-cate-box ul li.active::before {background-color: #fff;}
.main-container .main-left .sect-wrap .top-wrap .btn-wrap {display: flex; gap: 0 5px;}
.main-container .main-left .sect-wrap .top-wrap .btn-wrap select {padding: 7px; border: 1px solid #c9c9c9; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer;}

.main-container .main-left .sect-wrap .user-wrap {margin-bottom: 20px;}
.main-container .main-left .sect-wrap .user-wrap ul {display: flex; gap: 0 4%; font-weight: 500;}
.main-container .main-left .sect-wrap .user-wrap ul li {text-align: center; width: 12.5%; min-width: 0;}
.main-container .main-left .sect-wrap .user-wrap ul li img {padding: 3px; margin-bottom: 5px; width: 60px; height: 60px; border: 3px solid #F35F4C; border-radius: 50%; box-sizing: border-box;}
.main-container .main-left .sect-wrap .user-wrap ul li p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.main-container .main-left .sect-wrap .content-wrap {padding-bottom: 30px;}
.main-container .main-left .sect-wrap .content-wrap ul {display: flex; gap: 30px 2%; flex-wrap: wrap;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box {position: relative; width: 23.5%;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .border {overflow: hidden; border: 1px solid #F2E9E9; border-radius: 12px; box-shadow: 0px 2px 8px 0px #F35F4C33;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .date-box {padding: 4px 12px; margin-bottom: 10px; border-radius: 20px; color: #FF452D; text-align: center; background-color: #FDE7E4; font-weight: 700;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .date-box img {width: 14px; height: 14px;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box {position: relative;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-img {height: 190px;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-img img {width: 100%; height: 100%; object-fit: cover;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-img video {display: none; width: 100%; height: 100%; background-color: #000;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-cate {position: absolute; left: 10px; top: 10px;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .mark {position: absolute; right: 10px; top: 10px;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .heart-box {position: absolute; bottom: 10px; right: 10px; padding: 2px 6px; border-radius: 6px; background: #00000099; color: #fff;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .heart-box img {display: inline-block;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .heart-box span {font-size: 14px; font-weight: 700;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .mb-profile-img {position: absolute; display: inline-block; bottom: -25px; left: 15px; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%;
}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box {padding: 10px 20px 20px; min-width: 0; background-color: #fff;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt1 {font-size: 13px; padding-left: 45px;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt1 a {color:#858894;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt2 {padding: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt3 {letter-spacing: -1px; color: #858894;}
.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt3 img {display: inline-block; filter: invert(57%) sepia(11%) saturate(332%) hue-rotate(191deg) brightness(93%) contrast(84%);}


.main-container .main-left .sect-wrap .page-wrap {display: flex; justify-content: center; margin-bottom: 20px;}
.main-container .main-left .sect-wrap .page-wrap ul {display: flex; align-items: center; justify-content: center; width: 100%;}
.main-container .main-left .sect-wrap .page-wrap ul li {padding: 5px 10px;}
.main-container .main-left .sect-wrap .page-wrap ul li a {display: flex; align-items: center; color: #858894; border: 1px solid #fff;}
.main-container .main-left .sect-wrap .page-wrap ul .txt {padding: 5px;}
.main-container .main-left .sect-wrap .page-wrap ul .txt a {color: #000;}
.main-container .main-left .sect-wrap .page-wrap ul li.active {border: 1px solid #D3D5D7; border-radius: 4px; box-sizing: border-box;}
.main-container .main-left .sect-wrap .page-wrap ul li.active a {color: #000;}
.main-container .main-left .sect-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 .sect-wrap .search-wrap {display: flex; justify-content: center; gap: 0 5px;}
.main-container .main-left .sect-wrap .search-wrap select {padding: 8px 12px; border: 1px solid #D3D5D7; border-radius: 4px;}
.main-container .main-left .sect-wrap .search-wrap .search-txt-box {position: relative;}
.main-container .main-left .sect-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 .sect-wrap .search-wrap .search-txt-box button {position: absolute; top: 8px; right: 10px; background-color: #fff; border: 0;}

.monthpicker-box {margin-left: auto;}

/* 반응형 */
@media all and (max-width: 1280px) {
	.main-container .main-left .sect-wrap {
		padding: 18px 15px;
		border: 0;
		background-color: #fff;
	}

	.main-container .main-left .sect-banner{
		margin-bottom: 0;
	}
}

@media all and (max-width: 910px) {
	.main-container .main-left .sect-wrap .content-wrap ul .list-box {width: 32%;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-img {height: 163px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .mb-profile-img {width: 35px; height: 35px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt1 {padding-left: 32px;}
}

@media all and (max-width: 570px) {
	.main-container .main-left .sect-wrap .top-wrap .tit-box{
		padding-bottom: 12px;
	}

	.main-container .main-left .sect-wrap .top-wrap .tit-box h1{
		font-size: 16px;
	}

	.main-container .main-left .sect-wrap .top-wrap .tit-box img {
		margin-right: 5px;
	}

	.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box .txt2{
		font-size: 15px;
	}
	
	.main-container .main-left .sect-wrap .top-wrap{
		margin-bottom: 15px;
	}

	.main-container .main-left .sect-wrap .content-wrap ul{
		gap: 20px 2%;
	}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box {width: 49%;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .date-box {font-size: 13px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .txt-box {padding: 10px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-img {height: 144px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .mb-profile-img {left: 5px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .content-cate {width: 30px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .mark {width: 30px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .heart-box img {width: 15px;}
	.main-container .main-left .sect-wrap .content-wrap ul .list-box .img-box .heart-box span {font-size: 12px;}
	
	/* .main-container .main-left .sect-wrap .page-wrap ul li:not(.txt) {display: none;} */

	.main-container .main-left .sect-wrap .search-wrap .search-txt-box input {width: 100%;}
}
