// ==================================================
// modal
// ==================================================
// modal
// --------------------------------------------------
.modal_ {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba($trueblack,0.7);
	z-index: 3;
	padding-top: 20px;
	padding-bottom: 20px;
	box-sizing: border-box;
	.modal_inner {
		background: $white;
		border-radius: 4px;
		height: 100%;
		overflow-y: scroll;
		padding-top: 5em;
		padding-bottom: 20px;
		position: relative;
		box-shadow: 0 0 40px rgba($black,0.4);
	}
	.modal_head {
		position: fixed;
		top: 20px;
		z-index: 3;
		background: rgba($white,0.95);
		width: 100%;
		max-width: 1170px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		box-shadow: 0 0 10px rgba($trueblack,0.2);
	}
	.ttl {
		@include fs(24);
		font-family: $subFontFamily;
		padding: 0.4em;
		color: $accent;
		font-weight: bold;
	}
	.closeBtn {
		text-align: right;
		padding-top: 1em;
		@include fs(14);
		span {
			display: inline-block;
			padding: 0.2em 0.4em;
			border: 1px solid $lightgrey;
			border-radius: 4px;
			cursor: pointer;
			&:hover {
				background: $silver;
			}
		}
		&_f {
			text-align: center;
			background: $white;
			cursor: pointer;
			padding: 1em;
			box-shadow: 0 0 10px rgba($trueblack,0.2);
			transition: all 0.15s;
			&:hover {
				background: $grey;
				color: $white;
			}
		}
	}
}
@include ltMD {
	.modal_ {
		.modal_head {max-width: 970px;}
	}
};
@include ltSM {
	.modal_ {
		.modal_head {max-width: 750px;}
	}
};
@include ltXS {};
@include ltXXS {};

// modal
// --------------------------------------------------
.product_detail_list {
	@include clearfix;
	li {
		float: left;
		background: $silver;
		margin-bottom: 15px;
		height: 28em;
	}
	&.layout01 li {
		margin-right: 0;
		width: 100%;
	}
	&.layout02 li {
		margin-right: 1%;
		width: 49.5%;
		&:nth-child(2n) {margin-right: 0;}
	}
	&.layout03 li {
		margin-right: 1.25%;
		width: 32.5%;
		&:nth-child(3n) {margin-right: 0;}
	}
	&.layout04 li {
		margin-right: 1.3333%;
		width: 24%;
		&:nth-child(4n) {margin-right: 0;}
	}
	.thumb_wrap {
		.thumb {
			position: relative;
			padding-top: 65%;
			overflow: hidden;
			background: $grey;
			height: inherit;
			cursor: pointer;
			&:hover {
				@include opacity(0.7);
			}
			img {
				position: absolute;
				text-align: center;
				top: 0;
			}
		}
	}
	.detail_ttl {
		@include fs(18);
		border-bottom: 2px solid $accent;
		background: $white;
	}
	.detail {
		@include fs(14);
		padding: 0.2em 0.4em;
	}
}
@include ltMD {
	.product_detail_list {
		li {height: 24em;}
	}
};
@include ltSM {
	.product_detail_list {
		li {height: 21em;}
		&.layout04 li {
			margin-right: 1.25%;
			width: 32%;
			&:nth-child(4n) {margin-right: 1.3333%;}
			&:nth-child(3n) {margin-right: 0;}
		}
	}
};
@include ltXS {};
@include ltXXS {};

// inner_thumb
// --------------------------------------------------
.inner_thumb {
	display: none;
	background: rgba($trueblack,0.7);
	height: 100%;
	padding: 5%;
	width: 100%;
	position: fixed;
	z-index: 50;
	top: 0;
	left: 0;
	text-align: center;
	p {
		box-shadow: 0 0 40px rgba($black,0.4);
		height: 100%;
		.close {
			display: inline-block;
			width: 30px;
			height: 30px;
			background: url(vender/close.png) top right no-repeat;
			text-indent: -9999px;
			outline: none;
			cursor: pointer;
			position: absolute;
			@include opacity(0.7);
			&:hover {
				@include opacity(1);
			}
		}
		img {
			max-height: 100%;
			transition: all 0.15s linear;
			border: 10px solid $white;
			border-radius: 4px;
		}
	}
}
// border_linkbtn
// --------------------------------------------------
.border_linkbtn {
	margin-top: 1em;
	a {
		display: block;
		text-align: center;
		border: 2px solid;
		line-height: 40px;
		border-radius: 4px;
		@include fs(16);
		font-weight: bold;
		color: $cvSubColor;
		@include clearfix;
		span {
			float: right;
			display: inline-block;
			background: $cvSubColor;
			color: $white;
			width: 60%;
			@include fs(22);
			@include fontAwesomeAfter('\f08e',inherit,inherit);
			@include Ease;
		}
		&:hover {
			color: Red;
			span {
				background: Red;
			}
		}
	}
}
@include ltMD {};
@include ltSM {};
@include ltXS {};
@include ltXXS {};