*{padding: 0;margin: 0;border: 0;}
html,body{font-family: 'Microsoft YaHei';}
.button-my{background: url("../images/01.png") no-repeat center center;width: 160px;height: 50px;display: block;line-height: 56px;text-align: center;color: #FFF;font-size: 18px;text-decoration: none;;z-index: 10;position: absolute;left: 50.5%;margin-left: -80px;bottom: 15px;background-size: 160px auto}
.button-my:hover,.button-my:visited,.button-my:focus{text-decoration: none;color: #FFF;}

.top{height: 500px;max-height: 500px;position: relative;overflow: hidden;}
.qf_all{text-align: left;width: 220px; padding-left: 30px;float: left;}
.qf_all p{ text-overflow:ellipsis;white-space: nowrap;overflow: hidden;}
.qf_all .time{color: #FFF;font-size: 20px;padding-top: 20px;margin-bottom: 0;}
.qf_all .where{font-size:48px;color: #FFF;border-bottom: 2px solid #FFF;min-width: 200px;margin: 0 auto 10px;max-width: 450px;padding: 0 20px;}
.qf_all .langular{font-size: 14px;color: #FFF;}
.icon-user{color: #3c0000;}
.avatar:hover{text-decoration: none;}
.btn-info{background: #3c0000;border-color: #3c0000;}
.btn-info:hover{background: #333;border-color: #333;}

.ani-start{background:url("../images/click.png") no-repeat center center;position: absolute;left: 50%;margin-left: -355px;width: 710px;height: 438px;display: none;opacity: 0.7;}
.deng{position: absolute;bottom: -0px;left: 52%;margin-left: -158px;}
.position1{position: absolute;left: 20%;bottom: 0px;}
.animete1{
    -webkit-animation: animete1 20s linear infinite normal;
    -o-animation: animete1 20s linear infinite normal;
    -moz-animation: animete1 20s linear infinite normal;
    -ms-animation: animete1 20s linear infinite normal;
    animation: animete1 20s linear infinite normal;width: 100px;}
.position2{position: absolute;left: 36%;top: 60%;width: 60px;}
.animete2{
    -webkit-animation: animete2 15s linear infinite normal;
    -o-animation: animete2 15s linear infinite normal;
    -moz-animation: animete2 15s linear infinite normal;
    -ms-animation: animete2 15s linear infinite normal;
    animation: animete2 15s linear infinite normal;}
.position3{position: absolute;right: 40%;top: 50%;width: 80px;}
.animete3{
    -webkit-animation: animete3 10s linear infinite normal;
    -o-animation: animete3 10s linear infinite normal;
    -moz-animation: animete3 10s linear infinite normal;
    -ms-animation: animete3 10s linear infinite normal;
    animation: animete3 10s linear infinite normal;}
.position4{position: absolute;right: 30%;top: 200px;width: 40px;}
.animete4{
    -webkit-animation: animete4 10s linear infinite normal;
    -o-animation: animete4 10s linear infinite normal;
    -moz-animation: animete4 10s linear infinite normal;
    -ms-animation: animete4 10s linear infinite normal;
    animation: animete4 10s linear infinite normal;}
.position5{position: absolute;right: 20%;top: 100px;width: 50px;}
.animete5{
-webkit-animation:animete5 15s linear infinite normal;
animation:animete5 15s linear infinite normal;}
.position6{position: absolute;right: 40%;top: 250px;width: 80px;}
.position7{position: absolute;left: 20%;bottom: 100px;width: 90px;}
.position8{position: absolute;right: 20%;top: 250px;width: 50px;}
.position9{position: absolute;left: 50%;top: 300px;width: 50px;}
.position10{position: absolute;left: 10%;bottom: 150px;width: 70px;}
.flame {
    display: none;
    position: absolute;
    bottom: 140px;
    left: 50.5%;
    margin-left: -7px;
    width: 14px;
    height: 70px;
    background-color: white;
    border-radius: 100% 100% 0 0;
    box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9,  10px -10px 30px #feec85,  -20px -20px 40px #ffae34,  20px -40px 50px #ec760c,  -20px -60px 60px #cd4606,  0 -80px 70px #973716,  10px -90px 80px #451b0e;
    animation: flame 3s infinite linear;
}

/*���²���*/
.container .artical{margin-top: 20px;}
.artical h2{text-align: center;color: #000;margin-bottom: 15px;}
.container .descript{letter-spacing: 1px;font-size: 14px;padding: 10px;text-indent: 32px;border: 1px solid #3c0000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;}
.all-info{text-align: center;margin: 10px 0;}
.all-info h3{color: #3c0000;margin-bottom: 0;}
.qf-share{width: 200px;margin: 0 auto;}
.qf-share span{float: left;font-weight: bold;padding: 5px 10px 0 0;}
em{font-style: normal;}
.actions{color: #808080;}
.author a{color:#3c0000;text-decoration: none;cursor:auto;}
.author span,.author em{color:#3c0000;}
.scale{
    -webkit-animation: scale 2s linear 1 alternate ;
    -o-animation: scale 2s linear  1 alternate ;
    animation: scale 2s linear 1 alternate;}
/*����*/
@keyframes flame {
    0% {
        height: 70px;
        transform: skewY(0deg);
        border-radius: 100% 100% 0 0;
    }

    25% {
        height: 60px;
        transform: skewY(40deg);
        border-radius: 10% 100% 0 0;
    }

    60% {
        height: 65px;
        transform: skewY(-20deg);
        border-radius: 90% 10% 0 0;
    }

    70% {
        height: 50px;
        transform: skewY(10deg);
        border-radius: 10% 100% 0 0;
    }

    100% {
        height: 70px;
        transform: skewY(0deg);
    }
}
@keyframes animete1 {
    0%{transform: translate(50px,-100px) scale(1)}
    50%{transform: translate(200px,-300px) scale(0.5)}
    100%{transform: translate(500px,-450px) scale(0)}
}
@-webkit-keyframes animete1 {
    0%{-webkit-transform: translate(50px,-100px) scale(1)}
    50%{-webkit-transform: translate(300px,-300px) scale(0.5)}
    100%{-webkit-transform: translate(500px,-450px) scale(0)}
}
@-o-keyframes animete1 {
    0%{-o-transform: translate(50px,-100px) scale(1)}
    50%{-o-transform: translate(200px,-300px) scale(0.5)}
    100%{-o-transform: translate(500px,-450px) scale(0)}
}
@-moz-keyframes animete1 {
    0%{-moz-transform: translate(50px,-100px) scale(1)}
    50%{-moz-transform: translate(200px,-300px) scale(0.5)}
    100%{-moz-transform: translate(500px,-450px) scale(0)}
}
@-ms-keyframes animete1 {
    0%{-ms-transform: translate(50px,-100px) scale(1)}
    50%{-ms-transform: translate(200px,-300px) scale(0.5)}
    100%{-ms-transform: translate(500px,-450px) scale(0)}
}
@keyframes animete2 {
    0%{transform: translate(50px,-50px) scale(1)}
    20%{transform: translate(30px,-100px) scale(0.8)}
    60%{transform: translate(-50px,-150px) scale(0.4)}
    100%{transform: translate(-100px,-200px) scale(0)}
}
@-webkit-keyframes animete2 {
    0%{-webkit-transform: translate(50px,-50px) scale(1)}
    20%{-webkit-transform: translate(30px,-100px) scale(0.8)}
    60%{-webkit-transform: translate(-50px,-150px) scale(0.4)}
    100%{-webkit-transform: translate(-100px,-200px) scale(0)}
}
@-o-keyframes animete2 {
    0%{-o-transform: translate(50px,-50px) scale(1)}
    20%{-o-transform: translate(30px,-100px) scale(0.8)}
    60%{-o-transform: translate(-50px,-150px) scale(0.4)}
    100%{-o-transform: translate(-100px,-200px) scale(0)}
}
@-moz-keyframes animete2 {
    0%{-moz-transform: translate(50px,-50px) scale(1)}
    20%{-moz-transform: translate(30px,-100px) scale(0.8)}
    60%{-moz-transform: translate(-50px,-150px) scale(0.4)}
    100%{-moz-transform: translate(-100px,-200px) scale(0)}
}
@-ms-keyframes animete2 {
    0%{-ms-transform: translate(50px,500px) scale(1)}
    20%{-ms-transform: translate(30px,-050px) scale(0.8)}
    60%{-ms-transform: translate(350px,1550px) scale(0.4)}
    100%{-ms-transform: translate(-500px,-200px) scale(0)}
}
@keyframes animete3 {
    0%{transform: translate(50px,-100px) scale(1)}
    50%{transform:translate(200px,-200px) scale(0.5);}
    100%{transform:translate(600px,-320px) scale(0);}
}

@-webkit-keyframes animete3 {
    0%{-webkit-transform: translate(50px,-100px) scale(1)}
    50%{-webkit-transform:translate(200px,-200px) scale(0.5);}
    100%{-webkit-transform:translate(600px,-320px) scale(0);}
    
}
@-o-keyframes animete3 {
    0%{-o-transform: translate(50px,-100px) scale(1)}
    50%{-o-transform:translate(200px,-200px) scale(0.5);}
    100%{-o-transform:translate(600px,-320px) scale(0);}
    
}
@-moz-keyframes animete3 {
    0%{-moz-transform: translate(50px,-100px) scale(1)}
    50%{-moz-transform:translate(200px,-200px) scale(0.5);}
    100%{-moz-transform:translate(600px,-320px) scale(0);}
    
}
@-ms-keyframes animete3 {
    0%{-ms-transform: translate(50px,-100px) scale(1)}
    50%{-moz-transform:translate(200px,-200px) scale(0.5);}
    100%{-moz-transform:translate(600px,-320px) scale(0);}
    
}
@keyframes animete4{
    0%{transform: scale(1)}
    50%{transform: scale(0.5)}
    100%{transform: scale(0)}
}
@-webkit-keyframes animete4 {
    0%{-webkit-transform: scale(1)}
    50%{-webkit-transform: scale(0.5)}
    100%{-webkit-transform: scale(0)}
}
@-ms-keyframes animete4 {
    0%{-ms-transform: scale(1)}
    50%{-ms-transform: scale(0.5)}
    100%{-ms-transform: scale(0)}
}
@-moz-keyframes animete4 {
    0%{-moz-transform: scale(1)}
    50%{-moz-transform: scale(0.5)}
    100%{-moz-transform: scale(0)}
}
@-o-keyframes animete4 {
    0%{-o-transform: scale(1)}
    50%{-o-transform: scale(0.5)}
    100%{-o-transform: scale(0)}
}
@keyframes animete5 {
    0%{transform: translate(100px) scale(1)}
    50%{transform: translate(200px) scale(0.5)}
    100%{transform: translate(300px) scale(0)}
}
@-webkit-keyframes animete5 {
    0%{-webkit-transform: translate(100px) scale(1)}
    50%{-webkit-transform: translate(200px) scale(0.5)}
    100%{-webkit-transform: translate(300px) scale(0)}
}
@-ms-keyframes animete5 {
    0%{-ms-transform: translate(100px) scale(1)}
    50%{-ms-transform: translate(200px) scale(0.5)}
    100%{-ms-transform: translate(300px) scale(0)}
}
@-o-keyframes animete5 {
     0%{-o-transform: translate(100px) scale(1)}
     50%{-o-transform: translate(200px) scale(0.5)}
     100%{-o-transform: translate(300px) scale(0)}
 }
@-moz-keyframes animete5 {
    0%{-moz-transform: translate(100px) scale(1)}
    50%{-moz-transform: translate(200px) scale(0.5)}
    100%{-moz-transform: translate(300px) scale(0)}
}
@keyframes scale {
    0%{transform: scale(1)}
    50%{transform: scale(3)}
    100%{transform: scale(1)}
}
@-webkit-keyframes scale {
    0%{-webkit-transform: scale(1)}
    50%{-webkit-transform: scale(3)}
    100%{-webkit-transform: scale(1)}
}
@-o-keyframes scale {
    0%{-o-transform: scale(1)}
    50%{-o-transform: scale(3)}
    100%{-o-transform: scale(1)}
}
@-ms-keyframes scale {
    0%{-ms-transform: scale(1)}
    50%{-ms-transform: scale(3)}
    100%{-ms-transform: scale(1)}
}
/*media*/
@media (min-width: 768px){
    .container{max-width: 95%;}
    .container{width: 1160px;}

}
@media (max-width: 768px) {
    .example{height: 150px;}
    .carousel-inner>.item>img{height: 150px;}
}