.cell-group { margin-bottom: 1rem; &:last-child { margin-bottom: 0; } div { font-size: 1rem; color: #4c4948; } .w1 { min-width: 9.166667rem; text-align: center; } .w2 { min-width: 6.25rem; text-align: center; } .table-header { width: 64.166667rem; height: 2.5rem; border-top-left-radius: .666667rem; border-top-right-radius: .666667rem; background-color: #f2f2f2; display: flex; align-items: center; .normal-header { width: 58.833333rem; margin: auto; display: flex; justify-content: space-between; align-items: center; .title { font-size: 1rem; font-weight: bold; color: #575453; } .guide { transition: all 0.5s; cursor: pointer; width: 1rem; height: .666667rem; background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center; background-size: 100% 100%; } .rotate180 { transform: rotate(180deg); transition: all 0.5s; } } } .table-content { width: 64.166667rem; height: auto; display: inline-block; border-bottom-left-radius: .666667rem; border-bottom-right-radius: .666667rem; border-left: solid .083333rem #f2f2f2; border-right: solid .083333rem #f2f2f2; border-bottom: solid .083333rem #f2f2f2; padding: 0 2.583333rem; max-height: 41.666667rem; transition: max-height ease-out 0.3s !important; overflow: hidden; .data-line { height: 4.416667rem; margin: auto; display: flex; justify-content: space-between; align-items: center; .cell1 { width: 29.166667rem; display: flex; justify-content: space-between; margin: auto; } .separator-v { height: 2.5rem; width: .166667rem; background-color: #f2f2f2; margin: 0 .916667rem; } } .label span { color: #f05a23; margin-left: .583333rem; cursor: pointer; text-decoration: underline; } .separator-h { width: 58.833333rem; height: .083333rem; background-color: #f2f2f2; } } .orange { background-color: #f05a23 !important; div { color: #ffffff; } } .hide { max-height: 0; border-bottom: none; } }