.alimama {
    font-family: 'alimama';
}

.ArchivoNarrow {
    font-family: 'ArchivoNarrow';
}

.siyuan {
    font-family: 'siyuan';
}

body {
    font-family: 'siyuan';
}

.page_body {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: linear-gradient(180deg, rgba(15, 81, 174, 1) 0%, rgba(145, 195, 255, 1) 56.31%, rgba(255, 255, 255, 1) 100%);
}

.page_body::before {
    content: "";
    position: absolute;
    top: 0rem;
    left: 0;
    width: 120%;
    height: 120%;
    animation: cloudLeft 40s linear infinite;
    background: url('../images/bgc.png') no-repeat center / 100% auto;
    z-index: -1;
}

.page_body::after {
    content: "";
    position: absolute;
    bottom: 1.5rem;
    right: 0;
    width: 120%;
    height: 120%;
    transform: translateX(-100%);
    animation: cloudLeft 40s 20s linear infinite;
    opacity: 0.8;
    background: url('../images/bgc.png') no-repeat center / 100% auto;
    z-index: -1;
}

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

    50% {
        transform: translateX(0%);
    }

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

.page_main {
    width: 100%;
    height: 100%;
    background: url('../images/bgc2.png') no-repeat bottom / cover;

}

.page_main::before {
    content: "";
    position: absolute;
    top: -0.3rem;
    left: -0.3rem;
    width: 120%;
    height: 100%;
    background: url('../images/film.png') no-repeat center / 100% auto;
    z-index: -1;
    animation: star 15s linear infinite;
}

.page_main::after {
    content: "";
    position: absolute;
    top: -0.3rem;
    left: -0.3rem;
    width: 120%;
    height: 100%;
    background: url('../images/film.png') no-repeat center / 100% auto;
    z-index: -1;
    transform: translateX(-100%) translateY(50%);
    animation: star 15s 7.s linear infinite;
}

@keyframes star {
    0% {
        transform: translateX(-100%) translateY(54%);
    }

    100% {
        transform: translateX(100%) translateY(-54%);
    }
}

.icon-logo {
    display: inline-block;
    width: 1.95rem;
    height: 0.42rem;
    background: url(../images/logo.png) no-repeat center / 100% auto;
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
}

.history_btn {
    position: absolute;
    top: 0.2rem;
    right: 0.1rem;
    width: 1.3rem;
    height: 0.36rem;
    padding-left: 0.3rem;
    border: none;
    border-radius: 3.38rem;
    background-color: #4281D4;
    background-image: url(../images/camera.png);
    background-repeat: no-repeat;
    background-size: 0.18rem 0.18rem;
    background-position: left 0.2rem center;
    color: #fff;
    font-size: 0.16rem;
    cursor: pointer;
}

.history_btn a {
    color: #fff;
}

.history_btn:hover {
    transform: scale(1.05);
}

.page_title {
    position: absolute;
    left: 13%;
    top: 7vh;
}

.page_title h2 {
    font-size: 0.26rem;
    line-height: 0.9rem;
    /* letter-spacing: 0.02rem; */
    white-space: nowrap;
    color: #fff;
    font-family: 'alimama';
}

.page_title p {
    font-size: 0.64rem;
    color: #002438;
    font-weight: 700;
    letter-spacing: 0.04rem;
    font-family: 'ArchivoNarrow';
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 25%,
            rgba(0, 0, 0, 0) 80%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 25%,
            rgba(0, 0, 0, 0) 80%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.page_camera {
    position: absolute;
    left: 50%;
    top: 17vh;
    width: 10.78rem;
    height: 6.06rem;
    border-radius: 0.12rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(117, 170, 237, 1) 0%, rgba(91, 148, 227, 1) 100%);
    padding: 0.1rem;
    box-sizing: border-box;
}

.page_camera_item {
    width: 100%;
    height: 100%;
    border-radius: 0.04rem;
    background: linear-gradient(180deg, rgba(240, 253, 255, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
    backdrop-filter: blur(18.37px);
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    position: relative;
}

.history_img img {
    width: 3.03rem;
    height: 4.545rem;
    margin: 0 auto;
}

.page_camera_item .code_bottom {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 999;
}

.page_camera_item .code_bottom .code {
    transform: scale(1.2);
    margin-bottom: 0.2rem;
}

.page_camera>p {
    position: absolute;
    right: 0.1rem;
    top: -0.37rem;
    font-size: 0.18rem;
    color: rgba(255, 255, 255, 0.8);
}

.page_camera>p.app {
    display: none;
}


.page_camera>p span {
    font-size: 0.22rem;
    font-weight: 700;
    margin-right: 0.03rem;
    color: rgba(255, 255, 255, 1);
}

.list_l {
    width: 3.62rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.list_l li {
    width: 1.6844rem;
    height: 2.62rem;
    margin-bottom: 0.2rem;
    position: relative;
    border-radius: 0.1rem;
    border: 2px solid #DFE5F0;
    overflow: hidden;
}

.list_l li img {
    width: 100%;
    height: 100%;
}

.list_l li .bottom {
    width: 100%;
    height: 0.55rem;
    background: #fff;
    border: none;
    border-top: 2px solid #DFE5F0;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list_l li .bottom button {
    width: 1.225rem;
    height: 0.3522rem;
    border: none;
    border-radius: 0.0613rem;
    font-size: 0.18rem;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, #175FBD 0%, #81BDFE 100%);
    box-shadow: 0.02rem 0.02rem 0px #175FBD;
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.list_l li .bottom button:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease-in-out;
}

.list_l li.active button {
    background: linear-gradient(180deg, rgba(0, 184, 129, 1) 0%, rgba(127, 227, 200, 1) 100%);
    box-shadow: 2px 2px 0px rgba(45, 145, 122, 1);
}

.list_r {
    width: 2.4rem;
}

.list_r li {
    width: 100%;
    height: 1.68rem;
    margin-bottom: 0.2rem;
    position: relative;
    background: url(../images/card_bgc1.png) no-repeat center / 100% 100%;
}

.list_r li:nth-child(2) {
    background: url(../images/card_bgc2.png) no-repeat center / 100% 100%;
}

.list_r li:nth-child(3) {
    background: url(../images/card_bgc3.png) no-repeat center / 100% 100%;
}

.list_r li img {
    width: 1.86rem;
    position: absolute;
    left: -0.35rem;
    bottom: 0rem;
}

.list_r li:nth-child(2) img {
    width: 1.47rem;
    left: -0.15rem;
    bottom: -0.35rem;
}

.list_r li:nth-child(3) img {
    width: 1.47rem;
    left: -0.2rem;
    bottom: -0.2rem;
}

.list_r .title {
    padding: 0.2rem 0.12rem;
    color: #fff;
    font-size: 0.22rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list_r .title .icon-link {
    display: inline-block;
    width: 0.3216rem;
    height: 0.3216rem;
    margin-right: 0.2rem;
    background: url(../images/icon-link.png) no-repeat center / 100% 100%;
}

.list_c {
    width: 3.6291rem;
    height: 5.4512rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 0.1rem;
    justify-content: center;
}

.list_c::before {
    content: '';
    position: absolute;
    width: 2000px;
    height: 2000px;
    background-image: conic-gradient(transparent, transparent, transparent, #2DA0FB, rgba(50, 150, 250, 0.8));
    animation: animate 10s linear infinite;
    animation-delay: -5s;
    z-index: -1;
}

.list_c::after {
    content: '';
    position: absolute;
    width: 2000px;
    height: 2000px;
    background-image: conic-gradient(transparent, transparent, transparent, #17E3CF, rgba(7, 232, 161, 0.8));
    animation: animate 10s linear infinite;
    z-index: -1;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.list_c_item {
    position: absolute;
    inset: 3.2px;
    border-radius: 0.1rem;
    background: rgba(255, 255, 255, 1);
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.list_c_item.Captured {
    inset: 2px;
    display: unset;

}

.list_c_item.Captured>img {
    width: 100%;
    height: 100%;
    border-radius: 0.16rem;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 70%,
            rgba(0, 0, 0, 0) 96%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 70%,
            rgba(0, 0, 0, 0) 96%);
}

.camera_btn {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    width: 0.8722rem;
    height: 0.8722rem;
    background: url(../images/camera2.png) no-repeat center / 100% 100%;
    z-index: 999;
    cursor: pointer;
    border: none;
    animation: cameraBtn 2s linear infinite;
}

@keyframes cameraBtn {
    0% {
        transform: translateX(-50%) scale(0.9);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }

    100% {
        transform: translateX(-50%) scale(0.9);
    }
}

.camera_btn:hover {
    transform: translateX(-50%) scale(1.05);
}

.page_camera.history .list_l {
    width: 100%;
    position: relative;
    flex-wrap: unset;
    justify-content: unset;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0) 100%);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 创建6列，每列等宽 */
    gap: 10px;
}

.page_camera.history .list_l::-webkit-scrollbar {
    display: none;
}

.page_camera.history .list_l li {
    display: inline-block;
    width: 98%;
    height: 2.26rem;
    margin-bottom: 0.1rem;
    opacity: 0;
    animation: cardAni 1s linear forwards;
    cursor: pointer;
}

.page_camera.history .list_l li:nth-child(6n) {
    margin-right: 0;
}

.return_btn {
    width: 1.32rem;
    height: 0.3522rem;
    border-radius: 0.0613rem;
    border: none;
    background: linear-gradient(180deg, rgba(23, 95, 189, 1) 0%, rgba(129, 189, 254, 1) 100%);
    box-shadow: 0.02rem 0.02rem 0px rgba(23, 95, 189, 1);
    color: #fff;
    font-size: 0.1838rem;
    padding-left: 0.3rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 999;
    position: relative;
}

.return_btn a {
    color: #fff;
}

.page_camera.history .return_btn {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    margin-left: -0.66rem;
}

.return_btn:hover {
    transform: scale(1.05);
}

.return_btn::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.18rem;
    height: 0.18rem;
    background: url(../images/return-icon.png) no-repeat center / 100% 100%;
}

.code_bottom {
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    transform: translateX(-50%);
}

.code_bottom .code {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(../images/code_bgc.png) no-repeat center / 100% 100%;
    position: relative;
    margin-bottom: 0.1rem;
}

.code_bottom .code img {
    width: 0.6143rem;
    height: 0.6143rem;
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
}

.list_c_item.Captured .code_bottom .return_btn {
    bottom: 0.1rem;
}

.Captured_loading {
    height: 100%;
    position: absolute;
    inset: 0;
}

.Captured_loading #loadingVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.Captured_loading>img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.Captured_loading>.loading-text {
    height: 0.36rem;
    line-height: 0.32rem;
    padding: 0 0.2rem;
    padding-left: 0.15rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/loading-text.png) no-repeat center / 100% 100%;
    z-index: 99;
    font-family: 'alimama';
    color: rgba(26, 139, 219, 1);
    text-shadow: 2px 2px 0px rgba(134, 186, 235, 0.4);
    font-size: 0.14rem;
    white-space: nowrap;
}

.Captured_none {
    background: #CCCCCC;
}

.Captured_none video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0.1rem;
}

.Captured_none img {
    position: absolute;
    left: 50%;
    bottom: 0rem;
    transform: translateX(-50%);
    width: 82%;
    z-index: 99;
}

.return_btn_white {
    height: 0.28rem !important;
    line-height: 0.28rem !important;
    border-radius: 0.04rem !important;
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(237, 245, 255, 1) !important;
    box-shadow: 0.02rem 0.02rem 0px rgba(23, 95, 189, 1) !important;
    position: relative !important;
    font-size: 0.14rem !important;
    white-space: nowrap !important;
    padding: 0 0.12rem !important;
    padding-left: 0.33rem !important;
    color: rgba(17, 82, 175, 1) !important;
}

.return_btn_white::before {
    content: '';
    width: 0.14rem;
    height: 0.14rem;
    background: url(../images/return_blue.png) no-repeat center / 100% 100%;
    position: absolute;
    left: 0.12rem;
    top: 50%;
    transform: translateY(-50%);
}

.return_btn_white a {
    color: rgba(17, 82, 175, 1);
}

.generate_btn {
    height: 0.28rem;
    line-height: 0.28rem;
    border-radius: 0.04rem;
    border: none;
    background: linear-gradient(180deg, rgba(23, 95, 189, 0.65) 0%, rgba(129, 189, 254, 0.65) 100%);
    box-shadow: 0.02rem 0.02rem 0px rgba(23, 95, 189, 1);
    position: relative;
    font-size: 0.14rem;
    white-space: nowrap;
    padding: 0 0.12rem;
    padding-left: 0.33rem;
    color: #fff;
}

.generate_btn::before {
    content: '';
    width: 0.14rem;
    height: 0.14rem;
    background: url(../images/generate_btn.png) no-repeat center / 100% 100%;
    position: absolute;
    left: 0.12rem;
    top: 50%;
    transform: translateY(-50%);
}

.generate_btn.print {
    background: linear-gradient(180deg, rgba(23, 95, 189, 1) 0%, rgba(129, 189, 254, 1) 100%);
}

.generate_btn.print::before {
    background: url(../images/print.png) no-repeat center / 100% 100%;
}

@keyframes cardAni {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.buttons-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.2rem;
    padding: 0 0.3rem;
    bottom: 0.15rem;
    z-index: 999 !important;
}

.action-btn {
    width: 1.4rem;
    height: 0.35rem;
    line-height: 0.3rem;
    border-radius: 0.3rem;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    padding: 0 0.2rem;
}

.return-btn {
    width: 1.4rem;
    padding: 0;
    background: #f0f0f0;
    color: #333;
    border-color: #ddd;
}

.return-btn.return_btn_white{
    width: unset !important;
    margin: 0 auto;
}
.buttons-container{
    z-index: 99;
}
#resultImage{
    width: 80% !important;
    height: 80% !important;
    left: 50% !important;
    top: 0.3rem !important;
    transform: translateX(-50%) !important;
    mask-image: unset !important;
}

.Captured .frame-overlay{
    width: 80% !important;
    height: 80% !important;
    left: 50% !important;
    top: 0.3rem !important;
    transform: translateX(-50%) !important;
}
.return_btn_history{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -0.25rem !important;
    cursor: pointer;
    z-index: 99;
}

.return_index{
    display: inline-block;
    width: 0.2769rem;
    height: 0.2769rem;
    background: url(../images/return.png) no-repeat center / 100% 100%;
    position: absolute;
    right: 1.2rem;
    top: 0.12rem;
    z-index: 999;
}