.mask_background {
  position: absolute; left: 0; top: 0; z-index: 9;
  /* background-color:rgba(0,0,0, 0.8); */
  width: 100%; height: 100%;
}
.modal {
  position: fixed; left:0; top:0; z-index: 9;
  width: 100%; height: 100%;
  transform: scale(0);
}
.modal .modal-bg {
  position: relative;
  display:flex; 
  align-items: center;  justify-content: center;
  height: 350px;
  /* background: rgba(0, 0, 0, .8); */
}
.modal .modal-bg .modal-cont {
  position:relative; z-index: 10;
  display: inline-block;
  padding: 1rem; max-width: 100%;
  overflow: hidden;
}
.modal .modal-bg .modal-cont .hed-ttl {
  display: flex;
  justify-content: flex-start; align-items: center;
  background-color: var(--color-point);
  width: 100%;
}

.modal.SearchMdarl {
  top: 50px;
}

.modal.SearchMdarl .modal-bg .modal-cont {
  display: flex;
  flex-direction: column; align-items: center; justify-content: flex-start;
  width: 1465px;
  margin: 0;
}
.modal.SearchMdarl .modal-bg {
  background-color: #fff;
  box-shadow: 0 0 8 0.08;
}
.modal.SearchMdarl .modal-bg .modal-cont > form {
  margin: 0;
  display: flex;
  flex-direction: column; align-items: center; justify-content: flex-start;
}
.modal.SearchMdarl .modal-bg .modal-cont .row.search {
  padding-top: 80px; margin: 0 0 24px 0;
}
.modal.SearchMdarl .modal-bg .modal-cont .row.Tag {
  width: 580px;
}
.row.Tag strong {
  padding-top: 8px;
}


/**************************************************** animation style */
/********************************************* One */
.modal.one {
  transform: scale(1);
}
.modal.one.out {
  transform: scale(0);
}
.modal.one .modal-bg {
  background: rgba(0,0,0, 0);
  animation: none;
}

/********************************************* three */
.modal.three {
	transform: scale(1);
}
.modal.three .modal-bg {
	background: rgba(255,255,255,0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
.modal.three .modal-bg .modal-cont {
	opacity: 0;
	animation: scaleUp 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
.modal.three.out {
	animation: quickScaleDown 0s .5s linear forwards;
}
.modal.three.out .modal-bg {
	background: rgba(255,255,255,0);
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
.modal.three.out .modal-bg .modal-cont {
	opacity: 0;
	animation: scaleDown 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

@keyframes fadeIn {
	0% {background: rgba(255,255,255,0)}
	100% {background: rgba(255,255,255, 1)}
}
@keyframes fadeOut {
	0% {background: rgba(255,255,255, 1)}
	100% {background: rgba(255,255,255,0)}
}
@keyframes scaleUp {
	0% {transform: scale(0.5) translatey(-1000px); opacity:0}
	100% {transform: scale(1) translatey(0px); opacity:1}
}
@keyframes scaleDown {
	0% {transform: scale(1) translatey(0px); opacity:1}
	100% {transform: scale(0.5) translatey(-1000px); opacity:0}
}
@keyframes quickScaleDown {
	0% {transform: scale(1);}
	99.9% {transform: scale(1); }
	100% {transform: scale(0); }
}

@media screen and (min-width: 550px) {
  .modal.SearchMdarl .modal-bg .modal-cont {
    /* width: calc(100% - 25px - 25px); */
    width: 100%;
  }
}