/* ==========================================================================
   易歪歪 · 站点样式（第四版实现）
   手写实现，类名体系：tb-*(顶栏) stage(头图) dl-*(下载钮) chev(箭头)
   fcard(功能卡) pnl(卡片) grid-t(表格) chip(徽章) msg(提示条) foot(页脚)
   ========================================================================== */

/* ---- 基础 ---- */
*,*::before,*::after{box-sizing:border-box}
html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background:#F7F7F7}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}
h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}
p{margin-top:0;margin-bottom:1rem}
ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}
a{color:#007bff;text-decoration:none;background-color:transparent}
a:hover{color:#0056b3;text-decoration:underline}
img,svg{vertical-align:middle;border-style:none}
svg{overflow:hidden}
table{border-collapse:collapse}th{text-align:inherit;text-align:-webkit-match-parent}
hr{box-sizing:content-box;height:0;overflow:visible;margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}
small{font-size:80%;font-weight:400}
strong{font-weight:bolder}
button{border-radius:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;overflow:visible;text-transform:none;cursor:pointer}
[type=button],button{-webkit-appearance:button}
input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;overflow:visible}

/* ---- 布局容器 ---- */
.box{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media(min-width:576px){.box{max-width:540px}}
@media(min-width:768px){.box{max-width:720px}}
@media(min-width:992px){.box{max-width:960px}}
@media(min-width:1200px){.box{max-width:1140px}}
.ln{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
.c6,.c12,.cmd,.clg4{position:relative;width:100%;padding-right:15px;padding-left:15px}
.c6{flex:0 0 50%;max-width:50%}
.c12{flex:0 0 100%;max-width:100%}
@media(min-width:768px){.cmd{flex-basis:0;flex-grow:1;max-width:100%}}
@media(min-width:992px){.clg4{flex:0 0 33.333333%;max-width:33.333333%}}

/* ---- 工具类 ---- */
.fx{display:flex}.fx-row{flex-direction:row}.fx-col{flex-direction:column}.fx-wrap{flex-wrap:wrap}
.fx-mid{align-items:center}.fx-ctr{justify-content:center}.fx-between{justify-content:space-between}
.ibl{display:inline-block}.blk{display:block}.vtop{vertical-align:top}
.ctr{text-align:center}.lft{text-align:left}
.dim{color:#6c757d}a.dim:hover{color:#545b62}
.bare{padding-left:0;list-style:none}
.fit{max-width:100%;height:auto}
.vis-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topln{border-top:1px solid #dee2e6}
.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.my2{margin-top:.5rem;margin-bottom:.5rem}
.pt4{padding-top:1.5rem}
@media(min-width:768px){.my5-md{margin-top:3rem;margin-bottom:3rem}.pt5-md{padding-top:3rem}}
@media(min-width:992px){.my0-lg{margin-top:0;margin-bottom:0}}
.inl{display:flex;flex-flow:row wrap;align-items:center}
.lite{background-color:#f8f9fa}
.sh1{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}

/* ---- 顶栏 ---- */
.tb{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.5rem 1rem}
.tb>.box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.tb-logo{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap;color:rgba(0,0,0,.9)}
.tb-logo:hover{text-decoration:none;color:rgba(0,0,0,.9)}
.tb-menu{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
.tb-a{display:block;padding:.5rem 1rem;color:rgba(0,0,0,.5)}
.tb-a:hover{color:rgba(0,0,0,.7);text-decoration:none}
.tb-on .tb-a{color:rgba(0,0,0,.9)}
.tb-zone{flex-basis:100%;flex-grow:1;align-items:center}
.tb-tg{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid rgba(0,0,0,.1);border-radius:.25rem;color:rgba(0,0,0,.5)}
.tb-tg .bars{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle}
.tb-tg .bars i{display:block;width:1.25em;height:2px;background:rgba(0,0,0,.5);border-radius:1px;margin:.28em auto}
@media(max-width:991.98px){
  .tb-zone{display:none}
  #tb-sw:checked~.tb-zone{display:block}
}
@media(min-width:992px){
  .tb{flex-flow:row nowrap;justify-content:flex-start}
  .tb-menu{flex-direction:row}
  .tb-zone{display:flex;flex-basis:auto}
  .tb-tg{display:none}
}
#tb-sw{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---- 按钮 / 徽章 ---- */
.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.btn-go{color:#fff;background-color:#28a745;border-color:#28a745}
.btn-go:hover{color:#fff;background-color:#218838;border-color:#1e7e34}
.btn-main{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-main:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}
.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}
.chip{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}
.chip-blue{color:#fff;background-color:#007bff}
.chip-grey{color:#fff;background-color:#6c757d}
.chip-green{color:#fff;background-color:#28a745}
.chip-warn{color:#212529;background-color:#ffc107}

/* ---- 头图(舞台) ---- */
.stage{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}
@media(min-width:576px){.stage{padding:4rem 2rem}}
.lede{font-size:1.25rem;font-weight:300}

/* ---- 提示条 ---- */
.msg{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}
.msg-err{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}
.msg-ok{color:#155724;background-color:#d4edda;border-color:#c3e6cb}
.msg-x{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;padding:0;background-color:transparent;border:0}
.msg-canx{padding-right:4rem}
.msg-canx .msg-x{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}

/* ---- 卡片 / 表格 ---- */
.pnl{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}
.pnl-h{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}
.pnl-h:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}
.pnl-b{flex:1 1 auto;min-height:1px;padding:1.25rem}
.pnl-t{margin-bottom:.75rem}
.pnl-x:last-child{margin-bottom:0}
.pnl-f{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}
.grid-t{width:100%;margin-bottom:1rem;color:#212529}
.grid-t th,.grid-t td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}
.grid-t thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}
.grid-t tbody+tbody{border-top:2px solid #dee2e6}
.grid-t.rows tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}

/* ---- 图标字体(平台字形) ---- */
@font-face{
  font-family:"uic";
  src:url('f/ui.woff2') format('woff2'),
      url('f/ui.woff') format('woff'),
      url('f/ui.ttf') format('truetype');
}
.uic{font-family:"uic";font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.uic-win::before{content:"\e68b"}
.uic-and::before{content:"\e630"}
.uic-ios::before{content:"\e676"}
.uic-mac::before{content:"\e689"}

/* ---- 大插图 svg 图标 ---- */
.bic{width:5em;height:5em;vertical-align:-0.15em;fill:currentColor;overflow:hidden}

/* ---- 首页:下载按钮 ---- */
.dl-btn{width:150px;height:50px;background:#366bb3;border-radius:5px;border:1px solid #3f60a1;cursor:pointer;margin:8px}
.dl-btn:hover{background:#0047a6}
.dl-ic{width:50px;height:100%;color:#fff;font-size:25px}
.dl-tx{font-weight:bold;font-size:18px;color:#fff}
.txt-glow{text-shadow:#000 2px 0 0,#000 0 2px 0,#000 -2px 0 0,#000 0 -2px 0}

/* ---- 首页:下滑箭头 ---- */
.chev{position:absolute;width:10px;height:3px;opacity:0;transform:scale3d(.5,.5,.5);animation:chevDrop 3s ease-out infinite}
.chev:first-child{animation:chevDrop 3s ease-out 1s infinite}
.chev:nth-child(2){animation:chevDrop 3s ease-out 2s infinite}
.chev::before,.chev::after{content:' ';position:absolute;top:0;height:100%;width:51%;background:#646b79}
.chev::before{left:0;transform:skew(0deg,30deg)}
.chev::after{right:0;width:50%;transform:skew(0deg,-30deg)}
@keyframes chevDrop{
  25%{opacity:1}
  33%{opacity:1;transform:translateY(30px)}
  67%{opacity:1;transform:translateY(40px)}
  100%{opacity:0;transform:translateY(55px) scale3d(.5,.5,.5)}
}

/* ---- 首页:功能卡 ---- */
.fcard{min-width:150px;height:150px;margin:5px;border-radius:15px;border:1px solid #DAE2EC}
.fcard:hover{border:1px solid #ADBED4}

/* ---- 下载页:备用链接 ---- */
.dl-alt{text-decoration:none;color:#007afe;font-weight:bold}
.dl-alt:hover{color:#ff7516}

/* ---- 页脚 ---- */
.foot-beian{font-size:12px;background:#2b333b;border-radius:8px;color:#848993;padding:8px;display:flex;justify-content:center}
.foot-note{display:flex;justify-content:center;margin-top:15px;font-size:13px;color:#2B333B}