/**/

.popupArea{
	position: fixed;
	top:0;
	left:0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(4px);
	overflow: hidden;
	z-index:20;
	transition: background-filter ease 0.3s;
}
.popupArea.active{
	width: 100%;
	height: 100%;
	transition: background-filter ease 0.3s;
}
.popup{
	position: absolute;
	top: 50%;
	left:-500%;
	transform: translate(-50%, -50%);
	border-radius: 40px;
	padding: 32px;
	max-width: 1160px;
	background: var(--white);
	opacity:0;
	transition: opacity ease 0.3s, left ease 0.1s 0.4s;
}
.popup.active{
	left:50%;
	opacity:1;
	transition: opacity ease 0.3s;
}
.popup .close{
	width: 28px;
	height: 28px;
	cursor: pointer;
	position: absolute;
	right: 32px;
	top: 32px;
	display:block;
	background: url(../img/close.svg) no-repeat center;
	background-size: contain;
}
.popup_title{
	font-family: var(--third-family);
	font-weight: 400;
	font-size: 88px;
	line-height: 109%;
	color: #000;
	margin-bottom: 40px;
}
.popup_text {
	font-family: var(--third-family);
	font-weight: 400;
	font-size: 20px;
	line-height: 130%;
	color: #000;
	max-height: 80vh;
	overflow-y: auto;
}
.popup .images{
	display: flex;
	width:100%;
	overflow-x: auto;
	height: 271px;
}
.popup .images img{
	width: auto;
	height: 271px;
}

.botEsyPanelArea{
	position: fixed;
	top:0;
	left:-100vw;
	width: 1px;
	overflow: hidden;
	height: 1px;
	z-index:100;
	background-color: rgba(51, 51, 51, 0);
	transition:all linear 0.1s 0.3s, background-color ease 0.3s;
}
.botEsyPanelArea.active{
	left:0;
	width: 100vw;
	height: 100%;
	background-color: rgba(51, 51, 51, 0.4);
	transition:  background-color ease 0.3s;
}
.botEsyPanelArea .botEsyPanel{
	position: absolute;
	bottom:-100%;
	left:0;
	width:100vw;
	height:auto;
	padding: 32px 16px 90px;
	border-radius: 24px 24px 0 0;
	background: #fff;
	min-height:80px;
	transition: bottom ease 0.3s;
}
.botEsyPanelArea.active .botEsyPanel{
	bottom:-0;
	transition: bottom ease 0.3s;
}
.botEsyPanelArea .botEsyPanel .botEsyPanelClose {
	display: block;
	width: 100%;
	height: 96vh;
	position: absolute;
	top: calc(-100vh + 22px);
	left: 0;
	backdrop-filter: blur(4px);
}
.botEsyPanelArea:not(.active) .botEsyPanel .botEsyPanelClose{
	display: none;
}
.botEsyPanelArea .botEsyPanel .botEsyPanelClose:after{
	content: "";
	display: block;
	border-radius: 16px;
	width: 40px;
	height: 2px;
	background: #8b8b8b;
	position: absolute;
	bottom:15px;
	left:50%;
	margin-left: -20px;
}

@media(max-width: 736px){
	.popup {
		width: 96vw;
		border-radius: 0;
		top: auto;
		bottom: 0;
		padding-top:0;
	}
	.popup::before {
		content: "";
		display: block;
		width: 100%;
		height: 9vw;
		background: url(image/toppop.svg) no-repeat top center;
		background-size: contain;
		position: absolute;
		top: -8vw;
		left: 0;
	}
	.popup.active {
		left: 50%;
		opacity: 1;
		transition: opacity ease 0.3s;

		transform: translateX(-50%);
	}
	.popup .close{
		display: none;
	}
	.popup_title {
		font-size: 72px;
		margin-bottom: 24px;
	}
	.botEsyPanelArea .botEsyPanel .botEsyPanelClose::after{
		display: none;
	}
	.botEsyPanelBody{
		position: relative;
	}
	.botEsyPanel::before {
		content: "";
		display: block;
		width: 100vw;
		height: 8.5vw;
		background: url(image/toppop.svg) no-repeat top center;
		background-size: cover;
		position: absolute;
		top: -8.5vw;
		left: 0;
		z-index: 2;
	}
	.botEsyPanelArea .botEsyPanel {
		border-radius: 0 0;
		padding: 0 16px 5%;
	}
}
@media(max-width: 450px){
	.popup_title {
		font-size: 42px;
		margin-bottom: 12px;
	}
	.popup {
		padding: 0 20px 20px;
	}
	.popup_text {
		font-size: 18px;
		max-height: 50vh;
		overflow-y: auto;
	}
}