* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button:focus {
  outline: none;
}
a {
  text-decoration: none;
  color: white;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav {
  height: 60px;
  padding: 100px 0px 30px;/*这里的30px，将自我介绍压在一个舒服的视觉距离内，
  之前是0px，感觉离得太近了*//*
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;/**/
  background-color:#1f2739;
  width:74.7916667%;
  align-items: center;
  margin: 0 auto;/*将三道杠左对齐页面看上去统一些*/

}
.navbar-header {
  /*
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;/**/
}     
.navbar-toggle {
  height: 37px;
  width: 30%;
  text-align: center;
  display: none;
  border: none;
  background-color: #1f2739;
}
.navbar-toggle span {
  display: block;
  width: 30px;
  margin: 3px 0;
  border-bottom: 2px solid #fff;
}
/*
.navbar-logo {
  display: block;
}/**/


.navbar-nav {
  /*display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;/**/
  overflow: hidden;
}

.navbar-nav li {
  /*
  display: inline-block;
  padding: 0.5em;/**/
  float: left;
  width:16.66666667%;
  font-size: 13px;
}

.navbar-nav li.down {
  padding-top: 10px;
}

.navbar-nav li  a{
  /*border-radius:20px;/**/
  padding:4px 0px;/*之前三道杠的下拉菜单内容文字是居中显示，这里的值是 4px 25px*/
}

.navbar-nav li a:hover{
  color: #fbe1c6;
  /*background-color:#fff;
  box-shadow:1px 1px 1px 0 #fff/**/
}

.active {
  color: #fbe1c6;
  /*background-color:#fff;
  box-shadow:1px 1px 1px 0 #fff/**/
}
span.calling {
  background-color: #FF0000;
  border-radius: 2px;
  padding: 0px 2px;
  margin: 0px 0px 0px 8px;
  color: #fff;
}
a.logo img {
  max-width: 40px;
}


@media(min-width:415px) and (max-width: 768px) {
  nav {
    display: block;
    padding: 0px;
  }
  .navbar-header {
    padding: 50px 0px 10px 10px;
  }     
  .navbar-toggle {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;/*之前三道杠在页面居中，这里的值是 center*/
    width: 30%;
    text-align: center;
    margin: 0 0;/*之前三道杠在页面居中，这里的值是 0 auto*/
  }
  .collapse {
    display: none;
  } 
  .navbar-collapse {
    height: 100%;
    width:100%;/*30%*/
    right: 0;
    position:fixed;
    background-color:#1f2739;
    z-index: 100;
    padding-left: 14.1%;
  }
  .navbar-collapse li {
    width: 100%;
    border-bottom: 1px solid #fff;;
    text-align: left;/*之前三道杠的下拉菜单内容文字是居中显示，这里的值是 center*/
  }
  .navbar-nav li {
    padding: 2em 0em;/**/
  }
  .navbar-nav li.down {
  padding-top: 2em;
  }
}
@media(max-width: 414px) {
  nav {
    display: block;
    padding: 0px;
  }
  .navbar-header {
    padding: 50px 0px 10px 0px;
  }     
  .navbar-toggle {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;/*之前三道杠在页面居中，这里的值是 center*/
    width: 30%;
    text-align: center;
    margin: 0 0;/*之前三道杠在页面居中，这里的值是 0 auto*/
  }
  .collapse {
    display: none;
  } 
  .navbar-collapse {
    height: 100%;
    width:100%;/*30%*/
    right: 0;
    position:fixed;
    background-color:#1f2739;
    z-index: 100;
    padding-left: 12.9%;
  }
  .navbar-collapse li {
    width: 100%;
    border-bottom: 1px solid #fff;;
    text-align: left;/*之前三道杠的下拉菜单内容文字是居中显示，这里的值是 center*/
  }
  .navbar-nav li {
    padding: 2em 0em;/**/
  }
  .navbar-nav li.down {
  padding-top: 2em;
  }
}