@charset "utf-8";

/* section 1 */
.sec1 .wrap{
	max-width:1200px;
	width:96%;
	margin-bottom: 70px;
}

.workListWrap{
	padding:3em 0 0 0;
	margin:3em 0;
	position:relative;
}

.sec1 .workListWrap:last-child{
	margin:3em 0 0 0;
}

.workListWrap:before{
	content:"";
	width:120%;
	height:1px;
	background:#3E8A28;

	position:absolute;
	top:0;
	left:-10%;
	right:0;
	margin:auto;
}

.s1t{
    position: absolute;
    right: -32px;
    top: -32px;
}

.s1t.left{
	left:-32px;
	right:auto;
}

.s1t:before{
    content: "";
    width: 1px;
    height: 60px;
    background: #3E8A28;
    display: block;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

.s1t:after{
    content: "";
    width: 1px;
    height: 60px;
    background: #3E8A28;
    display: block;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: -16px;
}

.workList ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}

.workList ul li{
	width:22.5%;
	box-sizing:border-box;
}

.workList dt a{
	display:inline-block;
	position:relative;
}

.workList dt a:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    border-color: transparent transparent #fff transparent;
    bottom: 0;
    right: 0;
}

.workList dd{
	margin:1em 0 0 0;
}

.workList dd strong{
	font-size:17px;
	letter-spacing:0.2em;
}

.workList dd p{
	font-size:15px;
	letter-spacing:0.2em;
	line-height:200%;
	margin:1em 0;
}

.toBe{
	text-align:right;
}



/* paging */
.paging{
	text-align:center;
	margin:5em 0;
}

.paging ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}

.paging ul li{
	margin:0 1.5em;
}

.paging ul li a{
	font-size:17px;
	letter-spacing:0.2em;
}



/* detail */
.secDetail{

}

.worksSlide{
	width:1000px;
	margin:0 auto;
	position:relative;
}

.worksSlideInner{
    padding: 35px 42px;
    border: 1px solid #3E8A28;
    margin: 72px 72px 18px 72px;
    box-sizing: border-box;
}

.worksSlide .bx-wrapper{
	margin:0 auto;
}

.worksSlide .prev{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 20%;
    margin: auto;
    font-size: 64px;
}

.worksSlide .next{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    margin: auto;
    font-size: 64px;
}

.worksSlide .next a,
.worksSlide .prev a{
    color:#3E8A28;
}

.slideGuide{
	text-align:center;
}

.slideGuide p{
	font-size:13px;
	letter-spacing:0.02em;
}

.thumbNav{
	width:1000px;
	margin:2.5em auto 5em auto;
}

.thumbNav .bx-pager{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;

	-webkit-box-orient:horizontal;

	-webkit-box-direction:normal;

	    -ms-flex-direction:row;
	        flex-direction:row;

	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;

	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-around;
}

.detailsWrap{
	width:1000px;
	margin:0 auto 3em auto;
}

.details{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
}

.detailCmt{
	width:60%;
	box-sizing:border-box;
	border-left:1px solid #3e8a28;
}

.detailCmt strong{
	display:block;
	color:#3E8A28;
	font-size:22px;
	letter-spacing:0.2em;
	position:relative;
	padding:0 0 0.5em 2em;
}

.detailCmt strong:after{
	content:"";
	position:absolute;
	bottom:0;
	left:-5%;

	width:105%;
	height:1px;
	background:#3E8A28;
}

.detailCmt p{
    font-size: 14px;
    line-height: 208%;
    padding: 1em 0 1em 3em;
    letter-spacing: 0.05em;
}

.detailData{
	width:35%;
	box-sizing:border-box;
	margin:0 0 0 3em;

	border-left:1px solid #3e8a28;
}

.detailData strong{
	display:block;
	color:#3E8A28;
	font-size:22px;
	font-weight:normal;
	letter-spacing:0.2em;
	position:relative;
	padding:0 0 0.5em 2em;
}

.detailData strong:after{
	content:"";
	position:absolute;
	bottom:0;
	left:-5%;

	width:105%;
	height:1px;
	background:#3E8A28;
}

.detailData strong:before{
	content:"";
	position:absolute;
	bottom:0;
	right:0;

	width:64px;
	height:1px;
	background:#3E8A28;

	-webkit-transform:rotate(-32deg);

	        transform:rotate(-32deg);
}

.ddList{
	padding:1em 0 0 3em;
}

.ddList li:last-child{
	margin:0;
}

.ddList dl{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
}

.ddList dt{
	width:30%;
	box-sizing:border-box;
	font-size:13px;
	letter-spacing:0.05em;
	line-height:200%;
}

.ddList dt span{
	color:#3E8A28;
	margin:0 0.25em 0 0;
}

.ddList dd{
	width:70%;
	box-sizing:border-box;
}

.ddList dd p{
	font-size:13px;
	letter-spacing:0.05em;
	line-height:200%;
}



.detailVoice{
	background:#f2f2f2;
	padding:3em 0;
	margin:3em 0;
}

.detailVoiceInner{
	width:1000px;
	margin:0 auto;
}

.voiceTitle{
    padding: 0.5em 3em;
    border-bottom: 1px solid #3E8A28;
    border-left: 1px solid #3E8A28;
    border-radius: 3em 0 0 3em;
    position: relative;
    border-top: 1px solid #3E8A28;
}

.voiceTitle:before{
    content: "";
    width: 80%;
    height: 1px;
    background: #f2f2f2;
    position: absolute;
    top: -1px;
    right: 0;
}

.voiceTitle strong{
	color:#3E8A28;
	font-size:20px;
	letter-spacing:0.2em;
}

.voice{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.voiceUser{
    width: 25%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.voiceUserBox{
	position:relative;
}

.voiceIcon{
	position:absolute;
	top:-8px;
	left:-16px;
}

.voiceUserBox p{
	font-size:13px;
	letter-spacing:0.05em;
	padding:1em 1em 1em 3em;
	border-top:2px solid #3E8A28;
	border-bottom:1px dashed #3E8A28;
}

.voiceCmt{
    width: 75%;
    box-sizing: border-box;
}

.voiceCmtBox{
	position:relative;
}

.voiceCircle{
	color:#3E8A28;
    font-size: 20px;
    line-height: 100%;
    display: inline-block;
    position: absolute;
    top: -56px;
    left: 0;
    vertical-align: middle;
    padding: 26px 9px;
    border: 1px solid #3E8A28;
    border-radius: 3em;
}

.voiceCmtBox p{
    font-size: 14px;
    line-height: 192%;
    padding: 2em 2em 2em 0;
    letter-spacing: 0.05em;
}

.detailNav{
	text-align:center;
	margin:4em 0 6em 0;
}

.detailNavInner{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}

.detailNavPrev{
	width:15%;
	box-sizing:border-box;
}

.detailNavList{
	width:15%;
	box-sizing:border-box;

}

.detailNavNext{
	width:15%;
	box-sizing:border-box;
}

.detailNavInner a{
	color:#3E8A28;
	position:relative;
}

.detailNavNext a{
    display: inline-block;
    color:#76ab63;
    line-height: 100%;
    position: relative;
    padding: 0 4em 0 0;
}

.detailNavNext a:before{
    content: "";
    height: 1px;
    width: 46px;
    background: #76ab63;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg);
}

.detailNavNext a:after{
	content:"";
    height: 1px;
    width: 46px;
    background: #76ab63;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg);
}

.detailNavPrev a{
    display: inline-block;
    color:#76ab63;
    line-height: 100%;
    position: relative;
    padding: 0 0 0 4em;
}

.detailNavPrev a:before{
    content: "";
    height: 1px;
    width: 46px;
    background: #76ab63;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg);
}

.detailNavPrev a:after{
	content:"";
    height: 1px;
    width: 46px;
    background: #76ab63;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg);
}



.wp-pagenavi{
    text-align: center;
    margin: 5em 0;
}
.wp-pagenavi span,
.wp-pagenavi a{
    font-size: 17px;
    letter-spacing: 0.2em;
	margin: 0 1.4em;
	display: inline-block;
}
.wp-pagenavi span{}
.wp-pagenavi a{}
.wp-pagenavi .extend{
	display: none;
}
.wp-pagenavi .pages{
    display: none;
}
.wp-pagenavi .first,
.wp-pagenavi .last{
    display: none;
}
.wp-pagenavi .first{}
.wp-pagenavi .last{}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink{}
.wp-pagenavi .previouspostslink{}
.wp-pagenavi .nextpostslink{}
.wp-pagenavi .page,
.wp-pagenavi .current{}
.wp-pagenavi .page{}
.wp-pagenavi .page.smaller{}
.wp-pagenavi .page.larger{}
.wp-pagenavi a:hover,
.wp-pagenavi span.current{}


/*---------------------------------------------------------
 section title border
 ---------------------------------------------------------*/
@media screen and (max-width:1460px) {

	/* section title */
	.workListWrap:before{
		width:100%;
		left:0;
	}

	.s1t{
		right:3%;
	}



}



/*---------------------------------------------------------
 All SP & Tablet 
 ---------------------------------------------------------*/
@media screen and (max-width:1150px) {

	/* sec1 */
	.workListWrap:before{
		width:100%;
		left:0;
	}

	.s1t{
		right:32px;
	}

	.s1t.left{
		left:32px;
	}



}

/*---------------------------------------------------------
 All SP 
---------------------------------------------------------*/
@media screen and (max-width: 639px) {

	/* sec1 */
	.workList ul{
		justify-content:center;
	}

	.workList ul li{
		width:42%;
		margin:1em;
	}

	.workList dd strong{
		font-size:120%;
	}

	.workList dd p{
		font-size:100%;
	}



	/* detail */
	.worksSlide{
		width:90%;
	}

	.worksSlideInner{
		margin:3em 3em 1em 3em;
	}

	.worksSlide .prev,
	.worksSlide .next{
		height:30%;
	}

	.thumbNav{
		width:auto;
	}

	.thumbNav .bx-pager{
		justify-content:center;
	}

	.thumbNav a{
		width:21%;
		padding:0.5em;
		box-sizing:border-box;
		text-align:center;
	}

	.detailsWrap{
		width:auto;
	}

	.detailCmt{
		width:100%;
		box-sizing:border-box;
		margin:0 2em;
	}

	.detailData{
		width:100%;
		margin:0 2em;
	}

	.detailVoiceInner{
		width:auto;
	}

	.voice{
		padding:0 3em;
		margin:2em 0;
	}

	.voiceUser{
		width:100%;
		justify-content:flex-start;
	}

	.voiceCmt{
		width:100%;
		box-sizing:border-box;
	}

	.voiceCmtBox p{
		padding:2em 0 0 0;
	}

	.voiceCircle{
		left:auto;
		right:0;
	}

	.detailNav{
		padding:0 1em;
	}

	.detailNavList{
		width:20%;
	}

	.detailNavPrev,
	.detailNavNext{
		width:40%;
	}



}

/*---------------------------------------------------------
 Portrait 
---------------------------------------------------------*/
@media screen and (max-width:479px) {

	/* sec1 */
	.workList ul li{
		width:100%;
	}

	.workList ul li dt{
		text-align:center;
	}

	.paging ul li{
		margin:0 5%;
	}



	/* detail */
	.worksSlideInner{
		margin:1em 2em;
		padding:1em;
	}

	.worksSlide .prev, .worksSlide .next{
		height:150px;
	}

	.slideGuide p{
		font-size:60%;
	}

	.detailCmt{
		margin:0 1em;
	}

	.detailCmt strong{
		padding:0.5em;
	}

	.detailCmt p{
		padding:1em;
	}

	.detailData{
		margin:0 1em;
	}

	.detailData strong{
		padding:0.5em;
	}

	.ddList{
		padding:1em;
	}

	.detailNavInner a{
		font-size:80%;
		line-height:128%;
	}

	.detailNavPrev,
	.detailNavList,
	.detailNavNext{
		width:33.3%;
	}

	.detailNavPrev a{
		padding:0 0 0 30%;
	}

	.detailNavNext a{
		padding:0 30% 0 0;
	}


	.wp-pagenavi{
	    text-align: center;
	    margin: 5em 0;
	}
	.wp-pagenavi span,
	.wp-pagenavi a{
		margin: 0 5%;
	}


}