/*----------------------------------------------------------------------------------------------------------------------#page_tit----------*/

#page_tit{
background:url("../images/works_main.jpg") no-repeat center center;
background-size:cover;
}

/*----------------------------------------------------------------------------------------------------------------------#cont----------*/

#cont h2{
font-size:27px;
font-weight: normal;
letter-spacing:3px;
line-height:1.4;
color:#fff;
text-align:center;
position: relative;
margin-bottom: 30px;
}

.border:after{
width:100%;
content: "";
border-bottom: 1px solid #fff;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: -10px;
margin:auto;}

#cont h3{
font-weight:bold;
text-align:left;
color:#5D5D5D;
}

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

#cont h2{ 
font-size:25px;
letter-spacing:3px;
}

}

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

#cont h2{ 
font-size:24px;
}

}


/*----------------------------------------------------------------------------------------------------------------------#works----------*/

#works{
padding:100px 0 70px;
position:relative;
}

#works .inner{
max-width:1080px;
width:100%;
margin:0 auto;
}

.works-list {
overflow: hidden;
list-style: none;
padding: 0;
}

.works-list li {
float: left;
width: 33.3333333333%;
padding: 10px 30px;
}

.works-list li a{
display: block;
position: relative;
}

.works-list img {
width: 300px;
}

figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  opacity: .5;
}

#works .more{
margin:50px auto;	
width:250px;
height:50px;
font-size:14px;
}

#works .more a {
background-color: #B3B3B3;
border: 1px solid #fff;
color:#fff;
line-height:30px;
width:100%;
border-radius:20px;
}

#works .more a:hover {
background-color:#B3B3B3;
border: 1px solid #5D5D5D;
color:#5D5D5D;
}

.new:before {
  border-color: #C30D23 transparent transparent transparent;
  border-style: solid;
  border-width: 60px 60px 0 0;
  content: "";
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  z-index: 2;
}
.new:after {
  color: #fff;
  content: "NEW";
  font-size: 12px;
  position: absolute;
  top: 12px;
  left: 6px;
  transform: rotate(-45deg);
  z-index: 3;
}


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

#works .inner{ width:90%; }


}

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

#works{
padding:50px 0 40px;
position:relative;
}	
	
#works .inner{ width:90%; }

}

@media(max-width: 1024px){
	.works-list li {
	  float: none;
	  width: 100%;
	  padding: 30px 0px;
	  margin-bottom: 10px;
	}
	.works-list li a img{width: 100%;}
}

@media(max-width: 740px){
	.works-list li {
	  float: none;
	  width: 100%;
	  padding: 30px 0px;
	  margin-bottom: 10px;
	}
	.works-list li a img{width: 100%;}
}