.x01{border: 1px solid red}
/* 全局样式 start */
@font-face {
	font-family: '308-CAI978';
	src: url('../font/308-CAI978.eot'); /* IE9 Compat Modes */
	src: url('../font/308-CAI978.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('../font/308-CAI978.woff') format('woff'), /* Modern Browsers */
             url('../font/308-CAI978.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('../font/308-CAI978.svg#YourWebFontName') format('svg'); /* Legacy iOS */
    }

 @font-face {
	font-family: '302-CAI978';
	src: url('../font/302-CAI978.eot'); /* IE9 Compat Modes */
	src: url('../font/302-CAI978.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('../font/302-CAI978.woff') format('woff'), /* Modern Browsers */
             url('../font/302-CAI978.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('../font/302-CAI978.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}   
ol,ul{margin:0; padding:0;}
input,textarea{outline:none;resize: none;border: 0}
html{
	font:100 14px "302-CAI978","Arial","Verdana";
}   


.fl_left{float: left;}

.fl_right{float: right;}

.clearfix{
	display:inline-block;
	clear:both;
	*zoom:1;
}

.clearfix:after{
	content:".";
	display:block;
	height:0;
	font-size:0;
	clear:both;
	visibility:hidden;
}

li{list-style: none;}

a{text-decoration: none;}

.more{
	display: block;
	width: 100px;
	height: 30px;
	font:20px "308-CAI978";
	line-height:31px ;
	border-radius: 5px;
	text-align: center;
	color: #fdfeff;
	background-color: #787f85;
	background-image:linear-gradient(to bottom,#969da3,#787f85);
	border-top: 1px solid #b3b8bc;
	box-shadow: 0px 2px 3px #3d4245;
	text-shadow: #3d4245 0 0 3px;
	overflow: hidden;
}

.more:hover{
	color: #f0f0f0;
	background-color: #3d4245;
	background-image:linear-gradient(to bottom,#787f85,#66696b);
	border-top: 1px solid #969da3;
}

.nav li.end,
.services li.end,
.blog dl.end,
.about .end{
	margin-right: 0;
}

.banner,
.pro_02,.me{
	color: #f1f5f6;
	line-height: 24px;
}

h2{
	font:38px "308-CAI978";
}


.services h2,.services h3,
.phrtfolio h2,.phrtfolio h3,
.blog h2{
	color: #61686e;
	margin-bottom: 20px;
}


.webdesign h3
{
	font:26px "308-CAI978";
	line-height: 34px;
}
/* 全局样式 end */



/* 导航 start */
.top{
	height: 520px;
	width: 100%;
	min-width: 1104px;
	max-width: 2200px;
	border-bottom: 2px solid #515659;
	background: url(https://s2.ax1x.com/2019/08/18/mQvu9S.jpg) #666a6d  center;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 5px 0px 20px #595a5a;
}

.nav{
	width: 1104px;
	height: 121px;
	margin-left: auto;
	margin-right: auto;
}

.nav ul{
	width: 100%;
	padding-top:45px;
}

.nav li{
	float: left;
	height: 32px;
	margin-right: 50px;
}

.nav .fl_right{
	float: right;
}

.nav a{
	display: block;
	font-family:"308-CAI978";
	font-size:24px;
	line-height: 32px;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	border-top:1px solid transparent; /* 透明色 */
	padding: 0 20px;
}
.nav a:hover{
	border-top:1px solid rgb(111,112,114);
	background-color: #2d2e30;
	background-image:linear-gradient(to bottom,#494a4e,#2d2e30);
}

.nav .active{
	border-top:1px solid rgb(111,112,114);
	background-color: #2d2e30;
	background-image:linear-gradient(to bottom,#494a4e,#2d2e30);
}
/* 导航 end */


/* banner start */
.banner{
	width: 100%;
	height: 350px;
  padding: 50px 0 10px 0;
	position: relative;
}

.banner .project{
	height:100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 960px;
	overflow: hidden;
}

.banner .project ul{
	height:100%;
	width: 6832px;  /* 975pxml */
    /** 控制轮播**/
	/* margin-left: -975px; */
}

.banner .project li{
	float:left;
	padding-right: 20px;
}

.project img{
	width: 618px;
	height: 301px;
	box-shadow: 0px 0px 10px #565555;
}

.banner .pro_cont{
	width:318px;
	height:100%;
	margin-right: 20px;
	float: left;
}

.pro_cont h2{
	font-size: 30px;
	height: 45px;
	width: 100%;
	color: #ffffff;
	border-bottom: 1px dashed #bbbcbd;
	margin-bottom: 10px;

	overflow: hidden;
	white-space:nowrap;
    text-overflow: ellipsis;
}

.pro_cont p{
	margin-bottom: 20px;
	overflow:hidden;
}


.arrows{
	position:relative;
	width: 1100px;
	margin-left:auto;
	margin-right: auto;
}

#prev,#next{
	display: block;
	width: 24px;
	height: 82px;
	background-color: grey;
	background: url(https://s2.ax1x.com/2019/08/18/mQvSfO.png) no-repeat;
	position: absolute;
	top:100px;
	cursor: pointer;
}

#prev{
	left: 0;
	background-position: left;
}
#next{
	right: 0;
	background-position: right;
}



.round-list{
	width: 110px;
	height: 20px;
	position: absolute;
	left: 50%;
	bottom: 14px;
}


.round-list li{
	float: left;
	margin: 0px 5px;
	height: 8px;
	width: 8px;
	border-radius: 8px;
	border: 1px solid #4d5256;
	background-color: #4d5256;
	cursor: pointer;
}

.round-list li.round{
	border: 1px solid #4d5256;
	background-color: #afb4b7;
}

/* banner end */


/* services start */
.services{
	height: 450px;
	width: 960px;
	min-width: 960px;
	max-width: 2200px;
	border-bottom: #cfd0d2;
	padding: 30px 0px 10px 0px;
	margin-left: auto;
	margin-right: auto;
}


.services li{
	width: 300px;
	height: 312px;
	float: left;
	margin-right: 26px;
}


.services h3{
	text-align: center;
	font-size: 26px;
	padding-top: 14px;
	margin-bottom: 10px;
}

.webdesign {
	height: 190px;
	width: 298px;
	border-bottom: 1px solid #e8e8e8;
	border-right: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
	margin-top: -4px;
}

.webdesign p{
	height: 96px;
	line-height: 24px;
	margin-left:12px;
	margin-right: 12px; 
	padding:5px;
	border-top: 1px dashed #ced1d3;
	color: #5d666b;
	word-break:break-all;
	overflow: hidden;
	
}

.btn_more{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}
/* services end */


/* portfolio start*/
.phrtfolio{
	min-width: 1104px;
	max-width: 2200px;
	background: url(https://s2.ax1x.com/2019/08/18/mQvdc4.jpg) #ebebeb  repeat;
	width: 100%;
    height: 494px;
	padding: 43px 0px 52px 0px;
	box-shadow: 0px 0px 2px #9b9a9a;
}

.phrtfolio .phrtfolio-list{
	width: 960px;
	height: 100%;
	clear: both;
	padding-bottom:52px;
	margin-left: auto;
	margin-right: auto;
}

.phrtfolio ul{
	float: left;
	margin-right: 5px;
}

.phrtfolio img{
	width: 186px;
	height: 139px;
	border: 1px solid #e0e0e4;
	box-shadow: 0px 1px 2px #e0e0e4;
}
.phrtfolio img:hover,.blog img:hover{
	opacity: .8;
}

.pro_02 img{
	width: 342px;
	height: 204px;
	border:0;
	box-shadow: none;
}

.pro_02 {
 	margin-right: 5px;
	width:341px;
	height:406px;
	background-color:#595e61;
    border:1px solid #85898b;
    border-right:none;
    padding:16px 18px 6px 15px;
    position: relative;
}
        
.pro_02 .close{
	width: 18px;
	height: 18px;
 	position: absolute;
 	right: 0px;
 	top: 0px;
 }

.pro_02 h3{
	height: 64px;
	font:28px "308-CAI978";
	line-height: 34px;
	color: #ffffff;
	margin-bottom:6px;
	overflow: hidden;
}

.pro_02 p{
	height: 70px;
	font-size: 12px;
	overflow: hidden;
	color: #ced2d3;
}

.pro_02 .more{
	margin-top: 10px;
}

/* portfolio end */




/* blog start */

.blog{
	min-width: 1104px;
	max-width: 2200px;
	background: url(https://s2.ax1x.com/2019/08/18/mQvetf.jpg) #fbfbfb repeat;
	width: 100%;
    height: 330px;
    border-bottom: 1px solid #cdcdcd;
	color: #8d969b;
	box-shadow: 0px 0px 2px #c6c9ca;
}

.blog div{
	width: 968px;
	margin-left: auto;
	margin-right: auto;
}

.blog h2{
	padding-top: 40px;
}

.blog h3{
	width: 270px;
	height: 20px;
	font-size: 22px;
	font-weight: 500;
	color: #88949a;
  margin-bottom:10px;
  
  overflow:hidden;
  text-overflow:ellipsis;
}

.blog dl{
	width: 473px;
	height: 200px;
	float: left;
	margin-right: 20px;
}

	
.blog dl dt{
	width: 180px;
	height:100%;
	margin-right: 10px;
	float: left;
}
.blog dl dt img{
	width: 180px;
	height:143px;
}

.blog dl dd{
	width: 270px;
	height: 30px;
	line-height: 24px;
	font-size: 12px;
	word-break:break-all;
	float: left;
}


.blog dl dd a {
	float: right;
	background-image:linear-gradient(to bottom,#a9afb4,#949aa0);
	box-shadow: 1px 2px 2px #babbbb;
	margin-top: 10px;
}

/* blog end */

/* about start */
.about{
	min-width: 1104px;
	max-width: 2200px;
	background: url(https://s2.ax1x.com/2019/08/18/mQvP6H.md.jpg) #606569 repeat;
	width: 100%;
    height: 430px;
    border-top: 1px solid #8e9396;
    box-shadow: 1px -1px 1px #4e5659;
}


.about>div{
	width: 960px;
	padding: 10px 0px 24px 0px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}


.about h2{
	/* font: 100 39px "308-CAI978"; */
	display: block;
	border-bottom: 1px dashed #c8c8c8;
	color: #fbfbfb;
	line-height: 70px;
	margin-bottom: 10px;
}


.me{
	width: 290px;
	font-size: 12px;
	margin-right: 40px;
	overflow: hidden;
	float: left;
}

.me p{
	padding-bottom: 20px;
}

.text{
	font:100 14px Arial;
	color:#646464 ;
	padding: 11px 20px;
	width:176px;
	height: 11px;
	border-right: 1px solid #a6a7a9;
	background-color: #f0f0f0;
	overflow-y:hidden;
}

.me:first-child{
	margin-right: 30px;
}

.me form p{
	padding-bottom: 10px;
}

.me textarea{
	width: 263px;
	height: 104px;
}

.sub{
	line-height: 20px;
	border-top: 1px solid #b3b8bc;
}

.copyright{
	min-width: 1104px;
	max-width: 2200px;
	width: 100%;
	text-align: center;
	background-color: #414546;
	height: 83px;
	line-height: 83px;
	color: #919699;
}
/* about end */