@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

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

li {
  font-family: "微軟正黑體";
  list-style: none;
}

.main {
  margin: auto;
  font-family: "微軟正黑體";
  font-weight: bolder;
}

body {
  width: 100%;
  height: 100vh;
  background: url(../img/bgc.JPG) center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  overflow-x: hidden;
  z-index: -999;
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.main #james {
  display: none;
}

.main .menu_box {
  width: 290px;
  height: 100vh;
  padding-left: 10px;
  background: #716f6f28;
  position: relative;
  -webkit-box-shadow: 0px 2px 20px #fff;
          box-shadow: 0px 2px 20px #fff;
  -webkit-transform: translate(-100%);
          transform: translate(-100%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 999;
  top: 0;
}

.main .menu_box li {
  width: 150px;
  height: 50px;
  color: #fff;
  font-weight: bold;
  line-height: 2em;
  padding-left: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  font-size: 1.5em;
  cursor: pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.main .menu_box li:hover {
  background: #ed58587b;
  -webkit-box-shadow: 2px 5px 5px  #000000c2;
          box-shadow: 2px 5px 5px  #000000c2;
  -webkit-transform: translateX(5px);
          transform: translateX(5px);
  padding-left: 20px;
  width: 100%;
  border-radius: 5px;
}

.main .menu_box .pp {
  position: absolute;
  width: 66px;
  height: 66px;
  left: 78%;
  top: 0;
  cursor: pointer;
  -webkit-transform: translate(100%);
          transform: translate(100%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.main .menu_box .pp:after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/arrow.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0%;
  top: 5%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.main .menu_box .menu_list {
  width: 100%;
  height: 100%;
  margin: auto;
  padding-top: 66px;
}

.main #james:checked + .menu_box .menu_list .pp {
  -webkit-transform: translate(0%);
          transform: translate(0%);
  left: 78%;
}

.main #james:checked + .menu_box .menu_list .pp:after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.main #james:checked ~ .menu_box {
  -webkit-transform: translate(0%);
          transform: translate(0%);
}

.main #james:checked ~ .one {
  width: calc(100% - 300px);
  left: 300px;
}

.main #james:checked ~ .two {
  width: calc(100% - 300px);
  left: 300px;
}

.main #james:checked ~ .three {
  width: calc(100% - 300px);
  left: 300px;
}

.main .one {
  width: 100%;
  min-height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.333);
  padding-top: 66px;
  top: 0;
  left: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: none;
}

.main .one > ul {
  width: 100%;
  height: 100%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  padding: 5px;
}

.main .one li {
  max-width: 130px;
  min-width: 130px;
  width: calc(100% / 5);
  height: 180px;
  border-radius: 5px;
  margin: 8px 5px;
  display: block;
  background: #fff;
  pointer-events: auto;
  border: 2px solid #f34949;
  text-align: center;
  padding: 5px;
}

.main .one a {
  min-width: 100px;
  width: 100%;
  height: 80%;
  display: block;
  background: #a35cc9;
  text-align: center;
}

.main .one li:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.main .two {
  width: 100%;
  min-height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.333);
  padding-top: 66px;
  top: 0;
  left: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: none;
}

.main .two > ul {
  width: 100%;
  height: 100%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  padding: 5px;
}

.main .two li {
  max-width: 130px;
  min-width: 130px;
  width: calc(100% / 5);
  height: 180px;
  margin: 8px 5px;
  display: block;
  border-radius: 5px;
  background: #fff;
  pointer-events: auto;
  border: 2px solid #f34949;
  text-align: center;
  padding: 5px;
}

.main .two li:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.main .two a {
  min-width: 100px;
  width: 100%;
  height: 80%;
  display: block;
  background: #5c89c9;
  text-align: center;
}

.main .three {
  width: 100%;
  min-height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.333);
  -webkit-box-shadow: -5px 0px 15px rgba(251, 96, 96, 0.333);
          box-shadow: -5px 0px 15px rgba(251, 96, 96, 0.333);
  padding-top: 66px;
  top: 0;
  left: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: none;
}

.main .three > ul {
  width: 100%;
  height: 100%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  padding: 5px;
}

.main .three li {
  max-width: 130px;
  min-width: 130px;
  width: calc(100% / 5);
  height: 180px;
  margin: 8px 5px;
  display: block;
  border-radius: 5px;
  background: #fff;
  pointer-events: auto;
  border: 2px solid #f34949;
  text-align: center;
  padding: 5px;
}

.main .three li:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.main .three a {
  min-width: 100px;
  width: 100%;
  height: 80%;
  display: block;
  background: #c9a65c;
  text-align: center;
}

.main .three a .three_box1_img {
  width: 100%;
  height: 100%;
  background: url(../img/Tictac.png) center center no-repeat;
  background-size: cover;
}