.theme_bg1{
    background: #d4e3ff;
}
.theme_bg2{
    background: #6789c9;
}
.theme_color{
    color: #fb7c39;
}
.banner .animate_box{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 80%;
    
}
.animate_box .pen{
    position: absolute;
    top: .5rem;
    left: 8.5rem;
    width: 7%;
}
.animate_box .pen2{
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 7%;
}
.animate_box .burner{
    position: absolute;
    top: 0;
    right: 5rem;
    width: 8%;
}
.animate_box .draw{
    position: absolute;
    bottom: 0;
    right: 6rem;
    width: 8%;
}
.animate_box .draw2 {
    position: absolute;
    bottom: 5rem;
    right: 1rem;
    width: 8%;
}
.animate_box .bagua{
    position: absolute;
    bottom: 1rem;
    right: 3rem;
    width: 7%;
}
.animate_box .bagua2 {
    position: absolute;
    top: .5rem;
    right: 3rem;
    width: 7%;
}
.animate_box .pop1{
    transform: translate(335%,87%);
    -o-transform:translate(335%,87%); 
    -ms-transform:translate(335%,87%); 	
    -moz-transform:translate(335%,87%); 	
    -webkit-transform:translate(335%,87%);
    width: 19%;
}
.animate_box .bq1{
    transform: translate(1240%,5%);
    -o-transform: translate(1240%,5%);
    -ms-transform: translate(1240%,5%);
    -moz-transform: translate(1240%,5%);
    -webkit-transform: translate(1240%,5%);
    width: 6%;
}
.animate_box .pop2{
    transform: translate(403%,34%);
    -o-transform:translate(403%,34%); 
    -ms-transform:translate(403%,34%); 	
    -moz-transform:translate(403%,34%); 	
    -webkit-transform:translate(403%,34%);
    width: 17%;
}
.animate_box .bq2{
    transform: translate(1415%,-55%);
    -o-transform: translate(1415%,-55%);
    -ms-transform: translate(1415%,-55%);
    -moz-transform: translate(1415%,-55%);
    -webkit-transform: translate(1415%,-55%);
    width: 5%;
}
.input_bar{
    position: absolute;
    bottom: .5rem;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    -o-transform:translateX(-50%); 
    -ms-transform:translateX(-50%); 	
    -moz-transform:translateX(-50%); 	
    -webkit-transform:translateX(-50%);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc;
    height: 2rem;
}
.input_bar span{
    background: #5285e4;
    border-radius: 5px 0 0 5px;
}
.input_bar input{
    background: #fff;
    border-radius: 0 5px 5px 0;
    padding-left: .5rem;
    height: 2rem; 
}
.skip_btn{
    width: 6.5rem;
    padding: .4rem 0;
    background: #ff8747;
    border-radius: 5px;
    margin: 0 auto;
}
.starts{
    margin-top: 4rem;
}

/**
* 结果页
*/
.info_bar{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.info_bar .user_head{
    width: 2.3rem;
    height: 2.3rem;
    margin-bottom: .2rem;
    border-radius: 100%;
    border: 1px solid #fff;
}
.info_bar .gift{
    width: .7rem;
}
/* .info_bar .user_name, */
.info_bar .tel_bar{
    margin-bottom: .1rem;
    margin-top: 2rem;
}
.no_bind .gift,
.no_bind .bd_btn,
.no_bind .flow_tip{
    display: block;
}

.result_content{
    width: 95%;
    position: absolute;
    top: 7rem;
    left: 50%; 
    transform: translateX(-50%);
    -o-transform:translateX(-50%); 
    -ms-transform:translateX(-50%); 	
    -moz-transform:translateX(-50%); 	
    -webkit-transform:translateX(-50%);
    border-radius: 5px;
    /* padding-bottom: 5rem; */
}
.result_content .jx_icon{
    width: 22%;
    margin-right: 1rem;
    margin-left: .5rem;
}
.result_content .basic img{
    width: 1.1rem;
    margin-left: .1rem;
}
.result_content .tl_name{
    padding: 0 .5rem;
    background: #feac81;
    border-radius: 3px;
    margin-right: .5rem;
    line-height: 1rem;
}
.exp_list .list_item{
    border-top: 1px solid #e6e6e6;
}
.exp_list .list_item .list_tl{
    color: #2c5db7;
    font-weight: bold;
    font-size: 15px;
}
.share_btn{
    margin-top: 2rem;
}
.result_content .xiong{
    margin-bottom: 1.2rem;
} 
.result_content .xiong .ji_icon{
    display: none;
}
.result_content .xiong .xiong_icon,
.result_content .xiong .change_btn{
    display: block;
}
.result_content .change_btn{
    position: absolute;
    left: 50%;
    bottom: -1.3rem;
    transform: translateX(-50%);
    -o-transform:translateX(-50%); 
    -ms-transform:translateX(-50%); 	
    -moz-transform:translateX(-50%); 	
    -webkit-transform:translateX(-50%);
    width: 75%;
}
.exp-popu .modWin{
    width: 80%;
}

/**
* 海报页
*/
.poster_box{
    min-height: 100vh;
}
.poster_content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -o-transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%); 	
    -moz-transform:translate(-50%,-50%); 	
    -webkit-transform:translate(-50%,-50%);
    width: 100%;
    z-index: 100;
    overflow: hidden;
}
.poster_content img{
    border-radius: 5px;
}

/*动画*/
.pen.round{
    -webkit-animation: upDown 4s ease-in-out 2s infinite alternate;
    animation: upDown 4s ease-in-out 2s infinite alternate;
}
.pen2.round{
    -webkit-animation: upDown4 4s ease-in-out 2s infinite alternate;
    animation: upDown4 4s ease-in-out 2s infinite alternate;
}
.burner.round2{
    -webkit-animation: upDown2 3s ease-in-out -2s infinite alternate;
    animation: upDown2 3s ease-in-out -2s infinite alternate;
}
.draw.shake,
.draw2.shake{
    -webkit-animation: shake 3s linear  infinite alternate;
    animation: shake 3s linear  infinite alternate;
    transform-origin:50% 50%;
    -o-transform-origin:50% 50%; 
    -ms-transform-origin:50% 50%; 	
    -moz-transform-origin:50% 50%; 	
    -webkit-transform-origin:50% 50%;
}
.bagua.roate{
    -webkit-animation: upDown3 3s ease-in-out -2s infinite alternate,roate 3s linear 0s infinite alternate;
    animation: upDown3 3s ease-in-out -2s infinite alternate,roate 3s linear 0s infinite alternate;
}
.bagua2.roate{
    -webkit-animation: upDown5 3s ease-in-out -2s infinite alternate,roate 3s linear 0s infinite alternate;
    animation: upDown5 3s ease-in-out -2s infinite alternate,roate 3s linear 0s infinite alternate;
}
.bq1.moveIn{
    -webkit-animation: moveIn1 3s linear  infinite alternate;
    animation: moveIn1 3s linear  infinite alternate;
}
.bq2.moveIn{
    -webkit-animation: moveIn2 3s linear  infinite alternate;
    animation: moveIn2 3s linear  infinite alternate;
}
@keyframes upDown{
    form{
        top:0rem;
    }
    to{
        top:1rem;
    }
}
@keyframes left-right{
    form{
       left: 8rem;  
    }
    to{
       left:9rem; 
    }
}
@keyframes upDown2{
    form{
        top:.5rem;
    }
    to{
        top:.5rem;
    }
}
@keyframes left-right2{
    form{
       right: 4rem;  
    }
    to{
       right:6rem; 
    }
}
@keyframes shake{
    0% {
        transform:translate(0,0) rotateZ(0deg);
        -o-transform:translate(0,0) rotateZ(0deg); 
        -ms-transform:translate(0,0) rotateZ(0deg); 	
        -moz-transform:translate(0,0) rotateZ(0deg); 	
        -webkit-transform:translate(0,0) rotateZ(0deg); 
    }
    10% {
        transform:translate(10%,10%) rotateZ(20deg);
        -o-transform:translate(10%,10%) rotateZ(20deg); 
        -ms-transform:translate(10%,10%) rotateZ(20deg); 	
        -moz-transform:translate(10%,10%) rotateZ(20deg); 	
        -webkit-transform:translate(10%,10%) rotateZ(20deg); 
    }
    20% {
        transform:translate(10%,-10%) rotateZ(0deg);
        -o-transform:translate(10%,-10%) rotateZ(0deg); 
        -ms-transform:translate(10%,-10%) rotateZ(0deg); 	
        -moz-transform:translate(10%,-10%) rotateZ(0deg); 	
        -webkit-transform:translate(10%,-10%) rotateZ(0deg);  
    }
    30% {
        transform:translate(10%,10%) rotateZ(20deg);
        -o-transform:translate(10%,10%) rotateZ(20deg); 
        -ms-transform:translate(10%,10%) rotateZ(20deg); 	
        -moz-transform:translate(10%,10%) rotateZ(20deg); 	
        -webkit-transform:translate(10%,10%) rotateZ(20deg);   
    }
    50% {
        transform:translate(10%,10%) rotateZ(20deg);
        -o-transform:translate(10%,10%) rotateZ(20deg); 
        -ms-transform:translate(10%,10%) rotateZ(20deg); 	
        -moz-transform:translate(10%,10%) rotateZ(20deg); 	
        -webkit-transform:translate(10%,10%) rotateZ(20deg); 
    }
    60% {
        transform:translate(10%,-10%) rotateZ(0deg);
        -o-transform:translate(10%,-10%) rotateZ(0deg); 
        -ms-transform:translate(10%,-10%) rotateZ(0deg); 	
        -moz-transform:translate(10%,-10%) rotateZ(0deg); 	
        -webkit-transform:translate(10%,-10%) rotateZ(0deg);  
    }
    70% {
        transform:translate(10%,10%) rotateZ(20deg);
        -o-transform:translate(10%,10%) rotateZ(20deg); 
        -ms-transform:translate(10%,10%) rotateZ(20deg); 	
        -moz-transform:translate(10%,10%) rotateZ(20deg); 	
        -webkit-transform:translate(10%,10%) rotateZ(20deg);   
    }
    100% {
        transform:translate(0,0) rotateZ(0deg);
        -o-transform:translate(0,0) rotateZ(0deg); 
        -ms-transform:translate(0,0) rotateZ(0deg); 	
        -moz-transform:translate(0,0) rotateZ(0deg); 	
        -webkit-transform:translate(0,0) rotateZ(0deg); 
    }
}
@keyframes upDown3{
    form{
        bottom:1rem;
    }
    to{
        bottom:1.5rem;
    }
}
@keyframes roate{
    0%{
        transform:rotateZ(0deg);
        -o-transform:rotateZ(0deg); 
        -ms-transform:rotateZ(0deg); 	
        -moz-transform:rotateZ(0deg); 	
        -webkit-transform:rotateZ(0deg);
    }
    100%{
        transform:rotateZ(360deg);
        -o-transform:rotateZ(360deg); 
        -ms-transform:rotateZ(360deg); 	
        -moz-transform:rotateZ(360deg); 	
        -webkit-transform:rotateZ(360deg);
    }
}
@keyframes moveIn1{
    0%{
        opacity: 0;
        transform:rotateZ(360deg);
        -o-transform:rotateZ(360deg); 
        -ms-transform:rotateZ(360deg); 	
        -moz-transform:rotateZ(360deg); 	
        -webkit-transform:rotateZ(360deg);
    }
}
@keyframes upDown4{
    form{
        top:1rem;
    }
    to{
        top:2rem;
    }
}
@keyframes left-right3{
    form{
       left: 1rem;  
    }
    to{
       left:2rem; 
    }
}
@keyframes upDown5{
    form{
        top:0rem;
    }
    to{
        top:1rem;
    }
}