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

.bg {background: url(../image/bg.png) no-repeat bottom right;height: 585px;background-size: cover;}
.bg header {padding: 28px 64px;display: flex;justify-content: space-between;align-items: center; color: #fff;}
.bg header .nav {position: relative;display: flex;}
.bg header .nav .nav-item {margin-right: 24px;}
.bg header .nav .nav-item > a:-webkit-any-link {color: #fff;}
.bg header .nav .nav-item .nav-title {cursor: pointer;line-height: 24px;}
.bg header .nav .nav-item .nav-title:active {color: #fff;}
.bg header .nav .nav-item:hover .dropdown {display: block;}
.bg header .nav .caret {display: inline-block;width: 0;height: 0;cursor: pointer;margin-left: 7px;vertical-align: middle;border-top: 4px solid #fff;border-right: 4px solid transparent;border-left: 4px solid transparent;opacity: .5;}
.bg header .nav .dropdown {display: none;position: absolute;background-color: #fff;border-radius: 8px;padding: 10px 0;}
.bg header .nav .dropdown a {display: block;color: #353535;padding: 10px 20px;}
.bg header .nav .dropdown a:hover {color: #fff;background-color: #6260FF;}
.bg header .logo{display: flex;align-items: center;letter-spacing: 0.5em;width: 344px;}
.bg header .logo img {margin-right: 8px;}
.bg header .btn-login {color: #fff;}
.bg header .btn-register {color: #000;font-weight: bold;padding: 8px 26px;background-color: #fff;border-radius: 20px;margin-left: 25px;}
.bg .page-top p {color: #fff;}
.bg .page-top h1 {margin-top: 84px;margin-bottom: 32px;}
.bg .page-top h1 p{font-size: 48px;}
.bg .page-top h3 p {font-size: 16px;line-height: 150%;font-weight: 300;}

.main .feature {margin-top: -189px; display: flex;justify-content: center;}
.main .feature .feature-item{text-align: center;width: 390px;height: 311px;background-color: #fff;border-radius: 40px;padding-top: 20px;box-shadow: 0px 235px 94px rgba(0, 0, 0, 0.01), 0px 132px 79px rgba(0, 0, 0, 0.05), 0px 59px 59px rgba(0, 0, 0, 0.09), 0px 15px 32px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);;}
.main .feature .feature-item:first-child {margin-right: 35px;}
.main .feature .feature-item img {margin-bottom: 18px;}
.main .feature .feature-item h4 {font-size: 24px;color: #6260FF;line-height: 28px;margin-bottom: 13px;}
.main .feature .feature-item p {font-size: 14px;color: #7A7A7A; line-height: 150%;letter-spacing: -0.02em;width: 284px;margin: 0 auto 32px;}
.main .feature .feature-item a {display: block;color: #7A7A7A;}
.main .feature .feature-item a.active {width: 126px;padding: 8px 0;color: #fff;background-color: #6260FF;border-radius: 20px;margin: 0 auto 14px;}

.main .designed {background: linear-gradient(175.01deg, #E2EDFB 5.41%, #EBEFFB 85.71%);margin-top: -122px;padding-top: 188px;}
.main .designed h3 {font-size: 32px;color: #252D6F;letter-spacing: 0.02em;line-height: 38px;margin-bottom: 9px;}
.main .designed .text-wrap {display: flex;justify-content: space-between;align-items: flex-start;text-align: left;line-height: 175%;}
.main .designed .text-wrap .text-tt {color: #000;margin-bottom: 20px;line-height: 175%;}
.main .designed .text-wrap .text-content {color: #6D75B9;font-size: 14px;}
.main .designed .text-wrap .left-text {padding-left: 130px;padding-top: 26px;}
.main .designed .text-wrap .left-text .text-tt {font-size: 18px;}
.main .designed .text-wrap .left-text a {color: #6260FF;border-radius: 20px;border: 1px solid rgba(98, 96, 255, 0.5);padding: 10px;margin-top: 24px;display: inline-block;}
.main .designed .text-wrap .left-text a img {margin-bottom: -3px;margin-right: 6px;}
.main .designed .text-wrap .right-text {background-color: #fff;border-radius: 53px 0 0 53px;padding:35px 55px 35px 19px;display: flex;align-items: flex-start;}
.main .designed .text-wrap .right-text img {margin-top: 10px;margin-right: 10px;}
.main .designed .text-wrap .right-text .text-tt {margin-top: 20px;font-size: 14px;}
.main .designed .text-wrap .right-text .text-content {margin-top: -20px;font-size: 12px;}
.main .designed .img-wrap {margin-top: -210px;}

.main .customers {background-color: #eaeef3;text-align: center;padding-bottom: 45px;}
.main .customers .customers-tt {padding: 65px 0;}
.main .customers .customers-tt h3 {font-size: 30px;color: #253858;font-weight: bold;}
.main .customers .customers-tt p {font-size: 16px;margin-top: 20px;color: #42526e;line-height: 1.5;}
.main .customers .img-wrap {width: 1170px;margin: 0 auto;display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;}
.main .customers .img-wrap img {width: 180px;margin-bottom: 20px;}

.main .choose {text-align: center;}
.main .choose .choose-title {padding: 65px 0;}
.main .choose .choose-title h3{font-size: 30px;color: #253858;font-weight: bold;}
.main .choose .box-wrap {display: flex;justify-content: center;width: 1180px;flex-wrap: wrap;margin: 0 auto;}
.main .choose .choose-box {padding:15px 0;display: flex;align-items: flex-start;height:250px;width: 390px;}
.main .choose .choose-box:last-child{margin-right: 0;}
.main .choose .choose-box .iconbox img{transition:1.2s;margin-right: 20px;}
.main .choose .choose-box:hover .iconbox img{transform: rotateY(180deg);}
.main .choose .choose-box .choose-item{width:77%;color:#42526e;text-align: left;}
.main .choose .choose-box .choose-item h4{font-size:18px;margin-bottom:20px;}
.main .choose .choose-box .choose-item p em{display:block;float:left;width:5%;height: 10px;font-family:'Arial';font-size:20px; margin-top:-2px;opacity: 0.4;}
.main .choose .choose-box .choose-item p span{display:block;float:left;width:95%;margin-bottom: 10px;color: #42526e;font-size: 14px;}

.main .mobile {width: 1170px;margin: 0 auto 20px;background: url(../image/mobile/bg.jpg) no-repeat center;display: flex; padding: 50px 200px;color: #42526e;}
.main .mobile .mobile-rt {margin-left: 25px;}
.main .mobile .mobile-rt h3{font-size: 30px;margin-top: 30px;margin-bottom: 15px;font-weight: bold;}
.main .mobile .mobile-rt p.first {font-size: 26px;margin-bottom: 30px;}
.main .mobile .mobile-rt p.second {font-size: 18px;margin-bottom: 30px;line-height: 1.5;}
.main .mobile .mobile-rt .btn-wrap {margin-top: 25px;}
.main .mobile .mobile-rt .btn-wrap a {margin-right: 10px;}

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 h3 {font-size: 32px;}
footer .footer-top .link-wrap {position: relative;}
footer .footer-top .link-wrap::after {content: '';width: 930px;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;}
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-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 {width: 100%;}
    footer .footer-top .link-wrap::after {width: 890px;}
}

@media (max-width: 768px) {
    .bg {height: auto;padding-bottom: 20px;}
    .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 .logo {width: auto;}
    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 h1 {margin-top: 20px;margin-bottom: 20px;}
    .bg .page-top h1 p {font-size: 20px;}
    .main .feature {margin-top: 20px;flex-direction: column;}
    .main .feature .feature-item {width: 95%;margin: 0 auto;}
    .main .feature .feature-item:first-child {margin: 10px auto;}
    .main .designed {background: unset;padding-left: 10px; padding-right: 10px;}
    .main .designed h3 {text-align: left;font-size: 26px;white-space: nowrap;}
    .main .designed .text-wrap {flex-direction: column;}
    .main .designed .text-wrap .left-text {padding-left: 10px;}
    .main .designed .img-wrap {margin-top: 0;}
    .main .customers .img-wrap, .main .choose .box-wrap {width: 100%;}
    .main .choose .choose-box {width: 100%; height: auto;padding: 20px;}
    .main .mobile{width: 100%;background: unset;padding: 20px;}
    .main .mobile .img-phone {display: none;}
}