* {
	padding: 				0;
	margin: 				0;
}
body {
	font-size: 				100%;
	color: 					#ffffff;
	height: 				100vh;
	max-width: 				1920px;
	background: 			#000000;
	overflow-y: 			hidden;/*关键步，隐藏竖向滚动条，无论何时都不会出现*/
	overflow-x: 			hidden;/*关键步，隐藏横向滚动条，无论何时都不会出现*/
    width: 					calc(100vw);/*应该也是关键步骤，之前老是100%来着*/
    overflow-y: 			auto;/**/
    font-family: 			"Arial","思源黑体","微软雅黑",sans-serif;
}
nav {
	background-color: 		#000000;
	padding: 				10px 30px 5px;/*0.5208333% 1.5625% 0.26041667%;*/
}
div#logo {
	float: 					left;
	vertical-align: 		middle;
}
div#logo img {
	width: 					100%;
}
ul.navbar {
	font-size: 				87.5%;
	width: 					52.0833333%; /*1000px;*/
	list-style-type: 		none;
	text-align: 			center;
	margin: 				0 auto;
	padding: 				30px 0;/*30px/1000px*/
}
ul.navbar li {
	display: 				inline-block;
	padding: 				0 50px;
}
nav a:link,nav a:visited {
	text-decoration: 		none;
	color: 					#c3c3c3;
	transition:             .3s ease-out;
}
nav a:hover, nav a:active {
	color: 					#ffffff;
}
ul.navabout {
	vertical-align: 		middle;
	font-size: 				87.5%;
	display: 				inline;
	list-style-image: 		url(../img/inform.png);
	float: 					right;
	padding: 				30px 0;
}
nav:after {
	clear: 					both;
	content: 				".";
	display: 				block;
	height: 				0;
	visibility: 			hidden;
}
div#maincontainer {
	width: 					100%;
}
div#maincontainer:after {
	clear: 					both;
	content: 				".";
	display: 				block;
	height: 				0;
	visibility: 			hidden;
}
section.wrap {
	width: 					20vw;/*1920px×20%=384px*/
	height: 				83.5vh;/*5.30_13:53 85.966736vh 卧槽，单位变成vh就好了！
	之前是一个确切的数值，例如850px，想整成80%，他么的不行。
	此数值是基于1920分辨率下，chrome浏览器最大化，算出来的。其实很不准确，但*/
	overflow: 				hidden;/*关键步*/
	float: 					left;
}
div.content {
	width: 					40vw;/*150%是相对于wrap's width，384px×150%=576px*/
	height: 				100%;/*关键步*/
	overflow-y: 			auto;/*关键步*/
	overflow-x:             hidden;/*关键步*/
}

div.img {
	width: 					40vw;/**/				
	height: 				0;
	padding-bottom: 		13.541667vw;/*这里是放img的div盒子，此处换算了下，如果384px=20vw，
	那么要保证图片的宽高比（准确来说是盒子的高跟图片的高一致），即260px，即13.5416vw*/
	position: 				relative;
}
div.img img {
	filter:                 grayscale(100%);
	will-change:            filter;
	width: 					50%;/*此处是相对与其父盒子，即div.img，
	父盒子的宽度是40vw，50%就是20vw，即浏览器全屏视口下的20%——1920px×20%=384px*/
}
div.img:hover img {
	filter:                 grayscale(0%);
}
div.img video {
	filter:                 grayscale(100%);
	will-change:            filter;
	width: 					50%;
}
div.img:hover video {
	filter:                 grayscale(0%);
}
div.content img {
	-moz-transition:    	all .8s ease-out 0s;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                :        all 1.2s ease-out 0s;
	transition:             all .8s ease-out 0s; /*这段过渡的代码非常有趣，一开始我不确定要将其加到哪里，
    是加到div.content里呢？还是加到div.content div 里呢？最后加到这里生效了。*/
}
/*div.content div.name {
	transition:             all .5s ease-out 0s;
}/**/

div.name {
	display: 				block;
	color: 					white;
	position: 				absolute;
	bottom: 				0%;
	left: 					0;
	padding: 				10px 0px 15px;
	width: 					50%;
	background: 			rgba(0,0,0,.8);
	z-index: 				10;
	/*display: 				none;/**/
	opacity: 				0;/*一开始想用上一行的代码实现,
	但当时“all”还是“opacity”呢，因此没生效，不知道为啥。故写了上一组代码。*/
	transition:             opacity .6s ease-out 0s;/**/
	text-align: 			center;
}

div.img:hover div.name {
	opacity: 				0.8;
}
span.filmname {
	/*display: 				block;/**/
	font-size: 				22px;
	font-weight: 			bold;
	margin: 				10px 0;
}
span.arrow {
	float: 					right;
	padding-right: 			20px;
}/**/

div#footer {
	padding: 				10px 30px;
	background-color: 		#000000;
	color: 					#525252;
	font-size: 				75%;
	position: 				fixed;
	bottom: 				0;
	width: 					100%;
	margin: 				0 auto;
}

div#footer:after {
	display: 				block;
	content: 				".";
	height: 				0;
	visibility: 			hidden;
	clear: 					both;
}
div#footer h3 {
	float: 					left;
}
div#footer img {
	float: 					left;
	filter: saturate(0%);
	will-change: filter;/**/
	opacity: 0.9;
}
div#footer img:hover {
	filter: saturate(100%);/**/
	opacity: 1;
}
div#footer p {
	float: 					right;
	margin: 				0 60px 0 0;/*当时真不知道这个段落为什么会有-60的偏移，没搞明白，只有先令其正向偏移60px再说*/
}

@media screen and (min-width:1024px) and (max-width: 1366px){
	span.filmname {
	/*display: 				block;/**/
	font-size: 				18px;
	font-weight: 			bold;
	}
}
@media screen and (min-width:768px) and (max-width: 1023px){
	span.filmname {
	/*display: 				block;/**/
	font-size: 				16px;
	font-weight: 			bold;
	}
}
@media screen and (max-width: 767px){
	span.filmname {
	/*display: 				block;/**/
	font-size: 				14px;
	font-weight: 			normal;
	}
}