@charset "utf-8";

body {
	position: relative;
}

#crumb + .m_sec { min-height: 615px; }

.bnr_right,
.bnr_left {
	position: absolute;
	top: 186px;
	left: 50%;
	z-index: 2;
}

.bnr_right.is-fixed,
.bnr_left.is-fixed {
	position: fixed;
	top: 100px;
}

.bnr_right.is-fixed.is-bottom,
.bnr_left.is-fixed.is-bottom {
	position: absolute;
	top: auto;
	bottom: 717px;
}

.bnr_right { transform: translateX(560px); }
.bnr_left { transform: translateX(-760px); }

.bnr_right img,
.bnr_left img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bnr_close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	background-color: #000;
	cursor: pointer;
	transition: transform 0.3s ease;
	display: none;
}

.bnr_close::before,
.bnr_close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background-color: #fff;
	transform-origin: center;
}

.bnr_close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.bnr_close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bnr_close:hover {
	transform: scale(1.2);
}

/* (540 + 200 + 20) * 2 + 16 = 1536*/
@media (max-width: 1536px) {
	#crumb + .m_sec { min-height: auto; }
	.bnr_left { display: none; }

	.bnr_right.is-fixed.is-bottom,
	.bnr_right.is-fixed,
	.bnr_right {
		position: fixed;
		top: auto;
		left: auto;
		right: 20px;
		bottom: 100px;
		transform: translateX(0);
		width: 300px;
	}
	.bnr_close {
		display: block;
	}
	.bnr_right[data-hide="true"] {
		display: none;
	}
}

@media (max-width: 750px) {
	.bnr_right.is-fixed.is-bottom,
	.bnr_right.is-fixed,
	.bnr_right {
		right: auto;
		left: 15px;
		bottom: 15px;
	}
}