/* 公共样式表 */
page {
    min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    font-size: 28rpx;
    background-color: #FFFFFF;
    color: #333333;
    overflow: hidden;
}

/* 安全区域适配 - 通用解决方案 */
/* #ifdef MP-WEIXIN */
.safe-area-container {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-horizontal {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.safe-area-vertical {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */

/* 禁止页面回弹 */
/* html,
body,
page {
    overscroll-behavior: none;
    overflow: hidden;
} */

image {
    width: 100%;
    height: 100%;
}

.page-body {
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    /* width: 100%; */
    /* height: 100%; */
}

body,
html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* 布局调整 */

/* 点击动效 */
/* 缩小 */
.button-click {
    transition: transform 0.1s ease;
}

.button-click:active {
    transform: scale(0.95);
}

/* 背景变色 */
.btn-light {
    color: white;
    border-radius: 16rpx;
    transition: background-color 0.2s;
}

.btn-light:active {
    background-color: rgba(189, 197, 254, 0.15);
}


.btn-incline {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}

.btn-incline:active {
    transform: perspective(600px) rotateY(6deg) rotateX(3deg);
}

.btn-feel {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}

.btn-feel:active {
    transform: perspective(600px) rotateX(6deg) scale(0.98);
}

.press-button {
    padding: 10px 20px;
    background: #3A4750;
    /* 深灰蓝 */
    color: #ffffff;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    /* box-shadow: 0 4px 0 #2C3E50; */
}

.press-button:active {
    transform: scale(0.95) translateY(2px);
    /* box-shadow: 0 2px 0 #1C2833; */
}

/* 动画效果 */
.btn-shaky:active {
    animation: shakeScale 0.6s;
}

@keyframes shakeScale {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(0.9) rotate(-3deg);
    }

    20% {
        transform: scale(1.05) rotate(3deg);
    }

    30% {
        transform: scale(0.95) rotate(-3deg);
    }

    40% {
        transform: scale(1.02) rotate(3deg);
    }

    50% {
        transform: scale(0.98) rotate(-2deg);
    }

    60% {
        transform: scale(1.01) rotate(2deg);
    }

    70% {
        transform: scale(0.99) rotate(-1deg);
    }

    80% {
        transform: scale(1.005) rotate(1deg);
    }

    90% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* 控制hover */
.opctiy_8 {
    opacity: 0.8 !important;
}

.opctiy_7 {
    opacity: 0.7 !important;
}

.opctiy_6 {
    opacity: 0.6 !important;
}

.opctiy_5 {
    opacity: 0.5 !important;
}

.opctiy_4 {
    opacity: 0.4 !important;
}

.opctiy_3 {
    opacity: 0.3 !important;
}

.opctiy_2 {
    opacity: 0.2 !important;
}

.opctiy_1 {
    opacity: 0.1 !important;
}

/* 控制文字大小 */
.fs_10 {
    font-size: 20rpx !important;
}

.fs_12 {
    font-size: 24rpx !important;
}

.fs_14 {
    font-size: 28rpx !important;
}

.fs_16 {
    font-size: 32rpx !important;
}

.fs_18 {
    font-size: 36rpx !important;
}

.fs_20 {
    font-size: 40rpx !important;
}

.fs_22 {
    font-size: 44rpx !important;
}

.fs_24 {
    font-size: 48rpx !important;
}

.fs_26 {
    font-size: 52rpx !important;
}

.fs_28 {
    font-size: 56rpx !important;
}

.fs_30 {
    font-size: 60rpx !important;
}

.fs_32 {
    font-size: 64rpx !important;
}

/* 控制字体粗细 */
.fw_blod {
    font-weight: bold;
}

/* 控制字体颜色 */
.color_D16B3F {
    color: #D16B3F !important;
}

.color_C7331D {
    color: #C7331D !important;
}

.color_666666 {
    color: #666666 !important;
}

.color_F8A52F {
    color: #F8A52F !important;
}

.color_999999 {
    color: #999999 !important;
}

.color_C7331D {
    color: #C7331D !important;
}

.color_333333 {
    color: #333333 !important;
}

.color_FFFFFF {
    color: #FFFFFF !important;
}

.color_E7612E {
    color: #E7612E !important;
}

.color_EF4B37 {
    color: #EF4B37 !important;
}

.color_5F5F5F {
    color: #5F5F5F !important;
}

.color_FB7307 {
    color: #FB7307 !important;
}

.color_256BFA {
    color: #256BFA !important;
}

.color_4E8ADE {
    color: #4E8ADE !important;
}

.color_D9D9D9 {
    color: #D9D9D9 !important;
}

/* 控制左右距离 */
.mar_le30 {
    margin-left: 60rpx !important;
}

.mar_le25 {
    margin-left: 50rpx !important;
}

.mar_le20 {
    margin-left: 40rpx !important;
}

.mar_le15 {
    margin-left: 30rpx !important;
}

.mar_le10 {
    margin-left: 20rpx !important;
}

.mar_le5 {
    margin-left: 10rpx !important;
}

.mar_ri5 {
    margin-right: 10rpx !important;
}

.mar_ri10 {
    margin-right: 20rpx !important;
}

.mar_ri15 {
    margin-right: 30rpx !important;
}

.mar_ri20 {
    margin-right: 40rpx !important;
}

.mar_ri25 {
    margin-right: 50rpx !important;
}

.mar_top0 {
    margin-top: 0 !important;
}

.mar_top5 {
    margin-top: 10rpx !important;
}

.mar_top10 {
    margin-top: 20rpx !important;
}

.mar_top15 {
    margin-top: 30rpx !important;
}

.mar_top20 {
    margin-top: 40rpx !important;
}

.mar_top25 {
    margin-top: 50rpx !important;
}

/* 控制字体粗细  */
.fw_blod {
    font-weight: bold !important;
}

/* 控制背景色 */
.bg_e8 {
    background-color: #e8e8e8 !important;
}

/* 控制背景色 */
.bg_cc {
    background-color: #CCCCCC !important;
}

/* 控制背景色 */
.bg_ff {
    background-color: #ffffff !important;
}



/* 弹性布局 */
.fl_box {
    display: flex;
}

.fl_deri {
    flex-direction: column;
}

.fl_row {
    flex-direction: row;
}

.fl_justmiddle {
    justify-content: center;
}

.fl_juststart {
    justify-content: flex-start;
}

.fl_justbet {
    justify-content: space-between;
}

.fl_justround {
    justify-content: space-around;
}

.fl_justend {
    justify-content: flex-end;
}

.fl_almiddle {
    align-items: center;
}

.fl_alstart {
    align-items: flex-start;
}

.fl_alend {
    align-items: flex-end;
}

.fl_1 {
    flex: 1;
}

.fl_warp {
    flex-wrap: wrap
}

.fl_nowarp {
    flex-wrap: nowrap
}

.line_2 {
    display: -webkit-box;
    /* 让文本内容成为弹性盒 */
    -webkit-box-orient: vertical;
    /* 设置盒子的方向为垂直 */
    -webkit-line-clamp: 2;
    /* 限制最多显示两行 */
    overflow: hidden;
    /* 隐藏超出的文本 */
    text-overflow: ellipsis;
    /* 使用省略号 */
}

.line_1 {
    display: -webkit-box;
    /* 让文本内容成为弹性盒 */
    -webkit-box-orient: vertical;
    /* 设置盒子的方向为垂直 */
    -webkit-line-clamp: 1;
    /* 限制最多显示两行 */
    overflow: hidden;
    /* 隐藏超出的文本 */
    text-overflow: ellipsis;
    /* 使用省略号 */
}