.takephoto {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  font-size: 30rpx;
  background-color: #333;
  box-sizing: border-box;
}

.takephoto .photo .focus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300rpx;
  z-index: 99999;
}

.takephoto  .focus .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 80%;
  color: #fff;
  font-size: 30rpx;
  font-weight: 700;
}

/* .takephoto .focus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400rpx;
  z-index: 99999;
} */

.takephoto .photo {
  flex: 1;
  height: 400rpx;
}


.step,
.step-box,
.bottom,
.tabs {
  display: flex;
  justify-content: center;
  text-align: center;
}

.step .step-item {
  padding: 0 20rpx;
  height: 80rpx;
  min-width: 150rpx;
  line-height: 80rpx;
  color: #fff;
  background-color: #ADADAD;
}

.bottom .tabs .tabItem {
  height: 80rpx;
  line-height: 80rpx;
  min-width: 200rpx;
  color: #FAF38E;
  border-radius: 10rpx;
}

.bottom .tabs .tab-active {
  color: #fff;
  background-color: #333;
}


.step-active {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABMCAIAAABSySbyAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAA5NJREFUeJzV2utW2kAQB3DfpLUIHiveoFCx2pZ6vADlUn2kCnITCQICDZE33c4qFMh9k9k53XP2kx/M/7fZmd2EbFReGIxfs/UBfzEERrLD3v9mm1XLuPMeHwKN4y67feFjIzygqLNIlRQQrbHLER7gWOPpKQG7DVaZIgF+6ixWowac9efpEQDfBzwEJWCrym5mSICKwRIP8/RkgIzGbrEApem8fMkAUL65CR4goy3T0wAO2vy24wBM008D4OU7QwJ8G6ylJwDAfJUNJEB5yg7b1IBjbZE+PCA/4e2MEgCXKxl4gJOeOb1swNEDT4UDgG08ek8KiNzxklumDwmwlq9sALT/4hQJAOW716QGpLrr6cMArkY25SsVAN3TPP1hALblKxUAxy1z+jCA7TopAKb/xxAPkB06ppcE2KnzRw4cAJyiPjqUrzxA2lq+gQEXI/4fKQGwfvJ/8ACfu27pZQCO2q8pUQDQ/necy1cGAKYf7rl9+gCA82eP9OiA3QZ/5EADeE4/OiD96Lx+RAFwKz3TIwOq7HrinF4IAN0z9UgN2G+9vjtBAcA+4mf9IALg8HzpUr6iANjJN13bPzog3ly8ekABxF13XxmATM8rvX/A1Zht+kuPBYD2fz3GAyQ6ftNjAeItH+l9AuAcsm337CsP4LH7igJW3zzTAGD39eieQgBoxv7TowBOn/yl9wOA9SM0/eEBsXuWczo8BwAk/O2+iAC++7ocfoQAeZ1t1agB9s++wQBnfYH2jwKA04pAendAZcZ/RxBNHxKwfPEfHlDQ+WmWEgC7TcH21UMwQBLKV7D/hAQkTG+ewwDm008LECtfd8Bp/zU9IQDav/D0OwFKBttrUwOEy9cFkIP1UyMFRGsrv9uFB6S6i/RUgGRHZPd1BxSNRflSAaB8s4NA6W0BJ08r6UkAMVg/ou3fCQDlu9ukBpxo7CZYAVgBF2MWqZEC4LBYMfAA6e56evmATx2eHgdQfvtsgxAAlzsf4gHM5SsfAIfnoo4EKE5ZtE4NeCtfHED2mV+JEsB/99XxALAXvrOmlwn4V744ADiNUAJg+i9HqABITwmIN1lJVxmQ0dbSKwaA01thojIg2TGnVwkA5ZuzTL9KgL0W/1ZNYcCXnk16ZQD8sw279aMM4KBln14NADxq58YqA/bbjukVAMDm9bWvMiB271i+agAOXdePAoCrkcqAeMMj/X8NgO6ZHUgH/AUJ74OazCuVeQAAAABJRU5ErkJggg==');
  background-size: auto 100%;
  background-repeat: repeat-x;
}