.section{ font-size: 16px; } .section h3{ font-size: 2.75em; color: #333; margin-bottom: 5.7%;/*82*/ } .tab-controls{ text-align: center; padding: 7.8125% 0 3.90625%;/*150 0 75*/ font-size: 1.5em; color: #333; } .tab-controls a{ font-size: inherit; color: inherit; vertical-align: middle; } .tab-controls .line{ width: 1px; height: 0.5em; display: inline-block; vertical-align: middle; background-color: #e5e5e5; margin: 0 1.125em; } .sec1{ padding: 3.90625% 0 4.583%;/*75 0 88*/ } .sec1 .flex-box{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec1 .info-box{ color: #333; width: 45%; } .sec1 .info-box h4{ font-size: 2.25em; color: inherit; } .sec1 .info-box h5{ font-size: 1.5em; color: #0c67ba; margin: 1.125em 0 1.5em;/*27 0 36*/ text-transform: uppercase; } .sec1 .info-box td{ width: 50%; white-space: nowrap; } .sec1 .info-box td:last-child{ width: auto; } .sec1 .info-box td b{ font-size: 1.375em; color: inherit; font-weight: 500; } .sec1 .info-box td span{ font-size: 2.125em; color: inherit; font-weight: 500; line-height: 1.47; } .sec1 .info-box td .red{ color: #fc0404; } .sec1 .info-box td .green{ color: #7ec251; } .sec1 .info-box td i{ font-size: 1.125em; font-style: normal; } .sec1 .img{ border: 0.1875em solid #f5f5f5; border-radius: 0.75em; width: 50%; } .sec2{ padding: 4.583% 0 4.84375%;/*88 0 93*/ } .sec2 table{ font-size: 1.125em; color: #666; width: 100%; font-weight: 500; text-align: center; } .sec2 table>tbody>tr,.sec2 table>thead{ display: table; width: 100%; table-layout: fixed; /* 重要 表格固定算法 */ } .sec2 table>tbody{ height: 44em; display: block; } .sec2 tr{ border-collapse: separate; } .sec2 th{ background-color: #0c67ba; border-right: 1px solid rgba(255,255,255,0.3); color: #fff; line-height: 1.25; height: 2.7em; padding-left: 1em; padding-right: 1em; white-space: nowrap; } .sec2 tr:nth-child(1) th:nth-child(2){ border-bottom: 1px solid rgba(255,255,255,0.3); } .sec2 tr:nth-child(1) th:last-child{ border-right: 0 none; } .sec2 td{ border: 1px solid rgba(0,0,0,0.1); border-top: 0 none; line-height: 1.5; height: 4em; padding-left: 1em; padding-right: 1em; } .sec2 tr:nth-child(even) td{ background-color: #f3f7fb; } .sec3{ padding: 4.84375% 0 10.625%;/*93 0 204*/ } .sec3 table{ font-size: 1.125em; color: #666; width: 100%; font-weight: 500; text-align: center; } .sec3 th{ background-color: #0c67ba; border-right: 1px solid rgba(255,255,255,0.3); color: #fff; line-height: 3.72; padding-left: 1em; padding-right: 1em; white-space: nowrap; width: 24%; } .sec3 th:last-child{ border-right: 0 none; } .sec3 td{ border: 1px solid rgba(0,0,0,0.1); border-top: 0 none; line-height: 1.5; height: 4em; padding-left: 1em; padding-right: 1em; } .sec3 tr:nth-child(even) td{ background-color: #f3f7fb; } .sec3 th:first-child,.sec3 td:first-child{ text-align: left; padding-left: calc((28% - 13em) / 2); width: 28%; } @media only screen and (min-width:1024px){ .tab-controls a:hover{ color: #0c67ba; } } @media only screen and (max-width:1366px){ .section{ font-size: 14px; } .sec2 table{ font-size: inherit; } .sec3 table{ font-size: inherit; } } @media only screen and (max-width:1200px){ .sec2 table{ font-size: 0.86em; } .sec3 table{ font-size: 0.86em; } } @media only screen and (max-width:1024px){ .section{ font-size: 0.625rem; } .section h3{ margin-bottom: 8%;/*82*/ } .tab-controls{ padding: 10% 0 5%;/*150 0 75*/ } .sec1{ padding: 5% 0;/*75 0 88*/ } .sec1 .info-box{ margin-bottom: 5%; width: 100%; } .sec1 .info-box h5{ margin: 0.5em 0; } .sec1 .img{ width: 100%; } .sec2{ padding: 5% 0;/*88 0 93*/ } .sec2 .table-box{ overflow-x: auto; } .sec2 table{ font-size: inherit; width: 175%; } .sec3{ padding: 5% 0 10%;/*93 0 204*/ } .sec3 .table-box{ overflow-x: auto; } .sec3 table{ font-size: inherit; width: 175%; } }