/* ------------------------------------------
 * IT书包
 * 网址：www.itshubao.com
 * 整理：yinq<3331653644@qq.com> 
 -------------------------------------------- */
/*------------------------------------*
  VARIABLES
\*------------------------------------*/
/*------------------------------------*
  BASE STYLES
\*------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  outline: none;
}
body {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #2e2e2e;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}
h1 {
  font-size: 3rem;
  font-weight: 300;
  margin: 5rem 0;
  color: #fff;
}
a {
  text-decoration: none;
  color: #fff;
}
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
/*------------------------------------*
  MENU
\*------------------------------------*/
.menu {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/*------------------------------------*
  MENU ITEM
\*------------------------------------*/
.menu__item {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 300;
  padding: 0.5rem;
  transform: translateX(calc(-100% -   2.4rem));
  transition: background-color 0.2s;
}
.menu__item:nth-child(2) {
  width: 12rem;
  background-color: #67e89b;
}
.menu__item:nth-child(2)::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  top: 0;
  border: 1.2rem solid #67e89b;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
  transition: border 0.2s;
}
.menu__item:nth-child(2):hover {
  background-color: #2ddf75;
}
.menu__item:nth-child(2):hover::after {
  border: 1.2rem solid #2ddf75;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
}
.menu__item:nth-child(3) {
  width: 9.6rem;
  background-color: #5fd992;
}
.menu__item:nth-child(3)::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  top: 0;
  border: 1.2rem solid #5fd992;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
  transition: border 0.2s;
}
.menu__item:nth-child(3):hover {
  background-color: #30ca70;
}
.menu__item:nth-child(3):hover::after {
  border: 1.2rem solid #30ca70;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
}
.menu__item:nth-child(4) {
  width: 7.199999999999999rem;
  background-color: #58c988;
}
.menu__item:nth-child(4)::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  top: 0;
  border: 1.2rem solid #58c988;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
  transition: border 0.2s;
}
.menu__item:nth-child(4):hover {
  background-color: #38af6b;
}
.menu__item:nth-child(4):hover::after {
  border: 1.2rem solid #38af6b;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
}
.menu__item:nth-child(5) {
  width: 4.8rem;
  background-color: #52ba7d;
}
.menu__item:nth-child(5)::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  top: 0;
  border: 1.2rem solid #52ba7d;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
  transition: border 0.2s;
}
.menu__item:nth-child(5):hover {
  background-color: #3d9963;
}
.menu__item:nth-child(5):hover::after {
  border: 1.2rem solid #3d9963;
  border-right: 1.2rem solid transparent;
  border-bottom: 1.2rem solid transparent;
}
/*------------------------------------*
  MENU CLOSE
\*------------------------------------*/
.menu__close {
  position: relative;
  font-family: FontAwesome;
  font-size: 1.2rem;
  color: #fff;
  width: 4.8rem;
  height: 4.8rem;
  cursor: pointer;
  transform: translateX(-100%);
}
.menu__close::before {
  position: absolute;
  content: "";
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
}
.menu__close::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 2.4rem solid #459c69;
  border-right: 2.4rem solid transparent;
  border-bottom: 2.4rem solid transparent;
  transition: border 0.2s;
}
.menu__close:hover::after {
  border: 2.4rem solid #377d54;
  border-right: 2.4rem solid transparent;
  border-bottom: 2.4rem solid transparent;
}
input[type=checkbox]:checked ~ .menu__item:nth-child(2) {
  transition: transform 0.2s 0.3s, background-color 0.2s;
  transform: translateX(calc(-100% -   2.4rem)) !important;
}
input[type=checkbox]:checked ~ .menu__item:nth-child(3) {
  transition: transform 0.2s 0.2s, background-color 0.2s;
  transform: translateX(calc(-100% -   2.4rem)) !important;
}
input[type=checkbox]:checked ~ .menu__item:nth-child(4) {
  transition: transform 0.2s 0.1s, background-color 0.2s;
  transform: translateX(calc(-100% -   2.4rem)) !important;
}
input[type=checkbox]:checked ~ .menu__item:nth-child(5) {
  transition: transform 0.2s 0s, background-color 0.2s;
  transform: translateX(calc(-100% -   2.4rem)) !important;
}
input[type=checkbox]:checked ~ .menu__close {
  transition: transform 0.2s 0.3s, background-color 0.2s;
  transform: translateY(-9.6rem) !important;
}
input[type=checkbox]:checked ~ .menu__close::before {
  content: "";
}
input[type=checkbox]:not(:checked) ~ .menu__item:nth-child(2) {
  transition: transform 0.2s 0.1s, background-color 0.2s;
  transform: translateX(0) !important;
}
input[type=checkbox]:not(:checked) ~ .menu__item:nth-child(3) {
  transition: transform 0.2s 0.2s, background-color 0.2s;
  transform: translateX(0) !important;
}
input[type=checkbox]:not(:checked) ~ .menu__item:nth-child(4) {
  transition: transform 0.2s 0.3s, background-color 0.2s;
  transform: translateX(0) !important;
}
input[type=checkbox]:not(:checked) ~ .menu__item:nth-child(5) {
  transition: transform 0.2s 0.4s, background-color 0.2s;
  transform: translateX(0) !important;
}
input[type=checkbox]:not(:checked) ~ .menu__close {
  transition: transform 0.2s 0.1s, background-color 0.2s;
  transform: translateY(0) !important;
}