.deposit-detail { // height: 100vh; // background-color: #f3f3f3; .deposit-detail-tips { width: 100%; height: 66px; background: #ffe6ce; border: 2px solid #ffe6ce; padding: 0 30px; display: flex; align-items: center; font-size: 24px; font-weight: 400; color: #ee7500; margin: 0; } .deposit-detail-tips text { margin-right: 10px; font-size: 30px; } & > view { padding: 30px 0; margin: 0 25px; border-bottom: 1px solid #f6f6f6; } & > view:last-child { border-bottom: 0; } .deposit-amount { text-align: center; } .deposit-type { font-size: 28px; font-weight: 400; color: #000000; margin-bottom: 35px; } .deposit-price { font-size: 40px; font-weight: 700; color: #000000; } .deposit-status { display: flex; } .deposit-status-title { font-size: 24px; font-weight: 400; color: #707070; margin-right: 105px; } .deposit-voucher-title { font-size: 24px; font-weight: 400; color: #707070; margin-bottom: 28px; } .deposit-voucher-title::before { content: '*'; color: $color_main; } .deposit-voucher-content { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; height: 98px; } .deposit-voucher-content image { width: 100%; height: 100%; object-fit: cover; } .deposit-info-list { display: flex; margin-bottom: 20px; } .deposit-info-list-title { width: 140px; font-size: 24px; font-weight: 400; color: #707070; border-right: 1px solid #f0f0f0; } .deposit-info-list-content { width: 468px; font-size: 24px; font-weight: 400; color: #000000; padding-left: 25px; box-sizing: border-box; } .deposit-info-list-copy { font-size: 20px; font-weight: 400; color: #ababab; padding-left: 18px; border-left: 1px solid #f0f0f0; } .deposit-timeline { } .deposit-timeline-item { display: flex; margin-left: 50px; height: 100px; } .deposit-timeline-item-title { font-size: 24px; font-weight: 400; color: #3c3c3c; } .deposit-timeline-item-date { font-size: 24px; font-weight: 400; color: #ababab; } .deposit-timeline-item-left { position: relative; margin-right: 55px; width: 12px; } .deposit-timeline-item-left::before { content: ' '; width: 12px; height: 12px; background: $color_main; border-radius: 50%; display: block; margin-top: 10px; } .deposit-timeline-item-left::after { content: ' '; border-right: 1px dashed $color_main; position: absolute; top: 25px; bottom: -8px; left: 50%; transform: translateX(-50%); } .deposit-timeline-item-success, .deposit-timeline-item-error { position: relative; margin-right: 55px; width: 12px; } .deposit-timeline-item-error Text, .deposit-timeline-item-success Text { display: inline-block; width: 38px; height: 38px; background: $color_main; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); color: white; font-size: 30px; display: flex; align-items: center; justify-content: center; } .deposit-timeline-item-error Text { background: #cccccc; } }