body {
    background-image: url("../img/background.1e6f09997f83.png");
    background-size: cover; /* 适应屏幕尺寸 */
    background-position: center; /* 图片位置居中 */
    background-repeat: no-repeat; /* 不重复平铺 */
}

#header {
    /*font-size: 18px;*/
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#header:hover {
    color: #165dff;
}

.header-container {
    margin: 0 auto;
    /*!*position: relative;*!*/
    /*width: auto;*/
    display: flex;
    justify-content: space-between;
}

#home-containers {
    display: flex;
    /*flex-wrap: wrap;*/
    flex-direction: column;
    min-height: 90vh;
    position: relative;
    /*border: 1px solid black;*/
    margin: auto;
    justify-content: center;
    align-items: center;
    padding: 6em 2% 2% 2%;
}

.ad-banner {
    display: flex;
    justify-content: center;
    width: 100%; /* 设置容器的宽度 */
    height: 50px; /* 设置容器的高度 */
    background-image: url("../img/red_ad.eb910b7fd47d.png");
    background-size: cover;
    /*background-repeat: no-repeat;*/
    background-position: center; /* 将背景图片位置设置为中间 */
    overflow: hidden;
}

/*.ad-banner img {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/* 通过 z-index 属性控制图片的叠放顺序 */
/*.ad-banner img:first-child {*/
/*    z-index: 1;*/
/*}*/

/*.ad-banner img:last-child {*/
/*    z-index: 2;*/
/*    height: inherit;*/
/*    width: fit-content;*/
/*    left: 25%;*/
/*}*/

#containers {
    min-height: 90vh;
    position: relative;
    /*border: 1px solid black;*/
    margin: auto;
    align-items: center;
    padding: 6em 2% 2% 2%;

}


.easykt_cutout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
}

.easykt_title {
    font-family: AlibabaPuHuiTi-2\.0;
    font-size: 3rem;
    /*line-height: .38889rem;*/
    color: #0f0f0f;
    font-weight: 700;
    /*margin-top: 1em;*/
}

.easykt_img_content {
    width: 50%;
    /*height: 600px;*/
    /*border: 1px black solid;*/
    border-radius: 50px;
    margin: 1rem auto;
}

.easykt_compareImage {
    border-radius: 2rem;
    overflow: hidden;
    /*width: 100%;*/
    height: 100%;
    margin: 1em auto;
}

.easykt_compareImage_handle {
    display: block;
    width: 0.5rem;
    height: 100%;
    background: #fff;
    background-size: cover;
    position: absolute;
    cursor: ew-resize;
}


.inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*border: 3px solid red;*/
    margin: 5em 5% 5%;
}

.container-show {
    flex-grow: 1;
    margin: 1% 2%;
    /*min-width: 400px;*/
    /*min-height: 400px;*/
    max-width: 512px;
    max-height: 512px;
    border-radius: 20px;
    overflow: hidden; /* 隐藏超出容器部分的内容 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    /*border: 2px dashed #ccc;*/
    color: #52aff6;
    text-align: center;
    display: grid;
}

.kt-container-show {
    flex-grow: 1;
    margin: 1% 2%;
    /*min-width: 400px;*/
    /*min-height: 400px;*/
    /*max-width: 512px;*/
    /*max-height: 512px;*/
    border-radius: 20px;
    /*overflow: hidden; !* 隐藏超出容器部分的内容 *!*/
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    /*border: 2px dashed #ccc;*/
    color: #52aff6;
    text-align: center;
    display: flex;
    place-content: center;
    align-items: center;
    padding: 1% 2% 2% 2%;
    margin: 0 auto;

    max-width: 1500px;
    padding-top: 10em;
    padding-bottom: 10em;
}

.size-container {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    /*border: 2px dashed #ccc;*/
    color: #52aff6;
    border-radius: 20px;
    padding: 2em;
}


.id-shop-container-show {
    flex-grow: 1;
    margin: 1% 2%;
    /*min-width: 400px;*/
    /*min-height: 400px;*/
    /*max-width: 512px;*/
    /*max-height: 512px;*/
    border-radius: 20px;
    /*overflow: hidden; !* 隐藏超出容器部分的内容 *!*/
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    /*border: 2px dashed #ccc;*/
    color: #52aff6;
    text-align: center;
    display: flex;
    place-content: center;
    align-items: center;
    padding: 1% 2% 2% 2%;
    margin: 0 auto;

    max-width: 1500px;
    padding-top: 10em;
    padding-bottom: 10em;
}


.id-photo-btn-show {
    border-radius: 20px;
    /*border: 2px dashed #ccc;*/
    max-height: 300px;
    max-width: 360px;
    min-height: 300px;
    min-width: 360px;
    cursor: pointer;
    /*margin: 5% 10%;*/
    margin: 2em;
    transition: width 0.5s ease; /* 添加过渡效果 */
    justify-content: center;
}

.id-photo-img-show {
    /*border-radius: 20px;*/
    overflow: hidden; /* 隐藏超出容器部分的内容 */
    /*border: 2px dashed #ccc;*/
    max-height: 512px;
    max-width: 360px;

    min-height: 512px;
    min-width: 360px;
    cursor: pointer;
    /*margin: 5% 10%;*/
    margin: 2em;
    transition: width 0.5s ease; /* 添加过渡效果 */
    justify-content: center;
}

.img-show {
    border-radius: 20px;
    overflow: hidden; /* 隐藏超出容器部分的内容 */
    border: 2px dashed #ccc;
    /*max-height: 360px;*/
    /*max-width: 512px;*/
    /*max-height: 512px;*/
    /*min-width: 300px;*/
    min-height: 400px;
    cursor: pointer;
    /*margin: 5% 10%;*/
    margin: 2em;
    transition: width 0.5s ease; /* 添加过渡效果 */
    justify-content: center;
}

.img-show img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}


.kt-img-show {
    border-radius: 20px;
    overflow: hidden; /* 隐藏超出容器部分的内容 */
    border: 2px dashed #ccc;
    /*max-height: 360px;*/
    /*max-width: 512px;*/
    /*max-height: 512px;*/
    /*min-width: 300px;*/
    min-height: 400px;
    cursor: pointer;
    /*margin: 5% 10%;*/
    margin: 2em;
    transition: width 0.5s ease; /* 添加过渡效果 */
    display: flex;
    /*justify-content: center;*/
    /*align-items: center;*/
    flex-direction: column;

}

.kt-img-show img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

.new-label {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 300px;
    max-width: 512px;
    max-height: 512px;
    /*border: 1px solid black;*/
}

.loader-container {
    /*!*flex-grow: 1;*!*/
    /*height: 50vh;*/
    /*z-index: 10000; !* 使 loader 在最上层 *!*/
    /* 根据需要设置 loader-container 的样式 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101; /* 使 loader-container 处于 loader-layer 之上 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 5px;
}

.loader {
    /* 根据需要设置 loader 的样式 */
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #3498db;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

p {
    /*margin-top: 10px;*/
    font-weight: bold;
}

.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
}

.text-container p {
    margin: 0;
    color: #4295f6;
    font-size: 20px;
}

.container-bg {
    background: #d2d2d2;
    background-image: linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0), linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0);
    background-position: 0 0, 10px 10px, 10px 10px, 20px 20px;
    background-size: 20px 20px;
}

.kt-container-bg {
    background: #d2d2d2;
    background-image: linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0), linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0);
    background-position: 0 0, 10px 10px, 10px 10px, 20px 20px;
    background-size: 20px 20px;
}

#preview {
    margin-top: 20px;
}

.image-container {
    /*position: relative;*/
    width: 100%;
    /*height: 100%;*/
    min-height: 300px;
    /*display: inline-block;*/
    /*margin-top: 10px;*/
    /*margin-bottom: 30px;*/
    border-radius: 10px;
    border: 2px dashed #ccc;
    /*color: #ccc;*/
    color: #52aff6;
    /*line-height: 300px;*/
    text-align: center;
    /*background-color: transparent;*/
    /*background-image: url("../img/grid.68cd006d5648.gif");*/
    background: #d2d2d2;
    background-image: linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0), linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0);
    background-position: 0 0, 10px 10px, 10px 10px, 20px 20px;
    background-size: 20px 20px;
}


.loader-layer {
    /* 添加适当的样式以覆盖图片 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100; /* 使 loader-layer 处于图片之上 */
}


#areaRightInnerAfter {
    z-index: 2;
    position: relative;
}


/* 调整 z-index 来控制重叠顺序 */
#areaRightInnerBefore {
    z-index: 1;
    position: relative;
}

#areaRightInnerBefore img {
    position: absolute;
    bottom: 0;
    left: 0;
}

#uploadInput {
    display: none;
}

.btn-common {
    margin: 2px;
    cursor: pointer;
    padding: 5px 10px;
    /*background-color: #4CAF50;*/
    /*background: linear-gradient(to right, #535df5, #4295f6); !* 渐变颜色范围 *!*/
    background: linear-gradient(92.06deg, #33c2ff -17.9%, #257cff 43.39%, #165dff 99.4%);
    color: white;
    border-radius: 30px;
    border: #4295f6 1px solid;
}

.btn-size {
    font-size: 20px;
    width: 150px;
}

.btn-size-15 {
    font-size: 15px;
    width: 100px;
}

.btn-size-18 {
    font-size: 18px;
    width: 120px;
}

.color-picker {
    background-image: url("../img/custom-color.45ae8bc0dfd9.svg");
    background-size: cover;
}

.square-red {
    background: #FF0000;
}

.square-blue {
    background: #438EDB;
}

.square-white {
    background: #FFFFFF;
}

.square-transparent {
    background: #d2d2d2;
    background-image: linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0), linear-gradient(45deg, #f6fafc 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f6fafc 0);
    background-position: 0 0, 10px 10px, 10px 10px, 20px 20px;
    background-size: 20px 20px;
}

.btn-common-square {
    margin: 2px;
    cursor: pointer;
    padding: 5px 10px;
    /*background: linear-gradient(92.06deg, #33c2ff -17.9%, #257cff 43.39%, #165dff 99.4%);*/
    color: white;
    /*border-radius: 5px; !* 将边框半径设置为较小的值，实现方形边框 *!*/
    border-radius: 50%; /* 将边框半径设置为较小的值，实现方形边框 */
    border: #ccc 1px solid;
    width: 60px; /* 根据需要调整按钮的宽度 */
    height: 60px; /* 根据需要调整按钮的高度 */
    display: inline-flex;
    justify-content: center;
    transition: border 0.3s ease; /* 添加过渡效果 */
}


.btn-border-highlight {
    border: 2px solid blue; /* 定义边框样式 */
}

.home_btn_container {
    display: flex;
    justify-content: space-between;
    /*width: 500px;*/
}

.homeBtn {
    cursor: pointer;
    /*padding: 5px 10px;*/
    /*border-radius: 20px;*/
    padding: 0.5em;
    margin-right: 1em;
    border-radius: 5em;
    /*background-color: #4CAF50;*/
    background: linear-gradient(92.06deg, #33c2ff -17.9%, #257cff 43.39%, #165dff 99.4%);
    color: white;
    border: #4295f6 1px solid;
    width: 230px;
    max-width: 230px;

    font-size: 20px; /* 调整按钮字体大小根据需要 */
    transition: transform 0.3s; /* 添加过渡效果 */
}

.homeBtn:hover {
    /*transform: scale(1.5); !* 鼠标悬停时放大按钮 *!*/
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /*box-shadow: 0px 8px 16px 0px rgba(85,85,255,0.2);*/
    transform: translateY(-4px);
    background: linear-gradient(92.06deg, #33c2ff -17.9%, #257cff 43.39%, #165dff 99.4%);
}

#downloadBtn {
    position: relative;
    background: white;
    color: black;
    border: 1px black solid;
}

.downloadBtn:after {
    content: "1";
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px;
    font-size: 12px;
}

.notification-badge {
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    line-height: 24px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    background: linear-gradient(to right, #fca230, #ee5757);
    border-radius: 15px 2px 15px 2px;
}

.badge-pos {
    transform: translateY(-50%) translateX(50%);
}

#kt-btn-container {
    display: flex;
}

.kt-badge-pos {
    transform: translateY(-50%) translateX(50%);
}

.button-container {
    position: relative;
    display: flex;
    justify-content: center;
}

/*img zoom in out*/
#arearightOuter img:hover, #arearightOuter img:hover, #ktAreaRightInnerBefore img:hover, #ktAreaRightInnerAfter img:hover {
    cursor: zoom-in;
}

.overlay {
    background-color: #000;
    opacity: .95;
    filter: alpha(opacity=70);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.overlayimg {
    cursor: zoom-out;
    position: fixed;
    z-index: 11;
    /*width: 50%;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* cursor: pointer; */
}

.overlayimg:hover {
    cursor: zoom-out;
}


@media (max-width: 1000px) {
    .id-shop-container-show {
        display: grid;
        place-items: center;

        padding-top: 2em;
        padding-bottom: 2em;
    }

    .id-photo-img-show {
        min-width: 250px;
        min-height: 300px;
    }

    .id-photo-btn-show {
        min-width: 250px;
    }

    .size-container {
        box-shadow: none;
    }

    .btn-size {
        font-size: 18px;
        width: 120px;
    }
}

@media (max-width: 800px) {
    .container-show {
        width: 100%;
    }

    .img-show {
        min-height: 300px;
    }
}

@media (max-width: 1000px) {

    .kt-container-show {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .new-label {
        min-width: 250px;
        max-width: 250px;
        max-height: 400px;
    }

    #kt-btn-container {
        display: block;
    }

    .kt-badge-pos {
        transform: translateY(-50%) translateX(-120%);
    }

    #home-containers {
        padding: 6em 0 2em 0;
        margin: 0 auto;
    }

    #containers {
        padding: 6em 0 0;
        margin: 0 auto;
    }
    .homeBtn {
        width: 45vw;
        margin-right: 0;
    }

    .home_btn_container {
        display: block;
        width: fit-content;
    }

    .easykt_title {
        font-size: 2rem;
    }

    /*.easykt_cutout {*/
    /*    margin-top: 2rem;*/
    /*}*/

    .easykt_img_content {
        width: 100%;
        height: 300px;
    }
}

/*@media (max-width: 1440px) {*/
/*    .img-show {*/
/*        max-width: 280px;*/
/*        max-height: 280px;*/
/*    }*/
/*}*/


/**/
/* 下拉框样式 */
.dropdown {
    position: relative;
    display: inline-block;
}

.id-photo-dropdown-content {
    display: none;
    position: absolute;
    left: -200px;
    background-color: #f9f9f9;
    min-width: 300px;
    width: 365px;
    padding: 1em;
    /*border: 1px solid #ccc;*/
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 99;

}

.id-photo-dropdown-content .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.id-photo-dropdown-content .box {
    width: calc(33.33% - 10px);
    background-color: #ddd;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.dropdown:hover .id-photo-dropdown-content {
    display: block;
}

button, div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.fixed-image {
    position: fixed;
    bottom: 2em;
    right: 0.5em;
    width: 10vw;
    height: 10vw;
    min-width: 6em;
    min-height: 6em;
    background-image: url("../img/yk-service1.e5e49c31da26.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 9999;
}