.content{
	font-family:'Microsoft YaHei';
}
.entirety {
    margin: 0 auto;
    width: 1200px;
}
.swiper-button {
    position: absolute;
    cursor: pointer;
    z-index: 1;
}
.salon-btn {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bannerphone-btn {
    bottom: 151px;
    left: -1px;
    width: 162px;
    height: 40px;
}
.bannerview-btn {
    bottom: 38px;
    left: 507px;
    width: 184px;
    height: 50px;
}
.bannerdetail-btn {
    bottom: 104px;
    left: 499px;
    width: 200px;
    height: 54px;
    border-radius: 100px;
}
.bannerweixin-btn {
    left: 624px;
    top: 413px;
    width: 196px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 4px;
    text-align: center;
}

.bannerweixin-btn p {
    font-size: 24px;
    line-height: 45px;
    font-weight: 400;
    color: #fff;
}

.swiper1-box {
    width: 100%;
    position: relative;
}

#pagination1 {
    position: absolute;
    z-index: 50;
    bottom: 0px;
    left: 545px;
    width: 120px;
    height: 12px;
    line-height: 20px;
    text-align: center;
}

.swiper-pagination-switch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #555;
    margin: 0 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
}

.swiper-active-switch {
    background: #fff;
}

.swiper-container-box2 {
    width: 294px;
    height: 527px;
    float: left;
    margin-left: 39px;
    background: url('../img/shouji1.png') center center;
    text-align: center;
    box-sizing: border-box;
    padding-left: 15px;
    padding-top: 77px;
}

#swiper1 {
    height: 450px;
    min-width: 1200px;
    max-width: 1920px;
}
#swiper1 .swiper-slide {
    background-position: center center;
    background-repeat: no-repeat;
    height: 450px;
    width: 100%;
}

#swiper1 .swiper-slide .entirety {
    position: relative;
    height: 100%;
}

#swiper2 {
    width: 257px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    float: left;
}

#swiper2 .swiper-slide {
    box-sizing: border-box;
}

#swiper2 .swiper-slide>img {
    display: block;
}

.phone-banner {
    width: 100%;
    height: 100%;
}

.phone-banner .banner-title>p {
    margin-top: 100px;
    font-size: 52px;
    line-height: 52px;
    color: #1a1a1a;
    font-weight: 400;
}

.phone-banner .banner-content {
    margin-top: 52px;
    margin-bottom: 42px;
}

.phone-banner .banner-content>p {
    font-size: 34px;
    line-height: 34px;
    color: #fffefe;
    margin-bottom: 30px;
    font-weight: bold;
}

.phone-banner .banner-content>p:last-child {
    margin-bottom: 0;
}

.phone-banner .banner-content>p .blue {
    color: #31a0ed;
}

.phone-banner .banner-content>p .deblue {
    color: #2b98e7;
}

.phone-banner .introduce {
    width: 397px;
    height: 52px;
    text-align: center;
    background: #31a0ed;
}

.phone-banner .introduce>p {
    font-size: 31px;
    line-height: 52px;
    color: #fffefe;
}

.phone-banner .btn {
    width: 240px;
    height: 58px;
    margin-top: 45px;
    border: 1px solid #31a0ed;
    border-radius: 10px;
    text-align: center;
}

.phone-banner .btn>p {
    font-size: 32px;
    line-height: 58px;
    color: #31a0ed;
    font-weight: 500;
}

.function {
	font-family:'Microsoft YaHei';
    width: 100%;
    height: 860px;
    /*background: #f5f5f5;*/
}

.function .function-title {
    padding-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.function .entirety >div:first-child h3{
	padding-bottom: 25px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 900;
}
.function .entirety >div:first-child h2{
	font-size: 18px;
    line-height: 42px;
    font-weight: 400;
}

.function .function-top {
    overflow: hidden;
    margin-bottom: 15px;
}

.function .function-bottom {
    overflow: hidden;
}

.function .top-item {
    float: left;
    width: 388px;
    height: 357px;
    margin-right: 15px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f6f5f4;
    transition: border-color .6s;
}

.function .top-item:last-child {
    margin-right: 0;
}

.function .bottom-item {
    float: left;
    overflow: hidden;
    border: 1px solid #f6f5f4;
    width: 590px;
    height: 248px;
    margin-right: 16px;
    background: #fff;
    border-radius: 10px;
    transition: border-color .6s;
}

.function .top-item:hover {
    border-color: #e393fd;
    transition: border-color .6s;
}

.function .top-item:first-child:hover {
    border-color: #ffaa8d;
    transition: border-color .6s;
}

.function .top-item:last-child:hover {
    border-color: #90b0ff;
    transition: border-color .6s;
}

.function .bottom-item:first-child:hover {
    border-color: #68ffa2;
    transition: border-color .6s;
}

.function .bottom-item:last-child:hover {
    border-color: #ff91c2;
    transition: border-color .6s;
}

.function .bottom-item:last-child {
    margin-right: 0;
}

.function .bottom-item .iconfont-bottom {
    position: relative;
    float: left;
    width: 213px;
    height: 100%;
}

.function .content-bottom {
    float: left;
    margin-top: 59px;
    width: 375px;
    height: 100%;
}

.function .iconfont-position {
    position: relative;
    width: 390px;
    height: 185px;
}

.function .iconfont-position .iconfont,
.function .iconfont-bottom .iconfont {
    position: absolute;
    font-size: 54px;
    display: inline-block;
}

.function .top-item .iconfont-translate,
.function .bottom-item .iconfont-translate {
    transition: all .6s;
}

.function .top-item:hover .iconfont-translate,
.function .bottom-item:hover .iconfont-translate{
    -webkit-transform: translate(6px, 6px);
    -moz-transform:translate(6px, 6px);
    transform: translate(6px, 6px);
    transition: all .6s;
}

.function .top-item:hover h2,
.function .bottom-item:hover h2 {
    margin-left: 135px;
    width: 120px;
    transition: all .6s;
}

.function .top-item h2,
.function .bottom-item h2 {
    transition: all .6s;
}

.function .bottom-item:hover h2 {
    margin-left: 0;
}

.function .iconfont-position .icon-xitong-color {
    top: 57px;
    left: 162px;
    color: #ffaf99;
    z-index: 1;
}

.function .iconfont-position .icon-xitong-shadow,
.function .iconfont-position .icon-gengxin-shadow {
    top: 63px;
    left: 168px;
    color: #ebebeb;
}

.function .iconfont-position .icon-puzzle-pieces-color {
    top: 57px;
    left: 148px;
    color: #d599ff;
    z-index: 1;
}

.function .iconfont-position .icon-puzzle-pieces-shadow {
    top: 63px;
    left: 154px;
    color: #ebebeb;
}

.function .iconfont-position .icon-gengxin-color {
    top: 57px;
    left: 162px;
    color: #99b1ff;
    z-index: 1;
}

.function .iconfont-bottom .icon-yingxiaozhongxin-color {
    top: 89.5px;
    left: 73.5px;
    color: #99ffa3;
    z-index: 1;
}

.function .iconfont-bottom .icon-yingxiaozhongxin-shadow,
.function .iconfont-bottom .icon-yuan-shadow {
    top: 95.5px;
    left: 79.5px;
    color: #ebebeb;
}

.function .iconfont-bottom .icon-yuan-color {
    top: 89.5px;
    left: 73.5px;
    color: #ff99cb;
    z-index: 1;
}

.function .top-item>h1,
.function .content-bottom>h1 {
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    color: #333;
    text-align: center;
}

.function .content-bottom>h1 {
    text-align: left;
}

.function .top-item>h2,
.function .content-bottom>h2 {
    width: 50px;
    height: 20px;
    margin-left: 170px;
    margin-bottom: 38px;
    border-bottom: 2px solid #333;
}

.function .content-bottom>h2 {
    margin-left: 0;
}

.function .top-item>p,
.function .content-bottom>p {
    font-size: 16px;
    line-height: 16px;
    color: #666;
    text-align: center;
    padding-bottom: 20px;
}

.function .content-bottom>p {
    text-align: left;
}
.marketcenter{
	width:1200px;
	margin:0 auto;
}
.marketcenter h1 {
    margin-top: 60px;
    margin-bottom: 60px;
    font-size: 28px;
    font-weight: 900;
    line-height: 22px;
    color: #333;
    text-align: center;
}

.marketcenter .market-row {
    overflow: hidden;
}

.marketcenter .market-item {
    position: relative;
    float: left;
    width: 165px;
    height: 90px;
    margin-right: 24px;
    margin-bottom: 24px;
    border-radius: 10px;
    background: black;
}

.marketcenter .market-row .market-item:last-child {
    margin-right: 0;
}

.marketcenter .market-item>p {
    position: absolute;
    left: 90px;
    top: 35px;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
    font-weight: bold;
}

.marketcenter .market-item>i {
    position: absolute;
}

.marketcenter .distribution {
    background: linear-gradient(to top right, #4cf3ef, #2acfad);
}

.marketcenter .distribution>i {
    top: 11px;
    left: 10px;
}

.marketcenter .groups {
    background: linear-gradient(to top right, #fdd035, #f77a1f);
}

.marketcenter .groups>i {
    top: 12px;
    left: -2px;
}

.marketcenter .bargain {
    background: linear-gradient(to top right, #51e8fd, #2d8bf5);
}

.marketcenter .bargain>i {
    top: 13px;
    left: 11px;
}

.marketcenter .coupon {
    background: linear-gradient(to top right, #e738fd, #851ff7);
}

.marketcenter .coupon>i {
    top: 12px;
    left: 13px;
}

.marketcenter .recharge {
    background: linear-gradient(to top right, #a2f1e1, #5fd09c);
}

.marketcenter .recharge>i {
    top: 19px;
    left: 14px;
}

.marketcenter .turntable {
    background: linear-gradient(to top right, #f2c844, #e9a130);
}

.marketcenter .turntable>i {
    top: 14px;
    left: 14px;
}

.marketcenter .red {
    background: linear-gradient(to top right, #fe7116, #fc3f0c);
}

.marketcenter .red>i {
    top: 14px;
    left: 7px;
}

.marketcenter .notice {
    background: linear-gradient(to top right, #8bf2f4, #4dc0c7);
}

.marketcenter .notice>i {
    top: 10px;
    left: 11px;
}

.marketcenter .message {
    background: linear-gradient(to top right, #fae26d, #ef9f40);
}

.marketcenter .message>i {
    top: 15px;
    left: 0;
}

.marketcenter .tiger {
    background: linear-gradient(to top right, #fc667b, #f43c48);
}

.marketcenter .tiger>i {
    top: 14px;
    left: 14px;
}

.marketcenter .data {
    background: linear-gradient(to top right, #5aeaf2, #3295be);
}

.marketcenter .data>i {
    top: 19px;
    left: 12px;
}

.marketcenter .integral {
    background: linear-gradient(to top right, #ffc28f, #ffaa76);
}

.marketcenter .integral>i {
    top: 9px;
    left: 20px;
}

.marketcenter .game {
    background: linear-gradient(to top right, #77bdfa, #4269e8);
}

.marketcenter .game>i {
    top: 30px;
    left: 7px;
}

.marketcenter .navigation {
    background: linear-gradient(to top right, #72669e, #50476f);
}

.marketcenter .navigation>i {
    top: 29px;
    left: -8px;
}

.marketcenter .code {
    background: linear-gradient(to top right, #a2eef1, #5fc7d0);
}

.marketcenter .code>i {
    top: 14px;
    left: 10px;
}

.marketcenter .takeout {
    background: linear-gradient(to top right, #d6a56a, #7e613e);
}

.marketcenter .takeout>i {
    top: 18px;
    left: 14px;
}

.marketcenter .share {
    background: linear-gradient(to top right, #5cffff, #2e98cc);
}

.marketcenter .share>i {
    top: 9px;
    left: 7px;
}

.marketcenter .poster {
    background: linear-gradient(to top right, #fe86dd, #fd4f8d);
}

.marketcenter .poster>i {
    top: 5px;
    left: 14px;
}

.marketcenter .draw {
    background: linear-gradient(to top right, #b40ee9, #64088f);
}

.marketcenter .draw>i {
    top: 13px;
    left: 2px;
}

.marketcenter .fans {
    background: linear-gradient(to top right, #ff7226, #f63913);
}

.marketcenter .fans>i {
    top: 9px;
    left: 20px;
}

.marketcenter .appointment {
    background: linear-gradient(to top right, #f483d4, #e35293);
}

.marketcenter .appointment>i {
    top: 18px;
    left: 12px;
}

.marketcenter .call {
    background: linear-gradient(to top right, #bad548, #74952d);
}

.marketcenter .call>i {
    top: 16px;
    left: 14px;
}

.marketcenter .form {
    background: linear-gradient(to top right, #5cf1fc, #33bd9e);
}

.marketcenter .form>i {
    top: 18px;
    left: 12px;
}

.marketcenter .delivery {
    background: linear-gradient(to top right, #ff9c00, #f56d00);
}

.marketcenter .delivery>i {
    top: 19px;
    left: 18px;
}
.sprite-marketcenter {
    background-image: url(/xcx/images/marketcenter-sprite.png);
    background-repeat: no-repeat;
    display: block;
}
.sprite-Bargain {
    width: 72px;
    height: 55px;
    background-position: -10px -10px;
}

.sprite-Call {
    width: 66px;
    height: 61px;
    background-position: -10px -85px;
}

.sprite-Coupon {
    width: 66px;
    height: 63px;
    background-position: -10px -166px;
}

.sprite-Delivery {
    width: 58px;
    height: 57px;
    background-position: -10px -249px;
}

.sprite-Draw {
    width: 86px;
    height: 58px;
    background-position: -10px -326px;
}

.sprite-Fans {
    width: 48px;
    height: 70px;
    background-position: -10px -404px;
}

.sprite-Game {
    width: 80px;
    height: 60px;
    background-position: -10px -494px;
}

.sprite-Navigation {
    width: 107px;
    height: 48px;
    background-position: -10px -574px;
}

.sprite-Notice {
    width: 67px;
    height: 68px;
    background-position: -10px -642px;
}

.sprite-Recharge {
    width: 72px;
    height: 53px;
    background-position: -10px -730px;
}

.sprite-Red {
    width: 66px;
    height: 58px;
    background-position: -10px -803px;
}

.sprite-Take-out {
    width: 65px;
    height: 53px;
    background-position: -10px -881px;
}

.sprite-Tiger {
    width: 61px;
    height: 61px;
    background-position: -10px -954px;
}

.sprite-appointment {
    width: 88px;
    height: 72px;
    background-position: -10px -1035px;
}

.sprite-code {
    width: 73px;
    height: 76px;
    background-position: -10px -1127px;
}

.sprite-data {
    width: 69px;
    height: 58px;
    background-position: -10px -1223px;
}

.sprite-distribution {
    width: 72px;
    height: 69px;
    background-position: -10px -1301px;
}

.sprite-form {
    width: 71px;
    height: 72px;
    background-position: -10px -1390px;
}

.sprite-groups {
    width: 98px;
    height: 72px;
    background-position: -10px -1482px;
}

.sprite-integral {
    width: 70px;
    height: 70px;
    background-position: -10px -1574px;
}

.sprite-message {
    width: 79px;
    height: 75px;
    background-position: -10px -1664px;
}

.sprite-poster {
    width: 65px;
    height: 81px;
    background-position: -10px -1759px;
}

.sprite-share {
    width: 77px;
    height: 72px;
    background-position: -10px -1860px;
}

.sprite-turntable {
    width: 59px;
    height: 59px;
    background-position: -10px -1952px;
}

.marketcenter .more {
    margin: 16px auto 80px;
    cursor: pointer;
    width: 180px;
    height: 34px;
    border: 1px solid #aaa;
    border-radius: 100px;
    text-align: center;
    color: #999;
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    transition: background 1s;
}

.marketcenter .more .seemore {
    display: inline-block;
    transition: all 1s;
}

.marketcenter .more>i {
    display: inline-block;
    opacity: 0;
    transition: all 1s;
}

.marketcenter .more:hover {
    background: #ff7f07;
    color: #fff;
    transition: background 1s;
    border: 1px solid #fff;
}

.marketcenter .more:hover>i {
    opacity: 1;
    -webkit-transform: translate(3px, 0);
    -moz-transform:translate(3px, 0);
    transform: translate(3px, 0);
    transition: all 1s;
}

.advantagesf {
    overflow: hidden;
    background: url("/xcx/images/banner/advantagebg.jpg") center center no-repeat;
}

.advantagesf .advantage-positionsf {
    position: relative;
    width: 100%;
    height: 400px;
}

.advantagesf .advantage-positionsf>h2 {
    position: absolute;
    top: 116px;
    left: 474px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 900;
    color: #fff;
}
.advantagesf .advantage-positionsf>h1 {
    position: absolute;
    top: 177px;
    left: 390px;
    font-size: 26px;
    line-height: 26px;
    /*color: #999;*/
	color: #fff;
    font-weight: 400;
}
.advantagesf .advantage-positionsf >img{
    position: absolute;
	top: 230px;
    left: 495px;
}

.sprite-icon25 {
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/shoufa/sf_1.png);
}
.sprite-icon26 {
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/shoufa/sf_4.png);
}
.sprite-icon27 {
    width: 120px;
    height: 120px;
	background-image: url(/xcx/images/shoufa/sf_3.png);
}
.sprite-icon28 {
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/shoufa/sf_2.png);
}

.sprite-icon29 {
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/plan/plan_1.png);
}
.sprite-icon33{
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/plan/plan_2.png);
}
.sprite-icon30{
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/plan/plan_3.png);
}
.sprite-icon34{
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/plan/plan_4.png);
}
.sprite-icon32{
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/plan/plan_5.png);
}
.sprite-icon31{
    width: 120px;
    height: 120px;
    background-image: url(/xcx/images/plan/plan_6.png);
}

.advantage {
    overflow: hidden;
    background: url("/xcx/images/advantagebg.jpg") center center no-repeat;
}

.advantage .advantage-position {
    position: relative;
    width: 100%;
    height: 400px;
}

.advantage .advantage-position>h1 {
    position: absolute;
    top: 33px;
    left: 140px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 400;
    color: #fff;
}

.advantage .advantage-position>h2 {
    position: absolute;
    top: 205px;
    left: 140px;
    font-size: 26px;
    line-height: 26px;
    color: #999;
    font-weight: 400;
}

.advantage .advantage-body {
    position: absolute;
    top: 38.5px;
    right: 0;
}

.advantage .advantage-row {
    overflow: hidden;
}

.advantage .advantage-row:first-child .advantage-item:first-child {
    border-top: 0;
    border-left: 0;
}

.advantage .advantage-row:first-child .advantage-item {
    border-bottom: 0;
}

.advantage .advantage-row .advantage-item {
    position: relative;
    border: 1px solid #999;
    border-right: 0;
    width: 264px;
    height: 162px;
    float: left;
}

.advantage .advantage-row .advantage-item:last-child {
    border-right: 1px solid #999;
}

.advantage .advantage-item .icon {
    position: absolute;
    top: 45px;
    right: 28px;
}

.advantage .advantage-item .left {
    margin-left: 42px;
}

.advantage .advantage-item .left>h3 {
    margin-top: 40px;
    margin-bottom: 32px;
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
}

.advantage .advantage-item .orange {
    color: #db4d05;
}

.advantage .advantage-item .blue {
    color: #0058ac;
}

.advantage .advantage-item .green {
    color: #369807;
}

.advantage .advantage-item .pink {
    color: #ba1b5e;
}

.advantage .advantage-item .yellow {
    color: #ff9600;
}

.advantage .advantage-item .left>p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 14px;
    color: #ccc;
}

.advantage .advantage-item .left>p:last-child {
    margin-bottom: 0;
}

.sprite {
    background-image: url(/xcx/images/home-sprite.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-1 {
    width: 58px;
    height: 58px;
    background-position: -10px -10px;
}

.sprite-2 {
    width: 58px;
    height: 58px;
    background-position: -10px -88px;
}

.sprite-3 {
    width: 58px;
    height: 58px;
    background-position: -10px -166px;
}

.sprite-4 {
    width: 58px;
    height: 58px;
    background-position: -10px -244px;
}

.sprite-5 {
    width: 58px;
    height: 58px;
    background-position: -10px -322px;
}
.sprite-a {
    width: 88px;
    height: 55px;
    background-position: -10px -400px;
}

.sprite-b {
    width: 80px;
    height: 80px;
    background-position: -10px -475px;
}

.sprite-c {
    width: 82px;
    height: 82px;
    background-position: -10px -575px;
}

.sprite-d {
    width: 84px;
    height: 77px;
    background-position: -10px -677px;
}

.sprite-e {
    width: 78px;
    height: 79px;
    background-position: -10px -774px;
}

.sprite-f {
    width: 78px;
    height: 82px;
    background-position: -10px -873px;
}

.ability {
    overflow: hidden;
}

.ability .ability-title {
    margin: 50px auto 50px;
    text-align: center;
}
.ability .ability-title>h3 {
    font-size: 32px;
    line-height: 32px;
    font-weight: 900;
    margin-bottom: 25px;
}

.ability .ability-title>h2 {
    font-size: 18px;
    line-height: 16px;
    font-weight: 400;
}

.ability .ability-row:last-child {
    margin-bottom: 0;
}

.ability .ability-body {
    overflow: hidden;
    margin-bottom: 12px;
    padding-top: 10px;
    padding-left: 0px;
}

.ability .ability-item {
    position: relative;
    width: 368px;
    height: 178px;
    float: left;
    border: 1px solid #FFF;
    border-radius: 10px;
    margin-right: 45px;
    margin-bottom: 38px;
    transition: all .6s;
}

.ability .ability-item:last-child {
    margin-right: 0;
}

.ability .ability-item .icon {
    position: absolute;
    top: 20px;
    right: 40px;
}

.ability .ability-item .left {
    margin-left: 38px;
}

.ability .ability-item .left>h3 {
    margin-top: 30px;
    margin-bottom: 42px;
    font-size: 26px;
    line-height: 26px;
    font-weight: 400;
    color: #000;
}

.ability .ability-item .left>p {
    font-size: 18px;
    line-height: 18px;
    color: #8b8b8b;
    margin-bottom: 16px;
}

.ability .ability-item .left>p:last-child {
    margin-bottom: 0;
}

.ability .ability-item:hover {
    border: 1px solid #999;
    box-shadow: 0 0 0px rgba(0, 0, 0, .2);
    transition: all .6s;
}

/*wrap start*/
.wrap {
    overflow: hidden;
    text-align: center;
    background: url("../img/index-background1.jpg") center center;
    background-repeat: no-repeat;
    height: 778px;
}

.wrap .entiret {
    height: 778px;
}

.wrap .entirety>div:first-child {
    padding: 100px 0 86px;
    box-sizing: border-box;
}

.wrap .entirety>div:first-child h3 {
    font-size: 32px;
    line-height: 32px;
    font-weight: 400;
}

.wrap .entirety>div:first-child p {
    padding-top: 20px;
    font-weight: 400;
}

.wrap .wrap-item {
    float: right;
    width: 867px;
    height: 527px;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 160px;
}

.wrap .wrap-item .wrap-border {}

.wrap .wrap-item .wrap-details {
    float: left;
    margin-top: 58px;
    width: 222px;
    height: 99px;
}

.wrap .wrap-item>div:first-child .wrap-details {
    margin-top: 0;
}

.wrap .wrap-item .system-public {
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
}

.wrap .wrap-item .wrap-details p {
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
}

.demo-img{
    width: 150px;
    height: 150px;
}

/*example start*/

.example {
    overflow: hidden;
    text-align: center;
    background: #FFF;
}

.example .system-public {
    margin: 36px auto 24px;
}

.example .entirety>div:first-child {
	font-family:'Microsoft YaHei';
    padding: 62px 0px 0px 0px;
}

.example .entirety>div:first-child #ss b{
    padding-bottom: 25px;
    font-size: 25px;
    line-height: 32px;
    font-weight: 900;
	cursor: pointer;
}
.example .entirety>div:first-child #dd b{
    padding-bottom: 23px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 900;
	cursor: pointer;
}
.ssstyle{
	cursor: pointer;
	background:url(/xcx/images/btn2.png)  no-repeat;
	background-size: 184px 53px;
	
}
.ddstyle{
	cursor: pointer;
	background:url(/xcx/images/btn1.png)  no-repeat;
	background-size: 184px 64px;
}
/*.example .entirety>div:first-child h2 {
    font-size: 18px;
    line-height: 42px;
    font-weight: 400;
	margin-top: 22px;
}*/

.example .example-body {
    overflow: hidden;
    padding-bottom: 50px;
    height: 292px;
}

.example .example-item {
    float: left;
    margin-left: 30px;
    padding-bottom: 50px;
    width: 23.125%;
    height: 200px;
    background: #fff;
}

.example .example-item h3 {
    padding-bottom: 24px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
}

.example .example-item p {
    font-size: 18px;
    line-height: 18px;
    color: #9A9A9A;
}

.example .example-item:first-child {
    margin-left: 0;
}
.example .example-body .example-item .s-hidden img{
    width: 140px;
    height: 140px;
}
.example .example-body .example-item .s-hidden,
.example .example-body .example-item .p-hidden {
    display: none;
}

.example .example-body .example-item:hover {
    box-shadow: 0 0 30px #DDD;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition: 0.4s;
}

.example .example-body .example-item:hover>h3 {
    display: none;
}

.example .example-body .example-item:hover .p-hidden {
    color: #000;
}

.example .example-body .example-item:hover .s-show,
.example .example-body .example-item:hover .p-show {
    display: none;
}

.example .example-body .example-item:hover .s-hidden,
.example .example-body .example-item:hover .p-hidden {
    display: block;
}



/*example end*/


/*speed start*/

.speed {
    overflow: hidden;
    text-align: center;
    height: 428px;
}

.speed .entirety>div:first-child {
    padding: 50px 0;
}

.speed .entirety>div:first-child h3 {
    padding-bottom: 25px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 400;
}

.speed .speed-body {
    position: absolute;
    min-width: 1200px;
}

.speed .speed-item-container {
    margin: auto;
    position: relative;
    background: #88C545;
    width: 170px;
    height: 170px;
    border-radius: 150px;
}

.speed .system-public {
    position: absolute;
    left: 2px;
    top: -2px;
}

.speed .speed-item {
    float: left;
    width: 268px;
    margin-left: 42px;
    padding-bottom: 100px;
}

.speed .speed-item:first-child {
    margin-left: 0;
}

.speed .speed-item p {
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    padding-top: 32px;
}

.speed .speed-wire {
    position: absolute;
    width: 140px;
    height: 1px;
    border: 1px solid #FF7E09;
}

.speed .speed-wire-1 {
    top: 85px;
    left: 219px;
}

.speed .speed-wire-2 {
    top: 85px;
    left: 529px;
}

.speed .speed-wire-3 {
    top: 85px;
    left: 840px;
}

.speed .speed-circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #FF7E09;
}

.speed .speed-circle-1 {
    top: 75px;
    left: 280px;
}

.speed .speed-circle-2 {
    top: 75px;
    left: 590px;
}

.speed .speed-circle-3 {
    top: 75px;
    left: 900px;
}




/*speed end*/


/*plan start*/

.plan {
    overflow: hidden;
    text-align: center;
    background: #FFF;
	width:1200px;
}

.plan .system-public {
    width: 65px;
    height: 54px;
    margin: 0 auto 32px;
}

.plan >div:first-child {
	font-family:'Microsoft YaHei';
}

.plan >div:first-child h3 {
	padding-bottom: 15px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 900;
}
.plan >div:first-child h2 {
    font-size: 18px;
    line-height: 42px;
    font-weight: 400;
	padding-bottom: 62px;
}

.plan .plan-item {
    float: left;
    margin-left: 68px;
}

.plan .plan-item:first-child {
    margin-left: 0;
}

.plan .plan-item p {
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}




/*plan end*/


/*dynamic start*/

.dynamic {
    overflow: hidden;
    text-align: center;
	font-family:'Microsoft YaHei';
	width:1200px;
}

.dynamic >div:first-child {
    margin-top: 50px;
}

.dynamic >div:first-child h3 {
    font-size: 32px;
    line-height: 32px;
    font-weight: 900;
	padding-bottom: 62px;
}

.dynamic .dynamic-item {
    float: left;
    width: 24%;
    padding: 0 0 50px 0;
}

.dynamic .dynamic-item:first-child {
    padding-left: 0;
}

.dynamic .dynamic-item h3 {
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    text-align: left;
    color: #EC6738;
    padding-bottom: 30px;
}

.dynamic .dynamic-item li {
    padding-top: 20px;
    line-height: 16px;
    font-weight: 400;
    text-align: left;
}
.dynamic .dynamic-item li a{
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	text-align:center;
}

.dynamic .dynamic-item li:first-child {
    padding-top: 0;
}


.yijun-cooperation {
    margin-top: 48px;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    color: #000;
    font-weight: 400;
}

.fl li:nth-child(1)>a {
    color: #f86a20;
}

.Lionad-2017-11-14 {
    position: fixed;
    bottom: -140px;
    left: 0;
    width: 100%;
    height: 130px;
    z-index: 101;
    background: rgba(233, 98, 28, .9);
    border: 1px solid #e9621c;
}
.Lionad-2017-11-14 .left.column {
    float: left;
    margin: 24px 0;
    padding-left: 90px;
    width: 800px;
    height: 85px;
    border-right: solid 1px rgba(255, 255, 255, 0.4);
}
.Lionad-2017-11-14 .right.column {
    position: relative;
    float: left;
    margin: 24px 0;
    padding-left: 50px;
    height: 85px;
    color: white;
}
.Lionad-2017-11-14 .right.column .des-title {
    font-size: 16px;
}
.Lionad-2017-11-14 .right.column .des {
    font-size: 26px;
    letter-spacing: 2px;
    font-weight: 500;
    line-height: 85px;
}
.Lionad-2017-11-14 .right.column .iconfont {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 19px;
    color: #f8f8f8;
    line-height: 28px;
    cursor: pointer;
}
.Lionad-2017-11-14 .column-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
}
.Lionad-2017-11-14 input {
    padding-left: 10px;
    width: 260px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: #333;
    background: white;
    border-radius: 4px;
}
.Lionad-2017-11-14 .submit {
    float: right;
    margin-right: 38px;
    width: 100px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 1px;
    background-color: #3388ff;
    line-height: 40px;
    color: #fff;
    cursor: pointer;
    transition: .3s;
}
.Lionad-2017-11-14 .submit.dead {
    background-color: #aaa;
}

body.nomargin {
    margin: 0;
}

.icon-xitong:before  { content:url(/xcx/images/moud/mod1.png) }
.icon-puzzle-pieces:before  { content:url(/xcx/images/moud/mod2.png) }
.icon-gengxin:before  { content:url(/xcx/images/moud/mod3.png) }
.icon-yingxiaozhongxin:before  { content:url(/xcx/images/moud/mod4.png) }
.icon-yuan:before  { content:url(/xcx/images/moud/mod5.png) }

/*--------------------------------------------------------show-------------------------------------------------------*/

.content {
	/*background:#f1f4f4;*/
	font-family:"Microsoft YaHei"
}
.wide1190 {
	margin:0 auto;
	width:1200px;
	_overflow:hidden;
	zoom:1;
}
#J_miniProgramMethod {
	/*background-color:#F1F4F4;*/
}
.miniprogram-desc {
	margin-top:30px;
	text-align:center;
	font-size:16px;
	color:#666;
}
.miniprogram-desc p {
	line-height:30px;
}
.miniprogram-method {
	padding-bottom:50px
}
.miniprogram-method .method-tab {
	margin-top:40px;
	text-align:center;
	font-size:0
}
.miniprogram-method .method-tab .method-list {
	display:inline-block
}
.miniprogram-method .method-tab .method-list li {
	float:left;
	margin:0 6px;
	width:104px;
	height:40px;
	line-height:38px;
	background:#fff;
	border:1px solid #67A4E1;
	border-radius:2px;
	font-size:14px;
	text-align:center
}
.miniprogram-method .method-tab .method-list li a {
	display:block;
	color:#67A4E1;
}
.miniprogram-method .method-tab .method-list li:hover,.miniprogram-method .method-tab .method-list li.active {
	transition:all .2s cubic-bezier(0.4,0,.2,1) 0s;
	background:#3684D6;
	border:1px solid #3684D6;
	box-shadow:3px 0 10px rgba(54,132,214,.3)
}
.miniprogram-method .method-tab .method-list li:hover a,.miniprogram-method .method-tab .method-list li.active a {
	color:#fff
}
.miniprogram-method .method-inner {
	margin-top:40px;
	display:none
}
.miniprogram-method .method-inner.active {
	display:block;
	/*box-shadow:0 0 10px 6px rgba(0,0,0,.04);*/
	transition:all .2s cubic-bezier(0.4,0,.2,1) 0s
}
.miniprogram-method .method-inner .inner-list {
	padding: 5px 0 24px 80px;
	height:100%;
	/*background:#fff*/
}
.miniprogram-method .method-inner .inner-list .li-img {
	float:left;
	margin-top: 32px;
}
.miniprogram-method .method-inner .inner-list >li:first-child h3{
	position: absolute;
	padding-bottom: 10px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 900;
	margin-left: 100px;
	margin-top: 246px;
	color:#fff;
}
.miniprogram-method .method-inner .inner-list >li:first-child h2{
	position: absolute;
	font-size: 16px;
    line-height: 42px;
    font-weight: 400;
	margin-top: 278px;
	color:#fff;
}

.miniprogram-method .method-inner .inner-list .li-info {
	overflow:hidden;
	padding:10px 0px 0;
	padding-right:0px;
	width: 690px;
}
.miniprogram-method .method-inner .inner-list .li-info .info-title {
	font-size:25px;
	color:#424242;
	text-align:center;
	font-weight:900;
}
.miniprogram-method .method-inner .inner-list .li-info .info-title1 {
	margin-top:10px;
	font-size:17px;
	color:#BABABA;
	text-align:center;
	font-weight:400;
}
.miniprogram-method .method-inner .inner-list .li-info .info-list {
	/*margin-top:10px;*/
	padding-top:20px;
	border-bottom:1px solid #bbb;
	position:relative;
	overflow:hidden;
	width: 708px;
}
.miniprogram-method .method-inner .inner-list .li-info .info-list li {
	padding-left:50px;
	margin-bottom:14px;
	float:left;
	width:24%;
	font-size:14px;
	color:#555;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box
}
.miniprogram-method .method-inner .inner-list .li-info .info-list li img {
	margin-right:6px;
	display: inline-block;
	vertical-align: middle;
}
.miniprogram-method .method-inner .inner-list .li-info .info-list li .li-txt {
	padding-left:0;
	line-height:30px;
	font-size:15px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	text-align:center;
	display: inline-block;
	vertical-align: middle;
}
.miniprogram-method .method-inner .inner-list .li-info .info-price {
	
}
.miniprogram-method .method-inner .inner-list .li-info .info-price .info-price-title {
	float:left;
	line-height:42px;
	font-size:14px;
	color:#555
}
.miniprogram-method .method-inner .inner-list .li-info .info-price .info-price-list {
	margin-top:2px;
}
.info-price-list {
	margin-left:-30px;
	font-size:17px;
}
.info-price-list li {
	cursor:pointer;
	float:left;
	line-height:38px;
	position:relative;
	margin-left:15px;
}
.info-price-list li span {
	display:inline-block;
	margin-right:3px;
	vertical-align:-4px;
	width:18px;
	height:18px;
	background:url(/xcx/images/banner/17-21.png) no-repeat;
	background-position: -2px -2px;
}
.info-price-list li p {
	display:inline-block;
	color:#333;
	font-size:16px;
}
.info-price-list li p b {
	color:#FE8134;
	font-size:18px;
	margin-right:3px;
}
.info-price-list li sup {
	position:absolute;
	right:4px;
	top:-3px;
	min-width:40px;
	height:19px;
	color:#fff;
	text-align:center;
	line-height:16px;
	background:url(/xcx/images/banner/17website-2.png) no-repeat;
	background-position:0 -57px;
	font-size:12px;
}
.info-price-list li.on span {
	background:url(/xcx/images/banner/17-2.png) no-repeat;
	background-position: -7px -6px;
}
.info-price-list li.on sup {
	background-position:0 -76px;
}
.miniprogram-method .method-inner .inner-list .li-info .info-price .info-price-btn {
	float:right;
	display:inline-block;
	width:142px;
	height:42px;
	line-height:42px;
	background:#EE4358;
	border:0;
	border-radius:4px;
	font-size:18px;
	color:#fff;
	text-align:center
}
.miniprogram-method .seeAll {
	margin:60px auto;
	display:inline-block;
	width:170px;
	height:50px;
	line-height:50px;
	border:1px solid #2087ed;
	border-radius:25px;
	font-size:16px;
	color:#2087ed;
	text-align:center
}
.miniprogram-method .seeAll:hover {
	background:#2087ed;
	color:#fff
}
.miniprogram-youshi {
	width:100%;
	background:url(https://images.hulian.top/web/images/new16/cysp/bsebg.png) repeat-x center;
	height:550px;
}
.miniprogram-youshi h5 {
	color:#FFF;
	font-size:30px;
	padding-top:60px;
	font-weight:normal;
	text-align:center;
}
.youshibg {
	width:1200px;
	height:auto;
	overflow:hidden;
	zoom:1;
	margin-top:30px;
}
.youshibg dl {
	width:20%;
	padding-top:2%;
	padding-bottom:2%;
	padding-left:5%;
	float:left;
	height:auto;
	overflow:hidden;
	zoom:1;
}
.youshibg dl dt {
	width:15%;
	padding-top:10px;
	float:left;
}
.youshibg dl dd {
	width:85%;
	float:right;
	color:#FFF;
}
.youshibg dl dd h6 {
	font-size:22px;
}
.youshibg dl dd p {
	font-size:15px;
}
.miniprogram-traffic {
	background-color:#F6F6F6;
	padding-top:40px;
	padding-bottom:40px;
}
.miniprogram-traffic h5 {
	text-align:center;
	font-weight:normal;
	font-size:30px;
}
.Eilsgn {
	width:1200px;
	height:auto;
	overflow:hidden;
	zoom:1;
	margin-top:20px;
}
.Eilsgn li {
	width:21%;
	padding-bottom:30px;
	padding-left:23px;
	padding-right:23px;
	padding-top:30px;
	float:left;
	list-style:none;
}
.Eilsgn li .colum {
	width:214px;
	height:180px;
	padding:30px 20px;
	margin:0 auto;
	border-radius:10px;
	background:#fff;
	box-shadow:0 0 20px rgba(0,0,0,.1);
	text-align:center;
	transition:All .4s ease-in-out;
	-webkit-transition:All .4s ease-in-out;
	-moz-transition:All .4s ease-in-out;
	-o-transition:All .4s ease-in-out
}
.Eilsgn li .colum dd.dd01 {
	font-size:18px;
	font-weight:500;
	line-height:55px;
}
.Eilsgn li .colum dd.dd02 {
	font-size:14px;
	color:#999;
	line-height:20px;
	font-family:arial;
}
.Eilsgn  li:hover .colum {
	transform:translate(0,-10px);
	-webkit-transform:translate(0,-10px);
	-moz-transform:translate(0,-10px);
	-o-transform:translate(0,-10px);
	-ms-transform:translate(0,-10px);
	-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,.2);
	box-shadow:0 0 20px rgba(0,0,0,.2)
}
.miniprogram-complete {
	width:100%;
	border-bottom:#e3e3e3 solid 1px;
	height:auto;
	overflow:hidden;
	zoom:1;
	background:url(https://images.hulian.top/web/images/new16/cysp/pro_bg.png) no-repeat center #FFF;
}
.miniprogram-complete img {
	display:block;
	margin:40px auto 0
}
.text-c {
	text-align:center;
}
.miniprogram-complete .complete-btn {
	margin:45px auto;
	display:inline-block;
	width:275px;
	height:70px;
	line-height:70px;
	background:#EE4358;
	border-radius:50px;
	font-size:18px;
	color:#fff;
	text-align:center
}
.miniprogram-complete .complete-btn:hover {
	background:#F5586A
}
.miniprogram-module {
	padding-bottom:10px;
	background:#fff
}
.miniprogram-module .module-type {
	width:1000px;
	padding-top:50px;
	height:auto;
	overflow:hidden;
	zoom:1;
}
#module-showWP {
	height:auto;
	overflow:hidden;
	zoom:1;
}
.miniprogram-module .module-type .select-item {
	width:5%;
	float:left;
	text-align:center;
	margin-right:14px;
	margin-bottom:20px;
	line-height:30px;
	border:1px solid #67A4E1;
	border-radius:5px;
	font-size:16px;
	color:#67A4E1;
	 cursor: pointer;
}
.miniprogram-module .module-type .select-item.active,.miniprogram-module .module-type .select-item:hover {
	color:#fff;
	background:#3684D6;
}
.addstyle {
	height:auto;
	overflow:hidden;
	zoom:1;
	/*margin-bottom:15px;*/
}
.addstyle .version {
	height:auto;
	overflow:hidden;
	zoom:1;
}
.addstyle .version li {
	width:80px;
	float:left;
	margin-left:15px;
	border:#398CD8 solid 1px;
	border-radius:2px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:14px;
	cursor:pointer;
}
.addstyle .version li label{
	cursor:pointer;
}
.addstyle .version li.ons {
	background-color:#3684D6;
	color:#FFF;
	border:#3684D6 solid 1px;
}
.cl::after,.clearfix::after {
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}
.miniprogram-module .module-show {
	margin-top:30px;
	padding:20px;
	height:auto;
	overflow:hidden;
	background:#f8f8f8
}
.miniprogram-module .module-show .li-show {
	width:25%;
	float:left;
	margin-top:10px;
	position:relative;
}
.miniprogram-module .module-show .li-show .show-txt {
	margin:10px;
	position:relative;
	width: 244px;
    height: 466px;
	background: url(https://images.hulian.top/web/images/new16/cysp/pic/PhoneM01.png) no-repeat;
}
.miniprogram-module .module-show .li-show .show-txt img {
	margin:10px auto 0;
	width:244px;
	height:466px
}
.miniprogram-module .module-show .li-show .imgContent {
	left:15px;
	position:absolute;
	top:50px;
}
.miniprogram-module .module-show .li-show .imgContent img {
	width:210px;
	height:360px;
}
.miniprogram-module .module-show .li-show .ewcode {
	width:218px;
	height:366px;
	display:none;
	position:absolute;
	top:65px;
	left:22px;
	position:absolute;
	text-align:center;
	z-index:1;
	background-color:rgba(0,0,0,0.3);
}
.miniprogram-module .module-show .li-show .ewcode span {
	width:120px;
	height:120px;
	background-color:#FFF;
	display:block;
	margin:0 auto;
	margin-top:60%;
}
.miniprogram-module .module-show .li-show  .ewcode img {
	vertical-align:middle;
	width:119px;
	height:119px;
	margin-top:10px;
}
.miniprogram-module .module-show .li-show .ewcode p {
	color:#FFF;
	line-height:45px;
	text-align:center;
}
.miniprogram-case {
	height:auto;
	overflow:hidden;
	zoom:1;
	padding-bottom:80px;
	background:#fff
}
#caseWP {
	width:1200px;
	margin:0 auto;
	height:auto;
	overflow:hidden;
	zoom:1;
}
.miniprogram-case .case-type {
	padding-top:50px;
	height:auto;
	overflow:hidden;
	zoom:1;
	padding-left: 83px;
}
.miniprogram-case .case-type .case-type-li {
	width:9%;
	text-align:center;
	float:left;
	margin-right:32px;
	margin-bottom:20px;
	line-height:34px;
	border:1px solid #3684D6;
	border-radius:5px;
	font-size:16px;
	color:#3684D6;
}
.miniprogram-case .case-type .case-type-li.active,.miniprogram-case .case-type .case-type-li:hover {
	color:#fff;
	background:#3684D6;
}
.miniprogram-case .case-show {
	margin-top:30px;
	padding:20px;
	background:#f8f8f8;
	height:auto;
	overflow:hidden;
	zoom:1;
}
.miniprogram-case .case-show .show-column {
	margin-top:10px;
	float:left;
	width:20%
}
.miniprogram-case .case-show .show-column .sc-info {
	margin:10px 16px;
	border-radius:5px;
	background:#FFF;
	text-align:center;
}
.miniprogram-case .case-show .show-column .sc-info img {
	width:155px;
	height:155px;
}
.miniprogram-case .case-show .show-column .sc-info:hover {
	box-shadow:0 0 10px 4px rgba(0,0,0,.1);
	transition:all .3s cubic-bezier(0.4,0,.2,1) 0s
}
.miniprogram-app {
	padding-bottom:60px
}
.miniprogram-app .app-list {
	padding-top:20px
}
.miniprogram-app .app-list li {
	float:left;
	padding:30px 0px;
	width:33.33333333%;
	box-sizing:border-box
}
.miniprogram-app .app-list li .column {
	width:350px;
	margin:0 auto;
	background:#fff;
	box-shadow:0 0 30px rgba(0,0,0,.1);
	text-align:center;
	transition:All .4s ease-in-out;
	-webkit-transition:All .4s ease-in-out;
	-moz-transition:All .4s ease-in-out;
	-o-transition:All .4s ease-in-out
}
.miniprogram-app .app-list li .column img {
	margin:0 auto;
	display:block
}
.miniprogram-app .app-list li .column .al-title {
	padding:10px 10px 0;
	font-size:18px;
	color:#403e3e;
	font-weight:700
}
.miniprogram-app .app-list li .column .al-price {
	padding-top:10px;
	font-size:16px;
	color:#ff6800
}
.miniprogram-app .app-list li .column .al-price span {
	font-size:14px;
	color:#999;
	font-weight:400
}
.miniprogram-app .app-list li .column .al-txt {
	padding:10px;
	line-height:26px;
	font-size:14px;
	color:#666
}
.miniprogram-app .app-list li:hover .column {
	transform:translate(0,-10px);
	-webkit-transform:translate(0,-10px);
	-moz-transform:translate(0,-10px);
	-o-transform:translate(0,-10px);
	-ms-transform:translate(0,-10px);
	-webkit-box-shadow:0 0 30px rgba(0,0,0,.2);
	-moz-box-shadow:0 0 30px rgba(0,0,0,.2);
	box-shadow:0 0 30px rgba(0,0,0,.2)
}
#tpl_gnyy {
	background-color:#F1F4F4;
	height:auto;
	overflow:hidden;
	zoom:1;
}
.miniprogram-line {
	width:1200px;
	margin:0 auto;
	height:auto;
	overflow:hidden;
	zoom:1;
	margin-top:35px;
}
.miniprogram-line ul li {
	width:240px;
	float:left;
	text-align:center;
	font-size:16px;
	color:#666666;
}
.gnDetails a {
	width:88px;
	display:block;
	border-radius:8px;
	background-color:#3399FF;
	color:#FFF;
	height:35px;
	line-height:32px;
	text-align:center;
	margin-left:60px;
	font-size: 16px;
	border: 1px solid #2abfbf
}
.gnDetails1{
	float:left;
	display: inline-block;
}
.gnDetails{
	float:left;
	display: inline-block;
}
.gnDetails1 div {
	width:88px;
	display:block;
	border-radius:8px;
	background-color:#FE7F3A;
	color:#FFF;
	height:35px;
	line-height:32px;
	text-align:center;
	margin-left:40px;
	font-size: 16px;
	border: 1px solid #bf742a;
	cursor: pointer;
}
.btn1{
	margin-top: 12px;
}
.mb{
	padding: 0 50px 40px 20px;
	float:left;
	width: 225px;
	height: 440px;
}
.moremb{
	margin:45px 0 80px 496px;
    width: 176px;
    height: 58px;
    line-height: 32px;
    border: solid 1px #f86a20;
    border-radius: 16px;
    color: #f86a20;
    font-size: 21px;
    font-weight: 900;
    transition: .3s;
    cursor: pointer;
	background-color: #fff;
	outline: 0;
}
 .moremb:hover {
    background-color: #f86a20;
    color: white;
}

.btn-area {
    top: 47px;
    left: 15px;
    position: absolute;
    display: none;
    width: 198px;
    height: 362px;
    text-align: center;
    background-color: rgba(0,0,0,0.3);
    z-index: 1;
}
.code-img {
    margin: 90px auto;
    width: 130px;
    height: 130px;
    padding: 10px;
    background-color: #fff;
}


/*example start*/

.example {
    overflow: hidden;
    text-align: center;
    background: #FAFAFA;
}

.example .system-public {
    margin: 36px auto 24px;
}

.example .entirety>div:first-child {
    padding: 10px 0;
}

.example .entirety>div:first-child h3 {
    padding-bottom: 25px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
}

.example .entirety>div:first-child p {
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}

.example .example-body {
    // overflow: hidden;
    padding-bottom: 50px;
    height: 292px;
}

.example .example-item {
    float: left;
    margin-left: 30px;
    padding-bottom: 50px;
    width: 23.125%;
    height: 242px;
    background: #fff;
}


.example .example-item:first-child {
    margin-left: 0;
}
.example .example-body .example-item .s-hidden img{
    width: 140px;
    height: 140px;
}
.example .example-body .example-item .s-hidden,
.example .example-body .example-item .p-hidden {
    display: none;
}

.example .example-body .example-item:hover {
    box-shadow: 0 0 30px #DDD;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition: 0.4s;
}

.example .example-body .example-item:hover>h3 {
    display: none;
}

.example .example-body .example-item:hover .p-hidden {
    color: #000;
}

.example .example-body .example-item:hover .s-show,
.example .example-body .example-item:hover .p-show {
    display: none;
}

.example .example-body .example-item:hover .s-hidden,
.example .example-body .example-item:hover .p-hidden {
    display: block;
}



/*example end*/