/* 防止闪烁start */
[v-cloak] {display: none;}
/* 防止闪烁end */

html,body{
	background: #ededed;
}

.flex{display:flex;}
.flex1{flex:1;}
.center{text-align:center;}
.left{text-align:left !important;}
.right{text-align:right !important;}

ul{padding:0;margin:0;}
li{list-style:none;}

.pl22{padding-left:22px;}
.pl25{padding-left:25px;}

.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr25{margin-right:25px;}
.mr30{margin-right:30px;}
.mr35{margin-right:35px;}
.mr40{margin-right:40px;}
.mr50{margin-right:50px;}
.mr60{margin-right:60px;}
.mr70{margin-right:70px;}
.mr80{margin-right:80px;}

.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}

.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}
.ml60{margin-left:60px;}
.ml70{margin-left:70px;}
.ml80{margin-left:80px;}

.c999{color: #999;}
.red{color: red;}
.blue{color: #2196f3;}

/*快捷购物车start*/
.fsGoodsBtn{
	position: fixed;
    top: 40px;
    right: 20px;
    z-index:1;
	padding: 4px 8px;
	padding-left:20px;
	cursor:pointer;
	transition-duration: 300ms;
}
.fsGoodsBtn i{
	font-size:35px;
	color:#ffffff;
}
.fsGoodsBtn:hover{
	transform: scale(1.1);
}
/*快捷购物车end*/

.tip{
	margin-top:50px;
	color:#000;
	font-size:30px;
	text-align:center;
}
.ms{
	margin-top:10px;
	color:#999;
	font-size:18px;
	text-align:center;
}
.searchCon{
	margin-top:10px;
	text-align:center;
}

.ppLogoUlCon{
	text-align:center;
	margin-top:50px;
}
.ppLogoUl{
	max-width: 1045px;
    margin: auto;
    overflow: hidden;
    text-align: left;
    display: inline-block;
}
.ppLogoUl li{
	transition: 0.6s;
	position:relative;
	display: inline-block;
	vertical-align: top;
	/* float: left; */
	width: 100px;
	height: 60px;
	cursor: pointer;
	margin: 8px;
	background: #fff;
	border-radius: 8px;
	padding: 5px;
	box-sizing: border-box;
	overflow: hidden;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.ppLogoUl li img{
	width:100%;
	height:100%;
	object-fit: contain;
	opacity: 0.5;
}
.ppLogoUl li:hover{
	transform:scale(1.2);
}
.ppLogoUl li:hover img{
	opacity: 1;
}
.ppName{
	white-space: nowrap; /* 设置为单行 */
	max-width: 200px; /* 设置最大宽度 */
	overflow: hidden; /* 隐藏超出部分的内容 */
	text-overflow: ellipsis; /* 显示省略号 */
	min-height:19px;
	font-size: 14px;
	margin-top: 5px;
	font-weight: bold;
}
.ppNameBg{
	transition: 0.6s;
	white-space: nowrap; /* 设置为单行 */
	max-width: 200px; /* 设置最大宽度 */
	overflow: hidden; /* 隐藏超出部分的内容 */
	text-overflow: ellipsis; /* 显示省略号 */
	min-height:19px;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	background: rgba(0,0,0,0.3);
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	
	background-color: rgba(255, 255, 255, 0.5);
	 -webkit-backdrop-filter:blur(3px);/* ios兼容 */
	backdrop-filter: blur(3px);
}
.ppLogoUl li:hover .ppNameBg{
	opacity: 0;
}

/*滚动条样式start*/
body::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}
body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    background-color: #999;
    background-clip: padding-box;
    min-height: 28px;
    border-radius: 10px;
}
body::-webkit-scrollbar-track-piece {/*滚动条里面轨道*/
    background-color: #f9f9f9;
}
/*滚动条样式end*/

/*悬浮按钮(扩散)特效start*/
.animated-circles{
	position: fixed;
    right: 22px;
    top: 42px;
    width: 50px;
    height: 50px;
}
.animated-circles .circle{
	/* background: rgba(249,61,102,0.25); */
	background: rgba(255,156,5,0.25);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
}
.animated{
	-webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated-circles.animated .c-1{
	animation:2000ms scaleToggleOne cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.animated-circles.animated .c-2{
	animation:2500ms scaleToggleTwo cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.animated-circles.animated .c-3{
	animation:3000ms scaleToggleThree cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes scaleToggleOne {
	from {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
	50% {
		transform: scale(1.6);
		-webkit-transform: scale(1.6)
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
}

@keyframes scaleToggleTwo {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
	20% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
	60% {
		transform: scale(1.6);
		-webkit-transform: scale(1.6)
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
}

@keyframes scaleToggleThree {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
	33% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
	66% {
		transform: scale(1.6);
		-webkit-transform: scale(1.6)
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
}
/*悬浮按钮(扩散)特效end*/