@charset "utf-8";

/*
	body
	{
		margin: 0 auto;
		padding: 80px 0px 0px 0px;
	}
*/	
	.background-green
	{
		background: radial-gradient(circle at 30px 50px, #cdeedd, #edf2fa, #9bddbb);
	}
	
	.background-yellow
	{
		background-color: #ffffff;
		background: radial-gradient(circle at 30px 50px, #fff360, #f6b453, #fff360);
	}
	
	.background-while
	{
		background-color: #f0f0f0;
		
		/*
		background: radial-gradient(circle at 30px 50px, #edf2fa, #ffffff, #edf2fa);
		background: radial-gradient(circle at 30px 50px, #edf2fa, #ffffff, #e8f0fe);
		background: radial-gradient(circle at 30px 50px, #e8f0fe, #edf2fa, #d3e3fd);*/
		background-color: #ffffff;
		background-color: #cdeedd;
		background: radial-gradient(circle at 30px 50px, #cdeedd, #edf2fa, #9bddbb);
	}
	
	.background-silver
	{
		background-color: #edf2fa;
		/*background: radial-gradient(circle at 30px 50px, #fff360, #f6b453, #fff360);*/
		background: radial-gradient(circle at 30px 50px, #e8f0fe, #edf2fa, #d3e3fd);*/
	}
	
	.sloganT1
	{
		color: #00A0DE;
		/*background-color: #d3e3fd;*/
	}
	
	.sloganT2
	{
		color: #009B4C;
		/*background-color: #b6ffa0;*/
	}	
	
	.sloganT3
	{
		color: #F08519;
		/*background-color: #ffebce;*/
	}	
	
	.sloganT4
	{
		color: #89A520;
		/*background-color: #e3ffa1;*/
	}	
	
	
		
/**********************************************************
	header
**********************************************************/

	header
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;

		clear: both;

		position: fixed;
		z-index: 9000;

		text-align: center;

		top: 0;
		width: 100%;
		height: 80px;
		
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);

		/*模糊效果*/
		
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
		header::after
		{
			content: '';
			clear: both;
			display: table;
		}
			
		header .content
		{
			margin: 0 auto;
			padding: 0px;
			height: 100%;
		
			border: yellow 0px solid;
		}
		
			header .content::after
			{
				content: '';
				clear: both;
				display: table;
			}
	
/**********************************************************
	nav
**********************************************************/

	nav
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
		clear: both;
		
		display: block;
		height: 100%;
		
		white-space: nowrap;
		text-align: left;
		overflow: hidden;
		
		border: yellow 0px solid;

	}
	
		nav::after
		{
			content: '';
			clear: both;
			display: table;
		}
	
		nav .nav-master-logo
		{
			margin: 0 auto;
			padding: 0px 0px 0px 0px;

			height: 100%;
			float: left;
			display: block;
			text-align: left;
			
			border: red 0px solid;
		}

			nav .nav-master-logo button
			{
				margin: 0 auto;
				padding: 0px 0px 0px 0px;
				
				border-radius: 0px;
				background: none;
				border: 0px;
				
				width: 100%;
				height: 100%;		
			}
	
		nav .nav-master-menu
		{
			margin: 0 auto;
			padding: 0px 0px 0px 0px;

			height: 100%;
			width: 48px;
			float: right;

			text-align: left;	
		}
		

			nav .nav-master-menu button
			{
				margin: 0 auto;
				padding: 0px 0px 0px 0px;
				width: 100%;
				height: 100%;
				
				border-radius: 0px;
				background-color: #2a3c39;
				background-color: #5FA776;
				background: none;
				border: 0px;
			}
			
			nav .nav-master-menu button:hover
			{
				background-color: #72c68d;
				background-color: #51c488;
			}
			
			nav .nav-master-menu button img
			{
				width: 32px;
				height: 32px;
			}


		nav .navigator-menu
		{

			margin: 0 auto;
			margin-right: 2px;
			padding: 0px 0px 0px 0px;

			list-style: none;
			text-align: left;
			
			float: right;
			height: 100%;

			border-right: 1px solid rgba(250, 250, 250, 0.1);
			border: yellow 0px solid;
			/*display: inline-block;*/
		}
		
			nav .navigator-menu li 
			{
				margin: 0;
				padding: 0px 2px 0px 2px;
				border: #aaa 0px solid;

				float: left; 
				display: inline;
				list-style-type: none;
				list-style: none; 
				border: red 0px solid;
				height: 100%;
			}
			
				nav .navigator-menu li button 
				{
					margin: 0px;
					padding: 10px 10px 0px 10px;

					display: block;

					height: 100%;
					
					
/*
					font-size: 11pt;
					line-height: 30px;
					color: #555;
					text-align: center;
					text-decoration: none;
*/			
					font-size: var(--button-font-size);
					line-height: var(--button-line-height);
					color: #353535;
	
					
					background: none;
					border-radius: 0px;
				}
				
					nav .navigator-menu li button:hover 
					{
						color: #06aa54;
						background-color: #e7f7ee;
						background-color: rgba(6, 170, 84, 0.10);
					}
					
					nav .navigator-menu li button::after
					{
					  content:" ";
					  display: block;
					  
					  width: 0%;
					  height: 3px;

					  background-color: #06aa54;
					  /*transition: .3s .1s;*/
					  transition: width 0.3s 0.1s;
					}

					nav .navigator-menu li button:hover::after
					{
						width: 100%;
					}

				nav .navigator-menu li .on
				{
					color: #06aa54;
				}
				
				nav .navigator-menu li .on::after
				{
					content:" ";
					display: block; 
					width: 100%;
					height: 3px;
					background-color: #06aa54;
				}
				
				

			

		
/*********************************************
	master-menu
*********************************************/

	#master-menu-toggle {display: none;}

		#master-menu-toggle:checked ~ .master-menu
		{
			visibility: visible;
			opacity : 1;
			left: 0;
			left:calc(100% - 200px);
		}

		#master-menu-toggle:checked ~ .master-menu-full
		{
			display: block;
			opacity: 1;
		}
		
		
	
	.master-menu-full
	{
		display: none;
		position: fixed;

		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		background-color: rgba(0, 0, 0, 0.20);
		z-index: 9997;
		opacity: 0;
		transition: all 0.5s;	
	}
	
	.master-menu
	{
		margin: 0 auto;
		padding: 80px 10px 10px 10px;
		padding: 0px 0px 0px 0px;
		
		width: 200px;

		position: fixed;
		visibility: hidden;
		z-index: 9998;
		overflow: auto; 

		left: 100%;
		top: 0;
		bottom: 0;
		
		/*transition: 0.3s;*/
		
		opacity: 0;
		transition: all 0.2s;
		
		border: #bbb 0px solid;
		border-left: #bbb 1px solid;
		/*background-color: rgba(249, 249, 249, 1.99);*/
		box-shadow: 0px 3px 8px 3px rgba(0, 0, 0, 0.1);
		background: radial-gradient(circle farthest-corner at left, #fff, #f8f7f3);
	}
		.master-menu .logo
		{
			margin: 0 auto;
			padding: 10px;
			text-align: center;
		}
		
			.master-menu .logo button
			{
				margin: 0 auto;
				padding: 0px 0px 0px 0px;
				
				border: #aaa 0px solid;
				width: 96px;
				height: 96px;
				
				background: none;
				border-radius: 0px;
				/*
				transition: background-color 0.3s;
				*/
			}
				.master-menu .logo button:hover 
				{
					/*background-color: rgba(10, 170, 80, 0.1);*/
				}
				
		.master-menu .menulabel
		{
			margin: 0 auto;
			padding: 12px 2px 12px 12px;
			
			display: block;

			font-size: 10pt;
			line-height: 12pt;
			text-align: left;
			color: #80868b;
		}
		
		.master-menu ul 
		{
			margin: 0 auto;
			padding: 10px 10px 10px 10px;
			
			list-style: none;
			text-align: left;
			
			border-top: rgba(0, 0, 0, 0.1) 0px solid;
			border-bottom: #ddd 0px solid;
		}

			.master-menu ul li
			{
				margin: 0 auto;
				padding: 2px 2px 2px 2px;
			}
			
				.master-menu li button
				{
					margin: 0 auto;
					padding: 7px 2px 6px 62px;
					
					height: 48px;
					width: 100%;
					
					color: #3c4043;
					color: #353535;
					text-align: left;


					border-radius: 16px;
					border-radius: 2em;
					background: none;
					transition: background-color 0.3s;
					
					background-size: 36px 36px;
					background-repeat: no-repeat;
					background-position:  16px 50%;
				}

				.master-menu li button:hover 
				{
					/*color: #3c4043;*/
					background-color: rgba(10, 170, 80, 0.4);
				}
				
					.master-menu li .on
					{
						/*color: #3c4043;*/
						background-color: rgba(10, 170, 80, 0.2);
					}
					
					.master-menu li .icon-contacts
					{
						background-image:url(../images/icon-contacts.svg);
					}

					.master-menu li .icon-items
					{
						background-image:url(../images/icon-items.svg);
					}

					.master-menu li .icon-profile
					{
						background-image:url(../images/icon-profile.svg);
					}

					.master-menu li .icon-records
					{
						background-image:url(../images/icon-records.svg);
					}
					
				.master-menu li button:focus-visible
				{

				}





/*********************************************/


	main
	{
		margin: 0px auto;
		padding: 0px 0px 10px 0px;

		clear: both;
	}
		main::after
		{
			content: '';
			clear: both;
			display: table;
		}

		main .content
		{
			margin: 0px auto;
			padding: 30px 10px 10px 10px;
			clear: both;
		}
		
			main .content::after
			{
				content: '';
				clear: both;
				display: table;
			}
		

	.padding-top80
	{
		padding-top: 80px;
	}

	section
	{
		margin: 0px auto;
		padding: 0px;
		
		clear: both;
		
		background-color: #ffffff;
		
		border: 0px dotted red;

	}

		section::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
		section .content
		{
			margin: 0px auto;
			padding: 40px 0px 40px 0px;
			border: 0px dotted green;
		}
		
			section .content::after
			{
				content: '';
				clear: both;
				display: table;
			}
		
				section .content .cover,
				section .content .main-cover
				{
					margin: 0 auto;
					padding: 0px;

					border-radius: 15px;
					overflow: hidden;
		border: 1px solid #dedede;
				}
	
				section .content .cover
				{
					float: left;
					width: 30%;
				}					
					section .content .cover img/*,
					section .content .main-cover img*/
					{
						margin: 0px auto;

						max-height: 100%;  
						max-width: 100%;
						width: auto;
						height: auto;
					}
					
					section .content .main-cover img
					{
						margin: 0px auto;

						/*max-height: 100%;*/
						max-width: 100%;
/*
						width: auto;
						height: auto;*/
					}
					
		section article
		{
			margin: 0 auto;
			padding: 0px 0px 0px 40px;
			
			float: left;
			width: 70%;
		}
		
		



		

		
	footer
	{
		margin: 0px auto;
		padding: 10px 0px 50px 0px;

		font-size: 11pt;
		line-height: 16pt;
		font-weight: normal;
		text-align: left;

		clear: both;

		color: #C0C0C0;
		/*box-shadow: inset 6px 2px 5px 2px rgba(0, 0, 0, 0.05);*/
		
	}

		footer::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
		footer .content
		{
			margin: 0px auto;
			padding: 20px 10px 10px 10px;

			width: 1200px;
		}
		
		footer .content::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
		footer table
		{	
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			
			border-collapse: collapse;
			text-align: left;
			vertical-align: text-top;
		}
		
		footer table tbody
		{	
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;

		}
			
			footer table caption
			{	
				margin: 0px 0px 0px 0px;
				padding: 20px 0px 20px 0px;
				
				font-size: 13pt;
				line-height: 16pt;
				font-weight: bold;
				text-align: left;
			}
			
			footer table th
			{	
				padding: 0px 0px 0px 0px;
				text-align: left;
				white-space: nowrap; 		
				font-weight: bold;
				vertical-align: text-top;
			}
			
			footer table td
			{	
				text-align: left;
				font-weight: normal;
				vertical-align: text-top;
			}



@media screen and (min-width: 1201px) 
{
	
	header .content,
	main .content,
	footer .content,
	section .content
	{
		width: 1150px;
	}

	section .content
	{
		padding: 40px 0px 40px 0px;
	}
	
		section .content .cover
		{
			width: 40%;
			border-radius: 15px;
		}
		
		section article
		{
			width: 60%;
		}
	
	nav .navigator-menu{display: block;}
	nav .nav-master-menu{display: none;}

	
	nav .nav-master-logo
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
		width: 400px;
		float: left;
	}
		nav .nav-master-logo button
		{
			margin: 0 auto;
			padding: 10px;
		}
}

@media screen and (min-width: 850px) and (max-width: 1200px) 
{

	header .content,
	main .content,
	footer .content,
	section .content
	{
		width: 800px;
	}
	
	section .content
	{
		padding: 40px 0px 40px 0px;
	}

		section .content .cover,
		section .content .main-cover
		{
			width: 100%;
			border-radius: 15px;
		}
		
		section article
		{
			padding: 40px 10px 0px 10px;
			width: 100%;
		}

	nav .navigator-menu{display: block;}
	nav .nav-master-menu{display: none;}


	
	nav .nav-master-logo
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
		width: 300px;
		float: left;
	}
		nav .nav-master-logo button
		{
			margin: 0 auto;
			padding: 0px;
		}
		

}

@media only screen and (max-width: 849px)
{

	header .content,
	main .content,
	footer .content,
	section .content
	{
		width: 100%;
	}
	
	section .content
	{
		padding: 0px 0px 40px 0px;
	}
		
		section .content .cover,
		section .content .main-cover
		{
			width: 100%;
			border-radius: 0px;
		}
		
		section article
		{
			padding: 40px 20px 0px 20px;
			width: 100%;
		}
	
	nav .navigator-menu{display: none;}
	nav .nav-master-menu{display: block;}
	
	
	nav .nav-master-logo
	{
		margin: 0 auto;
		padding: 0px 48px 0px 0px;
		float: none;
		width: 100%;
	}
		nav .nav-master-logo button
		{
			margin: 0 auto;
			padding: 0px;
		}
}





/*
@media only screen and (max-width: 499px)
{
	nav .nav-master-logo
	{
		margin: 0 auto;
		padding: 0px 48px 0px 0px;
		float: none;
		width: 100%;
	}
		nav .nav-master-logo button
		{
		
			margin: 0 auto;
			padding: 0px;
		}
}
*/















	

	.pan-projects
	{
		margin: 0 auto;
		padding: 20px 0px 10px 20px;
	}
	
		.pan-projects li
		{
			margin: 0 auto;
			padding: 0px 0px 20px 0px;
			/*
			font-size: 1.1em;
			line-height: 1.2em;*/
		
		}
		
		.pan-projects li u
		{
			color: #06aa54;
			font-weight: bold;
			/*
			font-size: 1.1em;
			line-height: 1.5em;*/
			text-decoration: none;
		}








	.pan-contact
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
		
		list-style: none;
		text-align: left;
		
		border: 0px solid yellow;
	}
	/*
		.pan-contact::after
		{
			content: '';
			clear: both;
			display: table;
		}
		*/
	.pan-contact li
	{
		margin: 0 auto;
		padding: 10px 0px 10px 0px;
		border-bottom: 1px solid #dedede;
		/*border-radius: 15px;
		transition: background-color 0.3s;*/
	}
	
		.pan-contact li:hover
		{
			/*background-color: #e7f7ee;*/
		}
		
		.pan-contact li::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
	.pan-contact li:last-child
	{
		border-bottom: 0px solid #dedede;
	}
	
	.pan-contact li .panel
	{
		margin: 0 auto;
		padding: 10px;
		
		border-radius: 15px;
		border-bottom: 0px solid #dedede;
		transition: background-color 0.3s;
	}
		
		.pan-contact li .panel:hover
		{
			background-color: #e7f7ee;
		}
			
		.pan-contact li .panel::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
	.pan-contact li .lbl
	{
		margin: 0 auto;
		padding: 0px;
		font-weight: bold;
		float: left;
	}
	
	.pan-contact li .txt
	{
		margin: 0 auto;
		padding: 0px 0px 0px 30px;
		/*color: #333;*/
		float: left;
		/*font-weight: bold;*/
	}
	
	.pan-contact li .icon-address
	{
		padding: 0px 0px 0px 65px;

		
		background-image: url(../images/icon-address.svg);
		background-repeat: no-repeat;
        background-position: 28px center;
		background-size: 32px 32px;
	}
	
	.pan-contact li .icon-mail
	{
		padding: 0px 0px 0px 65px;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
		background-image: url(../images/icon-email.svg);
		background-repeat: no-repeat;
        background-position: 28px center;
		background-size: 32px 32px;
	}		



@media only screen and (max-width: 849px)
{

	.pan-contact li .lbl
	{
		float: none;
		width: 100%;
	}
	
	.pan-contact li .txt
	{
		padding: 0px 0px 0px 0px;
		float: none;
		width: 100%;
	}
	
	.pan-contact li .icon-address
	{
		padding: 0px 0px 0px 35px;
        background-position: 0px center;
	}
	
	.pan-contact li .icon-mail
	{
		padding: 0px 0px 0px 35px;
        background-position: 0px center;
	}		
}			
















	
	
	.pan-records
	{
		margin: 0 auto;
		padding: 20px 0px 0px 0px;
		clear: both;
		border: green 0px solid;
	}
		.pan-records::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
	.pan-record
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
	/*
		font-size: 11pt;
		line-height: 16pt;
		*/
		position: relative;
		border: blue 0px solid;

	}
		.pan-record::after
		{
			content: '';
			clear: both;
			display: table;
		}
		
	.pan-record .year
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
	
		/*float: left;
		width: 100px;*/
		left: 0;
		top: 16px;		
		color: #06aa54;
		font-size: 21pt;
		line-height: 23pt;
		position: absolute;
		font-style: italic;
		font-weight: bold;
		border: red 0px solid;
		border-bottom: 0px solid #aaa;
	}
		
	.pan-record .items
	{
		margin: 0 auto;
		margin-left: 70px;
		padding: 31px 0px 0px 0px;
	
		/*float: left;
		/*width: 100%;*/
		/*
		font-size: 11pt;
		line-height: 13pt;*/
		/*position: absolute;*/
		
		border: red 0px solid;
	}
	
	.pan-record .line
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
	
		position: absolute;  
		width: 1px;
		height: 100%;
		left: 100px;
		top: 0px;

		border-left: 1px solid #06aa54;
		
	}
	
	.pan-record .point
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;
	
		position: absolute;  

		width: 16px;
		height: 16px;
		left: 92px;
		top: 23px;
		
		border-radius: 8px;
		background-color: #fff;
		border: 4px solid #06aa54;
		
	}

	.pan-record .items ul
	{
		margin: 0px;
		padding: 10px 0px 0px 27px;
		
		list-style: none;
		text-align: left;
		width: 100%;
		/*position: absolute;*/
		
		border: red 0px solid;
		border-top: 1px dotted #06aa54;

	}

		.pan-record .items ul::after
		{
			content: '';
			clear: both;
			display: table;
		}

	.pan-record .items ul li
	{
		margin: 0 auto;
		padding: 5px 0px 5px 0px;

		text-align: left;
		
		border-radius: 10px;
		border-bottom: 0px solid #e0e0e0;

		transition: background-color 0.3s, color 0.3s;
		
	}
	
	.pan-record .items ul li:nth-child(odd)
	{
		background-color: #EDFFED;
		background-color: #f2fbf6;
		
		
	}
	
	.pan-record .items ul li:hover
	{
		background-color: #d7eed7;
		background-color: #daf2e6;
		
		
	}
	
	.pan-record .items ul li .con
	{
		margin: 0 auto;
		padding: 0px 0px 0px 10px;
		clear: both;
		border-left: 7px solid #dcebb7;
		border-left: 7px solid #d1e5a4;
		
		
	}
	
	.pan-record .items ul li .con::after
	{
		content: '';
		clear: both;
		display: table;
	}	

	.pan-record .items ul li .corp
	{
		margin: 0 auto;
		padding: 0px 2px 0px 0px;

		text-align: left;
		float: left;
		width: 25%;
		color: #333;
		
	}
	
	.pan-record .items ul li .proj
	{
		margin: 0 auto;
		padding: 0px 2px 0px 0px;

		color: #32b16c;
		color: #06aa54;
		 
		text-align: left;
		float: left;
		width: 60%;
		
		border: 0px solid yellow;
	}	
	
	.pan-record .items ul li .memo
	{
		margin: 0 auto;
		padding: 0px 0px 0px 0px;

		text-align: left;
		float: left;
		width: 15%;
		color: #999;
		
		border: 0px solid yellow;
	}
	
@media only screen and (max-width: 849px)
{
	.pan-record .items ul li .corp
	{
		width: 100%;
	}
	
	.pan-record .items ul li .proj
	{
		width: 100%;
	}	
	
	.pan-record .items ul li .memo
	{
		width: 100%;
	}	
	
}