/**
 * @file CSS-当前项目通用类-注释版-Web版
 * @description 基于当前选择的开发框架的项目中所使用的CSS样式类文件 (原因举例：uniapp与vue脚手架项目的尺寸单位会不同 px、rpx)
 * @author Darry <1327022089@qq.com>
 * @copyright no
 * @createDate 2025-01-23 08:00
 * @lastEditTime 2025-03-05 08:00
 */

/* 
	一、字体大小集合(根据开发框架选择相应尺寸单位)
*/

.fn_12 {
  font-size: 12px;
}

.fn_14 {
  font-size: 14px;
}

.fn_16 {
  font-size: 16px;
}

.fn_18 {
  font-size: 18px;
}

.fn_20 {
  font-size: 20px;
}

.fn_22 {
  font-size: 22px;
}

.fn_24 {
  font-size: 24px;
}

.fn_26 {
  font-size: 26px;
}

.fn_28 {
  font-size: 28px;
}

.fn_30 {
  font-size: 30px;
}

.fn_32 {
  font-size: 32px;
}

.fn_34 {
  font-size: 34px;
}

.fn_36 {
  font-size: 36px;
}

.fn_38 {
  font-size: 38px;
}

.fn_40 {
  font-size: 40px;
}

.fn_42 {
  font-size: 42px;
}

.fn_44 {
  font-size: 44px;
}

.fn_46 {
  font-size: 46px;
}

.fn_48 {
  font-size: 48px;
}

.fn_50 {
  font-size: 50px;
}

.fn_64 {
	font-size: 64px;
}

/* ——————END—————— */


/* 
	二、宽高集合(根据开发框架选择相应尺寸单位)
*/

.w_25 {
	width: 25%;
}

.w_50 {
	width: 50%;
}

.w_100 {
	width: 100%;
}

.h_25 {
	height: 25%;
}

.h_50 {
	height: 50%;
}

.h_100 {
	height: 100%;
}

.wh_100 {
	width: 100%;
	height: 100%;
}

.w_1200_px {
	width: 1200px;
}

/* ——————END—————— */


/* 
	三、圆角边框集合(根据开发框架选择相应尺寸单位)
*/

.br_5 {
	border-radius: 5px;
}

.br_10 {
	border-radius: 10px;
}

.br_15 {
	border-radius: 15px;
}

.br_20 {
	border-radius: 20px;
}

.br_25 {
	border-radius: 25px;
}

.br_30 {
	border-radius: 30px;
}

.br_round {
	border-radius: 50%;
}

/* ——————END—————— */


/* 
	四、内边距集合(根据开发框架选择相应尺寸单位)
*/

.p_10 {
	padding: 10px;
}

.p_15 {
	padding: 15px;
}

.p_20 {
	padding: 20px;
}

.p_25 {
	padding: 25px;
}

.p_30 {
	padding: 30px;
}

.p_35 {
	padding: 35px;
}

.p_40 {
	padding: 40px;
}

.p_45 {
	padding: 45px;
}

.p_t_10 {
	padding-top: 10px;
}

.p_t_15 {
	padding-top: 15px;
}

.p_t_20 {
	padding-top: 20px;
}

.p_t_25 {
	padding-top: 25px;
}

.p_b_10 {
	padding-bottom: 10px;
}

.p_b_15 {
	padding-bottom: 15px;
}

.p_b_20 {
	padding-bottom: 20px;
}

.p_b_25 {
	padding-bottom: 25px;
}

.p_l_10 {
	padding-left: 10px;
}

.p_l_15 {
	padding-left: 15px;
}

.p_l_20 {
	padding-left: 20px;
}

.p_l_25 {
	padding-left: 25px;
}

.p_r_10 {
	padding-right: 10px;
}

.p_r_15 {
	padding-right: 15px;
}

.p_r_20 {
	padding-right: 20px;
}

.p_r_25 {
	padding-right: 25px;
}

/* ——————END—————— */


/* 
	五、外边距集合(根据开发框架选择相应尺寸单位)
*/

.m_t_10 {
	margin-top: 10px;
}

.m_t_15 {
	margin-top: 15px;
}

.m_t_20 {
	margin-top: 20px;
}

.m_t_25 {
	margin-top: 25px;
}

.m_t_30 {
	margin-top: 30px;
}

.m_t_35 {
	margin-top: 35px;
}

.m_b_5 {
	margin-bottom: 5px;
}

.m_b_10 {
	margin-bottom: 10px;
}

.m_b_15 {
	margin-bottom: 15px;
}

.m_b_20 {
	margin-bottom: 20px;
}

.m_b_25 {
	margin-bottom: 25px;
}

.m_b_30 {
	margin-bottom: 30px;
}

.m_b_35 {
	margin-bottom: 35px;
}

.m_b_40 {
	margin-bottom: 40px;
}

.m_l_10 {
	margin-left: 10px;
}

.m_l_15 {
	margin-left: 15px;
}

.m_l_20 {
	margin-left: 20px;
}

.m_l_25 {
	margin-left: 25px;
}

.m_l_30 {
	margin-left: 30px;
}

.m_l_35 {
	margin-left: 35px;
}

.m_r_5 {
	margin-right: 5px;
}

.m_r_10 {
	margin-right: 10px;
}

.m_r_15 {
	margin-right: 15px;
}

.m_r_20 {
	margin-right: 20px;
}

.m_r_25 {
	margin-right: 25px;
}

.m_r_30 {
	margin-right: 30px;
}

.m_r_35 {
	margin-right: 35px;
}

.m_r_40 {
	margin-right: 40px;
}

.m_r_45 {
	margin-right: 45px;
}

.m_r_50 {
	margin-right: 50px;
}

.m_r_55 {
	margin-right: 55px;
}

/* ——————END—————— */

/* 
	六、颜色
*/

.text_color1 {
	color: #000000;
}

.text_color2 {
	color: #FFFFFF;
}

.text_color3 {
	color: #060100;
}

.text_color4 {
	color: #555555;
}

.text_color5 {
	color: rgba(255, 255, 255, 0.8);
}

.text_color6 {
	color: #553ECD;
}

.text_color7 {
	color: #868686;
}

.text_color8 {
	color: #6536E8;
}

.text_color9 {
	color: #6636E8;
}

.text_color10 {
	color: rgba(85, 85, 85, 0.33);
}

.text_color11 {
	color: #403D39;
}

.text_color12 {
	color: #101010;
}

.text_color13 {
	color: #222222;
}

.text_color14 {
	color: #12141D;
}

.text_color15 {
	color: #5E1EE5;
}

/* ——————END—————— */

/* 
	七、背景颜色
*/

.bg_color1 {
	background-color: #FFC0D3;
}

.bg_color2 {
	background-color: #EBFAB5;
}

.bg_color3 {
	background-color: #EFE2FC;
}

.bg_color4 {
	background-color: #CCD3FB;
}

.bg_color5 {
	background-color: #FFFFFF;
}

.bg_color6 {
	background-color: #000000;
}

/* ——————END—————— */

/* 
	八、字体行距
*/

.l_h_18 {
	line-height: 18px;
}

.l_h_24 {
	line-height: 24px;
}

.l_h_27 {
	line-height: 27px;
}

.l_h_32 {
	line-height: 32px;
}

.l_h_34 {
	line-height: 34px;
}

.l_h_36 {
	line-height: 36px;
}

.l_h_40 {
	line-height: 40px;
}

.l_h_48 {
	line-height: 48px;
}

.l_h_56 {
	line-height: 56px;
}

.l_h_60 {
	line-height: 60px;
}

.l_h_65 {
	line-height: 65px
}

/* ——————END—————— */

/* 
	九、杂项
*/

/* 鼠标移入小手 */
.cr_ptr {
	cursor: pointer;
}

/* DOM隐藏 */
.dy_none {
	display: none;
}

/* DOM显示 */
.dy_block {
	display: block;
}

/* DOM忽略所有的指针事件， */
.pe_none {
	pointer-events: none;
}

/* DOM背景波浪线 */
.text_wavy {
	background-image: url("../img/text_wavy.png");
	background-size: 100% 50%;
	background-position: center;
	background-repeat: no-repeat;
}

/* DOM背景圈线 */
.text_circle::before {
	content: "";
	position: absolute;
	margin-top: -25px;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50px;
	background-image: url("../img/text_circle.png");
	background-size: 100% 100%;
	z-index: 0;
}

/* DOM背景流星线 */
.text_meteor::before {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 0;
	width: 100%;
	height: 20px;
	background-image: url("../img/text_meteor.png");
	background-size: 100% 100%;
	z-index: 0;
}

/* DOM背景搅搅糖线 */
.text_stir_sugar::before {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 0;
	width: 248px;
	height: 52px;
	background-image: url("../img/text_stir_sugar.png");
	background-size: 100% 100%;
	z-index: -1;
}

/* DOM背景搅搅糖线2 */
.text_stir_sugar2::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 25px;
	width: 244px;
	height: 36px;
	background-image: url("../img/text_stir_sugar2.png");
	background-size: 100% 100%;
	z-index: -1;
}

/* DOM背景修改液线 */
.text_correcting_fluid::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 166px;
	height: 48px;
	background-image: url("../img/text_correcting_fluid.png");
	background-size: 100% 100%;
	z-index: -1;
}

/* 无序列表+每排缩进2字符样式 */
.text_ul_indent {
	position: relative;
	padding-left: 30px;
}
.text_ul_indent::before {
	content: "•";
	position: absolute;
	top: 0;
	left: 10px;
}
/* ——————END—————— */

.text_f_400 {
	font-family: "400 Regular";
}

.text_f_500 {
	font-family: "500 Medium";
}

.text_f_600 {
	font-family: "600 SemiBold";
}

.text_f_700 {
	font-family: "700 Bold";
}

.text_f_800 {
	font-family: "800 ExtraBold";
}

.text_f_900 {
	font-family: "900 Heavy";
}