.modal-fade-enter-active { animation: dialog-fade-in .3s; }
.modal-fade-leave-active { animation: dialog-fade-out .3s; }

@keyframes dialog-fade-in {
    0% { transform: translate3d(0, -20px, 0); opacity: 0; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes dialog-fade-out {
    0% { transform: translate3d(0, 0, 0); opacity: 1; }
    100% { transform: translate3d(0, -20px, 0); opacity: 0; }
}

.m-modal__wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; background: rgba(0, 0, 0, .5); z-index: 10000; }
.m-modal__container { width: 25%; position: relative; margin: 0 auto 50px; background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-sizing: border-box; margin-top: 15vh; animation: dialog-fade-in .3s; }
.m-modal__header { padding: 15px; }
.m-modal__title { line-height: 24px; font-size: 16px; color: #303133; }
button { -webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; align-items: flex-start; cursor: default; box-sizing: border-box; margin: 0; }
.m-modal__headerbtn { position: absolute; top: 15px; right: 15px; padding: 0; background: transparent; border: none; outline: none; cursor: pointer; font-size: 16px; }
.m-modal__close { color: #909399; }
.m-modal__headerbtn:hover .m-modal__close { color: #409EFF; }

.m-modal__body { color: #606266; word-break: break-all; }
    .m-modal__body .info-data { width: 92.5%; margin: 0 auto; }
        .m-modal__body .info-data ul { padding: 10px; border-radius: 2px; }

        .m-modal__body .info-data .ul1 { background: #f5f5f5; margin-top: 10px; }
            .m-modal__body .info-data .ul1 li { line-height: 25px; }
                .m-modal__body .info-data .ul1 li a { margin-left: 10px; padding: 2px 10px; color: #fff; background: #01c2cb; border-radius: 2px; }
                .m-modal__body .info-data .ul1 li img { margin-top: 10px; }
                .m-modal__body .info-data .ul1 li input[type=text] { width: 150px; line-height: 18px; text-indent: 2px; border: 1px #ccc solid; border-radius: 2px; }

        .m-modal__body .info-data .ul2 { background: #f5f5f5; display: flex; display: -webkit-flex; }
            .m-modal__body .info-data .ul2 li:nth-child(1) { width: 40%; }
                .m-modal__body .info-data .ul2 li:nth-child(1) img { width: 85%; border: 1px #ccc solid; padding: 2px; vertical-align: middle; }
            .m-modal__body .info-data .ul2 li:nth-child(2) { width: 60%; }
                .m-modal__body .info-data .ul2 li:nth-child(2) p { line-height: 22px; }
                    .m-modal__body .info-data .ul2 li:nth-child(2) p:nth-child(1) { color: #333; font-size: 16px; font-weight: bold; line-height: 30px; }

.m-modal__footer { padding: 15px 0; text-align: right; box-sizing: border-box; }
    .m-modal__footer button:first-child { margin-right: 10px; }
.m-modal-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: bold; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 7.5px 20px; border-radius: 4px; }
    .m-modal-button + .m-modal-button { margin-right: 10px; }
.m-modal--primary { color: #fff; background: #01c2cb; }