*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";line-height:1.5;color:#343434;-webkit-font-smoothing:subpixel-antialiased;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum"}a{color:inherit;text-decoration:none}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}img{vertical-align:middle}
.zw-menu-item .chinese{margin-left:6px;opacity:.5}.zw-menu-item-group__list .zw-menu-item{padding-left:36px !important}
header{position:fixed;top:0;z-index:1000;width:100%;height:65px;background-color:#fff}header .header-container{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}header .logo{width:280px;text-align:center}header .logo a{display:block;height:65px;line-height:65px;color:#333;text-decoration:none;font-size:18px;font-weight:500;white-space:nowrap;outline:none}header .logo img{height:32px;margin-right:10px;margin-top:-5px}header .logo .logo-version{font-size:12px;color:#999;margin-left:3px}header .search{-webkit-flex:auto;-ms-flex:auto;flex:auto;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:33px;padding:0 6px}header .search .za-icon{color:#999;font-size:18px}header .search input{display:inline-block;background:transparent;border:0;outline:0 none;width:100%;padding-left:6px}header .search input::-webkit-input-placeholder{color:#999}header .search input::-moz-placeholder{color:#999}header .search input:-ms-input-placeholder{color:#999}header .search input::-ms-input-placeholder{color:#999}header .search input::placeholder{color:#999}header .search .algolia-autocomplete{-webkit-flex:auto;-ms-flex:auto;flex:auto;line-height:1}header .search .algolia-autocomplete .ds-dropdown-menu{font-size:14px;border:none;-webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.15);box-shadow:0 2px 10px 0 rgba(0,0,0,.15)}header .search .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{border:none}header .search .algolia-autocomplete .ds-dropdown-menu:before{display:none}header .search .algolia-autocomplete .algolia-docsearch-suggestion--title{color:#464646}header .search .algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#00bc70}header nav{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-right:60px}header nav ul{list-style:none;margin:0;padding:0;height:100%}header nav ul li{display:inline-block;height:65px;line-height:65px;text-align:center;font-size:16px;color:#999}header nav ul li a{display:block;padding:0 30px;color:#333;cursor:pointer;-webkit-transition:color .3s ease-in;transition:color .3s ease-in}header nav ul li a.active,header nav ul li a:hover{color:#00bc70}header nav .lang,header nav .github{margin-left:30px}header .header-icon{display:none;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}header .header-icon-menu,header .header-icon-more{width:65px}.header-menu{position:fixed;top:0;bottom:0;width:280px;background-color:#fff;padding:30px 0 50px;overflow-y:scroll}.header-nav{width:150px;background-color:#fff}@media(max-width: 1200px){header .lang,header .github{display:none}}@media(max-width: 1000px){header .search{display:none}}@media(max-width: 768px){header .logo{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}header nav{display:none}header .header-icon{display:-webkit-flex;display:-ms-flexbox;display:flex}}
.scroll-to-top{width:60px;height:60px;line-height:60px;text-align:center;color:#999;font-size:20px;border-radius:30px;background-color:#fff;opacity:.9;-webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.2);box-shadow:0 2px 10px 0 rgba(0,0,0,.2)}.scroll-to-top .za-icon{color:#ccc;font-size:20px}.scroll-to-top:hover{-webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.3);box-shadow:0 2px 10px 0 rgba(0,0,0,.3)}.scroll-to-top:hover .za-icon{color:#999}
.index-page{width:100%;position:absolute;top:0;bottom:0;left:0;background-color:#fff;background-image:url(../images/bg@2x.db553f72.png);background-repeat:no-repeat;background-size:cover;background-position:top right}.index-page header{background-color:transparent}.index-page header nav{padding-right:0}.index-page header .header-container{max-width:1200px;margin:0 auto;padding:0 24px}.index-page header .logo{width:200px;text-align:left}.index-page main{position:relative;max-width:1200px;margin:0 auto;padding:100px 24px;height:100%}.index-page .introduce{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:42%;height:100%}.index-page .introduce .title{font-size:64px;font-weight:bold;line-height:1}.index-page .introduce .title span{color:#00bc70}.index-page .introduce .description{margin-top:30px;font-size:20px;line-height:1.5}.index-page .introduce .navigation{margin-top:100px;margin-bottom:60px;text-align:left}.index-page .introduce .navigation button{float:left;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-height:50px;background-color:#00bc70;border:0;color:#fff;font-size:18px;border-radius:25px;outline:none;margin-bottom:10px;padding:0 30px}.index-page .introduce .navigation button:not(:last-child){margin-right:15px}.index-page .introduce .navigation button:hover{background:#00a864}.index-page .introduce .navigation button.ghost{border:1px solid #00bc70;color:#00bc70;background-color:#fff}.index-page .introduce .navigation button.ghost:hover{border-color:#00a864;color:#00a864}.index-page .banner{float:right;width:55%;height:100%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.index-page .banner img{margin-top:80px;width:100%;-webkit-animation:banner-move 60s infinite;animation:banner-move 60s infinite}.btn-try{min-width:auto !important;line-height:1}@-webkit-keyframes banner-move{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}20%{-webkit-transform:translate3d(-30px, -30px, 0);transform:translate3d(-30px, -30px, 0)}40%{-webkit-transform:translate3d(30px, -30px, 0);transform:translate3d(30px, -30px, 0)}60%{-webkit-transform:translate3d(-30px, 30px, 0);transform:translate3d(-30px, 30px, 0)}80%{-webkit-transform:translate3d(30px, 30px, 0);transform:translate3d(30px, 30px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes banner-move{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}20%{-webkit-transform:translate3d(-30px, -30px, 0);transform:translate3d(-30px, -30px, 0)}40%{-webkit-transform:translate3d(30px, -30px, 0);transform:translate3d(30px, -30px, 0)}60%{-webkit-transform:translate3d(-30px, 30px, 0);transform:translate3d(-30px, 30px, 0)}80%{-webkit-transform:translate3d(30px, 30px, 0);transform:translate3d(30px, 30px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media only screen and (max-width: 768px){.index-page header .header-container{padding-right:0}.index-page .banner{float:none;width:100%;height:auto}.index-page .banner img{margin-top:60px}.index-page .introduce{position:fixed;left:0;bottom:0;width:100%;height:auto;padding:0 24px;text-align:center}.index-page .introduce .title{display:none}.index-page .introduce .description{font-size:18px}.index-page .introduce .navigation{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:30px 0}.index-page .introduce .navigation button{font-size:16px}}
.side-bar{position:fixed;top:65px;bottom:0;width:280px;border-right:1px solid #ebedf0;background-color:#fff;margin-right:-1px;padding:30px 0 50px;overflow-y:scroll;z-index:100}
footer{display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:260px;margin-left:280px;padding:30px 50px;background-image:-webkit-gradient(linear, left top, right bottom, color-stop(50%, #12c287), color-stop(50%, #0db77e));background-image:-webkit-linear-gradient(left top, #12c287 50%, #0db77e 50%);background-image:linear-gradient(to right bottom, #12c287 50%, #0db77e 50%)}footer .group{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1;margin-bottom:40px}footer .group h2{font-weight:500;font-size:16px;color:#fff;margin-top:0;margin-bottom:20px}footer .group ul{list-style:none;margin:0;padding:0}footer .group ul li{margin:12px 0;line-height:1;color:rgba(255,255,255,.4)}footer .group a{font-size:14px;color:#fff}footer .group a:hover{text-decoration:underline}
.code-preview{position:relative}.code-preview .codesanbox{position:absolute;right:0;top:0}.markdown{line-height:2;font-size:14px;color:#1f2d3d}.markdown a{-webkit-transition:color .3s ease;transition:color .3s ease;color:#00bc70}.markdown a:hover{color:#00d17d}.markdown .grid-container{overflow-x:auto;margin:20px 0}.markdown ul{margin-left:0;padding-left:0}.markdown ul>li{margin-left:20px;padding-left:4px;list-style-type:circle}.markdown pre{margin:0;padding:1em;overflow:auto;font-size:14px;line-height:1.5;background-color:#f6f8fa;border-radius:3px}.markdown h1,.markdown h2,.markdown h3,.markdown h4{font-weight:normal}.markdown h1{font-size:28px}.markdown h2{font-size:24px;line-height:32px;margin:1.6em 0 .6em}.markdown h3{font-size:18px;margin:1.6em 0 .6em}.markdown blockquote{margin:0;padding:0 20px;color:#6a737d;border-left:4px solid #dfe2e5}.markdown table.grid{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;width:100%;min-width:600px;font-size:14px;border-collapse:collapse;border-spacing:0}.markdown table.grid strong{font-weight:normal}.markdown table.grid th{text-align:left;border-top:1px solid #eaeefb;background-color:#f9fafc;white-space:nowrap;font-weight:normal;color:#999}.markdown table.grid td,.markdown table.grid th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.markdown table.grid th:first-child,.markdown table.grid td:first-child{padding-left:15px}
.components-page header{-webkit-box-shadow:0 2px 8px #f0f1f2;box-shadow:0 2px 8px #f0f1f2}.components-page main{position:relative;min-width:1200px;margin:100px auto 15px;background-color:#fff;overflow:hidden}.components-page main .main-container{min-height:700px;margin:0 60px 60px 340px;overflow:hidden}.components-page main .main-container.no-simulator{margin-right:60px}.components-page main .main-container.no-simulator .demo{margin-right:0}.components-page main .main-container .demo{margin-right:415px}.components-page main .simulator{position:absolute;top:0;right:60px;z-index:10}.components-page main .simulator iframe{-webkit-box-sizing:content-box;box-sizing:content-box;background:#f6f6f6;border:1px solid #eaeefb;width:375px;height:667px}.components-page main .simulator__control{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;right:-30px;width:30px;height:30px;background:#f6f6f6;cursor:pointer}.components-page main .simulator__control .za-icon{line-height:1}.components-page main .simulator--affix{position:fixed;top:100px}.components-page main .simulator--affix .simulator__control{color:var(--theme-primary)}@media screen and (max-width: 768px){.side-bar{display:none}.components-page main{min-width:100%}.components-page main .main-container{margin:0 20px}.components-page main .main-container.no-simulator{margin-right:20px}.components-page main .main-container .demo{margin-right:0}.components-page main .simulator{position:static;width:auto;text-align:center;margin-bottom:40px}.components-page main .simulator iframe{width:320px;height:568px}.components-page footer{display:block;margin-left:0}.za-back-to-top{right:30px !important;bottom:30px !important}}
.design-page header{-webkit-box-shadow:0 2px 8px #f0f1f2;box-shadow:0 2px 8px #f0f1f2}.design-page main{position:relative;min-width:1200px;margin:100px auto 15px;background-color:#fff;overflow:hidden}.design-page main .main-container{min-height:700px;margin:0 60px 60px 340px;overflow:hidden}@media screen and (max-width: 768px){.side-bar{display:none}.design-page main{min-width:100%}.design-page main .main-container{margin:0 20px}}