.bubble-main { display: flex; flex-direction: row; padding: 14px; .file-img { display: inline-flex; width: 50px; height: 50px; float: left; margin-right: 14px; background-repeat: no-repeat; &.doc { background-image: url(/assets/images/file/icon_talk_doc.png); &.disable { background-image: url(/assets/images/file/icon_talk_doc_d.png); } } &.exe { background-image: url(/assets/images/file/icon_talk_exe.png); &.disable { background-image: url(/assets/images/file/icon_talk_exe_d.png); } } &.file { background-image: url(/assets/images/file/icon_talk_file.png); &.disable { background-image: url(/assets/images/file/icon_talk_file_d.png); } } &.hwp { background-image: url(/assets/images/file/icon_talk_hwp.png); &.disable { background-image: url(/assets/images/file/icon_talk_hwp_d.png); } } &.ppt { background-image: url(/assets/images/file/icon_talk_ppt.png); &.disable { background-image: url(/assets/images/file/icon_talk_ppt_d.png); } } &.xls { background-image: url(/assets/images/file/icon_talk_xls.png); &.disable { background-image: url(/assets/images/file/icon_talk_xls_d.png); } } &.zip { background-image: url(/assets/images/file/icon_talk_zip.png); &.disable { background-image: url(/assets/images/file/icon_talk_doc_d.png); } } } .file-info { display: inline-flex; flex-direction: column; text-align: left; float: left; line-height: 1.6em; .file-name { font-size: 14px; font-weight: bold; display: inline-flex; } .file-size { display: inline-flex; font-size: 11px; color: #666666; } .file-ext { font-size: 12px; color: #848d95; } } } .btn-box { width: 100%; height: 40px; border-top: 1px solid #dddddd; display: flex; width: 100%; text-align: center; ul { width: 100%; li { width: 50%; height: 100%; display: inline-block; text-align: center; align-items: center; font-size: 13px; border-right: 1px solid #dddddd; &:last-child { border-right: none; } .mat-button { width: 100%; display: block; height: 100%; } } } }