@charset "utf-8";
/* CSS Document */
body{
	background-color: #e8f3ffe0;
}
#gbj_background {
	background-image: url(http://www.chinadra.com/ziqi/Gbj_photo/MyLove/background.png);
}
#gbj_staff, #gbj_cast {
	list-style: none;
	position: relative;
	z-index: 12;
	color: #FFF;
	width: 300px;
	opacity: 0;
}
#gbj_cast {
	top: -210px;
	text-align: left;
	left: 540px;
}
#gbj_staff {
	top: 260px;
	text-align: right;
	left: 560px;
}
#gbj_table1 {
	width: 1008px;
	height: 634px;
	opacity: 0;
	position: relative;
	z-index: 10;
    left: -120px;
	border-style: groove;
    border-color: white;
}
#img_cy, #img_mj {
	position: absolute;
	top: 300px;
	left: 35%;
	z-index: 8;
	opacity: 0;
}
#href_bilibili, #href_missevan, #href_baidudisk, #href_chinadra {
	list-style: none;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.6);
	position: relative;
	top: -330px;
	z-index: 12;
	margin-bottom: -35px;
	opacity:0;
}
#href_chinadra {
	right: 300px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 17px;
	    border-style: inset;
}

#href_missevan {
	right: 110px;
	width: 90px;
	height: 90px;
	line-height: 90px;
	font-size: 15px;
	    border-style: outset;
}
#href_bilibili {
	right: 410px;
	width: 80px;
	height: 80px;
	line-height: 80px;
	font-size: 15px;
	border-style: outset;
}
#href_baidudisk {
	right: 220px;
	width: 130px;
	height: 130px;
	line-height: 130px;
	font-size: 22px;
	border-style: inset;
}
li a:hover, li a:link, li a:active, li a:visited{
	text-decoration:none;
}
.link_color{
	color: #F00;
}
.gbj_sh{
	position:relative;
	top:-100px;
}
@media screen and (min-width: 1200px) {
#img_cy, #img_mj {
	left: 40%;
}
}
/*绑定动画阶段css*/
#img_cy {
	animation: cangyun 3s linear 0s 1;
	-moz-animation: cangyun 3s linear 0s 1;	/* Firefox */
	-webkit-animation: cangyun 3s linear 0s 1;	/* Safari 和 Chrome */
	-o-animation: cangyun 3s linear 0s 1;	/* Opera */
}
#img_mj {
	animation: mingjiao 3.5s linear 2.9s 1;
	-moz-animation: mingjiao 3.5s linear 2.9s 1;	/* Firefox */
	-webkit-animation: mingjiao 3.5s linear 2.9s 1;	/* Safari 和 Chrome */
	-o-animation: mingjiao 3.5s linear 2.9s 1;	/* Opera */
}
#gbj_table1 {
	animation: table1 3s linear 6.5s 1 forwards;
	-moz-animation: table1 3s linear 6.5s 1 forwards;	/* Firefox */
	-webkit-animation: table1 3s linear 6.5s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: table1 3s linear 6.5s 1 forwards;	/* Opera */
}
#gbj_staff {
	animation: staff 2s linear 8.5s 1 forwards;
	-moz-animation: staff 2s linear 8.5s 1 forwards;	/* Firefox */
	-webkit-animation: staff 2s linear 8.5s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: staff 2s linear 8.5s 1 forwards;	/* Opera */
}
#gbj_cast {
	animation: cast 2s linear 8.5s 1 forwards;
	-moz-animation: cast 2s linear 8.5s 1 forwards;	/* Firefox */
	-webkit-animation: cast 2s linear 8.5s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: cast 2s linear 8.5s 1 forwards;	/* Opera */
}
#href_chinadra {
	animation: chinadra 2s linear 9s 1 forwards;
	-moz-animation: chinadra 2s linear 9s 1 forwards;	/* Firefox */
	-webkit-animation: chinadra 2s linear 9s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: chinadra 2s linear 9s 1 forwards;	/* Opera */
}

#href_missevan {
	animation: missevan 2s linear 9.4s 1 forwards;
	-moz-animation: missevan 2s linear 9.4s 1 forwards;	/* Firefox */
	-webkit-animation: missevan 2s linear 9.4s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: missevan 2s linear 9.4s 1 forwards;	/* Opera */
}
#href_bilibili {
	animation: bilibili 2s linear 9.9s 1 forwards;
	-moz-animation: bilibili 2s linear 9.9s 1 forwards;	/* Firefox */
	-webkit-animation: bilibili 2s linear 9.9s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: bilibili 2s linear 9.9s 1 forwards;	/* Opera */
}
#href_baidudisk {
	animation: baidudisk 2s linear 10.2s 1 forwards;
	-moz-animation: baidudisk 2s linear 10.2s 1 forwards;	/* Firefox */
	-webkit-animation: baidudisk 2s linear 10.2s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: baidudisk 2s linear 10.2s 1 forwards;	/* Opera */
}
.link_color {
	animation: linkcolor 8s linear 9.2s infinite alternate forwards;
	-moz-animation: linkcolor 8s linear 9.2s infinite alternate forwards;	/* Firefox */
	-webkit-animation: linkcolor 8s linear 9.2s infinite alternate forwards;	/* Safari 和 Chrome */
	-o-animation: linkcolor 8s linear 9.2s infinite alternate forwards;	/* Opera */
}
.gbj_sm{
	position:relative;
	top:-150px;
}
/*动画执行阶段*/
/*苍云logo*/
@keyframes cangyun {
0% {
transform:rotateY(0deg);
opacity:0;
}
25% {
transform:rotateY(45deg);
opacity:1;
}
50% {
transform:rotateY(90deg);
opacity:1;
}
75% {
transform:rotateY(135deg);
opacity:1;
}
95% {
transform:rotateY(180deg);
opacity:0.2;
}
100% {
transform:rotateY(195deg);
opacity:0;
}
}
 @-moz-keyframes cangyun /* Firefox */ {
0% {
transform:rotateY(0deg);
opacity:0;
}
25% {
transform:rotateY(45deg);
opacity:1;
}
50% {
transform:rotateY(90deg);
opacity:1;
}
75% {
transform:rotateY(135deg);
opacity:1;
}
95% {
transform:rotateY(180deg);
opacity:0.2;
}
100% {
transform:rotateY(195deg);
opacity:0;
}
}
 @-webkit-keyframes cangyun /* Safari 和 Chrome */ {
0% {
transform:rotateY(0deg);
opacity:0;
}
25% {
transform:rotateY(45deg);
opacity:1;
}
50% {
transform:rotateY(90deg);
opacity:1;
}
75% {
transform:rotateY(135deg);
opacity:1;
}
95% {
transform:rotateY(180deg);
opacity:0.2;
}
100% {
transform:rotateY(195deg);
opacity:0;
}
}
 @-o-keyframes cangyun /* Opera */ {
0% {
transform:rotateY(0deg);
opacity:0;
}
25% {
transform:rotateY(45deg);
opacity:1;
}
50% {
transform:rotateY(90deg);
opacity:1;
}
75% {
transform:rotateY(135deg);
opacity:1;
}
95% {
transform:rotateY(180deg);
opacity:0.2;
}
100% {
transform:rotateY(195deg);
opacity:0;
}
}
/*明教logo*/
@keyframes mingjiao {
0% {
transform:rotateY(180deg);
opacity:0;
}
25% {
transform:rotateY(135deg);
opacity:0.3;
}
50% {
transform:rotateY(90deg);
opacity:0.6;
}
75% {
transform:rotateY(45deg);
opacity:1;
}
100% {
transform:rotateY(0deg);
opacity:0;
}
}
 @-moz-keyframes mingjiao /* Firefox */ {
0% {
transform:rotateY(180deg);
opacity:0;
}
25% {
transform:rotateY(135deg);
opacity:0.3;
}
50% {
transform:rotateY(90deg);
opacity:0.6;
}
75% {
transform:rotateY(45deg);
opacity:1;
}
100% {
transform:rotateY(0deg);
opacity:0;
}
}
 @-webkit-keyframes mingjiao /* Safari 和 Chrome */ {
0% {
transform:rotateY(180deg);
opacity:0;
}
25% {
transform:rotateY(135deg);
opacity:0.3;
}
50% {
transform:rotateY(90deg);
opacity:0.6;
}
75% {
transform:rotateY(45deg);
opacity:1;
}
100% {
transform:rotateY(0deg);
opacity:0;
}
}
 @-o-keyframes mingjiao /* Opera */ {
0% {
transform:rotateY(180deg);
opacity:0;
}
25% {
transform:rotateY(135deg);
opacity:0.3;
}
50% {
transform:rotateY(90deg);
opacity:0.6;
}
75% {
transform:rotateY(45deg);
opacity:1;
}
100% {
transform:rotateY(0deg);
opacity:0;
}
}
/*SC背景*/
@keyframes table1 {
0% {
/*right:500px;*/
opacity:0;
}
100% {
/*right:0px;*/
opacity:1;
}
}
 @-moz-keyframes table1 /* Firefox */ {
0% {
/*right:500px;*/
opacity:0;
}
100% {
/*right:0px;*/
opacity:1;
}
}
 @-webkit-keyframes table1 /* Safari 和 Chrome */ {
0% {
/*right:500px;*/
opacity:0;
}
100% {
/*right:0px;*/
opacity:1;
}
}
 @-o-keyframes table1 /* Opera */ {
0% {
/*right:500px;*/
opacity:0;
}
100% {
/*right:0px;*/
opacity:1;
}
}
/*Staff列表*/
@keyframes staff {
0% {
left:360px;
opacity:0;
}
100% {
left:590px;
opacity:1;
}
}
 @-moz-keyframes staff /* Firefox */ {
0% {
left:360px;
opacity:0;
}
100% {
left:590px;
opacity:1;
}
}
 @-webkit-keyframes staff /* Safari 和 Chrome */ {
0% {
left:360px;
opacity:0;
}
100% {
left:590px;
opacity:1;
}
}
 @-o-keyframes staff /* Opera */ {
0% {
left:360px;
opacity:0;
}
100% {
left:590px;
opacity:1;
}
}
/*cast列表*/
@keyframes cast {
0% {
left:740px;
opacity:0;
}
100% {
left:570px;
opacity:1;
}
}
 @-moz-keyframes cast /* Firefox */ {
0% {
left:740px;
opacity:0;
}
100% {
left:570px;
opacity:1;
}
}
 @-webkit-keyframes cast /* Safari 和 Chrome */ {
0% {
left:740px;
opacity:0;
}
100% {
left:570px;
opacity:1;
}
}
 @-o-keyframes cast /* Opera */ {
0% {
left:740px;
opacity:0;
}
100% {
left:570px;
opacity:1;
}
}
/*chinadra链接*/
@keyframes chinadra {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-moz-keyframes chinadra /* Firefox */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-webkit-keyframes chinadra /* Safari 和 Chrome */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-o-keyframes chinadra /* Opera */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
/*bilibili链接*/
@keyframes bilibili {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-moz-keyframes bilibili /* Firefox */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-webkit-keyframes bilibili /* Safari 和 Chrome */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-o-keyframes bilibili /* Opera */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
/*missevan链接*/
@keyframes missevan {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-moz-keyframes missevan /* Firefox */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-webkit-keyframes missevan /* Safari 和 Chrome */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-o-keyframes missevan /* Opera */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
/*baidudisk链接*/
@keyframes baidudisk {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-moz-keyframes baidudisk /* Firefox */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-webkit-keyframes baidudisk /* Safari 和 Chrome */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
@-o-keyframes baidudisk /* Opera */ {0% {top:-540px;opacity:0;}100% {top:-330px;opacity:1;}}
/*linkcolor链接*/
@keyframes linkcolor {0%{color:#F00;} 20% {color:yellow;}40% {color:green;}60% {color:pink;}80% {color:gry;} 100% {color:blue;}}
@-moz-keyframes linkcolor /* Firefox */ {0%{color:#F00;} 20% {color:yellow;}40% {color:green;}60% {color:pink;}80% {color:gry;} 100% {color:blue;}}
@-webkit-keyframes linkcolor /* Safari 和 Chrome */ {0%{color:#F00;} 20% {color:yellow;}40% {color:green;}60% {color:pink;}80% {color:gry;} 100% {color:blue;}}
@-o-keyframes linkcolor /* Opera */ {0%{color:#F00;} 20% {color:yellow;}40% {color:green;}60% {color:pink;}80% {color:gry;} 100% {color:blue;}}