#graph ul,#graph li{list-style:none}#graph .blind{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}#graph .vertical_chart_box{position:relative}#graph .vertical_chart_box .chart_box{position:relative;margin-bottom:45px;padding-left:20px;box-sizing:border-box;max-width:1000px;width:90%;height:400px;margin:60px auto 120px}#graph .vertical_chart_box .axis_y{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;flex-direction:column-reverse;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;margin:0;padding:0;width:20px;height:100%;font-size:12px;color:#4a4a4a}#graph .vertical_chart_box .axis_y li{padding:0 15px 3px 0}#graph .vertical_chart_box .axis_y:before{content:'';position:absolute;top:5px;bottom:0;right:0;width:1px;background:#d3d3d3}#graph .vertical_chart_box .axis_x{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:center;position:relative;padding:0;box-sizing:border-box;height:100%;border-bottom:1px solid #d3d3d3}#graph .vertical_chart_box .axis_x .item{flex:1;position:relative}#graph .vertical_chart_box .axis_x .item .text_box{width:100%;position:absolute;bottom:-55px;left:50%;text-align:center;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}#graph .vertical_chart_box .axis_x .item .text_box .day{display:block;font-size:16px;line-height:19px;color:#4a4a4a}#graph .vertical_chart_box .axis_x .item .text_box .day.sat{color:#3475ed}#graph .vertical_chart_box .axis_x .item .text_box .day.sun{color:#eb474a}#graph .vertical_chart_box .axis_x .item .text_box .time{display:block;margin-top:3px;font-size:12px;color:#999;text-indent:-99999px}#graph .vertical_chart_box .axis_x .graph{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;flex-direction:column-reverse;position:relative;margin:0 auto;padding:0;width:50%;height:100%;background:#f7f7f7;border-radius:3px 3px 0 0;overflow:hidden}#graph .vertical_chart_box .axis_x .graph .time{display:block;position:relative;margin-bottom:-4px;padding-top:4px;box-sizing:content-box;width:100%;border-radius:8px 8px 0 0;color:#fff;font-size:16px;font-weight:500}#graph .vertical_chart_box .axis_x .graph .time.data1{background:#6b8ea4;z-index:3;height:0;animation-name:graph1;animation-duration:2s;animation-fill-mode:both}#graph .vertical_chart_box .axis_x .graph .time.data2{background:#182132;z-index:2;height:0;animation-name:graph2;animation-duration:2s;animation-fill-mode:both}#graph .vertical_chart_box .axis_x .graph .time.data3{background:#3f807a;z-index:1;height:0;animation-name:graph3;animation-duration:2s;animation-fill-mode:both}#graph .vertical_chart_box .axis_x .graph .time.data4{background:#233735;z-index:1;height:0;animation-name:graph4;animation-duration:2s;animation-fill-mode:both}#graph .vertical_chart_box .axis_x button.graph{border:0}@keyframes graph1{0{height:0}100%{height:70%}}@keyframes graph2{0{height:0}100%{height:45%}}@keyframes graph3{0{height:0}100%{height:55%}}@keyframes graph4{0{height:30%}100%{height:18%}}