@charset "utf-8";

.index-slide .banner1 {
    background: url(../images/banner-bg1.jpg)
}

.index-slide .banner2 {
    background: url(../images/banner-bg2.png)
}

.index-slide .banner3 {
    background: url(../images/banner-bg3.jpg)
}

.index-slide .banner4 {
    background: url(../images/banner-bg4.png)
}

.index-slide .swiper-pagination span:after {
    content: " ";
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    right: 0
}

.index-slide .swiper-pagination span {
    width: 40px;
    height: 4px;
    padding: 0;
    border: 0;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    background-color: rgba(255, 255, 255, .5);
    border-radius: 0;
    opacity: .6;
    position: relative
}

.index-slide .swiper-pagination .swiper-pagination-bullet-active {
    background: white;
    opacity: 1
}

.index-slide .swiper-pagination {
    bottom: 120px !important
}

.index-slide .slide-container .slide-sub-title {
    font: 22px/22px "Microsoft Yahei";
    color: #fff;
    margin-bottom: 10px
}

.index-slide .slide-container .slide-button:hover,
.about-banner .sub-button:hover {
    color: #fff;
    transition: .5s;
    opacity: .8
}

.index-slide .slide-container .slide-button,
.about-banner .sub-button {
    position: relative;
    display: inline-block;
    padding: 0 80px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    border-radius: 50px;
    height: 50px;
    line-height: 50px;
    background-image: -moz-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -webkit-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -ms-linear-gradient(0, #22f48a 0, #51ce62 100%);
    margin-top: 65px;
    transition: .5s;
    margin: auto;
    margin-top: 50px;
    letter-spacing: 3px;
    color: #fff
}

.index-slide .slide-container .slide-title {
    margin-top: 120px;
    font: 35px/35px "Microsoft Yahei";
    color: #fff;
    margin-bottom: 20px
}

.index-slide .slide-container .slide-container-img img {
    max-height: 425px;
    vertical-align: middle;
    display: block
}

.index-slide .slide-container .img-container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 500px
}

.index-slide .slide-container .slide-container-img {
    float: right;
    height: 500px
}

.index-slide .slide-container .slide-container-text {
    float: left
}

.index-slide .slide-container {
    height: 100%
}

.index-slide {
    width: 100%;
    height: 600px
}

.swiper-button-container {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.swiper-button-container .swiper-button-prev,
.swiper-button-container .swiper-button-next {
    opacity: 0;
    filter: Alpha(opacity=0);
    transition: opacity .5s;
    margin-top: -33px
}

.swiper-button-container .swiper-button-prev {
    width: 50px;
    height: 66px;
    background: url(../images/swiper-button.png) 0 0;
    background-size: 100px 66px
}

.swiper-button-container .swiper-button-next {
    width: 50px;
    height: 66px;
    background: url(../images/swiper-button.png) -51px 0;
    background-size: 100px 66px
}

.index-slide:hover .swiper-button-container .swiper-button-prev,
.index-slide:hover .swiper-button-container .swiper-button-next {
    opacity: 1;
    filter: Alpha(opacity=100)
}

.index-slide .swiper-slide {
    background-size: cover
}

.index-slide-bottom {
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    background: rgba(0, 6, 250, .04)
}

.index-slide-bottom-container {
    height: 100%;
    position: relative
}

.index-slide-bottom-item:hover {
    background: rgba(255, 255, 255, .2)
}

.index-slide-bottom-item {
    float: left;
    width: 25%;
    height: 100%
}

.index-slide-bottom-title {
    font-size: 16px;
    color: white;
    margin: 0 auto;
    width: 185px;
    margin-top: 11px
}

.index-slide-bottom-sub-title {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    line-height: 24px;
    margin: 0 auto;
    width: 185px;
    margin-top: 10px
}

.index-top-notice {
    height: 50px;
    line-height: 50px;
    background-color: #f7f8fb;
    overflow: hidden
}

.index-top-notice .p1:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 18px;
    left: 58px;
    top: 10px;
    background: url(../images/new.png) center center no-repeat;
    background-size: cover
}

.index-top-notice .p1 {
    font-size: 14px;
    font-weight: 400;
    color: #595961;
    position: relative;
    min-width: 100px;
    display: block
}

.index-top-notice .p2:hover {
    color: #1a86ff;
    background-image: url(../images/dian-hover.png)
}

.index-top-notice .p2 {
    color: #595961;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 17px;
    background: url(../images/dian.png) left center no-repeat;
    display: block;
    min-width: 340px
}

.index-top-notice table {
    width: 100%
}

.st-products {
    overflow: hidden;
    width: 100%;
    margin-top: 30px
}

.st-products-list {
    overflow: hidden
}

.st-products-list ul {
    width: 100%;
    overflow: hidden
}

.st-products-list ul li {
    float: left;
    width: 25%;
    background-color: #fff;
    text-align: center
}

.st-products-list ul li img {
    height: 210px;
    transition: all 1s ease
}

.st-products-list ul li h3 {
    font-size: 24px;
    color: #454545;
    font-weight: inherit;
    text-align: center;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #2589ff;
    padding-top: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.st-products-list ul li p {
    font-size: 16px;
    color: #666;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-align: center
}

.st-products-list ul li .div-pic {
    overflow: hidden
}

.st-products-list ul li a {
    display: block;
    margin: 10px;
    padding: 10px
}

.st-products-list ul li a:hover {
    box-shadow: 0 2px 8px 2px rgba(198, 201, 208, 0.5)
}

.st-products-list ul li a:hover h3 {
    color: #007aff
}

.st-products-list ul li a:hover img {
    -webkit-transform: scale(1.1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 750ms;
    -moz-transform: scale(1.1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 750ms;
    overflow: hidden
}

.section-title {
    color: #333;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    margin-top: 30px
}

.section-sub-title {
    margin-top: 5px;
    font-size: 14px;
    color: #999;
    letter-spacing: 0;
    line-height: 24px
}

.section-container .text-section {
    width: 40%;
    float: left
}

.section-container .section-btn2 {
    border: 1px solid #38f;
    color: #38f;
    padding: 9px 42px;
    margin-left: 20px
}

.section-container .section-btn1 {
    background-color: #38f;
    color: #fff
}

.section-container .section-btn1,
.section-container .section-btn2 {
    text-decoration: none;
    font-size: 14px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 15px;
    width: 142px;
    padding: 10px 0;
    text-align: center
}

.section-container .section-btn {
    margin-top: 30px
}

.section-container .img-section img {
    display: block;
    max-width: 100%;
    margin: 0 auto
}

.section-container .img-section {
    width: 60%;
    float: left
}

.section-container {
    width: 90%;
    margin: 0 auto;
    margin-top: 60px;
    overflow: hidden;
    margin-bottom: 80px
}

.index-function1 li a .p3 {
    color: #777;
    line-height: 30px;
    height: 35px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0 10px
}

.index-function1 li a .p2 {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 20px;
    margin-top: 4px
}

.index-function1 li a .p1 {
    width: 76px;
    height: 76px;
    background-image: url(../images/index-function1.png);
    margin: 15px auto
}

.index-function1 li a .icon1 {
    background-position: -10px -10px
}

.index-function1 li a .icon2 {
    background-position: -106px -10px
}

.index-function1 li a .icon3 {
    background-position: -202px -10px
}

.index-function1 li a .icon4 {
    background-position: -298px -10px
}

.index-function1 li a .icon5 {
    background-position: -394px -10px
}

.index-function1 li a .icon6 {
    background-position: -490px -10px
}

.index-function1 li a .icon7 {
    background-position: -586px -10px
}

.index-function1 li a .icon8 {
    background-position: -682px -10px
}

.index-function1 li a .icon9 {
    background-position: -778px -10px
}

.index-function1 li a .icon10 {
    background-position: -874px -10px
}

.index-function1 li a .icon11 {
    background-position: -970px -10px
}

.index-function1 li a .icon12 {
    background-position: -1066px -10px
}

.index-function1 li a .icon13 {
    background-position: -1162px -10px
}

.index-function1 li a .icon14 {
    background-position: -1258px -10px
}

.index-function1 li a .icon15 {
    background-position: -1354px -10px
}

.index-function1 li a .icon16 {
    background-position: -1450px -10px
}

.index-function1 li:hover a {
    top: -4px;
    left: -4px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .2)
}

.index-function1 li a {
    display: block;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
    position: relative;
    left: 0;
    top: 0;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    margin: 10px
}

.index-function1 li {
    float: left;
    width: 20%
}

.index-function1 {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    margin-top: 50px
}

.index-tech div {
    color: #fff
}

.index-tech {
    color: #fff;
    padding-bottom: 20px;
    background: url(../images/index-tech-bg.jpg) center center no-repeat;
    -o-background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    margin-top: 100px;
    padding-top: 30px;
    padding-bottom: 80px
}

.index-tech-container li {
    float: left;
    margin-top: 30px;
    width: 33.33%
}

.index-tech-container {
    width: 100%;
    overflow: hidden;
    margin-top: 30px
}

.index-tech-section.p1 {
    background-image: url(../images/index-tech-1.png)
}

.index-tech-section.p2 {
    background-image: url(../images/index-tech-2.png)
}

.index-tech-section.p3 {
    background-image: url(../images/index-tech-3.png)
}

.index-tech-section.p4 {
    background-image: url(../images/index-tech-4.png)
}

.index-tech-section.p5 {
    background-image: url(../images/index-tech-5.png)
}

.index-tech-section.p6 {
    background-image: url(../images/index-tech-6.png)
}

.index-tech-section {
    margin: 0 15px;
    background-color: #3e3e48;
    background-position: 50px center;
    background-repeat: no-repeat;
    padding-left: 150px;
    padding-top: 1px;
    padding-bottom: 30px;
    padding-right: 25px;
    border-radius: 3px
}

.index-tech-section .section-sub-title {
    width: 210px
}

.index-tech-number li .p1 span {
    font-size: 36px
}

.index-tech-number li .p2 {
    color: #999;
    line-height: 40px
}

.index-tech-number li .p1 {
    font-size: 26px;
    color: #595961
}

.index-tech-number li {
    float: left;
    width: 25%
}

.index-tech-number {
    width: 900px;
    margin: 0 auto;
    text-align: center;
    padding-top: 150px;
    padding-bottom: 200px
}

.index-security-number li .p1 span {
    font-size: 36px
}

.index-security-number li .p2 {
    color: #999;
    line-height: 40px
}

.index-security-number li .p1 {
    font-size: 26px;
    color: #3765a6
}

.index-security-number li {
    float: left;
    width: 25%
}

.index-security-number {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    margin-top: 50px
}

.index-security {
    background: url(../images/index-sec.png) center center no-repeat;
    -o-background-size: contain;
    -ms-background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    margin-top: 30px;
    padding-top: 1px;
    padding-bottom: 60px;
    text-align: center
}

.index-services-container li .icon1 {
    background-image: url(../images/sale-1.png)
}

.index-services-container li .icon2 {
    background-image: url(../images/sale-2.png)
}

.index-services-container li .icon3 {
    background-image: url(../images/sale-3.png)
}

.index-services-container li .icon4 {
    background-image: url(../images/sale-4.png)
}

.index-services-container li .icon5 {
    background-image: url(../images/sale-5.png)
}

.index-services-container li .icon6 {
    background-image: url(../images/sale-6.png)
}

.index-services-container li .p3 {
    font-size: 12px;
    color: #999;
    line-height: 21px;
    height: 42px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.index-services-container li .p2 {
    font-size: 18px;
    color: #333;
    font-weight: 400;
    margin-bottom: 6px
}

.index-services-container li .p1 {
    width: 120px;
    height: 120px;
    display: block;
    background-color: #e5f0ff;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
    margin: 0 auto 13px
}

.index-services-container li {
    float: left;
    text-align: center;
    width: 16.66%
}

.index-services-container {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    margin-top: 80px
}

.index-services {
    margin-top: 120px
}

.index-global .p1 span {
    display: inline-block;
    letter-spacing: 24px;
    margin-left: 25px;
    margin-right: 25px;
    font-size: 68px
}

.index-global .p1 {
    font-size: 26px
}

.index-global .p2 {
    font-size: 26px;
    letter-spacing: 22px;
    line-height: 85px;
    padding-left: 27px
}

.index-global {
    color: #fff;
    padding-bottom: 20px;
    background: url(../images/index-global-bg.png) center center no-repeat;
    -o-background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    margin-top: 130px
}

.case {
    text-align: center
}

.case ul li {
    position: relative;
    width: 200px;
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
    display: inline-block;
    margin: 30px 40px 10px 40px;
    cursor: pointer
}

.case ul li img {
    width: 160px;
    height: 160px
}

.case ul li p {
    font-size: 24px;
    color: #3d3d3d;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 20px
}

.case ul li .div-fd {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.59);
    text-align: center;
    display: none
}

.case ul li .div-fd img {
    width: 120px;
    height: 120px;
    margin-top: 25px
}

.more-case:hover {
    background-color: #38f;
    color: #fff
}

.more-case {
    width: 140px;
    height: 40px;
    display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #38f;
    border: 1px solid #38f;
    margin-top: 50px;
    margin-bottom: 50px;
    border-radius: 40px;
    padding: 0 5px
}

.index-news {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #f4f5f9;
    overflow: hidden
}

.index-news li .index-news-item .title:before {
    content: " ";
    display: block;
    position: absolute;
    background-color: #08a0ff;
    width: 3px;
    height: 15px;
    margin-top: 18px;
    margin-left: 20px
}

.index-news li .index-news-item .title a {
    float: right;
    margin-right: 20px;
    font-weight: normal;
    color: #999;
    font-size: 14px
}

.index-news li .index-news-item .title {
    font-weight: bold;
    color: #666;
    border-bottom: 1px solid #eee;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-indent: 35px;
    position: relative
}

.index-news li .index-news-item .list span {
    float: right;
    color: #999
}

.index-news li .index-news-item .list a {
    display: block;
    width: 280px;
    height: 40px;
    overflow: hidden;
    float: left;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
    text-decoration: none
}

.index-news li .index-news-item .list {
    height: 40px;
    line-height: 40px;
    padding: 10px 20px;
    box-sizing: border-box
}

.index-news li .index-news-item {
    margin: auto;
    width: 97%;
    box-shadow: 0 2px 4px 0 rgba(3, 27, 78, .06);
    -webkit-box-shadow: 0 2px 4px 0 rgba(3, 27, 78, .06);
    -moz-box-shadow: 0 2px 4px 0 rgba(3, 27, 78, .06);
    background: #fff;
    padding-bottom: 20px;
    overflow: hidden
}

.index-news li {
    width: 33.33%;
    float: left
}

.bottom-register .text-wrap .desc .spacer {
    width: 80px;
    height: 1px;
    background: #62fdff;
    opacity: .6;
    display: inline-block;
    vertical-align: middle
}

.bottom-register .text-wrap .desc {
    margin-top: 15px;
    font-size: 16px
}

.bottom-register .text-wrap .title {
    font-size: 30px
}

.bottom-register .btn {
    position: absolute;
    top: 96px;
    right: 215px;
    width: 190px;
    height: 50px;
    display: block;
    text-align: center;
    color: #719aee;
    font-size: 20px;
    background: white;
    line-height: 50px;
    border-radius: 30px
}

.bottom-register .btn:hover {
    background: #f6f6f6
}

.bottom-register .text-wrap {
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 222px;
    color: #fff;
    text-align: center
}

.bottom-register .page-container1200 {
    position: relative
}

.bottom-register {
    background: url(../images/bottom-register-bg.jpg) no-repeat 50% 50%;
    height: 240px
}

.solution-bottom {
    background: url(../images/solution-img3.png) no-repeat;
    height: 280px;
    text-align: center
}

.solution-bottom .page-container {
    padding-top: 50px
}

.solution-bottom .page-container .sub-title {
    line-height: 24px;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: lighter
}

.solution-bottom .page-container .title {
    font-size: 32px;
    color: #fff;
    font-weight: lighter;
    position: relative;
    margin-bottom: 25px
}

.solution-bottom .page-container .sub-button:hover {
    transition: .5s;
    opacity: .8
}

.solution-bottom .page-container .sub-button:before {
    content: " ";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 200px;
    height: 50px;
    border-radius: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1)
}

.solution-bottom .page-container .sub-button {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    border-radius: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-image: -moz-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -webkit-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -ms-linear-gradient(0, #22f48a 0, #51ce62 100%);
    margin-top: 65px;
    transition: .5s;
    letter-spacing: 3px;
    color: #fff;
    margin: 0 auto
}

.FixedFooter_open {
    cursor: pointer;
    background: url(../images/fixedfooter_open.png);
    display: block;
    height: 95px;
    left: -100px;
    position: fixed;
    width: 44px;
    z-index: 99;
    _position: absolute;
    bottom: 90px;
    _bottom: 90px;
    _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)))
}

.FixedFooter {
    height: 185px;
    width: 100%;
    background: url(../images/fixedfooterbg.png);
    z-index: 99;
    position: fixed;
    _position: absolute;
    bottom: 0;
    _bottom: auto;
    _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)))
}

.FixedFooter-wechat {
    float: right;
    margin-right: 0
}

.FixedFooter-wechat img {
    height: 170px;
    width: 800px;
    margin-top: 12px
}

.FixedFooter-text {
    width: 320px;
    height: 185px;
    float: left
}

.FixedFooter-close {
    color: #9aa1a8;
    font: 38px Simsun;
    outline: 0 none;
    position: absolute;
    right: 0;
    top: 10px
}

.FixedFooter-close:hover {
    text-decoration: none;
    color: #fff;
    font: 38px Simsun;
    outline: 0 none;
    position: absolute;
    right: 0;
    top: 10px
}

.Hui-wraper {
    height: 185px;
    position: relative;
    overflow: hidden
}

.Hui-wraper,
.wp {
    margin-left: auto;
    margin-right: auto
}

.Hui-wraper,
.text-l,
.wp {
    text-align: left
}

.index-service-tex1 {
    color: white;
    font-size: 20px;
    line-height: 40px;
    margin-top: 25px;
    float: left;
    padding-left: 15px
}

.index-service-qr1 {
    float: left
}

.index-service-qr1 img {
    width: 145px;
    height: initial;
    margin-top: 18px
}

.index-service-tex1:last-child {
    margin-right: 50px
}

.banner-button:hover {
    background-color: rgba(255, 255, 255, .8);
    font-size: 16px
}

.banner-button {
    width: 120px;
    height: 38px;
    color: #3191ff;
    border-radius: 19px;
    line-height: 35px;
    font-size: 16px;
    background: #fff;
    display: block;
    text-align: center
}

.banner-sub-title {
    font-size: 22px;
    color: #fff;
    margin-top: 10px
}

.banner-title span {
    color: #f6ff00
}

.banner-title {
    font-size: 30px;
    color: #fff
}

.case-banner {
    padding-top: 30px;
    box-sizing: border-box;
    background: url(../images/banner-case.jpg) center center no-repeat;
    height: 200px;
    width: 100%
}

.case-switch .item.on:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -35.5px;
    content: '';
    width: 71px;
    height: 3px;
    border-radius: 2px;
    background: #2f82ff
}

.case-switch .item.on,
.case-switch .item:hover {
    color: #2f82ff
}

.case-switch .item {
    float: left;
    position: relative;
    vertical-align: top;
    word-break: keep-all;
    height: 100%;
    line-height: 66px;
    color: #333;
    font-size: 18px;
    text-align: center;
    width: 150px;
    cursor: pointer
}

.case-switch .case-tip a:hover {
    background-color: #0e68f1
}

.case-switch .case-tip a {
    float: right;
    margin-left: 5px;
    text-decoration: none;
    display: inline-block;
    background: #2f82ff;
    color: #fff;
    width: 92px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    text-align: center;
    border-radius: 16px;
    margin: 15px 0 0 10px
}

.case-switch .case-tip {
    font-family: "微软雅黑";
    font-size: 14px;
    color: #888;
    line-height: 66px;
    width: 280px;
    float: right
}

.case-banner .page-container,
.case-switch .page-container {
    padding: 0 110px;
    box-sizing: border-box
}

.case-switch {
    width: 100%;
    height: 66px;
    background: #f6f8fb
}

.about-tab li.active,
.about-tab li:hover {
    color: #f79313;
    background: #fff
}

.about-title {
    padding: 15px 0;
    font-size: 48px;
    font-weight: normal;
    color: #4f5b6c;
    text-align: center;
    border-bottom: 1px solid #d5dfe7;
    padding-bottom: 15px
}

.about-tab {
    width: 80%;
    margin: 0 auto;
    overflow: hidden
}

.about-tab li {
    display: inline-block;
    width: 20%;
    height: 71px;
    margin-top: 5px;
    line-height: 76px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #666;
    float: left;
    background: #f8f8f8
}

.about-banner {
    height: 300px;
    background: url(../images/about-bg.jpg) center no-repeat;
    padding-top: 50px;
    box-sizing: border-box;
    background-size: cover
}

.about-banner .sub-button {
    margin: 0 auto;
    display: block;
    width: 90px;
    margin-top: 38px
}

.about-pic {
    width: 100%
}

.about-content .about-pic img {
    max-width: 280px
}

.about-pic img {
    margin: 0 auto;
    display: block
}

.about-banner .sub-title {
    font-size: 25px;
    color: white;
    text-align: center;
    margin-top: 30px
}

.about-banner .title {
    text-align: center;
    font-size: 35px;
    color: white
}

.about-culture .sub-title {
    font-size: 15px;
    line-height: 35px;
    color: #282828
}

.about-culture img {
    position: absolute;
    top: 0;
    right: 0
}

.about-culture {
    width: 70%;
    margin: 0 auto;
    position: relative
}

.about-culture .title {
    font-size: 18px;
    line-height: 35px;
    color: #1058a4
}

.about-info {
    width: 900px;
    margin: 0 auto;
    padding: 0 0 100px 0
}

.about-info h3 {
    font-size: 24px;
    line-height: 36px
}

.about-info p {
    text-indent: 2em;
    font-size: 16px;
    line-height: 32px
}

.about-info img {
    max-width: 100%;
    padding: 20px 0 0 0
}

.about-table {
    width: 100%
}

.contact-list {
    padding-left: 20px;
    border: 1px solid #eee;
    margin-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px
}

.contact-list .title {
    font-size: 20px;
    color: #3d3d3d
}

.contact-list .sub-title {
    font-size: 16px;
    display: block;
    line-height: 30px;
    color: #666;
    margin-top: 18px
}

.about-content .about-pic img {
    max-width: 280px
}

.product-banner img {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -458px
}

.product-banner .sub-button:hover {
    opacity: .9;
    filter: alpha(opacity=90);
    transition: all .3s
}

.product-banner .sub-button {
    display: block;
    height: 38px;
    padding: 0 32px;
    margin: 20px auto;
    font-size: 16px;
    line-height: 38px;
    color: #fff;
    background: #38f;
    background: -webkit-linear-gradient(left, #4f98ff, #38f 80%);
    background: -o-linear-gradient(bottom, #4f98ff, #38f 80%);
    background: -moz-linear-gradient(bottom, #4f98ff, #38f 80%);
    background: linear-gradient(to bottom, #4f98ff, #38f 80%);
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 2px;
    width: 80px
}

.product-banner .sub-title {
    font-size: 18px;
    font-family: PingFangSC-Light, 'MicroSoft YaHei';
    line-height: 1.8;
    color: #323a45;
    text-align: center
}

.product-banner .title {
    margin-bottom: 5px;
    font-size: 38px;
    color: #323a45;
    text-align: center
}

.product-banner {
    width: 100%;
    height: 445px;
    padding-top: 55px;
    color: #fff;
    overflow: hidden;
    background: url(../images/product-bg.jpg) center center no-repeat;
    position: relative
}

.product-about .product-about-container1,
.product-about .product-about-container2 {
    overflow: hidden
}

.product-about .product-about-container2 {
    width: 80%;
    margin: 0 auto;
    position: relative;
    top: -90px
}

.product-about .list:hover {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}

.product-about .list p {
    line-height: 28px;
    font-size: 16px
}

.product-about .list img {
    padding: 75px 0 5px
}

.product-about {
    background: #fafafa;
    padding-top: 100px
}

.product-about .list {
    width: 20%;
    height: 230px;
    background: url(../images/product-about-bg.png);
    text-align: center;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
    float: left;
    background-repeat: no-repeat;
    background-position: center center
}

.product-about .product-about-container2 .list {
    width: 25%
}

.product-about .page-container {
    padding: 0 100px;
    box-sizing: border-box
}

.product-show img {
    margin: 0 auto;
    display: block
}

.product-show {
    width: 100%
}

.product-show div:nth-child(3) {
    font: 16px/25px "Microsoft Yahei";
    color: #999;
    text-align: center
}

.product-show div:nth-child(2) {
    font: 20px/20px "Microsoft Yahei";
    color: #333;
    margin: 20px 0 10px;
    text-align: center
}

.product-show td {
    width: 25%
}

.app-box {
    width: 100%
}

.app-title {
    font-size: 18px;
    line-height: 60px;
    border-bottom: 1px solid #ece8e8;
    position: relative;
    text-indent: 15px;
    margin: 15px 0
}

.app-title:first-child {
    margin-top: 0
}

.app-title i {
    width: 5px;
    height: 20px;
    background-color: #f89618;
    position: absolute;
    left: 0;
    top: 21px
}

.app-hot-item {
    width: 22.1%;
    margin-right: 3%;
    background-color: #ea5057;
    display: inline-block;
    height: 92px;
    line-height: 92px;
    color: white;
    text-align: center;
    border-radius: 5px;
    position: relative;
    text-decoration: none !important
}

.app-hot-item:hover {
    text-decoration: none !important;
    color: white;
    filter: alpha(opacity=90);
    -moz-opacity: .9;
    -khtml-opacity: .9;
    opacity: .9
}

.app-hot-item i {
    vertical-align: middle
}

.app-hot-item a {
    font-size: 16px;
    padding: 0 5px;
    display: inline-block;
    color: white !important;
    text-decoration: none !important
}

.app-hot-item span.hot-title {
    font-size: 18px
}

.app-hot-item span.hot-ck {
    font-size: 10px;
    background-color: rgba(255, 255, 255, .4);
    padding: 2px 3px;
    border-radius: 3px;
    margin-left: 5px
}

.app-item:hover {
    background-color: #f2f2f2;
    text-decoration: none
}

.app-item {
    position: relative;
    width: 29%;
    margin-right: 4%;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    color: #666 !important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px
}

.app-icon {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    float: left;
    color: white;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.app-icon i {
    line-height: 80px;
    font-size: 50px
}

.app-item p.desc {
    max-height: 55px;
    overflow: hidden;
    font-size: 13px;
    position: absolute;
    bottom: 12px;
    right: 2px;
    width: 100%;
    text-decoration: none !important;
    color: #777;
    padding-left: 98px;
    box-sizing: border-box
}

.app-item div.title {
    font-size: 16px;
    color: #333
}

.app-item div.price {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 50px;
    text-align: center;
    padding: 1px 0;
    border-radius: 3px;
    background-color: #23ad44;
    color: white;
    font-size: 12px;
    overflow: hidden
}

.solution-banner .page-container .sub-button:hover {
    transition: .5s;
    opacity: .8
}

.solution-banner .page-container .sub-button:before {
    content: " ";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 200px;
    height: 50px;
    border-radius: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1)
}

.solution-banner .page-container .sub-button {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    border-radius: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-image: -moz-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -webkit-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -ms-linear-gradient(0, #22f48a 0, #51ce62 100%);
    margin-top: 65px;
    transition: .5s;
    letter-spacing: 3px;
    color: #fff
}

.solution-banner .page-container .sub-title {
    line-height: 24px;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: lighter
}

.solution-banner .page-container .title {
    margin-top: 80px;
    font-size: 44px;
    color: #fff;
    font-weight: lighter;
    position: relative;
    margin-bottom: 25px
}

.solution-banner .right-img {
    position: absolute;
    right: 0;
    bottom: 0
}

.solution-banner .page-container {
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative
}

.solution-banner {
    width: 100%;
    height: 480px;
    color: #fff;
    background: url(../images/solution-banner.jpg) no-repeat
}

.page-image-text .sub-title {
    font-size: 16px;
    color: #999;
    letter-spacing: 1px
}

.page-image-text .title {
    font-size: 20px;
    line-height: 45px;
    color: #666;
    letter-spacing: 1px
}

.page-image-text {
    width: 100%
}

.page-switch-container li a {
    display: block;
    height: 63px;
    line-height: 60px;
    font-size: 22px;
    color: #595961;
    border-bottom: 3px solid transparent;
    position: relative;
    bottom: -2px
}

.page-switch-container li:hover a,
.page-switch-container li.hover a {
    border-color: #595961
}

.page-switch-container li {
    float: left;
    cursor: pointer;
    width: 20%;
    text-align: center;
    border-bottom: 1px solid #a8a8ac
}

.page-switch-container {
    overflow: hidden
}

.page-switch-list table img {
    width: 85%;
    display: block;
    margin: 0 auto
}

.page-switch-list table {
    width: 100%
}

.page-switch-list li {
    display: none
}

.page-switch-list li:first-child {
    display: block
}

.product-icon1 li div i.ico1 {
    background-image: url(../images/product-ico1-1.png)
}

.product-icon1 li div i.ico2 {
    background-image: url(../images/product-ico1-2.png)
}

.product-icon1 li div i.ico3 {
    background-image: url(../images/product-ico1-3.png)
}

.product-icon1 li div i.ico4 {
    background-image: url(../images/product-ico1-4.png)
}

.product-icon1 li div i.ico5 {
    background-image: url(../images/product-ico1-5.png)
}

.product-icon1 li div i.ico6 {
    background-image: url(../images/product-ico1-6.png)
}

.product-icon1 li div i.ico7 {
    background-image: url(../images/product-ico1-7.png)
}

.product-icon1 li div i.ico8 {
    background-image: url(../images/product-ico1-8.png)
}

.product-icon1 li div i.ico9 {
    background-image: url(../images/product-ico1-9.png)
}

.product-icon1 li div i.ico10 {
    background-image: url(../images/product-ico1-10.png)
}

.product-icon1 li div i.ico11 {
    background-image: url(../images/product-ico1-11.png)
}

.product-icon1 li div i.ico12 {
    background-image: url(../images/product-ico1-12.png)
}

.product-icon1 li div i.ico13 {
    background-image: url(../images/product-ico1-13.png)
}

.product-icon1 li div i.ico14 {
    background-image: url(../images/product-ico1-14.png)
}

.product-icon1 li div i.ico15 {
    background-image: url(../images/product-ico1-15.png)
}

.product-icon1 li div i.ico16 {
    background-image: url(../images/product-ico1-16.png)
}

.product-icon1 li div i {
    display: block;
    margin: 0 auto 3px;
    width: 50px;
    height: 50px;
    background: center center no-repeat;
    background-size: cover
}

.product-icon1 li div {
    display: block;
    width: 100px;
    height: 75px;
    border-radius: 8px;
    padding: 13px 0;
    box-shadow: 0 0 5px rgba(26, 134, 255, .2);
    font-size: 12px;
    color: #595961
}

.product-icon1 li {
    float: left;
    text-align: center;
    margin-bottom: 40px;
    width: 25%
}

.product-icon2 li div i.ico1 {
    background-image: url(../images/product-ico2-1.png)
}

.product-icon2 li div i.ico2 {
    background-image: url(../images/product-ico2-2.png)
}

.product-icon2 li div i.ico3 {
    background-image: url(../images/product-ico2-3.png)
}

.product-icon2 li div i.ico4 {
    background-image: url(../images/product-ico2-4.png)
}

.product-icon2 li div i.ico5 {
    background-image: url(../images/product-ico2-5.png)
}

.product-icon2 li div i.ico6 {
    background-image: url(../images/product-ico2-6.png)
}

.product-icon2 li div i.ico7 {
    background-image: url(../images/product-ico2-7.png)
}

.product-icon2 li div i.ico8 {
    background-image: url(../images/product-ico2-8.png)
}

.product-icon2 li div i.ico9 {
    background-image: url(../images/product-ico2-9.png)
}

.product-icon2 li div i.ico10 {
    background-image: url(../images/product-ico2-10.png)
}

.product-icon2 li div i.ico11 {
    background-image: url(../images/product-ico2-11.png)
}

.product-icon2 li div i.ico12 {
    background-image: url(../images/product-ico2-12.png)
}

.product-icon2 li div i.ico13 {
    background-image: url(../images/product-ico2-13.png)
}

.product-icon2 li div i.ico14 {
    background-image: url(../images/product-ico2-14.png)
}

.product-icon2 li div i.ico15 {
    background-image: url(../images/product-ico2-15.png)
}

.product-icon2 li div i.ico16 {
    background-image: url(../images/product-ico2-16.png)
}

.product-icon2 li div i {
    display: block;
    width: 113px;
    height: 112px;
    margin: 0 auto 13px;
    background: center center no-repeat;
    background-size: cover
}

.product-icon2 li div {
    display: block;
    font-size: 15px;
    color: #282828
}

.product-icon2 {
    overflow: hidden;
    margin-top: 50px
}

.product-icon2 li {
    float: left;
    text-align: center;
    margin-bottom: 40px;
    width: 12.5%
}

.solution-applet-banner .sub-button:hover {
    opacity: .9;
    filter: alpha(opacity=90);
    transition: all .3s
}

.solution-applet-banner .sub-button {
    display: block;
    height: 38px;
    padding: 0 32px;
    margin: 20px auto;
    font-size: 16px;
    line-height: 38px;
    color: #fff;
    background: #38f;
    background: -webkit-linear-gradient(left, #4f98ff, #38f 80%);
    background: -o-linear-gradient(bottom, #4f98ff, #38f 80%);
    background: -moz-linear-gradient(bottom, #4f98ff, #38f 80%);
    background: linear-gradient(to bottom, #4f98ff, #38f 80%);
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 2px;
    width: 80px
}

.solution-applet-banner .sub-title {
    font-size: 30px;
    font-family: PingFangSC-Light, 'MicroSoft YaHei';
    line-height: 1.8;
    color: #fff;
    text-align: center
}

.solution-applet-banner .title {
    margin-bottom: 5px;
    font-size: 45px;
    color: #fff;
    text-align: center
}

.solution-applet-banner {
    width: 100%;
    height: 420px;
    padding-top: 112px;
    color: #fff;
    overflow: hidden;
    background: url(../images/solution-applet-bg.png) center center no-repeat;
    position: relative;
    background-size: cover;
    box-sizing: border-box
}

.applet-01 li {
    float: left;
    width: 33.33%;
    text-align: center
}

.applet-01 {
    overflow: hidden
}

.section-button:hover {
    font-size: 16px
}

.section-button {
    display: block;
    width: 112px;
    margin: 60px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
    color: #fff;
    background-color: #4fb954;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 0;
    text-align: center
}

.applet-enter td {
    width: 50%
}

.applet-enter .section-title {
    width: 480px
}

.applet-enter img {
    width: 400px;
    margin: 0 auto;
    display: block
}

.applet-list-container {
    overflow: hidden
}

.applet-list-container li p {
    margin: 10px auto 0;
    width: 238px;
    line-height: 24px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999;
    text-align: center
}

.applet-list-container li {
    float: left;
    margin: 37px 0;
    padding-top: 100px;
    width: 33.33%;
    height: auto;
    line-height: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center top
}

.applet-list-container .a1 {
    background-image: url(../images/a_1.png)
}

.applet-list-container .a2 {
    background-image: url(../images/a_2.png)
}

.applet-list-container .a3 {
    background-image: url(../images/a_3.png)
}

.applet-list-container .a4 {
    background-image: url(../images/a_4.png)
}

.applet-list-container .a5 {
    background-image: url(../images/a_5.png)
}

.applet-list-container .a6 {
    background-image: url(../images/a_6.png)
}

.applet-template-show li img {
    display: block;
    margin: 0 auto;
    max-width: 100%
}

.applet-template-show li {
    float: left;
    width: 25%;
    padding: 0 20px;
    box-sizing: border-box
}

.applet-template-show {
    overflow: hidden
}

.applet-template-button:hover {
    background: #ff6800;
    color: #fff;
    font-size: 16px
}

.applet-template-button {
    display: block;
    width: 120px;
    height: 34px;
    line-height: 34px;
    border: 1px solid #ff6800;
    border-radius: 17px;
    color: #ff6800;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px
}

.applet-model li div:hover {
    box-shadow: #dedede 0 10px 20px
}

.applet-model li div i {
    display: block;
    margin: 0 auto;
    width: 40px;
    margin-top: 20px
}

.applet-model li div p {
    color: #868686;
    text-align: center;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 20px
}

.applet-model li div h4 {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center
}

.applet-model li div {
    width: 90%;
    box-sizing: border-box;
    margin-bottom: 21px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 9px;
    text-align: left
}

.applet-model li {
    float: left;
    width: 20%
}

.applet-model {
    overflow: hidden
}

.app-solution-banner .page-container .sub-button:hover {
    transition: .5s;
    opacity: .8
}

.app-solution-banner .page-container .sub-button:before {
    content: " ";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 200px;
    height: 50px;
    border-radius: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1)
}

.app-solution-banner .page-container .sub-button {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    border-radius: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-image: -moz-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -webkit-linear-gradient(0, #22f48a 0, #51ce62 100%);
    background-image: -ms-linear-gradient(0, #22f48a 0, #51ce62 100%);
    margin-top: 65px;
    transition: .5s;
    letter-spacing: 3px;
    color: #fff
}

.app-solution-banner .sub-title {
    font-size: 20px;
    color: white;
    margin-top: 40px
}

.app-solution-banner .title {
    font-size: 40px;
    color: white
}

.app-solution-banner {
    padding-top: 120px;
    background: url(../images/app-banner-bg.jpg) no-repeat;
    height: 480px;
    box-sizing: border-box;
    background-position: center
}

.app-001 .item .sub-title {
    text-align: center;
    font-size: 16px;
    color: #999;
    font-family: arial, "microsoft yahei";
    line-height: 24px;
    margin-top: 10px
}

.app-001 .item .title span {
    font-size: 24px;
    color: #f45026;
    font-family: arial, "microsoft yahei"
}

.app-001 .item .title {
    text-align: center;
    font-size: 64px;
    color: #f45026;
    font-family: arial, "microsoft yahei";
    font-weight: normal
}

.app-001 .item:after {
    content: "";
    width: 2px;
    height: 48px;
    background: #e2e2e2;
    position: absolute;
    right: 0;
    top: 8px
}

.app-001 .item:last-child:after {
    display: none
}

.app-001 .item {
    width: 33.3333%;
    float: left;
    position: relative
}

.app-001 {
    overflow: hidden
}

.app-002 .item img {
    display: block;
    margin: 0 auto
}

.app-002 .item .title {
    font-size: 18px;
    color: #333;
    font-family: arial, "microsoft yahei";
    margin-top: 16px;
    margin-bottom: 30px
}

.app-002 .item {
    width: 25%
}

.app-002 .item:after {
    content: "";
    position: absolute;
    top: 60px;
    right: -10px;
    display: block;
    width: 20px;
    height: 28px;
    background: url(../images/step_arror.png) no-repeat
}

.app-003 .item .title {
    font-size: 24px;
    color: #333;
    font-family: arial, "microsoft yahei";
    line-height: 24px;
    margin-top: 16px;
    text-align: center;
    font-weight: normal
}

.app-003 .item:after {
    content: "";
    width: 2px;
    height: 48px;
    background: #f66a03;
    position: absolute;
    right: 0;
    top: 34px
}

.app-003 .item {
    width: 20%
}

.app-003 .item img {
    display: block;
    margin: 0 auto
}

.app-004 li .sub-title {
    text-align: center;
    font-size: 16px;
    color: #999;
    font-family: arial, "microsoft yahei";
    line-height: 24px;
    margin-top: 10px
}

.app-004 li .title {
    font-size: 24px;
    color: #333;
    font-family: arial, "microsoft yahei";
    line-height: 24px;
    margin-top: 16px;
    text-align: center;
    font-weight: normal;
    margin-top: 30px
}

.app-004 li {
    float: left;
    width: 33.33%;
    text-align: center
}

.app-004 {
    overflow: hidden;
    margin-top: 100px
}

.account-header {
    position: relative;
    overflow: hidden;
    height: 70px;
    width: 100%;
    border-bottom: 1px solid #e6e9f0
}

.account-header .logo span:before {
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    width: 1px;
    height: 24px;
    background-color: #cfcfcf
}

.account-header .logo span {
    position: absolute;
    width: 224px;
    height: 30px;
    line-height: 28px;
    box-sizing: border-box;
    border: 1px solid #e6e6e6;
    border-radius: 30px;
    color: #6b6868;
    font-size: 13px;
    text-align: center;
    margin-top: -14px;
    top: 50%;
    left: 140px
}

.account-header .logo {
    display: block;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 40px;
    margin-top: -25px
}

.account-header .right a:hover {
    color: #333
}

.account-header .right a {
    color: #7a8599
}

.account-header .right .reg {
    display: inline-block;
    vertical-align: middle;
    height: 36px;
    line-height: 34px;
    border: 1px solid #dcdcdc;
    border-radius: 28px;
    text-align: center;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    transition: color .3s, border-color .3s;
    text-decoration: none;
    padding: 0 28px;
    border-color: #4381fd;
    background-color: #4381fd;
    color: white;
    margin-left: 30px
}

.account-header .right .reg:hover {
    color: white
}

.account-header .right {
    display: block;
    height: 70px;
    position: absolute;
    top: 50%;
    right: 40px;
    margin-top: -35px;
    line-height: 70px
}

.account-body .right .sub-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 120px;
    margin: 0 auto;
    font-size: 14px;
    color: #155bd4
}

.account-body .right .sub-title {
    line-height: 28px;
    margin: 8px 0 20px;
    font-size: 18px;
    color: #323233
}

.account-body .right img {
    width: 310px;
    margin: 0 auto;
    display: block;
    margin-top: 50px
}

.account-body .right .title {
    line-height: 36px;
    font-size: 26px;
    font-weight: 500;
    color: #323233
}

.account-body .right {
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ededed;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    text-align: center;
    float: right;
    width: 382px;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background-image: url(../images/login-case-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 220px
}

.account-body {
    width: 850px;
    margin: 0 auto;
    overflow: hidden;
    height: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -240px;
    margin-left: -425px;
    z-index: 2
}

.account-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: #f2f3f5
}

.login-a {
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ededed;
    box-sizing: border-box;
    height: 480px;
    float: left;
    width: 450px;
    border-radius: 6px;
    overflow: hidden
}

.login-a .title {
    line-height: 50px;
    height: 50px;
    position: relative
}

.login-a .title h3 {
    float: left;
    font-size: 24px;
    color: #f79313;
    font-weight: inherit
}

.login-a .title a {
    float: right;
    font-size: 16px;
    color: #666
}

.login-sj {
    padding: 10px 10px 10px 40px;
    border-bottom: solid 1px #e5e5e5;
    background: url(../images/sj-a.png) no-repeat 0 17px;
    margin-top: 40px
}

.login-sj input,
.login-mm input {
    border: 2px solid #fff;
    font-size: 16px;
    height: 40px;
    width: 100%;
    padding-left: 5px;
    border: 1px solid #ededed;
    border-radius: 5px
}

.login-mm {
    padding: 10px 10px 10px 40px;
    border-bottom: solid 1px #e5e5e5;
    background: url(../images/mm-a.png) no-repeat 0 15px;
    margin-top: 10px
}

.login-wt {
    text-align: right;
    padding: 10px 0
}

.login-wt a {
    font-size: 14px;
    color: #666
}

.login-but {
    text-align: center;
    margin-top: 110px
}

.login-but input {
    width: 100%;
    height: 48px;
    font-size: 18px;
    background: #f79313;
    border: 0;
    color: #fff;
    cursor: pointer
}

.login-but input:hover {
    opacity: .8
}

.login-but a {
    font-size: 16px;
    color: #f79313;
    display: inline-block;
    line-height: 40px
}

.switch {
    background: url(../images/ligon-a.png) no-repeat right 0;
    float: right;
    height: 50px;
    display: inline-block;
    width: 50px;
    cursor: pointer;
    background-size: contain
}

.switch.wechat {
    background-image: url(../images/login-wechat.png)
}

.login-a .wechat-login iframe {
    height: 400px;
    margin: 0 auto;
    display: block
}

.login-a .wechat-login {
    display: none
}

.login-footer {
    color: #9797a1;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 1
}

.login-footer a {
    color: #9797a1;
    font-size: 12px;
    text-decoration: none
}

.community-banner .community-btn {
    display: flex;
    margin: 0 auto;
    width: 140px;
    height: 44px;
    background-color: #f03b46;
    border-radius: 2px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    font-size: 18px;
    color: white;
    background-image: url(../images/qr-min.png);
    background-repeat: no-repeat;
    padding-left: 28px;
    background-position: 20px center;
    box-sizing: border-box;
    border-radius: 3px
}

.community-banner .text {
    font-size: 40px;
    text-align: center;
    line-height: 60px
}

.community-banner {
    padding-top: 120px;
    width: 100%;
    height: 420px;
    color: #fff;
    background: url(../images/community-banner.png) no-repeat
}

.community.applet-list-container .a1 {
    background-image: url(../images/community-01.png);
    padding-top: 112px
}

.community.applet-list-container .a2 {
    background-image: url(../images/community-02.png);
    padding-top: 112px
}

.community.applet-list-container .a3 {
    background-image: url(../images/community-03.png);
    padding-top: 112px
}

.community.applet-list-container .a4 {
    background-image: url(../images/community-4.png);
    padding-top: 112px
}

.community.applet-list-container .a5 {
    background-image: url(../images/community-5.png);
    padding-top: 112px
}

.community.applet-list-container .a6 {
    background-image: url(../images/community-6.png);
    padding-top: 112px
}

.community-map img {
    width: 100%;
    margin-top: 30px
}

.community-function {
    padding-top: 60px;
    padding-bottom: 60px
}

.community-function .function-containner {
    margin-top: 50px;
    width: 500px
}

.community-function .function-containner .title {
    font-size: 26px;
    color: #333;
    line-height: 80px
}

.community-function .function-containner .item li {
    margin: 20px 0;
    color: #666;
    font-size: 15px;
    line-height: 21px;
    text-align: left;
    position: relative;
    padding-left: 20px
}

.community-function img {
    width: 550px
}

.community-function .function-containner .item li:before {
    content: ' ';
    position: absolute;
    top: 7px;
    left: 5px;
    display: block;
    width: 7px;
    height: 7px;
    background: #3895ff;
    border-radius: 50%
}

.community-function.f-left img,
.community-function.f-right .function-containner {
    float: left
}

.community-function.f-right img,
.community-function.f-left .function-containner {
    float: right
}

.applet-title {
    font-family: PingFangSC-Medium;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    color: #333;
    padding: 70px 0 13px
}

.applet-list-container,
.community-map,
.community-function {
    margin: 0 auto;
    width: 1100px;
    height: auto;
    overflow: hidden
}

.applet-list-container li p {
    margin: 10px auto 0;
    width: 238px;
    line-height: 24px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999;
    text-align: center
}

.applet-list-container li {
    float: left;
    margin: 37px 0;
    padding-top: 100px;
    width: 33.33%;
    height: auto;
    line-height: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center top
}

.live-banner .page-container .sub-button:hover {
    transition: .5s;
    opacity: .9
}

.live-banner .page-container .sub-button {
    position: relative;
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    border-radius: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin-top: 65px;
    transition: .5s;
    letter-spacing: 3px;
    background: white;
    color: #fc5848
}

.live-banner .page-container .sub-title {
    line-height: 24px;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: lighter
}

.live-banner .page-container .title {
    font-size: 44px;
    color: #fff;
    font-weight: lighter;
    position: relative;
    font-weight: bold
}

.live-banner .right-img {
    position: absolute;
    right: 0;
    bottom: 20px
}

.live-banner .page-container {
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative
}

.live-banner {
    width: 100%;
    height: 640px;
    color: #fff;
    background: url(../images/live-banner.png) no-repeat
}

.live-img1 {
    display: block;
    width: 1170px;
    margin: 0 auto;
    margin-top: 50px
}

.product-show.live img {
    position: relative;
    left: 15px
}

.product-show.live div {
    margin-top: 0
}

.live-category li {
    width: 20%;
    height: 175px;
    background: url(../images/live-img-bg.png) no-repeat center;
    float: left;
    background-position-x: 5px;
    margin-bottom: 15px
}

.live-category {
    overflow: hidden
}

.live-category .li1 {
    background-position-y: 0
}

.live-category .li2 {
    background-position-y: -185px
}

.live-category .li3 {
    background-position-y: -370px
}

.live-category .li4 {
    background-position-y: -555px
}

.live-category .li5 {
    background-position-y: -740px
}

.live-category .li6 {
    background-position-y: -925px
}

.live-category .li7 {
    background-position-y: -1110px
}

.live-category .li8 {
    background-position-y: -1295px
}

.live-category .li9 {
    background-position-y: -1480px
}

.live-category .li10 {
    background-position-y: -1665px
}

.citytown-banner .img6 {
    position: absolute;
    top: 740px;
    left: 50%;
    margin-left: -380px
}

.citytown-banner .img5 {
    position: absolute;
    top: 630px;
    left: 50%;
    margin-left: 150px
}

.citytown-banner .img4 {
    position: absolute;
    top: 520px;
    left: 50%;
    margin-left: -310px
}

.citytown-banner .img3 {
    position: absolute;
    top: 410px;
    left: 50%;
    margin-left: 220px
}

.citytown-banner .img2 {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -420px
}

.citytown-banner .img1 {
    display: block;
    margin: 0 auto
}

.citytown-banner .img1 {
    display: block;
    margin: 0 auto
}

.citytown-banner .title {
    font-size: 45px;
    color: white;
    font-weight: bold;
    text-align: center
}

.citytown-banner .sub-title {
    font-size: 25px;
    color: white;
    text-align: center
}

.citytown-banner .btn:hover {
    opacity: .9;
    filter: alpha(opacity=90);
    transition: all .3s
}

.citytown-banner .btn {
    display: block;
    height: 49px;
    padding: 0 32px;
    margin: 20px auto;
    font-size: 24px;
    line-height: 49px;
    color: #fff;
    background: #fc4b69;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 2px;
    width: 130px;
    margin-top: 0
}

.citytown-banner {
    background: url(../images/citytown-banner.png) center top no-repeat;
    height: 1030px;
    width: 100%;
    overflow: hidden
}

.citytown-left.p1 {
    background-image: url(../images/citytown-img3-1.png);
    top: 175px
}

.citytown-left.p2 {
    background-image: url(../images/citytown-img3-2.png);
    top: 175px
}

.citytown-left.p3 {
    background-image: url(../images/citytown-img3-3.png);
    top: 365px
}

.citytown-left.p4 {
    background-image: url(../images/citytown-img3-4.png);
    top: 365px
}

.citytown-left.p5 {
    background-image: url(../images/citytown-img3-5.png);
    top: 615px
}

.citytown-left.p6 {
    background-image: url(../images/citytown-img3-6.png);
    top: 615px
}

.citytown-left .desc {
    font-size: 14px;
    line-height: 30px
}

.citytown-left .title {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: left;
    line-height: 20px
}

.citytown-left {
    width: 360px;
    position: absolute;
    left: 50%;
    margin-left: -590px;
    background: left top no-repeat;
    padding-left: 72px
}

.citytown-left.right {
    margin-left: 170px
}

.citytown-bg1 {
    height: 755px;
    background: url(../images/citytown-img3.png) no-repeat center 100px;
    padding-top: 50px;
    position: relative;
    overflow: hidden
}

.citytown-bg2 {
    background-color: #f5f6f8;
    padding-top: 50px;
    position: relative;
    padding-bottom: 50px
}

.citytown-func li img {
    display: block;
    margin: 0 auto;
    height: 56px
}

.citytown-func li div h4 {
    color: #333;
    font-weight: initial;
    margin-top: 35px
}

.forum-banner .page-container .sub-button:hover {
    transition: .5s;
    opacity: .9
}

.forum-banner .page-container .sub-button {
    position: relative;
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    border-radius: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin-top: 65px;
    transition: .5s;
    letter-spacing: 3px;
    background: white;
    color: #4381fd
}

.forum-banner .page-container .sub-title {
    line-height: 24px;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: lighter
}

.forum-banner .page-container .title {
    font-size: 44px;
    color: #fff;
    font-weight: lighter;
    position: relative;
    font-weight: bold
}

.forum-banner .right-img {
    position: absolute;
    right: 0;
    bottom: 20px
}

.forum-banner .page-container {
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative
}

.forum-banner .mask {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.forum-banner {
    width: 100%;
    height: 550px;
    color: #fff;
    background: url(../images/forum-banner.jpg) no-repeat;
    background-position: center;
    position: relative
}

.forum-func1 li img {
    width: 120px;
    margin: 0 auto;
    display: block
}

.forum-func1 li {
    width: 33.33%
}

.forum-func1 li div h4 {
    font-size: 20px;
    font-weight: initial;
    margin-top: 20px
}

.forum-func2 li img {
    width: 120px;
    margin: 0 auto;
    display: block
}

.forum-func2 li {
    width: 25%
}

.forum-func2 li div h4 {
    font-size: 20px;
    font-weight: initial;
    margin-top: 20px
}

.more-function:hover {
    opacity: .9;
    filter: alpha(opacity=90);
    transition: all .3s;
    font-size: 16px
}

.more-function {
    display: block;
    height: 40px;
    padding: 0 40px;
    margin: 20px auto;
    font-size: 16px;
    line-height: 38px;
    color: #fff;
    background: #38f;
    background: -webkit-linear-gradient(left, #4f98ff, #38f 80%);
    background: -o-linear-gradient(bottom, #4f98ff, #38f 80%);
    background: -moz-linear-gradient(bottom, #4f98ff, #38f 80%);
    background: linear-gradient(to bottom, #4f98ff, #38f 80%);
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 38px;
    width: 100px
}


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

    .applet-list-container,
    .community-map,
    .community-function {
        margin: 0 auto;
        width: 100%;
        height: auto;
        overflow: hidden
    }

    .community-function .function-containner {
        margin-top: 50px;
        width: 100%;
    }

    .applet-list-container li p {
        margin: 10px auto 0;
        width: 90%;
        line-height: 24px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999;
        text-align: center
    }
}