h1{font-size: 40px;}

.bg-green{background-color: #7de768;}
.bg-blue{background-color: #00ccff;}
.bg-orange{background-color: #eed367;}
.bg-red{background-color: #f48166;}

.btn-big{display: inline-block;width: 188px;height: 52px;line-height: 52px;font-size: 26px;border-radius: 60px;text-align: center;}
.btn-small{height: 40px;line-height: 40px;width: 116px;border: 1px solid #737373;display: inline-block;text-align: center;border-radius: 3px;color: #737373;}
.btn-normal{height: 50px;line-height: 50px;width: 198px;border: 1px solid #737373;display: inline-block;text-align: center;border-radius: 3px;color: #737373;}
.btn-green{background-color: #55de89;color: #fff!important;border: none;}
.btn-gray{background-color: #B9B9B9;color: #fff;border: none;}
.btn-green2{background-color: #09ca8a;color: #fff;border: none;}
.btn-white{background-color: #fff;color: #55de89!important;}

.page-up,.page-down{visibility: hidden;}
.page-up.animated,.page-down.animated{visibility: visible;}
/* --------------------- 首页 ------------------------ */
.page-one{width: 100%;height: 746px;overflow: hidden;background: url('../images/background.png') no-repeat;}
.wrapper{width: 1128px;margin: 0 auto;}
.head{width: 100%;height: 60px;padding-top: 60px;}
.head .head-left{float: left;width: 50%;height: 60px;line-height: 60px;}
.head .head-left .logo{float: left;max-height: 60px;}
.head .head-left .title{float: left;margin: 0 0 0 20px;height: 60px;line-height: 60px;font-size: 36px;font-weight: normal;}
.head .head-right{float: right;width: 50%;height: 60px;line-height: 60px;text-align: right;font-size: 16px;}
.head .head-right a{color: #fff; margin: 0 8px;text-decoration: none;}

.section{width: 100%;}
.section .section-left{float: left; visibility: hidden;}
.section .section-left.animated{visibility: visible;}
.section .section-right{float: right;visibility: hidden;}
.section .section-right.animated{visibility: visible;}

/*== 轮播 ==*/
.slide-wrap{width:600px;height: 404px;position: relative;border: 1px solid #0F4C8B;border-radius: 8px;box-shadow: 0px 0px 30px #1E5792;}
.slide-wrap .slide{margin: 0;padding:0;width: 520px;height: 402px;float: right;background: #fff;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
.slide-wrap .slide .slide-item{float: left;width: 100%;height: 402px;position: relative;display: none;}
.slide-wrap .slide .slide-item img{position: absolute;top: 60px;right: -57px;max-width: 547px;}
.slide-wrap .slide .slide-item.show{display: block;}

.slide-wrap .slide-left{float: left;width: 78px;background: #1c9ae9;height: 402px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;border-right: 1px solid #0F4C8B;}
.slide-wrap .slide-left .slide-left-top{height: 30px;padding-left: 9px;margin-bottom: 33px;}
.slide-wrap .slide-left .slide-left-top .dot{float: left;display: block;width: 10px;height: 10px;border-radius: 50%;background: #0f4c8b;margin: 10px 5px;}

.slide-wrap .nav-bar{float: left;width:100%;padding: 0;margin: 0;}
.slide-wrap .nav-bar .nav{float: left;width: 100%;height: 68px;}
.slide-wrap .nav-bar .nav.active{background: #0f4c8b;}
.slide-wrap .nav-bar .nav.bg-transmit{background-image: url('../images/transmit.png');background-repeat: no-repeat;background-position: center;}
.slide-wrap .nav-bar .nav.bg-Marketing{background-image: url('../images/Marketing.png');background-repeat: no-repeat;background-position: center;}
.slide-wrap .nav-bar .nav.bg-rely-on{background-image: url('../images/rely-on.png');background-repeat: no-repeat;background-position: center;}
.slide-wrap .nav-bar .nav.bg-footstone{background-image: url('../images/footstone.png');background-repeat: no-repeat;background-position: center;}

.page-one-section{padding-top: 72px;}
.page-one-section h1{font-size: 36px;}
.page-one-section p{font-size: 18px;}
.page-one-section .btn-big{text-decoration: none;}
.page-one-section .btn-green{margin-right: 32px;}



.page-two{width: 100%;padding: 90px 0 150px;}
.m-icon-list{width: 100%;margin: 90px 0 150px;height: 275px;padding: 0;}
.m-icon-list li{float: left;margin-left: 109px;width: 200px;list-style: none;}
.m-icon-list .m-icon{width: 200px;height: 200px;border-radius: 50%;visibility: hidden;}
.m-icon-list .m-icon.animated{visibility: visible;}
.m-icon-list .m-icon-design{background-image: url('../images/design.png');background-repeat: no-repeat;background-position: center;}
.m-icon-list .m-icon-technology{background-image: url('../images/technology.png');background-repeat: no-repeat;background-position: center;}
.m-icon-list .m-icon-copy{background-image: url('../images/copy.png');background-repeat: no-repeat;background-position: center;}
.m-icon-list .m-icon-business{background-image: url('../images/business.png');background-repeat: no-repeat;background-position: center;}

.m-icon-list p{margin: 0;padding-top: 36px;width: 100%;text-align: center;font-size: 26px;}

.m-icon-list li:nth-child(2) .m-icon {
    animation-delay:200ms;
    -webkit-animation-delay:200ms; /* Safari 和 Chrome */
}
.m-icon-list li:nth-child(3) .m-icon {
    animation-delay:400ms;
    -webkit-animation-delay:400ms; /* Safari 和 Chrome */
}
.m-icon-list li:nth-child(4) .m-icon {
    animation-delay:600ms;
    -webkit-animation-delay:600ms; /* Safari 和 Chrome */
}

.page-three{width: 100%;padding: 80px 0 57px;background-color: #fafbfa;}
.page-three .section{height: 446px;}
.page-three .section-left{padding-top: 66px;}
.page-three .section-right{width: 60%;}
.page-three .show-image{height: 446px;background: url('../images/CMS.png') no-repeat right top;}

.page-four{width: 100%;padding: 120px 0 57px;}
.page-four .section-left{width: 60%;}
.page-four .section-right{padding-top: 66px;}
.page-four .show-image{height: 446px;background: url('../images/service.png') no-repeat left top;}


.page-five{width: 100%;padding: 103px 0;background-color: #fafbfa;}
.page-five .show-image{height: 352px;background: url('../images/charge.png') no-repeat center top;}


.page-six{width: 100%;padding: 103px 0;}
.page-six .show-image{height: 629px;background: url('../images/last.png') no-repeat center top;}


/* --------------------- 案例 ----------------------- */

a.statusbar {
    display: block;
    width: 37px;
    height: 104px;
    position: absolute;
    border: 1px solid #e4e4e4;
    font-size: 16px;
    top: 0;
    color: #737373;
    right: 20px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    padding: 15px 5px 0;
    border-radius: 0 12px 12px 0;
}

.qrcode {
    width: 400px;
    height: 525px;
    position: absolute;
    top: 0;
    z-index: 9;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.74);
    background-size: 80%;
    display: none;
}

.case {
    width: 400px;
    height: 525px;
    position: relative;
    border: 1px solid #E4E4E4;
    background-repeat: no-repeat;
    background-size: cover;
}

.case .case-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background-color: rgba(0, 173, 116, 0.8);
    display: none;
}

.case .case-bottom a {
    color: #fff;
    font-size: 18px;
}

/* --------------------- 帮助 ------------------------ */
.list{margin: 30px 58px;}
.list li{color: #343434;line-height: 28px;list-style-type: disc;padding-left: 15px;}


/* --------------------- reginfo ------------------------ */
.tb-line{height: 42px;padding-left: 52px;}
.tb-line .tb-left{width: 84px;height: 42px;line-height: 42px;float: left;text-align: right;}
.tb-line .tb-right{height: 42px;line-height: 42px;float: left;}

.main-right{min-height: 600px;}

.content-box {
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-bottom: 120px;
    overflow: hidden;
    background-color: #fff;
}
.content-box .content-top {
    height: 60px;
    border-bottom: 1px solid #e4e4e4;
    background: -moz-linear-gradient(top, #fff, #f6f6f6);
    background: -webkit-gradient(linear,top,from(#fff),to(#f6f6f6));
    background: -webkit-linear-gradient(top, #fff, #f6f6f6);
    background: -o-linear-gradient(top, #fff, #f6f6f6);
}

.content-box .menu{padding: 0;width: 100%;list-style: none;}
.content-box .menu li a{display: block;width: 100%;height: 40px;line-height: 40px;padding-left: 50px;color: #737373;}
.content-box .menu li a.active{background-color: #f7f7f7;color: #343434;}




.header{margin-top: 0;width: 100%;height: 100px;line-height: 100px;background-color: #fafbfa;border-bottom: 1px solid #e4e4e4;}
.header .header-left{float: left;height: 100px;line-height: 100px;}
.header .header-left .title{display: inline-block;font-size: 18px;font-weight: normal;margin: 0 0 0 30px;}
.header .header-right{float: right;height: 100px;line-height: 100px;text-align: right;}
.header .header-right a{color: #737373;margin-left: 40px;font-size: 15px;text-decoration: none;}
.header .header-right a:hover{color: #343434;}
.header .header-right a.btn-small:hover{background-color: #55de89;color: #fff;border: none;padding: 1px;}

.link{width: 100%;padding: 76px 0 40px;background: url('../images/background.png') no-repeat;}
.link h1{font-size: 26px;color: #fff;}
.link .btns{margin: 33px 0 40px;}
.link .btns a{margin: 0 15px;text-decoration: none;}
.link .lk{color: #fff;font-size: 16px;margin: 0 20px;text-decoration: none;}


.footer{width: 100%;padding: 40px 0 42px;background-color: #2c3132;}
.footer .f-left{width: 30%;float: left;text-align: right;}
.footer .f-right{float: left;margin-left: 45px;padding-top: 6px;}
.footer p{color: #fff;font-size: 14px;margin: 12px 0 0;padding: 0;}
.footer a{color: #fff;font-size: 18px;margin-right: 63px;text-decoration: none;}
.footer .copyright a{font-size: 14px;}


.floating-bar {position: fixed;top: 242px;right: 20px;z-index: 18;}
.floating-bar>a{position: relative;display: block;text-decoration: none;margin: 5px 0;width: 48px;height: 40px;line-height: 36px;font-size: 20px;text-align: center;color: #ffffff;background-color: #dbe3e8;cursor: pointer;transition: background-color .35s;}
.floating-bar>a:hover{background-color: #48a4dc;}
.floating-bar>.hide-on-scrolltop{display: none;}
.floating-bar>a .toggle {position: absolute;right: 58px;padding: 14px;color: #fff;font-size: 12px;white-space: nowrap;background-color: #fff;box-shadow: 0 2px 9px #dfdfdf;display: none;}
.floating-bar>a .toggle .qr-title{margin-top: 6px;margin-bottom: 5px;color: #333;font-size: 22px;}
.floating-bar>a .toggle .qr-subtitle{margin-bottom: 6px;padding-bottom: 10px;color: #333;font-size: 16px;border-bottom: 1px solid #c9c9c9;}
.floating-bar>a .toggle img{margin: 0;width: 240px;}
.floating-bar>a:hover .toggle{display: block;}
.floating-bar>a .toggle.toggle-qrcode{top: -98px;width: 287px;height: 350px;}
.floating-bar>a .toggle.toggle-tel{top: -12px;width: 287px;color: #333;font-size: 16px;}