@keyframes mytranslateY {
	100% {
	transform:translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;
	display:block
}
}@-moz-keyframes mytranslateY {
	100% {
	transform:translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@-webkit-keyframes mytranslateY {
	100% {
	transform:translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@-o-keyframes mytranslateY {
	100% {
	transform:translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@keyframes myscale {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@-moz-keyframes myscale {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@-webkit-keyframes myscale {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@-o-keyframes myscale {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@keyframes to_top {
	0% {
	opacity:0
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@-moz-keyframes to_top {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@-webkit-keyframes to_top {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@-o-keyframes to_top {
	0% {
	transform:scale(1.6);
	-ms-transform:scale(1.6);
	-moz-transform:scale(1.6);
	-webkit-transform:scale(1.6);
	-o-transform:scale(1.6)
}
100% {
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1)
}
}@keyframes to_width {
	0% {
	width:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0
}
50% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
100% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@-moz-keyframes to_width {
	0% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
25% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
50% {
	width:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0
}
75% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
100% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@-webkit-keyframes to_width {
	0% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
25% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
50% {
	width:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0
}
75% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
100% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@-o-keyframes to_width {
	0% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
25% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
50% {
	width:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0
}
75% {
	width:40%;
	filter:alpha(opacity=50);
	-moz-opacity:.5;
	-khtml-opacity:.5;
	opacity:.5
}
100% {
	width:80%;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1
}
}@keyframes left_widthbigger {
	0% {
	width:0%
}
100% {
	width:100%
}
}@-moz-keyframes left_widthbigger {
	0% {
	width:0%
}
100% {
	width:100%
}
}@-webkit-keyframes left_widthbigger {
	0% {
	width:0%
}
100% {
	width:100%
}
}@-o-keyframes left_widthbigger {
	0% {
	width:0%
}
100% {
	width:100%
}
}@keyframes left_widthsmaller {
	0% {
	width:100%
}
100% {
	width:0%
}
}@-moz-keyframes left_widthsmaller {
	0% {
	width:100%
}
100% {
	width:0%
}
}@-webkit-keyframes left_widthsmaller {
	0% {
	width:100%
}
100% {
	width:0%
}
}@-o-keyframes left_widthsmaller {
	0% {
	width:100%
}
100% {
	width:0%
}
}@keyframes move_left {
	0% {
	width:0%
}
50% {
	width:40%
}
100% {
	width:80%
}
}@-moz-keyframes left_width {
	0% {
	width:0%
}
50% {
	width:40%
}
100% {
	width:80%
}
}@-webkit-keyframes left_width {
	0% {
	width:0%
}
50% {
	width:40%
}
100% {
	width:80%
}
}@-o-keyframes left_width {
	0% {
	width:0%
}
50% {
	width:40%
}
100% {
	width:80%
}
}@font-face {
	font-family:'youyuan';
	src:url("../fonts/youyuan.TTF")
}
* {
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	font-family:'youyuan';
	font-weight:normal
}
html {
	font-size:62.5%;
	width:100%;
	overflow:hidden
}
body {
	font-size:1.4rem;
	overflow:hidden
}
a {
	color:#000
}
h1 {
	margin:30px 0 50px;
	font-size:3rem
}
h2 {
	margin:20px 0
}
h3 {
	margin:20px 0
}
table {
	border-collapse:collapse
}
input,textarea,button {
	outline:none;
	padding:12px;
	font-size:1.4rem;
	border:1px solid #e5e5e5;
	background:none
}
.clear_both {
	clear:both
}
section {
	width:100%
}
section.page_one {
	
	animation:0.4s myscale 1;
	color:#000
}
section.page_two .con_wrap,section.page_three .con_wrap,section.page_four .con_wrap,section.page_five .con_wrap,section.page_six .con_wrap {
	transform:translateY(200px);
	-ms-transform:translateY(200px);
	-moz-transform:translateY(200px);
	-webkit-transform:translateY(200px);
	-o-transform:translateY(200px);
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
	animation:1s mytranslateY;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards
}
.page_one {
	display:none
}
.page_two {
	display:none;
	background:#F4F4F4
}
.page_three {
	display:none;
	background:#fff
}
.page_four {
	display:none;
	background:#F4F4F4
}
.page_five {
	display:none;
	background:#fff
}
.con_wrap {
	width:60%;
	margin:0 auto 0;
	padding:2rem 0;
	overflow:hidden
}
.tit_wrap {
	text-align:center
}
.tit_wrap h1 {
	width:100%;
	margin:30px auto 50px;
	position:relative;
	line-height:4.2rem
}
.tit_wrap h1:after {
	content:"";
	width:100%;
	position:absolute;
	bottom:-20px;
	left:0;
	border:1px dashed #9eddf2;
	-webkit-animation:25s left_widthsmaller linear 1s infinite;
	-moz-animation:25s left_widthsmaller linear 1s infinite;
	-ms-animation:25s left_widthsmaller linear 1s infinite;
	-o-animation:25s left_widthsmaller linear 1s infinite;
	animation:25s left_widthsmaller linear 1s infinite
}
.tit_wrap .scissors {
	width:0%;
	height:20px;
	position:absolute;
	top:113px;
	right:0;
	-webkit-animation:25s left_widthbigger linear 1s infinite;
	-moz-animation:25s left_widthbigger linear 1s infinite;
	-ms-animation:25s left_widthbigger linear 1s infinite;
	-o-animation:25s left_widthbigger linear 1s infinite;
	animation:25s left_widthbigger linear 1s infinite
}
.tit_wrap .scissors span {
	width:20px;
	height:20px;
	float:left;
	background:url(../images/sprite_img.png) no-repeat -37px -50px
}
.tit_wrap h2 {
	margin:60px 0 0 0
}
.tit_wrap+div {
	margin:40px 0 0 0
}
aside {
	width:40px;
	display:block;
	position:fixed;
	top:42%;
	right:10px;
	transform:translate(-42%,0);
	-webkit-transform:translate(-42%,0);
	-moz-transform:translate(-42%,0);
	-ms-transform:translate(-42%,0);
	-o-transform:translate(-42%,0)
}
aside a {
	width:14px;
	height:14px;
	display:block;
	position:relative;
	margin:25px 0;
	border-radius:50%;
	background:#d9d9d9;
	cursor:pointer
}
aside a span {
	width:60px;
	height:20px;
	display:none;
	position:absolute;
	top:-2px;
	color:#80d6f2;
	right:25px;
	font-size:1.6rem;
	text-align:right
}
aside a:hover span {
	display:block
}
aside .cur_a {
	background:#80d6f2
}
aside .cur_a span {
	color:#80d6f2;
	text-decoration:underline
}
nav {
	width:100%;
	position:relative
}
nav .nav_wrap {
	width:80%;
	margin:0 auto;
	padding:2.4rem 0;
	overflow:hidden
}
.resume_logo {
	width:20%;
	float:left
}
.resume_logo a {
	font-size:5rem
}
.nav_bar {
	width:60%;
	float:right
}
.nav_bar ul li {
	width:20%;
	float:left;
	font-size:1.8rem
}
.nav_bar ul li a {
	display:block;
	padding:2rem 0;
	margin:0 1.4rem;
	text-align:center;
	color:#000;
	position:relative;
	transition:color .5s ease-in;
	-moz-transition:color .5s ease-in;
	-webkit-transition:color .5s ease-in;
	-o-transition:color .5s ease-in
}
.nav_bar ul li a:hover {
	color:#80d6f2
}
.nav_bar ul li a:after {
	width:0;
	height:1px;
	content:"";
	position:absolute;
	left:0;
	bottom:10px;
	background:#80d6f2;
	transition:width .5s ease-in;
	-moz-transition:width .5s ease-in;
	-webkit-transition:width .5s ease-in;
	-o-transition:width .5s ease-in
}
.nav_bar ul li a:hover:after {
	width:100%
}
.cen_con {
	width:50%;
	height:60%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	text-align:center;
	overflow:hidden
}
.portrait {
	height:32%;
	margin:0 auto 8%;
	padding:6px;
	text-align:center
}
.portrait img {
	height:100%;
	vertical-align:middle;
	border-radius:50%
}
.cen_text {
	height:60%
}
.cen_text h2 {
	height:18%;
	min-height:38px;
	margin:0
}
.cen_text h3 {
	height:18%;
	min-height:32px;
	margin:0
}
.cen_text hr {
	width:100%;
	height:1px;
	background:#999999;
	border:0;
	margin:0 auto 5% auto;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;
	-webkit-animation:1s to_width ease-in 0s 1;
	-moz-animation:1s to_width ease-in 0s 1;
	-ms-animation:1s to_width ease-in 0s 1;
	-o-animation:1s to_width ease-in 0s 1;
	animation:1s to_width ease-in 0s 1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards
}
.down_arrow {
	width:100%;
	height:80px;
	position:fixed;
	bottom:0px;
	left:0
}
.down_arrow a {
	width:51px;
	height:51px;
	border-radius:50%;
	border:1px solid #fff;
	display:block;
	margin:0 auto;
	cursor:pointer
}
.down_arrow a span {
	width:18px;
	height:18px;
	display:block;
	margin:15px;
	background:url(../images/sprite_img.png) no-repeat -18px -50px;
	transition:background .5s ease-in;
	-moz-transition:background .5s ease-in;
	-webkit-transition:background .5s ease-in;
	-o-transition:background .5s ease-in
}
.down_arrow a:hover {
	border:1px solid #80d6f2
}
.down_arrow a:hover span {
	background:url(../images/sprite_img.png) no-repeat -18px -50px
}
.myinfo {
	width:100%;
	float:left;
	padding:0 20px
}
.myinfo table {
	width:100%;
	margin:20px auto
}
.myinfo table tr td {
	font-size:1.8rem;
	padding:15px 15px 15px 30px;
	text-align:left
}
.myinfo table tr td img {
	border-radius:50%
}
.myinfo table tr td span {
	width:30px;
	height:30px;
	display:block
}
.myinfo table tr td a {
	color:#666
}
.myinfo table tr:last-child td p {
	padding:10px 0 0 0
}
.skill_con {
	width:100%;
	overflow:hidden
}
.canvas_wrap {
	width:50%;
	float:left;
	overflow:hidden;
	padding:30px 0 0 0
}
.text_wrap {
	width:50%;
	float:left;
	padding:30px 0 0 20px
}
.text_wrap p {
	font-size:1.8rem;
	line-height:24px;
	padding:10px 0
}
.canvas_con {
	width:160px;
	height:160px;
	margin:10px 15px;
	float:left;
	position:relative
}
.text_con {
	width:160px;
	height:80px;
	position:absolute;
	top:25px;
	left:0;
	text-align:center;
	padding:20px
}
.text_con p {
	font-size:2.4rem;
	line-height:2.9rem;
	font-weight:bold
}
.work_con {
	position:relative
}
.work_text {
	width:100%;
	padding:0 0 47px 159px;
	position:relative
}
.work_text:nth-child(2) {
	padding:10px 0 47px 159px
}
.work_text:after {
	width:100%;
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:140px;
	border-left:solid 1px #80d6f2
}
.work_con:last-child .work_text {
	padding-bottom:0px
}
.programe {
	position:relative;
	overflow:hidden
}
.work_time {
	width:120px;
	height:120px;
	float:left;
	padding:40px 0 40px 0;
	font-size:1.7rem;
	color:#fff;
	background:#E86064;
	text-align:center;
	-webkit-border-radius:50%;
	border-radius:50%;
	position:absolute;
	top:20px;
	left:0
}
.triangle-left {
	width:0;
	height:0;
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
	border-right:15px solid #fff;
	position:absolute;
	top:20px;
	left:160px
}
.arrowpart {
	float:left;
	width:15px;
	height:50px;
	background:url(../images/arrow-left.png) no-repeat 0 23px
}
.exCon {
	background:#fff;
	border-bottom:solid 4px #e5e5e5;
	padding:22px 47px 20px 47px;
	margin-left:15px;
	text-align:left
}
.exCon h4 {
	color:#666;
	padding-bottom:3px
}
.exCon h5 {
	color:#666
}
.exCon p {
	color:#666;
	line-height:21px
}
ul.con_style {
	overflow:hidden;
	padding:0 0 20px 0
}
ul.con_style li {
	width:33.33%;
	float:left;
	margin:20px 0;
	overflow:hidden
}
ul.con_style li span {
	width:50px;
	height:50px;
	display:block;
	margin:0 auto 20px;
	background:url("../images/sprite_img.png")
}
ul.con_style li p {
	text-align:center;
	font-size:1.8rem
}
ul.con_style li p a {
	color:#333
}
ul.con_style li:nth-child(1) span {
	background-position:0 -70px
}
ul.con_style li:nth-child(2) span {
	background-position:-50px -70px
}
ul.con_style li:nth-child(3) span {
	background-position:-100px -70px
}
.contact_info {
	width:100%
}
.contact_info form {
	width:100%;
	overflow:hidden;
	padding:5px 0
}
.contact_info form label {
	width:33.33%;
	padding:0 10px 0 0;
	height:70px;
	float:left
}
.contact_info form label p {
	color:red;
	line-height:2rem;
	padding:0 12px
}
.contact_info form label:nth-child(3) {
	padding:0
}
.contact_info form label:nth-child(4) {
	width:100%;
	height:215px;
	padding:0
}
.contact_info form input[type="text"] {
	width:100%;
	float:left;
	background:#ffffff;
	color:#333
}
.contact_info form textarea {
	width:100%;
	height:180px;
	background:#ffffff;
	resize:none;
	color:#333
}
.contact_info form button {
	color:#fff;
	padding:0.6em 1.4em;
	font-size:1.4rem;
	border-radius:4px;
	cursor:pointer;
	border:1px solid #5BA4E8;
	background:#5BA4E8
}
@media screen and (max-width:1370px) {
	.con_wrap {
	width:80%;
	padding:1rem 0
}
.tit_wrap+div {
	margin:10px 0 0 0
}
.tit_wrap h2 {
	margin:0
}
.myinfo table tr:last-child td p {
	padding:0
}
.canvas_wrap {
	width:50%;
	float:left;
	overflow:hidden
}
.text_wrap {
	width:50%;
	float:left
}
.text_wrap p {
	display:inline-block;
	font-size:1.8rem;
	line-height:24px
}
.tit_wrap .scissors {
	top:101px
}
.text_wrap p {
	padding:4px 0
}
.canvas_con {
	margin:5px 10px
}
}/*# sourceMappingURL=main.css.map */