@charset "UTF-8";

/*----------------------------
#js_modal
----------------------------*/
#js_modal {
	overflow: auto;
	position: fixed;
	z-index: 9999;
	top: 0;
	padding: 80px 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.8);
}
#js_modal .close_btn {
	display: block;
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
	background: #9c864b;
	cursor: pointer;
}
#js_modal .close_btn:hover {
	opacity: 0.7;
}
#js_modal .close_btn:before,
#js_modal  .close_btn:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 45px;
	background: #fff;
	content: "";
}
#js_modal .close_btn:before {
	transform: translate(-50%,-50%) rotate(45deg);
}
#js_modal .close_btn:after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
#js_modal .prev_btn,
#js_modal .next_btn {
	display: block;
	position: fixed;
	z-index: 9999;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 70px;
	height: 70px;
	border-radius: 70px;
	background: #fff;
	box-shadow: 0 0 15px -2px rgba(0,0,0,0.1);
	cursor: pointer;
}
#js_modal .prev_btn:hover,
#js_modal .next_btn:hover {
	opacity: 0.7;
}
#js_modal .prev_btn {
	left: 2%;
}
#js_modal .next_btn {
	right: 2%;
}
#js_modal .prev_btn:before,
#js_modal .next_btn:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	content: "";
}
#js_modal .prev_btn:before {
	margin: 0 0 0 4px;
	border-top: 2px solid #9c864b;
	border-left: 2px solid #9c864b;
	transform: translate(-50%,-50%) rotate(-45deg);
}
#js_modal .next_btn:before {
	margin: 0 0 0 -4px;
	border-top: 2px solid #9c864b;
	border-right: 2px solid #9c864b;
	transform: translate(-50%,-50%) rotate(45deg);
}

@media screen and (max-width: 767px) {
    /*----------------------------
    #js_modal
    ----------------------------*/
	#js_modal {
		padding: 0;
	}
	#js_modal .close_btn {
		width: 50px;
		height: 50px;
	}
	#js_modal .close_btn:before,
	#js_modal .close_btn:after {
		height: 35px;
	}
	#js_modal .prev_btn,
	#js_modal .next_btn {
		width: 40px;
		height: 40px;
	}
	#js_modal .prev_btn:before,
	#js_modal .next_btn:before {
		width: 13px;
		height: 13px;
	}
	#js_modal .prev_btn:before {
		margin: 0 0 0 2px;
	}
	#js_modal .next_btn:before {
		margin: 0 0 0 -2px;
	}
}