@charset "utf-8";
html, body {scroll-behavior: smooth;}
h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, input{margin:0;}
ol, ul{padding:0; list-style:none;}
a{color:inherit; text-decoration:none;}
img{vertical-align:middle; max-width:100%;}

body{background: #fff;}
h2{text-align: center;line-height: 1;}
.banner-wrap,.how-wrap {width: 1150px;margin: 0 auto;}


.banner {padding: 50px 0 42px;background: linear-gradient(#f0f3fa 50%, #f7f9fc);}
h1 {font-weight: 600;line-height: 1;text-align: center;}
.banner-p {font-size: calc(.77rem + .3vw);color: #4e4f4f;line-height: 1.3;padding: 12px 0 45px;text-align: center;}
.banner-navs {display: flex;justify-content: center;flex-wrap: wrap;gap: 13px;padding-bottom: 60px;}
.banner-nav {min-width: 212px;box-sizing: border-box;padding: 10px 22px;background-color: #e8eaf3;border-radius: 14px;display: flex;justify-content: center;align-items: center;gap: 16px;font-size: 17px;color: #000;line-height: 1.5;position: relative;}
.banner-nav.active {color: #fff;background-color: #000;}
.banner-nav.active::after {content: "";border-left: 14px solid transparent;border-right: 14px solid transparent;border-top: 14px solid #000;position: absolute;top: 100%;left: 50%;margin-left: -14px;}
.banner-nav::before {content: "";height: 41px;flex-shrink: 0;background-image: url(../images/tools/pixel-calculator/icons.png);background-position-y:-10px;}
.banner-nav.active::before {background-image: url(../images/tools/pixel-calculator/icons.png);}
.banner-nav.nav1::before {width: 39px;background-position-x:-66px;}
.banner-nav.nav2::before {width: 51px; height: 43px;background-position-x: -261px;}
.banner-nav.nav3::before {width: 48px; height: 46px;background-position-x: -125px;}
.banner-nav.nav4::before {width: 36px; height: 37px;background-position-x: -10px;}
.banner-nav.nav5::before {width: 48px; height: 37px;background-position-x: -193px;}
/*--工具 start--*/
:root {
	--primary-color: #007bff;
	--secondary-color: #6c757d;
	--background-color: #f8f9fa;
	--surface-color: #ffffff;
	--text-color: #212529;
	--border-color: #bfbfbf;
	--border-radius: 0.3rem;
	--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	--success-color: #28a745;
	--muted: #6c757d;
	--text-active-color: #537bff;
}
.calculator {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
	color: #7c7c7c;
}
.calculator-left{border: 1px solid #7ea2ff;border-radius: 25px;background: rgba(253, 254, 254, 0.5);padding: 40px 30px;}
.calculator-left-top{padding: 0 20px;}
.tab-selection {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.tab-box{background: #ebedf7;border-radius: 8px;display: flex;margin-left: 10px;}
.tab {
	padding: 0.20rem 1rem;
	border-right: 1px solid var(--border-color);
	/* border-radius: var(--border-radius); */
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	font-weight: 500;
	user-select: none;
}
.tab:last-child{border-right: none;}
.tab.active {
	color: var(--text-active-color);
	background-color: #fff;
	border-radius: var(--border-radius) ;
	border-right: none;
}

.tab:not(.active):hover {
	background-color: #e9ecef;
}

.dimension-inputs-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7rem;
	padding: 1.5rem 0 1.75rem;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.input-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.density-title{display: flex;}
.density-title .tab{padding: 0 1rem;}
.tab-pi-selection{display: flex;padding: 20px 0 50px;}
.tab-pi-box{display: flex;border: 1px solid var(--border-color);border-radius: var(--border-radius);display: flex;}
.tab-pi{padding: 0.2rem 1rem;user-select: none;cursor: pointer;border-right: 1px solid var(--border-color);}
.tab-pi:last-child{border:none;}
.tab-pi.active{color: var(--text-active-color);}
.tab-pi-selection input{border-radius: var(--border-radius);border: 1px solid var(--border-color);margin-left: 10px;font-size: 17px;padding: 0 10px; width:100px;}

/* .input-group-label {
	margin-bottom: 0.5rem;
} */

.input-row label {
	font-weight: 500;
	width: 50px;
	color: #000;
}

.input-wrapper {
	display: flex;
	align-items: center;
	position: relative;
	flex-grow: 1;
}

.input-wrapper input {
	width: 100%;
	padding: 0.25rem 2.75rem 0.25rem 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 0.85rem;
	transition: border-color 0.2s;
}


.input-wrapper input:focus {
	outline: none;
	border-color: var(--primary-color);
}

.input-unit {
	position: absolute;
	right: 1rem;
	color: var(--secondary-color);
	text-transform: lowercase;
}

.aspect-ratio-template-group {
	padding:20px;
	display: grid;
	grid-template-columns: 0.5fr 1fr 100px;
	gap: 2rem;
	background: #eaeef7;
	border-radius: 15px;
}

.dropdown-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.dropdown-group label {
	font-weight: bold;
	margin-bottom: 0.5rem;
	color: #000;
}
.dropdown-group input {
	padding:0.25rem 0.75rem;
	border:none;
	border-radius: var(--border-radius);
	font-size: 1rem;
	cursor: pointer;
	width: 100%;
	font-size: 17px;
	box-sizing: border-box;
}
.dropdown-group input#aspect-ratio{pointer-events: none;}

.dropdown-group select {
	padding:0.25rem 0.75rem;
	border:none;
	border-radius: var(--border-radius);
	font-size: 1rem;
	cursor: pointer;
	width: 100%;
	font-size: 17px;
}
.dropdown-group.scale input{border: none;padding: 0.25rem 0.75rem;border-radius: var(--border-radius);font-size: 17px;}

/* Image upload section */
.image-upload-container {background: #fff;	border-radius:25px;}
.imge-upload-title{color: #000;font-size: 21px;padding-bottom: 15px;}
.image-upload-area {
	background: #f7f9fc;
	border: 1px dashed var(--border-color);
	border-radius:25px 25px 0 0;
	border-bottom: none;
	padding:1rem 0;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; */
	position: relative;
}

.image-upload-area:hover, .image-upload-area.dragover {
	border-color: var(--primary-color);
	background-color: rgba(0, 123, 255, 0.05);
}

.image-upload-area i {
	font-size: 3rem;
	color: var(--secondary-color);
}

.upload-text {
	margin: 0;
	color: #000;
	padding-top: 15px;
	font-size: 19px;
}

.image-upload-area button {
	margin-top: 5px;
	padding: 0.5rem 1.5rem;
	border:1px solid var(--primary-color);
	color: var(--primary-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 19px;
	background-color: transparent;
	transition: background-color 0.2s;
}

.image-upload-area button:hover {
	background-color: #0069d9;
	color: #fff;
}

.image-preview {
	max-width: 100%;
	max-height: 150px;
	border-radius: var(--border-radius);
	display: none;
	margin: 0 auto;
}
.or-text{border-top: 1px solid var(--border-color);margin:15px 50px;height: 0;}
.or-text span{margin-top: -13px;display: inline-block;padding: 0 10px; vertical-align: top;color: #bfbfbf;background: #f7f9fc;;}
.image-info { padding-top: 1rem;display: flex;flex-direction: column;align-items: center;}
.info-title{display: flex;align-items: center; justify-content: center;color: #000;}
.info-text{display: inline-grid;grid-template-columns:auto auto;padding:10px 0 10px 0;column-gap: 20px;}
.image-upload-mess{font-size: 15px;color:#83858a;padding-top: 10px;}
/* .info-group { display: flex; margin-bottom: 1rem; font-size: 15px; } */

.info-label {
	margin-bottom: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.info-value {
	color: var(--text-color);
}

.info-value.empty {
	color: var(--secondary-color);
	font-style: italic;
}

.image-loaded-text {
	font-weight: 500;
	color: var(--success-color);
	margin-bottom: 0.5rem;
}

/* copy button styling */
.copy-btn {
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 0.95rem;
}
.copy-btn:hover {
	color: var(--primary-color);
	background: rgba(0,123,255,0.06);
	border-color: rgba(0,123,255,0.12);
}
.copy-icon {
	font-size: 0.95rem;
}

/* reset button styling near mm tab */
.reset-btn {
	margin-left: auto;
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	border: 1px solid var(--border-color);
	cursor: pointer;
	font-size: 17px;
	background-color: #fff;
	color: #7c7c7c;
}
.reset-btn:hover {
	background: rgba(220,53,69,0.1);
	border-color: #f02634;
	/* color: #dc3545; */
}

@media (max-width: 1200px) {
	.calculator{padding:0 10px;}
}
@media (max-width: 979px) {
	.calculator-left-top{padding: 0;}
}

@media (max-width: 768px) {
	.container { padding: 1.5rem; }
	.calculator { grid-template-columns: 1fr; }
	.dimension-inputs-container { grid-template-columns: 1fr; gap: 1.5rem; }
	.aspect-ratio-template-group { grid-template-columns: 1fr; }
	.tab-selection { flex-wrap: wrap; }
	.info-text{width: 50%;margin: 0 auto;padding-left: 0;}
}
@media (max-width: 479px) {
	.tab-pi-box{flex-wrap: wrap;}
	.calculator-left{padding: 40px 5px;}
	.tab-pi{padding: 0.2rem 0.7rem;}
	.tab-pi-selection{flex-wrap: wrap;}
	.tab-pi-selection input{margin-left: auto;margin-top: 5px;}
}
/*--工具 end--*/


@media (max-width: 1280px) {
    .banner-wrap {width: 96%;}
	.banner-nav.active::after {display: none;}
	
}
@media (max-width: 479px) {
	
}
/* ----------------------------- */
.main-how{background: linear-gradient(#f7f9fc,#fff);padding: 30px 0;}
.how-h2{text-align: center;padding: 0 0 50px;}
.how-content{display: grid;grid-template-columns: 1fr 1fr 1fr;column-gap: 90px;grid-row-gap: 30px;}
.how-item-t{border-bottom: 1px solid #dcdcdc;padding-bottom: 13px;margin-bottom: 13px;}
.how-item-t span{display: inline-block;border-radius: 5px;background: #eef7ff;width: 32px;line-height:32px;color: #0060fa;text-align: center;}
.how-bottom-title{text-align: center;padding: 60px 0 0;}
@media (max-width: 1150px) {
	.banner-wrap, .how-wrap{width: auto;}
}
@media (max-width: 979px) {
	.how-content{column-gap:20px;}
}
@media (max-width: 767px) {
	.how-content{grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 479px) {
	.how-content{grid-template-columns: 1fr;}
}
/* ----------------------------- */
.main-enhancer{background: #000;padding: 45px 0;}
.enhancer-text{width: 820px;margin: 0 auto;text-align: center;}
.enhancer-text h2{padding-bottom: 20px;}
.enhancer-imgs{display: flex;justify-content: space-between;}
.enhancer-imgs{background-color:#000; padding:40px 0 50px;}
.ai-um-wrap{display:flex; justify-content:center;}
.ai-um-wrap > :first-child{text-align:right;}
.ai-um-wrap > :last-child > :first-child{margin-top:6%;}
.ai-um-img-wrap{ display:inline-block; position:relative;border-radius: 24px;overflow: hidden;}
.ai-um-img-wrap:first-child,.ai-um-img-wrap:last-child{margin-top: -75px;}
.ai-um-img-wrap:first-child{border-top-left-radius:0;border-bottom-left-radius:0;}
.ai-um-img-wrap:last-child{border-top-right-radius:0;border-bottom-right-radius:0;}
.ai-um-title{line-height:1.1; color:inherit; text-align:initial; margin-bottom:40px;}
.ai-um-title-highlight{color:#f28518;}
.main-img-compare-x{position:relative;}
.main-img-compare{position:absolute;  bottom:0; height:95%; }
.main-img-compare::before{content: "";position: absolute;top: 0;right: 0;left: 0;height: 1px;background: linear-gradient( to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5) 1px, transparent 1px );}
.main-img-compare div{margin-top: -25px;text-align: right;padding-right: 15px;}
/* .main-img-compare div:first-of-type{bottom:100%; margin-bottom:4px;}
.main-img-compare div:last-of-type{top:0;} */
.main-img-compare-x img, .ai-um-img-wrap img{max-width:100%; height:auto;}
.main-img-compare > img{object-fit:cover; object-position:bottom; height:100%;}
.enhancer-btn{text-align: center;}
.enhancer-btn >a{background: #92cf3f;border-radius: 5px;display: inline-block; line-height: 54px;padding: 0 30px;}
.enhancer-btn >a span{position: relative;margin-left: 10px;}
.enhancer-btn >a span::after{content: "";display: inline-block;width:4px;height: 16px;background: #fff;;}
.enhancer-btn >a span::before{content: "";position: absolute;right: -5px;bottom: 0; border-top: 10px solid #fff;border-left: 7px solid transparent;border-right: 7px solid transparent;}
.enhancer-watch{padding-top: 10px;color: #6b6d7d;}
.enhancer-watch span{cursor: pointer;}
.enhancer-watch a{color: #6b6d7d;}
.ytb-popu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .8); z-index: 9999; z-index: 99; display: none; }
.ytb-popu-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } 
.ytb-popu-box { max-width: 1280px; position: relative; color: #fff; } 
#ytb-popu-close { position: absolute; right: 0; top: -30px; font-size: 27px; line-height: 25px; display: block; cursor: pointer; }

@media (max-width:1400px) {
	.enhancer-imgs{gap:20px;align-items: flex-end;}
	
}
@media (max-width: 979px) {
	.enhancer-text{width: auto;}
}
@media (max-width: 979px) {
	.main-img-compare div{font-size: 15px;}
	.ai-um-img-wrap:first-child,.ai-um-img-wrap:last-child{display: none;}
}
/* ----------------------------- */


.article {padding: 90px 0 0;background-color: #fff;}
.article-wrap {width: 1280px;margin: 0 auto;}
.article-h2 {line-height: 1;text-align: center;padding-bottom: 50px;}
.article-cards {display: flex;justify-content: center;flex-wrap: wrap;gap: 36px 26px;}
.article-cards>li {width: 300px;border-radius: 20px;overflow: hidden;background-color: #f5f5fa;transition: all 0.2s;}
.article-cards>li:hover {transform: translateY(-5px);}
.compare-img {position:relative;overflow: hidden;}
.compare-before{position:absolute; height:100%; width:calc(var(--wid, .5) * 100%); object-fit:cover; object-position:0;}
.compare-after{vertical-align:middle;}
.compare-img > [type=range]{position:absolute; width:100%; height:100%; opacity:0; -webkit-appearance:none; appearance:none; cursor:ew-resize; margin:0;}
.compare-img > [type=range]::-moz-range-thumb{width:0;}
.compare-img > [type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:0;}
.compare-line{position:absolute; top:0; bottom:0; left:calc(var(--wid, .5) * 100%); pointer-events:none; width:1px;background-color: #fff; margin-left:-0.5px;}
.article-card-content {padding: 44px 20px 40px;display: flex;flex-direction: column;justify-content: space-between;}
.article-card-h3 {font-size: calc(.77rem + .3vw);color: #000;line-height: 1;}
.article-card-p {color: #666;line-height: 1.3;padding: 16px 0 38px;}
.article-card-btn {display: block;line-height: 50px;font-size: calc(.77rem + .3vw);color: #fff;text-align: center;border-radius: 100vw;background-color: #0060fa;transition: all 0.2s;}
.article-card-btn:hover {box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);}
@media (max-width: 1280px) {
	.article-wrap {width: 96%;}
}
/* ----------------- */
.main-solutions{padding: 70px 0 50px;}
.Solutions-table table{border: 2px solid #eaeef7;border-radius: 10px;width: 1200px;margin: 15px auto 0;}
.Solutions-table table tr th{text-align: left;background: #f5f5fa;padding: 10px 0;}
.Solutions-table table tr th:nth-child(3),.Solutions-table table tr th:nth-child(4){text-align: center;}
.Solutions-table table tr td{padding: 12px 0;}
.Solutions-table table tr th:first-child,.Solutions-table table tr td:first-child{padding-left: 30px;}
.Solutions-table table tr:nth-child(odd) td{background: #f5f8ff;}
.Solutions-table table tr td:nth-child(3){text-align: center;}
.Solutions-table table tr td:nth-child(4){padding-left: 30px;}
.Solutions-table table tr td:last-child{padding-left: 10px;}
@media (max-width: 1200px) {
	.Solutions-table table{width: 100%;}
}
@media (max-width: 767px) {
	.Solutions-table{overflow-x: scroll;}
	.Solutions-table table{width: 900px; }
	.Solutions-table table tr td:nth-child(4){width:250px;}
}
/* ----------------- */
.main-print{background: url(../images/tools/pixel-calculator/bg1.jpg) no-repeat center bottom/100%;position: relative;}
.main-print::after{content: "";width:100%;padding-bottom: 20%;display: block;}
.main-print h2{padding-bottom: 15px;}
.main-print .print-text{padding:50px 0 30px;background: #fff;}
.print-pic{padding: 50px 0 0;}
.print-down{position: absolute;bottom: 20%;left: 50%;transform: translateX(-50%);}
.print-down a{background: #fff;border-radius: 24px;line-height: 48px;display: inline-flex;padding: 0 30px 0 13px;align-items: center;gap: 15px;color: #0060fa;cursor: pointer;}


@media (max-width: 1670px) {
	.main-print{background-color: #faf9f7;}
	.print-pic{padding:10px;}
}
@media (max-width: 479px) {
	
}
/* ----------------- */
.main-base{background: linear-gradient(#f0f3fa,#fff);padding: 70px 0 50px;}
.base-content{display: flex;justify-content: center;gap: 60px;padding: 40px 0 0;}
.base-pic{display: flex;flex-direction: column;row-gap: 20px;}
.base-text h3{padding-bottom: 10px;}
.base-text h3:nth-of-type(2),.base-text h3:nth-of-type(3){padding-top: 30px;}
.base-text p{padding: 1px 0;}

@media (max-width: 979px) {
	.base-pic{flex-direction: row;gap: 10px;}
	.base-content{flex-direction: column;align-items: center;}
}
@media (max-width: 767px) {
	.base-pic{flex-direction: column;gap: 10px;}
}
/* ----------------- */

.faq {padding: 60px 0 70px;background-color: #fff;}
.faq-wrap {width: 1280px;margin: 0 auto;}
.faq-h2 {margin-bottom:50px; text-align:center; line-height:1;font-weight: 600;}
.qes_one{border-top:1px solid #e6e6e6;padding:18px 0 8px;text-align:left;}
.qes_one .t{font-size:21px;cursor:pointer;padding:0 30px 10px 0;position:relative;color:#000;}
.qes_one .t i{position:absolute;right:0;top:0px;display:inline-block;width:31px;height:31px;border-radius:50%;color:#000;background:#ffffff;}
.qes_one .t i:after{position:absolute;left:50%;top:50%;content:"";display:inline-block;width:19px;height:19px;background:linear-gradient(currentColor,currentColor) no-repeat center / 100% 3px,linear-gradient(currentColor,currentColor) no-repeat center / 3px 100%;transform:translate(-50%,-50%);}
.qes_one .qes_ans{color:#737480;display:none;font-size: 17px;color: #4c4c4c;line-height: 1.5;}
.qes_one .qes_ans p{margin-bottom: 5px;}
.qes_one .qes_ans ul {margin-bottom: 5px;}
.qes_one .qes_ans ul li{position: relative;padding-left: 15px;}
.qes_one .qes_ans ul li::before{position: absolute;content: '';display: block;width: 5px;height: 5px;background-color: #333;left: 0;top: 10px;border-radius: 50%;}
.qes_one.focus .t i{color:#ffffff;background:#000000;}
.qes_one.focus .t i:after{background:linear-gradient(currentColor,currentColor) no-repeat center / 100% 3px;}
.qes_one.focus .qes_ans{display:block;}
.qes_one a{color:#2691fc;}
@media (max-width: 1280px) {
	.faq-wrap {width: 96%;}
}