@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%;}

.banner {padding: 50px 0 90px;background: linear-gradient(#f0f3fa, #fff 50%);text-align: center;}
.banner-wrap {width: 1280px;margin: 0 auto;}
h1 {font-weight: 600;line-height: 1;}
.banner-p {font-size: calc(.77rem + .3vw);color: #4e4f4f;line-height: 1.3;padding: 12px 0 45px;}
.effect-items {display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;}
.effect-items>button {width: 205px;box-sizing: border-box;padding: 4px;display: flex;align-items: center;gap: 12px;border-radius: 18px;background-color: #e8eaf3;cursor: pointer;position: relative;outline: none;border: none;}
.effect-items>button.active {background-color: #000;}
.effect-items>button.active::after {content: "";border-top: 13px solid #000;border-left: 13px solid transparent;border-right: 13px solid transparent;position: absolute;top: 100%;left: 50%;margin-left: -13px;}
.effect-item-img {display: flex;border-radius: 14px;overflow: hidden;flex-shrink: 0;}
.effect-item-p {line-height: 1.4;text-align: left;}
.effect-items>button.active .effect-item-p {color: #fff;}
.effect-titles {padding: 70px 0 32px;font-size: calc(.77rem + .3vw);color: #333;line-height: 1.1;}
.effect-titles>li {display: none;}
.effect-titles>li.active {display: block;}
.effect-ex-upload {display: flex;justify-content: center;gap: 40px;flex-wrap: wrap;padding-bottom: 100px;}
.effect-ex {width: 740px;}
.effect-ex>li {display: none;border-radius: 20px;overflow: hidden;position: relative;}
.effect-ex>li.active {display: flex;}
.effect-ex-tag {line-height: 50px;padding: 0 24px;background-color: #000;border-radius: 12px;position: absolute;top: 10px;left: 10px;}
.effect-upload {width: 500px;box-sizing: border-box;padding: 20px 20px 6px;border: 2px dashed #fc712b;border-radius: 20px;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;gap: 66px;}
.effect-upload-top {width: 100%;}
.effect-upload-top-p {font-size: calc(.77rem + .3vw);color: #000;line-height: 1.1;padding: 48px 0 22px;}
.effect-upload-top-line {font-size: calc(.77rem + .3vw);color: #bbb;line-height: 1;display: flex;justify-content: center;align-items: center;gap: 5px;padding-bottom: 24px;}
.effect-upload-top-line::before,.effect-upload-top-line::after {content: "";width: 102px;height: 1px;background-color: #e3e3e4;}
#uploadImg {display: none;}
#uploadImg+label {display: block;width: 234px;line-height: 48px;font-size: calc(.77rem + .3vw);color: #fff;border-radius: 5px;background-color: #0060fa;cursor: pointer;margin: 0 auto;}
.effect-upload-bottom {width: 100%;}
.effect-upload-bottom-p {line-height: 1.6;color: #777;}
.effect-result {display: none;}
.effect-result-title {line-height: 1;}
.effect-result-type {width: fit-content;margin: 35px auto 32px;display: none;justify-content: center;flex-wrap: wrap;border-radius: 28px;background-color: #f4f4f4;}
.effect-result-type.active {display: flex;}
.effect-result-type>button {width: 272px;height: 56px;display: flex;justify-content: center;align-items: center;border-radius: 28px;font-size: calc(.77rem + .3vw);line-height: 1.1;color: #000;background-color: #f4f4f4;cursor: pointer;outline: none;border: none;}
.effect-result-type>button.active {background-color: #000;color: #fff;}
.effect-result-wrap {border-radius: 20px;background-color: #f7f7f8;min-height: 100px;margin: 0 auto;box-shadow: 0 0 0 12px #f7f7f8;overflow: hidden;position: relative;}
.effect-result-bar {height: 72px;padding: 0 16px;display: flex;align-items: center;gap: 24px;background-color: rgba(0,0,0,0.8);border-radius: 10px;position: absolute;bottom: 36px;right: 18px;}
.effect-result-bar.static {position: static;margin: 20px auto 0;padding: 10px;flex-wrap: wrap;justify-content: center;gap: 10px;}
#theBar {--val: 50;width: 286px;height: 8px;background: #555;border-radius: 4px;outline: none;-webkit-appearance:none;appearance:none;cursor:pointer;}
#theBar::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient( to right,#ccc 0%,#ccc calc(var(--val) * 1%),#555 calc(var(--val) * 1%),#555 100% );}
#theBar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:white;border-radius:50%;margin-top:-6px;box-shadow:0 0 2px rgba(0,0,0,0.5);position:relative;z-index:2;}
#theBar::-moz-range-progress{height:8px;border-radius:4px;background:#ccc;}
#theBar::-moz-range-track{height:8px;border-radius:4px;background:#555;}
#theBar::-moz-range-thumb{width:20px;height:20px;background:white;border-radius:50%;border:none;box-shadow:0 0 2px rgba(0,0,0,0.5);}
#loadingImg {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;z-index: 2;}
#loadingImg>img {width: 60px;height: 60px;animation: loadingImg 4s linear infinite;}
@keyframes loadingImg {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
.compare-img {position:relative;overflow: hidden;}
.compare-before{position:absolute;left: 0; height:100%; width:calc(var(--wid, .5) * 100%); object-fit:cover; object-position:0;}
#canvas {max-width: 100%;display: block;}
.compare-img > [type=range]{position:absolute;left: 0; 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;}
.effect-result-wrap .compare-line{position:absolute; top:0; bottom:0; left:calc(var(--wid, .5) * 100%); pointer-events:none; display:flex; flex-flow:column; align-items:center; width:1px; margin-left:-0.5px;background-color: transparent;}
.effect-result-wrap .compare-line>img {max-width: initial;}
.effect-result-wrap .compare-line::before,.effect-result-wrap .compare-line::after{content:''; flex:1; width:100%;background-color:rgba(255 255 255 / .8);}
.effect-result-btns {display: flex;justify-content: center;padding: 22px 0 35px;}
.effect-result-btn {min-width: 254px;line-height: 54px;box-sizing: border-box;padding: 0 10px;font-size: calc(.77rem + .3vw);color: #fff;border-radius: 5px;background-color: #0060fa;border: none;outline: none;cursor: pointer;}
.effect-result-bottom {padding: 32px 40px;display: flex;gap: 35px;background-color: #f7f7f8;border-radius: 20px;text-align: left;}
.effect-result-bottom>p {color: #4c4c4c;line-height: 1.3;}
.effect-result-bottom>p>a {color: #000;text-decoration: underline;}
.effect-result-bottom>p>a.blue {color: #0095ff;text-decoration: none;}
.banner-h2 {line-height: 1;font-weight: 500;}
.banner-step-intro {padding: 25px 50px 40px;line-height: 1.5;}
.banner-step-items {display: flex;justify-content: center;flex-wrap: wrap;gap: 150px;}
.banner-step-items>li {width: 320px;position: relative;}
.banner-step-items>li+li::before {content: "";width: 358px;height: 2px;background-color: #0060fa;position: absolute;top: 38px;right: 216px;}
.banner-step-num {display: block;width: 76px;height: 76px;border-radius: 50%;background-color: #f1f7fa;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.banner-step-title {padding: 8px 0 12px;line-height: 1;}
.banner-step-p {line-height: 2;}
@media (max-width: 1280px) {
    .banner-wrap {width: 96%;padding-left: 0;}
	.effect-items>button.active::after {display: none;}
	.effect-ex>li>img {max-width: 100%;height: auto;}
	.effect-ex-tag {line-height: 37px;padding: 0 15px;}
	.effect-titles {padding: 30px 0 20px;}
	.banner-step-items {gap: 40px;}
	.banner-step-items>li+li::before {display: none;}
	.banner-step-intro {padding: 15px 0 25px;}
	.effect-result-bar {position: static;margin: 20px auto 0;padding: 10px;flex-wrap: wrap;justify-content: center;gap: 10px;}
	.effect-result-bottom {padding: 15px 20px;flex-wrap: wrap;gap: 20px;}
	.effect-upload-top-p {padding: 15px 0;}
	.effect-upload-top-line {padding-bottom: 15px;}
	.effect-result-type {width: 100%;margin: 15px 0;gap: 5px;background-color: transparent;}
	.effect-result-type>button {width: auto;height: auto;padding: 8px 10px;border-radius: 6px;background-color: #f4f4f4;}
}

.other-p {text-align: center;line-height: 1;padding: 33px 0;background-color: #fff;}

.video {padding: 130px 0 75px;background-color: #000;overflow: hidden;}
.video-wrap {width: 1280px;margin: 0 auto;}
.video-content {display: flex;justify-content: center;align-items: flex-start;gap: 50px;flex-wrap: wrap;}
.video-left {width: 260px;padding-top: 83px;}
.video-toggles {display: flex;flex-direction: column;gap: 15px;}
.video-toggles>li {width: 260px;text-align: center;padding: 10px;box-sizing: border-box;cursor: pointer;}
.video-toggles>li.active {background-color: #141414;border-radius: 14px;box-shadow: inset 0 0 0 1px #666;}
.video-toggle-img {display: flex;border-radius: 8px;overflow: hidden;}
.video-toggle-info {line-height: 1;padding-top: 8px;}
.video-right {width: 970px;}
.video-h2 {font-weight: 600;line-height: 1;padding-bottom: 16px;}
.video-p {color: #b2b2b2;line-height: 1.4;padding-bottom: 38px;}
.video-p>a {text-decoration: underline;}
.video-items {flex-shrink: 0;width: 1290px;}
.video-items>li {display: none;position: relative;border-radius: 20px;overflow: hidden;}
.video-items>li.active {display: block;}
.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;}
.video-items .compare-line{position:absolute; top:0; bottom:0; left:calc(var(--wid, .5) * 100%); pointer-events:none; display:flex; flex-flow:column; align-items:center; width:1px; margin-left:-0.5px;background-color: transparent;}
.video-items .compare-line>img {max-width: initial;}
.video-items .compare-line::before,.video-items .compare-line::after{content:''; flex:1; width:100%;background-color:rgba(255 255 255 / .8);}
.video-summary {padding: 26px 0 26px 130px;}
.video-summary>li {display: none;justify-content: space-between;align-items: center;gap: 10px;}
.video-summary>li.active {display: flex;}
.video-summary-right {color: #b2b2b2;line-height: 1.2;flex: 1;}
.video .the-btns {display: flex;padding-left: 440px;}
.the-btn {min-width: 410px;height: 64px;box-sizing: border-box;padding: 0 10px;display: flex;justify-content: center;align-items: center;gap: 10px;border-radius: 5px;background-color: #92cf3f;}
.the-btn::after {content: "";width: 21px;height: 25px;background: url(../images/tools/ai-face-retouch/download-icon.png);}
@media (max-width: 1800px) {
    .video-items {flex-shrink: 1;width: auto;}
	.compare-before,.compare-after {max-width: 100%;height: auto;}
	.video-left {padding-top: 0;}
}
@media (max-width: 1280px) {
    .video-wrap {width: 96%;padding-left: 0;}
	.video-content {gap: 0;}
	.video-left {order: 1;width: 100%;padding: 0 0 30px;}
    .video-toggles {flex-direction: row;justify-content: center;flex-wrap: wrap;}
    .video-h2,.video-p {text-align: center;}
	.video-summary,.video .the-btns {padding-left: 0;}
    .video-summary>li {text-align: center;}
    .video-toggle-img>img {max-width: 100%;height: auto;}
    .video-toggles>li {width: 160px;}
}
@media (max-width: 767px) {
    .video-items .compare-line>img {width: 30px;height: 30px;}
}
@media (max-width: 500px) {
	.the-btn {min-width: 330px;}
}

.case {background-color: #000;position: relative;}
.case-imgs {position: relative;}
.case-imgs::after {content: "";width: 100%;height: 300px;background: linear-gradient(#000 10%, transparent);position: absolute;top: 0;left: 0;}
.case-imgs>img {opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: auto;max-width: 100%;}
.case-imgs>img.active {opacity: 1;position: static;}
.case-wrap {width: 1280px;position: absolute;top: 0;left: 50%;transform: translateX(-50%);height: 100%;}
.case-content {padding: 80px 0 100px;box-sizing: border-box;height: 100%;display: flex;flex-direction: column;justify-content: space-between;gap: 30px;}
.case-content-top {width: 640px;}
.case-toggle {width: fit-content;display: flex;padding: 1px;border: 1px solid rgba(255,255,255,0.5);border-radius: 100vw;}
.case-toggle>li {min-width: 175px;line-height: 37px;text-align: center;color: #fff;border-radius: 100vw;cursor: pointer;}
.case-toggle>li.active {color: #000;background-color: #fff;}
.case-h2 {line-height: 1;padding: 22px 0 14px;}
.case-top-p {font-size: calc(.77rem + .3vw);color: #fff;line-height: 1.4;}
.case-top-p>a {text-decoration: underline;}
.case-content-bottom {width: 430px;}
.case-bottom-p {line-height: 1.4;padding: 16px 0 20px;}
.case-bottom-p>a {text-decoration: underline;}
.the-btns {display: flex;}
.the-btn {min-width: 410px;height: 64px;box-sizing: border-box;padding: 0 10px;display: flex;justify-content: center;align-items: center;gap: 10px;border-radius: 5px;background-color: #92cf3f;}
.the-btn::after {content: "";width: 21px;height: 25px;background: url(../images/tools/ai-face-retouch/download-icon.png);}
@media (max-width: 1280px) {
	.case-imgs::after {display: none;}
	.case-wrap {width: 96%;position: static;transform: none;margin: 0 auto;}
	.case-content {padding: 30px 0 80px;}
	.case-content-top,.case-content-bottom {width: 100%;text-align: center;}
	.case-content-bottom {padding-top: 30px;}
	.case-toggle {margin: 0 auto;}
	.the-btns {justify-content: center;}
}
@media (max-width: 500px) {
	.case-toggle>li {min-width: 160px;}
	.the-btn {min-width: 330px;}
}

.article {padding: 65px 0 0;background-color: #fff;}
.article-wrap {width: 1280px;margin: 0 auto;}
.article-h2 {line-height: 1;text-align: center;padding-bottom: 75px;}
.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%;}
}

.faq {padding: 125px 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%;}
}