@charset"utf-8"; .product-banner { padding-top: 3rem; min-height: 520px; background: url("../img/product-banner.webp") top center no-repeat; background-size: cover; text-align: center; color: #FFF } .product-banner h1 { font-weight: 500; line-height: 1.2; font-size: 2.25rem; margin-bottom: 1.5rem } .product-banner .desc { margin-bottom: 1.5rem; font-weight: 500; line-height: 1.3; font-size: 1rem } .product-banner .btn-bannaer { margin-bottom: 1rem } .btn-bannaer .btn, .product-download .product-btn .btn-down { color: #fff; text-transform: uppercase; padding: 0.71875rem 1.4375rem; margin: 0.5rem } .btn-bannaer .buy { color: #fff; border-color: #f63f59; background: url("../img/cart.svg") 92% center/16px auto no-repeat; padding-right: 40px } .btn-bannaer .windows { color: #fff; border-color: #f63f59; background: url("../img/down-win-t-icon.svg") #f63f59 92% center/16px auto no-repeat; padding-right: 40px } .btn-bannaer .mac { color: #fff; border-color: #f63f59; background: url("../img/down-mac-t-icon.png.webp") #f63f59 92% center/16px auto no-repeat; padding-right: 40px } .btn-bannaer .btn:active, .btn-bannaer .btn:hover { background-color: #f74e66; border-color: #f74e66; color: #fff } .sys-mac, .sys-win { margin-top: 24px; display: none } .sys-tem.active { display: block } .system-select { margin-bottom: 20px } .product-banner a { color: #FFF; min-width: 178px; min-height: 48px } .product-banner .btn-more { padding-right: 20px; color: #FFF; background: url("../img/icon-more.svg") right center no-repeat } .system-select .icon-system { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: top; text-indent: -999999px } .system-select .icon-windows { background: url("../img/windows.svg") 0 0 no-repeat; background-size: 100% } .system-select .icon-mac { background: url("../img/apple.svg") 0 0 no-repeat; background-size: 100% } .system-select .active .icon-windows, .system-select a:hover .icon-windows { background: url("../img/windows-active.svg") 0 0 no-repeat } .system-select .active .icon-mac, .system-select a:hover .icon-mac { background: url("../img/apple-active.svg") 0 0 no-repeat } .step-main { background-color: #044885; color: #fff; padding-top: 4.5rem; padding-bottom: 3rem; text-align: center } .step-main .img-fluid { margin-bottom: 26px } .step-main .desc { margin-top: 1rem; margin-bottom: 1rem } .step-pro { position: relative; margin-top: 3rem } .step-desc { margin-top: 1rem; margin-bottom: 1rem } .step-num { border: 2px solid #00a2ea; width: 32px; height: 32px; line-height: 30px; border-radius: 40px; box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.1); font-size: 1.5rem; font-weight: 500; color: #00a2ea; display: inline-block; background-color: #fff } .step-pro:after { position: absolute; display: block; content: ""; height: 0; border-top: 1px dashed #00a2ea; width: 68%; left: 16%; bottom: 72px } .step-btn { margin-top: 1.5rem; text-align: center } .product-desc { padding-bottom: 3rem; font-weight: normal } .product-desc h3 { color: #000; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.2; font-size: 2rem; padding-left: 12px; padding-right: 12px } .product-desc .items { padding: 80px 0 } .product-desc .items img { max-width: 100% } .product-desc .items p { font-size: 1.125rem; margin-top: 1rem; padding-left: 12px; padding-right: 12px } .product-desc dl { padding-left: 12px; padding-right: 12px } .product-desc dl dd { margin-bottom: 1rem } .toolkit-main { height: 100%; background: url("../img/bg-1.webp") no-repeat center top; background-size: cover; padding-top: 3rem; padding-bottom: 3rem; color: #FFF } .toolkit-main .title { text-align: center; padding-bottom: 1.5rem; padding-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; font-size: 2.25rem } .toolkit-main .no-gutters { margin-right: 0; margin-left: 0 } .toolkit-main .item { display: table; margin: 0.5rem 0; padding: 1.4rem 0.5rem; align-items: center; padding-left: 88px; font-size: 1.4rem } .toolkit-main .item h6 { font-size: 1.3rem } .toolkit-main .data-recovery { background: url("../img/icon-recover.svg") left center no-repeat } .toolkit-main .system-repair { background: url("../img/icon-Repair.svg") left center no-repeat } .toolkit-main .phone-manager { background: url("../img/icon-Transfer.svg") left center no-repeat } .toolkit-main .phone-pransfer { background: url("../img/icon-Swtich.svg") left center no-repeat } .toolkit-main .whatsapp-transfer { background: url("../img/icon-Restore-Social-App.svg") left center no-repeat } .toolkit-main .screen-unlock { background: url("../img/icon-Unlock.svg") left center no-repeat } .toolkit-main .item-desc { margin-left: 1rem } .toolkit-product { background-color: #FFF; text-align: center; padding: 3rem; color: #495057 } .toolkit-product h4 { color: #00a2ea; margin-top: 1rem; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; font-size: 1.5rem } .toolkit-product .btn-product { margin-bottom: 1rem } .toolkit-product .btn { margin: 0.25rem 0.16rem; text-transform: uppercase; padding: 1rem 2.5rem } .toolkit-product .link { margin-top: 0.5rem } .toolkit-product .link a { margin-right: 0.5rem; margin-left: 0.5rem } .system-support { padding-bottom: 6rem; padding-top: 6rem; background-color: #26324b; text-align: center } .system-support .title { font-size: 2.25rem; font-weight: 300; line-height: 1.2; color: #FFF } .system-compatible { display: inline-block; background: url("../img/yes.svg") #00AEE5 8px center no-repeat; border-radius: 1.5625rem; padding: 0.5rem 1rem 0.5rem 2.2rem; margin-bottom: 1.5rem; margin-top: 1.5rem; color: #FFF } .system-support .table td, .system-support .table th { vertical-align: middle; padding-left: 1.5rem; padding-right: 1.5rem } .system-support .table img { margin-right: 1rem } .system-support .btn-more { font-size: 0.875rem; color: #00aee6; font-weight: 700; margin-top: 1.5rem; display: inline-block } .system-support .btn-more i { height: 1rem } .product-article { color: #fff; padding-bottom: 2rem; padding-top: 2rem; background-color: #044886 } .product-article .list { list-style: outside disc; padding-left: 20px; margin-top: 1.5rem; margin-bottom: 1rem } .product-article .list li { flex: 0 0 50%; max-width: 50%; padding-bottom: 0.5rem; padding-top: 0.5rem } .product-article .list li a { color: #FFF } .product-download { background: url("../img/bg-product-down.webp") left top no-repeat; background-size: cover; color: #FFF; padding-top: 2rem; padding-bottom: 2rem; text-align: center } .product-download .title { margin-bottom: 1.5rem; font-size: 2.5rem; font-weight: 700 } .product-download .btn-win, .toolkit-main .btn-win { color: #fff; background: url("../img/windows.svg") #00a2ea 90% 50% no-repeat; background-size: 28px; margin: 0.5rem; padding-right: 4rem; border-color: #00a2ea } .product-download .btn-win:active, .product-download .btn-win:hover, .toolkit-main .btn-win:active, .toolkit-main .btn-win:hover { background-color: #007fb7; border-color: #0076aa; color: #FFF } .product-download .btn-apple, .toolkit-main .btn-apple { background: url("../img/apple.svg") 90% 50% no-repeat; background-size: 24px; margin: 0.5rem; padding-right: 4rem; border-color: #00a2ea; color: #FFF } .toolkit-main .btn-apple { background: url("../img/apple-blue.svg") 90% 46% no-repeat; background-size: 24px; color: #0076aa } .product-download .btn-apple:active, .product-download .btn-apple:hover, .toolkit-main .btn-apple:active, .toolkit-main .btn-apple:hover { background-color: #007fb7; border-color: #0076aa; color: #FFF } .toolkit-main .btn-apple:active, .toolkit-main .btn-apple:hover { background: url("../img/apple.svg") #007fb7 90% 46% no-repeat; background-size: 24px } .toolkit-main .more { color: #00a2ea } .toolkit-main .more:active, .toolkit-main .more:hover { color: #006d9e } .product-download .secure { display: inline-block; margin-top: 1rem; background: url("../img/secure.svg") left center no-repeat; padding-left: 30px; height: 34px; line-height: 34px } .product-download .secure img { margin-right: 0.5rem; vertical-align: middle } .product-reviews { padding-top: 3rem; padding-bottom: 3rem; text-align: center } .product-reviews-block { padding: 1rem 1.5rem } .product-reviews .container { padding-bottom: 1.5rem; padding-top: 1.5rem } .product-reviews-item { padding: 0 1rem 1rem; text-align: left } .product-reviews-item .box-shadow { padding: 3rem; -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .12); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .12) } .product-reviews-item h4 { font-weight: 400 } .product-reviews-item p { font-weight: 100 } .product-reviews-user { height: 50px } .product-reviews-item img { display: inline-block; max-width: 100%; vertical-align: middle; width: 60px } .text-min-box { min-height: 175px; overflow: hidden; margin-bottom: 20px } .product-reviews-item .product-reviews-rating { display: inline-block; margin-left: 1rem } .product-reviews-name { margin-left: 0.25rem } .product-reviews-item .rating-sml .rating-stars i { height: 22px } .product-reviews .btn-review { margin-top: 20px; color: rgb(246, 63, 89); border-color: rgb(246, 63, 89) } .product-reviews .btn-review:active, .product-reviews .btn-review:hover { background-color: rgb(246, 63, 89); color: #FFF } @media (max-width: 991px) { .product-article .list li { flex: 0 0 100%; max-width: 100% } } .screenshots { background: url("../img/screenshots/bg.webp") left top no-repeat; background-size: cover; padding: 3rem 0 5rem; text-align: center } .screenshots .title { font-size: 1.7rem } .screenshots .slider-tiem { padding-top: 40px } .screenshots .slider img { border: 0; border-radius: 0; margin-left: auto; margin-right: auto; max-width: 100% } @media(min-width:769px) { .screenshots .slider img { box-shadow: 0 0 40px rgba(0, 0, 0, .4) } } .screenshots .slider p { margin-top: 20px } .screenshots .slider a { display: inline-block; margin-top: 30px; border-radius: 20px; background: #4c75ff; text-align: center; padding: 8px 14px; color: #fff; cursor: pointer; outline: none } .screenshots .slick-dots li button { background: #a6a7a7 } .screenshots .slider-btn li button:hover::before { background: #8b8d8d } .screenshots .slider-btn li.active::before { background: #454552 } .screenshots .slick-next, .screenshots .slick-prev { top: 40% } .screenshots .slick-next::before, .screenshots .slick-prev::before { width: 64px; height: 64px; border: none } .screenshots .slick-next::before { content: ''; background: url("../img/right-slide-blue.svg") left top no-repeat } .screenshots .slick-prev::before { content: ''; background: url("../img/left-slide-blue.svg") left top no-repeat } .tech-specs { padding: 3rem 0; background-color: #f8f9fa } .tech-specs .title { margin-bottom: 3rem; font-size: 2rem; color: #00a2ea } .tech-specs dl dt { font-size: 1rem; margin-bottom: 0.5rem } .tech-specs dl dd { font-size: 0.875rem; color: #495057 } .install-main { padding: 80px 25% } .install-main h1 { font-size: 38px; text-align: center; margin-bottom: 15px } .install-main h2 { font-size: 26px; text-align: center; margin-bottom: 15px; color: #333; line-height: 1.5 } .install-main .link-about { text-align: center; font-size: 18px } .install-main .link-about a { display: inline-block; border-left: 1px solid #999; padding: 0 15px } .install-main .link-about a:first-child { border-left: none } .install-main .video-box { text-align: center; margin-top: 20px; width: 780px; margin-left: auto; margin-right: auto } @media (max-width: 768px) { .product-reviews-block { padding: 0 } .product-reviews-item .box-shadow { padding: 1.5rem 1rem } .install-main { padding: 80px 10px } .install-main h1 { font-size: 30px } .install-main h2 { font-size: 20px } .install-main .link-about a { font-size: 14px; padding: 0 10px } .install-main .video-box { width: auto } .install-main .video-box img { max-width: 100% } .toolkit-main .item { margin-left: 0 } } .product-guide .banner-section { background: url("../img/guide/notebook-bg.webp") no-repeat; color: #FFF; min-height: 500px; text-align: center; padding: 80px 0 50px; background-size: cover; font-size: 50px } .product-guide .banner-section h1 { color: #FFF; text-align: center; font-size: calc(18px + 2vw); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.54); font-weight: bold; line-height: 1.2em; margin-bottom: 30px; font-weight: 600; font-size: 50px } .product-guide .banner-section .des { font-size: calc(14px + 0.5vw); line-height: 1.4em; margin: 0 auto 62px; max-width: 960px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) } .product-guide .banner-section .flow-row .item { width: 33.33%; float: left; padding-right: 10px; padding-left: 10px } .product-guide .banner-section .flow-row .item a { position: relative; display: inline-block; background-color: #6ee1d4; color: #2b3640; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.33); font-weight: bold; line-height: 1.2em; padding: 26px 70px 32px 115px; text-align: left; display: block; transition: all 0.3s; text-decoration: none; font-size: 24px; margin: 0 auto; max-width: 100% } .product-guide .banner-section .flow-row .item a span { background: url("../img/guide/learning-center-banner-icon-sprite.webp"); background-repeat: no-repeat; position: absolute; left: 33px; top: 15px; width: 80px; height: 80px; transition: all 0.3s } .product-guide .banner-section .flow-row .item a span.lc-icon-video { background-position: 0 0 } .product-guide .banner-section .flow-row .item a span.lc-icon-tips { background-position: 0 -170px } .product-guide .banner-section .flow-row .item a span.lc-icon-create { background-position: 0 -340px } .product-guide .banner-section .flow-row .item a:hover { background-color: #0e8b7d; color: #fff } .product-guide .banner-section .flow-row .item a:hover .lc-icon-video { background-position: 0 -85px } .product-guide .banner-section .flow-row .item a:hover .lc-icon-tips { background-position: 0 -255px } .product-guide .banner-section .flow-row .item a:hover .lc-icon-create { background-position: 0 -425px } .product-guide h2 { font-size: 36px; line-height: 1.2em; font-weight: 400; padding: 15px 0; text-align: center } .product-guide .info-section .container { padding: 70px 0 0 } .product-guide .slog { font-size: 18px; font-weight: 300 } .product-changeTab { border-bottom: 4px solid #ededed; text-align: center; white-space: nowrap; padding: 0; margin-top: 40px; margin-bottom: 20px } .product-changeTab li { display: inline-block; white-space: nowrap } .product-changeTab li a { padding: 0 5px 10px; display: inline-block; position: relative; padding: 0 80px 10px 90px } .product-changeTab li a:hover { text-decoration: none } .product-changeTab li a:after { content: ''; display: inline-block; width: 100%; height: 4px; border-bottom: 4px solid #00a2ea; position: absolute; bottom: -4px; left: 0; opacity: 0; transition: all 0.3s } .product-changeTab li.active a:after, .product-changeTab li:hover a:after { opacity: 1 } .proselect_box { display: none } .proselect_box.active { display: block } .proselect_box a { color: #353132 } .proselect_box .curr a, .proselect_box .proselect__item:hover a, .proselect_box a:hover { color: #fff; text-decoration: none } .proselect_box .proselect__item { float: left; text-align: center; overflow: hidden; width: 19.2%; height: 260px; margin: 10px 0 0 1%; border-radius: 4px; background: #fff; box-shadow: 0 0 10px #e5e5e5; position: relative } .proselect_box .proselect__item .proselect__icon { display: inline-block; width: 64px; height: 64px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s } .proselect_box .proselect__item:after { display: block; content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 4px; background: #00a2ea; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s } .proselect_box .proselect__item:first-child { margin-left: 0 } .proselect_box .proselect__item_h2 { height: 530px } .proselect_box .proselect__item_2 { width: 39.4% } .proselect_box .proselect__item .proselect__box { display: table; width: 100%; height: 100%; position: relative; z-index: 3 } .proselect_box .proselect__item .proselect__info { display: table-cell; vertical-align: middle; line-height: 1.2em } .proselect_box .proselect__item .proselect__info p { color: #999; padding: 0 20px; min-height: 36px } .proselect_box .proselect__item .proselect__info p span { display: none; padding-top: 10px } .proselect_box .proselect__item .proselect__info p span:hover { text-decoration: underline } .proselect_box .proselect__item .proselect__pic { overflow: hidden; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 100px } .proselect_box .proselect__item .proselect__name { font-size: 16px; line-height: 1.2em; color: #353132; padding: 5px 5px 10px } .proselect_box .proselect__btnBox { opacity: 0; text-align: center; width: 180px; min-height: 90px; padding-top: 10px; margin: 0 auto; -webkit-transform: translate(0, 30px); -moz-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition-property: -webkit-transform, -webkit-opacity; -moz-transition-property: -moz-transform, -moz-opacity; transition-property: transform, opacity; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s } .proselect_box .proselect__btnBox a { display: block; margin: 5px; padding: 8px 20px; border-radius: 2px; background: #fff; color: #0960b0 !important; font-size: 16px; line-height: 27px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-align: center; text-decoration: none !important } .proselect_box .proselect__btnBox a:before { line-height: 27px; padding: 0 0 0 10px; float: right; width: 27px; height: 27px; background-size: contain } .proselect_box .proselect__btnBox a.proselect__btn_win:before { content: ''; background-image: url("../img/guide/icons8-windows8.svg") } .proselect_box .proselect__btnBox a.proselect__btn_mac:before { content: ''; background-image: url("../img/guide/icons8-apple-logo-filled.svg") } .proselect_box .proselect__btnBox a:hover.proselect__btn_win:before { content: ''; background-image: url("../img/guide/icons8-windows8-white.svg") } .proselect_box .proselect__btnBox a:hover.proselect__btn_mac:before { content: ''; background-image: url("../img/guide/icons8-apple-logo-filled-white.svg") } .proselect_box .proselect__btnBox a:hover { text-decoration: none; background: #044887; color: #fff !important } .proselect_box .proselect__btnBox a:hover:before { color: #fff !important } .proselect_box .proselect__item_2 .proselect__btnBox { width: auto } .proselect_box .proselect__item_2 .proselect__btnBox a { display: inline-block } .proselect_box .proselect__item_h2 .proselect__btnBox { padding-top: 60px } .proselect_box .proselect__item.curr:after { opacity: 1 } .proselect_box .proselect__item.curr .proselect__info, .proselect_box .proselect__item.curr .proselect__name { color: #fff } .proselect_box .proselect__item.curr .proselect__info { -webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0) } .proselect_box .proselect__item.curr .proselect__info p { color: #fff } .proselect_box .proselect__item.curr .proselect__info p span { display: block } .proselect_box .proselect__item.curr .proselect__pic { margin-bottom: 0 } .proselect_box .proselect__item.curr .proselect__btnBox { display: block; opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0) } .proselect_box .proselect__item:hover:after { opacity: 1 } .proselect_box .proselect__item:hover .proselect__info, .proselect_box .proselect__item:hover .proselect__name { color: #fff } .proselect_box .proselect__item:hover .proselect__info p { color: #fff } .proselect_box .proselect__item:hover .proselect__info p span { display: block } .proselect_box .proselect__item:hover .proselect__pic { margin-bottom: 0 } .proselect_box .proselect__item:first-child:hover .proselect__pic { display: block } .proselect_box .proselect__item:hover .proselect__btnBox:not(.proselect__item_h2 .proselect__btnBox) { opacity: 0 } .proselect_box .proselect__item:first-child:hover .proselect__btnBox { -webkit-transform: translateY(-20px); transform: translateY(-20px) } .swipper-screen { margin-top: 50px } .swipper-screen ul { padding-left: 0 } .swipper-screen ul li { float: left; height: 100%; min-height: 1px } #pdfelem-bgnrs .slide-controls { text-align: center; list-style: none; padding: 20px 0 0; margin: 0 } #pdfelem-bgnrs .slide-controls li { padding: 0 5px; margin: 0; display: inline-block } #pdfelem-bgnrs .slide-controls li.slick-active button { background: #435bfd } #pdfelem-bgnrs .slide-controls li button { display: inline-block; background: #979797; width: 40px; height: 2px; cursor: pointer; overflow: hidden; text-indent: -99999px; border-radius: 20px; outline: none; border: none } .pdfelem-bgnrs__slider-item { margin: 5% 10px; max-width: 320px; padding: 0; box-shadow: 0 0 15px #ccc; box-shadow: 0 0 15px rgba(0, 0, 0, .2); display: inline-block; height: 100% } .pdfelem-bgnrs__slider-pic { position: relative; z-index: 1; height: 200px; overflow: hidden } .pdfelem-bgnrs__slider-pic:after { display: block; content: ''; position: absolute; z-index: 2; top: -5px; right: -23px; width: 0; height: 0; border-left: solid 36px transparent; border-right: solid 36px transparent; border-bottom: solid 36px #435bfd; transform: rotate(45deg) } .pdfelem-bgnrs__slider-pic .top { display: block; position: absolute; z-index: 3; color: #fff; top: -7px; right: -9px; width: 40px; height: 40px; transform: rotate(45deg); font-size: 14px; line-height: 52px } .info-section .pdfelem-bgnrs__slider-pic a {} .info-section .pdfelem-bgnrs__slider-pic a img { vertical-align: middle; max-width: 100% } .info-section .pdfelem-bgnrs__slider-info { font-size: 18px; text-align: left; padding: 20px 20px 10px; min-height: 300px } .info-section .pdfelem-bgnrs__slider-title { padding: 0; font-weight: 500; font-size: 22px; line-height: 1.2em; color: #2c3db0; margin: 0; padding-bottom: 10px } .info-section .pdfelem-bgnrs__slider-info ol { margin: 0; padding: 0; list-style: outside decimal; padding-left: 15px } .info-section .pdfelem-bgnrs__slider-info ol li { margin-left: 18px; padding: 8px 0 0; position: relative; z-index: 1; font-size: 16px; line-height: 1.4em } .info-section .pdfelem-bgnrs__slider-info ol li:before { display: block; content: ''; position: absolute; z-index: 3; top: 12px; left: -31px; width: 6px; height: 6px; background: #979797; border-radius: 100px } .info-section .pdfelem-bgnrs__slider-info ol li:after { display: block; content: ''; position: absolute; z-index: 2; top: 0; left: -29px; width: 0; height: 100%; border-left: dashed 1px #979797 } .info-section .pdfelem-bgnrs__slider-info ol li:first-child { padding-top: 0 } .pdfelem-bgnrs__slider-btnBox { padding: 15px 0 0; margin-bottom: 40px } .info-section .pdfelem-bgnrs__slider-info .pdfelem-bgnrs__slider-btn_border { padding: 5px 15px; display: inline-block; vertical-align: middle; padding: 10px 30px; border: solid 2px #006dff; border-radius: 4px; color: #006dff !important; text-decoration: none !important; font-size: 18px; line-height: 23px; font-weight: 600; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-align: center } .info-section .pdfelem-bgnrs__slider-info .pdfelem-bgnrs__slider-btn_border:hover { text-decoration: none; background: #005dd9; color: #fff !important; border: solid 2px #005dd9 } .info-section .pdfelem-bgnrs__slider-info h3 a { text-decoration: none; transition: all 0.3s; color: #0071d1; outline: none; font-weight: 400 } .videoTabs-outter .item-video { margin: 0 auto 50px; text-align: center; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; display: none } .videoTabs-outter .item-video.active { display: block } .videoTabs-outter .item-video iframe { position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100% } .tabs-control { padding-left: 0 } .tabs-control li { list-style: none; width: 100%; position: relative; min-height: 80px; background: #fdf5f5; transition: all 0.3s; display: flex; align-items: center; min-height: 150px; float: left; width: 25% } .tabs-control li .div-tab { display: inline-block; width: 100%; height: 100%; padding: 20px; display: flex; justify-content: left; align-items: center; color: #000; font-size: 25px; display: flex; justify-content: center; align-items: center } .tabs-control li a { text-decoration: none } .tabs-control li.active a { color: #2593e5 } .tabs-control li.active, .tabs-control li:hover { box-shadow: 0 10px 29px -8px #000; z-index: 10 } .sprite { background: url("../img/guide/product-line-video-tabs.webp") no-repeat top left; width: 64px; height: 64px; display: block; flex: 0 0 64px } .sprite.video-tab-1-pdf-blue { background-position: -74px -0px } .tabs-control li.active-tab .sprite.video-tab-1-pdf-blue { background-position: -5px -0px } .sprite.video-tab-2-pdf-blue { background-position: -74px -69px } .tabs-control li.active-tab .sprite.video-tab-2-pdf-blue { background-position: -5px -69px } .sprite.video-tab-3-pdf-blue { background-position: -74px -138px } .tabs-control li.active-tab .sprite.video-tab-3-pdf-blue { background-position: -5px -138px } .sprite.video-tab-4-pdf-blue { background-position: -74px -207px } .tabs-control li.active-tab .sprite.video-tab-4-pdf-blue { background-position: -5px -207px } @media (max-width: 1000px) { .product-guide .banner-section .flow-row .item { float: none; width: 100% } .product-guide .banner-section .flow-row .item a { max-width: 330px; margin: 10px auto } .tabs-control li .div-tab { font-size: 16px } } @media (max-width: 769px) { .proselect_box .proselect__item { width: 47.5%; margin-left: 2% } .proselect_box .proselect__item:first-child { margin-left: 2% } .proselect_box .proselect__btnBox { width: auto } .proselect_box .proselect__btnBox a { padding: 8px } .product-changeTab li a { padding: 0 10px 10px } .product-guide h2 { font-size: 30px; padding: 0 15px } .product-guide .slog { padding: 15px } .tabs-control { padding: 15px } .tabs-control li { display: inherit; width: 100%; min-height: auto } .swipper-screen { margin-top: 0 } .product-guide .info-section .container { padding: 30px 0 } .info-section .pdfelem-bgnrs__slider-title { font-size: 20px } .info-section .pdfelem-bgnrs__slider-info .pdfelem-bgnrs__slider-btn_border { font-size: 16px } } .free-product .banner-top { background: url("../img/freePro/banner-bg.webp") no-repeat center; background-size: cover; text-align: center; position: relative; padding: 50px 0 } .free-product .banner-top h1 { font-size: 36px; font-weight: 500 } .free-product .banner-top .desc { margin: 20px 0 } .free-product .banner-top .button { margin-top: 30px } .free-product .feature { padding: 30px 0 } .free-product .feature li { float: left; width: 20%; text-align: center } .free-product .feature li .img-f { display: block; height: 100%; border-radius: 50%; background-repeat: no-repeat; background-position: center center; text-align: center; background-color: #1fb5c9; width: 95px; height: 95px; padding-top: 23px; margin: 0 auto; position: relative } .free-product .feature li .img-f .num { position: absolute; text-align: center; left: 35%; top: 40%; color: #fff } .free-product .feature li p { padding-top: 5px } .free-product .feature li a:hover { text-decoration: none } .gray-bg-info { background: #fafafa; padding: 80px 0 } .free-product h2 { font-size: 32px; font-weight: 500; text-align: center } .view-video { position: relative; margin-top: 15px; text-align: center } .view-video>a, .view-video>div { display: inline-block; position: relative; cursor: pointer; padding-left: 42px; line-height: 40px; height: 40px; color: #00a2ea } .view-video>a::before, .view-video>div::before { border-radius: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; position: absolute; display: block; content: ''; height: 29px; width: 29px; top: 5px; left: 0 } .view-video>a::after, .view-video>div::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; content: ''; width: 0; height: 0; border-width: 5px 0 6px 8px; border-style: solid; border-color: transparent transparent transparent #fff; left: 12px; top: 14px } .view-video>a::before, .view-video>div::before { background: #298bc6 } .app-required { margin-top: 20px } .ver-list { margin-top: 50px } .ver-list li { width: 33.3333%; float: left } .ver-list li:first-child { padding-right: 4% } .ver-list .ver-head { position: relative; height: 65px; text-align: center } .ver-list .ver-head { margin-bottom: 15px } .ver-list .ver-head .obj-step { width: 69px; height: 65px; background-size: 100% 100%; -webkit-transition: opacity 0.2s cubic-bezier(.39, .575, .565, 1) 1s; -moz-transition: opacity 0.2s cubic-bezier(.39, .575, .565, 1) 1s; transition: opacity 0.2s cubic-bezier(.39, .575, .565, 1) 1s; position: relative; display: inline-block; background-repeat: no-repeat; background-position: center center } .ver-list .ver-head .step-arrow { position: absolute; background: url("../img/freePro/step-arrow.webp") no-repeat; background-size: 100% 100%; left: 75%; top: 18px; max-width: 75%; width: 221px; height: 22px } .ver-list h3 { text-align: center; font-size: 22px; font-weight: 400; margin-bottom: 10px } .product-desc .items .more { margin-top: 70px; color: #666 } .product-desc .items .more h3 { font-size: 22px; color: #00a2ea } .product-desc .items .more h3 img { margin-right: 10px; width: 30px } .product-desc .learn-more { padding-left: 20px; cursor: pointer } .product-desc .learn-more>div { background: url("../img/freePro/down-arrow.svg") right center/12px auto no-repeat; color: #00a2ea; padding-right: 20px; font-size: 18px; display: inline-block } .product-desc .pack-up { padding-left: 20px; cursor: pointer } .product-desc .pack-up>div { background: url("../img/freePro/up-arrow.svg") right center/12px auto no-repeat; color: #00a2ea; padding-right: 20px; font-size: 18px; display: inline-block } .knowledge-box { background: #fafafa url("../img/freePro/map.svg") no-repeat center; position: relative; padding-bottom: 80px } .video-box-body { width: 513px; height: 344px; background: url("../img/freePro/computer-bg.webp") center/513px 344px no-repeat; margin-left: 82px; margin-top: 10px; border-radius: 14px 14px 10px 10px; position: relative; margin-left: auto; margin-right: auto; text-align: center } .video-box-body::before { content: ''; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .08); -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out } .video-box-body .help { margin-top: 130px; cursor: pointer; display: inline-block; font-size: 20px; padding-top: 60px; position: relative; color: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out } .video-box-body .help::before { content: ''; display: inline-block; vertical-align: middle; margin-right: 15px; width: 48px; height: 48px; position: absolute; top: 0; right: 0; left: 0; margin: auto; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtjbGlwLXBhdGg6dXJsKCNhKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTB9LnN0MXtjbGlwLXBhdGg6dXJsKCNhKTtmaWxsOiNGRkZGRkZ9PC9zdHlsZT48ZGVmcz48cGF0aCBpZD0iYiIgZD0iTTAgMGg0OHY0OEgweiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjx1c2UgeGxpbms6aHJlZj0iI2IiIG92ZXJmbG93PSJ2aXNpYmxlIi8+PC9jbGlwUGF0aD48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNCIgY3k9IjI0IiByPSIyMyIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMiAxNy4zbDguOCA1LjZjLjguNS44IDEuNiAwIDIuMkwyMiAzMC43Yy0uOS41LTItLjEtMi0xLjFWMTguNGMwLTEuMSAxLjItMS43IDItMS4xIi8+PC9zdmc+") center top no-repeat; background-size: 100% 100%; -webkit-transition: background-image 0.3s ease-in-out; -moz-transition: background-image 0.3s ease-in-out; transition: background-image 0.3s ease-in-out } .knowledge-box .analysis-created { font-size: 20px; padding: 50px 0; text-align: center } .knowledge-box .analysis-created .tit { font-size: 46px; font-weight: bold; color: #00a2ea } .knowledge-box .analysis-created.left-creat { position: absolute; left: 10%; top: 40% } .knowledge-box .analysis-created.right-creat { position: absolute; right: 10%; top: 40% } .screenshots-box { padding: 80px 0 } .screenshots-box h2 { font-size: 32px; font-weight: 500; text-align: center; margin-bottom: 50px } .screenshots-box .item { background-color: #fff; box-shadow: 0 10px 30px rgba(51, 51, 51, .1); margin: 0 2.6%; width: 28%; float: left; color: #666 } .screenshots-box .item .img img { max-width: 100% } .screenshots-box .item .tit { font-size: 20px; padding: 0 15px; color: #333 } .screenshots-box .item .des { padding: 10px 15px } .rating-box { padding: 80px 0 } .product-reviews h2 { margin-bottom: 40px } .product-desc .items .more .row { margin: 0 } @media(max-width: 768px) { .row { margin: 0 } .free-product .banner-top { padding-top: 70px } .free-product .feature li { float: none; width: 100% } .free-product .feature, .ver-list .ver-head .step-arrow { display: none } .ver-list li { float: none; width: 100% } .product-desc .items img { margin-bottom: 40px; height: 205px } .product-desc h3 { font-size: 24px } .gray-bg-info { padding: 50px 0 } .product-desc .items { padding: 50px 0 } .product-desc .items .more h3 { font-size: 20px } .knowledge-box .analysis-created.left-creat, .knowledge-box .analysis-created.right-creat { position: initial } .knowledge-box .analysis-created { padding: 20px 0 } .video-box-body { width: auto } .screenshots-box .item { float: none; width: 100%; margin: 0; padding: 15px } .knowledge-box .analysis-created .tit { font-size: 38px } .product-desc .items .more h3 img { margin-bottom: 0 } .product-banner { min-height: 570px } .product-banner h1 { padding-top: 15px } .product-download .align-items-center .img-fluid { height: 210px } .product-download .title, .screenshots .title, .toolkit-main .title { font-size: 2rem } .tech-specs .title { font-size: 1.75rem } } .free-product .banner-main { text-align: center; position: relative; padding: 50px 0 } .free-product .banner-main h1 { font-size: 36px; font-weight: 500 } .free-product .banner-main .desc { margin: 20px 0 } .free-product .banner-main .button { margin-top: 30px } .tip-nav { border-bottom: 1px solid #dedede } .tip-nav .feature { margin-bottom: 0 } .free-product .feature li p { margin-bottom: 0 } .main-feature { margin-top: 45px; background-size: cover; background-position: top center; background-repeat: no-repeat } .main-feature .title { position: relative; padding-left: 20px; font-size: 30px; text-align: left } .main-feature .title::before { content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: 25px; background-color: #1fb5c9 } .main-feature p { margin-top: 15px; font-size: 18px } .main-feature .pro-list { padding-bottom: 60px; padding-left: 0; padding-top: 10px } .main-feature .pro-list li { float: left; width: 16.6%; text-align: center; margin-top: 40px; min-height: 150px } .main-feature .pro-list li a { color: #fff } .main-feature .pro-list li img { height: 40px } .main-feature .pro-list li .icon-img { background-color: #fff; width: 88px; height: 88px; border-radius: 50%; text-align: center; display: flex; display: -webkit-flex; align-items: center; justify-content: center; margin: 0 auto } .main-feature .pro-list li .icon-img img { max-width: 40px } .main-feature .pro-list li span { display: block; font-size: 16px; margin-top: 10px } .dot-list { margin-top: 15px; margin-bottom: 0; padding: 0 } .dot-list li { position: relative; padding-left: 15px; margin-top: 5px; font-size: 18px } .dot-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background-color: #333; border-radius: 50% } .main-feature .product-review { margin-top: 25px } .main-feature .product-review .col-lg-6 { padding: 0 } .main-feature .product-article { margin-top: 25px } .main-feature .product-article .text-center { margin-top: 30px } .main-feature .product-article .text-white { background-color: #fff; text-align: center; color: #333 !important; padding: 3px 15px } .main-feature .product-article .list { display: flex; flex-wrap: wrap } @media(max-width: 960px) { .main-feature .pro-list li { width: 23.6% } } @media(max-width: 768px) { .free-product .feature li p { margin-bottom: 10px } .main-feature .pro-list li .icon-img { width: 80px; height: 80px } .main-feature .pro-list li { width: 33%; margin-top: 20px } .free-product .banner-main { padding-top: 70px } .product-reviews-item { padding-left: 0; padding-right: 0 } .main-feature .pro-list li span { font-size: 14px } .main-feature p { font-size: 16px } .main-feature .title { font-size: 28px } #apIframe { width: 100%; } .start-video-converter-mid { font-size: 18px; } .start-screen-recording-big { font-size: 20px; } }