body {
    background-color: #E2E2E2;
}

#app-pc {
    position: relative;
    margin-top: 100px;
}

#menu {
    position: fixed;
    right: 10px;
    top: 50%;
    margin-top: -50px;
    list-style-type: none;
    z-index: 70;
}

#menu li {
    width: 90px;
    height: 21px;
    margin: 10px 0 0;
    vertical-align: middle;
}

#menu a {
    float: right;
    width: 21px;
    height: 21px;
    color: #8F9DA4;
    text-decoration: none;
    text-align: right;
    background: url(../images/dot.png) 5px 5px no-repeat;
}

#menu .active a {
    background-position: 0 bottom;
}

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 116px;
    width: 100%;
    min-width: 1100px;
    background: url(../images/top-bg.png) repeat-x;
    z-index: 999;
}

.icon-com {
    position: absolute;
    top: 0;
    left: 0;
    width: 237px;
    height: 116px;
    /*background: url(../images/icon-com.png) no-repeat;*/
}

.icon-net {
    position: absolute;
    top: 24px;
    right: 78px;
    width: 100px;
    height: 55px;
}
.icon-net img{display: block; margin: 0 auto; margin-top: 0px;}
.search-bar {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -349px;
    width: 699px;
    height: 116px;
    background: url(../images/search-bar.png) no-repeat;
}

.search-bar input {
    position: absolute;
    padding-left: 13px;
    top: 32px;
    left: 29px;
    width: 341px;
    height: 38px;
    font-size: 15px;
    color: #99999A;
    background-color: white;
    border: none;
    line-height: 38px;
    outline: none;
}

.search-bar .btn-search {
    position: absolute;
    top: 14px;
    right: 17px;
    width: 184px;
    height: 70px;
    /*border: 1px solid red;*/
    /*line-height: 31px;*/
    outline: none;
    display: block;
}

.section {
    /*padding-top: 110px;*/
    text-align: center;
    font: 50px "Microsoft Yahei";
    color: #000;
}

.arrow {
    position: absolute;
    left: 50%;
    bottom: 16px;
    margin-left: -22.5px;
    width: 45px;
    height: 28px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    z-index: 9;
}

.bg {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
}
.sgheight{
	width:100%;
	height:18px;
}

.page1 .action{
	max-width:1600px;
	width:100%;
	height:78.3%;
	margin: 0 auto;
/*	background:url(../images/screen1/action.png) no-repeat  center top;
	background-size: auto 100%;*/
}
.page1 .action img{
	display: block;
	width:100%;
}
.page1_action_blue{
	background: url(../images/screen1/action.png) no-repeat center top;
	background-size:auto 100%;
}

.page1_action_darkblue{
	background: url(../images/screen2/action_darkblue2.png) no-repeat center top;
	background-size:auto 100%;
}




.page1 .action_green{
	max-width:1600px;
	width:100%;
	height:78.6%;
	margin: 0 auto;
}
.page1_action_green{
	background: url(../images/screen1/action_green.png) no-repeat center top;
	background-size:auto 100%;
}
.page1 .page1_action_lightgreen{
	max-width:1600px;
	width:100%;
	margin: 0 auto;
	height: 90.565%;
	background: url(../images/screen2/action_lightgreen.png) no-repeat center top;
	background-size:auto 100%;
}

.page1 .action_green img{
	display: block;
	width:100%;
}
.page1 .action_purple{
	max-width:1600px;
	width:100%;
	height:86.88%;
	margin: 0 auto;
}
.page1_action_purple{
	background: url(../images/screen1/action_purple.png) no-repeat center top;
	background-size:auto 100%;
}
.page1 .action_purple img{
	display: block;
	width:100%;
}
.page2 .action{
	max-width:1600px;
	width:100%;
	height:76.33%;
	margin: 0 auto;
	/*background:url(../images/screen2/action.png) no-repeat  center top;
	background-size: auto 100%;*/
}

.page2_action_blue{
	background: url(../images/screen2/action.png) no-repeat center top;
	background-size:auto 100%;
}

.page2 .page2_action_darkblue{
	height: 79.747%;
	background: url(../images/screen2/action_darkblue3.png) no-repeat center top;
	background-size:auto 100%;
}



.page2 .action img{
	display: block;
	width:100%;
}
.page2 .action_green{
	max-width:1600px;
	width:100%;
	height:80.4%;
	margin: 0 auto;
}
.page2_action_green{
	background: url(../images/screen2/action_green.png) no-repeat center top;
	background-size:auto 100%;
}

.page2 .page2_action_lightgreen{
	max-width:1600px;
	width:100%;
	height:75.95%;
	margin: 2% auto 0;
	background: url(../images/screen2/action_lightgreen2.png) no-repeat center top;
	background-size:auto 100%;
}






.page2 .action_green img{
	display: block;
	width:100%;
}
.page2 .action_purple{
	max-width:1600px;
	width:100%;
	height:77.6%;
	margin: 0 auto;
}
.page2_action_purple{
	background: url(../images/screen2/action_purple.png) no-repeat center top;
	background-size:auto 100%;
}
.page2 .action_purple  img{
	display: block;
	width:100%;
}













/*.bg img {*/
/*float: right;*/
/*!*width: 100%;*!*/
/*height: 337px;*/
/*!*background: url(images/screen1/bg.png) 0 50% no-repeat;*!*/
/*!*transition: all 1s;*!*/
/*}*/

.ftbar {
    position: absolute;
    left: 0;
    bottom: 56px;
    width: 100%;
    height: 59px;
    overflow: hidden;
    z-index: 101;

}

 .btn-buy_green{
    position: absolute;
   bottom: 56px;
		left: 44.59%;
    width: 10.82%;
    height: auto;
		margin-left: 0;
    cursor: hand;
}
 .btn-buy_green img{
	display: block;
	width:100%;
}
.page2  .btn-buy {
  position: absolute;
   bottom: 56px;
   left: 46.17%;
	 margin-left:0;
    width: 7.66%;
    height: auto;
    cursor: hand;
}
.page2  .btn-buy img{
	display: block;
	width:100%;
}

#MY_VIDEO_1_LAYER {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

#MY_VIDEO_1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#MY_VIDEO_1_LAYER .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 37px;
    z-index: 9999;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
}
#MY_VIDEO_3_LAYER {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

#MY_VIDEO_3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#MY_VIDEO_3_LAYER .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 37px;
    z-index: 9999;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
}

.page1 {
}

.page1 .bg {
    background-image: url(../images/screen1/bg.jpg);
}
.page1 .bg_green {
    background-image: url(../images/screen1/bg_green.jpg);
}
.page1 .bg_purple {
    background-image: url(../images/screen1/bg_purple.jpg);
}
.page1 .bg_darkblue {
    background-image: url(../images/screen2/bg_darkblue2.jpg);
}

.page1 .bg_lightgreen {
    background-image: url(../images/screen1/bg_lightgreen.jpg);
}




.page1 .register {
    position: absolute;
    top: 25px;
    left: 0;
    width: 423px;
    height: 170px;
    background:rgba(85, 87, 86, 0.6);
   
}
.page1 .register h3,.page3 .register h3{
    font-size: 26px;
    color:#ffe600;
    margin: 22px 0 10px 0;
    text-align: left;
    margin-left: 14px;
}
.page1 .register p,.page3 .register p{
    font-size: 16px;
    color:#ffffff;
    margin: 0;
    font-family: "微软雅黑";
    text-align: left;
     margin-left: 14px;
}
.page1 .register b,.page3 .register b{
	font-size: 30px;
	font-family: "微软雅黑";
	font-weight: 400;
	   
}
/*.page1 .register em,.page3 .register em{
	font-size: 30px;
	font-family: "微软雅黑";
	font-style: normal;
}*/
.page1 .btn-details,.page3 .btn-details {
    position: absolute;
    bottom: 24px;
    right: 25px;
    width: 124px;
    height: 32px;
    background-color: #5fbc35;
    color:#ffffff;
    text-align: center;
    font-size: 16px;
    text-indent: 0;
    text-decoration: none;
    border-radius: 5px;
    line-height: 32px;
    /*border: 1px solid red;*/
}
.page1 .btn-details:hover,.page3 .btn-details:hover{
    opacity: 0.7;
}

.page1 .ftbar .text1 {
    position: absolute;
    top: 5px;
    left: 52px;
    width: 351px;
    height: 73px;
    background-image: url(../images/screen1/ftbar1.png);
    background-repeat: no-repeat;
}

.page1 .ftbar .text2 {
    position: absolute;
    top: 5px;
    left: 472px;
    width: 346px;
    height: 73px;
    background-image: url(../images/screen1/ftbar2.png);
    background-repeat: no-repeat;
}

.page1 .play {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -72px;
    margin-top: -46px;
    width: 104px;
    height: 93px;
    background-image: url(../images/play.png);
    background-repeat: no-repeat;
    z-index: 9;
}

.page2 {

}

.page2 .bg {
    background-image: url(../images/screen2/bg.jpg);
}
.page2 .bg_green {
    background-image: url(../images/screen2/bg_green.jpg);
}
.page2 .bg_purple {
    background-image: url(../images/screen2/bg_purple.jpg);
}

.page2 .bg_darkblue {
    background-image: url(../images/screen2/bg_darkblue3.jpg);
}

.page2 .bg_lightgreen {
    background-image: url(../images/screen1/bg_lightgreen.jpg);
}






.page2 .ftbar .text1 {
    position: absolute;
    top: 5px;
    left: 52px;
    width: 296px;
    height: 73px;
    background-image: url(../images/screen2/ftbar1.png);
    background-repeat: no-repeat;
}

.page2 .ftbar .text2 {
    position: absolute;
    top: 5px;
    left: 472px;
    width: 333px;
    height: 73px;
    background-image: url(../images/screen2/ftbar2.png);
    background-repeat: no-repeat;
}



.page3 {
}

.page3 .bg {
    background-image: url(../images/screen3/bg.jpg) ;
		background-position-y: bottom;
}
.page3 .bg_green {
    background-image: url(../images/screen3/bg_green.jpg) ;
		background-position-y: bottom;
}
.page3 .bg_purple {
    background-image: url(../images/screen3/bg_purple.jpg) ;
		background-position-y: bottom;
}

.page3 .bg_darkblue {
    background-image: url(../images/screen3/bg_darkblue.jpg) ;
		background-position-y: bottom;
}
.page3 .bg_lightgreen{
	 background-image: url(../images/screen3/bg_lightgreen.jpg) ;
		background-position-y: bottom;
}





.page3 .register {
    position: absolute;
    top: 39px;
    left: 0;
    width: 423px;
    height: 170px;
    /*background: url(../images/screen3/register.png) 0 0 no-repeat;*/
    /*transition: all 1s;*/
   background:rgba(85, 87, 86, 0.6);
}
.page3_text1{
	max-width:1600px;
	width:100%;

	height:auto;
	margin:0 auto;
	padding-top: 86px;
	
/*	background:url(../images/screen3/text1.png) no-repeat center 86px;
	background-size: 100% auto;*/
}
.page3_text1 img{
	display: block;
	width:100%;
}
.page3_text1_green{
	max-width:1600px;
		width:100%;
	
		height:auto;
		margin:0 auto;
		padding-top: 86px;
}
.page3_text1_green img{
	display: block;
	width:100%;
}
.page3_a{
	display: block;
	width:15.782%;
	height:auto;
	margin: 0 auto;
}
.page3_a img{
	display: block;
	width: 100%;
}
.page3_logo{
	width:10.157%;
	height:auto;
	margin: 34px auto 0;
}
.page3_logo img{
	display: block;
	width: 100%;
}
.page3 .btn-details {
    position: absolute;
    bottom: 14px;
    right: 21px;
    width: 124px;
    height: 32px;
    /*border: 1px solid red;*/
}

.page3 .ftbar .text1 {
    position: absolute;
    top: 5px;
    left: 52px;
    width: 379px;
    height: 73px;
    background-image: url(../images/screen3/ftbar1.png);
    background-repeat: no-repeat;
}

.page3 .ftbar .text2 {
    position: absolute;
    top: 5px;
    left: 472px;
    width: 390px;
    height: 73px;
    background-image: url(../images/screen3/ftbar2.png);
    background-repeat: no-repeat;
}

.page3 .play3 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -72px;
    margin-top: -46px;
    width: 104px;
    height: 93px;
    background-image: url(../images/play.png);
    background-repeat: no-repeat;
    z-index: 9;
}

.page4 {

}

.page4 .bg {
    background-image: url(../images/screen4/bg.jpg);
}
.page4 .bg_green {
    background-image: url(../images/screen4/bg_green.jpg);
}
.page4 .bg_purple {
    background-image: url(../images/screen4/bg_purple.jpg);
}

.page4 .bg_darkblue {
    background-image: url(../images/screen4/bg_darkblue.jpg);
}

.page4 .bg_lightgreen {
    background-image: url(../images/screen4/bg_lightgreen.jpg);
}







.sgheight2{
	width:100%;
	height:50px;
}
.page4_text1{
	max-width:1600px;

	width:100%;
	height:auto;	
	margin: 0 auto;

/*	background: url(../images/screen4/action.png) no-repeat center top;
	background-size:100% auto;*/
}
.page4_text1 img{
	display: block;
	width:100%;
}
.page4_text2{
	max-width:976px;
	width:100%;
	height:100%;
	margin: 0 auto;
	position: relative;
}
.page4_a{
	width:100%;
	height:100%;
	margin: 0 auto;
	position: absolute;
	left: 50%;

  top: 14px;


  transform: translate(-50%, 0);
}



.page4_a a{
	display: block;
	/*max-width:623px;
	max-height:356px;*/
	width:33%;
	height:auto;
	float: left;
}
.marginleft{
	margin-left: 0.5%;
}
.page4_a2{
	width:66.66666666666667% ;
	margin: 0 auto;
}
.page4_a2 a{
	width: 49.4%;
}
.margintop{
	margin-top: 26px;
}
.page4_a .page4_rg{
	float: right;
}
.page4_a a img{
	display: block;
	width:100%;
}
.page4 .ftbar {
    /*bottom: 46px;*/
   bottom:78px;
}

.page4 .ftbar .text1 {
    position: absolute;
    top: 5px;
    left: 52px;
    width: 320px;
    height: 73px;
    background-image: url(../images/screen4/ftbar1.png);
    background-repeat: no-repeat;
}

.page4 .ftbar .text2 {
    position: absolute;
    top: 5px;
    left: 472px;
    width: 372px;
    height: 73px;
    background-image: url(../images/screen4/ftbar2.png);
    background-repeat: no-repeat;
}


.page4 .bottom-text {
    color: #999;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
}

.pagebot{ position: absolute;
    right: 40px;
    bottom:112px;width:383px; height:46px; background: url(../images/screen1/t.png); background-repeat: no-repeat;}
		
		
	.bg_hg{
		width:100%;
		height:8%;
	}	
.page5 .action{
	max-width:1600px;
	width:100%;
	height:78.3%;
	margin: 0 auto;
/*	background:url(../images/screen1/action.png) no-repeat  center top;
	background-size: auto 100%;*/
}
.page5 .action img{
	display: block;
	width:100%;
}

.page5 .bg {
    background-image: url(../images/screen1/bg.jpg);
}

.page5 .bg_green {
    background-image: url(../images/screen1/bg_green.jpg);
}

.page5 .bg_purple {
    background-image: url(../images/screen1/bg_purple.jpg);
}

.page5 .bg_lightgreen{
	 background-image: url(../images/screen1/bg_lightgreen.jpg);
}

.page5_action_blue{
	background: url(../images/screen1/action_blue_video.png) no-repeat center top;
	background-size:auto 100%;
}

.page5_action_green{
	background: url(../images/screen1/action_green_video.png) no-repeat center top;
	background-size:auto 100%;
}

.page5 .page5_action_lightgreen{
	max-width:1600px;
	width:100%;
	height:84.926%;
	margin: 0 auto;
	background: url(../images/screen1/action_lightgreen_video.png) no-repeat center top;
	background-size:auto 100%;
}







.page5_action_purple{
	background: url(../images/screen1/action_purple_video.png) no-repeat center top;
	background-size:auto 100%;
}

.page5 .bg_darkblue {
    background-image: url(../images/screen1/bg_darkblue.jpg);
}

.page5 .bg_hgdarkblue{
	width: 83.33333333333333%;
	margin: 0 auto;
}
.page5 .bg_hgdarkblue img{
	display: block;
	width: 100%;
}









.video_hg {
    width: 100%;
    height: 17%;
}
.video_box {
	width: 54%;
	margin: 0 auto;
	position: relative;
}	
.video_box img{
	display: block;
	width:100%;
}


.video_play{
	display: block;
	width:104px;
	height:93px;
	position:absolute;
	z-index: 9;
	top:50%;
	left:50%;
	margin-left: -52px;
	margin-top: -46.5px;
	
}
.video_play img{
	display: block;
	width:100%;
}

.video_src{
	width:100%;
	display: none;
	position: absolute;
	z-index: 20;
	top:0;
	left:0;
	
}


.video_src video{
	display: block;
	width:100%;
}
.btn-buy_more{
	 position: absolute;
   bottom: 56px;
		left: 45.65%;
    width: 8.7%;
    height: auto;
		margin-left: 0;
    cursor: pointer;
}		
.btn-buy_more img{
	display: block;
	width:100%;
}
@media (max-width:1440px) and (min-width:1438px){
		.page4_text1 {
			max-width: 1438px;
			width: 96%;
		} 
		.page4_text2 {
			max-width: 734px;
			width: 100%;
		}
		.margintop {
			margin-top: 22px;
		}
		.page2 .page2_action_lightgreen{
			margin: 1% auto 0;
		}
	}		

	@media (max-width:1438px) and (min-width:1367px){
		
		.page5 .bg_hgdarkblue{
			width:72.333333%
		}
		.page5 .bg_hglightgreen{
			width:72.333333%
		}
		.video_box {
			width: 50%;
			margin: 0 auto;
			position: relative;
		}
		.sgheight2 {
			width: 100%;
			height: 20px;
		}
		.page3_text1 {
			max-width: 1438px;
			width: 93%;
			padding-top: 80px;
		}
		.page4_text1 {
			max-width: 1438px;
			width: 89%;
		}
		.page4_text2 {
			max-width: 661px;
			width: 100%;
		}
		.margintop {
			margin-top: 16px;
		}
		.page2 .page2_action_lightgreen{
			margin: 1% auto 0;
		}
	}		
		
		
		
	@media (max-width:1366px) and (min-width:1260px){
		.sgheight {
			width: 100%;
			height: 10px;
		}
		.bg_hg{
			width:100%;
			height:10px;
		}	
		.video_box {
				width: 48%;
		}
		.page3_text1,.page3_text1_green {
				width: 72%;
		}
		.sgheight2 {
			width: 100%;
			height: 40px;
	}
	.page2 .page2_action_lightgreen{
		margin: 1% auto 0;
	}
	.page4_text2 {
		max-width: 830px;
		width: 100%;
	}
	
		
	}

@media (max-width:1260px) and (min-width:1100px){
	.sgheight {
    width: 100%;
    height: 10px;
	}
	.video_box {
			width: 48%;
	}
	.page3_text1,.page3_text1_green {
			width: 66%;
	}
	.sgheight2 {
    width: 100%;
    height: 40px;
}
.page2 .page2_action_lightgreen{
			margin: 1% auto 0;
		}
.page4_text2 {
			max-width: 661px;
			width: 100%;
		}
	
}
@media (max-width:1099px){
	.sgheight {
    width: 100%;
    height: 10px;
	}
	.video_box {
			width: 45%;
	}
	.page3_text1,.page3_text1_green {
			width: 66%;
	}
	.page2 .page2_action_lightgreen{
		margin: 1% auto 0;
	}
	.sgheight2 {
    width: 100%;
    height: 30px;
}
.page4_text2 {
			max-width: 661px;
			width: 100%;
		}
	
}