body {
  font-family: '微軟正黑體';
  background: url(../images/index.jpg) center top #ffaa57 no-repeat;
  color: #FFF;
}
#wrap {
  width: 1200px;
  height: 2150px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.slogan {
  background: url(../images/slogan.png);
  width: 666px;
  height: 242px;
  position: absolute;
  top: 23px;
  margin-left: 6px;
  z-index: 50;
  /*漂浮*/
  -webkit-animation: float ease-in-out 1.5s infinite;
  animation: float ease-in-out 1.5s infinite;
  -moz-animation: float ease-in-out 1.5s infinite;
  -ms-animation: float ease-in-out 1.5s infinite;
}
.logo {
  position: absolute;
  background: url(../images/logo.png);
  width: 230px;
  height: 140px;
  display: block;
  top: 10px;
  left: 50%;
  margin-left: -115px;
  cursor: pointer;
  z-index: 99;
}
/*---------------------------
	內容 CONTENT
----------------------------*/
.content {
  position: relative;
  top: 740px;
  /* left: 160px; */
  width: 1000px;
  height: 700px;
  margin: 42px auto;
  text-align: center;
}
.content li {
  float: left;
  margin: 5px 9px;
}
.box {
  width: 120px;
  height: 165px;
  background: url(../images/box.png) no-repeat;
  position: relative;
  border: 2px dotted #ffffff;
}
.dialog {
  content: "";
  display: block;
  position: absolute;
  padding-top: 17px;
  padding-left: 9px;
  right: -24px;
  top: -15px;
  width: 58px;
  height: 49px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -1px;
  background: url(../images/dialog.png) no-repeat;
}
.collar {
  background: url(../images/done.png);
  width: 120px;
  height: 165px;
  top: 0px;
  position: absolute;
}
.date {
  width: 25px;
  height: 25px;
  font-size: 16px;
  text-align: center;
  border-radius: 20px;
  line-height: 23px;
  display: block;
  position: relative;
  top: 7px;
  left: 9px;
  z-index: 1;
}
.props {
  text-align: center;
  width: 120px;
  margin: 10px auto 0 auto;
  height: 77px;
  line-height: 20px;
  overflow: hidden;
  font-weight: bold;
  font-size: 13px;
  color: #000;
}
/*---------------------------
	按鈕 BTN
----------------------------*/
.btn01 a {
  background: url(../images/btn01.png);
  width: 120px;
  height: 30px;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 130px;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
}
.btn01 a:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
.btn01_b a {
  background: url(../images/btn01_b.png);
  width: 120px;
  height: 30px;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 130px;
}
.title {
  width: 20%;
  display: inline-block;
  background: rgb(189 0 0 / 95%);
  border: 0px solid #ffffff;
  /* padding: 1px 6px; */
  border-radius: 40px;
  margin: 1%;
  height: 33px;
  box-shadow: 0 0 7px 2px white;
  text-align: center;
  padding-top: 5px;
  font-size: 24px;
  font-weight: bold;
}
.content .box02 {
  position: absolute;
  margin-left: 22%;
}
/*-----------------籃球-----------------------*/
#game {
  display: block;
  height: 1000px;
  position: relative;
}
.machine {
  width: 1200px;
  height: 1000px;
  top: -18px;
  left: 35px;
  overflow: hidden;
  position: absolute;
}
#ball {
  position: absolute;
  width: 180px;
  margin-top: 824px;
  margin-left: 500px;
  animation: roll 30s infinite linear;
  -webkit-animation: roll 30s infinite linear;
  -moz-animation: roll 30s infinite linear;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
}
#ball.throw {
  margin-top: 65px;
  animation: throw 1.3s cubic-bezier(0.4, 0, 1, 1);
  -webkit-animation: throw 1.3s cubic-bezier(0.4, 0, 1, 1);
  -moz-animation: throw 1.3s cubic-bezier(0.4, 0, 1, 1);
}
.basket {
  position: absolute;
  z-index: 9;
  top: 185px;
  left: 508px;
}
.btn_play {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 40px;
  right: 20px;
}
.btn_play li {
  display: inline-block;
  cursor: pointer;
  margin: 0 10px;
}
.btn_play li a:hover {
  filter: brightness(1.1)drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
  -webkit-filter: brightness(1.1)drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
  -moz-filter: brightness(1.1)drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
}
/*----------------notice-----------------------*/
.notice {
  margin: 72% 12% 3% 12%;
  color: #392404;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 27px;
  text-align: justify;
  font-weight: bold;
}
.notice p {
  margin-left: 2%;
}
.notice h1 {
  font-size: 18px;
  font-weight: bold;
  color: #914b30;
  margin-top: 14px;
}
.notice ol {
  margin-top: 40px;
}
/* ===scroll=== */
/*::-webkit-scrollbar {
 width: 5px;
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
 background: rgba(0,0,0,0.0);
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 border-radius: 10px;
 -webkit-box-shadow: inset 1px 1px 6px 2px rgba(255,255,255,0.9);
}*/
/*---------------------------
	FOOTER
----------------------------*/
#footer {
  width: 100%;
  height: 75px;
  color: #fff;
  font-size: 12px;
  background: #c94610;
}
.copyright {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  top: 15px;
}
.copyright table {
  margin: 0 auto 0 auto
}
.copyright table td {
  padding-right: 8px
}
.copyright .about {
  line-height: 20px;
  color: #fff;
}
.copyright table span {
  color: #900;
}
.copyright table .t {
  font-size: 11px;
  line-height: 15px;
  color: #fff;
}
/*---------------------------
	IE提示
----------------------------*/
#alert-ie8 {
  background: rgba(0, 0, 0, 0.6);
  background: url(../images/bg.png)\0;
  clear: both;
  display: block;
  font-size: 15px;
  height: 20px;
  letter-spacing: 1px;
  padding: 5px;
  position: fixed;
  text-align: center;
  top: 0px;
  width: 100%;
  z-index: 1000;
  left: 50%;
  margin-left: -50%;
  color: #FFF;
}
#alert-ie8 a:link, #alert-ie8 a:visited {
  color: #FC3;
}
#alert-ie8 a:hover {
  color: #FF0;
}
#alert-ie8 strong {
  color: #F00;
}