@charset "UTF-8";
.md-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  z-index: 9999;
}
 
.md-contents{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  /*max-width: 900px;*/
  height: auto;
  overflow: hidden;
  z-index: 10000;
}
 
.md-inner{
    height: auto;
    padding: 5vw;
    background: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
 
.md-xmark{
  position: absolute;
  top: 26px;
  right: 20px;
  width: 40px;
  height: 22px;
  z-index: 9999;
  cursor: pointer;
}
 
.md-xmark span {
  height: auto;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
  border-radius: 4px;
}
 
.md-xmark span:nth-of-type(1) {
  top: 0;
  transform: translateY(10px) rotate(-45deg);
}
 
 
.md-xmark span:nth-of-type(2) {
  bottom: 0;
  transform: translateY(-10px) rotate(45deg);
}
@media screen and (max-width: 768px) {
.md-contents{
  width: 85%;
}
.md-inner{
    max-height: 600px;
	overflow-y: scroll;
    display: block;

}
}

@media screen and (max-width: 400px) {
.md-xmark{
  position: absolute;
  top: 20px;
  right: 15px;
  width: 30px;
  height: 22px;
}}