diff --git "a/css.css" "b/css.css" new file mode 100644--- /dev/null +++ "b/css.css" @@ -0,0 +1,12829 @@ +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: 2px dashed #fff; + 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: 780px; + width: 100%; + -webkit-box-shadow: 0 3px 27px rgba(63, 101, 144, 0.18); + box-shadow: 0 3px 27px rgba(63, 101, 144, 0.18); + margin: 20px auto 47px; + overflow: hidden; + padding-bottom: 48px; + border: 2px dashed #fff; +} +.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: 40px; + -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: 60px 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: 700px; + margin: 0 auto; + padding-top: 66px; +} +.loading-box img { + display: block; + margin: 0 auto !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: 700px; + min-height: auto; + max-height: 92%; + height: auto; + overflow: auto; + border-radius: 18px; + background: #fff; + -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; + height: 100%; + padding-bottom: 40px; + min-height: 350px; + 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 { + margin: 20px auto 0; + width: 85%; + 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; + min-width: 290px; + 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: 70px 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; + } +}