.pl_wrap { display: flex; width: 100%; overflow: hidden; } .pl_left { width: 100%; } .pl_right { position: relative; width: 50%; } @media (max-width: 993px) { .pl_right { display: none; } } .pl_right:before { content: ""; display: block; pointer-events: none; position: absolute; left: 0; right: 8px; bottom: 0; height: 90px; z-index: 10; opacity: 1; transition: opacity 0.2s ease 0s; background: rgba(29, 29, 29, 0); background: linear-gradient(to bottom, rgba(29, 29, 29, 0) 0%, #272728 100%); } .pl_right-episode { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-x: auto; padding: 0 30px 70px; } .pl_right-episode { overflow-y: auto; scrollbar-width: 8px; scrollbar-color: rgba(255, 255, 255, 0.05); } .pl_right-episode::-webkit-scrollbar { width: 8px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.05); } .pl_right-episode::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(255, 255, 255, 0.15); } .pl_right-episode::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.55); } .pl_right-episode .btn { width: 100%; margin-top: 20px; margin-bottom: -50px; z-index: 9999; height: 44px; } .pl_episode { margin-bottom: 15px; } .pl_episode-url { line-height: 25px; color: #e0e0e0; letter-spacing: 0.17px; display: block; text-decoration: none; position: relative; font-size: 16px; } .pl_episode-sound { line-height: 25px; color: #828282; letter-spacing: -0.53px; font-size: 16px; } .pl_player_bottom { display: flex; align-items: stretch; padding: 15px 0; border-bottom: 1px solid #4d4d4d; } .pl_player_bottom .pl_rate, .pl_player_bottom .pl_social { display: flex; align-items: center; flex-direction: column; width: 50%; } .pl_player_bottom .pl_rate { justify-content: center; align-items: start; } .pl_player_bottom .pl_rate span { color: #828282; font-size: 13px; line-height: 1; margin-bottom: 3px; white-space: nowrap; } .pl_player_bottom .pl_social { justify-content: center; align-items: end; } @media (max-width: 480px) { .pl_player_bottom { flex-direction: column; } .pl_player_bottom .pl_rate, .pl_player_bottom .pl_social { width: 100%; align-items: center; } .pl_player_bottom .pl_social { margin-top: 10px; height: 40px; } } .pl_remember { background-image: linear-gradient(to right, #f58220 0, #ee3d3c 100%); padding: 8px; text-align: center; color: #fff; } .pl_frame { position: relative; padding-bottom: 50%; } .pl_frame iframe { display: block; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; height: 100% !important; max-height: 100% !important; width: 100% !important; max-width: 100% !important; border: none; } .pl_item { display: flex; flex-wrap: wrap; padding: 5px 0; margin: 0 -5px; } .pl_item li { padding: 5px; } @media (min-width: 768px) { .pl_item li { width: 20%; } } @media (max-width: 767px) { .pl_item li { width: 50%; } } @media (max-width: 480px) { .pl_item li { width: 50%; } } .pl_item li a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; text-decoration: none; } .pl_item li .pl_poster { position: relative; width: 100%; padding-bottom: 60%; background-position: 0 -20px; background-size: cover; -webkit-box-shadow: -3px 4px 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: -3px 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: -3px 4px 8px 0 rgba(0, 0, 0, 0.2); } .pl_item li .pl_poster::after, .pl_item li .pl_poster::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: opacity 0.2s ease-in-out; } .pl_item li .pl_poster::after { font-family: icomoon; z-index: 4; content: ""; display: flex; background-image: linear-gradient( to right, rgb(245, 130, 32) 0%, rgb(238, 61, 60) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: rgb(255, 254, 254); align-items: center; justify-content: center; font-size: 40px; } .pl_item li:hover .pl_poster::after, .pl_item li:hover .pl_poster::before { opacity: 1; } .pl_item li:hover .pl_poster::before { background-color: rgba(0, 0, 0, 0.5); } .pl_item li .pl_trans { position: absolute; width: 90%; left: 5%; bottom: 5%; padding: 3px; background: rgba(37, 37, 38, 0.9); border: 1px solid #333; border-radius: 15.5px; text-decoration: none; font-size: 11px; color: #afaeae; text-align: center; } .pl_item li .pl_text { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 22px; color: #f2f2f2; padding: 10px 5px 5px; } .pl_item li:hover .pl_text { text-decoration: underline; color: #fc4a49; } .pl_item li:hover .pl_trans { border-color: transparent; background-image: linear-gradient(90deg, #f58220, #ee3d3c); color: #fff; } .pl_navigation { display: flex; position: relative; padding: 20px; clear: both; z-index: 10; flex-wrap: wrap; justify-content: center; } .pl_navigation a, .pl_navigation span { display: flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; margin-top: 5px; margin-right: 5px; padding: 0 7px; font-size: 13px; color: #fff; border-radius: 50%; text-decoration: none; } .pl_navigation a { border: 1px solid #828282; transition: all 0.3s ease; } .pl_navigation a:hover { border: 1px solid #f58220; box-shadow: 5px 12px 13px rgb(0 0 0 / 27%); } .pl_navigation span { background: linear-gradient(to right, #f58220 0, #ee3d3c 100%); box-shadow: 5px 12px 13px rgb(0 0 0 / 27%); } .pl_navigation .nav_ext { background: none; color: #fff; font-weight: bold; } .pl_navigation .pl_raquo { font-size: 21px; line-height: 0; margin-top: -2px; color: #fff; font-style: normal; } .pl_list, .pl_list li, .pl_list a { display: flex; } .pl_list { justify-content: end; padding: 15px 0; } .pl_list li { width: 33.3333%; } @media (min-width: 768px) { .pl_list li span.xs { display: none; } } @media (max-width: 767px) { .pl_list li span.xl { display: none; } } .pl_list li a { align-items: center; font-size: 17px; font-weight: bold; text-decoration: none; color: #c9c9c9; } .pl_list a:hover { color: rgb(252, 74, 73); } .pl_list li i { position: relative; height: 40px; width: 40px; border-radius: 50%; background-color: #383838; overflow: hidden; } .pl_list a:hover i { background-image: linear-gradient(to right, #f58220 0, #ee3d3c 100%); box-shadow: 5px 12px 13px rgb(0 0 0 / 27%); } .pl_list li i::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-position: center; background-repeat: no-repeat; background-size: 70%; } .pl_list_prev { width: 33.3333%; } .pl_list_all { justify-content: center; } .pl_list_next { justify-content: end; } .pl_list_prev i { margin-right: 10px; } .pl_list_all i { margin-right: 10px; } .pl_list_next i { margin-left: 10px; } .pl_list_prev i::before { background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m12.7068 5.293c.1875.18753.2928.44184.2928.707s-.1053.51947-.2928.707l-3.29301 3.293 3.29301 3.293c.1821.1886.2829.4412.2807.7034-.0023.2622-.1075.513-.2929.6984s-.4362.2906-.6984.2929-.5148-.0985-.7034-.2807l-4.00001-4c-.18747-.1875-.29279-.4418-.29279-.707 0-.26516.10532-.51947.29279-.707l4.00001-4c.1875-.18747.4418-.29279.707-.29279s.5195.10532.707.29279z' fill='rgb(252,74,73)' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); } .pl_list_prev a:hover i::before { background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m12.7068 5.293c.1875.18753.2928.44184.2928.707s-.1053.51947-.2928.707l-3.29301 3.293 3.29301 3.293c.1821.1886.2829.4412.2807.7034-.0023.2622-.1075.513-.2929.6984s-.4362.2906-.6984.2929-.5148-.0985-.7034-.2807l-4.00001-4c-.18747-.1875-.29279-.4418-.29279-.707 0-.26516.10532-.51947.29279-.707l4.00001-4c.1875-.18747.4418-.29279.707-.29279s.5195.10532.707.29279z' fill='rgb(255,255,255)' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); } .pl_list_all i::before { background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm14 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' fill='rgb(252,74,73)'%3E%3C/path%3E%3C/svg%3E"); } .pl_list_all a:hover i::before { background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm14 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' fill='rgb(255,255,255)'%3E%3C/path%3E%3C/svg%3E"); } .pl_list_next i::before { background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m7.29279 14.707c-.18747-.1875-.29279-.4418-.29279-.707s.10532-.5195.29279-.707l3.29301-3.293-3.29301-3.29299c-.18216-.1886-.28296-.4412-.28068-.7034s.10745-.51301.29286-.69842.43622-.29058.69842-.29285c.26219-.00228.51479.09851.7034.28067l4.00001 4c.1875.18753.2928.44184.2928.70699 0 .2652-.1053.5195-.2928.707l-4.00001 4c-.18753.1875-.44184.2928-.707.2928-.26517 0-.51948-.1053-.707-.2928z' fill='rgb(252,74,73)' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); } .pl_list_next a:hover i::before { background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m7.29279 14.707c-.18747-.1875-.29279-.4418-.29279-.707s.10532-.5195.29279-.707l3.29301-3.293-3.29301-3.29299c-.18216-.1886-.28296-.4412-.28068-.7034s.10745-.51301.29286-.69842.43622-.29058.69842-.29285c.26219-.00228.51479.09851.7034.28067l4.00001 4c.1875.18753.2928.44184.2928.70699 0 .2652-.1053.5195-.2928.707l-4.00001 4c-.18753.1875-.44184.2928-.707.2928-.26517 0-.51948-.1053-.707-.2928z' fill='rgb(255,255,255)' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); }