@font-face{
	font-family: 'dfps';
	src: url('../font/DFPShaoNvW5-GB.ttf');
}
@font-face{
	font-family: 'haibao';
	src: url('../font/DFPHaiBaoW12.ttf');
}
.main,.mainbg{
	height: 100%;
	overflow: hidden;
}
.main{
	background-size: cover;
	background-position: center center;
}
.top-bg{
	background: url(../imgs/public/top_img-bg.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 15.5%;
	background-size:auto 100%;
	background-position: center top;
	position: absolute;
	top: 0;
	z-index: 300;
}
.bot-bg{
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 33%;
	background-size:100% 100%;
	position: absolute;
	bottom: 0px;
	z-index: 100;
	width: 100%}
.left-image,.right-image{
	height: 100%;
	width: 25%;
	position: fixed;
	top:0px;
	z-index: 100;
}
.left-image{
	left:0px;
	background: url(../imgs/public/right-image.png) left top no-repeat;
    background-size: 100% 100%;
    transform: rotateY(180deg);
}
.right-image{
	right:0px;
	background:url("../imgs/public/right-image.png") right top no-repeat;
	background-size: 100% 100%
}
.content{
	position: absolute;
	top:0;
	left: 0;
  	z-index: 400;
  	width: 100vw;
  	height: 100vh;
}
#main .content{
  	background: url(../Imgs/public/subjectUnit-bg.jpg) center center / 100% 100% no-repeat;
}
#content{
	position: absolute;
  	z-index: 300!important;
  	overflow: visible!important;
}
.fk-page-viewport {
	overflow: visible!important;
}
.fk-page-viewport>ul {
	overflow: visible!important;
}

.dashboard .photo{
	position: absolute;
	top:20px;
	left: 20px;
	height: 7em;
	width: 5em;
	z-index: 500;
	background: url(../imgs/public/headimg.png) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
	display: none;
}
.dashboard .photo .photo-name{
	position: absolute;
    left: 0;
    bottom: 0;
    height: 2em;
    line-height: 1.2em;
    width: 114%;
    margin-left: -6%;
    background: url(../Imgs/public/photo-name.png) no-repeat center;
    background-size: 100% 100%;
    text-align: center;
    font-family: 'dfps';
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard .right-top-menu{
	position: absolute;
    right: 20px;
    top: 20px;
    width: 3.5em;
    height: 1.5em;
    font-size: 2em;
    text-align: right;
    line-height: 1.5em;
    color: #fff;
    font-family: "haibao";
    padding-right: 0.3em;
    background: url(../imgs/public/medium-btn.png) center center no-repeat;
    background-size: 100% 100%;
    z-index: 550;
    text-stroke:1px rgba(137,64,0,0.75);
    -webkit-text-stroke:1px rgba(137,64,0,0.75);
    display: none;
}

.stage{
	height: 40%;
	position: absolute;
	bottom: 8%;
	width: 100%
}
.photo img {
	width: 86%;
	margin: 7%;
	height: 86%;
}
.dashboard .left-bottom-menu {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 800;
}
.function-but {
	width: 4em;
	display: block;
	margin-top: 0.5em;
	vertical-align: bottom;
	position: absolute;
	left: 0;
	bottom: 0.5em;
}
.function-but img {
	width: 100%;
}
.left-bottom-menu>ul {
	margin-left: 20px;
	font-family: "微软雅黑";
	color: #431801;
	padding: 0.2em 2.8em;
	background:url('../Imgs/public/left_bottom_menu_bg.png') no-repeat center;
	background-size: 100% 100%;
	margin-left: 4.7em;
	display: none;
}
.left-bottom-menu>ul>li a {
	color: #431801;
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}
.left-bottom-menu>ul>li {
	float: left;
	margin-left: 5px;
	margin-top: 7px;
	margin-bottom: 6px;
	width: 3.7em;
	height: 3.7em;
	line-height: 1.2em;
	text-align: center;
	background: url(../imgs/public/left-bottom-bg01.png) no-repeat center;
	-webkit-background-size: 100%;
	background-size: 100%;
	font-family: 'haibao';
	position: relative;
	display: table;
}
.left-bottom-menu>ul>li:hover {
	background-image: url(../imgs/public/left-bottom-bg03.png) ;
}
.left-bottom-menu>ul>li:first-child {
	margin-left: 0;
}
/*登录*/
.landing-box {
	width: 500px;
	height: 480px;
	background: url(../imgs/public/landingbg.png) no-repeat center;
	background-size: 100% 100%;
	position: absolute;
	z-index: 400;
	margin-left: -250px;
	left: 50%;
	top: 50%;
	padding: 70px 0;
	font-family: "dfps";
	border-radius: 15px;
	margin-top: -200px;
}
.landing_text {
    width: 288px;
    height: 70px;
    border: 2px solid #7a7a7a;
    border-radius: 15px;
    color: #000;
    display: block;
    margin: 20px auto;
    padding-left: 10px;
    font-size: 1.9em;
    font-family: "dfps";
   }
.landing_pas {
    width: 288px;
    height: 70px;
    border: 2px solid #7a7a7a;
    border-radius: 15px;
    color: #000;
    padding-left: 10px;
    font-size: 1.9em;
    margin: 20px auto 10px;
    display: block;
    font-family: "dfps";
}
.landing-box input:-ms-input-placeholder {
    color: #444;
}

.landing-box input::-webkit-input-placeholder{
    color: #444;
}
.piaochecked {
width: 2em;
height: 2.4em;
float: left;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(../imgs/public/check01.png);
background-repeat: no-repeat;
background-size: 100% 100%;

}

.on_check {
background: url(../imgs/public/check02.png) no-repeat;
background-size: 100% 100%;

}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width: 3em;
height: 3.5em;
}
.landing-input {
	width: 288px;
	margin: 0px auto;
	height: 60px;
	line-height: 55px;
}
.landing-input span {
	color: #7f2d00;
	font-family: "dfps";
	margin-left: 10px;
	font-size: 1em;
	font-weight: bold;
}

.landing-box>a {
	display: block;
	width: 60%;
	text-align: center;
	letter-spacing: 32px;
	margin: 0px auto;
	margin-right: 70px;
	height: 80px;
	background: url(../imgs/public/green.png) no-repeat center left;
	background-size: 91% 100% ;
	line-height: 80px;
    border-radius: 15px;
    font-size: 3.1rem;
    font-family: "haibao";
    color: #fff799;
    text-stroke:1px #005e15;
    -webkit-text-stroke:1px #005e15;
}
/*登录的关闭按钮*/
.landing-box .close{
	position: absolute;
	right: 32px;
    top: 29px;
    width: 10%;
}
.landing-box .close img{
	width: 100%;
}
/*我的答题账户*/
.headimg-tc {
	width: 40em;
	height: 28em;
	border-radius: 15px;
	background:url(../imgs/public/headbg02.png) no-repeat center;
	background-size: 100% 100%;
	position: absolute;
	margin-left: -20em;
	margin-top: -14em;
	padding: 4em;
	top: 50%;
	left: 50%;
	z-index: 99900;
}
.headimg-tc-close {
	width: 2em;
	position: absolute;
	top: 41px;
	right: 43px;
	cursor: pointer;
}
.headimg-tc-close img {
	width: 100%;
}
.headimg-tc>div {
	width: 90%;
	height: 100%;
	margin: 2% auto;
	border-radius: 15px;
}
.headimg-tc-hd {
	width: 100%;
	font-size: 1em;
	font-family: "微软雅黑";
	font-weight: bold;
	line-height: 1em;
}
.headimg-tc-hd>li {
	float: left;
	font-family: 'haibao';
	margin: 5px 0 0 17%;
}
.headimg-tc-hd>li:nth-child(2) {
	float: right;
	margin: 5px 17% 0 0;
}
.headimg-tc-hd>li a {
	display: block;
	color: #431801;
	width: 100%;
}
.headimg-tc-bd {
	width: 100%;
	height: 95%;
	background: url(../Imgs/public/dati.png) no-repeat center;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	margin-top: -3px;
}
.headimg-tc-bd>li {
	height: 100%;
	padding-top: 40px;
}
.headimg-tc-bd-tab01{
	padding: 1.5em 2em;
}
.headimg-tc-bd-tab01>li {
	width: 120px;
	height: 120px;
	text-align: center;
	background: url(../imgs/public/answer-bg01h.png) no-repeat;
	background-size: 100% 100%;
	line-height: 120px;
	float: left;
	font-family: 'haibao';
	margin: 0 1em;
}
.headimg-tc-bd-tab01>li:nth-child(4){
	margin-left: 5em;
}
.headimg-tc-bd-tab01>li.on {
	background: url(../imgs/public/answer-bg01.png) no-repeat;
	background-size: 100% 100%;
}
/*.headimg-tc-bd-tab01>li:first-child {
	left: 20%;
	top: 60%;
}
.headimg-tc-bd-tab01>li:nth-child(2) {
	left: 35%;
	top: 40%;
}
.headimg-tc-bd-tab01>li:nth-child(3) {
	left: 50%;
	top: 20%;
}
.headimg-tc-bd-tab01>li:nth-child(4) {
	left: 65%;
	top: 40%;
}
.headimg-tc-bd-tab01>li:nth-child(5) {
	left: 80%;
	top: 60%;
}*/
.headimg-tc-bd-tab01>li a {
	color: #fff;
	display: block;
}
.headimg-tc-bd>li:nth-child(2) {
	display: none;
}
.headimg-tc-pic {
	width: 8em;
	height: 8em;
	border-radius: 3.5em;
	margin: 0 auto 0;
	background:url(../imgs/public/huan.png) no-repeat;
	background-size: 100% 100%;
	text-align: center;
}
.headimg-tc-pic img {
	height: 80%;
	margin-top: 10%;
}
.headimg-tc-name {
	width: 12em;
    height: 2.5em;
    line-height: 2.1em;
    margin: 0.5em auto;
    margin-top: -0.5rem;
    position: relative;
}
.headimg-tc-name input {
	width: 100%;
    height: 100%;
    border-radius: 12px;
    text-align: center;
    line-height: 40px;
    display: block;
    margin: 20px auto;
    border: none;
    color: #333;
    font-size: 2em;
    font-family: "dfps";
    padding-left: 10px;
    -webkit-box-shadow: inset 1px 1px 2px 1px #ccc;
    -ms-box-shadow: inset 1px 1px 2px 1px #666;
    -moz-box-shadow: inset 1px 1px 2px 1px #666;
    -o-box-shadow: inset 1px 1px 2px 1px #666;
}
.headimg-tc-name input:-ms-input-placeholder {
   color: #431801;
}

.headimg-tc-name input::-webkit-input-placeholder{
    color: #431801;
}
.headimg-tc-name>a {
	display: block;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    background: url(../imgs/public/blue.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    right: -5.1em;
    width: 4.7em;
    color: #fff799;
    font-family: "haibao";
    top: 0.2em;
    font-size: 1.2em;
    text-stroke: 1px #0068b7;
    -webkit-text-stroke: 1px #0068b7;
}
.headimg-tc-exit {
	width: 4.8em;
    height: 1.5em;
    background: url(../imgs/public/red.png) no-repeat center;
    background-size: 100% 100%;
    text-align: center;
    display: block;
    font-family: 'haibao';
    margin: 0 auto;
    line-height: 1.5em;
    color: #fff799;
    font-size: 1.8em;
    text-stroke: 1px #7d0000;
    -webkit-text-stroke: 1px #7d0000;
}
/*开场秀按钮*/
.page-control {
	width: 10em;
	height: 2.4em;
	position: absolute;
	margin-left: -5em;
	left: 50%;
	bottom: 4%;
	background: url(../imgs/public/page.png) no-repeat;
	background-size: 100% 100%;
	z-index: 700;
}
.page-control>a {
	display: block;
	float: left;
	height: 100%;
}
.page-control>.page-control-current {
	width: 40%;
	/*text-align: center;*/
	/*line-height: 1.5em;*/
	/*color: #f8b551;*/
	/*font-family: font01;*/
	/*font-size: 2.3em;*/
}
.page-control>.page-control-prev, .page-control>.page-control-next {
	width: 30%;
}
/*.highlight {
    background: url(../imgs/unit01/girl0406.svg) no-repeat center center;
	width: 199px;
    height: 190px;
	-webkit-animation:light 3s ease-in-out forwards infinite;
	position:absolute;
    background-size: 109px auto;
	left: 50%;
	z-index: 550;
	margin-left: -99px;
	margin-top: 2px;
}*/
/*@keyframes light{
		0%{background-image: url(../imgs/unit01/1.png);
			width:100px;
			height:165px;
	    }
		50%{
			background-image: url(../imgs/unit01/1h.png);
			width:100px;
			height:165px;
	    }
	}*/

.highlight {
    -webkit-animation: light 1.5s ease-in-out forwards infinite;
    width: 200px;
    height: 350px;
    position: absolute;
    background-size: cover;
    background-image: url(../imgs/unit01/oneClassPerson.gif);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    left: 50%;
    top: -100px;
    z-index: 550;
    cursor: pointer;
    background-position: center center;
    margin-left: -100px;
}


#wrapper {
  position: absolute;
  top: 10%;
  left: 50%;

}
/*开场秀02*/
.show02 {
	max-width:40%;
	max-height: 70%;
	margin:0 auto;
}
.show02 img{
	margin:0 auto;
	display: block;
}
.show02 a {
	display: block;
	position: absolute;
	bottom: 18%;
	right: 22%;
}
.show02 a img {
	width: 150%;
}
.show02>div {
	position: absolute;
	height: 10em;
	width: 23em;
	overflow: hidden;
    left: 20%;
    bottom: 27%;
    text-align: center;
    background-color: #fdeded;
    border-radius: 2em;
}
.show02>div>.move{
	position: absolute;
	top: 0em;
	width: 100%;
	z-index: 22;
}
.show02>div span {
	font-size: 2.5em;
	display: block;
	line-height: 2em;
    cursor:pointer;
    display: block;
	width: 100%;
	height: auto;
	background-image: linear-gradient(to bottom, #fff 30%, #faec3f 70%);
    -webkit-background-clip: text;
    color: transparent;
    text-stroke:2px #000f7f;
    -webkit-text-stroke:2px #000f7f;
}
.show02>div .mc{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-shadow: 0px 3px 5px rgb(6,0,1);
	z-index: -1;
	height: 100%;
}
/*兵走台*/
.jjyl-run{
	background: url(../Imgs/public/subjectUnitClass-bg.jpg) no-repeat center;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
.jjyl-run .stage{
    bottom: 8%;
}
.animate-male {
	/*transform: translate(-50%, -50%);*/
	width:150px;
	height:250px;
	position:absolute;
    background-size: cover;
 	background-image: url("../imgs/unit01/boy-1.png");
	-webkit-animation: play 1s steps(1) both infinite;
	-moz-animation: play 1s steps(1) both infinite;
	-ms-animation: play 1s steps(1) both infinite;
	-o-animation: play 1s steps(1) both infinite;
	animation: play 1s steps(1) both infinite ;

}
.stop-female  {
	transform: translate(-50%, 0%);
	width:130px;
	height:165px;
	position:absolute;
    background-size: cover;
   	background-image: url("../imgs/unit01/girl-0421-1.gif");
	background-position: -3px;
	left: 50%;
	z-index: 550;
	cursor: pointer;
}
.stop-male {
	/*transform: translate(-50%, -50%);*/
	width:145px;
	height:250px;
	position:absolute;
    background-size: cover;
   	background-image: url("../imgs/unit01/boy-1.png");
	background-position: 0px;
}
.stop-male:nth-child(2),.stop-male:nth-child(3),.stop-male:nth-child(4),.stop-male:nth-child(5){
	background-position: -321px;
}
#wrapper .qigan{
	position: absolute;
	top: -140px;
	display: none;
	background: url(../Imgs/unit01/boy-gan.png) no-repeat center;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 140px;
	height: 320px;
}
#wrapper .qigan img{
	width: 128px;
	height: 0;
	position: absolute;
	top: 5.5px;
	left: 5.5px;
	transition: all 2s ease;
	cursor: pointer;
	pointer-events: none;
}
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
    z-index: 600;
}
	

@-webkit-keyframes play {
	0% { background-position:    0px 0; }
	33% { background-position:    -321px 0; }
	67% { background-position:    -163px 0; }
	100% { background-position:    -481px 0; }
}


@-moz-keyframes play {
	0% { background-position:    0px 0; }
	33% { background-position:    -321px 0; }
	67% { background-position:    -163px 0; }
	100% { background-position:    -481px 0; }
}

@-ms-keyframes play {
	0% { background-position:    0px 0; }
	33% { background-position:    -321px 0; }
	67% { background-position:    -163px 0; }
	100% { background-position:    -481px 0; }
}

@-o-keyframes play {
	0% { background-position:    0px 0; }
	33% { background-position:    -321px 0; }
	67% { background-position:    -163px 0; }
	100% { background-position:    -481px 0; }
}

@keyframes play {
	0% { background-position:    0px 0;  }
	33% { background-position:    -321px 0;  }
	67% { background-position:    -163px 0;  }
	100% { background-position:    -481px 0;  }
}




#relative-div {
	position:relative;
	width: 100%;
	height: 100%;
}	
/*开场秀4*/

.show04-bot-bg {
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 28%;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
    z-index: 215;
    width: 100%;
}
.show04-tree-bg {
	background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    background-size: 100% 100%;
    bottom: 42%;
    height: 12%;
    width: 100%;
    z-index: 205;
}
.show04-river-bg {
	background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    background-size: 100% 100%;
    bottom: 1%;
    height: 94%;
    width: 100%;
    z-index: 210;
}
.river {
	height: 21%;
    position: absolute;
    bottom: 22%;
    left: -8%;
    width: 100%;
    z-index: 400
}
#div1 {

	margin:4em auto;

	width:5px;

	height:5px;

	position:relative;

}	

.ship {
	transform: translate(0%, -80%);
	width:168px;
	height:111px;
	background:url(../imgs/unit01/ship.png) no-repeat;
	background-size: cover;

	position:absolute;

	left:-300px;

	top:-100px;
	z-index: 1000;

}
@-webkit-keyframes twinkling{	/*透明度由0到1*/
	0%{
		opacity:0.7;				/*透明度为0*/
	}
	100%{
		opacity:1;				/*透明度为1*/
	}
}
#div1>div>img{
	width: 100%;
}
#div1>div>div .img-msg{
	position: relative;
	text-align: left;
	margin-top: 5%;
}
#div1>div>div .img-msg span{
	display: block;
	width: 100%;
	height: auto;
	background-image: linear-gradient(to bottom, #fff 30%, #faec3f 70%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.5em;
    text-stroke:1px #000f7f;
    -webkit-text-stroke:1px #000f7f;
}
#div1>div>div .img-msg .mc{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-shadow: 2px 1px 5px rgb(6,0,1);
	z-index: -1;
	height: 100%;
}
.river-stone01 {
	position: absolute;
	left: -408px;
	top: 29px;
	width: 88px;
	margin-left: 140px;
	margin-top: 0px;
	z-index: 420;
}
.river-stone01 #stone-dialog01{
    position: fixed;
    top: 12vh;
    left: 20%;
    display: none;
    text-align: center;
}
.river-stone01 #stone-dialog01 >img{
	width: 50%;
	margin-bottom: 5%;
}
.river-stone02 {
	position: absolute;
	left: -175px;
	top: -27px;
	width: 88px;
	margin-left: 140px;
	margin-top: -20px;
	z-index: 416;
}
.river-stone02 #stone-dialog02{
    position: fixed;
    top: 12vh;
    left: 20%;
    display: none;
    text-align: center;
}
.river-stone02 #stone-dialog02 >img{
	width: 90%;
	margin-bottom: 5%;
}
.river-stone03 {
	position: absolute;
	left: 35px;
	top: 68px;
	width: 88px;
	margin-left: 140px;
	margin-top: -20px;
	z-index: 418;
}
.river-stone03 #stone-dialog03{
    position: fixed;
    top: 10vh;
    left: 15%;
    display: none;
}
.river-stone03 #stone-dialog03 .img-msg2{
    display: inline-block;
    border-radius: 50px;
    background-color: #e3f2f9;
    color: #fef731;
    text-stroke: 1px #000f7f;
    -webkit-text-stroke: 0.9px #000f7f;
    text-shadow: 2px 1px 5px rgb(6,0,1);
    width: 35%;
    height: 100%;
    padding: 2%;
    font-size: 1em;
    vertical-align: middle;
    margin-left: 2%;
    text-align: justify;
}
.river-stone03>div>img{
	width: 25%;
}
.river-stone03>ul li{
	width: auto;
	margin-right: 10px;
}
.river-stone03>ul li span{
	font-size: 1.5em;
    text-stroke: 1px #000f7f;
    -webkit-text-stroke: 1px #000f7f;
}
.river-stone04 {
	position: absolute;
	left: 250px;
	top: -10px;
	width: 88px;
	margin-left: 140px;
	margin-top: -20px;
	z-index: 417;
}
.river-stone04 #stone-dialog04{
    position: fixed;
    top: 26vh;
    left: 20%;
    width: 46%;
    display: none;
}
.river-stone04 #stone-dialog08{
	display: none;
    position: fixed;
    top: 22vh;
    left: 5%;
    /*line-height: 3em;*/
    font-size: 2.5em;
    text-align: center;
}
.river-stone04 #stone-dialog08 span{
	display: block;
	width: 100%;
	height: auto;
	background-image: linear-gradient(to bottom, #fff 30%, #faec3f 70%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1em;
    text-stroke:2px #000f7f;
    -webkit-text-stroke:2px #000f7f;

}
.river-stone04 #stone-dialog08 .mc{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-shadow: 3px 2px 6px rgb(6,0,1);
	z-index: -1;
}
.river-stone04 #stone-dialog08 img{
	width: 35%;
	position: relative;
	z-index: 222;
	margin-top: 2%;
}
.river-stone04 #stone-dialog08 img:nth-child(5){
	z-index: 111;
	margin-left: -3%;
}
/*大舞台03*/
.stage03 {
	width: 970px;
	height: 480px;
	background-color: #fff;
	position: absolute;
	margin-left: -485px;
	left: 50%;
	margin-top: -240px;
	top: 50%;
	background: url(../imgs/unit01/stage03-bg.jpg) repeat-x;
	background-size: 1px 100%;
	border-radius: 15px;
}
.stage03>h2 {
	color: #431801;
	font-family: "font03";
	font-size: 2.2em;
	font-weight: bold;
	text-align: center;
	margin-top: 1.2em;
	line-height: 1.3em;
	margin: 1.2em 0 0.6em 0;
}
.stage03>ul li {
	width: 33%;
	float: left;
}
.stage03>ul li a {
	display: block;
	width: 100%;
	position: relative;
	text-align: center;
}
.stage03>ul li a img {
	width: 100%;
}
.stage03>ul li a span {
	position: absolute;
	color: #000;
	font-family: "font03";
	font-size: 3.2em;
	font-weight: bold;
	top: 30%;
	width: 100%;
	display: block;
	text-align: center;
	display: none;
}
span.block {
	display: block!important;
}
.flowering {
	width:320px;
	height:292px;
	background-size: cover;
    background-image: url("../imgs/unit01/flower.png");

}
.flower-open {
	-webkit-animation: flower 0.3s steps(4)  forwards;
	-moz-animation: flower 0.3s steps(4)  forwards;
	-ms-animation: flower 0.3s steps(4)  forwards;
	-o-animation: flower 0.3s steps(4)  forwards;
	animation: flower 0.3s steps(4)  forwards;
	width:320px;
	height:292px;
	background-size: cover;
    background-image: url("../imgs/unit01/flower.png");
	/*animation:flower 1s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation:flower 1s;
	-webkit-animation-iteration-count:1;
	animation-timing-function:steps(4);*/
}
.flowering-after {
	background-position: -960px 0;
}
@-webkit-keyframes flower {
	from { background-position:    0px; }
	to { background-position: -1280px; }
}


@-moz-keyframes flower {
	from { background-position:    0px; }
	to { background-position: -1280px; }
}

@-ms-keyframes flower {
	from { background-position:    0px; }
	to { background-position: -1280px; }
}

@-o-keyframes flower {
	from { background-position:    0px; }
	to { background-position: -1280px; }
}

@keyframes flower {
	from { background-position:    0px;  }
	to { background-position: -1280px;  }
}
/*小票友俱乐部02*/
.pagoda {
	width: 21em;
	height: 40em;
	max-height: 80%;
	margin: 0 auto;
	z-index: 500;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-60%);
}
.pagoda-top {
	height: 18%;
	width: 100%;
	background: url(../imgs/unit01/pagoda-top.png) no-repeat center 100%;
	background-size: auto 100%;
}
.pagoda-main {
	height: 70.8%;
	width: 100%;
}
.pagoda-bot {
	height: 7.2%;
	width: 100%;
	background: url(../imgs/unit01/pagoda-bot.png) no-repeat center 100%;
	background-size: auto 100%;
}
.pagoda-main>div {
	height: 25%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center 100%;
	background-size: auto 100%;
	text-align: center;
	color: #a84200;
	font-family: "微软雅黑";
	position: relative;
	font-weight: bold;
}
.pagoda-main>div.box:nth-child(1) {
	background-image: url(../imgs/unit01/pagoda-main01.png) ;
}
.pagoda-main>div.box:nth-child(2) {
	background-image: url(../imgs/unit01/pagoda-main02.png) ;
}
.pagoda-main>div.box:nth-child(3) {
	background-image: url(../imgs/unit01/pagoda-main03.png) ;
}
.pagoda-main>div.box:nth-child(4) {
	background-image: url(../imgs/unit01/pagoda-main04.png) ;
}
.pagoda-main>div.box1:nth-child(1) {
	background-image: url(../imgs/unit01/pagoda-main01a.png) ;
}
.pagoda-main>div.box1:nth-child(2) {
	background-image: url(../imgs/unit01/pagoda-main02a.png) ;
}
.pagoda-main>div.box1:nth-child(3) {
	background-image: url(../imgs/unit01/pagoda-main03a.png) ;
}
.pagoda-main>div.box1:nth-child(4) {
	background-image: url(../imgs/unit01/pagoda-main04a.png) ;
}
.pagoda-main>div.box{position: relative;}
.pagoda-main>div.box>div{height: 100%;margin: 0 auto;}
.pagoda-main .target-items{position: absolute;top:0px;right: -8em}
.pagoda-main .target-items .options{width: 8em;vertical-align: middle;margin-top: 2em}
.pagoda-main .target-items .options>div{width: 48%;vertical-align: middle;float: left;}
.pagoda-main .target-items .drag-option {
	width: 3.3em;
	height: 3.3em;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	line-height: 3.2em;
	color: #431801;
	font-size: 1em;
	font-family: "font03";
	font-weight: bold;
}
.pagoda-main .target-items .drag-option:nth-child(1) {
	left: 0;
}
.pagoda-main .target-items .drag-option:nth-child(2) {
	right: 0;
}

.pagoda-main>div.box p {
	position: absolute;
	/*bottom: 20%;*/
	text-align: center;
	display: block;
	transform: translate(-50%, 0%);
	font-size: 1.7rem;
	left: 50%;
	top:45%;
    font-family: font03;
}
.pagoda-main>div>a {
	width: 3.2em;
	height: 3.2em;
	border-radius: 50%;
	background: #f8b551;
	text-align: center;
	line-height: 3.2em;
	color: #000;
	font-size: 1em;
	font-family: "font03";
	font-weight: bold;
	position: absolute;
	bottom: 10%;
	cursor: move;
}

/*小票友3*/
.fan03 {
	direction: none;
	width: 970px;
    height: auto;
    padding-bottom:1em;
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%);
}
.fan03 h2 {
    color: #431801;
    font-family: font03;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    line-height: 1.3em;
    margin: 1.2em 0px 0.6em;
    padding-top: 0.5em;
}
.drag-container li {
    width: 25%;
    float: left;
}
.drag-container li>div {
    display: block;
    width: 100%;
    text-align: center;
}
.drag-flowering {
    width: 240px;
    height: 219px;
    background-size: cover;
    background-image: url("../imgs/unit01/flower.png");
    font-family: font03;
    font-weight: bold;
    width: 100%;
    text-align: center;
    line-height: 250px;
    font-family: 'haibao';
    color: #fff799;
    font-size: 1.6em;
    text-stroke: 0.5px #7d0000;
    -webkit-text-stroke: 0.5px #7d0000;
}
.drag-flowering-after {
	background-position: -736px 0;
}
.drag-flower-open {
	-webkit-animation: drag-flower 0.4s steps(4) ;
	-moz-animation: drag-flower 0.4s steps(4)  ;
	-ms-animation: drag-flower 0.4s steps(4) ;
	-o-animation: drag-flower 0.4s steps(4)  ;
	animation: drag-flower 0.4s steps(4)  ;
	width:240px;
	height:219px;
	background-size: cover;
    background-image: url("../imgs/unit01/flower.png");
}
@-webkit-keyframes drag-flower {
	from { background-position:    0px; }
	to { background-position: -960px; }
}


@-moz-keyframes drag-flower {
	from { background-position:    0px; }
	to { background-position: -960px; }
}

@-ms-keyframes drag-flower {
	from { background-position:    0px; }
	to { background-position: -960px; }
}

@-o-keyframes drag-flower {
	from { background-position:    0px; }
	to { background-position: -960px; }
}

@keyframes drag-flower {
	from { background-position:    0px;  }
	to { background-position: -960px;  }
}
.option-wrap>div .item{
	width: 4em;
    height: 2.3em;
    border-radius: 8px;
    background: url(../imgs/public/green.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    line-height: 2.3em;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
    font-family: 'haibao';
    color: #fff799;
    font-size: 1.5em;
    text-stroke: 0.5px #005e15;
    -webkit-text-stroke: 0.5px #005e15;
}
.option-wrap>div .item-checked{
	background-image: url(../imgs/public/red.png);
    color: #fff799;
    text-stroke: 0.5px #7d0000;
    -webkit-text-stroke: 0.5px #7d0000;
}
.option-wrap {
	width: 80%;
	margin: 0 auto;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}
.option-wrap>div {
	width: 33.3%;
	float: left;
	margin-bottom: 1.2em;
}
.drag-flowering a {
    color: #431801!important;
    font-family: font03;
    font-size: 1.7em!important;
    font-weight: bold;
    width: 100%;
    text-align: center;
    line-height: 5em!important;
    background: none!important;
    display: inline-block!important;
}
.flower-option {
	width: 4em;
	height: 2.3em;
	border-radius: 8px;
	background: url(../imgs/public/headbg02.jpg) repeat-x;
	background-size: 1px 100%;
	display: block;
	font-size: 1.6em;
	color: #431801;
	line-height: 2.3em;
	text-align: center;
	font-family: "font03";
	font-weight: bold;
	margin: 0 auto;
}

.dad-noSelect,.dad-noSelect *{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing !important;
}

.dad-container{
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dad-container::after{
    content: '';
    clear: both !important;
    display: block;
}
.dad-active .dad-draggable-area{
    cursor: -webkit-grab;
    cursor: -moz-grab;
}
.dad-draggable-area>*,.dad-draggable-area img{
    pointer-events: none;
}
.dads-children.active{
    pointer-events: none;
}
.dads-children-clone{
    opacity: 1;
    z-index: 9999;
    pointer-events: none;
}
/*.dads-children-placeholder{
    pointer-events: none;
    overflow: hidden;
    position: absolute !important;
    box-sizing: border-box;
    border:4px dashed #639BF6;
    margin:5px;
    text-align: center;
    color: #639BF6;
    font-weight: bold;
}*/
.option-checked {
	background: #f0f0f0!important;
    border: 2px solid #e9970d;
    color: #e60012!important;
}

.anniuBox{
    margin-top: 1em;
    display: table;
    margin: 1em auto;
}
.anniuBox a{
    font-size: 1.5rem;
    margin-left: 1em;
    background: url(../imgs/public/red.png) no-repeat center;
    background-size: 100% 100%;
    padding: 7px 15px;
    font-family: 'haibao';
    color: #fff799;
    text-stroke: 1px #7d0000;
    -webkit-text-stroke: 1px #7d0000;
}
.anniuBox a:first-child{

    margin-left: 0; 
   
}


.surfing{
	overflow: hidden;
	width: 30em;
	position: absolute;
    bottom: 25px;
    left: 30px;
    display: none;	
}
.surfing li{
	float: left;
    background: url(../imgs/unit01/langhua.png) no-repeat center;
    background-size: contain;
    width: 4.5em;
    height: 3em;
    text-align: center;
    line-height: 2em;
    position: relative;
}
.surfing >li span{
	font-size: 2em;
	background-image: linear-gradient(to bottom, #fff 30%, #faec3f 70%);
    -webkit-background-clip: text;
    color: transparent;
    text-stroke:2px #000f7f;
    -webkit-text-stroke:2px #000f7f;
}
.surfing .mc{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-shadow: 2px 1px 3px rgb(6,0,1);
	z-index: -1;
}
.bg35{
    background: url(../imgs/unit01/langhua.png) 0em 0em no-repeat !important;
    padding-bottom: 3em!important;
    color: #431801!important;
    min-width: 22em!important;
    position: fixed;
    top: 30%;
    left: 20%;
    line-height: 3em;
}
.bg35 span{
	display: block;
	width: 100%;
	height: auto;
	background-image: linear-gradient(to bottom, #fff 30%, #faec3f 70%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 2.5em;
    text-stroke:2px #000f7f;
    -webkit-text-stroke:2px #000f7f;

}
.bg35 .mc{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-shadow: 3px 2px 6px rgb(6,0,1);
	z-index: -1;
	height: 100%;
}