/*
预览dialog样式设置
*/
.el-dialog__body .dialog-div-content .dialog-p-tag p img{
    display: block;
    margin: 0 auto;
    height: 95%;
    max-width: 100%;
    border-radius: 5px;
    box-shadow:0 4px 12px #84A1A8;
    border: 0;
}

.el-dialog__body .dialog-div-content .dialog-p-tag div img{
    display: block;
    margin: 0 auto;
    height: 95%;
    max-width: 100%;
    border-radius: 5px;
    box-shadow:0 4px 12px #84A1A8;
    border: 0;
}

.dialog-div-content .dialog-p-tag div img{
    display: block;
    margin: 0 auto;
    height: 95%;
    max-width: 100%;
    border-radius: 5px;
    box-shadow:0 4px 12px #84A1A8;
    border: 0;
}

img {
    display: block;
    margin: 0 auto;
    height: 95%;
    max-width: 100%;
    border-radius: 5px;
    box-shadow:0 4px 12px #84A1A8;
    border: 0;
}




/*导航栏 2*/
/* Hux Optimize UserExperience */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: inherit;
}
.navbar-default .navbar-toggle:active {
    background-color: rgba(255, 255, 255, 0.25);
}
.hexo-douban-tabs {
    margin-bottom: 15px;
    margin-top: 15px;
}

.hexo-douban-tab {
    padding: 5px;
}

.hexo-douban-active {
    background: #657b83;
    color: #fff;
}

.hexo-douban-active:hover{
    background: #657b83;
    color: red;
}

.hexo-douban-item {
    padding-bottom: 10px;
    position: relative;
    clear: both;
    min-height: 170px;
    padding: 10px 0;
    border-bottom: 1px #ddd solid;
}

@media screen and (max-width: 600px) {
    .hexo-douban-item {
        width: 100%;
    }
}

.hexo-douban-picture {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100px;
}

.hexo-douban-info {
    padding-left: 120px;
}

.hexo-douban-meta {
    font-size: 12px;
    padding-right: 10px;
}

.hexo-douban-comments {
    font-size: 12px;
}

.hexo-douban-pagination {
    margin-top: 15px;
    text-align: center;
    margin-bottom: 10px;
}

.hexo-douban-button {
    padding: 5px;
}

.hexo-douban-button:hover {
    background: #657b83;
    color: #fff;
}

.hexo-douban-hide {
    display: none;
}

.hexo-douban-show {
    display: block;
}

.hexo-douban-picture img{
    width:92px;
    height:131px
}

@media only screen and (max-width: 767px) {
    /**
       * Layout
       * Since V1.6 we use absolute positioning to prevent to expand container-fluid
       * which would cover tags. A absolute positioning make a new layer.
       */
    .navbar-default .navbar-collapse {
        position: absolute;
        right: 0;
        border: none;
        background: white;
        box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
        box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
        border-radius: 2px;
        width: 170px;
    }
    /**
       * Animation
       * HuxBlog-Navbar using genuine Material Design Animation
       */
    #huxblog_navbar {
        /**
             * Sharable code and 'out' function
             */
        opacity: 0;
        transform: scaleX(0);
        transform-origin: top right;
        transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
        -webkit-transform: scaleX(0);
        -webkit-transform-origin: top right;
        -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
        /**
             *'In' Animation
             */
    }
    #huxblog_navbar a {
        font-size: 13px;
        line-height: 28px;
    }
    #huxblog_navbar .navbar-collapse {
        height: 0px;
        transform: scaleY(0);
        transform-origin: top right;
        transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
        -webkit-transform: scaleY(0);
        -webkit-transform-origin: top right;
        -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
    }
    #huxblog_navbar li {
        opacity: 0;
        transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    #huxblog_navbar.in {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
        opacity: 1;
        transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    #huxblog_navbar.in .navbar-collapse {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #huxblog_navbar.in li {
        opacity: 1;
        transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
        -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
    }
}

/* Hux customize Style for navBar button */
.navbar-default .navbar-toggle {
    border-color: transparent;
    padding: 19px 16px;
    margin-top: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
    border-radius: 50%;
}
.navbar-default .navbar-toggle .icon-bar {
    width: 18px;
    border-radius: 0px;
    background-color: white;
}
.navbar-default .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 3px;
}

/*
顶部, 导航栏
*/
.navbar-custom {
    background: none;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    /* Hux learn from
       *     TypeIsBeautiful,
       *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
       */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
}
.navbar-custom .navbar-brand {
    font-weight: 800;
    color: white;
    height: 56px;
    line-height: 25px;
}
.navbar-custom .navbar-brand:hover {
    color: rgba(255, 255, 255, 0.8);
}
.navbar-custom .nav li a {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}
.navbar-custom .nav li a:active {
    background: rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
    .navbar-custom {
        background: transparent;
        border-bottom: 1px solid transparent;
    }
    .navbar-custom body {
        font-size: 20px;
    }
    .navbar-custom .navbar-brand {
        color: white;
        padding: 20px;
        line-height: 20px;
    }
    .navbar-custom .navbar-brand:hover,
    .navbar-custom .navbar-brand:focus {
        color: rgba(255, 255, 255, 0.8);
    }
    .navbar-custom .nav li a {
        color: white;
        padding: 20px;
    }
    .navbar-custom .nav li a:hover,
    .navbar-custom .nav li a:focus {
        color: rgba(255, 255, 255, 0.8);
    }
    .navbar-custom .nav li a:active {
        background: none;
    }
}
@media only screen and (min-width: 1170px) {
    .navbar-custom {
        -webkit-transition: background-color 0.3s;
        -moz-transition: background-color 0.3s;
        transition: background-color 0.3s;
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .navbar-custom.is-fixed {
        /* when the user scrolls down, we hide the header right above the viewport */
        position: fixed;
        top: -61px;
        background-color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid #f2f2f2;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }
    .navbar-custom.is-fixed .navbar-brand {
        color: #404040;
    }
    .navbar-custom.is-fixed .navbar-brand:hover,
    .navbar-custom.is-fixed .navbar-brand:focus {
        color: #0085a1;
    }
    .navbar-custom.is-fixed .nav li a {
        color: #404040;
    }
    .navbar-custom.is-fixed .nav li a:hover,
    .navbar-custom.is-fixed .nav li a:focus {
        color: #0085a1;
    }
    .navbar-custom.is-visible {
        /* if the user changes the scrolling direction, we show the header */
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        -o-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}




.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.bg_img{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/static/images/music_banner_2022-05-08_074624.png') no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*
头部, 巨幕图片
*/
.intro-header {
    background: no-repeat center center;
    background-color: #808080;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin-bottom: 0;
    height: 360px;
}
@media only screen and (min-width: 768px) {
    .intro-header {
        margin-bottom: 20px;
        /* response on desktop */
    }
}
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
    padding: 85px 0 55px;
    color: white;
}
@media only screen and (min-width: 768px) {
    .intro-header .site-heading,
    .intro-header .post-heading,
    .intro-header .page-heading {
        padding: 150px 0;
    }
}
.intro-header .site-heading {
    padding: 95px 0 70px;
}
@media only screen and (min-width: 768px) {
    .intro-header .site-heading {
        padding: 4px 0;
    }
}
.intro-header .site-heading,
.intro-header .page-heading {
    text-align: center;
}
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
    margin-top: 0;
    font-size: 50px;
}
.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
    /* Hux learn from
       *     TypeIsBeautiful,
       *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
       */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    font-size: 18px;
    line-height: 1.1;
    display: block;
    font-weight: 300;
    margin: 10px 0 0;
    color: black;
}
@media only screen and (min-width: 768px) {
    .intro-header .site-heading h1,
    .intro-header .page-heading h1 {
        font-size: 80px;
    }
}
.intro-header .post-heading h1 {
    font-size: 30px;
    margin-bottom: 24px;
}
.intro-header .post-heading .subheading,
.intro-header .post-heading .meta {
    line-height: 1.1;
    display: block;
}
.intro-header .post-heading .subheading {
    /* Hux learn from
       *     TypeIsBeautiful,
       *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
       */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
    font-size: 17px;
    line-height: 1.4;
    font-weight: normal;
    margin: 10px 0 30px;
    margin-top: -5px;
}
.intro-header .post-heading .meta {
    font-family: 'Lora', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
}
.intro-header .post-heading .meta a {
    color: white;
}
@media only screen and (min-width: 768px) {
    .intro-header .post-heading h1 {
        font-size: 55px;
    }
    .intro-header .post-heading .subheading {
        font-size: 30px;
    }
    .intro-header .post-heading .meta {
        font-size: 20px;
    }
}