@font-face{font-family:'DINExp';src:url("../fonts/Altinn-DINExp-Bold.woff2");font-weight:700}.header{color:#fff;height:60px;background-color:#1c2c3c}.main{height:calc(100vh - 60px);background-color:#fff}.header>.container,.main>.container{width:1140px;margin:0 auto;display:flex;height:100%}.header>.container{align-items:center;background-color:#1c2c3c}.main>.container{background-color:#fff}.logo{display:flex;align-items:center}.logo h1{font-size:32px;color:#fff;margin:0;font-family:'DINExp';position:relative;top:3px}.logo sup{position:relative;top:-8px;left:2px}.logo p{margin:0 0 0 24px;font-size:16px;border:rgba(255,255,255,0.4) solid 1px;line-height:1;padding:4px 12px;border-radius:60px;color:rgba(255,255,255,0.8)}.top-nav{flex:1}.nav{width:220px;border-right:1px solid #dcdfe6;padding-top:50px;height:100%;overflow:auto}.nav .nav-item .title{line-height:46px;background-color:#f2f6fc;border-left:5px #2879fe solid;padding-left:12px;color:#303133;margin-top:12px}.nav .nav-item ul{margin-top:8px}.nav .nav-item ul li{line-height:40px;padding-left:17px;padding-right:20px}.nav .nav-item ul li a{display:inline-block;height:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav .nav-item ul li a.is-active{color:#2879fe;cursor:default}.article{flex:1;padding:50px 0 40px 40px;position:relative;height:100%;overflow:auto;scrollbar-width:none}.article::-webkit-scrollbar{width:0 !important}.article .section{min-height:calc(100vh - 220px)}.article .section>h2{font-weight:400;color:#1f2f3d;font-size:28px;margin:0}.article .section>h3{margin:55px 0 20px;font-weight:400;color:#1f2f3d;font-size:22px}.article .section>p{font-size:14px;color:#5e6d82;line-height:1.5em}.article .section>.demo-block{margin-bottom:24px;border:1px solid #dcdfe6;border-radius:3px;transition:0.2s}.article .section>.demo-block>.effect{padding:24px}.article .section>.demo-block>.effect .item:not(:last-child){margin-bottom:16px}.article .section>.demo-block>.code{background-color:#f4f6f8;padding:12px 24px}.article .section>.demo-block>.code pre{line-height:1.6;font-family:Courier New;font-size:12px}.article .section .option-block .foxui-table .foxui-table-thead .foxui-table-tr .foxui-table-th,.article .section .method-block .foxui-table .foxui-table-thead .foxui-table-tr .foxui-table-th{font-weight:normal;color:#909090}.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-td:nth-child(1),.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-th:nth-child(1){flex:inherit;width:15%;display:flex}.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-td:nth-child(2),.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-th:nth-child(2){flex:inherit;width:45%;display:flex}.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-td:nth-child(3),.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-th:nth-child(3){flex:inherit;width:25%;display:flex}.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-td:nth-child(4),.article .section .option-block .foxui-table .foxui-table-tr .foxui-table-th:nth-child(4){flex:inherit;width:15%;display:flex}.article .section .method-block .foxui-table-tr .foxui-table-td:nth-child(1),.article .section .method-block .foxui-table-tr .foxui-table-th:nth-child(1){flex:inherit;width:20%;display:flex}.article .section .method-block .foxui-table-tr .foxui-table-td:nth-child(2),.article .section .method-block .foxui-table-tr .foxui-table-th:nth-child(2){flex:inherit;width:65%;display:flex}.article .section .method-block .foxui-table-tr .foxui-table-td:nth-child(3),.article .section .method-block .foxui-table-tr .foxui-table-th:nth-child(3){flex:inherit;width:15%;display:flex}.article .footer{font-size:12px;color:#909399;margin-top:40px;text-align:center}.article .footer a{font-size:12px}.icon-box ul{border-top:1px solid #dcdfe6;border-left:1px solid #dcdfe6;box-sizing:border-box;display:flex;flex-wrap:wrap;width:878px;margin:0 auto}.icon-box ul li{box-sizing:border-box;width:146px;height:146px;border-bottom:1px solid #dcdfe6;border-right:1px solid #dcdfe6;position:relative;color:#606266;transition:0.3s;cursor:pointer;user-select:none}.icon-box ul li:hover{color:#2879fe}.icon-box ul li>i{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-size:32px}.icon-box ul li>span{position:absolute;top:60%;left:50%;transform:translateX(-50%);display:block;width:80%;text-align:center}.grey-lighter,.grey-normal,.grey-dark{height:40px;border-radius:4px;text-align:center;line-height:40px;color:#606060}.grey-lighter{background-color:#e5e9f2}.grey-normal{background-color:#d3dce6}.grey-dark{background-color:#99a9bf}.padding-4{padding:4px 8px;margin-right:4px}.class-block p{line-height:1;margin:0}