/*
  Css Name : snMediaView.css
  Description : 강소특구 홍보영상 CSS
  Modification Information

      수정일      수정자          수정내용
   ----------    --------  ---------------------------
   2021.01.23    이선호      특구기업 웹진css

    since    :2021.01.23
*/
@charset "utf-8";
.bbs-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0; /* 필요시 */
	margin: 60px 0 30px 0;
}

#bbsList .content-blue{
	background: #0029B0;
}

#bbsList .content-blue span{
	color: #FFF !important;
	font-weight: 700 !important;
	letter-spacing: -0.2px !important;
}

#bbsList .bbs-list li {
	display: grid;
	justify-content: center;
	align-items: center;
	width: calc(100% / 3); /* 3등분 */
	box-sizing: border-box;
	padding: 14px 25px;
	cursor: pointer;
}

#bbsList .bbs-list li .bbsListDetail {
	color: #555;
	text-align: center;
	font-family: Pretendard;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 25.2px */
	letter-spacing: -0.36px;
}

#bbsList .bbs-list li:nth-child(1) {
	border-radius: 30px 0 0 0;
	border: 1px solid #D3D3D3;
}
#bbsList .bbs-list li:nth-child(2) {
	border-top: 1px solid #D3D3D3;
	border-bottom: 1px solid #D3D3D3;
	border-right: 1px solid #D3D3D3;
}
#bbsList .bbs-list li:nth-child(3) {
	border-radius: 0 30px 0 0;
	border-top: 1px solid #D3D3D3;
	border-bottom: 1px solid #D3D3D3;
	border-right: 1px solid #D3D3D3;
}
#bbsList .bbs-list li:nth-child(4) {
	border-radius: 0 0 0 30px;
	border-left: 1px solid #D3D3D3;
	border-bottom: 1px solid #D3D3D3;
	border-right: 1px solid #D3D3D3;
}
#bbsList .bbs-list li:nth-child(5) {
	border-bottom: 1px solid #D3D3D3;
	border-right: 1px solid #D3D3D3;
}
#bbsList .bbs-list li:nth-child(6) {
	border-right: 1px solid #D3D3D3;
	border-bottom: 1px solid #D3D3D3;
	border-radius: 0 0 30px 0;
}

#bbsList .bbs-list li span{
	color: #111;
	text-align: center;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%; /* 28px */
	letter-spacing: -0.4px;
	flex: 1 0 0;
}

#contentList .content-card-list li{
	cursor: pointer;
	overflow: hidden;
	color: #111;
	text-overflow: ellipsis;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	margin-bottom: 0;
	margin-right: 20px;
	margin-bottom: 50px;
}

#contentList .content-card-list li:hover .content-title {
	color: #0E419C;
	text-overflow: ellipsis;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
}

#contentList .content-card-list li:hover .content-card {
	background: rgba(0, 0, 0, 0.25);
	position: relative;
	transform: scale(1);
}

#contentList .content-card-list li:hover .content-card::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	background-color: #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	background-image: url("/images/common/plus.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	z-index: 1;
}

#contentList .content-card-list li .content-card{
	border-radius: 10px;
	border: 1px solid #D3D3D3;
}

#contentList .content-card-list li .content-card img{
	border-radius: 10px;
}

.rowMobile #bbsList {
	padding: 0 20px;
}

@media (max-width: 1000px) {
	.mediaVideoPlay::before {
		content: '';
		background-image: url(/images/common/media-play-btn.png);
		background-color: rgba(0, 0, 0, 0.4);
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.content-card .content-title {
		margin:0;
		border:0;
	}

	#bbsList .bbs-list li {
		padding: 12px 20px;
	}

	#bbsList .bbs-list li span {
		font-size: 18px;
	}
}

@media (max-width: 520px) {
	.bbs-list {
		flex-wrap: nowrap; /* 줄바꿈 X */
		overflow-x: auto;  /* 가로 스크롤 */
		-webkit-overflow-scrolling: touch;
		/*padding-bottom: 10px;*/
		scrollbar-width: none;
		margin: 30px 0 30px 0;
	}


	#bbsList .bbs-list li {
		flex: 0 0 auto; /* 콘텐츠 크기만큼 */
		width: auto;    /* 고정 1/3 제거 */
		white-space: nowrap;
		border-radius: 40px !important;
		border: 1px solid #D3D3D3 !important;
		margin-right: 12px; /* 간격 */
		padding: 10px 25px;
	}

	#bbsList .bbs-list li:nth-child(n) {
		border: 1px solid #D3D3D3; /* 기존 nth-child border 초기화 */
		border-radius: 40px;
	}

	#bbsList .bbs-list li span {
		font-size: 16px;
	}
	#bbsList .bbs-list li .bbsListDetail {
		color: #555;
		text-align: center;
		font-family: Pretendard;
		font-size: 14px;
		font-weight: 500;
		line-height: 140%; /* 25.2px */
		letter-spacing: -0.36px;
	}
}

@media (max-width: 260px) {
	#bbsList .bbs-list li {
		padding: 8px 25px;
	}
	
	#bbsList .bbs-list li span {
		font-size: 14px;
	}
}

@media (min-width: 1000px) {
	.content-card-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.content-card-list li {
		flex: 0 0 calc(24% - 1px); /* 100% / 4 - gap */
		box-sizing: border-box;
	}

	.content-card-list li:nth-child(4n) {
		margin-right: 0 !important;
	}

	.content-card {
		margin-bottom: 10px;
	}

	#contentList .content-card-list li .content-card-img {
		height: 238px;
		overflow: hidden
	}

	#contentList .content-card-list li .content-card-img img {
		height: 100%;
		object-fit: cover;
	}

	#contentList .content-card-list li .content-title {
		overflow: hidden;
		color: #111;
		text-overflow: ellipsis;
		font-family: Pretendard;
		font-size: 20px;
		font-style: normal;
		font-weight: 700;
		line-height: 130%;
		padding: 0;
		border: 0;
		margin: 0;
	}

	#contentList .content-card-list li .content-desc {
		font-size: 0.8em;
		letter-spacing: -1px;
		padding: 0 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	#contentList .content-card-list li .content-date {
		font-size: 0.8em;
		letter-spacing: -1px;
		padding: 10px;
		color: #888FA1;
	}
}
#pageCntView {
	margin: 30px 0 10px 0;
}
#pageCntView > span{color:#2261CE}

.mediaVideoPlay {display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}
/*.mediaVideoPlay::before {*/
/*	content: '';*/
/*	background-image: url(/images/common/media-play-btn.png);*/
/*	background-color: rgba(0, 0, 0, 0.4);*/
/*	background-repeat: no-repeat;*/
/*	background-position: center;*/
/*	position: absolute;*/
/*	width: 100%;*/
/*	height: 100%;*/
/*}*/

#mediaTable th{text-align: center;}
#mediaTable td{text-align: left;}
#mediaTable .content { line-height: 2.5em; padding: 5% 15px;}

#youtubePlayer{ width:80%; max-width: 857px; height: 582px; margin: 0 auto;}

/* 모바일 */

#contentListMobile .bbs-list li{position:relative; font-size: 1.2em; margin-bottom: 0.5em; display: table; float: left; width: 100%; height: 100px; vertical-align: middle; border: 1px solid #C7D9EC; background: #F9FAFC;}
#contentListMobile .bbs-list li span{display:table-cell; vertical-align: middle;padding:0 39px; overflow: hidden; text-overflow: ellipsis;}
#contentListMobile .bbs-list li:before{content: ''; position: absolute; left: 12px;top:-3px; background-image: url("/images/common/content-title.png"); background-repeat: no-repeat;background-position: center; width:20px; height: 100%;}
#contentListMobile .bbs-list li:after{content: '>'; position: absolute; text-align: center; line-height: 1.6em; right: 14px; top: calc(50% - 16px); background-color: #fff; width: 26px; height: 26px; border: 1px solid #0062DF; color: #0062DF; border-radius: 100%;}

#contentListMobile .content-card-list li{display:inline-block; width:100%; margin-right: 15px; margin-bottom: 15px;}
#contentListMobile .content-card-list li:nth-last-child(1){margin-right: 0px;}
#contentListMobile .content-card-list li .content-card-img{height: 238px;overflow: hidden; border-radius: 10px;}
#contentListMobile .content-card-list li .content-card-img img{height:100%; object-fit: cover;}
#contentListMobile .content-card-list li .content-title{font-size: 1.2em; letter-spacing: -1px; padding: 10px 0 0 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;	-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#contentListMobile .content-card-list li .content-desc{font-size: 0.8em; letter-spacing: -1px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;	-webkit-line-clamp: 3; -webkit-box-orient: vertical;}
#contentListMobile .content-card-list li .content-date{font-size: 0.8em; letter-spacing: -1px; padding: 10px; color:#888FA1;}

#youtubePlayerMobile{ display: block; width:100%; min-height: 250px; margin: 0 auto;}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* Enter your style code */
	.mediaVideoPlay::before {
		content: '';
		background-image: url(/images/common/media-play-btn.png);
		background-color: rgba(0, 0, 0, 0.4);
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
	}
}