body,
html {
    min-width: 1280px;
    overflow: auto;
}

body {
    font-size: 14px;
    color: #333;
    font-family: Microsoft Yahei, PingFang, Helvetica, Arial;
    background-color: #fff;
    font-weight: 400;
    line-height: 1.42857;
    overflow: hidden;
}

.clearfix {
    *zoom: 1;
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

*,
:after,
:before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

table {
    border-collapse: collapse;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: 700;
}

i,
s {
    font-style: normal;
    text-decoration: none;
}

dfn {
    font-style: italic;
}

ol,
ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

a {
    color: #333;
    /*display: block;*/
    background-color: transparent;
}

a,
a:active,
a:hover {
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
    outline: 0;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

input[type="radio"] {
    vertical-align: middle;
}

button,
input[type="button"],
input[type="submit"] {
    border: none;
}

input[readonly] {
    background: none;
    border: none;
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 761px;
}

.warp {
    max-width: 1100px;
    margin: 0 auto;
}
.warp-article {
    max-width: 1200px;
    margin: 0 auto;
}
.header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 3px #eee;
    transition: background 0.2s, box-shadow 0.2s;
}

.header__scroll {
    background: transparent;
    box-shadow: none;
}

.header__wrap {
    position: relative;
    max-width: 1100px;
    min-width: 1100px;
    height: 74px;
    margin: 0 auto;
}

.header__logo {
    display: inline-block;
    width: 124px;
    height: 74px;
    background: url("../images/logo1.png") no-repeat 0px center;
    float: left;
}

.header__scroll .header__logo {
    background: url("../images/logo2.png") no-repeat 50%;
    width: 124px;
}

.header__nav {
    position: absolute;
    left: 32%;
    width: 36%;
    min-width: 522px;
}

.header__nav li {
    float: left;
    color: #3da75e;
    text-align: center;
}

.header__nav li a {
    display: inline-block;
    height: 74px;
    line-height: 74px;
    font-size: 16px;
    padding: 0 20px;
}

/*.header__nav li a:hover {
    background-color: #d6dae5;
}*/

.header__newNav {
    width: auto;
    left: auto;
    right: 309px;
}

.header__newNav li a {
    color: #606c82;
    transition:all .2s;
}

.header__scroll .header__newNav li a {
    color: #fff;
}

.header__nav li a.header_active, .header__nav li a:hover {
    color: #21a8df;
}

.header__scroll .header__nav li a.header_active {
    color: #21a8df;
}
#chanpin_li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#chanpin_li img {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}
#v3_products_nav {
    background: #fff;
    display: flex;
    flex-direction: column; 
    text-align: center;
    color: #323232;
    box-shadow: 10px #a0a7bb;
    border-radius: 3px;
    /* padding: 5px 0; */
    /* display: none; */
}

#v3_products_nav li a{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    text-align: left;
    color: #606c82;
    height: 50px;
    line-height: 50px;
    padding: 10px;
    font-size: 14px;
}

.nav_active {
    /* background: #f0f3f6; */
    color: #21a8df;
}

#navBox {
    position: absolute;
    top: 60px;
    left: 40px;
}

#v3_products_nav img {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    padding-right: 5px;
}

#v3_products_nav li :hover{
    color: #21a8df;
    background: #f0f3f6;
    border-radius: 3px;
}

.header__login {
    float: right;
    color: #666;
}

.header__login_in a {
    display: inline-block;
    color: #666;
}
.header__login_out {
    padding-top: 16px;
}
.header__login_out a {
    display: inline-block;
    margin-left: 10px;
    color: #666;
}

.header__scroll .header__login_out a {
    color: #fff;
}

.header__login_out a.userCenter span {
    border-bottom: 1px solid #777;
}
.header__scroll .header__login_out a.userCenter span {
    border-bottom: 1px solid #fff;
}

.header__login_out a.userCenter span:hover {
    border-color: #21a8df;
    color: #21a8df;
}

.header__scroll .header__login_out a.userCenter span {
    color: #fff;
}
.header__login .userCenter{
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 24px;
    position: relative;
    top: 10px;
}
.header__login_out a.sso-logout span:hover {
    border-bottom: 1px solid #21a8df;
    color: #21a8df;
}


.header__newLogin_in {
    margin-top: 22px;
}

.header__newLogin_in a.regbtn {
    width: 80px;
	color: #fff;
    background: #21a8df;
    margin-left: 14px;
    transition: all .2s;
}

/* .header__newLogin_in a.regbtn:hover {
    color: #21a8df;
    border: 1px solid #21a8df;
    background: #fff;
} */

.header__newLogin_in a.loginbtn {
    width: 62px;
    color: black;
    background: #fff;
	border: 1px solid #ccc;
    transition: all .2s;
}
.header__scroll .header__newLogin_in a.regbtn {
	color: #fff;
    background: #21a8df;
}
/* .header__scroll .header__newLogin_in a.regbtn:hover {

} */
.header__scroll .header__newLogin_in a.loginbtn {
    color: black;
    background: #fff;
	border: 1px solid #ccc;
}
/* .header__scroll .header__newLogin_in a.loginbtn:hover{
    color: #fff;
    background: #21a8df;
    border: 1px solid #21a8df;
} */
.header__newLogin_in a {
    font-size: 14px;
    line-height: 26px;
    border-radius: 28px;
    color: transparent;
    text-align: center;
    vertical-align: middle;
}
.header__newLogin_in a.hrmbtn {
    width: 100px;
    color: #fff !important;
}

.header_active {
    color: #21a8df;
}

.footer {
    width: 100%;
    min-width: 1280px;
    border: 1px solid transparent;
    border-top: 1px solid #e8e8e8;
}

.footer__wrap {
    margin: 0 auto;
    max-width: 1100px;
    padding-top: 76px;
    padding-bottom: 40px;
}
.footer__wrap::after, .footer__left::after{
    clear: both;
    display: block;
    content: ''
}
.footer__left {
    float: left;
    margin-left: -22px;
}

.footer__left li {
    float: left;
    text-align: center;
    margin-right: 53px;
}

.footer__left li a {
    display: inline-block;
    width: 108px;
    height: 127px;
    text-align: center;
}
.footer__left li a p{
    color: #2e3748;
    margin-top: 16px;
}
.footer__left .footer_icon{
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
}


.footer__left li .footer_icon_1 {
    background-image: url("/v3/images/graybottom1.png");
}

.footer__left li .footer_icon_2 {
    background-image: url("/v3/images/graybottom2.png?v=1");
}

.footer__left li .footer_icon_3 {
    background-image: url("/v3/images/graybottom3.png");

}

.footer__newLeft li .footer_icon_4 {
    background-image: url("/v3/images/graybottom4.png");
}
.footer__left li:hover p {
    color: #21a8df;
}
.footer__left li:hover .footer_icon_1 {
    background-image: url("/v3/images/bluebottom1.png");
}

.footer__left li:hover .footer_icon_2 {
    background-image: url("/v3/images/bluebottom2.png?v=1");
}

.footer__left li:hover .footer_icon_3 {
    background-image: url("/v3/images/bluebottom3.png");

}

.footer__newLeft li:hover .footer_icon_4 {
    background-image: url("/v3/images/bluebottom4.png");
}

.footer__code {
    position: absolute;
    top: -168px;
    left: -44px;
    width: auto;
    transition: all .3s;
    /* overflow: hidden; */
    opacity: 0;
    -ms-transform: translate(0, 130px);
    -moz-transform: translate(0, 130px);
    -webkit-transform: translate(0, 130px);
    transform: translate(0, 130px);
}
.footer__code::after{
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    content: '';
    border-width: 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    transition: all .2s;
}
.footer__code p {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #2e3748;
    margin-top: 2px;
    margin-bottom: 14px;
    line-height: 14px;
    padding-top: 14px;
}
.footer__code .footer__code__body{
    height: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all .4s;
}
.footer__right {
    float: right;
    color: #7a86a0;
}

.footer__right ul {
    padding-left: 30px;
    float: left;
    width: 477px;
}

.footer__right ul li {
    line-height: 26px;
}

.footer__right_QR {
    float: left;
    display: inline-block;
    width: 121px;
    height: 121px;
    border-bottom: 1px solid #dfdfdf;
    background: url("/images/footer_icon-group.png") no-repeat 0 0;
}
.footer_wechat_code{
    display: block;
    width: 92px;
    height: 92px;
    background: url("/v3/images/hq-wechat.png") no-repeat 0 0;
    background-size: 92px;
    margin-left: 14px;
    margin-right: 14px;
}
.footer_app_code {
    display: block;
    width: 92px;
    height: 92px;
    background: url("/v3/images/hq-app.png") no-repeat 0 0;
    background-size: 92px;
    margin-left: 14px;
    margin-right: 14px;
}
 
.footer__right_phone {
    color: #484d59;
    font-size: 14px;
    font-weight: bold;
    float: left;
}
.footer__right_care{
    padding-top: 8px;
    padding-bottom: 10px;
}
.footer__right_care a {
    position: relative;
    color: #7a86a0;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 30px;
    vertical-align: -22%;
    background-repeat: no-repeat;
    background-size: 30px;
    transition: all .2s;
}
.footer__right_care .icon_weibo {
    background-image: url("/v3/images/graybottom5.png");
}
.footer__right_care .icon_wechat {
    background-image: url("/v3/images/graybottom6.png");
}
.footer__right_care .icon_app {
    background-image: url("/v3/images/graybottom7.png");
}
.footer__right_care .icon_weibo:hover {
    background-image: url("/v3/images/bluebottom5.png");
}
.footer__right_care .icon_wechat:hover {
    background-image: url("/v3/images/bluebottom6.png");
}
.footer__right_care .icon_app:hover {
    background-image: url("/v3/images/bluebottom7.png");
}
.footer__right_care .icon_wechat:hover #footer_wechat_code {
     opacity: 1;
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.footer__right_care .icon_app:hover #footer_app_code {
    height: 150px;
    opacity: 1;
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.footer__right_care a:hover .footer__code::after{
    border-width: 8px;
}
.footer__right_care a:hover .footer__code__body{
    height: 150px;
}
.footer__copyright{
    color: #464a4e;
}
.footer__copyright a:hover{
    text-decoration: underline;
}
.loginAlert_mask,
.buyEdition_mask {
    display: none;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.loginAlert_mask,
.noPermission_mask {
    display: none;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loginAlert {
    width: 350px;
    height: 300px;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -150px;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10000;
}

.loginAlert {
    width: 350px;
    height: 300px;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -150px;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10000;
}

.loginAlert iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.loginAlert span.loginAlert__close {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
    cursor: pointer;
}

.friendlink {
    width: 100%;
    padding: 20px 0;
    border-top: 1px solid #e8e8e8;
    line-height: 1.688;
}

.friendlink__listUl {
    padding: 5px 0;
    width: 1280px;
    margin: auto;
    overflow: hidden;
}

.friendlink__listUl li {
    float: left;
    margin-right: 12px;
}

.friendlink__listUl a,
.friendlink__listUl li {
    color: #82859f;
}

.friendlink__listUl a {
}

.friendlink__listUl a:hover {
    text-decoration: underline !important;
}

.sideBar {
    position: fixed;
    top: 36%;
    right: 30px;
    width: 91px;
    z-index: 999;
}

.sideBar li {
    position: relative;
    width: 91px;
    height: 90px;
    background: url("/images/sideBar.png") no-repeat left -122px;
}

.sideBar li:first-child {
    background-position: 0 0;
}

.sideBar li:first-child:hover {
    background-position: 100% 0;
}

.sideBar li:hover {
    background-position: right -122px;
}

.sideBar li a {
    display: inline-block;
    width: 91px;
    height: 91px;
}

.sideBar .sideBar__PhoneNo {
    display: none;
    position: absolute;
    right: 90px;
    top: 0;
    width: 228px;
    height: 91px;
    line-height: 91px;
    color: #4e4e4e;
    background-color: #fff;
    font-size: 24px;
    border: 1px solid #dfdfdf;
}

.sideBar .sideBar__PhoneNo i {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0 10px;
    vertical-align: middle;
    background: url("/images/sideBar.png") no-repeat 0 100%;
}

.sideBar .sideBar__PhoneNo:hover {
    background-position: right -255px;
}

.sideBar .sideBar__phone {
    background-position: left -255px;
    height: 91px;
}

.sideBar .sideBar__phone:hover {
    background-position: right -255px;
}

.sideBar .sideBar__QRCode {
    background: url("/images/sideBar.png") no-repeat left -478px;
}

.sideBar .sideBar__QRCode span {
    display: none;
    position: absolute;
    bottom: 0;
    left: -140px;
    width: 140px;
    height: 140px;
    background: url("/images/hq-QRcode.png") no-repeat 50%;
}

.sideBar .sideBar__QRCode:hover {
    background: url("/images/sideBar.png") no-repeat right -478px;
}

.sideBar .sideBar__goTop {
    cursor: pointer;
    height: 69px;
    background-position: left -389px;
}

.sideBar .sideBar__goTop:hover {
    background-position: right -389px;
}

.newSidebar {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 100;
}

.newSidebar__listUl {
    width: 62px;
    border-top: 1px solid #21a8df;
    float: right;
    background: #fff;
}

.newSidebar__listUl li {
    width: 62px;
    height: 62px;
    background: url("/images/side_bg.png") no-repeat;
    border: 1px solid #21a8df;
    border-top: none;
    cursor: pointer;
}

.newSidebar__listUl li a {
    width: 100%;
    height: 100%;
}

.newSidebar__listUl li.server {
    background-position: 3px 2px;
}

.newSidebar__listUl li.server:hover {
    background-color: #21a8df;
    background-position: -95px 2px;
}

.newSidebar__listUl li.sass {
    background-position: 1px -105px;
}

.newSidebar__listUl li.sass:hover {
    background-color: #21a8df;
    background-position: -99px -105px;
}

.newSidebar__listUl li.infor {
    background-position: 2px -207px;
    position: relative;
}

.newSidebar__listUl li.infor:hover {
    background-color: #21a8df;
    background-position: -97px -205px;
}

.newSidebar__listUl li.infor:hover .newSidebar__telphone {
    display: block;
}

.newSidebar__listUl li.app {
    background-position: -247px -105px;
}

.newSidebar__listUl li.app:hover {
    background-color: #21a8df;
    background-position: -355px -105px;
}

.newSidebar__tips {
    float: right;
    width: 21px;
    height: 130px;
    background: url("/images/side_bg.png") no-repeat;
    background-position: -577px -194px;
    margin-top: 59px;
}

.newSidebar__telphone {
    display: none;
    position: absolute;
    width: 178px;
    height: 62px;
    top: 0;
    left: -178px;
    border: 1px solid #21a8df;
    border-right: none;
    background-color: #fff;
}

.newSidebar__telphone span.icon {
    width: 40px;
    height: 40px;
    background: url("/images/side_bg.png") no-repeat 0 -305px;
    float: left;
    margin: 10px 0 0 10px;
}

.newSidebar__telphone p {
    line-height: 62px;
    font-weight: 700;
    font-size: 16px;
}

.backtop {
    width: 55px;
    height: 65px;
    background: url("/images/side_bg.png") no-repeat -257px 0;
    position: fixed;
    bottom: 50px;
    right: 0;
    cursor: pointer;
    display: none;
    z-index: 200;
    -webkit-transition: bottom 0.3s;
    transition: bottom 0.3s;
}

.backtop:hover {
    background: url(/v3/images/rokect.png) no-repeat center;
    background-position: 3px 5px;
    background-size: 35px 65px;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

input::-webkit-input-placeholder {
    color: #999;
}

input::-moz-placeholder {
    color: #999;
}

input:-ms-input-placeholder {
    color: #999;
}

input::placeholder {
    color: #999;
}

.reg-page {
    margin-top: 50px;
    width: 1200px;
    height: 427px;
}

.reg-page__banner {
    width: 850px;
    height: 100%;
    float: left;
}

.reg-page__bannerimg {
    width: 100%;
    height: 100%;
}

.reg-page__regbox {
    width: 348px;
    height: 100%;
    border: 1px solid #eee;
    border-left: none;
    padding: 10px 25px;
    float: right;
}

.reg-page__regtit {
    border-bottom: 1px solid #eee;
    margin-top: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.reg-page__reglogin {
    float: right;
    color: #21a8df;
}

.reg-page__username {
    border: 1px solid #eee;
    position: relative;
    width: 100%;
    height: 32px;
    margin-top: 20px;
}

.reg-page__username input {
    width: 80%;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    border: none;
}

.reg-page__getcode {
    position: absolute;
    top: 1px;
    right: 0;
    width: 80px;
}

.reg-page__agreement {
    display: inline;
    color: #21a8df;
}

.reg-page__account {
    top: 7px;
    right: 10px;
}

.reg-page__account a {
    color: #21a8df;
}

.reg-page__hide {
    display: none;
}

.reg-page__agreementp {
    margin-top: 10px;
}

.reg-page__checkboxdiv {
    position: relative;
    float: left;
    width: 12px;
    height: 12px;
    margin: 2px 3px 0 0;
    border: 1px solid #eee;
    cursor: pointer;
}

.reg-page__checkboxdiv input[type="checkbox"] {
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 1;
}

.reg-page__checkboxdiv input[type="checkbox"],
.reg-page__checkboxdiv ins {
    position: absolute;
    top: 0;
    left: 0;
}

.reg-page__checkboxdiv ins {
    background: url("/images/checked.png") no-repeat 50%;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    display: none;
}

.reg-page__active ins {
    display: block;
}

.reg-page__prompt {
    width: 100%;
    position: absolute;
}

.reg-page__promotbox {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 32px;
    display: none;
}

.reg-page__pwdfade {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 15px;
    cursor: pointer;
    color: #21a8df;
}

.login-page {
}

.login-page__forgetpwd {
    text-align: right;
}

.fogot-page {
    margin-top: 10px;
}

.fogot-page__guide {
    font-size: 14px;
}

.fogot-page__fogotpwd {
    color: #21a8df;
}

.fogot-page__progress {
    margin-top: 50px;
    width: 860px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.fogot-page__prolist {
    float: left;
}

.fogot-page__prolist em {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-style: normal;
    border-radius: 50%;
}

.fogot-page__prolist b,
.fogot-page__prolist em {
    float: left;
    background: #eee;
}

.fogot-page__prolist b {
    width: 250px;
    height: 5px;
    display: inline-block;
    margin-top: 10px;
}

.fogot-page__prolist p {
    margin-top: 30px;
}

.fogot-page__active em {
    color: #fff;
}

.fogot-page__active b,
.fogot-page__active em {
    background: #21a8df;
}

.fogot-page__active p {
    color: #21a8df;
}

.fogot-page__form {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

.fogot-page__verifibox {
    margin-bottom: 20px;
    position: relative;
}

.fogot-page__verifcode {
    width: 70px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 36px;
}

.fogot-page__refresh {
    position: absolute;
    top: 1px;
    right: 2px;
    display: block;
    width: 30px;
    height: 30px;
    background: url("/images/sprite.png") no-repeat -215px -96px;
    cursor: pointer;
}

.fogot-page__nextbtn {
    width: 100%;
}

.fogot-page__verifilist {
    display: none;
}

.fogot-page__pwdtips {
    font-size: 13px;
    color: #333;
}

.fogot-page__pwdtips b {
    color: #555;
}

.fogot-page__getcode {
    position: absolute;
    top: 0;
    right: 0;
    height: 33px;
}

.fogot-page__verifiblock {
    display: block;
}

.fogot-page__promoptbox {
    margin-bottom: 10px;
}

.hq-input {
    display: block;
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #21a8df;
    border-radius: 0;
    -webkit-transition: border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-radius: 2px;
}

.hq-input:focus {
    border: 1px solid #21a8df;
}

.hq-input-inline {
    display: inline-block;
}

input,
textarea:focus {
    outline: none;
}

fieldset[disabled],
input[disabled],
input[readonly],
select[disabled] {
    background-color: #eee;
    opacity: 1;
    color: #333;
    border: 1px solid #ccc;
}

fieldset[disabled]:active,
fieldset[disabled]:focus,
fieldset[disabled]:hover,
input[disabled]:active,
input[disabled]:focus,
input[disabled]:hover,
input[readonly]:active,
input[readonly]:focus,
input[readonly]:hover,
select[disabled]:active,
select[disabled]:focus,
select[disabled]:hover {
    box-shadow: none;
}

.hq-input-group {
    display: inline-table;
    position: relative;
}

.hq-input-group,
.hq-input-group .hq-input {
    vertical-align: middle;
}

.hq-input-group .hq-input[readonly] {
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #ccc;
}

.hq-input-group .input-group-addon {
    font-size: 14px;
    font-weight: 400;
    color: #555;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    padding: 2px 5px;
    border-left: 0;
}

.hq-input-group .input-group-addon i {
    font-size: 12px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.15s;
    transition: -webkit-transform 0.15s;
    transition: transform 0.15s;
    transition: transform 0.15s, -webkit-transform 0.15s;
}

.hq-input-group .pullli {
    position: absolute;
    top: 33px;
    left: 0;
    display: none;
    border: 1px solid #21a8df;
    background: #fff;
    width: 100%;
    border-top: none;
}

.hq-input-group .pullli > li {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    cursor: pointer;
}

.hq-input-group .pullli > li:hover {
    background: #ebf8ef;
}

.hq-input-active .pullli {
    display: block;
}

.hq-input-active .hq-input[readonly],
.hq-input-active .input-group-addon {
    border: 1px solid #21a8df;
}

.hq-input-active .input-group-addon {
    border-left: none;
}

.hq-input-active .input-group-addon i {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    color: #21a8df;
}

.hq-btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-transition: background-color 0.1s;
    transition: background-color 0.1s;
    padding: 6px 20px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    color: #fff;
    background-color: #cbcbcb;
    border-color: #cbcbcb;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hq-btn:focus {
    color: #fff;
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.hq-btn:hover {
    color: #fff;
    background-color: #dfdfdf;
    border-color: #dfdfdf;
}

.hq-btn:active,
.hq-btn:active:focus,
.hq-btn:active:hover {
    color: #fff;
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.hq-btn:active {
    background-image: none;
}

.hq-btn fieldset[disabled]:focus,
.hq-btn fieldset[disabled]:hover,
.hq-btn.disabled:focus,
.hq-btn.disabled:hover,
.hq-btn[disabled]:focus,
.hq-btn[disabled]:hover {
    background-color: #cbcbcb;
    border-color: #cbcbcb;
}

.hq-btn:active:focus,
.hq-btn:focus {
    outline: none;
}

.hq-btn:focus,
.hq-btn:hover {
    color: #fff;
    text-decoration: none;
}

.hq-btn.disabled,
.hq-btn[disabled],
fieldset[disabled] .hq-btn {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
}

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}

.hq-btn-default {
    color: #fff;
    background-color: #cbcbcb;
    border-color: #cbcbcb;
}

.hq-btn-default:focus {
    color: #fff;
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.hq-btn-default:hover {
    color: #fff;
    background-color: #dfdfdf;
    border-color: #dfdfdf;
}

.hq-btn-default:active,
.hq-btn-default:active:focus,
.hq-btn-default:active:hover {
    color: #fff;
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.hq-btn-default:active {
    background-image: none;
}

.hq-btn-default fieldset[disabled]:focus,
.hq-btn-default fieldset[disabled]:hover,
.hq-btn-default.disabled:focus,
.hq-btn-default.disabled:hover,
.hq-btn-default[disabled]:focus,
.hq-btn-default[disabled]:hover {
    background-color: #cbcbcb;
    border-color: #cbcbcb;
}

.hq-btn-warning {
    color: #fff;
    background-color: #ff9600;
    border-color: #ff9600;
}

.hq-btn-warning:focus {
    color: #fff;
    background-color: #fa9300;
    border-color: #fa9300;
}

.hq-btn-warning:hover {
    color: #fff;
    background-color: #ffa729;
    border-color: #ffa729;
}

.hq-btn-warning:active,
.hq-btn-warning:active:focus,
.hq-btn-warning:active:hover {
    color: #fff;
    background-color: #fa9300;
    border-color: #fa9300;
}

.hq-btn-warning:active {
    background-image: none;
}

.hq-btn-warning fieldset[disabled]:focus,
.hq-btn-warning fieldset[disabled]:hover,
.hq-btn-warning.disabled:focus,
.hq-btn-warning.disabled:hover,
.hq-btn-warning[disabled]:focus,
.hq-btn-warning[disabled]:hover {
    background-color: #ff9600;
    border-color: #ff9600;
}

.hq-btn-primary {
    color: #fff !important;
    background-color: #21a8df;
    border-color: #21a8df;
}

.hq-btn-primary:focus {
    color: #fff;
    background-color: #1186b7;
    border-color: #1186b7;
}

.hq-btn-primary:hover {
    color: #fff;
    background-color: #21a8df;
    border-color: #21a8df;
}

.hq-btn-primary:active,
.hq-btn-primary:active:focus,
.hq-btn-primary:active:hover {
    color: #fff;
    background-color: #1186b7;
    border-color: #1186b7;
}

.hq-btn-primary:active {
    background-image: none;
}

.hq-btn-primary fieldset[disabled]:focus,
.hq-btn-primary fieldset[disabled]:hover,
.hq-btn-primary.disabled:focus,
.hq-btn-primary.disabled:hover,
.hq-btn-primary[disabled]:focus,
.hq-btn-primary[disabled]:hover {
    background-color: #21a8df;
    border-color: #21a8df;
}

.hq-btn-lg {
    padding: 10px 80px;
    font-size: 16px;
    line-height: 1.33333;
    border-radius: 6px;
}

.hq-btn-sm {
    padding: 5px 10px;
}

.hq-btn-sm,
.hq-btn-xs {
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.hq-btn-xs {
    padding: 1px 5px;
}

.hq-btn-border-radius-default {
    border-radius: 4px;
}

.hq-btn-border-radius-none {
    border-radius: 0;
}

.hq-btn-search {
    vertical-align: top;
    margin-left: -5px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-block + .btn-block {
    margin-top: 5px;
}

input[type="button"].btn-block,
input[type="reset"].btn-block,
input[type="submit"].btn-block {
    width: 100%;
}

.hq-btn[disabled],
button[disabled] {
    background-color: #ccc;
    opacity: 1;
    color: #fff;
    cursor: not-allowed;
    border: 1px solid #cbcbcb;
}

.hq-btn[disabled]:hover,
button[disabled]:hover {
    background-color: #ccc;
    border: 1px solid #ccc;
    cursor: not-allowed;
    color: #fff;
}

@font-face {
    font-family: hqfont;
    src: url("../fonts/iconfont.eot");
    src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/iconfont.woff2") format("woff2"),
        url("../fonts/iconfont.woff") format("woff"),
        url("../fonts/iconfont.ttf") format("truetype"),
        url("../fonts/iconfont.svg#iconfont") format("svg");
}

.hqfont {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: hqfont !important;
    font-size: 11px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hq-icon-iconfontcha:before {
    content: "\e652";
}

.hq-icon-87:before {
    content: "\e677";
}

.hq-icon-jiantou:before {
    content: "\e618";
}

.hq-icon-diannao:before {
    content: "\e60d";
}

.hq-icon-weixin:before {
    content: "\e675";
}

.hq-icon-wancheng:before {
    content: "\e778";
}

.hq-icon-app:before {
    content: "\e608";
}

.hq-icon-wancheng1:before {
    content: "\e619";
}

.hq-icon-next-s:before {
    content: "\e626";
}

.hq-icon-zaixiankefu:before {
    content: "\e672";
}

.hq-icon-a572:before {
    content: "\e673";
}

.hq-icon-fahuo:before {
    content: "\e638";
}

.hq-icon-fukuan:before {
    content: "\e765";
}

.hq-icon-1:before {
    content: "\e607";
}

.hq-icon-lijizixun:before {
    content: "\e613";
}

.hq-icon-icons64x6453:before {
    content: "\e674";
}

.hq-icon-yanjing:before {
    content: "\e6bc";
}

.hq-icon-querenshouhuoxianxing:before {
    content: "\e80d";
}

.hq-icon-tubiao1yinliang:before {
    content: "\e776";
}

.hq-icon-chuangjian:before {
    content: "\e88a";
}

.hq-icon-dianhuazixun:before {
    content: "\e8b9";
}

.hq-icon-nanrentouxiang:before {
    content: "\e600";
}

.hq-icon-yanjing1:before {
    content: "\e6b5";
}

.hq-icon-jiazai:before {
    content: "\e65b";
}

.hq-icon-xiangshangjiantou:before {
    content: "\e653";
}

.hq-icon-jisuanqi:before {
    content: "\e614";
}

.hq-icon-sousuo_sousuo:before {
    content: "\e60b";
}

.pagination {
    display: block;
    position: absolute;
}

.pagination li {
    display: inline-block;
    position: relative;
    float: left;
    cursor: pointer;
    line-height: 1.42857;
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0 3px;
    -webkit-transition: background 0.1s;
    transition: background 0.1s;
    box-sizing: border-box;
}

.pagination li a {
    /*padding: 6px 12px*/
}

.pagination li:hover {
    border: 1px solid #21a8df;
    background: #21a8df;
    color: #fff;
}

.pagination .disabled {
    /*padding: 6px 12px;
    display: block;*/
}

.pagination li:hover a {
    color: #fff;
}

.pagination li.active {
    background: #21a8df;
    border: 1px solid #21a8df;
    color: #fff;
}

.pagination li.active span {
    color: #fff;
    display: block;
    /*padding: 6px 12px;*/
}

.pagination li.disabled {
    cursor: not-allowed;
}

.pagination li.disabled:hover {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
}

.pagination li.disabled:hover a {
    cursor: not-allowed;
    color: #333;
}

.hq-model {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    display: none;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background: rgba(0, 0, 0, 0.7);
}

.hq-model.fadein {
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    -webkit-animation: a 0.7s normal both;
    animation: a 0.7s normal both;
}

.hq-model.fadeout {
    -webkit-animation: b 0.7s normal both;
    animation: b 0.7s normal both;
}

.model-dialog {
    width: 600px;
    margin: 8% auto;
}

.model-xs {
    width: 400px;
}

.model-sm {
    width: 600px;
}

.model-lg {
    width: 800px;
}

.model-head {
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 14px 16px;
    height: 50px;
    position: relative;
}

.model-title {
    font-size: 18px;
}

.model-title.left {
    text-align: left;
}

.model-title.center {
    text-align: center;
}

.model-title.right {
    text-align: right;
}

.close {
    position: absolute;
    right: 16px;
    top: 5px;
    display: inline-block;
    cursor: pointer;
}

.close i {
    font-size: 25px;
}

.model-content {
    background: #fff;
    font-size: 14px;
    padding: 16px;
}

.con-border {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.model-footer {
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px 16px;
    height: 53px;
    text-align: center;
}

.model-footer button:first-child {
    margin-right: 15px;
}

.head-line {
    border-bottom: 1px solid #ebedec;
}

.footer-line {
    border-top: 1px solid #ebedec;
}

@-webkit-keyframes a {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes a {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@-webkit-keyframes b {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
}

@keyframes b {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
}

.primary-title {
    font-size: 24px;
    color: #333;
}

.second-primary-title {
    font-size: 20px;
    color: #666;
}

.second-primary-title-color {
    font-size: 20px;
    color: #333;
}

.banner-title {
    font-size: 18px;
    color: #333;
}

.primary-text {
    font-size: 16px;
    color: #666;
}

.link-text {
    font-size: 14px;
    color: #21a8df;
}

.little-title {
    font-size: 14px;
    color: #666;
}

.auxiliary-text {
    font-size: 14px;
    color: #999;
}

.special-text {
    font-size: 14px;
    color: #ff9600;
}

.lose-text {
    font-size: 14px;
    color: #bababa;
}

.little-auxiliary-text {
    font-size: 12px;
    color: #999;
}

.hq-switch {
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 22px;
    height: 22px;
    vertical-align: middle;
}

.hq-switch .hq-switch-box {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: Alpha(Opacity=0);
    width: 46px;
    height: 22px;
    z-index: 99;
    cursor: pointer;
}

.hq-switch .hq-switch-box[disabled] {
    cursor: not-allowed;
}

.hq-switch .hq-switch-core {
    position: absolute;
    top: 0;
    left: 0;
    background: url("/images/switch_btn.png") no-repeat 100%;
    width: 33px;
    height: 20px;
    cursor: pointer;
}

.hq-switch .hq-switch-active {
    background: url("/v3/images/2-1shebao_open.png") no-repeat 0;
}

.hq-advside {
    width: 100%;
    height: 500px;
    position: relative;
}

.hq-advside ul.hq-advsideUl {
    position: relative;
    width: 100%;
    height: 100%;
}

.hq-advside ul.hq-advsideUl li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}

.hq-advside ul.hq-advsideUl li.active {
    left: 0;
}

.hq-advside ul.advfadeUl {
    position: relative;
    width: 100%;
    height: 100%;
}

.hq-advside ul.advfadeUl li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hq-advside .btnWrap {
    width: 100%;
    position: absolute;
    z-index: 6;
    text-align: center;
    left: 0;
    bottom: 10px;
}

.hq-advside .btnWrap span {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    margin: 3px;
}

.hq-advside .btnWrap span.active {
    background: #000;
}

.pagination li {
    padding: 5px 10px;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.67%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.65%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.67%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.67%;
}

.col-12 {
    width: 100% !important;
}

.mg-10 {
    margin: 10px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-50 {
    margin-left: 50px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-50 {
    margin-right: 50px;
}

.pb-2 {
    padding-bottom: 2px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pd-5 {
    padding: 5px;
}

.pd-10 {
    padding: 10px;
}

.pd-15 {
    padding: 15px;
}

.pd-20 {
    padding: 20px;
}

.pd-30 {
    padding: 30px;
}

.pd-40 {
    padding: 40px;
}

/*颜色和底色*/
.c-blue {
    color: @blue !important;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.inlineBlock {
    display: inline-block;
}

.textCenter {
    text-align: center;
}

.textLeft {
    text-align: left;
}

.textRight {
    text-align: right;
}

.QRcodeImg {
    width: 150px !important;
    height: 150px !important;
}

.hide {
    display: none;
}

.centerTable {
}

.ant-table-selection-column span {
    width: 16px !important;
}

.ant-table-thead span {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.ant-table-tbody {
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.lh-34 {
    line-height: 34px;
}

.paragraphIndent {
    text-indent: 2em;
}

.wp100 {
    width: 100% !important;
}

.orange {
    color: #ff8a00 !important;
}
.c-main {
    color: #38b863;
}

.feature7Case {
	background: #f0f4f7;
	height: 260px;
	text-align: center;
}
.feature7Case h2 {
    font-size: 24px;
    color: #606c82;
    padding-bottom: 42px;
    padding-top: 60px;
}
.phoneTips{
    position: absolute;
    font-size: 12px;
    line-height: 30px;
    color: #ccc;
    margin-left: 12px;
}