/*
 * 一些通用样式
 */
.pd10 {
    padding: 10px;
}

.pd15 {
    padding: 15px;
}

.pd-l-10 {
    padding-left: 10px;
}

.pd-r-10 {
    padding-right: 10px;
}

.pd-l-20 {
    padding-left: 20px;
}

.pd-r-20 {
    padding-right: 20px;
}

.pd-lr10 {
    padding-left: 10px;
    padding-right: 10px;
}

.pd-lr15 {
    padding-left: 15px;
    padding-right: 15px;
}

.pd-lr20 {
    padding-left: 20px;
    padding-right: 20px;
}

.pd-lr25 {
    padding-left: 25px;
    padding-right: 25px;
}

.pd-lr1rem {
    padding-left: 1rem;
    padding-right: 1rem;
}


.pd-lr2rem {
    padding-left: 2rem;
    padding-right: 2rem;
}

.pd-tb2 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.pd-t5 {
    padding-top: 5px;
}

.pd-t10 {
    padding-top: 10px;
}

.pd-t15 {
    padding-top: 15px;
}

.pd-t25 {
    padding-top: 25px;
}


.pd-tb5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pd-tb10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pd-tb15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pd-tb25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.pd-b75 {
    padding-bottom: 75px;
}

.pd-b40 {
    padding-bottom: 40px;
}

.pd-b20 {
    padding-bottom: 20px;
}

.pd-b10 {
    padding-bottom: 10px;
}

/*
 * 边框
 */
.border-gray {
    border: #e6e6e6 1px solid;
    border-radius: 2px;
}

.border-gray-1 {
    border: #eee 1px solid;
    border-radius: 2px;
}

.border-gray-2 {
    border: #d2d2d2 1px solid;
    border-radius: 2px;
}

.border-gray-3 {
    border: #c2c2c2 1px solid;
    border-radius: 2px;
}

.border-gray-4 {
    border: #999 1px solid;
    border-radius: 2px;
}

/*
 * margin-top
 */
.mg-t-5 {
    margin-top: 5px;
}

.mg-t-10 {
    margin-top: 10px;
}

.mg-t-20 {
    margin-top: 20px;
}

.mg-t-40 {
    margin-top: 40px;
}

.mg-t-50 {
    margin-top: 50px;
}

.mg-t-55 {
    margin-top: 55px;
}

.mg-t-60 {
    margin-top: 60px;
}

.mg-t-65 {
    margin-top: 65px;
}

/*
 * margin-left
 */
.mg-l-5 {
    margin-left: 5px;
}

.mg-l-10 {
    margin-left: 10px;
}

.mg-l-20 {
    margin-left: 20px;
}

.mg-l-40 {
    margin-left: 40px;
}

.mg-l-50 {
    margin-left: 50px;
}

.mg-l-55 {
    margin-left: 55px;
}

.mg-l-60 {
    margin-left: 60px;
}

.mg-l-65 {
    margin-left: 65px;
}

/*
 * margin-right
 */
.mg-r-10 {
    margin-right: 10px;
}

.mg-r-20 {
    margin-right: 20px;
}

.mg-r-40 {
    margin-right: 40px;
}

.mg-r-50 {
    margin-right: 50px;
}

.mg-r-55 {
    margin-right: 55px;
}

.mg-r-60 {
    margin-right: 60px;
}

.mg-r-65 {
    margin-right: 65px;
}

/*
 * margin-bottom
 */
.mg-b-5 {
    margin-bottom: 5px;
}

.mg-b-10 {
    margin-bottom: 10px;
}

.mg-b-20 {
    margin-bottom: 20px;
}

.mg-b-40 {
    margin-bottom: 40px;
}

.mg-b-50 {
    margin-bottom: 50px;
}

.mg-b-55 {
    margin-bottom: 55px;
}

.mg-b-60 {
    margin-bottom: 60px;
}

.mg-b-65 {
    margin-bottom: 65px;
}

/*
 * margin-lr
 */
.mg-lr-5 {
    margin-left: 5px;
    margin-right: 5px;
}

.mg-lr-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mg-lr-20 {
    margin-left: 20px;
    margin-right: 20px;
}

.mg-lr-50 {
    margin-left: 20px;
    margin-right: 20px;
}

/** HTML及CSS常用颜色英文词汇
黑色	银色	灰色	白色	茶色	红色	紫色	紫红
black	silver	gray	white	maroon	red	    purple	fuchsia
#000000	#C0C0C0	#808080	#FFFFFF	#800000	#FF0000	#800080	#FF00FF
绿色	亮绿	橄榄	黄色	深蓝	蓝色	青色	浅绿
green	lime	olive	yellow	navy	blue	teal	aqua
#008000	#00FF00	#808000	#FFFF00	#000080	#0000FF	#008080	#00FFFF
*/

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.float-r {
    float: right;
}

.float-l {
    float: left;
}

/* 子元素高度保持一致 */
.flex-row {
    display: flex;
    flex-direction: row;
}

/********************************* boven 样式 end *********************************/


/**主题色*/
.color-main-color {
    color: #FF9A38;
}

/**通用字体颜色*/
.color-text-title {
    color: #000;
}

/**副标题*/
.color-text-title-aux {
    color: #484848;
}

/**主题内容文本色*/
.color-text-main-body {
    color: #666666;
}

/**副文本颜色*/
.color-text-explain {
    color: #999999;
}

/**提示色*/
.color-text-auxiliary {
    color: #cccccc;
}

/**提示色*/
.color-text-white {
    color: #ffffff;
}

/**通用背景色*/
.color-bg {
    color: #f5f6f7;
}

/**item栏颜色*/
.color-cell {
    color: #ffffff;
}

/**通用背景色*/
.color-orange {
    color: #fdb02a;
}

/**item栏颜色*/
.color-red {
    color: #f2474d;
}

/**item栏颜色*/
.color-blue {
    color: #3D4FB3;
}

/**通用背景色*/
.bg-white {
    background: #ffffff;
}

.bg-white-light {
    background: #e8e8e8;
}

.bg-black {
    background: #000000;
}

.bg-black-light {
    background: #1b1b1b;
}


.bg-gray {
    background: #7b7b7b;
}

.bg-gray-light {
    background: #b3b3b3;
}

.bg-blue {
    background: #39afff;
}

.bg-blue-light {
    background: #afe5ff;
}

.bg-red {
    background: #ff413e;
}

.bg-green {
    background: #23d005;
}

/* 页面统一背景  */
.bg-common {
    background-color: #f5f6f7;
}

/* 页面统一背景  */
.bg-main {
    background-color: #FF9A38;
}

.bg-shadow-gray5-light {
    box-shadow: 0 0 5px #e2e2e2;
}

.bg-shadow-gray10 {
    box-shadow: 0 0 10px #cccccc;
}

.bg-shadow-gray20 {
    box-shadow: 0 0 10px #cccccc;
}

/********************************* Vant样式补充(supplement) start *********************************/

/* 页面 vue模板 */
.common-body {
    position: relative;
    width: 100%;
    height: 100%;
    /*background-color: #f8f8f8;*/
}

.common-content {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 46px;
    box-sizing: border-box;
}

.common-content-notitle {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* 纵向排列 */
/**边框限制不会因为外边距和内边距而撑大宽度和长度*/
.box-limit {
    box-sizing: border-box
}

.ver {
    display: flex;
    flex-direction: column;
    box-sizing: border-box
}

.ver-center {
    align-items: center;
}

.ver-bottom {
    align-items: flex-end;
}

.flex1 {
    flex: 1;
}

/* 横向排列 */

.hor {
    display: flex;
    box-sizing: border-box;
}

/*横向布局自动换行*/
.hor_wrap {
    flex-wrap: wrap;
    justify-content: left;
    display: flex;
    align-items: center;
}

.hor_wrap_center {
    flex-wrap: wrap;
    justify-content: center;
}


.hor-center {
    justify-content: center;
}

/* 页面统一背景  */
.match-width {
    width: 100%;
}

.match-width90 {
    width: 90%;
}

.match-width95 {
    width: 95%;
}

.match-width70 {
    width: 70%;
}

.match-width90 {
    width: 90%;
}

.match-height {
    height: 100%;
}

/* 页面底部按钮
 * 当页面内容高度小于屏幕尺寸，按钮会保持在底部
 * 反之内容高于屏幕尺寸，按钮会保持在内容下面
 * 父元素需要设置 position: relative
 */
.button-bottom {
    padding: 15px 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 30px);
}

.divider-hor {
    background: #f3f3f3;
    height: 1px;
    width: 100%;
}

.divider-ver {
    background: #f3f3f3;
    height: 100%;
    width: 1px;
}

.divider-bottom {
    background-repeat: no-repeat;
    border-bottom: 1px solid #f3f3f3;
}

/* 背景图形 */

.corner100 {
    border-radius: 100px;
    background-repeat: no-repeat;
}

.corner20 {
    border-radius: 20px;
    background-repeat: no-repeat;
}

.corner10 {
    border-radius: 10px;
    background-repeat: no-repeat;
}

.corner15 {
    border-radius: 15px;
    background-repeat: no-repeat;
}

.corner-top10 {
    border-radius: 10px 10px 0 0;
    background-repeat: no-repeat;
}

.oval {
    border-radius: 50%;
    background-repeat: no-repeat;
}


.corner2 {
    border-radius: 2px;
    background-repeat: no-repeat;
}

.corner5 {
    border-radius: 5px;
    background-repeat: no-repeat;
}

.oval-stroke-white {
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    border-color: #ffffff;
    background-repeat: no-repeat;
}

.oval-stroke-white2 {
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    border-color: #ffffff;
    background-repeat: no-repeat;
}

.corner-stroke-main-color {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.corner-stroke-gray-light {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #F5F5F5;
    background-repeat: no-repeat;
}

.corner-stroke-white {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #ffffff;
    background-repeat: no-repeat;
}


.corner-stroke-white-opacity05 {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: rgba(255, 255, 255, 0.49);
    background-repeat: no-repeat;
}

.ovalIcon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.userinfo-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-color: white;
}

.icon-big {
    width: 40px;
    height: 40px;
}

.icon-normal {
    width: 30px;
    height: 30px;
}

.icon-little {
    width: 20px;
    height: 20px;
}

.font10 {
    font-size: 10px;
}

.font12 {
    font-size: 12px;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 16px;
}

.font-bold {
    font-weight: bold;
}

.font-color-white {
    color: #ffffff
}

.font-color-white-light {
    color: #ffffff;
    opacity: 0.5;
}

.font-color-red {
    color: #ff2c18
}

.font-color-green {
    color: #07c160;
}

.font-color-main {
    color: #FF9A38
}

.font-text-color-black {
    color: #000000
}

.font-text-color-main-title {
    color: #303133
}

.font-text-color-main_body {
    color: #666666
}

.font-text-color-blue {
    color: #1989fa;
}

.font-text-color-explain {
    color: #909399
}

.font-text-color-auxiliary {
    color: #cccccc
}

.line1 {
    white-space: nowrap;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line1-dot {
    display: -webkit-box; /* 对于旧版Webkit浏览器 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.line2 {
    display: -webkit-box; /* 对于旧版Webkit浏览器 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.line3 {
    display: -webkit-box; /* 对于旧版Webkit浏览器 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.underline {
    text-decoration: underline
}

.font_shade {
    background: -webkit-linear-gradient(left, #FA5C7E, #DA47FA, #01BFA3, #2cd589, #e742c4);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 200% 100%;
}

.font_shade_blue {
    background: -webkit-linear-gradient(left, #64c4e7, #a961d5, #5959d5, #a961d5, #64c4e7,);
    color: transparent;
    -webkit-background-clip: text;
}

.bg-gradient {
    /* 设置容器尺寸 - 原理1 */
    /* 背景渐变色 - 原理2 */
    background: linear-gradient(-90deg, #FA5C7E, #DA47FA, #01BFA3);
    /* 背景尺寸 - 原理3 */
    background-size: 200% 200%;
    /* 循环动画 - 原理4 */
/ / animation: gradientBG 2 s ease infinite;
}

.blur-effect-white-5 {
    backdrop-filter: blur(5px); /* 设置背景的模糊程度 */
    background: rgba(255, 255, 255, 0.5); /* 添加透明背景 */
}

.blur-effect-black-5 {
    backdrop-filter: blur(5px); /* 设置背景的模糊程度 */
    background: rgba(0, 0, 0, 0.8); /* 添加透明背景 */
}