.modal.modal-left .modal-dialog,
.modal.modal-right .modal-dialog,
.modal.modal-top .modal-dialog,
.modal.modal-bottom .modal-dialog {
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

/* Top and Bottom */

.modal.modal-top .modal-dialog,
.modal.modal-bottom .modal-dialog {
	position: fixed;
	margin: auto;
	width: 100%;
	max-width: 100%;
	height: auto;
	background: #000;
	
}

.modal.modal-top .modal-content,
.modal.modal-bottom .modal-content {
  height: auto;
  overflow-: auto;
  padding:30px 0;
}

.modal.modal-top .modal-body,
.modal.modal-bottom .modal-body {
  width:70%; margin:0 auto; 
}

.modal.modal-top .modal-body .search { width:50%; margin:0 auto; }
.modal.modal-top .modal-body .search input { width:83%; height: 40px; line-height: 40px; background: #fff; float: left; font-size: 1.8rem; border-radius: 0; box-shadow: 0;   -webkit-appearance: none; -webkit-border-radius: 0; padding-left:2%;  }
.modal.modal-top .modal-body .search button { width:15%; height: 40px; line-height: 40px; float: right; border:0; background: #298cc5; color:#fff; font-size: 1.6rem; border-radius: 0; border-color:#ccc; cursor: pointer;}


.modal.modal-top .modal-body .nonLogin { width:50%; margin:0 auto; }
.modal.modal-top .modal-body .nonLogin p { margin-bottom: 10px; text-align: center;}
.modal.modal-top .modal-body .nonLogin dl { overflow: hidden;}
.modal.modal-top .modal-body .nonLogin dl dt { display: none;}
.modal.modal-top .modal-body .nonLogin dl dd { width:100%; float: right; height:40px; line-height: 40px; margin-bottom: 10px;}
.modal.modal-top .modal-body .nonLogin dl dd input { width:100%; padding-left:2%;}
.modal.modal-top .modal-body .nonLogin a { display: block; height: 40px; line-height: 40px; background: #298cc5; color:#fff; text-align: center;}




@media(max-width: 991px){
	.modal.modal-top .modal-body .search { width:80%; margin:0 auto; }
	.modal.modal-top .modal-body .nonLogin { width:80%; margin:0 auto; }
}

@media(max-width: 500px){
	.modal.modal-top .modal-body{ width:95%; padding-right: 5%;	}
	.modal.modal-top .modal-body .search { width:85%; margin:0 auto; }
	.modal.modal-top .modal-body .nonLogin { width:85%; margin:0 auto; }
	
}

@media(max-width: 400px){
	.modal.modal-top .modal-body .search input { width:78%;}
	.modal.modal-top .modal-body .search button { width:20%;}
}


/* Top */

.modal.modal-top.fade .modal-dialog {
  top: -100%;
  -webkit-transition: opacity 0.3s linear, top 0.1s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.1s ease-out;
  -o-transition: opacity 0.3s linear, top 0.1s ease-out;
  transition: opacity 0.3s linear, top 0.1s ease-out;
}

.modal.modal-top.fade.show .modal-dialog {
	top: 0;
	left:0;
	z-index: 9999;
}

.modal-content button.close { position: absolute; right:0px; top:18px; background: none; color:#000; border:0; font-size: 2.5rem; cursor: pointer;}
.modal-content a.close { position: absolute; right:10px; top:18px; background: none; color:#000; border:0; font-size: 4.0rem; }

/* Full Screen */


.modal.modal-full .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
 
}

.modal.modal-full .modal-content {
  height: 100%;
  overflow-y: auto;
  position:relative;;
}



.modal.modal-full .close-modal {
  position: fixed;
  top: 0;
  right: 3rem;
}

/* Footer */

.modal-footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-radius: 0;
}

/* XS */

.modal.modal-left.xs .modal-body,
.modal.modal-right.xs .modal-body {
  padding: 15px;
}

/* Full screen modal menu indicators */

a.has-sub:after { font-family: "FontAwesome"; }
a.has-sub:after { content: "+"; margin-left: 1rem; }
a.has-sub[aria-expanded="true"]:after { content: "-"; }

.modal-content .modal-body h2{font-size: 3.0rem; padding:15px 0; }
.modal-content .modal-body h2 a { color:#fff; font-weight: 500;}
.modal-content .modal-body h4 { text-align: center; padding:3px 0;}
.modal-content .modal-body h4 a { color:#fff; font-size: 1.5rem;}
.modal-content .modal-body h4 a:hover { text-decoration:underline;}
.modal-content .modal-body .collapse { padding:15px 0;}

/* 모달 시 오른쪽 17px 생기는 문제 해결 */
body.modal-open { overflow: auto; }
body.modal-open[style] { padding-right: 0px !important; }