html,
body {
   height: 100%;
    width: 100%;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Roboto", "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", BlinkMacSystemFont, -apple-system, "Segoe UI", "Microsoft Yahei", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    margin: 0;
/*
    background-color: #27214a;
    background-image: url(/assets/index/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;*/

    background-color: #18133b;
}

a {


    background-color: transparent;
    text-decoration: none;
    outline: none;
    cursor: pointer;

}

a:hover,
a:focus {
    color: #474157;
}

hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.1);
}

hr.light {
    border-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 200;
    letter-spacing: 1px;
}
h1, h2, h3, h4, h5, h6, p, li {
    margin: 0;
    font-weight: 500;
    list-style: none;
}


.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noDrag {
    -webkit-app-region: no-drag !important;
}

#mainbody {


   
   /* width: 1400px;
   margin: -400px 0 0 -700px;
   */
  /* 
   position: absolute;
  width: 1200px;
    height: 800px;
     margin: -400px 0 0 -600px;
     top: 50%;
    left: 50%;
   

    height: 100%; */

    height: calc(100% - 60px - 70px);

    background-color: #18133b;
    color: #fff;
    
    background-repeat: no-repeat;
    background-size: cover;

}
#mainbody > .container {
 height: 100%;
   color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.header{

    width: 100%;
 
    height: 60px;
    position: relative; 
    background: url(/assets/index/header-left-bg.jpg) no-repeat center center / 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.header-main {
    width: 1400px;
    margin: 0 auto;
}



.header .mlink {
    float: left;
    position: relative;
    margin: 15px 20px;
    line-height: 30px;
    font-size: 16px;
    font-family: '幼圆', YouYuan, 'Microsoft YaHei', sans-serif;
    font-weight: bold;
    color: #ffffff;
    transition: all .2s;
    z-index: 1;
}
.header .mlink:hover:after,.header .mlink.active:after {
    content: " ";
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 67px;
    height: 38px;
    border-radius: 3px;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    background-position: bottom center;
    transform: translate(-50%);
    z-index: -1
}
header .mlink.active,header .mlink:hover {
    transform: scale(1.1);
    font-weight: 500;
    color: #f7f7f7;
}

.header a.logo {
    float: left;
    margin: 0 10px;
    width: 180px;
    height: 60px;
    color: transparent;
    background-image: url(/assets/index/logo.png?t=1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.header .header-right {
    float: right;
    display: flex;
    align-items: center;
    margin-top: 10px;
  
}

.header .header-right .user-info{
    float: left;
    padding-left: 10px;
    position: relative;
    padding-right: 20px;
    display: flex;
    align-items: center;
}


.header .header-right .user-info .user-avatar {
    float: left;
    width: 44px;
    height: 44px;
    position: relative;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    background-image: linear-gradient(180deg, #0ad9e8, #d916f1);
}

.header .header-right .user-info .user-avatar .bg {
   
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #482c84;
}
.header .header-right .user-info .user-avatar .bg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.header .header-right .user-info .user-name {

}
.header .header-right .user-info .user-name .user-name-t {
    margin-left: 10px;
}
.header .header-right .user-info .user-name .user-name-t label {
 max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Arial;
    cursor: pointer;
    color: #fff;
        font-size: 16px;
}
.header .header-right .t-line {
    float: left;
    height: 20px;
    margin: 2px 20px 2px 0;
    width: 1px;
    background: #433e5d;
}



.header .header-right .quit-box {
    float: right;
  
    margin-top: 5px;
    margin-right: 24px;
    font-size: 12px;
    color: #fff9;
    text-align: center;
    cursor: pointer;
}
.header .header-right .quit-box .icon-quit {
    display: block;
    margin: 0 auto 2px;
    width: 14px;
    height: 14px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAALBJREFUOE+dkk0OAUEQhb+X2Nj623EA98CGM7gp4mfjAnYmxoKlA0geLSNBejozatnVX1XeqyfbU6BNvI6SNrGWbM+BG3CJfMglXVPgQdK+ZGv0+b0xCdoeAl1gJ+keJlUF+09oBOTAKsCVwLDBdoDHwAlYfoG2O8XkMrlNoAFkv2ALmCRMioMpV20PPnQuKmks9NU3pzhHD9jWOsc/kTtLikXxFYAZENyMVSZpHWs8APF3cpMtZicvAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
}

/******************List card******************/
.app-main{
    min-height: 100%;
     margin: 0px  auto 0;
     width: 1420px;
     background-color: #18133b;
     padding: 60px 0px 0px;

     
    }

/* 横向滚动图片列表样式 */
.ad-list {
    margin-bottom: 20px;
}
.ad-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #5a5a7d80 transparent;
}
.ad-scroll::-webkit-scrollbar {
    height: 8px;
}
.ad-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.ad-scroll::-webkit-scrollbar-thumb {
    background-color: #5a5a7d80;
    border-radius: 4px;
}
.ad-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.ad-items {
    display: inline-flex;
    padding-bottom: 10px;
}
.ad-item {
    margin-right: 15px;
    width: 300px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.ad-item:hover {
    transform: translateY(-5px);
}
.ad-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-scroll{
    width: calc(100% - 0px);
   /*  height: calc(100% - 200px);
     height: calc(100% - 200px);
   margin: 0px auto;
    overflow-y: auto;
    overflow-x: hidden;*/

  
}
#list-scroll #streamer-list{

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
    
}
.card-item {
    
   /* margin-right: 14px;*/
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 14px;
   /* width: 194px;
   */
   width: 214px;
    height: 290px;

    background-color: #27224c;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
}

.card-item .cover {
    float: left;
    width: 100%;
    /*height: 194px;*/
    height: 214px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.card-item .cover img {
   /* width: 194px;*/
    width: 214px;
   /*  height: 194px;*/
   height: 214px;
    transition: all .2s;
}
.card-item .cover img:hover {
    scale: 1.15;
}
img {
    vertical-align: middle;
    border-style: none;
}


.card-item .cover .in-room {
    position: absolute;
    z-index: 3;
   /* width: 194px;*/
    width: 214px;
    height: 60px;
    left: 0;
    bottom: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAAA8CAYAAAA0eWVYAAAAAXNSR0IArs4c6QAACC5JREFUeF7tnc+LHEUUx9/rnTUxZt3Z6Z6d3ZnJD0MCIfEHiYvRGGWNISYYxPiDoKAogiAERUEiCIIQkAhB8B8QTyKCEfHgyYM3Ubx5NyTmkhhiJD90Z7pkuqq6p193bXX3zvRsxren2arq+nZ9+ltVr6p7ehAAEJJ/Ok2k5JWRxPqSMvMvw22qE1RK0mIZJrBqCfRG3jWr9uz4xJhASQQQoLmu2ZRqFy7EVXU6PRdbOVM+Tdf1sj7zH7X/0PO8qZI6HcswgVVLAKvVanXVnh2fGBMoiQBOTbXckrRYhgmsWgK4fn1jlp7dHTlP9xopnzheJVyjBQ06rJ/vAjD/OK8i/kPP2zQP1wnKdTYr2hytjs9ab9ZyYXtZf/muwvwDPll9df0aYK3Waucbf7g0Exg/Alitzm+KmrVWfbxJWlo0XVczqPry1sP6kkBeboMqf+vwx8b0xi3J08Xg1v5aEGmPXxix2pptG0ci/KzP/Mv1H9brW7YZDfrPv/GsNbfJ/43ppKbwnjWpB1Q9tp7B+sy/n8AQ/Yeuu3m7zY+2fEQ5gguRPoPYjl9pPusz/5X6D2u1rTupEfV4TcfxqJzOyTiy53Q660tgzN9knMH7D2dn7ro3p09XXBxBjWCGNciKBSwVsD7zD2aQPv9hvb51FywR50yS/2l+UafSenU9rB8nyvzjPErwH3relgUATV4pJoxZ1MG0x5haxPqSFPPvxxC6Z3L4/kPX3bYHVKhSUVNFJzwDOYXqdJ2cN7ToqPpB1a+/CWTSYf2QNPMvyX84W9u+NyXS0V8RNH1lMvX+QtGIifUTBJi/RFKa/7A+s2NfyveWTRdCnVg4ZqtylazfMaYdiOpoR7B+uhGYf8Bl8P7DOW/7Yi/4kdXLUEjHqtGXmcMYPmbkThTDyCm8IntwR9UH0FFTu0qPygcqlVCA9Zn/aP2HDXfnfh27J0MU3THojTJTOq1BlwsHetWRTOmm41k/Tob5Sx62G7jZ/YeztbsP9kG2vT5kpSFQwukkgfWXX2gxf9UDlseUeEWRyVdhhINzM/cc7qpHJEA9IjGhVPSjC+F4rvK7OoEcp5MrKj2K5GTP1en0UQzWVyMX8w98Mgr/YWPmviOhcuhw+QH1C6YmDK8+Csun908xQaYuU3ndctZXIJl/2f7DhrfrqYSN9cNzhhEfdLplfrLWazqe9eWUzfxlSEMf5hyC/3DW3X00GpDjQ/YETKTGpF1IlItZukv2f/sGfFVfV8VsMof1Jb4Ursw/ZU0wDP/hXG3Xc5EV6RCtQxu6+qYxjrayaYjX5U31mY5nfUmU+cedNXj/YaO2+1iyIxiEJkh6lwT3jjKuX1EjvmFRQEOfcE7QzWX9+IVXnJk/6Q+D8x82vPtfdMh+rH6WqEsMSkMY/RhrBbTx042c7A7xBrB+fFOB+csZsEz/4by78FIyoLGFOqaRm9Zkqsey3ZSYIWwhlymf9dPJMH/KBefcB1/p9T35p4yTCF1MRrOlZ43lWJ/5j9Z/2Kw98JoAJ9idiKbk5XeFIvubjJ6eHqXKT3q8Zn3mP2r/4fzMQ6+Hxk7c2IpPFLbx35ifr79EE5SuMGukljWCsrUz60SWFQi3P3XtT3bh+/fR08tn5U3LZeCPc+7eN0y+MPnQFmGaVgqZbyyTCmg/YP18jsh6fW3XR6uOI39sug8fz4eVSzOB8SOA87V9b41fs7hFTCAfgV5HeMdx0g/y/Xi6o5a3Pg3u1PE6nwb5tB6qxvrMP41Amf7DpvfIu8mTMPQMaycjPQdM9dByia5hVTJYhySzfjZOzB+b7uJ7ANqY0jj6jrHeTi3oysRh1JZRd2B9CYv5j8p/2HIX36eOzTquD6qDsH6cAPOnIfmwnBbVi83aYx9YZfRQbrpCWdO1kKk+04mwviSTlbONry3fFCmNsT62vcc/1O32CWnHEONH5SRRc8jTP+H3X0dJlNbP+nGnMf/0Nd4w/Ict98BJ64zABZjAmBPApnvgo/xtzD8H5NdY7gjWz7aqsO3OFb0q48cf27WDHxfFwccxgXEhgC3vidPGRVhZreRtkvK3SfoVmT9gyzt0GoQInstC4w2wYj2CvlXJ9OZgoXoi6xe9kZl+fZh/nIvRfyi6uME9fFIATBezOh/FBG59AgjwF7bdw8cFODv6t0FXul1cdCk1qNsFrF9sKf1/5e+A+A3b3pFFAPFCgE71AP2GO+Ek3iEpCdtiSlu+aRBh/YAM8wf5K62l+Q+/wI3TT87AJJ4SgE7RN/CmvIWK/L5B/Fki2g/yvtnWFPv2pbO+hKzQMn+JI20NJnxnSZwIQG2oH3kVfHw0e7SXCD5MP/iRvcpcJVmfBD/MP9bxc5jJET+eu/jdZ0FH2Fx9utqpwCkQ4vYcVXBRJnBrE0Bxo9JxTvx+5Zsr4Y7SJu+Z3UL4b/d+fEEg5vuNtDAmUR+it87HQYXZQsaA4dSt3nkLKp31mX+eLlbIfz2bO5+cvfT1r30xpFRt148eQgEvB8uUof7lffxx0CfD+pLosB7BsF2vUfNHIXz4/PzlM9/rM02MPBu8ZxeEEG8CQBgmDblXJKgV3XSy4c+az/pxUmN1/RFuCOh8eu7St7/0tzJ1Cm7f+XwNJ+EYgtgv5FI7669hmrxmWczJkKj3gwCkgqy/umnzOOsrwOmgxp8/AvgCxA9iyfny/NWvLlMOy8airamjbmXt5B4hxAIibvZ9fxoRKhpbOK2E/lV+y7C/GTuR5P6prCGxVtC/GxFvRlSM9QMyzL9nniUEcVUgnEUUP3du+j/98feZP00j5n+nlZZhQCITIAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: 100% 60px;
}
.card-item .cover .in-room:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/assets/index/room-in-new.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: .75;
}
.card-item .cover .user-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px;
}
.card-item .cover .user-status .t-room {
    padding-left: 20px;
    width: 62px;
    cursor: pointer;
}
.card-item .cover .user-status .t-room:after {
    top: 5px;
    left: 4px;
    width: 14px;
    height: 14px;
    background-image: url(/assets/index/icon-t-room.gif);
}

.card-item .cover .user-status label {
    float: left;
    display: inline-block;
    position: relative;
    margin-right: 4px;
    margin-bottom: 4px;
    padding-left: 16px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 12px;
    background: #00000080;
}
.card-item .cover .user-status label:after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.card-item .cover .user-status .has-full-sts {
    float: left;
    width: 83px;
    background-image: url(/assets/index/has-full-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.card-item .name-row {
    float: left;
    width: 100%;
    padding: 5px 10px;
    position: relative;
}

.card-item .name-row label {
    float: left;
    width: 130px;
    overflow: hidden;
    line-height: 25px;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.audio {
    position: absolute;
    width: 38px;
    height: 38px;
    right: 5px;
    top: -20px;
    z-index: 5;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABKRJREFUeJyVll1oHFUUx8+9M7Mzm03bXZuHUtHUr6AIeRYE+5AnCwVRNh/QxlIFRXxREKw2flHqQ1EfQu1LK5UGxCcFTQ1YgnkQBJ8kQrQvGh+6S6o0NR/Nzse9nnM/Zu/sbpcY+DOTe+/5/+aec+bOctjFX32qsW9iqnGkPtmYHZ9s/lKfaNw2ovtZNYdrduPF+01OTq49MjHeuAYprKcxzIsYXk1jMZrFcq9SIkdFInFMzkMC67SWYv43sF6/GUzVm5+LOLuexTCGIJAJKsXJlAFkRngvSQkDgfN6bXadYo+hx66Ax+prQ4HI/sQdTAsDIbFMC3pIjZt1Goyx6EFefYEncIHMxB8YcFDvxhgKvBoxI25UmHPAygO9TnRAc+BJTEGWimXRkoMqfUkbZnfn3ru76xxTWcF4EctB8jzppDcHyiy7iA1wQDi7ygG97vvJgIWGHpCZvFgAvvjs2ghOTlPxbVMw0a0wYPDwSAAeYx2Q7rVuU4lETBMjB2LQp3kX9kif1cy5Gpw9vx8+urQfnngqcgA91guTYlMeYijgy880qjKVY7ZJCjBnF4MVBiOPl1RaDt7nw2vvVuGD2Ro88JBfrHEHXNqaIoNYnEv/Seism9N5tjNrNQ5pKgt68NEA3j9fg+eer4AHvePznSKDWJxJeQScQnd1nwnYs4dD647sUoKHwtPjA/D62X24hnXFg3tFFu6QHe7bfWauUukNtDqEzfTGuSrce793Vy8u4TACYZhJXXzudmdmZP4PsEP7AUkVzMJLp/eqbrbx3PohAzc3zDnQjaLjoLMr916lpD/MyvMZ+JzpeJnvTItY+F6sUsEtkHek0iq5AxCjYT8lOxK+/GQTdv6V7Xip3z3FALnK8SVe8vCJ6GX25N1ruXVLQGtbtmV35Yxd+XATVn5KCucteWJV0R+vjC9xJF/18RFINMihmEqr7Vu9IdSlt/8W8Nk7G/DXr2khM+SFe1HePpoTi3se/zHAf9QAY5Cnt+Ndoh2q1G2b9FG90Gh5KYbLMxuwfkMUvhpc6jT6THsTg1j8zNe19cDjiwEWu4Si9FJxbeeqcxG19Q8oiEQjHw+cVdzN5dOb8MMXO5C19Jq8q6X2IC/yJfnIIJY6S33GX6FWptYnaGDT63QqvbhffbwNP3/Tgitvb8H3l3ZgY00WUy9NzTCWPMirhB8mUoCM/PB+79vq7yUf5kJ88pISpaC7rgRYXkxUPd2PMZPtFFKaKZY8yCsM1SbmiFH4HiYgXwhLvBnhAloUEtTXT+ozDfZMQPu9snWipjAgjKFY8lBeAW+m6N31AT4zPxSjyWgY8u0wwoVlDMBrCYOCkk6N79uOM3LuVTkIYGLVFb3Ik7y7gPQ3s3DPTXzYQ/hkzTIByxzKBozB+ZPrK9eK9HyZ5MagB3mRp8vo+tVGC2QqhsPAm4uMwcAAmpHwAKerGo8AjUk0xiEa0GtpLgy9OfLohPUEKui1ofjUQvW45/PHoogvUorKFormCpyLOQ/BFynm1NXqcfLo5d33l/db31V/e3OhOoaHcS0I2VFM34WwzFcQukkKI76C6b2A9TtKa2gtxfTz/A9VADdVrcnyhwAAAABJRU5ErkJggg==) no-repeat center center;
}
.audio i {
    float: left;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.audio i.play {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAABRBJREFUSEuFll1sFFUUx//nzszuthQoH21844Fv44tpI0SJgWi02iINyUJMUAnShGDQIEREISxBIgTUB2JiQiEYmxhoQjChWo0GI2jAQHxSkY8HnpRuKV+lnc97zbnzsTNll73Z2W3nzNzfPef+zzmXUHcoKr7637MC6JQKiwk0Vyk1LXrtNoCrQuC8BAb6v37sF4DUo6akWsZSSYnLl8trlQy2S4U5UgJQ/NFf4SD90V+CCELgGgnj4wULWo6VSsRvPDSqAovF8nwTQV8QqHYGKWY8ct0AMZzBAjAMumjAWNPX3/LPROJDwDXFoQ4p5QnfV5PTsPjBatxkkhTUNOm+EGJVX3/rYBqaAa4tDnV4gfzG91ROw/iqEfNqC4jvkQg9NS1yLUOsOJaCJsB1xfJ8zw8u+q5qCgJA71m0P+k9q7mCCW4IAgxTQ0ct02g/GoVXA0tQ4sbKmxdcV7X7XuRZnT2rJ269p+ylCeTyxsVZJ1sWlUBSA9evHHrT82Sv5wKBX18gISy9oupiZyh7aeUAyxLre0+2HiFAUU93+YpjyzmeB8ggmovnUEDbMzn0bJmiEYc/uYdLv7oV5yiyv1vFHq3BYC9zQL4grh0+1TKPNnT/u9T3xRnHVojDmQ7Xof4ZmDrd0LfujgTYVLyViWY9uw6rxUCCacpltHFF+YDryK2Oo8JwRmKJA3ZksCUTwJ6OcgbYW8Mev6/z0gTyeUIuLw7SW68MnXVstcRlD1PAeNbPT89MxMp/bOwazgDr2SvCIeQb6BxtWl6+aY/JVtepDvzs5IwMYPPKMKSxTD6tYY9fSgMLjTRE73SVnfExlWMPAxZNHIvod9+J6Rng+6tGKjQA+45PsK8eyYhYGGFIcwVCQyO5tLlr2Bl/IDWQRRMXae2CAnb3xY0hnGfXGm4QlVHTHoUgrDgRcJJwaUvX8E37gWx1xhU4LVSQzcMPjjZnQrh33Z0M8MPIHt/M2LmYG2EeskoLk2iI3lt+66w9Jpc4YwperNRUTm/9YmoGcHDD3cz/j7IniZ9nwQCFScY52r781gHHllsZmIQ1Tn4Abx+akqkphzbdywCr2uNw8v5FOZhvJE7+g7Sj+/ZSzw7O2GMKDPXdSj6yo2/sakLjZKGh4/clvtw9mgB53ter2Pk+q1MX7xyBYYVGglUwlunStqPz9lV7XM52GcriccMSx0131uMGnu4uaMhvp2zc+Ivdr4xqdt2IjbCksTq1dw3i+t6BaXPDbtF1Z73nBYfZS5fFExWBGFqtJUUizsDDowZADOOiXSDkGqCBOcvsKZ1u7tXAIk4YT3Q+d8GxVZtWq41EQEkjrnpCiXjR2UY33ijvrDyHMILl6dKfAz8t6seqIOkrOzqHF1pS/O7asslloK3guQrSD8NbOUSlOlMKFHf5eN+0dwUOqRj1hHzqo4GZf6crlF7qno6RlxVwynWUxSni8+VFPTJQGhoX96R0RY1WmBR1eMBk73SxJo+A7p2D079Nns9uQggl4LjvqSbPAQIvqkDaUxWe3vhiZWg1qvCkxkCL04Bh4dFCAavTsIc8jOF7nh9eaJrmV34g23R99cNUCT1UiZfhMYL0vgmzAjUtccl3/dd2/hiGMT1qHoRZSE++9MI6obAtCORsLnmJgKJKFJ9b2ENWpmGI65Kw/4/vfjjKApkIq+lh9kFF+1+8sxQCnVBYrBTNI0DXO6Vwl6CugHAewMC275t/rnfU/x/s83e8gY1rJAAAAABJRU5ErkJggg==) no-repeat center center;
}
.audio.play {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAABRBJREFUSEuFll1sFFUUx//nzszuthQoH21844Fv44tpI0SJgWi02iINyUJMUAnShGDQIEREISxBIgTUB2JiQiEYmxhoQjChWo0GI2jAQHxSkY8HnpRuKV+lnc97zbnzsTNll73Z2W3nzNzfPef+zzmXUHcoKr7637MC6JQKiwk0Vyk1LXrtNoCrQuC8BAb6v37sF4DUo6akWsZSSYnLl8trlQy2S4U5UgJQ/NFf4SD90V+CCELgGgnj4wULWo6VSsRvPDSqAovF8nwTQV8QqHYGKWY8ct0AMZzBAjAMumjAWNPX3/LPROJDwDXFoQ4p5QnfV5PTsPjBatxkkhTUNOm+EGJVX3/rYBqaAa4tDnV4gfzG91ROw/iqEfNqC4jvkQg9NS1yLUOsOJaCJsB1xfJ8zw8u+q5qCgJA71m0P+k9q7mCCW4IAgxTQ0ct02g/GoVXA0tQ4sbKmxdcV7X7XuRZnT2rJ269p+ylCeTyxsVZJ1sWlUBSA9evHHrT82Sv5wKBX18gISy9oupiZyh7aeUAyxLre0+2HiFAUU93+YpjyzmeB8ggmovnUEDbMzn0bJmiEYc/uYdLv7oV5yiyv1vFHq3BYC9zQL4grh0+1TKPNnT/u9T3xRnHVojDmQ7Xof4ZmDrd0LfujgTYVLyViWY9uw6rxUCCacpltHFF+YDryK2Oo8JwRmKJA3ZksCUTwJ6OcgbYW8Mev6/z0gTyeUIuLw7SW68MnXVstcRlD1PAeNbPT89MxMp/bOwazgDr2SvCIeQb6BxtWl6+aY/JVtepDvzs5IwMYPPKMKSxTD6tYY9fSgMLjTRE73SVnfExlWMPAxZNHIvod9+J6Rng+6tGKjQA+45PsK8eyYhYGGFIcwVCQyO5tLlr2Bl/IDWQRRMXae2CAnb3xY0hnGfXGm4QlVHTHoUgrDgRcJJwaUvX8E37gWx1xhU4LVSQzcMPjjZnQrh33Z0M8MPIHt/M2LmYG2EeskoLk2iI3lt+66w9Jpc4YwperNRUTm/9YmoGcHDD3cz/j7IniZ9nwQCFScY52r781gHHllsZmIQ1Tn4Abx+akqkphzbdywCr2uNw8v5FOZhvJE7+g7Sj+/ZSzw7O2GMKDPXdSj6yo2/sakLjZKGh4/clvtw9mgB53ter2Pk+q1MX7xyBYYVGglUwlunStqPz9lV7XM52GcriccMSx0131uMGnu4uaMhvp2zc+Ivdr4xqdt2IjbCksTq1dw3i+t6BaXPDbtF1Z73nBYfZS5fFExWBGFqtJUUizsDDowZADOOiXSDkGqCBOcvsKZ1u7tXAIk4YT3Q+d8GxVZtWq41EQEkjrnpCiXjR2UY33ijvrDyHMILl6dKfAz8t6seqIOkrOzqHF1pS/O7asslloK3guQrSD8NbOUSlOlMKFHf5eN+0dwUOqRj1hHzqo4GZf6crlF7qno6RlxVwynWUxSni8+VFPTJQGhoX96R0RY1WmBR1eMBk73SxJo+A7p2D079Nns9uQggl4LjvqSbPAQIvqkDaUxWe3vhiZWg1qvCkxkCL04Bh4dFCAavTsIc8jOF7nh9eaJrmV34g23R99cNUCT1UiZfhMYL0vgmzAjUtccl3/dd2/hiGMT1qHoRZSE++9MI6obAtCORsLnmJgKJKFJ9b2ENWpmGI65Kw/4/vfjjKApkIq+lh9kFF+1+8sxQCnVBYrBTNI0DXO6Vwl6CugHAewMC275t/rnfU/x/s83e8gY1rJAAAAABJRU5ErkJggg==) no-repeat center center;
}
.card-item .cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    width: 100%;
    padding: 5px 7px;
    line-height: 25px;
    cursor: pointer;
}
.card-item .cat-row .cat {
    margin-right: 5px;
    padding: 3px 8px;
    text-align: center;
    border-radius: 12px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #d1c0e5;
    background-image: linear-gradient(90deg, #4d288b, #603aa2);
}
.card-item .cat-row .cat-price {
    flex: 1;
    color: #928da7;
    font-size: 12px;
    text-align: right;
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   

}
.card-item .cat-row .cat-price b {
    color: #ff4881;
    font-size: 22px;
   
    font-weight: 400;
    display: inline-block;
     padding-right: 2px;
}
/*
#mainbody > .container > .text-center {
    text-align: center;
    padding: 350px 0 50px;
    position: relative;
    height: 100vh;
}

#mainbody > .container > .text-center h1 {
    font-size: 50px;
    font-weight: bold;
    color: #171347
}

#mainbody > .container > .text-center > a {
    background: #fdcc52;
    background: -webkit-linear-gradient(#fdcc52, #fdc539);
    background: linear-gradient(#fdcc52, #fdc539);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 300px;
    margin-top: 20px;
    padding: 10px 45px;
    font-size: 14px;
    text-decoration: none;
}

@media (max-height: 500px) {
    #mainbody {
        height: inherit;
    }
}

@media (min-width: 768px) {
    .navbar-default {
        background-color: transparent;
        border-color: transparent;
    }

    #mainbody .index-text {
        text-align: left;
    }
}

@media (max-width: 767px) {

    #mainbody > .container > .text-center {


        padding: 130px 0 0 0;
        height: calc(100vh - 261px);
    }

    #mainbody > .container > .text-center > h1 {


        font-size: 50px;
        margin-bottom: 20px;
    }
}

.footer {
    background-color: #222222;
    padding: 20px 0;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.footer p {
    font-size: 14px;
    margin: 0;
}
*/

/* 加载动画样式 */
.pageLoading {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 0px 0;
    color: #fff;
    font-size: 12px;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fd80b8;
    animation: spin 1s ease-in-out infinite;
    margin-right: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.no-more {
    display: none;
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 14px;
}



.footer{
    clear: both;
    width: 100%;

    height: 50px;
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    opacity: 0.5;
   /* background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);*/

}

.footer .container a,.footer .container a:hover, .footer .container a:focus{
    color: #fff;
    opacity: 0.5;
}



.content-main {
    color: #fff;
    padding: 80px 0 0px;
    width: 1400px;
    min-height: calc(100vh - 130px);
    margin: 0 auto;

}