.hd-page-footer{padding:0.16rem 0;margin:0 auto;text-align:center}.hd-page-footer>div{margin:0 0.12rem;font-size:0.12rem;line-height:0.2rem;color:rgba(95,104,136,.6)}
.hd-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

.hd-icon-app-logo {
  background-image: url(../../public/img/71d6b4cd1139fa021079e84fce56ad4f.png);
}

.hd-icon-app-logo-white {
  background-image: url(../../public/img/58a2a747936371bbceb39023c28345c2.png);
}

*{font-size:0.15rem}

html{font-family:PingFangSC-Regular,"PingFang SC",sans-serif}

body,h1,h2,h3,h4,h5,h6,p{margin:0}
html{height:100%;background-image:-webkit-linear-gradient(top, #e2f2ef, #fff 100%);background-image:linear-gradient(180deg, #e2f2ef, #fff 100%);background-repeat:no-repeat}.hd-tutorial-page{padding-top:0.42rem;margin:0 auto 0 auto}.hd-tutorial-page__head{position:fixed;top:0;z-index:9;box-sizing:border-box;width:100%;padding:0.08rem 0.12rem;background:#f7f7f7}.hd-tutorial-page__head>div{margin:0 auto}.hd-tutorial-page__head a{text-decoration:none}.hd-tutorial-page__head a span{font-family:PingFangSC,PingFangSC-Semibold;font-size:0.14rem;font-weight:600;line-height:0.18rem;color:#333}.hd-tutorial-page__head a>*{vertical-align:middle}.hd-tutorial-page__logo{font-size:0.26rem;line-height:0.28rem}.hd-tutorial-page__body{width:3.6rem;margin:0 auto}.hd-tutorial-page__body h1{margin:0.24rem 0 0.12rem 0}.hd-tutorial-page__body h1>span{margin-right:0.32rem;font-family:PingFangSC,PingFangSC-Semibold;font-size:0.28rem;line-height:0.28rem;color:#201c1c;vertical-align:middle}.hd-tutorial-page__body h1>div{margin:0.16rem 0 0 0}.hd-tutorial-page__body h1>div button{padding:0.06rem 0.12rem;margin-right:0.12rem;font-size:0.14rem;line-height:0.2rem;color:#333;text-align:center;vertical-align:middle;cursor:pointer;background:rgba(0,0,0,.06);border:none;border-radius:0.04rem}.hd-tutorial-page__body h1>div button.is-active{color:#fff;background:#009982}.hd-tutorial-page__body>div:nth-child(2){color:#555}.hd-tutorial-page__pane{margin:0.12rem auto}.hd-tutorial-page__card{position:relative;width:3.6rem;margin:0 0 0.2rem 0;overflow:hidden;background:#fff;border-radius:0.08rem;box-shadow:0 0.08rem 0.2rem 0 rgba(20,25,54,.04)}.hd-tutorial-page__card>span{position:absolute;right:0.1rem;bottom:0.6rem;padding:0.02rem 0.08rem;font-family:PingFangSC,PingFangSC-Regular;font-size:0.14rem;line-height:0.2rem;color:#fff;text-align:center;background:rgba(0,0,0,.2);border-radius:0.04rem}.hd-tutorial-page__card>h2{padding:0.12rem 0;font-family:PingFangSC,PingFangSC-Semibold;font-size:0.18rem;line-height:0.25rem;color:#333;text-align:center}.hd-tutorial-page .video-js{width:3.6rem;height:2.025rem;margin:0 auto;background-color:#f1f2f5}.hd-tutorial-page .video-js .vjs-tech,.hd-tutorial-page .video-js .vjs-poster{background-color:#f1f2f5;border-top-left-radius:0.08rem;border-top-right-radius:0.08rem}.hd-tutorial-page .video-js .vjs-big-play-button{position:absolute;top:50%;left:50%;width:0.56rem;height:0.56rem;background-color:rgba(0,0,0,0);background-image:url(../../public/img/916953f5e6870fe002c0b7dfcab2f6ab.png);background-repeat:no-repeat;background-size:contain;border:none;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.hd-tutorial-page .video-js .vjs-big-play-button .vjs-icon-placeholder{display:none}.hd-tutorial-page .video-js .vjs-play-control{-webkit-box-ordinal-group:2;-webkit-order:1;order:1}.hd-tutorial-page .video-js .vjs-current-time{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-ordinal-group:3;-webkit-order:2;order:2;padding:0 0.1rem}.hd-tutorial-page .video-js .vjs-progress-control{-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-ordinal-group:4;-webkit-order:3;order:3}.hd-tutorial-page .video-js .vjs-progress-control .vjs-progress-holder,.hd-tutorial-page .video-js .vjs-progress-control:hover .vjs-progress-holder{margin:0;font-size:1em}.hd-tutorial-page .video-js .vjs-duration{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-ordinal-group:5;-webkit-order:4;order:4;padding:0 0.1rem}.hd-tutorial-page .video-js .vjs-fullscreen-control{-webkit-box-ordinal-group:6;-webkit-order:5;order:5}@media(orientation: landscape){.hd-tutorial-page__head{padding:0.12rem 0}.hd-tutorial-page__head>div{width:12rem}.hd-tutorial-page__head>div>a span{font-size:0.2rem}.hd-tutorial-page__logo{font-size:0.4rem;line-height:0.28rem}.hd-tutorial-page__body{min-width:10rem}.hd-tutorial-page__body h1{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin:0.55rem 0 0.24rem 0;line-height:0.4rem}.hd-tutorial-page__body h1>div{margin:0}.hd-tutorial-page__pane{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0.2rem auto}.hd-tutorial-page__card{width:3.2rem;margin:0 0.2rem 0.2rem 0}.hd-tutorial-page__card:nth-child(3n){margin-right:0}.hd-tutorial-page .video-js{width:3.2rem;height:1.8rem}.hd-tutorial-page__foot>div{display:inline-block}}