/*------------------------------------*\
        $Common CSS CONTENTS
\*------------------------------------*/
/*
     * Common.........................
     * Banner
     * Tab
     * Content
     * Media Query....................

*/





/*------------------------------------
            $Common
------------------------------------*/
html{font-size: 16px;}
body {
	background-color: #191919;
	font-family: arial, sans-serif;
	font-size: 1rem;
}
.row{ max-width: 1000px; margin: 0 auto; }

.border{border: 1px solid #000;}


	/*-----display: flex-----*/
    .flex{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
	/*-----flex: 垂直置中-----*/
    .flex-align-center{   
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }




/*------------------------------------
            $Banner
------------------------------------*/
.banner{
	border-bottom: 3px solid #2bb2ff;
	padding: 0;
	position: relative;
}
.banner-heading{
	position: absolute;
	left: 5%;
	bottom: 0;
}
	.banner-number{
		color: #2bb2ff;
		display: inline-block;
		font-size: 6.25rem;
		font-weight: bold;
		font-style: italic;
		margin-right: 20px;
		margin-bottom: 0;
	}
	.banner-title{ 
		color: #fff; 
		display: inline-block;
		font-size: 2.5rem;
		font-weight: bold;
		margin-bottom: 0;
	}





/*------------------------------------
            $Tab
------------------------------------*/
.tab-wrapper{
	background-color: #646464;
	padding: 0;
	text-align: center;
	width: 20%;
	position: relative;
}
.fix{
	position: fixed;
	top: 0;
	width: 200px;
	height: 100%;
}

	.nav-tabs{ border: none; padding: 0; overflow: auto;}
		.nav-tabs > li{ 
			border-bottom: 1px solid #fff; 
			margin: 0; 
		}
			.nav-tabs > li> a{ 
				border: none;
				border-radius: 0;
				color: #fff;
				font-size: 1.25rem; 
				padding-top: 21px;
				padding-bottom: 21px;
			}
			.nav-tabs > li > a:hover{ background-color: #2bb2ff !important; }
			.nav-tabs > li > a:focus,
			.nav-tabs > li > a:active:focus{ background-color: transparent; outline: none; }

			.nav-tabs > li.active > a, 
			.nav-tabs > li.active > a:hover, 
			.nav-tabs > li.active > a:focus{
				color: #fff;
				border: none;
				border-radius: 0;
				background-color: #2bb2ff;
			}




/*------------------------------------
            $Content
------------------------------------*/
.content-wrapper{
	background-color: #323232;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 55px;
	padding-left: 55px;
	width: 80%;
}
	.video-wrapper{
		/*background-image: url(../../images/preloader.gif) ;
		background-repeat: no-repeat;
		background-position: center center;*/
		text-align: center;
	}
		.video{
			background-color: black;
			border: 1px solid #656565;
			cursor: pointer;
			margin-bottom: 5px;
		}
		.video-name{
			color: #fff;
			font-size: 0.875rem;
			text-align: left;
			margin-bottom: 26px;
		}





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 1100px) {
	.fix{ width: 20%; }
}

@media screen and (max-width: 991px) {
	.video-name{ text-align: center; }
}

@media screen and (max-width: 768px) {
	.banner-heading{
		position: absolute;
		left: 5%;
		bottom: 0;
		height: 100%;
	}
	.banner-number{	font-size: 15vw; margin-right: 3vw; }
	.banner-title{ 	font-size: 6vw; }

	.tab-wrapper, .content-wrapper{ width: 100%; }
	.nav-tabs > li> a{ 
		font-size: 1rem;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.content-wrapper{
		padding-right: 25px;
		padding-left: 25px;
	}
}

@media screen and (max-width: 500px) {
	.video-wrapper{ width: 100%; }
}