@charset "UTF-8"; /**************************** archive *************************/ .archive_list ul { padding: 0; } .arhive_img .img_wrap { width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 46px; } .arhive_img img { width: 40px; height: 40px; } .archive_list ul li { list-style: none; border-bottom: 1px solid #e2e8f0; position: relative; } .archive_list ul li a { padding: 10px; color: #323743; } .archive_list ul li a:hover { background: aliceblue; } .bg_blue { background: #0070ca; } .bg_green { background: #4dca00; } .bg_orange { background: #ca6d00; } .archive_list ul li:first-child { border-top: 1px solid #e2e8f0; } .archive_desc { padding-left: 10px; position: relative; width: calc(100% - 100px); overflow: hidden; white-space: nowrap; } .archive_date span { color: #323743; font-size: 14px; } .archive_name span { color: #323743; font-size: 16px; font-weight: 500; } .archive_name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /**************************** archive detail *************************/ .player { background-color: black; text-align : center; } .archive_player { width: auto; max-width: 100%; max-height: 50vh; } .archive_audio_player { width: 100%; } .archive_detail .ttl{ font-size: 18px; font-weight: bold; } .archive_detail .item { margin-bottom: 20px; } .archive_detail .archive_detail_desc img { width: 80px; height: 80px; border-radius: 50%; } .archive_detail .archive_detail_desc .archive_detail_user_list ul { padding-left: 0; overflow-x: scroll; } .archive_detail .archive_detail_desc .archive_detail_user_list ul li { list-style: none; margin: 0 5px; } .archive_detail_desc { margin: 0 10px; } .archive_detail .archive_detail_desc .archive_detail_user_list span, .archive_detail .archive_detail_desc .archive_detail_sv_user span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90px; } #joinChatRoom { -webkit-appearance: none; border: none; width: 24px; height: auto; padding: 0; background: white; } #joinChatRoom img { width: 24px; height: 24px; } .archive_chat_room { display: inline-block; vertical-align: middle; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 768px){ .archive_name{ font-size: 14px; } .archive_detail .ttl { font-size: 16px; } .archive_detail_desc span { font-size: 14px; } }