<main id="main" role="main">
<div id="channel_content">
<div id="channel_banner"></div>
<div id="channel_header">
<div class="channel_container">
<div class="channel_profile_wrap flex_align_between">
<div class="channel_profile flex_align_start">
<img class="channel_thumbnail" src="https://via.placeholder.com/80">
<div class="txt_wrap">
<h2>기발자 유튜브 채널</h2>
<p>구독자 222만명</p>
</div>
</div>
<button type="button" class="btn_subscribe">구독</button>
</div>
<div id="channel_nav">
<ul class="flex_align_start">
<li><a href="#" class="active">홈</a></li>
<li><a href="#">동영상</a></li>
<li><a href="#">재생목록</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">채널</a>
<li><a href="#">정보</a>
</ul>
</div>
</div>
</div>
<div id="channel_contents">
<div class="channel_container">
<div id="channel_recent" class="flex_align_start">
<div class="thumbnail_wrap">
<img src="https://via.placeholder.com/246x148">
<span class="mark">실시간</span>
</div>
<div class="txt_wrap">
<h2>기발자 실시간 라이브 코딩 방송프로그램 24시간 스트리밍</h2>
<p class="channel">기발자 코딩채널 41명 시청중</p>
<p class="description">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세
</p>
</div>
</div>
<div class="channel_playlists">
<div class="playlists_header flex_align_start">
<h3>코딩하는 사람들</h3>
<div class="play_wrap flex_align_start">
<i class="icon_play"></i>
<a href="#" class="play_link">모두 재생</a>
</div>
</div>
<div class="playlists_body">
<ul class="flex_align_between">
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="channel_playlists">
<div class="playlists_header flex_align_start">
<h3>코딩하는 사람들</h3>
<div class="play_wrap flex_align_start">
<i class="icon_play"></i>
<a href="#" class="play_link">모두 재생</a>
</div>
</div>
<div class="playlists_body">
<ul class="flex_align_between">
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="channel_playlists">
<div class="playlists_header flex_align_start">
<h3>코딩하는 사람들</h3>
<div class="play_wrap flex_align_start">
<i class="icon_play"></i>
<a href="#" class="play_link">모두 재생</a>
</div>
</div>
<div class="playlists_body">
<ul class="flex_align_between">
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="channel_playlists">
<div class="playlists_header flex_align_start">
<h3>코딩하는 사람들</h3>
<div class="play_wrap flex_align_start">
<i class="icon_play"></i>
<a href="#" class="play_link">모두 재생</a>
</div>
</div>
<div class="playlists_body">
<ul class="flex_align_between">
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="channel_playlists">
<div class="playlists_header flex_align_start">
<h3>코딩하는 사람들</h3>
<div class="play_wrap flex_align_start">
<i class="icon_play"></i>
<a href="#" class="play_link">모두 재생</a>
</div>
</div>
<div class="playlists_body">
<ul class="flex_align_between">
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
<li>
<div class="channel_thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">00:20</span>
</a>
</div>
<div class="channel_txt_wrap">
<h3>
<a href="#" class="title_link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
<p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>
<div class="txt_bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 </span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background-color: #212121;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1320px;
}
.flex_align_between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex_align_start {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.flex_align_end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* main - content */
#main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
}
/* channel */
.channel_container {
width: 1284px;
margin: 0 auto;
}
#channel_content #channel_banner {
width: 100%;
height: 250px;
background-color: darkblue;
}
#channel_content #channel_header {
padding: 16px 0 4px;
background-color: rgba(24, 24, 24, 1);
}
#channel_content #channel_header .channel_profile_wrap .channel_profile img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 24px;
}
#channel_content #channel_header .channel_profile_wrap .channel_profile .txt_wrap h2 {
font-size: 25px;
color: #fff;
font-weight: 500;
}
#channel_content #channel_header .channel_profile_wrap .channel_profile .txt_wrap p {
font-size: 14px;
color: #aaa;
margin-top: 5px;
}
#channel_content #channel_header .channel_profile_wrap .btn_subscribe {
padding: 10px 20px;
background-color: red;
border-radius: 5px;
color: #fff;
font-size: 16px;
}
#channel_nav li a {
display: block;
height: 47px;
line-height: 47px;
padding: 0 32px;
border-bottom: solid 2px transparent;
color: #aaa;
}
#channel_nav li a:hover {
color: #fff;
}
#channel_nav li a.active {
border-bottom: solid 2px #fff;
color: #fff;
}
#channel_recent {
padding: 24px 0;
align-items: flex-start;
border-bottom: solid 1px #aaa;
}
#channel_recent .thumbnail_wrap {
position: relative;
width: 246px;
height: 148px;
margin-right: 16px;
}
#channel_recent .thumbnail_wrap img {
width: 100%;
height: 100%;
}
#channel_recent .thumbnail_wrap .mark {
position: absolute;
background-color: red;
font-size: 12px;
color: #fff;
padding: 4px 8px;
border-radius: 5px;
right: 4px;
bottom: 4px;
}
#channel_recent .txt_wrap {
width: 600px;
}
#channel_recent .txt_wrap h2 {
font-size: 20px;
color: #fff;
font-weight: 400;
}
#channel_recent .txt_wrap .channel {
font-size: 14px;
color: #aaa;
}
#channel_recent .txt_wrap .description {
padding-top: 8px;
line-height: 1.45;
font-size: 14px;
color: #aaa;
}
.channel_playlists {
padding: 24px 0;
border-bottom: solid 1px grey;
}
.channel_playlists .playlists_header h3 {
font-size: 18px;
color: #fff;
margin-right: 20px;
}
.channel_playlists .playlists_header .play_wrap {
width: 90px;
}
.channel_playlists .playlists_header .play_wrap .icon_play {
width: 20px;
height: 20px;
background-color: #fff;
}
.channel_playlists .playlists_header .play_wrap .play_link {
font-size: 14px;
color: #aaa;
margin-left: 8px;
}
.channel_playlists .playlists_body {
margin-top: 24px;
}
.channel_playlists .playlists_body li{
width: 210px;
}
.channel_playlists .playlists_body li .channel_thumbnail {
width: 100%;
height: 118px;
}
.channel_playlists .playlists_body li .channel_thumbnail a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.channel_playlists .playlists_body li .channel_thumbnail img {
width: 100%;
height: 100%;
}
.channel_playlists .playlists_body li .channel_thumbnail .time {
position: absolute;
font-size: 12px;
color: #fff;
background-color: #000;
padding: 4px 8px;
border-radius: 5px;
bottom: 4px;
right: 4px;
}
.channel_playlists .playlists_body li .channel_txt_wrap {
margin-top: 8px;
}
.channel_playlists .playlists_body li .channel_txt_wrap h3 {
font-size: 15px;
margin-bottom: 6px;
}
.channel_playlists .playlists_body li .channel_txt_wrap a {
color: #ffffff;
}
.channel_playlists .playlists_body li .channel_txt_wrap p {
font-size: 12px;
}
.channel_playlists .playlists_body li .channel_txt_wrap p a {
color: #aaa;
}
.channel_playlists .playlists_body li .channel_txt_wrap .txt_bottom .count,
.channel_playlists .playlists_body li .channel_txt_wrap .txt_bottom .date {
font-size: 12px;
color: #aaa;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.