.main { // height: 680px; background-color: #fff; border-radius: 20px; .header { position: relative; z-index: 1; display: flex; align-items: center; height: 90px; padding: 0 40px; background: #f3f3f3; border-radius: 20px 20px 0 0; } .close { position: absolute; top: 15px; right: 15px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #c4c4c4; font-size: 20px; border-radius: 100%; cursor: pointer; transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1); &:hover { background-color: #fff; } } .title { color: #000; font-weight: 600; font-size: 20px; } .content { padding: 0px 50px; .navigator { display: flex; align-items: center; justify-content: center; height: 110px; .nitem { width: 80px; height: 40px; margin: 0 6px; color: #c4c4c4; font-size: 18px; line-height: 40px; text-align: center; cursor: pointer; &.sel { color: #fff; background-color: #00dc23; } } } .chart { height: 220px; } } .foot { display: flex; margin-top: 47px; .l { width: 65px; height: 86px; color: #000; font-size: 18px; line-height: 86px; text-align: center; background: rgba(0, 220, 35, 0.2); border-radius: 5px; } .r { flex: 1; padding-left: 22px; color: #4d5262; line-height: 22px; text-align: justify; } } .chartText { padding: 10px 0; color: #c4c4c4; } .leveSt { padding-top: 40px; color: #140050; font-weight: 500; line-height: 12px; } .ruleBox { display: flex; justify-content: center; padding: 20px 0; .ruleImg { width: 305px; height: 96px; } } .noNum { color: #c4c4c4; line-height: 220px; text-align: center; } }