/*about*/

#about{
	float: left;
	width: 30%;
}

#about p{
	line-height: 25px;
	margin-left: 10px;
	margin-bottom: 15px;
}

#more{
	float: right;
}

/*service*/

#service{
	float: left;
	width: 30%;
	margin-bottom: 45px;
}
	
#serviceList{
	line-height: 30px;
	margin-left: 10px;
}

h3{
	font-size: 1.2em;
}

#service a{
	width: 20%;
	float: left;
	margin-right: 6%;
	margin-top: 20px;
}

#service a div{
	width: 100%;
}

#service a:last-child{
	margin-right: 0%;
}

#CIS_IMG{
	background: url("../images/itemCIS.png");
	background-size: cover;
	transition:.3s;
}

#CIS_IMG:hover{
	/*background: url("../images/itemCIS-2.png");
	background-size: cover;*/
	opacity: .75;
}

#Graphic_IMG{
	background: url("../images/itemGraphic.png");
	background-size: cover;
	transition:.3s;
}

#Graphic_IMG:hover{
	/*background: url("../images/itemGraphic-2.png");
	background-size: cover;*/
	opacity: .75;
}

#Photo_IMG{
	background: url("../images/itemPhotography.png");
	background-size: cover;
	transition:.3s;
}

#Photo_IMG:hover{
	/*background: url("../images/itemPhotography-2.png");
	background-size: cover;*/
	opacity: .75;
}

#Web_IMG{
	background: url("../images/itemWeb.png");
	background-size: cover;
	transition:.3s;
}

#Web_IMG:hover{
	/*background: url("../images/itemWeb-2.png");
	background-size: cover;*/
	opacity: .75;
}



/*banner*/

#banner{
	float: right;
	width:800px;
	margin-bottom: 25px;
	background: #eee;
}

.bannerList{
	float: left;
	width: 100%;
}

#banner img{
	width: 100%;
}

/*recent*/

#recent{
	float: left;
	width:100%;
}

#workWrapper{
	width: 100%;
	overflow: hidden;
}

.workItem{
	float: left;
	width: 22%;
	margin-right:4%;
	margin-bottom: 35px;
	cursor: pointer;
	transition:0.3s;
}

.workItem:nth-child(4n){
	margin-right: 0;
	margin-left: 0;
	float: right;
}

.workImg{
	width: 264px;
	overflow: hidden;
}

.workImg img{
	width: 100%;
	transition:0.3s;
}

.workItem:hover .workImg img{
	width:calc(100% + 36px);
	margin:-18px;
}

.workClass{
	width: 100%;
	line-height: 30px;
	border-bottom:1px dashed;
	margin-top: 5px;
}

.workName{
	width: 100%;
	line-height: 35px;
	font-size: 1.5em;
	font-weight: 900;
}

.workText{
	padding:15px;
	background:rgba(255,255,255,0.5);
	transition:.3s;
}

.workItem:hover .workText{
	background:rgba(255,255,255,0.75);
}

.workText p{
	display: none;
}

#showAll{
	width: 100%;
	height:25px;
	line-height: 28px;
	text-align: right;
	border-bottom:1px solid;
}

#recentClassList{
	height: 25px;
	text-align: center;
}

#recentClassList li{
	display: inline-block;
	height: 25px;
	line-height:30px;
}

/*slick*/

.slick-dots{
	width: 100%;
	margin-top: 10px;
	height: 3px;
	text-align: right;
}

.slick-dots li{
	display: inline-block;
}

.slick-dots li button{
	font-size: 0;
	width:15px;
	height: 3px;
	background: #99b2ab;
	margin-left: 5px;
	border:0;
}

.slick-dots li.slick-active button{
	opacity: 0.5;
}

button:active {
	outline: none;
	border: none;
}

button:focus {
	outline:0 !important;
}

/*detail*/

#backshadow{
	display: none;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(175,175,175,0.75);
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 9999;
}

#detail{
	position: absolute;
	top:10px;
	left:50%;
	margin-left: -420px;
	width:600px;
	padding: 20px;
	background: #fff;
	z-index: 99999;
}

#detailImg{
	display: none;
	width: 100%;
}

#detailText{
	position: fixed;
	top:10px;
	right: 50%;
	width:200px;
	height: 100px;
	padding: 15px;
	background: #fff;
	margin-right: -455px;
}

#detailTextP{
	position: fixed;
	top:110px;
	right: 50%;
	width:200px;
	line-height: 25px;
	padding: 15px;
	background: #fff;
	margin-right: -455px;
}

#closeDetail{
	position: fixed;
	top:10px;
	right: 50%;
	margin-right: -455px;
	background: #ccc;
	cursor: pointer;
}

#closeDetail img{
	transform:rotate(45deg);
}


@media screen and (max-width:1250px) and (min-width:979px){


	#about{
		float: right;
		width: 30%;
	}

	#about p{
		margin-left: 0px;
	}


	/*service*/

	#service{
		float: right;
		width: 65%;
		margin-right:5%;
	}

	#serviceList{
		float: left;
		width: 30%;
		margin-left: 0;
	}

	#service a{
		width: 16%;
		margin-right: 2%
	}
	
	.workImg{
		width: 176px;
		height: 176px;
		overflow: hidden;
	}

	.workImg img{
		width: 176px;
		transition:0.3s;
	}

	.workItem:hover .workImg img{
		width:200px;
		margin:-12px;
	}

}

@media screen and (max-width:979px){

	#banner{
		width: 100%;
	}

	#about{
		float: right;
		width: 100%;
	}

	#about p{
		margin-left: 0;
	}

	#service{
		float: right;
		width: 100%;
		margin-right:0%;
	}

	#serviceList{
		float: left;
		width: 30%;
		margin-left: 0;
	}

	#service a{
		width: 15%;
		margin-right: 3%;
		margin-top:0;
	}

	.workItem{
		float: left;
		width: 48%;
		height: auto
		margin-right:2%;
		margin-bottom: 35px;
		cursor: pointer;
		transition:0.3s;
	}

	.workItem:nth-child(2n){
		margin-right: 0;
	}


	.workImg{
		width: 100%;
		overflow: hidden;
	}

	.workImg img{
		width: 100%;
		transition:0.3s;
	}

	.workItem:hover .workImg img{
		width:100%;
		margin:0;
	}

	/*detail*/

	#backshadow{
		display: none;
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(175,175,175,0.75);
		overflow-x: hidden;
		overflow-y: scroll;
	}

	#detail{
		top:15px;
		left:5%;
		margin-left: 0;
		width:80%;
		padding:15px 5%;
	}

	#detailText{
		position:static;
		width:100%;
		height: auto;
		padding:15px 0;
		margin-right: 0;
	}

	#detailTextP{
		position:static;
		width:100%;
		height: auto;
		padding:15px 0;
		margin-right: 0;
		margin-bottom: 25px;
		border-bottom: 1px solid;
	}

	#detailText .workText{
		padding:0;
	}

	#closeDetail{
		top:15px;
		right:15px;
		margin:0;
	}


}

@media screen and (max-width:768px){

	#serviceList{
		float: left;
		width: 100%;
		margin-left: 0;
	}

	#service a{
		display: none;
	}
}

@media screen and (max-width:480px){
	.workItem{
		width: 100%;
		margin-right: 0;
	}
}