/**
 * @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;
}

/* ——————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%;
}

/* ——————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_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_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: #222326;
}

.text_color4 {
	color: #7B899B;
}

.text_color5 {
	color: #0A73EF;
}

.text_color6 {
	color: #338FFB;
}

.text_color7 {
	color: #555555;
}

.text_color8 {
	color: #A4A4A4;
}

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

/* 
	七、杂项
*/

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

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

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

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

/* 通用顶部 —— START */
.common_header {
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	background-color: #FFFFFF;
	box-shadow: 0px 4px 4px 0px #DAE5FB;
	transition: all .2s ease;
	z-index: 99;
}

.common_header .header-nav {
	width: 1200px;
}

.common_header .header-nav .nav-logo {
	margin-right: 130px;
}

.header-nav .nav-logo .logo-icon {
	width: 124px;
	height: 36px;
}

.common_header .header-nav .list-item {
	padding: 0 20px;
}

.common_header .header-nav .list-item>a {
	font-weight: 400;
	color: #333333;
}

.common_header .header-nav .list-item>a:hover {
	font-weight: 600;
	color: #0A73EF;
}

.common_header .header-nav .list-item.list-item-active::before {
	content: "";
	position: absolute;
	margin-left: -10px;
	bottom: 1px;
	left: 50%;
	width: 20px;
	height: 2px;
	background-color: #0A73EF;
	transition: width .2s ease;
}

.common_header .header-nav .list-item.list-item-active>a {
	font-weight: 600;
	color: #0A73EF;
}
/* 通用顶部 —— END */


/* 通用主体内容 —— START */
.common_main {
	padding-top: 65px;
}

/* 通用主体内容-banner图 */
.common_main .main-banner {
	height: 430px;
	background-image: url("../img/icon47.png");
	background-size: cover;
}

.common_main .main-banner .banner-container {
	width: 1200px;
}

.main-banner .banner-container .container-desc {
	margin-top: 45px;
	z-index: 1;
}

.main-banner .banner-container .container-desc::before {
	content: "";
	position: absolute;
	top: 17px;
	left: -2px;
	width: 464px;
	height: 32px;
	background-color: #D8E6F6;
	z-index: -1;
}
/* end */

/* 通用主体内容-获取解决方案 */
.common_main .main_solution {
	height: 228px;
	background-image: url("../img/icon12.png");
	background-size: cover;
}

.main_solution .solution-container .container-btn {
	margin-top: 40px;
	width: 224px;
	height: 48px;
	border-radius: 4px;
	background-color: #FFFFFF;
}

.main_solution .solution-container .container-btn:hover {
	color: #FFFFFF;
	background-color: #0A73EF;
}
/* end */

/* 通用主体内容-右下角客服 */
.common_main .main_float_window {
	padding: 5px 0;
	bottom: 70px;
	right: 16px;
	width: 70px;
	border-radius: 10px;
	background-color: #FFFFFF;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
	z-index: 99;
}

.common_main .main_float_window .window-item {
	width: 64px;
	height: 64px;
	border-radius: 10px;
}

.common_main .main_float_window .window-item:hover {
	color: #0A73EF;
}

.main_float_window .window-item .item-icon {
	width: 20px;
	height: 20px;
}

.main_float_window .window-item .item-content {
	padding: 12px;
	top: 0;
	left: -162px;
	width: 150px;
	border-radius: 10px;
	background-color: #FFFFFF;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
	transition: opacity .2s ease;
	opacity: 0;
	z-index: -1;
}

.main_float_window .window-item:hover .item-content {
	opacity: 1;
	z-index: 1;
}

.window-item .item-content .content-img {
	width: 60px;
	height: 60px;
}
/* end */

/* 通用主体内容 —— END */


/* 通用底部 —— START */
.common_footer {
	padding-top: 41px;
	padding-bottom: 34px;
	background-color: #292B2F;
}

.common_footer .footer-container {
	width: 1200px;
}

.common_footer .footer-container .container-title {
	margin-bottom: 34px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(239, 239, 239, 0.2);
}

.footer-container .container-title .title-logo {
	width: 36px;
	height: 36px;
}

.footer-container .container-title .title-icon {
	width: 20px;
	height: 20px;
}

.container-title .title-icon .icon-code {
	top: -110px;
	left: -40px;
	width: 100px;
	height: 0;
	border-radius: 4px;
	transition: height .2s ease;
}

.container-title .title-icon:hover .icon-code {
	height: 100px;
}

.common_footer .footer-container .container-list {
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(239, 239, 239, 0.2);
}

.container-list .list-item .item-title {
	line-height: 18px;
}

.container-list .list-item .item-text {
	line-height: 32px;
}

.container-desc {
	margin-top: 21px;
}
/* 通用底部 —— END */

/* 通用按钮-小 */
.common_min_btn {
	width: 132px;
	height: 48px;
	font-size: 16px;
	font-weight: 400;
	border-radius: 4px;
	color: #FFFFFF;
	background-color: #0A73EF;
}

.common_min_btn:hover {
	color: #FFFFFF;
	background-color: #0461CE;
}
/* 通用按钮-小 —— END */