@charset 'UTF-8';

:root{--arr-icon:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07692 1L7.00593 8L12.9231 1' stroke='black' fill='none'/%3E%3C/svg%3E") no-repeat;}
body#mvcBg{background-image:initial;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); clip-path:inset(50%); white-space:nowrap; border:0;} /* 视觉隐藏文字，保留给爬虫 */

.hero-tools{
	background-image:url('../images/hero-tools/hero-bg.png');
	background-image:-webkit-image-set(
		url('../images/hero-tools/hero-bg.webp') 1x,
		url('../images/hero-tools/hero-bg.png') 1x
	);
	background-image:image-set(
		url('../images/hero-tools/hero-bg.webp') type('image/webp'),
		url('../images/hero-tools/hero-bg.png') type('image/png')
	);
	background-repeat:no-repeat;
	background-size:100% 100%;
	text-align:center;
	padding:min(2vw, 40px) 0;
}
.hero-tools-title{font-size:37px; font-weight:400; line-height:1; color:#000;}
.hero-tools-subtitle{font-size:19px; color:#191919; font-weight:400; line-height:1.2; margin:15px 0;}
.hero-tools-step-con{display:none;}
.hero-tools-step-con.show{display:block;}
.hero-tools-steps-title{display:flex; list-style:none; justify-content:center; align-items:center; margin:23px 0;}
.hero-tools-step-title, .hero-tools-st-line{margin:0 6px;}
.hero-tools-step-title{font-size:17px; color:#2a2a2a;}
.hero-tools-st-line{flex-grow:.22; border-top:dotted #aec3f1;}
.hero-tools-con-x{background-color:#fff; border-radius:30px; padding:min(2.5vw, 50px);}
.hero-tools-step-upload .hero-tools-con-x{margin-top:30px}
.hero-tools-upload-area{border:2px dashed #C4D5FF; border-radius:10px; padding:22px; position:relative; margin-bottom:35px;}
.hero-tools-upload-area:hover{background-color:#FAFAFD;}
.hero-tools-upload-icon{display:block; width:55px; height:55px; border-radius:50%; background-color:#C4D5FF; margin:0 auto; position:relative;}
.hero-tools-upload-area:hover .hero-tools-upload-icon{background-color:#99B6FF;}
.hero-tools-upload-icon::before, .hero-tools-upload-icon::after{content:''; position:absolute; background-color:#fff; top:0; right:0; bottom:0; left:0; border-radius:100vw; margin:auto;}
.hero-tools-upload-icon::before{width:58%; height:9.1%;}
.hero-tools-upload-icon::after{width:9.1%; height:58%;}
.hero-tools-upload-drag{font-size:17px; color:#666; margin-top:17px;}
.hero-tools-upload-input{position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer; opacity:0;}
.hero-tools-upload-btns{display:flex; justify-content:center; margin:10px 0;}
.hero-tools-upload-btn, .hero-tools-upload-down, .hero-tools-ue-btn{min-width:285px; box-sizing:border-box; padding:20px; border-radius:6px; font-size:27px; color:#fff; display:flex; justify-content:space-evenly; align-items:center; margin:6px 13px; text-decoration:none;}
.hero-tools-upload-btn{--file-icon:url(../images/hero-tools/file-icon.svg) no-repeat center; background-color:#5097FF; cursor:pointer;}
.hero-tools-upload-down{--win-icon:url(../images/hero-tools/win-icon.svg) no-repeat center; --mac-icon:url(../images/hero-tools/mac-icon.svg) no-repeat center; --mobile-icon:url(../images/hero-tools/mobile-icon.svg) no-repeat center; background-color:#94CB30;}
.hero-tools-upload-btn.file-icon::before, .hero-tools-upload-down.win-icon::after, .hero-tools-upload-down.mac-icon::after, .hero-tools-upload-down.mobile-icon::after{content:''; width:23px; height:26px; background-color:currentColor;}
.hero-tools-upload-btn.file-icon::before{mask:var(--file-icon); -webkit-mask:var(--file-icon); margin-right:8px;}
.hero-tools-upload-down.win-icon::after, .hero-tools-upload-down.mac-icon::after, .hero-tools-upload-down.mobile-icon::after{margin-left:8px;}
.hero-tools-upload-down.win-icon::after{mask:var(--win-icon); -webkit-mask:var(--win-icon);}
.hero-tools-upload-down.mac-icon::after{mask:var(--mac-icon); -webkit-mask:var(--mac-icon);}
.hero-tools-upload-down.mobile-icon::after{mask:var(--mobile-icon); -webkit-mask:var(--mobile-icon);}
.hero-tools-upload-hint{font-size:17px; color:#434343; margin:10px 0;}
.hero-tools-uh-a{color:inherit; text-decoration:none;}
.hero-tools-upload-safe{display:flex; list-style:none; justify-content:center; margin-top:28px;}
.hero-tools-us-li{--icon:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.5L5.03003 8.69098L11.5 1.5' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat 0 / cover; display:flex; align-items:center; margin:0 4%; font-size:15px; color:#747474;}
.hero-tools-us-li::before{content:''; width:14px; height:12px; mask:var(--icon); -webkit-mask:var(--icon); background-color:#73CE46; margin-right:4px;}
.hero-tools-ue-back{--icon:url("data:image/svg+xml,%3Csvg viewBox='0 0 21 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.22501 1L1 4.76199L6.22299 8.52499' stroke='%23000' stroke-linecap='round' fill='none'/%3E%3Cpath d='M18.725 4.2625H2.72501C2.44886 4.2625 2.22501 4.48635 2.22501 4.7625C2.22501 5.03864 2.44886 5.2625 2.72501 5.2625H18.725C19.0011 5.2625 19.225 5.03864 19.225 4.7625C19.225 4.48635 19.0011 4.2625 18.725 4.2625Z' stroke='%23000' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; font-size:15px; color:#303030; background-color:initial; border:0 none; padding:0; cursor:pointer; display:flex; align-items:center; padding:23px;}
.hero-tools-ue-back::before{content:''; width:21px; height:10px; mask:var(--icon); -webkit-mask:var(--icon); background-color:currentColor; margin-right:5px;}
.hero-tools-ue-icon{margin-bottom:35px;}
.hero-tools-ue-title{font-size:25px; color:#2f2f2f; font-weight:400;}
.hero-tools-ue-desc{font-size:17px; color:#414141; line-height:1.47; margin:15px 0;}
.hero-tools-ue-btn{color:#5097ff; font-size:23px; box-shadow:inset 0 0 0 2px;}
.hero-tools-upload-error .hero-tools-upload-btns{margin:27px 0 0;}
.hero-tools-upload-error{display:none;}
.hero-tools-convert-con{background-color:#F0F6FF; display:flex; justify-content:space-between; padding:1.3% 2.5%; border-radius:11px; align-items:center; font-size:17px;}
.hero-tools-convert-fileName{--icon:url("data:image/svg+xml,%3Csvg viewBox='0 0 23 27' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 1H3C1.89543 1 1 1.89543 1 3V24C1 25.1046 1.89543 26 3 26H20C21.1046 26 22 25.1046 22 24V8L15 1Z' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 1V9H22L14 1Z' fill='black'/%3E%3C/svg%3E") no-repeat; display:flex; align-items:center;}
.hero-tools-convert-fileName::before{content:''; width:23px; height:27px; mask:var(--icon); -webkit-mask:var(--icon); background-color:#5097FF; flex:none; margin-right:12px;}
.hero-tools-convert-fn{color:#434343; max-width:400px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;}
.hero-tools-convert-options{display:flex; align-items:center;}
.hero-tools-convert-txt{color:#171717;}
.hero-tools-convert-selects{margin:0 15px;}
.hero-tools-convert-selects > .hero-tools-convert-details{border-radius:4px; border:1px solid #cedcff;}
.hero-tools-convert-details{background-color:#fff; color:#111112;}
.hero-tools-convert-selects > .hero-tools-convert-details[open]{border-bottom-right-radius:0; border-bottom-left-radius:0;}
.hero-tools-convert-details:not([open])::details-content{content-visibility:visible; height:0; visibility:hidden;}
.hero-tools-convert-summary, .hero-tools-cs-summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
.hero-tools-convert-summary{padding:3px 12px;}
.hero-tools-convert-summary::after, .hero-tools-cs-summary::after{content:''; mask:var(--arr-icon); -webkit-mask:var(--arr-icon); background-color:currentColor; margin-left:8px;}
.hero-tools-convert-summary::after{width:14px; height:9px;}
.hero-tools-convert-summary::-webkit-details-marker, .hero-tools-cs-summary::-webkit-details-marker{display:none;} /* Safari(包括 ios) 全版本和89版之前的 Chrome 去除默认的小三角 */
.hero-tools-convert-details[open] > .hero-tools-convert-summary::after, .hero-tools-cs-details[open] > .hero-tools-cs-summary::after{transform:rotate(180deg);}
.hero-tools-convert-formats{height:0; position:relative; z-index:1;}
.hero-tools-convert-formats .hero-tools-convert-details{box-shadow:0 0 0 1px #cedcff;}
.hero-tools-convert-formats .hero-tools-convert-details:last-of-type{border-radius:0 0 4px 4px;}
.hero-tools-convert-formatX{list-style:none;}
.hero-tools-convert-format{text-align:left; padding:2px 17px; cursor:pointer;}
.hero-tools-convert-format:hover{background-color:#CEDCFF;}
.hero-tools-convert-setX{margin:0 12px;}
.hero-tools-convert-setBtn, .hero-tools-convert-delBtn{display:block; mask:var(--icon); -webkit-mask:var(--icon); border:0 none; background-color:#252525; cursor:pointer;}
.hero-tools-convert-setBtn{--icon:url(../images/hero-tools/set-icon.svg) no-repeat; width:26px; height:26px;}
.active.hero-tools-convert-setBtn{background-color:#5097FF;}
.hero-tools-convert-setInfoX{position:absolute; text-align:left; display:inline-block; transform:translate(-50%, 10px); background-color:#F0F6FF; padding:30px 25px; border:1px solid #e1edff; border-radius:10px; z-index:1;}
.hero-tools-convert-setInfoX:not(.show){visibility:hidden;}
.hero-tools-cs-close{background-color:initial; border:0 none; color:#828fa2; font-size:23px; width:fit-content; -moz-width:fit-content; -webkit-width:fit-content; display:block; margin:-25px -15px 0 auto; line-height:1; cursor:pointer;}
.hero-tools-cs-title{font-size:23px; color:#272727; font-weight:400; line-height:1;}
.hero-tools-cs-item{margin-top:17px;}
.hero-tools-cs-subtitle{font-size:17px; color:#272727; font-weight:400; margin-bottom:8px;}
.hero-tools-cs-details{background-color:#fff; color:#464646; width:220px; border-radius:3px;}
.hero-tools-cs-summary{padding:8px 13px;}
.hero-tools-cs-summary::after{width:16px; height:10px;}
.hero-tools-cs-options{list-style:none;}
.hero-tools-cs-option{padding:6px 17px; cursor:pointer;}
.hero-tools-cs-option:hover{background-color:#BEDAFF;}
.hero-tools-convert-delX{margin:0 5px;}
.hero-tools-convert-delBtn{--icon:url(../images/hero-tools/del-icon.svg) no-repeat; width:24px; height:27px;}
.hero-tools-converting-x{display:flex; flex-grow:.4; color:#272727; align-items:center; display:none;}
.hero-tools-converting-formatX{margin-right:auto;}
.hero-tools-converting-format{font-style:normal;}
.hero-tools-converting-txt{margin-left:30px;}
.hero-tools-converting-progressBar{--progress:0; width:135px; height:5px; border-radius:100vw; background-color:#CEDCF0; overflow:hidden; margin:0 12px;}
.hero-tools-converting-progressBar::before{content:''; display:block; height:100%; background-color:#94CB30; width:var(--progress); border-radius:inherit; transition:width .2s;}
.hero-tools-converting-del{width:20px; height:20px; background-color:#fff; border-radius:50%; border:0 none; display:grid; place-items:center; flex:none; margin:0 5px; cursor:pointer;}
.hero-tools-converting-del::before{content:'\d7'; font-family:Arial; font-size:22px; line-height:1; color:#FE4A2D;}
.hero-tools-converting-tipX{grid-area:2 / 1 / 3 / -1; display:grid; place-items:center; visibility:hidden; background-color:#fff;}
.hero-tools-converting-tip{font-size:17px; color:#4e4e4e; line-height:1.7;}
.hero-tools-convert-more{display:grid; grid-template-areas:'btn1 btn2' 'con .'; margin-top:25px; grid-gap:10px; grid-template-columns:auto 1fr;}
.hero-tools-convert-moreBtn{display:flex; align-items:center; padding:15px 20px; font-size:19px; color:#5097ff; background-color:initial; border:1px solid; border-radius:5px; cursor:pointer; grid-area:btn1; justify-self:start;}
.hero-tools-convert-moreBtn::after{content:''; width:16px; height:10px; mask:var(--arr-icon); -webkit-mask:var(--arr-icon); background-color:currentColor; margin-left:13px;}
.active.hero-tools-convert-moreBtn::after{transform:rotate(180deg);}
.hero-tools-convert-moreCon{border:1px solid #cedcff; border-radius:10px; padding:17px 0; display:flex; align-items:center; grid-area:con; background-color:#fff; isolation:isolate; justify-self:start;}
.hero-tools-convert-moreCon:not(.show){visibility:hidden;}
.hero-tools-cm-info, .hero-tools-cm-product{margin:0 12px;}
.hero-tools-cm-info{background-color:#F0F6FF; border-radius:6px; text-align:left; padding:15px; border-right:solid #5097FF; position:relative;}
.hero-tools-cm-info::after{content:''; position:absolute; left:100%; bottom:20%; border:10px solid transparent; border-left-color:#5097FF; border-right:0 none;}
.hero-tools-cmi-title{font-size:15px; color:#5097ff; font-weight:400; margin-bottom:9px;}
.hero-tools-cmi-lists{}
.hero-tools-cmi-list{margin:5px 0 5px .9em; font-size:17px; color:#2e2f32; line-height:1.2;}
.hero-tools-cmi-list::marker{color:#5097FF;}
.hero-tools-cmp-titleX{display:flex; align-items:center; margin-bottom:12px;}
.hero-tools-cmp-titleIcon{margin-right:10px;}
.hero-tools-cmp-title{font-size:23px; color:#2e2f32;}
.hero-tools-cmp-desc{font-size:17px; color:#2e2f32; line-height:1.4; text-align:left;}
.hero-tools-cm-product .hero-tools-upload-btns{margin:10px 0 0 -5px;}
.hero-tools-cm-product .hero-tools-upload-down, .hero-tools-cm-product .hero-tools-ue-btn{font-size:15px; min-width:auto; padding:5px 12px; margin:5px;}
.hero-tools-cm-product .hero-tools-upload-down.win-icon::after, .hero-tools-cm-product .hero-tools-upload-down.mac-icon::after, .hero-tools-cm-product .hero-tools-upload-down.mobile-icon::after{width:16px; height:18px;}
.hero-tools-convert-btn{--icon:url(../images/hero-tools/convert-icon.svg) no-repeat; font-size:23px; color:#fff; background-color:#5097FF; border:0 none; border-radius:5px; display:flex; align-items:center; min-width:205px; justify-content:space-evenly; padding:13px; grid-area:btn2; justify-self:end;}
.hero-tools-convert-btn:disabled{opacity:.6; cursor:not-allowed;}
.hero-tools-convert-btn:not(:disabled){cursor:pointer;}
@keyframes rotate{to{transform:rotate(180deg);}}
.hero-tools-convert-btn::before{content:''; width:29px; height:24px; mask:var(--icon); -webkit-mask:var(--icon); background-color:currentColor; animation:rotate .4s linear infinite paused;}
.hero-tools-convert-btn:disabled::before{animation-play-state:running;}
.hero-tools-convert-succX{display:flex; align-items:center; flex-grow:.07; justify-content:space-between;}
.hero-tools-convert-succ{--icon:url(../images/hero-tools/succ-icon.svg) no-repeat; color:#41c933; display:flex; align-items:center;}
.hero-tools-convert-succ::before{content:''; width:22px; height:22px; mask:var(--icon); -webkit-mask:var(--icon); background-color:currentColor; margin-right:12px;}
.hero-tools-convert-popupBtn{--icon:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0H4V8H8V0Z' fill='black'/%3E%3Cpath d='M0 8H12L6 16L0 8Z' fill='black'/%3E%3C/svg%3E"); border:0 none; line-height:inherit; font-size:inherit; color:#fff; background-color:#94CB30; text-decoration:none; border-radius:5px; padding:5px 12px; display:flex; align-items:center; min-width:150px; box-sizing:border-box; justify-content:space-evenly; margin-left:20px; cursor:pointer;}
.hero-tools-convert-popupBtn::before{content:''; width:12px; height:16px; mask:var(--icon); -webkit-mask:var(--icon); background-color:currentColor;}
.hero-tools-convert-featX{margin-top:35px;}
.hero-tools-convert-featHint{font-size:17px; color:#2b2b2b; text-align:left; margin-bottom:10px;}
.hero-tools-convert-featA{color:#2486ff; text-decoration:none;}
.hero-tools-convert-featItems{display:flex; justify-content:space-between; text-align:left;}
.hero-tools-convert-featItem{margin:5px;}
.hero-tools-cfi-title{font-size:15px; color:#202020; border-bottom:1px solid #d9d9d9; margin-top:12px;}
.hero-tools-cfi-lists{}
.hero-tools-cfi-list{font-size:15px; color:#393939; margin:8px 0 8px 1em; line-height:1.1;}
.hero-tools-convert-succBtn .hero-tools-upload-down, .hero-tools-convert-succBtn .hero-tools-ue-btn{min-width:215px; padding:10px; font-size:19px;}
.hero-tools-convert-succBtn .hero-tools-upload-down.win-icon::after, .hero-tools-convert-succBtn .hero-tools-upload-down.mac-icon::after, .hero-tools-convert-succBtn .hero-tools-upload-down.mobile-icon::after{width:20px; height:23px;}
.hero-tools-grid-x{display:grid; border-radius:inherit;}
.hero-tools-grid-succ, .hero-tools-grid-popup{grid-area:1 / -1;}
.hero-tools-grid-succ{align-self:center;}
.hero-tools-grid-popup{margin:max(-2.5vw, -50px); background-color:rgba(0, 0, 0, .7); border-radius:inherit; display:grid; place-items:center; isolation:isolate; visibility:hidden;}
.hero-tools-popup-x{background-color:#F7F7F7; border-radius:15px; padding:1.5% 3.7%;}
.hero-tools-popup-title{font-size:19px; color:#050505; font-weight:400; margin-bottom:17px;}
.hero-tools-popup-con{background-color:#fff; border-radius:10px; display:grid; grid-auto-flow:column; grid-gap:7px min(.7vw, 15px); padding:15px min(1.3vw, 25px) 20px; grid-template-columns:1fr auto 1fr;}
.hero-tools-popup-info, .hero-tools-popup-icons, .hero-tools-pi-lists{display:contents;}
.hero-tools-popup-info:first-of-type .hero-tools-pi-title, .hero-tools-popup-info:first-of-type .hero-tools-pi-list{grid-column:1;}
.hero-tools-popup-vs, .hero-tools-popup-icon{grid-column:2;}
.hero-tools-popup-info:nth-of-type(3) .hero-tools-pi-title, .hero-tools-popup-info:nth-of-type(3) .hero-tools-pi-list{grid-column:3;}
.hero-tools-popup-info:first-of-type{text-align:right;}
.hero-tools-popup-info:nth-of-type(3){text-align:left;}
.hero-tools-pi-title, .hero-tools-popup-vs{margin-bottom:5px;}
.hero-tools-pi-title{font-size:17px; color:#1d1d1d; font-weight:400; align-content:center; padding:0 10px;}
.hero-tools-popup-vs{font-size:30px; color:#ff9232;}
.hero-tools-pi-lists{}
.hero-tools-popup-info:first-of-type .hero-tools-pi-list{background-color:#E5F1FF;}
.hero-tools-popup-info:nth-of-type(3) .hero-tools-pi-list{background-color:#FFEFD7;}
.hero-tools-pi-list{border-radius:100vw; padding:5px clamp(10px, 1.1vw, 25px); font-size:17px; color:#303030; line-height:1; display:block; align-content:center;}
.hero-tools-popup-icon{place-self:center;}
.hero-tools-popup-icon > svg{display:block;}
.hero-tools-popup-x .hero-tools-upload-btns{margin-top:15px;}
.hero-tools-popup-x .hero-tools-upload-down, .hero-tools-popup-x .hero-tools-ue-btn{min-width:250px; padding:12px; font-size:17px; margin:6px;}
.hero-tools-popup-x .hero-tools-upload-down.win-icon::after, .hero-tools-popup-x .hero-tools-upload-down.mac-icon::after, .hero-tools-popup-x .hero-tools-upload-down.mobile-icon::after{width:20px; height:23px; margin-left:10px;}