@charset "UTF-8";

.layout-select-area .alert .head .close, .layout-select-area .alert .head .icon {
    height: 1.5625rem;
    width: 1.5625rem;
    background-position: center center;
    background-size: cover
}

.layout-select-area {
    background-color: rgba(0,0,0,.3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

    .layout-select-area .alert .body .hide-area, .layout-select-area-hide {
        display: none
    }

    .layout-select-area .alert {
        width: 22.75rem;
        height: 18.75rem;
        border-radius: 1rem;
        background: #1d2087;
        box-shadow: 0 .1875rem .5rem 0 rgba(0,0,0,.16);
        display: grid;
        grid-template-rows: auto 1fr auto
    }

        .layout-select-area .alert .head {
            height: 3.75rem;
            line-height: 3.75rem;
            display: flex;
            align-items: center;
            justify-content: center
        }

            .layout-select-area .alert .head span {
                display: block
            }

            .layout-select-area .alert .head .icon {
                background-image: url(../images/alert-title.png);
                margin-left: 1.125rem
            }

            .layout-select-area .alert .head .title {
                font-size: 1.125rem;
                font-weight: 700;
                color: #fff;
                flex: 1;
                margin: 0 0 0 .625rem
            }

            .layout-select-area .alert .head .close {
                background-image: url(../images/close.png);
                margin-right: .625rem;
                cursor: pointer
            }

        .layout-select-area .alert .body {
            display: flex;
            justify-content: space-around;
            align-items: center
        }

            .layout-select-area .alert .body .item img {
                width: 6.25rem;
                height: 6.25rem;
                display: block;
                border-radius: 50%
            }

            .layout-select-area .alert .body .item title {
                font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
                font-size: 1rem;
                font-weight: 700;
                line-height: 1.375rem;
                text-align: center;
                letter-spacing: .27px;
                color: #fff;
                display: block;
                margin-top: 1.375rem
            }

        .layout-select-area .alert .area-footer {
            height: 2rem;
            line-height: 2rem;
            font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            font-size: .75rem;
            font-weight: 700;
            text-align: center;
            letter-spacing: .27px;
            color: #fff
        }