.worksbox {
  width: 100%;
  position: relative;
}

.worksbox a {
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
  display: block;
}

.worksbox a:hover {
  border-radius: 10px;
  border: 1px solid #666;
  background-color: #fffeee;
  text-decoration: none;
}

.worksbox a span {
  display: none;
  text-align: center;
  font-size: 12px;
}

.worksbox a:hover span {
  color: yellow;
  display: block;
  background-color: black;
  width: 132px;
  position: absolute;
  top: 95px;
  left: 0px;
  line-height: 20px;
}

.worksbox a img {
  width: 90%;
}

.class_1 {
  display: none;
  position: fixed;
  text-align: center;
  font-size: larger;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: balck;
  z-index: 1001;
  opacity: 100%;
  filter: alpha(opacity=88);

}

.class_2 {
  display: none;
  position: fixed;
  text-align: center;
  top: 20%;
  left: 0%;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 10px solid white;
  background-color: white;
  z-index: 1002;
  opacity: 10%;
  overflow: auto;
}


/* 默认高度 */
#responsiveObj {
  height: 1200px;
}

/* 当屏幕宽度小于 768px 时 */
@media (max-width: 768px) {
  #responsiveObj {
    height: 100%;
  }
}

ul {
  /* 取消ul預設的內縮及樣式 */
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.drop-down-menu {
  border: #ccc 0px solid;
  display: inline-block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
}

ul.drop-down-menu li {
  position: relative;
  white-space: nowrap;
  border-right: #ccc 1px solid;
}

ul.drop-down-menu>li:last-child {
  border-right: none;
}

ul.drop-down-menu>li {
  float: left;
  /* 只有第一層是靠左對齊*/
}

ul.drop-down-menu a {
  background-color: #fff;
  color: #333;
  display: block;
  padding: 0 30px;
  text-decoration: none;
  line-height: 60px;

}

ul.drop-down-menu a:hover {
  /* 滑鼠滑入按鈕變色*/
  background-color: #38a7bb;
  color: #fff;
}

ul.drop-down-menu li:hover>a {
  /* 滑鼠移入次選單上層按鈕保持變色*/
  background-color: #38a7bb;
  color: #fff;
}

ul.drop-down-menu ul {
  border: #ccc 1px solid;
  position: absolute;
  z-index: 99;
  left: -1px;
  top: 100%;
  min-width: 180px;
}

ul.drop-down-menu ul li {
  border-bottom: #ccc 1px solid;
}

ul.drop-down-menu ul li:last-child {
  border-bottom: none;
}

ul.drop-down-menu ul ul {
  /*第三層以後的選單出現位置與第二層不同*/
  z-index: 999;
  top: 10px;
  left: 90%;
}

ul.drop-down-menu ul {
  /*隱藏次選單*/
  left: 99999px;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

ul.drop-down-menu li:hover>ul {
  /* 滑鼠滑入展開次選單*/
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  left: -1px;
  border-right: 5px;
}

ul.drop-down-menu li:hover>ul ul {
  /* 滑鼠滑入之後、次選單之後的選單依舊隱藏*/
  left: 99999px;
}

ul.drop-down-menu ul li:hover>ul {
  /* 第二層之後的選單展開位置*/
  left: 90%;
}