body { padding-top: 80px; background-color: #F4F5F9; }

.wrap { width: 100%; }

.inner { max-width: 1200px; margin: auto; }

.shadow { -webkit-box-shadow: 2px 1px 25px 2px rgba(11, 3, 6, 0.1); box-shadow: 2px 1px 25px 2px rgba(11, 3, 6, 0.1); }
.left { float: left; }

.right { float: right; }

.text-center { text-align: center !important; }

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

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

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

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

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

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

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

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


.center { margin: auto; }


.btn { 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(0deg, rgb(34, 244, 138) 0%, rgb(81, 206, 98) 100%); background-image: -webkit-linear-gradient(0deg, rgb(34, 244, 138) 0%, rgb(81, 206, 98) 100%); background-image: -ms-linear-gradient(0deg, rgb(34, 244, 138) 0%, rgb(81, 206, 98) 100%); margin-top: 65px; transition: 0.5s; margin: auto; margin-top: 30px; letter-spacing: 3px; color: #fff; }

    .btn:hover { color: #fff; transition: 0.5s; opacity: 0.8; }

.btn-border:before { content: " "; display: block; position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; height: 50px; border-radius: 50px; border: 5px solid rgba(0, 0, 0, 0.1); }


.bg-w { background-color: #fff; }
.bg-g { background-color: #F4F5F9 }

.font-yellow { color: #efb104 !important; }

.font-green { color: #46da60 !important; }

.font-blue { color: #0e97ff !important; }

.font-pink { color: #ff4954 !important; }

.font-cyan { color: #00c9b8 !important; }

.font-gray { color: #b5b9bf !important; }



/** header **/

.header { position: fixed; z-index: 1000; background: #fff; top: 0; height: 80px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05); }

    .header .logo { width: 155px; float: left; padding-top: 20px; padding-bottom: 20px; }

        .header .logo img { }

        .header .logo .icon { width: 40px; margin-right: 10px; }

        .header .logo .text { width: 100px; }

    .header .menu { float: right; }

        .header .menu .list { float: left; }

        .header .menu li { float: left; padding-left: 10px; padding-right: 10px; }

        .header .menu > ul > li.item { line-height: 80px; height: 80px; }

        .header .menu li > a { display: inline-block; color: #666666; font-size: 14px; height: 30px; line-height: 30px; padding: 0 12px; border-radius: 30px; transition: 0.6s; }

            .header .menu li > a:hover,
            .header .menu li.hover > a { transition: 0.6s; background-color: #2780FF; color: #fff; }

        .header .menu li i { font-size: 14px; line-height: 20px; }

        .header .menu li { position: relative; }

            .header .menu li .sub-menu { display: none; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1) inset; /* opacity: 0; */ position: absolute; background-color: #fff; left: 0; right: 0; width: 280px; top: 80px; z-index: -99999; transition: 0.3s; line-height: normal; animation: fadeOut .3s; padding-bottom: 9px; border-radius: 0 0 10px 10px; -webkit-animation: fadeOut .3s; }

            .header .menu li.hover .sub-menu { animation: fadeIn .3s; -webkit-animation: fadeIn .3s; display: block; }


        .header .menu .sub-menu a.item { display: block; float: left; width: 100%; box-sizing: border-box; padding: 10px 20px; cursor: pointer; }

        .header .menu .sub-menu .item:hover { background-color: #f8f8f8; }

        .header .menu .sub-menu .item .iconfont { display: inline-block; border-radius: 16px; color: #fff; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 18px; float: left; margin-right: 15px; }

        .header .menu .sub-menu .item.kefu .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(242, 151, 131) 0%, rgb(242, 142, 113) 3%, rgb(242, 132, 94) 11%, rgb(245, 96, 22) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(242, 151, 131) 0%, rgb(242, 142, 113) 3%, rgb(242, 132, 94) 11%, rgb(245, 96, 22) 100%); background-image: -ms-linear-gradient(-35deg, rgb(242, 151, 131) 0%, rgb(242, 142, 113) 3%, rgb(242, 132, 94) 11%, rgb(245, 96, 22) 100%); }

        .header .menu .sub-menu .item.dianpu .iconfont,
        .header .menu .sub-menu .item.yuyue .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -ms-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); }

        .header .menu .sub-menu .item.shancgheng .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); }

        .header .menu .sub-menu .item.zhanshi .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); }

        .header .menu .sub-menu .item.fenxiao .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); background-image: -ms-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); }

        .header .menu .sub-menu .item.pifa .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); }

        .header .menu .sub-menu .item.tuangou .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); background-image: -ms-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); }


        .header .menu .sub-menu .item.tuoguan .iconfont { background-image: -moz-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -ms-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); }


        .header .menu .sub-menu .item b { font-size: 14px; color: #666; line-height: 22px; }

        .header .menu .sub-menu .item p { display: block; color: #999; }

    .header .login { float: right; margin-left: 10px; width: 140px; height: 30px; line-height: 30px; border-radius: 15px; display: flex; font-size: 14px; background-color: #f4f4f4; font-size: 12px; margin-top: 25px; }

        .header .login a { display: inline-block; width: 70px; text-align: center; border-radius: 15px; }

            .header .login a.signin { width: 75px; color: #fff; background-color: #2b7bff; }

            .header .login a.signup { color: #999; }

/* slider */

.slider { width: 100%; height: 480px; overflow: hidden; position: relative; }

    .slider .item { background-position: center }

        .slider .item .text h3.title { margin-top: 40px; font-size: 44px; color: #fff; font-weight: lighter; position: relative; margin-bottom: 25px; }

            .slider .item .text h3.title .icon { font-size: 12px; line-height: 12px; font-style: initial; letter-spacing: 2px; background-image: -moz-linear-gradient(0deg, rgb(93, 200, 255) 0%, rgb(62, 142, 255) 100%); background-image: -webkit-linear-gradient(0deg, rgb(93, 200, 255) 0%, rgb(62, 142, 255) 100%); background-image: -ms-linear-gradient(0deg, rgb(93, 200, 255) 0%, rgb(62, 142, 255) 100%); padding: 5px 8px; border-radius: 30px; font-weight: 200; top: 10px; }

        .slider .item .text p.line { line-height: 24px; font-size: 20px; letter-spacing: 1px; margin-bottom: 20px; color: #fff; font-weight: lighter; }

        .slider .item .text .info { max-width: 600px; line-height: 32px; font-size: 16px; letter-spacing: 1px; margin-bottom: 20px; color: #fff; font-weight: lighter; }

        .slider .item .pic { }


        .slider .item p.tel { color: #fff; letter-spacing: 2px; margin-top: 20px; font-weight: 400; }

    .slider .pagination { position: absolute; text-align: center; left: 0; right: 0; bottom: 15px; height: 15px; }

        .slider .pagination .pagination-inner { background-color: rgba(255, 255, 255, 0.15); padding: 4px 2px; border-radius: 50px; display: inline-block; }

            .slider .pagination .pagination-inner .swiper-pagination-bullet { margin: 0 5px; width: 20px; height: 6px; background-color: #fff; border-radius: 10px; opacity: 1; }

            .slider .pagination .pagination-inner .swiper-pagination-bullet-active { background-color: #2780FF; }

.slider-sub .inner { height: 200px; text-align: center; }

.slider-sub h3 { color: #fff; font-size: 28px; font-weight: lighter; margin-bottom: 5px; }
.slider-sub p.line { color: #fff; line-height: 36px; font-size: 18px; opacity: 0.7; }
.slider-sub p.tel { margin-top: 5px; color: #fff; opacity: 0.7; }


.page-index .slider { height: 480px; }

.page-index .news { position: relative; z-index: 99; background: #fff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); }

    .page-index .news .inner { display: flex; }

    .page-index .news .icon-xiaoxi { display: block; width: 30px; height: 50px; line-height: 50px; font-size: 18px; color: #bbb; }

    .page-index .news .list { width: 1060px; height: 50px; position: relative; margin-left: 0; }

        .page-index .news .list .item { line-height: 50px; width: 320px; margin-right: 50px; float: left; }

            .page-index .news .list .item:last-child { margin-right: 0; }

            .page-index .news .list .item i.iconfont { color: #bad6ff; float: left; }

            .page-index .news .list .item a { color: #666; float: left; height: 50px; }

            .page-index .news .list .item font { float: right; color: #bbb }

    .page-index .news .nav { right: -100px; width: 80px; }

        .page-index .news .nav .nav-prev { display: block; width: 22px; height: 22px; text-align: center; line-height: 23px; margin-top: 14px; width: 30px; float: left; cursor: pointer; outline: none; }

        .page-index .news .nav .nav-next { display: block; width: 22px; height: 22px; text-align: center; line-height: 23px; margin-top: 14px; width: 30px; float: right; cursor: pointer; outline: none; }

        .page-index .news .nav .iconfont { padding: 2px 10px; font-size: 10px; color: #fff; background-color: #ddd; border-radius: 30px; outline: none; transition: .3s; }

            .page-index .news .nav .iconfont:hover { background-color: #4889ff; transition: .3s; opacity: .8; }

/* block1 */

.page-index .way-use { position: relative; z-index: -1; background-color: #fff; }

    .page-index .way-use .inner { min-height: 550px; }

    .page-index .way-use .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .page-index .way-use .pic { float: left; margin-top: 40px; }

    .page-index .way-use .con { float: right; margin-top: 10px; }

        .page-index .way-use .con h3 { margin-top: 40px; font-size: 16px; font-weight: 400; color: #666; letter-spacing: 1px; }

        .page-index .way-use .con p { margin-top: 5px; font-size: 14px; color: #999999; letter-spacing: 1px; }







.page-index .visual { background-color: #f7fcff; background-image: url('/assets/img/block-2-bg.jpg'); background-position: center }

    .page-index .visual .inner { min-height: 670px; position: relative; }

    .page-index .visual .title { font-size: 30px; color: #08a0ff; font-weight: lighter; text-align: center; letter-spacing: 4px; padding-top: 55px; }

    .page-index .visual .introduce { margin-top: 30px; text-align: center; font-size: 16px; color: #50bcff; letter-spacing: 2px; }

    .page-index .visual .macbook { position: absolute; left: 50%; margin-left: -210px; top: 290px; z-index: 50; }

    .page-index .visual .components { position: absolute; top: 215px; left: 216px; z-index: 100; }

    .page-index .visual .set { position: absolute; top: 215px; right: 203px; z-index: 100; }

    .page-index .visual .bubble { position: absolute; top: 210px; }

        .page-index .visual .bubble .item { width: 145px; height: 36px; line-height: 36px; text-align: center; background-color: #08a0ff; color: #fff; border-radius: 30px; font-size: 14px; position: relative; z-index: 10; }

            .page-index .visual .bubble .item:nth-child(1) { margin-top: 40px; }

            .page-index .visual .bubble .item:nth-child(2) { margin-top: 40px; margin-bottom: 140px; }

            .page-index .visual .bubble .item::after { content: " "; display: block; width: 20px; height: 20px; background-color: #08a0ff; transform: rotate(45deg); position: absolute; top: 8; z-index: 9; }

    .page-index .visual .left-bubble { left: 0; }

        .page-index .visual .left-bubble .item::after { right: -1; }

    .page-index .visual .right-bubble { right: 0; }

        .page-index .visual .right-bubble .item::after { left: -1; }

/* theme */

.page-index .theme { background-color: #f5f7fa; }

    .page-index .theme .inner h2.title { text-align: center; padding-top: 60px; padding-bottom: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .page-index .theme .inner h2.title { }

    .page-index .theme .inner .item { width: 220px; height: 400px; margin-bottom: 40px; float: left; border-radius: 3px; margin-left: 10px; margin-right: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.05); overflow: hidden; position: relative; }

        .page-index .theme .inner .item .preview { width: 100%; }

        .page-index .theme .inner .item .mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(43, 123, 255, 0.95); text-align: center; transition: .8s; opacity: 0; }

            .page-index .theme .inner .item .mask:hover { opacity: .8; transition: .8s; }

            .page-index .theme .inner .item .mask img { display: inline-block; width: 80px; height: 80px; margin-top: 60%; border-radius: 3px; }

            .page-index .theme .inner .item .mask p { color: #fff; margin-top: 30px; font-size: 14px; letter-spacing: 2px; }

/* marketing */

.marketing { background-color: #fff; }

    .marketing .inner { min-height: 580px; }

    .marketing .title { padding-top: 40px; padding-bottom: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; text-align: center; }

    .marketing .introduce { text-align: center; line-height: 30px; margin-bottom: 30px; }

        .marketing .introduce i { font-size: 18px; color: #55cf65; vertical-align: middle; }

        .marketing .introduce span { margin: 0 30px; color: #999; font-size: 14px; vertical-align: middle; }

    .marketing .con img { display: block; margin: auto; }

/* industry */

.industry h2.title { text-align: center; padding-top: 70px; padding-bottom: 70px; font-size: 32px; font-weight: lighter; color: #666; letter-spacing: 2px; }

.industry .con .item { float: left; text-align: center; margin-right: 60px; margin-bottom: 60px; }

    .industry .con .item p { line-height: 30px; letter-spacing: 1px; color: #666; margin-top: 10px; }

    .industry .con .item:nth-child(9n+0) { margin-right: 0; }

/* create-shop */

.create-shop { background-image: url('/assets/img/create-shop.png') }

    .create-shop h2.title { text-align: center; padding-top: 60px; padding-bottom: 20px; font-size: 32px; font-weight: lighter; color: #fff; letter-spacing: 2px; }

    .create-shop .inner { min-height: 280px; }

    .create-shop .introduce { text-align: center; color: #fff; font-size: 14px; letter-spacing: 2px; }



.crumbs { height: 25px; padding: 20px 0; line-height: 25px; }

    .crumbs a.home { color: #999 }

    .crumbs a { display: block; float: left; color: #666; }

    .crumbs a { color: #999; }

    .crumbs font { color: #333; }

    .crumbs .icon-pin { display: block; float: left; color: #4381fd; font-size: 14px; margin-right: 8px; }

    .crumbs span { float: left; color: #ddd; }

    .crumbs .icon-arrowright { display: block; float: left; color: #ddd; margin: 0 10px; line-height: 25px; }

.sidebar { background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(4, 0, 0, 0.05); width: 220px; float: left; }

    .sidebar .title { border-bottom: 1px solid #f8f8f8; height: 70px; line-height: 70px; padding: 0 25px; }

        .sidebar .title .iconfont { color: #4381fd; }

        .sidebar .title .name { padding-left: 10px; font-size: 16px; color: #333333; }

    .sidebar .list ul li { margin-bottom: 5px; }

        .sidebar .list ul li a { display: block; color: #999999; text-indent: 35px; height: 50px; line-height: 50px; font-size: 14px; transition: 0.3s; }

            .sidebar .list ul li a:hover,
            .sidebar .list ul li.active a { background-color: #f4f5f9; color: #666; transition: 0.3s; }

.page-list .content { margin-bottom: 20px; }

    .page-list .content .article-list { width: 960px; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(4, 0, 0, 0.05); float: right; }

        .page-list .content .article-list .title { border-bottom: 1px solid #f8f8f8; height: 70px; line-height: 70px; padding: 0 40px; letter-spacing: 2px; }

            .page-list .content .article-list .title .name { font-size: 20px; color: #666666; }

        .page-list .content .article-list .list { padding-top: 10px; margin-bottom: 30px; }

            .page-list .content .article-list .list li { padding: 0 40px; height: 55px; line-height: 55px; }

                .page-list .content .article-list .list li:hover { background-color: #fbfcff }

                .page-list .content .article-list .list li a { color: #666; font-size: 14px; float: left; }

                .page-list .content .article-list .list li:hover a { color: #08a0ff; }

                .page-list .content .article-list .list li font { font-size: 12px; float: right; color: #999 }

        .page-list .content .article-list .navigation { float: right; margin-bottom: 30px; margin-right: 30px; }

            .page-list .content .article-list .navigation div { float: left; height: 25px; line-height: 25px; padding: 0 10px; margin-right: 10px; border-radius: 3px; color: #bbb; padding: 0 15px; background-color: #F4F5F9; }

                .page-list .content .article-list .navigation div:hover,
                .page-list .content .article-list .navigation div.active { color: #fff; background-color: #4381fd; cursor: pointer; transition: 0.3s; }

        .page-list .content .article-list .list-img .item { padding: 20px 35px; display: flex; }

            .page-list .content .article-list .list-img .item .pic { float: left; margin-right: 20px; }

            .page-list .content .article-list .list-img .item .info { float: left; width: 80%; }

                .page-list .content .article-list .list-img .item .info .tit { font-size: 16px; color: #333; }

                .page-list .content .article-list .list-img .item .info .date { color: #999; width: 100%; margin-top: 10px; margin-bottom: 20px; }

                .page-list .content .article-list .list-img .item .info .intro { color: #666; line-height: 22px; margin-top: 0px; padding: 0px; font-size: 12px; text-align: left; letter-spacing: 0px; }

            .page-list .content .article-list .list-img .item:hover { background-color: #fbfcff }

                .page-list .content .article-list .list-img .item:hover a { color: #08a0ff !important }

.page-list-full .content .article-list { width: 100%; }

.page-detail .content { margin-bottom: 20px; }

    .page-detail .content .right { width: 960px; float: right; }

    .page-detail .content .article-detail { width: 960px; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(4, 0, 0, 0.05); float: left; }

        .page-detail .content .article-detail .title { border-bottom: 1px solid #f8f8f8; height: 70px; line-height: 70px; padding: 0 40px; letter-spacing: 2px; text-align: center; }

            .page-detail .content .article-detail .title font { color: #666; font-size: 18px; }

        .page-detail .content .article-detail .detail { font-size: 14px; padding: 35px; line-height: 26px; }

            .page-detail .content .article-detail .detail p { margin-bottom: 20px; }

            .page-detail .content .article-detail .detail .info { height: 30px; margin-bottom: 20px; }

                .page-detail .content .article-detail .detail .info .time { float: left; color: #999; font-size: 12px; }

                .page-detail .content .article-detail .detail .info .share { float: right; width: 205px; }

                    .page-detail .content .article-detail .detail .info .share a { float: left; font-size: 12px; color: #999; }

    .page-detail .content .relevant { float: left; margin-top: 25px; width: 960px; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(4, 0, 0, 0.05); }

        .page-detail .content .relevant .title { border-bottom: 1px solid #f8f8f8; height: 70px; line-height: 70px; padding: 0 30px; letter-spacing: 2px; font-size: 18px; }

        .page-detail .content .relevant .list { padding: 15px 0; }

            .page-detail .content .relevant .list li { float: left; width: 33.33%; text-indent: 30px; line-height: 40px; }

                .page-detail .content .relevant .list li a { font-size: 12px; }

.page-detail-full .content .article-detail { width: 100%; }

.page-detail-full .content .relevant { width: 100%; }

/* page-help */

.page-help .search { background: url('/assets/img/help-search-bg.jpg') center }

    .page-help .search .inner { height: 300px; }

    .page-help .search .title { text-align: center; font-size: 42px; font-weight: lighter; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; margin-bottom: 30px; color: #fff; padding-top: 50px; }

.page-help .search-box { width: 510px; background-color: rgba(255, 255, 255, 0.1); padding: 4px 9px; border-radius: 30px; margin: auto; }

.page-help .search .input { font-size: 14px; height: 46px; color: #999; letter-spacing: 1px; border-radius: 30px; background: #fff; display: flex; margin-left: -5px; }

    .page-help .search .input input { width: 100%; text-indent: 20px; border-radius: 30px; letter-spacing: 1px; font-size: 14px; line-height: 20px; color: #666; }

        .page-help .search .input input::-webkit-input-placeholder { /* WebKit browsers */ color: #999; }

.page-help .search .go { width: 100px; min-width: 100px; height: 100%; line-height: 46px; background-image: -moz-linear-gradient(0deg, rgb(0, 174, 255) 0%, rgb(43, 123, 255) 100%); background-image: -webkit-linear-gradient(0deg, rgb(0, 174, 255) 0%, rgb(43, 123, 255) 100%); background-image: -ms-linear-gradient(0deg, rgb(0, 174, 255) 0%, rgb(43, 123, 255) 100%); border-radius: 30px; color: #fff; position: relative; right: -5px; cursor: pointer; text-align: center; }

.page-help .search .keywords { font-size: 12px; margin: auto; margin-top: 15px; padding: 0 10px; width: 510px; margin-bottom: 50px; }

    .page-help .search .keywords a { margin-right: 10px; opacity: .4; transition: .6s; color: #fff; }

        .page-help .search .keywords a:hover { opacity: 1; transition: .6s; }

.page-help .hot-ask { background-color: #fff; }

    .page-help .hot-ask .inner { padding-top: 30px; padding-bottom: 30px; }

        .page-help .hot-ask .inner .title { font-size: 24px; font-weight: lighter; letter-spacing: 2px; color: #666; }

        .page-help .hot-ask .inner .ask-list { margin-top: 35px; margin-bottom: 70px }

        .page-help .hot-ask .inner .list { margin-top: 30px; }

            .page-help .hot-ask .inner .list .item { float: left; text-align: center; margin-right: 60px; }

                .page-help .hot-ask .inner .list .item:last-child { margin-right: 0; }

                .page-help .hot-ask .inner .list .item img { width: 50px; height: 50px; }

                .page-help .hot-ask .inner .list .item p { line-height: 30px; color: #999; font-size: 12px; margin-top: 5px; }

.page-help .document .inner { padding-bottom: 60px; padding-top: 20px; }

.page-help .document .item { background-color: #fff; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.08); width: 285px; margin-top: 30px; border-radius: 3px; float: left; margin-right: 20px; }

    .page-help .document .item:nth-child(4n+0) { margin-right: 0; }

    .page-help .document .item h3.title { height: 60px; line-height: 60px; font-size: 16px; font-weight: lighter; color: #666; text-indent: 50px; border-bottom: 1px solid #f8f8f8; position: relative; letter-spacing: 2px; }

        .page-help .document .item h3.title::before { content: " "; display: block; position: absolute; width: 3px; height: 16px; border-radius: 20px; top: 23px; left: 34px; }

    .page-help .document .item:nth-child(1) h3.title::before { background: #ffc541; }

    .page-help .document .item:nth-child(2) h3.title::before { background: #0d9fff; }

    .page-help .document .item:nth-child(3) h3.title::before { background: #FF5356; }

    .page-help .document .item:nth-child(4) h3.title::before { background: #6A3DFD; }

    .page-help .document .item:nth-child(5) h3.title::before { background: #3ECB79; }

    .page-help .document .item:nth-child(6) h3.title::before { background: #6146F3; }

    .page-help .document .item:nth-child(7) h3.title::before { background: #FA8638; }

    .page-help .document .item:nth-child(8) h3.title::before { background: #A351E7; }

    .page-help .document .item:nth-child(9) h3.title::before { background: #EF451B; }

    .page-help .document .item:nth-child(10) h3.title::before { background: #F5631B; }

    .page-help .document .item:nth-child(11) h3.title::before { background: #E75151; }

    .page-help .document .item:nth-child(12) h3.title::before { background: #3679F9; }

    .page-help .document .item ul { padding: 10px 0; }

    .page-help .document .item li { line-height: 40px; text-indent: 30px; }

        .page-help .document .item li a { font-size: 14px; color: #08a0ff; }

.page-help .document .more { width: 100%; height: 50px; line-height: 50px; display: block; text-align: center; font-size: 12px; color: #999; letter-spacing: 2px; transition: 0.6s; border-top: 1px solid #F8FAFF; }

    .page-help .document .more:hover { color: #08a0ff; background-color: #F8FAFF; transition: 0.6s; }

.page-weapp .slider { height: 400px; }

    .page-weapp .slider .inner { height: 400px; }

.page-weapp .dividend { background-color: #fff; }

    .page-weapp .dividend .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .page-weapp .dividend .intro { margin-top: 30px; text-align: center; font-size: 16px; color: #999; letter-spacing: 2px; }

    .page-weapp .dividend .item { text-align: center; float: left; margin-right: 120px; }

        .page-weapp .dividend .item:last-child { margin-right: 0; }

    .page-weapp .dividend .item { margin-bottom: 80px; margin-top: 80px; line-height: 30px; font-size: 18px; font-weight: lighter; color: #666; text-align: center; }

        .page-weapp .dividend .item h4 { font-weight: lighter; margin-top: 20px; }

        .page-weapp .dividend .item i { display: inline-block; width: 80px; height: 80px; border-radius: 50px; background-color: #fff; box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.08); font-size: 28px; line-height: 80px; }

        .page-weapp .dividend .item:nth-child(1) i { color: #3c77e8; }

        .page-weapp .dividend .item:nth-child(2) i { color: #FF436F; }

        .page-weapp .dividend .item:nth-child(3) i { color: #4DDEB5; }

        .page-weapp .dividend .item:nth-child(4) i { color: #B649FF; }

        .page-weapp .dividend .item:nth-child(5) i { color: #FCCD4E; }

        .page-weapp .dividend .item:nth-child(6) i { color: #35B712; }

.page-weapp .tools .title { text-align: center; padding-top: 60px; padding-bottom: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.page-weapp .tools { background-color: #F5F7FA; }

    .page-weapp .tools .inner { height: 500px; }

        .page-weapp .tools .inner .item { float: left; width: 280px; height: 260px; margin-right: 26px; position: relative; background-color: #fff; box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.08); position: relative; top: 0; transition: all .5s; }

            .page-weapp .tools .inner .item:hover { top: -8px; transition: all .5s; }

            .page-weapp .tools .inner .item i { font-size: 48px; color: #fff; position: absolute; z-index: 9; width: 280px; height: 170px; line-height: 170px; text-align: center; opacity: .8; }

            .page-weapp .tools .inner .item .mask { background-color: rgb(69, 79, 255); opacity: 0.9; position: absolute; left: 0; top: 0; width: 280px; height: 170px; z-index: 5; }

            .page-weapp .tools .inner .item .mask { }

            .page-weapp .tools .inner .item:last-child { margin-right: 0; }

            .page-weapp .tools .inner .item .info { padding: 20px; }

                .page-weapp .tools .inner .item .info h4 { font-size: 18px; font-weight: lighter; color: #333; letter-spacing: 1px; }

                .page-weapp .tools .inner .item .info p { margin-top: 5px; font-size: 14px; color: #999; letter-spacing: 1px; }

.page-weapp .characteristic { background: #f8fcff; }

    .page-weapp .characteristic .title { text-align: center; padding-top: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .page-weapp .characteristic .intro { margin-top: 30px; text-align: center; font-size: 16px; color: #999; letter-spacing: 2px; }

    .page-weapp .characteristic .list { padding-top: 60px; }

    .page-weapp .characteristic .item { width: 200px; height: 86px; padding-left: 60px; margin-right: 50px; position: relative; float: left; margin-bottom: 60px; margin-top: 10px; }

        .page-weapp .characteristic .item:nth-child(4n+0) { margin-right: 0; }

        .page-weapp .characteristic .item i { display: inline-block; position: absolute; left: 0; width: 86px; height: 86px; text-align: center; line-height: 86px; border-radius: 80px; font-size: 30px; color: #fff; }

        .page-weapp .characteristic .item:nth-child(1) i { background-image: -moz-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); }

        .page-weapp .characteristic .item:nth-child(2) i { background-image: -moz-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); background-image: -ms-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); }

        .page-weapp .characteristic .item:nth-child(3) i { background-image: -moz-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); }

        .page-weapp .characteristic .item:nth-child(4) i { background-image: -moz-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); }

        .page-weapp .characteristic .item:nth-child(5) i { background-image: -moz-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -ms-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); }

        .page-weapp .characteristic .item:nth-child(6) i { background-image: -moz-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); background-image: -ms-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); }

        .page-weapp .characteristic .item:nth-child(7) i { background-image: -moz-linear-gradient(-35deg, rgb(253, 183, 111) 0%, rgb(253, 183, 111) 20%, rgb(249, 126, 47) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(253, 183, 111) 0%, rgb(253, 183, 111) 20%, rgb(249, 126, 47) 100%); background-image: -ms-linear-gradient(-35deg, rgb(253, 183, 111) 0%, rgb(253, 183, 111) 20%, rgb(249, 126, 47) 100%); }

        .page-weapp .characteristic .item:nth-child(8) i { background-image: -moz-linear-gradient(-35deg, rgb(200, 133, 248) 0%, rgb(200, 133, 248) 20%, rgb(159, 75, 229) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(200, 133, 248) 0%, rgb(200, 133, 248) 20%, rgb(159, 75, 229) 100%); background-image: -ms-linear-gradient(-35deg, rgb(200, 133, 248) 0%, rgb(200, 133, 248) 20%, rgb(159, 75, 229) 100%); }

        .page-weapp .characteristic .item i::before { opacity: 0.8; }

        .page-weapp .characteristic .item .info { padding-left: 40px; background-color: #fff; float: left; margin-top: 6px; height: 70px; width: 160px; border-radius: 6px; box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.08); }

            .page-weapp .characteristic .item .info h4 { font-size: 14px; margin-top: 13px; margin-bottom: 5px; letter-spacing: 1px; }

            .page-weapp .characteristic .item .info p { color: #999; letter-spacing: 1px; }

    .page-weapp .characteristic .create-shop-btn { width: 180px; height: 40px; color: #fff; background-color: #08a0ff; display: block; margin: auto; text-align: center; line-height: 40px; font-size: 16px; letter-spacing: 1px; border-radius: 100px; margin-bottom: 40px; }

        .page-weapp .characteristic .create-shop-btn:hover { opacity: .9; }

.page-weapp .technology { background-color: #fff }

    .page-weapp .technology .inner { height: 500px; }

    .page-weapp .technology .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; margin-bottom: 30px; }

    .page-weapp .technology .intro { font-size: 20px; font-weight: lighter; text-align: center; margin-bottom: 80px; margin-top: 20px; color: #666; letter-spacing: 2px; }

    .page-weapp .technology .item { width: 120px; float: left; margin-right: 140px; text-align: center; }

        .page-weapp .technology .item:last-child { margin-right: 0; }

        .page-weapp .technology .item h4 { font-size: 16px; font-weight: normal; margin-top: 25px; color: #666; letter-spacing: 1px; }

        .page-weapp .technology .item .icon { width: 120px; height: 120px; line-height: 120px; text-align: center; background-color: #f8fcff; border-radius: 100px; }

            .page-weapp .technology .item .icon img { display: inline; margin-top: 38px; }

.page-weapp .theme { }

    .page-weapp .theme .title { text-align: center; padding-top: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; margin-bottom: 40px; }

    .page-weapp .theme .intro { font-size: 20px; font-weight: lighter; text-align: center; margin-bottom: 40px; margin-top: 30px; color: #666; letter-spacing: 2px; }

    .page-weapp .theme .inner .item { width: 220px; height: 400px; margin-bottom: 40px; float: left; border-radius: 3px; margin-left: 10px; margin-right: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.05); overflow: hidden; position: relative; }

        .page-weapp .theme .inner .item .preview { width: 100%; }

        .page-weapp .theme .inner .item .mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(43, 123, 255, 0.95); text-align: center; transition: .8s; opacity: 0; }

            .page-weapp .theme .inner .item .mask:hover { opacity: .8; transition: .8s; }

            .page-weapp .theme .inner .item .mask img { display: inline-block; width: 80px; height: 80px; margin-top: 60%; border-radius: 3px; }

            .page-weapp .theme .inner .item .mask p { color: #fff; margin-top: 30px; font-size: 14px; letter-spacing: 2px; }

/* shop */

.page-shop .slider { height: 400px; }

    .page-shop .slider .inner { height: 400px; position: relative; }

.page-shop .advantage { background-color: #fff; }

    .page-shop .advantage .inner { height: 460px; }

    .page-shop .advantage .title { text-align: center; padding-top: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; margin-bottom: 40px; }

    .page-shop .advantage .list { margin-top: 90px; }

        .page-shop .advantage .list .item { float: left; margin-right: 150px; text-align: center; }

            .page-shop .advantage .list .item h4 { font-weight: lighter; font-size: 18px; margin-top: 20px; margin-bottom: 10px; }

            .page-shop .advantage .list .item p { font-size: 14px; line-height: 24px; color: #999; }

            .page-shop .advantage .list .item:last-child { margin-right: 0; }

.page-shop .channel { background-color: #f8fcff; margin: auto; text-align: center; }

    .page-shop .channel .inner { height: 660px; }

    .page-shop .channel .title { text-align: center; padding-top: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; margin-bottom: 40px; }

    .page-shop .channel .intro { font-size: 20px; font-weight: lighter; text-align: center; margin-bottom: 40px; margin-top: 30px; color: #666; letter-spacing: 2px; }

.page-shop .channel { }


.page-shop { background-color: #fff; }

.search-result .search-info { width: 100%; border-radius: 4px; background-color: #fff; height: 50px; line-height: 50px; text-indent: 20px; margin-bottom: 15px; font-size: 14px; color: #666; box-shadow: 0px 2px 4px 0px rgba(4, 0, 0, 0.05); }
    .search-result .search-info b { font-weight: normal; color: #999; }
    .search-result .search-info font b { margin: 0 10px; color: #08a0ff; }




/* page-price */
.page-price .banner .inner { padding: 20px 0; }

.page-price .edition { background-color: #fff; }
    .page-price .edition .inner { padding-top: 20px; padding-bottom: 40px; }

    .page-price .edition .item { width: 240px; height: 480px; border-radius: 6px; overflow: hidden; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08); background-color: #fff; float: left; margin-right: 80px; }

        .page-price .edition .item:nth-child(4n + 0) { margin-right: 0; }

        .page-price .edition .item .banner { text-align: center; padding-top: 30px; padding-bottom: 20px; letter-spacing: 1px; }

            .page-price .edition .item .banner h3 { font-size: 16px; color: #fff; font-weight: normal; padding-top: 20px; padding-bottom: 10px; }

            .page-price .edition .item .banner p { color: #fff; }

        .page-price .edition .item .list { margin-bottom: 20px; margin-top: 20px; height: 190px; }

            .page-price .edition .item .list p { font-size: 14px; color: #333; text-indent: 35px; line-height: 40px; }

                .page-price .edition .item .list p i { color: #37DA80; margin-right: 5px; }

        .page-price .edition .item a.price-btn { display: block; width: 140px; height: 35px; line-height: 35px; text-align: center; color: #fff; font-size: 14px; letter-spacing: 2px; border-radius: 30px; margin: auto; }
            .page-price .edition .item a.price-btn:hover { opacity: .8; }

        .page-price .edition .item.h5 .banner,
        .page-price .edition .item.h5 .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); background-image: -ms-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); }


        .page-price .edition .item.weapp .banner,
        .page-price .edition .item.weapp .price-btn { background-image: -moz-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); background-image: -webkit-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); background-image: -ms-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); }

        .page-price .edition .item.app .banner,
        .page-price .edition .item.app .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); background-image: -ms-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); }

        .page-price .edition .item.design .banner,
        .page-price .edition .item.design .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(247,91,110) 0%, rgb(251,187,113) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(247,91,110) 0%, rgb(251,187,113) 100%); background-image: -ms-linear-gradient( 45deg, rgb(247,91,110) 0%, rgb(251,187,113) 100%); }

.page-price .fun { background-color: #F5F7FA; }

    .page-price .fun .inner { padding: 60px 0; }

    .page-price .fun .table { background-color: #fff; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08); }
    .page-price .fun .thead { display: flex; border-bottom: 1px solid #f8f8f8; }

        .page-price .fun .thead .cell { height: 120px; width: 280px; text-align: center; border-left: 1px solid #f8f8f8; }
        .page-price .fun .thead .division { width: 360px; font-size: 14px; color: #333; position: relative; }
            .page-price .fun .thead .division::after { content: " "; width: 100px; height: 1px; background-color: #f8f8f8; position: absolute; left: 125px; top: 60px; transform: rotate(25deg); }
            .page-price .fun .thead .division .y { position: absolute; left: 120px; top: 70px; }

            .page-price .fun .thead .division .x { position: absolute; left: 200px; top: 30px; }


    .page-price .fun .tbody { display: flex; }
        .page-price .fun .tbody .verison { min-width: 100px; line-height: 100%; text-align: center; font-size: 14px; color: #666; border-bottom: 1px solid #f8f8f8; }

            .page-price .fun .tbody .verison font { position: relative; top: 50%; transform: translateY(-50%); }

        .page-price .fun .tbody .list { display: flex; width: 100%; flex-wrap: wrap }

            .page-price .fun .tbody .list .row { width: 100%; display: flex; }

                .page-price .fun .tbody .list .row .cell { width: 280px; text-align: center; height: 60px; line-height: 60px; border-left: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; font-size: 14px; }

                .page-price .fun .tbody .list .row .name { width: 259px; }


                .page-price .fun .tbody .list .row .cell .icon-dui { font-size: 18px; color: #35cf88; }

                .page-price .fun .tbody .list .row .cell .icon-heng { font-size: 18px; color: #b6c3d5; }


    .page-price .fun .thead .cell h4 { font-weight: normal; letter-spacing: 1px; color: #333; font-size: 16px; margin-top: 30px; margin-bottom: 20px; }

    .page-price .fun .thead .cell .price-btn { display: inline-block; width: 120px; height: 30px; line-height: 30px; border-radius: 30px; font-size: 12px; color: #fff; letter-spacing: 1px; }
        .page-price .fun .thead .cell .price-btn:hover { opacity: .8; }


    .page-price .fun .thead .cell.h5 .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); background-image: -ms-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); }


    .page-price .fun .thead .cell.weapp .price-btn { background-image: -moz-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); background-image: -webkit-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); background-image: -ms-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); }

    .page-price .fun .thead .cell.app .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); background-image: -ms-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); }


/* .page-shop .slider .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(26, 40, 131, 0.7);
    z-index: -10;
}
.page-shop .slider .video {
    top: -50%;
    position: absolute;
    width: 100%;
    z-index: -20;
} */








/* h5 */
.page-h5 .slider { height: 400px; }

    .page-h5 .slider .inner { height: 400px; }

.page-h5 .visual { background-color: #f7fcff; background-image: url('/assets/img/block-2-bg.jpg'); background-position: center }

    .page-h5 .visual .inner { min-height: 670px; position: relative; }

    .page-h5 .visual .title { font-size: 30px; color: #08a0ff; font-weight: lighter; text-align: center; letter-spacing: 4px; padding-top: 55px; }

    .page-h5 .visual .introduce { margin-top: 30px; text-align: center; font-size: 16px; color: #50bcff; letter-spacing: 2px; }

    .page-h5 .visual .macbook { position: absolute; left: 50%; margin-left: -210px; top: 290px; z-index: 50; }

    .page-h5 .visual .components { position: absolute; top: 215px; left: 216px; z-index: 100; }

    .page-h5 .visual .set { position: absolute; top: 215px; right: 203px; z-index: 100; }

    .page-h5 .visual .bubble { position: absolute; top: 210px; }

        .page-h5 .visual .bubble .item { width: 145px; height: 36px; line-height: 36px; text-align: center; background-color: #08a0ff; color: #fff; border-radius: 30px; font-size: 14px; position: relative; z-index: 10; }

            .page-h5 .visual .bubble .item:nth-child(1) { margin-top: 40px; }

            .page-h5 .visual .bubble .item:nth-child(2) { margin-top: 40px; margin-bottom: 140px; }

            .page-h5 .visual .bubble .item::after { content: " "; display: block; width: 20px; height: 20px; background-color: #08a0ff; transform: rotate(45deg); position: absolute; top: 8; z-index: 9; }

    .page-h5 .visual .left-bubble { left: 0; }

        .page-h5 .visual .left-bubble .item::after { right: -1; }

    .page-h5 .visual .right-bubble { right: 0; }

        .page-h5 .visual .right-bubble .item::after { left: -1; }

.page-h5 .characteristic { background: #f8fcff; }

    .page-h5 .characteristic .title { text-align: center; padding-top: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .page-h5 .characteristic .intro { margin-top: 30px; text-align: center; font-size: 16px; color: #999; letter-spacing: 2px; }

    .page-h5 .characteristic .list { padding-top: 60px; }

    .page-h5 .characteristic .item { width: 200px; height: 86px; padding-left: 60px; margin-right: 50px; position: relative; float: left; margin-bottom: 60px; margin-top: 10px; }

        .page-h5 .characteristic .item:nth-child(4n+0) { margin-right: 0; }

        .page-h5 .characteristic .item i { display: inline-block; position: absolute; left: 0; width: 86px; height: 86px; text-align: center; line-height: 86px; border-radius: 80px; font-size: 30px; color: #fff; }

        .page-h5 .characteristic .item:nth-child(1) i { background-image: -moz-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 197, 65) 0%, rgb(255, 197, 65) 20%, rgb(255, 185, 29) 100%); }

        .page-h5 .characteristic .item:nth-child(2) i { background-image: -moz-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); background-image: -ms-linear-gradient(-35deg, rgb(71, 143, 255) 0%, rgb(71, 143, 255) 20%, rgb(51, 117, 248) 100%); }

        .page-h5 .characteristic .item:nth-child(3) i { background-image: -moz-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 101, 105) 0%, rgb(255, 101, 105) 20%, rgb(255, 83, 86) 100%); }

        .page-h5 .characteristic .item:nth-child(4) i { background-image: -moz-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); background-image: -ms-linear-gradient(-35deg, rgb(255, 117, 83) 0%, rgb(255, 117, 83) 20%, rgb(237, 63, 20) 100%); }

        .page-h5 .characteristic .item:nth-child(5) i { background-image: -moz-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); background-image: -ms-linear-gradient(-35deg, rgb(114, 237, 166) 0%, rgb(114, 237, 166) 20%, rgb(52, 197, 113) 100%); }

        .page-h5 .characteristic .item:nth-child(6) i { background-image: -moz-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); background-image: -ms-linear-gradient(-35deg, rgb(138, 111, 250) 0%, rgb(138, 111, 250) 20%, rgb(92, 65, 242) 100%); }

        .page-h5 .characteristic .item:nth-child(7) i { background-image: -moz-linear-gradient(-35deg, rgb(253, 183, 111) 0%, rgb(253, 183, 111) 20%, rgb(249, 126, 47) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(253, 183, 111) 0%, rgb(253, 183, 111) 20%, rgb(249, 126, 47) 100%); background-image: -ms-linear-gradient(-35deg, rgb(253, 183, 111) 0%, rgb(253, 183, 111) 20%, rgb(249, 126, 47) 100%); }

        .page-h5 .characteristic .item:nth-child(8) i { background-image: -moz-linear-gradient(-35deg, rgb(200, 133, 248) 0%, rgb(200, 133, 248) 20%, rgb(159, 75, 229) 100%); background-image: -webkit-linear-gradient(-35deg, rgb(200, 133, 248) 0%, rgb(200, 133, 248) 20%, rgb(159, 75, 229) 100%); background-image: -ms-linear-gradient(-35deg, rgb(200, 133, 248) 0%, rgb(200, 133, 248) 20%, rgb(159, 75, 229) 100%); }

        .page-h5 .characteristic .item i::before { opacity: 0.8; }

        .page-h5 .characteristic .item .info { padding-left: 40px; background-color: #fff; float: left; margin-top: 6px; height: 70px; width: 160px; border-radius: 6px; box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.08); }

            .page-h5 .characteristic .item .info h4 { font-size: 14px; margin-top: 13px; margin-bottom: 5px; letter-spacing: 1px; }

            .page-h5 .characteristic .item .info p { color: #999; letter-spacing: 1px; }

    .page-h5 .characteristic .create-shop-btn { width: 180px; height: 40px; color: #fff; background-color: #08a0ff; display: block; margin: auto; text-align: center; line-height: 40px; font-size: 16px; letter-spacing: 1px; border-radius: 100px; margin-bottom: 40px; }

        .page-h5 .characteristic .create-shop-btn:hover { opacity: .9; }

.page-h5 .technology { background-color: #fff }

    .page-h5 .technology .inner { height: 500px; }

    .page-h5 .technology .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; margin-bottom: 30px; }

    .page-h5 .technology .intro { font-size: 20px; font-weight: lighter; text-align: center; margin-bottom: 80px; margin-top: 20px; color: #666; letter-spacing: 2px; }

    .page-h5 .technology .item { width: 120px; float: left; margin-right: 140px; text-align: center; }

        .page-h5 .technology .item:last-child { margin-right: 0; }

        .page-h5 .technology .item h4 { font-size: 16px; font-weight: normal; margin-top: 25px; color: #666; letter-spacing: 1px; }

        .page-h5 .technology .item .icon { width: 120px; height: 120px; line-height: 120px; text-align: center; background-color: #f8fcff; border-radius: 100px; }

            .page-h5 .technology .item .icon img { display: inline; margin-top: 38px; }


.page-h5 .theme { }

    .page-h5 .theme .title { text-align: center; padding-top: 40px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; margin-bottom: 40px; }

    .page-h5 .theme .intro { font-size: 20px; font-weight: lighter; text-align: center; margin-bottom: 40px; margin-top: 30px; color: #666; letter-spacing: 2px; }

    .page-h5 .theme .inner .item { width: 220px; height: 400px; margin-bottom: 40px; float: left; border-radius: 3px; margin-left: 10px; margin-right: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.05); overflow: hidden; position: relative; }

        .page-h5 .theme .inner .item .preview { width: 100%; }

        .page-h5 .theme .inner .item .mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(43, 123, 255, 0.95); text-align: center; transition: .8s; opacity: 0; }

            .page-h5 .theme .inner .item .mask:hover { opacity: .8; transition: .8s; }

            .page-h5 .theme .inner .item .mask img { display: inline-block; width: 80px; height: 80px; margin-top: 60%; border-radius: 3px; }

            .page-h5 .theme .inner .item .mask p { color: #fff; margin-top: 30px; font-size: 14px; letter-spacing: 2px; }


/* footer */

.footer { background-color: #fff; border-bottom: 3px solid #f8faff; }

    .footer .inner { min-height: 270px; }

    .footer .logo { float: left; padding-top: 20px; padding-bottom: 20px; }

        .footer .logo img { }

        .footer .logo .icon { width: 40px; margin-right: 10px; }

        .footer .logo .text { width: 100px; }

    .footer .logo { margin-top: 20px; }

        .footer .logo font { color: #999; font-size: 14px; float: right; margin-left: 20px; margin-top: 10px; letter-spacing: 2px; }

    .footer .partner img { margin-right: 35px }

    .footer .partner img { margin-top: 20px; }

    .footer .record { margin-top: 50px; line-height: 22px; color: #bbb; }

        .footer .record font { color: #999; }

    .footer .menu { float: right; margin-top: 60px; }

        .footer .menu .item { float: left; }

        .footer .menu .item { margin-left: 60px; }

            .footer .menu .item h3 { margin-bottom: 20px; font-weight: normal; color: #999; }

            .footer .menu .item a,
            .footer .menu .item p { line-height: 30px; letter-spacing: 1px; display: block; color: #666; }

/* links-copy */

.links-copy { background-color: #fff; }

    .links-copy .inner { height: 60px; line-height: 60px; }

    .links-copy .links { float: left; color: #999; }

    .links-copy .links { float: left; color: #999; }

        .links-copy .links a { color: #666666; margin-right: 10px; }

    .links-copy .copy { float: right; color: #999; }



.page-app .slider { height: 420px; }

.intro { margin-top: 20px; text-align: center; font-size: 16px; color: #999; letter-spacing: 2px; }


/*list-text-block-1*/

.list-text-block-1 { position: relative; z-index: -1; }

.list-text-block-1 .inner { }

.list-text-block-1 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.list-text-block-1 .con { display: flex; flex-wrap: wrap; padding-bottom: 60px; }

    .list-text-block-1 .con .item { width: 380px; margin-left: 10px; margin-right: 10px; margin-top: 40px; display: inline-block; font-size: 14px; padding-left: 10px; padding-right: 10px; vertical-align: top; box-shadow: 0 2px 4px 0 rgba(3, 27, 78, .06); 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); line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; padding: 30px; display: block; transition: box-shadow .2s linear; transition: transform .2s linear; }

        .list-text-block-1 .con .item:hover { color: unset; box-shadow: 0 0 6px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .1); -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0); }

        .list-text-block-1 .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 10px; }
        .list-text-block-1 .con .item p { color: #666; font-size: 13px; line-height: 28px; }

        .list-text-block-1 .con .item .info { color: #666; font-size: 13px; line-height: 28px; margin-bottom: 10px; }
        .list-text-block-1 .con .item a { color: #2780FF; margin-top: 10px; }



/*list-text-block-2*/
.list-text-block-2 { }

.list-text-block-2 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }


.list-text-block-2 .inner { }

    .list-text-block-2 .inner .con { display: flex; flex-wrap: wrap; padding-bottom: 50px; }

    .list-text-block-2 .inner .item { float: left; width: 250px; height: 70px; margin-left: 10px; margin-right: 10px; overflow: hidden; padding: 20px 15px; position: relative; background-color: #fff; box-shadow: 0px 2px 5px 0px rgba(4, 0, 0, 0.08); position: relative; top: 0; transition: all .5s; margin-bottom: 30px; text-align: center; }

        .list-text-block-2 .inner .item:hover { top: -3px; transition: all .5s; }

        .list-text-block-2 .inner .item i { display: block; font-size: 32px; color: #3679F9; z-index: 9; text-align: center; opacity: .8; margin-bottom: 20px; }

        .list-text-block-2 .inner .item:nth-child(0 * 4n) { margin-right: 0; }
        .list-text-block-2 .inner .item h2 { font-weight: normal; margin-bottom: 5px; }
        .list-text-block-2 .inner .item h4 { font-size: 14px; font-weight: normal; color: #666; letter-spacing: 1px; }




/* list-text-block-3 */

.list-text-block-3 { background-image: url('/assets/img/block-5-bg.jpg'); background-position: center top; background-repeat: no-repeat; background-attachment: scroll; background-clip: cover; background-color: #3d3e52; }

    .list-text-block-3 .inner { min-height: 600px; }

    .list-text-block-3 h2.title { text-align: center; padding-top: 70px; padding-bottom: 70px; font-size: 32px; font-weight: lighter; color: #fff; letter-spacing: 2px; }

    .list-text-block-3 .con .item { width: 190px; height: 100px; float: left; margin-right: 12px; overflow: hidden; margin-bottom: 20px; position: relative; }
        .list-text-block-3 .con .item img { width: 100%; object-fit: cover; }

        .list-text-block-3 .con .item .mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(43, 123, 255, 0.95); text-align: center; transition: .8s; opacity: 0; text-align: center; }

            .list-text-block-3 .con .item .mask:hover { opacity: 1; }

            .list-text-block-3 .con .item .mask .mp { float: left; width: 120px; margin-top: 30px; color: #fff; line-height: 30px; margin-left: 20px; }

            .list-text-block-3 .con .item .mask .h5 { float: right; width: 100%; margin-top: 10px; color: #fff; text-align: center; }

            .list-text-block-3 .con .item .mask img { width: 60px; border-radius: 3px; }

        .list-text-block-3 .con .item:nth-child(6n+0) { margin-right: 0; }





/*list-text-block-4*/
.list-text-block-4 { position: relative; z-index: -1; }

.list-text-block-4 .inner { }

.list-text-block-4 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.list-text-block-4 .con { display: flex; flex-wrap: wrap; padding-bottom: 60px; }

    .list-text-block-4 .con .item { width: 280px; margin-left: 10px; margin-right: 10px; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; box-shadow: 0 2px 4px 0 rgba(3, 27, 78, .06); 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); line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; padding: 30px 20px; display: block; transition: box-shadow .2s linear; transition: transform .2s linear; position: relative; }

        .list-text-block-4 .con .item:hover { color: unset; box-shadow: 0 0 6px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .1); -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0); }

        .list-text-block-4 .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 10px; }
        .list-text-block-4 .con .item p { color: #666; font-size: 13px; line-height: 28px; }

        .list-text-block-4 .con .item .info { color: #666; font-size: 13px; line-height: 28px; margin-bottom: 10px; }
        .list-text-block-4 .con .item a { position: absolute; bottom: 15px; color: #2780FF; margin-top: 10px; }
.list-text-block-4 .contact { margin: auto }





.block-data .item { float: left; margin: 70px 86px; }
.block-data .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.block-data .con { display: flex; }

.block-data .item .number font { color: #08a0ff; font-size: 56px; font-weight: lighter; font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }

.block-data .item p { font-size: 18px; }




.block { }

    .block .inner { padding-bottom: 60px; }

    .block .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

/** picture-text-block **/
.picture-text-block { }
    .picture-text-block .inner { }
    .picture-text-block .left { float: left; padding-right: 5% }
    .picture-text-block .right { float: right; padding-left: 5% }

        .picture-text-block .right.pic { text-align: right; }

    .picture-text-block .pic,
    .picture-text-block .info { width: 45%; }

        .picture-text-block .info h3 { margin-top: 80px; margin-bottom: 20px; font-size: 24px; font-weight: lighter; }

        .picture-text-block .info .text { line-height: 34px; font-size: 16px; color: #999; }


        .picture-text-block .info .list { margin-top: 30px; }

            .picture-text-block .info .list .item { width: 240px;; margin-right: 15px; float: left; }

                .picture-text-block .info .list .item .iconfont { font-size: 26px; }

                .picture-text-block .info .list .item h5 { font-size: 14px; margin-top: 15px; }

                .picture-text-block .info .list .item .text { font-size: 12px; }


/*list-text-block-5*/
.list-text-block-5 { position: relative; z-index: -1; }

.list-text-block-5 .inner { padding-bottom: 60px; }

.list-text-block-5 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.list-text-block-5 .con { display: flex; flex-wrap: wrap; }

    .list-text-block-5 .con .item { width: 380px; margin-left: 10px; margin-right: 10px; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; display: block; position: relative; }


        .list-text-block-5 .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 5px; }

        .list-text-block-5 .con .item p { color: #666; font-size: 13px; line-height: 28px; }

        .list-text-block-5 .con .item .iconfont { color: #3679F9; float: left; margin-right: 10px; font-size: 18px; }

        .list-text-block-5 .con .item .info { color: #666; font-size: 13px; line-height: 28px; }
            .list-text-block-5 .con .item .info .text { font-size: 14px; }
        .list-text-block-5 .con .item a { position: absolute; bottom: 15px; color: #2780FF; margin-top: 10px; }
.list-text-block-5 .contact { margin: auto }




/*list-text-block-6*/
.text-icon-block-6 { position: relative; z-index: -1; }

.text-icon-block-6 .inner { padding-bottom: 60px; }

.text-icon-block-6 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.text-icon-block-6 .con { display: flex; flex-wrap: wrap; }

    .text-icon-block-6 .con .item { width: 380px; margin-left: 10px; margin-right: 10px; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; display: block; position: relative; }


        .text-icon-block-6 .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 5px; }

        .text-icon-block-6 .con .item p { color: #666; font-size: 13px; line-height: 28px; }

        .text-icon-block-6 .con .item .iconfont { color: #999999; float: left; margin-right: 10px; font-size: 18px; }

        .text-icon-block-6 .con .item .info { color: #666; font-size: 13px; line-height: 28px; }
            .text-icon-block-6 .con .item .info .text { font-size: 14px; }
        .text-icon-block-6 .con .item a { position: absolute; bottom: 15px; color: #2780FF; margin-top: 10px; }
.text-icon-block-6 .contact { margin: auto }




/*list-text-block-7*/
.text-icon-block-7 { position: relative; z-index: -1; }

.text-icon-block-7 .inner { padding-bottom: 60px; }

.text-icon-block-7 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.text-icon-block-7 .con { display: flex; flex-wrap: wrap; }

    .text-icon-block-7 .con .item { width: 380px; margin-left: 10px; margin-right: 10px; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; display: block; position: relative; text-align: center; }


        .text-icon-block-7 .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 5px; }


        .text-icon-block-7 .con .item .iconfont { color: #999999; margin-right: 10px; font-size: 48px; }
        .text-icon-block-7 .con .item p { color: #666; font-size: 13px; line-height: 28px; }

        .text-icon-block-7 .con .item .info { color: #666; font-size: 13px; line-height: 28px; }
            .text-icon-block-7 .con .item .info .text { font-size: 14px; }
        .text-icon-block-7 .con .item a { position: absolute; bottom: 15px; color: #2780FF; margin-top: 10px; }
.text-icon-block-7 .contact { margin: auto }





.block-tools { background: url('/assets/img/shop-block-4-bg.jpg') center no-repeat; }

    .block-tools .title { text-align: center; padding-top: 70px; font-size: 32px; font-weight: lighter; color: #fff; letter-spacing: 2px; margin-bottom: 70px; }

    .block-tools .intro { font-size: 20px; font-weight: lighter; text-align: center; margin-bottom: 40px; margin-top: 30px; color: #666; letter-spacing: 2px; }

    .block-tools .con { margin-bottom: 70px; }

        .block-tools .con .item { float: left; }

            .block-tools .con .item i { display: inline-block; width: 80px; height: 80px; text-align: center; line-height: 80px; color: #fff; background-color: rgba(107, 115, 250, 0.05); border-radius: 6px; font-size: 32px; }

            .block-tools .con .item:nth-child(1) i { color: #64eaff }

            .block-tools .con .item:nth-child(2) i { color: #f4734e }

            .block-tools .con .item:nth-child(3) i { color: #6c8dff }

            .block-tools .con .item:nth-child(4) i { color: #f56a94 }

            .block-tools .con .item:nth-child(5) i { color: #87e777 }

            .block-tools .con .item:nth-child(6) i { color: #ffed83 }

            .block-tools .con .item:nth-child(7) i { color: #bc8eff }

            .block-tools .con .item:nth-child(8) i { color: #6c8dff }

            .block-tools .con .item:nth-child(9) i { color: #f0ff71 }

            .block-tools .con .item:nth-child(10) i { color: #ff764d }

            .block-tools .con .item:nth-child(11) i { color: #eb7cff }

            .block-tools .con .item:nth-child(12) i { color: #ff8d76 }

            .block-tools .con .item:nth-child(13) i { color: #88e778 }

            .block-tools .con .item:nth-child(14) i { color: #6c8dff }

            .block-tools .con .item:nth-child(15) i { color: #ff8d76 }

            .block-tools .con .item:nth-child(16) i { color: #f0ff71 }

            .block-tools .con .item:nth-child(17) i { color: #bc8eff }

            .block-tools .con .item:nth-child(18) i { color: #64e9fe }

            .block-tools .con .item:nth-child(19) i { color: #88e778 }

            .block-tools .con .item:nth-child(20) i { color: #ca73e6 }

            .block-tools .con .item:nth-child(21) i { color: #6c8dff }

        .block-tools .con .item { text-align: center; line-height: 40px; font-size: 14px; letter-spacing: 2px; color: #fff; margin-left: 40px; margin-right: 40px; margin-top: 20px; margin-bottom: 20px; }







/*list-text-block-2-5*/
.list-text-block-2-5 { position: relative; z-index: -1; }

.list-text-block-2-5 .inner { padding-bottom: 60px; }

.list-text-block-2-5 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

.list-text-block-2-5 .con { display: flex; flex-wrap: wrap; }

    .list-text-block-2-5 .con .item { width: 50%; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 40px; display: block; position: relative; }


        .list-text-block-2-5 .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 5px; }

        .list-text-block-2-5 .con .item p { color: #666; font-size: 13px; line-height: 28px; }

        .list-text-block-2-5 .con .item .iconfont { color: #999999; float: left; margin-right: 10px; font-size: 18px; }

        .list-text-block-2-5 .con .item .info { color: #666; font-size: 13px; line-height: 28px; }
            .list-text-block-2-5 .con .item .info .text { font-size: 14px; }
        .list-text-block-2-5 .con .item a { position: absolute; bottom: 15px; color: #2780FF; margin-top: 10px; }
.list-text-block-2-5 .contact { margin: auto }



/*picture-list-block*/

.picture-list-block { }

.picture-list-block { position: relative; z-index: -1; }

    .picture-list-block .inner { padding-bottom: 60px; }

    .picture-list-block .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .picture-list-block .con { display: flex; flex-wrap: wrap; justify-content: center; }

        .picture-list-block .con .item { margin: auto; width: 20%; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; display: block; position: relative; }


            .picture-list-block .con .item h5 { color: #000; font-size: 18px; line-height: 27px; font-weight: normal; margin-bottom: 5px; }

            .picture-list-block .con .item p { color: #666; font-size: 13px; line-height: 28px; }

            .picture-list-block .con .item .iconfont { color: #999999; float: left; margin-right: 10px; font-size: 18px; }

            .picture-list-block .con .item .info { color: #666; font-size: 13px; line-height: 28px; }
                .picture-list-block .con .item .info .text { font-size: 14px; }
            .picture-list-block .con .item a { position: absolute; bottom: 15px; color: #2780FF; margin-top: 10px; }
    .picture-list-block .contact { margin: auto }








/*picture-list-block*/

.picture-list-block-4 { }

.picture-list-block-4 { position: relative; z-index: -1; }

    .picture-list-block-4 .inner { padding-bottom: 60px; }

    .picture-list-block-4 .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }

    .picture-list-block-4 .con { display: flex; flex-wrap: wrap; justify-content: center; }

        .picture-list-block-4 .con .item { margin: auto; width: 25%; margin-top: 40px; display: inline-block; font-size: 14px; vertical-align: top; line-height: 1.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; display: block; position: relative; }




/*package*/
.package { background-color: #fff; }


.package .title { text-align: center; padding-top: 60px; font-size: 32px; font-weight: lighter; color: #333; letter-spacing: 2px; }


.package .inner { padding-top: 20px; padding-bottom: 40px; }
.package .con { display: flex; }
.package .item { width: 240px; border-radius: 6px; overflow: hidden; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08); background-color: #fff; float: left; margin-right: 80px; position: relative; padding-bottom: 60px; }

    .package .item:nth-child(4n + 0) { margin-right: 0; }

    .package .item .banner { text-align: center; padding-top: 10px; padding-bottom: 20px; letter-spacing: 1px; }

        .package .item .banner h3 { font-size: 16px; color: #fff; padding-top: 20px; padding-bottom: 10px; }

        .package .item .banner p { color: #fff; }

    .package .item .list { margin-bottom: 20px; margin-top: 20px; }

        .package .item .list p { font-size: 14px; color: #333; text-indent: 35px; line-height: 40px; }

            .package .item .list p i { color: #37DA80; margin-right: 5px; }

    .package .item a.price-btn { display: block; width: 140px; height: 35px; line-height: 35px; text-align: center; color: #fff; font-size: 14px; letter-spacing: 2px; border-radius: 30px; position: absolute; left: 0; right: 0; bottom: 25px; margin: auto; }
        .package .item a.price-btn:hover { opacity: .8; }

    .package .item.primary .banner,
    .package .item.primary .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); background-image: -ms-linear-gradient( 45deg, rgb(148,176,215) 0%, rgb(170,195,230) 100%); }


    .package .item.intermediate .banner,
    .package .item.intermediate .price-btn { background-image: -moz-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); background-image: -webkit-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); background-image: -ms-linear-gradient( 56deg, rgb(44,192,108) 0%, rgb(53,207,136) 100%); }

    .package .item.senior .banner,
    .package .item.senior .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); background-image: -ms-linear-gradient( 45deg, rgb(43,123,255) 0%, rgb(0,174,255) 100%); }

    .package .item.top-level .banner,
    .package .item.top-level .price-btn { background-image: -moz-linear-gradient( 45deg, rgb(247,91,110) 0%, rgb(251,187,113) 100%); background-image: -webkit-linear-gradient( 45deg, rgb(247,91,110) 0%, rgb(251,187,113) 100%); background-image: -ms-linear-gradient( 45deg, rgb(247,91,110) 0%, rgb(251,187,113) 100%); }



.article-block .inner { display: flex; justify-content: center; flex-wrap: wrap; padding: 60px 0; }

.article-block .article-list { margin: auto; width: 32%; 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; }
    .article-block .article-list h1.title { font-weight: bold; color: #666; border-bottom: 1px solid #eee; height: 50px; line-height: 50px; font-size: 14px; text-indent: 35px; position: relative; }
        .article-block .article-list h1.title a { float: right; margin-right: 20px; font-weight: normal; color: #999; font-size: 12px; }
        .article-block .article-list h1.title::before { content: " "; display: block; position: absolute; background-color: #08a0ff; width: 3px; height: 15px; margin-top: 18px; margin-left: 20px; }
.article-block .article-list { }
    .article-block .article-list .con { padding: 10px 20px; }
        .article-block .article-list .con li { height: 40px; line-height: 40px; }
            .article-block .article-list .con li a { display: block; width: 255px; height: 40px; overflow: hidden; float: left; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
            .article-block .article-list .con li font { float: right; color: #999; }




/*new style*/
.slider .item p.tel, .slider-sub p.tel { font-size: 14px; }
.slider .item p.tel a, .slider-sub p.tel a, .create-shop .introduce a { color: white; font-size: 15px; }

.page-list .content .article-list .list-img .item .info .intro { margin-top: 0px; padding: 0px; font-size: 12px; text-align: left; letter-spacing: 0px; }
.header .menu li .sub-menu h4.title { display: none; }

.article-block .article-list .con { min-height: 240px; }
.list-text-block-4 { z-index: 0; }
.page-price .fun .thead .cell .price-btn, .page-price .edition .item a.price-btn { padding: 0px; margin-top: 0px; }
.page-list .content .article-list .list-img .item .pic img {width:210px; height:140px;}

.platform-case .item { cursor:pointer; }
.platform-plus-case .item { cursor: pointer; }



/* case-tab */

.case-tab-block {
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: cover;
}
.case-tab-block .tabs {
    overflow: hidden;
    padding: 10px 0;
    margin-bottom: 15px;
}
.case-tab-block .tabs .item {
    float: left;
    padding: 5px 15px;
    line-height: 20px;
    height: 20px;
    margin-bottom: 15px;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
}

.case-tab-block .tabs .item:hover,
.case-tab-block .tabs .item.active{
    color: #fff;
    background-color: #2f82ff;
}

.case-tab-block .inner {
    min-height: 600px;
}

.case-tab-block h2.title {
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
    font-size: 32px;
    font-weight: lighter;
    color: #333;
    letter-spacing: 2px;
}
.case-tab-block .con {
    display: none;
}
.case-tab-block .con.active {
    display: block;
}

.case-tab-block .con .item {
    width: 225px;
    height: 120px;
    float: left;
    margin-right: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
}

.case-tab-block .con .item img {
    width: 100%;
    object-fit: cover;
}

.case-tab-block .con .item .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(43, 123, 255, 0.95);
    text-align: center;
    transition: .8s;
    opacity: 0;
    text-align: center;
}

.case-tab-block .con .item .mask:hover {
    opacity: 1;
}

.case-tab-block .con .item .mask .mp {
    float: left;
    width: 120px;
    margin-top: 30px;
    color: #fff;
    line-height: 30px;
    margin-left: 20px;
}

.case-tab-block .con .item .mask .h5 {
    float: right;
    width: 100%;
    margin-top: 25px;
    color: #fff;
    text-align: center;
}

.case-tab-block .con .item .mask img {
    width: 60px;
    border-radius: 3px;
}

.case-tab-block .con .item:nth-child(5n+0) {
    margin-right: 0;
}