@charset "utf-8";

body{color:#333; text-align:justify; min-width:1200px; counter-reset:methodStep;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
ol, ul{list-style:none;}
.Details{width:1200px;}

.down-btn{display:inline-block; background-color:#16B4FD; font-size:31px; line-height:1; color:#fff; border-radius:5px; padding:.6em; margin:1em 0 .5em; box-shadow:0 5px 15px rgba(121 132 145 / .35);}
.down-btn::after{content:''; display:inline-block; width:59px; height:24px; background-image:url(../images/feature-video-compressing/win-mac.png); margin-left:23px;}

.method{font-size:30px; text-align:center;}
.method::after{content:counter(methodStep); counter-increment:methodStep; display:inline-block; width:52px; height:57px; color:#fff; background:radial-gradient(50px, #F9C73D 49%, transparent calc(49% + 1px)) no-repeat center top -4px, linear-gradient(to right, transparent 50%, #F9C73D 0); border-radius:50%;  line-height:50px; vertical-align:30px; box-shadow:2px 10px 10px 1px rgba(249 199 61 / .3), inset 0 -10px 8px rgba(249 199 61 / .3);}
.method + h2{text-align:center; font-size:20px;  line-height:1.3; padding:15px 0 1.5em; font-weight:700;}

.method-a-wrap{padding-top:10px;}
.method-a-wrap a{color:#16B4FD; display:inline-block;}
.method-a-down{margin-right:20px;}
.method-a-down::before{content:url(../images/feature-video-compressing/down-icon.png) ' '; vertical-align:-3px;}
.method-a-guide::before{content:url(../images/feature-video-compressing/book-icon.png) ' '; vertical-align:-3px;}

.test-tip-btn{border:2px solid; color:#398BFD; width:20px; height:20px; border-radius:50%; background-color:transparent; vertical-align:middle; font-weight:700; cursor:pointer; text-indent:-1px;}
.test-tip-btn::before, .test-tip-btn::after{visibility:hidden; transition:.3s; opacity:0; z-index:1;}
.test-tip-btn::before{content:attr(data-test-tip); position:absolute; font-size:13px; color:#3b3b3b; font-weight:400; background-color:#fff; border-radius:5px; text-align:left; padding:5px 10px; border:1px solid #ddd; left:0; right:0; top:calc(100% + 9px); transform:translateY(3px);}
.test-tip-btn::after{content:''; position:absolute; width:10px; height:10px; border-left:1px solid; border-top:1px solid; color:#ccc; background-color:#fff; top:100%; transform:rotate(45deg); margin:4px 0 0 -8px;}
.test-tip-btn:focus::before, .test-tip-btn:focus::after{visibility:visible; opacity:1;}
.test-tip-btn:focus::before{transform:translateY(0);}
.test-tip-btn:focus{cursor:default;}
.test-data{border-left:1px solid #B3B8BD; border-bottom:1px solid #B3B8BD; background-image:repeating-linear-gradient(transparent 0, transparent 7px, #E0E4E8 0, #E0E4E8 8px), repeating-linear-gradient(to right, transparent 0, transparent 8px, #E0E4E8 0, #E0E4E8 9px); margin-top:40px; position:relative; padding-top:26px;}
.test-data::before, .test-data::after{position:absolute; bottom:-25px; font-size:15px; color:#999;}
.test-data::before{content:attr(data-time-start);}
.test-data::after{content:attr(data-time-end); right:0;}

.text-bg{font-size:81px; font-weight:700; line-height:1; background-image:linear-gradient(#E7ECF0, 75%, #F6F7F9); background-clip:text; -webkit-background-clip:text; color:transparent;}
.text-bg + h2{font-size:37px; font-weight:700; line-height:1; margin-top:-30px;}
/* CSS Document */

.DivMain01{background:url(../images/feature-video-compressing/banner-bg.jpg) no-repeat top / cover, linear-gradient(#E1E8EE, #F9FAFB 30%); text-align:center; padding-top:40px; position:relative; z-index:1;}
.main01-title{font-size:32px; line-height:1.3;}
.main01-title strong{display:block; color:#4c96f2;}
.main01-info{font-size:17px; padding:25px 0 0; color:#56575d;}
.main01-pic{margin:-150px 0 0 -110px; position:relative; z-index:-1;}
.main01-video-wrap{width:60%; margin:20px 0 30px; display:inline-block;}
.main01-video{padding-bottom:56.25%; position:relative;}
.main01-video iframe{position:absolute; top:0; left:0; width:100%; height:100%; border-radius:20px;}
/* CSS Document */

.DivMain10{padding:70px 0; background:url(../images/feature-video-compressing/bg3.png) no-repeat bottom / 100%; overflow-x:hidden;}
.DivMain10 h2{font-size:32px; text-align:center; line-height:1; padding-bottom:1em; font-weight:700;}
.DivMain10 .Details{transform:scale(1);}
.main10-box{display:flex; align-items:center;}
.main10-con{width:520px;}
.main10-con .method{text-align:left;}
.main10-con .method::after{text-align:center;}
.main10-con h3{font-size:20px; line-height:1.3; margin:15px 0;  text-align:left; font-weight:700;}
.main10-con > p{margin-bottom:15px;}
.main10-con > p:last-child{margin-bottom:0;}
.main10-con p a{color: #16B4FD;}
.main10-con ol{margin-top:15px;}
.main10-con ol li a{color:#16B4FD;}
.main10-drag-wrap{flex:1 0 auto; text-align:center; position:relative; margin-left:4%;}
.main10-bg{position:absolute; left:0; z-index:-1; max-width:none;}
.main10-person{display:inline-block; position:relative;}
.drag-arrow{position:absolute; left:70%; height:458px; width:2px; background-color:#fff; cursor:grab; cursor:-webkit-grab; cursor:-moz-grab;}
.drag-arrow::before{content:''; position:absolute; top:50%; margin:-34px 0 0 -34px; width:68px; height:68px; background-image:url(../images/feature-video-compressing/drag-btn.png);}
.drag-arrow:active{cursor:grabbing; cursor:-webkit-grabbing; cursor:-moz-grabbing;}
.drag-arrow img{max-width:none; margin-left:-34px;}
.main10-person-img{user-select:none;}
.drag-streak{color:#B4B4B4; height:20px; background:linear-gradient(to right, currentColor 2px, transparent 0, transparent 4px) 0 / 4px; -webkit-mask-image:linear-gradient(to left top, #fff calc(52% - 1px), transparent 52%); mask-image:linear-gradient(to left top, #fff calc(52% - 1px), transparent 52%); margin-top:35px;}
.drag-streak-light{color:#81D1FE; height:100%; width:70%; margin-top:0; background:linear-gradient(to right, currentColor 2px, transparent 0, transparent 4px) 0 / 4px;}
.drag-line{height:3px; background-color:#B4B4B4; margin:10px 0 5px; position:relative;}
.drag-line-light{height:100%; width:70%; background-color:#29B1FD;}
.drag-line-btn{width:16px; height:16px; border-radius:50%; border:1px solid #CFCFCF; background-color:#fff; position:absolute; left:70%; margin-left:-8px; box-sizing:border-box; top:-7px; cursor:pointer;}
.drag-line-num{position:absolute; background-color:#4CCA78; border-radius:3px; color:#fff; line-height:20px; margin-top:-50px; left:50%; transform:translate(-50%); padding:0 4px 0 3px;}
.drag-line-num::after{content:''; position:absolute; left:50%; transform:translate(-50%); top:100%; border-width:5px 4px 0 4px; border-color:#4CCA78 transparent transparent; border-style:solid;}
.drag-size{display:flex; justify-content:space-between; margin:0 -33px;}
.drag-size-after{color:#54b8ff;}
.cp-vs-table{margin-top:20px;}
.cp-vs-table .table-ti{font-size:17px; padding-bottom:15px;}
.cp-vs-table .table-wrap{position:relative;}
.cp-vs-table .table-btn-left, .cp-vs-table .table-btn-right{border:0; width:20px; height:20px; background-color:transparent; border-left:2px solid; border-bottom:2px solid; color:#A7B5C3; cursor:pointer; transform:translateY(-50%) rotate(45deg); position:absolute; left:-35px; top:50%;}
.cp-vs-table .table-btn-right{transform:translateY(-50%) rotate(-135deg); left:auto; right:-35px;}
.cp-vs-table .table-btn-left:disabled, .cp-vs-table .table-btn-right:disabled{cursor:no-drop; opacity:.3;}
.vs-table-box{overflow-x:hidden; scroll-behavior:smooth;}
.cp-vs-table .table-con{width:275%; table-layout:fixed; text-align:center; font-size:17px;}
.cp-vs-table .table-con tr th:first-child, .cp-vs-table .table-con tr td:first-child{position:sticky; position:-webkit-sticky; left:0;}
.cp-vs-table .table-con th, .cp-vs-table .table-con td{background-color:#fff; padding:8px 5px;}
.cp-vs-table .table-con th{font-weight:400; width:12.5%}
.cp-vs-table .table-con th:nth-child(even), .cp-vs-table .table-con td:nth-child(even){background-color:#E5FEFA;}
.cp-vs-table .table-con td{border-top:1px solid #B6E4DB;}
.cp-vs-table .table-con tbody tr:last-child td:not(td:first-child){font-size:15px;}
.vs-table-box .yes{background-image:linear-gradient(to right top, transparent calc(50% - 2px), currentColor, currentColor, transparent calc(50% + 2px)), linear-gradient(to left top, transparent calc(50% - 2px), currentColor, currentColor, transparent calc(50% + 2px)); background-repeat:no-repeat; background-position:calc(50% - 5px) 62%, calc(50% + 5px); background-size:8px 8px, 15px 16px; color:#15BE8A;}
.vs-table-box .no{background-image:linear-gradient(to right top, transparent calc(50% - 2px), currentColor, currentColor, transparent calc(50% + 2px)), linear-gradient(to left top, transparent calc(50% - 2px), currentColor, currentColor, transparent calc(50% + 2px)); background-repeat:no-repeat; background-position:center; background-size:14px 14px; color:#e56c6d;}
/* CSS Document */

.DivMain02{background:url(../images/feature-video-compressing/bg2.png) no-repeat bottom / 100%; padding:70px 0 80px;}
.main02-wrap{display:flex; align-items:center; margin-bottom:50px;}
.main02-img{width:490px; height:498px; transform:scale(1); margin-top:55px;}
.main02-img .step1, .main02-img .step2, .main02-img .step3{font-size:23px; font-weight:700; line-height:1.5; color:#000; width:160px; height:160px; border-radius:50%; background-color:#FCFCFD; text-align:center; display:flex; align-items:center; justify-content:center; position:absolute;}
.main02-img .step1{top:-11%; right:26%;}
.main02-img .step2{top:18%; right:-10%;}
.main02-img .step3{bottom:5%; right:2%;}
.main02-con{flex:1; padding-left:80px;}
.main02-con dl{margin:26px 0;}
.main02-con dl dt h3{font-size:14px; padding-bottom:10px; font-weight:700;}
.main02-con dl dt h3::before{content:'\2022'; color:#18D2AE; padding-right:10px; font-size:75%; vertical-align:2px; display:inline-block;}
.main02-con dl dd{color:#3b3b3b; position:relative;}
.main02-con dl dd a, .main02-con p a{color:#16B4FD;}
.test-data-before, .test-data-after{background-clip:padding-box; border:1px solid; display:flex; justify-content:space-between;}
.test-data-before{color:#c95152; padding:30px 15px; background-image:linear-gradient(hsla(359 100% 63.1% / .45), transparent); border-image:linear-gradient(hsla(359 100% 50% / .5), transparent) 1;}
.test-data-before > span{font-size:19px;}
.test-data-after{color:#019462; padding:5px 15px; background-image:linear-gradient(hsla(162.7 100% 40% / .5), transparent); border-image:linear-gradient(hsla(162.7 100% 30% / .6) 40%, transparent) 1;}
.DivMain02 .method-a-wrap{padding-top:0;}
/* CSS Document */

.DivMain03{padding:70px 0; background:url(../images/feature-video-compressing/bg3.png) no-repeat bottom / 100%; overflow-x:hidden;}
.DivMain03 .Details{transform:scale(1);}
.main03-img{position:absolute; left:46%; z-index:-1;}
.main03-con{width:780px;}
.main03-con p a{color:#16B4FD;}
.main03-text{width:635px;}
.main03-text > p{margin-bottom:15px;}
.main03-text h3{font-size:29px; line-height:1.2; padding-bottom:15px;}
.main03-text .tip{border-top:1px solid #E4E4E4; padding-top:15px; margin-top:20px; position:relative;}
.main03-text .step{padding:10px 0;}
.main03-text ul li{list-style:disc inside;}
.main03-con table{border-collapse:collapse; width:100%; table-layout:fixed; text-align:center; margin-top:30px;}
.main03-con table tr th, .main03-con table tr td{padding:8px 5px; border-bottom:1px solid #B6E4DB;}
.main03-con table tr:last-child td{border-bottom:0;}
.main03-con table tr th:first-child, .main03-con table tr td:first-child{border-bottom:0;}
.main03-con table tr th:nth-child(odd), .main03-con table tr td:nth-child(odd){background-color:#fff;}
.main03-con table tr th:nth-child(even), .main03-con table tr td:nth-child(even){background-color:#E4FDF8;}
.main03-con table tr th{font-weight:400;}
.main03-con table tr td:first-child span{color:HSL(168.3, 50%, 50%);}
/* CSS Document */

.DivMain04{padding:70px 0 50px; background:url(../images/feature-video-compressing/bg2.png) no-repeat bottom / 100%;}
.DivMain04 .Details{transform:scale(1);}
.main04-con{width:580px; margin-left:auto; min-height:550px;}
.main04-con .method{text-align:left;}
.main04-con .method::after{content:attr(data-method-number); text-align:center;}
.main04-con h3{font-size:20px; line-height:1; padding:25px 0 15px; font-weight:700;}
.main04-desc > div{display:none;}
.main04-desc > .active{display:block;}
.main04-con p a{color:#16B4FD;}
.main04-btn{padding:5% 0 13%;}
.main04-btn button{background-color:#C7C7C7; width:40px; height:8px; border:0 none; cursor:pointer; margin-right:10px;}
.main04-btn button:disabled{background-color:#F9C73D; cursor:default;}
.main04-tips{border-radius:5px; border:1px solid #FEEBB9; padding:1em 1.5em; color:#656565; background-color:rgba(255 255 255 / .5);}
.main04-img{position:absolute; right:51%; z-index:-1;}
/* CSS Document */

.DivMain05{background-color:#EBEFF3; text-align:center; padding-bottom:80px;}
.DivMain05 .bg{background-color:#fff; padding-top:80px;}
.main05-img{margin-top:-70px;}
.main05-con{display:flex; flex-wrap:wrap; justify-content:center; margin-top:-67px;}
.main05-con dl{background-color:#fff; border-radius:15px; width:365px; padding:25px 25px 20px; box-sizing:border-box; margin:32px 17px 0;}
@supports (gap:0) {
	.main05-con{margin-top:-35px; gap:50px;}
	.main05-con dl{margin:0;}
}
.main05-con dl dt{font-size:19px; padding:10px 0;}
.main05-con dl dd{font-size:17px;}
.main05-con dl dd a{color:#16B4FD;}
/* CSS Document */

.DivMain06{text-align:center; padding:60px 0;}
.main06-img{padding-top:30px;}
.DivMain06 .main05-con dl{box-shadow:0 2px 19px rgba(190 190 190 / .28);}
/* CSS Document */

.DivMain07{text-align:center; padding-top:50px; color:#5a5a61; background-image:linear-gradient(transparent calc(100% - 110px), #D6F4EF 0);}
.DivMain07 .Details{background-color:#fff; padding-bottom:40px; box-shadow:-95px 0 0 #fff, 95px 0 0 #fff; border-radius:10px;}
.DivMain07 .subti{font-size:23px; color:#737373;}
.DivMain07 h2{font-size:41px; font-weight:700; line-height:1; padding:.3em 0 .7em; color:#272727;}
.DivMain07 .desc{font-size:19px; line-height:1.5;}
.DivMain07 ul{display:flex; justify-content:space-between; padding:50px 0 15px;}
.DivMain07 ul li{text-align:left;}
.DivMain07 ul li .title{font-size:23px; font-weight:700; padding-bottom:.5em;}
/* CSS Document */

.DivMain08{background-color:#D6F4EF; text-align:center; padding-top:50px;}
/* CSS Document */

.DivMain09{padding:60px 0;}
.DivMain09 h2{font-size:41px; font-weight:700; text-align:center; line-height:1; padding-bottom:1em;}
.DivMain09 .qes_one{border-bottom: 1px solid #e6e6e6;padding: 18px 0 8px;}
.DivMain09 .qes_one .t{font-size: 18px; background: url(../../images/buy-year3th/add.png) no-repeat right 3px;cursor: pointer; padding-bottom: 10px;}
.DivMain09 .qes_one .qes_ans{color: #737480;display: none;}
.DivMain09 .qes_one.focus .t{background: url(../../images/buy-year3th/min.png) no-repeat right center;}
.DivMain09 .qes_one.focus .qes_ans{display: block;}
/* CSS Document */

.fixed-nav-container {background-color:#edf2f6;  position: fixed; top: 0; left: 0; right: 0; display: none;z-index: 100; padding:12px 0; box-shadow:2px 0 3px rgba(0 0 0 / .15);}
.fixed-nav-content {display: flex;justify-content: center;align-items: center;}
.fixed-nav-items {display: flex;align-items: center;}
.fixed-nav-items a {font-size: 17px;color: #080808;text-decoration: none;margin-right: 35px;}
.fixed-nav-items a:hover {color: #069eff;}
.fixed-nav-button {display: flex;align-items: center;}
.fixed-nav-buy {  width: 150px; text-align: center; cursor: pointer;padding: 5px 0 0; margin: 0 20px 0 0;color: #c7a757; font-weight: 800; font-size: 17px; line-height: 20px; }
.fixed-nav-buy-span {font-size: 11px; color: #808080; display: block; font-style: normal; font-weight: 400; line-height: 20px;}
.fixed-nav-download { width: 145px; height: 38px; border-radius: 5px;background: #0fb4ff; color: #fff;text-align: center;  padding: 5px 0 0; cursor: pointer; transition:all 0.4s;font-weight: 800; font-size: 17px; line-height: 17px;}
.fixed-nav-download:hover { background: #2d9dd0; }
.fixed-nav-download-span { font-size: 11px;  display: block; font-style: normal; font-weight: 400; line-height: 18px; }
/* CSS Document */

@media (max-width: 979px) {

	body{min-width:100%;}
	.Details{width:96%;}
	img{height:auto;}
	/* CSS Document */

	.main01-video-wrap{width:90%;}
	/* CSS Document */

	.main02-wrap{flex-flow:column;}
	.main02-con{padding-left:0;}
	/* CSS Document */

	.main03-con, .main03-text{width:100%;}
	.main03-img{opacity:.3;}
	/* CSS Document */

	.main04-con{margin-left:0; width:auto; min-height:auto;}
	.main04-img{opacity:.3; left:0;}
	/* CSS Document */

	.main10-con{width:auto;}
	.main10-box{flex-flow:column;}
	.main10-drag-wrap{margin:20px 0 0 0;}
	.main10-bg{transform:translate(-50%); left:50%;}
	.cp-vs-table .table-wrap{width:90%; margin:0 auto;}
	.vs-table-box{overflow-x:auto;}
	/* CSS Document */

	.fixed-nav-container {display: none !important;}
	/* CSS Document */

}

@media (max-width: 767px) {

	.main01-pic{margin-top:-50px;}
	/* CSS Document */

	.main02-img{width:90%; height:auto;}
	/* CSS Document */

	.text-bg{font-size:9vw;}
	.text-bg + h2, .main05-img{margin-top:-10px;}
	@supports (gap:0) {
		.main05-con{gap:20px;}
		.main05-con dl{margin:0;}
	}
	/* CSS Document */

	.DivMain07 ul{flex-wrap:wrap; justify-content:center;}
	.DivMain07 ul li{text-align:center;}
	.DivMain07 ul li:nth-child(2){margin:20px 0;}
	/* CSS Document */

	.cp-vs-table .table-btn-left, .cp-vs-table .table-btn-right{display:none;}
	.cp-vs-table .table-wrap{width:100%;}
	.cp-vs-table .table-con{width:500%;}
	/* CSS Document */

}

@media (max-width: 479px) {

	.down-btn{font-size:25px;}
	.text-bg + h2{font-size:27px;}
	.method-box .method{margin-right:0;}
	/* CSS Document */

	.main01-info{font-size:15px;}
	/* CSS Document */

	.DivMain02{padding-bottom:50px;}
	.main02-img .step1, .main02-img .step2, .main02-img .step3{width:100px; height:100px; font-size:19px;}
	.main02-con dl dt h3{text-align:left;}
	.test-data{overflow-x:auto; padding-bottom:20px;}
	.test-data::before, .test-data::after{bottom:0;}
	.test-data-before, .test-data-after{font-size:13px;width: 110%;}
	.test-data-before{padding:30px 5px;}
	.test-data-after{padding:5px;}
	.test-data-before > span{font-size:15px;}
	/* CSS Document */

	.main03-text h3{font-size:23px;}
	.main03-con .table-box{overflow-x:auto;}
	.main03-con table{width:150%; font-size:13px;}
	.main03-con table tr td:first-child, .main03-con table tr th{font-size:15px;}
	/* CSS Document */

	.DivMain05 .bg{padding-top:50px;}
	.main05-con dl{padding:20px 10px;}
	.main05-con dl dt{font-size:17px;}
	.main05-con dl dd{font-size:15px; line-height:1.3;}
	@supports (gap:0) {
		.main05-con{gap:0;}
		.main05-con dl{margin:0 0 10px 0;}
	}
	.DivMain05{padding-bottom:60px;}
	/* CSS Document */

	.DivMain07{padding-top:0;}
	.DivMain07 h2{font-size:27px;}
	.DivMain07 .desc{font-size:17px;}
	/* CSS Document */

	.cp-vs-table .table-con{font-size:15px;}
	.cp-vs-table .table-con tbody tr:last-child td:not(td:first-child){font-size:13px;}
	/* CSS Document */

}