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

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

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

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

.to-top{
  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-left: 905px;
  bottom: 20px;
  font-size: 40px;
  font-weight: bold;
  line-height:26px;
  text-align:center;
  padding:25px 10px 0 10px;
  color: #fff;
  background: #000;
  cursor: pointer;
  opacity:0.8;
  z-index:10;
}

.to-top:hover{
  opacity:0.5;
}

.top-p{
  font-size: 14px;
  font-weight: bold;
}

.top-wrapper{
  height:180px;
}

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

.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(0,210,0);
}

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

.choice p{
  font-size:28px;
  margin:10px 0 10px 70px;
}


.category-wrapper{
  height:170px;
}

.category{
  display:flex;
  margin:10px 0px 0 0px;
}

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

.block:hover{
  opacity:0.5;
}

.btn-1{
  background:rgb(1,23,177);
}

.btn-2{
  background:rgb(130,0,65);
}

.btn-3{
  background:rgb(0,128,128);
}

.btn-4{
  background:#444444;
}

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


.acordion-wrapper {
  height:2000px;
  padding-bottom: 10px;
  color: #5f5d60;
  z-index:5;
}

.acordion{
  float:left;
  margin-left:5px;
}

#effect-list {
  width: 860px;
  margin:0 80px;
  padding: 0;
  list-style: none;
  z-index:5;
}

#effect-list li:hover{
  opacity:0.9;
}

.effect-list-item {
  margin:0px;
  padding:2px 0 0 30px;
  border:2px solid midnightblue;
  position:relative;
  cursor:pointer;
  text-align: left;
  border-radius:4px;
}

.effect-list-item h3 {
  font-size: 25px;
  color:black;
}

.effect-list-item span {
  position:absolute;
  top:0;
  right:5px;
  color:#ccc;
  font-size:35px;
}

.answer {
  font-size: 35px;
  display: none;
  padding: 5px 20px;
  margin-bottom: 15px;
}

.answer p{
  font-size:25px;
  font-weight:bold;
  color:rgb(50,50,50);
  margin-bottom:15px;
}




.answer a{
  color:blue;
  text-decoration:none;
}

.answer a:hover{
  opacity:0.5;
}

.level{
  width:23px;
  display:inline-block;
  margin:0 0 0 25px;
}

.bottom-wrapper{
  height;200px;
  overflow:hidden;
}

.btn-choice{
  float:right;
  margin-right:20px;
}

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

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

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