/* legend-wrap */ 
.legend-wrap{ margin:50px 0 0 0; border-bottom:1px solid #000; overflow:hidden; }
.legend-wrap .table-tit{ margin:0; padding:0; float:left; border-bottom:0; }
.legend-wrap .legend{ padding:0 0 20px 0; float:right; }
.legend-wrap .legend li{ line-height:40px; padding:0 0 0 20px; display:inline-block; color:#000; font-size:15px; }
.legend-wrap .legend li:first-child{ padding:0; }
.legend-wrap .legend li:before{ content: ""; width:14px; margin:0 10px 0 0; display:inline-block; vertical-align:middle; }
.legend-wrap .legend li.gray:before{ height:14px; background:#ccc; }
.legend-wrap .legend li.blue:before{ height:4px; background:#000; }
.scroll_box{ padding:100px 0 40px 0; position:relative; }
.scroll_box.on{ overflow-x:scroll; }

/* graph_wrap */ 
.graph_wrap{ width:840px; position:relative; text-align:center; }
.graph_wrap .graph_area{ height:230px; /* height:160px; margin:155px 0 0 0;*/ margin:55px 0 0 0; position:relative; }
.graph_wrap .graph_area:after{ content:""; width:100%; position:absolute; bottom:0px; left:0; border-bottom:1px #323232 solid; }
.graph_wrap .graph_area .score_bg{ height:100%; padding:0 0 0 60px; position:relative; }
.graph_wrap .graph_area .score_bg li{ height:20%; position:relative; border-top:1px #d2d2d2 solid; box-sizing:border-box; }
.graph_wrap .graph_area .score_bg li .s_num{ position:absolute; top:-13px; left:-60px; color:#000; font-size:15px; }
.graph_wrap .graph_area .score_bar{ width:100%; height:100%; position:absolute; left:40px; bottom:0; text-align:left; }
.graph_wrap .graph_area .score_bar > li{ width:70px; height:100%; display:inline-block; position:relative; text-align:center; font-size:14px; }
/* .graph_wrap .graph_area .score_bar li div{ width:70px; position:absolute; left:0; bottom:-35px; color:#000; } */
.graph_wrap .graph_area .score_bar li span.month{ width:70px; position:absolute; left:0; bottom:-35px; color:#000; font-weight:400; font-size:15px; }
.graph_wrap .graph_area .score_bar>li.on span.month{ color:#f00; } 
.graph_wrap .graph_area .score_bar li div.blue_bar{ width:15px; height:100%; margin:0 0 0 -7.5px; position:absolute; left:50%; bottom:0; background:#ccc; /* #ccc */ cursor:pointer; }
.graph_wrap .graph_area .score_bar li .g_bar{ width:15px; height:5px; margin:0 0 -2.5px -7.5px; position:absolute; left:50%; bottom:100%; background:#000; z-index:3; /* background:url('//img.sdij.com/common/b_bar.png') no-repeat center center; */ }
.graph_wrap .graph_area .score_bar li .blue_bar .data{ width:60px; height:auto; margin:0 0 15px -30px; padding:10px; position: absolute; top:-138px; left:50%; background:#fff; border:1px #d2d2d2 solid; box-sizing:border-box; }
.graph_wrap .graph_area .score_bar li .blue_bar .data.on{ display:block; }
.graph_wrap .graph_area .score_bar li .blue_bar .data:after{ content: ""; width:20px; height:14px; margin:0 0 0 -10px; position:absolute; left:50%; bottom:-12px; background:url('//img.sdij.com/common/bottom_arrow.png') no-repeat center center; }
/* 
.graph_wrap .graph_area .score_bar li .g_bar .data > span{ width:38px; margin:0 0 5px 0; padding:0 0 5px 0; display:inline-block; border-bottom:1px #d2d2d2 solid; font-weight:600; font-size:12px; }
.graph_wrap .graph_area .score_bar li.on .g_bar .data>span{ color:#f00; } 
*/
.graph_wrap .graph_area .score_bar li .blue_bar .data ul li{ line-height:17px; text-align:center; font-size:12px; }
.graph_wrap .graph_area .score_bar li .blue_bar .data ul li:first-child{ margin:0 0 5px 0; font-weight:600; }
.graph_wrap .graph_area .score_bar li .blue_bar .data ul li span{ display:block; }

/* user-score */
.score-balance{ z-index:10; }

/* table */
.fixed-table table{ overflow:auto; border:1px solid red backgroud:#fafafa; border-bottom:0; }
.fixed-table table thead{ position:sticky; position:-webkit-sticky; top:0; }
.fixed-table table tr th{ border-bottom:0; }

/* common */
.common-table{ max-width:660px; margin:auto; }
.common-table td{ border-left:1px solid #ededed; }
.common-table td.border{ padding:0; }
.common-table td.border{ position:relative; }
.common-table td.border span{ width:1px; height:155px; position:absolute; top:-20px; background:#ededed; transform:rotate(44deg);}