@import url("innerCommon.css");

/*innerMedia*/
.innerMedia{
	position:relative;
	width:100%;	
	padding-top:20px;
}
innerMediaWrap{
	position:relative;
	width:100%;
	margin:0 auto;
	max-width:1200px;
	min-height:400px;
	padding:50px 0;	
}

.innerMedia .mediaCon{
	width:100%;	
	padding:50px 0;
}
.innerMedia .mediaCon ul.mediaList{
	width:100%;
	min-height:300px;
}
.innerMedia .mediaCon ul.mediaList li.mediaList_item{
	position:relative;	
	width:31%;
	float:left;
	margin-right: 2%;
	padding:0;
	box-shadow: 0 0 10px #000;
}

li.mediaList_item .mediaItemWrap{
	width:100%;	
}
li.mediaList_item .mediaItemWrap .mediaItemImg .mediaCov{
	position:absolute;
	width:100%;
	/*background:url('../images/bg_blackT50.png') repeat center top;*/
	z-index:10;
}
li.mediaList_item{
	border:2px solid #000;
	
}
li.mediaList_item:hover{
	border:2px solid #00fcff;
}
li.mediaList_item .mediaItemWrap .mediaItemImg .mediaCov a{
	position:relative;
	width:100%;
	height:auto;
}
li.mediaList_item .mediaItemWrap .mediaItemImg .mediaCov a img{
	width:100%;
	height:auto;
}
li.mediaList_item .mediaItemWrap .mediaItemImg .mediaM img{
	width:100%;
	height:auto;
}

li.mediaList_item .mediaItemWrap .mediaItemImg .mediaM iframe{
	position:relative;
	width:100%;
	min-height:300px;
	z-index:9;	
}

li.mediaList_item .mediaItemWrap .mediaInfo{
	width:100%;
	text-align:center;	
}
li.mediaList_item .mediaItemWrap .mediaInfo .mediaName{
	width:100%;
	height:30px;
	background:#111316;
}
li.mediaList_item .mediaItemWrap .mediaInfo .mediaName .gameC{
	position:absolute;
	width:100%;
	right:0;
	text-align:right;
	padding-right:5px;
	margin-top:5px;
}
li.mediaList_item .mediaItemWrap .mediaInfo .mediaName h5{
	width:100%;	
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:18px;
}
li.mediaList_item .mediaItemWrap .mediaInfo .mediaDate{
	width:100%;
	height:30px;
	line-height:30px;
	background:#000000;
	font-size:13px;
	color:#38afc8;
}

@media only screen and (max-width:1400px){
li.mediaList_item .mediaItemWrap .mediaInfo .mediaName h5{
	width:100%;	
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:14px;
}
.innerMainWrap{
	position:relative;
	width:100%;
	margin:0 auto;
	max-width:1200px;
	min-height:400px;
	padding:50px 0;	
}	
}
@media only screen and (max-width:1000px){
.innerMainWrap{
	position:relative;
	width:100%;
	margin:0 auto;
	max-width:1200px;
	min-height:400px;
	padding:20px 0;	
}
li.mediaList_item .mediaItemWrap .mediaInfo .mediaName h5{
	width:100%;	
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:12px;
}
li.mediaList_item .mediaItemWrap .mediaInfo .mediaDate{
	width:100%;
	height:30px;
	line-height:30px;
	background:#000000;
	font-size:11px;
	color:#38afc8;
}	
}

/*mediaTabs*/
.container {
	width: 100%;
	margin:0 auto;

}

.tabs {
	display: flex;
	position: relative;
	/*border-bottom:4px solid #3e8cee;*/
}

.tab {
	padding: 12px 20px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
	font-size: 16px;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.3);
}

.tab:hover {
	color: white;
	background: rgba(255, 255, 255, 0.2);
}

.tab.active {
	color: white;
}
.tab.tab01.active{
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */	
}
.tab.tab02.active{
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */	
}
.tab.tab03.active{
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */	
}
.tab a{position:relative;width:200px; height:40px; line-height:40px; font-size:24px; }
.tab .twitch{
	background:url('../images/media/mediaC_twitch_off.png') no-repeat center center;	
}
.tab .twitch:hover, .tab.active .twitch{
	background:url('../images/media/mediaC_twitch_on.png') no-repeat center center;	
}
.tab .youtube{
	background:url('../images/media/mediaC_youtube_off.png') no-repeat center center;	
}
.tab .youtube:hover, .tab.active .youtube{
	background:url('../images/media/mediaC_youtube_on.png') no-repeat center center;	
}
.tab .chzzk{
	background:url('../images/media/mediaC_chzzk_off.png') no-repeat center center;	
}
.tab .chzzk:hover, .tab.active .chzzk{
	background:url('../images/media/mediaC_chzzk_on.png') no-repeat center center;	
}
.tab-content {
	display: none;
	animation: fadeIn 0.5s ease;
}

.tab-content.active {
	display: block;
}

.tab-indicator {
	position: absolute;
	bottom: 0;
	height: 4px;
	background: #15ffd0;
	transition: all 0.3s ease;
	/*border-radius: 4px 4px 0 0;*/
	z-index:100;
}
.tab-bottomBorder{
	position: absolute;
	width:100%;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */
	z-index:10;
}




@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.tabs {
		flex-direction: column;
	}
	
	.tab {
		justify-content: center;
	}
	
	.tab-indicator {
		display: none;
	}
}

/*innerRank*/
.innerRank{
	padding-top:20px;
}
.rankHeader{
	width:100%;	
}
.rankHeader ul{
	
}

.rankCon{
	width:100%;
	margin-top:50px;	
}
.rankCon .sesonC{
	position:relative;
	width:100%;
	text-align:left;
	margin:20px 0 0 10px;
}
.rankCon .sesonC h6{
	float:left;
	height:36px;
	line-height:36px;
	font-size:14px;
	margin-right:10px;
	padding:0 10px;
	background:#23344b;
}
.rankCon .sesonC .seasonSel{
	height:36px;
	line-height:36px;
	font-size:14px;
	color:#fff;
	padding:0 10px;
	background:#396096;	
	border:1px solid #00fcff;
	cursor:pointer;
}
.rankCon .sesonC .seasonSel option{
	border-radius:0;
	border:none;
	cursor:pointer;
}

.rankTable{
	margin-top:30px;
	padding-bottom:50px;
	background:url(../images/bg_blackT50.png) repeat center top;
}
.rankTit{
	width:100%;
	padding:30px 0 20px 0;
}
.rankTit h1{
	font-size:48px;
	font-weight:bold;
	line-height:48px;
	color:#fff;	
}
.rankTit p{
	font-size:18px;
	color:#00d2ff;
	text-transform:uppercase;
	margin-top:10px;
	padding-top:10px;
}
.rankTableList{
	border-top:2px solid #00fcff;
	border-bottom:1px solid #00fcff;
}

.rankTableList .table {
	width: 100%;
	border-collapse: collapse;
}

.rankTableList thead {
	background-color: #f8f9fa;
	text-transform:uppercase;
}
.rankTableList thead i{
	background-size:200%;
}
.rankTableList th {
	padding: 16px 8px;
	text-align: left;
	font-weight: 600;
	color: #fff;
	font-size:18px;
	cursor: pointer;
	transition: background-color 0.3s;
	background:#000;
	text-align:center;
}

.rankTableList th:hover {
	background-color: #111316;
}

.rankTableList th i {
	margin-left: 5px;
	font-size: 1rem;
}

.rankTableList td {
	padding: 16px;
	border-bottom:none;
	font-size:16px;
}

.rankTableList tr:nth-child(even) {
	background-color: #111316;
}

.rankTableList tr:hover {
	background-color: #3c444f;
}

.rankTableList .rank {
	text-align: center;
	width: 80px;
	color: #fff;
	font-size:24px;
	font-family:'UPBOLTERS';
}

.rankTableList .rank-1 {
	background-color:none;
	border-radius: 0;
	width: 20px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size:30px;
	font-family:'UPBOLTERS';
	border-bottom:5px solid #15ffd0;

}

.rankTableList .rank-2 {
	background-color:none;
	border-radius: 0;
	width: 20px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size:30px;
	font-family:'UPBOLTERS';
	border-bottom:5px solid #15ffd0;
}

.rankTableList .rank-3 {
	background-color:none;
	border-radius: 0;
	width: 20px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size:30px;
	font-family:'UPBOLTERS';
	border-bottom:5px solid #15ffd0;
}

.rankTableList .team {
	display: flex;
	align-items: center;
	font-size:16px;
}

.rankTableList .team-logo {
	width: 40px;
	height: 40px;
	background: #273e5d url(../images/teamLogo/versus_2_c_01.png) no-repeat center top;
	background-size:cover;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	margin-right: 15px;
	overflow:hidden;
}
.rankTableList .team-logo .team-logo-on{
	background: #526080;
}
.rankTableList .team-logo img{
	width:100%;	
}

.rankTableList .team-name{
	font-size:16px;
	font-weight:bold;	
}

.rankTableList .score {
	font-weight: bold;
	color: #fff;
}

.rankTableList .compare {
	text-align: center;
	width: 80px;
}

.rankTableList .compare-up {
	color: #28a745;
}

.rankTableList .compare-down {
	color: #dc3545;
}

.rankTableList .compare-steady {
	color: #6c757d;
}

.rankTableList .trend {
	text-align: center;
	width: 80px;
}

.rankTableList .trend-up {
	color: #28a745;
}

.rankTableList .trend-down {
	color: #dc3545;
}

.rankTableList .trend-steady {
	color: #6c757d;
}



.rankTableList .playoff-marker {
	width: 10px;
	height: 10px;
	background-color: #28a745;
	border-radius: 50%;
	display: inline-block;
	margin-left: 5px;
}


.rankTableList .legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
	color: white;
}

.rankTableList .legend-item {
	display: flex;
	align-items: center;
	margin-right: 15px;
}

.rankTableList .legend-color {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 8px;
}

.rankTips{
	margin-top:20px;	
}
.rankTips p{
	color:#CCC;
	font-size:16px;
}

@media (max-width: 768px) {
.rankTableList th {
	padding: 16px 8px;
	text-align: left;
	font-weight: 600;
	color: #fff;
	font-size:14px;
	cursor: pointer;
	transition: background-color 0.3s;
	background:#000;
	text-align:center;
}

.rankTableList	th, td {
		padding: 12px 8px;
	}

.rankTableList .team {
	display: flex;
	align-items: center;
	font-size:13px;
}

.rankTableList .team-logo {
	width: 20px;
	height: 20px;
}	
.rankTableList	.team-logo {
		margin-right: 8px;
	}
	
.rankTableList	.search-box input {
		width: 150px;
	}
}

@media (max-width: 600px) {
	
.rankTableList	h1 {
		font-size: 2rem;
	}
}



/*rankTabs*/
.container2 {
	width: 100%;
	margin:0 auto;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.tabs2 {
	display: flex;
	position: relative;
	/*border-bottom:4px solid #3e8cee;*/
}

.tab2 {
	width:100%;
	padding: 12px 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.3);
	color:#999;
}

.tab2:hover {
	color: white;
	background: rgba(255, 255, 255, 0.2);
}

.tab2 a{position:relative;width:100%; height:40px; line-height:40px; font-size:24px; font-weight:bold; text-align:center;color:#666;}
.tab2 a:hover{
	color:#fff;	
}
.tab2.active {
	color: white;
}
.tab2.active a{
	color: white;
}
.tab2.tab01.active{
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */	
}
.tab2.tab02.active{
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */	
}



.tab2-content {
	display: none;
	animation: fadeIn 0.5s ease;
}

.tab2-content.active {
	display: block;
}

.tab2-indicator {
	position: absolute;
	bottom: 0;
	height: 4px;
	background: #15ffd0;
	transition: all 0.3s ease;
	/*border-radius: 4px 4px 0 0;*/
	z-index:100;
}
.tab2-bottomBorder{
	position: absolute;
	width:100%;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, #3e8cee 0%, #21c2e4 100%);  /* 渐变色 */
	z-index:10;
}



@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.tabs2 {
		flex-direction: column;
	}
	
	.tab2 {
		justify-content: center;
	}
	
	.tab2-indicator {
		display: none;
	}
}


/*innerMember*/
.memberHeader{
	width:100%;	
	
}
.memberHeader ul{
	
}

.memberCon{
	width:100%;
	margin-top:0px;	
	animation: fadeIn 0.5s ease;
}
.memberCon .sesonC{
	position:relative;
	width:100%;
	text-align:left;
	margin:20px 0 0 10px;
}
.memberCon .sesonC h6{
	float:left;
	height:36px;
	line-height:36px;
	font-size:14px;
	margin-right:10px;
	padding:0 10px;
	background:#23344b;
}
.memberCon .sesonC .seasonSel{
	height:36px;
	line-height:36px;
	font-size:14px;
	color:#fff;
	padding:0 10px;
	background:#396096;	
	border:1px solid #00fcff;
	cursor:pointer;
}
.memberCon .sesonC .seasonSel option{
	border-radius:0;
	border:none;
	cursor:pointer;
}

.memberTable{
	margin-top:30px;
	padding-bottom:50px;
	background:url(../images/bg_blackT50.png) repeat center top;
}
.memberTit{
	width:100%;
	padding:30px 0 20px 0;
}
.memberTit h1{
	font-size:48px;
	font-weight:bold;
	line-height:48px;
	color:#fff;	
}
.memberTit p{
	font-size:18px;
	color:#00d2ff;
	text-transform:uppercase;
	margin-top:10px;
	padding-top:10px;
}
.memberTableList{
	border-top:2px solid #00fcff;
	border-bottom:1px solid #00fcff;
}

.memberTableList .table {
	width: 100%;
	border-collapse: collapse;
}

.memberTableList thead {
	background-color: #f8f9fa;
	text-transform:uppercase;
}
.memberTableList thead i{
	background-size:200%;
}
.memberTableList th {
	padding: 16px 8px;
	text-align: left;
	font-weight: 600;
	color: #fff;
	font-size:18px;
	cursor: pointer;
	transition: background-color 0.3s;
	background:#000;
	text-align:center;
}

.memberTableList th:hover {
	background-color: #111316;
}

.memberTableList th i {
	margin-left: 5px;
	font-size: 1rem;
}

.memberTableList td {
	padding: 16px;
	border-bottom:none;
	font-size:16px;
}

.memberTableList tr:nth-child(even) {
	background-color: #111316;
}

.memberTableList tr:hover {
	background-color: #3c444f;
}

.memberTableList .member {
	text-align: center;
	width: 80px;
	color: #fff;
	font-size:24px;
	font-family:'UPBOLTERS';
}

.memberTableList .member-1 {
	background-color:none;
	border-radius: 0;
	width: 20px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size:30px;
	font-family:'UPBOLTERS';
	border-bottom:5px solid #15ffd0;

}

.memberTableList .member-2 {
	background-color:none;
	border-radius: 0;
	width: 20px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size:30px;
	font-family:'UPBOLTERS';
	border-bottom:5px solid #15ffd0;
}

.memberTableList .member-3 {
	background-color:none;
	border-radius: 0;
	width: 20px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size:30px;
	font-family:'UPBOLTERS';
	border-bottom:5px solid #15ffd0;
}

.memberTableList .team {
	display: flex;
	align-items: center;
	font-size:16px;
	text-align:left;
}

.memberTableList .team-logo {
	width: 40px;
	height: 40px;
	background: #273e5d url(../images/teamLogo/versus_2_c_01.png) no-repeat center top;
	background-size:100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	margin-right: 15px;
	overflow:hidden;
}
.memberTableList .team-logo .team-logo-on{
	background: #526080;
}
.memberTableList .team-logo img{
	width:100%;	
}

.memberTableList .team-name{
	font-size:16px;
	font-weight:bold;	
} 

.memberTableList .score {
	color: #fff;
}

.memberTableList .compare {
	text-align: center;
	width: 80px;
}

.memberTableList .compare-up {
	color: #28a745;
}

.memberTableList .compare-down {
	color: #dc3545;
}

.memberTableList .compare-steady {
	color: #6c757d;
}

.memberTableList .trend {
	text-align: center;
	width: 80px;
}

.memberTableList .trend-up {
	color: #28a745;
}

.memberTableList .trend-down {
	color: #dc3545;
}

.memberTableList .trend-steady {
	color: #6c757d;
}



.memberTableList .playoff-marker {
	width: 10px;
	height: 10px;
	background-color: #28a745;
	border-radius: 50%;
	display: inline-block;
	margin-left: 5px;
}


.memberTableList .legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
	color: white;
}

.memberTableList .legend-item {
	display: flex;
	align-items: center;
	margin-right: 15px;
}

.memberTableList .legend-color {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 8px;
}

.memberTips{
	margin-top:20px;	
}
.memberTips p{
	color:#CCC;
	font-size:16px;
}

@media (max-width: 768px) {
.memberTableList th {
	padding: 16px 8px;
	text-align: left;
	font-weight: 600;
	color: #fff;
	font-size:14px;
	cursor: pointer;
	transition: background-color 0.3s;
	background:#000;
	text-align:center;
}

.memberTableList th, td {
		padding: 12px 8px;
	}
	
.memberTableList .team-logo {
		width:20px;
		height:20px;
		margin-right: 8px;
	}
	
.memberTableList .search-box input {
		width: 150px;
	}
}

@media (max-width: 600px) {
	
.memberTableList	h1 {
		font-size: 2rem;
	}
}