/*变量*/
:root { 
	--bg: #f5f5f5;
	--sm_bg: #ddd;
	--main: #272a3b;
	--sm_main: #5b5d69;
	
	--red: #f56c6c;/*红*/
	--green: #30c448;/*绿*/
	--blue: #1876fe;/*蓝*/
}
/*公共样式*/
*{box-sizing: border-box;margin: 0;padding: 0;line-height: inherit;text-size-adjust: none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
body{font-size: 0.16rem;color: var(--main);line-height: 1.5;}
button, input, optgroup, option, select, textarea{font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;outline: 0;}
li{list-style: none;}
table{border-collapse: collapse;}
img{width: 100%;}
a{color: inherit;text-decoration: none;}
a:hover{color: inherit;text-decoration: none;}

/*通用功能类*/
.hidden{display: none !important;}
.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space: nowrap;display: inline-block;width: auto;}
.button{display: inline-block;border: 0.01rem solid var(--main);border-radius: 0.3em;text-align: center;padding: 0 0.5em;line-height: 1.6em;cursor: pointer;white-space: nowrap;transition: all 0.2s;user-select: none;}
.button.on{background: var(--sm_main);color: var(--bg);}
.button:active{transform: scale(0.96);box-shadow: 0 0 0.1rem 0.01rem rgba(0,0,0,.24);}

.flex{display: flex;align-items: center;}
.flex>*{flex-grow: 0;flex-shrink: 0;}
.flex>*.grow{flex-grow: 1;}
.flex>*.shrink{flex-shrink: 1;}
.flex>*.max{flex-shrink: 1;flex-basis: 100%;}
.img>img{width: 100%;height: 100%;object-fit: contain;}

#app{width: 7.5rem;margin: auto;}


/* 快捷菜单 */
.quick {
	position: fixed;
	right: .3rem;
	z-index: 9999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-box;
	display: flex;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.quick .quick-main {
	width: .86rem;
	height: .86rem;
	border-radius: 50%;
	cursor: pointer;
}

.quick .quick-main img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	pointer-events: none;
	-webkit-touch-callout: none;
}

.quick .menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-box;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	align-items: center;
	height: .86rem;
	padding-right: .16rem;
	padding-left: .16rem;
	border-radius: .43rem;
	margin-right: .3rem;
	background-color: #2C8EFF;
	overflow: hidden;
	opacity: 1;
	-webkit-animation: bounceInRight .5s cubic-bezier(.215, .61, .355, 1);
	-moz-animation: bounceInRight .5s cubic-bezier(.215, .61, .355, 1);
	-o-animation: bounceInRight .5s cubic-bezier(.215, .61, .355, 1);
	animation: bounceInRight .5s cubic-bezier(.215, .61, .355, 1);
}

.quick .menu a {
	width: .52rem;
	height: .52rem;
}

.quick .menu a~a {
	margin-left: .5rem;
}

.quick .menu img {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-touch-callout: none;
}

@-webkit-keyframes bounceInRight {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
		transform: translate3d(3000px, 0, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@-moz-keyframes bounceInRight {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-moz-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
		-moz-transform: translate3d(3000px, 0, 0);
		transform: translate3d(3000px, 0, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		-moz-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		-moz-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		-moz-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@-o-keyframes bounceInRight {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-o-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
		transform: translate3d(3000px, 0, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@keyframes bounceInRight {

	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-moz-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-o-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
		-moz-transform: translate3d(3000px, 0, 0);
		transform: translate3d(3000px, 0, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		-moz-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		-moz-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		-moz-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		transform: translateZ(0);
	}
}