body.black,
html.black {
	background: #0a0a0c;
}

@font-face {
	font-family: JLL;
	src: url('JLL.ttf');
}

table {
	width: auto;
	text-align-last: left;
}

td {
	border: none;
	padding: 0;
	padding-left: 8px;
	padding-right: 8px;
	position: relative;
}

td i {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -0.08rem;
	display: inline-block;
	width: 0.16rem;
	height: 0.16rem;
	border-radius: 0.16rem;
}

.pe,
.pb {
	padding: 0.6rem 0.76rem 1.2rem 0.48rem;
}

.history_pe {
	padding: 0.6rem 0.76rem 0.76rem 0.48rem;
}

.history_pb {
	padding: 0.6rem 0.76rem 0.76rem 0.48rem;
}

.a_stock {
	padding: 0.6rem 0.76rem 1rem 0.48rem;
}

.line {
	height: 0.4rem;
	background: #f4f4f4;
}

#pb_ul,
#pe_ul {
	height: 1.44rem;
	
}

.dashi #pb_ul,
.dashi #pe_ul {
	font-family: JLL;
}

#history_pb_ul,
#history_pe_ul {
	height: 5.8rem;
}

.black .line {
	background: #20252c;
}

.title {
	font-size: 0.72rem;
	color: #333;
	margin-bottom: 0.5rem;
	font-family: PingFangSC-Medium;
}

.black .title {
	color: #eee;
}

.title img {
	width: 0.6rem;
	height: 0.6rem;
	margin-top: -0.2rem;
}

.val {
	border: 1px solid #e6e3e3;
	border-radius: 0.08rem;
	padding: 0.38rem 0.4rem 0.38rem 0.4rem;
	margin-bottom: 0.28rem;
	font-size: 0.52rem;
	color: #666;
	font-family: PingFangSC-Light;
}

.dashi .val {
	font-family: JLL;
}

.black .val {
	color: #797a7b;
	border: 1px solid #20252c;
}

.val ul {
	margin-bottom: 0.2rem;
}

.val ul:last-child {
	margin-bottom: 0;
}

.val li {
	display: -webkit-box;
}

.val li .p1 {
	width: 66%;
}

.tag {
	margin-bottom: 3rem;
}

.tag span {
	margin-right: 0.5rem;
	font-size: 0.4rem;
	color: #999;
}

.tag i {
	display: inline-block;
	width: 0.24rem;
	height: 0.24rem;
	border-radius: 50%;
	margin-right: 0.1rem;
}

.tag .green {
	background: #07bb28;
}

.tag .black {
	background: #888888;
}

.tag .red {
	background: #fa5858;
}

.chart_cont {
	position: relative;
	margin-left: 0.54rem;
}

.dashi .chart_cont {
	font-family: JLL;
}

.middle-line {
	position: absolute;
	width: 100%;
	height: 50%;
	border-bottom: 1px dashed #e8e8e8;
	position: absolute;
	top: 0;
	left: 0;
}

.black .middle-line {
	border-bottom: 1px dashed #20252c;
}

.middle,
.max,
.min {
	display: block;
	width: 1rem;
	color: #888888;
	font-size: 0.32rem;
	position: absolute;
	left: -1rem;
	text-align: right;
}

.middle {
	top: 40%;
}

.max {
	top: -0.6rem;
}

.min {
	bottom: -0.1rem;
}

.deficit {
	display: none;
	width: 1rem;
	color: #888888;
	font-size: 0.32rem;
	position: absolute;
	right: -0.5rem;
	bottom: -0.1rem;
	text-align: right;
}

.first-date {
	position: absolute;
	left: 0;
	font-size: 0.32rem;
	color: #888;
}

.last-date {
	position: absolute;
	right: 0;
	font-size: 0.32rem;
	color: #888;
}

#pe_canvas {
	height: 5.6rem;
	width: 100%;
}

#pb_canvas {
	height: 5.6rem;
}

#history_pe_canvas,
#history_pb_canvas {
	height: 5.6rem;
}

.a_type {
	margin-top: 0.6rem;
	width: 10.8rem;
	height: 1.2rem;
	line-height: 1.2rem;
	display: -webkit-box;
	border: 1px solid #e1e0e0;
	border-radius: 4rem;
	margin-left: auto;
	margin-right: auto;
	color: #888888;
	font-size: 0.48rem;
	font-family: PingFangSC-Regular;
	margin-bottom: 1.2rem;
}

.black .a_type {
	border: 1px solid #20252c;
}

.a_type li {
	width: 3.6rem;
	text-align: center;
	border-right: 1px solid #e1e0e0;
}

.black .a_type li {
	border-right: 1px solid #20252c;
}

.a_type li.on {
	background: #e60000;
	color: #fff;
}

.a_type li:last-child {
	border-right: none;
	border-top-right-radius: 4rem;
	border-bottom-right-radius: 4rem;
}

.a_type li:first-child {
	border-top-left-radius: 4rem;
	border-bottom-left-radius: 4rem;
}

.distribute {
	display: -webkit-box;
	/* height: 4.56rem; */
}

.pie {
	width: 40%;
}

.pie_cont1 {
	height: 4.56rem;
	width: 4.56rem;
	position: relative;
}
.tooltip_box {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
	z-index: 1;
}
#current_pe {
	/* width: 3.16rem; */
	height: 0.72rem;
	line-height: 0.72rem;
	position: absolute;
	color: #666;
	font-size: 0.4rem;
	background-color: #fff;
	padding: 0 0.16rem;
	font-family: PingFangSC-Regular;
	border: 1px solid #eee;
	border-radius: 0.1rem;
	z-index: 1;
	transform: translateX(-50%);
}

.dashi #current_pe {
	font-family: JLL;
}
#current_pe p {
	white-space: nowrap;
}
#point_icon {
	position: absolute;
	width: 0.4rem;
	height: 0.28rem;
	/* left: 50%; */
	/* top: -14px; */
	z-index: 1;
}
#pie_canvas {
	height: 4.56rem;
	width: 4.56rem;
}

.pie_cont {
	width: 58.5%;
}

.dashi .pie_cont {
	font-family: JLL;
}

.pie_cont li {
	position: relative;
	display: -webkit-box;
	font-size: 0.56rem;
	line-height: 0.8rem;
	margin-bottom: 0.4rem;
	font-family: PingFangSC-Regular;
	color: #333;
}

.dashi .pie_cont li {
	font-family: JLL;
}

.black .pie_cont li {
	color: #eee;
}

.pie_cont li p:first-child {
	width: 40%;
	color: #999;
}

.pie_cont li img {
	position: absolute;
	width: 0.64rem;
	height: 0.64rem;
	right: -0.3rem;
	top: 0.1rem;
}
.pie_cont i {
	display: inline-block;
	width: 0.28rem;
	height: 0.28rem;
	border-radius: 50%;
	margin-right: 0.3rem;
	margin-top: -0.1rem;
}

.pie_cont .red1 {
	background: #f5212d;
}

.pie_cont .red2 {
	background: #ff4d4f;
}

.pie_cont .red3 {
	background: #ff7875;
}

.pie_cont .red4 {
	background: #ffa39e;
}

.pie_cont .green1 {
	background: #07bb28;
}

.span1 {
	margin-right: 0.2rem;
}

#popup {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 99999999;
}

.pop_box {
	margin: 6.56rem auto 0 auto;
	width: 75%;
	background: #fff;
	border-radius: 0.4rem;
	padding: 0.8rem 1rem 1.4rem 1rem;
	color: #1d1d1d;
}

.pop_box .title {
	text-align: center;
	font-size: 0.76rem;
	color: #333;
}

.pop_box .content {
	font-size: 0.6rem;
	color: #333;
}

.chart {
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
}

.black .chart {
	border-top: 1px solid #20252c;
	border-bottom: 1px solid #20252c;
}

.selection {
	margin-top: 1rem;
	font-size: 0.48rem;
	color: #666;
}

.selection span {
	margin-right: 2rem;
}

.selection i {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	background: url(https://static-public.jesselivermore.com/h5/PERatio/Shape@2x.png)
		center center no-repeat;
	background-size: 0.6rem 0.6rem;
	margin-right: 0.16rem;
	vertical-align: middle;
}

.selection span.first_i.on i {
	background: url(https://static-public.jesselivermore.com/h5/PERatio/selected_yellow@2x.png)
		center center no-repeat;
	background-size: 0.6rem 0.6rem;
}

.selection span.last_i.on i {
	background: url(https://static-public.jesselivermore.com/h5/PERatio/selected_purple@2x.png)
		center center no-repeat;
	background-size: 0.6rem 0.6rem;
}

#myCanvas, #myCanvas1, #myCanvas2, #myCanvas3 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	
}