.layui-layer.layui-layer-page.skin-demo-popup {
    border-radius: .5rem;
    --un-bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--un-bg-opacity));
    box-shadow: 0 0 16px 0 rgba(24,32,46,.14)
}

.layui-layer.layui-layer-page.skin-demo-popup .layui-layer-content {
    border: none
}

.layui-layer.layui-layer-page.skin-demo-popup .layui-layer-setwin {
    right: 2rem;
    top: 2rem
}

.layui-layer.layui-layer-page.skin-demo-popup .layui-layer-setwin>span {
    --un-bg-opacity: 1;
    background-color: #f5f7fa;
    background-color: rgba(245,247,250,var(--un-bg-opacity))
}

.layui-layer.layui-layer-page.skin-demo-popup .layui-layer-setwin>span:hover {
    background-color: rgba(245,247,250,.9)
}

.layui-layer.layui-layer-page.skin-demo-popup .layui-layer-setwin>span:before {
    --un-text-opacity: 1;
    color: #778499;
    color: rgba(119,132,153,var(--un-text-opacity))
}

.demo-popup {
    border-radius: .5rem;
    display: flex;
    overflow: hidden;
    --un-bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--un-bg-opacity))
}

.demo-popup .demo-popup-header {
    display: none;
    flex: none;
    width: 360px;
    --un-url: url(img/demo-popup-header-bg.jpg);
    background-image: url(img/demo-popup-header-bg.jpg);
    background-image: var(--un-url);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2.5rem
}

.demo-popup .demo-popup-header .header-logo {
    height: 2.25rem
}

.demo-popup .demo-popup-header .header-logo img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.demo-popup .demo-popup-header .header-title {
    font-size: 1.75rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
    --un-text-opacity: 1;
    color: #fff;
    color: rgba(255,255,255,var(--un-text-opacity));
    font-weight: 600
}

.demo-popup .demo-popup-header .fun-list {
    font-size: 1rem;
    --un-text-opacity: 1;
    color: #fff;
    color: rgba(255,255,255,var(--un-text-opacity))
}

.demo-popup .demo-popup-header .fun-list .fun-list-item {
    align-items: center;
    display: flex
}

.demo-popup .demo-popup-header .fun-list .fun-list-item img {
    height: 1.25rem;
    margin-right: 1rem;
    width: 1.25rem
}

.demo-popup .demo-popup-header .fun-list>:not([hidden])~:not([hidden]) {
    --un-space-y-reverse: 0;
    margin-bottom: 0;
    margin-bottom: calc(1.75rem*var(--un-space-y-reverse));
    margin-top: 1.75rem;
    margin-top: calc(1.75rem*(1 - var(--un-space-y-reverse)))
}

@media (min-width: 1272px) {
    .demo-popup .demo-popup-header {
        display:block
    }
}

.demo-popup .demo-popup-body {
    padding: 2rem 1.25rem
}

.demo-popup .demo-popup-body>.title {
    font-size: 1.125rem;
    line-height: 1.75rem
}

@media (min-width: 1272px) {
    .demo-popup .demo-popup-body>.title {
        font-size:1.5rem;
        line-height: 2.25rem
    }
}

.demo-popup .demo-popup-body>.desc {
    font-size: .875rem;
    margin-top: .75rem;
    --un-text-opacity: 1;
    color: #3d4452;
    color: rgba(61,68,82,var(--un-text-opacity));
    line-height: 1.375rem
}

@media (min-width: 1272px) {
    .demo-popup .demo-popup-body>.desc {
        margin-top:1rem
    }
}

.demo-popup .demo-popup-body>.popup-card {
    margin-top: 1rem
}

.demo-popup .demo-popup-body>.popup-card .popup-card-header {
    align-items: center;
    display: flex
}

.demo-popup .demo-popup-body>.popup-card .popup-card-header .title {
    font-size: .875rem
}

@media (min-width: 1272px) {
    .demo-popup .demo-popup-body>.popup-card .popup-card-header .title {
        font-size:1rem
    }
}

.demo-popup .demo-popup-body>.popup-card .popup-card-header .tips {
    font-size: .75rem;
    margin-left: auto;
    --un-text-opacity: 1;
    color: #adb1b8;
    color: rgba(173,177,184,var(--un-text-opacity));
    line-height: 1.125rem
}

.demo-popup .demo-popup-body>.popup-card .popup-card-body {
    font-size: .875rem;
    margin-top: .75rem;
    --un-text-opacity: 1;
    color: #3d4452;
    color: rgba(61,68,82,var(--un-text-opacity))
}

.demo-popup .demo-popup-body>.popup-card .popup-card-body .card-item .card-item-box {
    border-radius: .25rem;
    display: block;
    height: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --un-bg-opacity: 1;
    background-color: #f5f7fa;
    background-color: rgba(245,247,250,var(--un-bg-opacity));
    line-height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem
}

.demo-popup .demo-popup-body>.popup-card .popup-card-body .card-item .open-admin {
    border-radius: .25rem;
    display: block;
    height: 3rem;
    --un-bg-opacity: 1;
    background-color: #0036e5;
    background-color: rgba(0,54,229,var(--un-bg-opacity));
    padding-left: 1rem;
    padding-right: 1rem;
    --un-text-opacity: 1;
    color: #fff;
    color: rgba(255,255,255,var(--un-text-opacity));
    line-height: 3rem;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.demo-popup .demo-popup-body>.popup-card .popup-card-body .btn-copy {
    align-items: center;
    border-width: 1px;
    display: flex;
    height: 1.75rem;
    justify-content: center;
    --un-border-opacity: 1;
    border-color: #194fff;
    border-color: rgba(25,79,255,var(--un-border-opacity));
    border-radius: .25rem;
    --un-text-opacity: 1;
    color: #194fff;
    color: rgba(25,79,255,var(--un-text-opacity))
}

.demo-popup .demo-popup-body>.popup-card .popup-card-body>:not([hidden])~:not([hidden]) {
    --un-space-y-reverse: 0;
    margin-bottom: 0;
    margin-bottom: calc(.75rem*var(--un-space-y-reverse));
    margin-top: .75rem;
    margin-top: calc(.75rem*(1 - var(--un-space-y-reverse)))
}

@media (min-width: 1272px) {
    .demo-popup .demo-popup-body>.popup-card .popup-card-body {
        margin-top:1rem
    }
}

@media (min-width: 1272px) {
    .demo-popup .demo-popup-body {
        padding:2rem
    }

    .demo-popup {
        width: 840px
    }
}