@charset "utf-8";
/* Reset ================================================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after{content:''; content: none;}
:focus {outline: 0;}
fieldset{border: 0; margin: 0; padding: 0;}
ins{text-decoration: none;}
del{text-decoration: line-through;}
table{border-collapse: collapse; border-spacing: 0;}
img{ border:0;}
a{text-decoration: none; color: #1890ff;}
*{box-sizing: border-box;}
div{display: block;}
body{ margin:0; padding: 0; font-family:'Muli', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;background: url(header.jpg);background-repeat: no-repeat;background-position: top center;}
.wrapper{position: relative; width: 1170px; margin:0 auto;}
.wrapper-big{position: relative; width: 1294px; margin:0 auto;}
.header{position: relative; width: 100%;}
.header .head{text-align: center;}
.header .head .logo{padding-top: 35px;}
.header .head .desc{font-size: 60px; font-weight: 400; color: #FFF; line-height: 60px; padding: 80px 0 15px 0px;}
.header .head .summary{font-size: 45px; padding-bottom: 20px; font-weight: 600; line-height: 45px; color: #FFF;}
.header .head .summary-un{ font-size: 30px; font-weight: 700; color: #ffe400; line-height: 30px; padding-bottom: 40px;}
.form{position: relative; display: inline-block; width: 600px; height: 50px; background: #FFF; border-radius: 5px;}
.form-un{position: relative; display: inline-block; width:100%; margin-top: 10px; padding-bottom: 40px;}
.form-un .row{position: relative; width:100%; margin:10px 0 0 0;}
.form-un .row .col{position: relative; display: inline-block; width:calc((100% - 75px) / 2); padding: 0 35px; font-size: 24px; font-weight: 400; color: rgba(255,255,255,.8);}
.form-un .row .col.left{text-align: right;}
.form-un .row .col.right{text-align: left;}
.form-un .row .col.left:after, .form-un .row .col.right:after{position: absolute; content: ''; width:6px; height: 6px; border-radius: 50%; background: #FFF;top:14px;}
.form-un .row .col.left:after{ right:15px;}
.form-un .row .col.right:after{left: 15px;}
.form-un-link{position: relative; display: inline-block; padding: 15px 25px; border:2px #FFF solid; border-radius: 3px; font-size: 18px; font-weight: 500; color: #FFF; line-height: 15px;}
.form .button{position: relative; display: inline-block; vertical-align: top; width: 250px; height: 50px; border-radius: 0px 4px 4px 0px; background: #ff9c00; text-align: center; font-size: 18px; color: #FFF; line-height: 48px;}
.form .text{position: relative; display: inline-block; vertical-align: top; width: calc(100% - 250px - 5px); height: 50px; line-height: 48px; padding: 0 20px; font-size: 18px; color: #000; border:0; border-radius: 4px 0px 0px 4px;}
.form .text::placeholder{color: rgba(0,0,0,.4);}
.demo-image{position: relative; width: 100%; height: 660px; margin:60px 0 0 0; background: #FFF; box-shadow: 0px 30px 50px rgba(2,37,84, .09); border-radius: 20px;}
.demo-image-list{position: relative; width:100%; height: 100%;}
.demo-image .col{position: relative; display: inline-block; width: calc((100% - 5px) / 2); vertical-align: top; text-align: center; font-size: 20px; font-weight: 700; line-height: 30px; color: #4381f8;}
.demo-image img{max-width: 100%;border-radius: 19px; display: block;}
.demo-image li{border-radius: 20px;}
.timeline{position: relative; width: 100%; background: #f7faff; padding: 100px 0px; margin-top:80px;}
.timeline-bg{position: relative; width: 100%; border-radius: 2px; background: #FFF; box-shadow: 0px 0px 50px rgba(5,62,140,.08); padding: 90px 0px;}
.timeline-bg .head{position: relative; width: 100%; text-align: center;}
.timeline-bg .head h3{font-size: 48px; font-weight: 400; color: #000;}
.timeline-bg .head h4{font-size: 24px; font-weight: 400; color: #000; line-height: 30px; margin-top:15px;}
.timeline-bg .head h2{font-size: 64px; font-weight: 700; color: #4285f4; line-height: 78px;}
.timeline-bg .timeline-main{position: relative; width: 100%; margin-top:60px; }
.timeline-bg .timeline-main .row{position: relative; width: 100%; padding-bottom: 25px;}
.timeline-bg .timeline-main .row:after{position: absolute; content: ''; width: 50%; border-right: 1px #b7b7b7 dashed; height: 100%; left:0px; top: 0px;}
.timeline-bg .timeline-main .row .col{position: relative; display: inline-block; vertical-align: top; width: calc((100% - 5px) / 2);}
.timeline-bg .timeline-main .row .col.left{padding: 0 30px 0 50px; text-align: right;}
.timeline-bg .timeline-main .row .col.right{padding: 0 50px 0 30px; text-align: left;}
.timeline-bg .timeline-main .row .col h3{ font-size: 45px; font-weight: 400; color: #000; padding: 15px 0px; position: relative;}
.timeline-bg .timeline-main .row .col .desc{font-size: 23px; line-height: 30px; color: #000;}
.bull{position: absolute; width: 25px; height: 25px; background: url(bull.png) no-repeat; top: 60px; z-index: 2;}
.timeline-bg .timeline-main .row .col.left h3 .bull{right: -46px;}
.timeline-bg .timeline-main .row .col.right h3 .bull{left: -44px;}
.timeline-bg .timeline-main .row:first-child:after{top:200px;}
.timeline-bg .timeline-main .row:last-child:after{bottom:160px; top: auto;}
.timeline-bottom{position: relative; width: 100%; padding: 75px 0px; background: #FFF;}
.timeline-bottom .col{position: relative; display: inline-block; vertical-align: top; width: calc((100% - 5px) / 2);}
.timeline-bottom .col.left{text-align: left; font-size: 24px; line-height: 30px; color: #585d68; padding-right: 100px;}
.timeline-bottom .col.left img{max-width: 100%;}
.timeline-bottom .col.right{text-align: left; font-size: 24px; color: #000; line-height: 30px;}
.timeline-bottom .col h3{font-size: 36px; font-weight: 700; color: #4285f4; padding-bottom: 15px;}
.timeline-bottom .col.right .form{width: 100%; border:1px #d7d7d7 solid;}
.timeline-bottom .col.right .form .text{ width: calc(100% - 250px - 7px); height: 48px;}
.timeline-bottom .col.right .form .button{height: 48px;}
.timeline-bottom-end{position: relative; width: 100%; padding: 65px 0px; background: #f7faff;}
.timeline-footer{position: relative; width: 100%; height: 70px; background: #171d22;}
.logo-footer{position: relative; display: inline-block; width: 144px; margin-top: 18px;}
.logo-footer img{max-width: 100%;}
.timeline-footer .copyright{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: 400; color: rgba(255,255,255,.4); padding-top: 12px;}
.timeline-footer .social{position: relative; float: right; text-align: right; display: inline-block;}
.timeline-footer .social .item{display: inline-block; width: 40px; height: 40px; margin:15px 0 0 12px;}
.partner{ width: 100%; position: relative; padding-bottom: 50px;}
.partner h2{ text-align: center; font-size: 45px; font-weight: 700; color: #4285f4; padding-bottom: 10px;}
.partner h4{ text-align: center; font-size: 22px; font-weight: 400; color: #000; line-height: 30px;}
.partner-slide{ position: relative; width: 100%;}
.timeline::before, .timeline-bottom-end::before{position: absolute; content: ''; background: url(pattern-ft-r.png); width:199px; height:431px; right: 0; top: -650px; z-index: 0;}
.timeline::after, .timeline-bottom-end::after{position: absolute; content: ''; background: url(pattern-left.png); width:124px; height: 257px; left: 0; top: 30%; z-index: 2;}
.timeline-bottom-end::before{ top: -350px;}
.timeline-bottom-end::after{top: -120px;}
.timeline::before{top: -875px;}
.demo-image .bx-wrapper .bx-pager{bottom: 20px;}
.demo-image .bx-wrapper .bx-pager.bx-default-pager a{ background: #CCC; margin:0px 2px;}
.timeline-bg .form-un-link {background: #ffa300; border-color: #ffa300; color: #FFF; }
.timeline-bg-link{position: relative; width:100%; margin:40px 0 0 0; text-align: center;}
.timeline-bottom .h3{font-size: 45px; font-weight:700; color: #4289f0; padding-bottom: 40px; line-height: 45px; text-align: center;}
.timeline-bottom p.note{text-align: right; font-size: 16px; color: #585d67; font-style: italic; line-height: 16px; padding-top: 5px;}
@media screen and (max-width: 480px) {
br, .timeline::before, .timeline-bottom-end::before, .timeline::after, .timeline-bottom-end::after{display: none;}
.wrapper, .wrapper-big{ width: 96%; margin: 0 2%;}
.header .head .demo-image .col, .timeline-bottom .col, .form{width: 100%;}
.header .head .desc{font-size: 32px; line-height: 45px; padding-top: 80px;}
.form .button{width:160px; font-size: 12px;}
.form .text{ width: calc(100% - 160px - 5px); font-size: 14px; padding: 0 10px;}
.header .head .demo-image{margin-top: 80px;}
.header .head .demo-image .col{margin:10px 0;}
.header .head .demo-image .col p{padding-top: 20px;}
.timeline-bg .head h3{font-size: 40px;}
.timeline-bg .head h2{font-size: 45px;}
.timeline-bg .timeline-main .row .col{width: 100%;}
.timeline-bg .timeline-main .row .col.left, .timeline-bg .timeline-main .row .col.right{padding: 0 0 0 50px; text-align: left;}
.timeline-bg .timeline-main .row .col h3{font-size: 35px;}
.timeline-bg .timeline-main .row:after{width: 1px; left:20px;}
.timeline-bg .timeline-main .row .col.left h3 .bull, .timeline-bg .timeline-main .row .col.right h3 .bull{left: -40px; right: auto;}
.timeline-bg .timeline-main .row:last-child:after {bottom: 194px;}
.timeline-bottom .col.right{text-align: center;}
.timeline-bottom .col h3{line-height: 45px;}
.timeline-bottom .col.right .form .text{ float: left; width: calc(100% - 150px);}
.timeline-bottom .col.right .form .button{ float: right; width: 150px;}
.partner h2{font-size: 28px;}
.partner h4{font-size: 20px;}
.logo-footer, .timeline-footer .copyright, .timeline-footer .social{width: 100%; position: relative; text-align: center;}
.timeline-footer{height: auto; padding: 10px 0;}
.timeline-footer .copyright{text-align: center; top: 0; left: 0; transform: translate(0,0);}
.timeline-footer .social{text-align: center; float: none;}
.timeline-bottom .col.left{padding-right: 0px; padding-bottom: 20px;}
.header .head .summary{font-size: 35px;}
.header .head .summary-un{font-size: 20px;}
.form-un .row .col{width: 100%;}
.form-un .row .col.left{text-align: left;}
.form-un .row .col.left:after{right: auto; left: 15px;}
.form-un-link{font-size: 12px;}
.demo-image{height: auto;}
.timeline-bottom .h3{font-size: 35px;}
}