* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

body {
	font-family:微软雅黑;
	background:#F8F8F8;
	color:#333;
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
}

canvas{
	display:block;
}

a {
	text-decoration:none;
}

header {
	width:100%;
	min-width:1200px;
	height:48px;
	background:#EFEFEF;
	position:fixed;
	top:0px;
	z-index:10;
}

header iframe {
	width:240px;
	background:none;
	position:absolute;
	right:0px;
	top:-2px;
}

#logo {
	width:148px;
	height:48px;
	position:fixed;
	top:0px;
	left:0px;
	z-index:10;
	background: url(../img/jisuowei.svg) center center no-repeat;
}

footer {
	width:100%;
	height:32px;
	position:fixed;
	bottom:0px;
	z-index:10;
}
footer p {
	color:#5c5c5c;
	font-size:12px;
	text-align:center;
	position:fixed;
	bottom:0px;
	width:100%;
	line-height:32px;
}
footer p a {
	color:inherit;
	font-size:12px;
	text-decoration:none;
	transition:all 0.23s;
}
footer p a:hover {
	color:black;
}

/* Panel */
.p-container {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:48px;
}
.p-container > input,
.p-container > a {
	width:108px;
	height:48px;
	line-height:48px;
	position:fixed;
	top:0;
	cursor:pointer;
	transition:background 0.25s;
}

#nav-1,#nav-1 + a {left:148px;}
#nav-2,#nav-2 + a {left:256px;}
#nav-3,#nav-3 + a {left:364px;}
#nav-4,#nav-4 + a {left:472px;}
#nav-5,#nav-5 + a {left:580px;}
#nav-6,#nav-6 + a {left:688px;}

.p-container > input {
	opacity:0;
	filter:alpha(opacity=0);
	z-index:100;
}
.p-container > a {
	z-index:10;
	font-size:14px;
	background:#efefef;
	text-align:center;
	color:#58595B;
}
.p-container input:hover + a {
	background:#E8E8E8;
	background:#E0E0E0;
}
.p-container input:checked + a,
.p-container input:checked:hover + a {
	background:#E0E0E0;
	background:#5c5c5c;
	color:white;
}
.p-container input:checked + a:after {
	content:"";;
	width:0;
	height:0;
	overflow:hidden;
	border:5px solid transparent;
	border-bottom-color:#FAFAFA;
	position:absolute;
	bottom:0px;
	left:50%;
	margin-left:-5px;
}

.panel,
.panelson {
	width:100%;
	height:100%;
	position:relative;
}
.panel {
	left:0;
	top:0;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}
.panelson {
	background:#FAFAFA;
	overflow:hidden;
}

#nav-1:checked ~ .panel {
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-o-transform:translateY(0%);
	-ms-transform:translateY(0%);
	transform:translateY(0%);
}
#nav-2:checked ~ .panel {
	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-o-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
#nav-3:checked ~ .panel {
	-webkit-transform:translateY(-200%);
	-moz-transform:translateY(-200%);
	-o-transform:translateY(-200%);
	-ms-transform:translateY(-200%);
	transform:translateY(-200%);
}
#nav-4:checked ~ .panel {
	-webkit-transform:translateY(-300%);
	-moz-transform:translateY(-300%);
	-o-transform:translateY(-300%);
	-ms-transform:translateY(-300%);
	transform:translateY(-300%);
}


/* parallax */
#parallax_particles {
	position:absolute;
	z-index:2;
	width:120%;
	height:120%;
	top:-10%;
	left:-10%;
}
#parallax_pen {
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:url(../img/pen.png) center center no-repeat;
	background-size:contain;
}

#parallax_welcome{
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:url(../img/welcometo.svg) center center no-repeat;
	background-size:contain;
}

/* 历程 */
#history {
	width:800px;
	height:440px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-260px;
	margin-left:-400px;
}

#his-top {
	width:100%;
	height:340px;
	position:absolute;
	overflow:hidden;
}

#his-panel {
	width:100%;
	height:2380px;
}

#his-panel section {
	width:100%;
	height:340px;
}

#his-panel section img {
	box-shadow:0px 0px 5px #808080;
	margin-top:60px;
	margin-left:40px;
	width:400px;
	height:225px;
}

#his-panel section h1 {
	font-size:16px;
	font-weight:bold;
	margin-top:-216px;
	margin-left:480px;
	margin-bottom:14px;
}

#his-panel section p {
	width:320px;
	font-size:12px;
	margin-left:480px;
	line-height:22px;
	margin-bottom:6px;
}

#his-bottom {
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
}

#his-bottom p {
	width:100%;
	height:4px;
	border-radius:4px;
	background:#efefef;
	margin-top:48px;
}

#his-bottom p a {
	font-size:12px;
	display:block;
	text-align:center;
	line-height:48px;
	color:#5c5c5c;
	width:48px;
	height:48px;
	border-radius:48px;
	background:#efefef;
	position:absolute;
	top:26px;
	transition:all 0.2s;
}

#a1999 {left:80px;}
#a2005 {left:240px;}
#a2006 {left:300px;}
#a2008 {left:380px;}
#a2011 {left:478px;}
#a2014 {left:572px;}
#a2015 {left:634px;}

/* skills */
#skill {
	width:800px;
	height:440px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-260px;
	margin-left:-400px;
}

#skill h1 {
	color:#7D7D7D;
	font-size:32px;
	font-family:impact;
	font-style:italic;
	text-align:center;
	position:absolute;
	width:100%;
	top:-36px;
}


.table_show {
	width:800px;
	height:420px;
	position:absolute;
}

#barchar_center {
	width:760px;
	height:360px;
	/*background:#F0F0F0;*/
	position:absolute;
	top:30px;
	left:20px;
}
#bc-l-t {
	width:86px;
	height:315px;
	font-size:12px;
	font-family:微软雅黑;
	line-height:24px;
	text-align:right;
	padding:5px 14px 0px 0px;
}
#bc-r-t {
	width:659px;
	height:319px;
	position:absolute;
	top:0px;
	right:0px;
	border-left:1px solid #5c5c5c;
	border-bottom:1px solid #5c5c5c;
}
#bc-r-t span {
	width:0px;
	height:14px;
	display:block;
	position:relative;
	left:0px;
	top:10px;
	margin-bottom:10px;
	border-radius:0 2px 2px 0;
	background:url(../img/span_bg.png);
	animation:spanAnimation 1.2s linear infinite;
	-moz-animation:spanAnimation 1.2s linear infinite;
	-webkit-animation:spanAnimation 1.2s linear infinite;
	-o-animation:spanAnimation 1.2s linear infinite;
}

#bc-r-t span:nth-child(even) {
	animation:spanAnimations 1.2s linear infinite;
	-moz-animation:spanAnimations 1.2s linear infinite;
	-webkit-animation:spanAnimations 1.2s linear infinite;
	-o-animation:spanAnimations 1.2s linear infinite;
}

@keyframes spanAnimation {0% {background-position:0px 0px;}100% {background-position:20px 0px;}}
@-moz-keyframes spanAnimation {0% {background-position:0px 0px;}100% {background-position:20px 0px;}}
@-webkit-keyframes spanAnimation {0% {background-position:0px 0px;}100% {background-position:20px 0px;}}
@-o-keyframes spanAnimation {0% {background-position:0px 0px;}100% {background-position:20px 0px;}}

@keyframes spanAnimations {0% {background-position:0px -14px;}100% {background-position:20px -14px;}}
@-moz-keyframes spanAnimations {0% {background-position:0px -14px;}100% {background-position:20px -14px;}}
@-webkit-keyframes spanAnimations {0% {background-position:0px -14px;}100% {background-position:20px -14px;}}
@-o-keyframes spanAnimations {0% {background-position:0px -14px;}100% {background-position:20px -14px;}}

#bc-r-b {
	width:660px;
	height:40px;
	position:absolute;
	bottom:0px;
	right:0px;
}
#bc-r-b p {
	width:100%;
	color:#7B7B7B;
	position:absolute;
	font-size:12px;
	line-height:24px;
}

/*for test*/
/*
#barchar {border:1px solid blue;}
#schedule {border:1px solid red;}*/

/* switch */
.switch { 
	width:100%;
    font-family:impact;
    text-align:center;
    position:absolute;
    bottom:0px;
} 
.switch a {
    width:80px;
    display:inline-block;
    background: -webkit-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #121212; 
    border-right: none; 
    box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1); 
    color: #808080; 
    cursor: pointer; 
    font-size: 12px; 
    line-height: 21px; 
    margin-left: -3px; 
    padding: 4px 0px; 
    text-shadow: 0 -1px #0F0F0F; 
    text-align:center;
    background:#5c5c5c;
    -webkit-transition: all .1s ease; 
    -moz-transition: all .1s ease; 
    -ms-transition: all .1s ease; 
    -o-transition: all .1s ease; 
    transition: all .1s ease; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    outline: none 

} 
.switch a:hover { 
    color:#D3D3D3;
} 
.switch a:first-child { 
    border-radius: 4px 0 0 4px 
} 
.switch a:last-child { 
    border-radius: 0 4px 4px 0 
} 
.switch a:active { 
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1) 
} 
.switch a:last-child { 
    border-right: 1px solid #121212; 
}

/* waterbubble */
#waterbubble {
	width:800px;
	text-align:center;
	margin-top:10%;
}
#waterbubble canvas {
	display:inline-block;
}










#constructing {
	padding:32px;
	font-size:28px;

}