/* 공통 */
@font-face {
	font-family: 'SUIT-Regular';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
#livestream_wrap { font-size:15px; font-family: 'SUIT-Regular'; width:100%; height:auto; overflow:hidden; margin:0; background:#1f1f1f; }
#livestream_wrap li { list-style:none; }
#livestream_wrap a { cursor:pointer; text-decoration:none; }

@media all and (max-width:620px) {
	#livestream_wrap { clear:both; font-size:13px !important; /*padding-top:30%;*/ }
	/*.fixed { position:fixed; top:0; left:0; width:100%; z-index:1; }*/
}

/* 1채널 플레이어 */
#player_1ch_area { width:100%; height:auto; overflow:hidden; }
#player_1ch_area .player1 { position:relative; width:100%; padding-bottom:56.25%; overflow:hidden; }
#player_1ch_area .player1 iframe { position:absolute; width:100%; height:100%; }
#player_1ch_area .player_title1 { width:100%; height:36px; line-height:36px; text-align:center; color:#fff; }

/* 2채널 플레이어 */
#player_2ch_area { width:100%; height:auto; overflow:hidden; }
#player_2ch_area .player1 { position:relative; width:calc(50% - 5px); float:left; padding-bottom:28%; }
#player_2ch_area .player1 iframe { position:absolute; width:100%; height:100%; }
#player_2ch_area .player2 { position:relative; width:calc(50% - 5px); float:left; margin-left:10px; padding-bottom:28%; }
#player_2ch_area .player2 iframe { position:absolute; width:100%; height:100%; }
#player_2ch_area .player_title1 { width:calc(50% - 5px); float:left; height:36px; line-height:36px; text-align:center; color:#fff; }
#player_2ch_area .player_title2 { width:calc(50% - 5px); float:left; margin-left:10px; height:36px; line-height:36px; text-align:center; color:#fff; }

/* 3채널 플레이어 */
#player_3ch_area { width:100%; height:auto; overflow:hidden; }
#player_3ch_area .player1 { position:relative; width:100%; padding-bottom:56.25%; overflow:hidden; }
#player_3ch_area .player1 iframe { position:absolute; width:100%; height:100%; }
#player_3ch_area .player_title1 { width:100%; height:36px; line-height:36px; text-align:center; color:#fff; }
#player_3ch_area .player2 { position:relative; width:calc(50% - 5px); float:left; padding-bottom:28%; }
#player_3ch_area .player2 iframe { position:absolute; width:100%; height:100%; }
#player_3ch_area .player3 { position:relative; width:calc(50% - 5px); float:left; margin-left:10px; padding-bottom:28%; }
#player_3ch_area .player3 iframe { position:absolute; width:100%; height:100%; }
#player_3ch_area .player_title2 { width:calc(50% - 5px); float:left; height:36px; line-height:36px; text-align:center; color:#fff; }
#player_3ch_area .player_title3 { width:calc(50% - 5px); float:left; margin-left:10px; height:36px; line-height:36px; text-align:center; color:#fff; }

/* 4채널 플레이어 */
#player_4ch_area { width:100%; height:auto; overflow:hidden; }
#player_4ch_area .player1 { position:relative; width:calc(50% - 5px); float:left; padding-bottom:28%; }
#player_4ch_area .player1 iframe { position:absolute; width:100%; height:100%; }
#player_4ch_area .player2 { position:relative; width:calc(50% - 5px); float:left; margin-left:10px; padding-bottom:28%; }
#player_4ch_area .player2 iframe { position:absolute; width:100%; height:100%; }
#player_4ch_area .player3 { position:relative; width:calc(50% - 5px); float:left; padding-bottom:28%; }
#player_4ch_area .player3 iframe { position:absolute; width:100%; height:100%; }
#player_4ch_area .player4 { position:relative; width:calc(50% - 5px); float:left; margin-left:10px; padding-bottom:28%; }
#player_4ch_area .player4 iframe { position:absolute; width:100%; height:100%; }

#player_4ch_area .player_title1 { width:calc(50% - 5px); float:left; height:36px; line-height:36px; text-align:center; color:#fff; }
#player_4ch_area .player_title2 { width:calc(50% - 5px); float:left; margin-left:10px; height:36px; line-height:36px; text-align:center; color:#fff; }
#player_4ch_area .player_title3 { width:calc(50% - 5px); float:left; height:36px; line-height:36px; text-align:center; color:#fff; }
#player_4ch_area .player_title4 { width:calc(50% - 5px); float:left; margin-left:10px; height:36px; line-height:36px; text-align:center; color:#fff; }



/* 스포츠중계 리스트 */

/* ==========================================================================
   스포츠중계 기본 레이아웃 설정
========================================================================== */
#sports_list_area .sports_on_list {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
}

/* ==========================================================================
   방송중 상단 타이틀 영역
========================================================================== */
#sports_list_area .on_list_title {
    width: 100%;
    height: 34px;
    line-height: 34px;
}

#sports_list_area .on_list_title .title {
    padding-left: 5px;
}

#sports_list_area .on_list_title .title span.text1 {
    color: #00ffcc;
    font-size: 17px;
    margin: 0;
}

#sports_list_area .on_list_title .title span.text2 {
    color: #fff;
    font-size: 17px;
    margin: 0;
}

/* ==========================================================================
   방송 준비중 상단 타이틀 영역
========================================================================== */
#sports_list_area .sports_off_list {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
}

#sports_list_area .off_list_title {
    width: 100%;
	height: 34px;
    line-height: 34px;
}

#sports_list_area .off_list_title .title {
    padding-left: 5px;
}

#sports_list_area .off_list_title .title span.text1 {
    color: #fff;
    font-size: 17px;
    margin: 0;
}

#sports_list_area .off_list_title .title span.text2 {
    color: #fff;
    font-size: 17px;
    margin: 0;
}

/* ==========================================================================  
   스포츠중계 공통 테이블 스타일  
========================================================================== */
#sports_list_area .sports_on_list table.table-p1,
#sports_list_area .sports_off_list table.table-p1 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 5px;
    overflow: hidden;
}

/* 헤더 공통 */
#sports_list_area .sports_on_list table.table-p1 thead th,
#sports_list_area .sports_off_list table.table-p1 thead th {
    padding: 15px 5px;
    background: #262626;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: 1px solid #1f1f1f;
}

/* 바디 공통 */
#sports_list_area .sports_on_list table.table-p1 tbody td,
#sports_list_area .sports_off_list table.table-p1 tbody td {
    padding: 13px 5px;
    background: #2e2e2e;
    color: #fff;
    text-align: center;
    border: 1px solid #1f1f1f;
}

/* ==========================================================================  
   스포츠중계 표 공통 컬럼 스타일  
========================================================================== */
#sports_list_area .cat {
    width: 6%;
    min-width: 60px;
}
#sports_list_area .cat img {
    width: 100%;
    max-width: 40px;
    -webkit-filter: brightness(100%);
}

#sports_list_area .datetime {
    width: 6%;
    min-width: 60px;
}

#sports_list_area .thumb { width:100px; height:56px; margin:0 !important; padding:0 !important; }
#sports_list_area .thumb img { width:100%; object-fit:fill; display:block; }

#sports_list_area .league {
    width: 12%;
    min-width: 120px;
}

#sports_list_area .noteam {
    width: 100%;
    text-align: center;
}

#sports_list_area .bold span {
    color: #00ffcc !important;
}

/* 테이블 모서리 라운딩 */
table.table-p1 thead th:first-child {
    border-top-left-radius: 5px;
}
table.table-p1 thead th:last-child {
    border-top-right-radius: 5px;
}
table.table-p1 tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
table.table-p1 tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}


/* ==========================================================================
   중계 상태 버튼 (On/Off)
========================================================================== */
#sports_list_area .stat {
    width: 14%;
    min-width: 140px;
}
#sports_list_area .stat span.on {
    width: 100%;
    background: #00ffcc;
    color: #000;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
}
#sports_list_area .stat span.off {
    width: 100%;
    background: #232323;
    color: #c5c8cd;
    border-radius: 6px;
    padding: 3px 8px;
}

#sports_list_area .stat span.mtbtn1_on,
#sports_list_area .stat span.mtbtn2_on,
#sports_list_area .stat span.mtbtn3_on,
#sports_list_area .stat span.mtbtn4_on {
    width: 24px;
    height: 26px;
    background: #00ffcc;
    color: #000;
    border-radius: 6px;
    margin: 0 1px;
    padding: 0;
    line-height: 26px;
    text-align: center;
    display: inline-block;
}

/* ==========================================================================
   스포츠 리스트 반응형 정리
========================================================================== */
@media all and (max-width:900px) {
    #sports_list_area .league {
        display:none;
	}
}

@media all and (max-width:620px) {
    #sports_list_area {
        font-size: 12px;
    }

	#sports_list_area .multi { display:none; }

	#sports_list_area .multibtn { display:none; }

	/* ---- 모바일표 모서리 둥글게 ---- */
	#sports_list_area .sports_on_list table.table-p1 thead tr:first-child th:nth-child(5) {
        border-top-right-radius: 10px;
    }
    #sports_list_area .sports_on_list table.table-p1 tbody tr:last-child td:nth-child(5) {
        border-bottom-right-radius: 10px;
    }
	#sports_list_area .sports_off_list table.table-p1 thead tr:first-child th:nth-child(5) {
        border-top-right-radius: 10px;
    }
    #sports_list_area .sports_off_list table.table-p1 tbody tr:last-child td:nth-child(5) {
        border-bottom-right-radius: 10px;
    }

	#sports_list_area .cat {
		width: 4%;
		min-width: 40px;
	}
	#sports_list_area .cat img {
		width: 100%;
		max-width: 30px;
		-webkit-filter: brightness(100%);
	}
	#sports_list_area .datetime {
		width: 4%;
		min-width: 40px;
	}

	#sports_list_area .thumb { width:80px; }
	#sports_list_area .thumb img { width:100%; object-fit:fill; display:block; }

	#sports_list_area .stat {
		width: 7%;
		min-width: 70px;
	}
}