/* 리스트	 ======================================*/

.listbox						{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;}
.listbox li						{cursor:pointer;}
.listbox .layer					{position:absolute; top:0; left:0; display:none; background:rgba(0,0,0,0.5) url("image/btn_more.png") no-repeat 50% 50%; z-index:1; width:100%; height:100%; transition:0.5s;}
.listbox li:hover .layer		{display:block;}
.listbox figure					{position:relative; height:220px; overflow:hidden; border-radius:20px;}
.listbox figure img				{width:100%; height:100%; object-fit: cover; transition: all 0.5s ease;}
.listbox li:hover figure img	{transform: scale(1.03);}
.listbox .listHead				{padding:15px 0 0 0;}
.listbox .listHead p			{font-size:1.1em; color:#333; font-weight:500; overflow:hidden;  text-overflow: ellipsis; -o-text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;
								-webkit-box-orient: vertical; word-wrap: break-word;}
.listbox em						{display:block; font-style:normal; margin-top:10px; font-size: 0.9em; color:#999;}
.listbox i						{margin-right:5px;}

.listbox .nolist				{grid-column:1 / span 3; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:100px 0; color:#999;}


@media screen and (max-width:1024px) {
	.listbox li 					{grid-template-columns:repeat(2, 1fr); gap:20px;}
	.listbox .listHead p			{font-size:1.05em;}
	.listbox em						{margin-top:7px;}
}

@media screen and (max-width:768px) {
	.listbox .list					{grid-template-columns:1fr;}
	.listbox figure					{height:100%;}
}


/* 뷰	 ======================================*/
.view_tit_wrap						{padding:40px 30px; border-top:1px solid #333; border-bottom:1px solid #dfdfdf; background:#fafafa;} 
.view_tit_wrap .tit					{font-size:1.4em; letter-spacing:-1px; line-height:140%; COLOR:#333; font-weight:700;padding:0 0 15px 0;} 
.view_tit_wrap .tit span			{display:inline-block; padding:0px 12px; height:30px; line-height:28px; color:#2264bf; border:1px solid #2264bf; margin-right:15px; font-size:16px; background:#fff; }
.view_tit_wrap .name				{color:#999;}
.view_tit_wrap .name span			{position:relative; padding-right:23px;}
.view_tit_wrap .name span:after		{content:''; position:absolute; top:0; right:12px; bottom:0; width:1px; height:1em; margin:auto; background:#ddd;}
.view_tit_wrap .name span:last-child		{padding:0;}
.view_tit_wrap .name span:last-child:after	{display:none;}
 
.view_content					{padding:40px 10px; word-break:break-all; min-height:300px;}
.view_content img				{max-width:100%; }

.video_container				{position:relative; margin:0; padding-bottom:75%; max-width:100%; height:0; overflow:hidden;} 
.video_container iframe			{position:absolute; top:0; left:0; margin:0; padding:0; width:100%; height:100%;}

.comment_box		{margin-top:15px; border-top:1px solid #b5b5b5; border-bottom:1px solid #b5b5b5; padding:7px; background-color:#f7f7f7; overflow:auto; }
.comment_txt		{padding-top:3px; }
.comment_txt dt		{float:left; width:calc(100% - 120px); }
.comment_txt dd		{float:right; }
.comment_txt dt textarea	{border:1px solid #cccccc; width:100%; }
.comment_txt .com_btn 		{display:inline-block; zoom:1; *display:inline; text-align:center; font-size:15px; border:1px solid #ccc; background:#fff; color:#333; padding:0 25px; line-height:48px; margin:0 3px; cursor:pointer; vertical-align:top; }
.comment_txt .com_btn:hover	{border:1px solid #444; background:#555; color:#fff; }

.comment_view				{border-bottom:1px solid #dfdfdf; padding:20px 0; min-height:120px; }
.comment_view_name			{padding:0 10px; line-height:130%; color:#333; }
.comment_view_name span		{font-size:10px; color:#999999; }
.comment_view_content		{margin-top:20px; padding:0 10px; color:#555; }

.view_file .view_file_tit		{float:left; width:15%; }
.view_file .view_file_tit span	{display:block; font-size:15px; font-weight:500; text-align:center; line-height:40px; border:1px solid #ccc; }
.view_file .view_file_txt		{float:right; width:82%; line-height:180%; padding-top:3px;}
.view_file 						{padding:15px 10px; border-top:1px solid #ddd; overflow:hidden; }
.view_file li					{font-size:0.9em;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:90%; }
.view_file .fname				{color:#777;}

.bbs_area_view					{padding:40px 0; border-top:1px solid #ddd;}

.view_prev_group						{position:relative; border-top:1px solid #555; }
.view_prev_group li						{position:relative;overflow:hidden; color:#777;padding:15px 10px; border-bottom:1px solid #ddd; font-size:0.95em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}  
.view_prev_group li:last-child			{border-bottom:1px solid #ddd; } 
.view_prev_group li a					{color:#777;}
.view_prev_group span					{display:inline-block; text-indent:40px; margin-right:20px; width:140px; color:#333; border-right:1px solid #e8e8e8; }
.view_prev_group .view_prev_group_li01 span:after	{content:''; position:absolute; top:25px; left:20px; border:solid #666; border-width:1px 1px 0 0;  padding:3px; transform: rotate(135deg); -webkit-transform: rotate(-45deg);}
.view_prev_group .view_prev_group_li02 span:after	{content:''; position:absolute; top:23px; left:20px; border:solid #666; border-width:1px 1px 0 0;  padding:3px; transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.view_prev_group li:hover				{background:#f4f5f8;}


@media screen and (max-width:1024px) {
	.view_tit_wrap					{padding:25px 20px;} 
	.view_tit_wrap .tit				{font-size:1.25em; padding:0 0 5px 0;}
	.view_tit_wrap .name			{font-size:0.85em;}

	.view_file						{padding:12px 10px;}
	.view_file .view_file_tit		{display:none;}
	.view_file .view_file_txt		{float:none; width:100%; padding:0;}

	.bbs_area_view					{padding:30px 0;}

	.view_prev_group li				{overflow:hidden; padding:10px 0; border-bottom:1px solid #ddd; font-size:0.85em;} 
	.view_prev_group span			{width:75px; text-indent:23px; margin-right:15px;}
	.view_prev_group .view_prev_group_li01 span:after,
	.view_prev_group .view_prev_group_li02 span:after	{left:5px; top:20px;}
}


/* 폼	 ======================================*/
.write_title		{color:#111; font-weight:bold; padding:12px 10px; text-align:center; background-color:#eeeeee; border-top:2px solid #5e5e5e; font-size:17px; }
.write_area			{width:100%; table-layout:fixed; }
.write01			{text-align:center; background:#f7f7f7; padding:8px; width:110px; border-right:1px solid #ddd; border-top:1px solid #ddd; font-size:0.95em;}
.write02			{padding:8px; border-top:1px solid #ddd; }