/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden], template {
    display: none
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background: #ffffff!important;
    white-space: nowrap;
    color: #40404c;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    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-feature-settings: "tnum", "tnum"
}

a, a:active, a:focus, a:hover, a:visited {
    color: inherit;
    text-decoration: inherit
}

svg {
    width: 1em;
    fill: currentColor
}

ul {
    list-style-type: none
}

::-moz-placeholder {
    opacity: .7
}

:-ms-input-placeholder {
    opacity: .7
}

::placeholder {
    opacity: .7
}

.GBtn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}

.REtn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}

.PFtn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}
.KEYtn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}
.RStn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}
.AudioCard > .Anchor, .AudioCard > .Title, .GTextCenter {
    text-align: center
}

.GColorPrimary {
    color: red !important
}

.GFontBold {
    font-weight: 700
}

.GBordered {
    border: 1px solid #d9d9d9
}

.GBorderBottom {
    border-bottom: 1px solid #d9d9d9
}

.GBorderTop {
    border-top: 1px solid #d9d9d9
}

.GShadowBottom {
    box-shadow: 0 1px 3px #f2f2f2
}

.GShadowTop {
    box-shadow: 0 -1px 3px #f2f2f2
}

.GMarginLeft1 {
    margin-left: 5px
}

.GMarginLeft2 {
    margin-left: 10px
}

.GMarginRight1 {
    margin-right: 5px
}

.GMarginTop3 {
    margin-top: 15px
}

.GMarginBottom0 {
    margin-bottom: 0 !important
}

.GMarginBottom1 {
    margin-bottom: 5px
}

.GMarginBottom2 {
    margin-bottom: 10px
}

.GClickable, .GTitle2 > .Back {
    cursor: pointer
}

.AudioCard > .Anchor, .AudioCard > .Title, .GTextEllipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.GBgGrey {
    background-color: #F1F1F1;
}

.GTitle1 {
    margin: 15px 0;
    border-left: 3px solid red;
    font-size: 16px;
    padding-left: 10px
}

.GTitle2 {
    font-size: 16px;
    color: red;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
    display: flex;
    margin-bottom: 15px
}

.GTitle2 > .Back {
    display: flex;
    align-items: center
}

.GTitle2 > .Back > svg {
    width: 12px
}

.GTitle2 .Title, .GTitle2 > .Back > .Text {
    margin-left: 5px
}

.GTitle2 .CenterTitle {
    width: 100%;
    text-align: center;
    position: absolute;
    color: #40404c;
    z-index: -1
}

.GTitle3 {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 15px
}

.GTitle3 .Title {
    display: flex;
    margin: 30px 0 15px;
    border-left: 3px solid red;
    font-size: 16px;
    padding-left: 10px
}

.GTitle3 .Title > .SubTitle {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #72727b;
    margin-left: 5px
}

.GTitle3 .Title > .Tabs {
    display: flex;
    margin-left: 10px;
    margin-bottom: -1px;
    font-size: 12px;
    color: #72727b
}

.GTitle3 .Title > .Tabs > .Tab {
    display: flex;
    align-items: center;
    margin-right: 10px;
    border-bottom: 1px solid transparent;
    cursor: pointer
}

.GTitle3 .Title > .Tabs > .Tab:hover {
    color: #40404c
}

.GTitle3 .Title > .Tabs > .Tab.Active {
    color: #40404c;
    border-bottom: 1px solid red
}

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

body > .SmallHeader {
    display: none
}

@media (max-width: 767px) {
    body > .SmallHeader {
        display: block;
        position: fixed;
        background: #fff;
        width: 100%;
        top: 0;
        left: 0;
        height: 80px;
        z-index: 2
    }

    body > .SmallHeader > .Main > .Line {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        flex-basis: 100%
    }

    body > .SmallHeader > .Main > .Line > .Logo {
        text-align: center;
        font-size: 12px;
        color: red;
        white-space: nowrap;
        display: flex;
        align-items: center
    }

    body > .SmallHeader > .Main > .Line > .Logo > .Icon {
        display: flex;
        align-items: center;
        font-size: 16px;
        padding: 7px;
        background: red;
        color: #fff;
        border-radius: 8px
    }

    body > .SmallHeader > .Main > .Line > .Logo > .AppName {
        font-size: 20px;
        margin-left: 5px
    }

    body > .SmallHeader > .Main > .Line > .SearchForm {
        flex: auto;
        padding: 0 10px
    }

    body > .SmallHeader > .Main > .Line > .SearchForm > .Wrap {
        height: 32px;
        width: 100%;
        display: flex;
        padding-left: 20px;
        border: 1px solid #d9d9d9;
        border-radius: 16px;
        align-items: center
    }

    body > .SmallHeader > .Main > .Line > .SearchForm > .Wrap > input {
        width: 100%;
        font-size: 16px;
        border: none;
        outline: none
    }

    body > .SmallHeader > .Main > .Line > .SearchForm > .Wrap > .Suffix {
        height: 32px;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #d9d9d9
    }

    body > .SmallHeader > .Main > .Line > .SearchForm > .Wrap > .Suffix:hover {
        cursor: pointer
    }

    body > .SmallHeader > .Main > .Line > .RightMenu > .RightMenuBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 32px;
        font-size: 14px;
        border-radius: 16px;
        color: red;
        background: transparent;
        padding: 0 16px;
        outline: none;
        border: 1px solid red;
        cursor: pointer
    }

    body > .SmallHeader > .Main > .Line > .RightMenu > .RightMenuBtn svg {
        margin-right: 6px
    }

    body > .SmallHeader > .Main > .Navs {
        border-bottom: 1px solid #f2f2f2;
        box-shadow: 0 1px 3px #f2f2f2;
        display: flex;
        align-items: center;
        height: 40px;
        font-size: 16px;
        flex-basis: 100%
    }

    body > .SmallHeader > .Main > .Navs > .Nav > .NavLink {
        padding: 10px 0;
        margin: 0 10px;
        border-bottom: 2px solid transparent;
        color: #72727b
    }

    body > .SmallHeader > .Main > .Navs > .Nav > .NavLink.Active {
        border-bottom: 2px solid red;
        color: #40404c
    }
}

body > .Header {
    border-bottom: 1px solid #f2f2f2;
    box-shadow: 0 1px 3px #f2f2f2;
    background: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2;
    display: block
}

@media (max-width: 767px) {
    body > .Header {
        display: none
    }
}

body > .Header > .Main {
    max-width: 970px;
    margin: 0 auto;
    display: flex;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px
}

body > .Header > .Main > .Logo {
    display: flex;
    font-size: 25px;
    color: red
}

body > .Header > .Main > .Logo > .Icon {
    display: flex;
    align-items: center
}

body > .Header > .Main > .Logo > .AppName {
    margin-left: 5px
}

body > .Header > .Main > .Navs {
    display: flex;
    height: 100%;
    align-items: center;
    flex: auto;
    padding: 0 15px
}

body > .Header > .Main > .Navs > .Nav {
    height: 100%;
    padding: 0 16px
}

body > .Header > .Main > .Navs > .Nav > .NavLink {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #72727b
}

body > .Header > .Main > .Navs > .Nav > .NavLink.Active {
    border-bottom: 2px solid red;
    color: #40404c
}

body > .Header > .Main > .SearchForm {
    flex: auto;
    padding: 0 10px
}

body > .Header > .Main > .SearchForm > .Wrap {
    height: 32px;
    width: 100%;
    display: flex;
    padding-left: 20px;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    align-items: center
}

body > .Header > .Main > .SearchForm > .Wrap > input {
    width: 100%;
    font-size: 16px;
    border: none;
    outline: none
}

body > .Header > .Main > .SearchForm > .Wrap > .Suffix {
    height: 32px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d9d9d9
}

body > .Header > .Main > .SearchForm > .Wrap > .Suffix:hover {
    cursor: pointer
}

body > .Header > .Main > .RightMenu > .RightMenuBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    font-size: 14px;
    border-radius: 16px;
    color: red;
    background: transparent;
    padding: 0 16px;
    outline: none;
    margin: 5px;
    border: 1px solid red;
    cursor: pointer
}

body > .Header > .Main > .RightMenu > .RightMenuBtn svg {
    margin-right: 6px
}

body > .Main {
    max-width: 970px;
    padding: 0 10px;
    min-height: 400px;
    margin: 100px auto 0
}

@media (max-width: 767px) {
    body > .Main {
        margin: 110px auto 0
    }
}

body > .Footer {
    border-top: 1px solid #f2f2f2;
    box-shadow: 0 -1px 3px #f2f2f2;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px
}

body > .Footer > .Line {
    text-align: center;
    white-space: normal
}

.AudioList {
    display: flex;
    flex-wrap: wrap;

    background-color: #ffffff;


}

.AudioList > .Container {
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
    padding: 0 20px;
    margin: 20px 0 15px 0;
}

@media (max-width: 767px) {
    .AudioList > .Container {
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%
    }
}

.AudioCard > .CoverContainer {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: 50%
}

.AudioCard > .CoverContainer .Scale {
    margin-top: 100%
}

.AudioCard > .CoverContainer .ViewCount {
    display: flex;
    align-items: center;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #fff;
    font-size: 12px;

}

.AudioCard > .CoverContainer .ViewCount .Count {
    margin-left: 5px
}

.AudioCard > .Title {
    color: #40404c;
    margin: 5px 0
}

.AudioCard > .Anchor {
    color: #72727b
}

.AudioCard2 {
    display: flex
}

.AudioCard2 > .Left {
    flex: 0 0 32%;
    max-width: 32%
}

.AudioCard2 > .Left > .ImgContainer {
    position: relative;
    overflow: hidden;
    border-radius: 5px
}

.AudioCard2 > .Left > .ImgContainer > .Scale {
    margin-top: 100%
}

.AudioCard2 > .Left > .ImgContainer > .Img {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0
}

.AudioCard2 > .Right {
    flex: 0 0 68%;
    max-width: 68%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.AudioCard2 > .Right > .Title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #40404c
}

.AudioCard2 > .Right > .Desc {
    display: flex;
    align-items: center;
    color: #72727b
}

.AudioCard2 > .Right > .Desc > .Count {
    margin-left: 5px
}

.AuthField {
    border: 1px solid #f2f2f2;
    margin: 20px auto;
    padding: 50px 15px;
    max-width: 500px;
    border-radius: 10px
}

.AuthField > .AuthTab {
    display: flex;
    justify-content: center
}

.AuthField > .AuthTab > .TabLink {
    padding: 15px;
    font-size: 16px;
    color: #72727b
}

.AuthField > .AuthTab > .TabLink.Active {
    border-bottom: 2px solid red;
    color: red
}

.AuthField > .AuthForm {
    max-width: 300px;
    margin: 50px auto
}

.FormItem {
    margin-bottom: 24px
}

.FormItem > .Input {
    width: 100%;
    line-height: 1.5;
    border: 1px solid #d9d9d9;
    outline: none;
    height: 40px;
    border-radius: 4px;
    padding: 4px 11px
}

.FormItem > .Input::-moz-placeholder {
    opacity: .7
}

.FormItem > .Input:-ms-input-placeholder {
    opacity: .7
}

.FormItem > .Input::placeholder {
    opacity: .7
}

.FormItem > .Error {
    height: 24px;
    line-height: 24px;
    color: red
}

.FormItem.HasError {
    margin-bottom: 0
}

.FormItem.HasError > .Input {
    border: 1px solid red
}

.FormItem + .Helper {
    white-space: normal;
    color: #72727b;
    margin: 10px 0
}

.SubmitBtn {
    width: 100%;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid red;
    background: red;
    color: #fff;
    cursor: pointer;
    outline: none;
    margin-bottom: 24px
}

.ForgetPage, .ResetPage {
    max-width: 500px;
    margin: 0 auto;
    padding: 50px 0;
    white-space: normal
}

.ForgetPage > .AuthField > .Title, .ResetPage > .AuthField > .Title {
    font-size: 16px;
    text-align: center
}

.UserCenterPage > .Welcome {
    margin: 30px auto;
    font-size: 18px;
    text-align: center
}

.UserCenterPage > .Options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap
}

.UserCenterPage > .Options > .Option {
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 15px
}

.UserCenterPage > .Options > .Option > .Icon {
    color: red;
    font-size: 35px;
    margin: 15px 0 10px
}

.UserCenterPage > .Options > .Option > .Title {
    color: #72727b
}

.UserCenterPage > .Notice {
    color: red
}

.UserCenterPage > .ExpireNotice, .UserCenterPage > .Notice {
    text-align: center;
    margin: 15px 0
}

.UserCenterPage > .UpgradeForm {
    max-width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.UserCenterPage > .UpgradeForm > .CdKeyInput {
    flex: auto
}

.UserCenterPage > .UpgradeForm > .CdKeyInput > input {
    height: 32px;
    width: 100%;
    padding: 0 5px;
    outline: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px
}

.UserCenterPage > .UpgradeForm > .CdKeyInput.HasError > input {
    border: 1px solid red
}

.UserCenterPage > .UpgradeForm > .CdKeyInput > .Error {
    color: red
}

.UserCenterPage > .UpgradeForm > .UpgradeBtn {
    margin-left: 5px
}

.UserCenterPage > .UpgradeForm > .UpgradeBtn > button {
    height: 32px;
    background: red;
    border: none;
    padding: 0 15px;
    color: #fff;
    cursor: pointer;
    border-radius: 2px;
    outline: none
}

.UserCenterPage > .Expire {
    text-align: center;
    color: #72727b;
    margin: 15px 0
}

.AuthorListPage > .AuthorList {
    min-height: 200px;
    background: #F4F4F4;
    border-radius: 30px;
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0;
    padding: 15px
}

.AuthorListPage > .AuthorList > .Container {
    flex: 0 0 12.5%;
    max-width: 12.5%;
    padding: 0 6px;
    margin: 20px 0;

}

@media (max-width: 767px) {
    .AuthorListPage > .AuthorList > .Container {
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%
    }
}

.AuthorCard > .ImgContainer {
    position: relative;
    overflow: hidden;
    border-radius: 50%
}

.AuthorCard > .ImgContainer > .Scale {
    margin-top: 100%
}

.AuthorCard > .ImgContainer > .Img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%
}

.AuthorCard > .Name {
    color: #40404c;
    font-size: 14px;
    margin-top: 15px
}

.AuthorCard > .Count {
    color: #72727b;
    font-size: 12px
}

.AuthorCard > .Count, .AuthorCard > .Name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center
}

.AuthorAudioListPage > .Container {
    margin: 15px 0;
    background-color: #efefef;
    padding: 15px;
    border-radius: 10px
}

.AuthorAudioListPage > .Container > .Wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.AuthorAudioListPage > .Container > .Wrap > .Content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100px
}

.AuthorAudioListPage > .Container > .Wrap > .Content > .ImgContainer {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden
}

.AuthorAudioListPage > .Container > .Wrap > .Content > .ImgContainer > .Img {
    width: 100%;
    height: 100%;
    background-size: cover
}

.AuthorAudioListPage > .Container > .Wrap > .Content > .Desc {
    margin-left: 15px
}

.AuthorAudioListPage > .Container > .Wrap > .Content > .Desc > .Name {
    color: #40404c
}

.AuthorAudioListPage > .Container > .Wrap > .Content > .Desc > .Count {
    color: #72727b;
    font-size: 12px;
    margin-top: 7px
}

.AudioListPage > .Filters {
    margin: 15px 0;
    font-size: 15px
}

.AudioListPage > .Filters > .Filter {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
}

.AudioListPage > .Filters > .Filter > .Title {
    font-weight: 700
}

.AudioListPage > .Filters > .Filter > .Item {
    margin: 0 16px 5px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    color: #72727b
}

.AudioListPage > .Filters > .Filter > .Item.Active {
    border-bottom: 2px solid red;
    color: #40404c
}

.Pagination {
    margin: 15px 0;
    background-color: #ffffff;

}

.Pagination, .Pagination > .Item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Pagination > .Item {
    height: 32px;
    min-width: 32px;
    border: 1px solid #ccc;
    margin: 0 4px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.Pagination > .Item.Disabled, .Pagination > .Item.Disabled:hover {
    border: 1px solid #d9d9d9;
    color: #d9d9d9;
    cursor: not-allowed
}

.Pagination > .Item.Active, .Pagination > .Item:hover {
    border: 1px solid red;
    color: red;
    cursor: pointer
}

.ErrorPage {
    min-height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: red
}

.UpgradePage {
    max-width: 500px;
    margin: 50px auto;
    white-space: normal
}

.UpgradePage > .Title1 {
    text-align: center;
    margin-bottom: 40px
}

.UpgradePage > .Title2 {
    text-align: center;
    color: red;
    margin: 40px 0
}

.UpgradePage > .Descs {
    max-width: 320px;
    margin: 0 auto
}

.UpgradePage > .Support {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 15px
}

.UpgradePage > .Support > .Item {
    display: flex;
    align-items: center;
    margin: 4px 0
}

.UpgradePage > .Support > .Item > svg {
    margin-right: 5px
}

.UpgradePage > .Cards {
    margin: 40px 0;
    display: flex;
    justify-content: center
}

@media (max-width: 767px) {
    .UpgradePage > .Cards {
        margin: 40px auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 200px
    }
}

.UpgradePage > .Cards .Card {
    border: 1px solid red;
    border-radius: 4px;
    padding: 0 20px 10px;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (max-width: 767px) {
    .UpgradePage > .Cards .Card {
        width: 100%;
        margin-bottom: 15px
    }
}

.UpgradePage > .Cards .Card > * {
    margin: 10px 0
}

.UpgradePage > .Cards .Card .Title {
    font-size: 16px;
    color: red
}

.UpgradePage > .Cards .Card .Price {
    font-size: 16px
}

.UpgradePage > .Cards .Card .GBtn .REtn .PFtn {
    width: 100%;
    padding: 7px 15px;
    border-radius: 2px;
    border: 1px solid red;
    background: red;
    color: #fff;
    cursor: pointer;
    outline: none;
    margin-bottom: 24px
}

.AudioShowPage {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: space-between
}

.AudioShowPage > .LeftPart {
    flex: 0 0 64%;
    max-width: 64%
}

@media (max-width: 767px) {
    .AudioShowPage > .LeftPart {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.AudioShowPage > .LeftPart > .Contents > .TabItem, .AudioShowPage > .LeftPart > .Downloads > .TabItem {
    display: none;
    flex-wrap: wrap;
    margin: 0 -6px
}

.AudioShowPage > .LeftPart > .Contents > .TabItem.Active, .AudioShowPage > .LeftPart > .Downloads > .TabItem.Active {
    display: flex
}

.AudioShowPage > .LeftPart > .Contents .Content, .AudioShowPage > .LeftPart > .Contents .Link, .AudioShowPage > .LeftPart > .Downloads .Content, .AudioShowPage > .LeftPart > .Downloads .Link {
    padding: 4px 16px;
    border: 1px solid #d9d9d9;
    margin: 0 6px 10px;
    cursor: pointer
}

.AudioShowPage > .LeftPart > .Contents .Content.Active, .AudioShowPage > .LeftPart > .Contents .Content:hover, .AudioShowPage > .LeftPart > .Contents .Link.Active, .AudioShowPage > .LeftPart > .Contents .Link:hover, .AudioShowPage > .LeftPart > .Downloads .Content.Active, .AudioShowPage > .LeftPart > .Downloads .Content:hover, .AudioShowPage > .LeftPart > .Downloads .Link.Active, .AudioShowPage > .LeftPart > .Downloads .Link:hover {
    border: 1px solid red
}

.AudioShowPage > .LeftPart > .Contents .Content.Active, .AudioShowPage > .LeftPart > .Contents .Link.Active, .AudioShowPage > .LeftPart > .Downloads .Content.Active, .AudioShowPage > .LeftPart > .Downloads .Link.Active {
    color: red
}

.AudioShowPage > .LeftPart > .ContentNotice {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.AudioShowPage > .LeftPart > .Cover .Title {
    margin: 30px auto;
    text-align: center;
    font-size: 18px
}

.AudioShowPage > .LeftPart > .Cover .ImgContainer {
    max-width: 180px;
    margin: 15px auto;
    position: relative;
    overflow: hidden;
    border-radius: 5px
}

.AudioShowPage > .LeftPart > .Cover .ImgContainer .Scale {
    margin-top: 100%
}

.AudioShowPage > .LeftPart > .Cover .ImgContainer .Img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.AudioShowPage > .LeftPart > .Cover .ImgContainer .CategoryLayer {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 5px;
    border-bottom-left-radius: 7px;
    background: hsla(0, 0%, 100%, .7)
}

.AudioShowPage > .LeftPart > .Cover .Anchor {
    text-align: center;
    color: #72727b;
    display: flex;
    justify-content: center
}

.AudioShowPage > .LeftPart > .Cover .Anchor > .Item {
    margin: 0 5px;
    display: inline-flex;
    align-items: center
}

.AudioShowPage > .LeftPart > .Cover .Options {
    margin: 15px auto;
    display: flex;
    justify-content: center
}

.AudioShowPage > .LeftPart > .Cover .Options > .Option > .Btn {
    background: #fff;
    border: 1px solid red;
    padding: 4px 16px;
    border-radius: 13px;
    color: red;
    outline: none;
    cursor: pointer
}

.AudioShowPage > .LeftPart > .Cover .Options > .Option > .Btn[disabled] {
    opacity: .5;
    cursor: not-allowed !important
}

.AudioShowPage > .LeftPart > .AudioPlayer {
    background-color: red;
    color: #fff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > svg, .AudioShowPage > .LeftPart > .AudioPlayer > .Viewer svg {
    margin: 0 6px
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > svg[spin], .AudioShowPage > .LeftPart > .AudioPlayer > .Viewer svg[spin] {
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .ReplayBtn {
    display: flex;
    margin: 0 6px;
    cursor: pointer
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Time {
    margin-left: 15px
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .PlayOrPauseBtn {
    cursor: pointer;
    height: 100%;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: red;
    width: 100%;
    margin: 0;
    height: 30px;
    overflow: hidden;
    cursor: pointer
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:focus {
    outline: none
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, #ccc, #ccc) 100% 50%/100% 3px no-repeat transparent
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    height: 13px;
    width: 13px;
    background: #fff;
    border-radius: 100%;
    border: 0;
    top: 50%;
    margin-top: -6.5px;
    box-shadow: 1px 0 0 -5px #fff, 2px 0 0 -5px #fff, 3px 0 0 -5px #fff, 4px 0 0 -5px #fff, 5px 0 0 -5px #fff, 6px 0 0 -5px #fff, 7px 0 0 -5px #fff, 8px 0 0 -5px #fff, 9px 0 0 -5px #fff, 10px 0 0 -5px #fff, 11px 0 0 -5px #fff, 12px 0 0 -5px #fff, 13px 0 0 -5px #fff, 14px 0 0 -5px #fff, 15px 0 0 -5px #fff, 16px 0 0 -5px #fff, 17px 0 0 -5px #fff, 18px 0 0 -5px #fff, 19px 0 0 -5px #fff, 20px 0 0 -5px #fff, 21px 0 0 -5px #fff, 22px 0 0 -5px #fff, 23px 0 0 -5px #fff, 24px 0 0 -5px #fff, 25px 0 0 -5px #fff, 26px 0 0 -5px #fff, 27px 0 0 -5px #fff, 28px 0 0 -5px #fff, 29px 0 0 -5px #fff, 30px 0 0 -5px #fff, 31px 0 0 -5px #fff, 32px 0 0 -5px #fff, 33px 0 0 -5px #fff, 34px 0 0 -5px #fff, 35px 0 0 -5px #fff, 36px 0 0 -5px #fff, 37px 0 0 -5px #fff, 38px 0 0 -5px #fff, 39px 0 0 -5px #fff, 40px 0 0 -5px #fff, 41px 0 0 -5px #fff, 42px 0 0 -5px #fff, 43px 0 0 -5px #fff, 44px 0 0 -5px #fff, 45px 0 0 -5px #fff, 46px 0 0 -5px #fff, 47px 0 0 -5px #fff, 48px 0 0 -5px #fff, 49px 0 0 -5px #fff, 50px 0 0 -5px #fff, 51px 0 0 -5px #fff, 52px 0 0 -5px #fff, 53px 0 0 -5px #fff, 54px 0 0 -5px #fff, 55px 0 0 -5px #fff, 56px 0 0 -5px #fff, 57px 0 0 -5px #fff, 58px 0 0 -5px #fff, 59px 0 0 -5px #fff, 60px 0 0 -5px #fff, 61px 0 0 -5px #fff, 62px 0 0 -5px #fff, 63px 0 0 -5px #fff, 64px 0 0 -5px #fff, 65px 0 0 -5px #fff, 66px 0 0 -5px #fff, 67px 0 0 -5px #fff, 68px 0 0 -5px #fff, 69px 0 0 -5px #fff, 70px 0 0 -5px #fff, 71px 0 0 -5px #fff, 72px 0 0 -5px #fff, 73px 0 0 -5px #fff, 74px 0 0 -5px #fff, 75px 0 0 -5px #fff, 76px 0 0 -5px #fff, 77px 0 0 -5px #fff, 78px 0 0 -5px #fff, 79px 0 0 -5px #fff, 80px 0 0 -5px #fff, 81px 0 0 -5px #fff, 82px 0 0 -5px #fff, 83px 0 0 -5px #fff, 84px 0 0 -5px #fff, 85px 0 0 -5px #fff, 86px 0 0 -5px #fff, 87px 0 0 -5px #fff, 88px 0 0 -5px #fff, 89px 0 0 -5px #fff, 90px 0 0 -5px #fff, 91px 0 0 -5px #fff, 92px 0 0 -5px #fff, 93px 0 0 -5px #fff, 94px 0 0 -5px #fff, 95px 0 0 -5px #fff, 96px 0 0 -5px #fff, 97px 0 0 -5px #fff, 98px 0 0 -5px #fff, 99px 0 0 -5px #fff, 100px 0 0 -5px #fff, 101px 0 0 -5px #fff, 102px 0 0 -5px #fff, 103px 0 0 -5px #fff, 104px 0 0 -5px #fff, 105px 0 0 -5px #fff, 106px 0 0 -5px #fff, 107px 0 0 -5px #fff, 108px 0 0 -5px #fff, 109px 0 0 -5px #fff, 110px 0 0 -5px #fff, 111px 0 0 -5px #fff, 112px 0 0 -5px #fff, 113px 0 0 -5px #fff, 114px 0 0 -5px #fff, 115px 0 0 -5px #fff, 116px 0 0 -5px #fff, 117px 0 0 -5px #fff, 118px 0 0 -5px #fff, 119px 0 0 -5px #fff, 120px 0 0 -5px #fff, 121px 0 0 -5px #fff, 122px 0 0 -5px #fff, 123px 0 0 -5px #fff, 124px 0 0 -5px #fff, 125px 0 0 -5px #fff, 126px 0 0 -5px #fff, 127px 0 0 -5px #fff, 128px 0 0 -5px #fff, 129px 0 0 -5px #fff, 130px 0 0 -5px #fff, 131px 0 0 -5px #fff, 132px 0 0 -5px #fff, 133px 0 0 -5px #fff, 134px 0 0 -5px #fff, 135px 0 0 -5px #fff, 136px 0 0 -5px #fff, 137px 0 0 -5px #fff, 138px 0 0 -5px #fff, 139px 0 0 -5px #fff, 140px 0 0 -5px #fff, 141px 0 0 -5px #fff, 142px 0 0 -5px #fff, 143px 0 0 -5px #fff, 144px 0 0 -5px #fff, 145px 0 0 -5px #fff, 146px 0 0 -5px #fff, 147px 0 0 -5px #fff, 148px 0 0 -5px #fff, 149px 0 0 -5px #fff, 150px 0 0 -5px #fff, 151px 0 0 -5px #fff, 152px 0 0 -5px #fff, 153px 0 0 -5px #fff, 154px 0 0 -5px #fff, 155px 0 0 -5px #fff, 156px 0 0 -5px #fff, 157px 0 0 -5px #fff, 158px 0 0 -5px #fff, 159px 0 0 -5px #fff, 160px 0 0 -5px #fff, 161px 0 0 -5px #fff, 162px 0 0 -5px #fff, 163px 0 0 -5px #fff, 164px 0 0 -5px #fff, 165px 0 0 -5px #fff, 166px 0 0 -5px #fff, 167px 0 0 -5px #fff, 168px 0 0 -5px #fff, 169px 0 0 -5px #fff, 170px 0 0 -5px #fff, 171px 0 0 -5px #fff, 172px 0 0 -5px #fff, 173px 0 0 -5px #fff, 174px 0 0 -5px #fff, 175px 0 0 -5px #fff, 176px 0 0 -5px #fff, 177px 0 0 -5px #fff, 178px 0 0 -5px #fff, 179px 0 0 -5px #fff, 180px 0 0 -5px #fff, 181px 0 0 -5px #fff, 182px 0 0 -5px #fff, 183px 0 0 -5px #fff, 184px 0 0 -5px #fff, 185px 0 0 -5px #fff, 186px 0 0 -5px #fff, 187px 0 0 -5px #fff, 188px 0 0 -5px #fff, 189px 0 0 -5px #fff, 190px 0 0 -5px #fff, 191px 0 0 -5px #fff, 192px 0 0 -5px #fff, 193px 0 0 -5px #fff, 194px 0 0 -5px #fff, 195px 0 0 -5px #fff, 196px 0 0 -5px #fff, 197px 0 0 -5px #fff, 198px 0 0 -5px #fff, 199px 0 0 -5px #fff, 200px 0 0 -5px #fff, 201px 0 0 -5px #fff, 202px 0 0 -5px #fff, 203px 0 0 -5px #fff, 204px 0 0 -5px #fff, 205px 0 0 -5px #fff, 206px 0 0 -5px #fff, 207px 0 0 -5px #fff, 208px 0 0 -5px #fff, 209px 0 0 -5px #fff, 210px 0 0 -5px #fff, 211px 0 0 -5px #fff, 212px 0 0 -5px #fff, 213px 0 0 -5px #fff, 214px 0 0 -5px #fff, 215px 0 0 -5px #fff, 216px 0 0 -5px #fff, 217px 0 0 -5px #fff, 218px 0 0 -5px #fff, 219px 0 0 -5px #fff, 220px 0 0 -5px #fff, 221px 0 0 -5px #fff, 222px 0 0 -5px #fff, 223px 0 0 -5px #fff, 224px 0 0 -5px #fff, 225px 0 0 -5px #fff, 226px 0 0 -5px #fff, 227px 0 0 -5px #fff, 228px 0 0 -5px #fff, 229px 0 0 -5px #fff, 230px 0 0 -5px #fff, 231px 0 0 -5px #fff, 232px 0 0 -5px #fff, 233px 0 0 -5px #fff, 234px 0 0 -5px #fff, 235px 0 0 -5px #fff, 236px 0 0 -5px #fff, 237px 0 0 -5px #fff, 238px 0 0 -5px #fff, 239px 0 0 -5px #fff, 240px 0 0 -5px #fff, 241px 0 0 -5px #fff, 242px 0 0 -5px #fff, 243px 0 0 -5px #fff, 244px 0 0 -5px #fff, 245px 0 0 -5px #fff, 246px 0 0 -5px #fff, 247px 0 0 -5px #fff, 248px 0 0 -5px #fff, 249px 0 0 -5px #fff, 250px 0 0 -5px #fff, 251px 0 0 -5px #fff, 252px 0 0 -5px #fff, 253px 0 0 -5px #fff, 254px 0 0 -5px #fff, 255px 0 0 -5px #fff, 256px 0 0 -5px #fff, 257px 0 0 -5px #fff, 258px 0 0 -5px #fff, 259px 0 0 -5px #fff, 260px 0 0 -5px #fff, 261px 0 0 -5px #fff, 262px 0 0 -5px #fff, 263px 0 0 -5px #fff, 264px 0 0 -5px #fff, 265px 0 0 -5px #fff, 266px 0 0 -5px #fff, 267px 0 0 -5px #fff, 268px 0 0 -5px #fff, 269px 0 0 -5px #fff, 270px 0 0 -5px #fff, 271px 0 0 -5px #fff, 272px 0 0 -5px #fff, 273px 0 0 -5px #fff, 274px 0 0 -5px #fff, 275px 0 0 -5px #fff, 276px 0 0 -5px #fff, 277px 0 0 -5px #fff, 278px 0 0 -5px #fff, 279px 0 0 -5px #fff, 280px 0 0 -5px #fff, 281px 0 0 -5px #fff, 282px 0 0 -5px #fff, 283px 0 0 -5px #fff, 284px 0 0 -5px #fff, 285px 0 0 -5px #fff, 286px 0 0 -5px #fff, 287px 0 0 -5px #fff, 288px 0 0 -5px #fff, 289px 0 0 -5px #fff, 290px 0 0 -5px #fff, 291px 0 0 -5px #fff, 292px 0 0 -5px #fff, 293px 0 0 -5px #fff, 294px 0 0 -5px #fff, 295px 0 0 -5px #fff, 296px 0 0 -5px #fff, 297px 0 0 -5px #fff, 298px 0 0 -5px #fff, 299px 0 0 -5px #fff, 300px 0 0 -5px #fff, 301px 0 0 -5px #fff, 302px 0 0 -5px #fff, 303px 0 0 -5px #fff, 304px 0 0 -5px #fff, 305px 0 0 -5px #fff, 306px 0 0 -5px #fff, 307px 0 0 -5px #fff, 308px 0 0 -5px #fff, 309px 0 0 -5px #fff, 310px 0 0 -5px #fff, 311px 0 0 -5px #fff, 312px 0 0 -5px #fff, 313px 0 0 -5px #fff, 314px 0 0 -5px #fff, 315px 0 0 -5px #fff, 316px 0 0 -5px #fff, 317px 0 0 -5px #fff, 318px 0 0 -5px #fff, 319px 0 0 -5px #fff, 320px 0 0 -5px #fff, 321px 0 0 -5px #fff, 322px 0 0 -5px #fff, 323px 0 0 -5px #fff, 324px 0 0 -5px #fff, 325px 0 0 -5px #fff, 326px 0 0 -5px #fff, 327px 0 0 -5px #fff, 328px 0 0 -5px #fff, 329px 0 0 -5px #fff, 330px 0 0 -5px #fff, 331px 0 0 -5px #fff, 332px 0 0 -5px #fff, 333px 0 0 -5px #fff, 334px 0 0 -5px #fff, 335px 0 0 -5px #fff, 336px 0 0 -5px #fff, 337px 0 0 -5px #fff, 338px 0 0 -5px #fff, 339px 0 0 -5px #fff, 340px 0 0 -5px #fff, 341px 0 0 -5px #fff, 342px 0 0 -5px #fff, 343px 0 0 -5px #fff, 344px 0 0 -5px #fff, 345px 0 0 -5px #fff, 346px 0 0 -5px #fff, 347px 0 0 -5px #fff, 348px 0 0 -5px #fff, 349px 0 0 -5px #fff, 350px 0 0 -5px #fff, 351px 0 0 -5px #fff, 352px 0 0 -5px #fff, 353px 0 0 -5px #fff, 354px 0 0 -5px #fff, 355px 0 0 -5px #fff, 356px 0 0 -5px #fff, 357px 0 0 -5px #fff, 358px 0 0 -5px #fff, 359px 0 0 -5px #fff, 360px 0 0 -5px #fff, 361px 0 0 -5px #fff, 362px 0 0 -5px #fff, 363px 0 0 -5px #fff, 364px 0 0 -5px #fff, 365px 0 0 -5px #fff, 366px 0 0 -5px #fff, 367px 0 0 -5px #fff, 368px 0 0 -5px #fff, 369px 0 0 -5px #fff, 370px 0 0 -5px #fff, 371px 0 0 -5px #fff, 372px 0 0 -5px #fff, 373px 0 0 -5px #fff, 374px 0 0 -5px #fff, 375px 0 0 -5px #fff, 376px 0 0 -5px #fff, 377px 0 0 -5px #fff, 378px 0 0 -5px #fff, 379px 0 0 -5px #fff, 380px 0 0 -5px #fff, 381px 0 0 -5px #fff, 382px 0 0 -5px #fff, 383px 0 0 -5px #fff, 384px 0 0 -5px #fff, 385px 0 0 -5px #fff, 386px 0 0 -5px #fff, 387px 0 0 -5px #fff, 388px 0 0 -5px #fff, 389px 0 0 -5px #fff, 390px 0 0 -5px #fff, 391px 0 0 -5px #fff, 392px 0 0 -5px #fff, 393px 0 0 -5px #fff, 394px 0 0 -5px #fff, 395px 0 0 -5px #fff, 396px 0 0 -5px #fff, 397px 0 0 -5px #fff, 398px 0 0 -5px #fff, 399px 0 0 -5px #fff, 400px 0 0 -5px #fff, 401px 0 0 -5px #fff, 402px 0 0 -5px #fff, 403px 0 0 -5px #fff, 404px 0 0 -5px #fff, 405px 0 0 -5px #fff, 406px 0 0 -5px #fff, 407px 0 0 -5px #fff, 408px 0 0 -5px #fff, 409px 0 0 -5px #fff, 410px 0 0 -5px #fff, 411px 0 0 -5px #fff, 412px 0 0 -5px #fff, 413px 0 0 -5px #fff, 414px 0 0 -5px #fff, 415px 0 0 -5px #fff, 416px 0 0 -5px #fff, 417px 0 0 -5px #fff, 418px 0 0 -5px #fff, 419px 0 0 -5px #fff, 420px 0 0 -5px #fff, 421px 0 0 -5px #fff, 422px 0 0 -5px #fff, 423px 0 0 -5px #fff, 424px 0 0 -5px #fff, 425px 0 0 -5px #fff, 426px 0 0 -5px #fff, 427px 0 0 -5px #fff, 428px 0 0 -5px #fff, 429px 0 0 -5px #fff, 430px 0 0 -5px #fff, 431px 0 0 -5px #fff, 432px 0 0 -5px #fff, 433px 0 0 -5px #fff, 434px 0 0 -5px #fff, 435px 0 0 -5px #fff, 436px 0 0 -5px #fff, 437px 0 0 -5px #fff, 438px 0 0 -5px #fff, 439px 0 0 -5px #fff, 440px 0 0 -5px #fff, 441px 0 0 -5px #fff, 442px 0 0 -5px #fff, 443px 0 0 -5px #fff, 444px 0 0 -5px #fff, 445px 0 0 -5px #fff, 446px 0 0 -5px #fff, 447px 0 0 -5px #fff, 448px 0 0 -5px #fff, 449px 0 0 -5px #fff, 450px 0 0 -5px #fff, 451px 0 0 -5px #fff, 452px 0 0 -5px #fff, 453px 0 0 -5px #fff, 454px 0 0 -5px #fff, 455px 0 0 -5px #fff, 456px 0 0 -5px #fff, 457px 0 0 -5px #fff, 458px 0 0 -5px #fff, 459px 0 0 -5px #fff, 460px 0 0 -5px #fff, 461px 0 0 -5px #fff, 462px 0 0 -5px #fff, 463px 0 0 -5px #fff, 464px 0 0 -5px #fff, 465px 0 0 -5px #fff, 466px 0 0 -5px #fff, 467px 0 0 -5px #fff, 468px 0 0 -5px #fff, 469px 0 0 -5px #fff, 470px 0 0 -5px #fff, 471px 0 0 -5px #fff, 472px 0 0 -5px #fff, 473px 0 0 -5px #fff, 474px 0 0 -5px #fff, 475px 0 0 -5px #fff, 476px 0 0 -5px #fff, 477px 0 0 -5px #fff, 478px 0 0 -5px #fff, 479px 0 0 -5px #fff, 480px 0 0 -5px #fff, 481px 0 0 -5px #fff, 482px 0 0 -5px #fff, 483px 0 0 -5px #fff, 484px 0 0 -5px #fff, 485px 0 0 -5px #fff, 486px 0 0 -5px #fff, 487px 0 0 -5px #fff, 488px 0 0 -5px #fff, 489px 0 0 -5px #fff, 490px 0 0 -5px #fff, 491px 0 0 -5px #fff, 492px 0 0 -5px #fff, 493px 0 0 -5px #fff, 494px 0 0 -5px #fff, 495px 0 0 -5px #fff, 496px 0 0 -5px #fff, 497px 0 0 -5px #fff, 498px 0 0 -5px #fff, 499px 0 0 -5px #fff, 500px 0 0 -5px #fff, 501px 0 0 -5px #fff, 502px 0 0 -5px #fff, 503px 0 0 -5px #fff, 504px 0 0 -5px #fff, 505px 0 0 -5px #fff, 506px 0 0 -5px #fff, 507px 0 0 -5px #fff, 508px 0 0 -5px #fff, 509px 0 0 -5px #fff, 510px 0 0 -5px #fff, 511px 0 0 -5px #fff, 512px 0 0 -5px #fff, 513px 0 0 -5px #fff, 514px 0 0 -5px #fff, 515px 0 0 -5px #fff, 516px 0 0 -5px #fff, 517px 0 0 -5px #fff, 518px 0 0 -5px #fff, 519px 0 0 -5px #fff, 520px 0 0 -5px #fff, 521px 0 0 -5px #fff, 522px 0 0 -5px #fff, 523px 0 0 -5px #fff, 524px 0 0 -5px #fff, 525px 0 0 -5px #fff, 526px 0 0 -5px #fff, 527px 0 0 -5px #fff, 528px 0 0 -5px #fff, 529px 0 0 -5px #fff, 530px 0 0 -5px #fff, 531px 0 0 -5px #fff, 532px 0 0 -5px #fff, 533px 0 0 -5px #fff, 534px 0 0 -5px #fff, 535px 0 0 -5px #fff, 536px 0 0 -5px #fff, 537px 0 0 -5px #fff, 538px 0 0 -5px #fff, 539px 0 0 -5px #fff, 540px 0 0 -5px #fff, 541px 0 0 -5px #fff, 542px 0 0 -5px #fff, 543px 0 0 -5px #fff, 544px 0 0 -5px #fff, 545px 0 0 -5px #fff, 546px 0 0 -5px #fff, 547px 0 0 -5px #fff, 548px 0 0 -5px #fff, 549px 0 0 -5px #fff, 550px 0 0 -5px #fff, 551px 0 0 -5px #fff, 552px 0 0 -5px #fff, 553px 0 0 -5px #fff, 554px 0 0 -5px #fff, 555px 0 0 -5px #fff, 556px 0 0 -5px #fff, 557px 0 0 -5px #fff, 558px 0 0 -5px #fff, 559px 0 0 -5px #fff, 560px 0 0 -5px #fff, 561px 0 0 -5px #fff, 562px 0 0 -5px #fff, 563px 0 0 -5px #fff, 564px 0 0 -5px #fff, 565px 0 0 -5px #fff, 566px 0 0 -5px #fff, 567px 0 0 -5px #fff, 568px 0 0 -5px #fff, 569px 0 0 -5px #fff, 570px 0 0 -5px #fff, 571px 0 0 -5px #fff, 572px 0 0 -5px #fff, 573px 0 0 -5px #fff, 574px 0 0 -5px #fff, 575px 0 0 -5px #fff, 576px 0 0 -5px #fff, 577px 0 0 -5px #fff, 578px 0 0 -5px #fff, 579px 0 0 -5px #fff, 580px 0 0 -5px #fff, 581px 0 0 -5px #fff, 582px 0 0 -5px #fff, 583px 0 0 -5px #fff, 584px 0 0 -5px #fff, 585px 0 0 -5px #fff, 586px 0 0 -5px #fff, 587px 0 0 -5px #fff, 588px 0 0 -5px #fff, 589px 0 0 -5px #fff, 590px 0 0 -5px #fff, 591px 0 0 -5px #fff, 592px 0 0 -5px #fff, 593px 0 0 -5px #fff, 594px 0 0 -5px #fff, 595px 0 0 -5px #fff, 596px 0 0 -5px #fff, 597px 0 0 -5px #fff, 598px 0 0 -5px #fff, 599px 0 0 -5px #fff, 600px 0 0 -5px #fff, 601px 0 0 -5px #fff, 602px 0 0 -5px #fff, 603px 0 0 -5px #fff, 604px 0 0 -5px #fff, 605px 0 0 -5px #fff, 606px 0 0 -5px #fff, 607px 0 0 -5px #fff, 608px 0 0 -5px #fff, 609px 0 0 -5px #fff, 610px 0 0 -5px #fff, 611px 0 0 -5px #fff, 612px 0 0 -5px #fff, 613px 0 0 -5px #fff, 614px 0 0 -5px #fff, 615px 0 0 -5px #fff, 616px 0 0 -5px #fff, 617px 0 0 -5px #fff, 618px 0 0 -5px #fff, 619px 0 0 -5px #fff, 620px 0 0 -5px #fff, 621px 0 0 -5px #fff, 622px 0 0 -5px #fff, 623px 0 0 -5px #fff, 624px 0 0 -5px #fff, 625px 0 0 -5px #fff, 626px 0 0 -5px #fff, 627px 0 0 -5px #fff, 628px 0 0 -5px #fff, 629px 0 0 -5px #fff, 630px 0 0 -5px #fff, 631px 0 0 -5px #fff, 632px 0 0 -5px #fff, 633px 0 0 -5px #fff, 634px 0 0 -5px #fff, 635px 0 0 -5px #fff, 636px 0 0 -5px #fff, 637px 0 0 -5px #fff, 638px 0 0 -5px #fff, 639px 0 0 -5px #fff, 640px 0 0 -5px #fff, 641px 0 0 -5px #fff, 642px 0 0 -5px #fff, 643px 0 0 -5px #fff, 644px 0 0 -5px #fff, 645px 0 0 -5px #fff, 646px 0 0 -5px #fff, 647px 0 0 -5px #fff, 648px 0 0 -5px #fff, 649px 0 0 -5px #fff, 650px 0 0 -5px #fff, 651px 0 0 -5px #fff, 652px 0 0 -5px #fff, 653px 0 0 -5px #fff, 654px 0 0 -5px #fff, 655px 0 0 -5px #fff, 656px 0 0 -5px #fff, 657px 0 0 -5px #fff, 658px 0 0 -5px #fff, 659px 0 0 -5px #fff, 660px 0 0 -5px #fff, 661px 0 0 -5px #fff, 662px 0 0 -5px #fff, 663px 0 0 -5px #fff, 664px 0 0 -5px #fff, 665px 0 0 -5px #fff, 666px 0 0 -5px #fff, 667px 0 0 -5px #fff, 668px 0 0 -5px #fff, 669px 0 0 -5px #fff, 670px 0 0 -5px #fff, 671px 0 0 -5px #fff, 672px 0 0 -5px #fff, 673px 0 0 -5px #fff, 674px 0 0 -5px #fff, 675px 0 0 -5px #fff, 676px 0 0 -5px #fff, 677px 0 0 -5px #fff, 678px 0 0 -5px #fff, 679px 0 0 -5px #fff, 680px 0 0 -5px #fff, 681px 0 0 -5px #fff, 682px 0 0 -5px #fff, 683px 0 0 -5px #fff, 684px 0 0 -5px #fff, 685px 0 0 -5px #fff, 686px 0 0 -5px #fff, 687px 0 0 -5px #fff, 688px 0 0 -5px #fff, 689px 0 0 -5px #fff, 690px 0 0 -5px #fff, 691px 0 0 -5px #fff, 692px 0 0 -5px #fff, 693px 0 0 -5px #fff, 694px 0 0 -5px #fff, 695px 0 0 -5px #fff, 696px 0 0 -5px #fff, 697px 0 0 -5px #fff, 698px 0 0 -5px #fff, 699px 0 0 -5px #fff, 700px 0 0 -5px #fff, 701px 0 0 -5px #fff, 702px 0 0 -5px #fff, 703px 0 0 -5px #fff, 704px 0 0 -5px #fff, 705px 0 0 -5px #fff, 706px 0 0 -5px #fff, 707px 0 0 -5px #fff, 708px 0 0 -5px #fff, 709px 0 0 -5px #fff, 710px 0 0 -5px #fff, 711px 0 0 -5px #fff, 712px 0 0 -5px #fff, 713px 0 0 -5px #fff, 714px 0 0 -5px #fff, 715px 0 0 -5px #fff, 716px 0 0 -5px #fff, 717px 0 0 -5px #fff, 718px 0 0 -5px #fff, 719px 0 0 -5px #fff, 720px 0 0 -5px #fff, 721px 0 0 -5px #fff, 722px 0 0 -5px #fff, 723px 0 0 -5px #fff, 724px 0 0 -5px #fff, 725px 0 0 -5px #fff, 726px 0 0 -5px #fff, 727px 0 0 -5px #fff, 728px 0 0 -5px #fff, 729px 0 0 -5px #fff, 730px 0 0 -5px #fff, 731px 0 0 -5px #fff, 732px 0 0 -5px #fff, 733px 0 0 -5px #fff, 734px 0 0 -5px #fff, 735px 0 0 -5px #fff, 736px 0 0 -5px #fff, 737px 0 0 -5px #fff, 738px 0 0 -5px #fff, 739px 0 0 -5px #fff, 740px 0 0 -5px #fff, 741px 0 0 -5px #fff, 742px 0 0 -5px #fff, 743px 0 0 -5px #fff, 744px 0 0 -5px #fff, 745px 0 0 -5px #fff, 746px 0 0 -5px #fff, 747px 0 0 -5px #fff, 748px 0 0 -5px #fff, 749px 0 0 -5px #fff, 750px 0 0 -5px #fff, 751px 0 0 -5px #fff, 752px 0 0 -5px #fff, 753px 0 0 -5px #fff, 754px 0 0 -5px #fff, 755px 0 0 -5px #fff, 756px 0 0 -5px #fff, 757px 0 0 -5px #fff, 758px 0 0 -5px #fff, 759px 0 0 -5px #fff, 760px 0 0 -5px #fff, 761px 0 0 -5px #fff, 762px 0 0 -5px #fff, 763px 0 0 -5px #fff, 764px 0 0 -5px #fff, 765px 0 0 -5px #fff, 766px 0 0 -5px #fff, 767px 0 0 -5px #fff, 768px 0 0 -5px #fff, 769px 0 0 -5px #fff, 770px 0 0 -5px #fff, 771px 0 0 -5px #fff, 772px 0 0 -5px #fff, 773px 0 0 -5px #fff, 774px 0 0 -5px #fff, 775px 0 0 -5px #fff, 776px 0 0 -5px #fff, 777px 0 0 -5px #fff, 778px 0 0 -5px #fff, 779px 0 0 -5px #fff, 780px 0 0 -5px #fff, 781px 0 0 -5px #fff, 782px 0 0 -5px #fff, 783px 0 0 -5px #fff, 784px 0 0 -5px #fff, 785px 0 0 -5px #fff, 786px 0 0 -5px #fff, 787px 0 0 -5px #fff, 788px 0 0 -5px #fff, 789px 0 0 -5px #fff, 790px 0 0 -5px #fff, 791px 0 0 -5px #fff, 792px 0 0 -5px #fff, 793px 0 0 -5px #fff, 794px 0 0 -5px #fff, 795px 0 0 -5px #fff, 796px 0 0 -5px #fff, 797px 0 0 -5px #fff, 798px 0 0 -5px #fff, 799px 0 0 -5px #fff, 800px 0 0 -5px #fff, 801px 0 0 -5px #fff, 802px 0 0 -5px #fff, 803px 0 0 -5px #fff, 804px 0 0 -5px #fff, 805px 0 0 -5px #fff, 806px 0 0 -5px #fff, 807px 0 0 -5px #fff, 808px 0 0 -5px #fff, 809px 0 0 -5px #fff, 810px 0 0 -5px #fff, 811px 0 0 -5px #fff, 812px 0 0 -5px #fff, 813px 0 0 -5px #fff, 814px 0 0 -5px #fff, 815px 0 0 -5px #fff, 816px 0 0 -5px #fff, 817px 0 0 -5px #fff, 818px 0 0 -5px #fff, 819px 0 0 -5px #fff, 820px 0 0 -5px #fff, 821px 0 0 -5px #fff, 822px 0 0 -5px #fff, 823px 0 0 -5px #fff, 824px 0 0 -5px #fff, 825px 0 0 -5px #fff, 826px 0 0 -5px #fff, 827px 0 0 -5px #fff, 828px 0 0 -5px #fff, 829px 0 0 -5px #fff, 830px 0 0 -5px #fff, 831px 0 0 -5px #fff, 832px 0 0 -5px #fff, 833px 0 0 -5px #fff, 834px 0 0 -5px #fff, 835px 0 0 -5px #fff, 836px 0 0 -5px #fff, 837px 0 0 -5px #fff, 838px 0 0 -5px #fff, 839px 0 0 -5px #fff, 840px 0 0 -5px #fff, 841px 0 0 -5px #fff, 842px 0 0 -5px #fff, 843px 0 0 -5px #fff, 844px 0 0 -5px #fff, 845px 0 0 -5px #fff, 846px 0 0 -5px #fff, 847px 0 0 -5px #fff, 848px 0 0 -5px #fff, 849px 0 0 -5px #fff, 850px 0 0 -5px #fff, 851px 0 0 -5px #fff, 852px 0 0 -5px #fff, 853px 0 0 -5px #fff, 854px 0 0 -5px #fff, 855px 0 0 -5px #fff, 856px 0 0 -5px #fff, 857px 0 0 -5px #fff, 858px 0 0 -5px #fff, 859px 0 0 -5px #fff, 860px 0 0 -5px #fff, 861px 0 0 -5px #fff, 862px 0 0 -5px #fff, 863px 0 0 -5px #fff, 864px 0 0 -5px #fff, 865px 0 0 -5px #fff, 866px 0 0 -5px #fff, 867px 0 0 -5px #fff, 868px 0 0 -5px #fff, 869px 0 0 -5px #fff, 870px 0 0 -5px #fff, 871px 0 0 -5px #fff, 872px 0 0 -5px #fff, 873px 0 0 -5px #fff, 874px 0 0 -5px #fff, 875px 0 0 -5px #fff, 876px 0 0 -5px #fff, 877px 0 0 -5px #fff, 878px 0 0 -5px #fff, 879px 0 0 -5px #fff, 880px 0 0 -5px #fff, 881px 0 0 -5px #fff, 882px 0 0 -5px #fff, 883px 0 0 -5px #fff, 884px 0 0 -5px #fff, 885px 0 0 -5px #fff, 886px 0 0 -5px #fff, 887px 0 0 -5px #fff, 888px 0 0 -5px #fff, 889px 0 0 -5px #fff, 890px 0 0 -5px #fff, 891px 0 0 -5px #fff, 892px 0 0 -5px #fff, 893px 0 0 -5px #fff, 894px 0 0 -5px #fff, 895px 0 0 -5px #fff, 896px 0 0 -5px #fff, 897px 0 0 -5px #fff, 898px 0 0 -5px #fff, 899px 0 0 -5px #fff, 900px 0 0 -5px #fff, 901px 0 0 -5px #fff, 902px 0 0 -5px #fff, 903px 0 0 -5px #fff, 904px 0 0 -5px #fff, 905px 0 0 -5px #fff, 906px 0 0 -5px #fff, 907px 0 0 -5px #fff, 908px 0 0 -5px #fff, 909px 0 0 -5px #fff, 910px 0 0 -5px #fff, 911px 0 0 -5px #fff, 912px 0 0 -5px #fff, 913px 0 0 -5px #fff, 914px 0 0 -5px #fff, 915px 0 0 -5px #fff, 916px 0 0 -5px #fff, 917px 0 0 -5px #fff, 918px 0 0 -5px #fff, 919px 0 0 -5px #fff, 920px 0 0 -5px #fff, 921px 0 0 -5px #fff, 922px 0 0 -5px #fff, 923px 0 0 -5px #fff, 924px 0 0 -5px #fff, 925px 0 0 -5px #fff, 926px 0 0 -5px #fff, 927px 0 0 -5px #fff, 928px 0 0 -5px #fff, 929px 0 0 -5px #fff, 930px 0 0 -5px #fff, 931px 0 0 -5px #fff, 932px 0 0 -5px #fff, 933px 0 0 -5px #fff, 934px 0 0 -5px #fff, 935px 0 0 -5px #fff, 936px 0 0 -5px #fff, 937px 0 0 -5px #fff, 938px 0 0 -5px #fff, 939px 0 0 -5px #fff, 940px 0 0 -5px #fff, 941px 0 0 -5px #fff, 942px 0 0 -5px #fff, 943px 0 0 -5px #fff, 944px 0 0 -5px #fff, 945px 0 0 -5px #fff, 946px 0 0 -5px #fff, 947px 0 0 -5px #fff, 948px 0 0 -5px #fff, 949px 0 0 -5px #fff, 950px 0 0 -5px #fff, 951px 0 0 -5px #fff, 952px 0 0 -5px #fff, 953px 0 0 -5px #fff, 954px 0 0 -5px #fff, 955px 0 0 -5px #fff, 956px 0 0 -5px #fff, 957px 0 0 -5px #fff, 958px 0 0 -5px #fff, 959px 0 0 -5px #fff, 960px 0 0 -5px #fff, 961px 0 0 -5px #fff, 962px 0 0 -5px #fff, 963px 0 0 -5px #fff, 964px 0 0 -5px #fff, 965px 0 0 -5px #fff, 966px 0 0 -5px #fff, 967px 0 0 -5px #fff, 968px 0 0 -5px #fff, 969px 0 0 -5px #fff, 970px 0 0 -5px #fff, 971px 0 0 -5px #fff, 972px 0 0 -5px #fff, 973px 0 0 -5px #fff, 974px 0 0 -5px #fff, 975px 0 0 -5px #fff, 976px 0 0 -5px #fff, 977px 0 0 -5px #fff, 978px 0 0 -5px #fff, 979px 0 0 -5px #fff, 980px 0 0 -5px #fff, 981px 0 0 -5px #fff, 982px 0 0 -5px #fff, 983px 0 0 -5px #fff, 984px 0 0 -5px #fff, 985px 0 0 -5px #fff, 986px 0 0 -5px #fff, 987px 0 0 -5px #fff, 988px 0 0 -5px #fff, 989px 0 0 -5px #fff, 990px 0 0 -5px #fff, 991px 0 0 -5px #fff, 992px 0 0 -5px #fff, 993px 0 0 -5px #fff, 994px 0 0 -5px #fff, 995px 0 0 -5px #fff, 996px 0 0 -5px #fff, 997px 0 0 -5px #fff, 998px 0 0 -5px #fff, 999px 0 0 -5px #fff, 1000px 0 0 -5px #fff;
    -webkit-transition: background-color .15s;
    transition: background-color .15s
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-moz-range-progress, .AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-moz-range-track {
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, #fff, #fff) 100% 50%/100% 3px no-repeat transparent
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-moz-range-progress {
    background: linear-gradient(180deg, #ccc, #ccc) 100% 50%/100% 3px no-repeat transparent
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    height: 13px;
    width: 13px;
    background: #fff;
    border-radius: 100%;
    border: 0;
    -moz-transition: background-color .15s;
    transition: background-color .15s
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-ms-track {
    width: 100%;
    height: 30px;
    border: 0;
    color: transparent;
    background: transparent
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-ms-fill-lower {
    background: linear-gradient(180deg, #ccc, #ccc) 100% 50%/100% 3px no-repeat transparent
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-ms-fill-upper {
    background: linear-gradient(180deg, #fff, #fff) 100% 50%/100% 3px no-repeat transparent
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider::-ms-thumb {
    appearance: none;
    height: 13px;
    width: 13px;
    background: #fff;
    border-radius: 100%;
    border: 0;
    -ms-transition: background-color .15s;
    transition: background-color .15s;
    top: 0;
    margin: 0;
    box-shadow: none
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:focus::-webkit-slider-thumb, .AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:hover::-webkit-slider-thumb {
    background-color: #ccc
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:focus::-moz-range-thumb, .AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:hover::-moz-range-thumb {
    background-color: #ccc
}

.AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:focus::-ms-thumb, .AudioShowPage > .LeftPart > .AudioPlayer > .Viewer > .Slider:hover::-ms-thumb {
    background-color: #ccc
}

.AudioShowPage > .RightPart {
    flex: 0 0 34%;
    max-width: 34%
}

@media (max-width: 767px) {
    .AudioShowPage > .RightPart {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.MessageLayer {
    position: fixed;
    top: 0;
    width: 100%;
    pointer-events: none;
    z-index: 10;
    padding: 0 10px
}

.MessageLayer > .Message {
    white-space: normal;
    background: #fff;
    margin: 16px auto;
    max-width: 500px;
    padding: 10px 16px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-name: messageDown;
    animation-name: messageDown;
    pointer-events: all
}

.MessageLayer > .Message, .MessageLayer > .Message > div {
    display: flex;
    align-items: center
}

.MessageLayer > .Message.Warn > svg {
    color: #faad14
}

.MessageLayer > .Message.Success > svg {
    color: #52c41a
}

.MessageLayer > .Message > svg {
    flex: 0 0 16px;
    margin-right: 10px
}

.MessageLayer > .Message.Hide {
    -webkit-animation-name: messageUp;
    animation-name: messageUp
}

.UserCenterProfilePage > .ProfileForm {
    margin: 50px auto 30px;
    max-width: 200px
}

.UserCenterProfilePage > .ProfileForm > .PlainText {
    margin-bottom: 24px
}

@-webkit-keyframes messageDown {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes messageDown {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes messageUp {
    0% {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-100%);
        opacity: 0
    }
}

@keyframes messageUp {
    0% {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-100%);
        opacity: 0
    }
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.UserCenterAgentPage .Dashboard {
    display: flex;
    margin: 0 -6px;
    flex-wrap: wrap
}

.UserCenterAgentPage .Dashboard .ItemWrap {
    margin-bottom: 15px;
    flex: 0 0 33.3333333%;
    max-width: 33.3333333%;
    padding: 0 6px
}

@media (max-width: 767px) {
    .UserCenterAgentPage .Dashboard .ItemWrap {
        flex: 0 0 50%;
        max-width: 50%
    }
}

.UserCenterAgentPage .Dashboard .ItemWrap .Item {
    background-color: red;
    color: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 10px
}

.UserCenterAgentPage > .Notice {
    white-space: normal
}

.GAlert[type=success] {
    padding: 8px 15px;
    background-color: #f6ffed;
    border: 1px solid #b7eb8f
}

.GTable {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0
}

.GTable > thead td {
    background: #fafafa
}

.GTable tr td {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px
}

.GTable tr:hover td {
    background: #fafafa
}

.ad li {
    display: inline-block;
    vertical-align: top;
    width: calc(12.5%);
    text-align: center;
    margin: 20px 0 15px 0;
}
@media (max-width: 767px) {
    .ad li {
        display: inline-block;
        vertical-align: top;
        width: calc(25%);
        text-align: center;
        margin: 20px 0 15px 0;
    }
}
.ad {
    flex-wrap: wrap;
    display: flex;
    background-color: #ffffff;
    box-shadow: 0 0 8px #eee;

}
.ad img{
    border-radius: 10px;

}
.ad li:hover {
    text-decoration:underline;
}
.name{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}
.buytn{
    width: 100%;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid red;
    background: red;
    color: #fff;
    cursor: pointer;
    outline: none;
    margin-bottom: 24px;
}
/* c-message组件样式 */
.c-message {
    position: fixed;
    top: 30px;
    left: 50%;
    /* transform:translateX(-50%); */
    padding-left: 50px;
    padding-right: 20px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    min-width: 200px;
    color: #666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    z-index: 9999;
}

.c-message--icon {
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 40px;
}

.c-message--success {
    background: #13CE66 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%;
}

.c-message--error {
    background: #FF4949 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%;
}

.c-message--info {
    background: #20A0FF url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%;
}

.c-message--warning {
    background: #F7BA2A url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 0 50%;
}

.c-message--close {
    position: absolute;
    right: 10px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
    font-size: 30px;
    top: 0;
    line-height: 34px;
    display: block;
    height: 40px;
}

.c-message--close:hover {
    color: #666;
}

@keyframes messageFadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.c-message.messageFadeInDown {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: messageFadeInDown;
    animation-name: messageFadeInDown;
}

@keyframes messageFadeOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.c-message.messageFadeOutUp {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: messageFadeOutUp;
    animation-name: messageFadeOutUp
}




.card {
    padding: 10px 10px 10px 10px;
    width: 25%;
}
.card-body {
    padding: 20px 20px;
    background-color: #f96868 !important;
    color: #fff!important;
}
.row {
    flex-wrap: wrap;
    display: flex;
}
@media (max-width: 767px) {
    .card {
    padding: 10px 10px 10px 10px;
    width: 50%;
    }
}