@charset "utf-8"; .online-product { padding-top: 50px; } .main-feature { margin-top: 45px; background-size: cover; background-position: top center; background-repeat: no-repeat } .main-feature .title { position: relative; padding-left: 0px; font-size: 30px; text-align: left } .main-feature p { margin-top: 15px; font-size: 18px } .main .share-twitter, .main .share-facebook { border: 1px solid #9a9a9a; border-radius: 4px; color: #d2d2d2; position: relative; margin-right: 8px; margin-left: 30px; padding: 0px 6px; text-decoration: none; } .main .share-twitter:hover, .main .share-twitter:active, .main .share-facebook:hover, .main .share-facebook:active { border-color: #525252; color: #333333; text-decoration: none; } .main .share-facebook::before { content: ''; background: url(../img/share-facebook.svg) 0 0 no-repeat; display: inline-block; width: 24px; height: 24px; position: absolute; left: -28px; } .main .share-twitter::before { content: ''; background: url(../img/share-twitter.svg) 0 0 no-repeat; display: inline-block; width: 24px; height: 24px; position: absolute; left: -28px; } .dot-list { margin-top: 15px; margin-bottom: 0; padding: 0 } .dot-list li { position: relative; padding-left: 15px; margin-top: 5px; font-size: 18px } .dot-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background-color: #333; border-radius: 50% } .product-article { margin-top: 25px; color: #fff; padding-bottom: 2rem; padding-top: 2rem; background-color: #044886 } .product-article .text-center { margin-top: 30px } .product-article .text-white { background-color: #fff; text-align: center; color: #333 !important; padding: 3px 15px } .product-article .list { display: flex; list-style: outside disc; padding-left: 20px; margin-top: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap } .product-article .list li { flex: 0 0 50%; max-width: 50%; padding-bottom: 0.5rem; padding-top: 0.5rem } .product-article .list li a { color: #FFF } @media (max-width: 991px) { .product-article .list li { flex: 0 0 100%; max-width: 100% } } @media(max-width: 768px) { .main-feature p { font-size: 16px } .main-feature .title { font-size: 28px } } .main { background-color: #fafafa; position: relative; min-height: 100%; overflow: hidden } @media screen and (max-width:768px) { .main { height: auto; min-height: 100%; padding-bottom: 40px } } @media screen and (max-width:768px) { .main { padding-bottom: 0 } } .main .wrapper { position: relative; height: 100%; z-index: 2; max-width: 100%; width: 75%; margin-left: auto; margin-right: auto; padding-top: .1px } @media (max-width:768px) { .main .wrapper { width: 95% } } .wrapper::after { content: ''; display: block; clear: both } .main .main-title { display: inline-block } .main:before { z-index: 0; content: ""; position: absolute; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODguMiA3My4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4OC4yIDczLjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtvcGFjaXR5OjAuNTtmaWxsOnVybCgjU1ZHSURfMV8pO30NCjwvc3R5bGU+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIzNi42MDg5IiB4Mj0iODguMTk4NCIgeTI9IjM2LjYwODkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMUYxRkQiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUVGN0ZFIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ3LjMsMC4yYzE2LjMsMS40LDQwLjItMS4zLDQwLjksMjVDODksNTQuOSw3MS44LDgwLjMsNDguNiw3MS40Yy0xMi45LTQuOS01My40LTIwLTQ4LjEtNDMuNw0KCUM0LjUsOS44LDMxLjgtMS41LDQ3LjMsMC4yeiIvPg0KPC9zdmc+DQo=) 0 0/cover no-repeat; right: -10%; transform: rotate(-45deg); height: 50%; width: 50vh; overflow: hidden } @media (max-width:768px) { .main:before { width: 50%; height: 50vw } } .main:after { z-index: 0; content: ""; position: absolute; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTUxMS4xIDE3MjkuNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTUxMS4xIDE3MjkuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOm5vbmU7c3Ryb2tlOiNlNWU4ZjU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnPg0KCTxkZWZzPg0KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHdpZHRoPSIxNTExLjEiIGhlaWdodD0iMTcyOS41Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE2LjQiIHkxPSIxNzM2LjYiIHgyPSItMS41IiB5Mj0iMTcxOC44Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjcxLjEiIHkxPSIxNzM1LjMiIHgyPSItMTMuMSIgeTI9IjE2NTEuMSIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxMjcuMiIgeTE9IjE3MzUuMyIgeDI9Ii0yLjgiIHkyPSIxNjA1LjMiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTgzLjMiIHkxPSIxNzM1LjMiIHgyPSItNy45IiB5Mj0iMTU0NC4xIi8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIzOS40IiB5MT0iMTczNS4zIiB4Mj0iLTEzLjQiIHkyPSIxNDgyLjYiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMjk1LjQiIHkxPSIxNzM1LjMiIHgyPSItNTUuNyIgeTI9IjEzODQuMiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIzNTEuNSIgeTE9IjE3MzUuMyIgeDI9Ii00Mi4zIiB5Mj0iMTM0MS40Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjQwNy42IiB5MT0iMTczNS4zIiB4Mj0iLTI4IiB5Mj0iMTI5OS43Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjQ2My43IiB5MT0iMTczNS4zIiB4Mj0iLTEzLjQiIHkyPSIxMjU4LjMiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iNTE5LjgiIHkxPSIxNzM1LjMiIHgyPSItNy45IiB5Mj0iMTIwNy43Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjU3NS44IiB5MT0iMTczNS4zIiB4Mj0iLTM3IiB5Mj0iMTEyMi41Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjYzMS45IiB5MT0iMTczNS4zIiB4Mj0iLTM3IiB5Mj0iMTA2Ni40Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjY4OCIgeTE9IjE3MzUuMyIgeDI9Ii0yOCIgeTI9IjEwMTkuMyIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSI3NDQuMSIgeTE9IjE3MzUuMyIgeDI9Ii00Mi4zIiB5Mj0iOTQ4LjkiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iODAwLjEiIHkxPSIxNzM1LjMiIHgyPSItNTUuNyIgeTI9Ijg3OS41Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9Ijg1Ni4yIiB5MT0iMTczNS4zIiB4Mj0iLTY5LjQiIHkyPSI4MDkuNyIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5MTIuMyIgeTE9IjE3MzUuMyIgeDI9Ii0zNyIgeTI9Ijc4NiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5NjguNCIgeTE9IjE3MzUuMyIgeDI9Ii01NS43IiB5Mj0iNzExLjMiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTAyNC40IiB5MT0iMTczNS4zIiB4Mj0iLTU4LjYiIHkyPSI2NTIuMiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxMDgwLjUiIHkxPSIxNzM1LjMiIHgyPSItMzUiIHkyPSI2MTkuOCIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxMTM2LjYiIHkxPSIxNzM1LjMiIHgyPSItNDMuOSIgeTI9IjU1NC45Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjExOTIuNyIgeTE9IjE3MzUuMyIgeDI9Ii00MC45IiB5Mj0iNTAxLjciLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTI0OC43IiB5MT0iMTczNS4zIiB4Mj0iLTIyLjciIHkyPSI0NjMuOSIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxMzA0LjgiIHkxPSIxNzM1LjMiIHgyPSItNDkuOCIgeTI9IjM4MC43Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjEzNjAuOSIgeTE9IjE3MzUuMyIgeDI9Ii0xMy4zIiB5Mj0iMzYxLjEiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTQxNyIgeTE9IjE3MzUuMyIgeDI9Ii0yMS4yIiB5Mj0iMjk3LjEiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTQ3MyIgeTE9IjE3MzUuMyIgeDI9Ii0zMiIgeTI9IjIzMC4yIi8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MjkuMSIgeTE9IjE3MzUuMyIgeDI9Ii00OS44IiB5Mj0iMTU2LjQiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUyMy4zIiB5MT0iMTU4LjMiIHgyPSIxMTgzLjQiIHkyPSItMTgxLjUiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTU0OS44IiB5MT0iMTMxLjgiIHgyPSIxMjEwIiB5Mj0iLTIwOCIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTc2LjQiIHkxPSIxMDUuMiIgeDI9IjEyMzYuNiIgeTI9Ii0yMzQuNiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNjAyLjkiIHkxPSI3OC43IiB4Mj0iMTI2My4xIiB5Mj0iLTI2MS4xIi8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE2MjkuNSIgeTE9IjUyLjEiIHgyPSIxMjg5LjciIHkyPSItMjg3LjciLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTY1Ni4xIiB5MT0iMjUuNSIgeDI9IjEzMTYuMyIgeTI9Ii0zMTQuMyIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iMjI4LjEiIHgyPSIxMTA4LjEiIHkyPSItMjAwLjciLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUzNyIgeTE9IjI4NC4yIiB4Mj0iMTA2MC45IiB5Mj0iLTE5MS44Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIzNDAuMyIgeDI9IjEwMTYuNyIgeTI9Ii0xNzkuOSIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iMzk2LjQiIHgyPSI5NTQuOCIgeTI9Ii0xODUuOCIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iNDUyLjQiIHgyPSI4OTIuNyIgeTI9Ii0xOTEuOCIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iNTA4LjUiIHgyPSI4MzYuNiIgeTI9Ii0xOTEuOCIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iNTY0LjYiIHgyPSI3OTIuNCIgeTI9Ii0xNzkuOSIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iNjIwLjciIHgyPSI3NDUuMSIgeTI9Ii0xNzEuMiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iNjc2LjgiIHgyPSI2NDUuNiIgeTI9Ii0yMTQuNyIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iNzMyLjgiIHgyPSI2MDMuNSIgeTI9Ii0yMDAuNyIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTMxLjEiIHkxPSI3ODMiIHgyPSI1NzYuOSIgeTI9Ii0xNzEuMiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTMxLjEiIHkxPSI4MzkuMSIgeDI9IjUwNi4yIiB5Mj0iLTE4NS44Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSI5MDEuMSIgeDI9IjQ1MS42IiB5Mj0iLTE4NC40Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSI5NTcuMSIgeDI9IjM5OS45IiB5Mj0iLTE3OS45Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIxMDEzLjIiIHgyPSIzNDMuOCIgeTI9Ii0xNzkuOSIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iMTA2OS4zIiB4Mj0iMjkxLjQiIHkyPSItMTc2LjMiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUzNyIgeTE9IjExMjUuNCIgeDI9IjIzNS4zIiB5Mj0iLTE3Ni4zIi8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIxMTgxLjQiIHgyPSIxNjMuNyIgeTI9Ii0xOTEuOCIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNTM3IiB5MT0iMTIzNy41IiB4Mj0iMTA3LjYiIHkyPSItMTkxLjgiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUzNyIgeTE9IjEyOTMuNiIgeDI9IjUxLjUiIHkyPSItMTkxLjgiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUzNyIgeTE9IjEzNDkuNyIgeDI9Ii00LjUiIHkyPSItMTkxLjgiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUzNyIgeTE9IjE0MDUuNyIgeDI9Ii0xMC40IiB5Mj0iLTE0MS43Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIxNDYxLjgiIHgyPSItMjAuOCIgeTI9Ii05NS45Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIxNTE3LjkiIHgyPSItMTYuMyIgeTI9Ii0zNS40Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIxNTc0IiB4Mj0iLTEwLjQiIHkyPSIyNi42Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE1MzciIHkxPSIxNjMwIiB4Mj0iLTUuNCIgeTI9Ijg3LjYiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTUzNyIgeTE9IjE2ODYuMSIgeDI9Ii00MS45IiB5Mj0iMTA3LjIiLz4NCjwvZz4NCjwvc3ZnPg0K) 50%/cover no-repeat; transform: rotateX(180deg); left: 25%; bottom: -10%; width: 50%; height: 70%; overflow: hidden } .main .main-write { text-align: center; padding: 50px 0 0 0 } @media screen and (max-width:768px) { .main .main-write { padding: 40px 0 0 0 } } .main h1 { position: relative; z-index: 2; font-size: 22px; color: #4159ff; margin-top: 0px; line-height: 25px; font-family: SourceHanSansCN-Regular, Avenir, Helvetica } @media screen and (max-width: 768px) { .main h1 { text-align: center; text-align-last: center; font-size: 18px; line-height: 20px } } .main h1:before { content: ""; width: 30px; height: 30px; display: inline-block; margin-right: 10px; vertical-align: bottom; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSLmnKrlkb3lkI3nmoTmuJDlj5hfMiIgeDE9IjE0OC44OCIgeTE9IjcwLjQ3IiB4Mj0iNDMzLjQ0IiB5Mj0iNTYzLjM0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNjhjMWZmIi8+PHN0b3Agb2Zmc2V0PSIwLjMyIiBzdG9wLWNvbG9yPSIjNmVhZmZmIi8+PHN0b3Agb2Zmc2V0PSIwLjk2IiBzdG9wLWNvbG9yPSIjN2M4MGZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN2Q3ZGZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPnZpZGVvRWRpdDwvdGl0bGU+PGcgaWQ9IuWbvuWxgl8yIiBkYXRhLW5hbWU9IuWbvuWxgiAyIj48ZyBpZD0i5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIyNTYiIGZpbGw9InVybCgj5pyq5ZG95ZCN55qE5riQ5Y+YXzIpIi8+PGcgb3BhY2l0eT0iMC41Ij48cGF0aCBkPSJNMjM4Ljg1LDIxNy45djMzLjI3SDE5OC45M2MtMS42Ny02LjY2LTUtMTEuNjUtMTAtMTYuNjRhNDcuMDUsNDcuMDUsMCwxLDAsMCw2Ni41NGM1LTUsOC4zMS0xMCwxMC0xNi42M2gzOS45MnYzOS45MmMtNi42NSwxLjY2LTExLjY0LDUtMTYuNjMsMTBhNDcuMDUsNDcuMDUsMCwxLDAsNjYuNTMsMGMtNS01LTEwLTguMzItMTYuNjMtMTBWMTU4LjI1YzAtMTQuODItMTcuOTItMjIuMjQtMjguNC0xMS43NmgwYTE2LjYzLDE2LjYzLDAsMCwwLTQuODcsMTEuNzZWMjE3LjlabTAsMTMzLjA4YTIzLjUzLDIzLjUzLDAsMSwxLDAsMzMuMjdBMjMuNTksMjMuNTksMCwwLDEsMjM4Ljg1LDM1MVptLTY2LjU0LTY2LjU0YTIzLjUzLDIzLjUzLDAsMSwxLDAtMzMuMjdBMjMuNTksMjMuNTksMCwwLDEsMTcyLjMxLDI4NC40NFoiIGZpbGw9IiNmZmYiLz48L2c+PHBhdGggZD0iTTMzOC42NiwyODQuNDRIMzY1YTE2LjYzLDE2LjYzLDAsMCwwLDExLjc2LTQuODdoMGMxMC40OC0xMC40OCwzLjA2LTI4LjQtMTEuNzYtMjguNEgxOTguOTNjLTEuNjctNi42Ni01LTExLjY1LTEwLTE2LjY0YTQ3LjA1LDQ3LjA1LDAsMSwwLDAsNjYuNTRjNS01LDguMzEtMTAsMTAtMTYuNjNoMzkuOTJ2MzkuOTJjLTYuNjUsMS42Ni0xMS42NCw1LTE2LjYzLDEwYTQ3LjA1LDQ3LjA1LDAsMSwwLDY2LjUzLDBjLTUtNS0xMC04LjMyLTE2LjYzLTEwVjI4NC40NGg2Ni41NFptLTE5OS42MiwwYTIzLjUzLDIzLjUzLDAsMSwxLDMzLjI3LDBBMjMuNTksMjMuNTksMCwwLDEsMTM5LDI4NC40NFpNMjcyLjEyLDM1MWEyMy41MywyMy41MywwLDEsMS0zMy4yNywwQTIzLjU5LDIzLjU5LDAsMCwxLDI3Mi4xMiwzNTFaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTI5My42OCwxMzYuNjJsLjA2LDc2LjU2YTE2LjU2LDE2LjU2LDAsMCwwLDE2LjU4LDE2LjU2bDc2LjQ0LS4wNmMxNC43NiwwLDIyLjE0LTE3Ljg2LDExLjcxLTI4LjI5TDMyMiwxMjQuODlDMzExLjUyLDExNC40NCwyOTMuNjcsMTIxLjg1LDI5My42OCwxMzYuNjJaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=) left center/30px auto no-repeat } @media (max-width: 1306px) and (min-width: 769px) { .main h1:before { -webkit-transform: none; -moz-transform: none; transform: none } } @media screen and (max-width: 768px) { .main h1:before { display: block; margin: 0 auto; margin-bottom: 10px } } .main .main-write h2 { position: relative; z-index: 2; font-size: 22px; color: #4159ff; margin-top: 0; line-height: 25px; font-family: SourceHanSansCN-Regular, Avenir, Helvetica } @media screen and (max-width:768px) { .main .main-write h2 { text-align: center; -moz-text-align-last: center; text-align-last: center; font-size: 18px; line-height: 20px } } .main .main-write h2:before { content: ""; width: 30px; height: 30px; display: inline-block; margin-right: 10px; vertical-align: bottom; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSLmnKrlkb3lkI3nmoTmuJDlj5hfMiIgeDE9IjE0OC44OCIgeTE9IjcwLjQ3IiB4Mj0iNDMzLjQ0IiB5Mj0iNTYzLjM0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNjhjMWZmIi8+PHN0b3Agb2Zmc2V0PSIwLjMyIiBzdG9wLWNvbG9yPSIjNmVhZmZmIi8+PHN0b3Agb2Zmc2V0PSIwLjk2IiBzdG9wLWNvbG9yPSIjN2M4MGZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN2Q3ZGZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPnZpZGVvRWRpdDwvdGl0bGU+PGcgaWQ9IuWbvuWxgl8yIiBkYXRhLW5hbWU9IuWbvuWxgiAyIj48ZyBpZD0i5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIyNTYiIGZpbGw9InVybCgj5pyq5ZG95ZCN55qE5riQ5Y+YXzIpIi8+PGcgb3BhY2l0eT0iMC41Ij48cGF0aCBkPSJNMjM4Ljg1LDIxNy45djMzLjI3SDE5OC45M2MtMS42Ny02LjY2LTUtMTEuNjUtMTAtMTYuNjRhNDcuMDUsNDcuMDUsMCwxLDAsMCw2Ni41NGM1LTUsOC4zMS0xMCwxMC0xNi42M2gzOS45MnYzOS45MmMtNi42NSwxLjY2LTExLjY0LDUtMTYuNjMsMTBhNDcuMDUsNDcuMDUsMCwxLDAsNjYuNTMsMGMtNS01LTEwLTguMzItMTYuNjMtMTBWMTU4LjI1YzAtMTQuODItMTcuOTItMjIuMjQtMjguNC0xMS43NmgwYTE2LjYzLDE2LjYzLDAsMCwwLTQuODcsMTEuNzZWMjE3LjlabTAsMTMzLjA4YTIzLjUzLDIzLjUzLDAsMSwxLDAsMzMuMjdBMjMuNTksMjMuNTksMCwwLDEsMjM4Ljg1LDM1MVptLTY2LjU0LTY2LjU0YTIzLjUzLDIzLjUzLDAsMSwxLDAtMzMuMjdBMjMuNTksMjMuNTksMCwwLDEsMTcyLjMxLDI4NC40NFoiIGZpbGw9IiNmZmYiLz48L2c+PHBhdGggZD0iTTMzOC42NiwyODQuNDRIMzY1YTE2LjYzLDE2LjYzLDAsMCwwLDExLjc2LTQuODdoMGMxMC40OC0xMC40OCwzLjA2LTI4LjQtMTEuNzYtMjguNEgxOTguOTNjLTEuNjctNi42Ni01LTExLjY1LTEwLTE2LjY0YTQ3LjA1LDQ3LjA1LDAsMSwwLDAsNjYuNTRjNS01LDguMzEtMTAsMTAtMTYuNjNoMzkuOTJ2MzkuOTJjLTYuNjUsMS42Ni0xMS42NCw1LTE2LjYzLDEwYTQ3LjA1LDQ3LjA1LDAsMSwwLDY2LjUzLDBjLTUtNS0xMC04LjMyLTE2LjYzLTEwVjI4NC40NGg2Ni41NFptLTE5OS42MiwwYTIzLjUzLDIzLjUzLDAsMSwxLDMzLjI3LDBBMjMuNTksMjMuNTksMCwwLDEsMTM5LDI4NC40NFpNMjcyLjEyLDM1MWEyMy41MywyMy41MywwLDEsMS0zMy4yNywwQTIzLjU5LDIzLjU5LDAsMCwxLDI3Mi4xMiwzNTFaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTI5My42OCwxMzYuNjJsLjA2LDc2LjU2YTE2LjU2LDE2LjU2LDAsMCwwLDE2LjU4LDE2LjU2bDc2LjQ0LS4wNmMxNC43NiwwLDIyLjE0LTE3Ljg2LDExLjcxLTI4LjI5TDMyMiwxMjQuODlDMzExLjUyLDExNC40NCwyOTMuNjcsMTIxLjg1LDI5My42OCwxMzYuNjJaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=) 0/30px auto no-repeat; margin-left: 10px } @media (max-width:1306px) and (min-width:769px) { .main .main-write h2:before { transform: none } } @media screen and (max-width:768px) { .main .main-write h2:before { display: block; margin: 0 auto; margin-bottom: 10px } } .main .main-write .btn-group { margin-top: 0 } .main .main-write .functions-box { margin: 40px 0 20px } .main .main-write .describe { position: relative; z-index: 1; font-size: 16px; margin-top: 5px; font-family: SourceHanSansCN-Regular, Avenir, Helvetica; font-weight: 300; color: #333; text-align: center } .main .main-write .box-before-after { position: relative } .main .main-write .func-center-area { position: relative } .main .main-write .func-center-area .container { position: relative; z-index: 2; height: 184px; max-width: 100%; padding-top: 180px; padding-bottom: 420px; cursor: pointer; box-shadow: 0px 0px 30px 0px #eef2ff; background-color: #fff; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s } @media (max-width: 768px) { .main .main-write .func-center-area .container { background: #fff; border: 1px dashed #eee } .main .main-write .func-center-area .container:hover { background: #fff !important } } .main .main-write .func-center-area img { width: 30px; height: 30px } .main .main-write .func-center-area h3 { font-size: 20px; color: #333; font-family: SourceHanSansCN-Regular, Avenir, Helvetica } .main .main-write .container { position: relative; z-index: 2; background: #fff; border: 2px solid #f3f3f3; box-shadow: 0px 0px 30px 0px #eef2ff } .main .main-write .title-item { border-bottom: 1px solid #eeeeee; height: 54px } .main .main-write .title-item .title-item-l { font-size: 14px; color: #999; margin: 16.5px 0 0 22px; float: left } @media screen and (max-width: 768px) { .main .main-write .title-item .title-item-l { margin: 16.5px 0 0 12px } } .main .main-write .title-item .title-item-r { margin-top: 12px; margin-right: 12px; padding: 0 25px; height: 32px; line-height: 32px; font-size: 14px; color: #4571E9; background: #fff; border: 1px solid #4571e9; border-radius: 6px; float: right } .main .main-write .title-item .title-item-r.forbid { cursor: not-allowed } .main .main-write .title-item .title-item-r.forbid:hover { cursor: not-allowed } .main .main-write .title-item .title-item-r:hover { cursor: pointer; background: #4571E9; color: #fff } .main .main-write .title-item .title-item-r:hover:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItMjc3IDQwMC45IDQwIDQwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IC0yNzcgNDAwLjkgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8Zz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iLTI3NSIgeTE9IjQyMC45IiB4Mj0iLTIzOSIgeTI9IjQyMC45Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9Ii0yNTciIHkxPSI0MDIuOSIgeDI9Ii0yNTciIHkyPSI0MzguOSIvPg0KPC9nPg0KPC9zdmc+DQo=) left center/16px no-repeat } .main .main-write .title-item .title-item-r:before { content: ""; vertical-align: sub; display: inline-block; width: 16px; height: 16px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDAgNDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwIDQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojNDU3MUU5O3N0cm9rZS13aWR0aDo0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGc+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIiIHkxPSIyMCIgeDI9IjM4IiB5Mj0iMjAiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMjAiIHkxPSIyIiB4Mj0iMjAiIHkyPSIzOCIvPg0KPC9nPg0KPC9zdmc+DQo=) left center/16px no-repeat } .main .main-write ::-webkit-scrollbar { height: 6px; width: 6px } .main .main-write ::-webkit-scrollbar-thumb { width: 6px; height: 120px; background: #ccc; border-radius: 3px } .main .main-write .ml5 { margin-left: 5px } .main .main-write .mr5 { margin-right: 5px } .main .main-write .begin-work, .main .main-write .re-add, .main .main-write .download-now, .main .main-write .export-all { display: inline-block; text-align: center; font-size: 18px; height: 40px; width: 200px; line-height: 40px; border: 1px solid #4159ff; border-radius: 20px; background-color: #4159ff; text-decoration: none; color: #fff; cursor: pointer; } .main .main-write .begin-work.active, .main .main-write .re-add.active, .main .main-write .download-now.active, .main .main-write .export-all.active { background-color: #999; border-color: #999; color: #333 } @media screen and (max-width: 768px) { .main .main-write .begin-work, .main .main-write .re-add, .main .main-write .download-now, .main .main-write .export-all { font-size: 16px } } .main .main-write .export-all { border: 1px solid #333; background-color: #fff; color: #333 } .main .main-write .re-add { background: #e5eafb; border-color: #e5eafb; color: #4159ff; margin-right: 20px } @media (max-width: 768px) { .main .main-write .re-add { margin-right: 0px; margin-bottom: 10px } } .main .main-write .btn-group { margin: 20px 0 } .main .main-write .pdf-area .container { padding-top: 180px; padding-bottom: 420px } @media (max-width: 768px) { .main .main-write .pdf-area .container { height: inherit; padding-top: 150px; padding-bottom: 150px; background: #fff; border: 1px dashed #eee } .main .main-write .pdf-area .container:hover { background: #fff !important } } .main .back-menu { position: absolute; top: 30px; left: 20px; width: max-content; max-height: 100%; overflow-y: scroll; background: #fff; border: 1px solid #eee } .main .back-menu a { display: block; width: 100%; height: 40px; padding: 0 10px; text-align: center; line-height: 40px; font-size: 16px; color: #333; border-bottom: 1px solid #eee } .main .back-menu a:hover { color: #475CF7 } .main .content-box ul { display: -webkit-box; display: box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap } @media (max-width: 768px) { .main .content-box ul { margin-top: 80px } } .main .content-box li { width: 28%; position: relative; padding-top: 80px; padding-bottom: 10px; text-align: center } @media (max-width: 768px) { .main .content-box li { width: 100%; padding-top: 40px } } .main .content-box li:nth-child(1) img { margin-bottom: 6px; width: 57px } .main .content-box li:nth-child(2) img { margin-top: 4px; margin-bottom: 4px; width: 63px } .main .content-box li:nth-child(3) img { width: 72px } .main .content-box li .title { font-size: 20px; padding: 6px 5px 10px 5px; line-height: 36px; font-weight: bold; color: #333 } .main .content-box li .dec { font-size: 16px; padding: 0 2%; line-height: 30px; color: #666; position: relative } .main .content-box li:hover:before { -webkit-animation: star 2.25s linear infinite alternate; -moz-animation: star 2.25s linear infinite alternate; animation: star 2.25s linear infinite alternate } .main .image-box li:nth-child(1) img { margin-top: 4px; margin-bottom: 3px; width: 60px } .main .image-box li:nth-child(2) img { margin-bottom: 1px; width: 57px } .main .image-box li:nth-child(3) img { width: 72px } .main .video-box li:nth-child(1) img { width: 72px; margin-bottom: 0 } .main .video-box li:nth-child(2) img { margin-top: 5px; margin-bottom: 4px; width: 58px } .main .video-box li:nth-child(3) img { width: 63px; margin-top: 6px; margin-bottom: 6px } .main .functions-box { margin: 30px 0 0px; position: relative; } .main.auto-height { min-height: auto } .functions-box .crown { position: absolute; top: 48px; right: 40px } @media (max-width:768px) { .main .main-write .functions-box { margin-top: 20px } .functions-box .crown { width: 12px; top: 38px; right: 36px } } .main .main-write .functions-box ul { max-width: 72vw; margin: 0 auto; padding-left: .3vw; display: -webkit-box; display: box; display: flex; box-pack: start; justify-content: flex-start; -ms-flex-pack: start; -webkit-box-lines: multiple; box-lines: multiple; flex-wrap: wrap } @media screen and (max-width:1200px) { .main .main-write .functions-box ul { margin: 0 16% } } @media (max-width:768px) { .main .main-write .functions-box ul { max-width: none; box-pack: justify; justify-content: space-between; -ms-flex-pack: justify; margin: 0 5%; padding-left: 0 } } .main .main-write .functions-box li { width: 11vw; height: 11vw; color: #333; margin-top: 10px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODguMiA3My4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4OC4yIDczLjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtvcGFjaXR5OjAuNTtmaWxsOnVybCgjU1ZHSURfMV8pO30NCjwvc3R5bGU+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIzNi42MDg5IiB4Mj0iODguMTk4NCIgeTI9IjM2LjYwODkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMUYxRkQiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUVGN0ZFIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ3LjMsMC4yYzE2LjMsMS40LDQwLjItMS4zLDQwLjksMjVDODksNTQuOSw3MS44LDgwLjMsNDguNiw3MS40Yy0xMi45LTQuOS01My40LTIwLTQ4LjEtNDMuNw0KCUM0LjUsOS44LDMxLjgtMS41LDQ3LjMsMC4yeiIvPg0KPC9zdmc+DQo=) 50%/80% auto no-repeat; background-color: #fff; font-size: 18px; line-height: 20px; display: inline-block; padding: 0; margin: .4vw; position: relative } .main .main-write .functions-box li div:first-of-type { height: 30%; margin: 35% 0 5% } .main .main-write .functions-box li div:first-of-type img { height: 100%; width: auto } .main .main-write .functions-box li a { width: 100%; height: 100%; text-decoration: none; display: inline-block } @media screen and (max-width:1200px) { .main .main-write .functions-box li { font-size: 16px; width: 15.88vw; height: 15.88vw } } @media (max-width:768px) { .main .main-write .functions-box li { font-size: 12px; width: 40vw; height: 40vw; margin-top: 10px } .main .main-write .functions-box li div:first-of-type { margin-bottom: 2.5% } } .main .main-write .functions-box li:hover { box-shadow: 0 0 20px #d6dfff; transform: translateY(-2px) } .main .middle-bg { position: relative; z-index: 1; width: 100%; height: auto; bottom: -18px } .main .functions-box .backToChoose { display: block; position: absolute; top: 20px; left: 20px; color: #BEBEBE; z-index: 3; padding-left: 20px } .main .functions-box .backToChoose::before { content: ""; display: inline-block; position: absolute; left: 0; width: 11px; height: 26px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMS4wNyAxOS4xNSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiNiZWJlYmU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjNweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPui/lOWbnjE8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjEuNSIgeTE9IjkuNTciIHgyPSI5LjU3IiB5Mj0iMTcuNjUiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSI5LjU3IiB5MT0iMS41IiB4Mj0iMS41IiB5Mj0iOS41NyIvPjwvZz48L2c+PC9zdmc+) center no-repeat; background-size: contain } .main .functions-box .backToChoose::before:lang(zh) { height: 22px } .main .functions-box .backToChoose:hover { color: #475CF7; text-decoration: none } .main .functions-box .backToChoose:hover::before { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMS4wNyAxOS4xNSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM0NzVjZjc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjNweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPui/lOWbnjI8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjEuNSIgeTE9IjkuNTciIHgyPSI5LjU3IiB5Mj0iMTcuNjUiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSI5LjU3IiB5MT0iMS41IiB4Mj0iMS41IiB5Mj0iOS41NyIvPjwvZz48L2c+PC9zdmc+) center no-repeat; background-size: contain } .file-item { position: relative; overflow: auto; font-size: 14px; text-align: left; width: 100%; padding: 50px 20px 20px; border-bottom: 1px solid #EEEEEE } .file-item.h323 { min-height: 323px; max-height: 323px } .file-item.h268 { min-height: 268px; max-height: 268px } .file-item.h230 { min-height: 230px; max-height: 230px } .file-item.h357 { min-height: 357px; max-height: 357px } @media screen and (max-width: 768px) { .file-item { max-height: 830px; padding: 20px 20px 30px } } .file-item .file-item-head { text-align: right; padding: 0 20px } .file-item .file-item-head span { color: #999 } .file-item span { color: #333; text-align: left } .file-item .file-item-list { min-height: 368px; position: relative } .file-item .file-item-list>div { background-color: #fff } .file-item .file-item-list>div:hover { background: #fff } .file-item .file-delete { position: absolute; cursor: pointer; height: 20px; width: 20px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTk5LjcgMTk5LjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5OS43IDE5OS44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGc+DQoJPGRlZnM+DQoJCTxyZWN0IGlkPSJTVkdJRF8xXyIgeD0iMCIgeT0iMCIgd2lkdGg9IjE5OS43IiBoZWlnaHQ9IjE5OS44Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTExNS4zLDk5LjlsODEuMy04MS40YzQuMS00LjIsNC4xLTEwLjgsMC0xNWwtMC40LTAuNGMtNC4xLTQuMS0xMC44LTQuMS0xNSwwTDk5LjksODQuNkwxOC42LDMuMQ0KCQlDMTQuNS0xLDcuOC0xLDMuNiwzLjFMMy4yLDMuNUMtMSw3LjUtMS4xLDE0LjIsMywxOC4zYzAuMSwwLjEsMC4xLDAuMSwwLjIsMC4ybDgxLjMsODEuNEwzLjIsMTgxLjNjLTQuMSw0LjItNC4xLDEwLjgsMCwxNQ0KCQlsMC41LDAuNGM0LjEsNC4xLDEwLjgsNC4xLDE1LDBsODEuMy04MS40bDgxLjMsODEuNGM0LjEsNC4xLDEwLjgsNC4xLDE1LDBsMC40LTAuNGM0LjEtNC4yLDQuMS0xMC44LDAtMTVMMTE1LjMsOTkuOUwxMTUuMyw5OS45eiINCgkJLz4NCjwvZz4NCjwvc3ZnPg0K) center center/60% no-repeat; border-radius: 50%; overflow: hidden; background-color: #909090; right: -10px; top: -10px; z-index: 100 } .file-item .file-type { width: 9% } .file-item .file-size { width: 11% } .file-item .file-size:lang(it) { width: 9% } .file-item .processed-size { width: 11% } .file-item .processed-size:lang(it) { width: 9% } .file-item .processed-size:lang(pl) { width: 9% } .file-item .processed-percent { width: 11% } .file-item .processed-percent:lang(it) { width: 9% } @media screen and (max-width: 768px) { .file-item .processed-percent { width: 20% } } .file-item .uploading { width: 87px; height: 85px; position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); transform: translate(-50%); line-height: 85px; font-size: 16px; color: #fff; text-align: center } .file-item .uploading span:nth-of-type(1) { display: block; width: 100%; top: 0; left: 0; height: 100%; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTcuOSA1Ni4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1Ny45IDU2LjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDF7b3BhY2l0eTowLjE7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30NCgkNCgkJLnN0MntjbGlwLXBhdGg6dXJsKCNTVkdJRF82Xyk7ZmlsbDpub25lO3N0cm9rZTojNDE1OUZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80Xyk7ZmlsbDojNDE1OUZGO30NCjwvc3R5bGU+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB5PSIwIiB3aWR0aD0iNTcuOSIgaGVpZ2h0PSI1Ni4yIi8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPGcgY2xhc3M9InN0MCI+DQoJCTxkZWZzPg0KCQkJPHJlY3QgaWQ9IlNWR0lEXzNfIiB5PSIwIiB3aWR0aD0iNTcuOSIgaGVpZ2h0PSI1Ni4yIi8+DQoJCTwvZGVmcz4NCgkJPGNsaXBQYXRoIGlkPSJTVkdJRF80XyI+DQoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8zXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8ZyBjbGFzcz0ic3QxIj4NCgkJCTxnPg0KCQkJCTxkZWZzPg0KCQkJCQk8cmVjdCBpZD0iU1ZHSURfNV8iIHg9IjEuNSIgeT0iMCIgd2lkdGg9IjU2LjIiIGhlaWdodD0iNTYuMiIvPg0KCQkJCTwvZGVmcz4NCgkJCQk8Y2xpcFBhdGggaWQ9IlNWR0lEXzZfIj4NCgkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfNV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4NCgkJCQk8L2NsaXBQYXRoPg0KCQkJCTxjaXJjbGUgY2xhc3M9InN0MiIgY3g9IjI5LjYiIGN5PSIyOC4xIiByPSIyNy4xIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPHBhdGggY2xhc3M9InN0MyIgZD0iTTQ5LjksMjguMWMwLDExLjItOS4xLDIwLjItMjAuMiwyMC4yUzkuNCwzOS4zLDkuNCwyOC4xUzE4LjQsNy45LDI5LjYsNy45UzQ5LjksMTYuOSw0OS45LDI4LjEiLz4NCgkJPHBhdGggY2xhc3M9InN0MyIgZD0iTTU3LjksNDJjMCwxLjMtMSwyLjMtMi4zLDIuM3MtMi4zLTEtMi4zLTIuM2MwLTEuMywxLTIuMywyLjMtMi4zUzU3LjksNDAuNyw1Ny45LDQyIi8+DQoJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik01LjgsMTcuNGMwLDEuNi0xLjMsMi45LTIuOSwyLjlTMCwxOSwwLDE3LjRjMC0xLjYsMS4zLTIuOSwyLjktMi45UzUuOCwxNS44LDUuOCwxNy40Ii8+DQoJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik03LDEwLjVDNywxMS4zLDYuMywxMiw1LjUsMTJDNC43LDEyLDQsMTEuMyw0LDEwLjVDNCw5LjcsNC43LDksNS41LDlDNi4zLDksNyw5LjcsNywxMC41Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=) center center/100% 100% no-repeat; -webkit-animation: "loadingAnimation"2s linear infinite alternate; -moz-animation: "loadingAnimation"2s linear infinite alternate; animation: "loadingAnimation"2s linear infinite alternate; position: absolute; z-index: -1 } .file-item .uploading span:nth-last-of-type(1) { display: inline-block; position: absolute; bottom: -70px; width: 250px; left: calc(50% - 125px); text-align: center } .file-item .uploading:lang(pl) { width: 16% } @media screen and (max-width: 768px) { .file-item .uploading { width: 20% } } .file-item .processing { position: absolute; width: 100%; height: 100%; background-color: #fff; top: 0; left: 0; z-index: 3000; pointer-events: auto; color: #333 } .file-item .processing div { display: inline-block; margin-top: 204px; margin-left: 50%; text-align: center; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .file-item .processing span { display: block; text-align: center; font-size: 16px } .file-item .processing .uploading { position: relative } @media (max-width: 768px) { .file-item .processing .uploading { width: 100% } } .file-item .process-done { pointer-events: auto; width: 100%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 3000 } .file-item .process-done div { display: inline-block; margin-top: 204px; margin-left: 50%; text-align: center; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .file-item .process-done span { display: block; text-align: center; color: #333; font-size: 16px } .file-item .process-done span:nth-of-type(1) { padding-left: 35px; font-size: 18px; margin-bottom: 60px; display: inline-block; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTA2LjUgMTA2LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwNi41IDEwNi41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkY4REExO30NCgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1My4zIiBjeT0iNTMuMyIgcj0iNTMuMyIvPg0KPHBvbHlsaW5lIGNsYXNzPSJzdDEiIHBvaW50cz0iMjYuMiw1Mi45IDQ0LjUsNzEuMiA4MC4zLDM1LjMgIi8+DQo8L3N2Zz4NCg==) left center/20px 20px no-repeat } .file-item .process-done span:nth-of-type(2) { width: 98px; height: 98px; font-size: 20px; margin: 0 auto; border-radius: 50%; box-shadow: 0px 6px 16px 0px rgba(84, 218, 166, 0.69); margin-bottom: 30px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzY2LjUgMzY2LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM2Ni41IDM2Ni41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojMzJEODk4O30NCgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTgzLjIiIGN5PSIxODMuMiIgcj0iMTgzLjIiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMzIsMjQ3LjNoMTMwLjhjNS42LTAuMSwxMC4xLTQuNiwxMC4xLTEwLjJWMTI5LjRjMC01LjYtNC41LTEwLjItMTAuMS0xMC4ySDEzMlYyNDcuM3ogTTExOS4yLDI0Ny4zVjExOS4yDQoJaC0xNS41Yy01LjYsMC4xLTEwLjEsNC42LTEwLjEsMTAuMlYyMzdjMCw1LjYsNC41LDEwLjIsMTAuMSwxMC4ySDExOS4yTDExOS4yLDI0Ny4zeiBNMjcwLjMsMTA2LjRjOC40LDAuMSwxNS4yLDYuOCwxNS40LDE1LjINCgl2MTIzLjJjMCw4LjQtNi44LDE1LjItMTUuMiwxNS4yYzAsMC0wLjEsMC0wLjEsMEg5Ni4xYy04LjUtMC4xLTE1LjMtNi45LTE1LjQtMTUuNFYxMjEuNmMwLTguNCw2LjgtMTUuMiwxNS4yLTE1LjJjMCwwLDAuMSwwLDAuMSwwDQoJTDI3MC4zLDEwNi40TDI3MC4zLDEwNi40eiBNMjM0LjUsMjAyLjJWMTY0djB2LTUxLjJjMC0zLjUsMi45LTYuNCw2LjQtNi40czYuNCwyLjksNi40LDYuNHY0NC44aDMxLjljMy41LDAuMSw2LjMsMi45LDYuMyw2LjQNCgljMC4xLDMuNS0yLjcsNi4zLTYuMSw2LjRjMCwwLTAuMSwwLTAuMSwwaC0zMS45djI1LjZoMzEuOWMzLjUsMC4xLDYuMywyLjksNi4zLDYuNGMwLjEsMy41LTIuNyw2LjMtNi4xLDYuNGMwLDAtMC4xLDAtMC4xLDBoLTMxLjkNCgl2NDQuOGMwLDMuNS0yLjksNi40LTYuNCw2LjRjLTMuNSwwLTYuNC0yLjktNi40LTYuNGwwLDB2LTUxLjJ2MEwyMzQuNSwyMDIuMkwyMzQuNSwyMDIuMnogTTE2NCwxNjMuOWMwLTMuNSwyLjQtNSw1LjYtMy41DQoJbDM0LjIsMTcuMmM2LjMsMy4yLDYuMiw4LjMsMCwxMS40bC01LDIuNkwxNjkuOCwyMDZjLTMuMiwxLjUtNS44LDAtNS44LTMuNVYxNjMuOUwxNjQsMTYzLjl6IE04MC44LDE2NGMtMC4xLTMuNSwyLjctNi4zLDYuMi02LjQNCgljMCwwLDAuMSwwLDAuMSwwaDM4LjRjMy41LTAuMSw2LjUsMi43LDYuNSw2LjNjMCwwLDAsMC4xLDAsMC4xYzAuMSwzLjUtMi43LDYuMy02LjIsNi40YzAsMC0wLjEsMC0wLjEsMEg4Ny4zDQoJYy0zLjUsMC4xLTYuNS0yLjctNi41LTYuM0M4MC44LDE2NC4xLDgwLjgsMTY0LjEsODAuOCwxNjR6IE04MC44LDIwMi41Yy0wLjEtMy41LDIuNy02LjMsNi4yLTYuNGMwLDAsMC4xLDAsMC4xLDBoMzguNA0KCWMzLjUtMC4xLDYuNSwyLjcsNi41LDYuM2MwLDAsMCwwLjEsMCwwLjFjMC4xLDMuNS0yLjcsNi4zLTYuMSw2LjRjMCwwLTAuMSwwLTAuMSwwSDg3LjNjLTMuNSwwLjEtNi41LTIuNy02LjUtNi4zDQoJQzgwLjgsMjAyLjUsODAuOCwyMDIuNSw4MC44LDIwMi41eiIvPg0KPC9zdmc+DQo=) center center/100% no-repeat } .file-item .process-fail { position: absolute; width: 100%; height: 100%; background-color: rgba(77, 77, 77, 0.8); position: absolute; top: 0; left: 0; z-index: 3000 } .file-item .process-fail div { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 48%; min-width: 300px; max-width: 390px; background: #FFF; font-size: 18px } .file-item .process-fail div p { text-align: center } .file-item .process-fail div p:nth-of-type(1) { text-align: right } .file-item .process-fail div p:nth-of-type(1) span { display: inline-block; height: 20px; width: 20px; margin: 8px 10px; background: url("../img/close-icon.svg") center center/70% no-repeat; overflow: hidden } .file-item .process-fail div p:nth-of-type(2) { margin-bottom: 30px } .file-item .process-fail div p:nth-of-type(2) span:nth-of-type(1) { padding-left: 40px; padding-right: 10px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTgzLjMgMTgzLjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE4My4zIDE4My4zOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I2ZmOGMyZn0NCjwvc3R5bGU+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTgzLjMiIGhlaWdodD0iMTgzLjMiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTEuNywwQzQwLjgsMCwwLDQwLjgsMCw5MS43YzAsNTAuOCw0MC44LDkxLjcsOTEuNyw5MS43czkxLjctNDAuOCw5MS43LTkxLjdDMTgzLjMsNDAuOCwxNDIuNSwwLDkxLjcsMA0KCQkgTTkxLjcsMTQwLjhjLTUsMC0xMC01LTEwLTEwYzAtNSw1LTEwLDEwLTEwczEwLDQuMiwxMCwxMEMxMDEuNywxMzUuOCw5Ni43LDE0MC44LDkxLjcsMTQwLjggTTEwMCwxMDIuNWMwLDYuNy0yLjUsMTEuNy04LjMsMTEuNw0KCQlzLTguMy01LTguMy0xMS43TDgwLDU0LjJjMC02LjcsNS0xMS43LDEwLjgtMTEuN2M1LjgsMCwxMS43LDUsMTEuNywxMS43TDEwMCwxMDIuNXoiLz4NCjwvZz4NCjwvc3ZnPg0K) 15px 2px/20px 20px no-repeat } .file-item .process-fail div p:nth-last-of-type(1) { margin-bottom: 20px } .file-item .process-fail a { display: inline-block; text-decoration: none; min-width: 145px; padding: 0 15px; height: 40px; line-height: 40px; border: 1px solid #4159ff; border-radius: 20px } .file-item .process-fail a:nth-of-type(1) { color: #4159ff; background-color: #fff } .file-item .process-fail a:nth-last-of-type(1) { color: #fff; background-color: #4159ff } .file-item .process-fail a:hover { text-decoration: none } .file-item .showIphone { display: inline-block; font-size: 12px } .file-item .delete { cursor: pointer; width: 18px; height: 18px; vertical-align: middle } .file-item .delete.forbid { cursor: not-allowed } .file-item .delete.forbid:hover { cursor: not-allowed } @media screen and (max-width: 768px) { .file-item .delete { margin: -5px 0 0 -10px; width: 20% } } .process-info .p1 { margin-top: 33px; font-size: 14px; color: #999 } .process-info .p1 .circle { width: 20px; height: 22px; margin-right: 10px; display: inline-block; vertical-align: text-bottom } .process-info .p1 .process { color: #4571E9; font-size: 18px } .process-info .p1 .length { color: #333333; font-size: 18px } .process-info .btns { width: 100%; display: -webkit-box; display: box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap } .process-info .btns .blue-btn { margin: 0 20px; cursor: pointer; margin-top: 47px; text-align: center; min-width: 301px; padding: 0 15px; height: 52px; line-height: 52px; color: #fff; font-size: 20px; background: #4571e9; border: 1px solid #4571e9; border-radius: 6px } @media screen and (max-width: 768px) { .process-info .btns .blue-btn { min-width: inherit; max-width: 98%; width: 301px; font-size: 16px; padding: 0 } } .process-info .btns .blue-btn:before { content: ""; vertical-align: sub; display: inline-block; width: 13px; height: 22px; margin-right: 12px } .process-info .btns .grey-btn { margin: 0 20px; cursor: pointer; margin-top: 47px; text-align: center; min-width: 301px; padding: 0 15px; height: 52px; line-height: 52px; color: #fff; font-size: 20px; background: #aaaaaa; border: 1px solid #4571e9; border-radius: 6px } @media screen and (max-width: 768px) { .process-info .btns .grey-btn { min-width: inherit; max-width: 98%; width: 301px; font-size: 16px; padding: 0 } } .process-info .btns .grey-btn :before { content: ""; vertical-align: sub; display: inline-block; width: 9px; height: 22px; margin-right: 11px } .process-info .btns .white-btn { margin: 0 20px; cursor: pointer; margin-top: 47px; text-align: center; min-width: 301px; padding: 0 15px; height: 52px; line-height: 52px; color: #4571E9; font-size: 20px; background: #fff; border: 1px solid #4571e9; border-radius: 6px } @media screen and (max-width: 768px) { .process-info .btns .white-btn { min-width: inherit; max-width: 98%; width: 301px; font-size: 16px; padding: 0 } } .process-info .btns .white-btn:before { content: ""; vertical-align: sub; display: inline-block; width: 13px; height: 22px; margin-right: 11px } .process-info .btns .down-btn span { padding-left: 25px } .finished .p2 { margin-top: 33px; font-size: 14px; color: #999 } .finished .success, .finished .failed { font-size: 18px; color: #333 } .finished .readd { font-size: 16px; color: #4571E9; cursor: pointer; margin-left: 5px } .filter-item { font-size: 16px; color: #666; margin: 0 auto; margin-top: 15px; box-sizing: border-box; text-align: left } .filter-item .file-name { color: #333; text-align: center } @media screen and (max-width: 950px) { .filter-item .video-Time { position: relative; top: 20px; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0) } .filter-item .video-Time span { position: absolute } .filter-item .video-Time span:nth-of-type(1) { left: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) } .filter-item .video-Time span:nth-of-type(2) { right: 0; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); transform: translateX(50%) } } @media screen and (max-width: 768px) { .filter-item { max-width: 100%; width: 461px; padding: 0 20px } .filter-item span { display: inline-block; margin-bottom: 15px } .filter-item ul { margin-left: 0px !important } .filter-item li { margin-bottom: 8px } .filter-item .slider-wrap { width: calc(100% - 60px); margin-left: 30px } } .filter-item ul { display: inline-block; margin-left: 23px } .filter-item li { display: inline-block; cursor: pointer; font-size: 14px; color: #333; padding-left: 27px } .filter-item li:last-child { margin-right: 0 !important } .filter-item li.checked { color: #4571E9 } .filter-item .compress-precedence { margin: 33px 0 14px } .filter-item .compress-precedence li { margin-right: 27px } .filter-item .compress-precedence li:nth-child(1), .filter-item .compress-precedence li:nth-child(2) { width: 97px } @media screen and (max-width: 768px) { .filter-item .compress-precedence li:nth-child(1), .filter-item .compress-precedence li:nth-child(2) { width: auto } } .filter-item .compress-type li { margin-right: 27px } .filter-item .compress-type-img { margin-bottom: 14px } .filter-item .compress-resolution { margin: 24px 0 0px } .filter-item .compress-resolution .selectBox { position: relative; margin-left: 5px; display: inline-block; cursor: pointer } @media screen and (max-width: 768px) { .filter-item .compress-resolution .selectBox { margin-left: 5px } } .filter-item .compress-resolution .selectBox_show { padding-left: 11px; width: 171px; height: 30px; line-height: 30px; background: #fff; border: 1px solid #ddd; border-radius: 5px } .filter-item .compress-resolution .selectBox_list { position: absolute; top: 30px; left: 0; z-index: 999; width: 100%; background: #fff } .filter-item .compress-resolution .selectBox_listLi { border: 1px solid #ddd; height: 30px; line-height: 30px; text-align: center; margin-top: -1px } video { display: block; margin: 0 auto; background-color: #FFF } .slider-wrap { width: 60%; height: 2px; margin: 16px auto 25px; background-color: #e8eaec; border-radius: 3px; vertical-align: middle; position: relative; line-height: 100%; box-sizing: border-box; cursor: pointer } .slider-wrap .video-preview { position: absolute; left: -50px; top: -15px; width: 40px; height: 40px; border-radius: 50%; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTAgNTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwIDUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30NCgkuc3Qxe29wYWNpdHk6MC41O2NsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTt9DQoJLnN0MntjbGlwLXBhdGg6dXJsKCNTVkdJRF82Xyk7ZmlsbDp0cmFuc3BhcmVudDt9DQoJLnN0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80Xyk7ZmlsbDojRkZGRkZGO30NCgkuc3Q0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTtmaWxsOm5vbmU7c3Ryb2tlOnRyYW5zcGFyZW50O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkNCjwvc3R5bGU+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJPC9jbGlwUGF0aD4NCgk8ZyBjbGFzcz0ic3QwIj4NCgkJPGRlZnM+DQoJCQk8cmVjdCBpZD0iU1ZHSURfM18iIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPg0KCQk8L2RlZnM+DQoJCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPg0KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfM18iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4NCgkJPC9jbGlwUGF0aD4NCgkJPGcgY2xhc3M9InN0MSI+DQoJCQk8Zz4NCgkJCQk8ZGVmcz4NCgkJCQkJPHJlY3QgaWQ9IlNWR0lEXzVfIiB4PSIxIiB5PSIxIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiLz4NCgkJCQk8L2RlZnM+DQoJCQkJPGNsaXBQYXRoIGlkPSJTVkdJRF82XyI+DQoJCQkJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzVfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJCQkJPC9jbGlwUGF0aD4NCgkJCQk8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNDksMjVjMCwxMy4zLTEwLjcsMjQtMjQsMjRTMSwzOC4zLDEsMjVTMTEuNywxLDI1LDFTNDksMTEuNyw0OSwyNSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0zMy45LDIyLjhsLTExLjMtNi41Yy0xLjctMS0zLjcsMC4yLTMuNywyLjJ2MTNjMCwxLjksMi4xLDMuMSwzLjcsMi4ybDExLjMtNi41DQoJCQlDMzUuNSwyNi4yLDM1LjUsMjMuOCwzMy45LDIyLjgiLz4NCgkJPGNpcmNsZSBjbGFzcz0ic3Q0IiBjeD0iMjUiIGN5PSIyNSIgcj0iMjQiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==) left center/40px auto no-repeat; background-color: #4159ff; box-shadow: 0 0 20px rgba(65, 89, 255, 0.4) } .slider-wrap .video-pause { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTg0LjIgMTg0LjIiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtjbGlwLXBhdGg6dXJsKCNhKTtmaWxsOm5vbmU7c3Ryb2tlOnRyYW5zcGFyZW50O3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMH0uc3Qxe2NsaXAtcGF0aDp1cmwoI2EpO2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwfTwvc3R5bGU+PGRlZnM+PHBhdGggaWQ9ImIiIGQ9Ik0wIDBoMTg0LjJ2MTg0LjJIMHoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJhIj48dXNlIHhsaW5rOmhyZWY9IiNiIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PHBhdGggY2xhc3M9InN0MCIgZD0iTTkyLjEgNUM0NC4xIDUgNSA0NC4xIDUgOTIuMWMwIDQ4IDM5LjEgODcuMSA4Ny4xIDg3LjEgNDggMCA4Ny4xLTM5LjEgODcuMS04Ny4xIDAtNDgtMzktODcuMS04Ny4xLTg3LjF6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTcyLjggNTguNnY3My41TTExMS40IDU4LjZ2NzMuNSIvPjwvc3ZnPg==) left center/44px auto no-repeat; background-color: #4159ff; border-radius: 50%; box-shadow: 0 0 20px rgba(65, 89, 255, 0.4) } .slider-wrap .slider-bar { height: 2px; background: #4159ff; border-radius: 3px; position: absolute } .slider-wrap .slider-split { height: 2px; background: #aabdff; border-radius: 3px; position: absolute; padding: 0 } .slider-wrap .slider-split.slider-bar { display: none } .slider-wrap .slider-line { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; border: none; padding: 0px; margin: 0px; opacity: 0; z-index: -1000; background-color: transparent; pointer-events: none } .slider-wrap .slider-button-wrap-left, .slider-wrap .slider-button-wrap-right { width: 12px; height: 25px; text-align: center; background-color: transparent; position: absolute; top: 2px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) } .slider-wrap .slider-button-wrap-left .slider-button, .slider-wrap .slider-button-wrap-right .slider-button { width: 12px; height: 25px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTguMSAzNC44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOC4xIDM0Ljg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7ZmlsbDojRkY4REExO30NCgkuc3Qxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRjhEQTE7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB5PSIwIiB3aWR0aD0iMTguMSIgaGVpZ2h0PSIzNC44Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTkuNCwwLjdjMC0wLjEtMC4xLTAuMS0wLjItMC4yTDkuMSwwLjVjMCwwLDAsMC0wLjEsMGMwLDAsMCwwLTAuMSwwTDguOSwwLjZjLTAuMSwwLTAuMSwwLjEtMC4yLDAuMkwwLjUsOS4zDQoJCXYyNC42YzAsMC4yLDAuMiwwLjQsMC40LDAuNGg4YzAsMCwwLDAsMC4xLDBjMCwwLDAsMCwwLjEsMGg4YzAuMiwwLDAuNC0wLjIsMC40LTAuNFY5LjNMOS40LDAuN3oiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNOS40LDAuN2MwLTAuMS0wLjEtMC4xLTAuMi0wLjJMOS4xLDAuNWMwLDAsMCwwLTAuMSwwYzAsMCwwLDAtMC4xLDBMOC45LDAuNmMtMC4xLDAtMC4xLDAuMS0wLjIsMC4yTDAuNSw5LjMNCgkJdjI0LjZjMCwwLjIsMC4yLDAuNCwwLjQsMC40aDhjMCwwLDAsMCwwLjEsMGMwLDAsMCwwLDAuMSwwaDhjMC4yLDAsMC40LTAuMiwwLjQtMC40VjkuM0w5LjQsMC43eiIvPg0KPC9nPg0KPC9zdmc+DQo=) center center/100% no-repeat; transition: all .2s linear; outline: 0 } .slider-wrap .slider-button-wrap-left .tooltip, .slider-wrap .slider-button-wrap-right .tooltip { line-height: 25px } .slider-wrap .slider-button-wrap-left:hover .tooltip-dark, .slider-wrap .slider-button-wrap-left:active .tooltip-dark, .slider-wrap .slider-button-wrap-right:hover .tooltip-dark, .slider-wrap .slider-button-wrap-right:active .tooltip-dark { display: block } .slider-wrap .slider-button-wrap-left:hover .slider-button, .slider-wrap .slider-button-wrap-left:active .slider-button, .slider-wrap .slider-button-wrap-right:hover .slider-button, .slider-wrap .slider-button-wrap-right:active .slider-button { border-color: rgba(87, 163, 243, 0.8) } .slider-wrap .slider-button-wrap-current { width: 15px; height: 15px; text-align: center; background-color: transparent; position: absolute; top: -7px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) } .slider-wrap .slider-button-wrap-current .slider-button { width: 15px; height: 15px; border: 2px solid #57a3f3; border-radius: 50%; background-color: #fff; transition: all .2s linear; outline: 0 } .slider-wrap .slider-button-wrap-current .tooltip { line-height: 18px } .slider-wrap .tooltip { display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .slider-wrap .tooltip .tooltip-rel { position: relative; width: inherit; display: inline-block } .slider-wrap .tooltip-inner { max-width: 250px; min-height: 34px; padding: 8px 12px; color: #fff; text-align: left; text-decoration: none; background-color: rgba(70, 76, 91, 0.9); border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); white-space: nowrap } .slider-wrap .tooltip-popper { display: block; visibility: visible; font-size: 12px; line-height: 1.5; position: absolute; z-index: 1060 } .slider-wrap .tooltip-dark { position: absolute; will-change: top, left; top: -47px; left: -13px; display: none } .slider-wrap .tooltip-popper[x-placement^=top] { padding: 5px 0 8px } .slider-wrap .video-Time { position: absolute; top: -16px; right: 0; -webkit-transform: translateX(110%); -moz-transform: translateX(110%); transform: translateX(110%) } .slider-wrap span { padding: 8px 0px; display: inline-block } @media screen and (max-width: 768px) { .slider-wrap span { padding: 8px 0px } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important } input[type="number"] { -moz-appearance: textfield } input { display: inline-block; width: 20px; border: 0px solid transparent } .file-item { position: relative; overflow: auto; font-size: 14px; text-align: left; width: 100%; padding: 50px 20px 20px; border-bottom: 1px solid #EEEEEE } .file-item.h323 { min-height: 323px; max-height: 323px } .file-item.h268 { min-height: 268px; max-height: 268px } .file-item.h230 { min-height: 230px; max-height: 230px } .file-item.h357 { min-height: 357px; max-height: 357px } @media screen and (max-width: 768px) { .file-item { max-height: 830px; padding: 20px 20px 30px } } .file-item .file-item-head { text-align: right; padding: 0 20px } .file-item .file-item-head span { color: #999 } .file-item span { color: #333; text-align: left } .file-item .file-item-list { min-height: 368px; position: relative } .file-item .file-item-list>div { background-color: #fff } .file-item .file-item-list>div:hover { background: #fff } .file-item .file-delete { position: absolute; cursor: pointer; height: 20px; width: 20px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTk5LjcgMTk5LjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5OS43IDE5OS44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGc+DQoJPGRlZnM+DQoJCTxyZWN0IGlkPSJTVkdJRF8xXyIgeD0iMCIgeT0iMCIgd2lkdGg9IjE5OS43IiBoZWlnaHQ9IjE5OS44Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTExNS4zLDk5LjlsODEuMy04MS40YzQuMS00LjIsNC4xLTEwLjgsMC0xNWwtMC40LTAuNGMtNC4xLTQuMS0xMC44LTQuMS0xNSwwTDk5LjksODQuNkwxOC42LDMuMQ0KCQlDMTQuNS0xLDcuOC0xLDMuNiwzLjFMMy4yLDMuNUMtMSw3LjUtMS4xLDE0LjIsMywxOC4zYzAuMSwwLjEsMC4xLDAuMSwwLjIsMC4ybDgxLjMsODEuNEwzLjIsMTgxLjNjLTQuMSw0LjItNC4xLDEwLjgsMCwxNQ0KCQlsMC41LDAuNGM0LjEsNC4xLDEwLjgsNC4xLDE1LDBsODEuMy04MS40bDgxLjMsODEuNGM0LjEsNC4xLDEwLjgsNC4xLDE1LDBsMC40LTAuNGM0LjEtNC4yLDQuMS0xMC44LDAtMTVMMTE1LjMsOTkuOUwxMTUuMyw5OS45eiINCgkJLz4NCjwvZz4NCjwvc3ZnPg0K) center center/60% no-repeat; border-radius: 50%; overflow: hidden; background-color: #909090; right: -10px; top: -10px; z-index: 100 } .file-item .file-type { width: 9% } .file-item .file-size { width: 11% } .file-item .file-size:lang(it) { width: 9% } .file-item .processed-size { width: 11% } .file-item .processed-size:lang(it) { width: 9% } .file-item .processed-size:lang(pl) { width: 9% } .file-item .processed-percent { width: 11% } .file-item .processed-percent:lang(it) { width: 9% } @media screen and (max-width: 768px) { .file-item .processed-percent { width: 20% } } .file-item .uploading { width: 87px; height: 85px; position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); transform: translate(-50%); line-height: 85px; font-size: 16px; color: #fff; text-align: center } .file-item .uploading span:nth-of-type(1) { display: block; width: 100%; top: 0; left: 0; height: 100%; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTcuOSA1Ni4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1Ny45IDU2LjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDF7b3BhY2l0eTowLjE7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30NCgkNCgkJLnN0MntjbGlwLXBhdGg6dXJsKCNTVkdJRF82Xyk7ZmlsbDpub25lO3N0cm9rZTojNDE1OUZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80Xyk7ZmlsbDojNDE1OUZGO30NCjwvc3R5bGU+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB5PSIwIiB3aWR0aD0iNTcuOSIgaGVpZ2h0PSI1Ni4yIi8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPGcgY2xhc3M9InN0MCI+DQoJCTxkZWZzPg0KCQkJPHJlY3QgaWQ9IlNWR0lEXzNfIiB5PSIwIiB3aWR0aD0iNTcuOSIgaGVpZ2h0PSI1Ni4yIi8+DQoJCTwvZGVmcz4NCgkJPGNsaXBQYXRoIGlkPSJTVkdJRF80XyI+DQoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8zXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8ZyBjbGFzcz0ic3QxIj4NCgkJCTxnPg0KCQkJCTxkZWZzPg0KCQkJCQk8cmVjdCBpZD0iU1ZHSURfNV8iIHg9IjEuNSIgeT0iMCIgd2lkdGg9IjU2LjIiIGhlaWdodD0iNTYuMiIvPg0KCQkJCTwvZGVmcz4NCgkJCQk8Y2xpcFBhdGggaWQ9IlNWR0lEXzZfIj4NCgkJCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfNV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4NCgkJCQk8L2NsaXBQYXRoPg0KCQkJCTxjaXJjbGUgY2xhc3M9InN0MiIgY3g9IjI5LjYiIGN5PSIyOC4xIiByPSIyNy4xIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPHBhdGggY2xhc3M9InN0MyIgZD0iTTQ5LjksMjguMWMwLDExLjItOS4xLDIwLjItMjAuMiwyMC4yUzkuNCwzOS4zLDkuNCwyOC4xUzE4LjQsNy45LDI5LjYsNy45UzQ5LjksMTYuOSw0OS45LDI4LjEiLz4NCgkJPHBhdGggY2xhc3M9InN0MyIgZD0iTTU3LjksNDJjMCwxLjMtMSwyLjMtMi4zLDIuM3MtMi4zLTEtMi4zLTIuM2MwLTEuMywxLTIuMywyLjMtMi4zUzU3LjksNDAuNyw1Ny45LDQyIi8+DQoJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik01LjgsMTcuNGMwLDEuNi0xLjMsMi45LTIuOSwyLjlTMCwxOSwwLDE3LjRjMC0xLjYsMS4zLTIuOSwyLjktMi45UzUuOCwxNS44LDUuOCwxNy40Ii8+DQoJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik03LDEwLjVDNywxMS4zLDYuMywxMiw1LjUsMTJDNC43LDEyLDQsMTEuMyw0LDEwLjVDNCw5LjcsNC43LDksNS41LDlDNi4zLDksNyw5LjcsNywxMC41Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=) center center/100% 100% no-repeat; -webkit-animation: "loadingAnimation"2s linear infinite alternate; -moz-animation: "loadingAnimation"2s linear infinite alternate; animation: "loadingAnimation"2s linear infinite alternate; position: absolute; z-index: -1 } .file-item .uploading span:nth-last-of-type(1) { display: inline-block; position: absolute; bottom: -70px; width: 250px; left: calc(50% - 125px); text-align: center } .file-item .uploading:lang(pl) { width: 16% } @media screen and (max-width: 768px) { .file-item .uploading { width: 20% } } .file-item .processing { position: absolute; width: 100%; height: 100%; background-color: #fff; top: 0; left: 0; z-index: 3000; pointer-events: auto; color: #333 } .file-item .processing div { display: inline-block; margin-top: 204px; margin-left: 50%; text-align: center; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .file-item .processing span { display: block; text-align: center; font-size: 16px } .file-item .processing .uploading { position: relative } @media (max-width: 768px) { .file-item .processing .uploading { width: 100% } } .file-item .process-done { pointer-events: auto; width: 100%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 3000 } .file-item .process-done div { display: inline-block; margin-top: 204px; margin-left: 50%; text-align: center; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .file-item .process-done span { display: block; text-align: center; color: #333; font-size: 16px } .file-item .process-done span:nth-of-type(1) { padding-left: 35px; font-size: 18px; margin-bottom: 60px; display: inline-block; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTA2LjUgMTA2LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwNi41IDEwNi41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkY4REExO30NCgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1My4zIiBjeT0iNTMuMyIgcj0iNTMuMyIvPg0KPHBvbHlsaW5lIGNsYXNzPSJzdDEiIHBvaW50cz0iMjYuMiw1Mi45IDQ0LjUsNzEuMiA4MC4zLDM1LjMgIi8+DQo8L3N2Zz4NCg==) left center/20px 20px no-repeat } .file-item .process-done span:nth-of-type(2) { width: 98px; height: 98px; font-size: 20px; margin: 0 auto; border-radius: 50%; box-shadow: 0px 6px 16px 0px rgba(84, 218, 166, 0.69); margin-bottom: 30px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzY2LjUgMzY2LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM2Ni41IDM2Ni41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojMzJEODk4O30NCgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTgzLjIiIGN5PSIxODMuMiIgcj0iMTgzLjIiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMzIsMjQ3LjNoMTMwLjhjNS42LTAuMSwxMC4xLTQuNiwxMC4xLTEwLjJWMTI5LjRjMC01LjYtNC41LTEwLjItMTAuMS0xMC4ySDEzMlYyNDcuM3ogTTExOS4yLDI0Ny4zVjExOS4yDQoJaC0xNS41Yy01LjYsMC4xLTEwLjEsNC42LTEwLjEsMTAuMlYyMzdjMCw1LjYsNC41LDEwLjIsMTAuMSwxMC4ySDExOS4yTDExOS4yLDI0Ny4zeiBNMjcwLjMsMTA2LjRjOC40LDAuMSwxNS4yLDYuOCwxNS40LDE1LjINCgl2MTIzLjJjMCw4LjQtNi44LDE1LjItMTUuMiwxNS4yYzAsMC0wLjEsMC0wLjEsMEg5Ni4xYy04LjUtMC4xLTE1LjMtNi45LTE1LjQtMTUuNFYxMjEuNmMwLTguNCw2LjgtMTUuMiwxNS4yLTE1LjJjMCwwLDAuMSwwLDAuMSwwDQoJTDI3MC4zLDEwNi40TDI3MC4zLDEwNi40eiBNMjM0LjUsMjAyLjJWMTY0djB2LTUxLjJjMC0zLjUsMi45LTYuNCw2LjQtNi40czYuNCwyLjksNi40LDYuNHY0NC44aDMxLjljMy41LDAuMSw2LjMsMi45LDYuMyw2LjQNCgljMC4xLDMuNS0yLjcsNi4zLTYuMSw2LjRjMCwwLTAuMSwwLTAuMSwwaC0zMS45djI1LjZoMzEuOWMzLjUsMC4xLDYuMywyLjksNi4zLDYuNGMwLjEsMy41LTIuNyw2LjMtNi4xLDYuNGMwLDAtMC4xLDAtMC4xLDBoLTMxLjkNCgl2NDQuOGMwLDMuNS0yLjksNi40LTYuNCw2LjRjLTMuNSwwLTYuNC0yLjktNi40LTYuNGwwLDB2LTUxLjJ2MEwyMzQuNSwyMDIuMkwyMzQuNSwyMDIuMnogTTE2NCwxNjMuOWMwLTMuNSwyLjQtNSw1LjYtMy41DQoJbDM0LjIsMTcuMmM2LjMsMy4yLDYuMiw4LjMsMCwxMS40bC01LDIuNkwxNjkuOCwyMDZjLTMuMiwxLjUtNS44LDAtNS44LTMuNVYxNjMuOUwxNjQsMTYzLjl6IE04MC44LDE2NGMtMC4xLTMuNSwyLjctNi4zLDYuMi02LjQNCgljMCwwLDAuMSwwLDAuMSwwaDM4LjRjMy41LTAuMSw2LjUsMi43LDYuNSw2LjNjMCwwLDAsMC4xLDAsMC4xYzAuMSwzLjUtMi43LDYuMy02LjIsNi40YzAsMC0wLjEsMC0wLjEsMEg4Ny4zDQoJYy0zLjUsMC4xLTYuNS0yLjctNi41LTYuM0M4MC44LDE2NC4xLDgwLjgsMTY0LjEsODAuOCwxNjR6IE04MC44LDIwMi41Yy0wLjEtMy41LDIuNy02LjMsNi4yLTYuNGMwLDAsMC4xLDAsMC4xLDBoMzguNA0KCWMzLjUtMC4xLDYuNSwyLjcsNi41LDYuM2MwLDAsMCwwLjEsMCwwLjFjMC4xLDMuNS0yLjcsNi4zLTYuMSw2LjRjMCwwLTAuMSwwLTAuMSwwSDg3LjNjLTMuNSwwLjEtNi41LTIuNy02LjUtNi4zDQoJQzgwLjgsMjAyLjUsODAuOCwyMDIuNSw4MC44LDIwMi41eiIvPg0KPC9zdmc+DQo=) center center/100% no-repeat } .file-item .process-fail { position: absolute; width: 100%; height: 100%; background-color: rgba(77, 77, 77, 0.8); position: absolute; top: 0; left: 0; z-index: 3000 } .file-item .process-fail div { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 48%; min-width: 300px; max-width: 390px; background: #FFF; font-size: 18px } .file-item .process-fail div p { text-align: center } .file-item .process-fail div p:nth-of-type(1) { text-align: right } .file-item .process-fail div p:nth-of-type(1) span { display: inline-block; height: 20px; width: 20px; margin: 8px 10px; background: url("../img/common/svg/btn-closed.svg?341d79a6") center center/70% no-repeat; overflow: hidden } .file-item .process-fail div p:nth-of-type(2) { margin-bottom: 30px } .file-item .process-fail div p:nth-of-type(2) span:nth-of-type(1) { padding-left: 40px; padding-right: 10px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTgzLjMgMTgzLjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE4My4zIDE4My4zOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I2ZmOGMyZn0NCjwvc3R5bGU+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTgzLjMiIGhlaWdodD0iMTgzLjMiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTEuNywwQzQwLjgsMCwwLDQwLjgsMCw5MS43YzAsNTAuOCw0MC44LDkxLjcsOTEuNyw5MS43czkxLjctNDAuOCw5MS43LTkxLjdDMTgzLjMsNDAuOCwxNDIuNSwwLDkxLjcsMA0KCQkgTTkxLjcsMTQwLjhjLTUsMC0xMC01LTEwLTEwYzAtNSw1LTEwLDEwLTEwczEwLDQuMiwxMCwxMEMxMDEuNywxMzUuOCw5Ni43LDE0MC44LDkxLjcsMTQwLjggTTEwMCwxMDIuNWMwLDYuNy0yLjUsMTEuNy04LjMsMTEuNw0KCQlzLTguMy01LTguMy0xMS43TDgwLDU0LjJjMC02LjcsNS0xMS43LDEwLjgtMTEuN2M1LjgsMCwxMS43LDUsMTEuNywxMS43TDEwMCwxMDIuNXoiLz4NCjwvZz4NCjwvc3ZnPg0K) 15px 2px/20px 20px no-repeat } .file-item .process-fail div p:nth-last-of-type(1) { margin-bottom: 20px } .file-item .process-fail a { display: inline-block; text-decoration: none; min-width: 145px; padding: 0 15px; height: 40px; line-height: 40px; border: 1px solid #4159ff; border-radius: 20px } .file-item .process-fail a:nth-of-type(1) { color: #4159ff; background-color: #fff } .file-item .process-fail a:nth-last-of-type(1) { color: #fff; background-color: #4159ff } .file-item .process-fail a:hover { text-decoration: none } .file-item .showIphone { display: inline-block; font-size: 12px } .file-item .delete { cursor: pointer; width: 18px; height: 18px; vertical-align: middle } .file-item .delete.forbid { cursor: not-allowed } .file-item .delete.forbid:hover { cursor: not-allowed } @media screen and (max-width: 768px) { .file-item .delete { margin: -5px 0 0 -10px; width: 20% } } .process-info .p1 { margin-top: 33px; font-size: 14px; color: #999 } .process-info .p1 .circle { width: 20px; height: 22px; margin-right: 10px; display: inline-block; vertical-align: text-bottom } .process-info .p1 .process { color: #4571E9; font-size: 18px } .process-info .p1 .length { color: #333333; font-size: 18px } .process-info .btns { width: 100%; display: -webkit-box; display: box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; flex-wrap: wrap } .process-info .btns .blue-btn { margin: 0 20px; cursor: pointer; margin-top: 47px; text-align: center; min-width: 301px; padding: 0 15px; height: 52px; line-height: 52px; color: #fff; font-size: 20px; background: #4571e9; border: 1px solid #4571e9; border-radius: 6px } @media screen and (max-width: 768px) { .process-info .btns .blue-btn { min-width: inherit; max-width: 98%; width: 301px; font-size: 16px; padding: 0 } } .process-info .btns .blue-btn:before { content: ""; vertical-align: sub; display: inline-block; width: 13px; height: 22px; margin-right: 12px } .process-info .btns .grey-btn { margin: 0 20px; cursor: pointer; margin-top: 47px; text-align: center; min-width: 301px; padding: 0 15px; height: 52px; line-height: 52px; color: #fff; font-size: 20px; background: #aaaaaa; border: 1px solid #4571e9; border-radius: 6px } @media screen and (max-width: 768px) { .process-info .btns .grey-btn { min-width: inherit; max-width: 98%; width: 301px; font-size: 16px; padding: 0 } } .process-info .btns .grey-btn :before { content: ""; vertical-align: sub; display: inline-block; width: 9px; height: 22px; margin-right: 11px } .process-info .btns .white-btn { margin: 0 20px; cursor: pointer; margin-top: 47px; text-align: center; min-width: 301px; padding: 0 15px; height: 52px; line-height: 52px; color: #4571E9; font-size: 20px; background: #fff; border: 1px solid #4571e9; border-radius: 6px } @media screen and (max-width: 768px) { .process-info .btns .white-btn { min-width: inherit; max-width: 98%; width: 301px; font-size: 16px; padding: 0 } } .process-info .btns .white-btn:before { content: ""; vertical-align: sub; display: inline-block; width: 13px; height: 22px; margin-right: 11px } .process-info .btns .down-btn span { padding-left: 25px } .finished .p2 { margin-top: 33px; font-size: 14px; color: #999 } .finished .success, .finished .failed { font-size: 18px; color: #333 } .finished .readd { font-size: 16px; color: #4571E9; cursor: pointer; margin-left: 5px } .filter-item { font-size: 16px; color: #666; margin: 0 auto; margin-top: 15px; box-sizing: border-box; text-align: left } .filter-item .file-name { color: #333; text-align: center } @media screen and (max-width: 950px) { .filter-item .video-Time { position: relative; top: 20px; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0) } .filter-item .video-Time span { position: absolute } .filter-item .video-Time span:nth-of-type(1) { left: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) } .filter-item .video-Time span:nth-of-type(2) { right: 0; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); transform: translateX(50%) } } @media screen and (max-width: 768px) { .filter-item { max-width: 100%; width: 461px; padding: 0 20px } .filter-item span { display: inline-block; margin-bottom: 15px } .filter-item ul { margin-left: 0px !important } .filter-item li { margin-bottom: 8px } .filter-item .slider-wrap { width: calc(100% - 60px); margin-left: 30px } } .filter-item ul { display: inline-block; margin-left: 23px } .filter-item li { display: inline-block; cursor: pointer; font-size: 14px; color: #333; padding-left: 27px } .filter-item li:last-child { margin-right: 0 !important } .filter-item li.checked { color: #4571E9 } .filter-item .compress-precedence { margin: 33px 0 14px } .filter-item .compress-precedence li { margin-right: 27px } .filter-item .compress-precedence li:nth-child(1), .filter-item .compress-precedence li:nth-child(2) { width: 97px } @media screen and (max-width: 768px) { .filter-item .compress-precedence li:nth-child(1), .filter-item .compress-precedence li:nth-child(2) { width: auto } } .filter-item .compress-type li { margin-right: 27px } .filter-item .compress-type-img { margin-bottom: 14px } .filter-item .compress-resolution { margin: 24px 0 0px } .filter-item .compress-resolution .selectBox { position: relative; margin-left: 5px; display: inline-block; cursor: pointer } @media screen and (max-width: 768px) { .filter-item .compress-resolution .selectBox { margin-left: 5px } } .filter-item .compress-resolution .selectBox_show { padding-left: 11px; width: 171px; height: 30px; line-height: 30px; background: #fff; border: 1px solid #ddd; border-radius: 5px } .filter-item .compress-resolution .selectBox_list { position: absolute; top: 30px; left: 0; z-index: 999; width: 100%; background: #fff } .filter-item .compress-resolution .selectBox_listLi { border: 1px solid #ddd; height: 30px; line-height: 30px; text-align: center; margin-top: -1px } .msg-box { position: absolute; line-height: 30px; padding: 0px 20px; top: 30px; z-index: 3000; vertical-align: middle; border-radius: 15px; color: #ff8503 } @media (max-width: 768px) { .msg-box { width: 100%; top: 100%; text-align: center; left: 0; height: 30px } } .delete-video { width: 100%; height: 100%; background-color: rgba(77, 77, 77, 0.8); position: absolute; top: 0; left: 0; z-index: 30000; color: #333 } .delete-video div { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 48%; min-width: 300px; max-width: 390px; min-height: 209px; background: #FFF; font-size: 18px } .delete-video div p { text-align: center } .delete-video div p:nth-of-type(1) { text-align: right } .delete-video div p:nth-of-type(1) span { display: inline-block; height: 20px; width: 20px; margin: 8px 10px; background: url("../img/common/svg/btn-closed.svg?341d79a6") center center/70% no-repeat; overflow: hidden } .delete-video div p:nth-of-type(2) { margin-bottom: 30px; padding: 0 20px } .delete-video div p:nth-last-of-type(1) { margin-bottom: 20px } .delete-video a { display: inline-block; text-decoration: none; min-width: 145px; padding: 0 15px; height: 40px; line-height: 40px; border: 1px solid #4159ff; border-radius: 20px } .delete-video a:nth-of-type(1) { color: #4159ff; background-color: #fff } .delete-video a:nth-last-of-type(1) { color: #fff; background-color: #4159ff } .delete-video a:hover { text-decoration: none } @keyframes processRotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg) } 50% { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg) } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); transform: rotate(-360deg) } } .btn-close { cursor: pointer } #app.fullScreen { height: 100% } .object { background: #54daa6 } @keyframes loadingAnimation { 0% { -webkit-transform: rotateZ(60deg); -moz-transform: rotateZ(60deg); transform: rotateZ(60deg) } 25% { -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); transform: rotate(100deg) } 50% { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); transform: rotate(300deg) } 75% { -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); transform: rotate(100deg) } 100% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg) } } .crop-range { position: relative; box-sizing: border-box; text-align: center; padding: 10px 20px } .crop-range div { display: inline-block; vertical-align: top } .crop-range span { margin-bottom: 15px; display: inline-block; vertical-align: top; padding: 0px; margin: 0 10px } .crop-range .crop-input { height: 30px; border: 1px solid #999; border-radius: 15px; overflow: hidden; padding: 0 24px; margin-bottom: 10px } .crop-range .crop-input span { width: 8px; line-height: 28px; height: 28px; float: left; margin: 0; padding: 0 } .crop-range .crop-input input { float: left; color: #333; width: 22px; line-height: 28px } .crop-range .block { display: block; margin-bottom: 10px; text-align: center; height: 30px; line-height: 30px; margin-right: 15px } .crop-range .block span { display: inline-block; margin: 0 } .crop-range .block button { height: 30px; line-height: 28px; padding: 0 8px; width: 30px; position: relative; border: 0px solid transparent; margin-right: 30px } .crop-range .block button span { display: block; width: 300px; position: absolute; top: -30px; left: -135px; text-align: center; display: none } .crop-range .block button:hover span { display: block } @media (max-width: 768px) { .crop-range .block button { margin-right: 0 } .crop-range .block button:hover span { display: none } } .crop-range .block button:nth-last-of-type(1) { margin-right: 0px } .crop-range .block button.rotate-r { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjguNSAyNS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOC41IDI1LjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJDQoJCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzMzMztzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnPg0KCTxkZWZzPg0KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9IjAiIHdpZHRoPSIyOC41IiBoZWlnaHQ9IjI1LjIiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuNywyMWMwLDAtMC4xLDAuMS0wLjEsMC4xYzAsMC0wLjEsMC4xLTAuMSwwLjFjLTIuMSwxLjktNC44LDMuMS03LjksMy4xQzYuMiwyNC4yLDEsMTksMSwxMi42DQoJCVM2LjIsMSwxMi42LDFDMTksMSwyNC4yLDYuMiwyNC4yLDEyLjZjMCwwLjgtMC4xLDEuNi0wLjIsMi4zIi8+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTIwLjUsMTEuNkMyMC43LDExLjcsMjQsMTUsMjQsMTUiLz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjcuNSwxMS42QzI3LjMsMTEuNywyNCwxNSwyNCwxNSIvPg0KPC9nPg0KPC9zdmc+DQo=) center center/auto 80% no-repeat } .crop-range .block button.rotate-l { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjguNSAyNS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOC41IDI1LjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJDQoJCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzMzMztzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnPg0KCTxkZWZzPg0KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9IjAiIHdpZHRoPSIyOC41IiBoZWlnaHQ9IjI1LjIiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy44LDIxYzAsMCwwLjEsMC4xLDAuMSwwLjFjMCwwLDAuMSwwLjEsMC4xLDAuMWMyLjEsMS45LDQuOCwzLjEsNy45LDMuMWM2LjQsMCwxMS42LTUuMiwxMS42LTExLjYNCgkJUzIyLjMsMSwxNS45LDFDOS41LDEsNC4zLDYuMiw0LjMsMTIuNmMwLDAuOCwwLjEsMS42LDAuMiwyLjMiLz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOCwxMS42QzcuOCwxMS43LDQuNSwxNSw0LjUsMTUiLz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMSwxMS42QzEuMiwxMS43LDQuNSwxNSw0LjUsMTUiLz4NCjwvZz4NCjwvc3ZnPg0K) center center/auto 80% no-repeat } .crop-range .block button.rotate-h { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjUuMSAyNy4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNS4xIDI3LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJDQoJCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzMzMztzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkNCgkJLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7ZmlsbDpub25lO3N0cm9rZTojMzMzO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGc+DQoJPGRlZnM+DQoJCTxyZWN0IGlkPSJTVkdJRF8xXyIgeT0iMCIgd2lkdGg9IjI1LjEiIGhlaWdodD0iMjcuMyIvPg0KCTwvZGVmcz4NCgk8Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj4NCgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4NCgk8L2NsaXBQYXRoPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMSw3LjUgMSwxOS4zIDcsMTMuMyAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIyNC4xLDcuNSAyNC4xLDE5LjMgMTguMSwxMy4zIAkiLz4NCgk8bGluZSBjbGFzcz0ic3QxIiB4MT0iMTIuNSIgeTE9IjEiIHgyPSIxMi41IiB5Mj0iMjYuMyIvPg0KPC9nPg0KPC9zdmc+DQo=) center center/auto 80% no-repeat } .crop-range .block button.rotate-v { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjYuNiAyNS4xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNi42IDI1LjE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJDQoJCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzMzMztzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkNCgkJLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7ZmlsbDpub25lO3N0cm9rZTojMzMzO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJDQoJCS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO2ZpbGw6bm9uZTtzdHJva2U6IzMzMztzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkNCgkJLnN0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80Xyk7ZmlsbDpub25lO3N0cm9rZTojMzMzO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGc+DQoJPGRlZnM+DQoJCTxyZWN0IGlkPSJTVkdJRF8xXyIgeD0iNDcuMiIgeT0iMy43IiB3aWR0aD0iMjUuMSIgaGVpZ2h0PSIyNy4zIi8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPg0KCTwvY2xpcFBhdGg+DQoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI3MS4yLDIzLjQgNzEuMiwxMS43IDY1LjIsMTcuNiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI0OC4yLDIzLjQgNDguMiwxMS43IDU0LjEsMTcuNiAJIi8+DQoJPGxpbmUgY2xhc3M9InN0MSIgeDE9IjU5LjciIHkxPSIyOS45IiB4Mj0iNTkuNyIgeTI9IjQuNyIvPg0KPC9nPg0KPGc+DQoJPGRlZnM+DQoJCTxyZWN0IGlkPSJTVkdJRF8zXyIgeD0iLTAuNiIgeT0iMCIgd2lkdGg9IjI3LjMiIGhlaWdodD0iMjUuMSIvPg0KCTwvZGVmcz4NCgk8Y2xpcFBhdGggaWQ9IlNWR0lEXzRfIj4NCgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfM18iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4NCgk8L2NsaXBQYXRoPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDIiIHBvaW50cz0iMTkuMSwxIDcuNCwxIDEzLjMsNyAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MiIgcG9pbnRzPSIxOS4xLDI0LjEgNy40LDI0LjEgMTMuMywxOC4xIAkiLz4NCgk8bGluZSBjbGFzcz0ic3QzIiB4MT0iMjUuNiIgeTE9IjEyLjUiIHgyPSIwLjQiIHkyPSIxMi41Ii8+DQo8L2c+DQo8L3N2Zz4NCg==) center center/auto 80% no-repeat } @media screen and (max-width: 950px) { .crop-range { padding: 30px 0px 0px } .crop-range>span { margin-top: 10px } .crop-range .crop-input { margin-bottom: 0px; margin-top: 10px } } @media (max-width: 768px) { .crop-range .block>span { display: block; width: 70px; float: left } .crop-range .options { display: flex; justify-content: space-around; text-align: left; width: calc(100%); float: left } } video::-webkit-media-controls-enclosure { display: none !important } video::-webkit-media-controls { display: none !important } .file-item { overflow: hidden } .file-item .process-done { height: 100% } [v-cloak] { display: none !important } .counted-share-vertical { display: none } .black-header { background: #fafafa } .black-header .nav>* { color: #333 } .black-header:hover .header-account-entry>span { color: #fff } .black-header:hover .nav>* { color: #fff } .btn-group { position: relative; margin-top: 40px; width: 100%; display: flex; justify-content: center } .btn-group .download { z-index: 1; text-align: center; position: relative; margin-right: 20px; display: inline-block; width: 200px; font-size: 18px; height: 40px; line-height: 40px; border: 1px solid #4159ff; border-radius: 20px; text-decoration: none; color: #4159ff; -webkit-transition: -webkit-transform .3s, box-shadow 0.3s; -moz-transition: -moz-transform .3s, box-shadow 0.3s; transition: transform .3s, box-shadow 0.3s } @media screen and (max-width: 768px) { .btn-group .download { font-size: 16px } } .btn-group .download:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); transform: translateY(-5px) }