/*style*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td{
    margin:0;
    padding:0
}
body{
    padding:0;
    margin:0;
    background: #FFF
}
*{
    font-family: tahoma,arial,\5b8b\4f53,sans-serif;
    font-size: 14px;
    color: rgb(75,75,75);
}
img{
    border:none
}
a{
    color: rgb(75,75,75)
}
a:hover,a:link{
    text-decoration: none;
}
ol,ul,li{
    list-style:none
}
.left{
    float: left
}
.right{
    float: right
}
.container{
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0;
}
.indent{
    text-indent: 28px;
}
.clear{
    clear: both;
}


/*header*/
header{
    padding: 0 15px;
    height: 44px;
    background-color: #FFF;
    border-bottom: 1px #EEE solid;
}
header span{
    background: url("../png/open.png");
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    display: block;
    margin: 10px 0;
}
header a{
    background: url("../png/top-logo.png");
    background-size: 110px 30px;
    background-repeat: no-repeat;
    display: block;
    height: 30px;
    width: 110px;
    margin: 7px auto;
}

/*footer*/
footer{
    background-color: #3e454c;
    padding: 15px;
}
footer .footer-logo{
    background-image: url("../png/logo-footer-small-gray.png");
    background-repeat: no-repeat;
    background-size: 138px 30px;
    height: 30px;
    width: 138px;
    margin: 10px auto;
}
footer .p1{
    font-size: 12px;
    line-height: 22px;
    color: #999;
}
footer .p2,footer a{
    color: #F1F1F1;
    font-size: 12px;
    line-height: 24px;
}
footer .p3{
    margin-left: 15%;
}


/*leftcontainer*/
.leftcontainer{
    position: fixed;
    background-color: #0e0e0f;
    top: 0;
    width: 65%;
    z-index: 1111;
    left: -65%;
    padding-top: 44px;
}
.leftcontainer-l{
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: forwards ;
    animation-fill-mode: forwards ;
    -webkit-animation-delay:.2s;  /**延迟动画**/
    animation-delay:.2s;
}
@-webkit-keyframes fadeIn {
    0% {
        left: -65%;
    }
    100% {
        left: 0;
    }
}
@keyframes fadeIn {
    0% {
        left: -65%;
    }
    100% {
        left: 0;
    }
}
.leftcontainer-r{
    -webkit-animation-name: fadeInr;
    animation-name: fadeInr;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: forwards ;
    animation-fill-mode: forwards ;
    -webkit-animation-delay:.2s;  /**延迟动画**/
    animation-delay:.2s;
    left: 0;
}
@-webkit-keyframes fadeInr {
    0% {
        left: 0;
    }
    100% {
        left: -65%;
    }
}
@keyframes fadeInr {
    0% {
        left: 0;
    }
    100% {
        left: -65%;
    }
}
.leftcontainer li{
    height: 50px;
    line-height: 50px;
    color: #F1F1F1;
    border-top: 1px #191A1B solid;
}
.leftcontainer li span{
    display: block;
    float: left;
    height: 50px;
    width: 3px;
}
 .leftcontainer li .active{
     background-color: #F6AE45;
 }
 .window{
     opacity: 0;
     background-color: #ccc;
     position: fixed;
     z-index: 1110;
     display: none;
     top: 0;
     left: 0;
 }
 .phoneimg{
     position: fixed;
     top: 30%;
     left: 0;
     width: 50px;
     height: 50px;
     opacity:.85;
     background-color:#000000;
     background-image: url("../png/qqphoneimg.png");
     background-size: 40px;
     background-repeat: no-repeat;
     background-position: 5px;
     z-index: 9998;
 }
 .phoneimg .phoneimg-info{
     width: 0;
     height: 50px;
     margin-left: 50px;
     background:rgba(0, 0, 0, 0.7) none repeat scroll 0 0 !important;
     background-size: 40px;
     padding-top: 5px;
     padding-left: 0;
 }
.phoneimg .phoneimg-info .p1{
    color: #FFF;
    font-size: 12px;
    padding-left: 10px;
    display: none;
}
.phoneimg .phoneimg-info .p2{
    color: #FFF;
    padding-left: 10px;
    display: none;
}