* {
	margin: 0;
	padding: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
body {

    /* e87715background: #1a212f;/*1a212f*/
    color: white;
    font-size: 16px;
    width: 100%;
    max-width: 1920px;
    font-family: "Arial","微软雅黑","Microsoft YaHei","思源黑体",sans-serif;
    height: 100vh;
    background: #1b212d;/*
    background: linear-gradient(0deg,#1f2739,#1b212d);/**/
}
/*导航的样式单独放在一个样式表里*/
div#MainContent {
	width: 74.7916667%;
	margin: 172px auto 0px;
	position: relative;
}
div#intro {
	width: 16.666667%;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
}
div#intro p {
	padding: 0px 30px 0px 0px;/*以前这里最后一位数字是25px，后来可能动了导航条，到这这块文字跟导航条无法对齐了，被迫改了这里。*/
	font-size: 13px;
	line-height: 2;
	font-weight: 100;
}
div#hi {
	position: relative;
	animation-name: mymove;
	animation-duration: 2s;
	animaion-delay: 0.5s;
	animation-timing-function:ease-out;
	-webkit-animation-timing-function:ease-out;
	-moz-animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}

div#hi h1 {
	font-size: 150px;
}
div#hi h1 span {
	color: #fde9d1;/*#f02f8f/*fb17ce*//*e72aa3*//*e70d91*/
}
/*
div#MainContent::after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}*/
footer {
	width: 74.7916667%;
	margin: 30px auto 0px;
	font-size: 0.775em;
	padding-bottom: 30px;
}
footer a {
	padding-right: 10px;
	color: #8b8f97;;/*dcdde6*/
}
footer a#beian img{
	vertical-align: text-bottom;
}
div#contact {
	width: 16.666667%;
	position: absolute;
	right: 0px;
	bottom: 25px;
}
div#contact ul {/*ul--p*/
	list-style-type: none;
	padding: 0px 0px;/*以前这里最后一位数字是20px，后来可能动了导航条，到这这块文字跟导航条无法对齐了，被迫改了这里。*/
	font-size: 14px;
	line-height: 2;
	font-weight: 100;
}
div#contact ul a:link, div#contact ul a:visited {/*ul--p*/
	text-decoration: none;
	color: #fff;
}
div#contact ul li img {
	display: inline-block;
	vertical-align: middle;
}
div#allContainer {
	background: linear-gradient(0deg,#1b212d,#1f2739);
}
@keyframes mymove {
	0% {opacity:0.8; padding-top: 105px;}
	100% {opacity:1; padding-top: 155px;}
}/*原来是从155px到205px，我觉得视觉上，元素下沉的太厉害了，*/
@-webkit-keyframes mymove {
	0% {opacity:0.8; padding-top: 105px;}
	100% {opacity:1; padding-top: 155px;}
}
@-moz-keyframes mymove {
	0% {opacity:0.8; padding-top: 105px;}
	100% {opacity:1; padding-top: 155px;}
}
@-o-keyframes mymove {
	0% {opacity:0.8; padding-top: 105px;}
	100% {opacity:1; padding-top: 155px;}
}

@media screen and (min-width: 1320px) and (max-width: 1600px) {
	div#hi {
		width: 80%;
	}
	@keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 60px;}
	}
	@-webkit-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 60px;}
	}
	@-moz-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 60px;}
	}
	@-o-keyframes mymove {
	0% {opacity:0.8; padding-top: 60px;}
	100% {opacity:1; padding-top: 60px;}
	}
}
@media screen and (min-width: 769px) and (max-width: 1319px) {
	div#hi {
		width: 100%;
	}
	@keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	@-webkit-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	@-moz-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	@-o-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}/*
	nav ul li a {
		writing-mode: tb-rl;
    	-webkit-writing-mode: vertical-rl;      
    	writing-mode: vertical-rl;
	}
	nav ul li a:link, nav ul li a:visited {
		padding: 20px 10px;
	}
	li.selected a:link, li.selected a:visited {
	padding: 20px 10px;
	}
	nav ul li a:hover {
	padding: 20px 10px;
	}/**/
	div#contact {
		width: 100%;
		position: static;
		padding-top: 20px;
	}
	div#contact ul {/*ul--p*/
		width: 100%;
		padding: 0px;
		font-size: 14px;
		line-height: 2;
		font-weight: 100;
	}
	div#contact ul::after {
		content: ".";
		visibility: hidden;
	}
	div#contact ul li {
		float: left;
		width: 40%;
		text-align: center;
	}
	div#contact ul li:first-child {
		text-align: left;
	}
	div#contact ul li:last-child {
		text-align: left;
	}
	div#intro {
		padding: 20px 0px;
		position: static;
		width: 100%;
		z-index: 0;
	}
	div#intro p {
		padding: 0px;
	    font-size: 16px;
	    line-height: 2;
	    font-weight: 100;
	}
}
@media screen and (max-width: 768px) {
	div#hi {
		width: 100%;
	}
	@keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	@-webkit-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	@-moz-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	@-o-keyframes mymove {
	0% {opacity:0.8; padding-top: 30px;}
	100% {opacity:1; padding-top: 50px;}
	}
	
	div#contact {
		width: 100%;
		position: static;
		padding-top: 20px;
	}
	div#contact ul {/*ul--p*/
		width: 100%;
		padding: 0px;
		font-size: 14px;
		line-height: 2;
		font-weight: 100;
	}
	div#contact ul::after {
		content: ".";
		visibility: hidden;
	}
	div#contact ul li {
		float: none;
		width: 100%;
		text-align: left;
		position: static;
	}
	div#contact ul li:first-child {
		text-align: left;
	}
	div#contact ul li:last-child {
		text-align: left;
	}
	div#intro {
		padding: 20px 0px;
		position: static;
		width: 100%;
		z-index: 0;
	}
	div#intro p {
		padding: 0px;
	    font-size: 16px;
	    line-height: 2;
	    font-weight: 100;
	}
}
@media screen and (max-width:420px) {
	
	div#hi h1{
		font-size: 60px
	}
	div#MainContent {
		margin: 100px auto 0px;
	}
	div#intro p {
		font-size: 13px;
	}
	footer a {
	padding-right: 10px;
	color: #8b8f97;;/*dcdde6*/
	}
	footer a#beian img{
	vertical-align: text-bottom;
	}
}