.wrap {width: 1440px;margin: 0 auto;text-align: center;}

.bg header {padding: 28px 64px;display: flex;justify-content: space-between;align-items: center;}
.bg header.header-fixed {position: fixed;top: 0;z-index: 10;width: 1440px;background-color: #fff;}
.bg header .nav {position: relative;display: flex;}
.bg header .nav .nav-item {margin-right: 24px;}
.bg header .nav .nav-item .nav-title {cursor: pointer;line-height: 24px;color: #000;opacity: 0.5;border-bottom: 3px solid transparent;}
.bg header .nav .nav-item .nav-title:hover, .bg header .nav .nav-item .nav-title.active {opacity: 1;border-bottom: 3px solid #329DCF;}
.bg header .nav .nav-item .blog-list .first {margin-bottom: 40px;}

.bg header .nav .nav-item .dropdown.open.flex {display: flex!important;}
.bg header .nav .dropdown {display: none;position: absolute;background-color: #fff;border-radius: 10px;left: 0;z-index: 2;}
.bg header .nav .dropdown a {display: block;color: #203896;line-height: 150%;margin-bottom: 18px;font-weight: 600;}
.bg header .nav .dropdown .bg-blue {background: rgba(236, 240, 255, 0.5);}
.bg header .nav .dropdown p {color: #000;opacity: 0.5;line-height: 175%;font-weight: bold;font-family: 'NimbusSans';}
.bg header .nav .show-info {text-align: left;padding: 25px 32px;border-radius: 10px;}
.bg header .nav .show-info .info-wrapper {display: flex;}
.bg header .nav .show-info .info-wrapper > div, .bg header .nav .link-info > div {width: 250px;}
.bg header .nav .show-info .info-wrapper a{color: #203896;font-weight: 600;font-size: 14px;margin-bottom: 10px;}
.bg header .nav .show-info .info-wrapper p{line-height: 175%;opacity: 1;font-family: 'NimbusSans';}
.bg header .nav .link-info {display: flex;padding: 24px 32px;text-align: left;}
.bg header .nav .link-info p, .bg header .nav .link-wrap p, .bg header .nav .blog-list p {margin-bottom: 24px;}
.bg header .nav .link-wrap {width: 260px;padding: 25px 32px; text-align: left;}
.bg header .nav .blog-list, .video-wrap {width: 348px;padding: 25px 27px;border-radius: 10px;text-align: left;}
.bg header .nav .blog-list a img {float: left;width: 64px;height: 64px;border-radius: 10px;margin-right: 12px;}
.bg header .nav .video-wrap p {margin-bottom: 11px;}
.bg header .nav .video-wrap .video-play {position: relative;}
.bg header .nav .video-wrap .icon-play {position: absolute; top: 50%;margin-top: -25px;width: 51px;left: 50%;margin-left: -25px;cursor: pointer;}

.video-box {display: none;width: 100%;height: 100%;background: rgba(0,0,0,0.7);overflow-y: hidden;position: fixed;top: 0;left: 0;z-index: 9999;}
.video-box .video {width: 720px;height: 404px;position: fixed;top: 50%;left: 50%;margin-left: -360px;margin-top: -202px;}
.video-box .video .shut {font-size: 42px;color: rgba(255,255,255,0.7);cursor: pointer;position: absolute;right: -36px;top: -42px;}
.video-box .video #video {width: 100%; cursor: pointer;}

.bg header .logo{display: flex;}
.bg header .logo img {width: 123px;}
.bg header a {color: #000;}
.bg header .btn-register {color: #203896;font-weight: bold;padding: 8px 26px;background-color: #fff;margin-left: 25px;border: 1px solid rgba(32, 56, 150, 0.5);border-radius: 10px;}
.bg header .btn-register:hover {background: #203896;color: #fff;}
.bg .page-top {width: 1376px;margin: 0 auto; border-radius: 20px;background-color: #203896;padding-top: 112px;padding-bottom: 82px;position: relative;color: #fff;text-align: left;}
.bg .page-top h1 {margin-bottom: 24px;font-size: 64px;padding-left: 109px;width: 540px;line-height: 150%;}
.bg .page-top h3 {font-size: 18px;line-height: 150%;font-weight: 300;padding-left: 116px;margin-bottom: 48px;font-family: 'NimbusSans';}
.bg .page-top img {position: absolute;bottom: 0;right: 66px;width: 544px;}
.bg .page-top a {width: 188px;height: 46px;background: #1891CA;border-radius: 10px;display: block;text-align: center;line-height: 46px;margin-left: 116px;color: #fff;}
.bg .customers-img {width: 68%;margin: 42px 0;}

.main .feature {background: url(../image/middle-bg.png) top center no-repeat;background-size: 100%;}
.main .feature .desc {display: flex;text-align: left;justify-content: space-around;margin-bottom: 64px;padding-top: 128px;}
.main .feature .desc h2 {width: 515px;font-size: 48px;font-weight: bold;line-height: 150%;}
.main .feature .desc .tips {width: 580px;}
.main .feature .desc .tips h3 {font-size: 18px;line-height: 175%;margin-bottom: 18px;font-family: 'NimbusSans';font-weight: bold;}
.main .feature .desc .tips p {font-size: 14px;line-height: 175%;margin-bottom: 27px;font-family: 'NimbusSans';}
.main .feature .desc .tips a {color: #203896;}
.main .feature .desc .tips a img{width: 24px;vertical-align: middle;margin-bottom: 4px;;}
.main .feature .product {display: flex;padding: 0 32px;justify-content: space-between;}
.main .feature .product .product-item {width: 672px;height: 470px;border-radius: 20px;padding-left: 116px;text-align: left;}
.main .feature .product .product-item.product-online {background: url(../image/online-bg.png);color: #fff;}
.main .feature .product .product-item.product-premise {background: url(../image/premise-bg.png);}
.main .feature .product .product-item img {height: 91px;margin-top: 82px;margin-bottom: 40px;}
.main .feature .product .product-item h4 {font-size: 32px;margin-bottom: 24px;}
.main .feature .product .product-item p{font-size: 18px; line-height: 175%;width: 426px;font-family: 'NimbusSans';}
.main .feature .product .product-item a {width: 188px;height: 44px;text-align: center;line-height: 44px;border-radius: 10px;margin-top: 44px;display: block;}
.main .feature .product .product-item.product-online a{background: #1891CA;color: #fff;}
.main .feature .product .product-item.product-premise a{color: #203896;border: 1px solid rgba(32, 56, 150, 0.5);}
.main .feature .feature-items-wrap {display: flex;justify-content: space-between;width: 1238px;margin: 44px auto;}
.main .feature .feature-item{text-align: center;background-color: #fff;padding-top: 20px;width: 123px;}
.main .feature .feature-item img {margin-bottom: 20px;height: 62px;}
.main .feature .feature-item h4 {font-size: 14px;line-height: 175%;margin-bottom: 4px;font-weight: bold;font-family: 'NimbusSans';}
.main .feature .feature-item p {font-size: 14px; line-height: 125%;font-family: 'NimbusSans';}

.word-swiper {text-align: center;margin-top: 50px;padding-bottom: 72px;}
.word-swiper .swiper-wrapper .swiper-button-lock {display: block;}
.word-swiper .swiper-wrapper .swiper-slide h3 {font-size: 24px;line-height: 175%;margin: 48px auto;width: 1000px;}
.word-swiper .swiper-wrapper .swiper-slide img {width: 64px;margin-bottom: 24px;border-radius: 50%;}
.word-swiper .swiper-wrapper .swiper-slide h4 {font-size: 16px;font-weight: bold;font-family: 'NimbusSans';line-height: 175%;}
.word-swiper .swiper-wrapper .swiper-slide p {font-size: 14px;font-family: 'NimbusSans';line-height: 175%;margin-bottom: 48px;}
.word-swiper .swiper-pagination {margin-bottom: 72px;}
.word-swiper .swiper-pagination .swiper-pagination-bullet {border: 1px solid #203896;background: transparent;}
.word-swiper .swiper-pagination .swiper-pagination-bullet-active {background: #203896;}

.story-swiper {margin-top: -150px;}
.story-swiper .swiper-slide {display: flex;justify-content: space-around;width: 100%;}
.story-swiper .user-story {width: 547px; text-align: left;}
.story-swiper .user-story h4 {font-size: 24px;font-family: 'NimbusSans';line-height: 175%;margin-top: 24px;padding-left: 25px;}
.story-swiper .user-story p {font-size: 18px;line-height: 175%;font-family: 'NimbusSans';color: #203896;margin-bottom: 48px;padding-left: 25px;}

.main .designed {background: #ECF0FF;}
.main .designed .wrap {padding: 80px 0 200px;}
.main .designed .text-wrap {display: flex;text-align: left;justify-content: space-around;}
.main .designed .text-wrap h2 {font-size: 48px;line-height: 150%;width: 574px;font-weight: 600;}
.main .designed .text-wrap .tips {width: 358px;}
.main .designed .text-wrap .tips h3 {font-size: 18px;line-height: 175%;margin-bottom: 18px;font-family: 'NimbusSans';font-weight: bold;}
.main .designed .text-wrap .tips p {font-size: 14px;line-height: 175%;font-family: 'NimbusSans';}
.main .designed .num-wrap {display: flex;justify-content: space-around;margin-top: 100px;}
.main .designed .num-wrap .number {font-size: 64px;color: #203896;justify-content: space-around;line-height: 150%;font-family: 'NimbusSans';}
.main .designed .num-wrap p {color: #329DCF;font-size: 18px;line-height: 150%;text-align: left;}

.main .mobile {background: #203896;}
.main .mobile-wrap {height: 403px;background: url(../image/mobile-bg.png) no-repeat top left; padding: 50px 200px;color: #fff;background-size: cover;}
.main .mobile .mobile-rt {width: 650px;float: right;text-align: left;}
.main .mobile .mobile-rt h3{font-size: 32px;margin-top: 30px;margin-bottom: 6px;font-weight: bold;line-height: 150%;}
.main .mobile .mobile-rt p {font-family: 'NimbusSans';}
.main .mobile .mobile-rt p.first {font-size: 18px;margin-bottom: 24px;color:#329DCF}
.main .mobile .mobile-rt p.second {font-size: 14px;margin-bottom: 50px;line-height: 175%;}
.main .mobile .mobile-rt .btn-wrap a {margin-right: 25px;}

footer {background-color: #141615;color: #fff;padding-top: 75px;padding-bottom: 25px;}
footer .footer-top, footer .footer-md, footer .footer-bt {display: flex;padding: 0 135px 0 80px;justify-content: space-between;align-items: flex-start;}
footer .footer-top {margin-bottom: 50px;}
footer .footer-top > img {width: 124px;}
footer .footer-top h3 {font-size: 32px;}
footer .footer-top .link-wrap {position: relative;}
footer .footer-top .link-wrap::after {content: '';width: 950px;height: 1px;background-color: #6260FF;position: absolute;right: 0;bottom: -30px;} 
footer .footer-top .link-wrap a{font-weight: bold;text-align: center;line-height: 30px;display: inline-block;color: #fff;height: 30px;border-radius: 20px;}
footer .footer-top .demo {border: 1px solid rgba(255, 255, 255, 0.26);width: 119px;margin-right: 12px;}
footer .footer-top .start {background: #6260FF;width: 122px;}
footer .footer-md {text-align: left;margin-bottom: 66px;}
footer .footer-md .footer-link p{color: #666666;margin-bottom: 40px;font-family: 'NimbusSans';}
footer .footer-md .footer-link a {display: block;color: #fff;margin-bottom: 15px;opacity: 0.5;}
footer .footer-md .footer-link .contact-link {font-size: 14px;opacity: 0.8;}
footer .footer-md .footer-link .contact-link::after {content: '';display: inline-block;height: 1px;width: 100%;background-color: #2A27E8;margin-bottom: 8px;}
footer .footer-md .md-md {display: flex;}
footer .footer-md .md-md .footer-link {margin-right: 80px;}
footer .footer-md .footer-link .social {display: flex;}
footer .footer-md .footer-link .social a {margin-right: 24px;}
footer .footer-md .md-rt {margin-right: 50px;}
footer .footer-md .md-rt img {width: 32px;}
footer .footer-bt a {color: #666;}
footer .footer-bt .bt-md a:first-child{margin-right: 20px;}
footer .footer-bt .rt {width: 270px;text-align: left;}

@media (max-width: 1440px) {
    .wrap, .bg header.header-fixed {width: 100%;}
    .bg .page-top {width: 95%;}
    .main .feature .product .product-item {width: 49%;}
    .story-swiper .user-story {width: 44%;}
    footer .footer-top .link-wrap::after {width: 910px;}
}

@media (max-width: 768px) {
    .bg header {padding: 10px; padding-bottom: 40px;}
    .bg header .nav {position: absolute; top: 50px;}
    .bg header .btn-register {padding-left: 10px;padding-right: 10px;margin-left: 15px;}
    .bg header .nav .link-info {background: rgba(236, 240, 255, 0.5);}
    .bg header .nav .nav-item .dropdown.open.flex, footer .footer-top, footer .footer-md {flex-direction: column;}
    .bg header .nav .dropdown, .bg header .nav .blog-list, .video-wrap {width: 100%;}
    footer {padding: 20px;}
    footer .footer-top h3 {font-size: 20px; margin-top: 20px;margin-bottom: 20px;}
    footer .footer-top, footer .footer-md, footer .footer-bt {padding-left: 0px;padding-right: 0px; align-items: flex-start;margin-bottom: 10px;}
    footer .footer-md .md-md .footer-link {margin-right: 40px;}
    footer .footer-md .md-md {display: none;}
    footer .footer-bt .rt {width: auto;}

    .bg .page-top {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;}
    .bg .page-top h1, .main .feature .desc h2  {font-size: 20px;width: 100%;padding-left: 0;}
    .bg .page-top img {display: none;}
    .bg .page-top h3 {padding-left: 0;}
    .bg .page-top a {margin-left: 0;}
    .bg .customers-img {width: 95%;margin: 20px auto;}
    .main .feature .desc {flex-direction: column;padding: 20px;margin-bottom: 20px;}
    .main .feature .desc .tips, .main .feature .product .product-item p, .word-swiper .swiper-wrapper .swiper-slide h3,.main .designed .text-wrap h2 {width: 100%;}
    .main .feature .product {flex-direction: column; padding: 0 20px;}
    .main .feature .product .product-item {width: 100%;padding-left: 20px;height: 440px;margin-bottom: 20px;}
    .main .feature .product .product-item img {margin: 20px 0;}
    .main .feature .feature-items-wrap {width: 100%;flex-wrap: wrap;justify-content: space-around;margin: 20px 0;}
    .word-swiper {padding-bottom: 0;}
    .swiper-button-next, .swiper-button-prev {top: 68%;}
    .word-swiper .swiper-pagination {margin-bottom: 0;}
    .main .designed .wrap {padding: 20px;}
    .main .designed .text-wrap, .main .designed .num-wrap {flex-direction: column;}
    .main .designed .text-wrap h2 {font-size: 20px;}
    .main .designed .num-wrap {margin-top: 20px;}
    .main .designed .num-wrap p {text-align: center;}
    .main .designed .text-wrap .tips {width: 100%;}
    .story-swiper {margin-top: 20px;}
    .story-swiper .swiper-wrapper .swiper-slide {flex-direction: column;}
    .story-swiper .user-story {width: 95%; margin: 0 auto;}
    .story-swiper .user-story h4 {margin-top: 0;}
    .story-swiper .user-story p {margin-bottom: 20px;}
    .main .mobile-wrap {padding: 10px;background: unset;height: auto;}
    .main .mobile .mobile-rt {width: 100%; float: none;}
    .main .mobile .mobile-rt .btn-wrap {text-align: center;}
}