.modal-view-overlay {
    position: fixed;
    z-index: 5002;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

    .modal-view-overlay .modal-view-container {
        background-color: rgba(27,27,27,0.6);
        overflow: hidden
    }

        .modal-view-overlay .modal-view-container .modal-load-url {
            padding: 64px 16px
        }

        .modal-view-overlay .modal-view-container .modal-view-header {
            width: 100%;
            height: 54px;
            background-color: #fff;
            padding: 16px 16px;
            position: relative;
            border-bottom: 1px solid #d1d1d1
        }

            .modal-view-overlay .modal-view-container .modal-view-header .modal-view-title {
                width: 100%;
                height: 74px;
                max-height: 20px;
                overflow: hidden
            }

        .modal-view-overlay .modal-view-container .modal-view-icon-close {
            display: block;
            margin: 32px 16px 16px 0;
            top: 0;
            right: 0;
            position: fixed;
            background-size: contain;
            height: 16px;
            width: 16px;
            z-index: 5;
            float: right;
            cursor: pointer
        }

        .modal-view-overlay .modal-view-container .modal-view-header + .modal-view-icon-close {
            margin-top: 70px
        }

        .modal-view-overlay .modal-view-container .modal-view-container-image {
            position: absolute;
            top: 0;
            z-index: 2
        }

        .modal-view-overlay .modal-view-container .modal-view-dialog {
            position: relative;
            margin: auto;
            z-index: 3;
            overflow-y: auto;
            height: 100%;
            padding: 30px 0;
            display: flex;
            align-items: center
        }

            .modal-view-overlay .modal-view-container .modal-view-dialog .modal-center-content {
                margin: auto
            }

    .modal-view-overlay.modal-view-hide-close .modal-view-container .modal-view-icon-close {
        display: none
    }

    .modal-view-overlay.modal-view-full-cover .modal-view-container {
        background-color: #fff
    }

    .modal-view-overlay.transition {
        background-color: rgba(51,48,46,0.9)
    }

        .modal-view-overlay.transition .modal-view-container {
            position: relative;
            background-color: #f4f4f3
        }

@keyframes moveToLeft {
    0 {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes hideToRight {
    0 {
        transform: translateX(0)
    }

    100% {
        transform: translateX(100%)
    }
}

@keyframes moveToRight {
    0 {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes hideToLeft {
    0 {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

@keyframes moveToDown {
    0 {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes hideToUp {
    0 {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-100%)
    }
}

@keyframes moveToUp {
    0 {
        transform: translateY(100%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes hideToDown {
    0 {
        transform: translateY(0)
    }

    100% {
        transform: translateY(100%)
    }
}

.modal-view-overlay.transition.transition-right.modal-view-close .modal-view-container {
    animation: hideToRight 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-right.modal-view-open .modal-view-container {
    animation: moveToLeft 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-left.modal-view-close .modal-view-container {
    animation: hideToLeft 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-left.modal-view-open .modal-view-container {
    animation: moveToRight 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-up.modal-view-close .modal-view-container {
    animation: hideToUp 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-up.modal-view-open .modal-view-container {
    animation: moveToDown 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-down.modal-view-close .modal-view-container {
    animation: hideToDown 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

.modal-view-overlay.transition.transition-down.modal-view-open .modal-view-container {
    animation: moveToUp 1.5s cubic-bezier(0.165,0.84,0.44,1) forwards
}

@media(min-width:764px) {
    .modal-view-overlay .modal-view-container .modal-load-url {
        padding: 64px 32px
    }

    .modal-view-overlay .modal-view-container .modal-view-header {
        height: 74px;
        padding: 27px 32px
    }

        .modal-view-overlay .modal-view-container .modal-view-header .modal-view-title {
            height: 74px
        }

    .modal-view-overlay .modal-view-container .modal-view-icon-close {
        margin: 24px 24px 16px 0
    }

    .modal-view-overlay .modal-view-container .modal-view-header + .modal-view-icon-close {
        margin-top: 90px
    }
}

@media(min-width:1016px) {
    .modal-view-overlay .modal-view-container .modal-load-url {
        padding: 104px 32px
    }

    .modal-view-overlay .modal-view-container .modal-view-header {
        height: 80px;
        padding: 30px 32px;
        position: sticky;
        top: 0;
        z-index: 915;
        border-bottom: 1px solid rgba(27,27,27,0.2)
    }

        .modal-view-overlay .modal-view-container .modal-view-header .modal-view-title {
            width: 45.27vw;
            font-size: 16px;
            line-height: 1.25
        }

    .modal-view-overlay .modal-view-container .modal-view-icon-close {
        margin: 24px 24px 16px 0;
        height: 16px;
        width: 16px
    }

    .modal-view-overlay .modal-view-container .modal-view-header + .modal-view-icon-close {
        margin-top: 96px
    }
}

@media(min-width:1436px) {
    .modal-view-overlay .modal-view-container .modal-load-url {
        padding: 104px 32px
    }

    .modal-view-overlay .modal-view-container .modal-view-header .modal-view-title {
        width: 46.67vw;
        font-size: 16px;
        line-height: 1.25
    }
}

.modal-view-overlay.modal-view-full .modal-view-container .modal-load-url {
    padding: 0
}