/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

* {
    margin: 0px;
    padding: 0px;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Arial, sans-serif;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

a {
    text-decoration: none;
}

/* h3{
  color: #458af6 !important;
} */
html, body {
    width: 100%;
    /* height: 100%; */
}

.loading-span {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    color: #208AFC;
    font-size: 13px;
    font-weight: 700;
}

#adBar {
    height: 6px;
    background-color: #ef9545;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
}

.click-zoom {
    -webkit-animation: clickZoom 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96) alternate;
    animation: clickZoom 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96) alternate;
}
.shake-bottom {
    -webkit-animation: jello-horizontal 5.8s infinite both;
    animation: jello-horizontal 5.8s infinite both
}

@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    15% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    20% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    25% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    32.5% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    37.5% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    50% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    100%{
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    15% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    20% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    25% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    32.5% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    37.5% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    50% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    100%{
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes clickZoom {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(.8);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(.8);
    }
}

@keyframes clickZoom {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* 媒体查询适配尺寸 */
/* @media screen and (min-width:360px){
  html{font-size:10px}
  .category-item .content > p{
    font-size: 8px!important;
  }
  .icon-box h3,.main-box h3{
    font-size: 8px!important;
  }
 } */
@media screen and (min-width: 480px) {
    html {
        font-size: 16px
    }

    .category-item .content > p {
        font-size: 12px !important;
    }

    .icon-box h3, .main-box h3 {
        font-size: 12px !important;
    }
}

/* 超小设备（手机，小于 768px） */
@media screen and (min-width: 768px) {
    html {
        font-size: 18px
    }

    .category-item .content > p, .icon-box h3, .main-box h3 {
        font-size: 14px !important;
    }

    .icon-box .icon-item .icon-words {
        height: 1.2rem !important;
    }

    .other-box .icon-item .icon-words {
        height: 1.2rem !important;
    }

    .main-item .m-play {
        width: 10rem;
        height: 10rem;
    }
}

/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width: 992px) {
    html {
        font-size: 20px
    }

    .category-item .content > p, .icon-box h3, .main-box h3 {
        font-size: 20px !important;
    }

    .icon-box .icon-item .icon-words {
        height: 1.5rem !important;
    }

    .other-box .icon-item .icon-words {
        height: 1.4rem !important;
    }

}

/* 中型设备（台式电脑，992px 起） */
@media screen and (min-width: 1200px) {
    html {
        font-size: 25px
    }

    .icon-box .icon-item .icon-words {
        height: 2.2rem !important;
    }

    .other-box .icon-item .icon-words {
        height: 2rem !important;
    }
}

/* 大型设备（大台式电脑，1200px 起） */
#loading_index {
    -webkit-animation: slide-right 2s linear infinite both;
    animation: slide-right 2s linear infinite both;
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(-80px);
        transform: translateX(-80px);
    }
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-80px);
        transform: translateX(-80px);
    }
    100% {
        -webkit-transform: translateX(180px);
        transform: translateX(180px);
    }
}