@charset "UTF-8";
/*-------------------------------------------------------------------
    파일정의 : modal_user.css 사용자(일반/변호사) 모달 style
    작성자 : 이정은(lje)
    작성일 : 2020-02-03
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/* center modal */
.modal.center .modal-dialog {
    /* width: calc(100% - 60px); */
    margin: 0;
	position: absolute;
    top: 50%;
    left: 50%;	
}
.modal.center.fade .modal-dialog,
.modal.center.in .modal-dialog  {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* modal open */
.modal-open .modal {
	overflow-y: hidden;
}

/* modal style */
.modal-dialog {
	min-width: 330px;
}
.modal-content {
	border: 0 none;
	border-radius: 0;
}
.modal-header, 
.modal-footer {
	border-color: transparent;
}
.modal-header {
	display: flex;
    align-items: flex-start;
    padding: 20px;
}
.modal-header.line {
    margin: 0 20px 10px;
    padding: 15px 0 10px;
	border-bottom: 2px solid #ebebeb;
}
.modal-header .btn-close-modal {
    margin-left: auto;
}
.modal-title {
    flex: 1;
	font-size: 24px;
    line-height: 1.6;
    color: #000;
    letter-spacing: -1px;	
}
.modal-body {
    padding: 10px 25px 20px;
}
.modal-body.custom-scroll-wrap {
	overflow: auto;
    height: 400px;
}
.modal-footer {
    padding: 15px 20px;
}
.modal-footer .btn-wrap {
	display: flex;
}

/* modal backdrop */
.modal-backdrop.in {
    opacity: .7;
}

/* full modal */
.modal-dialog.full {
	width: 100%;
	height: 100%;
	margin: 0;
}
.modal-dialog.full .modal-content {
    height: 100%;
	border: 0 none;
	border-radius: 0;
    box-shadow: none;    
}
.modal-dialog.full .modal-content.bg-gray {
    background: #f0f1f5;
}
.modal-dialog.full .modal-body {
	height: calc(100% - 170px);
    overflow: auto;
}
.modal-dialog.full .modal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* modal size */
.modal-dialog.md {
	width: 740px;
}

/* 모달 기본 컨텐츠 */
.contents-wrap {
	
}
.contents-wrap .contents {
	font-size: 17px;
	color: #000;
}

/* vue modal css  start */
.modal-mask {
/* 	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: table;
	transition: opacity .3s ease; */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center; 
    background-color: rgba(0, 0, 0, .7); /* modal-backdrop과 동일 */
}

.modal-wrapper {
	/* display: table-cell;
	vertical-align: middle; */
	width: 600px; /* modal-dialog와 동일 */
	min-width: 330px; /* modal-dialog와 동일 */
}

.modal-container {
	margin: 0px auto;
	/* padding: 20px 30px; */
	background-color: #fff;
    border: 0 none; /* modal-content와 동일 */
    box-shadow: 0 5px 15px rgba(0,0,0,.5); /* modal-content와 동일 */
}

/*
 * 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);
} */

/* vue fade(transition name) 효과 */
.fade-enter-active, .fade-leave-active {
	transition: opacity .15s linear;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
}

/* vue modal css  end */


/*=== Media Queries ===*/
@media screen and (max-width: 768px) {
		
	/*=== modal ===*/
	.modal-dialog:not(.full),
	.modal-wrapper {
    	width: 90% !important
	}
	.modal-header {
	    padding: 15px;
	}
	.modal-header.line {
	    margin: 0 15px 5px;
	    padding: 10px 0 5px;
	}
	.modal-title {
	    font-size: 18px;
	}
	.modal-body {
	    padding: 10px 15px 20px;
	}
	.modal-body.custom-scroll-wrap {
		height: 300px;
	}
}
@media screen and (max-width: 640px) {
	.custom-scroll-wrap {
	    overflow-x: hidden;
	    overflow-y: scroll !important;
	}	
}

/* 가로모드일 때 */
@media screen and (max-height: 880px) and (orientation: landscape) {

	/*=== modal ===*/
	.modal.center .modal-dialog {
	    top: 0;
	    padding: 30px 0;
	}
	.modal.center.fade .modal-dialog, .modal.center.in .modal-dialog {
	    -webkit-transform: translate(-50%, 0);
	    -ms-transform: translate(-50%, 0);
	    -o-transform: translate(-50%, 0);
	    transform: translate(-50%, 0);
	}
	.modal-open .modal {
	    overflow-y: auto;
	}
	.modal-dialog {
    	width: 80%;
	}
	.modal-body.custom-scroll-wrap {
		height: 300px;
	}