/* 字体 */



/* 网页结构 */

* { margin: 0; padding: 0;}




/* 右侧导航 */

#fullPage-nav { _display: block; font-size: 12px;}

#fullPage-nav li { width: 90px; height: 40px; margin: 10px 0 0; vertical-align: middle;}

#fullPage-nav li a { float: right; width: 12px; height: 12px;text-decoration: none; text-align: right; }

#fullPage-nav li .active { background-position: 0 bottom;}

#fullPage-nav span { display: block;}

.fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 21px;}



.section { position: relative; overflow: hidden;}

.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.section .bg img { display: block; width: 100%; height: 100%;}





/* 
.section strong { position: absolute; left: 50%; top: 15%; z-index: 10; width: 512px; height: 45px; margin-left: -256px; font-size: 24px; font-weight: 500; color: #748A9E; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}

.section h3 { position: absolute; left: 50%; top: 15%; z-index: 10; width: 512px; height: 45px; margin-left: -256px; margin-top: 60px; text-indent: -9999px; background-repeat: no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}

.p1 { position: absolute; left: 50%; top: 15%; width: 510px; margin-left: -255px; margin-top: 130px; font-size: 16px; color: #727F8C; opacity: 0; transition: all 1s;}



.section2 h3 { background-image: url(images/t2.png);}

.section3 h3 { background-image: url(images/t3.png);}

.section4 h3 { background-image: url(images/t4.png);}

.section5 h3 { background-image: url(images/t5.png);}

.section6 strong { width: 561px; margin-left: -280px;}

.section6 h3 { width: 561px; margin-left: -280px; background-image: url(images/t6.png);}

.section7 strong { width: 561px; margin-left: -280px;}

.section7 h3 { width: 561px; margin-left: -280px; background-image: url(images/t7.png);}

.section8 strong { width: 561px; margin-left: -280px;}

.section8 h3 { width: 561px; margin-left: -280px; background-image: url(images/t8.png);}



.section5 h4 { margin-bottom: 12px; font-size: 23px; font-weight: 500;}

.section5 p { font-size: 14px;} */


/* 	动画 */
	@keyframes shake {
			    10%, 90% {transform: translate3d(-1px, 0, 0);}
			 
			    20%, 80% {transform: translate3d(2px, 0, 0);}
			    
			    30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
			 
			    40%, 60% {transform: translate3d(4px, 0, 0);}
			 }
		@keyframes fade-in {
				0% {
					opacity: 0;
				}
			
				/*初始状态 透明度为0*/
				70% {
					opacity: 0;
				}
			
				/*过渡状态 透明度为0*/
				100% {
					opacity: 1;
				}
			
				/*结束状态 透明度为1*/
			}
			
			@keyframes moveLeft {
				0% {
					transform: translateX(-300px);
					opacity: 0;
				}
			
				/*初始状态 透明度为0*/
				50% {
					transform: translateX(-150px);
					opacity: 0.5;
				}
			
				/*过渡状态 透明度为0*/
				100% {
					opacity: 1;
					transform: translateX(0);
				}
			
				/*结束状态 透明度为1*/
			}
			
			@keyframes moveRight {
				0% {
					transform: translateX(300px);
					opacity: 0;
				}
			
				/*初始状态 透明度为0*/
				50% {
					transform: translateX(-50px);
					opacity: 0.5;
				}
			
				/*过渡状态 透明度为0*/
				100% {
					opacity: 1;
					transform: translateX(0);
				}
			
				/*结束状态 透明度为1*/
			}
			
			@keyframes movebottom {
				0% {
					transform: translateY(-800px);
					opacity: 1;
				}
			
				/*初始状态 透明度为0*/
				100% {
					opacity: 1;
					transform: translateY(0);
				}
			
				/*结束状态 透明度为1*/
			}
			
			@keyframes arrow {
			
				%0,
				%100 {
					transform: translateY(0px);
					opacity: 1;
				}
			
				50% {
					transform: translateY(10px);
					opacity: .5
				}
			}

			@-webkit-keyframes titleAniamtion {
			
				%0{
					-webkit-transform:translate(30px,270px);
				}
				%50{
					-webkit-transform:translate(330px,270px);
				}
			}
			
			@keyframes wobble {
			 		0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
			 		60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
			 		80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
			 		100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
			}
			@keyframes fadeInRight {
				0% {
					opacity: 0;
					-webkit-transform: translate3d(100%, 0, 0);
					transform: translate3d(100%, 0, 0)
				}
				to {
					opacity: 1;
					-webkit-transform: none;
					transform: none
				}
			}
			
			
			
			.popup-container{
				position: relative;
				z-index: 1;
				width: 100%;
				height: 267px;
				text-align: center;
				bottom: 20px;
				background-color: #FFFFFF;
				overflow: hidden;
			/* 	opacity: 0;
				transition: all 1s; */
			}
			
			.active 
			{
				/* transition-delay: 0.9s;
				opacity: 1; */
			}
			
			
			.img-flex{
				position: absolute;
			
				
			}
			
		
			
			.img-flex ul{
				font-size: 0;
			}
			.img-flex ul li{
				display: block;
				background-repeat: no-repeat;
				float: left;
				position: relative;
			}
			
			
			
			
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
			}


			.header {
				width: 100% !important;
				height: 120px !important;
				position: fixed;
				top:0;
				z-index: 100;
			}

			.logo-icon {
				width: 76px;
				height: 72px;
				position: absolute;
				top: 40px;
				left: 80px;
			}


			.menubutton {
				width: 40px !important;
				height: 34px !important;

			}
			.myname
			{
				color: #FFFFFF;
				font-size: 76px;
				margin-left: 10px;
				opacity: 0; 
				transition: all 1s;
			}
			.active  .myname{ 
				opacity: 1; 
				animation: wobble;
				animation-duration: 1.4s;
				animation-fill-mode:backwards;
				-webkit-animation: wobble 1.4s ease-in;
				}
				
			.drawer {
				position: absolute;
				z-index: 10;
				top: 40px;
				right: 40px;
				height: 100%;
				padding: .4em 0;
				color: white;
				text-align: center;
				font-size: 0;
			}

			.drawer li {
				pointer-events: none;
				position: relative;
				display: inline-block;
				vertical-align: middle;
				list-style: none;
				line-height: 100%;
				transform: translateZ(0);

			}

			.drawer a {
				pointer-events: auto;
				position: relative;
				display: block;
				min-width: 5em;
				margin-bottom: .4em;
				padding: .4em;
				line-height: 100%;
				font-size: 20px;
				text-decoration: none;
				color: white;
				transition: background 0.3s;
			}

			.drawer i {
				display: block;
				margin-bottom: .2em;
				font-size: 2em;
			}

			.drawer span {
				font-size: 20px;
			}
           .drawer>li ul {
				position: absolute;
				z-index: -1;
				top: 0;
				right: 40px;
				height: 100%;
				width: auto;
				opacity: 0;
				white-space: nowrap;
				transition: all 0.9s;
				/* Close the menus */
				/* transform: translateX(0);

				transition: 0.9s transform; */
			}

			.drawer li:hover ul {
				right: 120px;
				transition-delay: 0.2s;
				opacity: 1;
			}

			.drawer>li {
				display: block;
			}

			.drawer>li:hover {
				z-index: 100;
			}
			.menuitem {
				width: 125px;
			}

			.menuitem-end {
				width: 15px;
			}

			.section-wrap {
				width: 100%;
				height: 100%;
				overflow: visible;
				transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1);
				-webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.03, 1);
			}

			.section-wrap .section {
				position: relative;
				width: 100%;
				height: 100%;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.section-bottom{
				width: 100%;
				height: 40px;
				position: fixed;
				
				bottom: 5px;
				text-align: center;
				opacity: 1;
			}
		
			.arrow {
				width: 36px;
				height: 24px;
				z-index: 999;
				animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
				-webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
				transition: all 1s;
			}
			
			
			
			.arrow:hover {
				animation-play-state: paused;
				-webkit-animation-play-state: paused;
			}

			.buttonlink {
				width: 160px;
				height: 48px;
				margin-top: 65px;

			}

			/* 打字机样式*/
			.content {
				position: absolute;
				width: 920px;
				height: 700px;
				left: 380px;
				top: 140px;
			
			}
			

			.content-flag {
				height: 100px;
				width: 100%;
				margin: 0;
			}

			.active .content-small.flag
			{
				animation: fade-in;
				/*动画名称*/
				animation-duration: 1s;
				/*动画持续时间*/
				-webkit-animation: fade-in 1s;
				
			}

			.content-small {
				color: #FFFFFF;
				font-size: 18px;
				margin-left: 15px;
				opacity: 0; 
				

				 transition: all 1s;
			}
			
			.active .content-small {
				opacity: 1; 
				animation: moveRight;
				/*动画名称*/
				animation-duration: 2s;
				/*动画持续时间*/
				-webkit-animation: moveRight 2s ease-in;
			}
			.content-medium {
				font-size: 24px;
				color: #FFFFFF;
				margin-top: 58px;
				margin-bottom: 19px;
				margin-left: 15px;
				opacity: 0; 
				 transition: all 0.2s;
			}
            .active	.content-medium 
            {
              opacity: 1; 
              animation: moveLeft;
              /*动画名称*/
              animation-duration: 0.8s;
              /*动画持续时间*/
              -webkit-animation: moveLeft 1s ease-in;
              /*针对webkit内核*/
            }

		

			/* 	第二页面 */
			.section.section-2 .about {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
	
			}

			.about .bottom {

				width: 100%;
				height: 301px;
				display: flex;
				transition: all 1s; opacity: 0;
			}
			
			.active .about .bottom
			{
				opacity: 1;
				transition-delay: 0.7s;
			}
			
			.about .center {
				width: 100%;
				height: 675px;
				display: flex;
			}

			.about .left {
				width: 583px;
				height: 500px;
				position: absolute;
				left: 180px;
				top: 140px;
				display: flex;
				flex-direction: column;
			}

			.about  .right {
				position: absolute;
				top: 194px;
				right: 0px;
				width: 666px;
				height: 389px;
				transition: all 1s; opacity: 0;
			}
			.active .right
			{
				right: 179px;
				opacity: 1;
				transition-delay: 0.7s;
				
			}
			
		
			.section-2-title {

				color: #646464;
				font-size: 26px;
				width: 106px;
				border-bottom: 2px solid #B9BEC8;
				padding-bottom: 5px;
				margin-bottom: 4px;
				opacity: 1;
				 transition: all 0.2s;
			}

			.section-2-title-en {

				width: 184px;
				height: 14px;
				color: #B4B4B4;
				font-size: 16px;
				margin-bottom: 64px;
		
			}
			.active .section-2-title,
			.active .section-2-title-en
			{
				opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;
			}
			
			.section-2-content {
				text-indent: 40px;
				width: 698px;
				height: 202px;
				color: #646464;
				line-height: 46px;
				letter-spacing: 2px;
								opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;
			}
			.active .section-2-content 
			{
				opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;
			}
			
			
			
			.stepbar {
				position: absolute;
				bottom: 90px;
				width: 0;
				height: 118px;
				border-top: 1.4px solid #B9BEC8;
				border-bottom: 1.4px solid #B9BEC8;
				display: flex;
				flex-direction: column;
				justify-items: center;
				opacity: 0;
				transition:  all 1s;
			}
			.active  .stepbar {
				width: 100%;
				transition-delay: 0.9s;
				opacity: 1;
			}
				
			.stepbar-top {
				width: 1140px;
				height: 35px;
				margin-left: 190px;
				position: relative;
				top: 420px;
				display: flex;
				align-items: center;
				z-index: 10;
				transition: all 1s;
				opacity: 0;
			}
			
			.active  .stepbar-top{
				top:20px;
				opacity: 1;
				transition-delay: 0.9s;
			}
			
			

			.stepbar-bottom {
				width: 1140px;
				height: 35px;
				margin-left: 190px;
				display: flex;
				align-items: center;
				position: relative;
				top: -220px;
				z-index: 10;
				transition: all 1s;
				opacity: 0;
				
			}
			.active  .stepbar-bottom {
				top: -20px;
				opacity: 1;
				transition-delay: 0.9s;
			}
			
			
			.stepbar-center {
				width: 100%;
				height: 48px;
				display: flex;
				flex-direction: row;
			}

			.stepbar-item {
				width: 0;
				background: #EEEEEE;
				text-align: center;
				position: relative;
				opacity: 0;
				transition: all 1s; 
				 z-index: 3;
			}
			.active .stepbar-item {
				width: 380px;
				opacity: 1;
				transition-delay: 0.9s;
			}
			
			

			.stepbar-item:before {
				content: '';
				height: 2px;
				width: 40%;
				background-color: #B9BEC8;
				position: absolute;
				top: 50%;
				left: -20px;
			}

			.stepbar-item:after {
				content: '';
				height: 2px;
				width: 40%;
				background-color: #B9BEC8;
				position: absolute;
				top: 50%;
				right: -20px;
			}

			.stepbar-after {
				position: absolute;
				top: 50%;
				width: 100%;
				background: #B9BEC8;
				 height: 2px;
				 z-index: 2;
			}

			.bar-title {
				width: 380px;
				text-align: center;
				color: #4B4B4B;
				font-size: 22px;
			}

			.bar-content {
				width: 380px;
				text-align: center;
				color: #969696;
				font-size: 18px;
			}
			
			/* 第三页面 */
			.service
			{
				width: 100%;
				height: 728px;
				margin: 0 auto;
				position: absolute;
				left: 200px;	
				top:160px;
				
			}
			.title-group{
				width: 100%;
				height: auto;
				margin: 0 auto;
				margin-left: 200px;	
				margin-top:160px;
			}
			.center-contain
			{
				display: flex;
				justify-content: space-between;
				width: 1350px;
				height: 600px;
				margin: auto;
			}
			
			.section-3-content
			{
				position: relative;
				margin:auto;
				text-indent: 40px;
				left:0;
				right:0;
				top:20px;
				bottom:0;
				width:1200px;
				height:120px;
				color: #646464;
				line-height: 34px;
				letter-spacing: 2px;
				transition: all 1s;
				
			}
			
			.active .section-3-content{
				left: 0;
				opacity: 1;
				transition-delay: 0.7s;
			}
			
			
			
			.service-card-group
			{
				position: relative;
				display: flex;
				width: 940px;
				height:450px;
				left:0;
				right:0;
				top:20px;
				bottom:0;
				flex-wrap:wrap;
				justify-content: space-around;
				margin: auto;
				transition: all 1s; 
			}
			
			.active .service-card-group
			{
				left: 0;
				opacity: 1;
				transition-delay: 0.7s;
			}
			.service-card
			{
			border-radius: 10px; 
			height:198px;
			box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.35);
			width:270px;
			flex-direction: column; 
			margin-bottom: 30px;
			display: flex; 
			position: relative;
			overflow: hidden; 
			box-sizing: border-box;  
		    text-align: center; border:1px solid #FFFFFF; border-left: none;
			transition: all 2s; 
			}
			.service-card:before{border-radius: 10px; content: ""; display: block; width: 0; height: 0; position: absolute; left: 0px; top: 0px; border-left:2px solid #1C80BE; border-top: 2px solid #1C80BE; transition: all 0.6s ; opacity: 0;}
			.service-card:after{border-radius: 10px; content: ""; display: block; width: 0; height: 0; position: absolute; right: 0px; bottom: 0px;border-right:2px solid #1C80BE; border-bottom: 2px solid #1C80BE; transition: all 0.6s ;opacity: 0;}
			.service-card:hover:before,.service-card:hover:after{ width: 100%; height: 100%;opacity: 1;border-radius: 10px;}
			
			
			
		     .service-card:hover
			{
				border: #1C80BE;
				background:#1C80BE;
				
			} 
			
			.card-icon-vip{
				background-image: url(../img/vip_0.png);
				background-size: cover;
				background-repeat: no-repeat;
				width:72px;
				height: 60px;
				position: absolute;
				left:100px;
				top:40px;
				transition: all 0.8s;
			}
			.card-icon-flow
			{
				background-image: url(../img/flow_0.png);
				background-size: cover;
				background-repeat: no-repeat;
				width:87px;
				height: 52px;
				position: absolute;
				left:95px;
				top:40px;
				transition: all 0.8s;
			}
			.card-icon-money
			{
				background-image: url(../img/money_0.png);
				background-size: cover;
				background-repeat: no-repeat;
				width:64px;
				height: 73px;
				position: absolute;
				left:100px;
				top:30px;
				transition: all 0.8s;
			}
			.card-icon-game
			{
				background-image: url(../img/game_0.png);
				background-size: cover;
				background-repeat: no-repeat;
				width:78px;
				height: 55px;
				position: absolute;
				left:95px;
				top:40px;
				transition: all 0.8s;
			}
			.card-icon-card
			{
				background-image: url(../img/card_0.png);
				background-size: cover;
				background-repeat: no-repeat;
				width:79px;
				height: 58px;
				position: absolute;
				left:95px;
				top:40px;
				transition: all 0.8s;
			}
			.card-icon-gift{
				background-image: url(../img/gift_0.png);
				background-size: cover;
				background-repeat: no-repeat;
				width:70px;
				height: 70px;
				position: absolute;
				left:98px;
				top:26px;
				transition: all 0.8s;
			}
			
			.service-card:hover .card-icon-vip{
				
                transform: rotate(360deg);
				background-image: url(../img/vip.png);
				background-size: cover;
				background-repeat: no-repeat;
		
			}
			.service-card:hover  .card-icon-flow
			{
				 transform: rotate(360deg);
				background-image: url(../img/flow.png);
				background-size: cover;
				background-repeat: no-repeat;
				
			}
			.service-card:hover  .card-icon-money
			{
				 transform: rotate(360deg);
				background-image: url(../img/money.png);
				background-size: cover;
				background-repeat: no-repeat;
				
			}
			.service-card:hover .card-icon-game
			{
				 transform: rotate(360deg);
				background-image: url(../img/game.png);
				background-size: cover;
				background-repeat: no-repeat;
		
			
			}
			.service-card:hover  .card-icon-card
			{
				 transform: rotate(360deg);
				background-image: url(../img/card.png);
				background-size: cover;
				background-repeat: no-repeat;
			
				
			}
			.service-card:hover  .card-icon-gift
			{
				transform: rotate(360deg);
				background-image: url(../img/gift.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
			
			.card-title
			{
				width:270px;
				height: 22px;
				color: #646464;
				position: absolute;
				top:120px;
			}
		
			.service-card:hover .card-title
			{
				color: #FFFFFF;
			}
			.card-content
			{		
				width:270px;
				height: 72px;
				font-size: 16px;
				color: #B4B4B4;
				position: absolute;
				top:150px;
			}
			
			
			.section-7-left{
				width: 650px;
				height: 100%;
			}

			.section-7-right
			{
				width: 620px;
				height: 100%;
			}
			.section-7-right .insert
			{
				width:584px;
				height:598px;
				margin-left: 1000px;
				transition: all 1s; 
				opacity: 0;
			}
			
			.active .section-7-right .insert
			{
				margin-left: 0;
				opacity: 1;
				transition-delay: 0.7s;
			}
			
			
			.section-7-content{
				width: 100%;
				height: 521px;
				display: flex;
				flex-wrap: wrap;
				margin-top: 0px;
				opacity: 0; 
				position: relative;
				left: -1000px;
				transition: all 1s; 
			}
			
			.active  .section-7-content
			{
				transition-delay: 0.7s;
				left: 0;
				opacity: 1; 
			}
			
			.content-box{
				width: 295.2px;
				height: 237px;
				margin-right: 26px;
			}
			/* .btn-deliver
			{
				width:163px;
				height:45px;
				background:linear-gradient(0deg,rgba(10,121,190,1),rgba(46,184,224,1));
				border-radius:6px;
				border: 0;
				color: #FFFFFF;
				font-weight:500;
				font-size: 24px;
				margin-left: 225px;
				transition: all 1s;
			
			} */
			/* .btn-deliver:hover
			{
				width:146px;
				height:40px;
				transition-delay: 0.9s;
			} */
			
		
			.btn-deliver{
				width:146px;
				height:40px;
				background:linear-gradient(0deg,rgba(10,121,190,1),rgba(46,184,224,1));
				border-radius:6px;
				border: 0;
				color: #FFFFFF;
				font-weight:500;
				font-size: 20px;
				margin-left: 236px;
				
				}

			.btn-deliver:hover
			{
				  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
			}
			
			
			
			/* 第五页 */
			/* 六边形 */
			
			.base_polygon {
			                position: relative;
			                width: 20px;
			                height: 36px;
			                margin: 0px auto;
			                background-color: red;
			            }
			            .base_polygon:before {
			                content: '';
			                display: block;
			                position: absolute;
			                width: 0;
			                height: 0;
			                right:20px;
			                border-width: 18px 10px;
			                border-style: solid;
			                border-color: transparent red transparent transparent;
			            }
			            .base_polygon:after {
			                content: '';
			                display: block;
			                position: absolute;
			                width: 0;
			                height: 0;
			                left:20px;
			                border-width: 18px 10px;
			                border-style: solid;
			                border-color: transparent transparent transparent red;
			                top:0;
			            }

				
				
				
				.polygoncolor1
				{	float: left;
					margin-right: 29px;
					background-color:#CE7344;
				}
				.polygoncolor1::after
				{	
					border-left: 10px solid #CE7344;
				}
				.polygoncolor1::before
				{	
					 border-right: 10px solid #CE7344;
				} 
				
				.polygoncolor2
				{	
					float: left;
					margin-right: 29px;
					background-color:#DD666A;
				}
				.polygoncolor2::after
				{	
					border-left: 10px solid #DD666A;
				}
				.polygoncolor2::before
				{	
					 border-right: 10px solid #DD666A;
				} 
				
				.polygoncolor3
				{	
					float: left;
					margin-right: 29px;
					background-color:#FDAE17;
				}
				.polygoncolor3::after
				{	
					border-left: 10px solid #FDAE17;
				}
				.polygoncolor3::before
				{	
					 border-right: 10px solid #FDAE17;
				} 
				
				
				.polygoncolor4
				{	
					float: left;
					margin-right: 29px;
					background-color:#6FCD58;
				}
				.polygoncolor4::after
				{	
					border-left: 10px solid #6FCD58;
				}
				.polygoncolor4::before
				{	
					 border-right: 10px solid #6FCD58;
				} 
				
				.polygoncolor5
				{	
					float: left;
					margin-right: 29px;
					background-color:#1189DD;
				}
				.polygoncolor5::after
				{	
					border-left: 10px solid #1189DD;
				}
				.polygoncolor5::before
				{	
					 border-right: 10px solid #1189DD;
				} 
				.product-1
				{
					width: 260px;
					height: 40px;
					position: relative;
					left:1260px;
					line-height: 36px;
					margin-top: 20px;
					opacity: 0;
					transition: all 1s; 
				}
				.product-2
				{
					width: 260px;
					height: 40px;
					position: relative;
					left:1220px;
					line-height: 36px;
					margin-top: 20px;
					opacity: 0;
					transition: all 1s; 
				}
				.product-3
				{
					width: 260px;
					height: 40px;
					position: relative;
					left:1180px;
					line-height: 36px;
					margin-top: 20px;
					opacity: 0;
					transition: all 1s; 
				}
				.product-4
				{
					width: 260px;
					height: 40px;
					position: relative;
					left:1140px;
					line-height: 36px;
					margin-top: 20px;
					opacity: 0;
					transition: all 1s; 
				}
				.product-5
				{
					width: 260px;
					height: 40px;
					position: relative;
					left:1100px;
					line-height: 36px;
					margin-top: 20px;
					opacity: 0;
					transition: all 1s; 
				}
				
				
				.active .product-1{
					
					left:260px;
					opacity: 1;
					transition-delay: 0.2s;
				}
				
				.active .product-2{
					
					left:220px;
					opacity: 1;
					transition-delay: 0.4s;
				}
				.active .product-3{
						left:180px;
						opacity: 1;
						transition-delay: 0.7s;
					
				}
				.active .product-4{
					
					left:140px;
					opacity: 1;
					transition-delay: 0.9s;
				}
				.active .product-5{
					
					left:100px;
					opacity: 1;
					transition-delay: 1.2s;
				}
				
				
				.section-5-left
				{
					width: 100px;
				}
				.section-5-right{
					position: absolute;
					top:140px;
					right: 1200px;
					opacity: 0;
					transition: all 1s; 
				}
				
				.active .section-5-right{
					
					right: 200px;
					opacity: 1;
					transition-delay: 1.2s;
				}
				
				.section6-bottom
				{
					width: 100%;
					margin: auto;
					position: absolute;
					top:290px;
					text-align: center;
				}
				.section6 .company-box
				{
					width: 1352px;
					height: 327px;
					opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5);
					transition: all 1s; 
					margin-bottom: 20px;
				}
				.section6 .custom-box
				{

					margin-top: 20px;
					width: 710px;
					height: 167px;
					opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5);
					transition: all 1s; 
				}
				.active  .company-box
				{
					 opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;
				}
				
				.active .custom-box
				{
					 opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;
				}
				/* 联系我们 第八页*/
				.contact-us-box
				{
					width:1150px;
					height: 600px;
					background: #D3E2EF;
					box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.35);
					border-radius:20px;
				
					margin-top: 206px;
					margin-left: 470px;
					display: flex;
				}
				.section-8-title{
					position: absolute;
					top:185px;
					left:820px;
				}
				.section-8-left{
					width:460px;
					height: 600px;
				}
				.section-8-right{
					width: 688px;
					height: 600px;
				}
				.section-8-bottom{
					width: 100%;
					height: 40px;
					margin-top: 21px;
					color: #646464;
					text-align: center;
				}
				.lable-contact-us{
					font-size: 18px;
					color: #646464;
					margin-right: 10px;
				}
				.value-contact-us{
					font-size: 18px;
					color: #646464;
				}
				.contact-us-box .form
				{
					width: 588px;
					height: 400px;
					margin-top: 65px;
				}
				.contact-us-box .information-box
				{
					width: 588px;
					height: auto;
					text-align: left;
					padding-bottom: 20px;
				}
				.contact-us-box .text-area
				{
					resize:none;
					 width: 550px;
					 height: 160px;
					 border-radius: 8px;
					 border: 0;
				}	
				.contact-us-box .input-group{
					display: flex;
					justify-content: space-between;
					width:550px;
					height: 40px;
					margin-bottom: 20px;
				}
				.contact-us-box .input-style{
					width: 250px;
					border-radius:8px;
					border: 0;
					padding-left: 20px;
					font-size: 14px;
					font-family: "pingFangSC-Regular";
				}
				.contact-us-box .submit{
					width: 300px;
					height: 50px;
					border-radius:8px;
					border: 0;
					background: #1C80BE;
					color: #FFFFFF;
					margin-left: 126px;
					margin-top: 20px;
				
				}

				 
			textarea
			{
				padding-top: 10px;
				padding-left: 20px;
				font-size: 14px;
				font-family: "pingFangSC-Regular";
			}   
			#map_canvas
			{
				width: 540px;
				height: 480px;
				position: absolute;
				left:-170px;
				top:70px;
				border-radius: 10px;
			}
			
		    /* 	动效 */
			
			.btn-more{ 
				width: 132px;
				height: 30px;
				border: 1px solid rgba(255, 255, 255, 1);
				border-radius: 6px;
				background-color: transparent;
				margin-left: 15px;
				margin-top: 20px;
				color: #FFFFFF;
				position:relative; 
				 overflow: hidden; 
				 -webkit-transition: all .2s;
				 transition: all .2s;
				 }
			.btn-more:hover{ color:#fff; border-color:#7DB4FF;}
			.btn-more .bgsqr1{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg); transform: rotate(360deg);border-style: solid;border-width: 0; border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent; border-left-color:#7DB4FF;position: absolute;bottom: 0;left: 0; -webkit-transition: all 0.6s; transition: all 0.6s;}
			.btn-more .bgsqr2{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg);transform: rotate(360deg);border-style: solid;border-width: 0; border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-top-color:#7DB4FF; position: absolute;top: 0; left: 0;-webkit-transition: all 0.6s; transition: all 0.6s;}
			.btn-more .bgsqr3{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg);transform: rotate(360deg);border-style: solid;border-width: 0; border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;border-right-color:#7DB4FF; position: absolute;top: 0; right: 0;-webkit-transition: all 0.6s; transition: all 0.6s;}
			.btn-more .bgsqr4{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg);transform: rotate(360deg);border-style: solid;border-width: 0; border-left-color:transparent;border-right-color:transparent;border-top-color:transparent; border-bottom-color:#7DB4FF;position: absolute;bottom: 0; right: 0;-webkit-transition: all 0.6s; transition: all 0.6s;}
			.btn-more:hover .bgsqr1{ border-width:200px 0 0 200px;}
			.btn-more:hover .bgsqr2{ border-width:200px 200px 0 0;}
			.btn-more:hover .bgsqr3{ border-width:0 200px 200px 0;}
			.btn-more:hover .bgsqr4{ border-width:0 0 200px 200px;}
			.btn-more span{ position:relative; z-index:1;}