@charset "utf-8";

.modal {
visibility: hidden;
opacity: 0;
overflow-y: auto;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 20px;
transition: opacity 0.3s, visibility 0s 0.3s;
background: rgba(0, 0, 0, 0.8);
}
.modal.is-active {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0s 0s;
}
.modal_container {
display: flex;
min-height: 100%;
justify-content: center;
align-items: center;
}
.modal_inner {
margin: 20px auto;
width: 100%;
}
.modal_content {
display: none;
overflow: hidden;
background: #fff;
position: relative;
}
.is-active .modal_content {
display: block;
}
.modalClose {
position: absolute;
right: 20px;
top: 20px;
}
@media only screen and ( max-width : 767px ) {
.modal_content {
padding-bottom: 100px;
}
.modalClose {
width: 100px;
}
.modal_content {
padding: 60px 20px 40px;
}
}
@media only screen and ( max-width : 320px ) {
.modal {
padding: 0 10px;
}
.modal_inner {
margin: 10px auto;
}
.modal_content {
padding: 60px 10px 40px;
}
}
@media print, screen and ( min-width : 768px ) {
.modal_inner {
width: 90%;
}
.modal_content {
padding-bottom: 140px;
}
.modal_content {
padding: 80px 40px;
}
}
@media print, screen and ( min-width : 992px ) {
.modal_inner {
width: 80%;
}
.modal_content {
padding: 80px;
}
}
@media print, screen and ( min-width : 1540px ) {
.modal_inner {
width: 1300px;
}
}