@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/*scroll bar样式*/
*::-webkit-scrollbar {
  width: 8px;
  opacity: 0.32;
  background-color: transparent;
  margin-right: 10px;
}

*::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 1px rgba(69, 34, 1, 0.3);
  background-color: rgba(69, 34, 1, 0.16);
}
body {
  color:#452201;
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../img/len99_bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main {
  width: 100%;
  height: 100%;
}
.logoBox {
  width: 180px;
  margin: 16px auto 0 auto;
}
.logoBox img {
  width: 100%;
}
h1 {
  text-align: center;
  color:#452201;
}

.tabs {
  width: calc(100% - 32px);
  max-width: 500px;
  height: 50px;
  display: flex;
  justify-content: center;
  margin: 16px auto;
  backdrop-filter: blur(2px);
  padding: 4px;
  box-shadow: 0 8px 24px 0 rgb(38 61 89 / 24%), inset -4px -4px 4px 0 rgb(38 61 89 / 24%), inset 4px 4px 4px 0 #fff;
    background-image: linear-gradient(96deg, #fafafa, #e9f0f4);
    border-radius: 100px;
}

.tab {
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  color: #452201;
  font-size: 19px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; 
}

.tab.active {
  box-shadow: 0 8px 16px 0 rgb(51 89 242 / 48%), inset -2px -4px 2px 0 rgb(35 163 251 / 72%), inset 0 2px 0 0 rgb(255 253 247 / 32%);
  background-image: linear-gradient(115deg, #61a2ff, #0033ff);
  border-radius: 100px;
  text-shadow: 1px 1px 0 rgb(69 34 1 / 48%);
  color: #fff8e4;
}

.content {
  width: 96%;
  max-width: 500px;
  position: absolute;
  top:328px;
  left: 50%;
  right: 50%;
  bottom: 16px;
  transform: translate(-50%,0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(246, 249, 251, 0.32);
  border-radius: 24px;
}

.content-item {
  display: none;
  padding: 0 16px;
}
.content-item p {
  text-align: center;
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 600;
}
.content-item > div {
  width: 100%;
  margin: 24px 0;
}
.content-item.active {
display: block;
}

.content-item .step-order {
  font-size: 25px;
 color:#04bb5d;

}
.imgBox {
  width: 60%;
  margin:16px auto 0 auto;
}
.imgBox img{
  width: 100%;
}
.area-title-box {
  width: 100%;
  height: 24px;
  margin-bottom: 16px;
  position: relative;
}
.area-title-box:before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(205,194,162,.48);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.area-title-box .area-title {
  min-width: 56px;
  height: 100%;
  background-image: linear-gradient(180deg,#fbc323,#fde397);
  background-size: 100% 100%;
  border-radius: 100px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #fff8e4;
}
@media screen and (device-aspect-ratio: 4/3) {
  .logoBox {
    width: 180px;
   }
}
@media screen and (min-width: 768px) {

}
@media screen and (min-width: 1080px) {
  .logoBox {
   width: 180px;
  }
}