// ==================================================
// modal
// ==================================================
// modal
// --------------------------------------------------
.modal_ {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba($trueblack,0.7);
	z-index: 30;
	padding: 20px;
	box-sizing: border-box;

	& div {
		box-sizing: border-box;
	}

	.modal_inner {
		background: $white;
		border-radius: 4px;
		height: calc( 100vh - 40px );
		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: calc( 100% - 40px );
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		box-shadow: 0 0 10px rgba($trueblack,0.2);
	}

	.col-xs-10 {
		float: left;
		width: calc( 100% - 60px );
	}

	.col-xs-2 {
		float: left;
		width: 60px;
	}

	.ttl {
		@include fs(24);
		padding: 0.4em;
		color: $accent;
		font-weight: 500;
		small {
			display: block;
			@include fs(12);
			display: none;
		}
	}
	.closeBtn {
		text-align: right;
		padding-top: 1em;
		padding-right: 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;
	padding: 0 10px;
	li {
		background: $silver;
		margin-bottom: 15px;
		// height: 28em;
		margin-right: 0;
		width: 100%;
	}
	.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;
	}
}

// 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 {};