@charset "UTF-8";
/*================================
 o/w
=================================*/



/*================================
 SYSTEM
=================================*/

#topnav {
background-color:#fff;
}

.wrapper#works{
padding-top:120px!important;
margin-bottom: 20px;
}

#works header{
overflow: hidden;
height:240px;
background: linear-gradient(#fff 37% ,#f7f7f7 37% ,#f7f7f7 100%)!important;
}

#works header .row_inner{
overflow: hidden;
height:240px;
}

#works header h2{
position: relative;
background:url(../img/works/header_tit.png) no-repeat center center;
display: block;
width:600px;
height:240px;
margin:0 auto;
text-align: center;
}

#works main{
background-color:#f7f7f7;
}


/* SLIDER
840x3,+20x2=2560
-------------------------------- */

#works .post_slider{
overflow: hidden;
display: block;
margin:30px 0 10px;
}

.post_slider ul.slider{
display: block;
width:1920px;
left: 50%;
margin-left: -960px;
}

.post_slider ul.slider li{
display: block;
position: relative;
width: 840px;
height: 560px;
margin:0 10px;
overflow: hidden;
outline: none;
}

.post_slider ul.slider li img{
cursor:pointer;
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

.post_slider ul.thumb {
overflow: hidden;
display: block;
width:1200px;
padding:10px 20px;
margin:50px auto 10px;
}

.post_slider ul.thumb li{
display: block;
position: relative;
width: 120px;
height: 80px;
margin:0 5px;
overflow: hidden;
outline: none;
}

.post_slider ul.thumb li img{
cursor:pointer;
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}


/* CONCEPT
-------------------------------- */

.concept{
overflow: hidden;
margin:40px auto;
}

.concept h3{
position: relative;
background:url(../img/works/concept_tit.png) no-repeat center center;
display: block;
width:120px;
height:20px;
margin:0 auto 30px;
}

.concept p{
display: block;
width:740px;
margin:0 auto 30px;
text-align: center;
font-size: 15px;
letter-spacing: 0.02em;
}

/* features
-------------------------------- */

.features{
overflow: hidden;
background-color:#fff;
margin:0 auto;
}

.features ul{
overflow: hidden;
}

.features ul li{
overflow: hidden;
display: block;
height:360px;
padding:0 20px;
margin:40px 0;
}

.features ul li .rectimg {
position: relative;
overflow: hidden;
float: left;
display: block;
width:540px;
height:360px;

}

.features ul li .rectimg img{
width:540px;
height:360px;
}

.features ul li .card{
overflow: hidden;
float: right;
display: block;
width:650px;
height:360px;
padding:0;
}

.features h3 {
display: block;
font-size: 24px;
letter-spacing: 0.02em;
margin-bottom:20px;
}

.features p {
display: block;
font-size: 15px;
letter-spacing: 0.02em;
}


/* MORELIST
-------------------------------- */

.morelist{
overflow: hidden;
background-color:#EEE7DF;
padding:60px 0 30px;
margin:0 auto;
}

.morelist .works2ul{
overflow: hidden;
}

.morelist h3{
position: relative;
background:url(../img/works/morelist_tit.png) no-repeat center center;
display: block;
width:200px;
height:60px;
margin:0 auto;
text-align: center;
}

.morelist a.btn_morelist{
position: relative;
background:url(../img/works/morelist_btn.png) no-repeat center center;
display: block;
width:339px;
height:62px;
margin:40px auto 30px;
text-align: center;
}

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

	.morelist .works2list .works2li:nth-child(4){
	display: none;
	}

}


/* for blog list
 @style.css
----------------- */


/* for blog single
----------------- */

.blogsingle{
position: relative;
overflow: hidden;
}

.blogsingle #posts{
overflow: hidden;
}

.blogsingle #posts .post{
padding:0;
margin-bottom:0;
background-color: #F7F7F7;
}

.blogsingle .post .post_header{
position: relative;
overflow: hidden;
display: block;
width:1200px;
margin:20px auto 50px;
background-color:#fff;
text-align: center;
}

.blogsingle .post .post_header h2{
display: block;
overflow: hidden;
font-size:24px;
font-weight: bold;
line-height:1.5em;
color:#000000;
text-align: center;
padding:20px 20px 20px 140px;
margin:0;
}

.blogsingle .post .post_header .cattag{
position: absolute;
top:0;
bottom:0;
left:30px;
margin:auto;
}



/* subnav
-------------------------------- */

.subnav{
display: block;
position: relative;
background-color:#f7f7f7;
margin-bottom: 0;
}

.subnav ul{
display: block;
overflow: hidden;
padding: 20px;
}

.subnav ul li {
position: relative;
display:inline-block;
float:left;
vertical-align: baseline;
font-size:16px;
font-weight: bold;
padding:0;
margin:0 10px 0 0!important;
text-align: center;
}

.subnav ul li a{
position: relative;
display:block;
color:#111;
line-height:30px;
letter-spacing: 0.04em;
padding:0;
cursor:pointer;
opacity:0.96;
transition: 0.2s;
}

.subnav ul li a.current {
color:#fff;
background-color:#1E3557;
padding:0 15px;
border-radius: 15px;
}


/* PageNavi
-------------------------------- */

.navigation{
width:100%;
display:block;
overflow:hidden;
padding:60px 10px 80px;
text-align:center;
font-size:1.4em;
}

.wp-pagenavi{
display:block;
overflow:hidden;
width:900px;
margin:0 auto;
}

.wp-pagenavi a{
display:inline-block;
line-height:1;
font-size:0.76em;
color:#111;
padding:8px 12px!important;
margin:4px;
background-color:#fff;
}

.wp-pagenavi a:hover{
color:#fff;
background-color:#A28961;
text-decoration: none;
}

.wp-pagenavi span.current{
display:inline-block;
line-height:1;
font-size:0.76em;
color:#fff;
padding:8px 12px;
background-color:#A28961;
margin:4px;
}

.single_navigation{
position:relative;
width:auto;
height:50px;
display:block;
padding:0;
text-align:center;
margin:0 auto;
}

.single_navigation ul{
display:block;
position:relative;
}

.single_navigation ul li{
display:block;
width:193px;
height:50px;
position: absolute;
top:0;
}

.single_navigation ul li a{
overflow: hidden;
display:block;
padding:0 25px;
font-size:15px;
font-weight:normal;
text-decoration-line: none!important;
color:#fff;
background-color:#111;
text-align: center;
line-height:50px;
}

.single_navigation ul li a:hover{
text-decoration: none;
color:#fff;
opacity:0.77;
transition:0.2s;
}

.single_navigation ul li.prev  { left:0; }
.single_navigation ul li.back  { left:204px; }
.single_navigation ul li.next  { left:408px; }
.single_navigation ul li.front { left:612px; width:198px;}
.single_navigation ul li.prev a  { text-align: left; }
.single_navigation ul li.back a  { text-align: center; }
.single_navigation ul li.next a  { text-align: right; }
.single_navigation ul li.front a {
text-align: center;
background-color:#A28961;
}