@media (max-width: 767px) {
  body {
    width: 100%;
    height: 100%;
  }
  .section .container {
    padding: 0 1.5rem;
  }
  .myopia{
    display: flex;
    flex-direction: column;
    margin:0 1rem;
  }
  .myopia .left, .myopia .right{
    width: 100%;
  }
  .physical .Course-build{
    padding: 0rem 4% 0 4%;
    flex-direction: column;
  }
  .physical .Course-build .left{
    width: 100%;
    text-align: center;
    margin-bottom: 0.3rem;
  }
  .physical .Course-build .right{
    width: 100%;
    margin:0 auto;
  }
  .mask-items-title{
    /* color: white; */
    padding: 4rem 0 2rem 2rem;
  }
  .mask-items-title .title1{
    font-size:1.2rem;
  }
  .mask-items-title .title2{
    font-size:2.4rem;
    margin-top:2rem;
  }
  .panel-default > .panel-heading {
    background-color: #f5f5f5;
  }
  .panel-title{
    padding:1rem;
    font-size: 1rem;
  }
  .panel-group .panel-heading{
    border:1px solid #ececec;
  }
  .myTab{
    width:100%;
  }
  .section-content .screen{
    flex-direction: column;
  }
  .section-content .mode-box .mode-items ul li{
    width:100%;
    float: none;
    margin: 2rem 0;
  }
  .section-content .screen li{
    width:100%;
    text-align: center;
  }
  .section-content .mode-box .mode-items ul{
    top:38%;
  }
}