@charset "utf-8";
/* CSS Document */

#question{ margin:0 auto;padding:120px 0 60px 0;}
#question>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 30px;color: #333; text-align:center;font-weight: 600;}
#question>.title:after{position:absolute;z-index:3;left:50%;bottom:-10px; margin-left:-25px; width:50px;height:2px; background:#026ab5;content:'';}
#question>.container{width:86%; max-width:1300px;margin:0 auto;padding:40px 0;}
#question>.container .list, #question>.container .list>ul{margin:0 auto;padding:0;}
#question>.container .list>ul>li{ display:block; border-bottom:1px solid #ddd; transition:all .35s;}
#question>.container .list>ul>li>.akey{position:relative; cursor:pointer; color:#666; font-size:16px;}
#question>.container .list>ul>li>.akey>div{ position:relative; float:left; padding:20px; text-align:center; box-sizing:border-box;}
#question>.container .list>ul>li>.akey>div.tit{ width:80%;text-align:left;padding-left:60px; background-size:25px auto; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#question>.container .list>ul>li>.akey>div.tit:after{ position:absolute;z-index:12;left:15px;top:50%; margin-top:-13px; width:26px; height:26px; background:url('../img/icon_question.png') no-repeat; background-position:0 -26px; background-size:100% auto; content:''; transform:all .35s;}
#question>.container .list>ul>li>.akey>div.time{ width:20%; color:#ccc; text-align:right; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#question>.container .list>ul>li>.det{ position:relative; display:none; width:100%; box-sizing:border-box; padding: 0 60px;float:none; background:#fff;  margin:0 auto; text-align:left;}
#question>.container .list>ul>li>.det .con{ font-size:16px; color:#666; line-height:26px; padding:20px 0;}
#question>.container .list>ul>li>.det .detail{line-height: 1.7; font-size: 14px; padding-bottom: 35px;}
#question>.container .list>ul>li.A>.akey>div, #question>.container .list>ul>.akey:hover{ color:#fff; font-weight:bold; background-color:#026ab5;}


@media only screen and (max-width: 980px){
  #question>.container .list>ul>li>.akey>div.tit{ float:none; width:100%;padding-bottom:5px;}
  #question>.container .list>ul>li>.akey>div.tit:after{ margin-top:-3px;}
  #question>.container .list>ul>li>.akey>div.time{ float:none; width:100%;padding:0 0 20px 60px; font-size:14px; text-align: left;}
}
@media only screen and (max-width: 640px){
  #question{ padding:60px 0;}
  #question>.title{padding:10px 0; font-size:20px;}
  #question>.container .list>ul>li>.det{padding:0 20px;}
  #question>.container .list>ul>li>.det .con{ font-size:14px;line-height:24px;}
  #question>.container .list>ul>li>.det .btn{ text-align:center;}
  #question>.container .list>ul>li>.det .btn>a{display:block;}
  #question>.container .list>ul>li>.det .btn>.tip{ display:block; padding:6px 0;}
}