@charset "utf-8";

/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 26px;
	width: 750px;
	margin: 0 auto;
	background-color: #000000;
}

img {
	border: 0;
	vertical-align: top;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}


/* 灯泡效果 */

#bulb_off {}

#bulb_on {
	position: absolute;
	top: 1px;
	left: -75px;
	width: 496px;
	height: auto;
	opacity: 0;
}

#hand {
	position: absolute;
	bottom: -40px;
	right: 20px;
	width: 64px;
	height: 64px;
	opacity: 0;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}


/* 测试用 */


/* 主体部分 */

#main.ios {
	padding-bottom: 80px;
	margin-top: -80px;
}

#main {
	width: 750px;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background: url(../img/page_bg.jpg) center top;
}

#main .cover {
	background: url(../img/index_bg.jpg) left 70px no-repeat;
}

#bulb_on {
	position: absolute;
	top: 1px;
	left: -75px;
	width: 496px;
	height: auto;
	opacity: 0;
}

#hand {
	position: absolute;
	bottom: -40px;
	right: 20px;
	width: 64px;
	height: 64px;
	opacity: 0;
}

.animated {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.light_box {
	width: 346px;
	height: auto;
	position: absolute;
	top: 243px;
	left: 202px;
}

.loading_num {
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 32px;
	color: #ffffff;
	position: absolute;
	top: 985px;
	left: 0;
}

.loading_word {
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 32px;
	color: #ffffff;
	position: absolute;
	top: 1035px;
	left: 0;
}

#main .part:first-child {
	/*left: 0;*/
}

.part {
	width: 750px;
	height: 1334px;
	position: absolute;
	left: 100%;
	top: -70px;
	/*overflow: hidden;*/
}

#main .part:first-child {
	left: 0;
	z-index: 10;
}

.bg,
.word,
.photo,
.video {
	position: absolute;
}

.word {
	z-index: 1000;
}

.photo {
	max-width: 100%;
}

#main .personlist {}

#main .personlist> img {
	position: absolute;
}

#main .personlist .circle-box {
	position: absolute;
}

#main .personlist .item1.circle-box {
	top: 450px;
	left: 50%;
	margin-left: -125px;
	z-index: 100;
}

#main .personlist .item1.circle-box .circle-box-inner {
	box-shadow: 0 0 140px 10px #FFFFFF;
	border-radius: 50%;
	width: 280px;
	height: 280px;
	transform: scale(0.5);
	overflow: hidden;
	transform-origin: center center;
}

#main .personlist .line {
	top: 7px;
	left: 50%;
	width: 0;
	margin-left: -772px;
	opacity: 0;
}

#main .personlist .line.tran-750 {
	left: -50%;
	width: 1552px;
}

#main .personlist .circle1 {
	position: absolute;
	left: -26px;
	top: -24px;
	opacity: 0;
}

.part1 .bg {
	left: 0;
	top: 0;
}

.part1 .photo {
	left: 0;
	top: 160px;
}

.part1 .video {
	left: 77px;
	top: 669px;
}

.part1 .word {
	right: 60px;
	top: 685px;
}

.part2 .bg {
	left: 0;
	top: 0;
}

.part2 .photo {
	right: 0;
	top: 672px;
}

.part2 .video {
	left: 0;
	top: 175px;
}

.part2 .word {
	right: 55px;
	top: 125px;
}


/*______________________________________*/

.part3 .bg {
	right: 0;
	top: 0;
}

.part3 .photo {
	right: 0;
	top: 735px;
}

.part3 .video {
	left: 0;
	top: 165px;
}

.part3 .word {
	right: 65px;
	top: 75px;
}

.part4 .bg {
	left: 0;
	top: 0;
}

.part4 .photo {
	left: 0;
	top: 710px;
}

.part4 .video {
	right: 0;
	top: 190px;
}

.part4 .word {
	left: 84px;
	top: 77px;
}

.part5 .bg {
	right: 0;
	top: 0;
}

.part5 .photo {
	left: 0;
	top: 140px;
}

.part5 .video {
	left: 60px;
	top: 665px;
}

.part5 .word {
	right: 55px;
	top: 665px;
}

.part6 .bg {
	left: 0;
	top: 0;
}

.part6 .photo {
	left: 0;
	top: 127px;
}

.part6 .video {
	left: 0;
	top: 635px;
}

.part6 .word {
	right: 47px;
	top: 700px;
}

.part7 .bg {
	left: 0;
	top: 0;
}

.part7 .photo {
	right: 0;
	width: 100%;
	top: 715px;
}

.part7 .video {
	right: 0;
	top: 0;
}

.part7 .word {
	left: 45px;
	top: 160px;
}

.part8 .bg {
	right: 0;
	top: 0;
}

.part8 .photo {
	left: 0;
	top: 666px;
}

.part8 .video {
	right: 0;
	top: 230px;
}

.part8 .word {
	left: 59px;
	top: 72px;
}

.part9 .bg {
	left: 0;
	top: 0;
}

.part9 .photo {
	right: 0;
	top: 0;
}

.part9 .video {
	left: 0;
	top: 570px;
}

.part9 .word {
	right: 45px;
	top: 570px;
}

.part10 .bg {
	left: 0;
	top: 0;
}

.part10 .photo {
	left: 0;
	top: 823px;
}

.part10 .video {
	right: 0;
	top: 160px;
}

.part10 .word {
	left: 98px;
	top: 608px;
}

#hand.pointit {
	opacity: 1;
	-webkit-animation-name: pointit;
	animation-name: pointit;
	-webkit-animation-duration: 0.6s !important;
	animation-duration: 0.6s !important;
}

@-webkit-keyframes pointit {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		-webkit-transform: translate(-60px, -60px);
		transform: translate(-60px, -60px);
	}
}

@keyframes pointit {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		-webkit-transform: translate(-60px, -60px);
		transform: translate(-60px, -60px);
	}
}

.ani-circle,
.ani-circle2 {
	animation-name: circle;
	-webkit-animation-name: circle;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	-webkit-animation-direction: normal !important;
	animation-direction: normal !important;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 80s;
	animation-duration: 80s;
}

.ani-circle2 {
	animation-name: circle2;
	-webkit-animation-name: circle2;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
}

@-webkit-keyframes circle {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg))
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes circle {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes circle2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg))
	}
	100% {
		-webkit-transform: rotate(-760deg);
		transform: rotate(-760deg);
	}
}

@keyframes circle2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-760deg);
		transform: rotate(-760deg)
	}
}