@charset "utf-8";
/* CSS Document */
body{font:17px/24px;}
.clearfix::after {content: "";display: block;clear: both; }
.details{width: 1200px; padding: 0;}
main{display: block;}
img{max-width: 100%;}

.main01 {padding: 55px 0 85px;color: #fff;background: linear-gradient(to right, #5a9bff, #b7c4ff);}
.main01 .details {width: 1240px;}
.main01-con {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: flex-end;}
.main01-left {width: 530px;}
h1 {display: flex;align-items: flex-end;}
.h1-con {margin-left: 12px;font-size: 26px;line-height: 1em;display: flex;flex-direction: column;}
.h1-con b {font-size: 48px;line-height: 1em;margin: 10px 0 12px;font-weight: 500;position: relative;}
.h1-tag {align-self: flex-end;width: 93px;line-height: 26px;text-align: center;background: url(../images/ai-enhance-photo-feature/border-img.png) no-repeat center/100% 100%;font-size: 12px;font-style: initial;color: transparent;font-weight: 600;}
.h1-tag-words {background: linear-gradient(to right, #ee4b76, #fcae44);background-clip: text;-webkit-background-clip: text;}
.main01-checks {display: flex;flex-wrap: wrap;padding: 35px 0 13px;}
.main01-checks li {padding-left: 30px;font-size: 19px;line-height: 1.1em;margin: 0 45px 15px 0;position: relative;}
.main01-checks li::before {content: url(../images/ai-enhance-photo-feature/icon.png);position: absolute;top: 1px;left: 0;}
.main01-infos {padding-left: 20px;}
.main01-infos li {font-size: 17px;line-height: 1.5em;margin-bottom: 20px;list-style-type: disc;}
.the-download {width: 350px;height: 77px;display: block;box-sizing: border-box;padding-top: 16px;background-color: #16b4fd;text-align: center;line-height: 77px;border-radius: 6px;color: #fff;transition: background-color 0.2s;}
.the-download:hover {background-color: #00a5f1;color: #fff;}
.download-words {display: inline-block;width: 234px;font-size: 13px;text-align: left;line-height: 1em;}
.download-bold-words {font-size: 25px;line-height: 1em;display: block;margin-bottom: 8px;}
.download-icon {vertical-align: top;margin-top: 3px;}
.main01-right {border-radius: 20px;overflow: hidden;position: relative;}
.main01-right video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.main01-right .decorative {width: 664px;height: 463px;background: url(../images/ai-face-retouch-feature/bg-decorative.png) no-repeat center;display: flex;justify-content: center;align-items: center;}
.main01-right .drag-container {width: 628px;height: 401px;border-radius: 20px;overflow: hidden;}
.main01-right .drag-container .image-before div {width: 628px;}


[type=range]{position:absolute; width:100%; height:100%; background-color:initial; -webkit-appearance:none; appearance:none; cursor:ew-resize;}
::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:0;}
::-moz-range-track{height:100%;}
::-moz-range-thumb{width:0; opacity:0;}

.main02 {text-align: center;padding: 50px 0;background-color: #ffffff;}
.main02 .list-main02Icon {display: flex;justify-content: space-around;align-items: flex-end;}
.main02 .list-main02Icon li {display: flex;justify-content: space-around;align-items: flex-end;gap: 13px;position: relative;}
.main02 .list-main02Icon li::before {content: '';display: block;width: 21px;height: 15px;background: url(../images/ai-enhance-photo-feature/main02-iconAi.png) no-repeat center;position: absolute;left: 70px;top: 7px;}
.main02 .list-main02Icon li strong {font-size: 19px;position: relative;bottom: 5px;}


/* `````````````````````````` 拖拽 ``````````````````````````````` */
.image-container {
    width: 100%;
    height: 100%;
}
.image-container * {
  box-sizing: border-box;
}

.mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.position-relative {
    position: relative !important
}
.position-absolute {
    position: absolute !important
}
.overflow-hidden {
    overflow: hidden !important
}
.h-100 {
    height: 100% !important
}
.w-100 {
    width: 100% !important
}
.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}
.img-fluid {
    max-width: 100%;
    height: auto
}

/* .image-before div {
    width: 600px;
} */

.image-before {
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
  }

  .image-after {
    z-index: 1;
  }

.image-line {
    height: 100%;
    width: 2px;
    top: 0;
    left: 50%;
    background-size: 100%;
    cursor: e-resize;
    z-index: 3;
}

.image-line:before {
    content: "";
    width: 2px;
    height: calc(55% - 39px);
    background: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: -1
}

.image-line:after {
    content: "";
    width: 2px;
    height: calc(45% + 1px);
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: -1
}
.image-line img {
    max-width: none;
    width: 40px;
    position: absolute;
    bottom: 45%;
    transform: translateX(-50%);
}


.image-container img {
    border-radius: 16px;
}

.img-after {
    position: absolute;
    width: unset !important;
    left: 32px;
    top: 24px;
    background: #ffffff;
    border-radius: 20px;
    color: #000000;
    z-index: 10 !important;
    font-size: 16px;
  }

  .img-after span {
    display: inline-block;
    padding: 0 15px;
    height: 34px;
    text-align: center;
    line-height: 2.125rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .img-before {
    position: absolute;
    width: unset !important;
    right: 32px;
    top: 24px;
    background: #ffffff;
    border-radius: 20px;
    color: #000000;
    z-index: 10 !important;
    font-size: 16px;
  }

  .img-before span {
    display: inline-block;
    height: 34px;
    padding: 0 15px;
    text-align: center;
    line-height: 2.125rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .progress_bar_bg {
    position: absolute;
    top: 50%;
    right: 24px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 12px;
    z-index: 10;
    -webkit-box-shadow: 0 131px 77px -83px rgba(0, 0, 0, 0.2);
    box-shadow: 0 131px 77px -83px rgba(0, 0, 0, 0.2);
  }

  .progress_bar_bg .range-slider {
    width: 4px;
    height: 168px;
    background: #6cffd7;
    z-index: 1;
  }

  .progress_bar_bg .range-active {
    height: 168px;
    width: 4px;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 14px;
    z-index: 2;
  }

  .progress_bar_bg .range-slipper {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #4255ff;
    position: absolute;
    top: calc(100% - 16px);
    left: 6px;
    cursor: -webkit-grab;
    cursor: grab;
    z-index: 2;
  }
.my-md-4 {
    margin-top: 10px !important;
    margin-bottom: 20px !important
}
.btn-reduce, .btn-enlarge {height: 32px;cursor: pointer;}
/* `````````````````````````` 拖拽 ``````````````````````````````` */
.main02 h1,.title-h2 {font-size: 35px;font-weight: 700;color: #000000;line-height: 1.5;margin-bottom: 30px;text-align: center;display: block;}
.suhead {font-size: 19px;line-height: 1.5;margin-bottom: 30px;color: #333333;}
.video-container {width: 100%;max-width: 1200px;margin-bottom: 30px;}
.video-container video {width: 100%;max-width: 1200px;border-radius: 20px;}


.main03 {text-align: center;padding: 50px 0;background-color: #ffffff;}
.main03-flex {display: flex;justify-content: space-between;align-items: flex-start;gap: 30px;flex-wrap: wrap;}
.main03-flex .item-flex {flex: 1;text-align: left;}
.main03-flex .item-flex h3 {font-size: 23px;font-weight: 700;color: #000000;line-height: 1.5;margin-bottom: 5px;}
.main03-flex .item-flex p {font-size: 17px;line-height: 1.5;color: #333333;margin-bottom: 10px;}
.main03-flex .drag-container {width: 585px;height: 397px;padding: 20px 0 15px;}
.main03-flex .drag-container .image-before div {width: 585px;}



/* .main08 {text-align: center;padding: 50px 0;background-color: #ffffff;}
.main08-bg {background-size: cover;height: 100%;position: relative;}
.main08-bg.bg1 {background: url(../images/ai-enhance-photo-feature/main08-bg1.png) no-repeat;}
.main08-bg.bg2 {background: url(../images/ai-enhance-photo-feature/main08-bg2.png) no-repeat;}
.main08-bg.bg3 {background: url(../images/ai-enhance-photo-feature/main08-bg3.png) no-repeat;}
.main08-text {position: absolute;left: 0;top: 0;text-align: left;}
.main08-text h3 {font-size: 27px;font-weight: 700;color: #000;line-height: 1.5;margin-bottom: 20px;}
.main08-text ul {list-style: disc;margin-left: 20px;}
.main08-text li {list-style: disc;color: #888888;font-size: 17px;line-height: 1.5;margin-bottom: 10px;}
.main08-bg .main08-text {top: 50%;left: 140px;transform: translateY(-50%);}
.main08-bg .main08-text h3 {color: #ffffff;}
.main08-bg .main08-text li {color: #ffffff;} */

.interpo-usage{text-align: center;padding: 50px 0;background-color: #ffffff;}
.interpo-usage-content{display: flex;justify-content: center;align-items: center; margin-top: 20px;gap: 30px;}
.interpo-usage-content .usage-img{width: 743px;position: relative;overflow: hidden;}
.interpo-usage-content .usage-img .usage-box{display: flex;transition: all 0.5s;}
.interpo-usage-content .usage-img img{ border-radius: 20px;}
.usage-content ul.usage-txt{border-left: 2px solid #dadada; padding:0 0 0 30px; flex: 1;}
.usage-content ul.usage-txt li{font-size: 21px;font-weight: bold;position: relative; background: url(../images/ai-interpolation/icon1.png) no-repeat left center; padding: 30px 0 30px 60px;cursor: pointer;}
.usage-content ul.usage-txt li.focus,.usage-content ul.usage-txt li:hover{color: #ffaf40;}
.usage-content ul.usage-txt li.focus::before/* ,.usage-content ul.usage-txt li:hover::before */{content: "";display: inline-block;position: absolute;left: -34px;top: 0; height: 100%;border-left: 6px solid #ffaf40;}
.usage-content ul.usage-txt li:nth-child(2){background-image: url(../images/ai-interpolation/icon2.png);}
.usage-content ul.usage-txt li:nth-child(3){background-image: url(../images/ai-interpolation/icon3.png);}
.usage-content ul.usage-txt li:nth-child(1):hover,.usage-content ul.usage-txt li:nth-child(1).focus{background-image: url(../images/ai-interpolation/icon1-f.png);}
.usage-content ul.usage-txt li:nth-child(2):hover,.usage-content ul.usage-txt li:nth-child(2).focus{background-image: url(../images/ai-interpolation/icon2-f.png);}
.usage-content ul.usage-txt li:nth-child(3):hover,.usage-content ul.usage-txt li:nth-child(3).focus{background-image: url(../images/ai-interpolation/icon3-f.png);}
.usage-content .link{padding: 20px 0 0;}
.usage-content .link a{color: #3c9cff; margin-left: 35px;}

/* .main05 {padding: 50px 0;background-color: #ffffff;}
.main05-box{overflow:hidden;}
.main05 .main05-pics{margin-top: 45px;display: flex;transition: all 0.2s;}
.main05-emits {display: flex;justify-content: space-between;flex-wrap: wrap; margin: 15px 0 0;}
.main05-emit {width: 229px;height: 153px;border-radius: 20px;background: #000 url(../images/ai-face-retouch-feature/ex-01s.png) no-repeat center/cover;position: relative;cursor: pointer;}
.main05-emit:nth-child(2) {background-image: url(../images/ai-face-retouch-feature/ex-02s.png);}
.main05-emit:nth-child(3) {background-image: url(../images/ai-face-retouch-feature/ex-03s.png);}
.main05-emit:nth-child(4) {background-image: url(../images/ai-face-retouch-feature/ex-04s.png);}
.main05-emit:nth-child(5) {background-image: url(../images/ai-face-retouch-feature/ex-05s.png);}
.emit-mask {width: 100%;height: 100%;box-sizing: border-box;border-radius: 20px;padding: 40px 10px 0;font-size: 15px;color: #fff;line-height: 1em;text-align: center;position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.4);}
.main05-emit:hover .emit-mask {box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);}
.main05-emit.active .emit-mask {box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);background-color: rgba(0,0,0,0.1);}
.main05-emit .emit-mask::before {content: "";display: block;margin:0 auto 14px;width: 44px; height: 44px;background: url(../images/ai-face-retouch-feature/ex-icons.png) no-repeat -72px -10px;}
.main05-emit:nth-child(2) .emit-mask::before {background-position-x: -282px;width: 58px;}
.main05-emit:nth-child(3) .emit-mask::before {background-position-x: -10px;width: 42px; height: 45px;}
.main05-emit:nth-child(4) .emit-mask::before {background-position-x: -209px;width: 53px;}
.main05-emit:nth-child(5) .emit-mask::before {background-position-x: -136px;width: 53px;} */

@media (max-width: 1504px) {
    .main07 .details{width: auto;}
    .main07-cotent{justify-content: center;gap: 10px;}
}

@media (max-width: 979px) {
    img {width: auto;height: auto;}
    .details,.main01 .details,.main06 .details,.MainFoot .details {width: 96%;}

    .main01-con {justify-content: center;}
    .main01-left {margin-bottom: 30px;}

    .main03-flex {flex-wrap: wrap;justify-content: center;}
    .main03-flex .item-flex{flex-grow: 0;}
    .main03-flex .item-flex p {font-size: .9375rem;}
    .main03-flex .item-flex h3 {font-size: 1.1875rem;}
    

    .main06 {padding: 70px 0;}
    .main06-content {width: 100%;background-position-x: right;}

    .main07-cotent {justify-content: center;}
    .main07-cotent .fun-one {margin: 0 15px 30px;}

    .main02 h1,.title-h2 {font-size: 1.4375rem;}
    .suhead {font-size: 1.0625rem;}

    .main03 h2+p{padding: 0 10px 30px;}

    .main03-flex {flex-wrap: wrap;}
    .main03-flex .item-flex p {font-size: .9375rem;}
    .main03-flex .item-flex h3 {font-size: 1.1875rem;}

    /* .main04-flex {flex-wrap: wrap;}
    .main04-flex .content-wrap p {font-size: .9375rem;}
    .main04-flex .content-wrap h3 {font-size: 1.1875rem;}
    .main04-flex .content-wrap .list-main04Icon li span {font-size: .8125rem;}
    .main04-flex .list-cover {zoom: 0.5;} */

    .main02 .list-main02Icon {flex-wrap: wrap;}
    .main02 .list-main02Icon li strong {font-size: .9375rem;}

    /* .carousel-container {width: 770px;height: 380px;} */

    /* .main08-text h3 {font-size: 1.1875rem;}
    .main08-text li {font-size: .9375rem;} */

    .interpo-usage-content{flex-wrap: wrap;}
    .usage-content{margin: 0 auto; width: 90%;}
	.usage-content ul.usage-txt li{font-size: 1.1875rem;}

    .usage-content .link{text-align: center;}

	/* .interpo-converter {padding: 70px 0;}
    .interpo-converter-content {width: 100%;background-position-x: right;} */

}
@media (max-width: 767px) {
    .h1-con b {font-size: 35px;}
    .the-download {width: 330px;}
    .main01-right {width: 100%;}

    .main01-right .decorative {width: 100%;height: auto;background: transparent;}
    .main01-right .drag-container {width: 480px;height: 305px;}
    .main01-right .drag-container .image-before div {width: 480px;}

    .m03-switch-btn{padding: 0 15px;}
    .main03-content{display: block;}
    .enlarge-compare-btn{display: flex;}
    .enlarge-compare-btn div:nth-child(2){margin-top: 0;}
    .enlarge-compare-img{width: 100%;padding-bottom: 65%;}

    .main03-flex .drag-container {width: 480px;height: 274px;}
    .main03-flex .drag-container .image-before div {width: 480px;}

    /* .main04-flex .content-wrap {text-align: center;}
    .main04-flex .drag-container {width: 480px;height: 326px;}
    .main04-flex .drag-container .image-before div {width: 480px;}
    .progress_bar_bg {transform: scale(0.9) translateY(-60%);right: 10px;} */

    .main02 .list-main02Icon li {justify-content: flex-start;flex: auto;width: auto;}
    .main06-h2 {justify-content: center;}
    .main06-h2-logo {max-width: 50%;}
    .main06-p {font-size: 1.1875rem;text-align: center;}

    /* .main05-emit{width: 48%;height: 100px;}
    .emit-mask{padding-top: 10px;} */


    .main03 {padding: 30px 0;}
    .main04 {padding: 30px 0;}
    .main02 {padding: 30px 0;}
    .main08 {padding: 30px 0;}
    .interpo-usage {padding: 30px 0;}
   
}
@media  (max-width: 479px) {
    .main06-content {padding-left: 10px;background-position-x: -630px;}
	.main06-h2 {font-size: 39px;}

    .m03-switch-btn{padding: 0 40px;}

    .main03-flex .drag-container {width: 360px;height: 205px;}
    .main03-flex .drag-container .image-before div {width: 360px;}


    .main01-right .decorative {width: 100%;height: auto;background: transparent;}
    .main01-right .drag-container {width: 360px;height: 230px;}
    .main01-right .drag-container .image-before div {width: 360px;}

    .main03-flex .drag-container {width: 360px;height: 205px;}
    .main03-flex .drag-container .image-before div {width: 360px;}

    /* .main04-flex .drag-container {width: 360px;height: 245px;}
    .main04-flex .drag-container .image-before div {width: 360px;}
    .progress_bar_bg {transform: scale(0.8) translateY(-60%);right: 10px;} */


    /* .carousel-container {width: 360px;height: 180px;}
    .main08-bg {background-size: 100% auto !important;}
    .main08-bg .main08-text {top: 0;left: 0;transform: translateY(0);} */

    /* .main05-emits {margin-top: 10px;}
    .main05-video::before {padding-bottom: 56.25%;} */
}