* {padding: 0;margin: 0;} 

		body,html{ height:100%; width:100%; color:gray; }

		#bottom {			
			float: bottom;
			height: 120px;
			bottom: 0px;
			text-align:center;
		}
		#content {
			float: top;
			height: auto;
			top: 0px;
			bottom: 120px;
		}
		#contentInner {			
			overflow: hidden;
			background: radial-gradient(#666, #000);
			height: 100%;
			width: 100%;
			position: absolute;
		}
		
		#bottom,
		#content {
			width: 100%;
			z-index:1;
			position: absolute;
			background: radial-gradient(#666, #000);
		}

		#cv {
			/*
			这里如果设置高宽，会使得canvas中的图像模糊。
			width: 100%;
			height: 100%;
			*/
			object-fit: contain;
			/* make it centre */
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
		}

		img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
			/* make it centre */
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			background-color:rgba(51,51,51,0);
		}

		#content1 {
			width: 100%;
			height: 100%;
			z-index:3;			
			background-color:rgba(51,51,51,0.7);
			position: absolute;
		}

		#contentInner1 {
			z-index:3;
 			overflow: hidden;
			height: 98%;
			width: 98%;
			position: absolute;
			background-color:rgba(51,51,51,0);
			/* make it centre */
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;		
		}

		#scroll_div {
			z-index:1;
			overflow: hidden;
			position: absolute;
			background-color:rgba(51,51,51,0);
			width: 100%;
			height: 120px;
		    white-space: nowrap;
			/* make it centre */
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;		
		}

		img.mat3 {
			-moz-box-sizing: border-box; box-sizing: border-box;
			/*    
			width: 100%; 
			height: auto; 
			*/
			display: block; 
			padding: 1%;
			background-color: #A67B5B; background-image: url(../images/cardboard.jpg);
			background-repeat: no-repeat; background-size: cover;
			border: 6px double #483C32;
			box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,
			0 0 0 11px rgb(180, 130, 90),
			0 0 30px rgba(0,0,0,0.8) inset;
			-webkit-box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,
			0 0 0 11px rgb(180, 130, 90),
			0 0 30px rgba(0,0,0,0.8) inset,
			0 30px 20px rgba(0,0,0,0.3);
			outline: 2px solid #333; outline-offset: 0px;
		}     

		/* gallery */
		div.gallery {
			border: 0px solid #ccc;
			text-align:center;
			display: inline;
			width: 214px;
		}

		div.gallery:hover {
			border: 1px solid #777;
		}

		div.gallery img {
			width: auto;
			max-width: 100%;
			height: 120px;  /* auto */
			position: relative;
		}
/*
		* {
			box-sizing: border-box;
		}


		@media only screen and (max-width: 700px) {
			.responsive {
				width: 49.99999%;
				margin: 6px 0;
			}
		}

		@media only screen and (max-width: 500px) {
			.responsive {
				width: 100%;
			}
		}
*/
		.clearfix:after {
			content: "";
			display: table;
			clear: both;
		}

		#scroll_begin, #scroll_end {
			display:inline;
		}