/* ===========================================
 * works use css
=========================================== */

#works_catList{
	padding: 100px 0 0;
}
#works_catList .block{
	display: flex;
	justify-content: center;
	column-gap: 20px;
}
#works_catList .block .box{
	width: 410px;
	height: 66px;
	border: 1px solid #393939;
	text-align: center;
	position: relative;
}
#works_catList .block .box.active{
	background: #E3E3E3;
}
#works_catList .block .box::after{
	content: url("../img/works/arrow_down.svg");
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
	margin-top: 5px;
}
#works_catList .block .box a{
	display: block;
	line-height: 66px;
	color: #393939;
	font-size: 15px;
}
#works_catList .block .box a img{
	margin-right: 10px;
}

#works_mainList{
	padding: 100px 0;
	border-bottom: 1px solid #707070;
}
#works_mainList .works_mainListInner .block{
	display: flex;
	justify-content: space-between;
	height: 230px;
	border-bottom: 1px solid #919191;
	padding: 30px 0;
}
#works_mainList .works_mainListInner .block:last-of-type{
	border-bottom: 0;
}
#works_mainList .works_mainListInner .block .text_box{
	width: 310px;
	margin-right: 30px;
}
#works_mainList .works_mainListInner .block .text_box .cat_box{
	width: 310px;
	display: flex;
}
#works_mainList .works_mainListInner .block .text_box .cat_box p.cat{
	width: 110px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #707070;
	padding: 10px;
	box-sizing: border-box;
}
#works_mainList .works_mainListInner .block .text_box .cat_box p.add{
	width: 200px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #707070;
	border-left: 0;
	padding: 10px;
	box-sizing: border-box;
}
#works_mainList .works_mainListInner .block .text_box h3{
	font-size: 20px;
	text-align: center;
	margin: 60px 0;
}
#works_mainList .works_mainListInner .block .text_box .more_btn{
	font-size: 15px;
	margin: 20px 0 0;
	text-align: right;
}
#works_mainList .works_mainListInner .block .text_box .more_btn a{
	color: #393939;
}
#works_mainList .works_mainListInner .block .text_box .more_btn a img{
	margin-left: 10px;
}
#works_mainList .works_mainListInner .block .img_box{
	width: 325px;
	height: 230px;
}
#works_mainList .works_mainListInner .block .img_box img{
	width: 325px;
	height: 230px;
	object-fit: cover;
}


#works_entry{
	padding: 100px 0;
	border-bottom: 1px solid #707070;
}
#works_entry .works_entry_cat{
	width: 310px;
	display: flex;
}
#works_entry .works_entry_cat p.cat{
	width: 110px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #707070;
	padding: 10px;
	box-sizing: border-box;
}
#works_entry .works_entry_cat p.add{
	width: 200px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #707070;
	border-left: 0;
	padding: 10px;
	box-sizing: border-box;
}

#works_entry .works_entry_title{
	margin: 40px 0;
}
#works_entry .works_entry_title h2{
	font-size: 30px;
}

.works_slider{
	position: relative;
}
.next-btn{
  width: 50px;
  height: 50px;
  position: absolute;
  right:10px;
  top:50%;
  margin-top: -25px;
}
.prev-btn{
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top:50%;
  margin-top: -25px;
}
.bx-prev,.bx-next {
  width: 100%;
  display: block;
  height: 100%;
  position: absolute;
  top:0;
  z-index: 100;
  /*background-color: #f90;*/
}
.prev-btn img,
.next-btn img{
	width: 100%;
	object-fit: cover;
}
.bxslider1 li{
	height: 618px;
	text-align: center;
	overflow: hidden;
}
.bxslider1 img {
	height: 618px;
    display: block;
    margin-left: auto;
	margin-right: auto;
	object-fit: cover;
}
.bx-pager {
    display: flex;
    flex-wrap: wrap;
	align-items: center;
    margin-top: 20px;
    list-style: none;
}

.bx-pager > li {
    width: 142px;
	height: 142px;
	margin-top: 5px;
	margin-right: 1px;
}
.bx-pager > li:nth-of-type(7),
.bx-pager > li:nth-of-type(14){
	margin-right: 0;
}
.bx-pager > li img{
    width: 142px;
	height: 142px;
	object-fit: cover;
}
.bx-pager > li > a {
    display: block;
    position: relative;
    padding-top: 75%;
}

.bx-pager > li > a > img {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}
.works_entry_body{
	padding: 100px 0 200px;
	border-bottom: 1px solid #969696;
}
.works_entry_body img{
	max-width: 100%;
	object-fit: cover;
}

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

	#works_catList{
		padding: 100px 0 0;
	}
	#works_catList .block{
		display: block;
		justify-content: center;
		column-gap: 20px;
	}
	#works_catList .block .box{
		width: 580px;
		height: 80px;
		border: 2px solid #393939;
		text-align: center;
		position: relative;
		margin-bottom: 20px;
	}
	#works_catList .block .box.active{
		background: #E3E3E3;
	}
	#works_catList .block .box::after{
		content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        width: 20px;
        height: 50px;
        background-color: #000;
        mask-image: url(../img/works/arrow_down.svg);
        mask-size: contain;
        mask-repeat: no-repeat;
	}
	#works_catList .block .box a{
		display: block;
		line-height: 80px;
		color: #393939;
		font-size: 24px;
	}
	#works_catList .block .box a img{
		margin-right: 10px;
	}

	#works_mainList{
		padding: 100px 0;
		border-bottom: 1px solid #707070;
	}
	#works_mainList .works_mainListInner .block{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: auto;
		border-bottom: 2px solid #919191;
		padding: 30px 0;
	}
	#works_mainList .works_mainListInner .block:last-of-type{
		border-bottom: 0;
	}
	#works_mainList .works_mainListInner .block .text_box{
		order: 3;
		width: 580px;
		margin-right: 0;
		margin-top: 20px;
	}
	#works_mainList .works_mainListInner .block .text_box .cat_box{
		width: 580px;
		display: flex;
	}
	#works_mainList .works_mainListInner .block .text_box .cat_box p.cat{
		width: 200px;
		text-align: center;
		font-size: 24px;
		border: 2px solid #707070;
		padding: 5px;
		box-sizing: border-box;
	}
	#works_mainList .works_mainListInner .block .text_box .cat_box p.add{
		width: 380px;
		text-align: center;
		font-size: 24px;
		border: 2px solid #707070;
		border-left: 0;
		padding: 5px;
		box-sizing: border-box;
	}
	#works_mainList .works_mainListInner .block .text_box h3{
		font-size: 30px;
		text-align: left;
		margin: 20px 0;
	}
	#works_mainList .works_mainListInner .block .text_box .more_btn{
		font-size: 30px;
		margin: 20px 0 0;
		text-align: left;
	}
	#works_mainList .works_mainListInner .block .text_box .more_btn a{
		color: #393939;
	}
	#works_mainList .works_mainListInner .block .text_box .more_btn a img{
		width: 50px;
		object-fit: cover;
		margin-left: 10px;
	}
	#works_mainList .works_mainListInner .block .img_box{
		order: 1;
		width: 285px;
		height: 200px;
	}
	#works_mainList .works_mainListInner .block .img_box img{
		width: 285px;
		height: 200px;
		object-fit: cover;
	}


	#works_entry{
		padding: 100px 0;
		border-bottom: 1px solid #707070;
	}
	#works_entry .works_entry_cat{
		width: 580px;
		display: flex;
	}
	#works_entry .works_entry_cat p.cat{
		width: 200px;
		text-align: center;
		font-size: 24px;
		border: 2px solid #707070;
		padding: 5px;
		box-sizing: border-box;
	}
	#works_entry .works_entry_cat p.add{
		width: 380px;
		text-align: center;
		font-size: 24px;
		border: 2px solid #707070;
		border-left: 0;
		padding: 5px;
		box-sizing: border-box;
	}

	#works_entry .works_entry_title{
		margin: 40px 0;
	}
	#works_entry .works_entry_title h2{
		font-size: 30px;
	}

	.works_slider{
		position: relative;
	}
	.next-btn{
	  width: 50px;
	  height: 50px;
	  position: absolute;
	  right:10px;
	  top:50%;
	  margin-top: -25px;
	}
	.prev-btn{
	  width: 50px;
	  height: 50px;
	  position: absolute;
	  left: 10px;
	  top:50%;
	  margin-top: -25px;
	}
	.bx-prev,.bx-next {
	  width: 100%;
	  display: block;
	  height: 100%;
	  position: absolute;
	  top:0;
	  z-index: 100;
	  /*background-color: #f90;*/
	}
	.prev-btn img,
	.next-btn img{
		width: 100%;
		object-fit: cover;
	}
	.bxslider1 li{
		height: 400px;
		text-align: center;
		overflow: hidden;
	}
	.bxslider1 img {
		height: 400px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		object-fit: cover;
	}
	.bx-pager {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 20px;
		list-style: none;
	}

	.bx-pager > li {
		width: 144px;
		height: 144px;
		margin-top: 5px;
		margin-right: 1px;
	}
	.bx-pager > li:nth-of-type(7),
	.bx-pager > li:nth-of-type(14){
		margin-right: 0;
	}
	.bx-pager > li img{
		width: 144px;
		height: 144px;
		object-fit: cover;
	}
	.bx-pager > li > a {
		display: block;
		position: relative;
		padding-top: 75%;
	}

	.bx-pager > li > a > img {
		position: absolute;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
	}
	.works_entry_body{
		padding: 100px 0 200px;
		border-bottom: 1px solid #969696;
	}
	

	
}