body{
    padding:0;
          background: #fff;

          
          background-size: cover;
          margin: 0 auto;
          height: 100%;
      }

#back {
    background-color: #008CBA; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.#back1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.shangyixiang {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.shangyixiang1 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.shangyixiang1:hover {
    background-color: #555555;
    color: white;
}

.chakan {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.chakan1 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.chakan1:hover {
    background-color: #008CBA;
    color: white;
}

#ad {
    margin: 0 auto;
    text-align: center;
  overflow: hidden;
}
      .title{
          margin: 0 auto;
          width: 80%;
      }

      .title h2{
        background: #90ab8b;
        color: #fff;
        padding: 10px 0;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-size: 24px;
        font-weight: normal;
          margin-bottom: 0;
      margin-top: 10px;
      }

      .title-sub{
          padding: 10px 20px;
          color: #000;
          text-align: center;
          /*border: 1px solid #b374b1;*/
          border-top: 0;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          margin: 0 auto;
          background: rgba(231, 231, 231, 0.2) none repeat scroll 0 0 !important;
          background: #e7e7e7;
          filter:Alpha(opacity=20);
		  font-size:24px;
		  
		  
      }
	 #pr{
	  align-items: stretch;
	  overflow:hidden;
	  display:flex;
	 }
    .aside{
      padding: 20px 0px;
	  float: left;
	  width: 50%;
	  flex:1;
	  background-color:skyblue;
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;	  
    }
    .right{
      padding: 15px 0px;
	  flex:1;
	  
	  text-align:center;	  
	  background-color:skyblue;
	  overflow:hidden;
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;	  
    }	
      .question{
          width: 80%;
          margin: 0 auto;
          margin-top: 20px;
          display: none;
      font-size:24px;
      }
    .box{
      width:80%;
      margin:20px auto;
      overflow:hidden;
      display: none;
    }
    .box ul{
          padding: 0;
      margin:20px auto 0;
      width: 138px;
      overflow:hidden;
      }
      .box li{
          padding: 5px 15px;
          list-style-type: none;
      }

      .box li div{
          padding-left: 20px;
          padding-right: 20px;
      font-size:24px;
      }
      .box li{
          border: 1px solid #8760a3;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;float: left;
          color: white;
          background:rgba(142, 99, 167, 0.6) none repeat scroll 0 0 !important;

          background:#8e63a7;
          filter:Alpha(opacity=60);
      }

      .box li{
          padding: 5px 0;
      }

      .box li.selected{
          background: #cf6271 !important;
      }
      .question-title{
          text-align: center;
          color: #000;
      }

      .question:first-child, .question.current,.box.current{
          display: block;
      }
      .result{
          display:none;
      }

      .options ul{
          padding: 0;
      }
      .options li{
          margin: 20px 0;
          padding: 5px 15px;
          list-style-type: none;
      }

      .options li div{
          padding-left: 20px;
      }
      .options.button li{
          border: 1px solid #8760a3;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          width: 100%;
          color: white;
          background:rgb(108 108 108 / 60%) none repeat scroll 0 0 !important;

          background:#8e63a7;
          filter:Alpha(opacity=60);
      }

      .options.button li{
          padding: 5px 0;
      }

      .options li.selected{
          background: #cf6271 !important;
      }
      .prev{
          margin-top: 0;
          font-weight: 300;
          font-size: 12px;
          float: right;
          padding-bottom: 20px;
      }
      .prev a:link{
          color: #000;
      font-size:20px;
      }

      .tools-button{
          padding: 10px 0;
          color: #fff;
          text-align: center;
          margin: 0 auto;
          width: 80%;
          background:rgba(159, 66, 61, 0.3) none repeat scroll 0 0;
          background: #9f423d;
          filter:Alpha(opacity=30);
      font-size:24px;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;

          margin-top: 30px;
          margin-bottom: 30px;

      }

      .share{
          background:rgba(49, 126, 172, 0.6) none repeat scroll 0 0;
          background: #317eac;
          filter:Alpha(opacity=60);
      }
            #tip {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
            }
     #tip img{width:100%;display: inline;}  
  #mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #333;
    -moz-opacity: 0.9;
    opacity: 0.9;
  }
	.game{
	display:inlineblock; 
	margin:5px 0px; 
	padding-left:20px;width:100%; 
	font-size:30px; 
	overflow:hidden; 
	border-bottom:1px solid #fff; 
	text-align:left;
	}

	#container_draw{
		min-width: 310px;
		max-width: 500px;
		height: 300px;
		margin: 0 auto;
	}