@charset 'UTF-8';

.banner-tools{background:linear-gradient(72deg, #f0f8ff 35%, #e0ecff 41%, #c5d7ff 47%, #a2bdff 53%, #7ea2ff 59%, #5b88ff 65%, #4073ff 71%, #3067ff 77%, #3779ff 77.9%, #3d87ff 78.3%, #4297ff 78.7%, #48a5ff 79.1%, #4cb0ff 79.6%, #4fb7ff 80%, #4ab2fd 82.9%, #40a9f9 85.7%, #349ef5 88.6%, #2791f0 91.4%, #1b86ec 94.3%, #117de8 97.1%, #0c78e6) no-repeat; padding:min(2vw, 40px) 0;}
.banner-tools-wrap{display:flex; justify-content:space-between; align-items:center;}
.banner-tools-product, .banner-tools-converter{margin:0 6px;}
.banner-tools-product-subtitle{font-size:16px; color:#fff; background:linear-gradient(to right, #2f9aff, #6b38fc) no-repeat; border-radius:100vw; width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; padding:0 10px; margin-bottom:9px;}
.banner-tools-product-title{font-size:34px; line-height:1;}
.banner-tools-pt-b{color:#000;}
.banner-tools-pt-tip{font-size:62%; display:block; margin-top:6px;}
.banner-tools-product-line{border:0 none; border-top:1px solid; color:rgba(0, 0, 0, .1); margin:16px 0;}
.banner-tools-product-tip{font-size:18px; line-height:1; margin:15px 0;}
.banner-tools-pt-hint{font-size:127%; display:block; margin-top:6px;}
.banner-tools-pt-a{}
.banner-tools-product-lists{margin:15px 0;}
.banner-tools-product-list{font-size:16px; line-height:1.1; margin:12px 0; background:url("data:image/svg+xml,%3Csvg width='16' height='11' viewBox='0 0 16 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6724 0.531L5.60134 9.60201L0.53033 4.531' stroke='%234D4D4D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat 0 4px; padding-left:23px;}
a.banner-tools-product-down{display:block; width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; font-size:18px; color:#fff; background-color:#80CB1B; border-radius:7px; padding:9px 5.7%; margin-top:23px;}
a.banner-tools-product-down:hover{text-decoration:none;}
.banner-tools-converter{flex-basis:475px; word-break:break-word; background-color:#fff; border-radius:12px; box-shadow:0 9px 16px rgba(0, 52, 102, .4); padding:3%; box-sizing:border-box;}
.banner-tools-converter-uploader{text-align:center;}
.banner-tools-cu-area{border:2px dashed #549ffd; border-radius:10px; padding:4% 7px; position:relative;}
.banner-tools-converter-title{font-size:16px; color:#000; line-height:1.1;}
.banner-tools-cua-icon{margin:7% 0;}
.banner-tools-converter-btn{font-size:18px; color:#fff; background:linear-gradient(to right, #2f9aff, #6b38fc, #2f9aff) no-repeat 0 / 200%; padding:10px; display:block; border-radius:6px; min-width:min(100%, 220px); width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; margin:0 auto; box-sizing:border-box; border:0 none; transition:background-position .3s;}
.banner-tools-converter-btn:disabled{filter:grayscale(1); cursor:no-drop;}
.banner-tools-converter-btn:not(:disabled){cursor:pointer;}
.banner-tools-cu-area:hover .banner-tools-converter-btn, .banner-tools-converter-btn:hover{background-position:100%;}
.banner-tools-cua-size{font-size:16px; color:#808080;}
.banner-tools-cua-input{position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer; opacity:0;}
.banner-tools-cu-more{font-size:16px; margin-top:8px; display:block;}
.banner-tools-converter-steps{display:none;}
.banner-tools-csf-wrap{display:flex; justify-content:space-between; font-size:16px; margin-bottom:17px;}
.banner-tools-csf-info{display:flex;}
.banner-tools-csf-name{color:#000; max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.banner-tools-csf-name::before{content:''; display:inline-block; width:29px; height:21px; background:url(../images/banner-tools/file-icon.svg) no-repeat; margin-right:6px; vertical-align:middle;}
.banner-tools-csf-size{color:#808080; margin:0 12px;}
.banner-tools-csf-btn{color:#2f9aff; background-color:initial; border:0 none; font-size:inherit;}
.banner-tools-csf-btn:not(:disabled){cursor:pointer;}
.banner-tools-cs-wrap{background-color:#E7EDF4; border-radius:8px; padding:5%; display:none;}
.banner-tools-cso-lists{display:grid; grid-auto-columns:auto 1fr; grid-gap:14px 10px; align-items:center; margin:17px 0;}
.banner-tools-cso-list{display:contents; font-size:16px;}
.banner-tools-csol-title{grid-column:1;}
.banner-tools-cs-details{grid-column:2;}
.banner-tools-cs-details:not([open])::details-content{content-visibility:visible; height:0; visibility:hidden;}
.banner-tools-cs-details[open] .banner-tools-cs-summary{border-bottom-right-radius:0; border-bottom-left-radius:0;}
.banner-tools-cs-summary, .banner-tools-css-option{background-color:#fff; padding:3px 12px; cursor:pointer;}
.banner-tools-cs-summary{display:flex; align-items:center; justify-content:space-between; border-radius:4px;}
.banner-tools-cs-summary::after{content:''; width:18px; height:10px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6703 0.531L8.60031 8.60201L0.530365 0.531' stroke='%232F9AFF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat;}
.banner-tools-cs-summary::-webkit-details-marker{display:none;} /* Safari(包括 ios) 全版本和89版之前的 Chrome 去除默认的小三角 */
.banner-tools-cs-details[open] .banner-tools-cs-summary::after{transform:rotate(180deg);}
.banner-tools-css-options{height:0; isolation:isolate;}
.banner-tools-css-option{}
.banner-tools-css-option:hover{background-color:#CEDCFF;}
.banner-tools-css-option:last-of-type{border-radius:0 0 4px 4px;}
.banner-tools-cscp-wrap{display:flex; flex-flow:column; background-color:#fff; border-radius:6px; padding:6%; margin:17px 0; font-size:16px; color:#000; line-height:1;}
.banner-tools-cscp-percent{color:#2f9aff;}
.banner-tools-csc-progress{--progress:0; height:12px; background:linear-gradient(to right, #2F9AFF var(--progress), transparent 0) no-repeat, #E7EDF4; border-radius:100vw; margin-top:15px;}
.banner-tools-cscp-done{font-style:normal; color:#80cb1b; display:none;}
.banner-tools-csc-db{display:none; justify-content:center;}
.banner-tools-csc-btn, .banner-tools-csc-back, a.banner-tools-csc-down{font-size:18px; color:#fff; padding:10px; border-radius:6px;}
.banner-tools-csc-btn, .banner-tools-csc-back{background-color:#97ADC6; border:0 none; cursor:pointer;}
.banner-tools-csc-btn{min-width:min(100%, 220px); display:block; margin:0 auto;}
.banner-tools-csc-back, .banner-tools-csc-down{min-width:min(100%, 180px); margin:5px 5px 0;}
.banner-tools-csc-down{--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"); background-color:#94CB30; display:flex; align-items:center; justify-content:space-evenly; box-sizing:border-box;}
a.banner-tools-csc-down:hover{text-decoration:none;}
.banner-tools-csc-down::before{content:''; width:12px; height:16px; -webkit-mask:var(--icon); mask:var(--icon); background-color:currentColor;}
.banner-tools-popup-wrap{position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0, 0, 0, .6); display:none; place-items:center; z-index:1;}
.banner-tools-error-popup{background-color:#fff; border-radius:10px; padding:2%; text-align:center; position:relative; display:none;}
.banner-tools-popup-close{background-color:initial; border:0 none; font-size:33px; font-family:Arial; line-height:1; color:#777; position:absolute; right:7px; top:2px; cursor:pointer;}
.banner-tools-ep-icon{margin-bottom:15px;}
.banner-tools-ep-title{font-size:18px; color:#000; display:block;}
.banner-tools-ep-tip{font-size:18px; display:block;}
.banner-tools-ep-size{color:#ff6b4d;}
.banner-tools-ep-line{border:0 none; border-top:1px solid; width:94%; color:rgba(0, 0, 0, .1); margin:20px 0;}
.banner-tools-ep-product{font-size:16px; color:#000; background:url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 19C14.7467 19 19 14.7467 19 9.5C19 4.25329 14.7467 0 9.5 0C4.25329 0 0 4.25329 0 9.5C0 14.7467 4.25329 19 9.5 19Z' fill='%2380CB1B'/%3E%3Cpath d='M14.008 6L8.659 12.008L4.992 7.97198' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat 0 4px; padding-left:23px;}
.banner-tools-ep-product a{color:#2f78ff; text-decoration:none;}
.banner-tools-epd-wrap{margin-top:10px;}
.banner-tools-ep-down{display:inline-flex; align-items:center; font-size:22px; color:#fff; background-color:#0FB4FF; text-decoration:none; padding:12px 15px; border-radius:5px;}
.banner-tools-ep-down.icon{--icon:url(../images/banner-tools/win-mac.svg) no-repeat;}
.banner-tools-ep-down.icon::after{content:''; width:36px; height:16px; -webkit-mask:var(--icon); mask:var(--icon); background-color:#fff; margin-left:8px;}
.banner-tools-vs-popup{background-color:#fff; border-radius:15px; padding:1.3% 3%; position:relative; display:none;}
.banner-tools-vp-title-x:nth-of-type(2), .banner-tools-vp-title-x:nth-of-type(3),
.resolution .banner-tools-vp-title-x:nth-of-type(1),
.slow .banner-tools-vp-title-x:nth-of-type(1){display:none;}
.resolution .banner-tools-vp-title-x:nth-of-type(2), .slow .banner-tools-vp-title-x:nth-of-type(3){display:revert;}
.banner-tools-vp-title{font-size:20px; color:#000; text-align:center; padding:0; margin-bottom:20px;}
.banner-tools-vpt-tip{font-weight:400; display:block; margin-top:4px;}
.banner-tools-vp-con{display:grid; grid-auto-flow:column; grid-gap:7px min(.7vw, 15px); grid-auto-columns:1fr auto 1fr;}
.banner-tools-vp-info, .banner-tools-vp-icons, .banner-tools-vpi-lists{display:contents;}
.banner-tools-vp-info:first-of-type .banner-tools-vpi-title, .banner-tools-vp-info:first-of-type .banner-tools-vpi-list{grid-column:1;}
.banner-tools-vp-vs, .banner-tools-vp-icon{grid-column:2;}
.banner-tools-vp-info:nth-of-type(3) .banner-tools-vpi-title, .banner-tools-vp-info:nth-of-type(3) .banner-tools-vpi-list{grid-column:3;}
.banner-tools-vp-info:first-of-type{text-align:right;}
.banner-tools-vp-info:nth-of-type(3){text-align:left;}
.banner-tools-vpi-title, .banner-tools-vp-vs{margin-bottom:5px;}
.banner-tools-vpi-title{font-size:17px; color:#1d1d1d; font-weight:400; padding:0 clamp(10px, 1.1vw, 25px);}
.banner-tools-vp-vs{font-size:30px; color:#ff9232;}
.banner-tools-vp-info:first-of-type .banner-tools-vpi-list{background-color:#E5F1FF;}
.banner-tools-vp-info:nth-of-type(3) .banner-tools-vpi-list{background-color:#FFEFD7;}
.banner-tools-vpi-list{border-radius:100vw; padding:5px clamp(10px, 1.1vw, 25px); font-size:17px; color:#303030; line-height:1;}
.banner-tools-vpi-list:nth-of-type(1), .banner-tools-vpi-list:nth-of-type(2), .banner-tools-vpi-list:nth-of-type(3){color:#ff9232;}
.banner-tools-vpi-list:nth-of-type(2), .banner-tools-vpi-list:nth-of-type(3),
.banner-tools-vp-icon:nth-of-type(2), .banner-tools-vp-icon:nth-of-type(3),
.resolution .banner-tools-vpi-list:nth-of-type(1), .resolution .banner-tools-vp-icon:nth-of-type(1),
.slow .banner-tools-vpi-list:nth-of-type(1), .slow .banner-tools-vp-icon:nth-of-type(1){display:none;}
.resolution .banner-tools-vpi-list:nth-of-type(2), .resolution .banner-tools-vp-icon:nth-of-type(2),
.slow .banner-tools-vpi-list:nth-of-type(3), .slow .banner-tools-vp-icon:nth-of-type(3){display:revert;}
.banner-tools-vp-icon{place-self:center;}
.banner-tools-vp-icon > svg{display:block;}
.banner-tools-vp-btns{margin-top:15px; display:flex; justify-content:center;}
.banner-tools-vp-btn{margin:7px 2%;}
.banner-tools-vpb-continue, .banner-tools-vpb-down{font-size:18px; padding:10px; border-radius:6px; min-width:220px;}
.banner-tools-vpb-continue{line-height:inherit; color:#0fb4ff; background-color:initial; border:0 none; box-shadow:inset 0 0 0 1.5px; cursor:pointer;}
.banner-tools-vpb-down{color:#fff; background-color:#94CB30; text-decoration:none; display:block; width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; text-align:center; box-sizing:border-box;}

@media(max-width:1200px){}