{literal}
<style>
    .checkQctiveLi{
        right: -12px;
        position: absolute;
        cursor: pointer;
        z-index: 6;
    }

    .kefuComStyle2,.kefuComStyle .kefuhoverstyle{
        opacity: 0.7;
    }
    .kefuComStyle:hover{
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
    .kefuComStyle2:hover,.kefuComStyle:hover .kefuhoverstyle{
        opacity: 1;
    }
    
.faqBoxCon {
  width: 52px;
  height: 52px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0px 3px 19px 0px rgba(0, 0, 0, 0.02), 0px 2px 9px 0px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  text-align: center;
  border-radius: 10px;
  position: relative;
  margin-bottom: 6px;
}

.faqBoxCon .FaqLayer {
  width: 475px;
  height: 517px;
  position: absolute;
  left: -480px;
  color: #333333;
  top: -300px;
  text-align: left;
  cursor: default;
  border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  display: none;
}
.faqBoxCon .FaqLayer .faqConHead {
width: 475px;
height: 73px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F3F8FF 31%, #FFFFFF 98%);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.faqConHead img {
	width:22px;
}
.faqConHead span {
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: normal;
    color: #1E2226;
    margin-left:12px;
}
.faqBoxCon .FaqLayer .faqConBox {
  border-radius: 12px;
  background: #fff;
  padding: 0px 12px 20px 22px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems {
  height: 420px;
  overflow-y: auto;
  padding-right: 10px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem {
  margin-bottom: 12px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion {
  color: #333333;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  line-height: 22px;
  top: 1px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion span.faqQuestionNum {
width: 24px;
height: 24px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
z-index: 0;
border-radius: 50px;
background: #F2F7FF;
box-sizing: border-box;
border: 2px solid rgba(0, 106, 255, 0.4);
color: #006AFF;
position: absolute;
left: 0;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion .faqQuestionTitle {
  width: 354px;
  margin-right: 4px;
  margin-left: 4px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 16px;
  font-weight: normal;
  color: #1E2226;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion span.getAnswer {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/images/ai2/rightwards.png") no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 7px;
  transition: background 0.3s;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqAnswer {
    display: none;
    overflow: hidden;
    margin-top: 8px;
    cursor: default;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 1px;
    font-size: 14px;
  color: #747779;
  border-radius: 6px;
  background: #F5F6F6;
  padding:10px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqAnswer.defaultShow {
  display: block;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem.activePr .faqQuestion span.faqQuestionTitle {
  white-space: pre-wrap;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem.activePr .faqQuestion span.getAnswer {
  background: url('/images/ai2/downward.png') no-repeat;
  background-size: contain;
  top: 6px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem.activePr .faqAnswer .redText {
  color: #d70000;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #A2A2A2;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.faqBoxCon .FaqLayer:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 16px;
  top: 0;
  right: -14px;
}
.faqBoxCon:hover .FaqLayer {
  display: block;
}
</style>
{/literal}
<div class="kefuComNew">
    <ul>
        {if $xcx_qrcode}
        <li class="kefuWxLi kefuComStyle mobile" style="margin-bottom: 20px;">
            <img class="kefuhoverstyle" src="{$smarty.const.CSS_URL}/images/ai2/mobile_logo.png" alt="">
            <p class="kefuWx">手机端</p>

            <div class="wxkefuImg">
                <img src="{$xcx_qrcode}" alt="" style="width:110px">
                <p>小程序二维码</p>
            </div>
        </li>
        {/if}
        
        {if $faqs}
        <div class="faqBox">
            <div class="faqBoxCon">
                <img src="{$smarty.const.CSS_URL}/images/ai2/question.png" alt="" style="width:22px;display: block;margin: 0px auto 2px;padding-top: 6px;">
                <span style="color: #8C919D;font-size: 12px;line-height: 12px;font-weight: normal;">常见问题</span>
                <div class="FaqLayer">
                    <div class="faqConHead"><img src="{$smarty.const.CSS_URL}/images/ai2/question.png" alt=""><span>常见问题</span></div>
                    <div class="faqConBox">
                        <div class="faqConItems">
                            {foreach from=$faqs key=key item=item}
                            <div class="faqConItem">
                                <p class="faqQuestion">
                                    <span class="faqQuestionNum">{$key+1}</span>
                                    <span class="faqQuestionTitle">{$item.q}</span>
                                    <span class="getAnswer"></span>
                                </p>
                                <p class="faqAnswer">{$item.a}</p>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        {if $qq_qrcode}
        <li class="kefuWxLi kefuComStyle">
            <img class="kefuhoverstyle" src="{$smarty.const.CSS_URL}/assets_v2/img/newai/qq.png" alt="">
            <p class="kefuWx">QQ咨询</p>

            <div class="wxkefuImg" {if $kefuqq}style="height:165px"{/if}>
                <img src="{$qq_qrcode}" alt="" style="width:110px">
                <p>QQ扫码，添加客服</p>
                {if $kefuqq}<p>QQ:{$kefuqq}</p>{/if}
            </div>
        </li>
        {elseif $kefuqq}
        <li class="kefuComStyle kefuComStyle2">
            <a target="blank" class="qq" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin={$kefuqq}&site={$sitename}&menu=yes">
            <img src="{$smarty.const.CSS_URL}/assets_v2/img/newai/qq.png" alt="">
            <p class="kefuQq">QQ咨询</p>
            </a>
        </li>
        {/if}

        {if $check_wxqrcode}
        <li class="kefuWxLi kefuComStyle">
            <img class="kefuhoverstyle" src="{$smarty.const.CSS_URL}/assets_v2/img/newai/wx.png" alt="">
            <p class="kefuWx">微信咨询</p>

            <div class="wxkefuImg">
                <img src="{$check_wxqrcode}" alt="" style="width:110px">
                <p>微信扫码，添加客服</p>
            </div>
        </li>
        {/if}
        <!-- <li class="activeIndex">
            <img src="{$smarty.const.CSS_URL}/images/ai/wx.png" alt="">
        </li> -->

        {if $show_active_nav}
        <li class="kefutoTop" style="overflow: hidden;">
            <img style="display: block;width:14px;" src="{$smarty.const.CSS_URL}/assets_v2/img/newai/top.png" alt="">
        </li>
        {/if}
    </ul>

    <!-- {if $show_active_nav}
    <img class="checkQctiveLi" src="{$smarty.const.CSS_URL}/images/ai/index/right_active.png" alt="">
    {/if} -->
</div>

{literal}
<script>
    $('.checkQctiveLi').click(function(){
        location.href="/modelessay";
    });

    $('.kefutoTop').click(function(){
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        //实现滚动效果
        var timeTop = setInterval(function(){
            document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
            if (top <= 0) {
            clearInterval(timeTop);
            }
        }, 10);
    });
    
    $(".faqConItem").on('click',function (){
        if($(this).hasClass('activePr')){
            $(".faqConItem").removeClass('activePr')
            $(".faqAnswer").stop(false,true).slideUp(100)
            return
        }
        $(".faqAnswer").stop(false,true).slideUp(100)
        $(".faqConItem").removeClass('activePr')
        $(this).addClass('activePr')
        $($(this).find('.faqAnswer')).stop(false,true).slideDown(100)
    })
    
    $(".mobile").hover(function(){
        $(".mobile > img").attr("src", "/images/ai2/mobile_logo_hover.png");
    },function(){
    	$(".mobile > img").attr("src", "/images/ai2/mobile_logo.png");
    });
    $(".faqBoxCon").hover(function(){
        $(".faqBoxCon > img").attr("src", "/images/ai2/question_hover.png");
    },function(){
    	$(".faqBoxCon > img").attr("src", "/images/ai2/question.png");
    });
</script>
{/literal}