/* 20230907 */
.mj_main * { box-sizing: border-box; }
#toggleBox { width: 100%; height:108px; border:1px solid #e7e7e7; border-radius: 10px; background-color:#f1f1f1; transition:height .5s ; overflow: hidden;  margin-bottom:37px; }
#toggleBox > div:first-child { display: flex; align-items: center; justify-content: space-between; height: 56px;}
#toggleBox > div:last-child { height: 52px; background-color: #fff; display: flex; align-items: center; padding:0 34px; word-break: keep-all;}
#toggleBox span { font-size:22px; font-weight: 500; color:#5a5d5a; position: relative; margin-left:21px; padding-left:38px; }
#toggleBox span:before { position: absolute; content: ''; display: block; width: 26px; height:28px; background:url(../img/ico_toggle_tit.png); left:0; top:50%; transform:translateY(-50%) }
#toggleBox button { background:url(../img/ico_toggle_arrow.png) center no-repeat; height:12px; width: 21px; margin-right:23px; transition: transform .5s; }
#toggleBox button.current { transform:rotate(180deg); }
#toggleBox.infoOn { height:56px; }

.cont_box .selecCont {height: 40px; display: flex; justify-content: flex-end; width: 100%;}
.cont_box .selecCont select { height:100%; width: 131px; color:#979696}
.cont_box .selecCont select + select { margin:0 7px; }
.cont_box .selecCont button { width: 75px; height:100%; background:#bc445b; color:#fff; }
.cont_box .tab_subList { height: 35px; display: flex; justify-content: space-between; align-items: flex-end;}
.cont_box .tab_subList ul { display: flex; height: 100%;}
.cont_box .tab_subList li { height: 100%; width: 75px; border:1px solid #666666; border-radius:3px;}
.cont_box .tab_subList li + li { margin-left:4px;}
.cont_box .tab_subList li.current { background: #bc445b;  border:none;}
.cont_box .tab_subList li.current a { color:#fff; }
.cont_box .tab_subList a { height: 100%; display:flex; align-items: center; justify-content: center; }


.graphTab_cont { margin-top:11px; position: relative;}
.graphTab_cont > div { display: none;}
.graphTab_cont > div.current { display: block; }
.graphTable th { word-break: keep-all; }

.chartData { overflow: hidden; border:1px solid #999; border-radius:10px; margin-top:31px;}
.chartData table { width: 100%;  }
.chartData table thead th { background:#dbe8f7; padding:13px 0; border-bottom: 1px solid #999; font-size: 17px;text-align: center;}
.chartData table thead th:not(:last-child) {  border-right:1px solid #999999  }
.chartData table tbody td { font-size:15px; padding:14px 0; color:#888888;}
.chartData table tbody tr:not(:last-child) { border-bottom:1px solid #999 ; }
.chartData table tbody td:not(:first-child) { text-align: center; border-left: 1px solid #999; }
.chartData table tbody td:first-child { position: relative; padding-left:44px;}
.chartData table tbody td:first-child::before { position: absolute; top:0; left:0; content:''; display: block; width: 14px; height: 14px; top:50%; left: 16px; transform: translateY(-50%);}
.chartData.chartData_1 tr:nth-child(1) td:first-child::before { background-color:#1b1464 ; }
.chartData.chartData_1 tr:nth-child(2) td:first-child::before { background-color:#5e35b1 ; }
.chartData.chartData_1 tr:nth-child(3) td:first-child::before { background-color:#00bcd4 ; }
.chartData.chartData_1 tr:nth-child(4) td:first-child::before { background-color:#9fa8da ; }
.chartData.chartData_1 tr:nth-child(5) td:first-child::before { background-color:#1565c0 ; }
.chartData.chartData_3 tr:nth-child(1) td:first-child::before { background:#5c6bc0 ; }
.chartData.chartData_3 tr:nth-child(2) td:first-child::before { background:#7e57c2 ; }
.chartData.chartData_3 tr:nth-child(3) td:first-child::before { background:#1fb5b3 ; } 


.curentDate { font-size:16px; }
.listView { margin-top:13px; }
.listView > ul { display: flex; justify-content: space-between; }

.graph_border th:first-child { border-left:1px solid #fac2cd !important; border-right:1px solid #fac2cd !important; border-top:1px solid #fac2cd  !important; }
.graph_border td:first-child { border-left:1px solid #fac2cd; border-right:1px solid #fac2cd !important;  }
.graph_border tr:last-child td:first-child { border-bottom:1px solid #fac2cd !important;}

.graph_border th:nth-child(2) { border-left:1px solid #96abe9 !important; border-right:1px solid #96abe9 !important; border-top:1px solid #96abe9  !important;  position: relative;}
.graph_border th:nth-child(2)::before { content:''; display: block; position: absolute; left:0; top:0; height:calc(100% + 1px); width:1px; background:#96abe9; }
.graph_border td:nth-child(2) { border-left:1px solid #96abe9; border-right:1px solid #96abe9 !important; position: relative }
.graph_border td:nth-child(2)::before { content:''; display: block; position: absolute; left:0; top:0; height:calc(100% + 1px); width:1px; background:#96abe9; }
.graph_border td:nth-child(3) { border-left:1px solid #96abe9;  }
.graph_border tr:last-child td:nth-child(2) { border-bottom:1px solid #96abe9 !important;}

.fiveYearClass { display: flex; }
.fiveYearClass .classAge { width: 80px; border-right: 1px solid #9d9d9d; }
.fiveYearClass .classAge li { text-align: center; height: 30px; line-height: 30px; font-size: 13px; color: #3f3f3f; font-weight: 300; }
.fiveYearClass .classChart { flex: 1; padding: 0 20px; }
.fiveYearClass .classChart li { position: relative; margin: 10px auto; height: 20px; background: #d46a7e; transition:all 0s}
.dataListView.current .fiveYearClass .classChart li { transition: width .5s;}
.fiveYearClass .classChart li:first-child { margin-top: 5px; }
.fiveYearClass .classChart li span { position: absolute; top: 50%; left: 50%; font-size: 14px; color: #fff; font-weight: 400; transform: translate(-50%, -50%); }
.fiveYearClass .classChart li.low span { left: calc(100% + 10px); color: #3f3f3f; transform: translateY(-50%); }


#dataListChart  { overflow-x: auto;  width: 100%;}
#dataListChart .chart_scroll { min-width:auto; }
#dataListChart > p { font-size:15px; margin-top:45px; word-break: keep-all; }
#dataListChart > p .red { color:#d43535 }
#dataListChart tspan { font-size:14px; fill: #d43535; margin-left:10px }
.highcharts-legend-item > span { top:3px !important; overflow:visible !important }
.highcharts-data-label tspan { display: none; }

.graphTab_cont .graphTable { overflow-x:auto ; }
.graphTab_cont .graphTable > table { min-width:1000px; }
.chartData_scroll .chartData { overflow-x: auto; }
.chartData_scroll .chartData > table {min-width:1000px; }
.graphTab_cont_4 .graphTable > table { min-width: 700px; }
.graphTab_cont .graphTable > table td.minus { color:rgb(255, 106, 106) }

.monthTable thead th { padding: 20px 0 }


.graphTab_cont_4 > div { display:block ; visibility: hidden; position: absolute;}
.graphTab_cont_4 > div.current { display:block; visibility: visible; position: relative;}
.graphTab_cont_4 > div:nth-of-type(2) { display: block;  top:0; }


@media (max-width:1200px) {
    #toggleBox { height: auto; }
    #toggleBox > div:last-child { padding:16px 34px; height: auto;}
    .cont_box .selecCont { margin-bottom:10px; }
    .cont_box .tab_subList ul { height: 35px; width: 50%; }
    .cont_box .tab_subList { flex-flow:row wrap; height: auto; }
    .listView > ul { flex-flow:row wrap; }
    .listView > ul li:first-child { width: 50% ;}

    .chartData table thead th { font-size:15px; }
    .chartData table tbody td { font-size:14px; }
    .fiveYearClass { min-width:600px; }
    .fiveYearClass .classChart li { margin-left:0; }
}
@media (max-width:768px) {
    .cont_box .selecCont { margin-bottom:20px }
    .curentDate { font-size:14px; }
}

@media (max-width:500px) {
    .cont_box .tab_subList > ul + p { margin-top:10px; }
    .cont_box .selecCont > select { flex: 1  }
}


/* 20230907 /> */