body{
  margin:0;
  background:#ccc;
  font-size:0;
}

.wrapper{
  background:white;
  width:1024px;
  margin:0 auto;
}

#iframe-head, #iframe-foot{
  border:none;
  margin: auto;
  display: block;
}

.top-wrapper{
  height:950px;
}

.container{
  width: 1024px;
  padding: 0;
  margin: 0 auto;
}

.choice h1{
  position: relative;
  padding: 5px;
  border-left: 10px solid #778899;
  font-size:40px;
  margin:10px 0 20px 20px;
  border-bottom: 5px solid #7ed1e;
}

.choice h1:before {
  position: absolute;
  left: -10px;
  bottom: 0;
  content: '';
  width: 10px;
  height: 50%;
  background-color: rgb(110,0,110);
}

.choice h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 90%;
  height: 0;
  border-bottom: 3px solid #778899;
}

.btn-top{
  padding:8px 15px;
  margin:0 0 10px 320px;
  background:darkgreen;
  color:white;
  display:inline-block;
  opacity:0.8;
  border-radius:4px;
}

.index{
  width:945px;
  height:760px;
  margin:0 40px;
  background:rgb(110,0,110);
  border-radius :8px;
}

.flex-box {
  padding:  10px;
  display: flex;
}

.menu-item-top {
  margin:10px 10px 0 10px;
  align-self: stretch;
}

.menu-item {
  margin:0px 10px 0 10px;
  align-self: stretch;
}

.menu-item-top p{
  font-size:23px;
  font-weight:bold;
  color:white;
  margin:0px 0 0 0;
}

.menu-item p{
  font-size:28px;
  font-weight:bold;
  color:white;
}

.line1{
  margin:30px 0 0 0;
}

.line2{
  margin:15px 0 0 0;
}

img {
  width:287px;
  border-radius:8px;
}

.btn:hover{
  opacity:1;
}

.bottom-wrapper{
  height;100px;
}

.btn-choice{
  display:flex;
}

.btn-back{
  padding:8px 15px;
  margin:5px 0 10px 240px;
  background:#000055;
  color:white;
  display:inline-block;
  opacity:0.8;
  border-radius:4px;
}

.btn-forward{
  padding:8px 15px;
  margin:5px 0 10px 50px;
  background:darkgreen;
  color:white;
  display:inline-block;
  opacity:0.8;
  border-radius:4px;
}


.btn-choice a{
  font-size:30px;
  color:white;
  text-decoration:none;
}