/*
* @Author: Sun Jijing
* @Date:   2024-01-24 09:27:57
* @Last Modified by: Sun Jijing
* @Last Modified time: 2024-01-24 14:42:02
*/

.card_box { background: url(con_bg.jpg) no-repeat center top; }
.banner_tit { text-align: center; padding-top: 115px; padding-bottom: 80px; }
.xxgk_hd { text-align: center; margin-bottom: 50px; }
.xxgk_hd span { display: inline-block; font-size: 24px; padding: 10px 20px; background: #f0871d; width: 200px; margin: 0 15px; font-weight: bold; color: #fff; box-shadow: 5px 5px 0 #bb3c20; }
.xxgk_hd span.on { background: #fff; color: #bb3c20; }
.xxgk_item { overflow: hidden; }
.card_list { width: 105%; }
.card_list li { width: 532px; float: left; background: url(card_bg.png) no-repeat; padding: 25px; margin-right: 32px; margin-bottom: 35px; background-size: 100% 100%; overflow: hidden; }
.card_list li .qrcode { width: 130px; height: 130px; float: left; padding: 15px; background: #fff; border-radius: 10px; overflow: hidden; }
.card_list li .qrcode img { width: 100%; }
.card_list li .qrcode canvas { display: none; }
.card_list li .txt { width: 350px; float: right; }
.card_list li .tit .s { font-size: 16px; color: #333; }
.card_list li .tit .b { font-size: 24px; color: #333; font-weight: bold; }
.card_list li .info p { line-height: 24px; margin-top: 10px; font-size: 16px; color: #323333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card_list li .info span { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: #b21d2c; float: left; margin-right: 18px; }
.card_list li .info span img { width: 100%; }

@media screen and (max-width: 1200px) {
	.xxgk_hd { display: flex; justify-content: space-evenly; }
	.card_list { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
	.card_list li { width: 48%; margin-right: 0; padding: 20px; }
	.card_list li a { display: flex; justify-content: space-between; align-items: center; }
	.card_list li .qrcode { flex-shrink: 0; margin-right: 20px; }
	.card_list li .txt { width: 90%; }
}
@media screen and (max-width: 1024px) {
	.card_list li a { flex-direction: column; }
	.card_list li .qrcode { margin-right: 0; }
	.card_list li .txt { width: 100%; text-align: center; margin-top: 20px; }
}
@media screen and (max-width: 768px) {
	.card_box { background-size: 100%; }
	.banner_tit { padding: 40px 0; }
	.xxgk_hd { margin-bottom: 20px; }
	.xxgk_hd span { padding: 5px; margin: 10px; font-size: 18px; }
	.card_list li { width: 100%; }
}