@charset "utf-8";

/************************************************************************
 * 설  명 : AfreecaTV 방송국 로딩
 * 작성자 : 쿤 : kuns@afreecatv.com
 * 시작일 : 2018.10.24
 * 완료일 : 2018.
 * 오픈일 : 2018.12.20
************************************************************************/
body {margin:0; padding:0;}
.af_loading {display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-moz-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-moz-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.af_loading:after {
	display:block;
	-webkit-animation: rotate 0.9s linear infinite;
	-ms-animation: rotate 0.9s linear infinite;
	animation: rotate 0.9s linear infinite;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	border-top: 3px solid #545a6a;
	border-bottom: 3px solid #d4d4db;
	border-left: 3px solid #545a6a;
	border-right: 3px solid #d4d4db;
	content: '';
	opacity: .7;
}
.af_loading.more:after {width:20px;height:20px;margin:10px 0;border-width:1px;background:none}
@keyframes rotate {
	0% {transform:rotateZ(-360deg); -webkit-transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg);}
	100% {transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -ms-transform:rotateZ(0deg);}
}
@-webkit-keyframes rotate {
	0% {transform:rotateZ(-360deg); -webkit-transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg);}
	100% {transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -ms-transform:rotateZ(0deg);}
}
@-ms-keyframes rotate {
	0% {transform:rotateZ(-360deg); -webkit-transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg);}
	100% {transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -ms-transform:rotateZ(0deg);}
}
.af_loading.more {position:absolute; top:300px; left:50%;}
/*
 * @ PC
 */
header .inner_header {position:relative; width:1184px; height:64px; margin:0 auto;}
.loading-header {position:fixed; top:0; left:0; right:0; background:#fff; width:100%; min-width:1184px; border-bottom:1px solid #f0f0f0; z-index:1500;}
.loading-header h1 {margin:0;}
.loading-header h1 a {display:block; background:url(/images/svg/soop_logo.svg) 50% 50% no-repeat; background-size:107px 47px; width:110px; height:65px; font:0/0 a;}
.loading-header .loading-srh {position:absolute; top:16px; left:156px; background-image:url(/images/svg/loading.svg); width:240px; height:32px; border-radius:5px;}
.loading-header .loading-util {position:absolute; top:16px; right:0; font:0/0 a;}
.loading-header .loading-util > * {display:inline-block; background-image:url(/images/svg/loading.svg); height:28px; border-radius:5px;}
.loading-header .loading-util span {width:28px; margin-right:31px;}
.loading-header .loading-util em {width:44px;}


[class*=-grid-col-]:after {content:""; display:block; clear:both;}
[class*=-grid-] > div span {display:block; background-image:url(/images/svg/loading.svg); width:100%; height:100%; border-radius:15px;}
[class*=-grid-] > div {width:100%; box-sizing:border-box;}
[class*=-grid-col-2] > div {float:left; width:calc(50% - 8px); height:330px;}
[class*=-grid-col-2] > div:nth-child(2) {float:right;}
[class*=-grid-row-2] {height:100%;}
[class*=-grid-row-2] > div {width:100%; height:calc(50% - 8px);}
[class*=-grid-row-2] > div:nth-child(2) {margin-top:.8rem;}
[class*=-grid-] > div.list span {height:24px; margin-top:24px; border-radius:5px;}
[class*=-grid-] > div.list span:first-child {margin-top:0;}

.sct-vod [class*=-grid-col-2] > div {width:279px; height:244px;}
.sct-vod [class*=-grid-col-2] > div:first-child {width:589px;}
.sct-vod [class*=-grid-row-2] > div {height:114px;}
.sct-vod [class*=-grid-row-2] > div span {width:100%;}

.sct-board [class*=-grid-col-2] > div {width:434px; height:193px;}
.sct-board [class*=-grid-col-2] > div.list {padding-top:12px;}

.sct-uvod [class*=-grid-col-2] > div {height:244px;}

.sct-playlist [class*=-grid-col-3] > div {float:left; width:284px; height:246px; margin-left:16px;}
.sct-playlist [class*=-grid-col-3] > div:first-child {margin-left:0;}

.sct-playlist [class*=-grid-col-4] > div {float:left; width:209px; height:170px; margin-left:16px;}
.sct-playlist [class*=-grid-col-4] > div:first-child {margin-left:0;}


.vod-list [class*=-grid-row-2] > div {height:114px;}
.vod-list [class*=-grid-row-2] > div.list {height:auto;}
.vod-list [class*=-grid-row-2] > div.list span {margin-top:12px;}

.vod-list.b-feed [class*=-grid-row-2]:after {content:""; display:block; clear:both;}
.vod-list.b-feed [class*=-grid-row-2] > div {float:left; width:240px; height:135px;}
.vod-list.b-feed [class*=-grid-row-2] > div.list {float:right; width:616px; margin-top:0;}
.vod-list.b-feed [class*=-grid-row-2] > div.list span {margin-top:0;}
.vod-list.b-feed [class*=-grid-row-2] > div.list span:first-child {height:24px; margin-bottom:10px;}


.board-feed [class*=-grid-col-1] > div {}
.board-feed [class*=-grid-col-1] > div:first-child span {display:inline-block; width:calc(100% - 400px); height:24px; vertical-align:middle;}
.board-feed [class*=-grid-col-1] > div:first-child .thum {width:40px; height:40px; border-radius:50%; margin-right:11px;}

.board-feed [class*=-grid-col-2]:after {display:none;}
.board-feed [class*=-grid-col-2] {display:table; width:100%; margin-top:16px;}
.board-feed [class*=-grid-col-2] > div {display:table-cell; height:auto; float:none; width:auto; vertical-align: top;}
.board-feed [class*=-grid-col-2] > div span {height:24px;}
.board-feed [class*=-grid-col-2] > div > div:nth-child(2) {width:80%; margin-top:15px;}
.board-feed [class*=-grid-col-2] > div.video-img {width:266px; padding-left:32px;}
.board-feed [class*=-grid-col-2] > div.video-img > div:last-child {margin-top:0;}
.board-feed [class*=-grid-col-2] > div.video-img span {height:132px;}

.board-list [class*=-grid-col-1] > div span {height:24px;}
.board-list table [class*=-grid-col-1] > div span {width:90%; height:24px; margin:0 auto;}


.story-list [class*=-grid-col-2] > div:first-child span {display:inline-block; width:calc(100% - 130px); height:24px; vertical-align:middle;}
.story-list [class*=-grid-col-2] > div:first-child .thum {width:40px; height:40px; border-radius:10px; margin-right:11px;}
.story-list [class*=-grid-col-2]:after {display:none;}
.story-list [class*=-grid-col-2] {display:table; width:100%; margin-top:16px;}
.story-list [class*=-grid-col-2] > div {display:table-cell; height:auto; float:none; width:auto; vertical-align: top;}
.story-list [class*=-grid-col-2] > div span {height:24px;}
.story-list [class*=-grid-col-2] > div > div:nth-child(2) {margin:20px 0 15px;}
.story-list [class*=-grid-col-2] > div.video-img {width:266px; padding-left:32px;}
.story-list [class*=-grid-col-2] > div.video-img > div:last-child {margin-top:0;}
.story-list [class*=-grid-col-2] > div.video-img span {height:132px;}
.story-list [class*=-grid-col-2] > div:first-child div:not(:first-child) > span:not(.thum) {width:600px;}

.bs-story .story-list [class*=-grid-col-2] > div:first-child .thum {border-radius:12px;}
.bs-story .story-list [class*=-grid-col-2] > div span:not(.thum) {width:calc(100% - 51px); height:16px;}
.bs-story .story-list [class*=-grid-col-2] > div:first-child div:not(:first-child) > span:not(.thum) {width:100%;}
.bs-story .story-list [class*=-grid-col-2] > div > div:nth-child(2) {margin:14px 0 8px;}
.bs-story .story-list [class*=-grid-col-2] > div.video-img {display:none;}


/* 브라우저 업데이트 */
.update .header {border-bottom:1px solid #ececec;}
.update .header h1 a {display:block; background:url("/images/bj/bj_logo.png") 0 0 no-repeat; width:136px; height:23px; margin:17px auto 15px; font:0/0 a;}
.update .conts {background:url("/images/bj/img_browser.png") 50% 81px no-repeat; padding-top:340px; text-align:center;}
.update .conts h2 {color:#333; font-size:36px; font-weight:800;}
.update .conts p {margin-top:15px; color:#888; font-size:15px; line-height:1.5;}
.update .conts .btn-update {display:inline-block; background:#4279ff; height:52px; margin-top:45px; padding:0 50px; border-radius:5px; color:#fff; font-size:16px; font-weight:bold; line-height:52px;}
#footer.full {margin-top:270px; padding:0; color:#666; font-size:13px; font-family:tahoma; text-align:center;}




/*
 * @ MOBILE
 */
.m_loading-header {background:#fff; height:48px; padding:8px 92px 8px 16px; box-sizing:border-box;}
.m_loading-header .tit,
.m_loading-header .right span {background:#f1f3f8; height:32px;}
.m_loading-header .right {position:absolute; top:8px; right:16px;}
.m_loading-header .right span {display:inline-block; width:32px; margin-left:6px;}
.m_loading-header + #bs-container {margin-top:-48px;}
.m_af_loading {background:#fff; height:calc(100vh - 48px); padding-top:48px;}
.m_af_loading div {position:relative; background:#f1f3f8; height:145px;}
.m_af_loading div:after {position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; box-sizing:border-box;
	-webkit-animation:rotate 0.9s linear infinite;
	animation:rotate 0.9s linear infinite;
	border-radius:100%;
	border-top:3px solid #545a6a;
	border-bottom:3px solid #d4d4db;
	border-left:3px solid #545a6a;
	border-right:3px solid #d4d4db;
	content:'';
	opacity:.7;
}
@keyframes rotate {
	0% {transform:rotateZ(-360deg); -webkit-transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg);}
	100% {transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -ms-transform:rotateZ(0deg);}
}
@-webkit-keyframes rotate {
	0% {transform:rotateZ(-360deg); -webkit-transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg);}
	100% {transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -ms-transform:rotateZ(0deg);}
}

.board-list [class*=-grid-col-2] > div {width:100%; height:1.6rem;}
.board-list [class*=-grid-row-2] > div:first-child span {display:block; width:8rem; height:1.6rem;}
.board-list [class*=-grid-row-2] > div:first-child .thum { display:none;}
.board-list [class*=-grid-row-2] > div:last-child {margin-top:0;}
.board-list [class*=-grid-row-2] > div:last-child span {height:1.6rem; margin-top:0.8rem;}
.board-list [class*=-grid-row-2] > div:last-child span:last-child {width:80%; height:1.6rem;}

.board-list.feed [class*=-grid-row-2] > div:first-child span {display:inline-block; width:calc(100% - 60px); height:1.6rem; vertical-align:middle;}
.board-list.feed [class*=-grid-row-2] > div:first-child .thum {width:4rem; height:4rem; border-radius:50%; margin-right:1.1rem;}
.board-list.feed [class*=-grid-row-2] > div span{ height:20px;}
.board-list.feed [class*=-grid-row-2] [class*=-grid-col-2] > div {width:100%; height:auto;}
.board-list.feed [class*=-grid-row-2] > div:nth-child(2) {margin-top:0;}
.board-list.feed [class*=-grid-row-2] > div:nth-child(2) span {margin-top:8px; height:1.6rem;}
.board-list.feed [class*=-grid-row-2] > div:nth-child(2) span:first-child {height:1.6rem;}

.vod-list [class*=-grid-col-2] {padding:1rem 0;}
.vod-list [class*=-grid-col-2] > div {width:153px; height:86px;}
.vod-list [class*=-grid-col-2] > div:nth-child(2) {width:calc(100% - 16.3rem);}
.vod-list [class*=-grid-col-2] > div span {width:100%;height:86px;}
.vod-list [class*=-grid-col-2] [class*=-grid-row-2] > div {height:1.6rem;}
.vod-list [class*=-grid-col-2] [class*=-grid-row-2] > div:first-child > span {width:100%; height:1.6rem;}
.vod-list [class*=-grid-col-2] [class*=-grid-row-2] > div > span {height:1.6rem; width:15rem;}

.sct-vod [class*=-grid-row-3] > div span { height:50px;}
.sct-vod [class*=-grid-row-3] > div.bigger {margin-bottom:8px;}
.sct-vod [class*=-grid-row-3] > div.bigger span { min-height:16rem;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] {padding:1rem 0;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div { width:calc(100% - 160px); height:86px;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div span {height:1.6rem;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div span:last-child {height:1.6rem; margin-top:.8rem;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child {width:153px;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child span {width:100%; height:86px; margin-top:0;}
.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div:last-child span:last-child {width:50%;}


.sct-playlist [class*=-grid-row-3] > div span { height:50px;}
.sct-playlist [class*=-grid-row-3] > div.bigger {margin-bottom:8px;}
.sct-playlist [class*=-grid-row-3] > div.bigger span { min-height:16rem;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] {padding:1rem 0;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] > div { width:calc(100% - 160px); height:86px;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] > div span {height:1.6rem;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] > div span:last-child {height:1.6rem; margin-top:.8rem;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child {width:153px;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child span {width:100%; height:86px; margin-top:0;}
.sct-playlist [class*=-grid-row-3] [class*=-grid-col-2] > div:last-child span:last-child {width:50%;}

.sct-uclip [class*=-grid-row-3] > div span { height:50px;}
.sct-uclip [class*=-grid-row-3] > div.bigger {margin-bottom:8px;}
.sct-uclip [class*=-grid-row-3] > div.bigger span { min-height:16rem;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] {padding:1rem 0 0;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] > div { width:calc(100% - 160px); height:86px;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] > div span {height:1.6rem;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] > div span:last-child {height:1.6rem; margin-top:.8rem;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child {width:153px;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child span {width:100%; height:86px; margin-top:0;}
.sct-uclip [class*=-grid-row-3] [class*=-grid-col-2] > div:last-child span:last-child {width:50%;}


@media (min-width: 767px) {
	.sct-vod [class*=-grid-row-3] > div span { height:50px;}
	.sct-vod [class*=-grid-row-3] > div {float:left; width:calc(100% - 346px);}
	.sct-vod [class*=-grid-row-3] > div.bigger {margin-bottom:0; width:330px; margin-right:16px;}
	.sct-vod [class*=-grid-row-3] > div.bigger span { min-height:18.5rem;}
	.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] {padding:0;}
	.sct-vod [class*=-grid-row-3] [class*=-grid-col-2]:last-child{margin-top:1.4rem;}
	.sct-vod [class*=-grid-row-3] [class*=-grid-col-2] > div:last-child span:last-child {width:20rem;}
}


.sct-uvod [class*=-grid-row-3] > div span { height:50px;}
.sct-uvod [class*=-grid-row-3] > div.bigger {margin-bottom:8px;}
.sct-uvod [class*=-grid-row-3] > div.bigger span { min-height:16rem;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] {padding:1rem 0;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div { width:calc(100% - 160px); height:86px;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div span {height:1.6rem;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div span:last-child {height:1.6rem; margin-top:.8rem;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child {width:153px;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div:first-child span {height:86px; margin-top:0;}
.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div:last-child span:last-child {width:50%;}

@media (min-width: 767px) {
	.sct-uvod [class*=-grid-row-3] > div span { height:50px;}
	.sct-uvod [class*=-grid-row-3] > div {float:left; width:calc(100% - 346px);}
	.sct-uvod [class*=-grid-row-3] > div.bigger {margin-bottom:0; width:330px; margin-right:16px;}
	.sct-uvod [class*=-grid-row-3] > div.bigger span { min-height:18.5rem;}
	.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] {padding:0;}
	.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2]:last-child{margin-top:1.4rem;}
	.sct-uvod [class*=-grid-row-3] [class*=-grid-col-2] > div:last-child span:last-child {width:20rem;}
}

/* **************************************** */
/* 다크모드 (하단에 다크모드 외 css 추가 금지 */
/* **************************************** */
/* PC */

html[dark=true] {background:#121213;}
html[dark=true] .loading-header h1 a {background:url(/images/svg/soop_logo_dark.svg) 0 50% no-repeat; background-size:107px 47px;}

html[dark=true] .loading-header {background:#1b1b1c; border-color:#000;}
html[dark=true] .loading-header .loading-srh {position:absolute; top:16px; left:156px; background-image:url(/images/svg/loading_dark.svg); width:240px; height:32px; border-radius:5px;}
html[dark=true] .loading-header .loading-util > * {display:inline-block; background-image:url(/images/svg/loading_dark.svg); height:28px; border-radius:5px;}
html[dark=true] .loading-header [class*=-grid] > div span {background-image:url(/images/svg/loading_dark.svg);}
html[dark=true] [class*=-grid-] > div span {display:block; background-image:url(/images/svg/loading_dark.svg); border-radius:15px;}
html[dark=true] [class*=-grid-] > div.list span {height:24px;}
html[dark=true] .board-feed [class*=-grid-col-2] > div span {height:24px;}

html[dark=true] .update .header h1 a {background:url(/images/svg/logo_dark.svg) 0 50% no-repeat}
html[dark=true] .update .header{border-color:#282828;}
html[dark=true] .update .conts h2 {color:#e5e5e5;}
html[dark=true] .update .conts p {color:#999;}

/* MO */
html[dark=true] .m_loading-header {background:#161717;}
html[dark=true] .m_loading-header .tit,
html[dark=true] .m_loading-header .right span {background:#333;}
html[dark=true] .m_af_loading {background:#161717;}
html[dark=true] .m_af_loading div {background:#333;}