@charset "utf-8";

/*section{
	float: left;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}*/
section{
    width: 100%;
    float: left;
    box-sizing: border-box;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}
/*section.main_slide{
	padding: 25px 360px 0 360px;
}*/
section.main_bottom{
	/*padding: 35px 360px 35px 360px;*/
	padding: 35px 0;
    margin: 0 auto;
}
section.main{
	padding: 35px 360px 35px 360px;
}
.slide_wrap{
	float: left;
	box-sizing: border-box;
	position: relative;
	width: 100%;
}
	.slide_wrap .banner_slide > .img{
		float: left;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}
	.slide_wrap .banner_slide > .img  *{
		float: left;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background-size: cover;
/* 		max-width: 370px;
		max-height: 124px; */
	}
	.slide_btn .prev_btn,
	.slide_btn .next_btn, 
	.slide_btn .pause_btn, 
	.slide_btn .play_btn {
    	height: 11px;
    	width: 11px;
    	z-index: 5;
		cursor: pointer;
		border: none;
		position: absolute;
    	bottom: 0px;
    }
	
	.slide_btn .prev_btn{
		background: url('${pageContext.request.contextPath}/images/ai_btn_prev.svg') center no-repeat;
		left: 28%;
		background-size: cover;
	}
	
	.slide_btn .next_btn{
		background: url('${pageContext.request.contextPath}/images/ai_btn_next.svg') center no-repeat;
		right: 28%;
		background-size: cover;
	}
	.slide_btn  span{
		float: left;
		box-sizing: border-box;
		width: 11px;
		height: 11px;
		background: #777777;
		border-radius: 100px;
		z-index: 1;
		cursor: pointer;
	}
	.slide_btn .pause_btn{
		background: url('${pageContext.request.contextPath}/images/btn_stop.svg') center no-repeat;
		background-size: cover;
		right: 34.3%;
	}
	.slide_btn .play_btn{
		background: url('${pageContext.request.contextPath}/images/btn_play.svg') center no-repeat;
		background-size: cover;
		right: 34.3%;
	}
	/*
	.slide_wrap span:nth-of-type(1){
		left: calc(46% - 4px);
	}
	.slide_wrap span:nth-of-type(2){
		left: calc(50% - 4px);
	}
	.slide_wrap span:nth-of-type(3){
		left: calc(54% - 4px);
	}
	.slide_wrap span:nth-of-type(n+1){
		left: calc(54% - 4px);
	}*/
	.slide_wrap span.on{
		width: 35px;
		border-radius: 50px;
		background: #777777;
	}
	.slide_btn .dot_wrap{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    gap: 5px;
        position: absolute;
	    bottom: 0px;
	}
	.slide_wrap .banner_slide > .txt{
		float: left;
		box-sizing: border-box;
		display: flex;
	    flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 20px 80px;
		color: var(--sub-color-1);
	}
		.slide_wrap .banner_slide > .txt > .team{
			float: left;
			box-sizing: border-box;
			width: 100px;
			height: 30px;
			text-align: center;
			font: 0.875rem/30px 'NotoSemiBold';
			background: rgba(255, 255, 255, .65);
			color: rgba(52, 52, 52, .7);
		}
		.slide_wrap .banner_slide > .txt > span:nth-of-type(2){
			float: left;
			box-sizing: border-box;
			margin: 10px 0;
			font: 1.75rem 'NotoBold';
		}
		.slide_wrap .banner_slide > .txt > span:nth-of-type(3){
			margin-bottom: 15px;
		}
		.slide_wrap .banner_slide > .txt > span:nth-of-type(3), 
		.slide_wrap .banner_slide > .txt > p{
			font: 1rem 'Noto';
			width: 100%;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient:vertical;
		}
.slide_btn{
	float: left;
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	bottom: 4%;
}
/*main_content*/
.cont_wrap{
	float: left;
	box-sizing: border-box;
	width: 100%;
	min-width: 1200px;
}
	.cont_wrap > .left{
		float: left;
		box-sizing: border-box;
		width: 790px;
		height: 100%;
		margin-right: 40px;
	}
	.cont_wrap > .right{
		float: right;
		box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	    row-gap: 20px;
		width: 370px;
		height: 100%;
	}
		.cont_wrap > .left > .full_view, 
		.cont_wrap > .right > .notice_wrap > .full_view, 
		.cont_wrap > .right > .board_wrap > .full_view,
		.main > .top > .top-center > .board > .full_view,
		.main > .top > .bottom-left > .full_view,
		.user_cont_wrap > .left > .task_wrap > .full_view {
			float: right;
			box-sizing: border-box;
			min-width: 40px;
			height: 40px;
			margin-bottom: 15px;
			line-height: 40px;
			color: var(--font-color-3);
			text-align: right;
			cursor: pointer;
		}
		.cont_wrap > .right > .notice_wrap > .full_view, 
		.cont_wrap > .right > .board_wrap > .full_view,
		.main > .top > .top-center > .board > .full_view{
			width: 20%;
			cursor: pinter;
		}
		.cont_wrap > .left > h1,
		.user_cont_wrap > .left > .task_wrap > h3{
			width: calc(100% - 106px);
			margin-bottom: 0;
		}
		.join_full_view{
			
		}
		.cont_wrap > .right > .notice_wrap > h1,
		.cont_wrap > .right > .board_wrap > h1,
		.main > .top > .top-center > .board > h3{
			width: 80%;
		}
		.task_wrap{
			float: left;
			box-sizing: border-box;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: wrap;
		    gap: 20px 16px;
			width: 100%;
		}
		.yard_task_wrap{
		    overflow: hidden;
    		max-height: 458px;
		}
			.task_wrap > div > .task{
				float: left;
				box-sizing: border-box;
				position: relative;
				width:250px;
				height: 383px;
				border: 1px solid #E0E0E0;
				border-radius: 3px;
				cursor: pointer;
			}
			.task_wrap #thumbnailContent .ai_main_img{
			    float: left;
			    box-sizing: border-box;
			    width: 100%;
			    height: 165px;
			    position: relative;
			    overflow: hidden;
			    border-radius: 2px 2px 0 0;
			}
			.task_wrap #thumbnailContent .ai_main_img > img{
			    float: left;
			    box-sizing: border-box;
			    width: 102%;
			    height: 100%;
				background-size: cover;
				position: absolute;
				top: -2px;
			}
			.task_wrap #thumbnailContent .ai_main_list{
			    float: left;
			    box-sizing: border-box;
			    width: 100%;
			    height: calc(100% - 165px);
			    padding: 16px;
			}
			.task_wrap #thumbnailContent .ai_main_list:hover{
				background: #fdfefe;
				transition: 0.35s linear;
			}
			.task_wrap #thumbnailContent .ai_main_list:hover .tit_wrap{
				color: var(--main-color);
				transition: 0.35s linear;
			}
			.task_wrap > div > .task .current_value{
			    float: left;
			    box-sizing: border-box;
			    width: 100%;
			    height: 22px;
			    font: 0.875rem / 22px 'Noto';
			    border-radius: 0 4px 0 4px;
			    color: #9095A0;
			}
			
				.task_wrap > div > .task .state{
					float: left;
					box-sizing: border-box;
					height: 30px;
					padding: 0 12px;
					border-radius: 4px;
					text-align: center;
					font: 0.875rem/30px 'NotoSemiBold';
					background: #EDF3FA;
					color: #317DD6;
				}
				.task_wrap #thumbnailContent .ing .state{
					background: #EDEEFA;
					color: #435AD9;
				}
				.task_wrap #thumbnailContent .prer .state{
					background: #EDFAF6;
					color: #32BE94;
				}
				.task_wrap #thumbnailContent .academcon .state{
					background: #F2EDFA;
					color: #976CDD;
				}
				.task_wrap #thumbnailContent .trirun .state{
					background: #F8F8F8;
					color: #999999;
				}
				.task_wrap #thumbnailContent .task .period, 
				.task_wrap #thumbnailContent .task .deadline{
					float: left;
					box-sizing: border-box;
					width: 100%;
					margin: 15px 0 20px 0;
					font: 1rem/30px 'Noto';
				}
				.task_wrap #thumbnailContent .task .deadline{
				    font: 0.902rem / 30px 'NotoSemiBold';
				    word-break: break-all;
				    overflow: hidden;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				}
				.task_wrap #thumbnailContent .task .tit_wrap{
					float: left;
					box-sizing: border-box;
					display: flex;
				    align-content: space-between;
					width: 100%;
					height: 54px;
					margin-top : 10px;
					font: 1.125rem 'NotoBold';
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient:vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				    word-break: keep-all;
    				letter-spacing: -0.77px;
				}
				.task_wrap #thumbnailContent .task .tit_wrap.tit_nodate{
					margin-bottom: 65px;
				}
				.task_wrap #thumbnailContent .host_kr{
				    float: left;
				    box-sizing: border-box;
				    height: 30px;
				    padding: 0 12px;
				    margin-left: 8px;
				    border-radius: 4px;
				    text-align: center;
				    font: 0.875rem / 30px 'NotoSemiBold';
				    background: #F2FAFC;
				    color: #1F799C;
				}
			.task_wrap #thumbnailContent .full_view, .task_wrap .full_view{
			    float: left;
			    box-sizing: border-box;
			    width: 100%;
			    height: 50px;
			    margin-top: 8px;
			    font: 1rem / 49px 'Noto';
			    color: #666;
			    border-radius: 4px;
			    border: 1px solid #E0E0E0;
			    background: #F9F9F9;
			    text-align: center;
			    cursor: pointer;
			}
			.task_wrap #thumbnailContent .full_view:hover, .task_wrap .full_view:hover{
				background: #235ca0;
				transition: all 0.3s;
				color: var(--sub-color-1);
			}
			.task_wrap > .yard_full_view{
				margin: 0 !important;
			    text-align: center !important;
			    width: 90px;
			}
			.task_wrap > .yard_full_view:hover{
				color: #fff !important;
			}
				/*
					.tit_wrap > span:first-child{
						float: left;
						box-sizing: border-box;
						width: 80%;
						height: 100%;
						font: 1.375rem/41px 'NotoSemiBold';
					}	
					.task_wrap > .task > .tit_wrap > span:last-child{
						float: left;
						box-sizing: border-box;
						width: 20%;
						height: 100%;
						text-align: center;
					}
					.task_wrap > .ing > .tit_wrap > span:last-child{
						float: left;
						box-sizing: border-box;
						width: 20%;
						height: 100%;
						text-align: center;
					}*/
				.task_wrap > div > .task > .txt{
					float: left;
					box-sizing: border-box;
					width: 100%;
					height: calc(100% - 140px);
					margin: 7px 0 8px 0;
					font: 0.875rem 'Noto';
					color: var(--font-color-3);
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient:vertical;
				}
				.task_wrap > div > .task > .icon_kr{
					float: left;
					box-sizing: border-box;
					width: 100%;
					height: 14px;
					background: url('${pageContext.request.contextPath}/images/icon_kor_language.png') left no-repeat;
					margin: 60px 0 0 0;
				}
/*right*/
.cont_wrap > .right > div{
	float: left;
	box-sizing: border-box;
	width: 100%;
/*	height: calc((100% - 40px)/ 3);*/
}
.cont_wrap > .right > .ranking_wrap{
	height: 249px;
}
/*.cont_wrap > .right > .notice_wrap,
.cont_wrap > .right > .board_wrap{
	height: calc((100% - 320px)/ 2);
}*/
.cont_wrap > .right > div > .cont{
	float: left;
	box-sizing: border-box;
	width: 100%;
	height: 189px;
}
	.cont_wrap > .right > div > .cont > .rank_tit{
		float: left;
		box-sizing: border-box;
		width: 100%;
		height: 20px;
		margin-bottom: 25px;
	    word-break: break-all;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
		.cont > .rank_tit > .tit{
			float: left;
			box-sizing: border-box;
			width: calc(100% - 60px);
			height: 100%;
			margin: 0 0;
			font: 1rem/20px 'Noto';
			text-align: left;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		}
		.cont > .rank_tit > .btn_prev{
			float: left;
			box-sizing: border-box;
			width: 20px;
			height: 20px;
			background: url(${pageContext.request.contextPath}/images/btn_prev.png) center no-repeat;
			cursor: pointer;
		}
		.cont > .rank_tit > .btn_next{
			float: right;
			box-sizing: border-box;
			width: 20px;
			height: 20px;
			background: url(${pageContext.request.contextPath}/images/btn_next.png) center no-repeat;
			cursor: pointer;
		}
		.cont > .rank_cont{
			float: left;
			box-sizing: border-box;
			display: flex;
		    flex-direction: column;
		    row-gap: 10px;
			width: 100%;
		}
			.cont > .rank_cont > .rank{
				float: left;
				box-sizing: border-box;
				display: flex;
			    align-items: center;
		        justify-content: flex-start;
			    column-gap: 10px;
				width: 100%;
				padding: 0 15px;
				height: 44px;
				line-height: 44px;
			}
			.cont > .rank_cont > .rank:nth-of-type(1){
				background: #FFF9E8;
			}
			.cont > .rank_cont > .rank:nth-of-type(2){
				background: #F7F7F7;
			}
			.cont > .rank_cont > .rank:nth-of-type(3){
				background: #FFF8F3;
			}
				.cont > .rank_cont > .rank > .team_icon{
					float: left;
					box-sizing: border-box;
					width: 27px;
					height: 25px;
				}
				.cont > .rank_cont > .rank:nth-of-type(1) > .team_icon{
					background: url('${pageContext.request.contextPath}/images/icon_gold.png') center no-repeat;
				}
				.cont > .rank_cont > .rank:nth-of-type(2) > .team_icon{
					background: url('${pageContext.request.contextPath}/images/icon_sliver.png') center no-repeat;
				}
				.cont > .rank_cont > .rank:nth-of-type(3) > .team_icon{
					background: url('${pageContext.request.contextPath}/images/icon_bronze.png') center no-repeat;
				}
				.cont > .rank_cont > .rank > .team_rank{
					font-family: 'NotoBold';
				}
				.rank > .team_name{
					width: calc(65% - 57px);
					height:100%;
					float: left;
					box-sizing: border-box;
					padding-left: 5px;
					overflow: hidden;
				    white-space: nowrap;
    				text-overflow: ellipsis;
				}
				.rank > .team_rank{
					width: 35%;
					height:100%;
					float: left;
					box-sizing: border-box;
					text-align: right;					
					white-space: nowrap;
    				text-overflow: ellipsis;
					
				}
		.ranking_wrap > .swiper{
			float: left;
			box-sizing: border-box;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: center;
		    gap: 10px;
			width: 100%;
/* 			height: 10px; */
			margin-top: 10px;
		}
			.ranking_wrap > .cont >  .swiper > span{
				float: left;
				box-sizing: border-box;
				width: 10px;
				height: 10px;
				border-radius: 100px;
				border: 1px solid var(--border-color);
				cursor: pointer;
			}
			.ranking_wrap > .swiper > span.on{
				background: var(--border-color);
			}
table{
	width: 100%;
	table-layout: fixed;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}
	table > tbody > tr{
		width: 100%;
		height: 40px;
		cursor: pointer;
	}
	table > tbody >  tr > th{
		width: 70%;
		overflow: hidden;
		white-space: nowrap;
		word-break: break-all;
		text-overflow: ellipsis;
		text-align: left;
		font: 1rem 'Noto';
	}
	table > tbody >  tr > td{
		width: 30%;
		text-align: right;
		font: 0.875rem 'Noto';
		vertical-align: middle;
	}
	
	
	
		
/* 유저 대시보드 */
.user_cont_wrap {
    float: left;
    box-sizing: border-box;
    width: 1200px;
}

.main .user_cont_wrap > .notice {
    background-color: var(--sub-color-3);
    width: 100%;
	font: 1rem 'Noto';
    color: var(--font-color-3);
	cursor: pointer;
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 7px;
}

.main .user_cont_wrap > .notice > span {
    margin-right: 50px;
    display: inline-block;
    color: var(--main-color);
}

.main .user_cont_wrap > .left {
	width: 790px;
	float: left;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
    gap: 30px 50px;
}
.main .user_cont_wrap > .yard_left{
	gap: 20px 50px;
}
.main .user_cont_wrap > .top-left {
    width: 250px;
    float: left;
    height: 250px;
    margin-bottom: 20px;
}

.main .user_cont_wrap > .left > .grd {
    width: 40%;
	height: 230px;
    background-color: var(--sub-color-2);
    text-align: center;
}

.main .user_cont_wrap > .left > .grd > img{
    height: calc(80% - 20px);
    margin-bottom: 10px;
}

.main .user_cont_wrap > .left > .grd > .grd_nm{
    height: 10%;
    margin-bottom: 10px;
    font-weight: bold;
}

.main .user_cont_wrap > .left > .grd > .progress{
    height: 10%;
}

.main .user_cont_wrap > .left > .grd > .progress > span{
	display: inline-block;
    width: 20%;
}

.main .user_cont_wrap > .left > .grd > .progress > progress{
    width: 60%;
}

.main .user_cont_wrap > .top-center {
    width: 500px;
    height: 250px;
}

.main .user_cont_wrap > .left > .board {
	width: calc(60% - 50px);
	height: 230px;
}

.main .user_cont_wrap > .left > .board > .tab {
	float: left;
	width: 100%
}

.main .user_cont_wrap > .left > .board > .tab > .tabnav {
	height: 50px;
}

.main .user_cont_wrap > .left > .board > .tab > .tabnav > li {
	display: inline-block;
	text-align: center;
	width: 100px;
    height: 100%;
    font-size: 18px;
}

.main .user_cont_wrap > .left > .board > .tab > .tabnav > li > a {
	display: inline-block;
	width: 100%;
    height: 100%;
    padding: 13px;
}

.main .user_cont_wrap > .left > .board > .tab > .tabnav > li > .active {
	font-weight: bold;
	border-top: 5px solid var(--sub-color-3);
}

.main .user_cont_wrap > .right {
    width: 350px;
    float: right;
    height: 570px;
    background: var(--sub-color-2);
    margin-bottom: 20px;
}

.main .user_cont_wrap > .right > .leader {
    padding: 15px;
}

.main .user_cont_wrap > .right > .leader > .tit {
	height: 55px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main .user_cont_wrap > .right > .leader > .cont > .rank_tit {
	height: 25px;
	margin: 0 0 10px 0;
}

.main .user_cont_wrap > .right > .leader > .cont > .rank_cont {
	height: 200px;
	background: var(--sub-color-1);
	margin-bottom: 10px;
}

.main .user_cont_wrap > .right > .leader > .cont > .rank_cont > .nonLeader {
	border-radius: 4px;
    text-align: center;
    display: table;
    float: left;
    box-sizing: border-box;
    position: relative;
    padding: 15px;
}

.main .user_cont_wrap > .right > .leader > .cont > .rank_cont > .rank {
	background: var(--sub-color-1);
	font-size: 14px;
	height: calc((100% - 40px)/ 5);
}

.main .user_cont_wrap > .right > .leader > .cont > .team_list {
	background: var(--sub-color-1);
	height: 200px;
	margin-top: 5px;
}

.main .user_cont_wrap > .right > .leader > .cont > .team_list > .team {
	height: 40px;
}

/*
.main > .top > .bottom-left > .task_wrap {
	float: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
*/

.main .user_cont_wrap > .right > .stats  {
	height: 270px;
	padding: 15px;
}


.main .user_cont_wrap > .right > .stats > .line {
	width: 100% !important;
}

.main .user_cont_wrap > .bottom-left {
	float: left;
    box-sizing: border-box;
    width: 800px;
    height: 300px;
    margin-right: 50px;
    margin-bottom: 20px;
}

.task_wrap > .task_list{
	height: 230px;
	width: calc((100% - 20px)/ 2);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	text-align: center;
	display: table;
	float: left;
	box-sizing: border-box;
	position: relative;
	padding: 15px;
	cursor: pointer;
}

.main .user_cont_wrap > .bottom > table {
	border-top: 0px;
    border-bottom: 0px;
}

.main .user_cont_wrap > .bottom > table > thead {
	border-bottom: 1px solid var(--main-color);	
}

.main .user_cont_wrap > .bottom > table > thead > tr {
	height: 40px;
}

.main .user_cont_wrap > .bottom > table > thead > tr > th {
	text-align: center;
}

.main .user_cont_wrap > .bottom > table > tbody {

}

.main .user_cont_wrap > .bottom > table > tbody > tr {
    cursor: default;
    border-bottom: 1px solid var(--sub-color-3);
}

.main .user_cont_wrap > .bottom > table > tbody > tr > td {
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.task_wrap > .join_task{
    width: calc((100% - 20px) / 3);
    line-height: 351px;
}
/* 과제 관리자 대시보드 */

.top, .middle, .bottom {
    box-sizing: border-box;
    float: left;
    width: 100%;
}

.main > .operTitle {
	float: left;
}

.main > .cont_wrap > .top > .hide {
	display: none;
}

.main > .cont_wrap > .top > form > div > h1 {
	width: auto;
}

.main > .cont_wrap > .top > .show {
	display: block;
}

.task_select {
	height: 55px;
	position: relative;
    background-color: var(--sub-color-1);
    display: inline-block;
    padding: 10px;
}

.task_select_btn {
	position: relative;
    background-color: var(--sub-color-1);
    cursor: pointer;
    display: inline-block;
    padding: 10px;
}

.task_select > ul {
    position: absolute;
    top: 55px;
    left: 0;
    border:1px solid var(--border-color);
    background-color: var(--sub-color-1);
    cursor: pointer;
    overflow: auto;
    height: 150px;
}

.task_select > ul > li{
	padding: 10px;
}

.task_select > ul > li:hover{
	background: var(--main-color);
}

.main > .cont_wrap > .top > .info {
	margin: 10px 0px;
}

.main > .cont_wrap > .top > .info > #statusCd {
	background: var(--main-color);
    color: var(--sub-color-1);
    border-radius: 10px;
    padding: 3px 10px;
}

.main > .cont_wrap > .top > .info > .OPER_END {
	background: var(--font-color-3) !important;
}

.main > .cont_wrap > .top > .info > .taskDt {
	margin: 5px;
}

.main > .cont_wrap > .top > .info > .detail {
	margin: 5px;
	text-decoration: underline;
}

.main > .cont_wrap > .middle > .left {
	float: left;
	width: 48%;
	margin-right: 4%;
}

.main > .cont_wrap > .middle > .left > .doughnut {
	width: 288px !important;
	height: 288px !important;
    float: left;
}

.main > .cont_wrap > .middle > .left > .horizontal {
	width: 288px !important;
	height: 144px !important;
    float: right;
    position: relative;
    top: 50px;
}

.main > .cont_wrap > .middle > .right {
	float: left;
	width: 48%;
}

.main > .cont_wrap > .middle > .right > table {
	border-top: 0px;
	border-bottom: 1px solid var(--main-color);
}

.main > .cont_wrap > .middle > .right > table > thead {
	border-bottom: 1px solid var(--main-color);
}

.main > .cont_wrap > .middle > .right > table > thead > tr {
	height: 40px;
}

.main > .cont_wrap > .middle > .right > table > tbody > .leader:nth-of-type(1),
.main > .cont_wrap > .middle > .right > table > tbody > .leader:nth-of-type(2),
.main > .cont_wrap > .middle > .right > table > tbody > .leader:nth-of-type(3) {
	background-color: var(--sub-color-3);
}

.main > .cont_wrap > .middle > .right > table > tbody > tr:nth-of-type(1) > .rank,
.main > .cont_wrap > .middle > .right > table > tbody > tr:nth-of-type(2) > .rank,
.main > .cont_wrap > .middle > .right > table > tbody > tr:nth-of-type(3) > .rank {
	color: var(--main-color);
}

.main > .cont_wrap > .middle > .right > table > tbody > tr > td {
	text-align: center;
}

.notice {
	float: left;
	width: 48%;
	margin-right: 4%;
}

.qna {
	float: left;
	width: 48%;
}

.qna > table > tbody > tr > th {
	
}

.qna > table > tbody > tr > td {
	width: 15%;
	text-align: center;
}

.qna > table > tbody > tr > td > .true {
    display: block;
	background-color: var(--border-color);
    padding: 5px 10px;
    border-radius: 10px;
    color: var(--sub-color-1);
    width: 80px;
}

.qna > table > tbody > tr > td > .false {
    display: block;
	background-color: var(--main-color);
    padding: 5px 10px;
    border-radius: 10px;
    color: var(--sub-color-1);
    width: 80px;
}


#thumbnailContent{  display: flex;  flex-direction: row;  flex-wrap: wrap;  gap: 20px 16px;}