@charset "utf-8";

@font-face {
  font-family: "JDLangZheng";
  src: url("JDLangZheng.ttf");
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: url("../img/loadingwrap.jpg?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "JDLangZheng", sans-serif;
}

/* 关键：CSS 预定义兜底，避免初始渲染尺寸错乱 */
/* 设计稿宽度2160px → 1rem = 10px（和JS逻辑一致） */
html {
  font-size: calc(100vw / 216); /* 提前用CSS计算rem基准，和JS逻辑等价 */
}

.logo {
  width: 50.2rem;
  height: 24.4rem;
  top: 9rem;
  right: 11.6rem;
  z-index: 3;
}
/* loading */

.loading_wrap {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background: url("../img/loadingwrap.jpg?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.loadingdog {
  width: 74.4rem;
  height: 78.5rem;
  margin-bottom: 12rem;
}

.loadingtext {
  width: 89.7rem;
  height: 6.6rem;
}

.loadingtext1 {
  width: 42.7rem;
  height: 6.6rem;
  position: absolute;
  /* bottom: 30rem; */
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  top: 143rem;
}

.progress-outer {
  border: 1rem solid #231815;
  padding: 8px;
  margin-bottom: 15px;
}

.progress-grid {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.progress-block {
  width: 24px;
  height: 24px;
  border: 1px solid #231815;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.progress-block.active {
  background-color: #231815;
}

/* look页 */
.lookwrap {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
}

.look_main {
  width: 216rem;
  height: 323.5rem;
  background: url("../img/look_main3.png?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0rem;
}

.looksextext {
  width: 77rem;
  top: 12rem;
  left: 50%;
  margin-left: -38.5rem;
  position: absolute;
}

.picklook {
  width: 140rem;
  top: 3%;
  left: 50%;
  margin-left: -55rem;
  position: absolute;
}

/* Tab 栏样式 */
.tab-wrap {
  position: absolute;
  top: 28rem;
  left: 22rem;
  width: 120rem;
  height: 16rem;
  display: flex;
  gap: 50px;
  margin-bottom: 20px;
}
.tab-item {
  flex: 1;
  width: 63rem;
  height: 17rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* 女装 Tab 状态 */
.tab-item.women {
  background: url("../img/btnnvactive.png?v=202603190816"); /* 替换为你的女装选中图 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tab-item.women:not(.active) {
  background-image: url("../img/btnnv.png?v=202603190816"); /* 替换为你的女装未选中图 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* 男装 Tab 状态 */
.tab-item.men {
  background-image: url("../img/btnnan.png?v=202603190816"); /* 替换为你的男装未选中图 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tab-item.men.active {
  background-image: url("../img/btnnanactive.png?v=202603190816"); /* 替换为你的男装选中图 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* tiffany Tab 状态 */
.tab-item.tiffany {
  background-image: url("../img/btnbao.png?v=202603190816"); /* 替换为你的tiffany未选中图 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tab-item.tiffany.active {
  background-image: url("../img/btnbaoactive.png?v=202603190816"); /* 替换为你的tiffany选中图 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* look主内容区 */
.lookmain {
  position: absolute;
  width: 160rem;
  height: 172.6rem;
  top: 58rem;
  left: 0rem;
}

.lookmainpeople {
  width: 161rem;
  height: 172rem;
}

.lookqian {
  position: absolute;
  width: 21.9rem;
  height: 52rem;
  top: 0rem;
  right: 7rem;
  z-index: 1;
}

.looklogo {
  width: 55rem;
  /* height: 18rem; */
  position: absolute;
  left: 4rem;
  top: 10rem;
}

.looktext {
  width: 159rem;
  height: 16rem;
  font-size: 7.3rem;
  text-align: center;
  bottom: 70.5rem;
}
.rule {
  width: 123.4rem;
  height: 9.9rem;
  right: 10rem;
  bottom: 10rem;
  background: url("../img/rule.png?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.rulehot {
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 0;
  right: 0;
}

/* swiper */
/* Swiper 容器（箭头外置核心布局） */
.swiper-container-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150rem;
  position: absolute;
  bottom: 40rem;
  margin-left: 8rem;
}

.swiper-wrapper {
  width: 108rem !important;
}

/* 自定义箭头（完全外置） */
.swiper-arrow {
  width: 9.1rem;
  height: 9.8rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  flex-shrink: 0;
  /* 禁止压缩 */
  z-index: 10;
}

.swiper-arrow.prev {
  background-image: url("../img/jianzuo.png?v=202603190816");
}

.swiper-arrow.next {
  background-image: url("../img/jianright.png?v=202603190816");
}

/* Swiper 核心样式（仅显示4个） */
.look-swiper {
  width: 121rem;
  /* 减去左右箭头宽度+间距 */
  /* height: 42rem; */
  overflow: hidden;
}

/* 新增：tiffany 标签专用样式（优先级更高） */
.look-swiper.tiffany-width {
  width: initial !important; /* 恢复默认宽度，也可以用 auto */
}

.swiper1 {
  width: calc(25% - 11px) !important;
  /* 4个均分宽度 - 间距 */
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid #d4c7b5;
  cursor: pointer;
  flex-shrink: 0;
}

/* 当只有一个元素时的样式 */
.look-swiper .swiper-slide:only-child {
  width: 100% !important;
  max-width: 24.4rem;
  margin: 0 auto;
}

.swiper-slide-thumb-active {
  border: 3px solid #8b5a2b;
}

.swiper1 img {
  width: 24.4rem;
  height: 24.4rem;
  object-fit: cover;
  pointer-events: none;
  margin-bottom: -1.2rem;
  margin-right: -0.2rem;
}

/* 隐藏Swiper默认箭头 */
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* 照片上传页 */
.uploadwrap {
  width: 100%;
  height: 100%;
}

.upload_main {
  width: 100%;
  height: 354.6rem;
  position: absolute;
  background: url("../img/upload_main.png?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 50%;
  transform: translateY(-50%);
}

.photowrap {
  width: 142.6rem;
  height: 229.8rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 42.4rem;
  position: absolute;
}

/* 拍照结果预览样式 */
.photo-preview {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#capturedPhoto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上传失败页 */
.upload-fail {
  width: 100%;
  height: 100%;
  /* background: url("../img/uploadfail.jpg?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat; */
}

.upload-fail-inner {
  width: 100%;
  height: 351.3rem;
  background: url("../img/uploadfail.png?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.failhot {
  width: 185.6rem;
  height: 304.8rem;
  top: 72rem;
  left: 50%;
  transform: translateX(-50%);
}

/* 上传成功页 */
.upload-success {
  width: 100%;
  height: 100%;
  /* background: url("../img/upload-success.jpg?v=202603190816"); */
  /* background-size: 100% 100%;
  background-repeat: no-repeat; */
}

.success_main {
  width: 100%;
  height: 354.6rem;
  background: url("../img/success_main.png?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.successhot {
  width: 134.4rem;
  height: 228.9rem;
  bottom: 54rem;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chongpai {
  width: 71.7rem;
  height: 22.3rem;
  bottom: 25rem;
  left: 34rem;
}

.bianzhuang {
  width: 71.7rem;
  height: 22.3rem;
  bottom: 24.3rem;
  right: 34rem;
}

/* 等待页 */
.waitingwrap {
  width: 100%;
  height: 100vh;
  background-color: #f5f6f0;
}

.waitingwrap_inner {
  width: 100%;
  height: 348rem;
  background: url("../img/waitingwrap.jpg?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.waiting_paper {
  width: 195.2rem;
  height: 198.9rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 63.7rem;
  overflow: hidden; /* 隐藏超出部分，营造纸张从打印机出来的效果 */
}

.waitzhi {
  width: 195.2rem;
  height: 198.9rem;
  position: absolute;
  background: url("../img/waitzhi.png?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  top: 0;
  left: 0;
  opacity: 0; /* 初始隐藏 */
  transform: translateY(-100%); /* 初始位置在上方完全隐藏 */
}

/* waitzhi内的进度条样式（和loading页面一致） */
.waitzhi .progress-outer {
  position: absolute;
  top: 120rem; /* 距离底部30rem */
  left: 50%;
  transform: translateX(-50%);
  border: 1rem solid #231815;
  padding: 8px;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

.waitzhi .progress-grid {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.waitzhi .progress-block {
  width: 24px;
  height: 24px;
  border: 1px solid #231815;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.waitzhi .progress-block.active {
  background-color: #231815;
}

/* 打印机吐纸动画 */
@keyframes paperPrintAnimation {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  2% {
    opacity: 0.3;
    transform: translateY(-98%);
  }
  5% {
    opacity: 1;
    transform: translateY(-95%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 应用动画到纸张 */
.waitzhi.animate-print {
  animation: paperPrintAnimation 4s ease-in-out forwards;
}

/* 添加纸张阴影效果，增强立体感 */
.waiting_paper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  z-index: 10;
  pointer-events: none;
}

/* 分享页 */
.sharewrap {
  width: 100%;
  height: 100vh;
}

.sharehead {
  width: 167.5rem;
  height: 44.7rem;
  top: -50rem;
}

.share_main_bg {
  width: 164.6rem;
  height: 269.4rem;
  background: url("../img/share_main_bg.png?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sharebg {
  width: 155rem;
  height: 237rem;
}
.share-slide {
  width: 155rem;
  height: 237rem;
}

.ren {
  /* width: 97.3rem;
  height: 123rem;
  z-index: 1;
  top: 45rem;
  overflow: hidden;
  z-index: 2;
  object-fit: cover; */
  width: 118.3rem;
  height: 156rem;
  z-index: 1;
  top: 30rem;
  overflow: hidden;
  z-index: 2;
  object-fit: cover;
}

.over_suan_nv {
  width: 155rem;
  height: 237rem;
  z-index: 3;
}

/* 活动规则弹窗 */
.tan_rule {
  width: 196.3rem;
  height: 263.7rem;
  padding: 15px 0;
  animation: slideUp 0.2s ease;
  background: url("../img/tan_rule.png?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.yonghu {
  width: 196.3rem;
  height: 263.7rem;
  padding: 15px 0;
  animation: slideUp 0.2s ease;
  background: url("../img/yonghu.png?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.rule-content {
  width: 142rem;
  height: 165.5rem;
  margin: 0 auto;
  margin-top: 56rem;
  color: #786756;
  font-size: 24px;
  font-weight: bolder;
  overflow-y: auto;
}

.qrcode {
  position: absolute;
  width: 21rem;
  height: 21rem;
  right: 31rem;
  bottom: 45rem;
  z-index: 1010;
}
.font1 {
  position: absolute;
  width: 30rem;
  height: 10rem;
  bottom: 55rem;
  left: 0rem;
}

.cha {
  width: 20.6rem;
  height: 21rem;
  position: absolute;
  top: 4rem;
  right: 4rem;
  cursor: pointer;
}

.read-btn,
.tongyi {
  width: 71.7rem;
  height: 22.3rem;
  bottom: 10rem;
  cursor: pointer;
}

.duigou {
  width: 6rem;
  height: 6rem;
  left: 0rem;
  top: -1rem;
  z-index: 2;
  background-color: #f5f6f0;
}

.btnyes {
  width: 51.1rem;
  height: 16.4rem;
  bottom: 8rem;
  left: 58rem;
}

.tan_chong {
  width: 136.8rem;
  height: 150.8rem;
  background: url("../img/tan_chong.png?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.failmask_hot {
  width: 69rem;
  height: 18rem;
  bottom: 20rem;
}

.share_left {
  width: 15rem;
  height: 25.3rem;
  left: 4rem;
  top: 50%;
}

.share_right {
  width: 15rem;
  height: 25.3rem;
  right: 4rem;
  top: 50%;
}

.share_repeat {
  width: 82.4rem;
  height: 27.8rem;
  left: 22rem;
  bottom: 23rem;
}

.share_buy {
  width: 82.4rem;
  height: 27.8rem;
  right: 22rem;
  bottom: 23rem;
}

.line {
  width: 164.3rem;
  height: 4.3rem;
  bottom: 10rem;
}

.suan_bg {
  width: 155rem;
  height: 237rem;
  background: url("../img/suan_bg1.jpg?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 12rem;
}

.tiffany_wrap {
  width: 155rem;
  height: 237rem;
  background: url("../img/tiffany_wrap.jpg?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.over_tiffany {
  width: 156rem;
  /* height:  166rem; */
  /* top: 11rem; */
}

.ji_nan_wrap {
  width: 155rem;
  height: 237rem;
  background: url("../img/ji_nan_wrap.jpg?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 12rem;
}

.over_ji_nan {
  width: 155rem;
  height:  237rem;
  z-index: 3;
}

.ji_nv_wrap {
  width: 155rem;
  height: 237rem;
  background: url("../img/ji_nv_wrap.jpg?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 12rem;
}

.over_ji_nv {
  width: 155rem;
  height:  237rem;
  z-index: 3;
  /* top: 65rem; */
}

.mian_nv_wrap {
  width: 155rem;
  height: 237rem;
  background: url("../img/mian_nv_wrap.jpg?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 12rem;
}

.over_mian_nv {
  width: 156rem;
  height:  237rem;
  z-index: 3;
  top: 2rem;
}

.mian_nan_wrap {
  width: 155rem;
  height: 237rem;
  background: url("../img/mian_nan_wrap.jpg?v=202603190816");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 12rem;
}

.over_mian_nan {
  width: 155rem;
  height:  237rem;
  z-index: 3;
}

/* ========== 分享页内容容器样式（已移除swiper） ========== */

.share_main_bg .share-content-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.share_main_bg .share-slide {
  position: absolute !important;
  height: 100% !important;
  top: 0 !important;
  transition: all 0.3s ease;
}

.share_main_bg .share-slide:first-child {
  left: 0 !important;
  width: 100% !important;
}

.share_main_bg .share-slide#dynamicSlide {
  left: 50% !important;
  width: 50% !important;
}

/* 保留你原有类名的优先级 */
.sharewrap .tiffany_wrap,
.sharewrap .ji_nan_wrap,
.sharewrap .ji_nv_wrap,
.sharewrap .mian_nan_wrap,
.sharewrap .mian_nv_wrap,
.sharewrap .suan_bg {
  position: absolute !important;
  /* left: 50% !important;
  transform: translateX(-50%) !important; */
  z-index: 1001 !important;
}

.sharewrap .over_tiffany,
.sharewrap .over_ji_nan,
.sharewrap .over_ji_nv,
.sharewrap .over_mian_nan,
.sharewrap .over_mian_nv,
.sharewrap .over_suan_nv {
  position: absolute;
  z-index: 1009;
}

.sharewrap .ren {
  /* position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  object-fit: cover; */
  position: absolute;
  z-index: 1002;
  left: 50%;
}

/* html2canvas生成的覆盖图片样式 */
.sharewrap .share-slide .canvas-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

/* 确保slide容器能正确包含覆盖图片 */
.sharewrap .share-slide {
  position: relative !important;
  overflow: hidden !important;
}

.swiper_inner {
  width: 167rem;
  height: 237rem;
  position: relative;
  top: 11rem;
  left: 5rem;
}
.shan {
  opacity: 0;
  -webkit-animation: fadeInOut 1s linear 0.3s infinite;
  animation: fadeInOut 1s linear 0.3s infinite;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.saveimg {
  width: 550px;
  height: 867px;
  opacity: 0;
  left: 50%;
  margin-left: -275px;
  top: 19%;
  position: absolute;
  z-index: 999;
}

.sharetext2 {
  width: 154rem;
  height: 6rem;
  bottom: 4.4rem;
  left: 51%;
  margin-left: -77rem;
  display: none;
}
.sharetext3 {
  width: 154rem;
  height: 6rem;
  bottom: 4.4rem;
  left: 51%;
  margin-left: -77rem;
}

.share_head1 {
  width: 166.7rem;
  height: 47rem;
  top: -64rem;
}

.share_head2 {
  width: 178rem;
  height: 13rem;
  top: -15rem;
}

.swiper_inner {
  position: relative;
}
#slide1OverlayImg {
  width: 162rem;
}

#dynamicOverlayImg {
  width: 162rem;
}

.openjd {
  width: 100%;
  height: 10rem;
  background-color: red;
}

.goutextwrap {
  width: 138.9rem ;
  margin-left: -69.45rem;
  left: 50%;
  height: 14rem;
  bottom: 24rem;
}

/* 自定义 checkbox 选中颜色 */
input[type="checkbox"]:checked {
  accent-color: #6c472b; /* 这里改成你想要的颜色 */
}

.goutext {
  width: 138.9rem ;
  height: 14rem;
}

/* 抖动动画 */
@keyframes shake {
  0%,
  100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-8px);
  }
  20% {
    transform: translateY(8px);
  }
  30% {
    transform: translateY(-6px);
  }
  40% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(4px);
  }
  70% {
    transform: translateY(-2px);
  }
  80% {
    transform: translateY(2px);
  }
  90% {
    transform: translateY(-1px);
  }
}

.goutextwrap.shake {
  animation: shake 0.8s ease-in-out;
}

.tiefanylogo {
  width: 72rem;
  /* height: 20rem; */
  left: 10rem;
  top: 10rem;
  position: absolute;
  z-index: 1;
  display: none;
}

.loadingtan {
  width: 71.6rem;
  height: 57.1rem;
  background: url("../img/loadingtan.png?v=202603190816");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.roteLoading {
  width: 14.1rem;
  height: 14.1rem;
  left: 41%;
  top: 30%;
  animation: rotate 2s linear infinite; /* 动画名 时长 匀速 无限循环 */
  /* 可选：添加旋转中心点（默认就是中心，可省略） */
  transform-origin: center center;
}

/* 3. 定义旋转动画关键帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg); /* 起始角度：0度 */
  }
  to {
    transform: rotate(360deg); /* 结束角度：360度（一圈） */
  }
}

.tabwidth {
  width: 108rem !important;
}

.mainSwiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Main swiper slide styles */
.main-slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.main-slide-logo {
  width: 55rem;
  position: absolute;
  left: 4rem;
  top: 10rem;
  z-index: 2;
}

.main-slide-people {
  width: 161rem;
  height: 172rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.main-slide-qian {
  position: absolute;
  width: 21.9rem;
  height: 52rem;
  top: 0rem;
  right: 7rem;
  z-index: 3;
}