@charset "utf-8";

#faq{margin: 0 auto;}
#faq .title{text-align: center; margin: 100px auto;}
#faq .title>h3{font-size: 5rem; color: #333;}
#faq .title>h4{font-size: 2rem; font-weight: normal; color: #999; text-transform: uppercase;}

#faq>.display .list{margin: 0 auto;}
#faq>.display .list>ul{margin: 0 auto;}
#faq>.display .list>ul>li{ position: relative; display: block; transition: all .35s;}
#faq>.display .list>ul>li>a{display: block;}
#faq>.display .list>ul>li .tit{ position: relative;text-align: left; border-bottom: 1px solid #ddd;padding: 20px 0; font-size: 1.6rem; color: #333; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#faq>.display .list>ul>li .tit>span{display: inline-block;margin-right: 10px; background: #04b8ef; font-size: 1.4rem; color: #fff; width: 30px; height: 30px;line-height: 30px; border-radius: 100%; text-align: center;}
#faq>.display .list>ul>li .content{ display: none; border-top: 1px solid #eee;background: #fff; padding:30px;}
#faq>.display .list>ul>li .content>.txt{ position: relative; text-align: left;font-size: 1.6rem; color: #666;line-height: 2.8rem;}
#faq>.display .list>ul>li .content>.ti{ text-align: left;margin-bottom: 10px;}
#faq>.display .list>ul>li .content>.ti>span{display: inline-block;margin-right: 10px; background: #ccc; font-size: 1.4rem; color: #fff; width: 30px; height: 30px;line-height: 30px; border-radius: 100%; text-align: center;}
#faq>.display .list>ul>li.active .tit{color: #04b8ef;}

@media (max-width:1280px){


    #faq .title>h3{font-size: 3.6rem;}





}


@media (max-width:860px){


    #faq>.display .list>ul>li .tit{font-size: 1.4rem;}
    #faq>.display .list>ul>li .content{padding: 20px 10px;}
    #faq>.display .list>ul>li .content>.txt{font-size: 1.4rem; line-height: 2.4rem;}

}




@media (max-width:640px){

    #faq .title>h3{font-size: 2.8rem;}
    #faq .title>h4{font-size: 1.6rem;}

    #faq .title{margin: 30px auto;}



}