PhonicsGame_master/pages/main/detail.wxss

.container {
  background-color: #4F4745;
  justify-content: flex-start;
  width: 100%; 
}

.makepaper_headline_illus_lab{
  width: 100%;
  height:350rpx;
}

.questioncard_icon {
  width: 86rpx;
  height: 96rpx;
  position: absolute;
  top:86rpx;
  left:490rpx;
  z-index: 10;
}

.Example{
  font-family: 'Roboto-Bold';
  font-size:24rpx;
  color:#D3E9FF;
  position: absolute;
  top:191rpx;
  left:329rpx;
  z-index: 10;
}

.makepaper_headline_illus_windows{
  width: 100%;
  height:350rpx;
  position: absolute;
  top:0;
  z-index: 20;
}

.line0 {
  width: 100%;
  height: 20rpx;
  background-color: #FFCE50;
}

.line1 {
  width: 100%;
  height: 150rpx;
  background-color: #B47C35;
}

.makepaper_headline_illus_board{
  width: 563rpx;
  height: 100rpx;
}


.line1 .text{
  color:#FAE5D2;
  margin-top: -80rpx;
  font-size:42rpx;
}
.line1 .text2{
  font-size:32rpx;
  margin-top: -70rpx;
}


.line2 {
  width: 100%;
  height: 10rpx;
  background-color: #9A6726;
}

.line3 {
  width: 100%;
  height: 120rpx;
  background-color: #3A3332;
}

.line4 {
  width: 100%;
  height: 30rpx;
  background-color: rgba(0,0,0,0.1);
  margin-top: -120rpx;
  z-index: 20;
}

.panel1 {
  width: 680rpx;
  height: 782rpx;
  background-color: #262626;
  margin-top: -30rpx;
  z-index: 10;
  color:#9B9B9B;
  justify-content: flex-start;

  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}
.panel1 .text1{
  font-size:36rpx;
  margin-top: 60rpx;
}
.panel1 .text2{
  font-size:36rpx;
  margin-top: 30rpx;
  color:#d2d2d2;
}
.panel1 .text2_1{
  margin-top: 30rpx;
  height:100rpx;
}
.panel1 .text3{
  font-size:24rpx;
  margin-top: 10rpx;
  color:#868686;
}
.universalpic_attention_black_size01{
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
}


.universalpic_indicator_cell_size01{
  width:400rpx;
  height:104rpx;
  margin-top: -94rpx;
}
.btnSelect{
  width: 310rpx;
  height:104rpx;
  font-size: 36rpx;
  color:#D2D2D2;
  text-align: center;
  line-height: 90rpx;
  margin-top: 15rpx;
}
.universalpic_line_dashed_size01{
  width:634rpx;
  height:4rpx;
  margin-top: 52rpx;
}

.panel1 .text4{
  font-size:36rpx;
  margin-top: 40rpx;
}

.universalpic_value_cell_size01{
  width:400rpx;
  height:104rpx;
  margin-top: 30rpx;
}

.panel1 .panel10{
  margin-top: -104rpx;
  width:400rpx;
  height:104rpx;
  justify-content: space-between;
}

.panel1 .btnAddSub{
  width:90rpx;
  height:84rpx;
  margin-top: 5rpx;
  border-radius: 8rpx;
}
.panel1 .btnAddSubDisabled{
  background-color: rgba(46, 46, 46, 0.7);
}

.panel1 .Number{
  color:#D2D2D2;
  font-size: 36rpx;
  margin-top: 0rpx;
}

.panel1 .text5{
  font-size:24rpx;
  margin-top: 30rpx;
  color:#868686;
  font-weight: 400;
}


.btnStart {
  width: 680rpx;
  height: 160rpx;
  background-color: #7D2B25;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  position: relative;
  margin-top: 80rpx;
}

.btnStart1 {
  width: 100%;
  height: 130rpx;
  background-color: #B3443B;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  line-height: 130rpx;
  text-align: center;
  color: #DEC2B8;
  font-size: 56rpx;
}

.btn {
  width: 600rpx;
  height: 130rpx;
  background-color: #7D2B25;
  border-radius: 10rpx;
  position: relative;
  margin-top: 80rpx;
  margin-bottom: 60rpx;
}

.btn1 {
  width: 100%;
  height: 100rpx;
  background-color: #B3443B;
  border-radius: 10rpx;
  line-height: 100rpx;
  text-align: center;
  color: #DEC2B8;
  font-size: 48rpx;
}

.btn2Distabled {
  background-color: #1E1E1E;
  margin-top: 60rpx;
}

.btn1Distabled {
  background-color: #2E2E2E;
  color: #4D4D4D;
}

.universalpic_line_zigzag_black_down{
  width: 680rpx;
  height: 49rpx;
}

.universalpic_line_zigzag_black_up{
  width: 680rpx;
  height: 79rpx;
  margin-top: 10rpx;
}


.panel2 {
  width: 680rpx;
  height: 1384rpx;
  background-color: #262626;
  margin-top: 40rpx;
  z-index: 10;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.10);
  justify-content: flex-start;
}


.panel2 .panel20{
  width: 100rpx;
  height: 100rpx;
  background-color: #19C575;
  margin-top: 140rpx;
  border-radius: 50%;
}

.panel2 .text6{
  font-size:32rpx;
  margin-top: 50rpx;
  color:#9B9B9B;
}

.panel2 .androidPanel{
  width: 100%;
  height: 70rpx;
  background-color: #2E2E2E;
  margin: 30rpx 0 0 0;
}

.universalpic_attention_blue_size01{
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
}
.panel2 .androidPanel .text{
  color:#787878;
  font-size:24rpx;
}
.panel2 .androidPanel .text2{
  color:#fff;
  font-size:24rpx;
  text-decoration:underline;
}

.btn2 {
  margin-top: 60rpx;
}

.panel2 .panel21{
  width: 600rpx;
  margin-top: 40rpx;
  flex-wrap: wrap;
  justify-content: center;
}
.panel2 .panel210{
  width: 130rpx;
  height:184rpx;
  border-radius: 8rpx;
  background-color: #dddddd;
  margin: 0 10rpx 20rpx 10rpx;
}

.universalpic_right_white_size01{
  width: 50rpx;
  height: 38rpx;
}

.panel2 .text8{
  font-size:32rpx;
  margin-top: 60rpx;
  color:#9B9B9B;
}

.panel2 .panel22{
  width:100%;
  margin-top: 60rpx;
  justify-content: space-around;
  align-items: flex-start;
}

.panel2 .panel220{
  width:260rpx;
  justify-content: flex-start;
}
.panel2 .panel2200{
  width:106rpx;
  height:106rpx;
  border-radius: 50%;
  background-color: #4D4D4D;
}

.universalpic_print_gray_size01{
  width:48rpx;
  height:50rpx;
}
.universalpic_write_gray_size01{
  width:50rpx;
  height:50rpx;
}

.panel2 .text9{
  width:260rpx;
  font-size:24rpx;
  margin-top: 40rpx;
  color:#868686;
  text-align: center;
  font-weight: 400;
}

.panel2 .text10{
  color:#fff;
  text-decoration:underline;
}

.line5 {
  width: 100%;
  height: 100rpx;
}


.menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #d2d2d2;
  z-index: 30;
}

.menu .text1 {
  font-size: 24rpx;
  margin: 30rpx;
}

.menu .panel {
  font-size: 36rpx;
  height: 111rpx;
  width: 100%;
  background-color: #fff;
  position: relative;
}

.menu .line {
  height: 2rpx;
  width: 100%;
  background-color: #e3e3e3;
}

.menu .line2 {
  height: 20rpx;
  width: 100%;
  background-color: #d2d2d2;
}

.universalpic_select_on_black {
  height: 30rpx;
  width: 30rpx;
  position: absolute;
  left:40rpx;
  top:40rpx;
}


.Canvas{
  width: 1050px; 
  height: 1485px;
  position: fixed;
  left:760rpx;
  top:0rpx;
}

.loading {
  position: fixed;
  top:0;
  z-index: 100;
  background-color: rgba(229,167,68,0.8);
}

.loading .loading1 {
  position: absolute;
  top:317rpx;
  width:100%;
}

.loading1 .line1 {
  width:100%;
  height:20rpx;
  background-color: #A63917;
}


.loading1 .line2 {
  width:100%;
  height:279rpx;
  background-color: #FFE6C2;
  z-index: 100;
}

.loading1 .text {
  font-size:48rpx;
  margin-top:60rpx;
}

.loading1 .text2 {
  font-size:24rpx;
  margin-top: 10rpx;
}

.loading1 .line3 {
  width:100%;
  height:250rpx;
  background-color: #A63917;
  color:#fff;
}

.loading1 .text3 {
  font-size:28rpx;
}

.loading1 .text4 {
  font-size:32rpx;
  margin-top: 10rpx;
  font-weight: 400;
  text-align: center;
  width: 690rpx;
}

.loading1 .line4 {
  width:100%;
  height:20rpx;
  background-color: #7D2B25;
  margin-top: 0rpx;
}


.loading1 .universalpic_attention_light_red_bg{
  width:172rpx;
  height:192rpx;
  z-index: 110;
  position: absolute;
  top:-91rpx;
}
.loading1 .universalpic_attention_light_red{
  width:90rpx;
  height:90rpx;
  position: absolute;
  top: -40rpx;
  z-index: 110;
}

.loading .close {
  position: fixed;
  bottom:126rpx;
  width:100%;
}
.loading .close1 {
  width:120rpx;
  height:120rpx;
  border-radius: 50%;
  background-color: #B3443B;
}

.universalpic_close_white_size01{
  width:26rpx;
  height:26rpx;
}

.Help_aside_makepaper{
  width: 100%;
  height: 320rpx;
  position: fixed;
  bottom: 0rpx;
  z-index: 100;
}

.Help_aside_savepaper{
  width: 100%;
  height: 270rpx;
  position: fixed;
  bottom: 0rpx;
  z-index: 100;
}