﻿header { position: relative; z-index: 2; min-height: 400px; }
header figure { display: none; }

header #hero-gallery {
	height: 400px;
	padding-top: 0px;
}
header #hero-gallery figure {
	display: block;
	
}
header figure h1, figure h2 { text-indent: -9999px; width: 1px; height: 1px; overflow: hidden; }
header figure,
header figure .hero-gallery-1 {
	width: 100%;
	height: 400px;
	margin: 0;
	background-repeat: no-repeat;
	background-position: 50% top;
	background-color:#106AA8;
}
header figure .hero-gallery-1 h1,
header figure .hero-gallery-1 h2 { text-indent: 0; width: auto; height: auto; text-align: center; margin: 0 auto; }
header figure .hero-gallery-1 h1 { width: 289px; padding-top: 8px; margin-bottom: 9px; }
header figure .hero-gallery-1 h2 { width: 750px; margin-bottom: 14px; }

/* 3个ppt的背景图及背景色（需要注意的是hero1 hero2属性保持一致,hero1和hero2同时指向第一张图,这个我也不清楚为什么。反正hero1和hero2都要用到而且都是指向第一张图。在index.html里面也是这样。改了hero1就要把hero2也同时改了。
）)
---------------------------------*/
header figure .hero-gallery-1#hero1 {
	background-image: url(../img/ppt1.jpg);
	background-color:#106AA8;
}
header figure .hero-gallery-1#hero2 {
	background-image: url(../img/ppt1.jpg);
	background-color:#106AA8;
}

header figure.hero-gallery-2 {
	background-image: url(../img/ppt2.jpg);
	background-color:#106AA8;
}
header figure.hero-gallery-3 {
	 background-image: url(../img/ppt3.jpg); 
	 background-color:#106AA8;
}
header figure.hero-gallery-4 { background-image: url(../img/ppt3.jpg); background-color:#106AA8}
header figure.hero-gallery-5 { background-image: url(../img/ppt2.jpg);background-color:#106AA8 }
header .simple-nav { height: 12px; bottom: -30px; z-index: 10; }

header figure.hero-gallery-2 a,
header figure.hero-gallery-3 a,
header figure.hero-gallery-4 a,
header figure.hero-gallery-5 a { display: block; height: 400px; }

header figure#hero-gallery-1 #hero2,
header figure#hero-gallery-2,
header figure#hero-gallery-3,
header figure#hero-gallery-4,
header figure#hero-gallery-5 { *display: none; }

header figure#MASKED-hero-gallery-1 #hero2,
header figure#MASKED-hero-gallery-2,
header figure#MASKED-hero-gallery-3,
header figure#MASKED-hero-gallery-4,
header figure#MASKED-hero-gallery-5 { *display: block; }

@media only screen and (max-device-width: 768px) {
	header { position: relative; width: 1024px; margin: 0 auto; overflow: hidden; }
	header #hero-gallery { width: 5120px; }
	header figure { width: 1024px; float: left; -webkit-transform: translateZ(0); }
	header figure .hero-gallery-1  { width: 1700px; margin: 0 0 0 -340px; }
	header .hero-gallery-5 { background-position-x: -73px; }
	header figure.hero-gallery-2 a,
	header figure.hero-gallery-3 a,
	header figure.hero-gallery-4 a,
	header figure.hero-gallery-5 a { height: 0; }
}



header .video-wrapper { width: 100%; *height: 400px; }
header .video-outgoing { width: 100%; }
header .video-incoming { position: absolute; width: 880px; left: 50%; margin-left: -440px; margin-top: 2px; }
header .video-incoming .swap-video { height: 524px; }
header .gallery-content .close { top: 5px; }
header .movie.gallery-content { padding-top: 42px; }
