@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#faq{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding: 100px 0;}
#faq>.title{ position:relative; margin:0 auto; font-size: 4.5rem; color: #333; text-align:left;font-weight: 400;}


#faq>.container>.box{width: 70%; box-sizing: border-box;padding-right: 5%;}
#faq>.container>.box>.list>ul{margin: 0 auto;}
#faq>.container>.box>.list>ul>li{ position: relative; display: block; border-bottom: 1px solid #ddd;}
#faq>.container>.box>.list>ul>li>a{ position: relative; display: block; padding: 30px 0;}
#faq>.container>.box>.list>ul>li>a:after{position: absolute;z-index: 3; left: 0;bottom: -1px; width: 0;height: 1px; background: rgba(38,87,161,1); content: ''; transition: all .35s;}
#faq>.container>.box>.list>ul>li .tit{  position: relative; box-sizing: border-box; padding:0 30px; text-align: left; font-size: 1.8rem; color: #444; transition: all .35s;}
#faq>.container>.box>.list>ul>li .tit:after{position: absolute;z-index: 3;left: 0;top: 0; font-size: 1.8rem;font-weight: bold; color: #333; content: 'Q';}
#faq>.container>.box>.list>ul>li .txt{  position: relative; box-sizing: border-box; margin-top: 10px; padding-left: 30px; text-align: left; font-size: 1.4rem; line-height: 2.8rem; color: #999; transition: all .35s;}
#faq>.container>.box>.list>ul>li .txt:after{position: absolute;z-index: 3;left: 0;top: 0; font-size: 1.8rem;font-weight: bold; color: #333; content: 'A';}
#faq>.container>.box>.list>ul>li>a:hover .tit, #faq>.container>.box>.list>ul>li>a:hover .tit:after{color: rgba(38,87,161,1);}
#faq>.container>.box>.list>ul>li>a:hover:after{width: 100%;}
#faq>.container>.box>.page{text-align: left;}

#faq>.container>.search{ width: 30%; background: rgba(38,87,161,1) url("../img/faq_search_bg.jpg") no-repeat; background-position: right bottom; background-size: cover; box-sizing: border-box; padding: 60px;}
#faq>.container>.search .tit{font-size: 2.6rem;  color: #fff;}
#faq>.container>.search>.form{width: 100%;text-align: left;}
#faq>.container>.search>.form form{ display:block; padding: 10px 0;  box-sizing:border-box; width:100%;}
#faq>.container>.search>.form form input[type="text"]{outline: medium;height:50px;line-height:50px;width:100%;border: 0; border-bottom: 1px solid rgba(255,255,255,.3); font-size:1.6rem; background:none;color:rgba(255,255,255,1);box-sizing:border-box;overflow:hidden;}
#faq>.container>.search>.form form input::-webkit-input-placeholder{ color:rgba(255,255,255,.5); font-size: 1.4rem; }
#faq>.container>.search>.form form button{ display: inline-block; position: relative;width:200px;height:42px; line-height: 42px; padding-left: 30px; margin-top: 40px; font-size: 1.6rem; border-radius: 50px; border:none; opacity:1; background:#fff; color: rgba(38,87,161,1); cursor:pointer;box-sizing:border-box;overflow:hidden;}
#faq>.container>.search>.form form button:after{ position: absolute;z-index: 1; left: 45px;top: 0; width:50px;height: 100%; color: rgba(38,87,161,1); font-family: 'iconfont'; font-size: 1.6rem; content: '\e61e';}
#faq>.container>.search>.form form button:hover{background: rgba(146,191,46,1); background-image:-webkit-linear-gradient(top,rgba(183,240,60,1),rgba(146,191,46,1)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
#faq>.container>.search>.form form button:hover:after{color: #fff;}
#faq>.container>.search>.tel{text-align: left; padding-top: 20px;}
#faq>.container>.search>.tel .txt{font-size: 4rem; color: #fff;}


#faq>.view{margin: 0 auto;}
#faq>.view .title{  position: relative; box-sizing: border-box; padding:10px 40px; text-align: left; font-size: 2.4rem; font-weight: 600; color: rgba(38,87,161,1); border-bottom: 1px solid #ccc; transition: all .35s;}
#faq>.view .title:after{position: absolute;z-index: 3;left: 0;top: 12px;width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 1.8rem;font-weight: bold; color: #fff; content: 'Q'; background: rgba(38,87,161,1); }
#faq>.view .text{  position: relative; box-sizing: border-box; margin-top: 10px; padding-left: 40px; text-align: left; font-size: 1.4rem; line-height: 2.8rem; color: #666; transition: all .35s;}
#faq>.view .text:after{position: absolute;z-index: 3;left: 0;top: 0;width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 1.8rem;font-weight: bold; color: #fff; content: 'A'; background: rgba(168,168,168,1); }




@media only screen and (max-width: 1520px){

    #faq>.container>.search>.tel .txt{font-size: 3.6rem;}

}



@media only screen and (max-width: 1460px){

    #faq>.container>.search>.tel .txt{font-size: 3rem;}
    #faq>.container>.search>.form form button{width:160px;}
    #faq>.container>.search>.form form button:after{  left: 25px;}

}

@media only screen and (max-width: 1280px){

    #faq>.container>.search{padding: 40px;}

    #faq>.title{ font-size: 3.6rem;}
    #faq>.container>.search .tit{font-size: 2rem;}
    #faq>.container>.search>.tel .txt{font-size: 2.8rem;}



}

@media only screen and (max-width: 1080px){

    #faq>.container>.search{ float: none;width: 100%; margin-top: 20px;}
    #faq>.container>.search>.form{width: 60%; float: left;}
    #faq>.container>.search>.tel{width: 30%; float: right;}

    #faq>.container>.box{ float: none; width: 100%; padding-right:0;}



}

@media only screen and (max-width: 840px){
    #faq>.title{ font-size: 3.2rem;}
    #faq>.container>.search>.tel .txt{font-size: 2.4rem;}

}

@media only screen and (max-width: 780px){
    #faq>.title{ font-size: 3rem;}
    #faq>.container>.search>.tel .txt{font-size: 2.2rem;}

}

@media only screen and (max-width: 640px){

    #faq>.title{ font-size: 2.6rem;}
    #faq>.container>.search>.form{width: 100%; float: none;}
    #faq>.container>.search>.tel{width: 100%; float: none;}

    #faq>.container>.box>.page{text-align: center;}


}