.hero, .section, .foot {padding:20px 200px;font-size:1rem;}
.head {
    position:fixed;top:0;left:0;right:0;z-index:101;padding:10px 200px;background-color:var(--kui-bgcolor);color:var(--kui-color);
    display:flex;justify-content:space-between;font-size:1.2rem;/*box-shadow:0 1px 1px 1px rgba(185,185,185,.3)*/;
}
.logo {display:flex;}
.logo .anticon-menu {display:none;}
.logo .img {width:180px;height:50px;background-image:url(../img/logo1.png);}
.navi {margin:0;padding:0;padding-top:13px;list-style:none;display:flex;font-size:1.2rem;}
.navi a {color:var(--kui-color);}
.navi a:hover {color:#1c66b9;}
.navi li {margin-left:40px;}
.git {font-size:1.2rem;}
.git img {width:24px;margin-right:10px;}
.version .ant-btn {padding:0 10px;font-size:1.2rem;}
.language {margin-left:15px;padding-top:2px;}

.hero {
    background-color:#f8fcff;padding:120px 210px 50px 210px;height:520px;
    display:flex;justify-content:space-around;align-items:center;
}
.hero .content {width:50%;}
.hero .video iframe {width:500px;height:300px;}
.hero-name {font-weight:bold;font-size:3rem;}
.hero-desc {font-size:1.2rem;text-align:justify;padding:10px 0;}
.hero-btns {padding-top:30px;display:flex;}
.hero-btns img {height:30px;margin-top:5px;}
.hero-btn {min-width:110px;height:40px;font-size:16px;border-radius:20px;margin-right:15px;}

.feature {display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:0 auto;padding-top:60px;}
.feature .item {text-align:center;width:33.33%;margin-bottom:60px;}
.feature .item img {width:60px;height:60px;}
.feature .item h3 {font-size:20px;line-height:1;margin:20px 0;}
.feature .item p {color:#697b8c;line-height:22px;height:44px;}
.start {text-align:center;padding-top:0;padding-bottom:60px;}
.start p {text-align:center;margin:25px auto 30px auto;}
.start .code {
    width:90%;max-width:840px;margin:16px auto;padding:30px 50px;color:#151e26;
    font-family:sfmono-regular,Consolas,liberation mono,Menlo,Courier,monospace;
    line-height:28px;text-align:left;
    background:#f2f4f5;border-radius:5px;
}
.start .code-comment {color:forestgreen;}

.foot {background-color:#393d49;color:#d8d8d8;padding-top:40px;}
.foot .content {display:flex;justify-content:space-between;padding:20px 0;}
.foot .brand {padding:10px;width:40%;}
.foot .links, footer .qrcode {padding:20px 2px 0 20px;}
.foot .desc {padding:0 10px;}
.foot .qrcode {text-align:center;}
.foot ul {padding:10px 0;list-style:none;}
.foot ul li {height:30px;line-height:30px;}
.foot a {color:#fff;}
.foot h4 {color:#fff;}
.copyright {text-align:center;padding:20px 50px;border-top:1px solid #494d59;}

@media screen and (max-width:768px) {
    .head, .hero, .section, .foot {padding:20px 10px;}
    .navi {padding-top:10px;}
    .logo .navi, .version {display:none;}
    .logo .anticon-menu {display:block;font-size:2rem;padding-top:8px;padding-left:8px;}
    .hero {padding:90px 0 20px 0;flex-direction:column;}
    .hero .content {width:80%;}
    .hero .video {display:none;}
    .hero-name {font-size:2rem;}
    .hero-btns {text-align:center;}
    .hero-btns img {display:none;}
    .feature {padding-top:60px;}
    .feature .item {width:100%;}
    .start .code {padding:10px;}
    .foot .content {flex-direction:column;}
    .foot .brand {width:100%;}
}

.side {top:90px;}
.side .navi {flex-direction:column;}
.side .navi li {margin-left:10px;margin-bottom:10px;}
.side .ant-drawer-header-no-title {display:none;}

/*Dark*/
:root[theme=dark] body {background-color:var(--kui-bgcolor);color:var(--kui-color);}
:root[theme=dark] h3 {color:var(--kui-color);}
:root[theme=dark] .logo .img {background-image:url(../img/logo.png);}
:root[theme=dark] .hero, :root[theme=dark] .foot {background-color:rgb(45, 46, 46);}
:root[theme=dark] .ant-drawer-content {background-color:var(--kui-bgcolor);color:var(--kui-color);}
:root[theme=dark] .code {background-color:rgb(40, 44, 45);color:rgb(211, 206, 196);}