PhonicsGame_master/pages/main/default.wxss

page{
  background-color: #583027;
}
.container {
  background-color: #583027;
  justify-content: flex-start;
  font-weight: 500;
}

.index0{
  width:100%;
}
.home_banner_header_sz{
  width:100%;
  height:150rpx;
}

.scroll-view_H {
  width: 100%;
  height: 460rpx;
  position: relative;
}

.homepage_headline_illus {
  width: 1500rpx;
  height: 460rpx;
}

.scrollview{
  width: 514rpx;
  height: 312rpx;
  position: absolute;
  left:910rpx;
  top:34rpx;
}

.homepage_headline_info{
  width: 445rpx;
  height: 455rpx;
}

.panel {
  width: 100%;
  background-color: #583027;
  justify-content: flex-start;
}

.panel .line1 {
  width: 100%;
  height: 120rpx;
  background-color: #291112;
}

.panel .line2 {
  width: 680rpx;
  height: 10rpx;
  background-color: rgba(0, 0, 0, 0.30);
  position: absolute;
  top:0;
}

.panel0 {
  width: 100%;
  position: absolute;
  top: 460rpx;
  align-items: flex-start;
}

.panel00 {
  width: 680rpx;
  justify-content: flex-start;
}

.panel000 {
  width: 100%;
  height: 90rpx;
  background-color: #4f2921;
}

.panel000 .textTitle {
  font-size: 36rpx;
  font-weight: 500;
  width: 180rpx;
  height:50rpx;
}
.panel000 .textTitle1 {
  -webkit-text-stroke:10rpx #471e1c;
  position: absolute;
  text-align: center;
  line-height: 50rpx;
}
.panel000 .textTitle2 {
  color: #e3e3e3;
  position: absolute;
  text-align: center;
  line-height: 50rpx;
}

.panel001 {
  width: 100%;
  height: 398rpx;
  background-color: #723c30;
  align-items: flex-start;
}

.panel0010 {
  flex-wrap: wrap;
  margin: 50rpx 0 0 0;
  background-color: #723c30;
}

.panel0011{
  width:100%;
  height:24rpx;
  background-color: #723c30;
}

.homepage_question_illus_grade01 {
  width: 290rpx;
  height: 134rpx;
  margin: 10rpx 15rpx 10rpx 15rpx;
}

.universalpic_line_zigzag_brown_down {
  width: 100%;
  height: 49rpx;
}

.homepage_banner{
   width:100%;
   height: 360rpx;
}

.universalpic_line_zigzag_brown_up {
  width: 100%;
  height: 79rpx;
  margin-top: 10rpx;
}

.panel00102{
  width:100%;
  height:30rpx;
  background-color: #723C30;
}
.panel002 {
  width: 100%;
  height:658rpx;
  background-color: #723c30;
  position: relative;
  align-items: flex-start;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.panel0020 {
  width: 560rpx;
  height: 568rpx;
  background-color: #aa5d49;
  border-radius: 14rpx;
  position: relative;
}

.homepage_clipboard_illus_clip {
  width: 220rpx;
  height: 116rpx;
  position: absolute;
  left: 230rpx;
  top: -34rpx;
}

.homepage_clipboard_illus_ruler {
  width: 218rpx;
  height: 57rpx;
  position: absolute;
  right: 77rpx;
  top: 537rpx;
}

.panel00200 {
  margin-top: -14rpx;
  width: 490rpx;
  height: 478rpx;
  background-color: #ffc76d;
  border-radius: 14rpx;
  box-shadow: 0px 3px 0px #77472a;
  justify-content: flex-start;
  font-size: 24rpx;
  font-weight: 500;
}

.panel00200 .textTitle3 {
  font-size: 36rpx;
  margin-top: 70rpx;
  font-weight: 500;
  position: relative;
  width: 174rpx;
  height:50rpx;
  text-align: center;
}
.panel00200 .textTitle4 {
  -webkit-text-stroke:10rpx #bd682d;
  position: absolute;
  text-align: center;
}
.panel00200 .textTitle5 {
  color: #fff;
  position: absolute;
  text-align: center;
}

.panel00200 .line3 {
  margin-top: 50rpx;
  width: 430rpx;
  height: 4rpx;
  background-color: #638a79;
  border-radius: 2rpx;
}

.panel00200 .line4 {
  margin-top: 20rpx;
}

.panel002000 {
  width: 430rpx;
  justify-content: space-between;
  margin-top: 20rpx;
}

.panel00200 .text2 {
  font-size: 24rpx;
  font-weight: 600;
}

.btn0 {
  width: 208rpx;
  height: 90rpx;
  background-color: #98492F;
  border-radius: 8rpx;
  position: relative;
  padding-left: 0;
  padding-right: 0;
}


.btn0::after {
  border: 0px;
}

.btn10 {
  width: 100%;
  height: 70rpx;
  background-color: #D0603B;
  border-radius: 8rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
}

.btn20 {
  background-color: #315982;
  margin-left: 14rpx;
}

.btn30 {
  background-color: #3b85d0;
}

.btn6 {
  width: 430rpx;
  margin-left: 0rpx;
}

.panel00201 {
  width: 160rpx;
  height: 160rpx;
  background-color: #fff;
  border-radius: 4rpx;
  position: absolute;
  left: 18rpx;
  top: 30rpx;
}

.universalpic_face_default_black_size01 {
  width: 140rpx;
  height: 140rpx;
  border-radius: 4rpx;
}
.gear{
  width:40rpx;
  height:40rpx;
  position: absolute;
  bottom:10rpx;
  left:10rpx;
  border-top-right-radius: 10rpx;
  background-color: #fff;
}
.img{
  width:24rpx;
  height:24rpx;
}

.panel003 {
  width: 100%;
  background-color: #723c30;
  box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.10);
  color: #edc1b4;
  justify-content: flex-start;
}

.circularBottom {
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.panel0030 {
  width: 100%;
  font-size: 20rpx;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30rpx;
}

.panel00300 {
  margin-left: 40rpx;
  align-items: flex-start;
}

.panel003000 {
  font-size: 24rpx;
  width: 314rpx;
  justify-content: space-between;
  margin-top: 30rpx;
}

.panel003000 .line {
  width: 5rpx;
  height: 20rpx;
  background-color: #583027;
}

.btn4 {
  background-color: #583027;
  margin-right: 80rpx;
  width: 140rpx;
  height: 154rpx;
  border-radius: 20rpx;
}

.btn5 {
  height: 140rpx;
  background-color: #9d4d3c;
  font-size: 22rpx;
  color: #fff;
  border-radius: 20rpx;
}


.universalpic_share_size01 {
  width: 50rpx;
  height: 50rpx;
  margin-top: 24rpx;
}

.panel0031 {
  margin-top: 35rpx;
  width: 100%;
  font-size:24rpx;
  color:#EDC1B4;
  align-items: flex-start;
}

.panel00310 {
  margin-left: 40rpx;
}

.panel0031 .line{
  margin-top: 30rpx;
  width: 100%;
  height:1rpx;
  background-color: #985546;
}

.panel00311 {
  margin-top: 30rpx;
  width: 100%;
  justify-content: space-between;
}


.panel003110 {
  margin-left: 40rpx;
  font-size:28rpx;
  font-weight: 400;
}


.universalpic_product_kousuan_icon_size01 {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.universalpic_indicator_maroon {
  width: 16rpx;
  height: 26rpx;
  margin-right: 30rpx;
}

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


.menuPanel{
  position: fixed;
  top: 0;
  width: 100%;
  background-color:rgba(185, 220, 93, 0.9);
  z-index: 30;
}

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

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

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

.menu .panel2 {
  height: 143rpx;
}

.menu .text3 {
  font-size:24rpx;
  font-weight: 400;
}

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

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


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


.index5{
  width:100%;
  justify-content: flex-start;
}


/* .HelpInfo2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: rgba(185, 220, 93, 0.95);
  justify-content: flex-start;
  z-index: 100;
}

.HelpInfo2 .btn {
  width: 600rpx;
  height: 640rpx;
  background-color: #D2D2D2;
  border-radius: 40rpx;
  margin: 15rpx;
  position: relative;
  margin-top: 222rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.5);
}

.HelpInfo2 .btn1 {
  width: 100%;
  height: 640rpx;
  border-radius: 40rpx;
  color: #1e1e1e;
  text-align: center;
  font-size: 36rpx;
  justify-content: flex-start;
}

.HelpInfo2 .home_banner_window {
  width: 600rpx;
  height: 500rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
}

.HelpInfo2 .btn2 {
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  background-color: #F0F0F0;
  color: #1e1e1e;
  text-align: center;
  font-size: 48rpx;
  font-weight: 500;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}
.HelpInfo2 .close2 {
  position: fixed;
  bottom:207rpx;
  font-size:26rpx;
  color: #1e1e1e;
  text-decoration: underline;
  font-weight: 500;
  z-index: 100;
  width:100%;
  height:50rpx;
}
.HelpInfo2 .close {
  width: 100%;
  height: 235rpx;
  position: fixed;
  bottom:0;
}

.HelpInfo2 .closeImage{
  width:33rpx;
  height:33rpx;
} */

.panel1{
  width:100%;
  position: absolute;
  top:1800rpx;
}

.panelOther{
  width:100%;
  height:160rpx;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}

.panelOther1{
  color:#fff;
  margin:60rpx 0 0 50rpx;
  font-size:36rpx; 
}

.home_triangle_up{
  width:34rpx;
  height:20rpx;
  position: absolute;
  bottom:0;
  left:105rpx;
  z-index: 10;
}

.panelProduct{
  width:100%;
  background-color: #fff;
  align-items: flex-start;
}
.panelProduct0{
  width:50%;
  font-size:32rpx;
  color:#4D4D4D;
  justify-content: flex-start;
  align-items: flex-start;
}
.panelProduct1{
  background-color: #fff;
  margin: 50rpx 0 0 50rpx;
  font-size:32rpx;
  color:#4D4D4D;
}

.panelProduct10{
  width:100%;
}

.panelProduct2{
  background-color: #fff;
  margin: 0 0 0 50rpx;
  font-size:32rpx;
  color:#4D4D4D;
}

.panelProduct3{
  width:300rpx;
  margin:30rpx 0 0 50rpx;
  justify-content: flex-start;
}

.sofewareicon_mg{
  width:66rpx;
  height:66rpx;
}


.panelProduct31{
  margin:0 0 0 30rpx;
  align-items: flex-start;
}
.panelProduct311{
  font-size:28rpx;
}
.panelProduct312{
  font-size:20rpx;
  color:#4D4D4D;
}

.home_banner{
  width:100%;
  height: 280rpx;
}

.HelpInfo2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #B9DC5D;
  justify-content: flex-start;
  z-index: 100;
}

.HelpInfo2 .btn {
  width: 600rpx;
  height: 640rpx;
  background-color: #D2D2D2;
  border-radius: 40rpx;
  margin: 15rpx;
  position: relative;
  margin-top: 222rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.5);
}

.HelpInfo2 .btn1 {
  width: 100%;
  height: 640rpx;
  border-radius: 40rpx;
  color: #1e1e1e;
  text-align: center;
  font-size: 36rpx;
  justify-content: flex-start;
}

.HelpInfo2 .home_banner_window {
  width: 600rpx;
  height: 500rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
}

.HelpInfo2 .btn2 {
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  background-color: #F0F0F0;
  color: #1e1e1e;
  text-align: center;
  font-size: 48rpx;
  font-weight: 500;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}
.HelpInfo2 .close2 {
  position: fixed;
  bottom:207rpx;
  font-size:26rpx;
  color: #1e1e1e;
  text-decoration: underline;
  font-weight: 500;
  z-index: 100;
  width:100%;
  height:50rpx;
}
.HelpInfo2 .close {
  width: 100%;
  height: 235rpx;
  position: fixed;
  bottom:0;
}

.HelpInfo2 .closeImage{
  width:33rpx;
  height:33rpx;
}

.PanelMiaoguo{
  width:100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
  position: fixed;
  left: 0;
  top: 0;
  justify-content: flex-start;
}

.PanelMiaoguo1{
  width:100%;
  height:1055rpx;
  background-color: #1A264C;
  color:#fff;
  position: fixed;
  left: 0;
  bottom: 0;
  justify-content: flex-start;
}

.Text1{
  font-size:32rpx;
  margin-top:70rpx;
}
.Text2{
  font-size:64rpx;
}

.Text3{
  font-size:32rpx;
  text-align: center;
}

.Text4{
  font-size:32rpx;
  margin-top:50rpx;
  color:#FF970C;
}
.Text5{
  font-size:68rpx;
  color:#FF970C;
}
.btn3{
  width:580rpx;
  height:130rpx;
  border-radius: 20rpx;
  background-color:#FF970C;
  margin-top:20rpx;
}
.bm_sy_banner-open{
  width:220rpx;
  height:70rpx;
}
.bm_sy_illus{
  width:100%;
  height:360rpx;
}

.btnRecord{
  width:220rpx;
  height:80rpx;
  position: absolute;
  left:232rpx;
  top:270rpx;
  z-index: 20;
}
.btnReadme{
  width:125rpx;
  height:80rpx;
  position: absolute;
  left:35rpx;
  top:270rpx;
  z-index: 20;
}

.HelpInfo21{
  width:100%;
  height:500rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: #DAEB99;
}
.HelpInfo211{
  font-size:60rpx;
  margin-top:30rpx;
}
.HelpInfo212{
  font-size:36rpx;
}
.png02014{
  width:190rpx;
  height:190rpx;
}

.message_home_01{
  width:265rpx;
  height: 127rpx;
  position: absolute;
  top:145rpx;
  left:40rpx;
  z-index: 10;
}