@charset "utf-8";

html,body {scroll-behavior: smooth;}
body{color:#333;}
a{color:inherit; text-decoration:none;}
a:hover {color: inherit;text-decoration: none;}
img{max-width:100%;}
ol, ul{list-style:none;}
.details{width:1200px;}

.main01 {padding-top:60px; background:#fff url(../images/feature-online-vs-videoproc/bg1.jpg) no-repeat top / 100%;}
.main01 h1 {font-size: 35px;color: #fff;line-height: 55px;text-align: center;}
.main01-icons{display:flex; padding:50px 0 65px; flex-flow:wrap;}
.main01-icons li{font-size:25px; color:#fff; display:flex; align-items:center; margin:0 auto;}
.main01-icons li span{background:url(../images/feature-online-vs-videoproc/main01-icons.png) no-repeat 1px center; width:49px; height:43px; margin-right:10px;}
.main01-icons li:nth-child(2) span{background-position-x:-287px;}
.main01-icons li:nth-child(3) span{background-position-x:-144px;}
.main01-icons li:nth-child(4) span{background-position-x:-435px;}
.main01-main{background-color:#fff; border-radius:10px; padding:35px; text-align:center; box-shadow:0 13px 16px rgba(221 230 242 / .65);}
.main01-main h4{font-size:21px; font-weight:700; padding-bottom:1.2em;}
.main01-main h4 span{color:#FEB935;}
.main01-main-info{display:flex; align-items:center; justify-content:center; gap:20px;}
.main01-main-info ul li{font-size:19px; text-align:left; background:url(../images/feature-online-vs-videoproc/true.png) no-repeat left 4px; padding-left:28px; margin:1.4em 0;}
.main01-db{display:flex; justify-content:center; gap:20px; margin:30px 0 55px;flex-flow: wrap;}
.main01-db h5{font-size:21px; font-weight:700; line-height:1.5;}
.main01-down-x, .main01-buy-x{border-radius:10px; border-style:solid; flex-basis:360px; padding:20px 10px; box-sizing:border-box;}
.main01-down-x{border-color:#CFD0D0;}
.main01-buy-x{border-color:#FD5B45; background:url(../images/feature-online-vs-videoproc/main01-ture2.png) no-repeat right 10px top 10px; box-shadow:0 6px 21px rgba(253 91 69 / .4);}
.main01-down-x .price{color:#0fb4ff; padding:2px 0;}
.main01-db .btn{min-width:230px; display:inline-flex; color:#fff; line-height:53px; border-radius:5px; align-items:center; justify-content:center; gap:15px; margin:12px 0;}
.main01-down-x .btn{font-size:21px; background-color:#16B4FD;}
.download-links {display: flex;justify-content: center;align-items: center;}
.download-links a {display: flex;justify-content: center;align-items: center;padding: 18px 20px;font-size: 17px;color: #fff;background-color: #0fb4ff;border-radius: 6px;}
.download-links a img {margin-left: 15px;}
.main01-step-container {padding: 80px 0 0 45px;display: flex;}
.main01-left-step-content {margin-top: 20px;}
.main01-left-step-content h3 {font-size: 31px;color: #050505;line-height: 33px;font-weight: 600;padding-bottom: 32px;}
.main01-left-step {padding-bottom: 20px;}
.main01-left-step li {font-size: 17px;color: #222;line-height: 19px;padding: 18px 0 40px 70px;position: relative;}
.main01-left-step li span {width: 73px;height: 80px;background: url(../images/feature-online-vs-videoproc/steps-bg.png);box-sizing: border-box;font-size: 14px;line-height: 18px;text-align: center;padding-top: 8px;position: absolute;top: 0;left: -10px;color: #fff;}
.main01-left-step li span b {font-size: 18px;display: block;font-weight: 500;}
.main01-left-step-content .download-links {justify-content: flex-start;padding-bottom: 30px;}
.main01-left-step-content p {font-size: 15px;color: #507dfc;line-height: 17px;text-decoration: underline;text-underline-position: under;}
.main01-right-step-content {width: 445px;cursor: pointer; position:relative;}
.main01-right-step-content img {max-width: initial;}
.main01-right-step-content button{background-color:transparent; border:0; position:absolute; left:75%; bottom:-10px; text-decoration:underline; color:#507dfc; cursor:pointer;}
.main01-price-con{display:flex; align-items:center; margin-top:4px; justify-content:space-around; flex-flow:wrap;}
.main01-price-con .price-month{display:inline-flex;}
.main01-buy-x del{font-size:19px; color:#747474; padding-right:8px;}
.main01-buy-x b{font-size:21px; color:#fd702b;}
.main01-con-select select{width:165px; height:31px; line-height:31px; box-sizing:border-box; border:2px solid #FFB889; background-color:#fff; border-radius:5px; font-size:19px; color:#747474;}
.main01-buy-x .btn{font-size:23px; background-color:#FD5B45; box-shadow:0 8px 20px rgba(253 91 69 / .4);}
.main01-buy-x .buy-lifetime{display:none; background-color:#FEB935; box-shadow:0 8px 20px rgba(252 223 165 / .9);}
.change.main01-buy-x{border-color:#FEB935; background-image:url(../images/feature-online-vs-videoproc/main01-ture.png); box-shadow:0 6px 21px rgba(252 223 165 / .65);}
.main01-buy-x .price-lifetime, .change .price-month, .change .buy-month{display:none;}
.change .price-lifetime, .change .buy-lifetime{display:inline-flex;}

.main02 {padding: 115px 0 0;background-color: #fff;}
.main02 h2,.main03 h2,.main04 h2,.main05 h2 {font-size: 37px;color: #050505;line-height: 45px;font-weight: 600;text-align: center;}
.main02-table-container {margin: 40px 0 55px;box-shadow: 0 0 20px 0 rgba(94,213,203,0.1);}
.main02-table {border: 2px solid #5ed5cb;width: 100%;background-color: #fff;}
.main02-table tr.has-borderbottom th,.main02-table tr.has-borderbottom td {border-bottom: 1px solid #cacaca;}
.main02-table th h3 {font-size: 25px;color: #1e1e1e;line-height: 29px;font-weight: 600;padding: 30px 0;text-align: center;}
.main02-table th:nth-child(2) h3 {font-size: 21px;color: #3b3b3b;background-color: #f6f6f6;margin-right: 12px;}
.main02-table th:nth-child(3) h3 {font-size: 21px;color: #ff8953;background-color: #fff9f1;}
.main02-table th:first-child h3,.main02-table td:first-child p {padding-left: 38px;text-align: left;}
.main02-table td p {font-size: 15px;line-height: 17px;padding: 12px 0;color: #3e3e3e;margin-bottom: 2px;}
.main02-table td p.large-padding {font-size: 19px;line-height: 21px;padding: 20px 0 20px 38px;margin-bottom: 0;}
.main02-table td:nth-child(2) p {margin-right: 12px;background-color: #f6f6f6;}
.main02-table td:nth-child(3) p {background-color: #fff9f1;}
.main02-table tr.has-borderbottom p {margin-bottom: 0;}
.main02-table td p span {height: 21px;display: flex;justify-content: center;align-items: center;position: relative;}
.main02-table td p span.colorful-yes::before {content: "";width: 8px;height: 20px;border-right: 4px solid #5ed5cb;border-bottom: 4px solid #5ed5cb;transform: rotate(45deg);}
.main02-table td p span.orange-yes::before {border-color: #ff8953;}
.main02-table td p span.colorful-no::before,.main02-table td p span.colorful-no::after {content: "";width: 4px;height: 26px;background-color: #5ed5cb;position: absolute;top: 0;left: 50%;margin-left: -2px;transform: rotate(45deg);}
.main02-table td p span.colorful-no::after {transform: rotate(-45deg);}
.main02-p,.main04-p {font-size: 15px;color: #4f4f4f;line-height: 17px;text-decoration: underline;text-align: center;margin-top: 20px;}
.btn-db-x{display:flex; justify-content:center; gap:20px;flex-flow: wrap;}
.btn-db-x .buy-links .btn{min-width:230px; display:inline-flex; color:#fff; line-height:60px; border-radius:5px; align-items:center; justify-content:center; gap:15px;  font-size:17px; background-color:#FEB935; padding:0 20px;}
.btn-db-x .buy-links .btn::before{content:attr(data-pc-text);}

.main03 {padding: 105px 0 40px;background: url(../images/feature-online-vs-videoproc/bg3.jpg) no-repeat center bottom/100% auto;}
.main03-step-container {width: 1034px;margin-left: auto;margin-top: 50px;padding: 48px 30px 22px 0;display: flex;align-items: flex-start;flex-wrap: wrap;background-color: #fff;border-radius: 12px;box-shadow: 0 0 20px rgba(15,180,255,0.05);}
.main03-left-step-content {width: 415px;display: flex;justify-content: flex-end;margin-top: 55px;cursor: pointer; position:relative;}
.main03-left-step-content img {max-width: initial;}
.main03-left-step-content button{background-color:transparent; border:0; position:absolute; left:15%; bottom:-25px; text-decoration:underline; color:#507dfc; cursor:pointer;}
.main03-right-step-content {width: 610px;}
.main03-right-step>li {font-size: 17px;color: #222;line-height: 19px;padding: 18px 0 35px 70px;position: relative;}
.main03-right-step>li:nth-child(2) {padding-bottom: 25px;}
.main03-right-step>li>span {width: 73px;height: 80px;background: url(../images/feature-online-vs-videoproc/steps-bg.png);box-sizing: border-box;font-size: 14px;line-height: 18px;text-align: center;padding-top: 8px;position: absolute;top: 0;left: -10px;color: #fff;}
.main03-right-step>li>span>b {font-size: 18px;display: block;font-weight: 500;}
.main03-step-table {display: flex;align-items: flex-start;flex-wrap: wrap;}
.main03-step-table-item {font-size: 15px;color: #202020;border: 1px solid #d2d2d2;padding: 3px 0;border-radius: 5px;margin-bottom: 6px;display: flex;flex-wrap: wrap;}
.main03-step-table-item:first-child {margin-top: 15px;}
.main03-step-table-item span {color: #454545;}
.main03-step-table-item li {width: 75px;height: 43px;border-right: 1px solid #d2d2d2;display: flex;justify-content: center;align-items: center;line-height: 17px;text-align: center;}
.main03-step-table-item li:first-child,.main03-step-table-item li.has-bg,.main03-step-table-item li:last-child {border-right: none;}
.main03-step-table-item li:first-child,.main03-step-table-item li.has-bg {flex-shrink: 0;}
.main03-step-table-item:last-child li:first-child {border-right: 1px solid #d2d2d2;}
.main03-step-table-item li.has-bg {background-color: #c3f9f5;}
.main03-step-table-item li.has-margin {margin-right: 4px;}
.main03-right-step-content .download-links {justify-content: flex-start;margin-left: 70px;}

.main04 {padding: 40px 0 105px;}
.main04-compare {margin: 95px 0 50px;display: flex;justify-content: center;flex-wrap: wrap;position: relative;}
.main04-compare::after {content: "";width: 185px;height: 185px;background: url(../images/feature-online-vs-videoproc/lock-icon.png) no-repeat center;border-radius: 50%;position: absolute;top: 50%;left: 409px;margin-top: -93px;}
.left-compare {width: 500px;box-sizing: border-box;border: 1px solid #d7dbde;border-right: none;padding: 75px 0 40px 25px;position: relative;}
.right-compare {width: 700px;box-sizing: border-box;border: 3px solid #67dbdb;padding: 73px 25px 40px 0;position: relative;}
.compare-tag {width: 338px;line-height: 66px;font-size: 19px;color: #676767;background-color: #eff1f2;text-align: center;position: absolute;top: -33px;right: 33px;}
.left-compare-tag::after,.right-compare-tag::before {content: "";border-top: 33px solid transparent;border-bottom: 33px solid transparent;border-left: 35px solid #eff1f2;position: absolute;top: 0;right: -35px;}
.right-compare-tag::before {border-left: none;border-right: 35px solid #67dbdb;right: auto;left: -35px;}
.right-compare-tag {background-color: #67dbdb;color: #fff;right: auto;left: 33px;top: -35px;}
.compare-list li {padding: 12px 100px 12px 0;font-size: 17px;color: #4e4e4e;line-height: 21px;text-align: right;background-color: #eff1f2;border-radius: 23px 0 0 23px;margin-bottom: 18px;}
.right-compare-list li {padding: 12px 0 12px 100px;color: #383737;background-color: #d6f6e9;text-align: left;border-radius: 0 23px 23px 0;}

.main05 {padding: 70px 0 35px;background-color: #f2f9ff;}
.main05-links-container {margin-top: 38px;}
.main05-links-content {padding-bottom: 22px;color: #444;}
.main05-links-content h4 {display: inline-block;font-size: 21px;font-weight: 600;line-height: 51px;padding-right: 25px;border-bottom: 2px solid #0fb4ff;margin-bottom: 25px;}
.main05-links {display: flex;flex-wrap: wrap;}
.main05-links a {width: 400px;font-size: 15px;line-height: 17px;margin-bottom: 18px;}
.main05-links a:hover {text-decoration: underline;text-underline-position: under;}
.main05-links a span {color: #ff4b4b;font-weight: 600;}

.fixed-nav-container {display: none;height: 86px;width: 100%;background-color: #363938;position: fixed;top: 0;left: 0;z-index: 100;}
.fixed-nav-content {height: 100%;display: flex;justify-content: center;align-items: center;font-size: 15px;line-height: 19px;color: #fff;}
.fixed-nav-content>span {margin-right: 50px;white-space: nowrap;}
.fixed-nav-content .download-links {padding-bottom: 0;}
.fixed-nav-content .download-links a {padding: 13px 15px;}

.popup-container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.6);z-index: 1000;}
.popup-start,.popup-one,.popup-two {display: none;position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.popup-start {display: block;width: 98%;max-width: 560px;padding: 24px 24px 30px 24px;box-sizing: border-box;box-shadow: rgb(0 0 0 / 20%) 0 4px 8px 0;background: #fff;border-radius: 4px;text-align: center;}

@media (max-width: 979px) {
    .win-plat,.mac-plat,.fixed-nav-container {display: none !important;}
    .mobile-plat {display: inline-flex !important;}
    .details {width: 96%;}

    .main01 {background-size: auto 50%;}
    .main01-pic{height:auto;}
    .main01-icons{gap:20px;}
    .main01-left-step-content,.main01-right-step-content {width: 100%;}
    .main01-right-step-content {align-self: center;}
    .main01-right-step-content img,.main03-left-step-content img {max-width: 100%;}
    .main01-right-step-content button, .main03-left-step-content button{left:50%; transform:translate(-50%);}
    .btn-db-x .buy-links .btn::before{content:attr(data-mobile-text);}
    .main01-db .buy-mac, .btn-db-x .buy-links .buy-mac{display:flex !important; justify-content:center;}
    .btn-db-x .buy-links .buy-mac{margin-top:10px;}

    .main03-step-container {width: 100%;padding: 0;}
    .main03-left-step-content,.main03-right-step-content {width: 100%;}
    .main03-left-step-content {justify-content: center;margin: 0 0 30px;}

    .main04-compare::after {display: none;}
    .left-compare {width: 100%;border-right: 1px solid #d7dbde;padding: 70px 20px 30px;margin-bottom: 50px;}
    .right-compare {padding: 70px 20px 30px;}
    .compare-tag,.right-compare-tag {right: auto;left: 50%;margin-left: -169px;border-radius: 10px;}
    .left-compare-tag::after, .right-compare-tag::before {display: none;}
    .compare-list li {padding: 12px 10px;border-radius: 20px;text-align: center;}

}

@media (max-width: 767px) {

    .main01-icons {padding:30px 0;}
    .main01-icons li{font-size:21px;}

    .btn-db-x .buy-links .btn{margin-bottom:10px;}

    .main02-table th:first-child h3, .main02-table td:first-child p {padding-left: 5px;}
    .main02-table th:nth-child(2) h3,.main02-table th:nth-child(3) h3 {margin-right: 0;background-color: #fff;}
    .main02-table td:nth-child(2) p {margin-right: 0;}

    .main03-step-table-item {border: none;}
    .main03-step-table-item li,.main03-step-table-item li:first-child,
    .main03-step-table-item li.has-bg, .main03-step-table-item li:last-child {border: 1px solid #d2d2d2;margin: 0 5px 5px 0;border-radius: 3px;}
    .main03-step-table-item:last-child li:first-child,.main03-step-table-item li:first-child {border: none;}

}

@media (max-width: 479px) {

    .main01 h1 {font-size: 27px;line-height: 39px;}
    .main01-step-container {padding: 20px 0 30px 0;flex-flow: wrap;}
    .main01-main-info{flex-flow:wrap;}
    .main01-db{margin:10px 0 30px;}

    .main02 h2, .main03 h2, .main04 h2, .main05 h2 {font-size: 27px;line-height: 33px;}

    .main03-right-step-content .download-links {margin-left: 0;justify-content: center;}

}