body{
	line-height: 1.6;
}
.cl:after{
	content: "";
	display: block;
	clear: both;
}
.uppercase{
    text-transform:uppercase
}
.lowercase{
    text-transform:lowercase
}
.capitalize{
    text-transform:capitalize
}
.en{
    font-family:Arial
}
.border-box{
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.common-input::-moz-placeholder{
    color:#c9c9c9;
    opacity:1
}
.common-input:-ms-input-placeholder{
    color:#c9c9c9
}
.common-input::-webkit-input-placeholder{
    color:#c9c9c9
}
.placeholder,.common-input.placeholder{
    color:#c9c9c9
}
.hide{
    display:none
}
.hide-f{
    display:none!important
}
[hidden]{
    display:none
}
.hidden{
    display:none;
    visibility:hidden
}
.f-hide{
    font-size: 0;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0
}
.show{
    display:block
}
.invisible{
    visibility:hidden
}
ul.unstyled,ol.unstyled{
    margin-left:0;
    list-style:none
}
ul.inline,ol.inline{
    margin-left:0;
    list-style:none
}
ul.inline>li,ol.inline>li{
    display:inline-block;
    *display:inline;
    *zoom:1
}
.dis-ib{
    display:inline-block;
    *display:inline;
    *zoom:1
}
.dis-b{
    display:block
}
.text-l{
    text-align:left
}
.text-r{
    text-align:right
}
.text-c{
    text-align:center
}
.va *{
    vertical-align:sub;
    *vertical-align:middle;
    _vertical-align:middle
}
.va-t{
    vertical-align:top
}
.va-m{
    vertical-align:middle
}
.va-b{
    vertical-align:bottom
}
.va-s{
    vertical-align:sub
}
.va-m-assistant{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle
}
.pos-r{
    position:relative
}
.pos-a{
    position:absolute
}
.pos-f{
    position:fixed
}
.l,.f-l,.fleft{
    float:left;
    _display:inline
}
.r,.f-r,.fright{
    float:right;
    _display:inline
}
[class*=span].r,[class*=span].f-r{
    float:right
}
.left{
    left:0;
    right:auto
}
.right{
    right:0;
    left:auto
}
.top{
    top:auto;
    bottom:0
}
.bottom{
    top:0;
    bottom:auto
}
.text-left{
    text-align:left
}
.text-right{
    text-align:right
}
.text-center{
    text-align:center
}
.text-overflow{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-break:normal
}
.cursor-pointer{
    cursor:pointer
}
.lines{
    font-size:0;
    line-height:0;
    border-top:solid 1px #eee;
    float:none
}
.mt-5{
    margin-top:5px
}
.mt-10{
    margin-top:10px
}
.mt-15{
    margin-top:15px
}
.mt-20{
    margin-top:20px
}
.mt-25{
    margin-top:25px
}
.mt-30{
    margin-top:30px
}
.mt-35{
    margin-top:35px
}
.mt-40{
    margin-top:40px
}
.mt-45{
    margin-top:45px
}
.mt-50{
    margin-top:50px
}
.mt-55{
    margin-top:55px
}
.mt-60{
    margin-top:60px
}
.mt-70{
    margin-top:70px
}
.mt-80{
    margin-top:80px
}
.mt-90{
    margin-top:90px
}
.mt-100{
    margin-top:100px
}
.mb-5{
    margin-bottom:5px
}
.mb-10{
    margin-bottom:10px
}
.mb-15{
    margin-bottom:15px
}
.mb-20{
    margin-bottom:20px
}
.mb-30{
    margin-bottom:30px
}
.mb-40{
    margin-bottom:40px
}
.mb-50{
    margin-bottom:50px
}
.mb-60{
    margin-bottom:60px
}
.mb-70{
    margin-bottom:70px
}
.mb-80{
    margin-bottom:80px
}
.mb-90{
    margin-bottom:90px
}
.mb-100{
    margin-bottom:100px
}
.ml-5{
    margin-left:5px
}
.ml-10{
    margin-left:10px
}
.ml-15{
    margin-left:15px
}
.ml-20{
    margin-left:20px
}
.ml-30{
    margin-left:30px
}
.ml-40{
    margin-left:40px
}
.ml-50{
    margin-left:50px
}
.ml-60{
    margin-left:60px
}
.ml-70{
    margin-left:70px
}
.ml-80{
    margin-left:80px
}
.ml-90{
    margin-left:90px
}
.ml-100{
    margin-left:100px
}
.mr-5{
    margin-right:5px
}
.mr-10{
    margin-right:10px
}
.mr-15{
    margin-right:15px
}
.mr-20{
    margin-right:20px
}
.mr-30{
    margin-right:30px
}
.mr-40{
    margin-right:40px
}
.mr-50{
    margin-right:50px
}
.mr-60{
    margin-right:60px
}
.mr-70{
    margin-right:60px
}
.mr-80{
    margin-right:60px
}
.mr-90{
    margin-right:60px
}
.mr-100{
    margin-right:100px
}
.pt-5{
    padding-top:5px
}
.pt-10{
    padding-top:10px
}
.pt-15{
    padding-top:15px
}
.pt-20{
    padding-top:20px
}
.pt-30{
    padding-top:30px
}
.pt-40{
    padding-top:40px
}
.pt-50{
    padding-top:50px
}
.pt-60{
    padding-top:60px
}
.pt-70{
    padding-top:70px
}
.pt-80{
    padding-top:80px
}
.pt-90{
    padding-top:90px
}
.pt-100{
    padding-top:100px
}
.pt-none{
    padding-top:0
}
.pb-5{
    padding-bottom:5px
}
.pb-10{
    padding-bottom:10px
}
.pb-20{
    padding-bottom:20px
}
.pb-30{
    padding-bottom:30px
}
.pb-none{
    padding-bottom:0
}
.pl-5{
    padding-left:5px
}
.pl-10{
    padding-left:10px
}
.pl-20{
    padding-left:20px
}
.pl-30{
    padding-left:30px
}
.pl-70{
    padding-left:70px
}
.pl-80{
    padding-left:80px
}
.pl-none{
    padding-left:0
}
.pr-5{
    padding-right:5px
}
.pr-10{
    padding-right:10px
}
.pr-20{
    padding-right:20px
}
.pr-30{
    padding-right:30px
}
.pr-40{
    padding-right:40px
}
.pr-50{
    padding-right:50px
}
.pr-60{
    padding-right:60px
}
.pr-70{
    padding-right:70px
}
.pr-80{
    padding-right:80px
}
.pr-90{
    padding-right:90px
}
.pr-100{
    padding-right:100px
}
.pr-none{
    padding-right:0
}
.pd-5{
    padding:5px
}
.pd-10{
    padding:10px
}
.pd-15{
    padding:15px
}
.pd-20{
    padding:20px
}
.pd-30{
    padding:30px
}
.pd-40{
    padding:40px
}
.radius{
    border-radius:4px;
    overflow:hidden
}
.circle{
    border-radius:50%;
    overflow:hidden
}
.pipe{
    margin:0 5px;
    color:#CCC;
    font-size:10px
}
.indent{
    text-indent:2em
}
.font12{
    font-size:12px
}
.font12-f{
    font-size:12px!important
}
.font14{
    font-size:14px
}
.font14-f{
    font-size:14px!important
}
.font16{
    font-size:16px
}
.font16-f{
    font-size:16px!important
}
.font18{
    font-size:18px
}
.font18-f{
    font-size:18px!important
}
.font20{
    font-size:20px
}
.font20-f{
    font-size:20px!important
}
.font22{
    font-size:22px
}
.font22-f{
    font-size:22px!important
}
.font24{
    font-size:24px
}
.font24-f{
    font-size:24px!important
}
.font26{
    font-size:26px
}
.font26-f{
    font-size:26px!important
}
.font28{
    font-size:28px
}
.font28-f{
    font-size:28px!important
}
.font30{
    font-size:30px
}
.font30-f{
    font-size:30px!important
}
.font36{
    font-size:36px
}
.font36-f{
    font-size:36px!important
}
.font40{
    font-size:40px
}
.font40-f{
    font-size:40px!important
}
.lh-16{
    line-height:16px
}
.lh-18{
    line-height:18px
}
.lh-20{
    line-height:20px
}
.lh-22{
    line-height:22px
}
.lh-24{
    line-height:24px
}
.lh-26{
    line-height:26px
}
.lh-28{
    line-height:28px
}
.lh-30{
    line-height:30px
}
.width25{
    width:25px
}
.width30{
    width:30px
}
.width35{
    width:35px
}
.width40{
    width:40px
}
.width50{
    width:50px
}
.width60{
    width:60px
}
.width80{
    width:80px
}
.width100{
    width:100px
}
.width140{
    width:140px
}
.width200{
    width:200px
}
.width288{
    width:288px
}
.widthper30{
    width:30%
}
.widthper50{
    width:50%
}
.widthper90{
    width:90%
}
.widthper100{
    width:100%
}
.height20{
    height:20px
}
.height22{
    height:22px
}
.height25{
    height:25px
}
.height30{
    height:30px
}
.height35{
    height:35px
}
.height40{
    height:40px
}
.height50{
    height:50px
}
.pink{
    color:#fc6768
}
.green{
    color:#019a66
}
.blue{
    color:#0067ff
}
.success{
    color:#019a66
}
.blueColor{
    color:#2086ee
}
.purple{
    color:#9834ff
}
.orange{
    color:#fe7402
}
.red{
    color:red
}
.redColor{
    color:#ff6b26
}
.orangeColor{
    color:#fe7402
}
.gray{
    color:#818181
}
.price{
    color:#ff7200
}
.empty-hide{
    font-size:0
}
.empty-hide *{
    font-size:14px
}
.img-responsive{
    max-width:100%;
    height:auto
}
body.min990{
    min-width:990px;
    position:relative
}
body.min1024{
    min-width:1024px;
    position:relative
}
body.min1280{
    min-width:1263px;
    position:relative
}
.wide1190{
    margin:0 auto;
    max-width:1190px;
    _overflow:hidden;
    zoom:1
}
@media screen and (max-width:1206px){
    .horizontal-center{
        width:990px;
        margin-left:auto;
        margin-right:auto
    }
}
.desktop .horizontal-center{
    width:990px;
    margin-left:auto;
    margin-right:auto
}
.hd .wide1190{
    _width:1190px
}
.common-banner {
    position: relative;
    color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    overflow: hidden;
    padding: 2em 0 1em;
    font-size: 100px;
}
@media (max-width: 1500px){
	.common-banner {
		font-size: 90px;
	}
}
@media (max-width: 1200px){
	.common-banner {
		font-size: 80px;
	}
}
@media (max-width: 1000px){
	.common-banner {
		font-size: 60px;
	}
}
@media (max-width: 768px){
	.common-banner {
		font-size: 50px;
	}
}
.common-banner .banner-in {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.common-banner .banner-in .txt-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.common-banner .banner-in .txt-box.left {
    text-align: left;
}

.common-banner .txt-box .title {
    font-size: .48em;
}

.common-banner .txt-box .title2 {
    font-size: .38em;
}

.common-banner .txt-box .txt {
    margin: .2em 0;
    font-size: .24em;
    line-height: .43em;
}

.common-banner .txt-box .btn-box {
    width: 1.6em;
    height: 0.5em;
    
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.common-banner .txt-box .btn-box span{
	font-size: 0.18em;
}
.common-banner .btn-box:hover {
    background: #f86b02;
    border: 1px solid #f86b02;
}

.common-banner .common-vid {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    right: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
}


/* 公共banner 结束*/
@media screen and (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #c2c2c2;
        background-clip: padding-box;
        min-height: 28px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }
    ::-webkit-scrollbar-track-piece {
        background-color: #fff;
        background-color: rgba(255, 255, 255, 0);
    }
}

.title-box {
    padding: 100px 0 60px;
    font-family: "PingFangSC-Light";
    font-family: "等线";
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title-box .title {
    color: #333333;
    font-size: 38px;
}

.title-box .title2 {
    color: #808080;
    font-size: 16px;
    padding-top: .2rem;
    line-height: 22px;
    box-sizing: border-box;
    max-width: 600px;
}

@media screen and (max-width: 767px) {
    .title-box {
        padding: 50px 0 20px;
        text-align: center;
    }
    .title-box .title {
        color: #333333;
        font-size: 18px;
    }
    .title-box .title2 {
        color: #808080;
        font-size: 14px;
        line-height: 18px;
        padding: .2rem .1rem 0;
    }
}
.max-width {
    max-width: 1200px;
    margin: 0 auto;
}
/* 小程序开发--小程序案例展示 */
.applet-case .box {
    position: relative;
}

.applet-case .box .swiper {
    width: 100%;
    height: 100%;
    padding: 1% 0 60px;
    text-align: center;
}

.applet-case .box .swiper .swiper-slide .pic {
    position: relative;
   
    overflow: hidden;
}
.applet-case .box .swiper .swiper-slide .pic img{
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
}
.swiper-pagination{
	bottom: 0;
}
.applet-case .box .swiper .swiper-slide:not(.swiper-slide-active) .pic .bg {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: 0 auto;
    background: #fff;
    opacity: .7;
}

.applet-case .box .swiper .swiper-slide.swiper-slide-prev .pic .bg,
.applet-case .box .swiper .swiper-slide.swiper-slide-next .pic .bg {
    opacity: .5;
}

.applet-case .box .swiper-button {
    width: 44px;
    height: 44px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 1px solid #007aff;
    background-size: 12px;
}

.applet-case .box .swiper-button::after {
    font-size: 20px;
}

.applet-case .box .swiper-button-prev {
    left: -10%;
}

.applet-case .box .swiper-button-next {
    right: -10%;
}

.applet-case .box .frame {
    position: absolute;
    left:0;
    top:0;
    right:0;
    margin: 0 auto;
    width: 20.9%;
    z-index: 100000;
    pointer-events: none;
}

@media screen and (max-width: 1450px) {
    .swiper-button-prev {
        left: 5px !important;
    }
    .swiper-button-next {
        right: 5px !important;
    }
}

/* 小程序开发--小程序案例展示-手机 */
@media screen and (max-width: 767px) {
    .applet-case .box {
        position: relative;
    }
    .applet-case .box .swiper {
        padding: 1% 0 40px;
    }
    .applet-case .box .swiper-button {
        width: 30px;
        height: 30px;
    }
    .applet-case .box .frame {
        width: 56%;
    }
}