html,body{
    height: 100%;
    margin: 0;
    background: #ffcfe6;
}
footer {
    height:88px; /*設定footer本身高度*/
    margin-top: -88px; /*隨footer高度需做調整*/
  }
header{
    background: url(../images/game_bg.jpg) bottom no-repeat #ffffff;
    background-size: cover;
   padding-top:90px;
    text-align: center;
}
header .game_title{
    width: 800px;
    margin: 0 auto;
    margin-bottom:90px;
}
.content{
    min-height: 100%;
    }
.content> div{
    padding-bottom:88px;
}
article{
    display: block;
    width: 100%;
    background-color: #ffcfe6;
    margin-top: -10px;
    overflow: hidden;
}

    .step2,.step3,.step4,.step5,.step6,.step7,.step8,.step9,.result{
    transform: translate(-100%,-0%);
    position: absolute;
 }
.event_open{
    position: relative;
    animation-name:open;
    animation-duration:1s;
    animation-delay:0.3s;
    animation-fill-mode:forwards;
}
.event_open2{
    position: relative;
    animation-name:open2;
    animation-duration:1s;
    animation-delay:0.3s;
    animation-fill-mode:forwards;
}
 .event_hide{
     animation-name:hide;
     animation-duration:1s;
     animation-fill-mode:forwards;
     position: absolute;
 }
 
 /* 選單--------------------------------------------- */
 .step_tt{
    font-size: 26px;
    color: #3c3c3c;
    text-align: center;
    padding: 0 0  40px 0;
 }
 .framebox{
     display: flex;
     justify-content: center;
     width:900px;
     margin: 0 auto;
     flex-wrap:wrap;
     margin-bottom: 40px;
 }
 .radio-group{
     margin:0 15px;
 }
 .radio-input {
    visibility: hidden;
  }
.radio-label {
    display: block;
    cursor: pointer;
    position: relative;
    width: 280px;
    line-height: 40px;
    font-size: 24px;
    padding: 15px 0;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    background-color: #8d93d3;
    text-align: center;
    color: #ffffff;
    transition: all .3s;
  }
  .radio-label:hover,.act {
    background-color: #f555a3;
   }
   .act {
       color: #ffe8f1;
   }
  .radio-group .other{
    width:865px;
    line-height: 40px;
    font-size: 24px;
    padding: 15px 30px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    background-color: #8d93d3;
    color: #ffffff;
    border: none;
    margin: 15px 0;
    outline: none;
  }
  .radio-group .other::-webkit-input-placeholder { /* Edge */
    color:#CFD2F4;
  }
  
  .radio-group .other::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#CFD2F4;
  }
  
  .radio-group .other::placeholder {
    color:#CFD2F4;
  }
  .radio-label.two {
    line-height: 30px;
    padding: 5px 0;
  }
  .step3 .radio-label,  .step4 .radio-label,  .step5 .radio-label,.step8 .radio-label {
    width: 420px;
  }
  
   .btnnext{
    font-size: 24px;
    text-align: center;
    color: #f555a3;
    width: 350px;
    line-height: 40px;
    padding: 15px 0;
    border: solid 4px #f555a3;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: none;
    margin-top: 40px;
    cursor: pointer;
   }
   .btnnext:hover{
       background: #f555a3;
       color: #ffffff;
   }
   

   .numberbox {
       margin-bottom: 60px;
   }
   .numberbox ul{
       display: flex;
       justify-content: center;
       align-items: center;   
   }
   .numberbox ul li{
       display: block;
       width: 30px;
       height: 30px;
       background: #F79EC9;-webkit-border-radius: 15px;
       -moz-border-radius: 15px;
       border-radius: 15px;
       text-align: center;
       line-height: 30px;
       margin:0 3px;
       color: #FFCFE6;
   }
   .numberbox ul li.Q_act{
    background: #F555A3;
    color: #ffffff;
   }
/* 基本資料--------------------------------------------- */ 
.info{
    width:900px;
    margin: 0 auto;
}
.info h6{
    font-size: 32px;
    letter-spacing: 5px;
    text-align: center;
    color: #3c417e;
    border-bottom: 2px solid #3c417e;
    padding-bottom: 30px;
    font-weight: 500;
}
.info form {
    padding-top: 30px;
}
.info form > div{
    display: flex;
    margin: 20px 0;
    justify-items: center;
}
.info form >div h5{
    font-size: 20px;
    line-height: 50px;
    color: #3c3c3c;
    padding-right: 10px;
}
.info form >div input[type="text"]{
    border: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    outline: none;
    width: 40%;
    padding: 13px 25px;
    background: #ffffff;
    color: #3c3c3c;font-size: 20px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {  
    -webkit-text-fill-color: #3c3c3c;
    -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.info form >div input[type="radio"] {
    display:none;
}

.info form >div input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size: 20px;
    line-height:50px;
    color: #3c3c3c;
    padding: 0 5px;
}

.info form >div input[type="radio"] + label::before {
    display:inline-block;
    content: '';width: 22px;
    height: 22px;
    background-color: #fff;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    cursor:pointer;
    border: 3px solid #fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.info form >div input[type="radio"]:checked + label::before  {
    background-color: #f555a3;}
#twzipcode select{
    border: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    outline: none;
    padding: 13px 25px;
    background: #ffffff;
    color: #3c3c3c;font-size: 20px;
    margin-right: 10px;-webkit-appearance:none;
}
.info .wordbox p{
    font-size: 15px;
    line-height: 22px;
    color: #3c3c3c;
    margin: 20px 0;
    text-align: justify;
}
.info .wordbox p a{
    color: #3c417e;
}
.info button{
    display: block;
    width: 250px;
    height: 80px;
    margin:20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;    
    background-color: #f555a3;
    font-size: 30px;
    font-weight: 500;
    letter-spacing:5px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 60px;
    outline: none;
    border: none;
}
.info button:hover{
    background: #3c417e;
}
/* result-------------------------------------------- */

.result > div{
    width: 900px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    box-shadow: 0 4px 21px 0 #ffbadb;
    background-color: #fff;
    margin: 50px auto;
    padding: 30px 50px;
}
.result > div h5{
    font-size: 28px;
    font-weight: 500;
    color: #f555a3;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}
.result > div h5 span{
    font-size: 38px;
    display: block;
    width: 80px;
    height: 80px;
    background-color: #f555a3;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    color: #ffffff;
    line-height: 80px;
    text-align: center;
    margin: 20px 0; 
}
.result > div >p{
    font-size:20px;
    line-height:30px;
    color: #3c3c3c;
    margin: 5px 0 30px 0; 
}
.result > div .cht_three h6{
    height: 43px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #8d93d3;
}
.result > div .cht_three h6::before,.result > div .cht_three h6::after{
    display: block;
    content: '';
    width: 22px;
    height: 22px;
    background:url(../images/stat_icon.svg) no-repeat;
    background-size: 100% auto;
    margin:0 15px;
}
.result > div .cht_three{
    padding-top: 20px;
}
.result > div .cht_three ul{
    display: flex;
    align-items: center;
    justify-content:start;
    margin:30px 0;
}
.result > div .cht_three ul li{
    font-size: 20px;
    font-weight: 500;
    color: #3c3c3c;
    display: flex;
    align-items: center;
    padding-right:8px;
}
.result > div .cht_three ul li::before{
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background:url(../images/result_icon.svg) no-repeat;
    background-size: 100% auto;
    margin:0 2px 0 0;
}
.result > div .cht_three p{
    font-size: 20px;
    font-weight: 500;
    color: #3c3c3c;
    margin:50px 0;
}
.result > div .cht_three p a{
    text-decoration: none;
    background-color: #8d93d3;
    color: #ffffff;
    padding:10px 20px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    margin-left:5px;
}
.result > div .cht_three p a:hover{
    background: #f555a3;
}
/* 動畫--------------------------------------------- */
@keyframes open{
    from{
        transform: translate(100%,0%);
        
    }
    to{
        transform: translate(0%,0%);
}}

@keyframes hide{
    from{
        transform: translate(0%,0%);
    }
    to{
        transform: translate(-100%,-0%);
}}
@keyframes open2{
    from{
        transform: translate(0%,100%);
    }
    to{
        transform: translate(0%,0%);
}}
.step4{
    height: 570px;
}
.step4ani{    
   animation-name:s4a; 
   animation-duration:0.3;
   animation-delay:0;
   animation-iteration-count: 1; 
}
@keyframes s4a{
   from{
       height: 570px;
       transform: translate(100%,0%);
   }
   to{
       height:auto;transform: translate(0%,0%);
}}
.step6{
    height:570px;
}
.step6ani{
    
   animation-name:s6a; 
   animation-duration:0.3;
   animation-delay:0;
   animation-iteration-count: 1; 
}
@keyframes s6a{
   from{
       height: 570px;
       transform: translate(100%,0%);
   }
   to{
       height:auto;transform: translate(0%,0%);
}}


@media screen and (max-width: 1000px){
    header .game_title {
        width: 80%;
        margin-bottom:40px;
    }
    .step_tt {
        font-size:22px;
        line-height:30px;
        padding: 0 30px  40px 30px ;

    }
    .framebox {
        width: 100%;
        margin-bottom:7vw;
    }
    .radio-label {
        width:40vw;
        line-height:5vw;
        font-size:3vw;
    }
    .step3 .radio-label, .step4 .radio-label, .step5 .radio-label, .step8 .radio-label {
        width:80vw;
    }
    .radio-group .other {  width:80vw;line-height:5vw;
        font-size:3.5vw;
    } 
   .act {
       color: #ffe8f1;
   }
    .info {
        width: 94%;
    }.info form >div h5 {
        font-size:18px;
    }.info form >div input[type="radio"] + label {
        font-size: 18px;padding: 0;
    }.info .wordbox p {
        font-size: 14px;
        line-height: 22px;
    }.result > div {
        width: 94%;
        margin: 50px auto;
    }.result > div .cht_three ul li {
        font-size: 21px;
        padding-bottom: 15px;
    }.result > div .cht_three ul li::before {
        margin: 0 5px 0 0;flex: 0 0 24px;
    }
    .step3 .radio-label:hover,.step8 .radio-label:hover,.step5 .radio-label:hover{
        background-color: #8D93D3;
    }
    .step3 .radio-label.act,.step8 .radio-label.act,.step5 .radio-label.act{
        background-color: #F555A3;
    }
    .result > div .cht_three ul {
        margin:20px 0;
        flex-direction: column;
        align-items: start;
    }
    .step4{
        height:105vw;
    }
    .step4ani{
        
       animation-name:s4a; 
       animation-duration:0.3;
       animation-delay:0;
       animation-iteration-count: 1; 
    }
    @keyframes s4a{
       from{
        height:105vw;
           transform: translate(100%,0%);
       }
       to{
           height:auto;transform: translate(0%,0%);
    }}
    .step6{
        height:95vw;
    }
    .step6ani{
        
       animation-name:s6a; 
       animation-duration:0.3;
       animation-delay:0;
       animation-iteration-count: 1; 
    }
    @keyframes s6a{
       from{
        height:95vw;
           transform: translate(100%,0%);
       }
       to{
           height:auto;transform: translate(0%,0%);
    }}
}

@media screen and (max-width:700px){
    header {
        background-size:300%  auto;
    }
    header .game_title {
        width:92%;
        margin-bottom: 30px;
    }.step_tt {
        font-size: 4.5vw;
        line-height:7vw;
        padding: 0 30px;
    }.radio-label {
        width: 90vw;
        line-height:6vw;
        font-size:4vw;
    }.btnnext {
        font-size: 5vw;
        width: 80vw;
        line-height:6vw;
        padding: 10px 0;
        margin-top: 20px;border: solid 2px #f555a3;
    }.info h6 {
        font-size: 7vw;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 15px;

    }.info form {
        padding: 0px 20px;
    }
   .info form >div input[type="text"] {
    width:58vw;
    padding:8px 25px; font-size: 4vw;
}.info form >div h5 {
    font-size: 4vw;
    line-height: 8vw;
    color: #3c3c3c;
    padding-right: 0;
}.educate,.age,.address,.copyright,.gender{
    flex-direction: column;
}.info form >div input[type="radio"] + label {
    font-size: 4vw;
    line-height: 8vw;
    padding: 0 5px;
    width: 40vw;
    display: inline-block;
}.info form >div input[type="radio"] + label::before {
   width: 4vw;
    height:4vw;
    margin:-2px 5px 0 0;
}
#twzipcode select {
    padding: 10px 25px;
    font-size: 4vw;
}
.info form .address input[type="text"] {
    width: 80vw;
    margin-top: 15px;
}.info .wordbox p {
    font-size: 13px;
    line-height: 18px;
    padding: 0 20px;
    text-align: left;
}
.info button {
    width: 60%;
    height: auto;
    font-size: 7vw;
    line-height: 15vw;
}.result > div {
    margin: 30px auto;
    padding: 30px;
    padding-bottom: 10px;
}.result > div h5 {
    font-size: 6.5vw;
}.result > div h5 span {
    font-size: 8vw;
    width: 14vw;
    height: 14vw;
    line-height: 14vw;
    margin: 0;
}.result > div >p {
    font-size: 4.5vw;
    line-height: 7vw;
}.result > div .cht_three {
    padding-top: 0px;
}.result > div .cht_three h6 {
    height: auto;
    font-size: 5vw;
    line-height: 6.5vw;
    padding: 10px 0;text-align: center;
}.result > div .cht_three ul li {
    font-size: 5vw;
    line-height: 7vw;
    margin: 6px 0;
}.result > div .cht_three p {
    font-size: 5vw;
    font-weight: 500;
    color: #3c3c3c;
    margin:20px 0  50px 0;
}.result > div .cht_three p a {
    display: inline-block;
    margin-top: 15px;
}
.step4{
    height:165vw;
}
.step4ani{
    
   animation-name:s4a; 
   animation-duration:0.3;
   animation-delay:0;
   animation-iteration-count: 1; 
}
@keyframes s4a{
   from{
    height:165vw;
       transform: translate(100%,0%);
   }
   to{
       height:auto;transform: translate(0%,0%);
}}
.step6{
    height:165vw;
}
.step6ani{
    
   animation-name:s6a; 
   animation-duration:0.3;
   animation-delay:0;
   animation-iteration-count: 1; 
}
@keyframes s6a{
   from{
    height:165vw;
       transform: translate(100%,0%);
   }
   to{
       height:auto;transform: translate(0%,0%);
}}
footer {
    height:auto;
}
}