/*a.button{display:inline-block; padding: 10px 20px; text-decoration:none; color:#fff; background:#000; margin:20px;}*/
#modal{
  display:none;
  position:fixed; 
  width:100%; height:100%;
  top:0; left:0; 
  background:rgba(0,0,0,0.8);
  z-index : 998;
  
}
.modal-con{
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  min-height: 30%
  background:#fff;
  z-index : 999;
  
}
.modal-con .title{
  font-size:14px; 
  padding: 10px; 
  background : #000;
  color:#fff;
}
.modal-con .con{
  font-size:15px; 
  line-height:1.3;
  padding: 0px;
}
.modal-con .con iframe{
   width: 360px; 
   height: 200px;
}
.modal-con .close{
  display:block;
  position:absolute;
  width:30px; height:30px;
  border-radius:50%; 
  border: 1px solid #fff;
  text-align:center; line-height: 30px;
  text-decoration:none;
  color:#fff; font-size:18px; 
  right:10px; top:5px;
}


@media all and (min-width: 1280px) {
#modal{
  display:none;
  position:fixed; 
  width:100%; height:100%;
  top:0; left:0; 
  background:rgba(0,0,0,0.8);
  z-index : 998;
  
}
.modal-con{
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  max-width: 60%;
  min-height: 30%
  background:#fff;
  z-index : 999;
 
}
.modal-con .title{
  font-size:16px; 
  padding: 10px; 
  background : #000;
}
.modal-con .con{
  font-size:15px; 
  line-height:1.3;
  padding: 0px;
}
.modal-con .con iframe{
   width: 900px; 
   height: 500px;
}
.modal-con .close{
  display:block;
  position:absolute;
  width:30px; height:30px;
  border-radius:50%; 
  border: 1px solid #fff;
  text-align:center; line-height: 30px;
  text-decoration:none;
  color:#fff; font-size:18px; 
  right:10px; top:5px;
}