/*
 * 在 normalize.css 基础上进行的其他重置
 */

* {
  box-sizing: border-box;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
*::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  /* AntD 字体家族：https://ant.design/docs/spec/font-cn#%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

p {
  margin: 0;
  padding: 0;
}

input,
button {
  border: none;
  /* 去掉浏览器默认的 input 边框样式 */
  outline: none;
  /* 去掉浏览器默认的聚焦时候的蓝色边框 */
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
.hamburger_menu {
  display: none;
}
@media screen and (max-width: 750px) {
  .top .navbar a {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .top .text_box {
    display: none;
  }
  .top .navbar .home_active {
    font-size: 16px !important;
  }
  .swiper-pagination .active_page {
    font-size: 16px !important;
    font-weight: unset !important;
  }
  .swiper-pagination {
    font-size: 16px !important;
    height: 5% !important;
    display: none;
  }
  .swiper-pagination p {
    width: auto;
  }
  .button_box {
    display: none;
  }
  .hamburger_menu {
    /* 宽度占浏览器的可视区域宽度的100% */
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: end;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hamburger_menu #toggle {
    /* 让复选框隐藏 */
    display: none;
  }
  .hamburger_menu label {
    /* 将行内元素label转为块级元素 ,不然无法设置宽和高 */
    display: block;
    width: 48px;
    height: 48px;
    /* 鼠标移入边小手 */
    cursor: pointer;
    position: absolute;
  }
  .hamburger_menu label .hamburger_container {
    /* 相对定位 按照自己的本身位置移动,不会影响父盒子 */
    position: relative;
    top: 17px;
    left: 14px;
    width: 20px;
    height: 20px;
    z-index: 99;
  }
  .hamburger_menu label .hamburger_container span {
    /* 先让两个重叠在一起 */
    position: relative;
    top: 0;
    /* 还是一样转为块级元素 设置宽和高 */
    display: block;
    height: 1px;
    background-color: #fff;
    /* 在设置取消选中的过渡时间 */
    /* 反之 */
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s;
  }
  /* 设置第二条线 */
  .hamburger_menu label .hamburger_container span:nth-child(2) {
    top: 10px;
  }
  /* 设置转换 */
  /* + 是相邻兄弟选择器 找相邻的label */
  .hamburger_menu
    #toggle:checked
    + label
    .hamburger_container
    span:nth-child(1) {
    top: 5px;
    /* 顺时针旋转45度 */
    transform: rotate(45deg);
    /* 现在很生硬,设置过渡时间 */
    /* 这个是先执行top这个属性,然后0.2s后执行旋转 */
    transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
  }
  /* 选中后的第二条线 */
  .hamburger_menu
    #toggle:checked
    + label
    .hamburger_container
    span:nth-child(2) {
    top: 5px;
    /* 逆时针旋转45度 */
    transform: rotate(-45deg);
    transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
  }
  /* 这个就可以了 */
  /* 现在做菜单栏 */
  .hamburger_menu ul {
    width: 430px;
    /* 让高度占浏览器可视区域的100% 减去 导航栏的48px */
    height: calc(100vh);
    /* 内边距 */
    padding: 0 50px;
    /* 基本框架搭建完了 */
    /* 在做下拉的菜单栏的转换 */
    /* 缩放到0 就是没有 */
    transform: scaleY(0);
    /* 设置过渡时间 */
    transition: all 0.4s ease-in-out;
    /* 现在是中间缩放 我们需要从上面下来 我们设置缩放中心点 */
    /* 写这个值就是从最上面的中间开始缩放和放大,得到下拉的效果 */
    transform-origin: 50% 0;
    background-color: rgba(0, 0, 0, 0.9);
    /* 然后在设置一下透明度 达到更好的视觉效果 */
    /* 起初是全透明 */
    opacity: 0;
    padding-top: 50px;
    flex: 0 0 130%;
    transform: translate(12px, -5px) !important;
    display: none;
  }
  .hamburger_menu ul li {
    /* 取消小圆点 */
    list-style: none;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
  }
  /* 给前三条li设置下边框 */
  .hamburger_menu ul li:nth-child(-n + 4) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  /* 选中复选框放大到原有高度 */
  /* 哈哈,出了小失误,空格就去找input框里面的子元素了
  这里面写~ 是通用兄弟选择器,找同级的ul元素 */
  .hamburger_menu #toggle:checked ~ ul {
    transform: scaleY(1);
    /* 选中后是不透明 */
    opacity: 1;
  }
}