@import url(/assets/css/pages/bbs/press/layout.css);

div.youtube
{
	display: flex;
	flex-flow: wrap;
	margin-top: 30px;
	padding: 0 15px;
}

div.youtube a
{
	margin-top: 49px;
	width: calc(33.3333333333% - 32px);
}

div.youtube a:nth-child(3n + 1)
{
	margin-right: 32px;
}

div.youtube a:nth-child(3n + 2)
{
	margin-right: 16px;
	margin-left: 16px;
}

div.youtube a:nth-child(3n)
{
	margin-left: 32px;
}

div.youtube a *
{
	color: #000000;
}

div.youtube a img
{
	width: 100%;
}

div.youtube a div
{
	border: 1px solid #C8C7C7;
	border-top: none;
}

div.youtube a div h3
{
	padding: 20px 25px 25px;
	font-family: 'Noto Sans KR', sans-serif;
}

div.youtube a div h3 span
{
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.36px;
	min-height: 55px;
}

div.youtube a div ul
{
	display: none;
/*	display: flex;*/
	justify-content: space-between;
	align-items: center;
	padding: 12px 24px;
	border-top: 1px solid #DFDFDF;
	background-color: #F9F9F9;
}

div.youtube a div ul li:first-child
{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.3px;
}

div.youtube a div ul li:last-child
{
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: -0.32px;
	color: #888888;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 960px)
{
	div.youtube a
	{
		width: calc(50% - 8px);
	}

	div.youtube a:nth-child(3n + 1),
	div.youtube a:nth-child(3n + 2),
	div.youtube a:nth-child(3n)
	{
		margin-right: 0;
		margin-left: 0;
	}
	
	div.youtube a:nth-child(odd)
	{
		margin-right: 8px;
	}
	
	div.youtube a:nth-child(even)
	{
		margin-left: 8px;
	}
}

@media screen and (max-width: 900px) {
	div.youtube {
		margin-top: 20px;
	}

	div.youtube a
	{
		margin-top: 35px;
	}

	div.youtube a div h3 {
		padding: 10px 15px 15px;
	}

	div.youtube a div h3 span {
		font-size: 17px;
		min-height: 50px;
		line-height: 23px;
	}
}

@media screen and (max-width: 600px)
{
	div.youtube a
	{
		width: 100%;
	}

	div.youtube a:nth-child(odd),
	div.youtube a:nth-child(even)
	{
		margin-right: 0;
		margin-left: 0;
	}	

	div.youtube a div h3 span {
		font-size: 16px;
		min-height: auto;
		line-height: 22px;
	}

	div.youtube a div ul {
		padding: 9px 15px;
	}

	div.youtube a div ul li:first-child {
		font-size: 15px;
	}
}

@media screen and (max-width: 500px) {}
