.help_banner {
    height: 360px;
    background: url("img/help_banner.jpg") no-repeat center;
    padding-top: 80px;
}
.help_banner .help_main {
    width: 1200px;
    height: 100%;
    margin: auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.help_banner .help_main h3 {
    font-size: 36px;
    font-weight: 500;
    height: 110px;
    line-height: 110px;
}
.help_banner .help_main p {
    font-size: 16px;
    margin-top:-4px;
}
.help_banner .help_main .search_box {
    width: 600px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 0 0 15px;
    box-sizing: border-box;
    margin-top: 40px;
    border: 2px solid #fff;
}
.help_banner .help_main .search_box input {
    height: 100%;
    box-sizing: border-box;
    border: none;
    flex: 1;
    cursor: text;
    font-size: 18px;
    margin-left: 10px;
    caret-color: #000;
    background: none;
}
.help_banner .help_main .search_box button {
    width: 100px;
    height: 100%;
    background: #fff;
    font-size: 18px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    border: none;
    color: #FFf;
    cursor: pointer;
    color: #11C4FF;
}
.help_banner .help_main .search_box input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#fff;background:none; outline:none; border:0px;}
.help_banner .help_main .search_box input:-moz-placeholder, textarea:-moz-placeholder {color: #fff;}
.help_banner .help_main .search_box input::-moz-placeholder, textarea::-moz-placeholder {color: #fff;}
.help_banner .help_main .search_box input:disabled{background-color: inherit;}
.help_banner .help_main .search_box input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #fff;}


.helpSort{
    margin: 35px auto;
    text-align: center;
}
.helpSort a{
    height: 89px;
    line-height: 89px;
    width: 194px;
    margin-right: 80px;
    display: inline-block;
    box-shadow:0px 3px 14px 0px rgba(52,182,237,0.22);
    border-radius:6px;
    text-align: center;
    font-size: 18px;
}
.helpSort a:last-child{margin-right:0}
.helpSort a.active{
    background: url("img/card_on.png") top center;
    height: 99px;
    width: 194px;
    box-shadow: none;
    color: #fff;
}
.helpSort a .quesIcon{
     background: url("img/h_question.png") top center no-repeat;
     height: 66px;
     width: 48px;
     display: inline-block;
     vertical-align: top;
}
.helpSort a .courseIcon{
    background: url("img/h_course.png") top center no-repeat;
    height: 66px;
    width: 48px;
    display: inline-block;
    vertical-align: top;
}
.helpSort a .newsIcon{
    background: url("img/h_news.png") top center no-repeat;
    height: 66px;
    width: 48px;
    display: inline-block;
    vertical-align: top;
}
.helpSort a.active .quesIcon{
    background: url("img/h_question_on.png") top center no-repeat;
    height: 66px;
    width: 48px;
    display: inline-block;
    vertical-align: top;
}
.helpSort a.active .courseIcon{
    background: url("img/h_course_on.png") top center no-repeat;
    height: 66px;
    width: 48px;
    display: inline-block;
    vertical-align: top;
}
.helpSort a.active .newsIcon{
    background: url("img/h_news_on.png") top center no-repeat;
    height: 66px;
    width: 48px;
    display: inline-block;
    vertical-align: top;
}

.record {border-bottom:1px solid #eee;display:flex;padding:24px 12px;cursor:pointer;color:#999}
.record-title {font-size:18px;color:#000;font-weight: bold;}
.record-summary {font-size:14px;height:46px;overflow-y: hidden;margin:3px 0}
.record-footer{display:flex;align-items: center;}
.record-tags{display:flex}
.record-tags>div{margin:0 3px;padding:0px 6px;background-color: #12c5fe;color:white;font-size:14px;border-radius: 3px;}

.record img:hover{    transform: scale(1.3);    transition: all .3s ease;}

.record:last-child{border-bottom:0}
.record:hover{background-color:#f7f8f9}

#recommend{padding:0 12px}
#recommend>li {padding:12px;font-size:14px;border-radius: 4px;}
#recommend>li::before {content:' ';background: url(img/arrow.png) top center;height:13px;width:8px;display: inline-block;}
#recommend>li>a{margin-left:16px}
#recommend>li:hover{background-color:#f6f7fa}

#related{padding:0 12px}
#related>li {padding:12px;font-size:14px;border-radius: 4px;}
#related>li::before {content:' ';background: url(img/arrow.png) top center;height:13px;width:8px;display: inline-block;}
#related>li>a{margin-left:16px}
#related>li:hover{background-color:#f6f7fa}

#download{padding:0 12px}
#download>li {padding:12px;font-size:14px;border-radius: 4px;}
#download>li::before {content:' ';background: url(img/arrow.png) top center;height:13px;width:8px;display: inline-block;}
#download>li>a{margin-left:16px}
#download>li:hover{background-color:#f6f7fa}