@charset "UTF-8";

#boxes .dialog1200 {width:1200px; height:auto; background-color:#ffffff;}
.modal-default-button {
  float: right;
  
}
.modal-mask {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 10px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/*라디오버튼*/
input[type=radio], input[type=radio]:checked {
	appearance:none;
}
input[type=radio] {
	width:12px;
	height:12px;
	background:#fafafa;
	border:1px solid #dbdbdb;
	border-radius:50%;
	box-sizing:border-box;
}
input[type=radio]:checked {
	width:12px;
	height:12px;
	border:2px solid #49a2ef;
	border-radius:50%;
}
input[type=radio]:hover {
	border:3px solid #49a2ef;
}
/*추가*/
.modal-header {
  position:relative;
  display:flex;
  align-items:center;
}
.modal-header p {
  color:#fff;
  background:#7391e9;
  color:#fff;
  font-size:13.333px;
  font-weight:bold;
  width:90px;
  padding:0 10px;
  text-align:center;
  height:30px;
  line-height:30px;
}
.modal-header select {
  width:calc(100% - 75px);
  height:30px;
  padding-left:10px;
  border:1px solid #7391e9;
  background:url(/images/sp/iconDownArrow.png) no-repeat 97% center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}
.mapPop .modal-header {
  margin-bottom:1rem;
}
.mapPop .markBox {
  max-height:200px;
  overflow-y:auto;
}
.mapPop .bookMark {
  display:block !important;
  border-bottom:0;
  padding:0 !important;
  border:1px solid rgba(255,255,255,0);
}
.mapPop .bookMark span {
  padding:0.5rem 0;
}
.mapPop .bookMark > label {
  display:flex;
  align-items: flex-end;
  padding:0 !important;
}
.mapPop .bookMark span:nth-child(1) {
  width:30%;
  margin-right:3%;
  border-bottom:1px dashed #dbdbdb;
}
.mapPop .bookMark span:nth-child(2) {
  width:60%;
  border-bottom:1px dashed #dbdbdb;
}
.mapPop .bookMark span label {
  font-weight:bold;
  cursor:pointer;
}
.mapPop .bookMark button {
  width:6.5%;
  border-bottom:1px dashed #dbdbdb;
  padding:0.5rem 0;
}
.modal-header input {
  	max-width:600px;
	width:100% !important;
	background:#f1f3fa;
	color:#666;
	height:30px;
	padding:0 8px;
	text-align:left;
	border:none;
	box-sizing:border-box;
	vertical-align:middle;
}
.modal-header .btnSearch {
  vertical-align:middle;
  margin-left:-30px;
  border-radius:0;
}
.modal-body {
  display:flex;
  align-items:center;
}
.btnMark {
  position:relative;
  background:url(/images/sp/iconStar.png)no-repeat center center / 55% #69bd83;
  color:#fff;
  font-weight:bold;
  width:30px !important;
  height:30px;
  margin:5px 0;
  border:1px solid #69bd83;
  cursor:pointer;
}
.modal-body span.selectSt {
  color:#fff;
  background:#7391e9;
  color:#fff;
  font-size:13.333px;
  font-weight:bold;
  padding:0 15px;
  display:inline-block;
  width:86px;
  height:30px;
  text-align:center;
  line-height:30px;
}
.modal-body select {
  width:calc(100% - 30px);
  height:30px;
  padding-left:10px;
  border:1px solid #dbdbdb;
  background:url(/images/sp/iconDownArrow.png) no-repeat 97% center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;   
}
.modal-body #stationArrival {
  width:calc(100% - 116px);
}
.bookMark {
  position:relative;
  border-bottom:1px dashed #dbdbdb;
  cursor:pointer;
}
.bookMark:hover {
  background:#f1f3fa;
}
.bookMark:hover input[type=radio] {
  border:3px solid #49a2ef;
}
.bookMark label {
  cursor:pointer;
}
.bookMark > label {
  display:flex;
  align-items:flex-end;
  padding:10px 0;
}
.markBox {
  font-size:14px;
}
.markBox > p {
  color:#69bd83;
  margin-bottom:-0.5rem;
}
.markBox > p:before {
  content:"✮";
  display:inline-block;
  color:#69bd83;
  font-size:18px;
  border-radius:50%;
  margin:0 0.15rem 0.5rem 0;
}
.btnMarkDelete {
  position:absolute;
  top:0;
  right:0;
  background:none;
  color:#666;
  font-size:10px;
  padding:10px 12px;
  cursor:pointer;
}
.btnMarkDelete:hover {
 color:#222;
 font-weight:bold;
}
.mapPop .btnMarkDelete {
  top:3px;
}
.modal-body .bookMark:last-child {
  border:none;
}
.modal-footer .btnDelete {
  background:#adb3b3;
  color:#fff;
  font-weight:bold;
  padding:0 15px;
  width:auto !important;
  height:30px;
  display:block;
  margin:5px auto;
  border-radius:20px;
  cursor:pointer;
}
.modal-footer .btnConfirm {
  background:#7391e9;
  color:#fff;
  font-weight:bold;
  padding:0 15px;
  height:30px;
  display:block;
  margin:5px auto;
  border-radius:20px;
  cursor:pointer;
}
.mapPop .modal-container {
  width: 600px;
  margin: 0px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}
.mapPop .selectedLocation {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0.5rem 0 1rem 0;
  height:30px;
  line-height:30px;
  font-size:14px;
  padding:5px 0 5px 5px;
  box-sizing:border-box;
  border:1px solid #7391e9;
  border-right:1px solid #69bd83;
}
.mapPop .selectedLocation > div {
  display:flex;
  align-items:center;
}
.mapPop .selectedLocation b {
  font-weight:bold;
  color:#000;
}
.mapPop .selectedLocation .selectedSpot {
  right:5px;
  background:#7391e9;
  color:#fff;
  font-weight:bold;
  padding:0 15px;
  height:30px;
  cursor:pointer;
}

@media all and (max-width:500px) {
	.mapPop .bookMark {
		display:flex !important;
		align-items:flex-end;
	}
}