cocorobo/assets/css/main.scss

html {
  .content {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
}
* {
  box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
  line-height: 32.4px;
}

body {
  background: #fff;
  color: #000;
  font-size: 16px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

td,
th,
caption {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

h1 {
  font-size: 64px;
}
h2 {
  font-size: 48px;
}
h3 {
  font-size: 32px;
}
h4 {
  font-size: 24px;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

a {
  color: #555;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  border: none;
}

ol,
ul,
li {
  list-style: none;
}

input,
textarea {
  font:
    24px Verdana,
    Helvetica,
    Arial,
    sans-serif;
}
select {
  font:
    14px Verdana,
    Helvetica,
    Arial,
    sans-serif;
  padding: 8px 10px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  outline: #ccc;
  cursor: pointer;
}
select option {
  padding: 8px 10px;
  outline: none;
  cursor: pointer;
}

button {
  font:
    18px Verdana,
    Helvetica,
    Arial,
    sans-serif;
  padding: 10px 15px;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #1eaaff;
  color: #fff;
  border-radius: 10px;
}

table {
  border-collapse: collapse;
}

html {
  overflow-y: scroll;
}

#app {
  /* padding: 0 20px; */
  height: 100vh;
}

/* 清除浮动 */
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}
.content {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
.model {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s linear;
  animation-name: modelOpacity;
  animation: 1s;

  .model-content {
    width: 600px;
    padding: 30px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .model-title {
      span {
        position: absolute;
        right: 20px;
        top: 20px;
        font-weight: 400;
        color: #666;
        font-size: 28px;
      }
    }
    .model-content-text {
      margin-top: 30px;
      p {
        margin: 25px 0;
      }
      input {
        border: none;
        border-bottom: 3px solid #000;
        width: 100%;
        outline: none;
        padding: 5px 0;
      }
    }
    .model-btn {
      margin-top: 30px;
    }
  }
}

@keyframes modelOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media screen and (max-width: 800px) {
  html {
    .content {
      width: 100%;
      text-align: center;
    }
    header .app-header {
      width: 100%;
    }
    .product .product-top .product-top-line{
      width: 100%;
    }
    .course-list {
      & .course-list-content-div {
          & .course-list-content-div-item {
            width: 48% !important;
          }
      }
    }
    .platform-div{
      width: 48% !important;
    }
    .about-content{
      padding-left: 0 !important;
      flex-wrap: wrap;
        .about-content-left{
          margin-right: 0 !important;
        }
        img{
          width: 100%;
        }
    }
    #footer {
      .footer-top {
        padding: 0;
        flex-wrap: wrap;
        .footer-left {
          ul{
            justify-content: center;
          }
        }
        .footer_img1 {
          display: none;
        }
        .footer_img2 {
          display: none;
        }
        .footer_img3 {
          display: none;
        }
      }
    }
  }
}