:root{
	--mainColor: #4a9e9d;
}

[v-cloak] {
	display: none !important;
}


*{
	box-sizing: border-box;
}
body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	height: 100%;
}
html {
	scroll-behavior: smooth;  /* 平滑滚动 */
}
a{
	text-decoration: none!important;
	color: inherit;
}
ol, ul{
	margin: 0;
}
.clear{
	clear: both;
}
.none{
	display: none;
}
.img{
	width: 100%;
	height: 100%;
	border-style: none;
}
.ti{
	text-indent: 2em;
}
.mt{
	margin-top: 1rem;
}
.mb{
	margin-bottom: 1rem;
}
.pt{
	padding-top: 1rem;
}
.pb{
	padding-bottom: 1rem;
}
.fz{
	font-size: 1.8rem;
}
.text-danger{
	color: #F56C6C!important;
}
.text-success{
	color: #67C23A!important;
}
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-vertical{
	vertical-align: center;
}
.text-bold{
	font-weight: bold;
}
.text-theme-color{
	color: var(--mainColor);
}
.color-text{
	background-image: radial-gradient(circle, #964397, #27999f);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.color-text-1{
	background-image: radial-gradient(circle, #3a6db5, #9a68b5)!important;
}
.color-text-2{
	background-image: radial-gradient(circle, #2c3e50, #8e44ad);!important;
}
.color-text-3{
	background-image: radial-gradient(circle, #2a6b46, #4a9e9d);!important;
}
.color-text-4{
	background-image: linear-gradient(to right, #fd47ff, #1cc9ff);!important;
}
.color-text-5{
	background-image: linear-gradient(to right, #964397, #27999f);!important;
}

.color-ul {
	list-style-type: none;
	padding-left: 0;  /* 移除左边的默认缩进 */
}
.color-ul li {
	position: relative;
	padding-left: 25px;  /* 为文本留出空间 */
}
.color-ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;  /* 圆点的大小 */
	height: 10px;
	border-radius: 50%;  /* 使其变成圆形 */
}
.color-ul li::before{
	background-image: linear-gradient(to right, #3a6db5, #9a68b5);!important;
}
.color-ul-1 li::before{
	background-image: linear-gradient(to right, #2a6b46, #4a9e9d);!important;
}




.theme-input .el-input-group__prepend{
	background: var(--mainColor);
	border-color: var(--mainColor);
	color: #FFFFFF;
}
.theme-btn{
	background: var(--mainColor)!important;
	color: #FFFFFF!important;
	border-color: var(--mainColor)!important;
}
.theme-btn:hover{
	background: #5eabaa!important;
}
.theme-plain-btn{
	color: var(--mainColor)!important;
	background: #f5f5f5!important;
	border-color: var(--mainColor)!important;
}
.theme-plain-btn:hover{
	background: var(--mainColor)!important;
	color: #FFFFFF!important;
}





.page{
	height: 100%;
}
.main-container{
	width: 100%;
	min-height: 100%;
	background: #f2f2f2;
}
.header{
	height: 75px!important;
	background: #FFFFFF;
	box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%)
}
.content{

}
.footer{
	height: 60px!important;
	box-shadow: 35px 0 0 0 rgb(154 161 171 / 15%);
	background: #FFFFFF;
}


.header-inner{
	height: 75px!important;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.header-inner .logo-wrapper{
	float: none;
	outline: 0!important;
}
.header-inner .logo-wrapper .logo-img{
	height: 50px;
	border-style: none;
	vertical-align: middle;
}
.header-inner .logo-wrapper .logo-title{
	font-size: 1.6rem;
	font-weight: 700;
	display: inline-block;
	color: #000;
	margin-left: 10px;
	vertical-align: middle;
	font-family: "SimHei";
}

.content-inner{
	display: flex;
	flex-direction: column;
	justify-content: start;
	margin-top: 20px!important;
	margin-bottom: 20px!important;
}

.footer-inner{
	height: 60px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #a8a8a8;
}

.container{
	width: 100%;
	margin: 0 auto;
}






.btn-wrapper{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.notice_btn_box{
	margin-right: 10px;
}
.notice-item{
	font-size: 18px;
	margin-bottom: 8px;
}


.card-list{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;

	margin-top: 20px;
	margin-bottom: 20px;
}
.card{
	width: 228px;
	background: #FFFFFF;
	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 12%);
	border-radius: 5px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s;
	position: relative;
}
.card:hover{
	transform: translate(0, -8px);
	box-shadow: rgba(0,0,0,0.157) 0 8px 12px 0;
}
.card .card-inner{
	width: 180px;
	margin: 0 auto;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
}
.card .card-flex{
	display: flex;
	flex-direction: column;
}
.card .card-img{
	width: 170px;
	height: 170px;
	margin: 0 auto;
}
.card .card-title{
	min-height: 70px;
	font-size: 16px;
	display: -webkit-box;
	-webkit-box-orient: vertical; /* 设置盒子的方向为垂直 */
	-webkit-line-clamp: 3; /* 限制显示两行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 超出部分显示省略号 */
	line-height: 1.5; /* 控制行高，根据需求调整 */
	max-height: 5em; /* 设置最大高度，等于行高 * 2（即两行的高度） */
}
.card .card-price{
	color: #d0021b;
	text-align: center;
	padding: 10px 0;
}
.card .card-price span{
	font-size: 24px;
	font-weight: 600;
}
.card .card-label{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 12px;
}
.card .card-label > div{
	border: 1px solid;
	border-radius: 2px;
	padding: 1px 3px;
}
.card .card-label > div:nth-child(1){
	border-color: #f3ae0b;
	color: #f3ae0b;
}
.card .card-label > div:nth-child(2){
	border-color: #2D64B3;
	color: #2D64B3;
}
.card .card-label > div:nth-child(3){
	border-color: #12ad8f;
	color: #12ad8f;
}
.card .card-label > div:nth-child(4){
	border-color: #f35fc0;
	color: #f35fc0;
}

.card .card-ribbon{
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: 1;
	overflow: hidden;
	width: 75px;
	height: 75px;
	text-align: right
}
.card .card-ribbon span{
	font-size: 13px;
	text-align: center;
	line-height: 20px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 100px;
	display: block;
	-webkit-box-shadow: 0 0 8px 0 rgba(71, 77, 86, .08), 0 1px 0 0 rgba(71, 77, 86, .03);
	box-shadow: 0 0 8px 0 rgba(71, 77, 86, .08), 0 1px 0 0 rgba(71, 77, 86, .03);
	position: absolute;
	top: 19px;
	left: -21px;
	font-weight: 600;
}
.card .card-ribbon span:before{
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	z-index: -1;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
}
.card .card-ribbon span:after{
	content: "";
	position: absolute;
	right: 0;
	top: 100%;
	z-index: -1;
	border-left: 3px solid transparent;
	border-bottom: 3px solid transparent;
}

.ribbon-danger span{
	background: #fa6767;
	color: #FFFFFF;
}
.ribbon-danger span:before{
	border-left: 3px solid #f94e4e;
	border-top: 3px solid #f94e4e;
}
.ribbon-danger span:after{
	border-right: 3px solid #f94e4e;
	border-top: 3px solid #f94e4e;
}



/* 购买页面 */
.grid-container{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}
.purchase-detail-wrapper{
	grid-column: span 4 / span 4;
}
.bill-detail-wrapper{
	grid-column: span 2 / span 2;
}
.purchase-detail{
	padding: 2rem 2rem;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: start;
}
.bill-detail{
	-webkit-position: sticky;
	position: sticky;
	top: 6px;
	padding: 2rem 2rem;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: start;

}
.detail-title{
	font-size: 20px;
	font-weight: bold;
}
.detail-content{
	padding: 1rem 0;
	font-size: 16px;
	line-height: 1.8rem;

}
.bill-detail > div{
	margin-bottom: 1.2rem;
}
.bill-title{
	font-size: 1.5rem;
	font-weight: 400;
	color: #212529;
}
.bill-label-box{
	display: flex;
	flex-direction: row;
	justify-content: start;
	font-size: 12px;
}
.bill-label-box > div{
	border: 1px solid;
	border-radius: 2px;
	padding: 1px 3px;
	margin-right: 0.6rem;
}
.bill-label-box  > div:nth-child(1){
	border-color: #12ad8f;
	color: #12ad8f;
}
.bill-label-box  > div:nth-child(2){
	border-color: #2D64B3;
	color: #2D64B3;
}
.bill-price{
	color: #ea5455;
	font-weight: 400;
	font-size: 1.5rem;
}
.bill-email{
	color: #607d8b;
}
.bill-email .el-input__inner:focus{
	border-color: var(--mainColor);
}
.bill-purchase-num .el-input-number__decrease, .el-input-number__increase{
	background: var(--mainColor);
	color: #FFFFFF;
	border-radius: 0 0 0 0;
}
.bill-purchase-num .el-input .el-input__inner:focus{
	border-color: var(--mainColor);
}
.bill-purchase-num .el-input .el-input__inner:not(.is-disabled){
	border-color: var(--mainColor);
}
.bill-pay-way{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 200px));
	grid-gap: 12px;
}
.bill-pay-way-item{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	border: 1px solid #cdcdcd;
	border-radius: 3px;
	padding: 0.5rem 0.6rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: #303133;
	cursor: pointer;
}
.bill-pay-way-item > svg{
	margin-right: 0.6rem;
}
.bill-label{
	color: #535353;
}
.bill-pay-way-sel{
	border: 2.5px solid #01bfbd;
	color: #01bfbd;
	font-weight: bold;
	box-shadow: rgba(0,0,0,0.157) 0 6px 6px 0;
}
.bill-confirm-box{
	text-align: center;
	margin-top: 2rem;
}
.po-error-notice-box{
	display: flex;
	justify-content: center;
	align-items: center;
}
.read-guide-notice{
	margin-top: 1rem;
}
.read-guide-notice > span{
	display: block;
	line-height: 1.5rem;
}

.module-wrapper{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}
.module-wrapper-large{
	width: 85%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}
.module-title{
	font-size: 1.4rem;
	color: var(--mainColor);
}


/* 订单确认页面 */
.order-confirm-content-wrapper{
	display: flex;
	justify-content: center;
	background: #FFFFFF;
	border-radius: 5px;
	box-shadow: rgba(0,0,0,0.157) 0 6px 6px 0;
	margin-top: 1.5rem;
}
.order-confirm-content{
	display: flex;
	flex-direction: column;
	justify-content: start;
	width: 60%;
	padding: 30px 0;
}
.order-confirm-content-item{
	font-size: 1rem;
	margin-bottom: 0.9rem;
}
.order-confirm-content-item label{
	color: var(--mainColor);
	min-width: 5rem;
	display: inline-block;
}
.order-confirm-content-item span{
	color: #333333;
}
.tutorial_dialog .el-dialog__body{
	padding: 0!important;
}


/* 订单查收页面 */
.order-list-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.order-wrapper{
	margin-bottom: 1.5rem;
}
.order-number-box{
	display: inline-block;
	border: 1px solid #4A829E;
	color: #4A829E;
	border-radius: 5px;
	padding: 0.3rem 1rem;
	font-weight: 400;
	font-size: 1.2rem;
}
.order-number-box label{
	font-weight: bold;
}
.order-detail-box{
	background: #FFFFFF;
	border-radius: 5px;
	box-shadow: rgba(0,0,0,0.157) 0 6px 6px 0;
	margin-top: 1.5rem;
	min-height: 3rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 1rem 2rem;
}
.order-info-box{
	width: 38%;
}
.order-info-box .order-info-item{
	margin-bottom: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: start;
	line-height: 1.4rem;
}
.order-info-box .order-info-item .item-label{
	color: #4A829E;
	/*color: #4A9E82;*/
	font-weight: bold;
	min-width: 5rem;
	display: inline-block;
}
.order-receive-box{
	width: 60%;
}
.order-receive-box{

}
.order-receive-box > *{
	margin-bottom: 1rem;
}
.order-receive-box label{
	color: #4A829E;
	font-weight: bold;
	font-size: 1.2rem;
	display: inline-block;
}


/* 查询订单搜索页 */
.order-search-wrap{
	background: #FFFFFF;
	border-radius: 8px;
	box-shadow: rgba(0,0,0,0.157) 0 6px 6px 0;
	padding: 1rem 2rem 2rem 2rem;
}
.order-search-wrap .el-tabs__item{
	display: inline-block;
	font-weight: bold;
}
.order-search-wrap .el-tabs__item:hover{
	color: var(--mainColor)!important;
}
.order-search-wrap .el-tabs__item.is-active{
	color: var(--mainColor)!important;
}
.order-search-wrap .el-tabs__active-bar{
	background-color: var(--mainColor) !important;
}


/* 查询订单結果页 */
.order-undone-info-box{
	width: 100%;
}
.order-undone-info-box .order-info-item{
	margin-bottom: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: start;
	line-height: 1.4rem;
}
.order-undone-info-box .order-info-item .item-label{
	color: #4A829E;
	/*color: #4A9E82;*/
	font-weight: bold;
	min-width: 5rem;
	display: inline-block;
}




.bouncing-animate {
	animation: bounce 0.6s infinite ease-in-out;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}




.el-dialog__header{
	background: #466289;
	/*background: #416dac;*/
}
.el-dialog__title{
	color: #FFFFFF;
}
.el-dialog__headerbtn .el-dialog__close{
	color: #FFFFFF;
}


/* 滚动条样式 */
.el-textarea__inner::-webkit-scrollbar {
	width: 8px
}
.el-textarea__inner::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius   : 10px;
	background-color: var(--mainColor);
}
.el-textarea__inner::-webkit-scrollbar-track{
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	background   : #ededed;
	border-radius: 10px;
}


.myscrollbar::-webkit-scrollbar {
	width: 5px;
}
.myscrollbar::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius   : 10px;
	background-color: skyblue;
	background-image: -webkit-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 75%,
			transparent 75%,
			transparent
	);
}
.myscrollbar::-webkit-scrollbar-track{
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	background   : #ededed;
	border-radius: 10px;
}



.el-input__inner:not(.is-disabled) {
	border-color: var(--mainColor)!important;
}
.el-input-number__decrease:hover, .el-input-number__increase:hover{
	color: #fffa19;
}




@media (min-width: 992px) {
	.container{
		max-width: 1200px;
	}
	.read-guide-notice{
		display: none;
	}
}
@media screen and (min-width: 991px) and (max-width: 1367px) {
	.bill-pay-way {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 300px));
		grid-gap: 6px;
	}
}



/* 手机和平板（宽度小于等于 1024px） */
@media (max-width: 1024px) {
	.container{
		max-width: 1000px;
	}

	.el-header{
		padding: 0 10px;
	}
	.el-dialog{
		width: 100%!important;
	}

	.header-inner .logo-wrapper .logo-title{
		margin-left: 2px;
		font-size: 1.3rem;
	}

	.card-list{
		flex-direction: column;
	}
	.card-list .card{
		width: 95%;
	}
	.card-list .card .card-inner{
		width: 90%;
		flex-direction: row;
		justify-content: space-between;
	}
	.card-list .card .card-img{
		width: 78px;
		height: 80px;
		margin: 0;
	}
	.card-list .card .card-flex{
		width: 72%;
		justify-content: start;
	}
	.card-list .card .card-flex .card-title{
		min-height: 3rem;
		font-size: 1rem;
		display: -webkit-box;
		-webkit-box-orient: vertical; /* 设置盒子的方向为垂直 */
		-webkit-line-clamp: 2; /* 限制显示两行 */
		overflow: hidden; /* 超出部分隐藏 */
		text-overflow: ellipsis; /* 超出部分显示省略号 */
		line-height: 1.5; /* 控制行高，根据需求调整 */
		max-height: 5em; /* 设置最大高度，等于行高 * 2（即两行的高度） */
	}
	.card-list .card .card-flex .card-price{
		text-align: left;
		/*padding: 0 0 10px 5px;*/
	}
	.card-list .card .card-flex .card-price span{
		font-size: 18px;
		font-weight: bold;
	}
	.card-list .card .card-flex .card-label{
		display: none;
	}

	.grid-container{
		display: flex;
		flex-direction: column-reverse;
	}
	.grid-container .purchase-detail-wrapper{
		grid-column: span 6 / span 6;
	}
	.grid-container .bill-detail-wrapper{
		grid-column: span 6 / span 6;
		margin-bottom: 2rem;
	}
	.bill-detail-wrapper .el-input-number
	{
		width: 100%;
	}

	.module-wrapper{
		width: 95%;
	}
	.module-wrapper-large{
		width: 95%;
	}
	.order-confirm-content{
		width: 80%;
	}

	.order-number-box{
		font-size: 1rem;
	}
	.order-detail-box{
		flex-direction: column;
		padding: 1rem 1rem;
	}
	.order-detail-box .order-info-box{
		width: 100%;
	}
	.order-info-box .order-info-item{
		font-size: 1.2rem;
	}
	.order-info-box .order-info-item .item-label{
		min-width: 6rem;
	}
	.order-info-box .order-info-item > div:nth-child(2){
		line-height: 1.6em;
	}
	.order-detail-box .order-receive-box{
		width: 100%;
	}
}