/* btb */
.btn-wrap {
	display: flex; 
	justify-content:center;
	align-items: center;
	height: 100vh;
}
.btn-wrap > a {
	background-color: #fce4ec; 
	padding: 13px 20px;
	text-decoration: none;
	border-radius: 3px;
	color: rgba(0,0,0,0.7);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	cursor: pointer;
}

/* modal */
#modal {
	display: none;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	z-index: 99;
}
#modal .modal-bg {
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
#modal .modal-bg .modal-cont {
	position: relative;
	background-color: #fff;
	padding: 0px 0px;
	max-width: 500px;
	display: inline-block;
}
#modal .modal-bg .modal-cont a.btn-modal {
	position: absolute;
	top:280px; left: calc(50% - 100px);
	width: 200px; line-height:46px;
	color:#fff;
}
#modal .modal-bg .modal-cont .modal_close {
	position: absolute; top: -48px; left: 452px;
	background: #000;
	padding: 5px;
	border-radius: 0;
	width: 38px; height: 38px;
	cursor: pointer;
}

a.btn {
	cursor: pointer;
}


.btn-modal {
	display: block;
	width:100%;
	background-color: #6069b1;
	color:#fff; font-size: 13px; font-weight: 500;
	text-align:center;
}
.btn-modal:hover {
	background-color: #000;
}


@media only screen and (max-width:799px) and (min-width:280px){
	#modal .modal-bg .modal-cont a.btn-modal {
		top: 77%; left: calc(50% - 70px);
		width:140px; line-height:38px;
	}
	#modal .modal-bg .modal-cont .modal_close {
		top: calc(50% - 72%);
		left: calc(50% - -35%);
	}
}

@media only screen and (max-width:374px) and (min-width:360px){
	#modal .modal-bg .modal-cont {
		height: 252px;
	}
	#modal .modal-bg .modal-cont img {
		height:100%;
	}
	#modal .modal-bg .modal-cont .modal_close {
		top: calc(50% - 174px);
		left: calc(50% - -131px);
	}
}

@media only screen and (max-width:411px) and (min-width:375px){
	#modal .modal-bg .modal-cont {
		height: 262px;
	}
	#modal .modal-bg .modal-cont img {
		height:100%;
	}
	#modal .modal-bg .modal-cont .modal_close {
		top: calc(50% - 179px);
		left: calc(50% - -138px);
	}
}

@media only screen and (max-width:413px) and (min-width:412px){
	#modal .modal-bg .modal-cont {
		height: 290px;
	}
	#modal .modal-bg .modal-cont img {
		height:100%;
	}
	#modal .modal-bg .modal-cont .modal_close {
		top: calc(50% - 193px);
		left: calc(50% - -158px);
	}
}

@media only screen and (max-width:500px) and (min-width:414px){
	#modal .modal-bg .modal-cont {
		height: 290px;
	}
	#modal .modal-bg .modal-cont img {
		height:100%;
	}
	#modal .modal-bg .modal-cont .modal_close {
		top: calc(50% - 193px);
		left: calc(50% - -158px);
	}
}