* { margin: 0; padding: 0; } html, body { background: white; font-size: 14px; } .watera { box-sizing: border-box; padding: 35px; display: flex; align-items: center; justify-content: center; } .watera_inner { width: 240px; height: 125px; border: 2px solid #dddddd; border-radius: 5px; margin: 0 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .watera_inner:nth-child(1):hover { border-color: #ff9a4f; box-shadow: 0 0 5px #ffd822; } .watera_inner:nth-child(2):hover { border-color: #55abe4; box-shadow: 0 0 5px #55abe4; } .watera_inner:nth-child(3):hover { border-color: #00d40d; box-shadow: 0 0 5px #00d40d; } .watera_inner:nth-child(4):hover { border-color: #ff5a42; box-shadow: 0 0 5px #ff5a42; } .watera_inner01 { font-size: 20px; color: #ea4b5a; width: 100%; height: 50px; line-height: 50px; text-align: center; } .watera_inner02 { display: flex; align-items: center; box-sizing: border-box; padding-top: 10px; } .watera_inner02>img { display: block; width: 36px; height: 36px; } .watera_inner02>p { text-indent: 10px; font-size: 18px; color: #666; } .waterb { display: flex; align-items: center; padding-left: 35px; } .waterb_inner { height: 35px; border-right: 1px solid #dddddd; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; line-height: 35px; box-sizing: border-box; padding: 0 15px; color: #666; cursor: pointer; } .cheak { color: white; background: linear-gradient(to right, #e93e4e, #f97e81); } .waterb_inner:first-child { border: 1px solid #dddddd; border-radius: 5px 0 0 5px; } .waterb_inner:last-child { border: 1px solid #dddddd; border-radius: 0 5px 5px 0; border-left: none; } .waterc { box-sizing: border-box; padding: 0 35px; } .waterd{ display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: fixed; left: 0; top: 0; } .waterd_left{ width: calc(100% - 300px); height: 100%; float: left; } .waterd_right{ width: 300px; height: 100%; background: white; float: right; } .waterd_right_title{ font-size: 16px; text-align: center; width: 100%; height: 40px; line-height: 40px; } .waterd_right_table{ width: 100%; height: calc(100% - 200px); border-top: 1px solid #f1f1f1; overflow-y: auto; } .waterd_right_table::-webkit-scrollbar{ display: none; } .wrt_head{ width: 100%; height: 35px; border-bottom: 1px solid #f1f1f1; display: flex; box-sizing: border-box; padding: 0 5px; } .wrt_head>div{ width: 25%; text-align: center; line-height: 35px; } .wrt_inner{ width: 100%; border-bottom: 1px solid #f1f1f1; display: flex; align-items: center; box-sizing: border-box; padding: 5px; font-size: 12px; color: #666; } .wrt_inner>div{ width: 25%; text-align: center; } .waterd_right_footer{ box-sizing: border-box; height: 100px; width: 100%; border-top: 1px solid #f1f1f1; } .wrfa{ box-sizing: border-box; padding: 10px 10px 0 10px; display: flex; justify-content: space-between; } .wrfb{ box-sizing: border-box; padding: 10px 10px 0 10px; text-align: right; }