/**
 * CSS Global Style
 * @author: Wey;
 * @data: 2014-06-17;
**/


html,
body,
div,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
textarea,
p,
span,
from {
   margin: 0;
   padding: 0
}

body,
input,
button,
select,
textarea {
   font: 14px/1.5 "Microsoft Yahei", "Helvetica Neue";
   color: #555;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-font-feature-settings: "liga", "kern";
}

body{
   min-width: 1170px;
}

table {
   border-collapse: collapse;
   border-spacing: 0
}

img,
a img {
   border: 0
}

a {
   color: #555;
   outline: medium none;
   text-decoration: none;
   transition: color .2s linear, background-color .2s linear;
}

a:hover {
   text-decoration: none;
   color: #0097e8;
}

label {
   cursor: pointer
}

ul li,
.ol li {
   list-style: none
}

em,
cite,
i {
   font-style: normal
}

/* 去除Chrome等浏览器文本框默认发光边框 */
input:focus,
textarea:focus {
   outline: none;
}

/* 去除IE10+浏览器文本框后面的小叉叉 */
input::-ms-clear {
   display: none;
}

/* 禁止多行文本框textarea拖拽 */
textarea {
   resize: none;
}

body {
   background-color: #ebf1f4;
}

.f12 {
   font-size: 12px;
}

.f13 {
   font-size: 13px;
}

.f14 {
   font-size: 14px;
}

.f16 {
   font-size: 16px;
}

.f18 {
   font-size: 18px;
}

.light {
   color: #888;
}

.mt10 {
   margin-top: 10px;
}

.mt20 {
   margin-top: 20px;
}

.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.clr:after {
   content: "";
   display: block;
   clear: both;
}

.header {
   background-color: #fff;
   box-shadow: 0 1px 2px rgba(60, 60, 60, 0.1);
}

.headeroom {
   width: 1170px;
   margin: 0 auto;
   height: 68px;
   line-height: 68px;
}

.logo {
   height: 32px;
   padding: 20px 0 16px 46px;
   width: 88px;
   line-height: 16px;
   font-size: 13px;
   color: #888;
   float: left;
   background: url(images/logo.png) 0 15px no-repeat;
}

.logo:hover {
   background-position: 0 -38px;
}

.logo h1,
.logo h2 {
   font-size: 16px;
   color: #333;
   transition: color .2s linear;
}

.logo:hover h1 {
   color: #0097e8;
}

.menu {
   float: left;
   margin-left: 60px;
   font-size: 16px;
}

.menu>li {
   float: left;
   position: relative;
}

.menu li a {
   display: block;
   padding: 0 20px;
   position: relative;
   background-color: #fff;
   z-index: 100;
}

.menu li.menu-item-has-children>a {
   height: 68px;
   min-width: 80px;
   text-align: center;
   text-indent: 1em;
   padding: 0 10px;
}

.menu-item-has-children>a:after {
   content: "\e602";
   font-family: "qkfont";
   position: relative;
   top: 6px;
   left: -6px;
   color: #eee;
}

.menu>.current-menu-item>a:before,
.current-category-parent>a:before {
   position: absolute;
   bottom: 0;
   content: "";
   left: 20%;
   width: 60%;
   height: 2px;
   background-color: #03acfb;
   transition: background-color .3s ease;
}

.sub-menu>.current-menu-item a {
   color: #03acfb;
}

.menu:hover>.current-menu-item>a:before,
.menu:hover>.current-category-parent>a:before {
   background-color: #fff;
}

.sub-menu {
   display: block;
   position: absolute;
   width: 118%;
   top: 68px;
   left: -9%;
   background-color: #fff;
   opacity: 0;
   box-shadow: 0 1px 8px rgba(38, 38, 38, 0.1);
   -webkit-transition: -webkit-transform .3s ease, -webkit-opacity .6s ease;
   -o-transition: -o-transform .3s ease, -o-opacity .6s ease;
   transition: transform .3s ease, opacity .6s ease;
   -webkit-transform: translate3d(0, -100%, 0) scale(.5);
   -o-transform: translate3d(0, -100%, 0) scale(.5);
   transform: translate3d(0, -100%, 0) scale(.5);
   z-index: 99;
}

.menu li:hover .sub-menu {
   -webkit-transform: translate3d(0, 0, 0) scale(1);
   -o-transform: translate3d(0, 0, 0) scale(1);
   transform: translate3d(0, 0, 0) scale(1);
   opacity: 1;
}

.sub-menu li a {
   text-align: center;
   line-height: 42px;
   padding: 0;
   font-size: 15px;
}

.sub-menu li a:hover {
   background-color: #f7fafa;
}

.search-holder {
   float: right;
   height: 28px;
   padding-left: 14px;
   line-height: 28px;
   margin-top: 20px;
   border: 1px #d3d8da solid;
   border-radius: 30px;
   overflow: hidden;
}

#search {
   display: inline-block;
   width: 36px;
   height: 28px;
   float: left;
   text-align: center;
   cursor: pointer;
   color: #aaa;
   line-height: 28px;
   transition: color .2s linear, background-color .2s linear;
   background-color: #fff;
   border: none;
   outline: none;
}

#search:active {}

.search-input {
   border: none;
   font-size: 12px;
   display: block;
   float: left;
   width: 138px;
   height: 18px;
   line-height: 18px;
   padding: 5px 0;
}

.head-imgs {
   width: 1170px;
   margin: 20px auto 20px;
   overflow: hidden;
}

.head-img1 {
   display: block;
   width: 580px;
   float: left;
}

.head-img1 {
   height: 330px;
}

.head-img2,
.head-img3,
.head-img4,
.head-img5 {
   margin-left: 10px;
   height: 160px;
}

.head-img2,
.head-img3,
.head-img4,
.head-img5 {
   width: 285px;
   float: left;
}

.head-img4,
.head-img5 {
   margin-top: 10px;
}

.head-imgs a {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.head-imgs a h2 {
   position: absolute;
   left: -9999px;
}

.head-img2 a span,
.head-img3 a span,
.head-img4 a span,
.head-img5 a span {
   font-size: 15px;
}

.head-imgs img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .25s ease;
}

.head-imgs img:hover {
   transform: scale(1.02);
}

.index-block-cont {
   padding-bottom: 20px;
}

.index-block {
   width: 285px;
   height: 190px;
   float: left;
   background-color: #fff;
   margin-left: 10px;
}

.block-icon {
   width: 580px;
   margin-left: 0;
   position: relative;
}

.block-icon:before {
   content: "";
   display: block;
   position: absolute;
   bottom: 50%;
   left: 20px;
   right: 20px;
   height: 1px;
   background-color: #ebf1f4;
}

.block-icon:after {
   content: "";
   display: block;
   position: absolute;
   top: 20px;
   bottom: 20px;
   left: 33.333333%;
   width: 33.333333%;
   border-left: 1px #ebf1f4 solid;
   border-right: 1px #ebf1f4 solid;
   z-index: 0;
}

.block-icon-item {
   display: block;
   float: left;
   width: 33.333333%;
   height: 77px;
   padding-top: 18px;
   text-align: center;
   position: relative;
   z-index: 99;
}

.block-icon-item span {
   display: block;
   line-height: 1;
}

.block-icon-item .qkfont {
   font-size: 26px;
}

.block-title {
   padding: 10px 0 10px 15px;
   margin-bottom: 10px;
   position: relative;
}

.block-title:before {
   content: "";
   display: block;
   position: absolute;
   top: 14px;
   left: 0;
   width: 5px;
   height: 14px;
   background-color: #0097e8;
}

.block-title h3 {
   font-size: 14px;
   display: inline;
   margin-right: 6px;
}

.index-block-facelist {
   padding-left: 15px;
}

.index-block-facelist li {
   width: 120px;
   font-size: 13px;
   float: left;
   margin-right: 15px;
}

.index-block-facelist li img {
   opacity: 1;
   transition: opacity .25s ease;
}

.index-block-facelist li img:hover {
   opacity: 0.8;
}

.index-block-list li {
   margin-bottom: 5px;
   padding-left: 20px;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.index-block-list li:before {
   position: absolute;
   content: "";
   display: block;
   top: 8px;
   left: 10px;
   width: 3px;
   height: 3px;
   background-color: #ccc;
}

.main-bg {
   background-color: #fff;
}

.top-bar {
   width: 1170px;
   height: 118px;
   margin: 10px auto -10px auto;
}

.sider-songuitar {
   position: sticky;
   top: 0;
}

.top-bar img {
   display: block;
}

.main-wrap {
   display: flex;
   width: 1170px;
   margin: 20px auto;
}

.main-cont {
   /* width: 584px; */
   padding: 0 50px;
   flex-grow: 1;
}

.aside {
   width: 180px;
   min-height: 800px;
   flex-shrink: 0;
}

.main-cont.single-main {
   max-width: 806px;
   padding: 0 79px 0 0;
   border-left: unset;
}

.single-cont {
   flex-grow: 1;
   min-height: 600px;
   /* padding: 36px 0; */
}

.article-list .wp-post-image {
   display: block;
   float: left;
   width: 285px;
   height: 160px;
   margin-right: 15px;
   object-fit: cover;
}

.article-list {
   padding: 30px 0;
   border-bottom: 1px #ebf1f4 solid;
   overflow: hidden;
}

.article-title {
   font-size: 20px;
}

.article-list .article-title {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
}

.article-list-meta {
   font-size: 13px;
   color: #888;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.article-list-excerpt {
   font-size: 13px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
}

.article-cont {
   font-size: 16px;
   line-height: 1.8;
}

.article-cont img {
   display: block;
   margin: 1em auto;
   max-width: 100%;
   height: auto;
   border: 1px #eee solid;
   box-shadow: 0 3px 20px #efefef;
}

.article-cont .wp-post-image {
   display: block;
   margin-bottom: 38px;
}

.excerpt,
.ed2k {
   display: block;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: #f7fafa;
   padding: 10px;
   border: 1px #dfdfdf dotted;
   line-height: 1.6;
   font-size: 15px;
   word-break: break-all;
}

.single-cont .article-title {
   font-size: 28px;
}

.info-dl h2 {
   font-size: 18px;
   margin-top: 12px;
}

.info-dl dl {
   display: flex;
   flex-wrap: wrap;
   margin-top: 20px;
   margin-bottom: 20px;
   font-size: 14px;
}

.info-dl dt {
   flex: 30% 0 0;
   font-weight: bold;
   padding: 10px 0;
   font-size: 13px;
}

.info-dl dd {
   flex: 70% 1 0;
   border-bottom: 1px dotted #dfdfdf;
   padding: 10px 0;
}

.article-cover-img .wp-post-image {
   display: block;
   width: 100%;
   height: auto;
}

.single-cont ul,
.single-cont ol {
   padding-left: 30px;
   margin: 15px 0 15px 0;
}

.single-cont ul li,
.single-cont ol li {
   margin-bottom: 7px;
   padding-bottom: 7px;
   border-bottom: 1px dotted #dfdfdf;
}

.single-cont ol li {
   list-style-type: decimal;
}

.single-cont ul li {
   list-style-type: square;
}

.article-cont p {
   margin: 22px 0;
   text-align: justify;
   word-break: break-word;
}

.single-cont h2 {
   margin: 22px 0;
   font-size: 20px;
}

.single-cont h1 {
   margin: 22px 0;
}

.single-cont h3 {
   font-size: 18px;
   margin: 22px 0;
}

.entry-table,
.entry-table td,
.entry-table th {
   border: 1px solid #ccc;
}

.entry-table {
   border-color: #ccc;
   border-collapse: collapse;
   border-style: none;
}

.entry-table tr {
   background: #fff;
}

.entry-table tr:nth-child(2n) {
   background: #fcfcfc;
}

.slider {
   width: 285px;
   flex-shrink: 0;
   /* width: 361px; */
   padding-bottom: 20px;
}

.slider-pic {
   display: block;
   background-color: #fff;
}

.slider-pic>img {
   display: block;
   width: 100%;
}

.bread-nav,
.slider-title {
   height: 50px;
   line-height: 50px;
   border-bottom: 1px #ebf1f4 solid;
}

.bread-nav a,
.single-cont a,
.tags a {
   color: #0097e8;
}

.bread-nav a:hover,
.single-cont a:hover,
.tags a:hover {
   color: #03acfb;
}

.article-bottom {
   margin-top: 58px;
   padding-top: 22px;
   padding-bottom: 22px;
   border-top: 1px #dfdfdf dotted;
}

.bottom-tags {
   display: flex;
}

.bottom-tags a {
   display: block;
   padding: 5px 8px;
   background-color: #ebf1f4;
   border-radius: 3px;
   color: #555;
   margin-right: 10px;
}

.hot-tags a {
   display: inline-block;
   padding: 5px;
   margin-bottom: 8px;
   margin-right: 3px;
   line-height: 1;
   background-color: #fff;
   border-radius: 20px;
   border: 1px #d3d8da solid;
}

.slider-hot .slider-list li {
   display: block;
   padding: 0 0 10px 22px;
   font-size: 15px;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.slider-hot .slider-list li:after {
   content: "10";
   position: absolute;
   top: 3px;
   left: 0;
   display: block;
   width: 16px;
   height: 16px;
   font-size: 12px;
   text-align: center;
   line-height: 16px;
   color: #fff;
   background-color: #bbb;
   border-radius: 2px;
}

.slider-hot .slider-list li:nth-child(1):after {
   content: "1";
   background-color: #03acfb;
}

.slider-hot .slider-list li:nth-child(2):after {
   content: "2";
   background-color: #03acfb;
}

.slider-hot .slider-list li:nth-child(3):after {
   content: "3";
   background-color: #03acfb;
}

.slider-hot .slider-list li:nth-child(4):after {
   content: "4";
}

.slider-hot .slider-list li:nth-child(5):after {
   content: "5";
}

.slider-hot .slider-list li:nth-child(6):after {
   content: "6";
}

.slider-hot .slider-list li:nth-child(7):after {
   content: "7";
}

.slider-hot .slider-list li:nth-child(8):after {
   content: "8";
}

.slider-hot .slider-list li:nth-child(9):after {
   content: "9";
}

.slider-list .wp-post-image {
   display: block;
   float: left;
   width: 100px;
   height: 75px;
   margin-right: 8px;
}

.zt-item {
   margin-top: 20px;
}

.zt-item a {
   display: block;
   padding-bottom: 10px;
   border: 1px #ebf1f4 solid;
}

.zt-cover {
   width: 100%;
   height: 0;
   padding-top: 49.18918919%;
   position: relative;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   transition: opacity .25s ease;
}

.zt-item a:hover .zt-cover {
   opacity: .8;
}

.zt-meta {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0px;
   padding-left: 10px;
   line-height: 30px;
   height: 30px;
   overflow: hidden;
   font-size: 12px;
   margin: 0;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

.zt-title {
   font-weight: normal;
   padding: 10px 10px 10px 15px;
   position: relative;
}

.zt-title:before {
   content: "";
   display: block;
   position: absolute;
   top: 15px;
   left: 0;
   width: 5px;
   height: 15px;
   background-color: #03acfb;
}

.aside-download li {
   margin-bottom: 20px;
   overflow: hidden;
}

.aside-download-cover {
   display: block;
   float: left;
   width: 45px;
   height: 45px;
   margin-right: 5px;
}

.pages {
   margin: 36px 0 16px;
   text-align: center;
}

.pages li {
   display: inline-block;
   margin: 3px;
}

.pages li a,
.pages li span {
   display: block;
   width: 38px;
   height: 38px;
   line-height: 38px;
   text-align: center;
   border-radius: 2px;
   border: 1px #ebf1f4 solid;
}

.pages li a:hover {
   background-color: #ebf1f4;
}

.pages li span {
   background-color: #0097e8;
   color: #fff;
   cursor: default;
   border: 1px #0097e8 solid;
}

.relates-article li {
   float: left;
   padding: 20px 0;
   width: 344px;
}

.relates-article li:nth-child(odd) {
   margin-right: 20px;
}

.footer-wrap {
   background-color: #fff;
   font-size: 13px;
   color: #888;
   border-top: 1px #ddd solid;
}

.footer {
   display: flex;
   width: 1170px;
   margin: 0 auto;
   padding: 20px 0 15px;
   overflow: hidden;
   line-height: 1.6;
}

.link-section {
   display: flex;
   flex-grow: 1;
}

.footer-links {
   width: 200px;
   margin-right: 20px;
}

.footer-links h4 {
   padding-bottom: 5px;
   font-weight: normal;
   font-size: 15px;
   border-bottom: 1px #ebf1f4 solid;
}

.footer-links h4 span {
   color: #ccc;
   font-size: 12px;
}

.footer-links ul {
   margin-top: 10px;
}

.footer-links ul li {
   margin-top: 3px;
}

.footer-links a {
   color: #888;
}

.footer-links a:hover {
   color: #0097e8;
}

.footer-tags {
   margin-top: 10px;
}

.footer-tags a {
   float: left;
   margin-right: 10px;
}

.about-section {
   width: 350px;
   padding-left: 60px;
   background: url(images/logo.png) 10px -50px no-repeat;
}

.footer-bottom {
   display: flex;
   align-items: center;
   width: 1170px;
   margin: 0 auto;
   height: 50px;
   border-top: 1px #ebf1f4 solid;
}

.footer-bottom a{
   margin-left: 10px;
   margin-right: 10px;
}

#to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 42px;
   height: 42px;
   text-align: center;
   line-height: 42px;
   background-color: #fff;
   background-color: rgba(255, 255, 255, .6);
   color: #888;
   cursor: pointer;
   font-size: 20px;
   font-weight: bold;
   border-radius: 2px;
   box-shadow: 1px 1px 6px rgba(0, 0, 0, .2);
   transform: translateY(62px);
   -webkit-transform: translateY(62px);
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   z-index: 999;
}

#to-top:hover {
   background-color: #0097e8;
   color: #fff;
}

#to-top.show {
   transform: translateY(0);
   -webkit-transform: translateY(0);
}

.empty {
   text-align: center;
   padding-top: 108px;
   color: #ccc;
   font-size: 20px;
}

@font-face {
   font-family: "qkfont";
   src: url('fonts/iconfont.eot');
   /* IE9*/
   src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      /* IE6-IE8 */
      url('fonts/iconfont.woff') format('woff'),
      /* chrome, firefox */
      url('fonts/iconfont.ttf') format('truetype'),
      /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('fonts/iconfont.svg#qkfont') format('svg');
   /* iOS 4.1- */
}

.qkfont {
   font-family: "qkfont" !important;
   font-size: inherit;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.qk-search:before {
   content: "\e600";
}

.qk-user:before {
   content: "\e601";
}

.qk-comments:before {
   content: "\e606";
}

.qk-menu-down:before {
   content: "\e602";
}

.qk-view:before {
   content: "\e60b";
}

.qk-tags:before {
   content: "\e603";
}

.qk-down:before {
   content: "\e619";
}

.qk-next:before {
   content: "\e604";
}

.qk-time:before {
   content: "\e624";
}

.qk-prev:before {
   content: "\e60a";
}

.qk-home:before {
   content: "\e607";
}

.qk-hot:before {
   content: "\e605";
}

.qk-office:before {
   content: "\e827";
}

.qk-windows10:before {
   content: "\e882";
}

.qk-haibao:before {
   content: "\e68e";
}

.qk-windows:before {
   content: "\e608";
}

.qk-jianli:before {
   content: "\e647";
}

.qk-ppt:before {
   content: "\e73e";
}

@media screen and (max-width: 568px) {

   .headeroom,
   .main-wrap,
   .footer,
   .footer-bottom,
   .main-cont,
   .slider,
   .head-imgs,
   .block-icon {
      width: 100%;
   }

   body{
      min-width: unset;
   }

   .headeroom {
      height: 50px;
      line-height: 50px;
      margin-bottom: 50px;
   }

   .logo {
      padding: 12px 0 0 40px;
      font-size: 12px;
      line-height: 13px;
      background-position: 10px 10px;
      background-size: 24px;
   }

   .logo:hover {
      background-position: 10px -25px;
   }

   .logo h1 {
      font-size: 14px;
   }

   .search-holder {
      margin-top: 10px;
      margin-right: 10px;
   }

   .search-input {
      width: 98px;
   }

   .head-imgs a{
      outline:1px #ffffff80 solid;
   }

   .main-wrap,
   .head-imgs {
      margin: 10px 0;
   }

   .main-wrap {
      flex-direction: column;
   }

   .main-cont {
      padding: 0 10px;
      box-sizing: border-box;
   }

   .main-cont.single-main {
      width: unset;
      padding: unset;
   }

   .single-cont dt {
      flex-basis: 28%;
   }

   .single-cont dd {
      flex-basis: 72%;
   }

   .head-img1 {
      width: 100%;
      height: 230px;
   }

   .head-img2,
   .head-img3,
   .head-img4,
   .head-img5 {
      width: 50%;
      margin: 0;
      height: 150px;
   }

   .head-imgs a span {
      font-size: 15px;
      line-height: 1.2;
   }

   .article-list .tags,
   .aside,
   .sub-menu,
   .footer .about-section,
   .menu-item-has-children>a:after,
   .menu>.current-menu-item>a:before,
   .current-category-parent>a:before {
      display: none;
   }

   .menu {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      overflow-x: auto;
      margin-left: 0;
      padding-left: 5px;
      padding-right: 10px;
      font-size: 15px;
      white-space: nowrap;
   }

   .menu>li {
      display: inline-block;
      float: none;
      line-height: 2;
      margin-left: 2%;
   }

   .menu li a {
      padding: 0 10px;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(60, 60, 60, 0.1);
   }

   .menu li.menu-item-has-children>a {
      height: auto;
      min-width: 0;
      text-align: center;
      text-indent: 0;
      padding: 0 10px;
   }

   .menu>li.current-menu-item>a,
   .menu>li.current-category-parent>a {
      background-color: #0097e8;
      color: #fff;
   }

   .index-block {
      width: 100%;
      margin-left: 0;
      margin-top: 10px;
   }

   .article-list .wp-post-image {
      width: 130px;
      height: 75px;
   }

   .article-title {
      font-size: 18px;
      min-height: 54px;
   }

   .article-list-meta {
      font-size: 12px;
   }

   .pages {
      margin: 24px 0;
   }

   .slider-list .wp-post-image {
      width: 64px;
      height: 48px;
   }

   .single-cont {
      padding: 20px;
   }

   .relates-article li {
      width: 100%;
      box-sizing: border-box;
   }

   .footer-wrap {
      border-top: none;
   }

   .footer-bottom {
      flex-direction: column;
      justify-content: center;
      height: 80px;
   }

   .empty {
      min-height: 100px;
   }

   .slider-pic,
   .zt-item a {
      float: left;
      width: 50%;
      /*box-sizing: border-box;*/
   }

   .bread-nav{
      padding-left: 10px;
   }

   .info-dl{
      padding: 10px;
   }

   .slider-hot {
      margin: 10px;
   }

   .qk8-video {
      position: relative;
   }

   .qk8-video:before {
      content: "";
      display: block;
      padding-top: 56.25%;
   }

   .qk8-video>iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0
   }

   .link-section{
      width: 100%;
      flex-wrap: wrap;
   }

   .footer-links{
      width: 38%;
      margin-right: unset;
      margin-left: 10px;
   }

   .footer-links:nth-child(3){
      margin-top: 20px;
      width: 100%;
   }

   .top-bar {
      width: auto;
      height: auto;
   }

   .top-bar img {
      width: 100%;
      height: auto;
   }

   .sider-songuitar {
      position: unset;
   }

   .sider-songuitar img{
      width: 100%;
   }
}