PhonicsGame_master/pages/main/default.wxss

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

.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;
  height: 2634rpx;
  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;
  height: 2534rpx;
  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: 368rpx;
  background-color: #723c30;
}

.panel0010 {
  flex-wrap: wrap;
}

.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:270rpx;
}

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

.panel00102{
  width:100%;
  height:30rpx;
  background-color: #723C30;
}
.panel002 {
  width: 100%;
  height: 638rpx;
  background-color: #723c30;
  position: relative;
}

.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: -17rpx;
}

.homepage_clipboard_illus_ruler {
  width: 218rpx;
  height: 57rpx;
  position: absolute;
  right: 77rpx;
  bottom: -5rpx;
}

.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: 154rpx;
  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;
}

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


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

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

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

.btn3 {
  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%;
  height: 1050rpx;
  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;
}