*{padding: 0;margin: 0;}
.main{
  background-color: #FFFFFF;
  height: calc(100vh - 94px);
  position: relative;
  top: 44px;
  min-height: 690px;
}
.mui-bar{
 box-shadow: none; 
 background-color: #FFFFFF;
}
.mui-bar-tab{
  display: flex;
}
.mui-bar-tab .mui-tab-item{
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  font-size: 13px;
}
.slider{
  width: 90%;
  height: 150px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 15px 0 rgb(0 0 0 / 12%);
}
.mui-slider-group{
  width: 100%;
  height: 100%;
}
.slider img{
  width: 100%;
  height: 100%;
}
.notice{
  width: 90%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  box-shadow: 0 10px 15px 0 rgb(0 0 0 / 12%);
  border-radius: 40px;
}
.notice img{
  width: 5%;
  margin-right:10px;
}
.notice-contnet{
  width: calc(100% - 70px);
  height: 100%;
  overflow: hidden;
  margin-left: 10px;
}
.notice-contnet ul{
  height: 100%;
  white-space: nowrap;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.notice-contnet ul li{
  display: inline;
  margin-right: 20px;
}
.nav-bar{
  width: 90%;
  margin: 10px auto;
  display: flex;
  align-items: center;
}
.nav-bar div{
  flex: 1;
  text-align: center;
}
.nav-bar div img{
  width: 60%;
}
.nav-bar p{
  color: #000000;
  margin: 0;
}
.xy28{
  width: 90%;
  height: 130px;
  margin: 10px auto;
  background-image: url(../img/img_bj.png);
  background-size: 100% 100%;
  border-radius: 20px;
  display: flex;
  flex-flow: column;
  padding-left: 20px;
  justify-content: center;
  color: #FFFFFF;
}
.jnd28{
  width: 90%;
  height: 130px;
  margin: 10px auto;
  background-image: url(../img/img_jnd.png);
  background-size: 100% 100%;
  border-radius: 20px;
  display: flex;
  flex-flow: column;
  padding-left: 20px;
  justify-content: center;
  color: #FFFFFF;
}

h3{
  position: relative;
  height: 30px;
  line-height: 30px;
}
h3::after{
  content: '';
  width: 8%;
  height: 2px;
  background-color: #FFFFFF;
  position: absolute;
  bottom: -3px;
  left: 0;
}

.xy-btn,.jnd-btn{
  width: 30%;
  border-radius: 20px;
  color: #0062CC;
  font-weight: bold;
  margin-top: 5px;
}
.mask{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 300;
  display: none;
}
.f1{
   filter: blur(20px)
}
.xy28-pop-up,.jnd28-pop-up,.gg-pop-up{
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 301;
  transform: translate(-50%,-50%);
  border-radius: 20px;
  overflow: hidden;
}
.title{
  height: 70px;
  background-size: 100% 100%;
}
.xy28-pop-up .title{
  background-image:url(../img/title_blue.png);
}
.gg-pop-up .title {
    background-image: url(../img/title_blue.png);
}
.jnd28-pop-up .title{
  background-image: url(../img/title_red.png);
}
.pop-up-btn{
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pop-up-content{
  height: calc(100% - 180px);
  overflow: auto;
  text-align: justify;
  padding: 20px;
}
.pop-up-btn span{
  display: block;
  height: 100%;
  width: 90%;
  font-size: 20px;
  color: #FFFFFF;
  background-size: 100% 100%;
  background-position: center 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xy28-pop-up span{
   background-image: url(../img/button.png);
}
.gg-pop-up span {
    background-image: url(../img/button.png);
}
.jnd28-pop-up span{
   background-image: url(../img/red-button.png);
}