* {
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

html {
	font-size: 100px;
	font-family: "微软雅黑";
}

body {
	background-color: white;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}
/*.container,.mainInfo,.footer{min-width: 960px;}*/
.top-menu{position: fixed; top: 0; width: 80%;left: 10%; font-size: .16rem;color: white;z-index: 1;}
.top-menu ul{list-style: none;min-width: 500px; position: relative;float: right; padding: .1rem 0;padding-left: .4rem; background: rgba(51,51,51,0);}
.top-menu ul:after{content: "";position: absolute;width: 150%;height: 1px;right: 0;bottom: 0; background: rgba(255,255,255,.2);}
.top-menu .active:after{content: none;}
.top-menu ul li{display: inline-block;padding: .1rem;margin-right: .2rem;position: relative;border-bottom: 1px solid rgba(255,255,255,0);border-right: 1px solid rgba(255,255,255,0);border-radius: 3px; transition: all .5s ease-in-out;}
.top-menu ul li span{cursor: pointer;}
.top-menu ul li:hover{border-bottom: 1px solid rgba(255,255,255,.2);border-right: 1px solid rgba(255,255,255,.2);}
.top-menu ul li:hover:before{content: "";position: absolute;width: .1rem;height: .03rem;top: 50%;left: -.15rem;transform: translateY(-50%);background: #F34347;transition: all .5s ease-in-out;}
.top-menu ul li.active{border-bottom: 1px solid rgba(255,255,255,.2);border-right: 1px solid rgba(255,255,255,.2);}
.top-menu ul li.active:before{content: "";position: absolute;width: .1rem;height: .03rem;top: 50%;left: -.15rem;transform: translateY(-50%);background: #F34347;transition: all .5s ease-in-out;}
.container{position: relative;width: 80%;height: 3.5rem;margin: 0 auto; background: url(http://img.pconline.com.cn/images/upload/upc/tx/pcdlc/1605/04/c0/21103162_21103162_1462352979328.jpg) no-repeat;background-size: 100%;}
.container:after{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: inherit;filter: blur(2px);-ms-filter: blur(2px);-webkit-filter: blur(2px);}

.myName,.myJob{position: absolute;z-index: 1;color: white;}
.myName{font-size: .8rem;left: 2.5rem;top: 1.4rem;text-shadow: 0 3px 0 #AAA;letter-spacing: .3rem;}
.myJob{font-size: .2rem;text-decoration: underline;left: 3.5rem;top: 2.5rem;line-height: .3rem;letter-spacing: .02rem;}

.mainInfo{width: 80%;margin: 0 auto;background: #111;font-size: .2rem;border-bottom: 1px dashed rgba(255,255,255,.3);}
.row{display: flex;align-items: center;color: white;background: #111;}
.row .left{position: relative; width: 3.5rem;height:2rem;line-height: 2rem; margin-right: .5rem;background: linear-gradient(to right,#5F8BF2 0%,#5F8BF2 99.9%,transparent 99.9%);font-size: .24rem;letter-spacing: .02rem;overflow: hidden;}
.row .left span{padding-left: 1rem;}
.row .left:before,.row .left:after{content: "";position: absolute;width: 1.4rem;height: 1.4rem;right: 0;background: #111;transition: all .5s ease-in-out;}
.row .left:before{transform:translate(100%,-100%) rotate(45deg) ;}
.row .left:after{bottom: 0;transform: translate(100%,100%) rotate(45deg);}
.row .right{flex: 1;display: flex;}
.img-contain{width: 1.5rem;height: 1.5rem;padding: .06rem;background: white;box-shadow: 0 0 5px #5F8BF2;margin:0 .5rem;}
.img-contain img{width: 100%;box-shadow: 0 0 5px #5F8BF2;}
.infoList .item {margin-bottom: .1rem;}
.infoList .item span{display: inline-block;width: 1.2rem;text-align: right;margin-right: .3rem;}
.row:hover{transform: scale(1.02);}
.row:hover .left:before{transform:translate(50%,-50%) rotate(45deg);}
.row:hover .left:after{transform: translate(50%,50%) rotate(45deg);}
.font-14{font-size: .14rem;line-height: .22rem;}
.hightLight:hover{color: #AAA;}
.hightLight:hover span{font-size: .16rem;color: #F34347;}
.contact p{margin-bottom: .1rem;}
.footer{width: 80%;margin: 0 auto;background: #AAA;font-size: .16rem;color: #F5F5F5;padding: .1rem;text-align: center;}

@media only screen and (min-width: 960px) and (max-width:1200px) {
	.top-menu{width: 80%;left: 10%;}
	.img-contain{margin: 0;}
	html{font-size: 90px;}
}
@media only screen and (max-width: 960px) and (min-width:768px) {
	.top-menu{width: 100%;left: 0%;}
	.top-menu ul:after{width: 120%;}
	.container,.mainInfo,.footer{width: 100%;}
	.img-contain{margin: 0;}
	html{font-size: 90px;}
	.hightLight:hover{color: #AAA;}
	.hightLight:hover span{color: #F34347;}
}
@media only screen and (min-width: 275px) and (max-width: 768px) {
	html{font-size: 80px;}
	.top-menu{width: 100%;left: 0%;}
	.top-menu ul{min-width: auto;float: none;padding-left: .3rem;background: rgba(0,0,0,.7);}
	.top-menu ul:after{width: 120%;}
	.container,.mainInfo,.footer{width: 100%;}
	.img-contain{margin: 0;}
	.hightLight:hover{color: #AAA;}
	.hightLight:hover span{color: #F34347;}
	.container{height:auto;position: static;padding: 80px .3rem 50px;}
	.container:after{content: none;}
	.myName{position: static;text-shadow: 0 2px 0 #AAA; font-size: .4rem;left: .5rem;margin-bottom: .1rem;}
	.myJob{position: static;font-size: .18rem;}
	.mainInfo .row{display: block;}
	.row .left{height: auto;padding: .05rem;text-align: center;line-height: .3rem;margin-right: 0;width: 100%;letter-spacing: 0;background: #5F8BF2;}
	.row .left span{padding: 0;}
	.row .left:before, .row .left:after{content: none;}
	.row .right{padding: .1rem .15rem;}
}
@media only screen and (min-width: 275px) and (max-width: 340px) {
	.container{padding: 50px .3rem 50px;}
	.top-menu ul li{padding: .1rem .05rem;margin-right: .15rem;}
	.img-contain{width: 1.1rem;height: 1.1rem;min-width: 1.1rem;}
	.infoList .item{margin-bottom: .05rem;}
	.infoList .item span{width: 1rem;margin-right: .2rem;}
	.row .right{align-items: center;}
}