html,body{
    height: 100%;
}

.main{
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.main > .banner{
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.main > .left-nav{
    float: left;
    position: relative;
    width: 200px;
    height: calc(100% - 300px);
    overflow: hidden;
}

.main > .left-nav > .qq_img_warpper{
    position: absolute;
    bottom: 20px;
    width: 150px;
    height: auto;
    margin-left: 25px;
    overflow: hidden;
}

.main > .left-nav > .qq_img_warpper > .img{
    width: 100%;
    height: auto;
}

.main > .left-nav > .qq_img_warpper > p{
    margin: 5px 0;
    font-size: 12px;
    line-height: 12px;
}

.main > .left-nav > .nav-main {
    position: absolute;
    top: 0;
    bottom: 20px;
    width: 200px;
    height: auto;
    overflow: hidden;
}

.main > .left-nav > .nav-main::after{
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    border: 1px solid #e9e8e8;
}

.main > .left-nav > .nav-main > .item{
    padding-bottom: 20px;
}

.main > .left-nav > .nav-main > .item:last-child{
    padding-bottom: 0;
}

.main > .left-nav > .nav-main > .item > .text{
    text-align: center;
    color: #6a6a6a;
    font-size: 18px;
    line-height: 20px;
    cursor: pointer;
}

.main > .left-nav > .nav-main > .item > .text:hover{
    color: #338de6;
}

.main > .content-warpper{
    width:  auto;
    height: calc(100% - 300px);
    margin-left: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.main > .content-warpper > .content{
    width: 600px;
    height: auto;
    padding: 0 100px;
    overflow: hidden;
}

.main > .content-warpper > .content > .q_a-warpper{
    width: auto;
    height: auto;
    overflow: hidden;
}

.main > .content-warpper > .content > .q_a-warpper > .q{
    position: relative;
    padding-left: 40px;
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 24px;
}

.main > .content-warpper > .content > .q_a-warpper > .q::before{
    content: "问:";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 15px;
    line-height: 24px;
    color: #338de6;
}

.main > .content-warpper > .content > .q_a-warpper > .a{
    position: relative;
    padding-left: 40px;
    padding-bottom: 40px;
    font-size: 15px;
    line-height: 24px;
    text-indent: 2rem;
    white-space: pre-line;
}

.main > .content-warpper > .content > .q_a-warpper > .a::before{
    content: "答:";
    position: absolute;
    left: -2rem;
    top: 0;
    font-size: 15px;
    line-height: 24px;
}

.main > .content-warpper > .content > .q_a-warpper > .a > .small{
    display: inline-block;
    margin-left: 2rem;
}

.main > .content-warpper > .content > .q_a-warpper > .a > .img{
    display: block;
    width: 100%;
    height: auto;
    margin: 10px auto 0;
}

.main > .content-warpper > .content > .q_a-warpper > .a > .img-small{
    display: block;
    width: 50%;
    height: auto;
    margin: 10px auto 0;
}

.main > .content-warpper > .content > .q_a-warpper > .a > .left{
    float: left;
    width: 45%;
    margin-right: 10%;
}

.main > .content-warpper > .content > .q_a-warpper > .a > .left:nth-of-type(2n){
    margin-right: 0;
}