* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

a:focus,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    outline: 0
}

.navbar-brand {
    padding: 15px;
    font-size: 30px;
    line-height: 20px;
    display: inline-block
}

.topbar-bg {
    height: 100vh;
    background: url(../img/header.png) no-repeat;
    background-size: cover
}

.topbar.active {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #636363;
    z-index: 9999
}

#bs-navbar {
    position: fixed;
    left: 0;
    top: 50px;
    width: 100%;
    background: #636363
}

.navbar-toggle .icon-bar {
    background: #fff
}

.navbar-toggle img {
    width: 40%
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px
}

.navbar-brand img {
    width: 60%
}

.navbar-nav {
    color: #fff;
    margin: 0 -15px
}

.navbar-nav .navbar-login {
    padding: 15px 0
}

.navbar-nav li {
    border-bottom: 1px solid #515151
}

.navbar-nav li a {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.navbar-nav .navbar-login a:focus {
    background: linear-gradient(to right, #fade10, #f6a723, #f97e8f)
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    color: #fff;
    background-color: #636363
}

.btn-logging {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #fade10, #f6a723, #f97e8f);
    border: 0;
    outline: 0;
    text-shadow: 2px 2px 1px rgba(229, 116, 101, .55)
}

.btn-login {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #fade10, #f6a723, #f97e8f);
    border: 0;
    outline: 0;
    box-shadow: 6px 6px 20px rgba(59, 35, 182, .4);
    text-shadow: 2px 2px 1px rgba(229, 116, 101, .55)
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #fff;
    background: linear-gradient(to right, #fade10, #f6a723, #f97e8f);
    border: 0;
    outline: 0
}

.topbar-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 10px;
    width: 100%;
    height: calc(100vh - 50px)
}

.topar-content-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
}

.topbar-content-title {
    text-align: center;
    color: #fff
}

.topbar-content-title img {
    width: 60%
}

.topbar-content-title h3 {
    font-size: 34px;
    line-height: 2.5
}

.topbar-content-title p {
    margin-top: 60px;
    font-size: 14px;
    line-height: 1.5
}

.topbar-content-btn {}

.topbar-content-btn #free-btn {
    padding: 0;
    width: 50vw;
    height: 13vw;
    line-height: 13vw;
    font-size: 4.2vw
}

.topbar-content-btn #free-btn:focus,
.topbar-content-btn #free-btn:hover,
.topbar-content-btn #free-btn:active {
    background: linear-gradient(to right, #fade10, #f6a723, #f97e8f)
}

.topbar-content-pulldown {
    color: #fff;
    font-size: 16px
}

.topbar-content-pulldown p {
    color: rgba(255, 255, 255, .9)
}

.topbar-content-pulldown img {}

.powerful {}

.powerful-content {
    padding: 20px 15px
}

.powerful-content .powerful-title {
    margin: 20px 0;
    color: #666;
    text-align: center
}

.powerful-content .powerful-title h2 {
    font-size: 24px
}

.powerful-content .powerful-content-region .powerful-content-img {
    display: flex;
    align-items: center;
    padding: 15px 0
}

.powerful-content .powerful-content-region .powerful-content-img img {
    width: 100%
}

.powerful-content .powerful-content-region .powerful-content-img p {
    color: #666;
    font-size: 14px;
    text-align: center
}

.featurel {
    background: #404c73;
}

.featurel-content {
    padding: 20px 10px
}

.featurel-content .featurel-title {
    margin: 20px 0;
    color: #fff;
    text-align: center
}

.featurel-content .featurel-title h2 {
    font-size: 24px
}

.featurel-content .featurel-content-region .featurel-content-img {
    display: flex;
    align-items: center;
    padding: 15px 0
}

.featurel-content .featurel-content-region .featurel-content-img img {
    width: 100%
}

.featurel-content .featurel-content-region .featurel-content-img p {
    color: #fff;
    font-size: 15px;
    text-align: center
}

.case {
    background: #fbfbfc
}

.case-content {
    padding: 20px 20px 0
}

.case-content .case-title {
    margin: 20px 0;
    color: #666;
    text-align: center
}

.case-item {
    display: block;
    box-shadow: 0 2px 10px rgba(168, 168, 168, .31)
}

.case-content-bg {
    background: #fff;
    margin-bottom: 20px
}

.case-content-bg .case-img {
    position: relative
}

.case-content-bg .img-responsive {
    width: 100%;
    height: 221px!important
}

.case-content-bg .case-activity h4 {
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 20px
}

.case-flow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 20px;
    margin: auto;
    color: #aaa;
    font-size: 12px
}

.case-more {
    display: block;
    height: 40px;
    line-height: 40px;
    box-shadow: 0 2px 10px rgba(168, 168, 168, .31);
    background: #fff;
    color: #666
}

.case-login {
    margin: 10px 0
}

.case-login img {
    width: 70%
}

.case-login .btn-register {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #9deefd, #69cefe, #63a5ff);
    border: 0;
    outline: 0;
    box-shadow: 6px 6px 20px rgba(59, 35, 182, .1);
    padding: 15px 30px
}

.case-login .btn-register:focus {
    background: linear-gradient(to right, #9deefd, #69cefe, #63a5ff)
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background: #222;
    color: #666
}

.footer p {
    margin: 0;
    font-size: 12px
}

.ex_topbar .topbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    background: #636363
}

.ex_topbar .topbar .navbar-brand img {
    width: 53%
}

.ex_topbar .topbar .navbar-toggle .icon-bar {
    background: #fff
}

.dropdown {
    height: 40px;
    line-height: 40px
}

.dropdown .dropdown-menu {
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, .175);
    background: #f3f3f3;
    border: 0
}

.dropdown #dLabel,
.dropdown #drop1 {
    display: block
}

.dropdown .dLabel-menu.active {
    display: block
}

.dropdown .drop1-menu.active {
    display: block
}

.dropdown .dropdown-menu li:active {
    color: #fff;
    background: #684af3
}

.dropdown .dropdown-menu>li>a {
    line-height: 2
}

.ex_content .case-content-bg .case-activity h4 {
    height: 20px;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px
}

.case-activity .case-Info {
    padding-left: 15px;
    padding-bottom: 2px;
    color: #aaa;
    font-size: 12px
}

.text-blue {
    color: #5c75f7
}

.bg-blue {
    background-color: #5c75f7
}

.b-radius4 {
    border-radius: 2px
}

.main {
    width: 100%;
    font-size: 14px
}

.help-topbar {
    width: 100%;
    background-color: #26272e;
    text-align: center;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.help-topbar .logo {
    height: 22px
}

.help-topbar .back {
    position: absolute;
    left: 8px;
    top: 12px;
    width: 19px
}

.banner {
    width: 100%;
    height: 22vh;
    background: url(../img/help-banner.jpg) no-repeat;
    background-size: 100% 100%;
    font-size: 23px;
    text-align: center;
    line-height: 22vh;
    color: #fff;
    letter-spacing: 3px;
    font-weight: 200
}

.search {
    padding: 10px;
    position: relative
}

.search input {
    width: 100%;
    background-color: #f5f7fa;
    text-indent: 1em;
    height: 40px;
    border: 0
}

.search img {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px
}

.news-block {
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px
}

.news-block div {
    width: 49%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #e6e6e6;
    display: inline-block;
    margin-bottom: 5px
}

.news-block div.active {
    color: #fff;
    background-color: #5c75f7
}

.news-title-list {
    margin-top: 20px;
    padding: 0 10px
}

.news-title-list p {
    height: 53px;
    line-height: 53px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #e6e6e6
}

.btn-more {
    border: 1px solid #5c75f7;
    text-align: center;
    width: 175px;
    height: 40px;
    line-height: 40px;
    margin: 20px auto
}

.article {
    padding: 0 15px;
    margin-bottom: 20px
}

.article .title {
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5;
    margin: 15px 0
}

.article p {
    font-size: 15px;
    color: #666;
    line-height: 2;
    margin: 15px 0;
    text-align: justify;
    text-indent: 2em
}

.article img {
    width: 100%
}