cite, i { font-style: normal; } #banner .bannerman, .header .header_slider { -webkit-transform: -webkit-translate(-50%, 0); } #compare table, #repuirements table, .products table, table { border-collapse: collapse; } * { font-family: Arial, Helvetica, sans-serif; } body, button, dd, dl, dt, h1, h2, h3, h4, h5, h6, html, input, li, ol, p, ul { margin: 0; padding: 0; } b, em, h1, h2, h3, h4, h5, h6 { font-weight: 400; } body { line-height: 22px; -webkit-tap-highlight-color: transparent; } .product_main_box, button, input { line-height: normal; } ol, ul { list-style-type: none; } a { color: #222; text-decoration: none; } a:hover { text-decoration: underline; cursor: pointer; } i { display: inline-block; } cite { float: right; } img { border: 0; -ms-interpolation-mode: bicubic; display: block; } svg:not(:root) { overflow: hidden; } figure, form { margin: 0; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } .center, .product_main_box { -webkit-box-sizing: border-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-spacing: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .header { background: #fff; z-index: 2; -webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.04); } .product_main_box { position: absolute; left: 0; top: 64px; width: 100%; background: #fff; padding: 20px 0 24px; box-sizing: border-box; -webkit-box-shadow: 0 13px 13px rgba(65, 65, 65, 0.2); box-shadow: 0 13px 13px rgba(65, 65, 65, 0.2); display: none; overflow: hidden; z-index: 9; } .product_main_box.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .product_main > div > span { font-size: 24px; color: #222; margin-bottom: 20px; display: block; font-weight: 550; padding-left: 9px; } .product_main > div > div { max-width: 562px; width: 100%; } .product_main > div > span i { width: 26px; height: 26px; background: url(/images/index/menu-icon.png); display: inline-block; vertical-align: -4px; } .toggle_nav_box { z-index: 10; } .toggle_nav_box li > i { background: url(/images/index/drop-2.png) no-repeat; width: 16px !important; height: 10px !important; display: inline-block; margin-left: 9px; } .toggle_nav_box li > i.active { background: url(/images/index/drop-1.png) no-repeat; } .product_main > div > span i.mac { background-position-y: -188px; margin-left: 5px; } .product_main > div > span i.win { background-position-y: -162px; margin-left: 7px; } .product_main > div.online > span i { background-position-y: -214px; margin-left: 10px; vertical-align: -4px; height: 26px; } .product_main > div:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #4896e9; background: -webkit-gradient( linear, left top, right top, from(#4896e9), to(#74dedf) ); background: linear-gradient(90deg, #4896e9, #74dedf); } .single_product { width: 261px; margin-bottom: 36px; } .single_product > a:first-child { text-decoration: none; display: block; overflow: hidden; border: 1px solid transparent; border-bottom-color: #999; padding: 10px; } .single_product > a:hover { text-decoration: none; border: 1px solid #f8f9fa; background: #f8f9fa; border-bottom: 1px solid #999; } .single_product .title { font-size: 16px; color: #222; display: block; margin-bottom: 10px; font-weight: 550; } .single_product p { font-size: 14px; color: #666; line-height: 18px; text-align: left; } .single_product > div { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 7px; padding-left: 10px; } .single_product > div a { font-size: 14px; color: #0197f1; line-height: 18px; } .single_product > div a.down { margin-right: 18px; padding-right: 18px; border-right: 1px solid #999; } .product_box { max-width: 276px; width: 100%; margin-top: 48px; } .product_box > a:hover { text-decoration: none; border: 1px solid #f8f9fa; background: #f8f9fa; border-bottom: 1px solid #999; } .product_box > a { display: block; padding: 10px; border: 1px solid transparent; border-bottom-color: #999; } .product_box a span { font-size: 16px; color: #222; margin-bottom: 10px; display: block; font-weight: 550; } .product_box a p { font-size: 14px; color: #666; line-height: 18px; text-align: left; } .product_box div { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 7px; padding-left: 10px; } .product_box div a { font-size: 14px; color: #37d3ff; line-height: 18px; } .product_box div a.down { margin-right: 18px; padding-right: 18px; border-right: 1px solid #999; } .center { max-width: 1200px; width: 100%; margin: auto; box-sizing: border-box; } .header > .center > ul { line-height: 64px; float: right; } .header > .center > ul > li { position: relative; float: left; display: block; padding: 0; margin-left: 50px; font-size: 16px; color: #4c5562; background-color: #fff; width: unset; } .header > .center > ul li > a { font-size: 16px; color: #4c5562; white-space: nowrap; } .header > .center > ul li > a.cuur { display: inline-block; padding: 0 15px; height: 32px; line-height: 32px; background: #6358f4; border-radius: 16px; text-align: center; color: #fff; } .header > .center > ul li:hover > a.cuur, .header > .center > ul li > a.cuur:hover { color: #fff; } .header > .center > ul li:hover > a { color: #6358f4; text-decoration: none; } .header > .center > ul li:hover > span { color: #6358f4; cursor: pointer; } .header > .center > ul li img { vertical-align: middle; } .header > .center > ul li img .header > .center > ul li.support { margin-right: 36px; } .header > .center > ul li > i { width: 12px; height: 10px; } .purchase, .search { width: 30px; height: 30px; display: none; } .search { background: url(/images/index/header-icon.png) no-repeat; } .purchase { background: url(/images/index/header-icon.png) 0 -30px no-repeat; margin-left: 20px; } .purchase, .search, .toggle_nav { float: right; margin-top: 22px; } .purchase, .search { margin-top: 17px; } .toggle_nav { display: none; width: 26px; height: 18px; background: url(/images/index/toggle.png) no-repeat; } .toggle_nav.active { background: url(/images/index/close-menu.png) center no-repeat; } .header .logo { float: left; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 124px; } .header .logo img { width: 100%; } .header_top_bg { display: block; margin: 0 auto 30px; width: 100%; height: 2px; background: #945fff; background: -webkit-gradient( linear, left top, right top, from(#945fff), to(#465cff) ); background: linear-gradient(90deg, #945fff 0, #465cff 100%); } .header > .center > ul > li:nth-child(1) .header_slider { width: 1000px; } .header > .center > ul > li:nth-child(2) .header_slider { width: 710px; } .header > .center > ul > li:nth-child(2) .header_slider li a img { display: inline-block; width: 34px; height: 34px; margin-left: 0; margin-right: 16px; } .header > .center > ul > li:nth-child(2) .header_slider div.feature li { margin: 17px 0; text-align: left; } .header > .center > ul > li:nth-child(2) .header_slider div ul { width: 100%; } .header > .center > ul > li:nth-child(2) .header_slider div.feature li:nth-child(1) { margin-top: 10px; } .header .header_slider { display: none; margin: 0 auto; position: absolute; z-index: 7; background-color: #fff; left: 50%; top: 64px; transform: -webkit-translate(-50%, 0); transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); -webkit-box-shadow: 0 8px 9px 0 rgb(0 0 0 / 8%); box-shadow: 0 8px 9px 0 rgb(0 0 0 / 8%); padding-top: 37px; padding-bottom: 37px; } .header .header_slider.active { display: block; } .header .header_slider .slider_inner { display: inline-block; margin: 0 40px; width: 240px; vertical-align: top; } .header .header_slider .slider_inner:nth-child(2) ul:nth-child(2) { margin-bottom: 13px; } .header .header_slider .slider_inner.feature { width: 270px; } .header .header_slider .left { margin: 0; width: 100%; max-width: 205px; padding-top: 17px; background-color: #f6f7f9; } .header .header_slider .title { display: block; width: 100%; max-width: 205px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 10px 15px; font-size: 16px; line-height: 32px; color: #1e1e1e; cursor: pointer; } .header .header_slider .title.active { background: #ebebeb; color: #6358f4; } .header .header_slider .title img { display: inline-block; margin-right: 12px; vertical-align: -10px; } .header .header_slider p { display: block; font-size: 20px; font-weight: 700; color: #121212; line-height: 47px; } .header .header_slider ul { width: 700px; margin: 0; } .header .header_slider li { font-size: 16px; color: #535d69; line-height: 32px; height: 30px; } .header .header_slider li img { display: inline-block; margin-left: 10px; vertical-align: -10px; } .header .header_slider li:nth-child(2n + 1) { max-width: 300px; } .header .header_slider li:nth-child(2n) { max-width: 220px; } .background-footer { background-color: #1d233e; padding-top: 50px; } .background-footer a { text-decoration: none; } .background-footer a:hover { text-decoration: underline; } .footer { width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 20px; overflow: visible; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer .footer-part { float: left; margin: 0; } .footer .footer-part .title { color: #fff; text-align: left; width: 100%; clear: both; font-size: 20px; line-height: 25px; margin: 0 auto; padding-top: 10px; } .footer-part:nth-child(1) { width: 19%; min-width: 185px; } .footer .footer-part:nth-child(1) .footer_logo { display: block; padding: 0; margin: 0 0 24px; float: none; overflow: hidden; } .footer .footer-part:nth-child(1) .footer_btn { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin-bottom: 22px; width: 178px; height: 36px; background: #886cf6; border-radius: 4px; font-size: 16px; font-weight: 400; color: #fff; line-height: 36px; text-align: center; text-decoration: none; } .footer .footer-part:nth-child(1) .down_btn i { display: inline-block; width: 20px; height: 20px; background: url(/images/resource/down.svg) no-repeat; vertical-align: middle; margin: 0 10px 0 0; } .footer .footer-part:nth-child(1) .footer_btn:hover { background: #9b81fe; } .footer .footer-part:nth-child(1) .buy_btn i { display: inline-block; width: 20px; height: 20px; background: url(/images/index/footer-earth.png) no-repeat; vertical-align: middle; margin: 0 10px 0 15px; } .footer-part:nth-child(2) { width: 80%; } .footer-part:nth-child(3) { -webkit-box-sizing: border-box; box-sizing: border-box; width: 19%; min-width: 185px; padding-left: 20px; } .footer .footer-part img { float: left; padding: 30px 20px 10px 0; margin-bottom: 20px; } .footer .footer-part ul { padding: 0; margin: 14px 0 0; } .footer .footer-part ul li { font-size: 14px; line-height: 30px; } .footer .footer-part a img { padding: 0; margin: 13px 0 0; } .footer .footer-part a { display: inline-block; color: #fff; } .footer .footer-list { float: left; width: 23%; min-height: 184px; padding: 0 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .footer-list:nth-child(2) { width: 28%; } .footer-list:nth-child(3) { width: 18%; } .footer .footer-list .title { -webkit-box-sizing: border-box; box-sizing: border-box; } .footer .footer-part .email-box { width: 230px; height: 34px; overflow: hidden; border: 1px solid #7a46ff; margin: 20px 0 0; border-radius: 5px; } .footer .footer-part .email-box input { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; float: left; background: 0 0; border: 0; width: 142px; line-height: 34px; padding-left: 10px; outline: 0; color: #fff; } .footer .footer-part .email-box input::-webkit-input-placeholder { color: #aaa; } .footer .footer-part .email-box a { display: block; float: right; width: 80px; height: 100%; background: #7a46ff; font-size: 14px; text-align: center; line-height: 34px; } .background-footer p#copyright { color: #fff; font-size: 16px; margin: 0; padding: 15px 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; line-height: 100%; } .footer .language { position: relative; z-index: 11; margin: 0; max-width: 178px; width: 100%; } .footer .language > p { border: 1px solid #86898e; color: #86898e; line-height: 36px; border-radius: 36px; cursor: pointer; padding-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; height: 36px; overflow: hidden; width: 100%; } .footer .language > p i:nth-child(1) { background: url(/images/language.png); width: 23px; height: 23px; background-position-y: 0; vertical-align: -6px; margin-right: 10px; } .footer .language > p i:last-child { background: url(/images/language.png); width: 10px; height: 5px; background-position-y: -23px; float: right; margin-right: 17px; margin-top: 15px; } .footer .language.active > div { display: block; } .footer .language > div { width: 500px; position: absolute; left: 0; bottom: 50px; padding: 12px 15px; background: #fff; border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); display: none; } .footer .language > div a { font-size: 14px; color: #2b3139; width: 24%; display: inline-block; margin: 8px 0; } .footer .language > div a:hover { color: #8f68ff; text-decoration: none; } .gotop { background: url(/images/gotop.png); width: 60px; height: 60px; position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none; } .gotop:hover { background-position-y: -60px; } @media screen and (max-width: 1180px) { .container { width: 95%; } .center { padding: 0 40px; } .header { position: relative; -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.09); box-shadow: 0 0 18px rgba(0, 0, 0, 0.09); z-index: 10; } .header .center { position: initial; } .header .logo { float: none; width: 142px; margin: 0; } .search, .toggle_nav { position: absolute; top: 0; right: 0; } .header .product_main_box { border-top: 0; } .purchase, .search { display: none; } .toggle_nav { display: block; margin-right: 20px; } .toggle_nav_box { float: none !important; position: absolute !important; top: 64px !important; background: #fff; width: 100%; left: 0; padding: 0 40px; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .product_box > a, .single_product > a:hover { background: 0 0; } .product_main > div > span { display: none; } .header > .center > ul li:hover > span { color: #4c5562; } .header > .center > ul li.active > span { color: #6358f4; } .toggle_nav_box li { float: none !important; line-height: 60px !important; margin: 0 !important; } .toggle_nav_box li:last-child { border: none; } .toggle_nav_box li > i { display: inline-block; float: right; margin-top: 25px; } .product_main_box { display: none; position: initial; -webkit-box-shadow: none; box-shadow: none; padding: 0; max-width: 100%; width: 100%; margin-top: 5px; } .product_main > div { width: 100%; max-width: 100%; } .product_main_box > div > span { display: none; } .single_product { margin-bottom: 0; width: 100%; } .product_box a span, .single_product .title { padding-left: 10px; margin-bottom: 25px; font-weight: 400; } .product_box a span { font-size: 16px; color: #444; line-height: 20px; display: block; } .header .header_slider::after, .header_top_bg, .product_box a p, .product_box div, .product_main > div:nth-child(1), .single_product p, .single_product > div { display: none; } .single_product > a:first-child { border: none; padding: 0; } .product_box { margin-top: 0; } .product_box > a { border: none; padding: 0; } .product_box > a:hover { border: none; background: 0 0; } .header .header_slider { display: none; margin: 0; position: static; width: 100%; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: -webkit-translate(0, 0); transform: -webkit-translate(0, 0); transform: -moz-translate(0, 0); transform: -o-translate(0, 0); transform: translate(0, 0); -webkit-box-shadow: none; box-shadow: none; border: none; padding: 0; } .header .header_slider p, .header > .center > ul > li { width: 100%; -webkit-box-sizing: border-box; border-bottom: 1px solid #ebebeb; } .header .header_slider .left { width: 100%; padding-top: 0; background: #fff; } .header > .center > ul { padding: 0; } .header > .center > ul > li { padding-left: 40px; padding-right: 40px; box-sizing: border-box; } .header > .center > ul > li:nth-child(1) .header_slider, .header > .center > ul > li:nth-child(2) .header_slider { width: 100%; } .header .header_slider .slider_inner { display: block; margin: 0; width: 100%; } .header .header_slider .slider_inner:nth-child(2) ul:nth-child(2) { margin-bottom: 10px; } .header .header_slider p { position: relative; font-size: 18px; line-height: 30px; display: block; padding-left: 20px; box-sizing: border-box; margin: 0 auto 10px; } .header .header_slider p::after { content: ""; display: block; position: absolute; width: 10px; height: 8px; background: url(/images/index/drop-2.png) center no-repeat; background-size: 100% auto; right: 4px; top: 10px; } .header .header_slider p.active::after { background: url(/images/index/drop-1.png) center no-repeat; } .header .header_slider p.active + ul { display: block; } .header .header_slider .slider_inner:nth-last-of-type(1) p { border-bottom: 1px solid transparent; } .header .header_slider .slider_inner:nth-last-of-type(1) p.active { border-bottom: 1px solid #ebebeb; } .header .header_slider .slider_inner.feature ul li { margin: 20px auto !important; } .header .header_slider .slider_inner.feature { width: 100%; } .header .header_slider .title { position: relative; border-bottom: 0 solid #000; font-size: 16px; background: #fff; padding-left: 7px; } .header .header_slider .title img { display: inline-block; margin-right: 9px; vertical-align: -5px; width: 24px; } .header .header_slider .title.active { background: #fff; color: #6358f4; } .header .header_slider .title::after { content: ""; display: block; position: absolute; right: 0; top: 21px; width: 12px; height: 7px; background: url(/images/index/drop-2.png) no-repeat; background-size: 100% auto; } .header .header_slider .title.active::after { background: url(/images/index/drop-1.png) no-repeat; background-size: 100% auto; } .header .header_slider ul { position: static; padding-top: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 50px; display: none; margin: 0 0 15px; } .header .header_slider li { height: 30px; line-height: 30px !important; float: none; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; max-width: 1200px !important; } .header > .center > ul li ul a { font-size: 14px; } .header_bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 9; display: none; } .header > .center > ul li > a.cuur { display: inline-block; padding: 0; width: auto; height: auto; line-height: 32px; background: #fff; border-radius: 16px; text-align: center; color: #4c5562; } .footer .footer-list, .footer .footer-part { float: left; width: 100%; } .header > .center > ul li:hover > a.cuur, .header > .center > ul li > a.cuur:hover { color: #6358f4; } .footer { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 40px 20px; overflow: visible; } .footer .footer-list { min-height: 50px; padding: 0; border-bottom: 1px solid #999; } .footer-part .title i { float: right; width: 15px; height: 15px; color: #fff; display: block; font-size: 30px; font-weight: 400; background: url(/images/index/footer-close.png) no-repeat; margin-top: 10px; } .footer-list ul { display: none; } .footer .footer-part:nth-child(1) .footer_btn, .footer .footer-part:nth-child(1) .footer_logo, .footer-part:nth-child(1) { margin-left: 0; } .footer-part:nth-child(3) { padding-left: 0; margin-left: 0; margin-bottom: 10px; } .footer-list.active .title i { background-position-y: -15px; } ul.ul-active { display: block; } .footer .footer-part .title { padding-top: 12px; } .footer .language { margin: 0 0 20px; } .footer .language > div { right: unset; left: 0; } .background-footer .footer .footer-list:nth-child(2), .background-footer .footer .footer-list:nth-child(3) { width: 100%; } } #banner .bg-img-btn, #banner p { -webkit-box-sizing: border-box; } @media screen and (max-width: 769px) { .footer-part:nth-child(3) { border-left: 0; padding-left: 0; max-width: 240px; width: 35%; } } @media screen and (max-width: 630px) { .center, .toggle_nav_box { padding: 0 7.8%; } .header > .center > ul { display: none; } .footer .language > div { width: 100%; } .footer .language > div a { width: 48%; } .footer .footer-part:last-child { overflow: visible; } } @media screen and (max-width: 500px) { .footer-part:nth-child(3) { float: none; padding-left: 0; margin: 0 0 30px; width: 77%; } } @media screen and (max-width: 370px) { .header .header_slider ul { padding-left: 20px; } } @media screen and (max-width: 344px) { .header > .center > ul > li { padding-left: 20px; padding-right: 20px; } } body, dd, div, form, h1, h2, h3, h4, html, img, input, p { margin: 0 auto; padding: 0; font: 12px/160% Arial, Verdana, Helvetica, sans-serif; color: #4b4b4b; } #features h2, #related h2, #screenshots h2 { font-weight: 400; text-align: center; } .flex-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; } #banner { max-width: 100%; z-index: 0; padding-top: 40px; padding-bottom: 20px; overflow: hidden; } #banner .banner-img { max-width: 584px; width: 100%; max-height: 356px; margin: 0; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } #banner .banner-img img { display: block; max-width: 100%; margin: 0 auto; } #banner .banner-text { max-width: 570px; width: 100%; margin: 0; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } #banner h1 { margin-bottom: 24px; } #banner p { box-sizing: border-box; margin: 0; font-size: 18px; line-height: 30px; } #banner .btn-box { margin: 30px 0 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } #banner .btn-box a { text-decoration: none; } #banner .bg-img-btn { box-sizing: border-box; height: 50px; padding-left: 58px; padding-right: 15px; border-radius: 25px; background-repeat: no-repeat; background-position: 23px center; font-size: 22px; color: #000; line-height: 50px; margin-bottom: 15px; } #banner .btn-box.double a.mac-btn, #banner .btn-box.double a.win-btn { height: 50px; padding-left: 0; line-height: 48px; color: #fff; text-indent: 60px; text-decoration: none; } #banner .bg-img-btn.win-btn { background-image: url(/images/win.png); } #banner .bg-img-btn.mac-btn { background-image: url(/images/mac.png); } #banner .btn-box.double a.win-btn { margin: 0 10px 10px 0; border: 1px solid #0de879; background: url(/images/bannerwin.png) 12px center no-repeat #0de879; } #banner .btn-box.double a.win-btn:hover { background: url(/images/bannerwin.png) 12px center no-repeat; border: 1px solid #fff; } #banner .btn-box.double a.mac-btn { margin: 0 0 20px; border: 1px solid #fff; background: url(/images/bannermac.png) 12px center no-repeat; } #banner .btn-box.double a.mac-btn:hover { background: url(/images/bannermac.png) 12px center no-repeat #0de879; border: 1px solid #0de879; } #features h2 { color: #444; margin-bottom: 60px; font-size: 36px; line-height: 36px; } #features .flex-box div { margin: 0 0 30px; } #features .features-box { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 380px; width: 100%; padding-bottom: 30px; border-radius: 7px; background: #fdfdfd; } #features .features-box img { display: block; margin: 14px auto 12px; } #features .features-box .title { max-width: 340px; width: 95%; font-size: 18px; color: #444; text-align: center; line-height: 30px; } #features .features-box span { display: block; max-width: 340px; width: 95%; font-size: 16px; color: #666; text-align: center; line-height: 26px; } #features .features-box:hover { background: #fff; -webkit-box-shadow: 0 0 70px #dadada; box-shadow: 0 0 70px #dadada; } #screenshots { padding-top: 50px; padding-bottom: 50px; } #screenshots h2 { color: #444; margin-bottom: 40px; font-size: 36px; } #screenshots img { display: block; margin: 0 auto; max-width: 100%; } .mobietrans { background: url(/images/iphone-data-recovery/bg.png) center center no-repeat; padding-top: 65px; } .mobietrans_main div:nth-child(2) { margin-top: 40px; margin-bottom: 30px; } .mobietrans h2 { color: #444; text-align: center; margin-top: 0; margin-bottom: 45px; } .mobietrans_main div:nth-child(1) { position: relative; height: 310px; overflow: hidden; } .mobietrans_main div img { width: 338px; -webkit-filter: blur(0.8px); filter: blur(0.8px); vertical-align: middle; } .mobietrans_main div img.active_left { position: absolute; left: 10%; top: 25%; z-index: 3; } .mobietrans_main div img.active_center { width: 480px; -webkit-filter: blur(0); filter: blur(0); position: absolute; left: 30%; top: 0; z-index: 9; } .mobietrans_main div img.active_right { position: absolute; left: 62%; top: 25%; z-index: 3; } .mobietrans_main div:nth-child(2) { color: #666; line-height: 30px; font-size: 16px; max-width: 580px; width: 100%; margin: 60px auto 48px; text-align: center; } .mobietrans_main div p { display: none; } .mobietrans_main div:last-child { text-align: center; padding-bottom: 10px; } .mobietrans_main div i { width: 9px; height: 9px; display: inline-block; background: #9efbfb; cursor: pointer; } .mobietrans_main div i:nth-child(1) { width: 45px; height: 9px; display: inline-block; background: #2effff; } .mobietrans_main div p span { color: #222; font-size: 48px; font-style: italic; } #related { background: #636eff; padding-top: 100px; padding-bottom: 50px; } #related h2 { margin-bottom: 60px; } #related .related-box { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 585px; width: 100%; min-height: 242px; margin-bottom: 15px; border-radius: 14px; background: #fff; overflow: hidden; position: relative; -ms-flex-pack: distribute; justify-content: space-around; } #related .related-box .circle-bg { width: 300px; height: 300px; border-radius: 100%; background: #f5f6ff; position: absolute; left: -150px; top: -29px; z-index: 0; } #related .related-box img { max-width: 117px; position: relative; z-index: 1; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; margin: 0; } #related .related-box .related-text { max-width: 400px; position: relative; z-index: 1; padding-top: 42px; margin: 0; } #related .related-box .title { font-size: 18px; color: #444; font-weight: 700; } #related .related-box span { display: block; max-width: 440px; width: 95%; min-height: 80px; margin: 10px 0 0; font-size: 16px; color: #666; text-align: left; line-height: 26px; } #related .related-box .btn-box { margin: 16px 0 0; max-width: 380px; -ms-flex-pack: distribute; justify-content: space-around; } #related .related-box .btn-box a { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 184px; height: 38px; padding-left: 45px; border-radius: 19px; background-color: #ffe823; background-repeat: no-repeat; background-position: 16px center; font-size: 14px; color: #000; line-height: 38px; text-align: center; } #related .related-box .btn-box a.win-btn { background-image: url(/images/wins.png); } #related .related-box .btn-box a.mac-btn { background-image: url(/images/macs.png); } #discuss { padding-top: 50px; padding-bottom: 30px; } @media screen and (max-width: 1180px) { .purchase, .search { display: none; } #banner .container { width: 100%; } #banner > div { -ms-flex-pack: distribute; justify-content: space-around; } #banner .banner-text { max-width: 400px; padding-right: 10px; } #features .flex-box { -ms-flex-pack: distribute; justify-content: space-around; } } @media screen and (max-width: 769px) { #banner .container { width: 95%; } #banner .banner-text { max-width: 570px; padding-right: 0; } #banner h1 { text-align: center; } #banner .btn-box { max-width: 490px; -ms-flex-pack: distribute; justify-content: space-around; margin: 30px auto 0; } #banner .btn-box.double a.win-btn { margin: 0 0 10px; } .mobietrans_main div img.active_left { position: absolute; left: -35%; top: 25%; z-index: 3; } .mobietrans_main div img.active_center { width: 480px; -webkit-filter: blur(0); filter: blur(0); position: absolute; left: 15%; top: 0; z-index: 9; } .mobietrans_main div img.active_right { position: absolute; left: 85%; top: 25%; z-index: 3; } } @media screen and (max-width: 500px) { #banner h1, h2 { font-size: 32px; } #banner, #features { padding-top: 50px; } h2 { width: 95%; margin: 0 auto; line-height: 50px; } #banner h1 { text-align: center; } #banner .btn-box { -ms-flex-pack: distribute; justify-content: space-around; } #banner .banner-img { display: none; } #features h2 { margin-bottom: 40px; } .mobietrans { padding-top: 30px; } .mobietrans_main div img.active_center { z-index: 2; } .mobietrans_main div:nth-child(2) { width: 100%; margin: 0 auto 48px; } .mobietrans_main div:nth-child(1) img { display: none; width: 100%; left: 0; -webkit-filter: blur(0); filter: blur(0); top: 0; } .mobietrans_main div:nth-child(1) img.active { display: block; } .mobietrans_main div:nth-child(1) { height: 240px; } #related { padding-top: 50px; padding-bottom: 50px; } #related .related-box { padding-top: 30px; text-align: center; } #related .related-box .circle-bg { display: none; } #related .related-box span { margin: 10px auto 0; text-align: center; } #related .related-box .btn-box { margin: 16px auto 20px; } #related .related-box .btn-box a { text-align: left; margin-bottom: 10px; } #related .related-box .related-text { padding-top: 20px; } } #banner { padding: 82px 0 0; } #banner.video_converter { position: relative; z-index: 1; background: url(/images/free-online-video-converter/bannerbg.jpg) center bottom no-repeat #7c70fb; } #banner.video_converter .video_container { margin: 29px auto 37px; -webkit-align-items: center; -webkit-justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #banner.video_converter .video_container .video_container_left { width: initial; margin: 0 27px 0 0; display: block; -ms-flex-negative: 0; flex-shrink: 0; } #banner.video_converter .video_container .video_container_right { margin: 0; width: 365px; font-size: 18px; font-weight: 400; color: #fff; line-height: 30px; } #banner.video_converter .video_container .video_container_right a { color: #f6ff00; text-decoration: none; } #banner.banner-free-mp3 { background-image: url(/images/free-mp3-converter/banner.jpg); } #banner.image_compressor.banner-free-images { background: url(/images/free-online-image-compressor/banner.jpg) center 0 no-repeat; } #banner.audio_converter { background: url(/images/free-online-audio-converter/banner-bg.jpg) center 0 no-repeat #7c70fb; } #banner.video_joiner { background: url(/images/free-online-video-joiner/banner.jpg) center 0 no-repeat #7d70fc; } #banner.screen_recorder { background: url(/images/free-online-screen-recorder/banner.jpg) center 0 no-repeat #7357fd; } #banner.audio_recorder { background: url(/images/free-online-audio-recorder/banner.jpg) center 0 no-repeat #7357fd; } #banner.flv-to-mp4 { background: url(/images/free-flv-to-mp4-converter/banner.png) center 0 no-repeat #0dc8d4; } #banner.audio_converter .banner_info, #banner.video_compressor .banner_info { max-width: 730px; } #banner.free-video-player { background: url(/images/free-video-player/banner.png) center 0 no-repeat; } #banner.free-dvd-player { background: url(/images/free-dvd-player/banner.jpg) center 0 no-repeat; } #banner .bannerman { transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); } #banner .bannerman.bigman { bottom: -27px; } #banner.free-dvd-player .free_btn { max-width: 368px; background: #ffa82b; } #banner.free-dvd-player .free_btn img { vertical-align: -15px; margin-right: 24px; } #banner.free-video-player .free_btn { width: 370px; } #banner.free-video-player .free_btn img { vertical-align: -10px; } #banner.banner-free-mp4 { background: #7c6dff; position: relative; min-height: 512px; } #banner.banner-free-mp4 .free-mp4-banner-left { position: absolute; top: 25px; left: 98px; } #banner.banner-free-mp4 .free-mp4-banner-right { position: absolute; right: 0; top: -61px; } #banner.free-avi-converter { background: #7364fc; position: relative; } #banner.free-avi-converter .free-mp4-banner-left { position: absolute; top: -35px; left: 41px; } #banner.free-avi-converter .free-mp4-banner-right { position: absolute; right: 34px; top: unset; bottom: -80px; } #banner.banner-free-mov { background: #7c6dff; position: relative; } #banner.banner-free-mov .container { z-index: 2; position: relative; } #banner.banner-free-mov .free-mov-banner-left { position: absolute; bottom: 0; left: 98px; width: 40%; max-width: 729px; } #banner.banner-free-mov .free-mov-banner-right { position: absolute; right: 0; bottom: 0; width: 40%; max-width: 730px; } #banner.banner-free-mp4 .free-mkv-banner-left { position: absolute; top: -35px; left: 47px; } #banner.banner-free-mp4 .free-mkv-banner-right { position: absolute; right: 0; top: -53px; } #banner.banner-free-mp4 .free-mp4-bag { position: relative; } #banner.banner-free-mp4 .container { position: relative; z-index: 100; } #function_section.free-mp4-func .container:nth-child(1) .left { max-width: 560px; width: 100%; margin: auto 0; } .explore.free-mp4 { margin-top: 14px; } .explore.free-mp4 h2 { text-align: center; color: #454545; font-size: 36px; line-height: 36px; } .explore.free-mp4 .container div { max-width: 600px; width: 100%; padding: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e1e1e1; margin-top: 39px; } .explore.free-mp4 .container div ul { padding: 28px 47px; } .explore.free-mp4 .container div ul li { display: inline-block; height: 40px; line-height: 40px; width: 46%; margin: 7px 0; } .explore.free-mp4 .container div ul li a { display: inline-block; padding: 6px 35px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #454545; font-size: 20px; font-weight: 400; text-decoration: none; position: relative; cursor: auto; } .explore.free-mp4 .container div ul li a::before { content: ""; position: absolute; border-radius: 50%; width: 5px; height: 5px; left: 17px; top: 23px; } .explore.free-mp4 .container div:nth-child(1) ul li a::before { background-color: #7b6dff; } .explore.free-mp4 .container div:nth-child(2) ul li a::before { background-color: #f16298; } .explore.free-mp4 .container div:nth-child(1) ul li.active a { color: #6e60fa; cursor: pointer; } .explore.free-mp4 .container div:nth-child(2) ul li.active a { color: #f16298; cursor: pointer; } .explore.free-mp4 .container div:nth-child(1) ul li.active:hover a, .explore.free-mp4 .container div:nth-child(2) ul li.active:hover a { background-color: #f4f4f4; border-radius: 8px; } .explore.free-mp4 .container div p.title { max-width: 578px; width: 100%; padding: 29px 0; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 600; text-align: center; } #steps .title-h2, .any_videos .title-h2 { font-size: 36px; line-height: 36px; color: #444; display: block; } #steps h2, .system h2 { font-weight: 400; } .explore.free-mp4 .container div:nth-child(1) p.title { background: #6e60fa; } .explore.free-mp4 .container div:nth-child(2) p.title { background: #f16298; } .explore.free-mp4 .container div:nth-child(1) { border-right: none; border-radius: 8px 0 0 8px; } .explore.free-mp4 .container div:nth-child(2) { border-radius: 0 8px 8px 0; } #features .flex-box div { min-height: 200px; } #steps { width: 100%; text-align: center; } #steps .title-h2 { width: 96%; margin: 0 auto; } #steps .container { padding: 46px 0 0; } #steps.audio_recorder .step:nth-child(1) .info span { position: absolute; z-index: -1; margin: 0 0 0 -84px; background-color: #73dbff; } #steps.audio_recorder .step:nth-child(3) .info span { position: absolute; z-index: -1; margin: 0 0 0 -88px; background-color: #9591ff; } #steps.audio_recorder .step:nth-child(5) .info span { position: absolute; z-index: -1; margin: 0 0 0 -67px; background-color: #ff8cb6; } #steps.free-mp4-converter .step:nth-child(1) .info span { position: absolute; z-index: -1; margin: 1px 0 0 -99px; background-color: #ff8cb6; } #steps.free-mp4-converter .step:nth-child(3) .info span { position: absolute; z-index: -1; margin: 1px 0 0 -97px; background-color: #9591ff; } #steps.free-video-player { padding-bottom: 0; } #steps.free-video-player .step img { width: 181px; } #steps.free-video-player .step:nth-child(1) .info span { position: absolute; z-index: -1; margin: 0 0 0 -102px; background-color: #ff883c; } #steps.free-video-player .step:nth-child(3) .info span { position: absolute; z-index: -1; margin: 0 0 0 -59px; background-color: #9591ff; } #steps.free-video-player .step:nth-child(5) .info span { position: absolute; z-index: -1; margin: 0 0 0 -55px; background-color: #33c1f7; } #steps .step img { max-width: 100%; } .any_videos { width: 100%; margin: 0 auto; padding: 70px 0 0; text-align: center; } .any_videos h2 { display: block; width: 96%; max-width: 960px; margin: 0 auto; color: #444; } .any_videos .title-h2 { max-width: 960; margin: 0 auto; } .any_videos .info { position: relative; width: 98%; max-width: 1100px; display: block; margin: 40px auto 0; font-size: 16px; line-height: 30px; color: #333; } .any_videos img { display: block; margin: 0 auto; width: 96%; max-width: 950px; } #function_section .container:nth-child(1) .right, #function_section .container:nth-child(2) .right { max-width: 100%; } #function_section h2 { font-weight: 400; font-size: 34px; line-height: 36px; } #function_section.flv-to-mp4 .container:nth-child(2) .right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #function_section.flv-to-mp4 .container:nth-child(2) .left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #function_section.flv-to-mp4 .container:nth-child(1) .left { padding: 30px 0 0; } #function_section.free-video-player > div { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #function_section.free-dvd-player .container:nth-child(1) .left, #function_section.free-dvd-player .container:nth-child(1) .right { width: 540px; } #function_section.free-dvd-player .container:nth-child(2) .right { width: 520px; } #function_section.free-dvd-player .container:nth-child(2) .left { width: 550px; } .system h2 { text-align: center; } .system .table-box { width: 100%; margin: 0 auto; overflow-x: auto; } .system table { width: 1173px; margin: 60px auto 0; } .system table td { border: 1px solid #eee; height: 138px; padding: 0 30px; } .system table td:nth-child(1) { width: 300px; background: #ffa352; font-size: 24px; line-height: 36px; font-weight: 550; color: #fff; text-align: center; } .system table td:nth-child(2) { font-size: 18px; color: #333; line-height: 30px; } .files { -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 60px; background: #00bfd3; overflow: hidden; position: relative; min-height: 236px; margin-top: 50px; } .files .bg-cir1, .files .bg-cir2 { position: absolute; border-radius: 100%; } .files.mts-converter { background-color: #1ab7ea; } .files.video-to-gif { background-color: #4769e5; } .files.free-ts-converter { background-color: #7c6dff; } .files .bg-cir1 { left: 20px; bottom: -200px; width: 296px; height: 296px; background: #ffb16d; } .files .bg-cir2 { right: -60px; top: -260px; width: 388px; height: 388px; background: #ff8dba; } .files .text { position: relative; margin: 0; max-width: 850px; z-index: 1; font-size: 36px; color: #fff; line-height: 60px; text-align: center; } .files .down-btn { position: relative; z-index: 1; max-width: 500px; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .files .down-btn a { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 234px; height: 58px; padding-left: 60px; background: 24px center no-repeat #fd9e09; border-radius: 5px; font-size: 22px; line-height: 58px; color: #fff; text-decoration: none; } .files .down-btn a:hover { text-decoration: underline; } .files .win-btn a { background-image: url(/images/new-m2ts/win.png); } .files .mac-btn a { background-image: url(/images/new-m2ts/mac.png); } .files .down-btn p { margin-top: 5px; font-size: 16px; padding-left: 55px; color: #fff; background: url(/images/new-m2ts/safe2.png) 30px center no-repeat; } .products, .products h2, .screen_recorder_function { margin: 0 auto; display: block; } .products { width: 100%; background-color: #f8f7fc; padding: 90px 0; } .products h2 { text-align: center; width: 96%; } .products .container { padding-top: 46px; overflow-x: auto; } .products table { width: 1200px; -webkit-box-sizing: border-box; box-sizing: border-box; } .products table tbody tr:nth-child(1) td { padding-top: 40px; } .products table th { border: 2px solid #eaeaea; background-color: #f2f2f2; color: #7457fd; height: 70px; font-size: 20px; } .products table td { background-color: #fff; color: #333; padding: 10px 0; font-size: 16px; text-indent: 80px; line-height: 20px; } .products table td a { color: #7357fd; } .screen_recorder_function { width: 100%; padding: 0 0 60px; background-color: #f5f9fa; } .screen_recorder_function .container > div { width: 250px; padding: 34px 0 0; margin: 0 0 33px; text-align: center; } #function_section.screen_recorder .container:nth-child(3) .left, #function_section.screen_recorder .container:nth-child(3) .right { width: 547px; } .screen_recorder_function .title { display: block; margin: 0 auto; font-size: 18px; line-height: 24px; color: #333; } .screen_recorder_function .info { display: block; margin: 0 auto; font-size: 16px; line-height: 26px; color: #666; } .tab_hide, .tips_slide { font-size: 16px; line-height: 30px; color: #09f; } #function_section.screen_recorder .container:nth-child(3) { padding: 60px 0 0; } .tips_slide { display: block; margin: 10px 0; } .tab_hide { display: none; margin: 10px auto; } .tab_hide img, .tips_slide img { display: inline-block; margin-left: 8px; vertical-align: -4px; } .tab_hide.active { display: block; } #features.free-dvd-player .features-box.disnone, .tips_slide.active { display: none; } #features { background: #fff; } #features.audio_converter .features-box i { background: url(/images/free-online-audio-converter/highlights.png) no-repeat; } #features.video_compressor .features-box i { width: 80px; height: 80px; background: url(/images/free-online-video-compressor/icon.png) no-repeat; } #features.video_compressor .features-box:nth-child(1) i { background-position: 0 0; } #features.video_compressor .features-box:nth-child(2) i { background-position: 0 -80px; } #features.video_compressor .features-box:nth-child(3) i { background-position: 0 -160px; } #features.video_compressor .features-box:nth-child(4) i { background-position: 0 -240px; } #features.video_compressor .features-box:nth-child(5) i { background-position: 0 -320px; } #features.video_compressor .features-box:nth-child(6) i { background-position: 0 -400px; } #features.video_joiner .features-box { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 38px 38px 0; text-align: left; min-height: 330px; } #features.video_joiner .features-box .title { margin: 0; text-align: left; } #features.video_joiner .features-box span { margin: 4px 0 0; text-align: left; } #features.video_joiner .features-box i { margin: 0 0 20px; width: 80px; height: 80px; background: url(/images/free-online-video-joiner/icon.png) no-repeat; } #features.video_joiner .features-box:nth-child(1) i { background-position: 0 0; } #features.video_joiner .features-box:nth-child(2) i { background-position: 0 -80px; } #features.video_joiner .features-box:nth-child(3) i { background-position: 0 -160px; } #features.video_joiner .features-box:nth-child(4) i { background-position: 0 -240px; } #features.video_joiner .features-box:nth-child(5) i { background-position: 0 -320px; } #features.video_joiner .features-box:nth-child(6) i { background-position: 0 -400px; } #features.flv-to-mp4 .flex-box div { width: 380px; height: 320px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 36px 36px 0; text-align: left; border-radius: 12px; -webkit-box-shadow: 0 0 16px 0 rgba(0, 186, 206, 0.19); box-shadow: 0 0 16px 0 rgba(0, 186, 206, 0.19); background-color: #fff; } #features.flv-to-mp4 .features-box .title, #features.free-dvd-player .features-box .title, #features.free-dvd-player .features-box span { width: 100%; text-align: left; } #features.flv-to-mp4 .flex-box div:hover { border-bottom: 5px solid #00bace; -webkit-box-shadow: 0 0 16px 0 rgba(0, 186, 206, 0.19); box-shadow: 0 0 16px 0 rgba(0, 186, 206, 0.19); } #features.flv-to-mp4 .features-box img { margin: 0 0 12px; } #features.flv-to-mp4 .features-box span { width: 100%; text-align: left; margin: 10px 0 0; } #features.free-dvd-player .features-box { padding: 0 42px 33px; border-bottom: 5px solid transparent; } #features.free-dvd-player .features-box:hover { border-bottom: 5px solid #6051f5; } #features.free-dvd-player .features-box i { width: 63px; height: 58px; margin: 40px 0 13px; background: url(/images/free-dvd-player/highlight.png) no-repeat; } #features.free-dvd-player .features-box:nth-child(1) i { background-position: 0 0; } #features.free-dvd-player .features-box:nth-child(2) i { background-position: 0 -58px; } #features.free-dvd-player .features-box:nth-child(3) i { background-position: 0 -116px; } #features.free-dvd-player .features-box:nth-child(4) i { background-position: 0 -174px; } #features.free-dvd-player .features-box:nth-child(5) i { background-position: 0 -232px; } #features.free-dvd-player .features-box:nth-child(6) i { background-position: 0 -290px; } #features.free-dvd-player .features-box:nth-child(7) i { background-position: 0 -348px; } #features.free-mp3-onverter .features-box i { display: block; margin: 40px auto 24px; width: 85px; height: 78px; background: url(/images/free-mp3-converter/highlighted-features.png) no-repeat; } #features.free-mp3-onverter .features-box:nth-child(1) i { background-position: 0 0; } #features.free-mp3-onverter .features-box:nth-child(2) i { background-position: 0 -78px; } #features.free-mp3-onverter .features-box:nth-child(3) i { background-position: 0 -156px; } #features.free-mp3-onverter .features-box:nth-child(4) i { background-position: 0 -234px; } #features.free-mp3-onverter .features-box:nth-child(5) i { background-position: 0 -312px; } #features.free-mp3-onverter .features-box:nth-child(6) i { background-position: 0 -390px; } #features.free-mp4-converter .container .features-box i { margin-top: 30px; } #features.free-mkv-converter .container .features-box i, #features.free-mov-converter .container .features-box i { margin-top: 5px; } #features.free-mp4-converter .features-box:nth-child(1) i { background: url(/images/free-mp4-converter/free-to-use.svg); } #features.free-mp4-converter .features-box:nth-child(2) i { background: url(/images/free-mp4-converter/easy-to-use.svg); } #features.free-mp4-converter .features-box:nth-child(3) i { background: url(/images/free-mp4-converter/no-registration.svg); } #features.free-mp4-converter .features-box:nth-child(4) i { background: url(/images/free-mp4-converter/no-watermark.svg); } #features.free-mp4-converter .features-box:nth-child(5) i { background: url(/images/free-mp4-converter/no-quality-loss.svg); } #features.free-mp4-converter .features-box:nth-child(6) i { background: url(/images/free-mp4-converter/batch-convert.svg); } #features.free-mkv-converter .features-box:nth-child(1) i { background: url(/images/free-mkv-converter/safe.svg); } #features.free-mkv-converter .features-box:nth-child(2) i { background: url(/images/free-mkv-converter/free.svg); } #features.free-mkv-converter .features-box:nth-child(3) i { background: url(/images/free-mkv-converter/easy.svg); } #features.free-mkv-converter .features-box:nth-child(4) i { background: url(/images/free-mkv-converter/fast.svg); } #features.free-mkv-converter .features-box:nth-child(5) i { background: url(/images/free-mkv-converter/quality.svg); } #features.free-mkv-converter .features-box:nth-child(6) i { background: url(/images/free-mkv-converter/web.svg); } #features.free-mov-converter { padding-top: 40px; } #features.free-mov-converter .features-box:nth-child(1) i { background: url(/images/free-mov-converter/fast-conversion.svg); } #features.free-mov-converter .features-box:nth-child(2) i { background: url(/images/free-mov-converter/convert-safely.svg); } #features.free-mov-converter .features-box:nth-child(3) i { background: url(/images/free-mov-converter/no-watermark-left.svg); } #features.free-mov-converter .features-box:nth-child(4) i { background: url(/images/free-mov-converter/convert-mov-in-batches.svg); } #features.free-mov-converter .features-box:nth-child(5) i { background: url(/images/free-mov-converter/no-browser-limit.svg); } #features.free-mov-converter .features-box:nth-child(6) i { background: url(/images/free-mov-converter/change-settings.svg); } #repuirements h2 { font-weight: 400; } div.back-color { background-color: #7c70fb; } div.back-color-recorder { background-color: #7357fd; } .comment h2 { font-size: 36px; line-height: 36px; } .free-mkv-comment.comment .change-box .comment-page span.title, .free-mp4-comment.comment .change-box .comment-page span.title { color: #fff; font-size: 20px; } .free-mkv-comment.comment .change-box span.title, .free-mp4-comment.comment .change-box span.title { position: absolute; right: 50px; top: 45px; width: 83px; height: 83px; text-align: center; line-height: 83px; border-radius: 50%; } .free-mp4-comment.comment .change-box .comment-page:nth-child(1) .comment-block:nth-child(1) span.title { background-color: #2e85eb; } .free-mp4-comment.comment .change-box .comment-page:nth-child(1) .comment-block:nth-child(2) span.title { background-color: #f369a0; } .free-mp4-comment.comment .change-box .comment-page:nth-child(1) .comment-block:nth-child(3) span.title { background-color: #63cf7b; } .free-mp4-comment.comment .change-box .comment-page:nth-child(2) .comment-block:nth-child(1) span.title { background-color: #fd8d4e; } .free-mp4-comment.comment .change-box .comment-page:nth-child(2) .comment-block:nth-child(2) span.title { background-color: #ec6c6c; } .free-mp4-comment.comment .change-box .comment-page:nth-child(2) .comment-block:nth-child(3) span.title { background-color: #2dd3c9; } .free-mkv-comment.comment .change-box .comment-page:nth-child(1) .comment-block:nth-child(1) span.title { background-color: #2e85eb; } .free-mkv-comment.comment .change-box .comment-page:nth-child(1) .comment-block:nth-child(2) span.title { background-color: #fd8d4e; } .free-mkv-comment.comment .change-box .comment-page:nth-child(1) .comment-block:nth-child(3) span.title { background-color: #2dd3c9; } .free-mkv-comment.comment .change-box .comment-page:nth-child(2) .comment-block:nth-child(1) span.title { background-color: #fd8d4e; } .free-mkv-comment.comment .change-box .comment-page:nth-child(2) .comment-block:nth-child(2) span.title { background-color: #ec6c6c; } .free-mkv-comment.comment .change-box .comment-page:nth-child(2) .comment-block:nth-child(3) span.title { background-color: #2dd3c9; } .faq h2 { font-size: 36px; line-height: 36px; } #related.free-mkv-related h2, .article.free-mkv-related h2 { font-weight: 400; color: #222; text-align: center; font-size: 40px; line-height: 40px; } #related .container { margin: 56px auto 0; } #related.light_style .related-box .btn-box a { padding: 0 20px 0 10px; text-align: center; } #related.light_style .related-box .btn-box .down-btn-block p { background: url(/images/new-m2ts/safe1.png) 10px center no-repeat; } #related.light_style .related-box .btn-box { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } #related.light_style .related-box .btn-box > div { margin: 0; } #related.free-mkv-related { background: #fff; padding-top: 40px; padding-bottom: 80px; } .article.free-mkv-related h2 { margin-top: 60px; } #related.free-mkv-related h2 { margin-bottom: 60px; } #related.free-mkv-related .related-box { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 585px; width: 100%; min-height: 242px; margin-bottom: 20px; border-radius: 14px; background: #fff; overflow: hidden; position: relative; -ms-flex-pack: distribute; justify-content: space-around; } #related.free-mkv-related .related-box .circle-bg { width: 300px; height: 300px; border-radius: 100%; background: #e6e3ff; position: absolute; left: -150px; top: -29px; z-index: 0; } #related.free-mkv-related .related-box img { max-width: 117px; position: relative; z-index: 1; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; margin: 0; } #related.free-mkv-related .related-box .related-text { max-width: 400px; position: relative; z-index: 1; padding-top: 42px; margin: 0; } #related.free-mkv-related .related-box .title { font-size: 18px; color: #444; font-weight: 700; } #related.free-mkv-related .related-box span { display: block; max-width: 440px; width: 95%; min-height: 80px; margin: 10px 0 0; font-size: 16px; color: #666; text-align: left; line-height: 26px; } #related.free-mkv-related .related-box .btn-box { margin: 16px 0 0; max-width: 380px; } #related.free-mkv-related .related-box .btn-box a { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 184px; height: 38px; padding-left: 45px; border-radius: 0; background-color: #7c6dff; background-repeat: no-repeat; background-position: 16px center; font-size: 18px; color: #fff; line-height: 38px; } #related.free-mkv-related .related-box .btn-box a.win-btn { background-image: url(/images/wins-light.png); } #related.free-mkv-related .related-box .btn-box a.mac-btn { background-image: url(/images/macs-light.png); } #related.free-mkv-related .related-box .btn-box p { text-align: center; padding-top: 7px; } #compress_main { display: none; position: fixed; height: 455px; width: 686px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 6px; background-color: #fff; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); z-index: 100; } #compress_main .top_info { position: relative; width: 100%; height: 85px; border-bottom: 1px solid #ebebeb; } #compress_main .file_changing { float: left; margin: 30px 0 0 30px; padding: 0 30px; line-height: 32px; font-size: 14px; color: #fff; background-color: #5659ca; cursor: pointer; border-radius: 40px; -webkit-transition: all 0.5s; transition: all 0.5s; } #compress_main .file_changing:hover { background-color: #5659ca; } #compress_main .info_simple_key { font-size: 16px; color: #222; } #compress_main .info_simple { float: right; margin: 50px 30px 0 0; font-size: 16px; color: #666; } #compress_main .top_info .info_simple span { float: left; } #compress_main .top_info .name { margin: 0 25px 0 10px; max-width: 200px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #compress_main .top_info .top_info_close { display: block; position: absolute; top: 14px; right: 15px; width: 16px; height: 16px; background: url(/images/free-online-video-compressor/close.png) no-repeat; cursor: pointer; } #compress_main .info_menu p span:nth-child(1), #compress_main .info_menu p span:nth-child(3) { width: 100px; display: inline-block; vertical-align: middle; } #compress_main .info_menu { margin: 0 auto; height: 50px; line-height: 50px; text-align: left; } #compress_main .info_menu p { font-size: 22px; color: #5659ca; line-height: 50px; } #compress_main .info_menu p span:nth-child(1) { margin-left: 86px; } #compress_main .info_menu p img:nth-child(2) { width: 57px; display: inline-block; margin: 0 30px 0 44px; vertical-align: middle; } #compress_main .top_info .top_info_close:hover { background-position: 0 -16px; } #compress_main .info_section { position: relative; width: 100%; height: 233px; color: #666; z-index: 10; background-color: #f6f6f6; } #compress_main .info_section .info_container { width: 630px; height: 233px; margin: 0 auto; padding: 25px 0 0; } #compress_main .info_container { position: relative; } #compress_main .info_container > div { position: absolute; margin-bottom: 11px; width: 100%; left: 0; font-size: 16px; height: 24px; overflow: visible; } #compress_main .info_container > div:nth-of-type(2) { z-index: 12; top: 62px; } #compress_main .info_container > div:nth-of-type(3) { z-index: 11; top: 97px; } #compress_main .info_container > div:nth-of-type(4) { z-index: 10; top: 132px; } #compress_main .info_container > div > span { float: left; min-width: 100px; height: 24px; line-height: 24px; } #compress_main .info_container > div > span:nth-child(1) { max-width: 104px; width: 100%; text-align: right; } #compress_main .info_container > div > div:nth-child(2) { float: left; margin-right: 40px; padding-left: 10px; max-width: 146px; width: 100%; background: url(/images/free-online-video-compressor/arrow-s.png) 107px 6px no-repeat; } #compress_main .info_container > div > div:nth-child(2) > span { float: left; } #compress_main .info_container > div > div:nth-child(2) > span:nth-child(2) { text-indent: 6px; } #compress_main .info_container .select_arguments { float: left; position: relative; width: 176px; height: 24px; text-indent: 12px; border: 1px solid #bcbcbc; border-radius: 2px; font-size: 12px; line-height: 22px; overflow: hidden; background-color: #f6f6f6; z-index: 10; } #compress_main .info_container .select_arguments.select_center { cursor: pointer; } #compress_main .info_container .bitrate_select .select_arguments.select_center { cursor: unset; } #compress_main .info_container .select_arguments.active { height: auto; overflow: visible; } #compress_main .info_container .select_arguments .convert_size { margin-right: 6px; } #compress_main .info_container .select_arguments > div { width: 100%; height: 24px; -webkit-box-sizing: border-box; box-sizing: border-box; text-indent: 12px; background-color: #fff; } #compress_main .info_container .select_arguments > div:hover { background-color: #5659ca; color: #fff; } #compress_main .info_container .select_arguments i { position: absolute; display: block; width: 10px; height: 4px; background: url(/images/free-online-video-compressor/dropdown-arrow.png) 0 -1px no-repeat; cursor: pointer; } #compress_main .info_container .select_arguments .arguments_up { top: 5px; right: 7px; background-position: 0 -13px; } #compress_main .info_container .select_arguments .arguments_up:hover { background-position: 0 -19px; } #compress_main .info_container .select_arguments .arguments_down { top: 13px; right: 7px; background-position: 0 -1px; } #compress_main .info_container .select_arguments .arguments_down:hover { background-position: 0 -7px; } #compress_main .info_container .select_arguments .arguments_select { top: 10px; right: 7px; background-position: 0 -1px; } #compress_main .info_container .select_arguments.select_center:hover .arguments_select { background-position: 0 -7px; } #compress_main .info_container .all_ranges { float: left; position: relative; width: 136px; height: 24px; line-height: 24px; margin-left: 16px; background-color: #f6f6f6; } #compress_main .info_container .range { float: left; margin: 0 10px 0 0; border-top: 10px solid #f6f6f6; position: relative; width: 80px; height: 2px; overflow: visible; background-color: #fff; cursor: pointer; } #compress_main .info_container .range > span { display: inline-block; position: absolute; top: 0; left: 0; width: 80px; height: 2px; background-color: #5659ca; } #compress_main .info_container .range .range_i { display: inline-block; position: absolute; left: 100%; top: 0; width: 8px; height: 8px; margin: -3px 0 0 -3px; background-color: #5659ca; border-radius: 8px; } #compress_main .info_container .download_desktop { display: inline-block; position: absolute; top: 167px; margin: 10px auto; height: 30px; border: 1px solid #5659ca; padding: 0 15px 0 30px; line-height: 30px; text-align: center; font: 14px/40px; border-radius: 40px; color: #5659ca; text-decoration: none; background-size: 20px 20px; } #compress_main .info_container .download_desktop::after { display: block; position: absolute; width: 16px; height: 16px; content: ""; left: 12px; top: 6px; background: url(/images/free-online-video-compressor/down.png) no-repeat; } #compress_main .footer_info, #compress_main .footer_info .percent_show { position: relative; width: 100%; } #compress_main .info_container .download_desktop:hover { background: #5659ca; color: #fff; border: 1px solid #5659ca; background-size: 20px 20px; } #compress_main .info_container .download_desktop:hover::after { background: url(/images/free-online-video-compressor/down.png) 0 -16px no-repeat; color: #fff; } #compress_main .footer_info { height: 80px; padding: 10px 28px 0; color: #666; font-size: 16px; z-index: 9; } #compress_main .compressing_zoon { display: block; visibility: hidden; } #compress_main .compressing_zoon.active { display: block; visibility: visible; } #compress_main .total { display: none; position: absolute; width: 468px; height: 8px; top: 14px; background-color: #ebebeb; } #compress_main .total.active { display: block; } #compress_main .total .proccessing { position: absolute; height: 8px; background-color: #fb9100; } #compress_main .percent_show #convert_button, #compress_main .percent_show #stop { float: right; width: 97px; height: 32px; line-height: 32px; color: #fff; border-radius: 40px; text-align: center; cursor: pointer; } #compress_main .percent_show #convert_button:hover, #compress_main .percent_show #stop, #compress_main .percent_show #stop:hover { background-color: #5659ca; } #compress_main .percent_show #convert_button { font-size: 14px; background-color: #5659ca; -webkit-transition: all 0.5s; transition: all 0.5s; } #compress_main .percent_show #stop { display: none; font-size: 16px; -webkit-transition: all 0.5s; transition: all 0.5s; } .oversize { display: none; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; z-index: 99; width: 606px; height: 190px; border-radius: 10px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); left: 50%; top: 50%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; } .oversize.active { display: block; } .oversize i.oversize_close { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; background: url(/images/free-online-video-compressor/close.png) no-repeat; cursor: pointer; } .oversize i.oversize_close:hover { background-position: 0 -16px; } .oversize .tip_zoon { margin: 42px auto 0; } .oversize .tip_zoon img { float: left; margin: 0 22px 0 36px; } .oversize .tip_zoon p { float: left; width: 100%; max-width: 460px; font-size: 16px; line-height: 24px; color: #222; } .oversize_down { position: absolute; right: 22px; bottom: 24px; text-align: right; } .conversion-complete, .conversion-failed { bottom: 0; font-size: 16px; z-index: 50; left: 0; } .oversize .oversize_down a, .oversize .oversize_down span { position: static; display: inline-block; padding: 0 30px; height: 32px; text-align: center; line-height: 32px; background-color: #5659ca; border-radius: 32px; font-size: 16px; color: #fff; text-decoration: none; } .oversize .oversize_down a:hover, .oversize .oversize_down span:hover { background-color: #ff7f39; } .oversize .oversize_down a { margin-right: 24px; } .conversion-complete { display: none; position: absolute; margin: auto; top: 0; right: 0; width: 300px; height: 150px; padding: 46px 0 0; text-align: center; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); color: #222; } .conversion-complete i { display: block; position: absolute; top: 14px; right: 15px; width: 16px; height: 16px; background: url(/images/free-online-video-compressor/close.png) no-repeat; cursor: pointer; } .conversion-complete i:hover { background-position: 0 -16px; } #compress_main .conversion-complete > span { display: block; margin: 16px auto; width: 40px; padding: 5px 30px; border-radius: 20px; color: #fff; background-color: #5659ca; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } #compress_main .conversion-complete > span:hover { background-color: #5659ca; } .conversion-failed { display: none; position: absolute; margin: auto; top: 0; right: 0; width: 300px; height: 150px; padding: 46px 0 0; text-align: center; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); color: #222; } .converter_container, .transition_chosing { -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); bottom: 0; } .conversion-failed i { display: block; position: absolute; top: 14px; right: 15px; width: 16px; height: 16px; background: url(/images/free-online-video-compressor/close.png) no-repeat; cursor: pointer; } .conversion-failed > span, .conversion-failed > span:hover { background-color: #5659ca; } .conversion-failed i:hover { background-position: 0 -16px; } .conversion-failed > span { display: block; margin: 16px auto; width: 40px; padding: 5px 30px; border-radius: 20px; color: #fff; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .transition_chosing { display: none; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 610px; height: 193px; background-color: #fff; box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); z-index: inherit; } .video_change.active { display: block; } .stop_progress.active { display: block; max-width: 610px; } .exit_progress.active { display: block; } .transition_chosing i { display: block; position: absolute; top: 14px; right: 15px; width: 16px; height: 16px; background: url(/images/free-online-video-compressor/close.png) no-repeat; cursor: pointer; } .transition_chosing i:hover { background-position: 0 -16px; } .transition_chosing .info { position: absolute; left: 0; top: 48px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 36px; width: 100%; height: 46px; line-height: 46px; } .transition_chosing .info > span:nth-child(1) { float: left; width: 46px; height: 46px; line-height: 44px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #5659ca; border-radius: 30px; text-align: center; font-size: 30px; color: #5659ca; } .transition_chosing .info > span:nth-child(2) { float: left; padding-left: 22px; height: 46px; line-height: 46px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 16px; color: #222; } .transition_chosing .chosen { position: absolute; width: 206px; height: 30px; top: 138px; right: 26px; } .transition_chosing .chosen > span { display: block; width: 92px; height: 30px; border-radius: 30px; color: #fff; font-size: 16px; line-height: 30px; text-align: center; background-color: #5659ca; cursor: pointer; } .chosing_mask, .compress_main_mask { width: 100%; position: absolute; left: 0; top: 0; } .transition_chosing .chosen > span:hover { background-color: #5659ca; } .chosing_mask { display: none; height: 100%; } .chosing_mask.active { display: block; } #compress_main .type_error { display: none; position: absolute; left: 50%; top: 50%; width: 315px; height: auto; border-radius: 4px; font-size: 18px; line-height: 24px; padding: 14px; background-color: #fff; -webkit-box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.1); z-index: inherit; text-align: center; color: #222; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); } #compress_main .type_error a { background: #5659ca; height: 40px; width: 136px; line-height: 40px; border-radius: 44px; font-size: 16px; color: #fff; display: block; margin: 10px auto 0; } .compress_main_mask { display: none; height: 1920px; background: rgba(0, 0, 0, 0.3); z-index: 99; } .compressing_mask, .compressing_mask_fit { position: absolute; z-index: 40; width: 100%; left: 0; top: 0; } .compress_main_mask.active { display: block; } .compressing_mask { display: none; height: 100%; background: rgba(0, 0, 0, 0.3); } .compressing_mask.active { display: block; } .compressing_mask_fit { display: none; height: 320px; } .compressing_mask_fit.active { display: block; } #banner.pdf_compressor .rev { margin-bottom: 47px; } #banner.pdf_compressor .pdf_box > div { padding: 0 20px 15px; max-width: 460px; margin: auto; width: 100%; border: 2px dashed #fff; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } #banner.pdf_compressor .pdf_box > div.active { max-width: 644px; } #banner.pdf_compressor .pdf_box > div.uploadBox { padding-bottom: 0; } #banner.pdf_compressor #upload_zone { cursor: pointer; padding: 44px 0 23px; } #banner.pdf_compressor #upload_zone > img { display: none; } #banner.pdf_compressor .btn { display: block; width: 300px; height: 60px; line-height: 60px; margin: 0 auto; border: 0; border-radius: 33px; color: #fff; font-size: 20px; outline: 0; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; background: #ff9600; text-align: center; } #banner.pdf_compressor .btn:hover { -webkit-box-shadow: 0 0 20px 4px rgba(252, 113, 81, 0.51); box-shadow: 0 0 20px 4px rgba(252, 113, 81, 0.51); } #banner.pdf_compressor .btn img { display: inline-block; vertical-align: -2px; margin-right: 15px; } #banner.pdf_compressor #upload_zone p { text-align: center; font-size: 20px; color: #fff; margin-top: 7px; } #banner.pdf_compressor #pdf_commit { padding-bottom: 15px; } #banner.pdf_compressor .compressingContent { padding-bottom: 50px; } #banner.pdf_compressor .compressingContent > div { width: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px auto 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 14px; position: relative; } #banner.pdf_compressor .compressingContent > div i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #fdccc8; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } #banner.pdf_compressor .compressingContent > div i:nth-child(1) { left: 0; position: absolute; } #banner.pdf_compressor .compressingContent > div i:nth-child(2) { left: 50%; position: absolute; -webkit-transform: translate(-50%); transform: translate(-50%); } #banner.pdf_compressor .compressingContent > div i:nth-child(3) { right: 0; position: absolute; } #banner.pdf_compressor .compressingContent > div i.active { width: 12px; height: 12px; background: #ff5e54; } #banner.pdf_compressor #result { padding-bottom: 20px; } #loader img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; } #banner.pdf_compressor #pdf_commit span { font-size: 16px; color: #fff; float: left; } #banner.pdf_compressor #pdf_commit a:nth-child(1), .compressingContent a:nth-child(1) { position: absolute; right: 19px; top: 14px; } #banner.pdf_compressor #pdf_commit a:nth-child(1):hover, .compressingContent a:nth-child(1):hover { -webkit-animation: rotate 2s infinite linear; animation: rotate 2s infinite linear; } #banner.pdf_compressor #pdf_commit img:nth-child(2), .compressingContent img:nth-child(2) { margin: 16px auto 0; display: block; } #banner.pdf_compressor #pdf_commit img:nth-child(3), .compressingContent img:nth-child(3) { position: absolute; top: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #banner.pdf_compressor #pdf_commit div { max-width: 572px; width: 100%; margin: 30px auto 0; overflow: hidden; } #banner.pdf_compressor #pdf_commit div p { border-radius: 8px; background: #fff; height: 16px; line-height: 16px; text-align: center; margin-top: 30px; color: #fff; overflow: hidden; position: relative; } #banner.pdf_compressor #pdf_commit div p i { width: 0%; height: 100%; display: block; background: #2fd8b4; position: absolute; z-index: 1; border-radius: 40px; } #banner.pdf_compressor #pdf_commit span:nth-child(2) { float: right; } #banner.pdf_compressor #pdf_commit div p span { position: relative; z-index: 2; float: none !important; color: #fff; font-size: 12px; } #banner.pdf_compressor #result > img { margin: 16px auto; display: block; } #banner.pdf_compressor #result > p#filename { font-size: 14px; color: #606060; text-align: center; margin-bottom: 30px; } #banner.pdf_compressor #result > p { text-align: center; color: #fff; font-size: 14px; margin: 0 auto; } #banner.pdf_compressor #result > p span { font-size: 20px; color: #fff; } #banner.pdf_compressor #result div { max-width: 500px; width: 100%; margin: 10px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } #banner.pdf_compressor #result div a { -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #2c3846; text-align: center; width: 237px; height: 45px; line-height: 41px; display: block; background: #2c3846; color: #fff; font-size: 18px; border-radius: 4px; } #banner.pdf_compressor #result div a:hover { text-decoration: none; background: #36475f; } #banner.pdf_compressor #result div a img { margin-right: 12px; vertical-align: -3px; } #banner.pdf_compressor #result div a:nth-child(2) { border-color: #ff5e56; color: #ff5e56; background: #fff; } #banner.pdf_compressor #result div a:nth-child(2):hover { background: #ff5e56; color: #fff; } #steps.pdf_compressor .container { border-bottom: 2px solid #eee; padding: 74px 0 37px; } #banner .progress .download { display: none; } .banner .btn-download { display: block; margin: 22px auto 49px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 207px; height: 46px; padding-left: 20px; border: 0; border-radius: 30px; background: url(/images/free-online-image-compressor/down.png) 32px 10px no-repeat #32bfb4; color: #fff; font-size: 16px; line-height: 32px; cursor: pointer; outline: 0; } .compressor, .progress ul li { -webkit-box-sizing: border-box; } .banner .btn-download:hover { background-color: #2fd4c7; } .compressor { position: relative; margin: 0 auto; box-sizing: border-box; width: 100%; max-width: 525px; cursor: pointer; } .compressor:hover .file span { background: -webkit-gradient( linear, left top, left bottom, from(#ff855b), to(#fc694c) ); background: linear-gradient(-180deg, #ff855b, #fc694c); } #banner .compressor > .file { margin: 36px auto 0; } .compressor > .file { display: block; width: 100%; } .compressor > .file span { display: block; width: 300px; height: 60px; line-height: 60px; margin: 0 auto; border: 0; border-radius: 33px; color: #fff; font-size: 20px; outline: 0; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; background: #ff9600; text-align: center; } .compressor > .file span:hover { -webkit-box-shadow: 0 0 20px 4px rgba(252, 113, 81, 0.51); box-shadow: 0 0 20px 4px rgba(252, 113, 81, 0.51); } .compressor > .file:hover { background-position-y: -110px; } .compressor > .file span img { display: inline-block; margin-right: 16px; vertical-align: -4px; } .compressor > .file input { display: block; width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; cursor: pointer; } .compressor > .file p { display: inherit; margin: 30px auto 0; font-size: 18px; color: #222; } #banner .compressor > .file p:nth-of-type(1) { margin: 10px auto 0; color: #fff; font-size: 18px; } #banner .compressor > .file p:nth-of-type(2) { margin: 0 auto; font-size: 14px; color: #fff; line-height: 14px; } .compressor > span { display: inherit; margin: 30px auto 0; font-size: 28px; color: #222; } .compressor > p { margin: 20px auto 0; color: #444; } .progress ul { max-width: 1200px; width: 100%; margin: 0 auto; } .progress ul li { margin-top: 10px; height: 47px; background: #edf1fa; border-radius: 50px; line-height: 47px; box-sizing: border-box; text-align: left; } .progress ul li div, .progress ul li span.name { -webkit-box-sizing: border-box; overflow: hidden; } .progress ul li span { display: inline-block; vertical-align: middle; font-size: 16px; } .progress ul li div, .progress ul li span.name, .progress ul li span.size { display: inline-block; vertical-align: top; } .progress ul li span.name { width: 23.272%; margin-right: 1.818%; color: #666; padding-left: 3.636%; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; line-height: 47px; } .progress ul li span.size { color: #06a475; width: 8.272%; } .progress ul li div { margin: 15px 0; position: relative; box-sizing: border-box; width: 100%; max-width: 395px; height: 16px; font-size: 12px; line-height: 32px; border-radius: 30px; text-align: center; } .progress ul li div i, .progress ul li div i.progress-bar { width: 0%; height: 18px; border-radius: 30px; font-size: 12px; color: #fff; } .progress ul li div i { float: left; max-width: 510px; line-height: 18px; overflow: hidden; font-style: normal; } .progress ul li div i.progress-bar { background-color: #3c97e6; line-height: 16px; } .progress ul li .reduce, .progress ul li a { height: 47px; text-align: left; display: inline-block; vertical-align: top; } .progress ul li div i.progress-bar-success { background-color: #32bfb4; } .progress ul li div i.progress-bar-danger { background-color: #fb6a4d; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 2px; } .progress ul li a { width: 90px; line-height: 45px; margin-left: 35px; } .progress ul li .reduce { width: 100px; line-height: 47px; margin-left: 60px; color: #fc6a4d; } #banner .progress .download { margin: 22px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 207px; height: 46px; padding-left: 20px; border: 0; border-radius: 30px; background: url(/images/free-image-compressor/down-i.png) 32px 10px no-repeat #32bfb4; color: #fff; font-size: 16px; line-height: 46px; cursor: pointer; outline: 0; text-align: center; } .progress .download:hover { background-color: #2fd4c7; } .progress ul li span.original-size { display: inline-block; width: 90px; height: 47px; white-space: nowrap; text-overflow: ellipsis; color: #32bfb4; line-height: 47px; text-align: left; text-indent: 10px; vertical-align: top; } #support, .compress_box ul li, .compress_box > p { width: 100%; text-align: center; } .compress { background: #5283fa; padding-top: 80px; height: 460px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 160px; } .compress_box ul li, div { -webkit-box-sizing: border-box; } .compress_box h2 { font-size: 36px; color: #fff; line-height: 36px; text-align: center; } .compress_box > p { max-width: 730px; font-size: 16px; color: #fff; line-height: 30px; margin: 35px auto 10px; } .compress_box ul li:last-child { margin-right: 0; } .compress_box ul li { max-width: 378px; background: #fff; overflow: hidden; padding: 0 30px 50px; box-sizing: border-box; float: left; margin-top: 40px; min-height: 300px; border-radius: 5px; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.18); box-shadow: 0 0 20px rgba(0, 0, 0, 0.18); } .compress_box ul li img { margin: 46px auto 10px; } .compress_box ul li span { font-size: 22px; color: #222; margin: 10px auto; display: block; } .compress_box ul li p { font-size: 16px; color: #666; line-height: 30px; } .clearfloat:after { content: ""; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } div { box-sizing: border-box; } .converter-main select { appearance: none; -moz-appearance: none; -webkit-appearance: none; padding: 0 14px; font: 16px; background: url(/images/free-online-video-converter/point.png) 93px -12px no-repeat; background-size: 10px 98px; color: #666; } .converter-main select::-ms-expand { display: none; } .free_btn { position: relative; z-index: 5; -webkit-box-sizing: border-box; box-sizing: border-box; background: #9432f7; color: #fff; max-width: 473px; width: 100%; height: 73px; line-height: 73px; font-size: 26px; display: block; border: 1px solid transparent; border-radius: 68px; margin: 30px auto; cursor: pointer; -webkit-transition: all 1s; transition: all 1s; } #support { position: relative; top: -20px; height: 20px; font-size: 16px; } .select-mac { background: url(/images/free-online-video-converter/point_mac.png) 100px -12px no-repeat; background-size: 10px 98px; } .converter-main select:hover { background: url(/images/free-online-video-converter/point.png) 93px -38px no-repeat; } .converter-main select.select-mac:hover { background: url(/images/free-online-video-converter/point_hover_mac.png) 100px -12px no-repeat; background-size: 10px 98px; } .select-hover-win { background: url(/images/free-online-video-converter/point_hover.png) 100px -12px no-repeat; background-size: 10px 98px; } .select-hover-mac { background: url(/images/free-online-video-converter/point_hover_mac.png) 100px -12px no-repeat; background-size: 10px 98px; } .settings_title select.profile { max-width: 490px; width: 73%; background: url(/images/free-online-video-converter/point.png) 444px -12px no-repeat; background-size: 10px 98px; } .settings_title select.profile:hover { background-position: 444px -38px; } .converter-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; } .converter_container { position: fixed; top: 0; left: 0; right: 0; margin: auto; width: 1000px; height: 682px; border-radius: 8px; background-color: #fff; box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); z-index: 40; } .converter_container > div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; } .file_page { width: 1000px; height: 682px; font-size: 16px; } #free_btn_container_1, #free_btn_container_2 { position: relative; } .botton_mask { position: absolute; left: 0; top: 0; width: 1000px; height: 98px; border-radius: 8px; background-color: transparent; } .file_page .item_file_menu { margin: 0 auto; border-bottom: 1px solid #ddd; width: 92%; height: 99px; vertical-align: middle; } .file_page .item_file_menu input { float: left; margin-top: 40px; padding: 0 30px; height: 38px; outline: 0; border: 1px solid #9432f7; border-radius: 40px; font: 16px 700; color: #fff; background-color: #9432f7; -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; } .file_page .item_file_menu input:hover { background-color: #9432f7; color: #fff; border: 1px solid #9432f7; } .file_page .item_file_menu i { display: inline-block; position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; background: url(/images/free-online-video-converter/close.png) no-repeat; background-size: 22px 66px; cursor: pointer; } .file_page .item_file_menu i:hover { background-position: 0 -22px; } .file_page .item_files_list { position: relative; width: 92%; height: 420px; margin: 0 auto; overflow-y: auto; overflow-y: -moz-scrollbars-none; } .file_page .item_files_list .item_files { position: relative; width: 100%; height: 106px; -moz-width: 900px; padding: 14px 14px 2px; border-bottom: 1px dashed #e6e6e6; } .file_page .item_files_list .item_files:hover { background-color: #f6f6f6; -webkit-transition: 1s; transition: 1s; } .file_page .item_files_list .item_files.ch { background: #f6f6f6; border-bottom: 1px dashed transparent; } .file_page .item_files_list .item_files.ch_f { border-bottom: 1px dashed transparent; } .file_page .item_files_list .item_files > div { position: relative; height: 80px; } .file_page .item_files_left, .file_page .item_files_middle, .file_page .item_files_right { float: left; height: 88px; } .file_page .item_files_right { float: right; height: 88px; } .file_page .item_files_left { margin-right: 30px; border-radius: 6px; background-color: #000; overflow: hidden; cursor: pointer; } .file_page .item_files_left > div { position: relative; display: inline-block; width: 120px; height: 80px; overflow: hidden; } .file_page .item_files_left > div img { display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; max-width: 120px; max-height: 80px; } .file_page .item_files_left > div .video_play { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 34px 34px; } .file_page .item_files_left > div .video_play:hover, .file_page .item_files_left > div .video_play_hover { background: url(/images/free-online-video-converter/play.png) 44px 24px no-repeat rgba(0, 0, 0, 0.4); background-size: 34px 34px; } .file_page .item_files_middle { width: 400px; } .file_page .item_files_middle p { text-align: left; margin: 10px auto; color: #666; } .file_page .item_files_middle p:nth-of-type(1) { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file_page .item_files_middle p:nth-of-type(2) span { display: inline-block; width: 80px; height: 18px; font-size: 16px; line-height: 18px; color: #888; vertical-align: bottom; } .file_page .item_files_middle p:nth-of-type(2) i { display: inline-block; margin-right: 16px; width: 18px; height: 18px; border-radius: 16px; background: url(/images/free-online-video-converter/information.png) 0 no-repeat; vertical-align: middle; cursor: pointer; background-size: 18px 54px; } .file_page .item_files_middle p:nth-of-type(2) i:hover { background-position: 0 -36px; } .file_page .item_files_right { width: 300px; } .file_page .item_files_right .item_format { display: inline-block; position: absolute; top: 24px; right: 72px; width: 67px; height: 30px; border: 1px solid #9432f7; border-radius: 6px; text-align: center; line-height: 30px; font-size: 15px; vertical-align: middle; color: #9432f7; } .file_page .item_files_right .item_format.right { right: 120px; } .file_page .item_files_right .info_show_fail { display: inline-block; position: absolute; top: 28px; right: 24px; width: 24px; height: 24px; border-radius: 30px; background: url(/images/free-online-video-converter/question.png) no-repeat; background-size: 24px 24px; } .file_page .item_files_right .info_waiting { display: inline-block; position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; background: url(/images/free-online-video-converter/wait.png) no-repeat; background-size: 32px 32px; } .file_page .item_files_right .info_loading { display: inline-block; position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; background: url(/images/free-online-video-converter/loading.gif) no-repeat; background-size: 32px 32px; text-align: center; line-height: 32px; color: #222; font-size: 12px; } .file_page .item_files_right .info_show { display: inline-block; position: absolute; top: 28px; right: 26px; width: 24px; height: 24px; background: url(/images/free-online-video-converter/file.png) no-repeat; background-size: 24px 96x; } .file_page .item_files_right .info_show:hover { background-position: 0 -72px; } .file_page .item_files_right .info_show-fid { background: url(/images/free-online-video-converter/file_d.png) no-repeat #9432f7; background-size: 24px 96x; } .file_page .item_files_right .info_show-p { background: url(/images/free-online-video-converter/file_p.png) no-repeat; background-size: 24px 96x; } .file_page .item_files_right .convert_complete { display: inline-block; position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; background: url(/images/free-online-video-converter/success.png) no-repeat; background-size: 32px 32px; } .file_page .item_files_right i.settings { display: inline-block; position: absolute; top: 28px; right: 24px; width: 24px; height: 24px; border-radius: 30px; font-size: 30px; color: #ccc; background: url(/images/free-online-video-converter/set.png) no-repeat; background-size: 24px 96px; cursor: pointer; } .file_page .item_files_right i.settings.right { right: 72px; } .file_page .item_files_right i.settings:hover { background-position: 0 -72px; } .file_page .item_files_right i.settings-fid { background: url(/images/free-online-video-converter/set_press-d.png) no-repeat #9432f7; background-size: 24px 24px; } .file_page .item_files_right i.item_files_delete { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 30px; background: url(/images/free-online-video-converter/close.png) no-repeat; background-size: 20px 60px; cursor: pointer; visibility: hidden; } .file_page .item_files_list .item_files:hover i.item_files_delete { visibility: visible; } .file_page .item_files_right i.item_files_delete:hover { background-position: 0 -20px; } .file_page .item_files_list .conversion-complete { display: none; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0; width: 300px; height: 150px; padding: 46px 0 0; text-align: center; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); font-size: 16px; z-index: 50; } .conversion-complete > p { margin: 0; color: #222; } .conversion-complete > span { display: block; margin: 16px auto; width: 40px; padding: 5px 30px; border-radius: 20px; color: #fff; background-color: #9432f7; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .conversion-complete > span:hover { background-color: #9432f7; } .file_page .item_type { position: absolute; left: 40px; top: 498px; width: 920px; height: 80px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 7px 0; overflow: hidden; background-color: #fff; } .file_page .item_type > div { position: absolute; width: 820px; height: 64px; text-align: center; background-color: #fff; } .file_page .item_type > div:nth-of-type(1) { border: 0; left: 0; } .file_page .item_type > div > div { float: left; } .file_page .item_type > div:nth-of-type(2) { left: 821px; width: 801px; height: 64px; border-left: 1px solid #ccc; } .file_page .item_type .audio_c, .file_page .item_type .video_c { width: 700px; padding: 0; height: 64px; } .file_page .item_type .video_i { width: 100px; height: 64px; background: url(/images/free-online-video-converter/video_choose.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .video_i_hover { background: url(/images/free-online-video-converter/video.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .audio_i { width: 99px; height: 64px; background: url(/images/free-online-video-converter/audio.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .audio_i_hover { background: url(/images/free-online-video-converter/audio_choose.png) 16px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .audio_c span, .file_page .item_type .video_c span { float: left; min-width: 100px; height: 30px; line-height: 30px; text-align: left; color: #222; font-size: 16px; } .audio_c span input, .video_c span input { outline: 0; } .audio_c span label, .video_c span label { display: inline-block; padding: 0 30px 0 9px; width: 40px; } .file_page .item_type .audio_i img, .file_page .item_type .video_i img { float: left; margin: 0 28px 0 8px; width: 60px; height: 60px; line-height: 80px; } .file_page #item_type_1 { position: absolute; left: 40px; top: 498px; width: 920px; height: 80px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 7px 0; overflow: hidden; z-index: 10; } .file_page #item_type_1 > div { position: absolute; width: 800px; height: 64px; text-align: center; background-color: #fff; } .file_page #item_type_1 > div:nth-of-type(1) { border: 0; left: 0; } .file_page #item_type_1 > div > div { float: left; } .file_page #item_type_1 > div:nth-of-type(2) { left: 821px; width: 801px; height: 64px; border-left: 1px solid #ccc; } .file_page #item_type_1 .audio_i_1 img, .file_page #item_type_1 .video_i_1 img { float: left; margin: 0 28px 0 8px; width: 60px; height: 60px; line-height: 80px; } .file_page #item_type_1 .audio_c_1, .file_page #item_type_1 .video_c_1 { position: relative; width: 700px; padding: 0; height: 64px; } .file_page #item_type_1 .video_i_1 { width: 100px; height: 64px; background: url(/images/free-online-video-converter/video_choose.png) 8px 0 no-repeat; } .file_page #item_type_1 .video_i_hover { background: url(/images/free-online-video-converter/video.png) 8px 0 no-repeat; } .file_page #item_type_1 .audio_i_1 { width: 99px; height: 64px; background: url(/images/free-online-video-converter/audio.png) 8px 0 no-repeat; } .file_page #item_type_1 .audio_i_hover { background: url(/images/free-online-video-converter/audio_choose.png) 16px 0 no-repeat; } .file_page #item_type_1 .audio_c_1 span, .file_page #item_type_1 .video_c_1 span { float: left; min-width: 100px; height: 30px; line-height: 30px; text-align: left; font-size: 16px; color: #222; } .audio_c_1 span input, .video_c_1 span input { outline: 0; } .audio_c_1 span label, .video_c_1 span label { display: inline-block; padding: 0 30px 0 9px; width: 40px; } .converter_container #item_type_1 .audio_i img, .converter_container #item_type_1 .video_i img { float: left; margin: 0 28px 0 8px; width: 60px; height: 60px; line-height: 80px; } .converter_container .item_footer { position: absolute; left: 40px; top: 578px; width: 920px; height: 104px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 24px 0; vertical-align: middle; } .converter_container .item_footer a { float: left; height: 38px; border: 1px solid #9432f7; padding: 0 20px 0 70px; line-height: 40px; text-align: center; font: 14px/40px; border-radius: 40px; color: #9432f7; text-decoration: none; background: url(/images/free-online-video-converter/down-s.png) 15px 3px no-repeat; -webkit-transition: all 0.5; transition: all 0.5; } .converter_container .item_footer a:hover { background: url(/images/free-online-video-converter/down_hover.png) 15px 3px no-repeat #9432f7; color: #fff; border: 1px solid #9432f7; } .converter_container .item_footer .item_footer_convert { float: right; padding: 0 40px; height: 38px; background-color: #9432f7; border: 1px solid #9432f7; border-radius: 40px; text-align: center; line-height: 40px; font: 18px/38px; color: #fff; -webkit-transition: 0.5s; transition: 0.5s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .converter_container .item_footer .item_footer_stop { float: right; display: none; width: 136px; height: 38px; background-color: #9432f7; border: 1px solid #9432f7; border-radius: 40px; text-align: center; line-height: 40px; font: 18px/38px; color: #fff; -webkit-transition: 0.5s; transition: 0.5s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .buyMask .buyListBox .buyBtnBox .btn, .mask_box, .noselect { -moz-user-select: none; -ms-user-select: none; } .converter_container .item_footer .item_footer_convert:hover, .converter_container .item_footer .item_footer_stop:hover { background-color: #9432f7; border: 1px solid #9432f7; } .converter_container .item_info { position: absolute; left: 0; top: 56%; right: 0; margin: -28% auto 0; width: 70%; padding: 0 0 30px; z-index: 40; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); font-size: 16px; } .converter_container .item_info .item_info_top { width: 100%; height: 60px; } .converter_container .item_info > div:nth-of-type(2) { max-height: 400px; min-height: 120px; overflow-y: auto; } .converter_container .item_info fieldset { border: 0; border-top: 1px solid #e2e2e2; width: 80%; margin: 0 auto; } .converter_container .item_info legend { text-align: center; padding: 0 6px; color: #222; } .item_info > div:nth-of-type(1) > i { float: right; margin-top: 15px; margin-right: 15px; width: 22px; height: 22px; background: url(/images/free-online-video-converter/close.png) no-repeat; border-radius: 22px; cursor: pointer; background-size: 22px 66px; } .item_info > div:nth-of-type(1) > i:hover { background-position: 0 -22px; } .item_info fieldset > div { float: left; width: 50%; color: #666; } .item_info fieldset > div.audio_right, .item_info fieldset > div.general_right, .item_info fieldset > div.video_right { padding: 0 0 0 50px; } .item_info fieldset > div p { text-align: left; margin: 10px 0; } .item_info fieldset > div span { display: inline-block; min-width: 120px; text-align: left; } .item_info p { display: block; width: 216px; margin: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: #666; } .converter_container .item_settings_one, .converter_container .item_settings_three, .converter_container .item_settings_two { top: 0; right: 0; left: 0; z-index: 999; margin: auto; border-radius: 8px; width: 642px; background-color: #fff; position: absolute; bottom: 0; } .converter_container .item_settings { font-size: 16px; } .converter_container .item_settings_one { height: 470px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); } .converter_container .item_settings_three, .converter_container .item_settings_two { height: 282px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); } .converter_container .item_settings_one .settings_title { margin: 0 auto; width: 88%; height: 96px; } .converter_container .item_settings_three .settings_title, .converter_container .item_settings_two .settings_title { margin: 0 auto; width: 88%; height: 50px; } .settings_title > span { position: absolute; vertical-align: middle; left: 38px; top: 50px; color: #222; font-size: 16px; } .settings_title > select { position: absolute; left: 134px; top: 50px; width: 184px; height: 24px; border: 1px solid #e2e2e2; border-radius: 2px; } .settings_title > i { float: right; margin-top: 15px; margin-right: -23px; width: 22px; height: 22px; background: url(/images/free-online-video-converter/close.png) no-repeat; background-size: 22px 66px; cursor: pointer; } .settings_title > i:hover { background-position: 0 -22px; } .item_info_settings fieldset { margin: 0 auto 18px; width: 88%; border: 0; border-top: 1px solid #e2e2e2; padding: 0; text-align: left; font-size: 16px; } .item_info_settings fieldset:nth-last-of-type(1) { padding-bottom: 12px; } .item_info_settings fieldset legend { text-align: center; padding: 0 6px; color: #222; } .item_info_settings fieldset > div:nth-of-type(1) { float: left; width: 43%; } .item_info_settings fieldset > div:nth-of-type(2) { float: right; width: 44%; } .item_info_settings fieldset > div > div:nth-of-type(1) { float: left; width: 50%; } .item_info_settings fieldset > div > div:nth-of-type(2) { float: right; width: 120px; } .item_info_settings fieldset div p { margin: 0; font-size: 16px; color: #222; text-align: left; } .joiner span.title, .joiner_files_box span, .joiner_footer .down { text-align: center; display: block; } .item_info_settings fieldset div p:nth-of-type(1) { margin-top: 20px; } .item_info_settings fieldset div p:nth-of-type(2) { margin-top: 16px; } .item_info_settings fieldset div select { margin: 0; width: 120px; height: 24px; border: 1px solid #e2e2e2; border-radius: 2px; } .item_info_settings fieldset div select:nth-of-type(1) { margin-top: 19px; } .item_info_settings fieldset div select:nth-of-type(2) { margin-top: 13px; } .item_info_settings fieldset > p { float: left; margin: 0; } .item_info_settings fieldset .input_loop { margin: 15px 0; } .item_info_settings fieldset .label_loop { font-size: 16px; } .item_info_settings .button { margin: 0 auto; width: 88%; height: 100px; border-top: 1px solid #e2e2e2; } .converter_container .button * { float: left; width: 106px; height: 30px; margin-top: 30px; border: 1px solid #9432f7; font-size: 16px; line-height: 30px; text-align: center; border-radius: 30px; } .converter_container .button .item_settings_default { color: #9432f7; cursor: pointer; } .converter_container .button .item_settings_default:hover { color: #fff; background-color: #9432f7; } .converter_container .button .item_settings_submit { color: #fff; background-color: #9432f7; margin-top: 30px; margin-left: 226px; width: 108px; height: 32px; outline: 0; cursor: pointer; } .converter_container .button .item_settings_cancel { color: #9432f7; margin-left: 14px; cursor: pointer; } .converter_container .button .item_settings_cancel:hover { color: #fff; background-color: #9432f7; } .converter-main .file_page .btn-fid, .converter-main .file_page .btn-hover { background-color: #9432f7; color: #fff; border: 1px solid #9432f7; } .btn-fid { background-color: #9432f7; } .converter-main .file_page .btn-press { background-color: #fff; color: #ff612b; border: 1px solid #9432f7; } .converter-main .file_page .settings-press { background: url(/images/set_d.png) no-repeat; } .file_page-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; } .mask { background-color: rgba(0, 0, 0, 0.36); } .mask_info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.36); } .maskadd, .maskover { position: fixed; height: 100%; background-color: rgba(0, 0, 0, 0.36); top: 0; left: 0; width: 100%; } .maskover { z-index: 900; } .maskadd { z-index: 999; } .btn-mask, .btn-span-mask, .file_page #item_type_1 .btn-mask_1 { background-color: transparent; position: absolute; } .btn-mask { top: 0; left: 720px; width: 200px; height: 80px; z-index: 999; } .file_page #item_type_1 .btn-mask_1 { top: 0; left: 0; width: 100%; height: 80px; z-index: 999; } .app-mask, .body_mask, .btn-span-mask, .convert-mask, .files-mask { height: 100%; top: 0; left: 0; width: 100%; } .files-mask { position: absolute; } .file_page #item_type_1 #input_mask, .file_page .item_type .item_type_mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; } .convert-mask { position: absolute; } .app-mask { position: absolute; z-index: 21; } .body_mask { position: fixed; background-color: rgba(0, 0, 0, 0.36); } .item_files_list-mask { position: absolute; top: 0; left: 0; width: 100%; background-color: transparent; } .joiner .format div.Format > div, .joiner .format div.Resolution > div { height: 30px; font-size: 16px; line-height: 30px; } .mask_box { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.36); display: none; -webkit-user-select: none; user-select: none; } .joiner { width: 850px; height: 420px; background: #fff; border-radius: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; -webkit-user-seletct: none; -moz-user-seletct: none; -ms-user-seletct: none; user-seletct: none; } .joiner > .close { position: absolute; top: 14px; right: 30px; cursor: pointer; } .joiner span.title { font-size: 24px; color: #222; margin-top: 26px; margin-bottom: 17px; font-weight: 550; } .joiner_files_box { width: 264px; height: 176px; border-radius: 8px; border: 1px dashed #5659ca; margin: 0 auto 30px; cursor: pointer; } .joiner .format div.Format, .joiner .format select { height: 30px; border: 1px solid #e2e2e2; -webkit-box-sizing: border-box; } .joiner_files_box img { margin: 36px auto 22px; display: block; } .joiner_files_box span { font-size: 16px; color: #666; } .joiner .format > span { font-size: 16px; color: #222; display: inline-block; margin-right: 12px; font-weight: 550; } .joiner .format { width: 514px; margin: auto; padding-top: 8px; } .joiner .format > * { vertical-align: top; min-height: 30px; line-height: 30px; } .mask_box select { appearance: none; -moz-appearance: none; -webkit-appearance: none; padding: 0 14px; font-size: 14px; background: url(/images/free-online-video-converter/point.png) 93px -12px no-repeat; background-size: 10px 98px; color: #666; } .mask_box select::-ms-expand { display: none; } .joiner .format select:nth-of-type(1) { margin-right: 46px; } .joiner .format select { width: 130px; border-radius: 2px; padding: 0 14px; box-sizing: border-box; background-size: 10px 98px; background-position: 102px -8px; } .joiner .format div.Format, .joiner .format div.Resolution { display: inline-block; width: 130px; font-size: 16px; line-height: 30px; padding: 0; text-indent: 14px; } .joiner .format div.Format { margin: 0; border-radius: 2px; box-sizing: border-box; overflow: hidden; background-color: #fff; } .joiner .format .Format_confirm, .joiner .format .Resolution_confirm { background: url(/images/free-online-video-converter/point.png) 102px -8px no-repeat #fff; background-size: 10px 98px; cursor: pointer; } .joiner .format div.Format.active { overflow: visible; height: auto; } .joiner .format div.Resolution { margin: 0 48px 0 0; height: 30px; border: 1px solid #e2e2e2; border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background-color: #fff; } .joiner .format div.Resolution.active { overflow: visible; height: auto; } .joiner_footer { border-top: 1px solid rgba(153, 153, 153, 0.57); padding: 20px 30px; position: absolute; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; bottom: 0; } .joiner_footer .down { float: left; height: 38px; border: 1px solid #5659ca; padding: 0 20px 0 50px; line-height: 36px; font: 14px/40px; border-radius: 40px; color: #5659ca; text-decoration: none; background: url(/images/free-online-video-converter/down-s.png) 15px 3px no-repeat; -webkit-transition: all 0.5; transition: all 0.5; -webkit-box-sizing: border-box; box-sizing: border-box; width: 220px; } .Failed, .Successfully, .joiner_footer span, .joiner_merge_box .video span, .mask_box .type_error { font-size: 16px; text-align: center; } .joiner_footer .down:hover { background: url(/images/free-online-video-converter/down_hover.png) 15px 3px no-repeat #5659ca; color: #fff; border: 1px solid #5659ca; } .joiner_footer span { color: #fff; width: 120px; height: 32px; background: #d5d5d5; float: right; line-height: 32px; border-radius: 16px; -webkit-box-shadow: 0 0 4px rgba(213, 213, 213, 0.28); box-shadow: 0 0 4px rgba(213, 213, 213, 0.28); cursor: pointer; } .joiner_footer span.active:hover, .joiner_footer span.stop:hover { -webkit-box-shadow: 0 0 9px 4px rgba(6, 130, 254, 0.28); box-shadow: 0 0 9px 4px rgba(6, 130, 254, 0.28); } .joiner_footer span.active, .joiner_footer span.stop { background: #5659ca; } .joiner_merge_scroll { width: 723px; overflow-x: auto; margin: auto; -webkit-box-sizing: border-box; box-sizing: border-box; height: 184px; overflow-y: hidden; } .joiner_merge_scroll::-webkit-scrollbar { height: 5px; background: #dadada; border-radius: 5px; } .joiner_merge_scroll::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 5px; } .joiner_merge_scroll::-webkit-scrollbar-thumb { border-radius: 5px; background-clip: padding-box; background-color: rgba(232, 232, 232, 0.9); } .joiner_merge_scroll:hover::-webkit-scrollbar { height: 12px; } .joiner_merge_box { width: unset; position: relative; height: 119px; padding-top: 40px; margin: auto; padding-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .joiner_merge_box div { position: absolute; } .joiner_merge_box .video { width: 110px; } .joiner_merge_box .video:hover img:last-child { display: block; } .joiner_merge_box .video span { display: block; color: #888; height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .joiner_merge_box .video img:nth-child(1), .joiner_merge_box .video video { width: 100%; height: 90px; display: block; } .joiner_merge_box .video img:last-child { position: absolute; top: -9px; right: -9px; display: none; cursor: pointer; } .joiner_merge_box .after_push, .joiner_merge_box .front_push { width: 60px; height: 36px; top: 68px; font-size: 16px; color: #222; text-align: center; cursor: pointer; } .joiner_merge_box .after_push img, .joiner_merge_box .front_push img { display: block; margin: 0 auto; } .joiner_merge .format { width: 700px; margin-top: 30px; height: 40px; overflow: visible; } .joiner_merge .format > span:nth-child(1) { margin-right: 46px; } .joiner_merge { z-index: 10; position: relative; } .joiner_merge > i { display: block; position: absolute; width: 14px; height: 34px; top: 118px; background: url(/images/free-online-video-joiner/arrow.png); cursor: pointer; } .joiner_merge .join_merge_left { left: 18px; } .joiner_merge .join_merge_right { right: 18px; -webkit-transform: -webkit-rotate(-180deg); transform: -webkit-rotate(-180deg); transform: -moz-rotate(-180deg); transform: -o-rotate(-180deg); transform: rotate(-180deg); } .joiner_wait { overflow: hidden; } .joiner_wait_box { margin: 50px auto 0; max-width: 547px; position: relative; } .joiner_wait_box img { width: 100%; } .joiner_wait_box img:last-child { position: absolute; left: 100px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation: left 3s infinite linear; animation: left 3s infinite linear; } .Failed, .Successfully { position: absolute; z-index: 10; top: 50%; left: 50%; width: 300px; height: 150px; padding: 46px 0 0; background-color: #fff; border-radius: 6px; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-sizing: border-box; box-sizing: border-box; } .Failed > p, .Successfully > p { margin: 0; color: #222; } .Failed > span, .Successfully > span { display: block; margin: 16px auto; width: 40px; padding: 5px 30px; border-radius: 20px; color: #fff; background-color: #5659ca; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .Failed > span:hover, .Successfully > span:hover { background-color: #5659ca; } .mask_box .type_error { display: none; position: absolute; z-index: 10; left: 50%; top: 50%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 376px; min-height: 130px; padding: 30px; line-height: 30px; color: #222; white-space: pre-wrap; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18); border-radius: 10px; background-color: #fff; word-break: break-word; font-weight: 700; } .joiner_converter_mask { display: none; position: absolute; z-index: 1; left: 50%; top: 0; width: 100%; height: 342px; -webkit-transform: -webkit-translateX(-50%); transform: -webkit-translateX(-50%); transform: -moz-translateX(-50%); transform: -o-translateX(-50%); transform: translateX(-50%); } @-webkit-keyframes left { 0% { left: 100px; opacity: 1; } 70% { left: 400px; opacity: 1; } 80% { left: 400px; } 100% { opacity: 0; left: 400px; } } .mask_box .converter-main .exit_progress.active { display: block; max-width: 610px; } .mask_box .converter-main .transition_chosing { display: none; position: absolute; left: 50%; top: 30%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); width: 610px; height: 193px; background-color: #fff; -webkit-box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); box-shadow: 0 0 30px 5px rgba(74, 40, 32, 0.1); z-index: inherit; } .mask_box .exit_progress.active, .mask_box .stop_progress.active, .mask_box .video_change.active { display: block; } .mask_box .converter-main .transition_chosing i { display: block; position: absolute; top: 14px; right: 15px; width: 16px; height: 16px; background: url(/images/free-online-video-compressor/close.png) no-repeat; cursor: pointer; } .mask_box .converter-main .transition_chosing i:hover { background-position: 0 -16px; } .mask_box .converter-main .transition_chosing .info { position: absolute; left: 0; top: 48px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 36px; width: 100%; height: 46px; line-height: 46px; } .mask_box .converter-main .transition_chosing .info > span:nth-child(1) { float: left; width: 46px; height: 46px; line-height: 44px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #5659ca; border-radius: 30px; text-align: center; font-size: 30px; color: #5659ca; } .mask_box .converter-main .transition_chosing .info > span:nth-child(2) { float: left; padding-left: 22px; height: 46px; line-height: 46px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 16px; color: #222; } .mask_box .converter-main .transition_chosing .chosen { position: absolute; width: 206px; height: 30px; top: 138px; right: 26px; } .mask_box .converter-main .transition_chosing .chosen > span { display: block; width: 92px; height: 30px; border-radius: 30px; color: #fff; font-size: 16px; line-height: 30px; text-align: center; background-color: #5659ca; cursor: pointer; } .mask_box .converter-main .transition_chosing .chosen > span:hover { background-color: #5659ca; } .mask_box .converter-main .chosing_mask { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .mask_box .converter-main .chosing_mask.active { display: block; } @media all and (-webkit-min-device-pixel-ratio: 1.5) { .guide_loading { background: url(/images/free-online-video-converter/guide_loading@2x.gif) no-repeat; } .guide_guidechrome { background: url(/images/free-online-video-converter/guidechrome@2x.gif) no-repeat; } .guide_guidefirefox { background: url(/images/free-online-video-converter/guidefirefox@2x.gif) no-repeat; } .guide_guidefirefox_mac { background: url(/images/free-online-video-converter/guidefirefox_mac@2x.gif) no-repeat; } .guide_guideie { background: url(/images/free-online-video-converter/guideie@2x.gif) no-repeat; } .guide_guidesafari { background: url(/images/free-online-video-converter/guidesafari@2x.gif) no-repeat; } .guide_loading1 { background: url(/images/free-online-video-converter/loading@2x.gif) no-repeat; } .guide_loading-percent { background: url(/images/free-online-video-converter/loading-percent@2x.gif) no-repeat; } .converter-main select { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(/images/free-online-video-converter/point@2x.png) 100px -12px no-repeat; background-size: 10px 140px; } .select-mac { background-position: 444px -59px; } .converter-main select:hover { background-position: 100px -59px; } .converter-main select.select-mac:hover { background: url(/images/free-online-video-converter/point_hover_mac@2x.png) 100px -12px no-repeat; background-size: 10px 98px; } .select-hover-win { background: url(/images/free-online-video-converter/point_hover@2x.png) 100px -12px no-repeat; background-size: 10px 98px; } .select-hover-mac { background: url(/images/free-online-video-converter/point_hover_mac@2x.png) 100px -12px no-repeat; background-size: 10px 98px; } .settings_title select.profile { max-width: 490px; width: 73%; background: url(/images/free-online-video-converter/point@2x.png) 444px -12px no-repeat; background-size: 10px 140px; } .settings_title select.profile:hover { background-position: 444px -59px; } .file_page .item_file_menu i { background: url(/images/free-online-video-converter/close@2x.png) no-repeat; background-size: 22px 66px; } .file_page .item_file_menu i:hover { background-position: 0 -22px; } .file_page .item_files_left > div .video_play:hover, .file_page .item_files_left > div .video_play_hover { background: url(/images/free-online-video-converter/play@2x.png) 44px 24px no-repeat rgba(0, 0, 0, 0.4); background-size: 34px 34px; } .file_page .item_files_middle p:nth-of-type(2) i { background: url(/images/free-online-video-converter/information@2x.png) 0 no-repeat; background-size: 18px 54px; } .file_page .item_files_middle p:nth-of-type(2) i:hover { background-position: 0 -36px; } .file_page .item_files_right .info_show_fail { display: inline-block; position: absolute; top: 28px; right: 24px; width: 24px; height: 24px; border-radius: 30px; background: url(/images/free-online-video-converter/question@2x.png) no-repeat; background-size: 24px 24px; } .file_page .item_files_right .convert_complete, .file_page .item_files_right .info_loading, .file_page .item_files_right .info_waiting { display: inline-block; position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; } .file_page .item_files_right .info_waiting { background: url(/images/free-online-video-converter/wait@2x.png) no-repeat; background-size: 32px 32px; } .file_page .item_files_right .info_loading { background: url(/images/free-online-video-converter/loading@2x.gif) no-repeat; background-size: 32px 32px; text-align: center; line-height: 32px; color: #222; font-size: 12px; } .file_page .item_files_right .info_show { background: url(/images/free-online-video-converter/file@2x.png) no-repeat; background-size: 24px 96px; } .file_page .item_files_right .info_show:hover { background-position: 0 -72px; } .file_page .item_files_right .info_show-fid { background: url(/images/free-online-video-converter/file_d@2x.png) no-repeat; background-size: 24px 96px; } .file_page .item_files_right .info_show-p { background: url(/images/free-online-video-converter/file_p@2x.png) no-repeat; background-size: 24px 96px; } .file_page .item_files_right .convert_complete { background: url(/images/free-online-video-converter/success@2x.png) no-repeat; background-size: 32px 32px; } .file_page .item_files_right i.settings { background: url(/images/free-online-video-converter/set@2x.png) no-repeat; background-size: 24px 96px; } .file_page .item_files_right i.settings:hover { background-position: 0 -72px; } .file_page .item_files_right i.settings-fid { background: url(/images/free-online-video-converter/set_press-d@2x.png) no-repeat; background-size: 24px 24px; } .file_page .item_files_right i.item_files_delete { background: url(/images/free-online-video-converter/close@2x.png) no-repeat; background-size: 20px 60px; } .file_page .item_files_right i.item_files_delete:hover { background-position: 0 -20px; } .file_page .item_type .video_i { background: url(/images/free-online-video-converter/video_choose@2x.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .video_i_hover { background: url(/images/free-online-video-converter/video@2x.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .audio_i { background: url(/images/free-online-video-converter/audio@2x.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page .item_type .audio_i_hover { background: url(/images/free-online-video-converter/audio_choose@2x.png) 16px 0 no-repeat; background-size: 64px 64px; } .file_page #item_type_1 .video_i_1 { background: url(/images/free-online-video-converter/video_choose@2x.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page #item_type_1 .video_i_hover { background: url(/images/free-online-video-converter/video@2x.png) 8px 0 no-repeat; } .file_page #item_type_1 .audio_i_1 { background: url(/images/free-online-video-converter/audio@2x.png) 8px 0 no-repeat; background-size: 64px 64px; } .file_page #item_type_1 .audio_i_hover { background: url(/images/free-online-video-converter/audio_choose@2x.png) 16px 0 no-repeat; } .file_page .item_footer a { border: 1px solid #9432f7; color: #9432f7; text-decoration: none; background: url(/images/free-online-video-converter/down@2x.png) 15px 3px no-repeat; background-size: 28px 28px; } .file_page .item_footer a:hover { background: url(/images/free-online-video-converter/down_hover@2x.png) 15px 3px no-repeat #9432f7; color: #fff; border: 1px solid #9432f7; background-size: 28px 28px; } .item_info > div:nth-of-type(1) > i { background: url(/images/free-online-video-converter/close@2x.png) no-repeat; border-radius: 22px; background-size: 22px 66px; } .item_info > div:nth-of-type(1) > i:hover { background-position: 0 -22px; } .converter-main .file_page .settings-press { background: url(/images/set_d@2x.png) no-repeat; background-size: 24px 24px; } .settings_title > i { background: url(/images/free-online-video-converter/close@2x.png) no-repeat; background-size: 22px 66px; } .settings_title > i:hover { background-position: 0 -22px; } .addfiles-mask { display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; width: 175px !important; height: 60px !important; } } @media screen and (max-width: 1810px) { #banner.banner-free-mp4 .free-mkv-banner-left { left: 6px; } } @media screen and (max-width: 1720px) { #banner.banner-free-mp4 .free-mp4-banner-left { left: 40px; } #banner.banner-free-mp4 .free-mp4-banner-right { right: -50px; } } @media screen and (max-width: 1366px) { #banner .bannerman { margin: 0 0 0 -451px; width: 100%; max-width: 245px; } #banner .bannerwoman { margin: 0 0 0 468px; width: 100%; max-width: 366px; } #banner .banner_info { max-width: 700px; } #banner.banner-free-mov .free-mov-banner-left, #banner.banner-free-mov .free-mov-banner-right { display: none; } } @media screen and (max-width: 1280px) { #banner.banner-free-mp4 .free-mkv-banner-left, #banner.banner-free-mp4 .free-mkv-banner-right, .comment .quote { display: none; } #banner .bannerman { margin: 0 0 0 -400px; width: 100%; max-width: 145px; bottom: 90px; } #banner .bannerwoman { margin: 0 0 0 366px; width: 100%; max-width: 226px; bottom: 90px; } .comment { padding-top: 0; background-image: none; position: relative; } .comment .comment-box { position: relative; width: 100%; padding-top: 10px; padding-bottom: 30px; } .comment .change-box .comment-box { margin: 0 auto; } .comment h2 { width: 95%; text-align: center; margin-left: auto; margin-right: auto; } .comment .change-box .comment-block { margin: 0; } .comment a.prev { left: 0; } .comment a.next { right: 0; } .files { padding: 30px 0; } .files .flex-box { -ms-flex-pack: distribute; justify-content: space-around; } .files .text { font-size: 26px; line-height: 40px; } .files .down-btn { margin-top: 30px; } .faq.free-mkv-faq { margin-top: 50px; } } @media screen and (max-width: 1200px) { img { height: auto; } #banner.banner-free-mp4 .free-mp4-banner-left { position: absolute; left: -141px; bottom: 0; } #banner.banner-free-mp4 img.free-mp4-banner-right { position: absolute; bottom: -2px; right: -222px; } } @media screen and (max-width: 1180px) { .explore.free-mp4 .container div:nth-child(1) { border: 1px solid #e1e1e1; border-radius: 8px; } .explore.free-mp4 .container div:nth-child(2) { border-radius: 8px; } #related.free-mkv-related > .flex-box { -ms-flex-pack: distribute; justify-content: space-around; } .free-mp4-banner-left, .free-mp4-banner-right { display: none; } } @media screen and (max-width: 1080px) { #steps.screen_recorder { padding: 60px 0 0; } #function_section.screen_recorder .container:nth-child(1) { margin: 0 auto; } #function_section .container:nth-child(1) .left, #function_section .container:nth-child(2) .left { width: 480px; padding: 0; } #function_section .container:nth-child(1) .right, #function_section .container:nth-child(2) .right { width: 400px; } #function_section.screen_recorder .container:nth-child(3) .left { width: 480px; padding: 0; margin: 0 0 60px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #function_section.screen_recorder .container:nth-child(3) .right { width: 400px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin: 0; } .files .bg-cir1 { background-color: #ff8dba; } .files .bg-cir2 { background-color: #ffb16d; } .tips { display: block; } .tips .article-list { max-width: 700px; width: 95%; margin: 0 auto; } } @media screen and (max-width: 1024px) { #banner.banner-free-mp4 .free-mp4-banner-left, #banner.banner-free-mp4 img.free-mp4-banner-right { display: none; } } @media screen and (max-width: 912px) { #function_section.free-mp4-func .flex-box { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; } #function_section.free-mp4-func .flex-box .right { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } #function_section.free-mp4-func .flex-box .left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #banner.banner-free-mp4 .free-mp4-banner-left { display: none; } } @media screen and (max-width: 890px) { #banner .banner-arrow-line, #banner .bannerman, #banner .bannerwoman { display: none; } #steps .arrow img { margin: 67px auto; } #function_section .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #function_section .container:nth-child(2) .right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #function_section .container:nth-child(2) .left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #function_section { padding: 0 0 40px; text-align: center; } #compare h2 img { display: block; margin: 0 auto; } #steps.screen_recorder { padding: 60px 0 0; } .screen_recorder_function .container > div { padding: 0; } #function_section.screen_recorder .container:nth-child(1), #function_section.screen_recorder .container:nth-child(3) { padding: 40px 0; } } @media screen and (max-width: 820px) { #banner.banner-free-mp4 .free-mp4-banner-left { display: none; } .explore.free-mp4 { margin-bottom: 70px; } } @media screen and (max-width: 800px) { #banner .free_btn { margin: 30px auto 15px; } #steps .arrow { display: none; } .tips h2 { margin-bottom: 30px; } #features.free-dvd-player .features-box i { margin: 40px auto 13px; } #features.free-dvd-player .features-box .title, #features.free-dvd-player .features-box span { text-align: center; } } @media screen and (max-width: 540px) { #steps.free-mp4-converter .container { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; } #steps.free-mp4-converter .step { margin: 0 20px 28px; } .explore.free-mp4 .container div ul { padding: 28px 10px; } } @media screen and (max-width: 500px) { .free-mp4-comment.comment .change-box span.title { position: static; margin-bottom: 20px; display: inline-block; } #related.free-mkv-related { padding-top: 50px; padding-bottom: 50px; } #related.free-mkv-related .related-box { padding-top: 30px; text-align: center; } #related.free-mkv-related .related-box .circle-bg { display: none; } #related.free-mkv-related .related-box span { margin: 10px auto 0; text-align: center; } #related.free-mkv-related .related-box .btn-box { margin: 16px auto 20px; -ms-flex-pack: distribute; justify-content: space-around; } #related.free-mkv-related .related-box .btn-box a { text-align: left; margin-bottom: 10px; } #related.free-mkv-related .related-box .related-text { padding-top: 20px; } } @media screen and (max-width: 480px) { .explore.free-mp4 .container div ul li { width: 100%; } } @media screen and (max-width: 440px) { #banner { padding: 40px 0; min-height: auto; } #banner h1 { font-size: 36px; line-height: 40px; } #banner .free_btn { height: 60px; line-height: 60px; font-size: 22px; width: 90%; } #steps .container { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .comment { height: initial; padding-bottom: 0; overflow-y: visible; } .comment .comment-box { padding-bottom: 30px; text-align: center; } .comment .change-box { text-align: left; } .comment .change-box .comment-block .comment-box { width: 95%; background-image: none; height: 470px; padding-top: 40px; text-align: center; } .comment .change-box .comment-box img { position: static; margin-bottom: 20px; } .comment .comment-box .change-btn { position: static; display: inline-block; } .comment .comment-box .next, .comment .comment-box .prev { margin: 20px 20px 0; } .faq { margin-top: 50px; } #function_section .container:nth-child(1) .left, #function_section .container:nth-child(1) .right, #function_section .container:nth-child(2) .left, #function_section .container:nth-child(2) .right { width: 100%; max-width: 400px; } .files .bg-cir1, .files .bg-cir2 { display: none; } #function_section.screen_recorder .container:nth-child(3) .left, #function_section.screen_recorder .container:nth-child(3) .right { width: 96%; max-width: 500px; } #related.light_style .related-box .btn-box > div { margin: 0 auto; } } body > .error, body > .success { background: #f2f9ec; line-height: 48px; border-radius: 4px; border: 1px solid #d7edc5; position: fixed; z-index: 1000; top: 81px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; font-size: 16px; color: #7dbd4c; padding-left: 20px; padding-right: 20px; } body > .error img, body > .success img { display: inline-block; margin-right: 12px; vertical-align: -2px; } body > .error { background: #fddede; border-color: #fcc2c2; color: #fc3636; } .header .login_btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 64px; float: right; margin-left: 50px; } .confirm, .retry, div.confirm, div.retry { float: left; color: #fff; } .header .login_btn > span { font-size: 16px; color: #4c5562; display: inline-block; padding: 8px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 32px; border: 1px solid #4c5562; cursor: pointer; } .header .login_btn > span:hover { background: #6358f4; color: #fff; border-color: #6358f4; } .header .login_box { position: relative; display: none; line-height: 0; cursor: pointer; } .header .login_box ul li:nth-child(1)::after { clear: both; content: ""; width: 100%; height: 30px; background: 0 0; position: absolute; top: -30px; left: 0; } .header .login_box ul li span { padding: 0; } .header .login_box ul li div, .login_box > div { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-block; border: 1px solid transparent; } .header .login_box ul li div img, .login_box > div img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; margin: 0; } .header .login_box ul li div.active, .login_box > div.active { border: 1px solid #e9b1ff; } .header .login_box ul li div { vertical-align: -2px; margin: 0 6px 0 0; } .header .login_box ul li:first-child { padding-bottom: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .header .login_box ul li:first-child > p { font-size: 14px; color: #222; width: 174px; display: inline-block; line-height: 20px; margin: 0; } .header .login_box ul li:first-child > p * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .login_box ul li:first-child > p > span { display: block; } .header .login_box ul li .total_num i { display: inline-block; vertical-align: -5px; } .header .login_box ul li:first-child > p .verification { font-size: 14px; color: #3e6af9; text-decoration: underline; line-height: 14px; cursor: pointer; } .header .login_box ul { display: none; width: 240px; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; padding: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute !important; right: -40px; top: 46px; z-index: 1; } .header .login_box ul li:first-child > p .verification img { vertical-align: -2px; margin-left: 2px; width: 14px; height: 14px; -webkit-animation: rotate 1.5s infinite linear; animation: rotate 1.5s infinite linear; opacity: 0; } .header .login_box ul::after, .header .login_box ul::before { width: 0; height: 0; position: absolute; right: 48px; clear: both; content: ""; } .header .login_box ul li:first-child > p .verification.unbind img { opacity: 1; } .header .login_box ul::before { border: 8px solid #fff; border-color: transparent transparent #e6e6e6; top: -16px; } .header .login_box ul::after { border: 8px solid #fff; border-color: transparent transparent #fff; top: -14px; } .header .login_box ul li { border-top: 1px solid #e6e6e6; padding-top: 12px; padding-bottom: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 0 !important; display: block !important; text-align: left; line-height: 24px; } .header .login_box ul li:first-child { padding-top: 0; border-top: none; } .header .login_box ul li:last-child { padding-bottom: 0; cursor: pointer; display: -webkit-box; display: -ms-flexbox !important; display: flex !important; } .header .login_box ul li a, .login_box ul li, .login_box ul li:last-child > span { font-size: 16px; color: #6358f4; line-height: 24px; } .header .login_box ul li a img, .login_box ul li img { margin-left: 12px; margin-right: 9px; display: inline-block; } .header .login_box ul li a, .login_box ul li { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header .login_box ul li a span { width: 168px; } .header .login_box ul li a:hover { text-decoration: none; } .header .header_nav > .flex_box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .maskMember { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); display: none; } @media (max-width: 1180px) { .center, .header .login_bg .login_bg_box { padding: 0 20px; } .header .logo { float: left; } .toggle_nav { position: static; display: inline-block; margin-right: 0; } .header .login_btn { margin-left: 20px; } .header .login_box { width: 100%; position: initial; } .header .login_box div { margin-top: 0; } .header .login_box ul { background: #fff; top: 60px; left: 0; border-radius: 0 0 3px; width: 100% !important; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; border-top: 1px solid #e4e4e4; } .header .login_box ul::before, .login_box ul::after { display: none; } .header .login_box ul li a span { width: auto; } .header .login_box ul li:first-child > span { width: calc(100% - 50px); -webkit-box-sizing: border-box; box-sizing: border-box; } .header .login_box ul li div.active, .login_box > div.active { border: 1px solid #fff; } .header .header_nav .product_nav { width: 100%; } } @media (max-width: 630px) { .header .center { padding: 0 20px; } body > .error, body > .success { width: 90%; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 24px; padding-top: 10px; padding-bottom: 10px; } .maskMember { background: #fff !important; } } #banner { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; width: 100%; min-height: 498px; background: #6657f6; position: relative; } #banner .banner-arrow-line, #banner .bannerman, #banner .bannerwoman { position: absolute; width: 100%; left: 50%; } #banner p { text-align: center; background: #fff; padding-left: 0; color: #333; } #banner .banner_box .modes_box .active p { color: #fff; } #banner .btn-box a { display: block; background-color: #ffe823; } #banner .btn-box a:hover { display: block; background-color: #f3d900; } #banner .bannerman { margin: 0 0 0 -451px; max-width: 245px; bottom: 10px; transform: -webkit-translate(-50%, 0); transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); } #banner .bannerwoman { margin: 0 0 0 528px; max-width: 366px; bottom: 0; -webkit-transform: -webkit-translate(-50%, 0); transform: -webkit-translate(-50%, 0); transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); } #banner .banner-arrow-line { margin: -62px 0 0 -273px; max-width: 144px; top: 50%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); } #banner h1 { display: block; width: 96%; margin: 0 auto; font-size: 40px; line-height: 50px; color: #fff; text-align: center; font-weight: 700; } #banner .banner_info, #banner .banner_reviews { display: block; font-size: 18px; line-height: 30px; background: 0 0; width: 96%; color: #fff; text-align: center; } #banner .banner_info { max-width: 800px; margin: 13px auto; } #banner .banner_reviews { margin: 0 auto; } #banner .banner_reviews img { display: inline-block; margin: 0 6px 0 0; vertical-align: -1px; } #banner .banner_reviews img:nth-last-child(1) { margin-right: 23px; } #banner .free_btn { position: relative; display: block; width: 96%; margin: 62px auto 20px; max-width: 484px; height: 84px; border-radius: 84px; background-color: #ffb400; font-size: 26px; line-height: 84px; text-align: center; color: #fff; cursor: pointer; -webkit-transition: all linear 0.3s; transition: all linear 0.3s; } #banner .free_btn:hover { -webkit-box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.14); box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.14); } #banner .download { display: block; margin: 0 auto; text-align: center; font-size: 18px; line-height: 18px; color: #f6ff00; text-decoration: underline; } #banner .download img { display: inline-block; margin-right: 12px; vertical-align: -2px; } .free_btn img { display: inline-block; vertical-align: -4px; margin-right: 20px; } .banner_box > ul { margin-top: 23px; } .banner_box #drag-zone li { max-width: 478px; width: 100%; margin: 40px auto 0; display: block; } .banner_box #drag-zone { margin: 20px auto 0; overflow: hidden; padding-bottom: 23px; padding-top: 48px; border-radius: 40px; position: relative; z-index: 2; } .banner_box #uploadBtn input { opacity: 0; width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; cursor: pointer; } .banner_box #uploadBtn span { font-size: 30px; color: #fff; max-width: 482px; width: 100%; height: 84px; line-height: 84px; background: #ff9600; display: block; text-align: center; border-radius: 60px; cursor: pointer; position: relative; margin: auto; font-weight: 700; } .banner_box #drag-zone div span { font-size: 24px; color: #fff; display: block; } #banner .banner_bg { position: absolute; bottom: 0; max-width: 400px; height: auto; } #banner .banner_left { left: 0; } #banner .banner_right { right: 0; margin: 0; } .help-text { cursor: pointer; } #steps { padding: 0; margin: 82px auto 0; } #steps h2 { display: block; width: 96%; margin: 0 auto; font-size: 36px; line-height: 36px; color: #444; } #steps .container { max-width: 920px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #steps .container .info { position: relative; width: 98%; display: block; margin: 0 auto; font-size: 18px; line-height: 18px; color: #333; white-space: nowrap; } #steps .step:nth-child(1) .info span, #steps .step:nth-child(3) .info span, #steps .step:nth-child(5) .info span { top: 7px; width: 19px; height: 19px; border-radius: 100%; position: absolute; z-index: -1; left: 50%; } #steps .step:nth-child(1) .info span { margin: 0 0 0 -60px; background-color: #ff8cb6; -webkit-transform: -webkit-translate(-50%, 0); transform: -webkit-translate(-50%, 0); transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); } #steps .step:nth-child(3) .info span { margin: 0 0 0 -83px; background-color: #9591ff; -webkit-transform: -webkit-translate(-50%, 0); transform: -webkit-translate(-50%, 0); transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); } #steps .step:nth-child(5) .info span { margin: 0 0 0 -67px; background-color: #bde2ff; -webkit-transform: -webkit-translate(-50%, 0); transform: -webkit-translate(-50%, 0); transform: -moz-translate(-50%, 0); transform: -o-translate(-50%, 0); transform: translate(-50%, 0); } .choose_item .info, .image-loading-box { -webkit-transform: translate(-50%, -50%); } #steps.screen_recorder .step:nth-child(1) .info span { position: absolute; z-index: -1; margin: 0 0 0 -50px; background-color: #73dbff; } #steps.screen_recorder .step:nth-child(3) .info span { position: absolute; z-index: -1; margin: 0 0 0 -80px; background-color: #9591ff; } #steps.screen_recorder .step:nth-child(5) .info span { position: absolute; z-index: -1; margin: 0 0 0 -52px; background-color: #ff8cb6; } #steps .step { margin: 0 0 28px; } #steps .step img { display: block; margin: 0 auto; width: 191px; } #steps .arrow img { display: block; margin: 38px auto; width: 100%; max-width: 245px; } #steps .arrow { margin: 0 -24px 28px; } #function_section { width: 100%; margin: 0 auto; padding: 10px 0 0; text-align: left; } #compare, #repuirements, .choose_h2, .choose_item, .comment h2, .faq h2, .tips h2 { text-align: center; } #function_section h2 { display: block; margin: 0 0 20px; color: #444; } #function_section .info { display: block; margin: 0; font-size: 16px; line-height: 30px; color: #666; } #function_section > .container:nth-child(1) { margin: 100px auto; padding: 0 !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #function_section .container:nth-child(1) .left { width: 500px; margin: 0; } #function_section .container:nth-child(1) .right { width: 597px; margin: 0; } #function_section.video_compressor .container:nth-child(1) .right, #function_section.video_compressor .container:nth-child(2) .right { padding: 0; } #function_section > .container:nth-child(2) { margin: 100px auto; padding: 0 !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #function_section .container:nth-child(2) .left { width: 520px; padding: 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin: 0; } #function_section .container:nth-child(2) .right { width: 597px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin: 0; } #function_section .right img { display: block; width: 100%; margin: 0 auto; } #function_section > .container:nth-child(3) { margin: 100px auto; padding: 0 !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #function_section .container:nth-child(3) .left { width: 500px; margin: 0; } #function_section.screen_recorder .container:nth-child(3) .left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin: 0; padding: 0; } #function_section.screen_recorder .container:nth-child(3) .right { -webkit-box-ordinal-group: 22; -ms-flex-order: 21; order: 21; margin: 0; padding: 0; } #function_section .container:nth-child(3) .right { width: 597px; margin: 0; } .choose { width: 100%; margin: 100px auto; background: #7b6dff; padding-top: 50px; padding-bottom: 23px; } .choose_item { margin: 0 0 30px; width: 380px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 25px 40px 0; min-height: 311px; background: #fff; border-radius: 10px; position: relative; max-width: 100%; } .choose_item img { display: block; margin: 0 auto; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; max-width: 100%; } .choose_item .info, .choose_item .title { margin: 15px auto 0; color: #333; line-height: 30px; display: block; } .choose_item .title { font-size: 20px; font-weight: 700; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; } .choose_item .info { font-size: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; opacity: 0; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; } .choose_item:hover .title, .choose_item:hover img { opacity: 0; } .choose_item:hover .info { opacity: 1; } #features { padding-top: 0; padding-bottom: 50px; } #features .container { overflow: visible; } #features .features-box { -webkit-box-shadow: 0 0 30px 0 rgba(123, 109, 255, 0.3); box-shadow: 0 0 30px 0 rgba(123, 109, 255, 0.3); min-height: 280px; } #features .features-box i { display: block; margin: 40px auto 24px; width: 80px; height: 80px; background: url(/images/free-online-image-enhancer/small-features.png) no-repeat; } #features .features-box:nth-child(1) i { background-position: 0 0; } #features .features-box:nth-child(2) i { background-position: 0 -80px; } #features .features-box:nth-child(3) i { background-position: 0 -160px; } #features .features-box:nth-child(4) i { background-position: 0 -240px; } #features .features-box:nth-child(5) i { background-position: 0 -320px; } #features .features-box:nth-child(6) i { background-position: 0 -400px; } #features .features-box .title { font-weight: 700; } #features .features-box span { margin: 4px auto 0; } #related .related-box span:nth-last-child(1) { margin: 10px auto; min-height: unset; text-align: center; text-indent: -16px; } #compare { width: 100%; margin: 0 auto; padding: 20px 0 80px; } #compare h2 { display: block; width: 96%; margin: 0 auto; font-size: 36px; line-height: 36px; color: #444; font-weight: 400; } #compare h2 img { display: inline-block; margin: 0 8px 0 5px; vertical-align: -24px; } #compare table tr:nth-child(1) td { background-color: #7357fd; font-size: 24px; color: #fff; } #compare .table_container { margin: 42px auto 0; width: 100%; max-width: 1200px; overflow-x: auto; } #compare table { width: 1200px; font-size: 18px; color: #444; } #compare table tr td { padding: 10px; width: 394px; border: 1px solid #eee; height: 69px; font-size: 18px; line-height: 24px; } #compare table tr:nth-child(1) td a { color: #fff; } #compare table tr:nth-last-child(1) td a, #compare table tr:nth-last-child(1) td span { display: block; margin: auto; width: 240px; height: 40px; border-radius: 40px; font-size: 18px; line-height: 40px; color: #fff; cursor: pointer; } #compare table tr:nth-last-child(1) td a.download { background-color: #ffa352; text-decoration: none; } #compare table tr:nth-last-child(1) td a.download:hover { background-color: #ffbc52; } #compare table tr:nth-last-child(1) td a.download img { display: inline-block; margin-right: 10px; vertical-align: -4px; } #compare table tr:nth-last-child(1) td span { background-color: #44c593; } #compare table tr:nth-last-child(1) td span:hover { background-color: #4bdba3; } .tips { padding: 30px 0; max-width: 1200px; } .tips h2 { width: 100%; margin-bottom: 50px; } .tips .article-list { width: 49%; } .tips .article-list li { padding-left: 16px; margin-bottom: 18px; position: relative; font-size: 16px; line-height: 24px; } .tips .article-list li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 100%; background: #6a75fd; position: absolute; left: 0; top: 0.6em; } #repuirements { width: 100%; margin: 0 auto; padding: 20px 0 80px; } #repuirements h2 { display: block; width: 96%; margin: 0 auto; font-size: 36px; line-height: 36px; color: #444; } #repuirements .table_container { margin: 42px auto 0; width: 100%; max-width: 1200px; overflow-x: auto; } #repuirements table { width: 1200px; } #repuirements table td { border: 1px solid #ccc; color: #666; padding: 20px; font-size: 16px; line-height: 24px; } #repuirements table tr td:nth-child(1) { background-color: #ffa352; color: #fff; font-size: 18px; width: 336px; } #repuirements table tr td:nth-child(1) a { color: #fff; } .comment { margin-top: 80px; padding-bottom: 30px; background-color: #7b6dff; background-size: 100% 80%; overflow-x: hidden; } .comment .quote { margin: 0; } .comment h2 { margin: 70px 0 10px; color: #fff; font-weight: 400; } .comment .comment-box { position: relative; } .comment a.change-btn { display: block; width: 70px; height: 70px; margin: 0; border-radius: 100%; background: #fff; } .comment a.change-btn i { display: block; width: 25px; height: 70px; margin: 0 auto; background: url(/images/new-m2ts/arrow2-left.png) 0 center no-repeat; } .comment a.change-btn:hover { -webkit-box-shadow: 9px 9px 27px rgba(0, 88, 97, 0.51); box-shadow: 9px 9px 27px rgba(0, 88, 97, 0.51); } .comment a.change-btn.next i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .comment a.prev { position: absolute; top: 300px; left: -80px; } .comment a.next { position: absolute; top: 300px; right: -80px; } .comment > .change-btn { display: none; } .comment > .change-btn a { -webkit-box-shadow: 9px 9px 20px rgba(16, 188, 206, 0.15); box-shadow: 9px 9px 20px rgba(16, 188, 206, 0.15); } .comment .change-box { width: 10000px; margin: 20px auto 0 0; position: relative; left: 0; -webkit-transition: 1s; transition: 1s; font-size: 0; border: 0; } .comment .change-box .comment-page { display: inline-block; position: relative; font-size: 0; } .comment .change-box .comment-block { display: inline-block; margin-bottom: 30px; vertical-align: middle; } .comment .change-box .comment-box { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 380px; width: 100%; min-height: 400px; margin: 0 10px; position: relative; padding: 105px 50px 40px 40px; -webkit-box-shadow: 0 0 59px rgba(0, 130, 151, 0.11); box-shadow: 0 0 59px rgba(0, 130, 151, 0.11); border-radius: 10px; background: 40px 20px no-repeat #fff; } .comment .change-box .comment-box:nth-child(1) { background-image: url(/images/new-m2ts/quote1.png); } .comment .change-box .comment-box:nth-child(1) .author { color: #008297; } .comment .change-box .comment-box:nth-child(2) { background-image: url(/images/new-m2ts/quote2.png); } .comment .change-box .comment-box:nth-child(2) .author { color: #ffa532; } .comment .change-box .comment-box:nth-child(3) { background-image: url(/images/new-m2ts/quote3.png); } .comment .change-box .comment-box:nth-child(3) .author { color: #7b6dff; } .comment .change-box .comment-box img { position: absolute; right: 50px; top: 45px; } .comment .change-box .comment-box .author { font-size: 30px; font-weight: 550; } .comment .change-box .comment-box .comment-text { margin-top: 15px; font-size: 16px; color: #666; line-height: 30px; } .faq { margin-top: 80px; max-width: 1173px; } .faq h2 { margin: 0 auto; font-weight: 400; } .faq .faq-item { -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transition: 0.4s; transition: 0.4s; overflow: hidden; padding-left: 15px; border-bottom: 1px solid #ececec; } .faq .question { position: relative; padding: 20px 30px 20px 40px; font-size: 20px; min-height: 30px; line-height: 30px; color: #333; cursor: pointer; font-weight: 550; } .faq .faq-item .question::before { content: ""; position: absolute; left: 5px; top: 23px; display: block; width: 20px; height: 20px; background: url(/images/new-m2ts/arrow-down.png) no-repeat; -webkit-transition: 0.5s; transition: 0.5s; } .faq .faq-item.active .question::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .faq .answer { margin: 0 0 10px; font-size: 16px; color: #555; padding: 0 30px 0 40px; } .faq .faq-item .answer { margin-bottom: 25px; } #related { background-color: #fff; } #related h2 { display: block; width: 96%; margin: 0 auto; font-size: 36px; line-height: 36px; color: #444; } #related .container { overflow: visible; } #related .related-box { -webkit-box-shadow: 0 0 30px 0 rgba(231, 248, 250, 1); box-shadow: 0 0 30px 0 rgba(231, 248, 250, 1); } #related.light_style .related-box { -webkit-box-shadow: 0 0 18px 6px rgba(38, 38, 38, 0.2); box-shadow: 0 0 18px 6px rgba(38, 38, 38, 0.2); } #related.light_style .related-box .circle-bg { background-color: #f5f6ff; } #related.light_style .related-box .btn-box a { border-radius: 4px; background: url(/images/free-online-pdf-compressor/free-try.png) 123px center no-repeat #ff961b; color: #fff; -webkit-box-shadow: 0 0 9px 4px rgba(255, 124, 27, 0.33); box-shadow: 0 0 9px 4px rgba(255, 124, 27, 0.33); -webkit-transition: all linear 0.2s; transition: all linear 0.2s; } #related.light_style .related-box .btn-box a:hover { background: url(/images/free-online-pdf-compressor/free-try.png) 130px center no-repeat #ff861b; text-decoration: none; -webkit-box-shadow: 0 0 9px 4px rgba(255, 124, 27, 0.61); box-shadow: 0 0 9px 4px rgba(255, 124, 27, 0.61); } .history_box .photoHistory:hover, a.jump-link { text-decoration: underline; } #related.light_style .related-box .btn-box .down-btn-block p { margin-top: 5px; font-size: 14px; padding-left: 35px; color: #666; } @-webkit-keyframes glint-point { 0% { width: 9px; height: 9px; left: 0; top: 0; opacity: 1; } 100%, 15% { width: 25px; height: 25px; left: -8px; top: -8px; opacity: 0; } } @keyframes glint-point { 0% { width: 9px; height: 9px; left: 0; top: 0; opacity: 1; } 100%, 15% { width: 25px; height: 25px; left: -8px; top: -8px; opacity: 0; } } @media screen and (max-width: 1600px) { #banner .banner_bg { max-width: 360px; } } @media screen and (max-width: 1550px) { #banner .banner_bg { display: none; } } @media screen and (max-width: 1366px) { #banner .bannerman { margin: 0 0 0 -451px; width: 100%; max-width: 245px; } #banner .bannerwoman { margin: 0 0 0 468px; width: 100%; max-width: 366px; } #banner .banner_info { max-width: 700px; } } @media screen and (max-width: 1280px) { #banner .bannerman { margin: 0 0 0 -400px; width: 100%; max-width: 145px; bottom: 90px; } #banner .bannerwoman { margin: 0 0 0 366px; width: 100%; max-width: 226px; bottom: 90px; } .comment { padding-top: 0; background-image: none; position: relative; } .comment .comment-box { position: relative; width: 100%; padding-top: 10px; padding-bottom: 30px; } .comment .change-box .comment-box { margin: 0 auto; } .comment h2 { width: 95%; text-align: center; margin-left: auto; margin-right: auto; } .comment .quote { display: none; } .comment .change-box .comment-block { margin: 0; } .comment a.prev { left: 0; } .comment a.next { right: 0; } .faq { margin-top: 10px; } .files { padding: 30px 0; } .files .flex-box { -ms-flex-pack: distribute; justify-content: space-around; } .files .text { font-size: 26px; line-height: 40px; } .files .down-btn { margin-top: 30px; } .progress-box .progress-item { max-width: 350px; } } @media screen and (max-width: 1080px) { #steps.screen_recorder { padding: 60px 0 0; } #function_section.screen_recorder .container:nth-child(1), #function_section.screen_recorder .container:nth-child(2), #function_section.screen_recorder .container:nth-child(3) { margin: 50px auto; } #function_section .container:nth-child(1) .left, #function_section .container:nth-child(2) .left { width: 100%; max-width: 480px; padding: 0; margin: 0 auto 30px; } #function_section .container:nth-child(1) .right, #function_section .container:nth-child(2) .right { width: 100%; max-width: 400px; margin: 0 auto; } #function_section.screen_recorder .container:nth-child(3) .left { width: 100%; max-width: 480px; padding: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin: 0 auto 30px; } #function_section.screen_recorder .container:nth-child(3) .right { width: 100%; max-width: 400px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin: 0 auto; } .tips { display: block; } .tips .article-list { max-width: 700px; width: 95%; margin: 0 auto; } } @media screen and (max-width: 890px) { #banner .banner-arrow-line, #banner .bannerman, #banner .bannerwoman { display: none; } #steps .arrow img { margin: 67px auto; } #function_section .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #function_section .container:nth-child(2) .right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #function_section .container:nth-child(2) .left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #function_section { padding: 0 0 40px; text-align: center; } #compare h2 img { display: block; margin: 0 auto; } #steps.screen_recorder { padding: 60px 0 0; } #function_section.screen_recorder .container:nth-child(1), #function_section.screen_recorder .container:nth-child(3) { padding: 40px 0; } } @media screen and (max-width: 800px) { #steps .arrow { display: none; } .tips h2 { margin-bottom: 30px; } } @media screen and (max-width: 440px) { #banner { padding: 30px 0; } #banner h1 { font-size: 36px; line-height: 40px; } #steps .container { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .comment { height: initial; padding-bottom: 0; overflow-y: visible; } .comment .comment-box { padding-bottom: 30px; text-align: center; } .comment .change-box { text-align: left; } .comment .change-box .comment-block .comment-box { width: 95%; background-image: none; height: 470px; padding-top: 40px; text-align: center; } .comment .change-box .comment-box img { position: static; margin-bottom: 20px; } .comment .comment-box .change-btn { position: static; display: inline-block; } .comment .comment-box .next, .comment .comment-box .prev { margin: 20px 20px 0; } .faq { margin-top: 30px; } #function_section .container:nth-child(1) .left, #function_section .container:nth-child(1) .right, #function_section .container:nth-child(2) .left, #function_section .container:nth-child(2) .right { width: 100%; max-width: 400px; } .files .bg-cir1, .files .bg-cir2 { display: none; } } .banner_box > #drag-zone { max-width: 600px; width: 100%; overflow: hidden; padding-bottom: 48px; background-color: #606060; } .banner_box > div > span { font-size: 30px; color: #fff; max-width: 482px; height: 84px; line-height: 84px; background: #ffb400; display: block; text-align: center; border-radius: 66px; margin: 0 auto 19px; cursor: pointer; position: relative; } .confirm, .photo > ul > div.btn span:hover, .retry, .uploadBtn:hover, div.confirm, div.retry { background-color: #635bee; } .banner_box > div > span > input { opacity: 0; width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; cursor: pointer; } .banner_box > div > p { font-size: 16px; color: #222; text-align: center; } .scale_choose { color: #fff; } .banner_box #drag-zone div.scale_choose span { display: inline-block; font-size: 14px; vertical-align: middle; margin: 0 5px; } .banner_box #drag-zone div.scale_choose span input { display: inline-block; vertical-align: -1px; margin: 0 3px 0 0; } a.uploadBtn, div.btn span { width: 116px; } .refinement_bottom { -webkit-box-pack: justify; } .refinement_bottom div .tab_img:hover { background-position: 0 -14px; } .image-loading-box { margin: 0; padding-bottom: 10px; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); } .load-error-box > img { margin: 70px auto auto; display: block; } .feedback { min-width: 300px; max-height: 504px; min-height: 510px; } div.confirm, div.retry { border-color: #635bee; } .cancel { float: right; } .image-loading-box .icon-box { position: absolute; top: 10px; left: 15px; } .image-loading-box .icon-box img { display: inline-block; width: 30px; height: 30px; vertical-align: middle; } .image-loading-box .icon-box .icon-text { display: inline-block; color: #635bee; vertical-align: middle; } .feedback p { margin: 5px 0 20px; } .feedback #form_contents { overflow: auto; margin: 0; height: 100px; text-indent: 10px; } .feedback #form_submit { margin: 30px auto; border-radius: 6px; background-color: #f6762b; } .feedback_close { background-size: 20px 80px; } .feedback_close:hover { background-position: 0 -20px; } @media screen and (max-width: 1200px) { .step ul img { display: none; } .step ul li { width: 205px; zoom: 0.8; } .modes_box ul { -ms-flex-pack: distribute; justify-content: space-around; } .modes_box ul > li:nth-child(3) { margin-top: 40px; } } @media screen and (max-width: 1180px) { .quality_change .low { padding-bottom: 0 !important; } .main div img { margin: auto !important; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .main div .left_side, .main div div { -webkit-box-ordinal-group: 3; order: 2; } .main div div { padding-bottom: 50px; text-align: center; -ms-flex-order: 2; } .main div .left_side { -ms-flex-order: 2; padding-bottom: 0; } .main div div .seperate, .quality_change .high { padding-bottom: 0; } .main div .right_side { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .other_box ul { margin: 40px auto 0; max-width: 820px; -ms-flex-pack: distribute; justify-content: space-around; } .banner_box h1 + img { margin: 10px auto 0; } } @media screen and (max-width: 800px) { .photo { height: 502px; } .refinement_top { margin: 0 auto; } .refinement .scale_zoon { display: block; margin: 40px auto 30px; } .canvas { top: 110px; max-height: 320px; } .choose > .flex_box { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .banner_box > #drag-zone { padding: 0; } } @media screen and (max-width: 630px) { .banner_box > h1 { font-size: 30px; line-height: 36px; } h2 { font-size: 26px; line-height: 32px; } .universally_box ul { padding: 0; } .canvas_box .flex-box { min-width: 0; min-height: 0; } .refinement_top > span { display: block; margin-top: 5px; } .pensize-box { width: 220px !important; } .bg_crop .refinement_top .displayInlineBlock { margin-top: 5px; } .confirm-button-group div { width: 120px !important; } .canvas_box div .img_compare, .old-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .refinement_top { padding: 4px 10px; } .photo > ul > div.icon { left: 10px; } } @media screen and (max-width: 600px) { .refinement_top div span { width: 56px; height: 24px; line-height: 24px; } } @media screen and (max-width: 450px) { .image-loading-box { width: 92%; padding: 0; min-height: auto; max-height: 1000px; height: auto; overflow: hidden; } .loading-box { margin: 100px auto 30px; } .photo { top: 0; bottom: 0; height: 470px; } #header .menu { z-index: 1 !important; } .refinement_top div span, .refinement_top div span:nth-child(1) { margin: 0 5.5px 5px; width: 40px; height: 20px; line-height: 20px; } .canvas { max-height: 180px; } .refinement_bottom { padding: 0 5px; } .refinement_bottom div { width: 160px; } .reloadImg { margin-left: 5px !important; } .saveBtn { margin-right: 5px !important; } .warning-text { width: 96%; } .button-group { width: 90%; } .image-loading-box .feed-back-box { display: block; position: static; width: 100%; margin: 10px auto 30px; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; } #all_supply h2, #desktop_zoon h2, #faq_section h2, #formats .left h2, #rocket .left h2, #steps h2, #video_types .right h2, .requirements h2, .showoff.iphone-data-recovery h2 { font-size: 32px; line-height: 40px; } #desktop_zoon .info { margin: 10px auto; } } .buyMask, .container { -webkit-box-sizing: border-box; } @media screen and (max-width: 360px) { .refinement_top div span, .refinement_top div span:nth-child(1) { width: 30px; } .step ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 320px) { .refinement_bottom div { width: 142px; } .refinement_bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .Original-continer { min-width: 100px; } .Output-continer { text-align: right; } .buyMask h2, h2 { font-weight: 700; text-align: center; } h2 { font-size: 34px; line-height: 36px; color: #222; } .container { overflow: hidden; margin: 0 auto; width: 100%; max-width: 1200px; box-sizing: border-box; } .flex_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .buyMask { display: none; position: fixed; padding: 48px 0; box-sizing: border-box; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 1072px; width: calc(100% - 40px); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; max-height: 100%; overflow-y: auto; background: #fff; border-radius: 20px; z-index: 12; } .buyMask .icon_box { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 16px; left: 16px; font-size: 16px; color: #333; } .buyMask .icon_box > img { margin-right: 16px; } .buyMask h2 { font-size: 36px; color: #333; line-height: 54px; } .buyMask .scroll_box .icon_box span { font-weight: 400; font-size: 16px; color: #333; line-height: 20px; text-align: left; } .buyMask .buyContent { max-width: 720px; width: 100%; margin: auto; } .buyMask .buyContent .sliderBox { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 316px; margin-top: 26px; overflow: hidden; padding: 2px; } .buyMask .buyContent .sliderBox .slideBar { position: absolute; width: calc(50% - 2px); height: calc(100% - 4px); background: #6e60fa; top: 0; left: 2px; bottom: 0; border-radius: 26px; z-index: 1; margin: auto; } .buyMask .buyContent .sliderBox .item.active { color: #fff; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .buyMask .buyContent .sliderBox .item.hot i { display: inline-block; width: 20px; height: 20px; background: url(/images/image-upscaler/crown.svg) center center no-repeat; margin-left: 4px; vertical-align: -3px; } .buyMask .buyContent .sliderBox > div { position: relative; max-width: 100%; background: #fff; border-radius: 58px; border: 1px solid #6e60fa; } .buyMask .sliderBox > div span.item { position: relative; width: 50%; display: inline-block; font-weight: 700; font-size: 16px; color: #333; line-height: 24px; padding: 6px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; z-index: 2; cursor: pointer; } .buyMask .buyListBox { background: #fff; border-radius: 16px; border: 1px solid #d8dff8; margin-top: 18px; overflow: hidden; } .buyMask .buyListBox ul { width: calc(100% - 273px); padding: 32px 36px; -webkit-box-sizing: border-box; box-sizing: border-box; background: rgba(216, 223, 248, 0.2); } .buyMask .buyListBox .lifetimeType { display: none; } .buyMask .buyListBox ul li { cursor: pointer; margin-bottom: 12px; } .buyMask .buyListBox ul li .leftPart { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; text-align: left; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .buyMask .buyListBox ul li .hotProduct { margin: 0 0 0 10px; } .buyMask .buyListBox ul li .leftPart i { display: inline-block; width: 20px; height: 20px; background: url(/images/image-upscaler/choose.svg) center/cover no-repeat; margin-right: 18px; } .buyMask .buyListBox ul li.active .leftPart i { background-position-y: 0; } .buyMask .buyListBox ul li .leftPart i { background-position-y: -20px; vertical-align: -3px; } .buyMask .buyListBox .buyMaskPrice { -ms-flex-preferred-size: 140px; flex-basis: 140px; text-align: left; } .buyMask .buyListBox .buyBtnBox.flex-box, .mobile-save-image { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; } .buyMask .buyListBox ul li:last-child { margin-bottom: 0; } .buyMask .buyListBox .leftPart span { font-weight: 400; font-size: 18px; color: #333; line-height: 28px; text-align: left; } .buyMask .buyListBox li .flex-box > div { margin: 0; } .buyMask .buyListBox .buyMaskPrice span { font-weight: 700; font-size: 18px; color: #333; line-height: 28px; text-align: left; } .buyMask .buyListBox .buyMaskPrice del { font-weight: 400; font-size: 12px; color: #666; line-height: 28px; text-align: left; margin-left: 6px; } .buyMask .buyListBox .buyBtnBox.flex-box { max-width: 273px; width: 100%; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .buyMask .buyListBox .creditsBox p { display: block; font-weight: 700; font-size: 28px; color: #333; line-height: 30px; text-align: left; } .buyMask .buyListBox .buyBtnBox .btn { position: relative; min-width: 200px; padding: 10px; display: inline-block; font-weight: 700; font-size: 20px; color: #fff; line-height: 30px; background: #f45252; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; border-radius: 4px; margin-top: 20px; cursor: pointer; -webkit-user-select: none; user-select: none; } .buyMask .buyListBox .buyBtnBox .btn.load::before { position: absolute; content: ""; background: url(/images/watermark-remover-online/loading.svg); width: 16px; height: 16px; left: 50%; top: 50%; margin-top: -8px; margin-left: -8px; -webkit-animation: rotate 1.5s infinite linear; animation: rotate 1.5s infinite linear; } #uploadBtn img, .show-message-box .rotate img.load, div.btn span.reloadImg.load::after { -webkit-animation: rotate 1.5s infinite linear; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .buyMask .buyListBox .buyBtnBox .btn.load { font-size: 0; } .buyMask .buyListBox .buyBtnBox .btn:hover { background: #f23a3a; } .buyMask .buyMaskInner .securePurchase { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 24px; } .buyMask .buyMaskInner .securePurchase img { margin: 0 25px 0 0; } .buyMask .buyMaskInner .securePurchase img:last-child { margin-right: 0; } .buyMask .tableBox { margin-top: 56px; } .buyMask .tableBox .tableInner { border: 1px solid #d8dff8; border-radius: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; } .buyMask .tableBox table { border-radius: 16px; background: #fff; } .buyMask .tableBox thead .tableBg { background: #d8dff8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px 16px 0 0; z-index: 1; } .buyMask .tableBox thead tr th { position: relative; padding: 10px; font-weight: 700; font-size: 20px; color: #333; line-height: 30px; text-align: center; } .buyMask .tableBox thead tr th > * { position: relative; z-index: 2; } .buyMask .tableBox tbody tr { height: 48px; font-size: 16px; color: #333; } .buyMask .tableBox tbody td { text-align: center; border: 1px solid #d8dff8; } .buyMask .tableBox tbody tr td:first-child { border-left: none; } .buyMask .tableBox tbody tr td:last-child { border-right: none; } .buyMask .tableBox tbody tr:last-child td { border-bottom: none; } .buyMask .tableBox .tips { display: inline-block; width: 20px; height: 20px; background: url(/images/image-upscaler/tax-included.svg) center center/cover no-repeat; position: relative; cursor: pointer; vertical-align: middle; margin-left: 8px; padding: 0; } .buyMask .tableBox .tips span { position: absolute; width: 280px; font-size: 14px; color: #444; background-color: #ffffff; padding: 10px 16px; -webkit-box-sizing: border-box; box-sizing: border-box; top: -10px; left: -8px; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-box-shadow: 0 5px 17px 4px rgb(0 0 0 / 9%); box-shadow: 0 5px 17px 4px rgb(0 0 0 / 9%); display: none; border-radius: 4px; text-align: left; z-index: 2; line-height: 20px; font-weight: 400; font-style: normal; } .buyMask .tableBox .tips:hover span { display: block; } .buyMask .closeBuyBox { position: absolute; width: 20px; height: 20px; background: url(/images/image-upscaler/close.svg); top: 24px; right: 24px; cursor: pointer; } @media screen and (max-width: 800px) { .buyMask { width: 100%; height: 100%; border-radius: 0; padding: 60px 20px 20px; max-height: 100%; overflow: auto; } } @media screen and (max-width: 740px) { .buyMask .buyListBox ul { width: 100%; text-align: center; } .buyMask .buyListBox ul li { max-width: 400px; margin: 0 auto 10px; } .buyMask .buyListBox .buyBtnBox.flex-box { padding: 40px 0; } .buyMask .tableBox .tips span { width: 180px; } } @media screen and (max-width: 450px) { .buyMask .buyListBox ul { padding: 32px 20px; } .buyMask .buyListBox ul li .leftPart i { margin-right: 4px; } .buyMask .buyListBox ul li .hotProduct { margin: 0 0 0 5px; zoom: 0.8; } .buyMask .tableBox { margin-top: 30px; } } @media screen and (max-width: 390px) { .buyMask .buyListBox .buyMaskPrice span, .buyMask .buyListBox .leftPart span { font-size: 16px; } .buyMask .buyListBox ul { padding: 20px 14px; } .buyMask .buyListBox .buyMaskPrice { -ms-flex-preferred-size: auto; flex-basis: auto; } .buyMask .buyMaskInner .securePurchase img { margin-right: 6px; } } @media screen and (max-width: 360px) { .buyMask .buyContent .sliderBox { min-width: auto; width: 100%; } } .banner_box .upload_box { border-radius: 40px; border: 2px solid #fff; max-width: 900px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 56px auto 0; padding: 48px 0; text-align: center; } .banner_box .mode_box { max-width: 592px; margin: auto; } .banner_box .mode_box div { border-radius: 16px; border: 2px solid transparent; } .banner_box .mode_box div.active, .banner_box .mode_box div:hover { border-color: #ca2cff !important; cursor: pointer; } .banner_box .mode_box div img { max-width: 100%; border-radius: 14px 14px 0 0; pointer-events: none; } .banner_box .mode_box div img:nth-child(2) { display: none; } .banner_box .mode_box div p { font-size: 18px; color: #333; line-height: 28px; padding-top: 12px; padding-bottom: 12px; display: block; background: #113148; border-radius: 0 0 13px 13px; } .banner_box .mode_box div.active p { background: #ca2cff !important; color: #fff !important; border: 0; } .banner_box .mode_box div.active p::before { clear: both; content: ""; width: 20px; height: 20px; background: url(/images/image-upscaler/check-box.svg); display: inline-block; vertical-align: -3px; margin-right: 8px; } .banner_box .upload { font-size: 24px; font-weight: 700; color: #fff; max-width: 300px; height: 64px; line-height: 64px; background: #ff961b; display: block; text-align: center; margin: 28px auto 0; cursor: pointer; position: relative; border-radius: 36px; width: 95%; } .banner_box .upload:hover { background: #ffb660; } .banner_box .upload:active { background: #f37600; } .banner_box .upload i { position: relative; } .banner_box .upload > input { opacity: 0; width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; cursor: pointer; } .history_box { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 20px; } .history_box.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .history_box .text { font-size: 14px; font-weight: 700; line-height: 20px; color: #fff; } .history_box > div .photoHistory { display: none; } .history_box .photoHistory { font-size: 14px; line-height: 20px; color: #fff; margin-left: 10px; } .history_img { margin-top: 12px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .history_img i.bg { width: 90px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; margin: 10px; cursor: pointer; } .history_img i.error::before, .history_img i.load::before { clear: both; content: ""; background: url(/images/image-upscaler/loading.svg); background-size: cover; width: 18px; height: 18px; position: absolute; top: -4px; left: -4px; } #banner .banner_box .upload_box > div { margin-top: 16px; } #banner .history_box > div { margin: 0; } #banner .banner_box .upload_box .info { font-size: 16px; margin-top: 16px; color: #fff; } #banner .banner_box .upload_box > div .info, #banner .banner_box .upload_box > div > .batch_btn { font-size: 16px; display: block; background: 0 0; } #banner .banner_box .upload_box > div > .batch_btn { color: #ff961b; text-decoration: underline; cursor: pointer; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } #upload { display: none; } #uploadBtn { position: relative; } #uploadBtn img { display: inline-block; position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; animation: rotate 1.5s infinite linear; opacity: 0; width: 24px; height: 24px; } .alert-mask, .feedback-mask, .mask, .photo { width: 100%; display: none; position: absolute; left: 0; } #uploadBtn.load img { opacity: 1; } .photo .photoHistory::after, .refinement_top .bg_box_n .color_box div:last-child input, .refinement_top .img_box > i input, div.btn span.reloadImg.load::before { opacity: 0; } #uploadBtn.load { color: transparent; } #uploadBtn.load::before { display: none; } .photo img { max-width: initial; } .photo * { margin: 0; padding: 0; color: #333; font-size: 14px; } .alert-mask, .feedback-mask, .mask { height: 200%; background: rgba(0, 0, 0, 0.4); top: 0; z-index: 2; } .mask { z-index: 2 !important; } .photo { border-radius: 18px; max-width: 1072px; min-width: 300px; height: 630px; top: 15%; bottom: 12%; right: 0; margin: auto; z-index: 12; background: #fff; -webkit-box-shadow: 0 0 30px #00274266; box-shadow: 0 0 30px #00274266; } .photo.active { -webkit-display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .photo > div { background: #635bee; padding-top: 12px; width: 128px; } .icon_name { display: inline-block; width: 128px; } .photo > ul, div.btn { width: 100%; background: #fff; border-radius: 18px; } .photo > ul { max-width: 1073px; } .photo > ul > li { display: none; background: #fff; padding-top: 20px; padding-bottom: 28px; border-radius: 18px; } .photo > ul li.active { display: block; } .type_change, div.btn p, div.btn > div { display: inline-block; } .scale_choose { text-align: center; margin-top: 10px; } .type_choose { text-align: center; } .banner label { margin: 0 10px 0 5px; } div.btn { padding: 0 24px; position: absolute; bottom: 0; z-index: 100; height: 82px; line-height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; } .hollowing, a.uploadBtn, div.btn span { -webkit-box-sizing: border-box; cursor: pointer; } div.btn p { width: 24px; height: 24px; background: url(/images/online-bg-remover/back2.png); margin-top: 16px; } div.btn p.left { background-position-y: 0; margin-right: 18px; } div.btn p.left:hover { background-position-y: -24px; } div.btn p.right { background-position-y: -48px; } div.btn p.right:hover { background-position-y: -72px; } div.btn > div { position: absolute; left: 0; right: 0; margin: auto; } a.uploadBtn, div.btn span { min-width: 166px; height: 36px; background: #635bee; border-radius: 4px; color: #fff; display: inline-block; text-align: center; line-height: 36px; margin: 0 10px; padding-left: 6px; padding-right: 6px; box-sizing: border-box; font-size: 16px; } div.btn span.reloadImg { position: relative; } div.btn span.reloadImg.load { background: #635bee !important; color: transparent; } div.btn span.reloadImg.load::after { clear: both; content: ""; width: 16px; height: 16px; background: url(/images/image-upscaler/loading.svg); position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; animation: rotate 1.5s infinite linear; } a.uploadBtn { margin-left: 25px; } .photo > ul > div.btn span:hover, .uploadBtn:hover { background: #7771e9; } .photo > ul > div.btn span:active, .uploadBtn:active { background: #554cff; } .hollowing { color: #ff5f58; box-sizing: border-box; line-height: 28px; background: 0 0; border-radius: 30px; } .hollowing:hover { background-color: #ff5f58; border-color: #ff5f58; color: #fff; } .photo > ul > div.btn > div { display: none; padding: 16px 0; } .photo > ul > div.btn > div i.home, .photo > ul > div.btn > div label { height: 31px; display: inline-block; } .photo > ul > div.btn > div:nth-child(2) { width: auto; } .photo > ul > div.btn > div.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .photo > ul > div.btn > div:nth-child(2) div { position: sticky; margin: 0; } .photo > ul > div.btn > div:nth-child(2) div:last-child { margin-right: 40px; } .refinement_top .operate-revoke, .refinement_top .revoke, .refinement_top .transform-revoke { margin-right: 10px; } .photo > ul > div.btn > div i.home { width: 30px; background: url(/images/watermark-remover-online/home.png); vertical-align: -8px; margin-left: 20px; margin-right: 10px; background-position-y: -30px; } .refinement_top .norevoke, .refinement_top .operate-norevoke, .refinement_top .operate-revoke, .refinement_top .revoke, .refinement_top .transform-norevoke, .refinement_top .transform-revoke { width: 20px; height: 20px; margin-left: 0 !important; border: none !important; cursor: pointer; display: inline-block; } .photo > ul > div.btn > div i.home:hover { background-position-y: 0; } .photo > ul > div.icon { position: absolute; top: 27px; left: 28px; font-size: 16px; color: #222; } .photo > ul > div.icon img { display: inline-block; vertical-align: -11px; } .refinement_top { padding-left: 16px; padding-right: 36px; text-align: left; position: relative; } .refinement_top .norevoke, .refinement_top .revoke { background: url(/images/online-bg-remover/back-icon.png); vertical-align: middle; } .refinement .refinement_top .norevoke, .refinement .refinement_top .revoke { vertical-align: -5px; } .refinement .scale_zoon { display: inline-block; color: #333; font-size: 16px; } .refinement_top .revoke.active, .refinement_top .revoke:hover { background-position-y: -20px; } .refinement_top .revoke.forbid { background-position-y: -60px; } .refinement_top .norevoke { background-position-y: -80px; } .refinement_top .norevoke:hover { background-position-y: -100px; } .refinement_top .norevoke.active { background-position-y: -120px; } .refinement_top .norevoke.forbid { background-position-y: -140px; } .refinement_top .operate-norevoke, .refinement_top .operate-revoke { background: url(/images/online-bg-remover/back-icon.png); vertical-align: middle; } .refinement .refinement_top .operate-norevoke, .refinement .refinement_top .operate-revoke { vertical-align: -5px; } .refinement_top .operate-revoke.active, .refinement_top .operate-revoke:hover { background-position-y: -20px; } .refinement_top .operate-revoke.forbid { background-position-y: -60px; } .refinement_top .operate-norevoke { background-position-y: -80px; } .refinement_top .operate-norevoke:hover { background-position-y: -100px; } .refinement_top .operate-norevoke.active { background-position-y: -120px; } .refinement_top .operate-norevoke.forbid { background-position-y: -140px; } .refinement_top .transform-norevoke, .refinement_top .transform-revoke { background: url(/images/online-bg-remover/back-icon.png); vertical-align: middle; } .refinement .refinement_top .transform-norevoke, .refinement .refinement_top .transform-revoke { vertical-align: -5px; } .refinement_top .transform-revoke.active, .refinement_top .transform-revoke:hover { background-position-y: -20px; } .refinement_top .transform-revoke.forbid { background-position-y: -60px; } .refinement_top .transform-norevoke { background-position-y: -80px; } .refinement_top .transform-norevoke:hover { background-position-y: -100px; } .refinement_top .transform-norevoke.active { background-position-y: -120px; } .refinement_top .transform-norevoke.forbid { background-position-y: -140px; } .refinement_top span { display: inline-block; cursor: pointer; } .blue-border { overflow: hidden; border-radius: 24px; border: 1px solid #485062; margin-left: 20px; display: inline-block; vertical-align: middle; } .blue-border:hover { border: 1px solid #635bee; } .refinement_top .hb_type div > i { width: 24px; height: 24px; display: inline-block; background: url(/images/watermark-remover-online/lasso1.png?v=1.0.3); vertical-align: -7px; cursor: pointer; } #right-operate-box > .close { width: 20px; height: 20px; background: url(/images/image-upscaler/close.svg); position: absolute; right: 16px; top: 25px; cursor: pointer; } #right-operate-box > .close:hover { background-position: 0 -20px; } .refinement_top .hb_type div.erase > i { vertical-align: -6px; } .refinement_top .hb_type .erase.active, .refinement_top .hb_type .free_lasso.active, .refinement_top .hb_type .hb.active, .refinement_top .hb_type .line_lasso.active { font-size: 12px; color: #485062; text-align: center; display: inline-block; line-height: 26px; height: 26px; padding: 0 12px; background: #635bee; border-radius: 30px; vertical-align: 1px; } .refinement_top .hb_type .erase.active { background: #ff661b; } .refinement_top .hb_type .erase span, .refinement_top .hb_type .free_lasso span, .refinement_top .hb_type .hb span, .refinement_top .hb_type .line_lasso span { padding: 0; color: #fff; display: none; } .hb_type, .refinement_top .hb_type .erase.active span, .refinement_top .hb_type .free_lasso.active span, .refinement_top .hb_type .hb.active span, .refinement_top .hb_type .line_lasso.active span { display: inline-block; } .refinement_top .hb_type .erase.active i, .refinement_top .hb_type .free_lasso.active i, .refinement_top .hb_type .hb.active i, .refinement_top .hb_type .line_lasso.active i { width: 20px; height: 20px; vertical-align: -7px; margin-right: 5px; margin-left: 0; } .refinement_top .hb_type .erase, .refinement_top .hb_type .free_lasso, .refinement_top .hb_type .hb, .refinement_top .hb_type .line_lasso { display: inline-block; margin: 0 5px; } .refinement_top .hb_type .free_lasso i { background-position-y: 0; } .refinement_top .hb_type .free_lasso:hover i { background-position-y: -24px; } .refinement_top .hb_type .free_lasso.active i { background-position-y: -48px; } .refinement_top .hb_type .line_lasso i { background-position-y: -68px; } .refinement_top .hb_type .line_lasso:hover i { background-position-y: -92px; } .refinement_top .hb_type .line_lasso.active i { background-position-y: -117px; } .refinement_top .hb_type .erase i { background-position-y: -136px; vertical-align: -4px; } .refinement_top .hb_type .erase:hover i { background-position-y: -160px; } .refinement_top .hb_type .erase.active i { background-position-y: -186px; } .refinement_top .hb_type .erase.active { vertical-align: 1px; } .refinement_top .hb_type .hb i { background-position-y: -206px; vertical-align: -9px; } .refinement_top .hb_type .hb:hover i { background-position-y: -230px; } .refinement_top .hb_type .hb.active i { background-position-y: -252px; } .refinement_top .hb_type .erase_border { height: 10px; border-left: 1px dashed #ddd; vertical-align: -2px; margin-left: 10px; margin-right: 10px; } .hb_type { margin-left: 10px; border: 1px dashed #ddd; padding-top: 6px; padding-bottom: 6px; border-radius: 10px; vertical-align: 3px; margin-top: -4px; width: 260px; } .refinement_top .hb_type .erase i:last-child, .refinement_top .hb_type .hb i:last-child { display: none; } .refinement_top .hb_type .erase.active i:last-child, .refinement_top .hb_type .hb.active i:last-child { display: inline-block; width: 8px; height: 5px; background: url(/images/online-bg-remover/arrow.png); vertical-align: 1px; margin-left: 5px; background-position-y: -5px; } .refinement_top .hb_type .erase.active.c i:last-child, .refinement_top .hb_type .hb.active.c i:last-child { background-position-y: 0; } .refinement_top > span { font-size: 14px; color: #333; margin-left: 16px; display: inline-block; } .pensize-change-container { margin: 0 !important; cursor: default !important; background: #fff; border-radius: 10px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 5px 10px; position: absolute; top: 40px; z-index: 3; } .pensize-change-container i { width: 17px; height: 9px; background: url(/images/online-bg-remover/close-bg-img.png); display: inline-block; margin-left: 5px; cursor: pointer; } .refinement_top > span input { vertical-align: -4px; cursor: pointer; } .bg_crop .refinement_top .displayInlineBlock { margin-left: 14px; } .refinement_top .text-tailoring { display: inline-block; vertical-align: -1px; } .refinement_top .text-tailoring .tailoring-unlimited { border: 1px solid #333; border-radius: 30px; height: 20px; line-height: 20px; padding: 0 10px; vertical-align: -1px; } .refinement_top .text-tailoring span { font-size: 14px; color: #333; padding: 0 10px; border: 1px solid transparent; border-radius: 30px; height: 20px; line-height: 20px; vertical-align: -1px; } .refinement_top .text-tailoring span:hover { border-color: #635bee; color: #635bee; } .refinement_top .text-tailoring span.active { background: 0 0; color: #2a00a7; border-color: #2a00a7; } .refinement_top .displayInlineBlock.active { border: 1px solid #2a00a7 !important; } .refinement_top .text-tailoring span.active:hover { border-color: #635bee; } .refinement_top .text-tailoring .tailoring-unlimited.active { border-color: #2a00a7; } .refinement_top .text-tailoring span.text:hover { border-color: #fff; color: #333; cursor: initial; } .refinement_top .bg_box_n { border: none; display: inline-block; margin-left: 10px; overflow: visible; } .refinement_top .bg_box_n div { border: none; margin: 0 0 0 -10px; vertical-align: -2px; overflow: visible; } .refinement_top .bg_box_n div.img_box { display: none; } .refinement_top .bg_box_n .color_box div { width: 16px; height: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e1e1e1; border-radius: 0; margin-left: 2px; cursor: pointer; padding: 1px; display: inline-block; } .refinement_top .bg_box_n .color_box div:hover { border: 1px solid #635bee; } .refinement_top .bg_box_n .color_box div i { width: 100%; height: 100%; display: block; } .refinement_top .bg_box_n .color_box div:nth-child(1) { background: url(/images/online-bg-remover/color-no.png); background-size: 14px 14px; } .refinement_top .bg_box_n .color_box div.blue i { background: #00f; } .refinement_top .bg_box_n .color_box div.red i { background: red; } .refinement_top .bg_box_n .color_box div.white i { background: #fff; } .refinement_top .bg_box_n .color_box div.black i { background: #000; } .refinement_top .bg_box_n .color_box div.green i { background: green; } .refinement_top .bg_box_n .color_box div.pink i { background: pink; } .refinement_top .bg_box_n .color_box div:last-child { width: 22px; height: 16px; background: url(/images/online-bg-remover/more.png); border: none; padding: 0; border-radius: 0; vertical-align: 1px; } .refinement_top .bg_box_n .color_box div:last-child:hover { background-position: 0 -16px; } .refinement_top .img_box > i { width: 21px; height: 21px; background: url(/images/online-bg-remover/add-picture.png); display: inline-block; overflow: hidden; vertical-align: -2px; } .refinement_top .img_box div { border-radius: 30px; border: 1px solid #465064; width: 130px; height: 20px; display: inline-block; margin-left: 5px; position: relative; color: #465064; font-size: 12px; padding-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 18px; overflow: hidden; } .refinement_top .img_box div:hover { overflow: initial; } .refinement_top .img_box div ul { position: absolute; top: 0; left: 0; width: 100%; padding-left: 15px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 20px; background: #fff; border-radius: 30px 30px 0 0; z-index: 3; } .refinement_top .img_box div li { position: relative; padding-bottom: 5px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .refinement_top .img_box div li input { width: 100%; height: 100%; position: absolute; top: 0; right: 0; opacity: 0; } .refinement_top .img_box div > i { width: 9px; height: 4px; background: url(/images/online-bg-remover/point.png); position: absolute; right: 10px; top: 8px; } .imageMove .refinement_top span { display: inline-block; margin-left: 25px; font-size: 14px; } .refinement_top .uploadBtn { vertical-align: 1px; } .refinement_top .controlLever i { width: 14px; height: 14px; display: inline-block; background: url(/images/online-bg-remover/check.png); margin-right: 8px; vertical-align: -2px; } .refinement_top .mirror i { background: url(/images/online-bg-remover/mirror.png); width: 20px; height: 20px; display: inline-block; vertical-align: -6px; } .refinement_top .mirror i.lMirror { background-position-y: 0; margin-right: 6px; } .refinement_top .mirror i.lMirror.active, .refinement_top .mirror i.lMirror:hover { background-position-y: -20px; } .refinement_top .mirror i.tMirror { background-position-y: -40px; } .refinement_top .mirror i.tMirror.active, .refinement_top .mirror i.tMirror:hover { background-position-y: -60px; } .refinement_top .rotate { display: inline-block; border: none; font-size: 14px; color: #333; } .refinement_top .rotate div { display: inline-block; border: none; border-radius: 0; margin-left: 0; overflow: initial; position: relative; } .refinement_top .rotate div span::after, .refinement_top .rotate div::after { clear: both; content: ""; position: absolute; background: #272e3d; } .refinement_top .rotate div::after { height: 1px; width: 100%; top: 8px; left: 0; } .refinement_top .rotate .rotate-box span { font-size: 12px; color: #404040; padding: 0; margin: 0 -0.5px 0 0; -webkit-transform: scale(0.833333); transform: scale(0.833333); -webkit-transform: translateY(5px); transform: translateY(5px); width: 20px; text-align: center; } .refinement_top .rotate div span::after { width: 1px; height: 6px; top: -1px; left: 50%; } .canvas, .refinement_bottom { background: #f9f9f9; position: absolute; width: 100%; } .canvas { height: auto; min-height: 280px; max-height: 468px; top: 80px; bottom: 84px; } .canvas_box { width: 100%; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; position: absolute; top: 1px; bottom: 39px; z-index: 999; } .refinement_bottom { padding: 0 17px; border-top: 1px solid #d8d8d8; -webkit-box-sizing: border-box; box-sizing: border-box; bottom: 0; height: 39px; line-height: 36px; z-index: 10; -ms-flex-pack: distribute; justify-content: space-around; } .canvas_box div .left_mask_box, .canvas_box div .right_mask_box, .canvas_box div > div div { z-index: 9; position: absolute; } .refinement_bottom > span { font-size: 12px; color: #485062; } .refinement_bottom div { display: inline-block; vertical-align: middle; width: 170px; } .refinement_bottom div span { vertical-align: 1px; line-height: 34px; height: 18px; display: inline-block; font-size: 14px; color: #333; } .refinement_bottom div .tab_img { margin: 12px auto; width: 13px; height: 13px; background: url(/images/image-upscaler/compare.svg); cursor: pointer; vertical-align: -1px; } .refinement_bottom div .tab_img:hover { background-position-y: -13px; } .refinement_bottom div .tab_img:active { background-position-y: -26px; } .refinement_bottom div .tab_img.active { background-position-y: -52px; } .refinement_bottom div .tab_img.active:hover { background-position-y: -65px; } .refinement_bottom div .tab_img.active:active { background-position-y: -78px; } .refinement_bottom div i { width: 18px; height: 18px; background: url(/images/online-bg-remover/bar.png); margin: 0 10px; display: inline-block; vertical-align: -2px; cursor: pointer; } .refinement_bottom div i.move { background: url(/images/watermark-remover-online/hand.png); background-position-y: -1px; } .refinement_bottom div i.move:hover { background-position-y: -21px; } .refinement_bottom div i.move.active { background-position-y: -41px !important; } .refinement_bottom div i.move.active:hover { background-position-y: -61px !important; } .no-hover, .no-hover:hover { background-position: 0 -81px !important; } .refinement_bottom div i.narrow { background-position-y: -72px; } .refinement_bottom div i.narrow.active, .refinement_bottom div i.narrow:hover { background-position-y: -90px; } .refinement_bottom div i.enlarge { background-position-y: -108px; } .refinement_bottom div i.enlarge.active, .refinement_bottom div i.enlarge:hover { background-position-y: -126px; } .canvas_box div .canvas_platform { border-right: 1px solid #e1e1e1; } .canvas_box div .canvas_platform, .canvas_box div .img_compare { position: absolute; width: 90%; height: 100%; background-color: #efeff0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; max-width: 100%; max-height: 100%; } .canvas_box div .canvas_platform > img { display: block; position: absolute; max-width: 500px; height: 323px; left: 50%; top: 50%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); } .canvas_box div .img_compare, .canvas_box div .old-box { background: url(/images/image-upscaler/bg.jpg); } .canvas_box div .left_img_show_container, .canvas_box div .right_img_show_container { position: absolute; display: inline-block; left: 50%; top: 50%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 500px; max-height: 323px; width: initial !important; height: initial !important; } .canvas_box div .left_img_show, .canvas_box div .right_img_show { width: 100%; height: 100%; } .canvas_box div .canvas_platform > img.active, .canvas_box div .img_compare > img.active { cursor: none; } .canvas_box div.active .left_inner_select, .canvas_box div.active .right_inner_select { width: 20px; height: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #fff; background-color: transparent; cursor: none; } .feedback, .loading-progress { -webkit-box-sizing: border-box; } .canvas_box div.active .left_inner, .canvas_box div.active .right_inner { width: 100px; height: 100px; overflow: hidden; position: absolute; } .canvas_box div.active .left_inner_img, .canvas_box div.active .right_inner_img { width: auto; } .canvas_box .left, .canvas_box .right { position: relative; width: 50%; min-width: 300px; height: 100%; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .canvas_box .left.active { border-right: 1px solid #d8d8d8; z-index: 102; } .canvas_box .right > .text { position: absolute; bottom: 10px; width: 100%; text-align: center; left: 0; z-index: -1; color: #999; } .image-loading-box.active { background: 0 0; -webkit-box-shadow: none; box-shadow: none; min-height: auto; padding-bottom: 0; } .loading-box, .loading-box-b { padding-bottom: 20px; border-radius: 20px; width: 100%; } .image-loading-box.active .icon-box { display: none; } .load-alert-box > img, .load-warning-box > img, .oversize-box > img, .show-alert > img { display: block; margin: 70px auto 0; } .loading-box { max-width: 350px; margin: 0 auto; padding-top: 10px; } .loading-box img { display: block; margin: 0 !important; } .loading-box .loading-text { margin-top: 10px; color: #333; font-size: 16px; line-height: 28px; text-align: center; font-weight: 400; } .loading-box-b { max-width: 280px; margin: 70px auto; } .loading-box-b img { display: block; margin: 0 auto; } .loading-progress { height: 14px; border-radius: 30px; margin-top: 50px; width: 170px; position: relative; border: 2px solid #fff; box-sizing: border-box; } .loading-progress i { background: #fff; display: block; height: 14px; position: absolute; top: -2px; left: -1px; padding: 0; margin: 0; border-radius: 30px; width: 13px; } .loading-box-b .loading-b-text { margin-top: 15px; color: #333; font-size: 16px; line-height: 28px; text-align: center; } .show-message-box p { color: #333; font-size: 16px; } .show-message-box > img { margin: 66px auto auto; display: block; } .alert-modal-box, .feedback { display: none; position: fixed; left: 50%; top: 50%; background-color: #fff; } .loading-text, .warning-text { color: #333; } .loading-box .button-group, .loading-box-b .button-group { width: 122px; min-width: 122px; margin: 30px auto 0; } .loading-box-b .button-group div { background-color: #fff; } a.jump-link { color: #ff9602 !important; } .alert-modal-box { width: 100%; height: 100%; max-width: 500px; max-height: 300px; border-radius: 20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; -webkit-box-shadow: 0 0 30px #00274266; box-shadow: 0 0 30px #00274266; } .alert-modal-box .confirm-icon { width: 60px; height: 60px; margin: 40px auto; } .alert-modal-box .confirm-text { width: 80%; text-align: center; line-height: 20px; } .alert-modal-box .confirm-button-group { width: 60%; overflow: hidden; margin: 50px auto; } .confirm-button-group div { border: 1px solid #ff5f58; } .over-limit-upload .confirm-back { float: none; } .confirm-button-group .cancel-back { background-color: #fff; color: #ff5f58; } .confirm-button-group .cancel-back:hover { color: #fff; } .feedback { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-sizing: border-box; padding-top: 66px; max-width: 700px; width: 100%; overflow-y: auto; border-radius: 16px; -webkit-box-shadow: 0 0 13px -4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 13px -4px rgba(0, 0, 0, 0.5); font-size: 16px; color: #222; text-align: center; z-index: 1000; } .feedback p, .feedback p.title { font-size: 16px; color: #333; font-weight: 700; } .feedback .feedback_container { max-width: 596px; width: 95%; margin: 0 auto; } .feedback p.title { text-align: left; margin-bottom: 20px; line-height: 30px; } .feedback p { line-height: 28px; margin-bottom: 4px; text-align: left; } .feedback #form_contents, .feedback input { margin-bottom: 10px; width: 100%; min-height: 40px; line-height: 38px; border: 1px solid #d9d9d9; outline: 0; background-color: #f8f8f8; padding: 0 10px; -webkit-box-sizing: border-box; border-radius: 4px; box-sizing: border-box; font-size: 14px; color: #666; text-align: left; } .feedback #form_contents.active, .feedback input.active { border-color: #ff5f58; background: 0 0; } .feedback #form_contents { max-height: 116px; resize: none; } .feedback #form_submit { display: inline-block; width: auto; outline: 0; border: none; margin-top: 20px; min-width: 290px; height: 46px; line-height: 46px; background: #635bee; font-size: 16px; color: #fff; font-weight: 700; text-align: center; cursor: pointer; margin-bottom: 40px; } .feedback #form_submit:hover { background: #7771e9; } .feedback #form_submit:active { background: #554cff; } .feedback .title { margin-bottom: 26px; font-size: 20px; line-height: 24px; font-weight: 600; text-align: left; } .feedback_close { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; background: url(/images/image-upscaler/close.svg); cursor: pointer; } .feedback_close:hover { background-position-y: -20px; } .feedback_close:active { background-position-y: -40px; } .feedback #mail-tip { display: none; position: absolute; top: 206px; font-size: 14px; color: #c7340f; } textarea { font-family: "Segoe UI", Arial, Helvetica, Verdana, sans-serif; } .dot { top: 2px; z-index: 1; -webkit-box-shadow: 0 0 7px 2px #4bb1f2; box-shadow: 0 0 7px 2px #4bb1f2; } .reloadImg { margin-left: 16px !important; cursor: pointer; } .photo .saveBtn { width: auto; min-width: 120px; border-radius: 4px; margin-right: 16px; padding-left: 6px; padding-right: 6px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #635bee; } .photo .saveBtn:hover { background: #ff726b; } .photo .photoHistory { width: 36px; height: 36px; display: inline-block; line-height: 36px; border-radius: 0 4px 4px 0; margin-right: 16px !important; border-left: 1px solid rgba(255, 255, 255, 0.4); position: relative; background: #635bee; } .photo .photoHistory:hover { background: #7771e9; } .photo .photoHistory::after { content: "History"; z-index: -1; font-size: 16px; } .photo .photoHistory::before, .photo_rights .btn::before, .reloadImg::before { clear: both; content: ""; } .photo .photoHistory::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/image-upscaler/history.svg) center center no-repeat; } .crop-simple-icon, .img-bg-simple-icon, .img-color-simple-icon { display: inline-block; background-image: url(/images/online-bg-remover/tab-color-icon.png); background-repeat: no-repeat; margin-left: 14px; } #LeftdstCanvas { -webkit-box-shadow: 0 0 4px 1px #0003d; box-shadow: 0 0 4px 1px #0003d; } .img-color-simple-icon { width: 26px; height: 26px; background-position: center -208px; } .img-bg-simple-icon { width: 26px; height: 26px; background-position: center -286px; } .crop-simple-icon { width: 24px; height: 24px; background-position: center -132px; } .mobile_crop { display: none; } .mobile-save-image { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; display: none; flex-direction: column; background-color: #efeff0; } .mobile-save-image.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .mobile-save-image .top { height: 48px; background: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 12px; padding-right: 12px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .mobile-save-image .top .close { width: 28px; height: 28px; background: url(/images/image-upscaler/icon-menu.svg); display: block; } .mobile-save-image .top .top_icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 6px; } .mobile-save-image .top .top_icon img { margin-right: 6px; width: 30px; height: 30px; } .mobile-save-image .top .top_icon p { font-size: 14px; color: #333; line-height: 16px; } .mobile-save-image .info { margin-top: 20px; font-size: 16px; color: #333; font-weight: 700; text-align: center; padding-left: 20px; padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mobile-save-image > div { overflow: hidden; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mobile-save-image > .mobile_image_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .show-long-press-save, .show-message-box { -webkit-box-sizing: border-box; width: 100%; } .mobile-save-image > .mobile_image_box img { max-width: 100%; max-height: 100%; margin: auto; } .image-show-box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 60px; overflow: hidden; } .image-show-box img { display: block; max-width: 100%; max-height: 90%; background-image: url(/images/online-bg-remover/bg.png); -webkit-box-shadow: 0 0 4px 1px #0003d; box-shadow: 0 0 4px 1px #0003d; } .save-btn-group { width: 100%; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .back-edit { position: absolute; top: 20px; left: 20px; width: 60px; height: 24px; line-height: 24px; font-size: 14px; border: 1px solid #ff5f58; border-radius: 15px; text-align: center; } .show-long-press-save { height: 100%; text-align: center; padding: 0 10px; box-sizing: border-box; } .show-long-press-save span { display: inline-block; margin-top: 14px; } .image-loading-box { position: absolute; z-index: 14; display: block; display: none; width: 100%; max-width: 350px; min-height: auto; max-height: 92%; height: auto; overflow: auto; background-color: rgba(255,255,255,0.9); border-radius: 18px; -webkit-box-shadow: 0 0 30px #00274266; box-shadow: 0 0 30px #00274266; left: 50%; top: 50%; -webkit-transform: -webkit-translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -o-translate(-50%, -50%); transform: translate(-50%, -50%); } .back-index-confirm, .mask-box { -webkit-transform: translate(-50%, -50%); } .show-message-box { display: none; overflow: hidden; padding-bottom: 10px; box-sizing: border-box; } .button-group .btn_v1, .button-group div { -webkit-box-sizing: border-box; font-weight: 700; } .show-message-box .rotate { position: relative; } .show-message-box .rotate img.load { position: absolute; top: 0; left: 0; animation: rotate 1.5s infinite linear; } .show-message-box .text { font-size: 16px; color: #333; line-height: 28px; text-align: center; margin: 10px auto 0; max-width: 596px; width: 95%; } .show-message-box .text span { color: #635bee; } .show-message-box .text span.bold { font-weight: 700; } .show-message-box .text span.feed-back-link { cursor: pointer; } .show-message-box .text .max_overresolution { text-align: left; } .show-message-box .text .max_overresolution > p:first-child { margin-bottom: 20px; } .show-message-box .text .max_overresolution div { background: #f8f8f8; border-radius: 6px; padding: 20px; } .show-message-box .text .max_overresolution div p { line-height: 30px; } .error-icon, .loading-icon { text-align: center; line-height: 100px; } .batch-no-box .button-group label, .rights-box .button-group label { margin-top: 20px; display: inline-block; } .batch-no-box .button-group label .confirm { background: #fff; border-color: #635bee; color: #635bee; } .batch-no-box .button-group label .confirm:hover { background: #635bee; color: #fff; } .oversize-box .button-group div.confirm { margin-bottom: 20px !important; } .image-loading-box .down-box .button-group div { min-width: 318px; } .image-loading-box .down-box .button-group a:last-child { margin-top: 14px; } .image-loading-box > .close { width: 20px; height: 20px; background: url(/images/image-upscaler/close.svg); position: absolute; right: 16px; top: 20px; cursor: pointer; } .image-loading-box > .close:hover { background-position-y: -20px; } .image-loading-box > .close:active { background-position-y: -40px; } .overresolution-icon { margin: 60px auto 0; width: 60px; height: 60px; } .error-icon, .loading-icon, .warning-icon { width: 100px; height: 100px; } .error-icon { margin: 100px auto 0; border: 10px solid #f5a73f; border-radius: 100%; color: #f5a73f; font-weight: 700; font-size: 60px; } .loading-icon { margin: 120px auto 0; background-image: url(/images/online-bg-remover/loading.gif); color: #3c6ae8; font-size: 30px; } .warning-icon { margin: 50px auto 0; } .warning-icon img { width: 100%; height: 100%; } .alert-text, .error-text { margin: 26px auto 0; width: 85%; color: #222; text-align: center; font-size: 18px; line-height: 20px; } .loading-text, .overresolution-text, .warning-text { font-size: 18px; line-height: 20px; text-align: center; } .error-text a { color: #ff5f58; } .loading-text { font-weight: 700; } .overresolution-text { display: block; } .button-group { margin: 30px auto 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .button-group div { display: inline-block; margin: 0; height: 46px; border: 1px solid #635bee; color: #635bee; background-color: #fff; border-radius: 6px; text-align: center; font-size: 16px; line-height: 44px; cursor: pointer; box-sizing: border-box; } .button-group div:hover { border-color: #7771e9; color: #7771e9; background: 0 0; } .button-group div:active { border-color: #554cff; color: #554cff; } .button-group .cancel { margin-top: 14px; } .overresolution-box .button-group div, .oversize-box .button-group div { margin: 0 !important; } .button-group .upgrade_btn, .button-group div.confirm, .button-group div.retry { background-color: #635bee; color: #fff; } .button-group .upgrade_btn:hover, .button-group div.confirm:hover, .button-group div.retry:hover { background: #7771e9; } .button-group .upgrade_btn:active, .button-group div.confirm:active, .button-group div.retry:active { background: #554cff; } .button-group .upgrade_btn { overflow: hidden; border-radius: 6px; } .button-group .upgrade_btn div { background: inherit; color: inherit; } .button-group .btn_v1 { display: inline-block; width: auto; min-width: 180px; height: 34px; line-height: 34px; background: #635bee; padding-left: 10px; padding-right: 10px; box-sizing: border-box; border-radius: 4px; color: #fff; font-size: 14px; text-decoration: none; } .down-mac-box .button-group { margin-top: 20px; } .down-mac-box .button-group .btn_v1:last-child { margin-top: 6px; } .cancel { background-color: #fff; color: #635bee; } .cancel-upload, .confirm-button-group div { color: #fff; cursor: pointer; text-align: center; } .cancel-upload { margin: 12px auto; width: 120px; height: 36px; border-radius: 10px; background-color: #635bee; font-size: 18px; line-height: 36px; } .cancel-upload:hover { background-color: #30adfc; } .pensize-box { position: relative; overflow: visible !important; width: 180px; height: 10px; border: #d9d9d9 !important; cursor: pointer; } .pensize-grey-box { margin-top: 3px; width: 100%; height: 2px; background-color: #d9d9d9; } .pensize-dot { position: absolute; top: 0; left: 16px; z-index: 10; display: inline-block; width: 8px; height: 8px; border-radius: 100%; background-color: #635bee; -webkit-box-shadow: 0 0 4px 1px #635bee; box-shadow: 0 0 4px 1px #635bee; } .back-index-confirm { position: fixed; top: 50%; left: 50%; z-index: 100; display: none; width: 100%; height: 100%; max-width: 500px; max-height: 300px; border-radius: 20px; background-color: #fff; -webkit-box-shadow: 0 0 30px #00274266; box-shadow: 0 0 30px #00274266; transform: translate(-50%, -50%); } .icon-box, .mask-box, .move_canvas { position: absolute; } .back-index-confirm .confirm-icon { margin: 40px auto; width: 60px; height: 60px; } .back-index-confirm .confirm-text { width: 80%; text-align: center; line-height: 20px; } .back-index-confirm .confirm-button-group { overflow: hidden; margin: 50px auto; width: 60%; } .confirm-button-group div { width: 140px; height: 30px; border-radius: 15px; background-color: #635bee; line-height: 30px; } .confirm-button-group div:hover { background-color: #30adfc; } .confirm-button-group .confirm-back { float: left; } .confirm-button-group .cancel-back { float: right; } .load-alert-box .button-group { width: 100%; } .load-alert-box .button-group .confirm { margin: auto; float: none !important; display: block; } .icon-box .icon-text, .icon-box img, .photo_login, .photo_login > a i, .reloadImg::before { display: inline-block; } .image-loading-box .loadding_percent { margin: 0 auto; height: 100px; background: url(/images/free-online-image-enhancer/loading.gif) center 0 no-repeat; text-align: center; font-size: 36px; line-height: 100px; } .icon-box { top: 16px; left: 16px; font-size: 0; } .icon-box img { width: 30px; height: 30px; vertical-align: middle; } .icon-box .icon-text { vertical-align: middle; font-size: 16px; color: #333; margin-left: 16px; } .image-loading-box .feed-back-box { position: absolute; right: 0; bottom: 20px; width: 160px; color: #3a81ea; text-decoration: underline; } .image-loading-box .feed-back-box a { color: #3a81ea; } .no-border { border: none !important; } .mask-box { top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%); } .rotate-box { position: relative; } .dot { position: absolute !important; left: 143px; width: 14px !important; height: 14px !important; border-radius: 100% !important; background-color: #4bb1f2 !important; cursor: pointer; } .reloadImg::before { width: 18px; height: 18px; background: url(/images/image-upscaler/add.svg); vertical-align: -3px; margin-right: 6px; } #LeftdstCanvas { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .refinement_top { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .refinement_top > div:last-child > * { vertical-align: middle; } .photo_login > a i, .photo_rights .btn::before, .photo_upgrade > a i { height: 28px; vertical-align: -8px; } .photo_login { position: relative; margin-right: 30px; } .photo_login > a { font-size: 16px; line-height: 18px; cursor: pointer; text-decoration: none; font-weight: 700; } .photo_login > a span { color: #247dff; font-size: 16px; } .photo_login > a i { width: 28px; background: url(/images/image-upscaler/profile.svg); margin-right: 6px; } .photo_login > a i.pic { background-size: cover; border-radius: 50%; border: 1px solid #3888ff; -webkit-box-sizing: border-box; box-sizing: border-box; } .photo_login > a:hover span { color: #4690ff; } .photo_login > a:hover i { background-position-y: -28px; } .photo_login.have_login > a:hover i { background-position-y: 0; } .photo_login > a:active span { color: #554cff; } .photo_login > a:active i { background-position-y: -56px; } .photo_rights, .photo_rights_load { display: none; width: 340px; background: #fff; -webkit-box-shadow: 0 0 13px -4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 13px -4px rgba(0, 0, 0, 0.5); border-radius: 16px; position: absolute; top: 32px; right: 0; z-index: 1000; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0 30px; } .photo_rights_load .load { margin: 30px auto 20px; display: block; -webkit-animation: rotate 1.5s infinite linear; animation: rotate 1.5s infinite linear; width: 60px; } .photo_rights_load p { text-align: center; font-size: 16px; color: #333; } .photo_rights { padding: 20px; } .photo_rights p { font-size: 16px; line-height: 28px; color: #333; } .photo_rights p .num, .photo_rights p span { color: #ff5f58; font-weight: 700; font-size: 16px; } .photo_rights p .num { font-style: normal; } .photo_rights p a { color: #ff5f58; display: block; margin-top: 4px; font-size: 16px; } .photo_rights p a:hover { text-decoration: underline; } .photo_rights .btn { width: 100%; line-height: 46px; font-size: 16px; color: #fff; background: #ff6c19; border-radius: 6px; display: block; margin: 14px auto auto; text-align: center; cursor: pointer; font-weight: 700; } .photo_rights .btn::before { background: url(/images/image-upscaler/upgrade.svg); width: 28px; display: inline-block; margin-right: 6px; } .photo_rights .btn:hover { text-decoration: none; background: #f7aa3d; color: #fff; } .photo_rights .btn:active { background: #f56412; } .photo_upgrade { display: inline-block; margin-right: 20px; } .photo_upgrade > a { font-size: 16px; line-height: 18px; color: #ff6c19; font-weight: 700; cursor: pointer; } .photo_upgrade > a i { width: 28px; background: url(/images/image-upscaler/upgrade-s.svg); display: inline-block; margin-right: 6px; } .photo_upgrade > a:hover { text-decoration: none; color: #ff833e; } .photo_upgrade > a:active { color: #007ad9; } .photo .left_box .select_box > span, .photo .left_box > span { color: #333; font-size: 16px; line-height: 28px; } .photo_upgrade > a:hover i { background-position-y: -28px; } .photo_upgrade > a:active i { background-position-y: -56px; } .photo .left_box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .photo .left_box > img { margin-right: 38px; } .photo .left_box > span { margin-right: 6px; cursor: auto; } .photo .left_box > .line { width: 1px; height: 20px; background: #e6e6e6; margin-left: 16px; margin-right: 16px; } .photo .left_box .select_box { border: 1px solid #d1d1d1; height: 30px; padding-left: 12px; padding-right: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 6px; cursor: pointer; position: relative; } .photo .left_box .select_box div { position: absolute; top: 38px; left: -1px; width: 100%; border: 1px solid #e9e9e9; border-radius: 8px; -webkit-box-shadow: 0 10px 13px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 10px 13px 0 rgba(0, 0, 0, 0.06); background: #fff; z-index: 9999; text-align: center; display: none; overflow: hidden; } .photo .left_box .select_box > i { background: url(/images/image-upscaler/select-arrow.svg); width: 16px; height: 16px; margin-left: 10px; } .photo .left_box .select_box.active, .photo .left_box .select_box:hover { border-color: #635bee; background: rgba(64, 172, 255, 0.1); } .photo .left_box .select_box.active > span, .photo .left_box .select_box:hover > span { color: #635bee; } .photo .left_box .select_box.active > i, .photo .left_box .select_box:hover > i { background-position-y: -16px; } .photo .left_box .select_box.active > i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .photo .left_box .select_box.active > div { display: block; } .photo .left_box .select_box.active > div span { font-size: 16px; line-height: 28px; color: #333; padding: 6px 4px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; border-bottom: 1px solid #e9e9e9; } .photo .left_box .select_box.active > div span:last-child { border-bottom: none; } .photo .left_box .select_box.active > div span.active, .photo .left_box .select_box.active > div span:hover { background: rgba(64, 172, 255, 0.1); color: #635bee; } .new-preview, .old-preview { background-repeat: no-repeat; } @media screen and (max-width: 1200px) { .banner > div::after, .reviews_loop > div::after, .step ul img { display: none; } .step ul li { width: 205px; zoom: 0.8; } .modes_box ul { -ms-flex-pack: distribute; justify-content: space-around; } .modes_box ul > li:nth-child(3) { margin-top: 40px; } .photo_rights, .photo_rights_load { right: -30px; } .banner_box .batch-btn > a { margin-bottom: 10px; } #video_quality .container, #video_quality .quality_change { margin-bottom: 0; } #search-container input#q { width: 80%; } .main { margin-bottom: 50px; } .main .text .btn { margin-top: 20px; } .main > .flex_box { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .h2_mobile { display: block; } .h2_pc { display: none; } .main .text p { margin-top: 0; } .main .text p:nth-child(2) { margin-top: 20px; } .main .text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; text-align: center; max-width: 700px; } .main .img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-top: 30px; } .modes_box ul > li.active { margin-top: 40px; } } @media screen and (max-width: 630px) { .step, .step ul li { margin-top: 30px; } } @media screen and (max-width: 1180px) { .quality_change .low { padding-bottom: 0 !important; } .main div img { margin: auto !important; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .main div .left_side, .main div div { -webkit-box-ordinal-group: 3; order: 2; } .main div div { text-align: center; -ms-flex-order: 2; } .main div .left_side { -ms-flex-order: 2; padding-bottom: 0; } .main div div .seperate, .quality_change .high { padding-bottom: 0; } .main div .right_side { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .other_box ul { margin: 40px auto 0; max-width: 820px; -ms-flex-pack: distribute; justify-content: space-around; } .banner_box h1 + img { margin: 10px auto 0; } } @media screen and (max-width: 1100px) { #faq_section .faq_questions { padding: 17px 60px 22px 22px; } #faq_section .faq_questions::after { top: 24px; right: 20px; } #desktop_zoon { padding: 40px 0; } #desktop_zoon .info { margin: 12px auto 20px; } } @media screen and (max-width: 956px) { .photo { width: 96%; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .operate-menu { width: 100% !important; height: 113px; } .operate-menu ul { width: 100% !important; height: 100%; } .operate-menu li { float: left; width: 127px; } #right-operate-box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .menu { z-index: 1; } } @media screen and (max-width: 850px) { #reading_more h2 { font-size: 36px; line-height: 40px; } #reading_more .container > ul, #reading_more .container > ul:nth-child(2) { float: none; margin: 0 auto 20px; width: 96%; } .banner_box > ul { -ms-flex-pack: distribute; justify-content: space-around; } .banner_box > ul li:nth-child(1) { padding-bottom: 0; } .universally_box ul { padding: 0 30px; } .other_box ul li { max-width: 350px; } } @media screen and (max-width: 800px) { .photo { height: 502px; } .refinement_top { margin: 0 auto; } .refinement .scale_zoon { display: block; } .canvas { top: 80px; max-height: 350px; } } @media screen and (max-width: 768px) { .batch-btn { display: none !important; } } @media screen and (max-width: 730px) { .bg_crop .refinement_top .displayInlineBlock, .refinement_top .rotate { margin-top: 5px; } .refinement_top { max-width: 590px; } .chose-background-img-container { vertical-align: -11px; } } @media screen and (max-width: 630px) { h2 { font-size: 26px; line-height: 32px; } .universally_box ul { padding: 0; } .canvas_box .flex-box { min-width: 0; min-height: 0; } .refinement_top > span { display: block; margin-top: 5px; } .pensize-box { width: 220px !important; } .bg_crop .refinement_top .displayInlineBlock { margin-top: 5px; } .confirm-button-group div { width: 120px !important; } .canvas_box div .img_compare, .old-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .refinement_top { padding: 4px 10px; } .photo > ul > div.icon { left: 10px; } .banner_box .mode_box { -ms-flex-pack: distribute; justify-content: space-around; } } @media screen and (max-width: 590px) { .photo_rights, .photo_rights_load { right: unset; left: -70px; } } @media screen and (max-width: 450px) { .image-loading-box { width: 92%; padding: 0; } .feedback { width: 92%; } .feedback .feedback_container { width: 100%; padding-left: 16px; padding-right: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; } .loading-box { margin: 0 auto; } .photo { top: 0; bottom: 0; height: 470px; } #header .menu { z-index: 1 !important; } .canvas { max-height: 180px; top: 110px; } .refinement_bottom { padding: 0 5px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .refinement_bottom div { width: 160px; margin: 0; } .reloadImg { margin-left: 5px !important; } .warning-text { width: 96%; } .button-group > a { width: 100%; } .button-group > a:hover { text-decoration: none; } .image-loading-box .feed-back-box { display: block; position: static; width: 100%; margin: 10px auto 30px; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; } #all_supply h2, #desktop_zoon h2, #faq_section h2, #formats .left h2, #rocket .left h2, #steps h2, #video_types .right h2, .requirements h2, .showoff.iphone-data-recovery h2 { font-size: 32px; line-height: 40px; } #desktop_zoon .info { margin: 10px auto; } .canvas_box .right > .text { font-size: 12px; zoom: 0.6; } .image-loading-box .down-box .button-group div { min-width: auto; display: block; } } @media screen and (max-width: 375px) { .photo_rights, .photo_rights_load { right: unset; left: -100px; } } @media screen and (max-width: 360px) { .step ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #right-operate-box > .close { right: 2px; } } @media screen and (max-width: 320px) { .refinement_bottom div { width: 142px; } .refinement_bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .photo_rights, .photo_rights_load { width: 230px; } .photo_rights .btn { width: 100%; } } .Original-continer { margin-left: 100px; } .Output-continer { margin-right: 100px; } .icon-container { width: 14px !important; } .old-box { position: absolute; width: 90%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; max-width: 100%; max-height: 100%; } .new-select-box { position: absolute; width: 100px; height: 100px; background-color: #fff; opacity: 0.7; top: 0; left: 0; } .privew-box { position: absolute; width: 200px; height: 200px; background-color: #fff; } .old-preview { background-image: url(little-one.jpg); } .new-preview { background-image: url(big-one.jpg); } .new-select-box, .privew-box { display: none; } .event-box-left, .event-box-right { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .banner .mobile_box { margin-top: 20px; display: none; } .banner .mobile_box p { font-size: 16px; line-height: 24px; color: #fff; } .banner .mobile_box div { font-size: 0; max-width: 340px; width: 100%; -ms-flex-pack: distribute; justify-content: space-around; } .banner .mobile_box a { display: inline-block; background: url(/images/image-upscaler/download-on-google-play-and-app-store.svg); width: 192px; height: 63px; margin-top: 16px; } .banner .mobile_box a.AppStore { background-position-y: -63px; } @media screen and (max-width: 339px) { .banner .mobile_box div { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1200px) { .photo .contrast, .photo .phone_top, .photo .photo_bottom { display: none; } } @media (max-width: 1200px) { .photo, .photo > ul { max-width: 100%; } .phone_top .left > *, .phone_top .photo_toggle_phone .photo_login_box .name i, .phone_top .photo_toggle_phone > div > a *, .phone_top .photo_toggle_phone > div > span *, .phone_top .upload * { vertical-align: middle; } .photo, .photo .contrast > .img_box > i > i::after { bottom: 0; } .banner { padding-top: 30px; padding-bottom: 30px; } .banner_box h1 { font-size: 36px; line-height: 40px; } .banner_box .info { font-size: 16px !important; line-height: 24px; } .banner_box > div > span { margin-top: 30px; } .banner .mobile_box, .step { margin-top: 0; } .banner_box .mode_box div p { background: #1b1b22; } .step ul { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .step ul li { margin-top: 30px; } .main div div h2 { text-align: center; } .photo { margin: 0; width: 100%; height: 100%; top: 0; border-radius: 0; position: fixed; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .photo > div { background: #fff; } .phone_top { height: 48px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 14px !important; font-size: 0; width: 100% !important; -webkit-box-sizing: border-box; box-sizing: border-box; } .phone_top > div { display: inline-block; font-size: 0; line-height: 0; } .phone_top .photo_toggle_phone, .phone_top .upgrade, .phone_top i { width: 28px; height: 28px; background: url(/images/image-upscaler/icon-menu.svg); display: inline-block; } .phone_top i.close { margin-right: 6px; display: inline-block !important; } .phone_top .upload { font-size: 14px; color: #ff5f58; font-weight: 700; line-height: 28px; display: inline-block; } .phone_top .upload i { background-position-y: -28px; margin-right: 5px; } .phone_top .upgrade { width: 28px; height: 28px; display: inline-block; background-position-y: -56px; } .phone_top .photo_toggle_phone { background-position-y: -84px; margin-left: 8px; position: relative; z-index: 2; } .phone_top .photo_toggle_phone.active { background-position-y: -112px; } .phone_top .photo_toggle_phone.load { background-position-y: -364px; -webkit-animation: rotate 1.5s infinite linear; animation: rotate 1.5s infinite linear; } .phone_top .photo_toggle_phone.active::after { clear: both; content: ""; width: 26px; height: 26px; position: absolute; left: 0; top: 0; z-index: 1; } .phone_top .photo_toggle_phone.active > div { display: block; } .phone_top .photo_toggle_phone > div { position: absolute; top: 40px; right: -5px; border-radius: 10px; -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.31); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.31); background: #fff; min-width: 270px; padding: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; display: none; } .phone_top .photo_toggle_phone > div::before { clear: both; content: ""; width: 0; height: 0; border: 12px solid #fff; border-color: transparent transparent #fff; position: absolute; top: -20px; right: 11px; } .phone_top .photo_toggle_phone > div > a, .phone_top .photo_toggle_phone > div > span { display: block; font-size: 14px; color: #333; padding-top: 7px; padding-bottom: 7px; text-decoration: none; } .phone_top .photo_toggle_phone > div > span { padding-top: 10px; padding-bottom: 0; } .phone_top .photo_toggle_phone > div > a i, .phone_top .photo_toggle_phone > div > span i { margin-right: 8px; } .phone_top .photo_toggle_phone > div > .history i { background-position-y: -308px; } .phone_top .photo_toggle_phone > div > .logout { display: none; border-top: 1px solid #ebebeb; } .phone_top .photo_toggle_phone > div > .logout i { background-position-y: -336px; } .phone_top .photo_toggle_phone .photo_login_box { padding-bottom: 10px; } .phone_top .photo_toggle_phone .photo_login_box .name { text-decoration: none; display: block; } .phone_top .photo_toggle_phone .photo_login_box .name i { background-position-y: -252px; margin-right: 8px; } .phone_top .photo_toggle_phone .photo_login_box .name i.active { background-position-y: -280px; } .phone_top .photo_toggle_phone .photo_login_box .name i.pic { background-size: cover; border-radius: 50%; border: 2px solid #ff5f58; -webkit-box-sizing: border-box; box-sizing: border-box; background-position-y: center; } .phone_top .photo_toggle_phone .photo_login_box .name span { font-size: 14px; color: #333; vertical-align: middle; } .phone_top .photo_toggle_phone .photo_login_box .name.log_in span:nth-child(2) { display: inline-block; } .phone_top .photo_toggle_phone .photo_login_box .name span:nth-child(2), .phone_top .photo_toggle_phone .photo_login_box .name.log_in span:nth-child(3) { display: none; } .phone_top .photo_toggle_phone .photo_login_box .name span:nth-child(3) { display: inline-block; } .phone_top .photo_toggle_phone .photo_login_box .info { font-size: 12px; margin-top: 2px; line-height: 14px; display: none; } .phone_top .photo_toggle_phone .photo_login_box .info i { width: auto; height: auto; background: 0 0; font-style: normal; color: #ff5f58; } .phone_top .photo_toggle_phone .photo_login_box .info span { font-weight: 700; color: #ff5f58; } .phone_top .photo_toggle_phone .photo_login_box .info a { color: #ff5f58; text-decoration: underline; } #right-operate-box { display: none !important; } .photo .contrast { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; width: 100%; height: calc(100% - 48px); top: 48px; padding: 0; overflow: hidden; } .photo .contrast > img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: blur(35px); filter: blur(35px); } .photo .contrast > .img_box { width: 100%; height: 100%; position: relative; overflow: hidden; } .photo .contrast > .img_box img { position: absolute; pointer-events: none; top: 50%; left: 50%; } .photo .contrast > .img_box > .low_box { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; } .photo .contrast > .img_box > i { width: 1px; height: 100%; position: absolute; top: 0; left: 50%; cursor: ew-resize; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .photo .contrast > .img_box > i::before { clear: both; content: ""; width: 28px; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .photo .contrast > .img_box > i::after { clear: both; content: ""; background: url(/images/image-upscaler/icon-slide.svg); width: 29px; height: 29px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .photo .contrast > .img_box > i > i { width: 100%; height: 100%; } .photo .contrast > .img_box > i > i::after, .photo .contrast > .img_box > i > i::before { clear: both; content: ""; height: calc(50% - 14px); background: #fff; width: 100%; left: 0; position: absolute; } .photo .contrast > .img_box > i > i::before { top: 0; } .photo .contrast > .img_box .size_box { position: absolute; z-index: 1; width: 100%; top: 0; left: 0; } .photo .contrast > .img_box .size_box p { background: rgba(51, 51, 51, 0.45); height: 30px; line-height: 30px; font-size: 14px; color: #fff; text-align: center; width: 50%; } .photo .contrast > .img_box .size_box p span { color: #fff; } .photo .contrast > .img_box .size_box.effect_1 p, .photo .contrast > .img_box .size_box.effect_2 p { width: 100%; } .photo .contrast > .img_box .size_box.effect_1 p:nth-child(1), .photo .contrast > .img_box .size_box.effect_2 p:nth-child(2) { display: none; } .photo .photo_bottom { position: absolute; bottom: 22px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: 0 0; padding: 0; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .photo_bottom .phone_select .select_box, .photo_bottom .scale_zoon { height: 34px; background: rgba(255, 255, 255, 0.9); -webkit-box-sizing: border-box; -webkit-box-align: center; } .photo_bottom .scale_zoon { -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); border-radius: 40px; border: 0.5px solid #737373; width: 146px; -ms-flex-align: center; align-items: center; padding-left: 17px; padding-right: 17px; box-sizing: border-box; } .photo_bottom .scale_zoon span { font-size: 16px; font-weight: 700; color: #333; } .photo_bottom .scale_zoon span.active { color: #ff5f58; } .photo_bottom .phone_select { width: 150px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .photo_bottom .phone_select .select_box { width: 68px; border: 1px solid #737373; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); border-radius: 17px; box-sizing: border-box; -ms-flex-align: center; align-items: center; padding-right: 8px; position: relative; } .photo_bottom .phone_select .select_box > span { margin-right: 8px; margin-left: auto; font-size: 16px; color: #333; font-weight: 700; } .photo_bottom .phone_select .select_box > i { width: 16px; height: 16px; background: url(/images/image-upscaler/select-arrow.svg); } .photo_bottom .phone_select .select_box.active > i { background-position-y: -16px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .photo_bottom .phone_select .select_box.active > div { display: block; } .photo_bottom .phone_select .select_box > div { position: absolute; left: -1px; bottom: 0; padding-bottom: 34px; border-radius: 10px 10px 17px 17px; background: #f9f5f7; width: 68px; z-index: -1; text-align: center; display: none; } .photo_bottom .phone_select .select_box > div span { display: block; font-size: 14px; line-height: 18px; color: #333; padding: 8px 4px; border-bottom: 1px dashed #d0d0d0; } .photo_bottom .phone_select .select_box > div span:last-child { border: none; } .photo_bottom .phone_select .select_box > div span.active { color: #247dff; } .photo_bottom .phone_select .select_box.scale_num_box span { font-size: 16px; font-weight: 700; } .photo_bottom .phone_select .select_box.select_mode_box > span { font-size: 0; display: inline-block; background: url(/images/image-upscaler/model.svg); width: 28px; height: 28px; margin-right: 4px; } .photo_bottom i { width: 28px; height: 28px; background: url(/images/image-upscaler/icon-menu.svg); display: inline-block; } .photo_bottom .icon_effect_box { width: 90px; height: 34px; border-radius: 40px; background: rgba(0, 0, 0, 0.3); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 26px; margin-right: 26px; } .photo_bottom .icon_effect_box.one { width: 52px; margin-left: 45px; margin-right: 45px; } .photo_bottom .icon_effect_box i { margin-left: 5px; margin-right: 5px; } .photo_bottom .icon_effect_1 { background-position-y: -392px; } .photo_bottom .icon_effect_2 { background-position-y: -140px; display: none; } .photo_bottom .icon_effect_3 { background-position-y: -448px; display: none; } .photo_bottom .icon_effect_3.active { background-position-y: -476px; } .photo_bottom .download_box { display: inline-block; position: relative; height: 56px; } .photo_bottom .download_box .text { text-shadow: 0 0 2px rgba(0, 0, 0, 0.54); font-size: 14px; color: #fff; line-height: 18px; position: absolute; right: 0; bottom: -20px; white-space: nowrap; } .photo_bottom i.download { width: 56px; height: 56px; background: url(/images/image-upscaler/icon-folder.svg); } .image-loading-box { padding-left: 16px; padding-right: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; } .show-message-box .text { width: 100%; } } @media screen and (max-width: 1024px) { .reviews_container .item { max-width: 512px; } } @media screen and (max-width: 776px) { .others { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 768px) { .reviews_container .item { max-width: 500px; } .reviews_loop .reviews_container { margin-top: 30px; } .reviews_container .reviews_prev:hover { background-position-y: -132px; } .reviews_container .reviews_next:hover { background-position-y: 0; } } @media (max-width: 630px) { .button-group * { width: 100%; min-width: auto; } .button-group div { font-size: 14px; } .banner_desktop { padding-top: 20px; padding-bottom: 50px; } .banner { padding-top: 12px; padding-bottom: 70px; background: url(/images/image-upscaler/banner-bg.png) center 56px no-repeat; } .banner_box .upload_box { margin-top: 26px; } .banner_box .mode_box div:hover { border-color: transparent; } .banner_box .mode_box div:hover p { background: #000; } .banner_box > h1 { font-size: 30px !important; line-height: 32px !important; } .banner_box .info { margin-top: 16px; } .banner_box .upload_box { border: none !important; background: 0 0 !important; -webkit-box-shadow: initial !important; box-shadow: initial !important; padding-top: 0; padding-bottom: 0; } .banner_box .mode_box div p { font-size: 16px; line-height: 24px; background: #000; } .banner_box .mode_box div.active p::before { width: 16px; height: 16px; background-size: cover; vertical-align: -2px; margin-right: 4px; } .banner_box .upload_box .info { display: none; } .banner_box .upload_box .batch_btn { margin-top: 12px; } .banner_box .mode_box { max-width: 340px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .banner_box .mode_box div { width: 160px; } .history_img i.bg { width: 80px; height: 58px; margin: 0 8px; } .function_bg { margin-top: 0 !important; } } @media screen and (max-width: 580px) { .why > div > div { max-width: 200px; } } @media screen and (max-width: 540px) { .step_box > div, .step_box > div div { border-radius: 50% 50% 16px 16px; } .step_box > div { max-width: 140px; } .step_box > div div { padding: 30px 12px 14px; } .reviews_loop { margin-top: 70px; } .step_box > div div .title { font-size: 18px; margin-top: 10px; } } @media screen and (max-width: 480px) { .function > div { padding: 0; } .function_pc { display: none; } .function_img { overflow: hidden; display: block; } .function_mobile { display: block; padding: 20px 0; } .reviews_box { -webkit-box-sizing: border-box; box-sizing: border-box; } .banner_box .upload_box .upload { height: 56px; line-height: 56px; font-size: 24px; } h2 { font-size: 24px !important; line-height: 32px !important; } .main { margin-top: 36px; } .main .img { margin-top: 32px; } .main div .img { padding-bottom: 0; } .main .text p { margin-top: 24px; } .main div div { padding-bottom: 20px; } .main .have_btn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .main .have_btn p:first-of-type { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .main .have_btn p:last-of-type { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .main .text .btn { min-width: 300px; height: 56px; line-height: 56px; font-size: 24px; } .step { margin-top: 36px; } .step_box > div { max-width: 104px; padding: 1px; } .step_box > div, .step_box > div div { border-radius: 50% 50% 16px 16px; } .step_box > div div { padding: 24px 12px 14px; -webkit-box-shadow: inset 2px 2px 12px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 12px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 2px 2px 12px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 12px 0 rgba(255, 255, 255, 0.25); } .step_box > div div .title { font-size: 14px; line-height: 16px; margin-top: 8px; } .step_box > div div .info { font-size: 12px; line-height: 12px; } .step_box > div div img { max-width: 32px; width: 100%; } .reviews_loop { margin: 56px auto; } .reviews_container .item { background: #1b1b22; } .why { margin-top: 56px; } .why img { max-width: 82px; width: 100%; } .why p { font-size: 14px; margin-top: 0; } .why > div { margin-top: 32px; } .why > div > div { max-width: 200px; width: 100%; margin-bottom: 25px; margin-top: 0; } .others { margin-top: 30px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .others > a { max-width: calc(50% - 8px); padding: 8px; border-radius: 5px; margin: 8px 0; } .others > a span { font-size: 12px; line-height: 14px; margin-top: 8px; } .others h2 { margin-bottom: 14px; } .product > div { background: 0 0; padding: 0 20px; } .product { padding: 48px 0 56px; margin-top: 0; } .product .upscale_box .upscale { max-width: 300px; font-size: 24px; line-height: 56px; height: 56px; } .product .btn_box { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product .btn_box a { min-width: 200px; height: 50px; margin: 10px 6px !important; } .product .btn_box a > p { height: 48px; } .product .btn_box a p > i { width: 20px; height: 20px; background-size: cover; } .product .btn_box a.googlePlay p > i { background-position-y: -20px; } .product .btn_box a span.down_text > span.down_bottom { line-height: 20px; } .product .mobile_text { font-size: 14px; line-height: 20px; margin-top: 24px; } .reviews > .center { overflow: visible; position: relative; } .arrow_pc { display: none; } .arrow_mobile { position: absolute; width: 31px; height: 31px; background: url(/images/product/review-arrow.svg) no-repeat; background-size: cover; } .arrow_mobile.arrow_left { left: 8px; top: 50%; } .arrow_mobile.arrow_left:hover { background-position-y: -62px; } .arrow_mobile.arrow_left.unbind { background-position-y: -31px; cursor: no-drop; } .arrow_mobile.arrow_right { right: 8px; top: 50%; background-position-y: -93px; } .arrow_mobile.arrow_right.unbind { background-position-y: -124px; cursor: no-drop; } .arrow_mobile.arrow_right:hover { background-position-y: -155px; } .reviews_container .reviews_prev, .reviews_container .reviews_prev:hover { background-position-y: -93px; } .reviews_loop .center { padding: 0 48px; } .reviews_loop .reviews_container { position: relative; } .reviews_container .item { padding: 32px 20px; } .reviews_container .item > p { line-height: 28px; } .reviews_container .item .author { margin-top: 10px; } .reviews_container .arrow { position: absolute; width: 31px; height: 31px; background-size: cover; z-index: 5; margin-top: 0; } .reviews_loop .reviews_next { left: -58px; top: 50%; } .reviews_loop .reviews_prev { right: -58px; top: 50%; } } @media screen and (max-width: 440px) { .why > div > div { max-width: 170px; } .history_box .text { font-size: 12px; } .history_box .photoHistory { font-size: 12px; margin-left: 7px; } .history_img i.bg { width: 66px; margin: 0 5px; } } @media screen and (max-width: 380px) { .why > div > div { max-width: 124px; } } @media screen and (max-width: 370px) { .reviews_loop .reviews_next { left: -58px; top: 50%; } .step_box > div { margin: 10px 0; } .step.center { padding: 0 10px; } .step_box > div div { padding: 24px 10px; } } @media (max-width: 360px) { .banner_box .mode_box { -ms-flex-pack: distribute; justify-content: space-around; } .banner_box .mode_box div { zoom: 0.9; } .photo_bottom .icon_effect_box { margin-left: 6px; margin-right: 6px; } .photo_bottom .icon_effect_box.one { margin-left: 25px; margin-right: 25px; } .button-group div { min-width: 260px; } .history_box.active { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .history_box > div:nth-child(1) { width: 100%; width: 272px; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .history_box > .photoHistory { margin-left: 0; display: block; } } @media (max-width: 320px) { .banner_box .mode_box div { zoom: 0.8; } }